<template>
<!-- 长效考核-长效考核总览 -->
<div class="assmessentPageCX">
<!-- 左侧内容 -->
<div :class="['videoImgHM', ifExpand ? 'leftZkHM' : 'leftSqHM']" @click="ifExpand = !ifExpand"></div>
<div :class="['assContentLeftHM', 'animate__animated', ifExpand ? 'animate__bounceInLeft' : 'animate__bounceOutLeft']">
<div class="selectTitleHM">
<div class="name">内涝防治情况</div>
<div class="titleEnd">
<el-select v-model="modalNL" placeholder="请选择" style="width: 80px" size="small" @change="changeMonitormodle">
<el-option label="模型法" value="1" />
<el-option label="监测法" value="2" />
</el-select>
<el-select
v-model="yearmx"
v-if="modalNL == '1'"
@change="changeMonitorYear"
placeholder="请选择"
style="width: 100px; margin: 0 5px"
size="small"
>
<el-option v-for="item in yearmodelList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select
v-model="yearNL"
@change="changeMonitorNlYear"
v-if="modalNL == '2'"
placeholder="请选择"
style="width: 100px; margin: 0 5px"
size="small"
>
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</div>
<!-- 模型法 -->
<div v-if="modalNL == '1'">
<div class="flex pipeSys">
<p>设计降雨重现期：20年一遇24h</p>
<p>设计降雨量：<span>156</span> mm</p>
</div>
<PieChart
v-if="echartDatamdchart"
:echartData="echartDatamd"
:title="`总面积\n${yearmxrowareaTotal}k㎡`"
class="chartHeight"
></PieChart>
<div class="planCont modleplanCont" style="height: 230px">
<div class="flex" v-for="item in resultList">
<p class="title">{{ item.partitionName }}</p>
<el-progress :text-inside="true" status="success" :stroke-width="20" :percentage="item.floodArea"></el-progress>
</div>
<!-- <div class="flex">
<p class="title">长兴工业园雨水分区</p>
<el-progress :text-inside="true" status="success" :stroke-width="20" :percentage="22"> </el-progress>
</div> -->
</div>
</div>
<!-- 监测法 -->
<div v-if="modalNL == '2'">
<div class="flex pipeSys">
<p>累计降雨次数：<span>12</span> 次</p>
<p>24h最大降雨量：<span>156</span> mm</p>
</div>
<PieChart v-if="echartDatajcchart" :echartData="echartDataNL" :title="`建成区\n${areaData}k㎡`" class="chartHeight"></PieChart>
<el-table :data="tableDataJC" height="260">
<el-table-column label="内涝点名称" prop="name" />
<el-table-column label="积水时长(h)" prop="yearTotalHour" />
<el-table-column label="积水深度(m)" prop="yearMaxDepth" />
</el-table>
</div>
<div class="selectTitleHM" style="margin-top: 10px">
<div class="name">近3年可渗透地面变化</div>
</div>
<div id="chartST" class="chartHeight chartSTleft"></div>
</div>
<!-- 右侧内容 -->
<div :class="['videoImgRCX', ifExpand2 ? 'rightZkCXHK' : 'rightSqCX']" @click="ifExpand2 = !ifExpand2"></div>
<div :class="['assContentRightHM', 'animate__animated', ifExpand2 ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
<div class="selectTitleHM">
<div class="name">雨水资源利用量</div>
<!-- <div class="titleEnd"><el-button type="success" size="small" @click="checkDetail(2)">详情</el-button></div> -->
</div>
<div id="chartRain" class="chartHeight"></div>
<div class="selectTitleHM">
<div class="name">规划管控制度落实</div>
<el-date-picker
v-model="xmndDate"
type="year"
format="YYYY"
value-format="YYYY"
placeholder="选择年"
@change="handlexmndDate"
style="width: 120px"
>
</el-date-picker>
<!-- <el-select v-model="yearNL" placeholder="请选择" style="width: 100px; margin: 0 5px" size="small">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> -->
<!-- <div class="titleEnd"><el-button type="success" size="small" @click="checkDetail(3)">详情</el-button></div> -->
</div>
<div class="planCont" v-loading="loadingGH">
<div :class="['flex', activeIndex == 1 ? 'activePlan' : '']" @click="changeProject(1)">
<p class="title">落实海绵项目指标项目数</p>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="(ghgkObj.implementIndicatorsProjectNum / ghgkObj.permitsProjectNum) * 100"
status="success"
>
<span class="name">{{ ghgkObj.implementIndicatorsProjectNum }}</span>
</el-progress>
<p class="title">完成规划审批项目数 {{ ghgkObj.permitsProjectNum }}个</p>
</div>
<div :class="['flex', activeIndex == 2 ? 'activePlan' : '']" @click="changeProject(2)">
<p class="title">落实设计审查要求项目数</p>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="(ghgkObj.designStandardNum / ghgkObj.completionAcceptanceNum) * 100"
status="success"
>
<span class="name">{{ ghgkObj.designStandardNum }}</span>
</el-progress>
<p class="title">完成设计审查项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
</div>
<div :class="['flex', activeIndex == 3 ? 'activePlan' : '']" @click="changeProject(3)">
<p class="title">通过竣工验收项目数</p>
<el-progress
:text-inside="true"
:stroke-width="20"
:percentage="(ghgkObj.inGoodConditionNum / ghgkObj.completionAcceptanceNum) * 100"
status="success"
>
<span class="name">{{ ghgkObj.inGoodConditionNum }}</span>
</el-progress>
<p class="title">申报竣工验收项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
</div>
</div>
<div class="selectTitleHM">
<div class="name">合流制溢流污染</div>
<el-date-picker
v-model="xmtjDate"
type="year"
placeholder="选择年"
format="YYYY"
value-format="YYYY"
@change="handlexmtjDate"
style="width: 120px"
>
</el-date-picker>
<!-- <el-select v-model="yearNL" placeholder="请选择" style="width: 100px; margin: 0 5px" size="small">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> -->
</div>
<PieChart :echartData="echartDataPie" :title="pieTitle" class="PieCharthel" v-if="shallowIf"></PieChart>
</div>
<!-- 雨水利用量图例图片 -->
<img src="@/assets/images/longTerm/yszy.png" alt="" :class="['tuliImg', ifExpand2 ? '' : 'tuliR']" v-if="tuliShow" />
<!-- 规划管控图例图片 -->
<img src="@/assets/images/longTerm/ghgk.png" alt="" :class="['tuliImg', ifExpand2 ? '' : 'tuliR']" v-if="!tuliShow" />
<!-- 详情弹窗内容 -->
<!-- <el-dialog v-model="dialogShow" :title="dialogTitle" width="800px" append-to-body>
<AssmessDetail :detailObj="detailObj" v-if="dialogShow"></AssmessDetail>
</el-dialog> -->
</div>
<MapBox :initJson="`/static/libs/mapbox/style/floodOneMap.json`" @map-click="mapClick"></MapBox>
</template>
<script setup>
import { permeableFloorAreaChart, rainwaterUtilizationChart, projectManageImplement, projectManageList } from '@/api/longTerm/index.js';
import { getConfigKey } from '@/api/system/config'; //获取参数值
import optionChart from './chartOption.js';
import PieChart from '@/components/Echarts/pieChart.vue'; //饼图
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import YSFQ1 from '@/assets/geojson/YSFQ1.json';
import YSFQLable1 from '@/assets/geojson/YSFQLable1.json';
import bus from '@/bus';
import { rainfallSiteCount } from '@/api/longTerm/index.js';
// import AssmessDetail from './assmessDetail.vue'; //详情弹窗数据
import { moduleFloodResultLongTerm, monitorEvaluateResultLongTerm } from '@/api/longTerm/index';
import { ref } from 'vue';
const { proxy } = getCurrentInstance();
const xmndDate = ref(proxy.moment().subtract('1', 'day').format('YYYY'));
const xmtjDate = ref(proxy.moment().subtract('1', 'day').format('YYYY'));
const dialogShow = ref(false);
const dialogTitle = ref('');
const detailObj = ref({ type: '', id: '', year: '', tableData: [] });
const ifExpand = ref(true);
const ifExpand2 = ref(true);
const activeIndex = ref(1);
const timer = ref(null);
const modletableData = ref([]); //模型data值
const yearmodelList = ref([]);
const yearmxrow = ref('');
const yearmxrowareaTotal = ref('');
const resultList = ref([]);
const echartDatamd = ref([]);
const echartDatamdchart = ref(false);
const shallowIf = ref(false);
//内涝
const dataListNL = ref([]);
const echartDatajcchart = ref(false);
const echartDataPie = ref([
{ name: '>=5次', value: 12 },
{ name: '未发生', value: 2 },
{ name: '1-2次', value: 1 },
{ name: '3-5次', value: 3 },
]);
const echartDataNL = ref([
{ name: '内涝区域', value: 2 },
{ name: '未发生内涝', value: 22 },
]);
const pieTitle = ref('监测点 80个');
const chartKst = shallowRef(null);
const chartRain = shallowRef(null);
const chartNL = shallowRef(null);
const yearmx = ref('2024');
const yearNL = ref('2024');
const modalNL = ref('1');
const yearList = ref([]);
const currentYear = ref(null);
const centerTitle = ref('雨水资源利用');
const tuliShow = ref(true);
const ghgkObj = ref({}); //规划管控落实情况
const loadingGH = ref(false);
const areaData = ref('');
const tableDataJC = ref([]);
//点击年份加载数据
const handlexmndDate = () => {
getGhgk(xmndDate.value);
};
// 可渗透地面变化echarts
function kstChart() {
chartKst.value = proxy.echarts.init(document.getElementById('chartST'));
permeableFloorAreaChart().then(res => {
let datas = res.data;
optionChart.option1.xAxis.data = datas.years;
optionChart.option1.series[0].data = datas.permeableFloorAreaTotals;
optionChart.option1.series[1].data = datas.permeableFloorAreaPercents;
optionChart.option1.graphic.invisible = true; // 暂无数据
chartKst.value.clear();
chartKst.value.setOption(optionChart.option1);
});
}
// 雨水资源利用量图表
function getRainData() {
centerTitle.value = '雨水资源利用';
tuliShow.value = true;
chartRain.value = proxy.echarts.init(document.getElementById('chartRain'));
rainwaterUtilizationChart().then(res => {
let datas = res.data;
let charts = JSON.parse(JSON.stringify(optionChart.option3));
charts.graphic.invisible = true; // 暂无数据
charts.yAxis.name = 't';
charts.series[0].name = '雨水资源利用量';
charts.series[0].data = datas.rainwaterUtilizationTotals;
charts.xAxis.data = datas.years;
chartRain.value.clear();
chartRain.value.setOption(charts);
chartRain.value.getZr().setCursorStyle('pointer');
chartRain.value.getZr().on('click', params => {
centerTitle.value = '雨水资源利用';
tuliShow.value = true;
});
});
}
// 内涝防治情况
function getNLData() {}
// 获取规划管控制度落实情况
function getGhgk() {
loadingGH.value = true;
projectManageImplement({ year: xmndDate.value }).then(res => {
ghgkObj.value = res.data;
changeProject(1);
loadingGH.value = false;
});
}
/**
* 规划管控落实制度点击
* @param {*}val 1 规划许可，2 施工许可，3 竣工验收
*/
function changeProject(val) {
activeIndex.value = val;
if (val == 1) {
// 落实规划管控指标
detailObj.value.tableData = ghgkObj.value.implementIndicatorsProjectList;
} else if (val == 2) {
// 落实设计审查要求
detailObj.value.tableData = ghgkObj.value.designStandardList;
} else {
// 通过竣工验收
detailObj.value.tableData = ghgkObj.value.inGoodConditionList;
}
}
// 查看详情
function checkDetail(type) {
dialogShow.value = true;
detailObj.value.type = type;
switch (type) {
case 1:
dialogTitle.value = currentYear.value + '可渗透地面变化详情';
getDetailData();
break;
case 2:
dialogTitle.value = currentYear.value + '年度雨水资源利用量详情';
getDetailData();
break;
case 3:
dialogTitle.value = currentYear.value + '年度规划管控制度落实详情';
break;
case 4:
dialogTitle.value = currentYear.value + '年度合流制溢流污染详情';
break;
}
}
// 获取可渗透地面变化、雨水资源利用详情
function getDetailData() {
projectManageList({ year: currentYear.value }).then(res => {
detailObj.value.tableData = res.data;
});
}
// 获取建成区面积
function getAreaData() {
getConfigKey('jcq_area').then(res => {
areaData.value = res.data || '0';
});
}
//点击年份加载数据
const handlexmtjDate = () => {
shallowIf.value = false;
setTimeout(() => {
getDatas(xmtjDate.value);
}, 100);
};
// 溢流污染频次统计(饼图) 降雨溢流事件
async function getDatas() {
// 溢流污染频次统计
let res1 = await rainfallSiteCount({ year: xmtjDate.value });
if (res1 && res1.code == 200) {
shallowIf.value = true;
let datas = res1.data;
pieTitle.value = '排口 ' + datas.drainOutletSiteNum;
echartDataPie.value[0].value = datas.fiveOverflowNum;
echartDataPie.value[1].value = datas.noOverflowNum;
echartDataPie.value[2].value = datas.oneOverflowNum;
echartDataPie.value[3].value = datas.threeOverflowNum;
}
}
//自适应
function resizeTheChart() {
chartKst.value.resize();
chartRain.value.resize();
chartNL.value.resize();
}
//切换模型法
function changeMonitormodle(val) {
if (val == 1) {
getModalData();
} else {
getMonitorData();
}
}
// 获取监测法数据
async function getMonitorData() {
let res = await monitorEvaluateResultLongTerm();
if (res && res.code == 200) {
yearList.value = [];
let datas = res.data;
dataListNL.value = datas || [];
if (datas.length == 0) return;
datas.map(item => {
yearList.value.push({
value: item.year,
label: item.year + '年',
});
});
yearNL.value = dataListNL.value[0].year;
tableDataJC.value = dataListNL.value[0].allWaterLoggingPointList;
echartDataNL.value = [
{ name: '内涝区域', value: dataListNL.value[0].floodArea },
{ name: '未发生内涝', value: Number(areaData.value) - Number(dataListNL.value[0].floodArea) },
];
setTimeout(() => {
echartDatajcchart.value = true;
});
}
}
//检测法年份切换
function changeMonitorNlYear(val) {
echartDatajcchart.value = false;
yearNL.value = val;
let rows = dataListNL.value.filter(item => item.year == val);
if (rows.length == 0) return;
yearNL.value = rows[0].year;
tableDataJC.value = rows[0].allWaterLoggingPointList;
echartDataNL.value = [
{ name: '内涝区域', value: rows[0].floodArea },
{ name: '未发生内涝', value: Number(areaData.value) - Number(rows[0].floodArea) },
];
setTimeout(() => {
echartDatajcchart.value = true;
}, 100);
}
// 模型法年份切换
function changeMonitorYear(val) {
resultList.value = [];
echartDatamdchart.value = false;
yearmx.value = val;
let rows = modletableData.value.filter(item => item.year == val);
if (rows.length == 0) return;
resultList.value = rows[0].resultList;
yearmxrow.value = rows[0];
yearmxrowareaTotal.value = rows[0].areaTotal;
echartDatamd.value = [
{ name: '内涝区域', value: rows[0].totalFloodArea },
{ name: '未发生内涝', value: Number(rows[0].areaTotal) - Number(rows[0].totalFloodArea) },
];
setTimeout(() => {
echartDatamdchart.value = true;
}, 100);
}
// 模型法数据获取
async function getModalData() {
let res = await moduleFloodResultLongTerm();
if (res && res.code == 200) {
echartDatamd.value = [];
modletableData.value = res.data;
if (Boolean(modletableData.value.length)) {
yearmodelList.value = [];
modletableData.value.forEach(i => {
i.targetCxq = i.targetCxq + '年一遇24h';
yearmodelList.value.push({
value: i.year,
label: i.year + '年',
});
});
}
yearmx.value = modletableData.value[0].year;
yearmxrow.value = modletableData.value[0];
resultList.value = modletableData.value[0].resultList;
yearmxrowareaTotal.value = modletableData.value[0].areaTotal;
echartDatamd.value = [
{ name: '内涝区域', value: modletableData.value[0].totalFloodArea },
{ name: '未发生内涝', value: Number(modletableData.value[0].areaTotal) - Number(modletableData.value[0].totalFloodArea) },
];
setTimeout(() => {
echartDatamdchart.value = true;
});
}
}
onMounted(() => {
getModalData();
getGhgk();
getDatas();
// changeYear(new Date().getFullYear());
kstChart(); //可渗透地面变化echarts
getRainData(); //雨水资源利用量图表
getNLData(); //内涝积水点图表
getAreaData();
window.addEventListener('resize', resizeTheChart);
timer.value = setInterval(() => {
if (!!!newfiberMapbox.map.getLayer('point')) {
return;
} else {
!!!newfiberMapbox.map.getSource('YSFQ1') && newfiberMapbox.map.addSource('YSFQ1', { type: 'geojson', data: YSFQ1 });
!!!newfiberMapbox.map.getLayer('YSFQ1') &&
newfiberMapbox.map.addLayer({
id: 'YSFQ1',
type: 'fill',
source: 'YSFQ1',
minzoom: 0,
maxzoom: 12,
paint: {
'fill-color': ['get', 'fill_color'],
},
layout: {
visibility: 'visible',
},
});
!!!newfiberMapbox.map.getSource('YSFQLable1') && newfiberMapbox.map.addSource('YSFQLable1', { type: 'geojson', data: YSFQLable1 });
!!!newfiberMapbox.map.getLayer('YSFQLable1') &&
newfiberMapbox.map.addLayer({
id: 'YSFQLable1',
type: 'symbol',
source: 'YSFQLable1',
minzoom: 0,
maxzoom: 12,
layout: {
visibility: 'visible',
'text-field': ['get', 'name'],
'text-font': ['KlokanTech Noto Sans Regular'],
'text-size': 16,
'text-line-height': 3,
'text-anchor': 'bottom',
},
paint: {
'text-color': '#ffffff',
},
});
bus.emit('setLayerVisible', { layername: 'YSFQ', isCheck: true });
clearInterval(timer.value);
}
}, 1000);
});
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeTheChart); //销毁图表监听事件
//先销毁实例
chartNL.value && chartNL.value.dispose();
chartRain.value && chartRain.value.dispose();
chartKst.value && chartKst.value.dispose();
if (timer.value) {
clearInterval(timer.value);
}
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.assmessentPageCX {
width: 100%;
height: 100%;
.pipeSys {
border: 1px solid #439bf8;
border-radius: 6px;
color: #2992ff;
justify-content: space-between;
align-items: center;
padding: 3px 10px;
margin: 10px auto;
span {
color: #fff;
font-family: YouSheBiaoTiHei;
font-size: 22px;
}
}
.chartHeight {
width: 100%;
height: 210px !important;
}
.chartSTleft {
width: 100%;
height: calc(100% - 630px) !important;
}
.PieCharthel {
height: calc(100% - 520px) !important;
}
#chartST {
width: 100%;
height: 230px;
}
.tuliImg {
position: absolute;
bottom: 20px;
right: 480px;
transition: 0.5s ease-in-out;
}
.tuliR {
right: 20px !important;
}
.planCont {
margin: 20px auto;
.flex {
margin-bottom: 10px;
.title {
width: 150px;
}
}
}
}
.modleplanCont {
overflow-y: auto;
}
</style>
