Newer
Older
KaiFengPC / src / views / spongePerformance / waterlogging / waterloggedArea / module.vue
@zhangdeliang zhangdeliang on 23 May 7 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="tableModalGC"
  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-column label="操作" width="120">
  22. <template #default="{ row }">
  23. <el-button link type="primary" icon="View" @click="onCheck(row)">详情</el-button>
  24. </template>
  25. </el-table-column>
  26. </el-table>
  27. </div>
  28. </template>
  29. <script setup>
  30. import { waterLoggingCleanProject } from '@/api/spongePerformance/prevention';
  31. const { proxy } = getCurrentInstance();
  32. import { nextTick, reactive } from 'vue';
  33. import { waterloggingPointList } from '@/api/sponeScreen/syntherticData.js';
  34.  
  35. let isFlag = ref(1);
  36. const cloums = ref([
  37. { value: '考核年份', key: 'year' },
  38. { value: '消除个数', key: 'noFloodWaterLoggingPointNum' },
  39. { value: '总数', key: 'waterLoggingPointNum' },
  40. { value: '消除比例%', key: 'noFloodPercent' },
  41. { value: '目标%', key: 'targetPercent' },
  42. { value: '达标情况', key: 'isStandard' },
  43. ]);
  44.  
  45. const { params } = defineProps(['params']);
  46. const emits = defineEmits();
  47. const tableModalGC = ref(null);
  48. const floodPointList = ref([]);
  49. const waterLoggingData = ref([]);
  50. const waterLoggingDataByType = ref([]);
  51. //动态组件
  52. let dataForm = reactive({
  53. tableData: '',
  54. tableDateTwo: '',
  55. tableLoading: true,
  56. });
  57. let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
  58. //获取列表数据
  59. //搜索
  60. const search = p => {
  61. dynamic_page_data_typeM(p);
  62. isFlag.value++;
  63. };
  64. defineExpose({ search });
  65. // 查看上报数据
  66. const onCheck = (row, ty, t) => {
  67. console.log('row', row, waterLoggingData.value);
  68. emits('searchClick', {
  69. data: row,
  70. type: 1,
  71. list: waterLoggingData.value,
  72. });
  73. };
  74. const dynamic_page_data_typeM = async id => {
  75. let res = await waterLoggingCleanProject(id);
  76. if (res && res.code == 200) {
  77. tableData.value = res.data;
  78. tableModalGC.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
  79. tableLoading.value = false;
  80. console.log('tableData.value', tableData.value);
  81. addWaterLoggingByType(tableData.value[0].floodPointList);
  82. }
  83. };
  84. //地图添加消除与未消除内涝点
  85. const addWaterLoggingByType = data => {
  86. let success_zishuiDate = [];
  87. let error_zishuiDate = [];
  88. if (data.length) {
  89. data.map(item => {
  90. item.color = '#d9001b';
  91. item.isClear = false;
  92. });
  93. error_zishuiDate = data;
  94. waterLoggingData.value.forEach(element => {
  95. data.forEach(item => {
  96. if (item.name != element.name) {
  97. success_zishuiDate.push(element);
  98. }
  99. });
  100. });
  101. waterLoggingDataByType.value = success_zishuiDate.concat(error_zishuiDate);
  102. } else waterLoggingDataByType.value = waterLoggingData.value;
  103. let waterLogjson = getWaterloggingGeojson(waterLoggingDataByType.value);
  104. if (!newfiberMapbox.map.getLayer('waterLoging')) {
  105. addWaterloggingLayer(waterLogjson, 'waterLoging');
  106. } else {
  107. newfiberMapbox.map.getSource('waterLoging').setData(waterLogjson);
  108. }
  109. addwaterlogingPopup(waterLogjson);
  110. };
  111. // 工程法表格点击
  112. function clickModal(row) {
  113. floodPointList.value = row.floodPointList;
  114. // gis渲染点位
  115. addWaterLoggingByType(floodPointList.value);
  116. }
  117. //获取25个内涝点
  118. const getWaterlogging = async () => {
  119. let res = await waterloggingPointList();
  120. if (res && res.code == 200) {
  121. waterLoggingData.value = res.data;
  122. waterLoggingData.value.forEach(element => {
  123. element.color = '#70b603';
  124. element.isClear = true;
  125. });
  126. }
  127. };
  128. //内涝点geojson
  129. const getWaterloggingGeojson = data => {
  130. let features = [];
  131. data.forEach(element => {
  132. let feature = {
  133. type: 'Feature',
  134. geometry: {
  135. type: 'Point',
  136. coordinates: [Number(element.longitude), Number(element.latitude)],
  137. },
  138. properties: element,
  139. };
  140. features.push(feature);
  141. });
  142. return {
  143. type: 'FeatureCollection',
  144. features: features,
  145. };
  146. };
  147. //地图渲染内涝点
  148. const addWaterloggingLayer = (geojson, layerName) => {
  149. !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  150. !!!newfiberMapbox.map.getLayer(layerName) &&
  151. newfiberMapbox.map.addLayer({
  152. id: layerName,
  153. type: 'circle',
  154. source: layerName,
  155. paint: {
  156. 'circle-color': ['get', 'color'],
  157. 'circle-radius': 7,
  158. },
  159. });
  160. };
  161. //添加弹窗
  162. const addwaterlogingPopup = geojson => {
  163. newfiberMapbox.popupService.popups.forEach(popup => {
  164. nextTick(() => {
  165. newfiberMapbox.removePopup(popup);
  166. });
  167. });
  168. geojson.features.forEach(feature => {
  169. let popupClass;
  170. !!feature.properties.isClear ? (popupClass = 'successPopup') : (popupClass = 'errorPopup');
  171. !!feature.properties.isClear ? (feature.properties.isClear = '已消除') : (feature.properties.isClear = '未消除');
  172. return newfiberMapbox.addPopup(
  173. new mapboxL7.Popup({
  174. title: '',
  175. html: `
  176. <div class=${popupClass}><div class='title'>${feature.properties.name}</div>
  177. <div class='part'>${feature.properties.isClear}</div>
  178. </div>`,
  179. lngLat: {
  180. lng: feature.geometry.coordinates[0],
  181. lat: feature.geometry.coordinates[1],
  182. },
  183. anchor: 'center',
  184. offsets: [0, 60],
  185. autoClose: false,
  186. })
  187. );
  188. });
  189. };
  190. onMounted(() => {
  191. dynamic_page_data_typeM(params);
  192. getWaterlogging();
  193. setTimeout(() => {
  194. newfiberMapbox.map.on('click', e => {
  195. let clickfeature = newfiberMapbox.map
  196. .queryRenderedFeatures([
  197. [e.point.x - 10 / 2, e.point.y - 10 / 2],
  198. [e.point.x + 10 / 2, e.point.y + 10 / 2],
  199. ])
  200. .filter(i => i.layer.id == 'waterLoging');
  201. console.log('clickfeature', '点击事件', clickfeature);
  202. });
  203. }, 5000);
  204. });
  205. onBeforeUnmount(() => {
  206. if (!!!newfiberMapbox) return;
  207. !!newfiberMapbox.map.getLayer('waterLoging') && newfiberMapbox.map.removeLayer('waterLoging');
  208. !!newfiberMapbox.map.getSource('waterLoging') && newfiberMapbox.map.removeSource('waterLoging');
  209. newfiberMapbox.popupService.popups.forEach(popup => {
  210. nextTick(() => {
  211. newfiberMapbox.removePopup(popup);
  212. });
  213. });
  214. });
  215. </script>
  216. <style lang="scss">
  217. .l7-popup-tip {
  218. display: none;
  219. }
  220. .l7-popup .l7-popup-content {
  221. padding: 0px;
  222. background: #033b4f;
  223. border-radius: 8px;
  224. }
  225. .l7-popup .l7-popup-content .l7-popup-close-button {
  226. display: none;
  227. }
  228. .errorPopup {
  229. border-radius: 8px;
  230. background-color: rgba(247, 189, 15, 0.5);
  231. border: 2px solid #f7bd0f;
  232. padding: 5px;
  233. color: #000;
  234. }
  235. .successPopup {
  236. border-radius: 8px;
  237. background-color: rgba(129, 211, 248, 0.5);
  238. border: 2px solid #81d3f8;
  239. padding: 5px;
  240. }
  241. .title {
  242. font-size: 16px;
  243. }
  244. </style>