Newer
Older
KaiFengPC / src / views / spongePerformance / longTerm / rainwaterResourceCX.vue
@zhangdeliang zhangdeliang on 23 May 8 KB update
  1. <template>
  2. <!-- 长效考核-雨水资源利用 -->
  3. <div class="rainWaterCX">
  4. <!-- gis地图 -->
  5. <MapBox :initJson="`/static/libs/mapbox/style/preventionSFQ.json`" l7=""></MapBox>
  6.  
  7. <!-- <img src="@/assets/images/longTerm/yszy.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>
  19. <div id="chartRainST" class="chartHeight"></div>
  20.  
  21. <div class="selectTitle">
  22. <div class="name">年度项目雨水资源利用量情况</div>
  23. </div>
  24. <el-table ref="tableArea" :data="tableData" height="500" v-loading="tableLoading" @row-click="checkProject" highlight-current-row>
  25. <el-table-column label="项目名称" prop="projectName" />
  26. <el-table-column label="完工年度" prop="year" width="80" />
  27. <el-table-column label="雨水资源利用量(t)" prop="rainwaterUtilization" width="130" />
  28. </el-table>
  29. </div>
  30. </div>
  31. </template>
  32. <script setup>
  33. import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
  34. import { rainwaterUtilizationChart } from '@/api/longTerm/index.js';
  35. import optionChart from './chartOption.js';
  36. import bus from '@/bus';
  37. const { proxy } = getCurrentInstance();
  38. const ifExpand = ref(true);
  39. const chartKst = shallowRef(null);
  40. const tableData = ref([
  41. { name: '开封市疾病预防控制中心实验楼项目', year: '2024', val: 45, id: 1 },
  42. { name: '市妇幼保健院东院城区', year: '2024', val: 35, id: 2 },
  43. ]);
  44. const tableLoading = ref(false);
  45. const tableArea = ref(null);
  46. const dataLists = ref([]);
  47. // const currentYear = ref('2024');
  48. // 可渗透地面变化echarts
  49. function kstChart() {
  50. //先销毁实例
  51. chartKst.value && chartKst.value.dispose();
  52. chartKst.value = proxy.echarts.init(document.getElementById('chartRainST'));
  53. rainwaterUtilizationChart().then(res => {
  54. let datas = res.data;
  55. let charts = JSON.parse(JSON.stringify(optionChart.option3));
  56. charts.graphic.invisible = true; // 暂无数据
  57. charts.yAxis.name = 't';
  58. charts.series[0].name = '雨水资源利用量';
  59. charts.series[0].data = datas.rainwaterUtilizationTotals;
  60. dataLists.value = datas.projectCompletionAcceptanceList;
  61. charts.xAxis.data = datas.years;
  62. if (datas.years.length == 0) {
  63. charts.graphic.invisible = false; // 暂无数据
  64. } else {
  65. charts.graphic.invisible = true; // 暂无数据
  66. }
  67. chartKst.value.clear();
  68. chartKst.value.setOption(charts);
  69. // 默认加载第一个年份的表格数据
  70. tableData.value = datas.projectCompletionAcceptanceList[0];
  71. // gis地图渲染
  72. tableData.value &&
  73. tableData.value.map(item => {
  74. item.type = 'error_zishui';
  75. });
  76. intiMapDataPoint(tableData.value);
  77. barChartClick(); //柱状图点击事件
  78. });
  79. }
  80.  
  81. // 可渗透地面变化echarts柱状图点击事件
  82. function barChartClick() {
  83. chartKst.value.getZr().setCursorStyle('pointer'); //设置鼠标移入手形
  84. chartKst.value.off('click'); //防止触发两次点击事件
  85. // 柱状图点击
  86. chartKst.value.getZr().on('click', params => {
  87. let pointInPixel = [params.offsetX, params.offsetY];
  88. if (chartKst.value.containPixel('grid', pointInPixel)) {
  89. let pointInGrid = chartKst.value.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
  90. let xIndex = pointInGrid[0]; //索引
  91. let handleIndex = Number(xIndex);
  92. if (handleIndex == -0) handleIndex = 0;
  93. console.log(handleIndex);
  94. // gis地图渲染
  95. let dataArr = dataLists.value[handleIndex];
  96. dataArr &&
  97. dataArr.map(item => {
  98. item.type = 'error_zishui';
  99. });
  100. tableData.value = dataArr;
  101. intiMapDataPoint(dataArr);
  102. }
  103. });
  104. }
  105.  
  106. // 表格项目点击在地图定位
  107. function checkProject(row) {
  108. // console.log(row);
  109. let lonlat = row.projectLocation.split(',');
  110. newfiberMapbox.map.easeTo({
  111. center: [Number(lonlat[0]), Number(lonlat[1])],
  112. });
  113. }
  114.  
  115. //自适应
  116. function resizeTheChart() {
  117. chartKst.value.resize();
  118. }
  119.  
  120. // 地图渲染点位
  121. function intiMapDataPoint(data) {
  122. newfiberMapbox.popupService.popups.forEach((popup, index) => {
  123. nextTick(() => {
  124. newfiberMapbox.removePopup(popup);
  125. });
  126. });
  127. if (newfiberMapbox.map.getLayer('rainwater')) {
  128. newfiberMapbox.map.removeLayer('rainwater');
  129. newfiberMapbox.map.removeSource('rainwater');
  130. }
  131. let geojson1 = turf.featureCollection(
  132. data.map(item =>
  133. turf.point(item.projectLocation.split(','), {
  134. ...item,
  135. projectName: `${item.projectName}`,
  136. rainwaterUtilization: `${item.rainwaterUtilization} t`,
  137. color: '#d9001b',
  138. })
  139. )
  140. );
  141. addWaterloggingLayer(geojson1, 'rainwater');
  142. let key = 'error_zishui';
  143. // bus.emit('getGeojsonByType', {
  144. // type: 'error_zishui',
  145. // callback: geojson => {
  146. // setTimeout(() => {
  147. // bus.emit('removeMapDatas', ['error_zishui']);
  148. // if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
  149. // bus.emit('setLayerVisible', { layername: key, isCheck: true });
  150. // }, 2000);
  151. // },
  152. // });
  153. geojson1.features.forEach(feature => {
  154. return newfiberMapbox.addPopup(
  155. new mapboxL7.Popup({
  156. title: '',
  157. html: `
  158. <div class='popupMapPoint successPopup' style="background:rgba(129, 211, 248, 0.5); border: 2px solid #81d3f8;" ><div class='titles' style=" padding-left:10px">${feature.properties.projectName}</div>
  159. <div class='part'>雨水资源利用量:${feature.properties.rainwaterUtilization}</div>
  160. </div>`,
  161. lngLat: {
  162. lng: feature.geometry.coordinates[0],
  163. lat: feature.geometry.coordinates[1],
  164. },
  165. anchor: 'center',
  166. offsets: [20, 60],
  167. autoClose: false,
  168. })
  169. );
  170. });
  171. }
  172. //地图渲染点位
  173. const addWaterloggingLayer = (geojson, layerName) => {
  174. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  175. !!!newfiberMapbox.map.getLayer(layerName) &&
  176. newfiberMapbox.map.addLayer({
  177. id: layerName,
  178. type: 'circle',
  179. source: layerName,
  180. paint: {
  181. 'circle-color': ['get', 'color'],
  182. 'circle-radius': 7,
  183. },
  184. });
  185. };
  186. onMounted(() => {
  187. kstChart();
  188. tableArea.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
  189. window.addEventListener('resize', resizeTheChart);
  190. });
  191. onBeforeUnmount(() => {
  192. if (!!!newfiberMapbox) return;
  193. !!newfiberMapbox.map.getLayer('rainwater') && newfiberMapbox.map.removeLayer('rainwater');
  194. !!newfiberMapbox.map.getSource('rainwater') && newfiberMapbox.map.removeSource('rainwater');
  195. });
  196. </script>
  197. <style lang="scss" scoped>
  198. @import '@/assets/styles/variables.module.scss';
  199. .l7-popup-tip {
  200. display: none !important;
  201. }
  202. .l7-popup .l7-popup-content {
  203. padding: 0px;
  204. background: rgba(3, 59, 79, 0) !important;
  205. }
  206. .l7-popup-content {
  207. padding: 0px;
  208. background: rgba(3, 59, 79, 0) !important;
  209. }
  210.  
  211. .successPopup {
  212. border-radius: 8px;
  213. background-color: rgba(129, 211, 248, 0.5);
  214. border: 2px solid #81d3f8;
  215. padding: 5px;
  216. }
  217. .titles {
  218. font-size: 16px;
  219. padding: 10px;
  220. }
  221. .rainWaterCX {
  222. width: 100%;
  223. height: 100%;
  224. position: relative;
  225. .imgTL {
  226. position: absolute;
  227. z-index: 99;
  228. left: 30px;
  229. bottom: 20px;
  230. }
  231. .preContentRight {
  232. width: 500px;
  233. height: calc(100vh - 100px);
  234. border: 1px solid #1d8db4;
  235. background: $mainBg;
  236. border-radius: 8px;
  237. position: absolute;
  238. top: 20px;
  239. right: 20px;
  240. z-index: 90;
  241. padding: 15px;
  242. overflow: auto;
  243. .chartHeight {
  244. width: 100%;
  245. height: 260px;
  246. }
  247. .el-table__body tr {
  248. cursor: pointer;
  249. }
  250. }
  251. }
  252. </style>