<template>
<!-- 排水体系 -->
<div class="YSIndex">
<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">
<DraBarCharts2Y
v-if="
AllData.regionGrade == 'one' ||
AllData.regionGrade == 'two' ||
AllData.regionGrade == 'four'
"
:data="AllData.chartData1"
:refresh="AllData.refresh1"
:ClickData="AllData.ClickData1"
></DraBarCharts2Y>
<DraBarChartsLeft
v-if="AllData.regionGrade == 'three'"
:data="AllData.chartData2"
:refresh="AllData.refresh2"
:ClickData="AllData.ClickData2"
></DraBarChartsLeft>
</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 == 'four'
"
:data="AllData.chartData2"
:refresh="AllData.refresh2"
:ClickData="AllData.ClickData2"
></DraBarChartsLeft>
<DraBarCharts2Y
v-if="AllData.regionGrade == 'three'"
:data="AllData.chartData1"
:refresh="AllData.refresh1"
:ClickData="AllData.ClickData1"
></DraBarCharts2Y>
</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'
"
:data="AllData.chartData3"
:refresh="AllData.refresh3"
:ClickData="AllData.ClickData3"
></DraBarCharts2Y>
<DraLineChartsLeft
v-if="AllData.regionGrade == 'four'"
:data="AllData.chartData3"
:refresh="AllData.refresh3"
:ClickData="AllData.ClickData3"
/>
</div>
</div></div
></Transition>
<Transition name="fade_right">
<div
:class="['moduleBox', 'moduleBoxRight']"
v-show="!showPanel && AllData.RightShow"
>
<!-- 顶部公共标题 -->
<div class="CrumbesTitle">
<span class="crumbs2">{{ 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 v-if="!AllData.isJBK" class="SLList">
<div class="SlList1P">
<span class="SlListNum">{{ AllData.SLFX.upstreamSiteWaterYield }}</span>
<span class="SlListUnit">万吨</span>
</div>
<div class="SlList2P">上游水量</div>
</div>
<div class="SLList">
<div class="SlList1P">
<span class="SlListNum">{{ AllData.SLFX.siteWaterYield }}</span>
<span class="SlListUnit">万吨</span>
</div>
<div class="SlList2P">当前站点水量</div>
</div>
<div class="SLList">
<div class="SlList1P">
<span class="SlListNum">{{ AllData.SLFX.downstreamSiteWaterYield }}</span>
<span class="SlListUnit">万吨</span>
</div>
<div class="SlList2P">下游水量</div>
</div>
</div>
</div>
<div class="modular3_right">
<div class="leve2Title">管网本底</div>
<div class="modularBody">
<div class="ListInfo100">
<div class="ListInfo_label">类型:</div>
<div class="ListInfo_value">
{{
AllData.GWBD.pointType == "YS"
? "雨水管网"
: AllData.GWBD.pointType == "WS"
? "污水管网"
: "--"
}}
</div>
</div>
<div class="ListInfo100">
<div class="ListInfo_label">编号:</div>
<div class="ListInfo_value">
{{ AllData.GWBD.pointNumber ? AllData.GWBD.pointNumber : "--" }}
</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.repairYear ? AllData.GWBD.repairYear : "--" }}
</div>
</div>
</div>
</div>
</div>
</Transition>
<Transition name="fade_right">
<div
:class="['moduleBox', 'moduleBoxRight']"
v-if="
!showPanel &&
!AllData.RightShow &&
(AllData.regionGrade == 'one' || AllData.regionGrade == 'two')
"
>
<div class="CrumbesTitle">
<span v-if="AllData.regionGrade == 'one'" class="crumbs2">港渠统计</span>
<span v-if="AllData.regionGrade == 'two'" class="crumbs2">水质统计</span>
</div>
<div class="modularRight2">
<YSRight
v-if="AllData.regionGrade == 'one'"
:waterRegionCode="AllData.waterRegionCode"
></YSRight>
<YSRight2
v-if="AllData.regionGrade == 'two'"
:waterRegionCode="AllData.waterRegionCode"
:name="AllData.regionName"
></YSRight2>
</div>
</div>
</Transition>
</div>
</template>
<script setup name="YSIndex">
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 DraLineChartsLeft from "./components/DraLineChartsLeft.vue";
// 右侧面板接入
import RightCharts from "./components/RightCharts.vue";
import YSRight from "./YSIndex_right.vue";
import YSRight2 from "./YSIndex_right2.vue";
// 面板控制组件
import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
const showPanel = ref(false); //面板展开收起
const PanelChange = (val) => {
showPanel.value = val;
};
const AllData = reactive({
TypeID: "rain",
regionGrade: "one", //分区级别（one：一级 || two：二级 || three：三级 || four：四级）
regionName: "", //分区名称
waterRegionCode: "", //分区编号
RightShow: false, //右侧面板是否显示--基于是否选择站点进行判断
RightShowID: "",
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: {},
isJBK: true, //是否为接驳口
chartDataRight: {
yAxis: [],
yAxis_Name: "降雨量",
yAxis2: [],
yAxis2_Name: "流速",
yAxis3: [],
yAxis3_Name: "水深",
xAxis: [],
},
refreshRight: 0,
ClicksiteName: "",
TjData1: 0,
TjData1Unit: "",
TjData2: 0,
TjData2Unit: "",
TjData3: 0,
TjData3Unit: "",
});
// 面包屑点击事件
const MBClick = (item) => {
console.log(item);
AllData.RightShow = false;
AllData.RightShowID = "";
// 赋值需要进行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();
getData3();
getData7();
}
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,
};
// 切换时进行数据请求,默认视角请求
getData1();
getData4();
getData5();
}
if (item.sort == 3) {
bus.emit("panelDataToMap", {
name: item.Name,
id: item.id,
});
AllData.TitleName[4] = {
abbreviation: "",
Name: "",
id: "",
grade: "five",
sort: 4,
};
getData2();
getData4();
getData5();
}
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;
// 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("三级");
getData1();
getData4();
getData5();
} else if (AllData.regionGrade == "four") {
// 四级
console.log("四级");
getData2();
getData4();
getData5();
} else {
// 五级 五级为排水单元,由上可知,因为没有pid 所以此方法无效
console.log("五级");
}
}
});
} else if (Row.layerId == "point") {
// 点位
if (Row.properties.pointType == "rainwater_pipeline_quality") {
if (AllData.RightShowID == Row.properties.id) {
// 说明是同样的一个点点了两次,所以进行关闭
AllData.RightShow = false;
AllData.RightShowID = "";
} else {
AllData.ClicksiteName = Row.properties.name;
AllData.RightShow = true;
AllData.RightShowID = Row.properties.id;
// Row.properties.wellCode
// 获取管网信息
MonitorAPI.pipelinePointPage({
pointNumber: Row.properties.wellCode,
}).then((res) => {
if (res && res.code == 200) {
AllData.GWBD = res.data[0];
}
});
// 根据type 判断是管井还是接驳口
if (Row.properties.type == "rainwater_pipeline_quality_area1") {
// 接驳口
AllData.isJBK = true;
} else {
// 管井或其他
AllData.isJBK = false;
}
// 上下游水量分析
getDataSXY(Row.properties);
// 获取echarts数据
// setTimeout(() => {
AllData.chartDataRight = {
yAxis: [],
yAxis_Name: "降雨量",
yAxis2: [],
yAxis2_Name: "流速",
yAxis3: [],
yAxis3_Name: "水深",
xAxis: [],
};
AllData.refreshRight = 0;
GetRightCharts(Row.properties);
// }, 900);
}
}
}
};
// 清除面包屑的数据
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.TjData2 = 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.TjData2 = res.data.pipelineLengthList
.reduce((accu, curren) => Number(accu) + Number(curren))
.toFixed(2);
AllData.TjData2Unit = "km";
}
if (AllData.regionGrade == "three") {
// 三级Ecahrts 名称
AllData.chartData2.yAxis_Name = "摸排管网";
AllData.TjData1 = res.data.pipelineLengthList
.reduce((accu, curren) => Number(accu) + Number(curren))
.toFixed(2);
AllData.TjData1Unit = "km";
}
// 数据赋值
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++;
}
});
};
// 获取数据 徐云欣 二级界面的管网监测/四级界面的历史风险
const getData2 = () => {
MonitorAPI.pipelineRunRiskStatistic({
regionGrade: AllData.regionGrade, //分区级别（one：一级 || two：二级 || three：三级 || four：四级 || five：五级）
regionName: AllData.regionName, //分区名称
regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
// startTime: "", //开始时间（仅历史风险需要用到）
// endTime: "", //结束时间（仅历史风险需要用到）
}).then((res) => {
if (res && res.code == 200) {
if (AllData.regionGrade == "two") {
AllData.chartData1.xAxis = res.data.regionNameList; //X轴数据
AllData.chartData1.y1_Unit = "个"; //Y轴单位
AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
AllData.chartData1.y2_show = false; //是否展示右侧的2号轴
AllData.chartData1.yAxis1_bar = res.data.pipelinePointCount; //数据1
AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
AllData.chartData1.yAxis1_bar_index = 0;
AllData.chartData1.yAxis2_bar = res.data.pipelineRunRiskPointCount; //数据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 = 0;
AllData.chartData1.yAxis3_line = null;
AllData.chartData1.yAxis3_line_Name = "";
AllData.chartData1.yAxis3_line_Index = 1;
AllData.refresh1++;
AllData.TjData1 = res.data.pipelinePointCount
.reduce((accu, curren) => Number(accu) + Number(curren))
.toFixed(0);
AllData.TjData1Unit = "个";
}
if (AllData.regionGrade == "four") {
// AllData.chartData3.xAxis = res.data.regionNameList;
// AllData.chartData3.yAxis = res.data.overFlowRiskTimesList; //溢流风险
// AllData.chartData3.yAxis2 = res.data.fullPipeTimesList; //满管风险
// AllData.chartData3.yAxis_Name = "溢流风险";
// AllData.chartData3.yAxis2_Name = "满管风险";
// AllData.refresh3++;
AllData.chartData3.xAxis = res.data.regionNameList;
AllData.chartData3.yAxis1_bar = null;
AllData.chartData3.yAxis1_bar_Name = "";
AllData.chartData3.yAxis2_bar = null;
AllData.chartData3.yAxis2_bar_Name = "";
AllData.chartData3.yAxis2_line = res.data.fullPipeTimesList;
AllData.chartData3.yAxis2_line_Name = "满管";
AllData.chartData3.yAxis2_line_Index = 0;
AllData.chartData3.yAxis3_line = res.data.overFlowRiskTimesList;
AllData.chartData3.yAxis3_line_Name = "溢流";
AllData.chartData3.yAxis3_line_Index = 0;
AllData.chartData3.y1_Unit = "次"; //Y轴单位
AllData.chartData3.y2_Unit = "万方"; //Y轴单位
AllData.chartData3.y2_show = false;
AllData.refresh3++;
AllData.TjData3 = null;
AllData.TjData3Unit = null;
}
}
});
};
// 获取数据 谢杨 一级界面的河湖排口/ 二级界面的河湖排口
const getData3 = () => {
MonitorAPI.outletList({
waterRegionCode: AllData.waterRegionCode, //分区编号
// regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
}).then((res) => {
if (res && res.code == 200) {
if (AllData.regionGrade == "one") {
AllData.chartData3.xAxis = res.data.partitionName;
AllData.chartData3.yAxis1_bar = res.data.outletsNumber;
AllData.chartData3.yAxis1_bar_Name = "排口";
AllData.chartData3.yAxis2_bar = null;
AllData.chartData3.yAxis2_bar_Name = "";
AllData.chartData3.yAxis3_line = res.data.inflowWater;
AllData.chartData3.yAxis3_line_Name = "进水量";
AllData.chartData3.yAxis3_line_Index = 1;
AllData.chartData3.y1_Unit = "个"; //Y轴单位
AllData.chartData3.y2_Unit = "万方"; //Y轴单位
AllData.chartData3.y2_show = true;
AllData.refresh3++;
AllData.TjData3 = res.data.outletsNumber
.reduce((accu, curren) => Number(accu) + Number(curren))
.toFixed(0);
AllData.TjData3Unit = "个";
}
if (AllData.regionGrade == "two") {
AllData.chartData3.xAxis = res.data.partitionName;
AllData.chartData3.yAxis1_bar = res.data.outletsNumber;
AllData.chartData3.yAxis1_bar_Name = "排口";
AllData.chartData3.yAxis2_bar = null;
AllData.chartData3.yAxis2_bar_Name = "";
AllData.chartData3.yAxis3_line = res.data.inflowWater;
AllData.chartData3.yAxis3_line_Name = "进水量";
AllData.chartData3.yAxis3_line_Index = 1;
AllData.chartData3.y1_Unit = "个"; //Y轴单位
AllData.chartData3.y2_Unit = "万方"; //Y轴单位
AllData.chartData3.y2_show = true;
// nextTick(() => {
// debugger;
AllData.refresh3++;
// }, 1000);
AllData.TjData3 = res.data.outletsNumber
.reduce((accu, curren) => Number(accu) + Number(curren))
.toFixed(0);
AllData.TjData3Unit = "个";
}
}
});
};
// 获取数据 谢杨 三级界面的渍水风险点/ 四级界面的渍水风险点
const getData4 = () => {
//
MonitorAPI.pointList({
waterRegionCode: AllData.waterRegionCode, //分区编号
// regionType: AllData.TypeID, //分区类型（sewage：污水 || rain：雨水）
}).then((res) => {
if (res && res.code == 200) {
if (AllData.regionGrade == "three") {
AllData.chartData3.xAxis = res.data.partitionName;
AllData.chartData3.yAxis1_bar = res.data.pointNumber;
AllData.chartData3.yAxis1_bar_Name = "渍水风险点";
AllData.chartData3.yAxis2_bar = null;
AllData.chartData3.yAxis2_bar_Name = "风险排口";
AllData.chartData3.yAxis3_line = null;
AllData.chartData3.yAxis3_line_Name = "进水量";
AllData.chartData3.yAxis3_line_Index = 1;
AllData.chartData3.y1_Unit = "个"; //Y轴单位
AllData.chartData3.y2_Unit = "万方"; //Y轴单位
AllData.chartData3.y2_show = false;
AllData.refresh3++;
AllData.TjData3 = res.data.pointNumber
.reduce((accu, curren) => Number(accu) + Number(curren))
.toFixed(0);
AllData.TjData3Unit = "个";
}
if (AllData.regionGrade == "four") {
//
AllData.chartData2.xAxis = res.data.partitionName;
AllData.chartData2.yAxis = null;
AllData.chartData2.yAxis2 = res.data.pointNumber;
AllData.chartData2.yAxis2_Name = "数量";
AllData.chartData2.yAxis_Name = null;
AllData.chartData2.y1_Unit = "个";
AllData.refresh2++;
AllData.TjData2 = res.data.pointNumber
.reduce((accu, curren) => Number(accu) + Number(curren))
.toFixed(0);
AllData.TjData2Unit = "个";
}
}
});
};
// 获取数据 谢扬 一级界面的河湖水情
const getData7 = () => {
MonitorAPI.queryWaterLevel({}).then((res) => {
if (res && res.code == 200) {
if (AllData.regionGrade == "one") {
let XData = [];
let data1 = []; //当前水位
let data2 = []; //设防水位
let data3 = []; //调蓄容积
res.data.forEach((element) => {
XData.push(element.lakeName);
data1.push(element.nowWaterlevel);
data2.push(element.bestPromitWaterlevel);
data3.push(element.volume);
});
AllData.chartData1.xAxis = XData; //X轴数据
AllData.chartData1.y1_Unit = "万方"; //Y轴单位
AllData.chartData1.y2_Unit = "m"; //2号Y轴单位
AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
AllData.chartData1.yAxis1_bar = data3; //数据1
AllData.chartData1.yAxis1_bar_Name = "库容量"; //数据1的名称
AllData.chartData1.yAxis1_bar_index = 0;
AllData.chartData1.yAxis2_bar = null; //数据2
AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
AllData.chartData1.yAxis2_bar_index = 0;
AllData.chartData1.yAxis2_line = data2;
AllData.chartData1.yAxis2_line_Name = "控制水位";
AllData.chartData1.yAxis2_line_Index = 1;
AllData.chartData1.yAxis3_line = data1;
AllData.chartData1.yAxis3_line_Name = "当前水位";
AllData.chartData1.yAxis3_line_Index = 1;
AllData.refresh1++;
AllData.TjData1 = null;
AllData.TjData1Unit = null;
}
}
});
};
// 获取数据 刘芳阳 / 三级 当日水量分析 /四级当日水量分析
const getData5 = () => {
MonitorAPI.waterRegionWaterYieldAnalysis({
waterRegionId: AllData.waterRegionCode,
}).then((res) => {
if (res && res.code == 200) {
let XData = [];
let YData1 = [];
let YData2 = [];
let YData3 = [];
res.data.forEach((element) => {
XData.push(element.waterRegionName); //X轴数据
YData1.push(element.siteNum); //点位数量
YData2.push(element.inWaterYield); //进水
YData3.push(element.outWaterYield); //出水
});
if (AllData.regionGrade == "three") {
AllData.chartData1.xAxis = XData; //X轴数据
AllData.chartData1.y1_Unit = "个"; //Y轴单位
AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
AllData.chartData1.yAxis1_bar = YData1; //数据1
AllData.chartData1.yAxis1_bar_Name = "点位数"; //数据1的名称
AllData.chartData1.yAxis1_bar_index = 0;
AllData.chartData1.yAxis2_bar = null; //数据2
AllData.chartData1.yAxis2_bar_Name = ""; //数据1的名称
AllData.chartData1.yAxis2_bar_index = 0;
AllData.chartData1.yAxis2_line = YData2;
AllData.chartData1.yAxis2_line_Name = "进水";
AllData.chartData1.yAxis2_line_Index = 1;
AllData.chartData1.yAxis3_line = YData3;
AllData.chartData1.yAxis3_line_Name = "出水";
AllData.chartData1.yAxis3_line_Index = 1;
AllData.refresh1++;
AllData.TjData2 = YData1.reduce(
(accu, curren) => Number(accu) + Number(curren)
).toFixed(0);
AllData.TjData2Unit = "个";
}
if (AllData.regionGrade == "four") {
AllData.chartData1.xAxis = XData; //X轴数据
AllData.chartData1.y1_Unit = "个"; //Y轴单位
AllData.chartData1.y2_Unit = "万方"; //2号Y轴单位
AllData.chartData1.y2_show = true; //是否展示右侧的2号轴
AllData.chartData1.yAxis1_bar = YData1; //数据1
AllData.chartData1.yAxis1_bar_Name = "接驳点数"; //数据1的名称
AllData.chartData1.yAxis1_bar_index = 0;
AllData.chartData1.yAxis2_bar = null; //数据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 = YData3;
AllData.chartData1.yAxis3_line_Name = "出水";
AllData.chartData1.yAxis3_line_Index = 1;
AllData.refresh1++;
AllData.TjData1 = YData1.reduce(
(accu, curren) => Number(accu) + Number(curren)
).toFixed(0);
AllData.TjData1Unit = "个";
}
}
});
};
// 获取数据 刘芳阳 上下游分析
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) {
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.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;
};
onMounted(() => {
let initeGLTimer = setInterval(() => {
if (!newfiberMap) return;
bus.on("FenQuClick", FenQuClick);
getData1();
getData3();
getData7();
clearInterval(initeGLTimer);
}, 100);
});
onBeforeUnmount(() => {
bus.off("FenQuClick");
});
</script>
<style lang="scss" scoped>
.YSIndex {
.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; /* 限制不允许换行 */
}
}
.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;
.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: 40px;
float: left;
margin-top: 15px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.ListInfo50 {
width: 50%;
height: 40px;
float: left;
margin-top: 15px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.ListInfo_label {
width: 75px;
height: 40px;
line-height: 40px;
text-align: center;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ccdfff;
}
.ListInfo_value {
width: calc(100% - 75px);
height: 40px;
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>
