fix: BUG修改

src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue

@@ -11,11 +11,12 @@
 							start-placeholder="开始时间"
 							end-placeholder="结束时间"
 							:clearable="false"
+							value-format="YYYY-MM-DD HH:mm:ss"
 							size="small"
 							@change="selectRangeTime"
 						/>
 					</div>
-					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small">
+					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small" @change="measurePointChange">
 						<el-option
 							v-for="(item, index) in pointList"
 							:key="index"
@@ -41,7 +42,7 @@
 import Card from "@/components/card.vue";
 import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
 
-import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import { onMounted, ref, computed } from "vue";
 import * as echarts from "echarts";
 import {
 	selectDeepExcavationCurrentDataList,
@@ -67,7 +68,13 @@ let option = ref(null as any);
 let rangeTime = ref("");
 let sensorSn = ref("");
 let measurePointNumber = ref("");
-
+// 监测点名称
+const measurePointName = computed(() => {
+	let item:any = pointList.value.find((item:any) => {
+		return item.measurePointNumber == measurePointNumber.value
+	})
+	return item.measurePointName
+})
 // 当前对应的种类
 // let nowType = ref("温度");
 let pointList = ref([
@@ -101,16 +108,18 @@ let timeList = ref([
 ]);
 
 // 时间轴起止时间
-let startValue = ref("2023-9-19 05:15:00" as any);
+let startValue = ref(null as any);
-let endValue = ref("2023-9-21 05:15:00" as any);
+let endValue = ref(null as any);
-
+const measurePointChange = (e: any) => {
+	getDevList();
+}
 function selectRangeTime(e: any) {
 	// console.log("选择时间", e);
 	// console.log(option.value.series[0].markLine, "数据");
 	// option.value.series[0].markLine = null;
 	startValue.value = e[0];
 	endValue.value = e[1];
-	drawChart();
+	getEdgeAlarmTrend();
 }
 
 function initOption() {
@@ -200,7 +209,7 @@ function initOption() {
 					params[0].seriesName +
 					":" +
 					params[0].value[1] +
-					"kN"
+					"mm"
 				);
 			}
 		},
@@ -298,7 +307,7 @@ function initOption() {
 				// symbol: "circle",
 				symbolSize: 8,
 				smooth: true, //是否平滑
-				name: "基坑监测点001",
+				name: measurePointName,
 				type: "line",
 				// symbol: "emptyCircle",
 				color: "#4AC0F3",
@@ -425,7 +434,9 @@ const getEdgeAlarmTrend = async () => {
 		sensorSn: sensorSn.value,
 		measurePointNumber: measurePointNumber.value,
 		pageNo: 1,
-		pageSize: 10
+		pageSize: 10,
+		startTime: startValue.value,
+		endTime: endValue.value,
 	});
 	if (res.result) {
 		// option.value.xAxis.data = res.result.data.records.map((item: any) => item.x);
@@ -438,9 +449,15 @@ const getEdgeAlarmTrend = async () => {
 	// twenty_four_time.value = res.result.map((item: any) => item.x);
 	// yData.value = res.result.map((item: any) => Number(item.y));
 	console.log("土体分层竖向位移", res);
-	drawChart();
+	if(yData1.value.length > 0){
+		let chartDom:any = document.getElementById("pitRightLeftBottom");
+		chartDom.style.display = "block";
+		drawChart();
+	} else {
+		let chartDom:any = document.getElementById("pitRightLeftBottom");
+		chartDom.style.display = "none";
+	}
 };
-
 onMounted(async () => {
 	// await getEdgeAlarmTrend();
 	getTestPointList();

src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue

@@ -10,17 +10,23 @@
 							range-separator="至"
 							start-placeholder="开始时间"
 							end-placeholder="结束时间"
+							value-format="YYYY-MM-DD HH:mm:ss"
 							:clearable="false"
 							size="small"
 							@change="selectRangeTime"
 						/>
 					</div>
-					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small">
+					<el-select v-model="measurePointNumber" style="width: 15%" size="small" @change="measurePointChange">
-						<el-option v-for="(item, index) in pointList" :key="index" :label="item.measurePointName" :value="item.measurePointNumber" />
+						<el-option
+							v-for="(item, index) in pointList"
+							:key="index"
+							:label="item.measurePointName"
+							:value="item.measurePointNumber"
+						/>
 					</el-select>
-					<el-select v-model="sensorSn" style="width: 15%" size="small">
+					<!-- <el-select v-model="sensorSn" style="width: 15%" size="small">
 						<el-option v-for="(item, index) in timeList" :key="index" :label="item.sensorName" :value="item.sensorSn" />
-					</el-select>
+					</el-select> -->
 				</div>
 				<div id="pitRightFirst" ref="pitRightFirst" style="width: 100%; height: 100%"></div>
 				<div class="notoDta" v-if="yData1.length == 0">
@@ -36,9 +42,13 @@
 import Card from "@/components/card.vue";
 import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
 
-import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import { onMounted, ref, computed } from "vue";
 import * as echarts from "echarts";
-import { selectDeepExcavationCurrentDataList, selectDeepExcavationAllMeasurePointList, getSensorListByMeasurePointNumber } from "@/api/modules/securityManagement";
+import {
+	selectDeepExcavationCurrentDataList,
+	selectDeepExcavationAllMeasurePointList,
+	getSensorListByMeasurePointNumber
+} from "@/api/modules/securityManagement";
 
 // import { getSelectDataListApi } from "@/api/modules/distribution";
 // import Card from "@/components/card.vue";
@@ -57,6 +67,13 @@ let option = ref(null as any);
 // 选中
 let rangeTime = ref("");
 let measurePointNumber = ref("");
+// 监测点名称
+const measurePointName = computed(() => {
+	let item: any = pointList.value.find((item: any) => {
+		return item.measurePointNumber == measurePointNumber.value;
+	});
+	return item.measurePointName;
+});
 let sensorSn = ref("");
 
 // 当前对应的种类
@@ -94,7 +111,9 @@ let timeList = ref([
 // 时间轴起止时间
 let startValue = ref("2023-9-19 05:15:00" as any);
 let endValue = ref("2023-9-21 05:15:00" as any);
-
+const measurePointChange = () => {
+	drawChart();
+};
 function selectRangeTime(e: any) {
 	// console.log("选择时间", e);
 	// console.log(option.value.series[0].markLine, "数据");
@@ -279,7 +298,7 @@ function initOption() {
 				// symbol: "circle",
 				symbolSize: 8,
 				smooth: true, //是否平滑
-				name: "基坑监测点001",
+				name: measurePointName,
 				type: "line",
 				// symbol: "emptyCircle",
 				color: "#4AC0F3",
@@ -302,7 +321,7 @@ function initOption() {
 						// { type: 'average', name: '平均值' }, // 平均值标注线
 						{ yAxis: positiveAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
 						// { yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
-						{ yAxis: negativeAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: negativeAlarmValue.value, name: "报警值", lineStyle: { color: "red" } } // 自定义阈值标注线
 						// { yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
 					],
 					label: {
@@ -391,7 +410,7 @@ const getTestPointList = async () => {
 };
 // 查传感器列表
 const getDevList = async () => {
-	const res: any = await getSensorListByMeasurePointNumber({ projectSn: store.sn, measurePointNumber: measurePointNumber.value});
+	const res: any = await getSensorListByMeasurePointNumber({ projectSn: store.sn, measurePointNumber: measurePointNumber.value });
 	timeList.value = res.result;
 	sensorSn.value = res.result[0].sensorSn;
 	console.log("查传感器列表", res);
@@ -403,19 +422,34 @@ let positiveAlarmValue = ref(0) as any; //正报警值
 
 // 锚杆内力监测
 const getEdgeAlarmTrend = async () => {
-	const res: any = await selectDeepExcavationCurrentDataList({ projectSn: store.sn, sensorSn: sensorSn.value, measurePointNumber: measurePointNumber.value, pageNo: 1, pageSize: 10 });
+	const res: any = await selectDeepExcavationCurrentDataList({
+		projectSn: store.sn,
+		sensorSn: sensorSn.value,
+		measurePointNumber: measurePointNumber.value,
+		pageNo: 1,
+		pageSize: 10,
+		startTime: startValue.value,
+		endTime: endValue.value
+	});
 	if (res.result) {
 		// option.value.xAxis.data = res.result.data.records.map((item: any) => item.x);
 		// option.value.series[0].data = res.result.map((item: any) => Number(item.y));
 		const twoDimensionalArray = res.result.data.records.map(item => [item.receiveTime, item.data]);
-		yData1.value = twoDimensionalArray
+		yData1.value = twoDimensionalArray;
-		positiveAlarmValue.value = res.result.positiveAlarmValue
+		positiveAlarmValue.value = res.result.positiveAlarmValue;
-		negativeAlarmValue.value = res.result.negativeAlarmValue
+		negativeAlarmValue.value = res.result.negativeAlarmValue;
 	}
 	// twenty_four_time.value = res.result.map((item: any) => item.x);
 	// yData.value = res.result.map((item: any) => Number(item.y));
 	console.log("锚杆内力监测", res);
-	drawChart();
+	if(yData1.value.length > 0){
+		let chartDom:any = document.getElementById("pitRightFirst");
+		chartDom.style.display = "block";
+		drawChart();
+	} else {
+		let chartDom:any = document.getElementById("pitRightFirst");
+		chartDom.style.display = "none";
+	}
 };
 
 onMounted(async () => {
@@ -451,7 +485,7 @@ onMounted(async () => {
 		.select-right {
 			position: absolute;
 			display: flex;
-			right: -25%;
+			right: -45%;
 			width: 100%;
 			top: 5%;
 			z-index: 9;

src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue

@@ -10,13 +10,19 @@
 							range-separator="至"
 							start-placeholder="开始时间"
 							end-placeholder="结束时间"
+							value-format="YYYY-MM-DD HH:mm:ss"
 							:clearable="false"
 							size="small"
 							@change="selectRangeTime"
 						/>
 					</div>
-					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small">
+					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small" @change="measurePointChange">
-						<el-option v-for="(item, index) in pointList" :key="index" :label="item.measurePointName" :value="item.measurePointNumber" />
+						<el-option
+							v-for="(item, index) in pointList"
+							:key="index"
+							:label="item.measurePointName"
+							:value="item.measurePointNumber"
+						/>
 					</el-select>
 					<el-select v-model="sensorSn" style="width: 15%" size="small">
 						<el-option v-for="(item, index) in timeList" :key="index" :label="item.sensorName" :value="item.sensorSn" />
@@ -36,10 +42,13 @@
 import Card from "@/components/card.vue";
 import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
 
-import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import { onMounted, ref, computed } from "vue";
 import * as echarts from "echarts";
-import { selectDeepExcavationCurrentDataList, selectDeepExcavationAllMeasurePointList, getSensorListByMeasurePointNumber } from "@/api/modules/securityManagement";
+import {
-
+	selectDeepExcavationCurrentDataList,
+	selectDeepExcavationAllMeasurePointList,
+	getSensorListByMeasurePointNumber
+} from "@/api/modules/securityManagement";
 
 // import { getSelectDataListApi } from "@/api/modules/distribution";
 // import Card from "@/components/card.vue";
@@ -59,6 +68,13 @@ let option = ref(null as any);
 // 选中
 let rangeTime = ref("");
 let measurePointNumber = ref("");
+// 监测点名称
+const measurePointName = computed(() => {
+	let item: any = pointList.value.find((item: any) => {
+		return item.measurePointNumber == measurePointNumber.value;
+	});
+	return item.measurePointName;
+});
 let sensorSn = ref("");
 
 // 当前对应的种类
@@ -94,9 +110,11 @@ let timeList = ref([
 ]);
 
 // 时间轴起止时间
-let startValue = ref("2023-9-19 05:15:00" as any);
+let startValue = ref(null as any);
-let endValue = ref("2023-9-21 05:15:00" as any);
+let endValue = ref(null as any);
-
+const measurePointChange = (e: any) => {
+	getDevList();
+};
 function selectRangeTime(e: any) {
 	// console.log("选择时间", e);
 	// console.log(option.value.series[0].markLine, "数据");
@@ -183,7 +201,7 @@ function initOption() {
 					params[0].seriesName +
 					":" +
 					params[0].value[1] +
-					"kN"
+					"mm"
 				);
 			}
 		},
@@ -281,7 +299,7 @@ function initOption() {
 				// symbol: "circle",
 				symbolSize: 8,
 				smooth: true, //是否平滑
-				name: "基坑监测点001",
+				name: measurePointName,
 				type: "line",
 				// symbol: "emptyCircle",
 				color: "#4AC0F3",
@@ -304,7 +322,7 @@ function initOption() {
 						// { type: 'average', name: '平均值' }, // 平均值标注线
 						{ yAxis: positiveAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
 						// { yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
-						{ yAxis: negativeAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: negativeAlarmValue.value, name: "报警值", lineStyle: { color: "red" } } // 自定义阈值标注线
 						// { yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
 					],
 					label: {
@@ -391,7 +409,7 @@ const getTestPointList = async () => {
 };
 // 查传感器列表
 const getDevList = async () => {
-	const res: any = await getSensorListByMeasurePointNumber({ projectSn: store.sn, measurePointNumber: measurePointNumber.value});
+	const res: any = await getSensorListByMeasurePointNumber({ projectSn: store.sn, measurePointNumber: measurePointNumber.value });
 	timeList.value = res.result;
 	sensorSn.value = res.result[0].sensorSn;
 	console.log("查传感器列表", res);
@@ -403,21 +421,35 @@ let positiveAlarmValue = ref(0) as any; //正报警值
 
 // 立柱竖向位移监测
 const getEdgeAlarmTrend = async () => {
-	const res: any = await selectDeepExcavationCurrentDataList({ projectSn: store.sn, sensorSn: sensorSn.value, measurePointNumber: measurePointNumber.value, pageNo: 1, pageSize: 10 });
+	const res: any = await selectDeepExcavationCurrentDataList({
+		projectSn: store.sn,
+		sensorSn: sensorSn.value,
+		measurePointNumber: measurePointNumber.value,
+		pageNo: 1,
+		pageSize: 10,
+		startTime: startValue.value,
+		endTime: endValue.value
+	});
 	if (res.result) {
 		// option.value.xAxis.data = res.result.data.records.map((item: any) => item.x);
 		// option.value.series[0].data = res.result.map((item: any) => Number(item.y));
 		const twoDimensionalArray = res.result.data.records.map(item => [item.receiveTime, item.data]);
-		yData1.value = twoDimensionalArray
+		yData1.value = twoDimensionalArray;
-		positiveAlarmValue.value = res.result.positiveAlarmValue
+		positiveAlarmValue.value = res.result.positiveAlarmValue;
-		negativeAlarmValue.value = res.result.negativeAlarmValue
+		negativeAlarmValue.value = res.result.negativeAlarmValue;
 	}
 	// twenty_four_time.value = res.result.map((item: any) => item.x);
 	// yData.value = res.result.map((item: any) => Number(item.y));
 	console.log("立柱竖向位移监测", res);
-	drawChart();
+	if(yData1.value.length > 0){
+		let chartDom:any = document.getElementById("pitRightSecond");
+		chartDom.style.display = "block";
+		drawChart();
+	} else {
+		let chartDom:any = document.getElementById("pitRightSecond");
+		chartDom.style.display = "none";
+	}
 };
-
 onMounted(async () => {
 	// await getEdgeAlarmTrend();
 	getTestPointList();

src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue

@@ -11,12 +11,18 @@
 							start-placeholder="开始时间"
 							end-placeholder="结束时间"
 							:clearable="false"
+							value-format="YYYY-MM-DD HH:mm:ss"
 							size="small"
 							@change="selectRangeTime"
 						/>
 					</div>
-					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small">
+					<el-select v-model="measurePointNumber" style="width: 15%; margin-right: 5%" size="small" @change="measurePointChange">
-						<el-option v-for="(item, index) in pointList" :key="index" :label="item.measurePointName" :value="item.measurePointNumber" />
+						<el-option
+							v-for="(item, index) in pointList"
+							:key="index"
+							:label="item.measurePointName"
+							:value="item.measurePointNumber"
+						/>
 					</el-select>
 					<el-select v-model="sensorSn" style="width: 15%" size="small">
 						<el-option v-for="(item, index) in timeList" :key="index" :label="item.sensorName" :value="item.sensorSn" />
@@ -36,10 +42,13 @@
 import Card from "@/components/card.vue";
 import symbolIcon2 from "@/assets/images/toxicGasMonitor/lineIcon2.png";
 
-import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
+import { onMounted, ref, computed } from "vue";
 import * as echarts from "echarts";
-import { selectDeepExcavationCurrentDataList, selectDeepExcavationAllMeasurePointList, getSensorListByMeasurePointNumber } from "@/api/modules/securityManagement";
+import {
-
+	selectDeepExcavationCurrentDataList,
+	selectDeepExcavationAllMeasurePointList,
+	getSensorListByMeasurePointNumber
+} from "@/api/modules/securityManagement";
 
 // import { getSelectDataListApi } from "@/api/modules/distribution";
 // import Card from "@/components/card.vue";
@@ -59,7 +68,13 @@ let option = ref(null as any);
 let rangeTime = ref("");
 let sensorSn = ref("");
 let measurePointNumber = ref("");
-
+// 监测点名称
+const measurePointName = computed(() => {
+	let item: any = pointList.value.find((item: any) => {
+		return item.measurePointNumber == measurePointNumber.value;
+	});
+	return item.measurePointName;
+});
 // 当前对应的种类
 // let nowType = ref("温度");
 let pointList = ref([
@@ -93,16 +108,18 @@ let timeList = ref([
 ]);
 
 // 时间轴起止时间
-let startValue = ref("2023-9-19 05:15:00" as any);
+let startValue = ref(null as any);
-let endValue = ref("2023-9-21 05:15:00" as any);
+let endValue = ref(null as any);
-
+const measurePointChange = (e: any) => {
+	getDevList();
+};
 function selectRangeTime(e: any) {
 	// console.log("选择时间", e);
 	// console.log(option.value.series[0].markLine, "数据");
 	// option.value.series[0].markLine = null;
 	startValue.value = e[0];
 	endValue.value = e[1];
-	drawChart();
+	getEdgeAlarmTrend();
 }
 
 function initOption() {
@@ -182,7 +199,7 @@ function initOption() {
 					params[0].seriesName +
 					":" +
 					params[0].value[1] +
-					"kN"
+					"mm"
 				);
 			}
 		},
@@ -280,7 +297,7 @@ function initOption() {
 				// symbol: "circle",
 				symbolSize: 8,
 				smooth: true, //是否平滑
-				name: "基坑监测点001",
+				name: measurePointName,
 				type: "line",
 				// symbol: "emptyCircle",
 				color: "#4AC0F3",
@@ -303,7 +320,7 @@ function initOption() {
 						// { type: 'average', name: '平均值' }, // 平均值标注线
 						{ yAxis: positiveAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
 						// { yAxis: 150, name: "控制值", lineStyle: { color: "#EEA959" } }, // 自定义阈值标注线
-						{ yAxis: negativeAlarmValue.value, name: "报警值", lineStyle: { color: "red" } }, // 自定义阈值标注线
+						{ yAxis: negativeAlarmValue.value, name: "报警值", lineStyle: { color: "red" } } // 自定义阈值标注线
 						// { yAxis: -150, name: "控制值", lineStyle: { color: "#EEA959" } } // 自定义阈值标注线
 					],
 					label: {
@@ -390,7 +407,7 @@ const getTestPointList = async () => {
 };
 // 查传感器列表
 const getDevList = async () => {
-	const res: any = await getSensorListByMeasurePointNumber({ projectSn: store.sn, measurePointNumber: measurePointNumber.value});
+	const res: any = await getSensorListByMeasurePointNumber({ projectSn: store.sn, measurePointNumber: measurePointNumber.value });
 	timeList.value = res.result;
 	sensorSn.value = res.result[0].sensorSn;
 	console.log("查传感器列表", res);
@@ -402,21 +419,35 @@ let positiveAlarmValue = ref(0) as any; //正报警值
 
 // 地下水位监测
 const getEdgeAlarmTrend = async () => {
-	const res: any = await selectDeepExcavationCurrentDataList({ projectSn: store.sn, sensorSn: sensorSn.value, measurePointNumber: measurePointNumber.value, pageNo: 1, pageSize: 10 });
+	const res: any = await selectDeepExcavationCurrentDataList({
+		projectSn: store.sn,
+		sensorSn: sensorSn.value,
+		measurePointNumber: measurePointNumber.value,
+		pageNo: 1,
+		pageSize: 10,
+		startTime: startValue.value,
+		endTime: endValue.value
+	});
 	if (res.result) {
 		// option.value.xAxis.data = res.result.data.records.map((item: any) => item.x);
 		// option.value.series[0].data = res.result.map((item: any) => Number(item.y));
 		const twoDimensionalArray = res.result.data.records.map(item => [item.receiveTime, item.data]);
-		yData1.value = twoDimensionalArray
+		yData1.value = twoDimensionalArray;
-		positiveAlarmValue.value = res.result.positiveAlarmValue
+		positiveAlarmValue.value = res.result.positiveAlarmValue;
-		negativeAlarmValue.value = res.result.negativeAlarmValue
+		negativeAlarmValue.value = res.result.negativeAlarmValue;
 	}
 	// twenty_four_time.value = res.result.map((item: any) => item.x);
 	// yData.value = res.result.map((item: any) => Number(item.y));
 	console.log("地下水位监测", res);
-	drawChart();
+	if(yData1.value.length > 0){
+		let chartDom:any = document.getElementById("pitRightThird");
+		chartDom.style.display = "block";
+		drawChart();
+	} else {
+		let chartDom:any = document.getElementById("pitRightThird");
+		chartDom.style.display = "none";
+	}
 };
-
 onMounted(async () => {
 	// await getEdgeAlarmTrend();
 	getTestPointList();

src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue

@@ -177,7 +177,8 @@ function drawEchart() {
 					for (let i = 0; i < dataList.value.length; i++) {
 						if (data === dataList.value[i].name) {
 							let value = dataList.value[i].value;
-							let valuePercent = ((dataList.value[i].value / max) * 100).toFixed(2);
+							let reg = /^[0-9]+$/;
+							let valuePercent = reg.test(((dataList.value[i].value / max) * 100).toFixed(2))?((dataList.value[i].value / max) * 100).toFixed(2):0;
 							return "{name| " + data + "}" + "{value|     " + value + "个}" + valuePercent + "%";
 						}
 					}