first commit
zhangqy authed
on 29 Nov
对接
zhangqy authed
on 30 Nov
增加其它类型的本底数据弹窗
zhangqy authed
on 29 Nov
first commit
zhangqy authed
on 29 Nov
阶段性提交
zhangqy authed
on 30 Nov
弹窗联动
zhangqy authed
on 29 Nov
阶段性提交
zhangqy authed
on 30 Nov
first commit
zhangqy authed
on 29 Nov
增加其它类型的本底数据弹窗
zhangqy authed
on 29 Nov
first commit
zhangqy authed
on 29 Nov
阶段性提交
zhangqy authed
on 30 Nov
first commit
zhangqy authed
on 29 Nov
1
wudi authed
on 3 Dec
first commit
zhangqy authed
on 29 Nov
阶段性提交
zhangqy authed
on 30 Nov
对接
zhangqy authed
on 30 Nov
阶段性提交
zhangqy authed
on 30 Nov
first commit
zhangqy authed
on 29 Nov
测试代码提交
zhangqy authed
on 29 Nov
first commit
zhangqy authed
on 29 Nov
对接
zhangqy authed
on 30 Nov
first commit
zhangqy authed
on 29 Nov
对接
zhangqy authed
on 30 Nov
first commit
zhangqy authed
on 29 Nov
增加其它类型的本底数据弹窗
zhangqy authed
on 29 Nov
first commit
zhangqy authed
on 29 Nov
测试代码提交
zhangqy authed
on 29 Nov
first commit
zhangqy authed
on 29 Nov
1
wudi authed
on 29 Nov
first commit
zhangqy authed
on 29 Nov
- <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: "污水体系", value: "污水分区", key: "sewage" },
- { name: "雨水体系", value: "雨水分区,雨水系统流向,雨水系统流向1,rain_water_pump_station_info,water_gate_info,storage_tank_info", key: "rain" },
- ],
- 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;
- bus.emit("clearTemporaryData");
- AllData.yw_type.forEach((i) =>
- i.value.split(",").forEach((o) => operationLayer(o, false))
- );
- item.value.split(",").forEach((o) => operationLayer(o, true));
- AllData.regionGrade = "one";
- AllData.regionName = "";
- newfiberMap.map.easeTo(newfiberMap.config_.params.init);
- // 切换时回到默认一级分区
- 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 FenQuClick = (properties) => {
- console.log("FenQuClick", properties);
- if (!!!properties.pid) return;
- // 请求面包屑的数据
- let params = {
- regionType: AllData.TypeID,
- id: Number(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();
- };
-
- const events_params = {
- setHighlight: { key: "setHighlight" },
- setLayerVisible: { key: "setLayerVisible" },
- clearTemporaryData: { key: "clearTemporaryData" },
- };
- const operationLayer = (name, visible) => {
- const { setLayerVisible, setHighlight } = events_params;
- bus.emit(setLayerVisible.key, { layername: name, isCheck: visible });
- };
-
- /**
- * 获取本底数据
- * 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;
- AllData.yw_type.forEach((i) =>
- i.value.split(",").forEach((o) => operationLayer(o, false))
- );
- bus.emit(setHighlight.key, []);
- bus.off("FenQuClick");
- bus.off("openJXFXDialog");
- bus.off(mapInitBusName);
- });
- </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>