Newer
Older
KaiFengPC / src / views / floodSys / floodOneMap / index.vue
@鲁yixuan 鲁yixuan on 29 Aug 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. const { proxy } = getCurrentInstance();
  199. const pipeData = ref({});
  200. const pointData = ref({});
  201. const pipePopupShow = ref(false);
  202. const pointPopupShow = ref(false);
  203. const { point_type } = proxy.useDict('point_type');
  204.  
  205. const GechangeTableContent2 = ref(1);
  206.  
  207. const mapClick = (point, properties) => {
  208. console.log('point', point);
  209. console.log('properties', properties);
  210. let featureKey = properties.type;
  211. let data = properties;
  212. if (
  213. properties.type == 'pipeSupervise' ||
  214. properties.type == 'rainStation' ||
  215. properties.type == 'riverLake' ||
  216. properties.type == 'PKsupervise' ||
  217. properties.type == 'waterlog' ||
  218. properties.type == 'orinign' ||
  219. properties.type == 'pipeSupervise_1' ||
  220. properties.type == 'rainStation_1' ||
  221. properties.type == 'riverLake_1' ||
  222. properties.type == 'PKsupervise_1' ||
  223. properties.type == 'waterlog_1' ||
  224. properties.type == 'orinign_1'
  225. ) {
  226. !!properties.onlineStatus && properties.onlineStatus == 'online'
  227. ? (properties.onlineStatus = '在线')
  228. : (properties.onlineStatus = '离线');
  229. properties.lon = properties.lonLat.split(',')[0];
  230. properties.lat = properties.lonLat.split(',')[1];
  231. let popupData = {
  232. popupInfo: properties,
  233. popupShow: true,
  234. };
  235.  
  236. newfiberMapbox.map.easeTo({
  237. center: [Number(properties.lonLat.split(',')[0]), Number(properties.lonLat.split(',')[1]) + 0.004025],
  238. zoom: 15,
  239. });
  240. let closeCommonPopup = false;
  241. bus.emit('closeCommonPopup', closeCommonPopup);
  242. properties.type == 'rainStation'
  243. ? bus.emit('popupRainData', popupData)
  244. : properties.type == 'riverLake'
  245. ? bus.emit('popupRiverData', popupData)
  246. : properties.type == 'PKsupervise'
  247. ? bus.emit('popupPKData', popupData)
  248. : properties.type == 'waterlog'
  249. ? bus.emit('popupZSData', popupData)
  250. : properties.type == 'rainStation_1'
  251. ? bus.emit('popupRainData', popupData)
  252. : properties.type == 'riverLake_1'
  253. ? bus.emit('popupRiverData', popupData)
  254. : properties.type == 'PKsupervise_1'
  255. ? bus.emit('popupPKData', popupData)
  256. : properties.type == 'waterlog_1'
  257. ? bus.emit('popupZSData', popupData)
  258. : bus.emit('popupSuperviseData', popupData);
  259. } else if (
  260. featureKey == 'YSBZ' ||
  261. featureKey == 'WSBZ' ||
  262. featureKey == 'WSCLC' ||
  263. featureKey == 'paiKou' ||
  264. featureKey == 'drainOutlet' ||
  265. featureKey == 'YSBZ_1' ||
  266. featureKey == 'WSBZ_1' ||
  267. featureKey == 'WSCLC_1' ||
  268. featureKey == 'paiKou_1' ||
  269. featureKey == 'drainOutlet_1' ||
  270. featureKey == 'PLBZ_1' ||
  271. featureKey == 'PLBZ'
  272. ) {
  273. let popupData = {
  274. popupInfo: data,
  275. popupShow: true,
  276. };
  277. if (featureKey == 'paiKou' || featureKey == 'paiKou_1') {
  278. data.lon = Number(data.originalX);
  279. data.lat = Number(data.originalY);
  280. } else if (featureKey == 'drainOutlet' || featureKey == 'drainOutlet_1') {
  281. if (data.pointNumber == '天仙路溢流口') {
  282. data.lon = Number(data.originalX);
  283. data.lat = Number(data.originalY);
  284. } else {
  285. data.lon = Number(data.originalX);
  286. data.lat = Number(data.originalY);
  287. }
  288. }
  289. bus.emit('popupData', popupData);
  290. let popupDiv = document.getElementById('psPopup');
  291. window.stationPopup = new mapboxL7.Popup({
  292. html: popupDiv,
  293. lngLat: {
  294. lng: data.lon,
  295. lat: data.lat,
  296. },
  297. anchor: 'center',
  298. offsets: [-120, 200],
  299. autoClose: false,
  300. });
  301. newfiberMapbox.addPopup(stationPopup);
  302. newfiberMapbox.map.easeTo({
  303. center: [Number(data.lon), Number(data.lat)],
  304. zoom: 15,
  305. });
  306. }
  307. if (!!data['起点点号'] && !!data['终点点号'] && data.geometry.includes('MULTILINESTRING')) {
  308. let startPoint = data['起点点号'];
  309. let endPoint = data['终点点号'];
  310. getPipeDataInfo(startPoint, endPoint);
  311. } else if (!!data['设施编码'] && data.geometry.includes('POINT')) {
  312. let pointNumber = data['设施编码'].split('-')[0];
  313. getPipePointInfo(pointNumber);
  314. let pipePointPopupDiv = document.getElementById('pointInfo');
  315. window.pipePointPopup = new mapboxL7.Popup({
  316. html: pipePointPopupDiv,
  317. lngLat: {
  318. lng: point[0],
  319. lat: point[1],
  320. },
  321. anchor: 'center',
  322. offsets: [-50, 120],
  323. autoClose: false,
  324. });
  325. newfiberMapbox.addPopup(pipePointPopup);
  326. newfiberMapbox.map.easeTo({
  327. center: [point[0] + 0.0005, point[1]],
  328. zoom: 17,
  329. });
  330. }
  331. };
  332. let getPipeDataInfo = async (startPoint, endPoint) => {
  333. let params = {
  334. startPointNumber: startPoint,
  335. endPointNumber: endPoint,
  336. pageNum: 1,
  337. pageSize: 1,
  338. };
  339. let res = await pagepipelineInfo(params);
  340. if (res && res.code == 200) {
  341. pipeData.value = res.data[0];
  342. let pipeCenter = turf.center(Terraformer.WKT.parse(pipeData.value.geometrys)).geometry.coordinates;
  343. let pipePopupDiv = document.getElementById('pipeInfo');
  344. window.window.pipePopup = new mapboxL7.Popup({
  345. html: pipePopupDiv,
  346. lngLat: {
  347. lng: pipeCenter[0],
  348. lat: pipeCenter[1],
  349. },
  350. anchor: 'center',
  351. offsets: [0, 100],
  352. autoClose: false,
  353. });
  354. newfiberMapbox.addPopup(pipePopup);
  355. newfiberMapbox.map.easeTo({
  356. center: [pipeCenter[0] + 0.0005, pipeCenter[1]],
  357. zoom: 17,
  358. });
  359. pipePopupShow.value = true;
  360. }
  361. };
  362. let getPipePointInfo = async pointNumber => {
  363. let params = {
  364. pointNumber: pointNumber,
  365. pageNum: 1,
  366. pageSize: 1,
  367. };
  368. let res = await pagepipelinePoint(params);
  369. if (res && res.code == 200) {
  370. pointData.value = res.data[0];
  371. pointPopupShow.value = true;
  372. }
  373. };
  374. //取消弹窗
  375. const closePopup = () => {
  376. pipePopupShow.value = false;
  377. };
  378. const closePointPopup = () => {
  379. pointPopupShow.value = false;
  380. };
  381. onMounted(() => {
  382. bus.on('closePipeInfo', () => {
  383. closePopup();
  384. closePointPopup();
  385. });
  386. bus.on('changeTableContent2', val => {
  387. console.log('changeTableContent2', val);
  388. GechangeTableContent2.value = val;
  389. });
  390. });
  391. onBeforeUnmount(() => {
  392. bus.off('popupSuperviseData');
  393. bus.off('popupJCGJData');
  394. bus.off('popupPKData');
  395. bus.off('popupRiverData');
  396. bus.off('popupZSData');
  397. bus.off('popupRainData');
  398. bus.off('popupData');
  399. bus.off('closeCommonPopup');
  400. bus.off('closePipeInfo');
  401. bus.off('changeTableContent2');
  402. });
  403. </script>
  404. <style lang="scss">
  405. .page {
  406. width: 100%;
  407. }
  408. .l7-popup-tip {
  409. display: none;
  410. }
  411. .l7-popup .l7-popup-content {
  412. padding: 0px;
  413. background: none;
  414. }
  415. .l7-popup .l7-popup-content .l7-popup-close-button {
  416. display: none;
  417. }
  418. </style>
  419. <style lang="scss" scoped>
  420. .flexs {
  421. display: flex;
  422. }
  423. .infoContent {
  424. width: 200px;
  425. }
  426. </style>