Newer
Older
KaiFengPC / src / views / spongePerformance / waterlogging / waterloggedArea / jctable.vue
@zhangdeliang zhangdeliang on 23 May 6 KB 初始化项目
  1. <template>
  2. <!-- 监测法 -->
  3. <div class="water-analysis-page">
  4. <el-table
  5. :key="isFlag"
  6. :data="tableData"
  7. max-height="500"
  8. v-loading="tableLoading"
  9. @row-click="clickModal"
  10. highlight-current-row
  11. ref="tableModal"
  12. >
  13. <el-table-column type="index" width="55" label="序号" />
  14. <el-table-column :label="i.value" :prop="i.key" show-overflow-tooltip v-for="i in cloums">
  15. <template #default="{ row }" v-if="i.key == 'isStandard'">
  16. <el-tag round :type="row.isStandard === '' ? 'warning' : row.isStandard === '1' ? 'success' : 'error'">
  17. {{ row.isStandard === '' ? '未填报' : row.isStandard === '1' ? '达标' : '未达标' }}
  18. </el-tag>
  19. </template>
  20. </el-table-column>
  21. </el-table>
  22. </div>
  23. </template>
  24. <script setup>
  25. import { waterLoggingCleanMonitor } from '@/api/spongePerformance/prevention';
  26. const { proxy } = getCurrentInstance();
  27. import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js';
  28. import bus from '@/utils/mitt';
  29. let isFlag = ref(1);
  30. const cloums = ref([
  31. { value: '考核年份', key: 'year' },
  32. { value: '消除个数', key: 'noFloodWaterLoggingPointNum' },
  33. { value: '总数', key: 'waterLoggingPointNum' },
  34. { value: '消除比例%', key: 'noFloodPercent' },
  35. { value: '目标%', key: 'targetPercent' },
  36. { value: '达标情况', key: 'isStandard' },
  37. ]);
  38. const { params } = defineProps(['params']);
  39. const emits = defineEmits();
  40. const tableModal = ref(null);
  41. const floodPointList = ref([]);
  42. const waterLoggingData = ref([]);
  43. const waterLoggingDataByType = ref([]);
  44.  
  45. //动态组件
  46. let dataForm = reactive({
  47. tableData: '',
  48. tableDateTwo: '',
  49. tableLoading: true,
  50. });
  51. let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
  52. //获取列表数据
  53. //搜索
  54. const search = p => {
  55. dynamic_page_data_typeM(p);
  56. isFlag.value++;
  57. };
  58. defineExpose({ search });
  59.  
  60. //删除
  61. const dynamic_page_data_typeM = async id => {
  62. let { data } = await waterLoggingCleanMonitor(id);
  63. tableData.value = data;
  64. tableModal.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
  65. tableLoading.value = false;
  66. addWaterLoggingByType(tableData.value[0].floodPointList);
  67. };
  68. //地图添加消除与未消除内涝点
  69. const addWaterLoggingByType = data => {
  70. let success_zishuiDate = [];
  71. let error_zishuiDate = [];
  72. if (data.length) {
  73. data.map(item => {
  74. item.color = '#d9001b';
  75. item.isClear = false;
  76. });
  77. error_zishuiDate = data;
  78. waterLoggingData.value.forEach(element => {
  79. data.forEach(item => {
  80. if (item.name != element.name) {
  81. success_zishuiDate.push(element);
  82. }
  83. });
  84. });
  85. waterLoggingDataByType.value = success_zishuiDate.concat(error_zishuiDate);
  86. } else waterLoggingDataByType.value = waterLoggingData.value;
  87. let waterLogjson = getWaterloggingGeojson(waterLoggingDataByType.value);
  88. if (!newfiberMapbox.map.getLayer('waterLoging')) {
  89. addWaterloggingLayer(waterLogjson, 'waterLoging');
  90. } else {
  91. newfiberMapbox.map.getSource('waterLoging').setData(waterLogjson);
  92. }
  93. addwaterlogingPopup(waterLogjson);
  94. };
  95. // 监测法表格点击
  96. function clickModal(row) {
  97. floodPointList.value = row.floodPointList;
  98. // gis渲染点位
  99. addWaterLoggingByType(floodPointList.value);
  100. }
  101. //获取25个内涝点
  102. const getWaterlogging = async () => {
  103. let res = await waterloggingPointList();
  104. if (res && res.code == 200) {
  105. waterLoggingData.value = res.data;
  106. waterLoggingData.value.forEach(element => {
  107. element.color = '#70b603';
  108. element.isClear = true;
  109. });
  110. }
  111. };
  112. //内涝点geojson
  113. const getWaterloggingGeojson = data => {
  114. let features = [];
  115. data.forEach(element => {
  116. let feature = {
  117. type: 'Feature',
  118. geometry: {
  119. type: 'Point',
  120. coordinates: [Number(element.longitude), Number(element.latitude)],
  121. },
  122. properties: element,
  123. };
  124. features.push(feature);
  125. });
  126. return {
  127. type: 'FeatureCollection',
  128. features: features,
  129. };
  130. };
  131. //地图渲染内涝点
  132. const addWaterloggingLayer = (geojson, layerName) => {
  133. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  134. !!!newfiberMapbox.map.getLayer(layerName) &&
  135. newfiberMapbox.map.addLayer({
  136. id: layerName,
  137. type: 'circle',
  138. source: layerName,
  139. paint: {
  140. 'circle-color': ['get', 'color'],
  141. 'circle-radius': 7,
  142. },
  143. });
  144. };
  145. //添加弹窗
  146. const addwaterlogingPopup = geojson => {
  147. newfiberMapbox.popupService.popups.forEach(popup => {
  148. nextTick(() => {
  149. newfiberMapbox.removePopup(popup);
  150. });
  151. });
  152. geojson.features.forEach(feature => {
  153. let popupClass;
  154. let htmlText;
  155. !!feature.properties.isClear ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
  156. !!feature.properties.isClear
  157. ? (htmlText = `
  158. <div class=${popupClass}><div class='title'>${feature.properties.name}</div>
  159. <div class='part'>积水最大时长:${feature.properties.yearMaxHour}h</div>
  160. <div class='part'>最大积水深度:${feature.properties.yearMaxDepth}m</div>
  161. </div>`)
  162. : (htmlText = `
  163. <div class=${popupClass}><div class='title'>${feature.properties.name}</div>
  164. <div class='part'>积水最大时长:${feature.properties.yearMaxHour}h</div>
  165. <div class='part'>最大积水深度:${feature.properties.yearMaxDepth}m</div>
  166. </div>`);
  167. return newfiberMapbox.addPopup(
  168. new mapboxL7.Popup({
  169. title: '',
  170. html: htmlText,
  171. lngLat: {
  172. lng: feature.geometry.coordinates[0],
  173. lat: feature.geometry.coordinates[1],
  174. },
  175. anchor: 'center',
  176. offsets: [0, 60],
  177. autoClose: false,
  178. })
  179. );
  180. });
  181. };
  182. onMounted(() => {
  183. dynamic_page_data_typeM(params);
  184. getWaterlogging();
  185. newfiberMapbox.map.off('click');
  186. newfiberMapbox.map.on('click', e => {
  187. let clickfeature = newfiberMapbox.map
  188. .queryRenderedFeatures([
  189. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  190. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  191. ])
  192. .filter(i => i.layer.id == 'waterLoging');
  193. // console.log('clickfeature', '点击事件', clickfeature[0].properties.isFlood);
  194. bus.emit('waterLoginclickfeature', clickfeature[0].properties);
  195. });
  196. });
  197. onBeforeUnmount(() => {
  198. // console.log('newfiberMapbox', newfiberMapbox);
  199. if (!!!newfiberMapbox) return;
  200. !!newfiberMapbox.map.getLayer('waterLoging') && newfiberMapbox.map.removeLayer('waterLoging');
  201. !!newfiberMapbox.map.getSource('waterLoging') && newfiberMapbox.map.removeSource('waterLoging');
  202. newfiberMapbox.popupService.popups.forEach(popup => {
  203. nextTick(() => {
  204. newfiberMapbox.removePopup(popup);
  205. });
  206. });
  207. });
  208. </script>
  209. <style lang="scss" scoped></style>