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="道路类型">
						<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadType"
							placeholder="请输入道路类型" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{
							formData.roadType
							}}</text>
					</uni-forms-item>
					<uni-forms-item label="道路宽度">
						<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.roadWidth"
							placeholder="请输入道路宽度" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.roadWidth }}米</text>
					</uni-forms-item>
					<uni-forms-item label="车辆数">
						<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.laneCount"
							placeholder="请输入车辆数" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.laneCount }}车道</text>
					</uni-forms-item>
					<uni-forms-item label="路面结构">
						<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.roadStructure"
							placeholder="请输入路面结构" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{
							formData.roadStructure
							}}</text>
					</uni-forms-item>
					<uni-forms-item label="路侧防护">
						<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.sideProtec"
							placeholder="请输入路侧防护" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{
							formData.sideProtec
							}}</text>
					</uni-forms-item>
					<uni-forms-item label="中央隔离">
						<input v-if="isEdit" type="text" class="BorderNone Height100" v-model="formData.centerSeparate"
							placeholder="请输入中央隔离" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{
							formData.centerSeparate
							}}</text>
					</uni-forms-item>
					<uni-forms-item label="设计时速">
						<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.designSpeed"
							placeholder="请输入设计时速" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.designSpeed
							}}Km/h</text>
					</uni-forms-item>
					<uni-forms-item label="限速">
						<input v-if="isEdit" type="number" class="BorderNone Height100" v-model="formData.limitSpeed"
							placeholder="请输入限速" />
						<text class="Height100 Flex Flex_C_S-Center Flex_end" v-else>{{ formData.limitSpeed
							}}Km/h</text>
					</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="最大流量">
						<input v-if="isEditStep2" type="number" class="BorderNone Height100"
							v-model="formData.maxTraffic" placeholder="请输入最大流量" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.maxTraffic }}辆</text>
					</uni-forms-item>
					<uni-forms-item label="高峰流量">
						<input v-if="isEditStep2" type="number" class="BorderNone Height100"
							v-model="formData.peakTraffic" placeholder="请输入高峰流量" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.peakTraffic }}辆</text>
					</uni-forms-item>
					<uni-forms-item label="高峰时段">
						<input v-if="isEditStep2" type="number" class="BorderNone Height100"
							v-model="formData.peakHours" placeholder="请输入高峰时段" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{
							formData.peakHours
							}}</text>
					</uni-forms-item>
					<uni-forms-item label="平峰流量">
						<input v-if="isEditStep2" type="number" class="BorderNone Height100"
							v-model="formData.normalTraffic" placeholder="请输入平峰流量" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.normalTraffic
							}}辆</text>
					</uni-forms-item>
					<uni-forms-item label="大车占比">
						<input v-if="isEditStep2" type="number" class="BorderNone Height100"
							v-model="formData.largeVehicleRate" placeholder="请输入大车占比" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.largeVehicleRate
							}}%</text>
					</uni-forms-item>
					<uni-forms-item label="非机动车流量">
						<input v-if="isEditStep2" type="number" class="BorderNone Height100"
							v-model="formData.nonvehicleTraffic" placeholder="请输入非机动车流量" />
						<text class="Height100 Flex Flex_end Flex_C_S-Center" v-else>{{ formData.nonvehicleTraffic
							}}辆</text>
					</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"
							@click="showInvestigationTag(item)">
							<view class="item">{{ item.name }}</view>
						</view>
						<view style="width: 300rpx;">
							<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="row">
					<u-checkbox v-for="(item,index) in troubleshootingData" :label="item.itemname" activeColor="#2663BF"
						:name="item.id"></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" @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">
						<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%">
										{{ item.dangerProblem }}
									</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>
						<u-col :span="12">
							<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 v-if="active === 1" @cancel="isEdit = !isEdit" :cancelText="'更改'" @confirm="
        isEdit = false;
        active = 2;
      " />
		<bottom-button v-else-if="active === 2" :secondText="'更改'" @second="isEditStep2 = !isEditStep2"
			@first="active = 1" @last="active = 3" />
		<bottom-button v-else-if="active === 3" :secondText="'暂存'" @first="active = 2" @second="submit(false)"
			@last="submit(true)" />
	</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.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: 0,
					laneCount: 0,
					roadStructure: "",
					sideProtec: "",
					centerSeparate: "",
					designSpeed: 0,
					limitSpeed: 0,
				},
				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: [],
			};
		},
		methods: {
			showInvestigationTag(v) {
				console.log(v)
				this.showInvestigation2 = true;
				this.showInvestigation2Item = v;
			},
			select2(v, list) {
				// 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;
				// } else {
				// 	this.$.toast("已添加");
				// }
				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)
				}
			},
			select3(v) {
				this.investigationSelectList.map((r) => {
					if (r.nid == v.nid) {
						r = v;
					}
				});
				this.showInvestigation2Item = {};
				this.showInvestigation2 = false;
			},
			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) {
							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.$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"),
						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) {
				// console.log(this.formData);
				// console.log(this.investigationSelectList);
				// console.log({
				// 	...this.formData,
				// 	businessId: this.businessId,
				// 	extraConfigs: extraConfigs,
				// 	describe: this.hiddenDangerList,
				// 	temporary,
				// });
				let extraConfigs = [];
				this.investigationSelectList.map((r) => {
					r.extraConfigs.map((s) => {
						s.scenesId = r.nid;
						if (s.type == 4) {
							s.standar =
								s.fileList && s.fileList.length > 0 ? s.fileList[0].url : "";
						}
						s.fileList = "";
						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
						}

					}
				} catch (e) {
					//TODO handle the exception
				}
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/saveManualInvestigation", {
						...this.formData,
						businessId: this.businessId,
						extraConfigs: extraConfigs,
						describe: describe,
						// 							describe: [{
						//     "bigCategory": "1",
						//     "bigCategoryName": "道路线性断面",
						//     "smallCategory": "2",
						//     "smallCategoryName": "平面线形",
						//     "hdTerm": "4",
						//     "hdTermName": "急弯接桥、隧道、涵洞的",
						//     "hdDesc": "",
						//     "hdPic": "",
						//     "hdInfo": ""
						// }],
						temporary,
					},
						"POST"
					)
					.then((res) => {
						console.log(res);
						if (res.code === 200) {
							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;
		}
	}
</style>