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