hitap-chat/pages/investigation/task.vue

<template>
	<view id="page">
		<view class="Width100 Box BorderBox">
			<view class="Content BorderBox Width100">
				<top-title :is-show-left="true" :title="'排查'" :rightWidth="40" class="custom_bg">
					<template slot="right">
						<image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')"
							mode="aspectFit" class="InlineBlock imgIcon" style="width: 32rpx"></image>
					</template>
				</top-title>
			</view>
			<view class="stepBox">
				<view class="step-item-box step PositionR" v-for="(item, index) in tablist" :key="index">
					<view class="step-item" v-if="item.type === 'item'">
						<view class="stepItem">
							<view :class="{
                  stepCircleActive: item.i === active,
                  stepCircle: true,
                }">
								{{ item.i }}
							</view>
							<view class="stepText PositionA"
								:style="{ color: item.i === active ? '#000000' : '#bcc3cd' }">
								{{ item.title }}
							</view>
						</view>
					</view>
					<view v-else class="circles">
						<view :class="{ circleActive: index < active, circle: index >= active }" v-for="i in 16"
							:key="i" />
					</view>
				</view>
			</view>
			<view class="formBox" v-if="active === 1">
				<uni-forms :modelValue="formData" border>
					<uni-forms-item label="道路类型">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="text" class="BorderNone Height100 formInput"
								v-model="formData.roadType" placeholder="请输入道路类型" />
							<view class="Height100" v-else>{{ formData.roadType }}</view>
							<view class="Height100"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="道路宽度">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="number" class="BorderNone Height100 formInput"
								v-model="formData.roadWidth" placeholder="请输入道路宽度" />
							<view class="Height100" v-else>{{ formData.roadWidth }}</view>
							<view class="Height100">米</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="车辆数">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="number" class="BorderNone Height100 formInput"
								v-model="formData.laneCount" placeholder="请输入车辆数" />
							<view class="Height100" v-else>{{ formData.laneCount }}</view>
							<view class="Height100">辆</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="路面结构">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="text" class="BorderNone Height100 formInput"
								v-model="formData.roadStructure" placeholder="请输入路面结构" />
							<view class="Height100" v-else>{{ formData.roadStructure }}</view>
							<view class="Height100"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="路侧防护">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="text" class="BorderNone Height100 formInput"
								v-model="formData.sideProtec" placeholder="请输入路侧防护" />
							<view class="Height100" v-else>{{ formData.sideProtec }}</view>
							<view class="Height100"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="中央隔离">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="text" class="BorderNone Height100 formInput"
								v-model="formData.centerSeparate" placeholder="请输入中央隔离" />
							<view class="Height100" v-else>{{ formData.centerSeparate }}</view>
							<view class="Height100"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="设计时速">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="number" class="BorderNone Height100 formInput"
								v-model="formData.designSpeed" placeholder="请输入设计时速" />
							<view class="Height100" v-else>{{ formData.designSpeed }}</view>
							<view class="Height100">Km/h</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="限速">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEdit" type="number" class="BorderNone Height100 formInput"
								v-model="formData.limitSpeed" placeholder="请输入限速" />
							<view class="Height100" v-else>{{ formData.limitSpeed }}</view>
							<view class="Height100">Km/h</view>
						</view>
					</uni-forms-item>
				</uni-forms>
				<!-- <view class="photo">
					<image src="/static/base.jpg" mode="widthFix"></image>
				</view> -->
			</view>
			<view class="echarts" v-if="active === 2">
				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
			</view>
			<view class="formBox form-step-2" v-if="active === 2">
				<uni-forms :modelValue="formData" border label-width="120">
					<uni-forms-item label="最大流量">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
								v-model="formData.maxTraffic" placeholder="请输入最大流量" />
							<view class="Height100" v-else>{{ formData.maxTraffic }}</view>
							<view class="Height100">辆</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="高峰流量">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
								v-model="formData.peakTraffic" placeholder="请输入高峰流量" />
							<view class="Height100" v-else>{{ formData.peakTraffic }}</view>
							<view class="Height100">辆</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="高峰时段">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
								v-model="formData.peakHours" placeholder="请输入高峰时段" />
							<view class="Height100" v-else>{{ formData.peakHours }}</view>
							<view class="Height100"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="平峰流量">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
								v-model="formData.normalTraffic" placeholder="请输入高峰时段" />
							<view class="Height100" v-else>{{ formData.normalTraffic }}</view>
							<view class="Height100">辆</view>
						</view>

					</uni-forms-item>
					<uni-forms-item label="大车占比">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
								v-model="formData.largeVehicleRate" placeholder="请输入大车占比" />
							<view class="Height100" v-else>{{ formData.largeVehicleRate }}</view>
							<view class="Height100">%</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="非机动车流量">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input v-if="isEditStep2" type="number" class="BorderNone Height100 formInput"
								v-model="formData.nonvehicleTraffic" placeholder="请输入非机动车流量" />
							<view class="Height100" v-else>{{ formData.nonvehicleTraffic }}</view>
							<view class="Height100">辆</view>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="formBox form-step-3" v-if="active === 3">
				<view class="point">
					<view class="title">重点排查</view>
					<view class='row' style="display: flex; flex-wrap: wrap; justify-content: space-between;">
						<view style="width: 300rpx;" v-for="item in investigationSelectList" :key="item">

							<view class="item">{{ item.name }}</view>
						</view>
						<view style="width: 300rpx;" v-show="type!='view'">
							<view class="item add" @click="showInvestigation = true">
								<uni-icons type="plusempty" size="24" style="margin-right: 10rpx; color: #2663bf" />
								新增排查
							</view>
						</view>
					</view>
				</view>
				<u-checkbox-group v-model="checked" iconPlacement="right" placement="column">
					<u-checkbox v-for="(item,index) in troubleshootingData" :key="index" :label="item.itemname"
						activeColor="#2663BF" :name="item.id" @click="showInvestigationTag2(item)"
						style="padding: 8px 12px;"></u-checkbox>
				</u-checkbox-group>
				<u-popup :show="showInvestigation" @close="showInvestigation = false">
					<InvestigationItem @select="select2"></InvestigationItem>
				</u-popup>
				<u-popup :show="showInvestigation2" @close="showInvestigation2 = false">
					<InvestigationItem2 :json="showInvestigation2Item" :businessId="this.businessId"
						@show="showInvestigation2 = false" @select="select3"></InvestigationItem2>
				</u-popup>
				<!-- <u-popup :show="showInvestigation" @close="showInvestigation = false">
          <view class="custom-pop-head">
            <view class="left" @click="showInvestigation = false">取消</view>
            <view class="title">重点排查</view>
            <view class="right" @click="investigationHandle1">确认</view>
          </view>
          <view  class="investigation-item"
                 :class="investigationSelect === index ? 'active' : ''"
                 v-for="(item, index) in investigationList"
                 :key="item.name"
                 @click="investigationSelect = index"
          >
            <text>{{ item.name }}</text>
            <uni-icons type="checkmarkempty" size="24" :style="{color: '#2663BF', visibility: investigationSelect === index ? 'visible' : 'hidden'}"/>
          </view>
          <view class="blank" />
        </u-popup> -->
				<u-popup :show="showInvestigationDetail" @close="showInvestigationDetail = false">
					<view class="custom-pop-head">
						<view class="left" @click="showInvestigationDetail = false">取消</view>
						<view class="title">{{ investigationDetailTitle }}</view>
						<view class="right" @click="investigationDetailHandle">确认</view>
					</view>
					<view class="investigation-item" v-for="(item, index) in investigationDetailList" :key="index"
						style="width: 96%; padding: 0">
						<view class="detail-item" v-if="item.type === 'number'">
							<uni-forms-item label="平峰流量" label-width="100px" style="display: flex; align-items: center">
								<u-input placeholder="请输入" border="none" v-model="formData.roadMet" inputAlign="right"
									type="number">
									<u-text text="km/h" slot="suffix" margin="0 3px 0 0" type="tips"></u-text>
								</u-input>
							</uni-forms-item>
						</view>
						<view class="detail-item" v-else-if="item.type === 'text'">
							<uni-forms-item label="平峰流量" label-width="100px" style="display: flex; align-items: center">
								<u-input placeholder="请输入" border="none" v-model="formData.roadMet"
									inputAlign="right" />
							</uni-forms-item>
						</view>
						<view class="detail-item" v-else-if="item.type === 'check'">
							<uni-forms-item label="平峰流量" label-width="100px" style="display: flex; align-items: center">
								<u-checkbox v-model="formData.roadMet"
									:customStyle="{ justifyContent: 'space-between' }" :name="'sdfs'" />
							</uni-forms-item>
						</view>
						<view class="detail-item" v-else-if="item.type === 'upload'">
							<uni-forms-item label="平峰流量" label-position="top" label-width="100px"
								style="display: flex; align-items: center" />
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="10"></u-upload>
						</view>
					</view>
					<view class="blank" />
				</u-popup>
			</view>
			<view class="formBox form-step-3" v-if="active === 3">
				<view class="point">
					<view class="title">存在隐患</view>

					<u-row :gutter="0" justify="flex-start" style="flex-wrap: wrap">
						<scroll-view style="max-height: 400px;" :scroll-top="0" scroll-y="true" show-scrollbar="true">
							<view v-for="(item,index) in hiddenDangerList" :key="item" style="width: 100%">
								<view class="problem-item">
									<view style="display: flex; justify-content: space-between">
										<view style="width: 80%;line-height: 30px;">
											{{ item.hdTermName }}
										</view>
										<view>
											<view class="check" @click="onHiddenDangerList(item,index)">
												<image style="width: 10px; height: 16px"
													src="../../static/scimg/right6.png"></image>
												<!-- <uni-icons
                        type="right"
                        size="24"
                        style="color: #2663bf"
                      /> -->
											</view>
										</view>
									</view>
									<!-- <view class="text">{{ item.hdTerm }}</view> -->
									<!-- <view class="text">{{ item.hdDesc }}</view> -->
								</view>
							</view>

						</scroll-view>
						<u-col :span="12" v-show="type!='view'">
							<view class="problem-item add" @click="add">
								<uni-icons type="plusempty" size="24" style="margin-right: 10rpx; color: #2663bf" />
								新增隐患
							</view>
						</u-col>
					</u-row>
				</view>
				<u-popup :show="showProblem" @close="showProblem = false">
					<view class="custom-pop-head">
						<view class="left" @click="
                showProblem = false;
                hiddenDangerList2 = [];
                describe.hdDesc = '';
                describe.hdInfo = '';
              ">取消</view>
						<view class="title">存在隐患</view>
						<view class="right" @click="investigationHandle2">确认</view>
					</view>
					<view class="problem-box">
						<view class="detail-item" @click="addFL">
							<uni-forms-item label="隐患问题" label-position="top" label-width="100px"
								style="display: flex; align-items: center" />
							<view v-if="hiddenDangerList2.length > 0">{{ hiddenDangerList2[0].itemname }}/{{
								hiddenDangerList2[1].itemname
								}}/{{ hiddenDangerList2[2].itemname }}</view>

							<!-- <u-input
                  placeholder="请选择"
                  border="none"
                  type="textarea"
                  v-else
                  /> -->
							<view v-else-if="dangerProblem">{{
								dangerProblem
								}}</view>
							<view v-else>请选择</view>
							<!--  -->
						</view>
						<view class="detail-item">
							<uni-forms-item label="隐患描述" label-position="top" label-width="200px" />
							<u-textarea placeholder="请输入" border="none" v-model="describe.hdDesc" />
						</view>
						<view class="detail-item">
							<uni-forms-item label="隐患图片" label-position="top" label-width="200px" />

							<u-upload :fileList="fileList" @afterRead="(e) => afterRead(e, 'fileList')"
								@delete="(e) => deletePic(e, 'fileList')" name="1" :maxCount="1"></u-upload>
						</view>
						<view class="detail-item">
							<uni-forms-item label="补充信息" label-position="top" label-width="200px" />
							<u-textarea placeholder="请输入" border="none" v-model="describe.hdInfo" />
						</view>
					</view>
					<view class="blank" />
				</u-popup>

				<u-popup :show="showProblemTreeSelect" @close="showProblemTreeSelect = false" height="70vh">
					<view class="custom-pop-head">
						<view class="left" @click="
                showProblemTreeSelect = false;
                showProblem = true;
              ">取消</view>
						<view class="title">选择隐患</view>
						<view class="right" @click="showProblemTreeSelectHandle">确认</view>
					</view>
					<ProblemTreeItem :hiddenDangerList2="hiddenDangerList2" @select="select"></ProblemTreeItem>
				</u-popup>
			</view>
			<view class="blank" />
		</view>
		<bottom-button-two :type="type" v-if="active === 1" @cancel="isEdit = !isEdit" :cancelText="isEdit?'取消':'更改'"
			@confirm="
        isEdit = false;
        active = 2;
      " />
		<bottom-button :type="type" v-else-if="active === 2" :secondText="isEditStep2?'取消':'更改'"
			@second="isEditStep2 = !isEditStep2" @first="active = 1" @last="active = 3" />
		<bottom-button isSubmit :type="type" v-else-if="active === 3" :secondText="'暂存'" @first="active = 2"
			@second="submit(false)" @last="submit(true)" />
		<u-modal :show="modalShow" content="您未录入任何隐患问题，该点段将以“无隐患”结论提交结果，请确认是否提交？" confirm-text="确定" cancel-text="取消"
			:showConfirmButton="true" :showCancelButton="true" @confirm="postSaveManualInvestigation"
			@cancel="modalShow = false" :closeOnClickOverlay="false"></u-modal>

	</view>
</template>

<script>
	import BottomButton from "../../components/bottom-button/three.vue";
	import BottomButtonTwo from "../../components/bottom-button/index.vue";
	import NoData from "../../components/no-data.vue";
	import TopTitle from "../../components/top-title.vue";

	import InvestigationItem from "./components/investigation-item.vue";
	import InvestigationItem2 from "./components/investigation-item2.vue";
	import ProblemTreeItem from "./components/problem-tree-item.vue";
	import ProblemBox from "./components/problem-box.vue";
	export default {
		components: {
			TopTitle,
			NoData,
			BottomButton,
			BottomButtonTwo,

			InvestigationItem,
			InvestigationItem2,
			ProblemTreeItem,
			ProblemBox,
		},
		onReady() {
			this.getChartsData();
		},
		onLoad(e) {
			if (e.id) {
				this.businessId = e.id;

				this.type = e.type;
				this.getBaseData(e.id);
			}
		},
		data() {
			return {
				businessId: "",
				$: this.$,
				fileList1: [],
				fileList: [],
				showInvestigation: false,
				showInvestigation2: false,
				showInvestigation2Item: {},
				investigationSelectList: [],
				investigationSelectIDList: [],
				investigationList: [{
					name: "基本信息基本信息基本信息基本信息基本信息基本信息基本信息基本信息基本信息基本信息基本信息基本信息",
					value: 1,
				},
				{
					name: "xxxxx",
					value: 2
				},
				],
				investigationSelect: 1,
				showInvestigationDetail: false,
				investigationDetailList: [{
					type: "check",
					value: ""
				},
				{
					type: "text",
					value: ""
				},
				{
					type: "number",
					value: ""
				},
				{
					type: "upload",
					value: ""
				},
				],
				investigationDetailTitle: "title",
				isEdit: false,
				isEditStep2: false,
				active: 1,
				tablist: [{
					title: "基本信息",
					type: "item",
					i: 1
				},
				{
					title: "基本信息",
					type: "point"
				},
				{
					title: "统计信息",
					type: "item",
					i: 2
				},
				{
					title: "统计信息",
					type: "point"
				},
				{
					title: "隐患排查",
					type: "item",
					i: 3
				},
				],
				formData: {
					roadType: "",
					roadWidth: "",
					laneCount: "",
					roadStructure: "",
					sideProtec: "",
					centerSeparate: "",
					designSpeed: "",
					limitSpeed: "",
				},
				describe: {
					bigCategory: "",
					smallCategory: "",
					hdTerm: "",
					hdDesc: "",
					hdPic: "",
					hdInfo: "",
				},
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: [
						"#1890FF",
						"#FAC858",
						"#91CB74",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: [15, 15, 15, 15],
					enableScroll: false,
					legend: {
						icon: "rect",
						position: "top",
						float: "right",
						padding: 15,
					},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow",
						},
					},
				},
				showProblem: false,
				showProblemTreeSelect: false,
				problemTreeSelect: 0,
				problemTreeSelectList: [{
					name: "ashfjshfjsd1"
				},
				{
					name: "ashfjshfjsd2"
				},
				{
					name: "ashfjshfjs3d"
				},
				{
					name: "ashfjshfjsd4"
				},
				{
					name: "ashfjshfjsd5"
				},
				{
					name: "ashfjshfjsd6"
				},
				{
					name: "ashfjshfjsd8"
				},
				{
					name: "ashfjshfjsd7"
				},
				],
				problemTreeSelectConfirmList: [],
				hiddenDangerList: [],
				hiddenDangerList2: [],
				hiddenDangerList3: [],
				dangerProblem: "",
				//隐患新增或者编辑判断标识
				addInvestigationInfo: {
					type: '',
					index: 0
				},
				//选中排查数据
				troubleshootingData: [],
				checked: [],
				modalShow: false,
				extraConfigs: [],
				describeArr: [],
				temporary: '',
				type: ''
			};
		},
		methods: {
			showInvestigationTag(v) {
				console.log(v)
				this.showInvestigation2 = true;
				this.showInvestigation2Item = v;
			},

			showInvestigationTag2(v) {
				console.log(v, this.investigationSelectList)
				if (this.checked.includes(v.id)) {
					this.showInvestigation2 = true;
					this.showInvestigation2Item = v
				}

			},
			select2(v, list, list2) {
				list.dangerItems.forEach(item => {
					// 假设this.troubleshootingData中没有与当前item.id相同的id  
					let found = false;

					// 遍历this.troubleshootingData数组来查找id  
					this.troubleshootingData.forEach(item2 => {
						if (item.id === item2.id) {
							// 如果找到了，设置found为true并退出循环  
							found = true;
							return;
						}
					});

					// 如果在this.troubleshootingData中没有找到相同的id，则将其添加到result数组中  
					if (!found) {
						this.troubleshootingData.push(item);
					}
				});
				// this.troubleshootingData = result
				this.showInvestigation = false
				let isId = this.investigationSelectList.some(item => item.nid === list.nid);
				if (!isId) {
					this.investigationSelectList.push(list)
				} else {
					this.$.toast("已添加");
				}
				// this.showInvestigation = false;
				// let id = 0;
				// this.investigationSelectList.map((r) => {
				// 	if (r.nid == v.nid) {
				// 		id = r.nid;
				// 	}
				// });
				// if (!id) {
				// 	v.extraConfigs = list;
				// 	this.investigationSelectList.push(v);
				// 	this.showInvestigation = false;

				// 	list2.dangerItems.forEach(item => {
				// 	// 假设this.troubleshootingData中没有与当前item.id相同的id  
				// 	let found = false;

				// 	// 遍历this.troubleshootingData数组来查找id  
				// 	this.troubleshootingData.forEach(item2 => {
				// 		if (item.id === item2.id) {
				// 			// 如果找到了，设置found为true并退出循环  
				// 			found = true;
				// 			return;
				// 		}
				// 	});

				// 	// 如果在this.troubleshootingData中没有找到相同的id，则将其添加到result数组中  
				// 	if (!found) {
				// 		this.troubleshootingData.push(item);
				// 	}
				// });
				// // this.troubleshootingData = result
				// // let isId = this.investigationSelectList.some(item => item.nid === list.nid);
				// // if (!isId) {
				// // 	this.investigationSelectList.push(list)
				// // }
				// } else {
				// 	this.$.toast("已添加");
				// }

			},
			select3(v) {
				// this.investigationSelectList.map((r) => {
				// 	if (r.nid == v.nid) {
				// 		r = v;
				// 	}
				// });
				console.log(v)
				this.showInvestigation2Item = {};
				this.showInvestigation2 = false;
				this.troubleshootingData.map(r => {
					if (r.id == v.id) {
						r.checkedSelect = v.checkedSelect
						r.extraConfigs = v.extraConfigs
					}
				})
			},
			onHiddenDangerList(v, index) {
				this.addInvestigationInfo = {
					type: 'edit',
					index: index
				}
				this.showProblem = true;
				this.dangerProblem = v.dangerProblem;
				this.describe = {
					bigCategory: v.bigCategory,
					smallCategory: v.smallCategory,
					hdTerm: v.hdTerm,
					hdDesc: v.hdDesc,
					hdPic: v.hdPic,
					hdInfo: v.hdInfo,
				};
				console.log(v)
				let newArr = []
				try {
					newArr = v.dangerProblem.split('/')
				} catch (e) {
					newArr = ['', '', '']
				}
				this.hiddenDangerList2 = [{
					id: v.bigCategory,
					itemname: newArr[0]
				},
				{
					id: v.smallCategory,
					itemname: newArr[1]
				},
				{
					id: v.hdTerm,
					itemname: newArr[2]
				}
				]
				// console.log(this.hiddenDangerList2)

				if (v.hdPic) {
					this.fileList = [{
						url: v.hdPic
					}];
				} else {
					this.fileList = [];
				}

			},
			add() {
				// this.addInvestigationInfo.type='add'
				this.$set(this.addInvestigationInfo, 'type', 'add')
				this.showProblem = true;
				this.hiddenDangerList2 = [];
				this.dangerProblem = '';
				this.describe = {
					bigCategory: "",
					smallCategory: "",
					hdTerm: "",
					hdDesc: "",
					hdPic: "",
					hdInfo: "",
				};
				this.fileList = [];
			},
			addFL() {
				this.showProblemTreeSelect = true;
				this.showProblem = false;
				// this.describe = {
				//   bigCategory: "",
				//   smallCategory: "",
				//   hdTerm: "",
				//   hdDesc: "",
				//   hdPic: "",
				//   hdInfo: "",
				// };
				// this.fileList = [];
			},
			getBaseData(businessId) {
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getSectionInfo", {
						nuserid: this.$.getData("token"),
						businessId
					},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							for (let k in res.result) {
								if (res.result[k] == 0) {
									res.result[k] = ""
								}
							}
							this.formData = {
								...this.formData,
								...res.result
							};
						}
					});
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getSectionTraffic", {
						nuserid: this.$.getData("token"),
						businessId
					},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							// todo 无数据结构
							this.formData = {
								...this.formData,
								...res.result
							};
						}
					});
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getImportDangerDisplay", {
						sid: "02",
						businessId
					},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							// todo 无数据结构
							this.investigationSelectList = res.result;
							this.investigationSelectList.map((r) => {

								this.troubleshootingData = [...this.troubleshootingData, ...r.dangerItems]
							});
							this.checked = this.troubleshootingData.map(r => {
								if (r.checked == 1) {
									return r.id
								}
							})
							// this.$request
							// 	.globalRequest(
							// 		"/hiddenDanger/highDanger/getImportDangerDisplayDetail", {
							// 		nuserid: this.$.getData("token"),
							// 		businessId,
							// 		dangerId: '26'
							// 	},
							// 		"GET"
							// 	)
							// 	.then((res) => {
							// 		if (res.code === 200) {
							// 			this.investigationSelectList.map((r) => {
							// 				r.extraConfigs = [];
							// 				res.result.map((m) => {
							// 					if (r.nid == m.scenesId) {
							// 						r.extraConfigs.push(m);
							// 					}
							// 				});
							// 			});
							// 		}
							// 	});
						}
					});
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getImportDangers", {
						nuserid: this.$.getData("token"),
						businessId
					},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							this.investigationList = res.result;
						}
					});
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getUserHiddenDangerList", {
						nuserid: this.$.getData("token"),
						pcType: 2,
						businessId
					},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							console.log(res.result);
							this.hiddenDangerList = res.result;
						}
					});
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getDangerItems", {
						nuserid: this.$.getData("token"),
						businessId
					},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							this.problemTreeSelectConfirmList = res.result;
						}
					});
			},
			handleSelectProblem(item, index) {
				// this.problemTreeSelectConfirmList.push(item)
			},
			showProblemTreeSelectHandle() {
				if (this.hiddenDangerList3.length == 3) {
					this.showProblemTreeSelect = false;
					this.showProblem = true;
					this.hiddenDangerList2 = JSON.parse(
						JSON.stringify(this.hiddenDangerList3)
					);
				}
				console.log(this.hiddenDangerList2)
			},

			select(v) {
				this.hiddenDangerList3 = v;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
			investigationHandle1() {
				let id = 0;
				this.investigationSelectList.map((r) => {
					if (r.nid == this.investigationList[this.investigationSelect].nid) {
						id = r.id;
					}
				});
				if (!id) {
					this.investigationSelectList.push(
						this.investigationList[this.investigationSelect]
					);
					this.showInvestigation = false;
				} else {
					this.$.toast("已添加");
				}
			},
			investigationHandle2() {
				if (this.hiddenDangerList2.length > 0) {
					let form = {
						bigCategory: this.hiddenDangerList2[0].id,
						bigCategoryName: this.hiddenDangerList2[0].itemname,
						smallCategory: this.hiddenDangerList2[1].id,
						smallCategoryName: this.hiddenDangerList2[1].itemname,
						hdTerm: this.hiddenDangerList2[2].id,
						hdTermName: this.hiddenDangerList2[2].itemname,
						hdDesc: this.describe.hdDesc,
						hdPic: this.fileList.length > 0 ? this.fileList[0].url : '',
						hdInfo: this.describe.hdInfo,
						dangerProblem: this.hiddenDangerList2[0].itemname + '/' + this.hiddenDangerList2[1].itemname +
							'/' + this.hiddenDangerList2[2].itemname
					}
					if (this.addInvestigationInfo.type == 'add') {
						this.hiddenDangerList.push(form);
					} else {
						this.$set(this.hiddenDangerList, this.addInvestigationInfo.index, form)
					}
				}

				this.showProblem = false;
			},
			investigationDetailHandle() {
				this.showInvestigationDetail = true;
			},
			getChartsData() {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
					series: [{
						name: "总量",
						legendShape: "line",
						data: [35, 8, 25, 37, 4, 20],
					},
					{
						name: "大车",
						legendShape: "line",
						data: [70, 40, 65, 100, 44, 68],
					},
					{
						name: "小车",
						legendShape: "line",
						data: [100, 80, 95, 150, 112, 132],
					},
					],
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			// 删除图片
			deletePic(event, key) {
				this[key].splice(event.index, 1);
			},
			//获取随机id
			uuid(len, binary) {
				len = !len ? 36 : len;
				binary = !binary ? 16 : binary;
				return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
					.replace(/[xy]/g, function (c) {
						var r = (Math.random() * binary) | 0,
							v = c == "x" ? r : (r & 0x3) | 0x8;
						return v.toString(binary);
					})
					.substring(0, len);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						success: (res) => {
							resolve(res.data);
						},
					});
				});
			},
			async afterRead(event, key) {
				console.log(key)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				const id = this.uuid();
				this[key].push({
					id,
					...event.file,
					status: "uploading",
					message: "上传中",
				});
				const result = await this.uploadFilePromise(this[key][0].url);
				const resultInfo = JSON.parse(result);
				const index = this[key].findIndex((v) => v.id === id);
				if (resultInfo.code == 200) {
					this[key].splice(
						index,
						1,
						Object.assign(this[key][0], {
							status: "success",
							message: "",
							result: resultInfo,
							url: resultInfo.result,
						})
					);
					console.log(this[key])
				} else {
					this.$.toast("上传失败");
					this[key].splice(
						index,
						1,
						Object.assign(this[key][0], {
							status: "error",
							message: "失败",
						})
					);
				}
			},
			submit(temporary) {
				//查看情况下 直接返回上一页
				if (this.type == 'view') {
					return uni.navigateBack();
				}
				let checkedArr = this.troubleshootingData.filter(r => this.checked.includes(r.id))
				console.log(checkedArr)

				let extraConfigs = [];
				checkedArr.map((r) => {
					if (!r.extraConfigs) return
					r.extraConfigs.map((s) => {
						s.scenesId = r.nid;
						s.dangerId = r.id;
						if (s.type == 4) {
							s.standar =
								s.fileList && s.fileList.length > 0 ? s.fileList[0].url : "";
						}
						delete s.fileList;
						delete s.nid;
						extraConfigs.push(s);
					});
				});
				let describe = JSON.parse(JSON.stringify(this.hiddenDangerList))
				try {
					for (let item of describe) {
						if (item.nid) {
							delete item.nid
						}
						if (item.businessId) {
							delete item.businessId
						}
						if (item.pcCount || item.pcCount == null) {
							delete item.pcCount
						}
						if (item.dangerProblem) {
							delete item.dangerProblem
						}
						item.pcType = 2
					}
				} catch (e) {
					//TODO handle the exception
				}

				checkedArr.map(r => {
					describe.push({
						hdTerm: r.id,
						hdDesc: r.checkedSelect ? r.checkedSelect.hdDesc : '',
						hdPic: r.checkedSelect ? r.checkedSelect.hdPic : '',
						hdInfo: r.checkedSelect ? r.checkedSelect.hdPic : '',
						pcType: 1
					})
				})
				console.log(this.investigationSelectList);
				console.log(this.troubleshootingData);
				console.log({
					...this.formData,
					businessId: this.businessId,
					extraConfigs: extraConfigs,
					describe: describe,
				});
				this.extraConfigs = extraConfigs
				this.describeArr = describe
				this.temporary = temporary
				console.log(this.extraConfigs, this.describeArr)
				if (!temporary) {
					this.postSaveManualInvestigation()
					return
				}
				if (this.extraConfigs.length <= 0 || this.describeArr.length <= 0) {
					this.modalShow = true
				} else {
					this.postSaveManualInvestigation()
				}

			},
			postSaveManualInvestigation() {
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/saveManualInvestigation", {
						...this.formData,
						businessId: this.businessId,
						extraConfigs: this.extraConfigs,
						describe: this.describeArr,
						temporary: this.temporary,
						// 							describe: [{
						//     "bigCategory": "1",
						//     "bigCategoryName": "道路线性断面",
						//     "smallCategory": "2",
						//     "smallCategoryName": "平面线形",
						//     "hdTerm": "4",
						//     "hdTermName": "急弯接桥、隧道、涵洞的",
						//     "hdDesc": "",
						//     "hdPic": "",
						//     "hdInfo": ""
						// }],
					},
						"POST"
					)
					.then((res) => {
						console.log(res);
						if (res.code === 200) {
							if (this.temporary) {
								this.$.toast("保存成功");
							} else {
								this.$.toast("暂存成功");
							}
							setTimeout(() => {
								uni.navigateBack({
									delta: 2, // 默认值是1，表示返回的页面层数
								});
							}, 1000);

							// this.data = res.result;
							// this.rname = this.data[0].name;
							// this.polyline = [
							//   {
							//     name: "xian1",
							//     arrowLine: true,
							//     color: "#CC2936",
							//     width: 8,
							//     id: 1,
							//     points: this.data[0].position,
							//   },
							// ];
						} else {
							this.$.toast(res.msg);
						}
					});
			}
		},
	};
</script>

<style lang="scss">
	#page {
		background: #f6f8fa;
	}

	.Box {
		padding-top: var(--status-bar-height);

		.Content {
			padding-bottom: 88rpx;
		}
	}

	.stepBox {
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 40rpx 100rpx 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #ffffff;
		box-shadow: 0 2px 8px #cccccc;

		.step {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 100rpx;

			.stepItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				zoom: 1.2;
			}

			.circles {
				display: flex;
				// justify-content: space-between;
				padding: 22px 0;

				.circle {
					width: 4rpx;
					height: 4rpx;
					border-radius: 50%;
					background-color: #e9edf5;
					margin: 0 1px;
				}

				.circleActive {
					width: 4rpx;
					height: 4rpx;
					border-radius: 50%;
					background-color: #ccc;
					margin: 0 1px;
				}
			}

			.stepCircle {
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50%;
				background-color: #e9edf5;
				color: #a0abbd;
				text-align: center;
				margin-bottom: 10rpx;
			}

			.stepCircleActive {
				zoom: 1.5;
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 50%;
				background-color: #295cbc;
				color: #ffffff;
				text-align: center;
				margin-bottom: 4rpx;
				border: 5px solid #c6d8fc;
			}

			.stepText {
				font-size: 14px;
				color: #bcc3cd;
				width: 120rpx;
				text-align: center;
				bottom: -60rpx;
			}
		}
	}

	.blank {
		width: 100%;
		height: 100rpx;
	}

	.formBox {
		margin: 30rpx 20rpx;
		border: 1px solid #e6e6e6;
		background: #ffffff;
		padding: 0 20rpx 20rpx;
		box-sizing: border-box;

		/deep/ .uni-forms-item--border .uni-forms-item__content {
			justify-content: flex-end;
			text-align: right;
		}

		.photo {
			width: 100%;

			image {
				width: 100%;
			}
		}
	}

	.echarts {
		background: #ffffff;
		width: calc(100% - 40rpx);
		margin: 20rpx;
		box-sizing: border-box;
		border: 1px solid #e6e6e6;
	}

	.point {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 20px;
			position: relative;
			margin-bottom: 20rpx;
		}

		.title::after {
			content: " ";
			position: absolute;
			left: -20rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 80%;
			vertical-align: middle;
			background: #2663bf;
			z-index: 90;
		}

		.item {
			background: #f0f3f7;
			padding: 20rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			height: 100rpx;
			box-sizing: border-box;
			overflow: hidden;

			&.add {
				background: #dfebf8;
				color: #2663bf;
			}
		}

		.problem-item {
			background: #f0f3f7;
			padding: 20rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			.check {
				background: #dce4f2;
				border-radius: 20rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&.add {
				background: #dfebf8;
				color: #2663bf;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.row {
		display: block;
	}

	.row::after {
		content: "";
		display: table;
		clear: both;
	}

	.custom-pop-head {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e6e6e6;
		margin-bottom: 20rpx;

		.left {
			color: #666666;
		}

		.title {
			font-size: 16px;
		}

		.right {
			color: #2663bf;
		}
	}

	.investigation-item {
		margin: 0 auto 20rpx;
		width: 90%;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;

		&.active {
			background: #dfebf8;
		}
	}

	.detail-item {
		width: 100%;
		background: #f0f3f7;
		padding: 20rpx 30rpx;
		border-radius: 8rpx;
		box-sizing: border-box;

		/deep/ .uni-forms-item__content {
			justify-content: flex-end;
			text-align: right;
			display: flex;
		}

		/deep/ .uni-forms-item {
			margin-bottom: 0;
		}

		/deep/ .uni-forms-item__label {
			font-size: 16px;
		}
	}

	.problem-box {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		max-height: calc(100vh - 100px);
		overflow: auto;

		.detail-item {
			margin-bottom: 20rpx;
		}
	}

	.breadcrumb {
		padding: 0 20rpx;
		overflow-x: auto;
	}

	.u-checkbox-group--row {
		flex-direction: column;
		padding: 0 20rpx;

		.u-checkbox {
			margin-bottom: 30rpx;
		}
	}

	::v-deep ::-webkit-scrollbar {
		// 滚动条整体样式
		display: block;
		width: 16rpx !important;
		height: 16rpx !important;
		-webkit-appearance: auto !important;
		background: transparent;
		overflow: auto !important;
	}

	::v-deep ::-webkit-scrollbar-thumb {
		// 滚动条里面小方块
		border-radius: 16rpx !important;
		box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #f7f7f7 !important;
	}

	::v-deep ::-webkit-scrollbar-track {
		// 滚动条
		border-radius: 16rpx !important;
		box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
		background-color: #dad8d8 !important;
	}

	.formInput {
		width: 90%;
		margin-right: 4px;
		font-size: 14px;
	}
</style>