Newer
Older
DH_Apicture / src / views / pictureOnMap / index.vue
  1. <template>
  2. <div class="pictureOnMap">
  3. <TopTab />
  4. <div class="mainContentBox">
  5. <MapBox :initJson="`/static/libs/mapbox/style/wh_dhgx.json`" :loadCallback="loadCallback" @mapClick1="mapClick1"></MapBox>
  6. <router-view></router-view>
  7. <recordPage></recordPage>
  8. <LayerControl></LayerControl>
  9. <inputSearch></inputSearch>
  10. </div>
  11.  
  12. <el-dialog
  13. modal-class="pmpSitNewDialog"
  14. v-model="dialogConfig.visible"
  15. :append-to-body="true"
  16. style="height: 750px; width: 1200px"
  17. :destroy-on-close="true"
  18. :draggable="true"
  19. :z-index="999"
  20. >
  21. <DialogTabs
  22. :dataID="dialogConfig.dataID"
  23. :dataCode="dialogConfig.dataCode"
  24. :comIDs="dialogConfig.comIDs"
  25. :typeName="dialogConfig.typeName"
  26. :customComponents="dialogConfig.customData"
  27. :RefName="dialogConfig.RefName"
  28. :title="dialogConfig.title"
  29. :arrstcode="arrstcode"
  30. :arrid="arrid"
  31. :videoList="videoList"
  32. :Getproperties="Getproperties"
  33. :Getmenuarr="Getmenuarr"
  34. @closeFun="closeFun"
  35. ></DialogTabs>
  36. </el-dialog>
  37. </div>
  38. </template>
  39. <script setup>
  40. import { useRouter } from 'vue-router';
  41.  
  42. import line from '../../../public/static/libs/mapbox/json/line.json';
  43. import point from '../../../public/static/libs/mapbox/json/point.json';
  44. import { ref, reactive, onMounted, nextTick } from 'vue';
  45. import TopTab from './TopTab/index.vue';
  46. import MapBox from '../../components/Map/MapBox';
  47. import bus from '@/bus';
  48. import useUserStore from '@/store/modules/user';
  49. import DialogTabs from '@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue';
  50. import { drainageDispatchGetMenu, drainageDispatchGetMenuVidoe } from '@/api/MonitorAssetsOnMap';
  51. import recordPage from '@/views/voice/recordPage/index';
  52. import usepartitionStore from '@/store/modules/partition';
  53.  
  54. import LayerControl from '@/views/pictureOnMap/LayerControl.vue';
  55. import inputSearch from '@/views/pictureOnMap/inputSearch.vue';
  56. import { FALSE } from 'ol/functions';
  57.  
  58. const useStore = usepartitionStore();
  59. const router = useRouter();
  60.  
  61. const appStore = useUserStore();
  62.  
  63. const { proxy } = getCurrentInstance();
  64. const Getproperties = ref({});
  65. const Getmenuarr = ref([]);
  66. const GetcomIDs = ref([]);
  67. const dialogConfig = reactive({
  68. visible: false,
  69. dataID: '',
  70. dataCode: '',
  71. data: {},
  72. comIDs: [],
  73. customData: [],
  74. RefName: '',
  75. title: '详情',
  76. typeName: '',
  77. });
  78. const closediaMeth = () => {
  79. dialogConfig.visible = false;
  80. };
  81. // 站点数组
  82. const arrstcode = ref([
  83. // 站点类型名称: 编码
  84. 'outlet_water_level', // 排口流量
  85. 'outlet_quality', // 排口水质
  86. 'channel_quality', // 港渠水质
  87. 'channel_water_level', // 港渠水位
  88. 'lake_water_level', // 湖泊水位
  89. 'waterlogging', // 渍水监测点(注意:这里编码没有后缀,可能是特例或故意为之)
  90. 'rain', // 雨量站
  91. 'rainwater_pipeline_quality', // 雨水管网水质
  92. 'rainwater_pipeline_quality_city', // 雨水管网水质
  93. 'sewage_pipeline_quality', // 污水管网水质
  94. 'sewage_pipeline_quality_city', // 污水管网水质
  95. 'rainwater_pipeline_quality_area', // 接驳口
  96. 'rainwater_pipeline_water_level', // 雨水管网液位
  97. 'reservoir_water_level', //水库水位
  98. 'rainPumpStation', //雨水泵站
  99. 'dirtyPumpStation', //污水泵站
  100. 'sewageStation', //污水厂
  101. 'gateStation', //闸门
  102. 'pump_water_level', //泵站液位
  103. 'outlet_water_level_city', //排口流量
  104. ]);
  105. // 基本数据
  106. const arrid = ref([
  107. 'diversion_well_info', // 分流井
  108. 'drainage_info', // 排水户
  109. 'lake_info', // 湖泊
  110. 'outlet_info', // 排口
  111. 'port_channel_info', // 港渠
  112. 'rain_water_pump_station_info', // 雨水泵站
  113. 'region_info', // 分区信息
  114. 'reservoir_info', // 水库
  115. 'sewage_factory_info', // 污水处理厂
  116. 'sewage_factory_station_info', //污水处理站
  117. 'sewage_pump_station_info', // 污水泵站
  118. 'storage_tank_info', // 调蓄池
  119. 'water_gate_info', // 水闸
  120. 'waterlogging_point_info', // 渍水点
  121. 'water_region_info', // 水系汇水分区
  122. 'storehouse', //物资仓库
  123. 'dikeGood', //堤防备料
  124. ]);
  125. // 视频点
  126. const videoList = ref([
  127. 'gangqu_video', // 港渠视频
  128. 'water_logging_video', // 渍水点视频
  129. 'pump_video', // 泵站视频
  130. ]);
  131. // 基础数据
  132. const switchStcode = (Name, type) => {
  133. if (type == 'outlet_info') {
  134. pkClick(Getproperties.value);
  135. }
  136. console.log('GetcomIDs.value', GetcomIDs.value);
  137. // 去除排水体系泵站通用弹框,通过ReturnPSTX来判断是否不打开公共弹窗
  138. console.log('arrid.value', arrid.value);
  139. // debugger;
  140. if (
  141. (type == 'rain_water_pump_station_info' || type == 'sewage_pump_station_info') &&
  142. router.currentRoute.value.fullPath == '/DrainageSystem' &&
  143. localStorage.getItem('ReturnPSTX') == 'off'
  144. ) {
  145. // 使用一次后恢复默认值:false
  146. localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗 默认为On
  147. return;
  148. }
  149.  
  150. // 使用一次后恢复默认值:false
  151. localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗 默认为On
  152. if (arrid.value.includes(type)) {
  153. dialogConfig.visible = true;
  154. dialogConfig.dataCode = type;
  155. dialogConfig.comIDs = GetcomIDs.value;
  156. dialogConfig.dataID = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
  157. } else {
  158. return;
  159. }
  160. };
  161. // 类型弹框判断
  162. const typecodeswitch = type => {
  163. if (diabox[type]) {
  164. // console.log('diabox[type]', diabox[type]);
  165. window[type + '_map'] = diabox[type]
  166. .filter(i => i.geometry)
  167. .map((item, index) => {
  168. let coordinates = turf.getCoords(turf.center(Terraformer.WKT.parse(item.geometry)));
  169. const popup = new mapboxgl1.Popup({
  170. closeButton: false,
  171. closeOnClick: false,
  172. });
  173. popup
  174. .setLngLat(coordinates)
  175. .setDOMContent(document.getElementById(type + index))
  176. .addTo(newfiberMap.map);
  177. popup.coordinates = coordinates;
  178. return popup;
  179. });
  180.  
  181. nextTick(() => {
  182. window[type + '_map'].forEach(i => i._setOpacity(0));
  183. });
  184. }
  185. };
  186. const switchArr = () => {
  187. let typearr = [];
  188. for (var k in diabox) {
  189. typearr.push(k);
  190. appStore.MapData.map(item => {
  191. if (item.pointType == k) {
  192. diabox[k] = item.data;
  193. }
  194. });
  195. }
  196. nextTick(() => {
  197. for (var k in typearr) {
  198. typecodeswitch(typearr[k]);
  199. }
  200. });
  201. };
  202.  
  203. // 站点
  204. const switchid = (Name, type, properties) => {
  205. if (arrstcode.value.includes(type)) {
  206. dialogConfig.visible = true;
  207. dialogConfig.dataCode = type;
  208. dialogConfig.dataID = Getproperties.value.stCode;
  209. dialogConfig.comIDs = GetcomIDs.value;
  210. } else {
  211. return;
  212. }
  213. };
  214. // 智慧水务大脑一张图 特定大屏动态菜单
  215. const specificFun = type => {
  216. // 监测预警模块弹框
  217. // value值 统一菜单类型
  218. //name值 特指智慧水务大脑获取的动态菜单类型
  219. let arr = [
  220. {
  221. name: 'dp_zsfx', //渍水点
  222. value: 'waterlogging',
  223. },
  224. {
  225. name: 'dp_hhsq', //河湖水情
  226. value: 'lake_water_level',
  227. },
  228. {
  229. name: 'dp_bzgq', //泵站工情
  230. value: 'rainPumpStation', //雨水泵站
  231. },
  232. {
  233. name: 'dp_gwfx', //管网风险
  234. value: 'rainwater_pipeline_water_level', //雨水管网液位
  235. },
  236. {
  237. name: 'dp_gwfx', //管网风险
  238. value: 'rainwater_pipeline_quality', //雨水管网水质
  239. },
  240. {
  241. name: 'dp_gwfx', //接驳口
  242. value: 'rainwater_pipeline_quality_area', //接驳口
  243. },
  244. {
  245. name: 'dp_wsgwfx', //大屏污水管网风险分析弹框
  246. value: 'sewage_pipeline_quality', //雨水管网水质
  247. },
  248. // {
  249. // name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
  250. // value: "rainwater_pipeline_quality", //雨水管网水质
  251. // },
  252. ];
  253. return arr.find(item => item.value == type)?.name || null;
  254. };
  255.  
  256. // 获取动态弹框菜单
  257. const GetBoxmenu = (Name, type) => {
  258. console.log('name', Name);
  259. console.log('type', type);
  260. GetcomIDs.value = [];
  261. let dataId = '';
  262.  
  263. if (videoList.value.includes(type)) {
  264. // 视频单独的获取菜单的
  265. let params = {
  266. dataCode: type,
  267. scene: 'basis_monitor',
  268. };
  269. drainageDispatchGetMenuVidoe(params).then(res => {
  270. console.log('获得的菜单', res.data);
  271. Getmenuarr.value = res.data;
  272. if (res.data && res.data.length) {
  273. res.data.map(item => {
  274. GetcomIDs.value.push(item.moduleName);
  275. });
  276. }
  277.  
  278. dialogConfig.visible = true;
  279. dialogConfig.dataCode = type;
  280. dialogConfig.dataID = Getproperties.value.stCode;
  281. dialogConfig.comIDs = GetcomIDs.value;
  282. });
  283.  
  284. return;
  285. }
  286.  
  287. if (arrstcode.value.includes(type)) {
  288. dataId = Getproperties.value.stCode;
  289. }
  290.  
  291. if (arrid.value.includes(type)) {
  292. dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
  293. }
  294.  
  295. console.log('dataId', dataId);
  296. if (!dataId) {
  297. //渍水调度
  298. if (type == 'waterlog_point') {
  299. bus.emit('showZSdispatch', Getproperties.value);
  300. }
  301. // proxy.$modal.msgSuccess('');
  302. return;
  303. }
  304. // debugger;
  305. // 没有注释 不理解前面的代码意义,只能在这里写死
  306. if (type == 'rainwater_pipeline_quality_area') {
  307. type = 'rainwater_pipeline_quality';
  308. dialogConfig.RefName = 'jiancefenxiGWFX';
  309. }
  310. if (type == 'outlet_water_level_city') {
  311. type = 'outlet_water_level';
  312. }
  313. if (type == 'rainwater_pipeline_quality_city') {
  314. type = 'rainwater_pipeline_quality';
  315. }
  316. if (type == 'sewage_pipeline_quality_city') {
  317. type = 'sewage_pipeline_quality';
  318. }
  319.  
  320. let params = {
  321. dataCode: type,
  322. scene: specificFun(type) || 'basis_monitor',
  323. // scene: "basis_monitor",
  324. dataId: dataId,
  325. };
  326. drainageDispatchGetMenu(params).then(res => {
  327. console.log('获得的菜单', res.data);
  328. Getmenuarr.value = res.data;
  329. if (res.data && res.data.length) {
  330. res.data.map(item => {
  331. GetcomIDs.value.push(item.moduleName);
  332. });
  333. }
  334.  
  335. nextTick(() => {
  336. switchStcode(Name, type);
  337. switchid(Name, type);
  338. });
  339. });
  340. };
  341.  
  342. const pointandlineOpen = (type, properties) => {
  343. dialogConfig.visible = true;
  344. switch (type) {
  345. case 'pipeline_info_text':
  346. dialogConfig.title = '管线信息';
  347. break;
  348. case 'pipeline_info':
  349. dialogConfig.title = '管线信息';
  350. break;
  351. case 'pipeline_point':
  352. dialogConfig.title = '管点信息';
  353. break;
  354. case 'point':
  355. dialogConfig.title = '问题管线';
  356. break;
  357. }
  358.  
  359. Getmenuarr.value = [
  360. {
  361. menuName: '管网信息',
  362. show: true,
  363. moduleName: 'PointAndLine',
  364. },
  365. ];
  366. // debugger;
  367. // dialogConfig.dataID = '0371000003';
  368. dialogConfig.comIDs = ['PointAndLine'];
  369. dialogConfig.RefName = 'PointAndLine';
  370. };
  371. const loadCallback = () => {};
  372. // 排口溯源
  373. const pkClick = async properties => {
  374. // debugger;
  375. if (!properties.wellCode) return;
  376. let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
  377. let pipelines = results.data.pipelineInfoList
  378. .map(i =>
  379. turf.feature(Terraformer.WKT.parse(i.geometrys), {
  380. ...i,
  381. area: i.pipelineType == 'Rain' ? '雨水' : '污水',
  382. })
  383. )
  384. .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
  385. newfiberMap
  386. .getLayers()
  387. .filter(i => i.newfiberId == '水系流向')[0]
  388. .getSource()
  389. .setData(turf.featureCollection(pipelines));
  390. };
  391.  
  392. const a = properties => {
  393. const keys_ = ['雨水', '污水'];
  394. const keys = ['1_泵站', '1_污水处理厂', '分区流向', '分区流向1'];
  395. bus.emit('removeMapDatas', keys);
  396. newfiberMap
  397. .getLayers()
  398. .filter(i => i.newfiberId == keys[3])[0]
  399. .getSource()
  400. .setData(turf.featureCollection([]));
  401. const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
  402. const nameKey = properties.name.substring(0, 2);
  403. let features = line.features.filter(i => i.properties.area.includes(key) && i.properties.name.includes(nameKey));
  404. let features1 = point.features.filter(i => i.properties.area.includes(key) && i.properties.system.includes(nameKey));
  405. let points = _.groupBy(features1, a => a.properties.type);
  406. features.forEach(i => {
  407. i.properties.type = keys[2];
  408. i.properties.color = key == keys_[0] ? 'rgba(21,127,176,1)' : 'rgba(255,0,0,1)';
  409. });
  410. Object.keys(points).map(key =>
  411. bus.emit('setGeoJSON', {
  412. json: turf.featureCollection(
  413. points[key].map(i => ({
  414. type: i.type,
  415. geometry: i.geometry,
  416. properties: { ...i.properties, type: '1_' + key },
  417. }))
  418. ),
  419. key: '1_' + key,
  420. })
  421. );
  422. bus.emit('setGeoJSON', { json: turf.featureCollection(features), key: keys[2] });
  423. newfiberMap
  424. .getLayers()
  425. .filter(i => i.newfiberId == keys[3])[0]
  426. .getSource()
  427. .setData(turf.featureCollection(features));
  428. };
  429.  
  430. const mapClick1 = (lngLat, properties = {}, layerId) => {
  431. console.log('经纬度', lngLat);
  432. console.log('数据', properties);
  433. console.log('layerid', layerId);
  434. dialogConfig.title = properties.stName || properties.name;
  435.  
  436. // 处理标注
  437. Getproperties.value = properties;
  438. let type = properties ? properties.type : '' || 1;
  439. let Name = properties ? properties.pointTypeName : '' || '';
  440. // Annotation(properties);
  441. console.log('1111', type, layerId);
  442. if (properties.layer == '排水分区') {
  443. return;
  444. }
  445. let layerIdarr = ['湖泊', '湖泊_text', '港渠', '港渠_text', '水库管理范围', '水库管理范围_text'];
  446. let newsetarr = [
  447. { name: '湖泊', value: 'lake_info' },
  448. { name: '湖泊_text', value: 'lake_info' },
  449. { name: '港渠', value: 'port_channel_info' },
  450. { name: '港渠_text', value: 'port_channel_info' },
  451. { name: '水库管理范围', value: 'reservoir_info' },
  452. { name: '水库管理范围_text', value: 'reservoir_info' },
  453. ];
  454. if (layerIdarr.includes(layerId)) {
  455. type = newsetarr.find(item => {
  456. return layerId == item.name;
  457. }).value;
  458. GetBoxmenu(layerId, type);
  459.  
  460. return;
  461. }
  462.  
  463. let arr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];
  464.  
  465. if (arr.includes(layerId)) {
  466. console.log('进了方法');
  467. pointandlineOpen(layerId);
  468. dialogConfig.dataCode = layerId;
  469. } else if (properties.type && properties.type == '问题管线') {
  470. pointandlineOpen('point');
  471. dialogConfig.dataCode = 'point';
  472. } else {
  473. if (type) {
  474. GetBoxmenu(Name, type);
  475. }
  476. }
  477. };
  478.  
  479. // 根据类型处理接口返回的标注内容
  480. const AnnotationArr = ref([]);
  481. const StringName = ref('');
  482. const Annotation = properties => {
  483. if (properties.siteData && properties.siteData.length) {
  484. let arr = JSON.parse(properties.siteData);
  485. AnnotationArr.value = arr;
  486. console.log('数据', arr);
  487. let string = '';
  488.  
  489. switch (properties.type) {
  490. case 'rain':
  491. AnnotationArr.value = [{ valueName: '监测时间', value: properties.recordTime }, ...arr];
  492. break;
  493. }
  494. string = Methtion(string);
  495. console.log('数据', string);
  496. }
  497. };
  498.  
  499. const Methtion = StringName => {
  500. if (AnnotationArr.value.length) {
  501. AnnotationArr.value.map(item => {
  502. StringName += `${item.valueName}:${item.value}+'/n' `;
  503. });
  504. return StringName;
  505. }
  506. };
  507.  
  508. const allScreen = () => {
  509. let domElement = document.documentElement;
  510. if (domElement.requestFullscreen) {
  511. domElement.requestFullscreen();
  512. } else if (domElement.mozRequestFullScreen) {
  513. domElement.mozRequestFullScreen();
  514. } else if (domElement.webkitRequestFullScreen) {
  515. domElement.webkitRequestFullScreen();
  516. }
  517. };
  518. const closeFun = is => {
  519. dialogConfig.visible = is;
  520. };
  521. function anotherMeht(item) {
  522. // debugger;
  523. let properties = {};
  524. Getproperties.value.stCode = item.stCode || item.siteCode || item.lakeCode;
  525. Getproperties.value.dataCode = item.dataCode;
  526. Getproperties.value.wellCode = item.wellCode || item.dataName || item.pipeLine;
  527. Getproperties.value.id = item.id;
  528. Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
  529. Getproperties.value.dataId = item.dataId || '';
  530. Getproperties.value.stType = item.stType;
  531.  
  532. Getproperties.value.geometry = item.geometry || item.geometrys || '';
  533. // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);
  534.  
  535. Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情 查询水系分区详情
  536. Getproperties.value.GWDADataNow = item.GWDADataNow ? item.GWDADataNow : false;
  537. if (item.daterange) {
  538. Getproperties.value.daterange = item.daterange;
  539. } else {
  540. Getproperties.value.daterange = null;
  541. }
  542. console.log('Getproperties', Getproperties.value);
  543. if (arrstcode.value.includes(item.stType)) {
  544. properties.stCode = item.stCode;
  545. }
  546.  
  547. if (arrid.value.includes(item.stType)) {
  548. properties.id = item.pid || item.id;
  549. }
  550. GetBoxmenu('', item.stType);
  551. }
  552.  
  553. onMounted(() => {
  554. allScreen();
  555. useStore.getsewageData();
  556. bus.on('DynamicBus', item => {
  557. console.log('item', item);
  558. dialogConfig.RefName = item.RefName || '';
  559. dialogConfig.title = item.stName || item.name;
  560. // debugger;
  561. if (!!!item.NoPromise) {
  562. anotherMeht(item);
  563. } else {
  564. // 将不进行接口请求,直接写死弹窗内容
  565. dialogConfig.dataCode = item.type;
  566. Getmenuarr.value = item.Getmenuarr;
  567. dialogConfig.comIDs = item.comIDs;
  568. dialogConfig.dataID = item.pid ? item.pid : item.id;
  569. Getproperties.value.stCode = item.stCode;
  570. Getproperties.value.dataCode = item.dataCode;
  571. Getproperties.value.wellcode = item.wellCode || item.dataName || item.startPointNumber;
  572. Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
  573. Getproperties.value.dataId = item.dataId || '';
  574. Getproperties.value.stType = item.stType;
  575. Getproperties.value.geometry = item.geometry || item.geometrys;
  576. dialogConfig.visible = true;
  577. }
  578. });
  579. bus.on('closedia', e => {
  580. closediaMeth();
  581. });
  582. bus.on('changeData', e => {
  583. // switchArr();
  584. });
  585. // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
  586. // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
  587. bus.on('xiaofeifei', e => {
  588. // lngLat, properties = {}, layerId
  589.  
  590. mapClick1(e.geometry.coordinates, e.properties, e.geometry.type);
  591. });
  592. });
  593.  
  594. onBeforeUnmount(() => {
  595. bus.off('DynamicBus');
  596. bus.off('closedia');
  597. bus.off('changeData');
  598. bus.off('xiaofeifei');
  599. });
  600. </script>
  601. <style lang="scss">
  602. @import '@/assets/styles/pictureOnMap.scss';
  603. .pictureOnMap {
  604. width: 100%;
  605. height: 100%;
  606. background: url('@/assets/images/pictureOnMap/maxBgc.png') no-repeat center;
  607. background-size: 100% 100%;
  608. color: #fff;
  609. overflow: hidden;
  610. .mainContentBox {
  611. width: 100%;
  612. height: 100%;
  613. overflow: hidden;
  614. position: relative;
  615. // &::before{
  616. // content: '';
  617. // position: absolute;
  618. // top: 0;
  619. // left: 0;
  620. // width: 100%;
  621. // height: 100%;
  622. // // background: radial-gradient(rgba(255, 255, 255, 0) 30%, #071542 100%);
  623. // background: url("@/assets/images/pictureOnMap/bg.png") no-repeat;
  624. // background-size: 100% 100%;
  625. // /*设置径向渐变*/
  626. // pointer-events: none;
  627. // z-index:5;
  628. // }
  629. }
  630. }
  631. </style>