- <template>
- <!-- 物联感知 -->
- <div class="tabRightWL" v-if="allData.tabShowWL == 2">
- <div class="tabChangeList">
- <div
- :class="['tabChange', allData.currentIndex === item.index ? 'active' : '']"
- v-for="item in allData.tabList"
- :key="item.index"
- @click="tabChangeClick(item.index)"
- >
- {{ item.name }}
- </div>
- </div>
- <div class="dividerLine"></div>
-
- <!-- 雨量监测 -->
- <div v-if="allData.currentIndex == 1" class="allContent">
- <div class="selectTitle">
- <div class="name">气象信息</div>
- </div>
- <div class="weatherInfo">
- <div class="part" v-for="(item, index) in weatherArr" :key="'a' + index">
- <p style="color: #00d1ff">{{ item.week }}</p>
- <p style="color: #b4e7f2">{{ item.date.slice(5, 10) }}</p>
- <img :src="getWeatherImageUrl(`icon__${item.code_day}`, 'weather_icon')" style="width: 50px; height: 50px" />
- <p style="color: #b4e7f2">{{ item.text_day }}</p>
- <p style="color: #00d1ff">{{ item.low }}~{{ item.high }}℃</p>
- <!-- <p style="color: #00d1ff">{{ item.wd_day }}{{ item.wc_day }}</p> -->
- </div>
- <!-- 暂无数据 -->
- <el-empty :image-size="100" v-if="weatherArr.length == 0" />
- </div>
- <div class="selectTitle">
- <div class="name">雨量数据采集</div>
- </div>
- <el-table :data="tableData1" class="rightTab" height="250" @row-click="clickRain">
- <el-table-column prop="stName" label="雨量站名称" width="100" />
- <el-table-column prop="buildType" label="类型" width="60">
- <template #default="scope">
- {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
- </template>
- </el-table-column>
- <el-table-column prop="pj" label="当前降雨量(mm)">
- <template #default="scope"> {{ scope.row.pj || '--' }} </template>
- </el-table-column>
- <el-table-column prop="ago1h" label="过去1h降雨量(mm)" width="100">
- <template #default="scope"> {{ scope.row.ago1h }} </template>
- </el-table-column>
- <el-table-column prop="ago3h" label="过去3h降雨量(mm)" width="100">
- <template #default="scope"> {{ scope.row.ago3h }} </template>
- </el-table-column>
- <el-table-column prop="ago6h" label="过去6h降雨量(mm)" width="100">
- <template #default="scope"> {{ scope.row.ago6h }} </template>
- </el-table-column>
- <el-table-column prop="ago12h" label="过去12h降雨量(mm)" width="100">
- <template #default="scope"> {{ scope.row.ago12h }} </template>
- </el-table-column>
- <el-table-column prop="ago24h" label="过去24h降雨量(mm)" width="100">
- <template #default="scope"> {{ scope.row.ago24h }} </template>
- </el-table-column>
- <el-table-column prop="ago72h" label="过去72h降雨量(mm)" width="100">
- <template #def ault="scope"> {{ scope.row.ago72h }} </template>
- </el-table-column>
- </el-table>
- <monitorCalender :isCaleisnder="'calender'"></monitorCalender>
- </div>
-
- <!-- 管网监测 -->
- <div v-if="allData.currentIndex == 2" class="allContent">
- <div class="selectTitle">
- <div class="name">实时监测</div>
- <el-select v-model="allData.pipelineType" size="small" style="width: 120px" @change="getRealtimePipeLine">
- <el-option label="全部" value="" />
- <el-option label="雨水管网" value="Rain" />
- <el-option label="污水管网" value="Sewage" />
- <!-- <el-option label="雨污合流管网" value="Combined" /> -->
- </el-select>
- </div>
- <el-table
- :data="tableData2"
- class="rightTab"
- height="600"
- v-loading="tableDataLoading2"
- @row-click="clickPipeSupervise"
- highlight-current-row
- >
- <el-table-column prop="stName" label="监测站点名称" width="150" />
- <el-table-column prop="pipelineType" label="管网类型">
- <template #default="scope">
- {{
- scope.row.pipelineType == 'Rain'
- ? '雨水'
- : scope.row.pipelineType == 'Sewage'
- ? '污水'
- : scope.row.pipelineType == 'Combined'
- ? '雨污合流'
- : '--'
- }}
- </template>
- </el-table-column>
- <el-table-column prop="waterElevation" label="水位高程(m)" width="150" />
- <!-- <el-table-column prop="z" label="水位(m)" /> -->
- <el-table-column prop="va" label="流速(m/s)" width="110" />
- <el-table-column prop="turb" label="SS(mg/L)" />
- <el-table-column prop="buildType" label="类型" width="60">
- <template #default="scope">
- {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
- </template>
- </el-table-column>
- <el-table-column prop="tt" label="观测时间" width="160" />
- </el-table>
- </div>
-
- <!-- 积水点 -->
- <div v-if="allData.currentIndex == 3" class="allContent">
- <div class="selectTitle">
- <div class="name">实时监测</div>
- </div>
- <el-table :data="tableData3" v-loading="loadingZSD" class="rightTab" height="600" @row-click="clickZS" highlight-current-row>
- <el-table-column prop="stName" label="监测点名称" width="210px" />
- <el-table-column prop="buildType" label="类型">
- <template #default="scope">
- {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
- </template>
- </el-table-column>
- <el-table-column prop="z" label="水位(m)">
- <template #default="scope"> {{ scope.row.z || '--' }} </template>
- </el-table-column>
- <el-table-column prop="z" label="摄像头">
- <template #default="scope">
- <img
- :src="videoCamera"
- alt=""
- v-if="scope.row.cameraInfoIndexList && scope.row.cameraInfoIndexList.length > 0"
- @click.native.stop="checkVideo(scope.row)"
- />
- <span v-else>--</span>
- </template>
- </el-table-column>
- <el-table-column prop="tt" label="更新时间" width="160">
- <template #default="scope"> {{ scope.row.tt || '--' }} </template>
- </el-table-column>
- </el-table>
- </div>
-
- <!-- 排口 -->
- <div v-if="allData.currentIndex == 4" class="allContent">
- <div class="selectTitle">
- <div class="name">实时监测</div>
- <el-select v-model="allData.paikouType" size="small" style="width: 120px" @change="getRealtimedRainOutlet">
- <el-option label="雨水口" value="Rain" />
- <el-option label="溢流口" value="Sewage" />
- </el-select>
- </div>
- <el-table
- :data="tableData4"
- class="rightTab"
- height="600"
- v-loading="tableDataLoading4"
- @row-click="clickPipeSupervise"
- highlight-current-row
- >
- <el-table-column prop="stName" label="监测站点名称" width="150" />
- <el-table-column prop="dataTime" label="观测时间" width="160" />
- <el-table-column prop="waterElevation" label="水位高程(m)" />
- <el-table-column prop="va" label="流速(m/s)" width="110" />
- <el-table-column prop="sbl1" label="小时流量(m³/h)" width="110" />
- <el-table-column prop="turb" label="SS(mg/L)" />
- <el-table-column prop="codmn" label="COD(mg/l)" width="110" />
- <el-table-column prop="pipelineType" label="排口类型">
- <template #default="scope">
- {{ scope.row.pipelineType == 'Rain' ? '雨水口' : scope.row.pipelineType == 'Sewage' ? '溢流口' : '--' }}
- </template>
- </el-table-column>
- </el-table>
- </div>
-
- <!-- 河道监测 -->
- <div v-if="allData.currentIndex == 5" class="allContent">
- <div class="selectTitle" style="margin-bottom: 10px">
- <div class="name">河道水位</div>
- <el-select v-model="riverTitle" size="small" style="width: 120px" @change="checkRiverP">
- <el-option label="老澴河" value="老澴河" />
- <el-option label="槐荫河" value="槐荫河" />
- </el-select>
- </div>
- <el-table
- :data="tableData5"
- class="rightTab"
- height="260"
- v-loading="tableDataLoading5"
- @row-click="clickRiver"
- highlight-current-row
- >
- <el-table-column prop="stName" label="监测点名称" />
- <el-table-column prop="z" label="水位(m)" width="100" />
- <el-table-column prop="buildType" label="类型" width="60">
- <template #default="scope">
- {{ scope.row.buildType == 'owner' ? '新建' : scope.row.buildType == 'share' ? '共享' : '--' }}
- </template>
- </el-table-column>
- <el-table-column prop="dataTime" label="观测时间" width="165" />
- </el-table>
- <div class="selectTitle" style="margin-bottom: 10px">
- <div class="name">人工水质采样</div>
- <el-select v-model="allData.sampleDate" size="small" style="width: 120px" @change="getSampleRiverSectionData">
- <el-option v-for="item in allData.options1" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </div>
- <div class="DMcontent">
- <div
- :class="['DMpart', allData.riverActive == item.id ? 'activeR' : '']"
- v-for="(item, index) in detailList"
- :key="index"
- @click="clickSample(item)"
- >
- <div class="partContent">
- <p class="title">{{ item.surfaceWaterBodiesName }}</p>
- </div>
- </div>
- </div>
- <el-table :data="tableData6" style="width: 100%; margin: 5px 0 5px 0" height="240">
- <el-table-column prop="sectionName" label="断面名称" width="205px" />
- <el-table-column prop="propertyName" label="指标名称" width="80px" />
- <el-table-column prop="value" label="监测值" />
- <el-table-column prop="propertyUnit" label="指标单位" />
- </el-table>
- </div>
-
- <!-- 厂站监测 -->
- <div v-if="allData.currentIndex == 6" class="allContent">
- <div class="selectTitle">
- <div class="name">厂站概况</div>
- <el-select v-model="allData.currentIndex2" size="small" style="width: 120px" @change="checkInfo(allData.currentIndex2)">
- <el-option label="雨水系统" value="rain_water" />
- <el-option label="污水系统" value="sewage_water" />
- </el-select>
- <!-- <div class="navBtn">
- <p :class="[allData.currentIndex2 == 'rain_water' ? 'active' : '']" @click="checkInfo('rain_water')">雨水系统</p>
- <p :class="[allData.currentIndex2 == 'sewage_water' ? 'active' : '']" @click="checkInfo('sewage_water')">污水系统</p>
- </div> -->
- </div>
- <el-table :data="tableData7" class="rightTab" height="250" v-loading="tableDataLoading7" @row-click="clickCZ" highlight-current-row>
- <el-table-column prop="pumpName" label="厂站名称" width="100" />
- <el-table-column prop="qcyw" label="前池水位(m)" v-if="allData.currentIndex2 == 'rain_water'" width="100" />
- <el-table-column prop="qbWaterlevel" label="起抽水位(m)" v-if="allData.currentIndex2 == 'rain_water'" width="100" />
- <el-table-column prop="designScale" label="规模(m³/s)" v-if="allData.currentIndex2 == 'rain_water'" width="90" />
- <el-table-column prop="designScale" label="规模(万吨/日)" v-if="allData.currentIndex2 == 'sewage_water'" />
- <el-table-column prop="totalLarge" label="累计处理量(万吨)" v-if="allData.currentIndex2 == 'sewage_water'" />
- <el-table-column prop="monitorTime" label="观测时间" width="160" />
- </el-table>
- <div class="selectTitle" style="margin-bottom: 10px">
- <div class="name">历史趋势</div>
- <div class="selectToolList">
- <el-date-picker
- v-model="allData.GWtime1"
- type="daterange"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- value-format="YYYY-MM-DD"
- size="small"
- style="width: 300px; margin-left: -30px"
- @change="changeBengZhanDate"
- />
- </div>
- </div>
- <div class="staticPicture">
- <div id="chartThree"></div>
- </div>
- </div>
- <!-- 源头地块 -->
- <div v-if="allData.currentIndex == 7" class="allContent">
- <div class="selectTitle">
- <div class="name">源头地块监测</div>
- </div>
- <el-table
- :data="tableData71"
- v-loading="tableLoading71"
- class="rightTab"
- ref="tableRef71"
- height="250"
- @row-click="clickPipeSupervise"
- highlight-current-row
- >
- <el-table-column prop="stName" label="点位名称" width="150" />
- <el-table-column prop="dataTime" label="观测时间" width="100" />
- <el-table-column prop="z" label="水位(m)" />
- <el-table-column prop="va" label="流速(m/s)" width="100" />
- <el-table-column prop="turb" label="SS(mg/L)" />
- <el-table-column prop="sbl1" label="小时水量(m³/h)" width="110" />
- <el-table-column prop="cq1" label="累计流量" />
- </el-table>
- <div class="selectTitle" style="margin-bottom: 10px">
- <div class="name">历史趋势分析</div>
- <div class="selectToolList">
- <el-date-picker
- v-model="allData.pipeTime"
- type="daterange"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- size="small"
- style="width: 220px; margin-left: 70px"
- @change="changePipeDate"
- />
- </div>
- </div>
- <div class="staticPicture">
- <div id="chartSuperviseWL"></div>
- </div>
- </div>
- </div>
- </template>
- <script setup name="tabRightWL">
- import chartOption from '@/components/Echarts/pieChart_1.js';
- import * as echarts from 'echarts';
- import bus from '@/bus';
- import useUserStore from '@/store/modules/user';
- import videoCamera from '@/assets/images/gisMap/video.png';
- import monitorCalender from './monitorCalender.vue'; // 降雨日历统计
- import {
- xfSevenDays,
- realtimeDataListByType,
- realtimeDataPipelineListByType,
- realtimeRainfallStatistics,
- orinignList,
- orinignDataList,
- realtimeDataWaterlogging,
- sampleDateList,
- sampleRiverSectionData,
- realtimeDataByPump,
- historyDataByPumpCode,
- sampleRiverList,
- getRiverProfileByRiverName,
- } from '@/api/floodSys/oneMap.js';
- import { graphicReport } from '@/api/dataAnalysis/syntherticData';
- const emit = defineEmits(['showStationRiverclose']);
- const { proxy } = getCurrentInstance();
- const pinias = useUserStore();
- const timer = ref(null);
- const datevalue = ref(new Date());
- const allData = reactive({
- tableDatalist: '',
- pipelineType: 'Rain',
- paikouType: 'Rain',
- riverActive: '',
- centerSearchShow: true,
- tabShowWL: null,
- currentIndex: 1,
- currentIndex2: 'rain_water',
- GWtime1: null,
- waterloggingDate: null,
- pipeTime: null,
- supervisePipeCode: null,
- systemType: 1,
- tabList: [
- { index: 1, name: '雨量监测' },
- { index: 5, name: '河道监测' },
- { index: 2, name: '管网监测' },
- // { index: 4, name: '排口' },
- { index: 3, name: '积水点' },
- { index: 7, name: '源头地块' },
- { index: 6, name: '厂站监测' },
- ],
- options: [
- {
- value: 1,
- label: '按天',
- },
- {
- value: 2,
- label: '按周',
- },
- {
- value: 3,
- label: '按月',
- },
- ],
- options1: [],
- sampleDate: null,
- surfaceWaterBodies: null,
- pumpCode: null,
- });
- const refresh = ref(null);
- const supervisePopupdata = ref('');
- const echartData = ref({
- xAxisData: [],
- seriesData: [
- {
- name: '当前水位',
- type: 'line',
- symbol: 'none',
- smooth: true,
- lineStyle: {
- color: 'rgba(156, 205, 247, 0.5)',
- },
- // 填充区域的样式
- areaStyle: {
- // 填充色渐变
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 1, color: 'rgba(156, 205, 247, 0.3)' },
- { offset: 0, color: 'rgba(156, 205, 247, 1)' },
- ]),
- },
- data: [],
- // 标注点
- markPoint: {
- symbol: 'arrow',
- symbolSize: 20,
- label: {
- show: true,
- formatter: params => {
- let a = params.data.name[0] + params.data.name[1] + 'm';
- return a;
- },
- fontSize: 12,
- color: '#fff',
- backgroundColor: 'transparent',
- },
- data: [
- {
- name: ['老澴河', '18'],
- coord: ['2', '18'],
- },
- ],
- },
- },
- {
- name: '河床',
- type: 'line',
- symbol: 'none',
- smooth: true,
- lineStyle: {
- color: 'rgba(215, 207, 143, 0.5)',
- },
- // 填充区域的样式
- areaStyle: {
- // 填充色渐变
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 1, color: 'rgba(215, 207, 143, 0.3)' },
- { offset: 0, color: 'rgba(215, 207, 143, 1)' },
- ]),
- },
- data: [],
- // 标注点
- markPoint: {
- symbol: 'circle',
- symbolSize: 10,
- itemStyle: { color: 'red' },
- data: [
- {
- coord: ['800', '20.53'],
- },
- ],
- },
- },
- {
- name: '排口街道',
- barWidth: '0.1%',
- type: 'bar',
- data: [],
- itemStyle: '',
- },
- // { name: '右岸高程', type: 'line', smooth: true, symbol: 'none', data: [] },
- ],
- });
- const riverTitle = ref('');
- const showStationRiver = ref(false);
-
- //时间格式化
- const getYearMonthDay = time => {
- return proxy.moment(time).format('YYYY-MM-DD');
- };
-
- // 统计分析散点图
- let chart4 = null;
- const initEcharts4 = () => {
- if (!!chart4) chart4.dispose();
- chart4 = echarts.init(document.getElementById('chartThree'));
- chart4.clear();
- chart4.setOption(chartOption.floodOneMapDataByPumpCode);
- };
-
- // 查看监控视频
- function checkVideo(row) {
- bus.emit('VideosHK', row);
- }
-
- const weatherArr = ref([]);
- //获取气象信息
- const getWeatherPredict = async () => {
- let res = await xfSevenDays();
- if (res && res.code == 200) {
- let datas = JSON.parse(res.data);
- if (datas.result) {
- // weatherArr.value = datas.result.daily_fcsts.slice(0, 5);
- weatherArr.value = datas.result.daily_fcsts;
- }
- }
- };
- const tableData1 = ref([]);
- //获取雨量数据采集信息
- const getRealtimeRain = async () => {
- let params = {
- monitorTargetType: 'rainfall',
- orderBy: 'tt desc',
- };
- let res = await realtimeRainfallStatistics(params);
- if (res && res.code == 200) {
- let data = res.data;
- tableData1.value = data;
- }
- };
-
- const tableData2 = ref([]);
- const tableDataLoading2 = ref(false);
- const tableDataLoading4 = ref(false);
- const tableDataLoading5 = ref(false);
- const tableDataLoading7 = ref(false);
-
- //获取管网实时监测
- const getRealtimePipeLine = async () => {
- tableDataLoading2.value = true;
- let params = {
- monitorTargetType: 'pipeline',
- orderBy: 'tt desc',
- pipelineType: allData.pipelineType,
- };
- let res = await realtimeDataPipelineListByType(params);
- if (res && res.code == 200) {
- let data = res.data;
- tableData2.value = data;
- tableDataLoading2.value = false;
- }
- };
- //获取管网监测统计分析
- const getSuperVisePipeData = async () => {
- let params = {
- startTime: allData.pipeTime[0],
- endTime: allData.pipeTime[1],
- stCode: allData.supervisePipeCode,
- };
- let res = await graphicReport(params);
- if (res && res.code == 200) {
- let datas = res.data;
- if (!!!datas) return;
- if (datas.propertyMonitorList.length > 1) {
- chartOption.floodOneMapPipeSupervise.legend.data = [
- datas.propertyMonitorList[2].monitorPropertyName,
- datas.propertyMonitorList[0].monitorPropertyName,
- ];
- chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
- chartOption.floodOneMapPipeSupervise.yAxis[0].name = datas.propertyMonitorList[2].propertyUnit;
- chartOption.floodOneMapPipeSupervise.yAxis[1].name = datas.propertyMonitorList[0].propertyUnit;
- chartOption.floodOneMapPipeSupervise.series[0].name = datas.propertyMonitorList[2].monitorPropertyName;
- chartOption.floodOneMapPipeSupervise.series[1].name = datas.propertyMonitorList[0].monitorPropertyName;
- chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[2].ylist;
- chartOption.floodOneMapPipeSupervise.series[1].data = datas.propertyMonitorList[0].ylist;
- chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
- } else if (datas.propertyMonitorList.length == 1) {
- chartOption.floodOneMapPipeSupervise.legend.data = [datas.propertyMonitorList[0].monitorPropertyName];
- chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
- chartOption.floodOneMapPipeSupervise.yAxis[0].name = datas.propertyMonitorList[0].propertyUnit;
- chartOption.floodOneMapPipeSupervise.yAxis[1].name = '';
- chartOption.floodOneMapPipeSupervise.series[0].name = datas.propertyMonitorList[0].monitorPropertyName;
- chartOption.floodOneMapPipeSupervise.series[1].name = '';
- chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[0].ylist;
- chartOption.floodOneMapPipeSupervise.series[1].data = [];
- chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
- } else if (datas.propertyMonitorXList.length == 0) {
- chartOption.floodOneMapPipeSupervise.graphic.invisible = false; // 暂无数据
- chartOption.floodOneMapPipeSupervise.xAxis[0].data = [];
- chartOption.floodOneMapPipeSupervise.series[0].data = [];
- chartOption.floodOneMapPipeSupervise.series[1].data = [];
- chartOption.floodOneMapPipeSupervise.yAxis[0].name = '';
- chartOption.floodOneMapPipeSupervise.yAxis[1].name = '';
- chartOption.floodOneMapPipeSupervise.series[0].name = '';
- chartOption.floodOneMapPipeSupervise.series[1].name = '';
- }
- // 设置鼠标滚轮放大缩小展示数据区间
- chartOption.floodOneMapPipeSupervise.dataZoom = [
- { type: 'inside', startValue: datas.propertyMonitorXList[datas.propertyMonitorXList.length / 2] },
- ];
- initPipeChart();
- }
- };
- //管网监测趋势图
- let pipeChart = null;
- const initPipeChart = () => {
- pipeChart && pipeChart.dispose();
- pipeChart = echarts.init(document.getElementById('chartSuperviseWL'));
- pipeChart.clear();
- pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
- };
- const changePipeDate = () => {
- allData.pipeTime = [getYearMonthDay(allData.pipeTime[0]), getYearMonthDay(allData.pipeTime[1])];
- getSuperVisePipeData();
- };
- const tableData3 = ref([]);
- const loadingZSD = ref(true);
- //获取积水点实时监测
- const getRealtimeDataWaterlogging = async () => {
- loadingZSD.value = true;
- let res = await realtimeDataWaterlogging({ monitorTargetType: 'waterlogging', orderBy: 'tt desc' });
- if (res && res.code == 200) {
- let data = res.data;
- tableData3.value = data;
- loadingZSD.value = false;
- }
- };
-
- const tableData4 = ref([]);
- //获取排口实时监测
- const getRealtimedRainOutlet = async () => {
- tableDataLoading4.value = true;
- let params = {
- monitorTargetType: 'drain_outlet',
- orderBy: 'tt desc',
- pipelineType: allData.paikouType,
- };
- let res = await realtimeDataListByType(params);
- if (res && res.code == 200) {
- let data = res.data;
- data.forEach(element => {
- if (element.monitorValueList && element.monitorValueList.length > 0) {
- element.dataTime = element.monitorValueList[0].tt;
- }
- });
- tableData4.value = data;
- tableDataLoading4.value = false;
- }
- };
- const tableData5 = ref([]);
- //获取管网实时监测
- const getRealtimedRiver = async () => {
- tableDataLoading5.value = true;
- let params = {
- monitorTargetType: 'river',
- orderBy: 'order_no desc',
- };
- let res = await realtimeDataListByType(params);
- if (res && res.code == 200) {
- let data = res.data;
- data.forEach(element => {
- if (element.monitorValueList && element.monitorValueList.length > 0) {
- element.dataTime = element.monitorValueList[0].tt;
- }
- });
- tableData5.value = data;
- tableDataLoading5.value = false;
- }
- };
- //获取人工采样时间字典
- const getSampleDateList = async () => {
- let res = await sampleDateList();
- if (res && res.code == 200) {
- let data = res.data;
- let dataList = [];
- data.forEach(item => {
- dataList.push({ value: item, label: item });
- });
- allData.options1 = dataList;
- allData.sampleDate = allData.options1[0].value;
- getSampleRiverList();
- }
- };
- //获取人工采样河湖查询
- const getSampleRiverList = async () => {
- let res = await sampleRiverList();
- if (res && res.code == 200) {
- let data = res.data;
- detailList.value = data;
- // data.map(item=>{
- // if(item=detailList.name){
- // }
- // })
-
- allData.surfaceWaterBodies = detailList.value[0].surfaceWaterBodies;
- allData.riverActive = detailList.value[0].id;
- getSampleRiverSectionData();
- }
- };
- // 河道横断面分析点击
- const checkRiverP = async val => {
- riverTitle.value = val;
- showStationRiver.value = true;
- let lonlat;
- val == '老澴河' ? (lonlat = '113.9263827,30.89512155') : (lonlat = '113.941462,30.926146');
- let lonLat = lonlat.split(',');
- newfiberMapbox.map.easeTo({
- center: [Number(lonLat[0]), Number(lonLat[1])],
- zoom: 13.5,
- });
- bus.emit('initeLayer', ['paiKou', 'drainOutlet']);
- let res = await getRiverProfileByRiverName({ riverName: val });
- if (res && res.code == 200) {
- let datas = res.data;
- echartData.value.xAxisData = datas.chainageList; //河道里程列表
- echartData.value.seriesData[0].data = datas.stationZList; //监测站点水位数据
- echartData.value.seriesData[1].data = datas.channelList; //河床高程列表
- // echartData.value.seriesData[2].data = datas.leftBankList; //左岸高程列表
- // echartData.value.seriesData[3].data = datas.rightBankList; //右岸高程列表
- //排口点位列表
- allData.tableDatalist = datas.outfallList;
-
- let titlenames = datas.roadNameList;
- let options = '';
- datas.roadNameList.forEach((item, index) => {
- if (item) {
- options = datas.sfZList[0];
- } else {
- options = '';
- }
- echartData.value.seriesData[2].data.push(options);
- });
- echartData.value.seriesData[2].itemStyle = {
- normal: {
- label: {
- show: true, //开启显示
- position: 'top', //内部显示
- rotate: 45,
- formatter: function (params) {
- return titlenames[params.dataIndex];
- },
-
- textStyle: {
- //数值样式
- color: '#ffffff',
- fontSize: 12,
- },
- },
- },
- };
-
- echartData.value.seriesData[1].markPoint.data = [];
- datas.outfallList &&
- datas.outfallList.map(item => {
- echartData.value.seriesData[1].markPoint.data.push({
- coord: [item.x, item.y],
- pointNumber: item.pointNumber,
- lonLat: item.lonLat,
- roadName: item.roadName,
- });
- });
- // 河道中建筑物类型,pump(泵站),gate(闸门),weir(堰)等
- let buildArr = [];
- if (Object.keys(datas.structureList).length > 0) {
- for (let i in datas.structureList) {
- buildArr.push({
- name: i,
- type: 'line',
- smooth: true,
- symbol: 'none',
- data: datas.structureList[i],
- areaStyle: { color: '#4085FF' },
- });
- }
- echartData.value.seriesData = echartData.value.seriesData.concat(buildArr);
- } else {
- echartData.value.seriesData = echartData.value.seriesData.slice(0, 4);
- }
-
- refresh.value = Math.random();
- supervisePopupdata.value = {
- riverTitle: allData.riverTitle,
- refresh: refresh.value,
- echartData: echartData.value,
- tableDatalist: allData.tableDatalist,
- };
- emit('showStationRiverclose', supervisePopupdata.value);
- }
- };
- //河湖断面采样数据查询
- const getSampleRiverSectionData = async () => {
- let params = {
- surfaceWaterBodies: allData.surfaceWaterBodies,
- sampleDate: allData.sampleDate,
- };
- let res = await sampleRiverSectionData(params);
- if (res && res.code == 200) {
- let data = res.data;
- let dataList = [];
-
- data.forEach(item => {
- item.property == 'samplePh'
- ? ((item.propertyName = 'PH'), (item.propertyUnit = '--'))
- : item.property == 'sampleCond'
- ? ((item.propertyName = '电导率'), (item.propertyUnit = 'uS/m'))
- : item.property == 'sampleOrp'
- ? ((item.propertyName = '氧化还原电位'), (item.propertyUnit = 'mV'))
- : item.property == 'sampleDo'
- ? ((item.propertyName = '溶解氧'), (item.propertyUnit = 'mg/L'))
- : item.property == 'sampleCod'
- ? ((item.propertyName = '化学需氧量'), (item.propertyUnit = 'mg/L'))
- : item.property == 'sampleSs'
- ? ((item.propertyName = '悬浮物'), (item.propertyUnit = 'mg/L'))
- : item.property == 'sampleNh3n'
- ? ((item.propertyName = '氨氮'), (item.propertyUnit = 'mg/L'))
- : item.property == 'sampleTn'
- ? ((item.propertyName = '总氮'), (item.propertyUnit = 'mg/L'))
- : ((item.propertyName = '总磷'), (item.propertyUnit = 'mg/L'));
- });
- tableData6.value = data;
- }
- };
- const clickSample = item => {
- allData.surfaceWaterBodies = item.surfaceWaterBodies;
- allData.riverActive = item.id;
- getSampleRiverSectionData();
- };
- const tableData6 = ref([]);
- const tableData71 = ref([]);
- const tableRef71 = ref(null);
- const tableLoading71 = ref(true);
- //获取源头地块
- const getOrinignList = async () => {
- tableLoading71.value = true;
- let res = await orinignList();
- if (res && res.code == 200) {
- let data = res.data;
- let params = data[0].stCodes;
- let res1 = await orinignDataList(params);
- if (res1 && res1.code == 200) {
- tableData71.value = res1.data;
- tableData71.value.forEach((item, index) => {
- item.dataTime = res1.data[index].monitorValueList[0].tt;
- });
- tableRef71.value.setCurrentRow(tableData71.value[0], true); //表格默认第一个高亮选中
- tableLoading71.value = false;
- }
- }
- };
- const tableData7 = ref([]);
- //获取厂站概况
- const getRealtimeDataByPump = async () => {
- tableDataLoading7.value = true;
- let params = {
- pumpType: allData.currentIndex2,
- };
- let res = await realtimeDataByPump(params);
- if (res && res.code == 200) {
- tableData7.value = res.data;
- tableDataLoading7.value = false;
- allData.pumpCode = res.data[0].pumpCode;
- getHistoryDataByPumpCode();
- }
- };
- //厂站历史数据
- const getHistoryDataByPumpCode = async () => {
- let params = {
- startTime: allData.GWtime1[0],
- endTime: allData.GWtime1[1],
- pumpCode: allData.pumpCode,
- };
- let res = await historyDataByPumpCode(params);
- let data = res.data;
- chartOption.floodOneMapDataByPumpCode.legend.data = [data.pointName];
- chartOption.floodOneMapDataByPumpCode.xAxis.data = data.ttList;
- chartOption.floodOneMapDataByPumpCode.yAxis.name = data.unit;
- chartOption.floodOneMapDataByPumpCode.series.name = data.pointName;
- chartOption.floodOneMapDataByPumpCode.series.data = data.dataList;
- if (data.ttList.length == 0) {
- chartOption.floodOneMapDataByPumpCode.graphic.invisible = false; //暂无数据
- } else {
- chartOption.floodOneMapDataByPumpCode.graphic.invisible = true; //暂无数据
- }
- initEcharts4();
- };
- const changeBengZhanDate = () => {
- allData.GWtime1 = [
- proxy.moment(allData.GWtime1[0]).format('YYYY-MM-DD 00:00:00'),
- proxy.moment(allData.GWtime1[1]).format('YYYY-MM-DD 23:59:59'),
- ];
- console.log(allData.GWtime1);
- getHistoryDataByPumpCode();
- };
- const detailList = ref([]);
- const tabChangeClick = async value => {
- allData.currentIndex = value;
- bus.emit('setHighlight');
- if (allData.currentIndex == 1) {
- allData.centerSearchShow = true;
- getWeatherPredict();
- getRealtimeRain();
- nextTick(() => {
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- bus.emit('initeLayer', ['rainStation']);
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- //dataToMap('rainStation', tableData1.value);
- });
- } else if (allData.currentIndex == 2) {
- allData.centerSearchShow = false;
- await getRealtimePipeLine();
- allData.supervisePipeCode = '2109600079';
- allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
- nextTick(() => {
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- bus.emit('initeLayer', ['pipeSupervise']);
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- });
- } else if (allData.currentIndex == 3) {
- allData.centerSearchShow = false;
- getRealtimeDataWaterlogging();
- allData.waterloggingDate = proxy.moment().format('YYYY');
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- bus.emit('initeLayer', ['waterlog']);
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- } else if (allData.currentIndex == 4) {
- allData.centerSearchShow = false;
- getRealtimedRainOutlet();
- allData.supervisePipeCode = '2109600075';
- allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- bus.emit('initeLayer', ['PKsupervise']);
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- } else if (allData.currentIndex == 5) {
- riverTitle.value = '';
- allData.centerSearchShow = false;
- getRealtimedRiver();
- getSampleDateList();
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- //bus.emit('initeLayer', ['riverLake']);
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- } else if (allData.currentIndex == 6) {
- allData.centerSearchShow = false;
- allData.GWtime1 = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD hh:mm:ss'), proxy.moment().format('YYYY-MM-DD hh:mm:ss')];
- getRealtimeDataByPump();
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- bus.emit('initeLayer', ['YSBZ', 'WSBZ', 'WSCLC']);
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- chartOption.floodOneMapRainStatic.series[0].data = [
- { value: 5, name: '超警戒水位' },
- { value: 3, name: '超起抽水位' },
- ];
- chartOption.floodOneMapJSDTrend.legend.data = ['水位'];
- chartOption.floodOneMapJSDTrend.yAxis.name = '单位:m';
- chartOption.floodOneMapJSDTrend.series[0].name = '水位';
- nextTick(() => {
- initEcharts4();
- });
- } else if (allData.currentIndex == 7) {
- allData.centerSearchShow = false;
- getOrinignList();
- allData.pipeTime = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
- allData.supervisePipeCode = '2109600078';
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- bus.emit('initeLayer', ['orinign']);
- timer.value = setInterval(() => {
- if (!!!newfiberMapbox) {
- return;
- } else {
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- clearInterval(timer.value);
- }
- }, 1000);
-
- getSuperVisePipeData();
- }
- bus.emit('centerSearchShow', allData.centerSearchShow);
- };
- const checkInfo = value => {
- allData.currentIndex2 = value;
- getRealtimeDataByPump();
- };
- //地图定位
- const mapFlyTo = lonlat => {
- newfiberMapbox.map.easeTo({
- center: [Number(lonlat[0]), Number(lonlat[1])],
- zoom: 15.5,
- });
- };
- //雨量数据表格点击事件
- const clickRain = row => {
- highlight(row);
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- if (!!!row.lonLat) {
- proxy.$modal.msgError('站点坐标缺失');
- return;
- }
- let lonlat = row.lonLat.split(',');
- mapFlyTo(lonlat);
- };
- //管网检测表格点击事件
- const clickPipeSupervise = row => {
- highlight(row);
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- if (!!!row.lonLat) {
- proxy.$modal.msgError('站点坐标缺失');
- return;
- }
- let lonlat = row.lonLat.split(',');
- mapFlyTo(lonlat);
-
- allData.supervisePipeCode = row.stCode;
- // 源头地块加载对应历史数据
- if (row.monitorTargetType == 'typical_land') {
- allData.supervisePipeCode = row.stCode;
- getSuperVisePipeData(); //加载历史数据
- }
- };
- //积水点数据表格点击事件
- const clickZS = row => {
- highlight(row);
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- if (!!!row.lonLat) {
- proxy.$modal.msgError('站点坐标缺失');
- return;
- }
- let lonlat = row.lonLat.split(',');
- mapFlyTo(lonlat);
- };
- //河道数据表格点击事件
- const clickRiver = row => {
- highlight(row);
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- if (!!!row.lonLat) {
- proxy.$modal.msgError('站点坐标缺失');
- return;
- }
- let lonlat = row.lonLat.split(',');
- mapFlyTo(lonlat);
- };
- //厂站检测表格点击事件
- const clickCZ = row => {
- highlight(row);
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- if (!!!row.lon && !!!row.lat) {
- proxy.$modal.msgError('站点坐标缺失');
- return;
- }
- let lonlat = [Number(row.lon), Number(row.lat)];
- mapFlyTo(lonlat);
- allData.pumpCode = row.pumpCode;
- getHistoryDataByPumpCode();
- };
- onMounted(() => {
- bus.on('changeTableContent', val => {
- if (val == 2) {
- allData.centerSearchShow = true;
- tabChangeClick(1); //默认加载雨量监测数据
- bus.emit('centerSearchShow', allData.centerSearchShow);
- allData.tabShowWL = val;
- } else {
- allData.tabShowWL = null;
- allData.centerSearchShow = false;
- bus.emit('centerSearchShow', allData.centerSearchShow);
- }
- });
- });
-
- const types = ['rainStation', 'pipeSupervise', 'waterlog', 'PKsupervise', 'riverLake', 'YSBZ', 'orinign'];
-
- watch(
- () => tableData1.value,
- val => dataToMap(types[0], val)
- );
- watch(
- () => tableData2.value,
- val => dataToMap(types[1], val)
- );
- watch(
- () => tableData3.value,
- val => dataToMap(types[2], val)
- );
- watch(
- () => tableData4.value,
- val => dataToMap(types[3], val)
- );
- watch(
- () => tableData5.value,
- val => dataToMap(types[4], val)
- );
- watch(
- () => tableData7.value,
- val => dataToMap(types[5], val)
- );
- watch(
- () => tableData71.value,
- val => dataToMap(types[6], val)
- );
- // 关闭弹窗;
- const closePopup = () => {
- showStationRiver.value = false;
- bus.emit('initeLayer', []);
- };
- const dataToMap = (type, data) => {
- if (!!!(newfiberMapbox && newfiberMapbox.map.load)) {
- let interval = setInterval(() => {
- if (newfiberMapbox && newfiberMapbox.map.load) return method(), clearInterval(interval);
- }, 1000);
- return;
- }
- method();
- function method() {
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- newfiberMapbox.map.easeTo({
- center: [114.312, 34.802],
- zoom: 12.9,
- pitch: 55,
- });
- types.forEach(i => bus.emit('setLayerVisible', { layername: i, isCheck: false }));
- let features = data
- .filter(i => i.lonLat || i.lon || i.lat)
- .map(i => {
- i.geometry = `POINT(${i.lonLat ? i.lonLat.replaceAll(',', ' ') : `${i.lon} ${i.lat}`})`;
- i.type = type;
- return turf.feature(Terraformer.WKT.parse(i.geometry), Object.assign({}, i));
- });
- bus.emit('removeMapDatas', [type]);
- bus.emit('setGeoJSON', { json: turf.featureCollection(features), type });
- bus.emit('setLayerVisible', { layername: type, isCheck: true });
- }
- };
-
- const highlight = i => {
- if (!(i.lonLat || i.lon || i.lat)) return;
- i.geometry = `POINT(${i.lonLat ? i.lonLat.replaceAll(',', ' ') : `${i.lon} ${i.lat}`})`;
- let feature = turf.feature(Terraformer.WKT.parse(i.geometry), Object.assign({}, i));
- bus.emit('setHighlight', feature);
- };
- onBeforeUnmount(() => {
- bus.off('changeTableContent');
- if (timer.value) {
- clearInterval(timer.value);
- }
- });
- </script>
- <style lang="scss" scoped>
- .tabRightWL {
- width: 100%;
- height: 100%;
- position: absolute;
- background: #00314e;
- border: 1px solid #094065;
- z-index: 115;
- overflow: auto;
- .tabChangeList {
- display: flex;
- align-items: center;
- justify-content: space-around;
- .tabChange {
- width: 145px;
- height: 22px;
- font-family: PingFang SC;
- margin: 20px 0 10px 0px;
- font-size: 16px;
- font-weight: 400;
- line-height: 22px;
- text-align: center;
- cursor: pointer;
- &:hover {
- color: #00d1ff;
- }
- }
- .active {
- color: #00d1ff;
- }
- }
- .dividerLine {
- height: 2px;
- border: 1px;
- margin: 0px 0 10px 0px;
- background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
- }
- .allContent {
- .selectTitle {
- .selectToolList {
- width: 300px;
- .selectTool {
- width: 135px;
- height: 26px;
- border-radius: 2px;
- background: linear-gradient(0deg, #004770, #004770), linear-gradient(0deg, #00d1ff, #00d1ff);
- border: 0.5px solid #00d1ff;
- margin-right: 10px;
- }
- }
- }
- .staticPicture {
- #chartThree {
- width: 500px;
- height: 300px;
- }
- #chartSuperviseWL {
- width: 500px;
- height: 300px;
- }
- }
- .navBtn {
- display: flex;
- justify-content: flex-end;
- p {
- width: 70px;
- height: 20px;
- text-align: center;
- color: #00a6d2;
- cursor: pointer;
- background: #004770;
- font-family: PingFang SC;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- border-radius: 10px;
- }
- .active {
- background: #0188b1;
- border-radius: 10px;
- color: #004c6c;
- }
- }
- .DMcontent {
- display: flex;
- .activeR {
- background: #0188b1;
- color: #004c6c;
- }
- .DMpart {
- width: 154px;
- margin: 5px 10px;
- fill: linear-gradient(180deg, #0073a5 -112.14%, rgba(0, 115, 165, 0) 97.26%);
- border: 1px solid #0073a5;
- border-radius: 10px;
- display: flex;
- justify-content: center;
- &:hover {
- background: #0188b1;
- color: #004c6c;
- }
- .partContent {
- display: flex;
- align-items: center;
- flex-direction: column;
- cursor: pointer;
-
- .title {
- color: #00d1ff;
- text-align: center;
- font-family: PingFang SC;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: normal;
- margin: 10px 0;
- }
- }
- }
- }
- .weatherInfo {
- display: flex;
- justify-content: space-around;
- // margin-top: 5px;
- height: 200px;
- overflow-y: hidden;
- overflow-x: scroll;
- .part {
- padding: 10px;
- margin: 5px 6px;
- width: 100px !important;
- background: #003758;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border-radius: 10px;
- &:hover {
- background: linear-gradient(180deg, #004770 0%, rgba(0, 71, 112, 0) 100%);
- border: 1px solid #0073a5;
- }
- &:nth-child(1) {
- background: linear-gradient(180deg, #004770 0%, rgba(0, 71, 112, 0) 100%);
- border: 1px solid #0073a5;
- }
- }
- p {
- text-align: center;
- margin: 3px;
- height: 20px;
- font-size: 14px;
- font-weight: 400;
- line-height: 20px;
- }
- }
- }
- .rightTab {
- width: 100%;
- margin-top: 10px;
- cursor: pointer;
- margin-bottom: 10px;
- }
- }
- </style>