- <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>