diff --git a/src/assets/images/pictureOnMap/SLFX.png b/src/assets/images/pictureOnMap/SLFX.png new file mode 100644 index 0000000..f4d87d5 --- /dev/null +++ b/src/assets/images/pictureOnMap/SLFX.png Binary files differ diff --git a/src/assets/images/pictureOnMap/SLFX.png b/src/assets/images/pictureOnMap/SLFX.png new file mode 100644 index 0000000..f4d87d5 --- /dev/null +++ b/src/assets/images/pictureOnMap/SLFX.png Binary files differ diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue index 620b459..eb7aa8b 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue @@ -137,10 +137,39 @@ {{ item.abbreviation ? item.abbreviation : "" }} -
+
+ +
水量分析
-
+
+ +
+
+ {{ AllData.SLFX.upstreamSiteWaterYield }} + 万吨 +
+
上游水量
+
+
+
+ {{ AllData.SLFX.siteWaterYield }} + 万吨 +
+
当前站点水量
+
+
+
+ {{ AllData.SLFX.downstreamSiteWaterYield }} + 万吨 +
+
下游水量
+
+
管网本底
@@ -211,6 +240,8 @@ import bus from "@/bus"; // 引入接口 import * as MonitorAPI from "@/api/MonitoringAnalysis.js"; +import moment from "moment"; +import { getEchart } from "@/api/MonitorAssetsOnMap"; // 引入echarts组件 // 纵向立体柱状体以及标线和折现 @@ -219,6 +250,8 @@ import DraBarChartsLeft from "./components/DraBarChartsLeft.vue"; // 纵向的两条折现 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue"; +// 右侧面板接入 +import RightCharts from "./components/RightCharts.vue"; // 面板控制组件 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue"; const showPanel = ref(false); //面板展开收起 @@ -342,6 +375,17 @@ ClickData3: "dgtxg", GWBD: {}, SLFX: {}, + isJBK: true, //是否为接驳口 + chartDataRight: { + yAxis: [], + yAxis_Name: "降雨量", + yAxis2: [], + yAxis2_Name: "流速", + yAxis3: [], + yAxis3_Name: "水深", + xAxis: [], + }, + refreshRight: 0, }); // 面包屑点击事件 const MBClick = (item) => { @@ -597,8 +641,18 @@ AllData.GWBD = res.data[0]; } }); + // 根据type 判断是管井还是接驳口 + if (Row.properties.type == "rainwater_pipeline_quality_area1") { + // 接驳口 + AllData.isJBK = true; + } else { + // 管井或其他 + AllData.isJBK = false; + } // 上下游水量分析 - getDataSXY(); + getDataSXY(Row.properties); + // 获取echarts数据 + GetRightCharts(Row.properties); } } }; @@ -886,8 +940,43 @@ }); }; // 获取数据 刘芳阳 上下游分析 -const getDataSXY = () => { - MonitorAPI.siteWaterYieldAnalysis().then((res) => {}); +const getDataSXY = (row) => { + MonitorAPI.siteWaterYieldAnalysis({ + stCode: row.stCode, + stType: row.pointType, + start: moment().format("YYYY-MM-DD") + " 00:00:00", + end: moment().format("YYYY-MM-DD") + " 23:59:59", + }).then((res) => { + if (res && res.code == 200) { + AllData.SLFX = res.data; + } + }); +}; +const GetRightCharts = (row) => { + getEchart({ + stType: row.pointType, + stCode: row.stCode, + start: moment().format("YYYY-MM-DD") + " 00:00:00", + end: moment().format("YYYY-MM-DD") + " 23:59:59", + }).then((res) => { + if (res && res.code == 200) { + AllData.chartDataRight.xAxis = res.data.times; + res.data.datas.forEach((element) => { + switch (element.dataKey) { + case "z": + AllData.chartDataRight.yAxis3 = element.datas; + break; + case "va": + AllData.chartDataRight.yAxis2 = element.datas; + break; + case "pn05": + AllData.chartDataRight.yAxis = element.datas; + break; + } + }); + AllData.refreshRight++; + } + }); }; // 一级界面的河湖水情 @@ -986,63 +1075,6 @@ .modularBody { width: 100%; height: calc(100% - 50px); - - .FontText { - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; - color: rgb(110, 230, 230); - font-weight: 300; - font-size: 12px; - } - - .ListInfo100 { - width: 100%; - height: 30px; - float: left; - margin-top: 10px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-start; - } - .ListInfo50 { - width: 50%; - height: 30px; - float: left; - margin-top: 10px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-start; - } - - .ListInfo_label { - width: 75px; - height: 30px; - line-height: 30px; - text-align: center; - font-family: Source Han Sans CN; - font-weight: bold; - font-size: 14px; - color: #ccdfff; - } - .ListInfo_value { - width: calc(100% - 75px); - height: 30px; - background: #0d2359; - border-radius: 6px; - border: 1px solid #0b9bff; - box-sizing: border-box; - padding: 5px; - font-family: Source Han Sans CN; - font-weight: 400; - font-size: 14px; - color: #00fcff; - } } } @@ -1056,15 +1088,47 @@ .modularBody { width: 100%; height: calc(100% - 50px); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + align-items: center; - .FontText { - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; - color: rgb(110, 230, 230); - font-weight: 300; - font-size: 12px; + .SLList { + display: inline-block; + width: 33.33%; + height: 110px; + box-sizing: border-box; + padding: 15px 0; + background-image: url("@/assets/images/pictureOnMap/SLFX.png"); + + .SlList1P { + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + .SlListNum { + font-family: DINPro; + font-weight: bold; + font-size: 30px; + color: #00fcff; + } + .SlListUnit { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 16px; + color: #ccdfff; + } + } + .SlList2P { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 16px; + color: #ffffff; + height: 40px; + line-height: 40px; + text-align: center; + } } } } @@ -1075,16 +1139,6 @@ width: 100%; height: calc(100% - 50px); - .FontText { - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; - color: rgb(110, 230, 230); - font-weight: 300; - font-size: 12px; - } - .ListInfo100 { width: 100%; height: 30px; diff --git a/src/assets/images/pictureOnMap/SLFX.png b/src/assets/images/pictureOnMap/SLFX.png new file mode 100644 index 0000000..f4d87d5 --- /dev/null +++ b/src/assets/images/pictureOnMap/SLFX.png Binary files differ diff --git a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue index 620b459..eb7aa8b 100644 --- a/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue +++ b/src/views/pictureOnMap/page/DrainageSystem/YSIndex.vue @@ -137,10 +137,39 @@ {{ item.abbreviation ? item.abbreviation : "" }}
-
+
+ +
水量分析
-
+
+ +
+
+ {{ AllData.SLFX.upstreamSiteWaterYield }} + 万吨 +
+
上游水量
+
+
+
+ {{ AllData.SLFX.siteWaterYield }} + 万吨 +
+
当前站点水量
+
+
+
+ {{ AllData.SLFX.downstreamSiteWaterYield }} + 万吨 +
+
下游水量
+
+
管网本底
@@ -211,6 +240,8 @@ import bus from "@/bus"; // 引入接口 import * as MonitorAPI from "@/api/MonitoringAnalysis.js"; +import moment from "moment"; +import { getEchart } from "@/api/MonitorAssetsOnMap"; // 引入echarts组件 // 纵向立体柱状体以及标线和折现 @@ -219,6 +250,8 @@ import DraBarChartsLeft from "./components/DraBarChartsLeft.vue"; // 纵向的两条折现 import DraLineChartsLeft from "./components/DraLineChartsLeft.vue"; +// 右侧面板接入 +import RightCharts from "./components/RightCharts.vue"; // 面板控制组件 import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue"; const showPanel = ref(false); //面板展开收起 @@ -342,6 +375,17 @@ ClickData3: "dgtxg", GWBD: {}, SLFX: {}, + isJBK: true, //是否为接驳口 + chartDataRight: { + yAxis: [], + yAxis_Name: "降雨量", + yAxis2: [], + yAxis2_Name: "流速", + yAxis3: [], + yAxis3_Name: "水深", + xAxis: [], + }, + refreshRight: 0, }); // 面包屑点击事件 const MBClick = (item) => { @@ -597,8 +641,18 @@ AllData.GWBD = res.data[0]; } }); + // 根据type 判断是管井还是接驳口 + if (Row.properties.type == "rainwater_pipeline_quality_area1") { + // 接驳口 + AllData.isJBK = true; + } else { + // 管井或其他 + AllData.isJBK = false; + } // 上下游水量分析 - getDataSXY(); + getDataSXY(Row.properties); + // 获取echarts数据 + GetRightCharts(Row.properties); } } }; @@ -886,8 +940,43 @@ }); }; // 获取数据 刘芳阳 上下游分析 -const getDataSXY = () => { - MonitorAPI.siteWaterYieldAnalysis().then((res) => {}); +const getDataSXY = (row) => { + MonitorAPI.siteWaterYieldAnalysis({ + stCode: row.stCode, + stType: row.pointType, + start: moment().format("YYYY-MM-DD") + " 00:00:00", + end: moment().format("YYYY-MM-DD") + " 23:59:59", + }).then((res) => { + if (res && res.code == 200) { + AllData.SLFX = res.data; + } + }); +}; +const GetRightCharts = (row) => { + getEchart({ + stType: row.pointType, + stCode: row.stCode, + start: moment().format("YYYY-MM-DD") + " 00:00:00", + end: moment().format("YYYY-MM-DD") + " 23:59:59", + }).then((res) => { + if (res && res.code == 200) { + AllData.chartDataRight.xAxis = res.data.times; + res.data.datas.forEach((element) => { + switch (element.dataKey) { + case "z": + AllData.chartDataRight.yAxis3 = element.datas; + break; + case "va": + AllData.chartDataRight.yAxis2 = element.datas; + break; + case "pn05": + AllData.chartDataRight.yAxis = element.datas; + break; + } + }); + AllData.refreshRight++; + } + }); }; // 一级界面的河湖水情 @@ -986,63 +1075,6 @@ .modularBody { width: 100%; height: calc(100% - 50px); - - .FontText { - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; - color: rgb(110, 230, 230); - font-weight: 300; - font-size: 12px; - } - - .ListInfo100 { - width: 100%; - height: 30px; - float: left; - margin-top: 10px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-start; - } - .ListInfo50 { - width: 50%; - height: 30px; - float: left; - margin-top: 10px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-start; - } - - .ListInfo_label { - width: 75px; - height: 30px; - line-height: 30px; - text-align: center; - font-family: Source Han Sans CN; - font-weight: bold; - font-size: 14px; - color: #ccdfff; - } - .ListInfo_value { - width: calc(100% - 75px); - height: 30px; - background: #0d2359; - border-radius: 6px; - border: 1px solid #0b9bff; - box-sizing: border-box; - padding: 5px; - font-family: Source Han Sans CN; - font-weight: 400; - font-size: 14px; - color: #00fcff; - } } } @@ -1056,15 +1088,47 @@ .modularBody { width: 100%; height: calc(100% - 50px); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + align-items: center; - .FontText { - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; - color: rgb(110, 230, 230); - font-weight: 300; - font-size: 12px; + .SLList { + display: inline-block; + width: 33.33%; + height: 110px; + box-sizing: border-box; + padding: 15px 0; + background-image: url("@/assets/images/pictureOnMap/SLFX.png"); + + .SlList1P { + width: 100%; + height: 40px; + line-height: 40px; + text-align: center; + .SlListNum { + font-family: DINPro; + font-weight: bold; + font-size: 30px; + color: #00fcff; + } + .SlListUnit { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 16px; + color: #ccdfff; + } + } + .SlList2P { + font-family: Source Han Sans CN; + font-weight: 400; + font-size: 16px; + color: #ffffff; + height: 40px; + line-height: 40px; + text-align: center; + } } } } @@ -1075,16 +1139,6 @@ width: 100%; height: calc(100% - 50px); - .FontText { - width: 100%; - height: 20px; - line-height: 20px; - text-align: right; - color: rgb(110, 230, 230); - font-weight: 300; - font-size: 12px; - } - .ListInfo100 { width: 100%; height: 30px; diff --git a/src/views/pictureOnMap/page/DrainageSystem/components/RightCharts.vue b/src/views/pictureOnMap/page/DrainageSystem/components/RightCharts.vue new file mode 100644 index 0000000..e903693 --- /dev/null +++ b/src/views/pictureOnMap/page/DrainageSystem/components/RightCharts.vue @@ -0,0 +1,297 @@ + +