<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="浊度" />
<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="浊度" />
<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="浊度" />
<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: [113.953, 30.906],
zoom: 13.6,
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: [113.953, 30.906],
zoom: 13.6,
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: [113.953, 30.906],
zoom: 13.6,
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: [113.953, 30.906],
zoom: 13.6,
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: [113.953, 30.906],
zoom: 13.6,
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: [113.953, 30.906],
zoom: 13.6,
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: [113.953, 30.906],
zoom: 13.6,
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: #06488f;
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>
