Newer
Older
KaiFengPC / src / views / spongePerformance / longTerm / permeableGroundAreaCX.vue
@鲁yixuan 鲁yixuan on 5 Sep 8 KB updata
  1. <template>
  2. <!-- 长效考核-可渗透水地面面积 -->
  3. <div class="pergroundCX">
  4. <!-- gis地图 -->
  5. <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>
  6.  
  7. <!-- <img src="@/assets/images/longTerm/kssdm.png" class="imgTL" /> -->
  8. <!-- 右侧内容 -->
  9. <div :class="['videoImgRCX', ifExpand ? 'rightZkCX' : 'rightSqCX']" @click="ifExpand = !ifExpand"></div>
  10. <div :class="['preContentRight', 'animate__animated', ifExpand ? 'animate__bounceInRight' : 'animate__bounceOutRight']">
  11. <div class="selectTitle">
  12. <div class="name">年度可渗透地面变化情况</div>
  13. <!-- <el-select v-model="currentYear" @change="changeMonitorYear" style="width: 100px" size="small">
  14. <el-option label="2023年" value="2023"></el-option>
  15. <el-option label="2024年" value="2024"></el-option>
  16. <el-option label="2025年" value="2025"></el-option>
  17. </el-select> -->
  18. <div class="titleEnd">建成区面积:{{ areaData }}公顷</div>
  19. </div>
  20. <div id="chartAreaST" class="chartHeight"></div>
  21.  
  22. <div class="selectTitle">
  23. <div class="name">年度项目可渗透地面面积比情况</div>
  24. </div>
  25. <el-table ref="tableArea" :data="tableData" height="500" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
  26. <el-table-column label="项目名称" prop="projectName" />
  27. <el-table-column label="完工年度" prop="year" width="80" />
  28. <el-table-column label="可渗透面积比(%)" prop="permeableFloorAreaPercent" width="130" />
  29. </el-table>
  30. </div>
  31. </div>
  32. </template>
  33. <script setup>
  34. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  35. import bus from '@/bus';
  36. import optionChart from './chartOption.js';
  37. import { getConfigKey } from '@/api/system/config'; //获取参数值
  38. import { permeableFloorAreaChart } from '@/api/longTerm/index.js';
  39.  
  40. const { proxy } = getCurrentInstance();
  41. const ifExpand = ref(true);
  42. const chartKst = shallowRef(null);
  43. const tableData = ref([]);
  44. const tableLoading = ref(false);
  45. const tableArea = ref(null);
  46. const areaData = ref('');
  47. const timerTS = ref(null);
  48. const dataLists = ref([]);
  49. // const currentYear = ref('2024');
  50. // 可渗透地面变化echarts
  51. function kstChart() {
  52. //先销毁实例
  53. chartKst.value && chartKst.value.dispose();
  54. chartKst.value = proxy.echarts.init(document.getElementById('chartAreaST'));
  55. permeableFloorAreaChart().then(res => {
  56. let datas = res.data;
  57. optionChart.option1.xAxis.data = datas.years;
  58. optionChart.option1.series[0].data = datas.permeableFloorAreaTotals;
  59. optionChart.option1.series[1].data = datas.permeableFloorAreaPercents;
  60. dataLists.value = datas.projectCompletionAcceptanceList;
  61. if (datas.years.length == 0) {
  62. optionChart.option1.graphic.invisible = false; // 暂无数据
  63. } else {
  64. optionChart.option1.graphic.invisible = true; // 暂无数据
  65. }
  66. chartKst.value.clear();
  67. chartKst.value.setOption(optionChart.option1);
  68. // 默认加载第一个年份的表格数据
  69. tableData.value = datas.projectCompletionAcceptanceList[0];
  70. // gis地图渲染
  71. tableData.value &&
  72. tableData.value.map(item => {
  73. item.type = 'error_zishui';
  74. });
  75. intiMapDataPoint(tableData.value);
  76. barChartClick(); //柱状图点击事件
  77. });
  78. }
  79. // 可渗透地面变化echarts柱状图点击事件
  80. function barChartClick() {
  81. chartKst.value.getZr().setCursorStyle('pointer'); //设置鼠标移入手形
  82. chartKst.value.off('click'); //防止触发两次点击事件
  83. // 柱状图点击
  84. chartKst.value.getZr().on('click', params => {
  85. let pointInPixel = [params.offsetX, params.offsetY];
  86. if (chartKst.value.containPixel('grid', pointInPixel)) {
  87. let pointInGrid = chartKst.value.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
  88. let xIndex = pointInGrid[0]; //索引
  89. let handleIndex = Number(xIndex);
  90. if (handleIndex == -0) handleIndex = 0;
  91. console.log(handleIndex);
  92. // gis地图渲染
  93. let dataArr = dataLists.value[handleIndex];
  94. dataArr &&
  95. dataArr.map(item => {
  96. item.type = 'error_zishui';
  97. });
  98. tableData.value = dataArr;
  99. intiMapDataPoint(dataArr);
  100. }
  101. });
  102. }
  103. // 表格项目点击在地图定位
  104. function checkProject(row) {
  105. let lonlat = row.projectLocation.split(',');
  106. newfiberMapbox.map.easeTo({
  107. center: [Number(lonlat[0]), Number(lonlat[1])],
  108. });
  109. }
  110.  
  111. // 获取建成区面积
  112. function getAreaData() {
  113. getConfigKey('jcq_area').then(res => {
  114. areaData.value = res.data || '0';
  115. });
  116. }
  117.  
  118. //自适应
  119. function resizeTheChart() {
  120. chartKst.value.resize();
  121. }
  122.  
  123. // 地图渲染点位
  124. function intiMapDataPoint(data) {
  125. newfiberMapbox.popupService.popups.forEach((popup, index) => {
  126. nextTick(() => {
  127. newfiberMapbox.removePopup(popup);
  128. });
  129. });
  130. let geojson1 = turf.featureCollection(
  131. data.map(item =>
  132. turf.point(item.projectLocation.split(','), {
  133. ...item,
  134. projectName: `${item.projectName}`,
  135. permeableFloorArea: `${item.permeableFloorArea} k㎡`,
  136. permeableFloorAreaPercent: `${item.permeableFloorAreaPercent} %`,
  137. color: '#d9001b',
  138. })
  139. )
  140. );
  141. let key = 'error_zishui';
  142. // bus.emit('getGeojsonByType', {
  143. // type: 'error_zishui',
  144. // callback: geojson => {
  145. // setTimeout(() => {
  146. // bus.emit('removeMapDatas', ['error_zishui']);
  147. // if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
  148. // bus.emit('setLayerVisible', { layername: key, isCheck: true });
  149. // }, 2000);
  150. // },
  151. // });
  152. addWaterloggingLayer(geojson1, 'waterLoging');
  153. geojson1.features.forEach(feature => {
  154. console.log(feature.properties, 99999);
  155. let popupClass;
  156. !!feature.properties.isFlood ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
  157. !!feature.properties.isFlood ? (feature.properties.isFlood = '0') : (feature.properties.isFlood = '1');
  158. return newfiberMapbox.addPopup(
  159. new mapboxL7.Popup({
  160. title: '',
  161. html: `
  162. <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>
  163. <div class='part'>可渗透地面面积:${feature.properties.permeableFloorArea}</div>
  164. <div class='part'>可渗透地面面积比例:${feature.properties.permeableFloorAreaPercent}</div>
  165. </div>`,
  166. lngLat: {
  167. lng: feature.geometry.coordinates[0],
  168. lat: feature.geometry.coordinates[1],
  169. },
  170. anchor: 'center',
  171. offsets: [20, 60],
  172. autoClose: false,
  173. })
  174. );
  175. });
  176. }
  177. //地图渲染内涝点
  178. const addWaterloggingLayer = (geojson, layerName) => {
  179. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  180. !!!newfiberMapbox.map.getLayer(layerName) &&
  181. newfiberMapbox.map.addLayer({
  182. id: layerName,
  183. type: 'circle',
  184. source: layerName,
  185. paint: {
  186. 'circle-color': ['get', 'color'],
  187. 'circle-radius': 7,
  188. },
  189. });
  190. };
  191. onMounted(() => {
  192. kstChart();
  193. window.addEventListener('resize', resizeTheChart);
  194. getAreaData();
  195. setTimeout(() => {
  196. newfiberMapbox.map.on('click', e => {
  197. let clickfeature = newfiberMapbox.map
  198. .queryRenderedFeatures([
  199. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  200. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  201. ])
  202. .filter(i => i.layer.id == 'waterLoging');
  203. console.log('clickfeature', '点击事件', clickfeature);
  204. });
  205. }, 5000);
  206. });
  207. onBeforeUnmount(() => {
  208. if (!!!newfiberMapbox) return;
  209. !!newfiberMapbox.map.getLayer('waterLoging') && newfiberMapbox.map.removeLayer('waterLoging');
  210. !!newfiberMapbox.map.getSource('waterLoging') && newfiberMapbox.map.removeSource('waterLoging');
  211. newfiberMapbox.popupService.popups.forEach(popup => {
  212. nextTick(() => {
  213. newfiberMapbox.removePopup(popup);
  214. });
  215. });
  216. if (timerTS.value) {
  217. clearInterval(timerTS.value);
  218. }
  219. });
  220. </script>
  221. <style lang="scss">
  222. @import '@/assets/styles/variables.module.scss';
  223. .l7-popup-tip {
  224. display: none;
  225. }
  226. .l7-popup .l7-popup-content {
  227. padding: 0px;
  228. background: #033b4f;
  229. }
  230. .l7-popup .l7-popup-content .l7-popup-close-button {
  231. display: none;
  232. }
  233. .pergroundCX {
  234. width: 100%;
  235. height: 100%;
  236. position: relative;
  237. .imgTL {
  238. position: absolute;
  239. z-index: 99;
  240. left: 30px;
  241. bottom: 20px;
  242. }
  243. .preContentRight {
  244. width: 500px;
  245. height: calc(100vh - 100px);
  246. border: 1px solid #1d8db4;
  247. background: $mainBg;
  248. border-radius: 8px;
  249. position: absolute;
  250. top: 20px;
  251. right: 20px;
  252. z-index: 90;
  253. padding: 15px;
  254. overflow: auto;
  255. .chartHeight {
  256. width: 100%;
  257. height: 260px;
  258. }
  259. .el-table__body tr {
  260. cursor: pointer;
  261. }
  262. }
  263. }
  264. </style>