Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / index_1.vue
@zhangdeliang zhangdeliang on 23 May 11 KB 初始化项目
  1. <template>
  2. <!-- 排水防涝子系统 一张图 -->
  3. <div class="publicContainer">
  4. <gisMap2D :initJson="`/static/libs/mapbox/style/syntheticDataMain.json`" @map-click="mapClick"></gisMap2D>
  5. <commonLegendNew></commonLegendNew>
  6. <commonPopup></commonPopup>
  7. <commonPopupRain></commonPopupRain>
  8. <commonPopupZS></commonPopupZS>
  9. <commonPopupSupervise></commonPopupSupervise>
  10. <commonPopupDM></commonPopupDM>
  11. <commonPopupRiver></commonPopupRiver>
  12. <waterLeverAlongRiner></waterLeverAlongRiner>
  13. <commonPopupPK></commonPopupPK>
  14. <centerSearch></centerSearch>
  15. <tabSelect></tabSelect>
  16. <tabContent></tabContent>
  17. </div>
  18. <!-- 管网基础信息弹窗 -->
  19. <div id="pipeInfo" v-show="pipePopupShow">
  20. <div class="title">
  21. <div class="infoTitle">{{ pipeData.startPointNumber }}-{{ pipeData.endPointNumber }}</div>
  22. <div class="closePopup">
  23. <el-icon :size="18" @click="closePopup">
  24. <Close />
  25. </el-icon>
  26. </div>
  27. </div>
  28. <div class="dividerLine"></div>
  29. <el-space>
  30. <div class="infoContent">
  31. <div class="infoName">管网类型:</div>
  32. <div class="infoData">
  33. {{
  34. pipeData.pipelineType == 'Rain'
  35. ? '雨水'
  36. : pipeData.pipelineType == 'Sewage'
  37. ? '污水'
  38. : pipeData.pipelineType == 'Combined'
  39. ? '雨污合流'
  40. : '--'
  41. }}
  42. </div>
  43. </div>
  44. <div class="infoContent">
  45. <div class="infoName">管网等级:</div>
  46. <div class="infoData">{{ pipeData.pipelineLevel }}</div>
  47. </div>
  48. </el-space>
  49. <el-space>
  50. <div class="infoContent">
  51. <div class="infoName">断面尺寸:</div>
  52. <div class="infoData">{{ pipeData.sectionType }}</div>
  53. </div>
  54. <div class="infoContent">
  55. <div class="infoName">所属道路:</div>
  56. <div class="infoData">{{ pipeData.roadName }}</div>
  57. </div>
  58. </el-space>
  59. <el-space>
  60. <div class="infoContent">
  61. <div class="infoName">起点编号:</div>
  62. <div class="infoData">{{ pipeData.startPointNumber }}</div>
  63. </div>
  64. <div class="infoContent">
  65. <div class="infoName">终点编号:</div>
  66. <div class="infoData">{{ pipeData.endPointNumber }}</div>
  67. </div>
  68. </el-space>
  69. <el-space>
  70. <div class="infoContent">
  71. <div class="infoName">起点高程:</div>
  72. <div class="infoData">{{ pipeData.startCopNoseElevation }}</div>
  73. </div>
  74. <div class="infoContent">
  75. <div class="infoName">终点高程:</div>
  76. <div class="infoData">{{ pipeData.endCopNoseElevation }}</div>
  77. </div>
  78. </el-space>
  79. <el-space>
  80. <div class="infoContent">
  81. <div class="infoName">起点埋深</div>
  82. <div class="infoData">{{ pipeData.startGroundDepth }}</div>
  83. </div>
  84. <div class="infoContent">
  85. <div class="infoName">终点埋深</div>
  86. <div class="infoData">{{ pipeData.endGroundDepth }}</div>
  87. </div>
  88. </el-space>
  89. <div class="infoContent">
  90. <div class="infoName">管网材质:</div>
  91. <div class="infoData">{{ pipeData.pipelineTexture }}</div>
  92. </div>
  93. </div>
  94. <!-- 管井基础信息弹窗 -->
  95. <div id="pointInfo" v-show="pointPopupShow">
  96. <div class="title">
  97. <div class="infoTitle">{{ pointData.pointNumber }}</div>
  98. <div class="closePopup">
  99. <el-icon :size="18" @click="closePointPopup">
  100. <Close />
  101. </el-icon>
  102. </div>
  103. </div>
  104. <div class="dividerLine"></div>
  105. <el-space>
  106. <div class="infoContent">
  107. <div class="infoName">管井类型:</div>
  108. <div class="infoData">
  109. <dict-tag :options="point_type" :value="pointData.pointType" />
  110. </div>
  111. </div>
  112. <div class="infoContent">
  113. <div class="infoName">管井等级:</div>
  114. <div class="infoData">{{ pointData.pointLevel }}</div>
  115. </div>
  116. </el-space>
  117. <el-space>
  118. <div class="infoContent">
  119. <div class="infoName">所属道路:</div>
  120. <div class="infoData">{{ pointData.roadName }}</div>
  121. </div>
  122. <div class="infoContent">
  123. <div class="infoName">地面高程:</div>
  124. <div class="infoData">{{ pointData.groundElevation }}</div>
  125. </div>
  126. </el-space>
  127. <div class="infoContent">
  128. <div class="infoName">管网材质:</div>
  129. <div class="infoData">{{ pointData.pointTexture }}</div>
  130. </div>
  131. </div>
  132. </template>
  133.  
  134. <script setup name="page">
  135. import gisMap2D from '../../gisMapPage/gisMapBox1.vue';
  136. import commonLegendNew from '../../gisMapPage/commonLegendDataMain.vue';
  137. import tabSelect from './tabSelect.vue';
  138. import tabContent from './tabContent.vue';
  139. import centerSearch from './centerSearch.vue'; //头部播放云图
  140. import commonPopup from './commonPopup.vue'; //厂站弹窗
  141. import commonPopupRain from './commonPopupRain.vue'; //雨量站弹窗
  142. import commonPopupZS from './commonPopupZS.vue'; //积水点弹窗
  143. import commonPopupSupervise from './commonPopupSupervise.vue'; //监测点弹窗
  144. import commonPopupDM from './commonPopupDM.vue'; //断面监测点弹窗
  145. import waterLeverAlongRiner from './waterLeverAlongRiner.vue'; //沿河水位
  146. import commonPopupRiver from './commonPopupRiver.vue'; //河湖监测弹窗
  147. import commonPopupPK from './commonPopupPK.vue'; //排口监测点弹窗
  148. import bus from '@/bus';
  149. import { pagepipelineInfo } from '@/api/drainagePipeline/pipelineInfo';
  150. import { pagepipelinePoint } from '@/api/drainagePipeline/pipelinePoint';
  151.  
  152. const { proxy } = getCurrentInstance();
  153. const pipeData = ref({});
  154. const pointData = ref({});
  155. const pipePopupShow = ref(false);
  156. const pointPopupShow = ref(false);
  157. const { point_type } = proxy.useDict('point_type');
  158.  
  159. const mapClick = (point, properties) => {
  160. console.log('point', point);
  161. console.log('properties', properties);
  162. let featureKey = properties.type;
  163. let data = properties;
  164. if (
  165. properties.type == 'pipeSupervise' ||
  166. properties.type == 'rainStation' ||
  167. properties.type == 'riverLake' ||
  168. properties.type == 'PKsupervise' ||
  169. properties.type == 'waterlog' ||
  170. properties.type == 'orinign' ||
  171. properties.type == 'pipeSupervise_1' ||
  172. properties.type == 'rainStation_1' ||
  173. properties.type == 'riverLake_1' ||
  174. properties.type == 'PKsupervise_1' ||
  175. properties.type == 'waterlog_1' ||
  176. properties.type == 'orinign_1'
  177. ) {
  178. !!properties.onlineStatus && properties.onlineStatus == 'online'
  179. ? (properties.onlineStatus = '在线')
  180. : (properties.onlineStatus = '离线');
  181. properties.lon = properties.lonLat.split(',')[0];
  182. properties.lat = properties.lonLat.split(',')[1];
  183. let popupData = {
  184. popupInfo: properties,
  185. popupShow: true,
  186. };
  187.  
  188. newfiberMapbox.map.easeTo({
  189. center: [Number(properties.lonLat.split(',')[0]) + 0.0045, Number(properties.lonLat.split(',')[1]) + 0.004],
  190. zoom: 15,
  191. });
  192. let closeCommonPopup = false;
  193. bus.emit('closeCommonPopup', closeCommonPopup);
  194. properties.type == 'rainStation'
  195. ? bus.emit('popupRainData', popupData)
  196. : properties.type == 'riverLake'
  197. ? bus.emit('popupRiverData', popupData)
  198. : properties.type == 'PKsupervise'
  199. ? bus.emit('popupPKData', popupData)
  200. : properties.type == 'waterlog'
  201. ? bus.emit('popupZSData', popupData)
  202. : properties.type == 'rainStation_1'
  203. ? bus.emit('popupRainData', popupData)
  204. : properties.type == 'riverLake_1'
  205. ? bus.emit('popupRiverData', popupData)
  206. : properties.type == 'PKsupervise_1'
  207. ? bus.emit('popupPKData', popupData)
  208. : properties.type == 'waterlog_1'
  209. ? bus.emit('popupZSData', popupData)
  210. : bus.emit('popupSuperviseData', popupData);
  211. } else if (
  212. featureKey == 'YSBZ' ||
  213. featureKey == 'WSBZ' ||
  214. featureKey == 'WSCLC' ||
  215. featureKey == 'paiKou' ||
  216. featureKey == 'drainOutlet'
  217. ) {
  218. let popupData = {
  219. popupInfo: data,
  220. popupShow: true,
  221. };
  222. if (featureKey == 'paiKou') {
  223. data.lon = Number(data.originalX);
  224. data.lat = Number(data.originalY);
  225. } else if (featureKey == 'drainOutlet') {
  226. if (data.pointNumber == '天仙路溢流口') {
  227. data.lon = Number(data.originalX);
  228. data.lat = Number(data.originalY);
  229. } else {
  230. data.lon = Number(data.originalX);
  231. data.lat = Number(data.originalY);
  232. }
  233. }
  234. bus.emit('popupData', popupData);
  235. let popupDiv = document.getElementById('psPopup');
  236. window.stationPopup = new mapboxL7.Popup({
  237. html: popupDiv,
  238. lngLat: {
  239. lng: data.lon,
  240. lat: data.lat,
  241. },
  242. anchor: 'center',
  243. offsets: [-150, 200],
  244. autoClose: false,
  245. });
  246. newfiberMapbox.addPopup(stationPopup);
  247. newfiberMapbox.map.easeTo({
  248. center: [Number(data.lon) + 0.005, Number(data.lat)],
  249. zoom: 15,
  250. });
  251. }
  252. if (!!data['起点点号'] && !!data['终点点号'] && data.geometry.includes('MULTILINESTRING')) {
  253. let startPoint = data['起点点号'];
  254. let endPoint = data['终点点号'];
  255. getPipeDataInfo(startPoint, endPoint);
  256. } else if (!!data['设施编码'] && data.geometry.includes('POINT')) {
  257. let pointNumber = data['设施编码'].split('-')[0];
  258. getPipePointInfo(pointNumber);
  259. let pipePointPopupDiv = document.getElementById('pointInfo');
  260. window.pipePointPopup = new mapboxL7.Popup({
  261. html: pipePointPopupDiv,
  262. lngLat: {
  263. lng: point[0],
  264. lat: point[1],
  265. },
  266. anchor: 'center',
  267. offsets: [-50, 120],
  268. autoClose: false,
  269. });
  270. newfiberMapbox.addPopup(pipePointPopup);
  271. newfiberMapbox.map.easeTo({
  272. center: [point[0] + 0.0005, point[1]],
  273. zoom: 18,
  274. });
  275. }
  276. };
  277. let getPipeDataInfo = async (startPoint, endPoint) => {
  278. let params = {
  279. startPointNumber: startPoint,
  280. endPointNumber: endPoint,
  281. pageNum: 1,
  282. pageSize: 1,
  283. };
  284. let res = await pagepipelineInfo(params);
  285. if (res && res.code == 200) {
  286. pipeData.value = res.data[0];
  287. let pipeCenter = turf.center(Terraformer.WKT.parse(pipeData.value.geometrys)).geometry.coordinates;
  288. let pipePopupDiv = document.getElementById('pipeInfo');
  289. window.window.pipePopup = new mapboxL7.Popup({
  290. html: pipePopupDiv,
  291. lngLat: {
  292. lng: pipeCenter[0],
  293. lat: pipeCenter[1],
  294. },
  295. anchor: 'center',
  296. offsets: [0, 100],
  297. autoClose: false,
  298. });
  299. newfiberMapbox.addPopup(pipePopup);
  300. newfiberMapbox.map.easeTo({
  301. center: [pipeCenter[0] + 0.0005, pipeCenter[1]],
  302. zoom: 18,
  303. });
  304. pipePopupShow.value = true;
  305. }
  306. };
  307. let getPipePointInfo = async pointNumber => {
  308. let params = {
  309. pointNumber: pointNumber,
  310. pageNum: 1,
  311. pageSize: 1,
  312. };
  313. let res = await pagepipelinePoint(params);
  314. if (res && res.code == 200) {
  315. pointData.value = res.data[0];
  316. pointPopupShow.value = true;
  317. }
  318. };
  319. //关闭弹窗
  320. const closePopup = () => {
  321. pipePopupShow.value = false;
  322. };
  323. const closePointPopup = () => {
  324. pointPopupShow.value = false;
  325. };
  326. onMounted(() => {});
  327. onBeforeUnmount(() => {
  328. bus.off('popupSuperviseData');
  329. bus.off('popupJCGJData');
  330. bus.off('popupPKData');
  331. bus.off('popupRiverData');
  332. bus.off('popupZSData');
  333. bus.off('popupRainData');
  334. bus.off('popupData');
  335. bus.off('closeCommonPopup');
  336. });
  337. </script>
  338. <style lang="scss">
  339. .page {
  340. width: 100%;
  341. }
  342. .l7-popup-tip {
  343. display: none;
  344. }
  345. .l7-popup .l7-popup-content {
  346. padding: 0px;
  347. background: none;
  348. }
  349. .l7-popup .l7-popup-content .l7-popup-close-button {
  350. display: none;
  351. }
  352. </style>