Newer
Older
KaiFengPC / src / views / spongePerformance / waterUtilizationRate / surfaceWater / todoDon.vue
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. <template>
  2. <!-- 地表水体考核年度统计表 -->
  3. <div class="dbsWaterCount">
  4. <el-table :data="tableData" max-height="500" ref="tableRef" v-loading="tableLoading" @row-click="clickTableRow" highlight-current-row>
  5. <el-table-column label="年度" prop="examineYear" />
  6. <el-table-column label="未达标水体数/个" prop="unRemoveNum" />
  7. <el-table-column label="考核水体数/个" prop="totalNum" />
  8. <el-table-column label="达标率%" prop="actualPercent">
  9. <template #default="{ row }">
  10. <span style="color: lime">
  11. {{ row.actualPercent }}
  12. </span>
  13. </template>
  14. </el-table-column>
  15. <el-table-column label="目标达标率%" prop="targetPercent" />
  16. <el-table-column label="达标情况" prop="reachStandard">
  17. <template #default="scope">
  18. <span
  19. :style="{
  20. color: scope.row.reachStandard == 0 ? 'red' : 'lime',
  21. }"
  22. >
  23. <el-tag v-if="scope.row.reachStandard === ''" type="warning">未评价</el-tag>
  24. <el-tag v-else :type="scope.row.reachStandard == 0 ? 'error' : scope.row.reachStandard == 1 ? 'success' : ''">
  25. {{ scope.row.reachStandard == 0 ? '不达标' : '达标' }}
  26. </el-tag>
  27. </span>
  28. </template>
  29. </el-table-column>
  30. <el-table-column label="水体检测记录">
  31. <template #default="{ row }">
  32. <el-button link type="primary" icon="View" @click="onCheck(row)">查看</el-button>
  33. </template>
  34. </el-table-column>
  35. </el-table>
  36. </div>
  37. </template>
  38. <script setup>
  39. import { defineEmits, onBeforeUnmount } from 'vue';
  40. import { preventionInfo } from '@/api/spongePerformance/prevention';
  41. import bus from '@/bus';
  42.  
  43. const { proxy } = getCurrentInstance();
  44. const tableData = ref([]);
  45. const tableLoading = ref(true);
  46. const tableRef = ref(null);
  47. const emits = defineEmits();
  48.  
  49. //获取列表数据
  50. const getDataList = async () => {
  51. let params = {
  52. examineType: 'water_quality',
  53. };
  54. const res = await preventionInfo(params);
  55. if (res && res.code == 200) {
  56. tableLoading.value = false;
  57. tableData.value = res.data;
  58. if (Boolean(tableData.value.length)) {
  59. tableData.value.forEach(item => {
  60. if (item.waterQualitySampleInfos) {
  61. item.waterQualitySampleInfos.forEach(element => {
  62. element.examineYear = item.examineYear;
  63. });
  64. }
  65. });
  66. }
  67. tableRef.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
  68. clickTableRow(tableData.value[0]); //默认渲染第一行gis地图
  69. }
  70. };
  71. //查看点击事件
  72. const onCheck = row => {
  73. emits('searchClick', { ...row, type: 1 });
  74. };
  75. // 表格点击,查看对应的项目情况
  76. function clickTableRow(row) {
  77. // console.log(row);
  78. row.waterQualitySampleInfos &&
  79. row.waterQualitySampleInfos.map(item => {
  80. if (row.reachStandard == 0) {
  81. item.type = 'error_zishui'; //未消除
  82. } else {
  83. item.type = 'success_zishui'; //已消除
  84. }
  85. });
  86. gisMapInit(row.waterQualitySampleInfos);
  87. }
  88.  
  89. // gis地图渲染
  90. function gisMapInit(data) {
  91. // console.log('gis地图渲染数据--', data);
  92. if (!!!data) return;
  93. let keys = ['error_zishui', 'success_zishui'];
  94. newfiberMapbox.popupService.popups.forEach(popup => {
  95. nextTick(() => {
  96. newfiberMapbox.removePopup(popup);
  97. });
  98. });
  99. if (newfiberMapbox.map.getLayer('surfaceWater')) {
  100. newfiberMapbox.map.removeLayer('surfaceWater');
  101. newfiberMapbox.map.removeSource('surfaceWater');
  102. }
  103. keys.forEach(key => {
  104. let coverflowFeature = [];
  105. let selectData = data.filter(i => i.type == key);
  106. selectData.forEach(item => {
  107. if (!!!item.riverInfo.lonLat) {
  108. return;
  109. } else {
  110. let coverflowPoint = turf.point(item.riverInfo.lonLat.split(',').map(Number), {
  111. ...item,
  112. riverName: `${item.riverName}`,
  113. reachStandard: `${item.reachStandard == 1 ? '达标' : '不达标'}`,
  114. waterQualityName: `${item.waterQualityName}`,
  115. color: item.reachStandard == 1 ? '#70b603' : '#d9001b',
  116. });
  117. coverflowFeature.push(coverflowPoint);
  118. }
  119. });
  120. let geojson1 = turf.featureCollection(coverflowFeature);
  121. addWaterloggingLayer(geojson1, 'surfaceWater');
  122. // bus.emit('getGeojsonByType', {
  123. // type: key,
  124. // callback: geojson => {
  125. // setTimeout(() => {
  126. // bus.emit('removeMapDatas', [key]);
  127. // if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: geojson1, key });
  128. // bus.emit('setLayerVisible', { layername: key, isCheck: true });
  129. // }, 2000);
  130. // },
  131. // });
  132. geojson1.features.forEach(feature => {
  133. return newfiberMapbox.addPopup(
  134. new mapboxL7.Popup({
  135. title: '',
  136.  
  137. html: `
  138. <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.riverName}</div>
  139. <div class='part'>水质类别:${feature.properties.waterQualityName}</div>
  140. <div class='part'>是否达标:${feature.properties.reachStandard}</div>
  141. </div>`,
  142. lngLat: {
  143. lng: feature.geometry.coordinates[0],
  144. lat: feature.geometry.coordinates[1],
  145. },
  146. anchor: 'center',
  147. offsets: [0, 90],
  148. autoClose: false,
  149. })
  150. );
  151. });
  152. });
  153. newfiberMapbox.map.on('click', 'surfaceWater', e => {
  154. let clickfeature = newfiberMapbox.map
  155. .queryRenderedFeatures([
  156. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  157. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  158. ])
  159. .filter(i => i.layer.id == 'surfaceWater');
  160. console.log('clickfeature', '点击事件', clickfeature);
  161. emits('clicksurfaceWater', clickfeature[0].properties);
  162. });
  163. }
  164. //地图渲染点位
  165. const addWaterloggingLayer = (geojson, layerName) => {
  166. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  167. !!!newfiberMapbox.map.getLayer(layerName) &&
  168. newfiberMapbox.map.addLayer({
  169. id: layerName,
  170. type: 'circle',
  171. source: layerName,
  172. paint: {
  173. 'circle-color': ['get', 'color'],
  174. 'circle-radius': 7,
  175. },
  176. });
  177. };
  178. onMounted(() => {
  179. getDataList();
  180. });
  181. onBeforeUnmount(() => {
  182. if (!newfiberMapbox) return;
  183. newfiberMapbox.popupService.popups.forEach(popup => {
  184. nextTick(() => {
  185. if (!newfiberMapbox) return;
  186. newfiberMapbox.removePopup(popup);
  187. });
  188. });
  189. if (newfiberMapbox.map.getLayer('surfaceWater')) {
  190. newfiberMapbox.map.removeLayer('surfaceWater');
  191. newfiberMapbox.map.removeSource('surfaceWater');
  192. }
  193. });
  194. </script>
  195. <style lang="scss" scoped>
  196. .dbsWaterCount {
  197. margin-top: 20px;
  198. }
  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. .l7-popup .l7-popup-content .l7-popup-close-button {
  211. display: none !important;
  212. }
  213. .surfaceWatermaps #mapboxContainer {
  214. display: none !important;
  215. }
  216. .mapPage #mapboxContainer {
  217. display: none !important;
  218. }
  219. .successPopup {
  220. border-radius: 8px;
  221. background-color: rgba(129, 211, 248, 0.5);
  222. border: 2px solid #81d3f8;
  223. padding: 5px;
  224. }
  225. .titles {
  226. font-size: 16px;
  227. padding: 10px;
  228. }
  229. </style>