Newer
Older
KaiFengPC / src / views / spongePerformance / longTerm / planningcontrolCX.vue
@zhangdeliang zhangdeliang on 23 May 12 KB update
  1. <template>
  2. <!-- 长效考核-项目管控规划落实 -->
  3. <div class="planControlCX">
  4. <!-- gis地图 -->
  5. <MapBox :initJson="`/static/libs/mapbox/style/planningcontrolCX.json`" @map-click="clickGisMap"></MapBox>
  6.  
  7. <div class="longTermTitle">
  8. 统计年度
  9. <el-select v-model="currentYear" style="width: 100px" @change="getGhgk">
  10. <el-option v-for="(item, index) in yearList" :key="index" :label="item" :value="item" />
  11. </el-select>
  12. </div>
  13. <!-- <img src="@/assets/images/longTerm/ghgk.png" class="imgTL" /> -->
  14. <div class="tuli">
  15. <div style="margin: 10px; font-size: 18px">图例</div>
  16. <div v-for="i in tuliList" class="tuli_img">
  17. <img :src="i.icon" alt="" />
  18. <div>{{ i.label }}</div>
  19. </div>
  20. </div>
  21. <!-- 右侧内容 -->
  22. <div :class="['videoImgRCX', ifExpand ? 'rightZkCX' : 'rightSqCX']" @click="ifExpand = !ifExpand"></div>
  23. <div :class="['preContentRight', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
  24. <div class="selectTitle">
  25. <div class="name" style="font-size: 17px">
  26. {{ currentYear }}年度完成{{
  27. activeIndex == 1 ? '规划审批' : activeIndex == 2 ? '设计审查' : activeIndex == 3 ? '竣工验收' : ''
  28. }}落实海绵管控指标项目
  29. </div>
  30. </div>
  31. <div class="planCont" v-loading="loadingGH">
  32. <div :class="['flex', activeIndex == 1 ? 'activePlan' : '']" @click="changeProject(1)">
  33. <p class="title">落实海绵项目指标项目数</p>
  34. <el-progress
  35. :text-inside="true"
  36. :stroke-width="20"
  37. :percentage="(ghgkObj.implementIndicatorsProjectNum / ghgkObj.permitsProjectNum) * 100"
  38. status="success"
  39. >
  40. <span class="name">{{ ghgkObj.implementIndicatorsProjectNum }}</span>
  41. </el-progress>
  42. <p class="title">完成规划审批项目数 {{ ghgkObj.permitsProjectNum }}个</p>
  43. </div>
  44. <div :class="['flex', activeIndex == 2 ? 'activePlan' : '']" @click="changeProject(2)">
  45. <p class="title">落实设计审查要求项目数</p>
  46. <el-progress
  47. :text-inside="true"
  48. :stroke-width="20"
  49. :percentage="(ghgkObj.designStandardNum / ghgkObj.completionAcceptanceNum) * 100"
  50. status="success"
  51. >
  52. <span class="name">{{ ghgkObj.designStandardNum }}</span>
  53. </el-progress>
  54. <p class="title">完成设计审查项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
  55. </div>
  56. <div :class="['flex', activeIndex == 3 ? 'activePlan' : '']" @click="changeProject(3)">
  57. <p class="title">通过竣工验收项目数</p>
  58. <el-progress
  59. :text-inside="true"
  60. :stroke-width="20"
  61. :percentage="(ghgkObj.inGoodConditionNum / ghgkObj.completionAcceptanceNum) * 100"
  62. status="success"
  63. >
  64. <span class="name">{{ ghgkObj.inGoodConditionNum }}</span>
  65. </el-progress>
  66. <p class="title">申报竣工验收项目数 {{ ghgkObj.completionAcceptanceNum }}个</p>
  67. </div>
  68. </div>
  69.  
  70. <div class="selectTitle">
  71. <div class="name">
  72. {{ currentYear }}年度{{
  73. activeIndex == 1 ? '规划审批' : activeIndex == 2 ? '设计审查' : activeIndex == 3 ? '竣工验收' : ''
  74. }}项目信息
  75. </div>
  76. </div>
  77. <el-table ref="tableArea" :data="tableData" height="550" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
  78. <el-table-column label="序号" type="index" width="55" />
  79. <el-table-column label="项目名称" prop="projectName" />
  80. <el-table-column label="建设单位" prop="chargeDepartment" />
  81. <el-table-column label="申报年份" prop="year" width="80" />
  82. <el-table-column label="指标达成情况" prop="achievementTarget" width="160" />
  83. </el-table>
  84. </div>
  85. <!-- 详情 -->
  86. <el-dialog v-model="dialogShow" :title="dialogTitle" width="900px" append-to-body>
  87. <Operate1 v-if="activeIndex == 1" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate1>
  88. <Operate2 v-if="activeIndex == 2" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate2>
  89. <Operate3 v-if="activeIndex == 3" :cur-row="curRow" :opts="opts" :types="projectTypes"></Operate3>
  90. </el-dialog>
  91. </div>
  92. </template>
  93. <script setup>
  94. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  95. import bus from '@/bus';
  96. import Operate1 from '@/views/project/processControl/planPermission/operate.vue'; //规划许可详情
  97. import Operate2 from '@/views/project/processControl/constructionPermits/operate.vue'; //施工许可详情
  98. import Operate3 from '@/views/project/processControl/completionAcceptance/operate.vue'; //竣工验收详情
  99. import { projectTypeList } from '@/api/project/projectInformationNew';
  100. import { projectManageImplement } from '@/api/longTerm/index.js';
  101.  
  102. const { proxy } = getCurrentInstance();
  103. const loadingGH = ref(true);
  104. const ghgkObj = ref({}); //规划管控落实情况
  105. const currentYear = ref();
  106. const yearList = ref([]);
  107. const ifExpand = ref(true);
  108. // const tableData = ref([
  109. // { name: '开封市疾病预防控制中心实验楼项目', year: '2024', val: 45, id: 1 },
  110. // { name: '市妇幼保健院东院城区', year: '2024', val: 35, id: 2 },
  111. // ]);
  112. const tableData = ref([]);
  113. const tableLoading = ref(false);
  114. const tableArea = ref(null);
  115. const activeIndex = ref(1);
  116. const dialogShow = ref(false);
  117. const dialogTitle = ref('');
  118. const curRow = ref({ id: '' });
  119. const opts = ref({ type: 'views' });
  120. const projectTypes = ref([]);
  121. const timer = ref(null);
  122. let tuliList = ref([
  123. { label: '未落实海绵指标项目', id: 0, icon: '/images/1.1.jpg' },
  124. { label: '落实海绵指标项目', id: 1, icon: '/images/1.2.jpg' },
  125. ]);
  126. // 获取项目类型
  127. const getProjectTypeList = async () => {
  128. const res = await projectTypeList({ status: '0' });
  129. if (res?.code !== 200) return;
  130. projectTypes.value = res?.data || [];
  131. };
  132.  
  133. // 年份设置,从2021开始到当前年份
  134. function setYear() {
  135. yearList.value = [];
  136. let year = new Date().getFullYear();
  137. currentYear.value = year;
  138. for (let i = 2021; i <= year; i++) {
  139. yearList.value.push(i);
  140. }
  141. }
  142. // 获取规划管控制度落实情况
  143. function getGhgk() {
  144. loadingGH.value = true;
  145. projectManageImplement({ year: currentYear.value }).then(res => {
  146. ghgkObj.value = res.data;
  147. console.log(ghgkObj.value, ' ghgkObj.value');
  148. tableData.value = ghgkObj.value.implementIndicatorsProjectList;
  149. loadingGH.value = false;
  150. changeProject(1);
  151. });
  152. }
  153.  
  154. /**
  155. * 规划管控落实制度点击
  156. * @param {*}val 1 规划许可,2 施工许可,3 竣工验收
  157. */
  158. function changeProject(val) {
  159. activeIndex.value = val;
  160. if (val == 1) {
  161. tableData.value = ghgkObj.value.implementIndicatorsProjectList;
  162. dialogTitle.value = '项目落实规划管控指标详情';
  163. // gis地图渲染
  164. ghgkObj.value.implementIndicatorsProjectList &&
  165. ghgkObj.value.implementIndicatorsProjectList.map(item => {
  166. item.type = item.implementIndicators == 1 ? 'success_zishui' : 'error_zishui';
  167. });
  168. intiMapData(ghgkObj.value.implementIndicatorsProjectList);
  169. } else if (val == 2) {
  170. tableData.value = ghgkObj.value.designStandardList;
  171. dialogTitle.value = '项目落实设计审查要求详情';
  172. // gis地图渲染
  173. ghgkObj.value.designStandardList.map(item => {
  174. item.type = item.isDesignStandard == 1 ? 'success_zishui' : 'error_zishui';
  175. });
  176. intiMapData(ghgkObj.value.designStandardList);
  177. } else {
  178. tableData.value = ghgkObj.value.inGoodConditionList;
  179. dialogTitle.value = '项目竣工验收申请详情';
  180. // gis地图渲染
  181. ghgkObj.value.inGoodConditionList.map(item => {
  182. item.type = item.isDesignStandard == 1 ? 'success_zishui' : 'error_zishui';
  183. });
  184. intiMapData(ghgkObj.value.inGoodConditionList);
  185. }
  186. }
  187.  
  188. // 表格项目点击在地图定位
  189. function checkProject(row) {
  190. console.log(row);
  191. }
  192.  
  193. // intiMapData(datas);
  194. function intiMapData(data) {
  195. let keys = ['error_zishui', 'success_zishui'];
  196. newfiberMapbox.popupService.popups.forEach((popup, index) => {
  197. nextTick(() => {
  198. newfiberMapbox.removePopup(popup);
  199. });
  200. });
  201. if (newfiberMapbox.map.getLayer('projectPoint')) {
  202. newfiberMapbox.map.removeLayer('projectPoint');
  203. newfiberMapbox.map.removeLayer('projectPointlabel');
  204. newfiberMapbox.map.removeSource('projectPoint');
  205. }
  206. //keys.forEach(key => {
  207. let geojson1 = turf.featureCollection(
  208. data.map(item =>
  209. turf.point(item.projectLocation.split(',').map(Number), {
  210. ...item,
  211. name: `${item.projectName}\n项目编号 ${item.projectNo}`,
  212. color: item.implementIndicators == 1 ? '#d9001b' : '#70b603',
  213. })
  214. )
  215. );
  216. addWaterloggingLayer(geojson1, 'projectPoint');
  217. }
  218. //地图渲染点位
  219. const addWaterloggingLayer = (geojson, layerName) => {
  220. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  221. !!!newfiberMapbox.map.getLayer(layerName) &&
  222. newfiberMapbox.map.addLayer({
  223. id: layerName,
  224. type: 'circle',
  225. source: layerName,
  226. paint: {
  227. 'circle-color': ['get', 'color'],
  228. 'circle-radius': 7,
  229. },
  230. });
  231. !newfiberMapbox.map.getLayer(layerName + 'label') &&
  232. newfiberMapbox.map.addLayer({
  233. id: layerName + 'label',
  234. type: 'symbol',
  235. source: layerName,
  236. layout: {
  237. 'text-field': ['get', 'projectName'],
  238. 'text-font': ['KlokanTech Noto Sans Regular'],
  239. 'text-size': 16,
  240. 'text-offset': [0, -2],
  241. },
  242. paint: {
  243. 'text-color': '#d1dbe5',
  244. },
  245. });
  246. };
  247.  
  248. // // 地图点击事件
  249. // function clickGisMap(lngLat, params) {
  250. // console.log(lngLat, params);
  251. // if (params.id) curRow.value = params;
  252. // dialogShow.value = true;
  253. // }
  254.  
  255. onMounted(() => {
  256. setYear(); //设置年份
  257. getGhgk(); //获取规划管控数据
  258. getProjectTypeList(); // 获取项目类型
  259. setTimeout(() => {
  260. newfiberMapbox.map.on('click', e => {
  261. let clickfeature = newfiberMapbox.map
  262. .queryRenderedFeatures([
  263. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  264. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  265. ])
  266. .filter(i => i.layer.id == 'projectPoint');
  267. console.log('clickfeature', '点击事件', clickfeature);
  268. });
  269. }, 5000);
  270. });
  271. onBeforeUnmount(() => {
  272. if (!!!newfiberMapbox) return;
  273. !!newfiberMapbox.map.getLayer('projectPoint') && newfiberMapbox.map.removeLayer('projectPoint');
  274. !!newfiberMapbox.map.getLayer('projectPointlabel') && newfiberMapbox.map.removeLayer('projectPointlabel');
  275. !!newfiberMapbox.map.getSource('projectPoint') && newfiberMapbox.map.removeSource('projectPoint');
  276. if (timer.value) {
  277. clearInterval(timer.value);
  278. }
  279. });
  280. </script>
  281. <style lang="scss">
  282. @import '@/assets/styles/variables.module.scss';
  283. .planControlCX {
  284. width: 100%;
  285. height: 100%;
  286. position: relative;
  287. .imgTL {
  288. position: absolute;
  289. z-index: 99;
  290. left: 30px;
  291. bottom: 20px;
  292. }
  293. .preContentRight {
  294. width: 500px;
  295. height: calc(100vh - 100px);
  296. border: 1px solid #1d8db4;
  297. background: $mainBg;
  298. border-radius: 8px;
  299. position: absolute;
  300. top: 20px;
  301. right: 20px;
  302. z-index: 90;
  303. padding: 15px;
  304. overflow: auto;
  305. .chartHeight {
  306. width: 100%;
  307. height: 260px;
  308. }
  309. .el-table__body tr {
  310. cursor: pointer;
  311. }
  312. .planCont {
  313. margin: 20px auto;
  314. .flex {
  315. margin-bottom: 20px;
  316. }
  317. }
  318. }
  319. .tuli {
  320. left: 20px;
  321. bottom: 30px;
  322. padding: 10px;
  323. z-index: 111;
  324. position: absolute;
  325. background: $mainColor1;
  326. // display: flex;
  327. flex-wrap: wrap;
  328. align-items: center;
  329. text-align: center;
  330. color: #fff;
  331. .tuli_img {
  332. display: flex;
  333. width: 180px;
  334. align-items: center;
  335. margin-top: 8px;
  336. img {
  337. margin-right: 10px;
  338. width: 25px;
  339. }
  340. }
  341. }
  342. }
  343. .l7-popup-tip {
  344. display: none;
  345. }
  346. .l7-popup .l7-popup-content {
  347. padding: 0px;
  348. background: rgba(3, 59, 79, 0);
  349. }
  350. .l7-popup .l7-popup-content .l7-popup-close-button {
  351. display: none;
  352. }
  353. </style>