diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue index 493b885..73ef712 100644 --- a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/leftBottom.vue +++ b/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" /> - + { + 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 endValue = ref("2023-9-21 05:15:00" as any); - +let startValue = ref(null 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(); diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue index 001b565..32c9b9e 100644 --- a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightFirst.vue +++ b/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" /> - - + + - +
@@ -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 - positiveAlarmValue.value = res.result.positiveAlarmValue - negativeAlarmValue.value = res.result.negativeAlarmValue + yData1.value = twoDimensionalArray; + positiveAlarmValue.value = res.result.positiveAlarmValue; + 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; diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue index 4caedbf..efb912a 100644 --- a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightSecond.vue +++ b/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" />
- - + + @@ -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 endValue = ref("2023-9-21 05:15:00" as any); - +let startValue = ref(null 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 - positiveAlarmValue.value = res.result.positiveAlarmValue - negativeAlarmValue.value = res.result.negativeAlarmValue + yData1.value = twoDimensionalArray; + positiveAlarmValue.value = res.result.positiveAlarmValue; + 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(); diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue index cd1a093..adae4e7 100644 --- a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/rightThird.vue +++ b/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" /> - - + + @@ -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 endValue = ref("2023-9-21 05:15:00" as any); - +let startValue = ref(null 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 - positiveAlarmValue.value = res.result.positiveAlarmValue - negativeAlarmValue.value = res.result.negativeAlarmValue + yData1.value = twoDimensionalArray; + positiveAlarmValue.value = res.result.positiveAlarmValue; + 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(); diff --git a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue index 50cd184..fb311e9 100644 --- a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitor/topRight.vue +++ b/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 + "%"; } }