- <template>
- <!-- 排水体系 -->
- <div class="WSIndex">
- <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
- <Transition name="fade_left">
- <div :class="['moduleBox', 'moduleBoxLeft']" v-show="!showPanel">
- <!-- 顶部公共标题 -->
- <div class="CrumbesTitle">
- <!-- 一级 -->
- <span
- class="crumbs"
- v-for="item in AllData.TitleName"
- :key="item.grade"
- v-show="item.abbreviation"
- @click="MBClick(item)"
- >
- {{ item.grade != "one" ? "/" : "" }}
- {{ item.abbreviation ? item.abbreviation : "" }}
- </span>
- </div>
- <div class="modular1">
- <div class="leve2Title">
- {{
- AllData.regionGrade == "one"
- ? "排水户统计"
- : AllData.regionGrade == "two"
- ? "排水户统计"
- : AllData.regionGrade == "three"
- ? "排水户统计"
- : AllData.regionGrade == "four"
- ? "水量统计"
- : ""
- }}
- {{ AllData.TjData1 ? `(${AllData.TjData1 + AllData.TjData1Unit})` : `` }}
- </div>
- <div class="modularBody">
- <!-- v-if="
- AllData.regionGrade == 'one' ||
- AllData.regionGrade == 'two' ||
- AllData.regionGrade == 'three' ||
- AllData.regionGrade == 'four'
- " -->
- <DraBarCharts2Y
- :data="AllData.chartData1"
- :refresh="AllData.refresh1"
- :ClickData="AllData.ClickData1"
- ></DraBarCharts2Y>
- </div>
- </div>
- <div class="modular2">
- <div class="leve2Title">
- {{
- AllData.regionGrade == "one"
- ? "管网统计"
- : AllData.regionGrade == "two"
- ? "管网统计"
- : AllData.regionGrade == "three"
- ? "排水类别"
- : AllData.regionGrade == "four"
- ? "排水类别"
- : ""
- }}
- {{ AllData.TjData2 ? `(${AllData.TjData2 + AllData.TjData2Unit})` : `` }}
- </div>
- <div class="modularBody">
- <DraBarChartsLeft
- v-if="
- AllData.regionGrade == 'one' ||
- AllData.regionGrade == 'two' ||
- AllData.regionGrade == 'three' ||
- AllData.regionGrade == 'four'
- "
- :data="AllData.chartData2"
- :refresh="AllData.refresh2"
- :ClickData="AllData.ClickData2"
- ></DraBarChartsLeft>
- </div>
- </div>
- <div class="modular3">
- <div class="leve2Title">
- {{
- AllData.regionGrade == "one"
- ? "日污水水量"
- : AllData.regionGrade == "two"
- ? "日污水水量"
- : AllData.regionGrade == "three"
- ? "日水量统计"
- : AllData.regionGrade == "four"
- ? "管网统计"
- : ""
- }}
- {{ AllData.TjData3 ? `(${AllData.TjData3 + AllData.TjData3Unit})` : `` }}
- </div>
- <div class="modularBody">
- <DraBarCharts2Y
- v-if="
- AllData.regionGrade == 'one' ||
- AllData.regionGrade == 'two' ||
- AllData.regionGrade == 'three' ||
- AllData.regionGrade == 'four'
- "
- :data="AllData.chartData3"
- :refresh="AllData.refresh3"
- :ClickData="AllData.ClickData3"
- ></DraBarCharts2Y>
- </div>
- </div></div
- ></Transition>
- <!-- 右侧面板 -->
- <Transition name="fade_right">
- <div
- :class="['moduleBox', 'moduleBoxRight']"
- v-show="
- !showPanel &&
- AllData.RightShow &&
- AllData.RightShowType == 'sewage_pipeline_quality'
- "
- >
- <!-- 顶部公共标题 -->
- <div class="CrumbesTitle">
- <span class="crumbs2" @click="OpenGongGongDialog()">{{
- AllData.ClicksiteName
- }}</span>
- </div>
- <div class="modular1_right">
- <RightCharts
- :data="AllData.chartDataRight"
- :refresh="AllData.refreshRight"
- v-if="AllData.refreshRight != 0"
- ></RightCharts>
- </div>
- <div class="modular2_right">
- <div class="leve2Title">水量分析</div>
- <div class="modularBody">
- <div class="SLList">
- <div class="SlList1P">
- <el-tooltip :content="AllData.SLFX.nowDay + '万吨'" placement="top">
- <span class="SlListNum">{{
- AllData.SLFX.nowDay ? AllData.SLFX.nowDay : "--"
- }}</span>
- </el-tooltip>
- <span class="SlListUnit">万吨</span>
- </div>
- <div class="SlList2P">今日水量</div>
- </div>
- <div class="SLList">
- <div class="SlList1P">
- <el-tooltip :content="AllData.SLFX.yesterday + '万吨'" placement="top">
- <span class="SlListNum">{{
- AllData.SLFX.yesterday ? AllData.SLFX.yesterday : "--"
- }}</span>
- </el-tooltip>
- <span class="SlListUnit">万吨</span>
- </div>
- <div class="SlList2P">昨日水量</div>
- </div>
- <div class="SLList">
- <div class="SlList1P">
- <el-tooltip :content="AllData.SLFX.average + '万吨'" placement="top">
- <span class="SlListNum">{{
- AllData.SLFX.average ? AllData.SLFX.average : "--"
- }}</span>
- </el-tooltip>
- <span class="SlListUnit">万吨</span>
- </div>
- <div class="SlList2P">7日平均水量</div>
- </div>
- </div>
- </div>
- <div class="modular3_right">
- <div class="leve2Title">管网本底</div>
- <div class="modularBody">
- <div class="ListInfo50">
- <div class="ListInfo_label">类型:</div>
- <div class="ListInfo_value">
- {{
- AllData.GWBD.pointType == "YS"
- ? "雨水管网"
- : AllData.GWBD.pointType == "WS"
- ? "污水管网"
- : "--"
- }}
- </div>
- </div>
- <div class="ListInfo50">
- <div class="ListInfo_label">设计编号:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.stAsName ? AllData.GWBD.stAsName : "--" }}
- </div>
- </div>
- <div class="ListInfo100">
- <div class="ListInfo_label">管井编码:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : "--" }}
- </div>
- </div>
- <div class="ListInfo100">
- <div class="ListInfo_label">站点编号:</div>
- <div class="ListInfo_value">
- {{ AllData.RightStCode ? AllData.RightStCode : "--" }}
- </div>
- </div>
-
- <div class="ListInfo50">
- <div class="ListInfo_label">年份:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.buildTime ? AllData.GWBD.buildTime : "--" }}
- </div>
- </div>
- <div class="ListInfo50">
- <div class="ListInfo_label">管径:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.pipelineDiameter ? AllData.GWBD.pipelineDiameter : "--" }}
- </div>
- </div>
- <div class="ListInfo50">
- <div class="ListInfo_label">材质:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.pipelineTexture ? AllData.GWBD.pipelineTexture : "--" }}
- </div>
- </div>
- <div class="ListInfo50">
- <div class="ListInfo_label">缺陷类型:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.issueType ? AllData.GWBD.issueType : "--" }}
- </div>
- </div>
- <div class="ListInfo50">
- <div class="ListInfo_label">所在道路:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.roadName ? AllData.GWBD.roadName : "--" }}
- </div>
- </div>
- <div class="ListInfo50">
- <div class="ListInfo_label">所属标段:</div>
- <div class="ListInfo_value">
- {{ AllData.GWBD.watchAreaName ? AllData.GWBD.watchAreaName : "--" }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </Transition>
- <!-- 泵站信息 -->
- <Transition name="fade_right">
- <div
- :class="['moduleBox', 'moduleBoxRight']"
- v-if="
- !showPanel &&
- AllData.RightShow &&
- AllData.RightShowType == 'sewage_pump_station_info'
- "
- >
- <!-- 顶部公共标题 -->
- <div class="CrumbesTitle">
- <span class="crumbs2" @click="OpenGongGongDialog()">{{
- AllData.ClicksiteName
- }}</span>
- </div>
-
- <div class="modularRight2">
- <BengZhanInfo
- :Datatype="AllData.RightShowType"
- :DataId="AllData.RightShowID"
- :Type="AllData.TypeID"
- ></BengZhanInfo>
- </div>
- </div>
- </Transition>
- </div>
- </template>
-
- <script setup name="WSIndex">
- import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
- import bus from "@/bus";
- // 引入接口
- import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
- import moment from "moment";
- import { getEchart } from "@/api/MonitorAssetsOnMap";
-
- // 引入echarts组件
- // 纵向立体柱状体以及标线和折现
- import DraBarCharts2Y from "./components/DraBarCharts2Y.vue";
- //横向的两组柱状图堆叠
- import DraBarChartsLeft from "./components/DraBarChartsLeft.vue";
- // 右侧面板接入
- import RightCharts from "./components/RightCharts.vue";
- import BengZhanInfo from "./BengZhanRight.vue";
- // 面板控制组件
- import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
- const showPanel = ref(false); //面板展开收起
- const PanelChange = (val) => {
- showPanel.value = val;
- };
-
- const AllData = reactive({
- TypeID: "sewage",
- regionGrade: "one", //分区级别(one:一级 || two:二级 || three:三级 || four:四级)
- regionName: "", //分区名称
- waterRegionCode: "", //分区编号
- RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
- RightShowID: "",
- RightGeometry: "",
- RightShowType: "",
- RightStCode: "",
- TitleName: [
- {
- abbreviation: "高新区", //分区缩写-动态
- id: "", //分区信息-动态
- grade: "one", //分区层级-静态(查询数据用)
- sort: 0, //面包屑的顺序
- Name: "", //全称
- },
- {
- abbreviation: "", //分区缩写-动态
- id: "", //分区信息-动态
- grade: "two", //分区层级-静态
- sort: 1, //面包屑的顺序
- Name: "", //全称
- },
- {
- abbreviation: "", //分区缩写-动态
- id: "", //分区信息-动态
- grade: "three", //分区层级-静态
- sort: 2, //面包屑的顺序
- Name: "", //全称
- },
- {
- abbreviation: "", //分区缩写-动态
- id: "", //分区信息-动态
- grade: "four", //分区层级-静态
- sort: 3, //面包屑的顺序
- Name: "", //全称
- },
- {
- abbreviation: "", //分区缩写-动态
- id: "", //分区信息-动态
- grade: "five", //分区层级-静态
- sort: 4, //面包屑的顺序
- Name: "", //全称
- },
- ],
- // Ecahrts数据
- // 河湖水情
- chartData1: {
- // 一级
- // xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"], //X轴数据
- // y1_Unit: "m", //Y轴单位
- // y2_Unit: "万方", //2号Y轴单位
- // y2_show: true, //是否展示右侧的2号轴
- // yAxis1_bar: ["60", "40", "50", "60", "80", "70"], //数据1
- // yAxis1_bar_Name: "当前水位", //数据1的名称
- // yAxis1_bar_index: 0,
- // yAxis2_bar: null, //数据2
- // yAxis2_bar_Name: "", //数据1的名称
- // yAxis2_bar_index: 0,
- // yAxis2_line: ["80", "90", "40", "50", "60", "60"],
- // yAxis2_line_Name: "设防水位",
- // yAxis2_line_Index: 0,
- // yAxis3_line: ["90", "98", "110", "80", "60", "70"],
- // yAxis3_line_Name: "库容量",
- // yAxis3_line_Index: 1,
- xAxis: [], //X轴数据
- y1_Unit: "", //Y轴单位
- y2_Unit: "", //Y轴单位
- y2_show: false,
- yAxis1_bar: [], //数据1
- yAxis1_bar_Name: "", //数据1的名称
- yAxis1_bar_index: 0,
- yAxis2_bar: null, //数据2
- yAxis2_bar_Name: "", //数据1的名称
- yAxis2_bar_index: 0,
- yAxis2_line: null,
- yAxis2_line_Name: "",
- yAxis2_line_Index: 0,
- yAxis3_line: null,
- yAxis3_line_Name: "",
- yAxis3_line_Index: 0,
- },
- refresh1: 0,
- ClickData1: "dgtxg",
- // 流域管网
- chartData2: {
- xAxis: [],
- yAxis: [],
- yAxis2: [],
- yAxis_Name: "",
- yAxis2_Name: "",
- },
- refresh2: 0,
- ClickData2: "dgtxg",
- // 河湖排口
- chartData3: {
- // 三级
- xAxis: [], //X轴数据
- y1_Unit: "", //Y轴单位
- y2_Unit: "", //Y轴单位
- y2_show: false,
- yAxis1_bar: [], //数据1
- yAxis1_bar_Name: "", //数据1的名称
- yAxis1_bar_index: 0,
- yAxis2_bar: null, //数据2
- yAxis2_bar_Name: "", //数据1的名称
- yAxis2_bar_index: 0,
- yAxis2_line: null,
- yAxis2_line_Name: "",
- yAxis2_line_Index: 0,
- yAxis3_line: null,
- yAxis3_line_Name: "",
- yAxis3_line_Index: 0,
- },
- refresh3: 0,
- ClickData3: "dgtxg",
- GWBD: {},
- SLFX: {},
- chartDataRight: {
- yAxis: [],
- yAxis_Name: "降雨量(mm)",
- yAxis2: [],
- yAxis2_Name: "流速(m/s)",
- yAxis3: [],
- yAxis3_Name: "水深(m)",
- yAxis4: [],
- yAxis4_Name: "5分钟水量(m³)",
- xAxis: [],
- },
- refreshRight: 0,
- ClicksiteName: "",
- TjData1: 0,
- TjData1Unit: "",
- TjData2: 0,
- TjData2Unit: "",
- TjData3: 0,
- TjData3Unit: "",
- });
- // 面包屑点击事件
- const MBClick = (item) => {
- console.log(item);
- AllData.RightShow = false;
- AllData.RightShowID = "";
- AllData.RightShowType = "";
- // 赋值需要进行echarts数据请求的数据
- AllData.regionGrade = item.grade;
- AllData.regionName = item.Name;
- AllData.waterRegionCode = item.id;
- clearEchartsData();
- // debugger;
- // 视角切换
- if (item.sort == 0) {
- // 回到默认图层
- newfiberMap.map.easeTo(newfiberMap.config_.params.init);
- bus.emit(mapInitBusName);
- AllData.regionGrade = "one";
- AllData.regionName = "";
- AllData.waterRegionCode = "";
- AllData.TitleName[1] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "two",
- sort: 1,
- };
- AllData.TitleName[2] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "three",
- sort: 2,
- };
- AllData.TitleName[3] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "four",
- sort: 3,
- };
- AllData.TitleName[4] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "five",
- sort: 4,
- };
-
- // 切换时进行数据请求,默认视角请求
- getData1();
- getData2();
- getData3();
- }
- if (item.sort == 1) {
- bus.emit("panelDataToMap", {
- name: item.Name,
- id: item.id,
- });
- AllData.TitleName[2] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "three",
- sort: 2,
- };
- AllData.TitleName[3] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "four",
- sort: 3,
- };
- AllData.TitleName[4] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "five",
- sort: 4,
- };
-
- // 切换时进行数据请求,默认视角请求
- getData1();
- getData2();
- getData3();
- }
- if (item.sort == 2) {
- bus.emit("panelDataToMap", {
- name: item.Name,
- id: item.id,
- });
- AllData.TitleName[3] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "four",
- sort: 3,
- };
- AllData.TitleName[4] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "five",
- sort: 4,
- };
-
- // 切换时进行数据请求,默认视角请求
- getData2();
- getData3();
- getData4();
- }
- if (item.sort == 3) {
- bus.emit("panelDataToMap", {
- name: item.Name,
- id: item.id,
- });
- AllData.TitleName[4] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "five",
- sort: 4,
- };
-
- getData3();
- getData1();
- getData4();
- }
- if (item.sort == 4) {
- bus.emit("panelDataToMap", {
- name: item.Name,
- id: item.id,
- });
- }
- };
- // 分区点击切换
- const FenQuClick = (Row) => {
- console.log("FenQuClick", Row.properties, Row.layerId);
- //判断点击的是片区还是点位
- if (Row.layerId == "排水分区") {
- // 片区
- AllData.RightShow = false;
- AllData.RightShowID = false;
- AllData.RightShowType = "排水分区";
- // if (!!!Row.properties.pid) return;
- // 原本是判断没有pid就不请求↑↑↑,现在gis图层数据改变,从而使用层级来判断↓↓↓
- if (Row.properties.level == "4") return;
- // 请求面包屑的数据
- let params = {
- regionType: AllData.TypeID,
- id: Number(Row.properties.pid || Row.properties.w_id),
- };
- MonitorAPI.lineGrade(params).then((res) => {
- if (res && res.code == 200) {
- // 污水
- AllData.TitleName[0].abbreviation = "高新区";
- AllData.TitleName[0].id = ""; //分区信息-动态
- AllData.TitleName[0].grade = "one"; //分区层级-静态
- AllData.TitleName[0].sort = 0; //面包屑的顺序
- AllData.TitleName[0].Name = ""; //全称
-
- // 设置1 2 3 4 级分区
- clearMianBaoData();
- res.data.forEach((element) => {
- if (element.grade == "one") {
- AllData.TitleName[1] = {
- abbreviation: element.shortName ? element.shortName : element.name,
- id: element.id,
- grade: "two",
- sort: 1,
- Name: element.name,
- };
- }
- if (element.grade == "two") {
- AllData.TitleName[2] = {
- abbreviation: element.shortName ? element.shortName : element.name,
- id: element.id,
- grade: "three",
- sort: 2,
- Name: element.name,
- };
- }
- if (element.grade == "three") {
- AllData.TitleName[3] = {
- abbreviation: element.shortName ? element.shortName : element.name,
- id: element.id,
- grade: "four",
- sort: 3,
- Name: element.name,
- };
- }
- if (element.grade == "four") {
- AllData.TitleName[4] = {
- abbreviation: element.shortName ? element.shortName : element.name,
- id: element.id,
- grade: "five",
- sort: 4,
- Name: element.name,
- };
- }
- });
- // }
- // 赋值需要进行echarts数据请求的数据
- AllData.regionGrade =
- res.data.length == 1
- ? "two"
- : res.data.length == 2
- ? "three"
- : res.data.length == 3
- ? "four"
- : "five"; //分区级别(one:一级 || two:二级 || three:三级 || four:四级)
- AllData.regionName = AllData.TitleName[res.data.length].Name;
- AllData.waterRegionCode = AllData.TitleName[res.data.length].id;
- clearEchartsData();
- if (AllData.regionGrade == "two") {
- // 二级
- console.log("二级");
- getData1();
- getData2();
- getData3();
- } else if (AllData.regionGrade == "three") {
- // 三级
- console.log("三级");
- getData2();
- getData3();
- getData4();
- } else if (AllData.regionGrade == "four") {
- // 四级
- console.log("四级");
- getData3();
- getData1();
- getData4();
- } else {
- // 五级 五级为排水单元,由上可知,因为没有pid 所以此方法无效
- console.log("五级");
- }
- }
- });
- } else if (Row.layerId == "point") {
- // 点位
- if (AllData.RightShowID == Row.properties.id) {
- // 说明是同样的一个点点了两次,所以进行关闭
- AllData.RightShow = false;
- AllData.RightShowID = "";
- AllData.RightStCode = "";
- AllData.RightGeometry = "";
- } else {
- AllData.RightStCode = Row.properties.stCode;
- // 管点
- if (Row.properties.pointType == "sewage_pipeline_quality") {
- AllData.ClicksiteName = Row.properties.name;
- AllData.RightShowID = Row.properties.id;
- AllData.RightGeometry = Row.properties.geometry;
- AllData.RightShowType = "sewage_pipeline_quality";
- AllData.RightShow = true;
- // Row.properties.wellCode
- // 获取管网信息
- console.log("Row", Row);
- if (!!Row.properties.wellCode) {
- MonitorAPI.pipelinePointPage({
- pointNumber: Row.properties.wellCode,
- }).then((res) => {
- if (res && res.code == 200) {
- AllData.GWBD = res.data[0];
- }
- });
- } else {
- AllData.GWBD = {
- pointType: "--",
- pointNumber: "--",
- stAsName: "--",
- stCode: AllData.RightStCode || "--",
- buildTime: "--",
- pipelineDiameter: "--",
- pipelineTexture: "--",
- issueType: "--",
- roadName: "--",
- watchAreaName: "--",
- };
- }
-
- // 上下游水量分析
- getDataSXY(Row.properties);
- // 获取echarts数据
- // setTimeout(() => {
- AllData.chartDataRight = {
- yAxis: [],
- yAxis_Name: "降雨量(mm)",
- yAxis2: [],
- yAxis2_Name: "流速(m/s)",
- yAxis3: [],
- yAxis3_Name: "水深(m)",
- yAxis4: [],
- yAxis4_Name: "5分钟水量(m³)",
- xAxis: [],
- };
- AllData.refreshRight = 0;
- GetRightCharts(Row.properties);
- // }, 900);
- }
- // 泵站
- if (Row.properties.pointType == "sewage_pump_station_info") {
- if (Row.properties.id == "") {
- // 不展示
- AllData.ClicksiteName = "";
- AllData.RightShow = false;
- AllData.RightShowID = "";
- AllData.RightGeometry = "";
- AllData.RightShowType = "";
- } else {
- AllData.ClicksiteName = Row.properties.name;
- AllData.RightShowID = Row.properties.id;
- AllData.RightShowType = "sewage_pump_station_info";
- AllData.RightGeometry = Row.properties.geometry;
- AllData.RightShow = true;
- }
- }
- // 污水处理厂
- if (Row.properties.pointType == "sewage_factory_info") {
- if (Row.properties.id == "") {
- // 不展示
- AllData.ClicksiteName = "";
- AllData.RightShow = false;
- AllData.RightShowID = "";
- AllData.RightShowType = "";
- } else {
- AllData.ClicksiteName = Row.properties.name;
- AllData.RightShowID = Row.properties.id;
- AllData.RightShowType = "sewage_factory_info";
- AllData.RightShow = true;
- }
- }
- }
- }
- };
-
- // 清除面包屑的数据
- const clearMianBaoData = () => {
- AllData.TitleName[1] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "two",
- sort: 1,
- };
- AllData.TitleName[2] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "three",
- sort: 2,
- };
- AllData.TitleName[3] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "four",
- sort: 3,
- };
- AllData.TitleName[4] = {
- abbreviation: "",
- Name: "",
- id: "",
- grade: "five",
- sort: 4,
- };
- };
- // 获取数据 徐云欣 一级界面的管网统计/二级界面的管网统计/四级界面的管网统计
- const getData1 = () => {
- MonitorAPI.pipelineProblemStatistic({
- regionGrade: AllData.regionGrade, //分区级别(one:一级 || two:二级 || three:三级 || four:四级 || five:五级)
- regionName: AllData.regionName, //分区名称
- regionType: AllData.TypeID, //分区类型(sewage:污水 || rain:雨水)
- }).then((res) => {
- if (res && res.code == 200) {
- if (AllData.regionGrade == "one") {
- // 一级Ecahrts 名称
- AllData.chartData2.yAxis_Name = "问题管网";
- // 数据赋值
- AllData.chartData2.xAxis = res.data.regionNameList;
- AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
- AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
- AllData.chartData2.yAxis2_Name = "总长度";
- AllData.chartData2.y1_Unit = "km";
- AllData.refresh2++;
- AllData.TjData2 = Number(
- res.data.pipelineLengthList.reduce(
- (accu, curren) => Number(accu) + Number(curren)
- )
- ).toFixed(2);
- AllData.TjData2Unit = "km";
- }
- if (AllData.regionGrade == "two") {
- // 二级Ecahrts 名称
- AllData.chartData2.yAxis_Name = "问题管网";
- // 数据赋值
- AllData.chartData2.xAxis = res.data.regionNameList;
- AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
- AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
- AllData.chartData2.yAxis2_Name = "总长度";
- AllData.chartData2.y1_Unit = "km";
- AllData.refresh2++;
- AllData.TjData2 = Number(
- res.data.pipelineLengthList.reduce(
- (accu, curren) => Number(accu) + Number(curren)
- )
- ).toFixed(2);
- AllData.TjData2Unit = "km";
- }
- if (AllData.regionGrade == "four") {
- AllData.chartData3.xAxis = res.data.problemNameList; //X轴数据
- AllData.chartData3.y1_Unit = "km"; //Y轴单位
- AllData.chartData3.y2_Unit = ""; //2号Y轴单位
- AllData.chartData3.y2_show = false; //是否展示右侧的2号轴
- AllData.chartData3.yAxis1_bar = res.data.pipelineProblemLengthList; //数据1
- AllData.chartData3.yAxis1_bar_Name = "片区管网问题"; //数据1的名称
- AllData.chartData3.yAxis1_bar_index = 0;
- AllData.chartData3.yAxis2_bar = null; //数据2
- AllData.chartData3.yAxis2_bar_Name = ""; //数据1的名称
- AllData.chartData3.yAxis2_bar_index = 0;
- AllData.chartData3.yAxis2_line = null;
- AllData.chartData3.yAxis2_line_Name = "";
- AllData.chartData3.yAxis2_line_Index = 1;
- AllData.chartData3.yAxis3_line = null;
- AllData.chartData3.yAxis3_line_Name = "";
- AllData.chartData3.yAxis3_line_Index = 1;
- AllData.refresh3++;
- AllData.TjData3 = Number(
- res.data.pipelineProblemLengthList.reduce(
- (accu, curren) => Number(accu) + Number(curren)
- )
- ).toFixed(0);
- AllData.TjData3Unit = "km";
- // // 二级Ecahrts 名称
- // AllData.chartData2.yAxis_Name = "问题管网";
- // // 数据赋值
- // AllData.chartData2.xAxis = res.data.regionNameList;
- // AllData.chartData2.yAxis = res.data.pipelineProblemLengthList;
- // AllData.chartData2.yAxis2 = res.data.pipelineLengthList;
- // AllData.chartData2.yAxis2_Name = "总长度";
- // AllData.chartData2.y1_Unit = "km";
- // AllData.refresh2++;
- // AllData.TjData2 = res.data.pipelineLengthList
- // .reduce((accu, curren) => Number(accu) + Number(curren))
- // .toFixed(2);
- // AllData.TjData2Unit = "km";
- }
- }
- });
- };
- // 获取数据 刘芳阳 一级界面的污水水量(日)/二级界面的污水水量(日)/三级界面的水量统计(日)/四级界面的排水量
- const getData2 = () => {
- MonitorAPI.sewageWaterRegionWaterYieldAnalysis({
- sewageWaterRegionId: AllData.waterRegionCode ? AllData.waterRegionCode : 0,
- }).then((res) => {
- if (res && res.code == 200) {
- let XData = []; //片区名称
- let data1 = []; //站点数
- let data2 = []; //进水量
- let data3 = []; //出水量
- res.data.forEach((element) => {
- XData.push(element.waterRegionName);
- data1.push(element.siteNum);
- data2.push(element.inWaterYield);
- data3.push(element.outWaterYield);
- });
- if (AllData.regionGrade == "one" || AllData.regionGrade == "three") {
- AllData.chartData3.xAxis = XData; //X轴数据
- AllData.chartData3.y1_Unit = "万方"; //Y轴单位
- AllData.chartData3.y2_Unit = "个"; //2号Y轴单位
- AllData.chartData3.y2_show = false; //是否展示右侧的2号轴
- AllData.chartData3.yAxis1_bar = data2; //数据1
- AllData.chartData3.yAxis1_bar_Name = "进水量"; //数据1的名称
- AllData.chartData3.yAxis1_bar_index = 0;
- AllData.chartData3.yAxis2_bar = null; //数据2
- AllData.chartData3.yAxis2_bar_Name = ""; //数据1的名称
- AllData.chartData3.yAxis2_bar_index = 0;
- AllData.chartData3.yAxis2_line = null;
- AllData.chartData3.yAxis2_line_Name = "";
- AllData.chartData3.yAxis2_line_Index = 1;
- AllData.chartData3.yAxis3_line = null;
- AllData.chartData3.yAxis3_line_Name = "";
- AllData.chartData3.yAxis3_line_Index = 1;
- AllData.refresh3++;
- AllData.TjData3 = Number(
- data2.reduce((accu, curren) => Number(accu) + Number(curren))
- ).toFixed(0);
- AllData.TjData3Unit = "万方";
- }
- if (AllData.regionGrade == "two") {
- AllData.chartData3.xAxis = XData; //X轴数据
- AllData.chartData3.y1_Unit = "万方"; //Y轴单位
- AllData.chartData3.y2_Unit = "个"; //2号Y轴单位
- AllData.chartData3.y2_show = false; //是否展示右侧的2号轴
- AllData.chartData3.yAxis1_bar = data2; //数据1
- AllData.chartData3.yAxis1_bar_Name = "进水量"; //数据1的名称
- AllData.chartData3.yAxis1_bar_index = 0;
- AllData.chartData3.yAxis2_bar = data3; //数据2
- AllData.chartData3.yAxis2_bar_Name = "出水量"; //数据1的名称
- AllData.chartData3.yAxis2_bar_index = 0;
- AllData.chartData3.yAxis2_line = null;
- AllData.chartData3.yAxis2_line_Name = "";
- AllData.chartData3.yAxis2_line_Index = 1;
- AllData.chartData3.yAxis3_line = null;
- AllData.chartData3.yAxis3_line_Name = "";
- AllData.chartData3.yAxis3_line_Index = 1;
- AllData.refresh3++;
- AllData.TjData3 = Number(
- data2.reduce((accu, curren) => Number(accu) + Number(curren))
- ).toFixed(0);
- AllData.TjData3Unit = "万方";
- }
- }
- });
- };
- // 获取数据 谢杨 一级界面的排水户统计/ 二级界面的排水户统计/ 三级界面的排水户统计
- const getData3 = () => {
- MonitorAPI.queryDrainageUserInfo({
- regionId: AllData.waterRegionCode,
- }).then((res) => {
- if (res && res.code == 200) {
- if (
- AllData.regionGrade == "one" ||
- AllData.regionGrade == "two" ||
- AllData.regionGrade == "three"
- ) {
- AllData.chartData1.xAxis = res.data.partitionName; //X轴数据
- AllData.chartData1.y1_Unit = "个"; //Y轴单位
- AllData.chartData1.y2_Unit = "个"; //2号Y轴单位
- AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
- AllData.chartData1.yAxis1_bar = res.data.drainageNumber; //数据1
- AllData.chartData1.yAxis1_bar_Name = "排水户"; //数据1的名称
- AllData.chartData1.yAxis1_bar_index = 0;
- AllData.chartData1.yAxis2_bar = res.data.keyDrainageNumber; //数据2
- AllData.chartData1.yAxis2_bar_Name = "重点排水户"; //数据1的名称
- AllData.chartData1.yAxis2_bar_index = 0;
- AllData.chartData1.yAxis2_line = res.data.rtuNumber;
- AllData.chartData1.yAxis2_line_Name = "监测设备";
- AllData.chartData1.yAxis2_line_Index = 1;
- AllData.chartData1.yAxis3_line = null;
- AllData.chartData1.yAxis3_line_Name = "";
- AllData.chartData1.yAxis3_line_Index = 1;
- AllData.refresh1++;
- AllData.TjData1 = Number(
- res.data.drainageNumber.reduce((accu, curren) => Number(accu) + Number(curren))
- ).toFixed(0);
- AllData.TjData1Unit = "个";
- }
- if (AllData.regionGrade == "four") {
- AllData.chartData1.xAxis = res.data.partitionName; //X轴数据
- AllData.chartData1.y1_Unit = "万方"; //Y轴单位
- AllData.chartData1.y2_Unit = "个"; //2号Y轴单位
- AllData.chartData1.y2_show = false; //是否展示右侧的2号轴
- AllData.chartData1.yAxis1_bar = res.data.drainageVolume; //数据1
- AllData.chartData1.yAxis1_bar_Name = "可排水量"; //数据1的名称
- AllData.chartData1.yAxis1_bar_index = 0;
- AllData.chartData1.yAxis2_bar = res.data.realTimeDrainage; //数据2
- AllData.chartData1.yAxis2_bar_Name = "实时排水量"; //数据1的名称
- AllData.chartData1.yAxis2_bar_index = 0;
- AllData.chartData1.yAxis2_line = null;
- AllData.chartData1.yAxis2_line_Name = "";
- AllData.chartData1.yAxis2_line_Index = 1;
- AllData.chartData1.yAxis3_line = null;
- AllData.chartData1.yAxis3_line_Name = "";
- AllData.chartData1.yAxis3_line_Index = 1;
- AllData.refresh1++;
- AllData.TjData1 = Number(
- res.data.drainageVolume.reduce((accu, curren) => Number(accu) + Number(curren))
- ).toFixed(0);
- AllData.TjData1Unit = "万方";
- }
- }
- });
- };
- // 获取数据 谢杨 三级界面的排水类别/四级界面的排水类别
- const getData4 = () => {
- MonitorAPI.queryDrainageType({ regionId: AllData.waterRegionCode }).then((res) => {
- if (res && res.code == 200) {
- if (AllData.regionGrade == "three" || AllData.regionGrade == "four") {
- // 三级Ecahrts 名称
- AllData.chartData2.xAxis = res.data.typeName;
- AllData.chartData2.yAxis = null;
- AllData.chartData2.yAxis_Name = "";
- AllData.chartData2.yAxis2 = res.data.typeNumber;
- AllData.chartData2.yAxis2_Name = "数量";
- AllData.chartData2.y1_Unit = "个";
- AllData.refresh2++;
- AllData.TjData1 = Number(
- res.data.typeNumber.reduce((accu, curren) => Number(accu) + Number(curren))
- ).toFixed(0);
- AllData.TjData1Unit = "个";
- }
- // 数据赋值
- }
- });
- };
- // 获取数据 刘芳阳 上下游分析
- const getDataSXY = (row) => {
- MonitorAPI.siteWaterYieldAnalysisByDate({
- 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) {
- 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;
- case "sbl05":
- AllData.chartDataRight.yAxis4 = element.datas;
- }
- });
- AllData.chartDataRight.xAxis = res.data.times;
- AllData.refreshRight++;
- }
- });
- };
-
- // 一级界面的河湖水情
- // 清除本底分析echarts的数据
- const clearEchartsData = () => {
- AllData.chartData1 = {
- xAxis: [], //X轴数据
- y1_Unit: "", //Y轴单位
- y2_Unit: "", //2号Y轴单位
- y2_show: false, //是否展示右侧的2号轴
- yAxis1_bar: null, //数据1
- yAxis1_bar_Name: "", //数据1的名称
- yAxis1_bar_index: 0,
- yAxis2_bar: null, //数据2
- yAxis2_bar_Name: "", //数据1的名称
- yAxis2_bar_index: 0,
- yAxis2_line: null,
- yAxis2_line_Name: "",
- yAxis2_line_Index: 0,
- yAxis3_line: null,
- yAxis3_line_Name: "",
- yAxis3_line_Index: 0,
- };
- AllData.refresh1++;
- AllData.TjData1 = null;
- AllData.TjData1Unit = null;
- AllData.chartData3 = {
- xAxis: [], //X轴数据
- y1_Unit: "", //Y轴单位
- y2_Unit: "", //2号Y轴单位
- y2_show: false, //是否展示右侧的2号轴
- yAxis1_bar: null, //数据1
- yAxis1_bar_Name: "", //数据1的名称
- yAxis1_bar_index: 0,
- yAxis2_bar: null, //数据2
- yAxis2_bar_Name: "", //数据1的名称
- yAxis2_bar_index: 0,
- yAxis2_line: null,
- yAxis2_line_Name: "",
- yAxis2_line_Index: 0,
- yAxis3_line: null,
- yAxis3_line_Name: "",
- yAxis3_line_Index: 0,
- };
- AllData.refresh3++;
- AllData.TjData3 = null;
- AllData.TjData3Unit = null;
- AllData.chartData2 = {
- xAxis: [],
- yAxis: [],
- yAxis2: [],
- yAxis_Name: "",
- yAxis2_Name: "",
- y1_Unit: "km",
- };
- AllData.refresh2++;
- AllData.TjData2 = null;
- AllData.TjData2Unit = null;
- };
-
- // 打开公共弹窗
- const OpenGongGongDialog = () => {
- // debugger;
- let params = {
- stName: AllData.ClicksiteName,
- dataCode: "",
- stType: AllData.RightShowType,
- stCode: AllData.RightStCode,
- wellCode: "",
- id: AllData.RightShowID,
- geometry: AllData.RightGeometry,
- dataId: "",
- RefName: "jiancefenxiGWFX",
- };
- localStorage.setItem("ReturnPSTX", "On"); //On打开公共弹窗 off不打开公共弹窗 默认为On
- bus.emit("DynamicBus", params);
- };
- onMounted(() => {
- let initeGLTimer = setInterval(() => {
- if (!newfiberMap) return;
- bus.on("FenQuClick", FenQuClick);
- getData1();
- getData2();
- getData3();
- clearInterval(initeGLTimer);
- }, 100);
- });
-
- onBeforeUnmount(() => {
- bus.off("FenQuClick");
- });
- </script>
-
- <style lang="scss" scoped>
- .WSIndex {
- .CrumbesTitle {
- width: 100%;
- height: 44px;
- background: url("@/assets/images/pictureOnMap/eachBgc.png") no-repeat center;
- background-size: 100% 100%;
- box-sizing: border-box;
- padding-left: 40px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: center;
- .crumbs {
- font-weight: bold;
- font-size: 20px;
- color: #ffffff;
- cursor: pointer;
- &:hover {
- color: #2291e1;
- }
- }
- .crumbs2 {
- font-weight: bold;
- font-size: 20px;
- color: #ffffff;
- overflow: hidden;
- text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */
- white-space: nowrap; /* 限制不允许换行 */
- cursor: pointer;
- }
- }
- .modular1,
- .modular2,
- .modular3 {
- width: 100%;
- height: calc((100% - 50px) / 3);
-
- .modularBody {
- width: 100%;
- height: calc(100% - 50px);
- }
- }
-
- .modular1_right {
- width: 100%;
- height: calc(100% - 584px);
- }
- .modular2_right {
- width: 100%;
- height: 200px;
- .modularBody {
- width: 100%;
- height: calc(100% - 50px);
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-evenly;
- align-items: center;
-
- .SLList {
- display: inline-block;
- width: 33.33%;
- height: 110px;
- box-sizing: border-box;
- padding: 15px 0;
- background-image: url("@/assets/images/pictureOnMap/SLFX.png");
- background-repeat: no-repeat;
- background-size: contain;
-
- .SlList1P {
- width: 100%;
- height: 40px;
- line-height: 40px;
- text-align: center;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- .SlListNum {
- font-family: DINPro;
- font-weight: bold;
- font-size: 22px;
- 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;
- }
- }
- }
- }
- .modular3_right {
- width: 100%;
- height: 340px;
- .modularBody {
- width: 100%;
- height: calc(100% - 50px);
-
- .ListInfo100 {
- width: 100%;
- height: 38px;
- float: left;
- margin-top: 10px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- justify-content: flex-start;
- }
- .ListInfo50 {
- width: 50%;
- height: 38px;
- 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: 38px;
- line-height: 38px;
- text-align: center;
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 14px;
- color: #ccdfff;
- }
- .ListInfo_value {
- width: calc(100% - 75px);
- height: 38px;
- line-height: 30px;
- background: #0d2359;
- border-radius: 6px;
- border: 1px solid #0b9bff;
- box-sizing: border-box;
- padding: 5px 5px 5px 10px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 14px;
- color: #00fcff;
- }
- }
- }
-
- .modularRight2 {
- width: 100%;
- height: calc(100% - 50px);
- overflow: auto;
- background: #0d2359;
- }
- }
- </style>