- <template>
- <!-- 长效考核-可渗透水地面面积 -->
- <div class="pergroundCX">
- <!-- gis地图 -->
- <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>
-
- <!-- <img src="@/assets/images/longTerm/kssdm.png" class="imgTL" /> -->
- <!-- 右侧内容 -->
- <div :class="['videoImgRCX', ifExpand ? 'rightZkCX' : 'rightSqCX']" @click="ifExpand = !ifExpand"></div>
- <div :class="['preContentRight', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
- <div class="selectTitle">
- <div class="name">年度可渗透地面变化情况</div>
- <!-- <el-select v-model="currentYear" @change="changeMonitorYear" style="width: 100px" size="small">
- <el-option label="2023年" value="2023"></el-option>
- <el-option label="2024年" value="2024"></el-option>
- <el-option label="2025年" value="2025"></el-option>
- </el-select> -->
- <div class="titleEnd">建成区面积:{{ areaData }}公顷</div>
- </div>
- <div id="chartAreaST" class="chartHeight"></div>
-
- <div class="selectTitle">
- <div class="name">年度项目可渗透地面面积比情况</div>
- </div>
- <el-table ref="tableArea" :data="tableData" height="500" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
- <el-table-column label="项目名称" prop="projectName" />
- <el-table-column label="完工年度" prop="year" width="80" />
- <el-table-column label="可渗透面积比(%)" prop="permeableFloorAreaPercent" width="130" />
- </el-table>
- </div>
- </div>
- </template>
- <script setup>
- import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
- import bus from '@/bus';
- import optionChart from './chartOption.js';
- import { getConfigKey } from '@/api/system/config'; //获取参数值
- import { permeableFloorAreaChart } from '@/api/longTerm/index.js';
-
- const { proxy } = getCurrentInstance();
- const ifExpand = ref(true);
- const chartKst = shallowRef(null);
- const tableData = ref([]);
- const tableLoading = ref(false);
- const tableArea = ref(null);
- const areaData = ref('');
- const timerTS = ref(null);
- const dataLists = ref([]);
- // const currentYear = ref('2024');
- // 可渗透地面变化echarts
- function kstChart() {
- //先销毁实例
- chartKst.value && chartKst.value.dispose();
- chartKst.value = proxy.echarts.init(document.getElementById('chartAreaST'));
- 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;
- dataLists.value = datas.projectCompletionAcceptanceList;
- if (datas.years.length == 0) {
- optionChart.option1.graphic.invisible = false; // 暂无数据
- } else {
- optionChart.option1.graphic.invisible = true; // 暂无数据
- }
- chartKst.value.clear();
- chartKst.value.setOption(optionChart.option1);
- // 默认加载第一个年份的表格数据
- tableData.value = datas.projectCompletionAcceptanceList[0];
- // gis地图渲染
- tableData.value &&
- tableData.value.map(item => {
- item.type = 'error_zishui';
- });
- intiMapDataPoint(tableData.value);
- barChartClick(); //柱状图点击事件
- });
- }
- // 可渗透地面变化echarts柱状图点击事件
- function barChartClick() {
- chartKst.value.getZr().setCursorStyle('pointer'); //设置鼠标移入手形
- chartKst.value.off('click'); //防止触发两次点击事件
- // 柱状图点击
- chartKst.value.getZr().on('click', params => {
- let pointInPixel = [params.offsetX, params.offsetY];
- if (chartKst.value.containPixel('grid', pointInPixel)) {
- let pointInGrid = chartKst.value.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
- let xIndex = pointInGrid[0]; //索引
- let handleIndex = Number(xIndex);
- if (handleIndex == -0) handleIndex = 0;
- console.log(handleIndex);
- // gis地图渲染
- let dataArr = dataLists.value[handleIndex];
- dataArr &&
- dataArr.map(item => {
- item.type = 'error_zishui';
- });
- tableData.value = dataArr;
- intiMapDataPoint(dataArr);
- }
- });
- }
- // 表格项目点击在地图定位
- function checkProject(row) {
- let lonlat = row.projectLocation.split(',');
- newfiberMapbox.map.easeTo({
- center: [Number(lonlat[0]), Number(lonlat[1])],
- });
- }
-
- // 获取建成区面积
- function getAreaData() {
- getConfigKey('jcq_area').then(res => {
- areaData.value = res.data || '0';
- });
- }
-
- //自适应
- function resizeTheChart() {
- chartKst.value.resize();
- }
-
- // 地图渲染点位
- function intiMapDataPoint(data) {
- newfiberMapbox.popupService.popups.forEach((popup, index) => {
- nextTick(() => {
- newfiberMapbox.removePopup(popup);
- });
- });
- let geojson1 = turf.featureCollection(
- data.map(item =>
- turf.point(item.projectLocation.split(','), {
- ...item,
- projectName: `${item.projectName}`,
- permeableFloorArea: `${item.permeableFloorArea} k㎡`,
- permeableFloorAreaPercent: `${item.permeableFloorAreaPercent} %`,
- color: '#d9001b',
- })
- )
- );
- let key = 'error_zishui';
- // bus.emit('getGeojsonByType', {
- // type: 'error_zishui',
- // callback: geojson => {
- // setTimeout(() => {
- // bus.emit('removeMapDatas', ['error_zishui']);
- // if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
- // bus.emit('setLayerVisible', { layername: key, isCheck: true });
- // }, 2000);
- // },
- // });
- addWaterloggingLayer(geojson1, 'waterLoging');
- geojson1.features.forEach(feature => {
- console.log(feature.properties, 99999);
- let popupClass;
- !!feature.properties.isFlood ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
- !!feature.properties.isFlood ? (feature.properties.isFlood = '0') : (feature.properties.isFlood = '1');
- return newfiberMapbox.addPopup(
- new mapboxL7.Popup({
- title: '',
- html: `
- <div class='popupMapPoint successPopup' style=" background-color: rgba(247, 189, 15, 0.5); border: 2px solid #f7bd0f;"><div class='titles' style="padding-left:10px">${feature.properties.projectName}</div>
- <div class='part'>可渗透地面面积:${feature.properties.permeableFloorArea}</div>
- <div class='part'>可渗透地面面积比例:${feature.properties.permeableFloorAreaPercent}</div>
- </div>`,
- lngLat: {
- lng: feature.geometry.coordinates[0],
- lat: feature.geometry.coordinates[1],
- },
- anchor: 'center',
- offsets: [20, 60],
- autoClose: false,
- })
- );
- });
- }
- //地图渲染内涝点
- const addWaterloggingLayer = (geojson, layerName) => {
- !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
- !!!newfiberMapbox.map.getLayer(layerName) &&
- newfiberMapbox.map.addLayer({
- id: layerName,
- type: 'circle',
- source: layerName,
- paint: {
- 'circle-color': ['get', 'color'],
- 'circle-radius': 7,
- },
- });
- };
- onMounted(() => {
- kstChart();
- window.addEventListener('resize', resizeTheChart);
- getAreaData();
- setTimeout(() => {
- newfiberMapbox.map.on('click', e => {
- let 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(i => i.layer.id == 'waterLoging');
- console.log('clickfeature', '点击事件', clickfeature);
- });
- }, 5000);
- });
- onBeforeUnmount(() => {
- if (!!!newfiberMapbox) return;
- !!newfiberMapbox.map.getLayer('waterLoging') && newfiberMapbox.map.removeLayer('waterLoging');
- !!newfiberMapbox.map.getSource('waterLoging') && newfiberMapbox.map.removeSource('waterLoging');
- newfiberMapbox.popupService.popups.forEach(popup => {
- nextTick(() => {
- newfiberMapbox.removePopup(popup);
- });
- });
- if (timerTS.value) {
- clearInterval(timerTS.value);
- }
- });
- </script>
- <style lang="scss">
- @import '@/assets/styles/variables.module.scss';
- .l7-popup-tip {
- display: none;
- }
- .l7-popup .l7-popup-content {
- padding: 0px;
- background: #033b4f;
- }
- .l7-popup .l7-popup-content .l7-popup-close-button {
- display: none;
- }
- .pergroundCX {
- width: 100%;
- height: 100%;
- position: relative;
- .imgTL {
- position: absolute;
- z-index: 99;
- left: 30px;
- bottom: 20px;
- }
- .preContentRight {
- width: 500px;
- height: calc(100vh - 100px);
- border: 1px solid #1d8db4;
- background: $mainBg;
- border-radius: 8px;
- position: absolute;
- top: 20px;
- right: 20px;
- z-index: 90;
- padding: 15px;
- overflow: auto;
- .chartHeight {
- width: 100%;
- height: 260px;
- }
- .el-table__body tr {
- cursor: pointer;
- }
- }
- }
- </style>