<template> <!-- 风险研判 态势研判--> <div class="tabRightFX" v-if="tabShowWL == 4"> <div class="allContent"> <div class="selectTitle" style="margin-top: 15px"> <div class="name">未来24h气象降雨预报</div> </div> <div class="staticPicture" v-loading="loadingWeather"> <div id="chartOne"></div> </div> <div class="selectTitle"> <div class="name">河道水位</div> <el-select v-model="riverIndex" style="margin: 0px 10px 0px 10px" size="small" @change="changeRiver"> <el-option :label="item.stName" :value="item.stCode" v-for="item in riverLists" :key="item.stCode"></el-option> </el-select> </div> <div class="staticPicture" v-loading="loadingRiver"> <div id="chartTwo"></div> </div> <div class="selectTitle"> <div class="name">积水风险研判</div> </div> <el-table ref="tableArea" :data="tableData" v-loading="tableLoading" style="width: 100%; margin: 5px 0 10px 0" height="200" highlight-current-row @row-click="clickLogData" :empty-text="'暂无风险'" > <el-table-column prop="riskLevel" label="积水风险级别"> <template #default="scope"> {{ scope.row.riskLevel == 'high' ? '高风险' : scope.row.riskLevel == 'middle' ? '中风险' : scope.row.riskLevel == 'low' ? '低风险' : '--' }} </template> </el-table-column> <el-table-column prop="avgZ" label="平均水深(m)" /> <el-table-column prop="waterloggingArea" label="积水面积(k㎡)" /> </el-table> </div> <!-- 积水区域预报水位弹窗 --> <el-dialog v-model="dialogShow" title="积水区域预报水位" width="800px" append-to-body> <LineChart v-if="dialogShow" :echartData="echartData" :refresh="refresh" style="width: 760px; height: 400px; margin-bottom: 30px" ></LineChart> </el-dialog> </div> </template> <script setup name="tabRightFX"> import chartOption from '@/components/Echarts/pieChart_1.js'; import * as echarts from 'echarts'; import { nextTick } from 'vue'; import bus from '@/bus'; import { ElLoading } from 'element-plus'; import { rainTrend, waterloggingRisk, geometryDurationData } from '@/api/floodSys/oneMap'; import { getoneRiverRisk } from '@/api/dataAnalysis/syntherticData'; import { listrtuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo'; import LineChart from '@/components/Echarts/lineOneChart.vue'; //折线图 import xiaoganCityBoundary from '@/assets/geojson/xiaoganCityBoundary.json'; const tabShowWL = ref(null); const loadingWeather = ref(true); const tableData = ref([]); const tableLoading = ref(true); const tableArea = ref(null); const riverIndex = ref(null); const riverLists = ref([]); const loadingRiver = ref(true); const dialogShow = ref(false); const refresh = ref(1); const timer = ref(null); const echartData = ref({ xAxisData: [], yAxisName: '内涝点水位(m)', seriesData: [ { type: 'line', smooth: true, data: [], // 填充区域的样式 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)' }, ]), }, }, ], }); // 降雨预报柱状图 let chart = null; const initEcharts = async () => { if (!!chart) chart.dispose(); chart = echarts.init(document.getElementById('chartOne')); loadingWeather.value = true; let res = await rainTrend(); if (res && res.code == 200) { let datas = res.data; console.log(datas, 9999999); let times = []; if (Boolean(datas.dateRange.length)) { datas.dateRange.forEach(i => { times.push(i.substr(5, 11)); }); } chartOption.floodOneMapFXrain.legend.data = ['近24h实测雨量', '未来24h预报雨量']; chartOption.floodOneMapFXrain.xAxis[0].data = times; chartOption.floodOneMapFXrain.yAxis[0].name = 'mm'; chartOption.floodOneMapFXrain.series[0].name = '近24h实测雨量'; chartOption.floodOneMapFXrain.series[1].name = '未来24h预报雨量'; chartOption.floodOneMapFXrain.series[0].data = datas.history; chartOption.floodOneMapFXrain.series[1].data = datas.forecast; if (datas.dateRange.length == 0) { chartOption.floodOneMapFXrain.graphic.invisible = false; //暂无数据 } else { chartOption.floodOneMapFXrain.graphic.invisible = true; //暂无数据 } // 设置鼠标滚轮放大缩小展示数据区间 chartOption.floodOneMapFXrain.dataZoom = [{ type: 'inside', startValue: 5 }]; } chart.clear(); chart.setOption(chartOption.floodOneMapFXrain); loadingWeather.value = false; }; // 河湖风险研判切换河湖 function changeRiver(val) { riverIndex.value = val; getRiverData(); } let chartRiver = null; async function getRiverData() { if (!!chartRiver) chartRiver.dispose(); loadingRiver.value = true; chartRiver = echarts.init(document.getElementById('chartTwo')); let params = { riverCode: riverIndex.value, }; let res = await getoneRiverRisk(params); if (res && res.code == 200) { let datas = res.data; console.log(datas, 'datas'); // if (datas.propertyMonitorXList.length == 0) return; // echarts赋值 chartOption.floodOneMapFXYP.xAxis[0].data = datas.riverX; //x轴 chartOption.floodOneMapFXYP.series[1].data = datas.riverY; //河床高度 chartOption.floodOneMapFXYP.series[1].markLine.data[0].yAxis = datas.sfZ; //设防水位 chartOption.floodOneMapFXYP.series[1].markLine.data[0].label.formatter = '设防水位 ' + datas.sfZ + 'm'; let arrs2 = []; datas.riverX.map(item => { arrs2.push(Number(datas.z) + Number(datas.gcZ) + 1); }); chartOption.floodOneMapFXYP.series[0].data = arrs2; //当前水位 if (datas.riverX.length == 0) { chartOption.floodOneMapFXYP.graphic.invisible = false; //暂无数据 } else { chartOption.floodOneMapFXYP.graphic.invisible = true; //暂无数据 } chartRiver.clear(); chartRiver.setOption(chartOption.floodOneMapFXYP); loadingRiver.value = false; } } // 获取河湖风险研判下拉框值 async function getRiverSelect() { let res = await listrtuSiteInfo({ siteType: 'water_level' }); if (res && res.code == 200) { let datas = res.data; riverLists.value = datas; riverIndex.value = datas[0].stCode; changeRiver(riverIndex.value); } } //积水预报表格 async function getWaterLogging() { tableLoading.value = true; let res = await waterloggingRisk(); if (res && res.code == 200) { tableData.value = res.data; tableLoading.value = false; clickLogData(tableData.value[2]); tableArea.value.setCurrentRow(tableData.value[2], true); //表格默认第3个高亮选中 } } // 积水预报表格点击,gis加载积水单元 function clickLogData(val) { let golygonColor; let features = []; val.riskLevel == 'low' ? (golygonColor = '#10e8a1') : val.riskLevel == 'middle' ? (golygonColor = '#1e97f0') : (golygonColor = '#ff2603'); let loading = ElLoading.service({ lock: true, text: '正在进行积水单位渲染...', }); val.geometry.forEach((element, index) => { let turfPolygon = turf.polygon(element.coordinates, { name: element.name, geoVal: element.geoVal, color: golygonColor }); features.push(turfPolygon); }); let waterlogRiskJson = turf.featureCollection(features); if (!!!newfiberMapbox.map.getLayer('waterLogingLayer')) { addWaterlogRiskLayer(waterlogRiskJson); } else { newfiberMapbox.map.getSource('waterLogingSource').setData(waterlogRiskJson); } loading.close(); } //地图添加内涝风险 const addWaterlogRiskLayer = geojson => { newfiberMapbox.map.addSource('waterLogingSource', { type: 'geojson', data: geojson }); newfiberMapbox.map.addLayer({ id: 'waterLogingLayer', type: 'fill', source: 'waterLogingSource', paint: { 'fill-color': ['get', 'color'], }, }); }; // 获取预报水位线 async function getFutureData(params) { dialogShow.value = true; let res = await geometryDurationData({ name: params.name, type: 'depth' }); if (res && res.code == 200) { let datas = res.data; echartData.value.xAxisData = datas.timeList; echartData.value.seriesData[0].data = datas.valueList; refresh.value = Math.random(); } } //添加孝感城区边界 const addCityBoundary = () => { !newfiberMapbox.map.getSource('xiaoganCityBoundary') && newfiberMapbox.map.addSource('xiaoganCityBoundary', { type: 'geojson', data: xiaoganCityBoundary }); !newfiberMapbox.map.getLayer('xiaoganCityBoundary') && !newfiberMapbox.map.addLayer({ id: 'xiaoganCityBoundary', type: 'line', source: 'xiaoganCityBoundary', paint: { 'line-color': 'rgba(255,18,60,1)', 'line-width': 3, }, }); }; onMounted(() => { bus.on('changeTableContent', val => { if (val == 4) { tabShowWL.value = val; nextTick(() => { newfiberMapbox.map.easeTo({ center: [114.312, 34.802], zoom: 12.9, pitch: 0, }); addCityBoundary(); initEcharts(); //未来气象预报 getRiverSelect(); //河湖风险研判获取列表 getWaterLogging(); //积水预报 }); newfiberMapbox.map.on('click', e => { const clickFeature = ( newfiberMapbox.map.queryRenderedFeatures([ [e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2], ]) || [] ).filter(feature => feature.source == 'waterLogingSource')[0]; if (!!!clickFeature) { return; } newfiberMapbox.map.easeTo({ center: [e.lngLat.lng, e.lngLat.lat], zoom: 17, }); // 获取预报水位线 getFutureData(clickFeature.properties); }); bus.emit('initeLayer', []); } else { tabShowWL.value = null; timer.value = setInterval(() => { if (!!!newfiberMapbox) { return; } else { !!newfiberMapbox.map.getLayer('waterLogingLayer') && newfiberMapbox.map.removeLayer('waterLogingLayer'); !!newfiberMapbox.map.getSource('waterLogingSource') && newfiberMapbox.map.removeSource('waterLogingSource'); !!newfiberMapbox.map.getLayer('xiaoganCityBoundary') && newfiberMapbox.map.removeLayer('xiaoganCityBoundary'); !!newfiberMapbox.map.getSource('xiaoganCityBoundary') && newfiberMapbox.map.removeSource('xiaoganCityBoundary'); clearInterval(timer.value); } }, 100); } }); }); onBeforeUnmount(() => { bus.off('changeTableContent'); if (timer.value) { clearInterval(timer.value); } }); </script> <style lang="scss"> .tabRightFX { width: 100%; height: 100%; position: absolute; background: #00314e; border: 1px solid #094065; z-index: 115; .allContent { height: 750px; overflow: auto; .selectTitle { .switchName { color: #00d1ff; text-align: center; font-family: PingFang SC; font-size: 14px; font-weight: 400; } .scendRain { width: 100px; margin-right: 10px; } } .staticPicture { #chartOne, #chartTwo { height: 200px; } } .navBtn { display: flex; justify-content: flex-end; width: 504px; 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; } } .dutyInfo { display: flex; margin: 5px; .name { margin-top: 15px; margin-left: 20px; color: #00d1ff; text-align: center; font-family: PingFang SC; font-size: 14px; font-weight: 400; } .phone { margin-top: 15px; margin-left: 20px; text-align: center; color: #00d1ff; font-family: PingFang SC; font-size: 14px; font-weight: 400; } .isRead { margin-top: 15px; margin-left: 200px; width: 52px; height: 28px; color: #00d1ff; font-family: PingFang SC; font-size: 14px; font-weight: 400; text-align: center; line-height: 28px; fill: #003758; border: 1px solid #01547b; } .isReadTrue { fill: #003758; border: 1px solid #00d1ff; } } } } </style>