- <template>
- <!-- 长效考核-项目管控规划落实 -->
- <div class="planControlCX">
- <!-- gis地图 -->
- <MapBox :initJson="`/static/libs/mapbox/style/planningcontrolCX.json`" @map-click="clickGisMap"></MapBox>
-
- <div class="longTermTitle">
- 统计年度
- <el-select v-model="currentYear" style="width: 100px" @change="getGhgk">
- <el-option v-for="(item, index) in yearList" :key="index" :label="item" :value="item" />
- </el-select>
- </div>
- <!-- <img src="@/assets/images/longTerm/ghgk.png" class="imgTL" /> -->
- <div class="tuli">
- <div style="margin: 10px; font-size: 18px">图例</div>
- <div v-for="i in tuliList" class="tuli_img">
- <img :src="i.icon" alt="" />
- <div>{{ i.label }}</div>
- </div>
- </div>
- <!-- 右侧内容 -->
- <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" style="font-size: 17px">
- {{ currentYear }}年度完成{{
- activeIndex == 1 ? '规划审批' : activeIndex == 2 ? '设计审查' : activeIndex == 3 ? '竣工验收' : ''
- }}落实海绵管控指标项目
- </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="selectTitle">
- <div class="name">
- {{ currentYear }}年度{{
- activeIndex == 1 ? '规划审批' : activeIndex == 2 ? '设计审查' : activeIndex == 3 ? '竣工验收' : ''
- }}项目信息
- </div>
- </div>
- <el-table ref="tableArea" :data="tableData" height="550" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
- <el-table-column label="序号" type="index" width="55" />
- <el-table-column label="项目名称" prop="projectName" />
- <el-table-column label="建设单位" prop="chargeDepartment" />
- <el-table-column label="申报年份" prop="year" width="80" />
- <el-table-column label="指标达成情况" prop="achievementTarget" width="160" />
- </el-table>
- </div>
- <!-- 详情 -->
- <el-dialog v-model="dialogShow" :title="dialogTitle" width="900px" append-to-body>
- <Operate1 v-if="activeIndex == 1" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate1>
- <Operate2 v-if="activeIndex == 2" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate2>
- <Operate3 v-if="activeIndex == 3" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate3>
- </el-dialog>
- </div>
- </template>
- <script setup>
- import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
- import bus from '@/bus';
- import Operate1 from '@/views/project/processControl/planPermission/operate.vue'; //规划许可详情
- import Operate2 from '@/views/project/processControl/constructionPermits/operate.vue'; //施工许可详情
- import Operate3 from '@/views/project/processControl/completionAcceptance/operate.vue'; //竣工验收详情
- import { projectTypeList } from '@/api/project/projectInformationNew';
- import { projectManageImplement } from '@/api/longTerm/index.js';
-
- const { proxy } = getCurrentInstance();
- const loadingGH = ref(true);
- const ghgkObj = ref({}); //规划管控落实情况
- const currentYear = ref();
- const yearList = ref([]);
- const ifExpand = ref(true);
- // const tableData = ref([
- // { name: '开封市疾病预防控制中心实验楼项目', year: '2024', val: 45, id: 1 },
- // { name: '市妇幼保健院东院城区', year: '2024', val: 35, id: 2 },
- // ]);
- const tableData = ref([]);
- const tableLoading = ref(false);
- const tableArea = ref(null);
- const activeIndex = ref(1);
- const dialogShow = ref(false);
- const dialogTitle = ref('');
- const curRow = ref({ id: '' });
- const opts = ref({ type: 'views' });
- const projectTypes = ref([]);
- const timer = ref(null);
- let tuliList = ref([
- { label: '未落实海绵指标项目', id: 0, icon: '/images/1.1.jpg' },
- { label: '落实海绵指标项目', id: 1, icon: '/images/1.2.jpg' },
- ]);
- // 获取项目类型
- const getProjectTypeList = async () => {
- const res = await projectTypeList({ status: '0' });
- if (res?.code !== 200) return;
- projectTypes.value = res?.data || [];
- };
-
- // 年份设置,从2021开始到当前年份
- function setYear() {
- yearList.value = [];
- let year = new Date().getFullYear();
- currentYear.value = year;
- for (let i = 2021; i <= year; i++) {
- yearList.value.push(i);
- }
- }
- // 获取规划管控制度落实情况
- function getGhgk() {
- loadingGH.value = true;
- projectManageImplement({ year: currentYear.value }).then(res => {
- ghgkObj.value = res.data;
- console.log(ghgkObj.value, ' ghgkObj.value');
- tableData.value = ghgkObj.value.implementIndicatorsProjectList;
- loadingGH.value = false;
- changeProject(1);
- });
- }
-
- /**
- * 规划管控落实制度点击
- * @param {*}val 1 规划许可,2 施工许可,3 竣工验收
- */
- function changeProject(val) {
- activeIndex.value = val;
- if (val == 1) {
- tableData.value = ghgkObj.value.implementIndicatorsProjectList;
- dialogTitle.value = '项目落实规划管控指标详情';
- // gis地图渲染
- ghgkObj.value.implementIndicatorsProjectList &&
- ghgkObj.value.implementIndicatorsProjectList.map(item => {
- item.type = item.implementIndicators == 1 ? 'success_zishui' : 'error_zishui';
- });
- intiMapData(ghgkObj.value.implementIndicatorsProjectList);
- } else if (val == 2) {
- tableData.value = ghgkObj.value.designStandardList;
- dialogTitle.value = '项目落实设计审查要求详情';
- // gis地图渲染
- ghgkObj.value.designStandardList.map(item => {
- item.type = item.isDesignStandard == 1 ? 'success_zishui' : 'error_zishui';
- });
- intiMapData(ghgkObj.value.designStandardList);
- } else {
- tableData.value = ghgkObj.value.inGoodConditionList;
- dialogTitle.value = '项目竣工验收申请详情';
- // gis地图渲染
- ghgkObj.value.inGoodConditionList.map(item => {
- item.type = item.isDesignStandard == 1 ? 'success_zishui' : 'error_zishui';
- });
- intiMapData(ghgkObj.value.inGoodConditionList);
- }
- }
-
- // 表格项目点击在地图定位
- function checkProject(row) {
- console.log(row);
- }
-
- // intiMapData(datas);
- function intiMapData(data) {
- let keys = ['error_zishui', 'success_zishui'];
- newfiberMapbox.popupService.popups.forEach((popup, index) => {
- nextTick(() => {
- newfiberMapbox.removePopup(popup);
- });
- });
- if (newfiberMapbox.map.getLayer('projectPoint')) {
- newfiberMapbox.map.removeLayer('projectPoint');
- newfiberMapbox.map.removeLayer('projectPointlabel');
- newfiberMapbox.map.removeSource('projectPoint');
- }
- //keys.forEach(key => {
- let geojson1 = turf.featureCollection(
- data.map(item =>
- turf.point(item.projectLocation.split(',').map(Number), {
- ...item,
- name: `${item.projectName}\n项目编号 ${item.projectNo}`,
- color: item.implementIndicators == 1 ? '#d9001b' : '#70b603',
- })
- )
- );
- addWaterloggingLayer(geojson1, 'projectPoint');
- }
- //地图渲染点位
- 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,
- },
- });
- !newfiberMapbox.map.getLayer(layerName + 'label') &&
- newfiberMapbox.map.addLayer({
- id: layerName + 'label',
- type: 'symbol',
- source: layerName,
- layout: {
- 'text-field': ['get', 'projectName'],
- 'text-font': ['KlokanTech Noto Sans Regular'],
- 'text-size': 16,
- 'text-offset': [0, -2],
- },
- paint: {
- 'text-color': '#d1dbe5',
- },
- });
- };
-
- // // 地图点击事件
- // function clickGisMap(lngLat, params) {
- // console.log(lngLat, params);
- // if (params.id) curRow.value = params;
- // dialogShow.value = true;
- // }
-
- onMounted(() => {
- setYear(); //设置年份
- getGhgk(); //获取规划管控数据
- getProjectTypeList(); // 获取项目类型
- 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 == 'projectPoint');
- console.log('clickfeature', '点击事件', clickfeature);
- });
- }, 5000);
- });
- onBeforeUnmount(() => {
- if (!!!newfiberMapbox) return;
- !!newfiberMapbox.map.getLayer('projectPoint') && newfiberMapbox.map.removeLayer('projectPoint');
- !!newfiberMapbox.map.getLayer('projectPointlabel') && newfiberMapbox.map.removeLayer('projectPointlabel');
- !!newfiberMapbox.map.getSource('projectPoint') && newfiberMapbox.map.removeSource('projectPoint');
- if (timer.value) {
- clearInterval(timer.value);
- }
- });
- </script>
- <style lang="scss">
- @import '@/assets/styles/variables.module.scss';
- .planControlCX {
- 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;
- }
- .planCont {
- margin: 20px auto;
- .flex {
- margin-bottom: 20px;
- }
- }
- }
- .tuli {
- left: 20px;
- bottom: 30px;
- padding: 10px;
- z-index: 111;
- position: absolute;
- background: $mainColor1;
- // display: flex;
- flex-wrap: wrap;
- align-items: center;
- text-align: center;
- color: #fff;
- .tuli_img {
- display: flex;
- width: 180px;
- align-items: center;
- margin-top: 8px;
- img {
- margin-right: 10px;
- width: 25px;
- }
- }
- }
- }
- .l7-popup-tip {
- display: none;
- }
- .l7-popup .l7-popup-content {
- padding: 0px;
- background: rgba(3, 59, 79, 0);
- }
- .l7-popup .l7-popup-content .l7-popup-close-button {
- display: none;
- }
- </style>