<template>
<!-- 监测分析 -->
<div class="MonitoringAnalysis">
<!-- 左侧echarts -->
<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="modular0">
<div class="modularBtnBox">
<div
class="modularBtn"
:class="[AllData.ModularBtnActiveID == 1 ? 'modularBtnActive' : '']"
@click="modularBtn(1)"
>
本底缺陷
</div>
<div
class="modularBtn"
:class="[AllData.ModularBtnActiveID == 2 ? 'modularBtnActive' : '']"
@click="modularBtn(2)"
>
风险分析
</div>
</div>
<div class="modularTimerBox" v-show="AllData.ModularBtnActiveID == 2">
<!-- 日期和时间选择: -->
<span class="modularTimerBoxLabel">分析时间: </span>
<DateSelect
style="width: 200px"
v-model:dateTime="AllData.Timers"
:format="'YYYY-MM-DD'"
:valueFormat="'YYYY-MM-DD'"
@change="changeTime"
:dateType="'daterange'"
:rangeSeparator="'到'"
/>
</div>
</div>
<div class="modular1" v-if="AllData.ModularBtnActiveID == 1">
<div class="leve2Title">管网坡度</div>
<div class="modularBody">
<MonBarCharts
:data="AllData.chartData1"
:refresh="AllData.refresh1"
:ClickData="AllData.ClickData1"
/>
</div>
</div>
<div class="modular2" v-if="AllData.ModularBtnActiveID == 1">
<div class="leve2Title">大管套小管</div>
<div class="modularBody">
<MonBarChartsLeft
:data="AllData.chartData2"
:refresh="AllData.refresh2"
:ClickData="AllData.ClickData2"
></MonBarChartsLeft>
</div>
</div>
<div class="modular3" v-if="AllData.ModularBtnActiveID == 1">
<div class="leve2Title">管网混接</div>
<div class="modularBody">
<MonBarCharts
:data="AllData.chartData3"
:refresh="AllData.refresh3"
:ClickData="AllData.ClickData3"
/>
</div>
</div>
<div class="modular1" v-if="AllData.ModularBtnActiveID == 2">
<div class="leve2Title">
{{ AllData.TypeID == "sewage" ? "水质异常" : "管网风险" }}
</div>
<div class="modularBody">
<MonLineChartsLeft
v-if="AllData.TypeID == 'sewage'"
:data="AllData.chartData4"
:refresh="AllData.refresh4"
:ClickData="AllData.ClickData4"
/>
<MonBarCharts
v-if="AllData.TypeID == 'rain'"
:data="AllData.chartData7"
:refresh="AllData.refresh7"
:ClickData="AllData.ClickData7"
/>
</div>
</div>
<div class="modular2" v-if="AllData.ModularBtnActiveID == 2">
<div class="leve2Title">
{{ AllData.TypeID == "sewage" ? "外水注入分析" : "地下水渗入分析" }}
</div>
<div class="modularBody">
<MonBarChartsLeft2
v-if="AllData.TypeID == 'sewage'"
:echartData="AllData.chartData5"
:refresh="AllData.refresh5"
:ClickData="AllData.ClickData5"
></MonBarChartsLeft2>
<MonBarChartsLeft
v-if="AllData.TypeID == 'rain'"
:data="AllData.chartData8"
:refresh="AllData.refresh8"
:ClickData="AllData.ClickData8"
></MonBarChartsLeft>
</div>
</div>
<div class="modular3" v-if="AllData.ModularBtnActiveID == 2">
<div class="leve2Title">
{{ AllData.TypeID == "sewage" ? "淤堵风险分析" : "污水注入分析" }}
</div>
<div class="modularBody">
<div class="FontText" v-if="AllData.TypeID == 'sewage'">
低流速:0.6m/s,超低流速0.4m/s
</div>
<MonBarChartsYDFX
:data="AllData.chartData6"
:refresh="AllData.refresh6"
:ClickData="AllData.ClickData6"
/>
</div>
</div></div
></Transition>
<PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
<!-- 中间的污水/雨水切换 -->
<div class="TypeChangeBox">
<div
class="TypeBtn"
v-for="(item, index) in AllData.yw_type"
:class="[AllData.TypeID == item.key ? 'TypeBtnCheck' : '']"
@click="TypeClick(item)"
>
<span class="TypenName">{{ item.name }}</span>
</div>
</div>
<!-- 专题图专用弹窗 -->
<el-dialog
v-model="dialogConfig.visible"
style="height: 830px; width: 1200px"
:destroy-on-close="true"
:draggable="true"
title="详情"
class="JCFXDialog"
:z-index="10"
>
<el-tabs v-model="dialogConfig.activeName" @tab-click="handleClick">
<!-- 雨污共有 -->
<el-tab-pane label="管网坡度" name="gwpd">
<Gwpd
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
v-if="dialogConfig.activeName == 'gwpd'"
></Gwpd>
</el-tab-pane>
<el-tab-pane label="大管套小管" name="dgtxg">
<Dgtxg
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
v-if="dialogConfig.activeName == 'dgtxg'"
></Dgtxg>
</el-tab-pane>
<el-tab-pane label="管网混接" name="gwhj">
<Gwhj
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
v-if="dialogConfig.activeName == 'gwhj'"
></Gwhj>
</el-tab-pane>
<el-tab-pane label="其它缺陷" name="qt">
<Qt
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
v-if="dialogConfig.activeName == 'qt'"
></Qt>
</el-tab-pane>
<!-- 污水特有 -->
<el-tab-pane label="水质异常" name="szyc" v-if="AllData.TypeID == 'sewage'">
<Szyc
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
:TimerData="AllData.Timers"
v-if="dialogConfig.activeName == 'szyc'"
></Szyc>
</el-tab-pane>
<el-tab-pane label="外水注入" name="wszr" v-if="AllData.TypeID == 'sewage'">
<Wszr
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
:TimerData="AllData.Timers"
v-if="dialogConfig.activeName == 'wszr'"
></Wszr>
</el-tab-pane>
<el-tab-pane label="淤堵风险" name="ydfx" v-if="AllData.TypeID == 'sewage'">
<Ydfx
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
:TimerData="AllData.Timers"
v-if="dialogConfig.activeName == 'ydfx'"
></Ydfx>
</el-tab-pane>
<!-- 雨水特有 -->
<el-tab-pane label="溢流分析" name="gwfx" v-if="AllData.TypeID == 'rain'">
<Gwfx
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
:TimerData="AllData.Timers"
v-if="dialogConfig.activeName == 'gwfx'"
></Gwfx>
</el-tab-pane>
<el-tab-pane label="地下水入渗" name="dxssr" v-if="AllData.TypeID == 'rain'">
<Dxssr
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
:TimerData="AllData.Timers"
v-if="dialogConfig.activeName == 'dxssr'"
></Dxssr>
</el-tab-pane>
<el-tab-pane label="污水注入" name="ydfx" v-if="AllData.TypeID == 'rain'">
<Ydfx
:TypeID="AllData.TypeID"
:FenQuData="AllData.TitleName"
:lastFQName="dialogConfig.lastFQName"
:TimerData="AllData.Timers"
v-if="dialogConfig.activeName == 'ydfx'"
></Ydfx>
</el-tab-pane>
<!-- <el-tab-pane label="测试_分析弹窗" name="ylfxJCFX">
<ylfxJCFX v-if="dialogConfig.activeName == 'ylfxJCFX'"></ylfxJCFX>
</el-tab-pane> -->
</el-tabs>
</el-dialog>
</div>
</template>
<script setup name="MonitoringAnalysis">
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import moment from "moment";
import MonBarCharts from "./components/MonBarCharts.vue";
import MonBarChartsYDFX from "./components/MonBarCharts_YDFX.vue"; //淤堵风险专项charts
import MonBarChartsLeft from "./components/MonBarChartsLeft.vue";
import MonBarChartsLeft2 from "./components/MonBarChartsLeft2.vue";
import bus from "@/bus";
import MonLineChartsLeft from "./components/MonLineChartsLeft.vue";
import * as MonitorAPI from "@/api/MonitoringAnalysis.js";
// 引入弹窗组件
import Gwpd from "./tab_components/gwpd.vue";
import Dgtxg from "./tab_components/dgtxg.vue";
import Gwhj from "./tab_components/gwhj.vue";
import Qt from "./tab_components/qt.vue";
import Szyc from "./tab_components/szyc.vue";
import Wszr from "./tab_components/wszr.vue";
import Ydfx from "./tab_components/ydfx.vue";
import Gwfx from "./tab_components/gwfx.vue";
import Dxssr from "./tab_components/dxssr.vue";
// 测试
// import ylfxJCFX from "./../components/DialogTabs/component/ylfxJCFX.vue";
// 面板控制组件
import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
const showPanel = ref(false); //面板展开收起
const PanelChange = (val) => {
showPanel.value = val;
};
const dialogConfig = reactive({
visible: false,
activeName: "",
lastFQName: "", //点击的echarts图形数据名称
});
const AllData = reactive({
regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
regionName: "", //分区名称
yw_type: [
{
name: "污水体系",
key: "sewage",
values: [
{ key: "污水分区1", visible: true },
{ key: "尾水路径", visible: true },
],
},
{
name: "雨水体系",
key: "rain",
values: [
{ key: "雨水分区1", visible: true },
{ key: "雨水系统流向", visible: true },
{ key: "雨水系统流向1", visible: true },
],
},
],
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: "", //全称
},
],
ModularBtnActiveID: 1,
Timers: [
// "2024-07-01",
// "2024-07-02",
// moment().subtract(3, "day").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"),
],
// 污水/雨水切换 sewage / rain
TypeID: "sewage",
// 管网坡度
chartData1: {
// xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// yAxis: ["870", "568", "700", "600", "276", "280"],
// yAxis_Name: "复勘数",
// yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
// yAxis2_Name: "片区管网",
// yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
// yAxis3_line_Name: "报告数",
// yAxis4_line: null,
// yAxis4_line_Name: "",
xAxis: [],
yAxis: [],
yAxis_Name: "",
yAxis2: [],
yAxis2_Name: "",
yAxis3_line: [],
yAxis3_line_Name: "",
yAxis4_line: null,
yAxis4_line_Name: "",
},
refresh1: 0,
ClickData1: "gwpd",
// 大管套小管
chartData2: {
xAxis: [],
yAxis: [],
yAxis2: [],
yAxis_Name: "",
yAxis2_Name: "",
// xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// yAxis: ["870", "568", "700", "600", "276", "280"],
// yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
// yAxis_Name: "复勘数",
// yAxis2_Name: "勘测数",
},
refresh2: 0,
ClickData2: "dgtxg",
// 管网混接
chartData3: {
xAxis: [],
yAxis: [],
yAxis_Name: "",
yAxis2: [],
yAxis2_Name: "",
yAxis3_line: [],
yAxis3_line_Name: "",
yAxis4_line: null,
yAxis4_line_Name: "",
// xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// yAxis: ["870", "568", "700", "600", "276", "280"],
// yAxis_Name: "复勘数",
// yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
// yAxis2_Name: "片区管网",
// yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
// yAxis3_line_Name: "报告数",
// yAxis4_line: null,
// yAxis4_line_Name: "",
},
refresh3: 0,
ClickData3: "gwhj",
// 水质异常
chartData4: {
xAxis: [],
yAxis: [],
yAxis2: [],
yAxis_Name: "",
yAxis2_Name: "",
// xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// yAxis: ["160", "200", "180", "190", "200", "210"],
// yAxis_Name: "进口水质",
// yAxis2: ["120", "150", "130", "120", "130", "140"],
// yAxis2_Name: "出口水质",
},
refresh4: 0,
ClickData4: "szyc",
// 外水注入分析
chartData5: {
xData: [],
data1: [],
data2: [],
// xData: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// data1: ["870", "568", "700", "600", "276", "280"],
// data2: ["1870", "1568", "1700", "1600", "1276", "1276"],
},
refresh5: 0,
ClickData5: "wszr",
// 淤堵风险分析
chartData6: {
xAxis: [],
yAxis: [],
yAxis_Name: "",
yAxis2: [],
yAxis2_Name: "",
yAxis3_line: [],
yAxis3_line_Name: "",
// xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// yAxis: ["6", "6", "7", "4", "4", "4"],
// yAxis_Name: "风险点位数",
// yAxis2: ["11", "11", "11", "10", "9", "8"],
// yAxis2_Name: "点位数",
// yAxis3_line: ["0.5", "0.7", "0.6", "0.55", "0.7", "0.7"],
// yAxis3_line_Name: "流速",
},
refresh6: 0,
ClickData6: "ydfx",
// 管网风险
chartData7: {
xAxis: [],
yAxis: [],
yAxis_Name: "",
yAxis2: [],
yAxis2_Name: "",
yAxis3_line: [],
yAxis3_line_Name: "",
yAxis4_line: null,
yAxis4_line_Name: "",
// xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// yAxis: ["870", "568", "700", "600", "276", "280"],
// yAxis_Name: "复勘数",
// yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
// yAxis2_Name: "片区管网",
// yAxis3_line: ["1000", "600", "680", "520", "160", "180"],
// yAxis3_line_Name: "报告数",
// yAxis4_line: null,
// yAxis4_line_Name: "",
},
refresh7: 0,
ClickData7: "gwfx",
// 地下水渗入分析
chartData8: {
xAxis: [],
yAxis: [],
yAxis2: [],
yAxis_Name: "",
yAxis2_Name: "",
// xAxis: ["王家店", "花山", "龙王咀", "左岭", "豹澥", "汤逊湖"],
// yAxis: [],
// yAxis2: ["1870", "1568", "1700", "1600", "1276", "1276"],
// yAxis_Name: "",
// yAxis2_Name: "问题数",
},
refresh8: 0,
ClickData8: "dxssr",
});
// 污水 / 雨水 切换
const TypeClick = (item) => {
let type = item.key;
TypeClick_(item);
AllData.regionGrade = "one";
AllData.regionName = "";
// 切换时回到默认一级分区
AllData.TypeID = type;
if (AllData.TypeID == "sewage") {
// 污水
AllData.TitleName[0].abbreviation = "高新区";
AllData.TitleName[0].id = ""; //分区信息-动态
AllData.TitleName[0].grade = "one"; //分区层级-静态
AllData.TitleName[0].sort = 0; //面包屑的顺序
AllData.TitleName[0].Name = []; //面包屑的顺序
AllData.Timers = ["2024-07-01", "2024-07-07"];
// 将2,3,4级分区清空
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,
};
} else {
// 雨水
AllData.TitleName[0].abbreviation = "高新区";
AllData.TitleName[0].id = ""; //分区信息-动态
AllData.TitleName[0].grade = "one"; //分区层级-静态
AllData.TitleName[0].sort = 0; //面包屑的顺序
AllData.TitleName[0].Name = []; //面包屑的顺序
AllData.Timers = [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")];
// 将2,3,4级分区清空
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,
};
}
// 切换时进行数据请求
if (AllData.ModularBtnActiveID == 1) {
// 本底缺陷
GetData("slope");
GetData("big_cover_small");
GetData("mix");
} else {
// 风险分析
GetData2();
}
};
const TypeClick_ = (item) => {
closeAllLayer();
bus.emit("clearTemporaryData");
const { setLayerVisible } = events_params;
newfiberMap.map.easeTo(newfiberMap.config_.params.init);
item.values &&
item.values
.filter((i) => i.visible)
.forEach((i) => bus.emit(setLayerVisible.key, { layername: i.key, isCheck: true }));
};
const events_params = {
setHighlight: { key: "setHighlight" },
setLayerVisible: { key: "setLayerVisible" },
clearTemporaryData: { key: "clearTemporaryData" },
};
const closeAllLayer = () => {
const { setLayerVisible, setHighlight } = events_params;
AllData.yw_type
.map((i) => i.values)
.filter(Boolean)
.flat()
.forEach((i) =>
bus.emit(setLayerVisible.key, {
layername: i.key,
isCheck: false,
values: i.values,
})
);
bus.emit(setHighlight.key, []);
};
// 分区点击切换
const FenQuClick = (Row) => {
console.log("FenQuClick", Row.properties, Row.layerId);
if (!!!Row.properties.pid) return;
// 请求面包屑的数据
let params = {
regionType: AllData.TypeID,
id: Number(Row.properties.pid),
};
MonitorAPI.lineGrade(params).then((res) => {
if (res && res.code == 200) {
// 默认设置基础的分区
if (AllData.TypeID == "sewage") {
// 污水
AllData.TitleName[0].abbreviation = "高新区";
AllData.TitleName[0].id = ""; //分区信息-动态
AllData.TitleName[0].grade = "one"; //分区层级-静态
AllData.TitleName[0].sort = 0; //面包屑的顺序
AllData.TitleName[0].Name = ""; //全称
} else {
// 雨水
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();
if (res.data.length == 1) {
// 只有总分区/高新区
res.data.forEach((element) => {
if (element.grade == "one") {
AllData.TitleName[1] = {
abbreviation: element.shortName,
id: element.id,
grade: "two",
sort: 1,
Name: element.name,
};
}
});
} else if (res.data.length == 2) {
// 只有总分区/高新区/二级分区
res.data.forEach((element) => {
if (element.grade == "one") {
AllData.TitleName[1] = {
abbreviation: element.shortName,
id: element.id,
grade: "two",
sort: 1,
Name: element.name,
};
}
if (element.grade == "two") {
AllData.TitleName[2] = {
abbreviation: element.shortName,
id: element.id,
grade: "three",
sort: 2,
Name: element.name,
};
}
});
} else if (res.data.length == 3) {
// 只有总分区/高新区/二级分区/三级分区
res.data.forEach((element) => {
if (element.grade == "one") {
AllData.TitleName[1] = {
abbreviation: element.shortName,
id: element.id,
grade: "two",
sort: 1,
Name: element.name,
};
}
if (element.grade == "two") {
AllData.TitleName[2] = {
abbreviation: element.shortName,
id: element.id,
grade: "three",
sort: 2,
Name: element.name,
};
}
if (element.grade == "three") {
AllData.TitleName[3] = {
abbreviation: element.shortName,
id: element.id,
grade: "four",
sort: 3,
Name: element.name,
};
}
});
} else if (res.data.length == 4) {
// 只有总分区/高新区/二级分区/三级分区/四级分区
res.data.forEach((element) => {
if (element.grade == "one") {
AllData.TitleName[1] = {
abbreviation: element.shortName,
id: element.id,
grade: "two",
sort: 1,
Name: element.name,
};
}
if (element.grade == "two") {
AllData.TitleName[2] = {
abbreviation: element.shortName,
id: element.id,
grade: "three",
sort: 2,
Name: element.name,
};
}
if (element.grade == "three") {
AllData.TitleName[3] = {
abbreviation: element.shortName,
id: element.id,
grade: "four",
sort: 3,
Name: element.name,
};
}
if (element.grade == "four") {
AllData.TitleName[4] = {
abbreviation: element.shortName,
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;
if (AllData.ModularBtnActiveID == 1) {
// 本底缺陷
GetData("slope");
GetData("big_cover_small");
GetData("mix");
} else {
// 风险分析
GetData2();
}
});
};
// 顶部按钮点击切换
const modularBtn = (num) => {
AllData.ModularBtnActiveID = num;
// AllData.regionGrade = "one";
// AllData.regionName = "";
// 切换时进行数据请求
if (AllData.ModularBtnActiveID == 1) {
// 本底缺陷
GetData("slope");
GetData("big_cover_small");
GetData("mix");
} else {
// 风险分析
GetData2();
}
};
// 选择时间
const changeTime = () => {
console.log(AllData.Timers);
GetData2();
};
/**
* 获取本底数据
* queryType:查询类型：（slope：坡度 || big_cover_small：大管套小管 || mix：混接）
*/
const GetData = (queryType) => {
if (AllData.regionGrade == "five") return;
if (AllData.regionGrade == "four" && AllData.TypeID == "rain") return;
let params = {
regionGrade: AllData.regionGrade,
regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
queryType: queryType,
regionName: AllData.regionName,
};
// 根据不同类型进行清空操作
clearEchartsData(queryType);
MonitorAPI.pipelineBackgroundDefectAnalysis(params).then((res) => {
if (res && res.code == 200) {
// 根据不同类型进行赋值
switch (queryType) {
case "slope":
AllData.chartData1.xAxis = res.data.regionNameList;
AllData.chartData1.yAxis = res.data.reverseResurveyLengthList;
AllData.chartData1.yAxis_Name = "复勘数";
AllData.chartData1.yAxis2 = res.data.pipelineLengthList;
AllData.chartData1.yAxis2_Name = "片区管网";
AllData.chartData1.yAxis3_line = res.data.reverseReportLengthList;
AllData.chartData1.yAxis3_line_Name = "报告数";
AllData.chartData1.yAxis4_line = null;
AllData.chartData1.yAxis4_line_Name = "";
AllData.refresh1++;
break;
case "big_cover_small":
AllData.chartData2.xAxis = res.data.regionNameList;
AllData.chartData2.yAxis = res.data.bigCoverSmallResurveyCountList;
AllData.chartData2.yAxis2 = res.data.bigCoverSmallSurveyCountList;
AllData.chartData2.yAxis_Name = "复勘数";
AllData.chartData2.yAxis2_Name = "勘测数";
AllData.refresh2++;
break;
case "mix":
AllData.chartData3.xAxis = res.data.regionNameList;
AllData.chartData3.yAxis = res.data.mixResurveyLengthList;
AllData.chartData3.yAxis_Name = "复勘数";
AllData.chartData3.yAxis2 = res.data.pipelineLengthList;
AllData.chartData3.yAxis2_Name = "片区管网";
AllData.chartData3.yAxis3_line = res.data.mixReportLengthList;
AllData.chartData3.yAxis3_line_Name = "报告数";
AllData.chartData3.yAxis4_line = null;
AllData.chartData3.yAxis4_line_Name = "";
AllData.refresh3++;
break;
}
}
});
};
/**
* 获取风险分析
* regionGrade:分区级别（one：一级 || two：二级 || three：三级 || four：四级）
* regionName:分区名称
*/
const GetData2 = () => {
if (AllData.regionGrade == "five") return;
if (AllData.regionGrade == "four" && AllData.TypeID == "rain") return;
let params = {
regionGrade: AllData.regionGrade,
regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
regionName: AllData.regionName,
startTime: AllData.Timers[0],
endTime: AllData.Timers[1],
};
// 清空
clearEchartsData2();
// 读取数据
MonitorAPI.pipelineRiskAnalysis(params).then((res) => {
if (res && res.code == 200) {
if (AllData.TypeID == "sewage") {
// 水质异常 - 污水
AllData.chartData4.xAxis = res.data.regionNameList;
if (AllData.regionGrade != "four") {
AllData.chartData4.yAxis = res.data.inletWaterQualityExceptionCountList;
AllData.chartData4.yAxis_Name = "进口水质";
}
AllData.chartData4.yAxis2 = res.data.outletWaterQualityExceptionCountList;
AllData.chartData4.yAxis2_Name = "出口水质";
AllData.refresh4++;
// 外水注入分析 - 污水
AllData.chartData5.xData = res.data.regionNameList;
AllData.chartData5.data1 = res.data.externalWaterInjectionNightCountList;
AllData.chartData5.data2 = res.data.externalWaterInjectionDayCountList;
AllData.refresh5++;
// 淤堵风险分析 - 污水
AllData.chartData6.xAxis = res.data.regionNameList;
AllData.chartData6.yAxis = [];
AllData.chartData6.yAxis_Name = "";
AllData.chartData6.yAxis2 = res.data.pointCountList;
AllData.chartData6.yAxis2_Name = "点位数";
AllData.chartData6.yAxis3_line = res.data.siltRiskPointCountList;
AllData.chartData6.yAxis3_line_Name = "风险点位数";
AllData.refresh6++;
} else {
// 管网风险 - 雨水
AllData.chartData7.xAxis = res.data.regionNameList;
AllData.chartData7.yAxis = res.data.overFlowPointCountList;
AllData.chartData7.yAxis_Name = "溢流风险点";
AllData.chartData7.yAxis2 = res.data.pointCountList;
AllData.chartData7.yAxis2_Name = "点位数";
AllData.chartData7.yAxis3_line = res.data.fullPipePointCountList;
AllData.chartData7.yAxis3_line_Name = "管网满管运行点";
AllData.chartData7.yAxis4_line = null;
AllData.chartData7.yAxis4_line_Name = "";
AllData.refresh7++;
// 地下水渗入分析 - 雨水
AllData.chartData8.xAxis = res.data.regionNameList;
AllData.chartData8.yAxis = [];
AllData.chartData8.yAxis2 = res.data.groundwaterInflowPointCountList;
AllData.chartData8.yAxis_Name = "";
AllData.chartData8.yAxis2_Name = "问题数";
AllData.refresh8++;
// 污水注入分析 - 雨水
AllData.chartData6.xAxis = res.data.regionNameList;
AllData.chartData6.yAxis = [];
AllData.chartData6.yAxis_Name = "";
AllData.chartData6.yAxis2 = res.data.pointCountList;
AllData.chartData6.yAxis2_Name = "点位数";
AllData.chartData6.yAxis3_line = res.data.sewageInjectPointCountList;
AllData.chartData6.yAxis3_line_Name = "风险点位数";
AllData.refresh6++;
}
}
});
};
// 清除本底分析echarts的数据
const clearEchartsData = (queryType) => {
switch (queryType) {
case "slope":
AllData.chartData1.xAxis = [];
AllData.chartData1.yAxis = [];
AllData.chartData1.yAxis_Name = "";
AllData.chartData1.yAxis2 = [];
AllData.chartData1.yAxis2_Name = "";
AllData.chartData1.yAxis3_line = [];
AllData.chartData1.yAxis3_line_Name = "";
AllData.chartData1.yAxis4_line = null;
AllData.chartData1.yAxis4_line_Name = "";
AllData.refresh1++;
break;
case "big_cover_small":
AllData.chartData2.xAxis = [];
AllData.chartData2.yAxis = [];
AllData.chartData2.yAxis2 = [];
AllData.refresh2++;
break;
case "mix":
AllData.chartData3.xAxis = [];
AllData.chartData3.yAxis = [];
AllData.chartData3.yAxis_Name = "";
AllData.chartData3.yAxis2 = [];
AllData.chartData3.yAxis2_Name = "";
AllData.chartData3.yAxis3_line = [];
AllData.chartData3.yAxis3_line_Name = "";
AllData.chartData3.yAxis4_line = null;
AllData.chartData3.yAxis4_line_Name = "";
AllData.refresh3++;
break;
}
};
// 清除风险分析echarts的数据
const clearEchartsData2 = () => {
if (AllData.TypeID == "sewage") {
// 水质异常 - 污水
AllData.chartData4.xAxis = [];
AllData.chartData4.yAxis = [];
AllData.chartData4.yAxis_Name = "";
AllData.chartData4.yAxis2 = [];
AllData.chartData4.yAxis2_Name = "出口水质";
AllData.refresh4++;
// 外水注入分析 - 污水
AllData.chartData5.xData = [];
AllData.chartData5.data1 = [];
AllData.chartData5.data2 = [];
AllData.refresh5++;
// 淤堵风险分析 - 污水
AllData.chartData6.xAxis = [];
AllData.chartData6.yAxis = [];
AllData.chartData6.yAxis_Name = "";
AllData.chartData6.yAxis2 = [];
AllData.chartData6.yAxis2_Name = "点位数";
AllData.chartData6.yAxis3_line = [];
AllData.chartData6.yAxis3_line_Name = "风险点位数";
AllData.refresh6++;
} else {
// 管网风险 - 雨水
AllData.chartData7.xAxis = [];
AllData.chartData7.yAxis = [];
AllData.chartData7.yAxis_Name = "溢流风险点";
AllData.chartData7.yAxis2 = [];
AllData.chartData7.yAxis2_Name = "点位数";
AllData.chartData7.yAxis3_line = [];
AllData.chartData7.yAxis3_line_Name = "管网满管运行点";
AllData.chartData7.yAxis4_line = null;
AllData.chartData7.yAxis4_line_Name = "";
AllData.refresh7++;
// 地下水渗入分析 - 雨水
AllData.chartData8.xAxis = [];
AllData.chartData8.yAxis = [];
AllData.chartData8.yAxis2 = [];
AllData.chartData8.yAxis_Name = "";
AllData.chartData8.yAxis2_Name = "问题数";
AllData.refresh8++;
// 污水注入分析 - 雨水
AllData.chartData6.xAxis = [];
AllData.chartData6.yAxis = [];
AllData.chartData6.yAxis_Name = "";
AllData.chartData6.yAxis2 = [];
AllData.chartData6.yAxis2_Name = "点位数";
AllData.chartData6.yAxis3_line = [];
AllData.chartData6.yAxis3_line_Name = "风险点位数";
AllData.refresh6++;
}
};
// 清除面包屑的数据
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 MBClick = (item) => {
console.log(item);
// 赋值需要进行echarts数据请求的数据
AllData.regionGrade = item.grade;
AllData.regionName = item.Name;
// 视角切换
if (item.sort == 0) {
// 回到默认图层
newfiberMap.map.easeTo(newfiberMap.config_.params.init);
AllData.regionGrade = "one";
AllData.regionName = "";
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,
};
}
if (item.sort == 1) {
bus.emit("panelDataToMap", {
name: item.abbreviation,
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,
};
}
if (item.sort == 2) {
bus.emit("panelDataToMap", {
name: item.abbreviation,
id: item.id,
});
AllData.TitleName[3] = {
abbreviation: "",
Name: "",
id: "",
grade: "four",
sort: 3,
};
AllData.TitleName[4] = {
abbreviation: "",
Name: "",
id: "",
grade: "five",
sort: 4,
};
}
if (item.sort == 3) {
bus.emit("panelDataToMap", {
name: item.abbreviation,
id: item.id,
});
AllData.TitleName[4] = {
abbreviation: "",
Name: "",
id: "",
grade: "five",
sort: 4,
};
}
// 切换时进行数据请求
if (AllData.ModularBtnActiveID == 1) {
// 本底缺陷
GetData("slope");
GetData("big_cover_small");
GetData("mix");
} else {
// 风险分析
GetData2();
}
};
// 打开弹窗
const openJXFXDialog = (item) => {
console.log(item);
console.log(AllData.Timers);
dialogConfig.visible = true;
dialogConfig.activeName = item.ClickData;
dialogConfig.lastFQName = item.name;
};
const handleClick = (tab, event) => {
console.log(tab, event);
};
onMounted(() => {
// 默认加载污水体系
let initeGLTimer = setInterval(() => {
if (!newfiberMap) return;
TypeClick(AllData.yw_type[0]);
bus.on("FenQuClick", FenQuClick);
bus.on("openJXFXDialog", openJXFXDialog);
clearInterval(initeGLTimer);
}, 100);
bus.on(mapInitBusName, () =>
TypeClick(AllData.yw_type.filter((i) => i.key == AllData.TypeID)[0])
);
});
onBeforeUnmount(() => {
const { setHighlight } = events_params;
bus.emit(setHighlight.key, []);
bus.off("FenQuClick");
bus.off("openJXFXDialog");
bus.off(mapInitBusName);
closeAllLayer();
});
</script>
<style lang="scss" scoped>
.MonitoringAnalysis {
.TypeChangeBox {
left: 50%;
position: fixed;
top: 120px;
width: 300px;
height: 39px;
margin-left: -150px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
z-index: 10;
.TypeBtn {
width: 138px;
height: 39px;
background: url("@/assets/images/pictureOnMap/JCFX/MoRen.png") no-repeat center;
float: left;
cursor: pointer;
.TypenName {
display: inline-block;
width: 138px;
height: 39px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #ffffff;
line-height: 36px;
text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
// background: linear-gradient(
// 180deg,
// rgba(49, 190, 255, 0.3) 0%,
// rgba(239, 252, 254, 1) 40%,
// rgba(239, 252, 254, 1) 100%
// );
// background-clip: text;
// -webkit-text-fill-color: transparent;
text-align: center;
}
}
.TypeBtnCheck {
background: url("@/assets/images/pictureOnMap/JCFX/XuanZhong.png") no-repeat center;
}
}
.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;
}
}
}
.modular0 {
width: 100%;
height: 85px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.modularBtnBox {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.modularBtn {
width: 140px;
height: 34px;
line-height: 34px;
background: linear-gradient(180deg, #0c2156 0%, #2291e1 100%);
text-align: center;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #e0e5fa;
margin: 0 10px;
cursor: pointer;
border: 1px solid;
border-radius: 17px;
// border-radius: 17px;
border-color: #308fee;
}
.modularBtnActive {
background: linear-gradient(180deg, #0c3f57 0%, #1dd0c7 100%);
// border-radius: 17px;
color: #ffffff;
border-color: #31f0f2;
}
}
.modularTimerBox {
height: 32px;
line-height: 32px;
width: 80%;
text-align: center;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #d2e2ff;
background: linear-gradient(0deg, #00134f 0%, #003065 100%);
position: relative;
border: 1px solid #163f80;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
.modularTimerBoxLabel {
display: inline-block;
padding-left: 30px;
cursor: auto;
}
::v-deep(.el-input__wrapper) {
background: linear-gradient(0deg, #00134f 0%, #003065 100%);
border: none;
box-shadow: none;
.el-input__icon {
color: white;
}
.el-range-input {
color: #2cb7ff;
}
.el-range-separator {
color: white;
}
}
&::after {
content: "";
position: absolute;
left: 249px;
top: -8px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #163f80;
}
}
}
.modular1,
.modular2,
.modular3 {
width: 100%;
height: calc((100% - 140px) / 3);
.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;
}
}
}
}
</style>
<style lang="scss">
.JCFXDialog {
background: #071645;
.el-dialog__header {
height: 44px;
width: 100%;
background: url("@/assets/images/pictureOnMap/JCFX/JCFXDialogHeader.png") no-repeat
center;
padding: 0 50px;
box-sizing: border-box;
margin: 0;
.el-dialog__title {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 24px;
color: #ffffff;
height: 44px;
line-height: 44px;
}
.el-dialog__headerbtn {
width: 44px;
height: 44px;
top: 3px;
right: 0;
.el-dialog__close {
font-size: 22px;
color: #7defff;
}
}
}
.el-dialog__body {
width: 100%;
height: calc(100% - 44px);
.el-tabs {
width: 100%;
height: 100%;
.el-tabs__item {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #8fbffe;
width: 120px;
text-align: center;
padding: 0;
}
.is-active {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #ffffff;
}
.el-tabs__nav-wrap::after {
content: "";
height: 1px;
background-color: #4389e1;
}
.el-tabs__active-bar {
height: 4px;
background: #2cb7ff;
}
.el-tabs__content {
width: 100%;
height: calc(100% - 55px);
.el-tab-pane {
width: 100%;
height: 100%;
}
}
}
}
}
</style>
