- <template>
- <div class="pictureOnMap">
- <TopTab />
- <div class="mainContentBox">
- <MapBox :initJson="`/static/libs/mapbox/style/wh_dhgx.json`" :loadCallback="loadCallback" @mapClick1="mapClick1"></MapBox>
- <router-view></router-view>
- <recordPage></recordPage>
- <LayerControl></LayerControl>
- <inputSearch></inputSearch>
- </div>
-
- <el-dialog
- modal-class="pmpSitNewDialog"
- v-model="dialogConfig.visible"
- :append-to-body="true"
- style="height: 750px; width: 1200px"
- :destroy-on-close="true"
- :draggable="true"
- :z-index="999"
- >
- <DialogTabs
- :dataID="dialogConfig.dataID"
- :dataCode="dialogConfig.dataCode"
- :comIDs="dialogConfig.comIDs"
- :typeName="dialogConfig.typeName"
- :customComponents="dialogConfig.customData"
- :RefName="dialogConfig.RefName"
- :title="dialogConfig.title"
- :arrstcode="arrstcode"
- :arrid="arrid"
- :videoList="videoList"
- :Getproperties="Getproperties"
- :Getmenuarr="Getmenuarr"
- @closeFun="closeFun"
- ></DialogTabs>
- </el-dialog>
- </div>
- </template>
- <script setup>
- import { useRouter } from 'vue-router';
-
- import line from '../../../public/static/libs/mapbox/json/line.json';
- import point from '../../../public/static/libs/mapbox/json/point.json';
- import { ref, reactive, onMounted, nextTick } from 'vue';
- import TopTab from './TopTab/index.vue';
- import MapBox from '../../components/Map/MapBox';
- import bus from '@/bus';
- import useUserStore from '@/store/modules/user';
- import DialogTabs from '@/views/pictureOnMap/page/components/DialogTabs/dialogTabs.vue';
- import { drainageDispatchGetMenu, drainageDispatchGetMenuVidoe } from '@/api/MonitorAssetsOnMap';
- import recordPage from '@/views/voice/recordPage/index';
- import usepartitionStore from '@/store/modules/partition';
-
- import LayerControl from '@/views/pictureOnMap/LayerControl.vue';
- import inputSearch from '@/views/pictureOnMap/inputSearch.vue';
- import { FALSE } from 'ol/functions';
-
- const useStore = usepartitionStore();
- const router = useRouter();
-
- const appStore = useUserStore();
-
- const { proxy } = getCurrentInstance();
- const Getproperties = ref({});
- const Getmenuarr = ref([]);
- const GetcomIDs = ref([]);
- const dialogConfig = reactive({
- visible: false,
- dataID: '',
- dataCode: '',
- data: {},
- comIDs: [],
- customData: [],
- RefName: '',
- title: '详情',
- typeName: '',
- });
- const closediaMeth = () => {
- dialogConfig.visible = false;
- };
- // 站点数组
- const arrstcode = ref([
- // 站点类型名称: 编码
- 'outlet_water_level', // 排口流量
- 'outlet_quality', // 排口水质
- 'channel_quality', // 港渠水质
- 'channel_water_level', // 港渠水位
- 'lake_water_level', // 湖泊水位
- 'waterlogging', // 渍水监测点(注意:这里编码没有后缀,可能是特例或故意为之)
- 'rain', // 雨量站
- 'rainwater_pipeline_quality', // 雨水管网水质
- 'rainwater_pipeline_quality_city', // 雨水管网水质
- 'sewage_pipeline_quality', // 污水管网水质
- 'sewage_pipeline_quality_city', // 污水管网水质
- 'rainwater_pipeline_quality_area', // 接驳口
- 'rainwater_pipeline_water_level', // 雨水管网液位
- 'reservoir_water_level', //水库水位
- 'rainPumpStation', //雨水泵站
- 'dirtyPumpStation', //污水泵站
- 'sewageStation', //污水厂
- 'gateStation', //闸门
- 'pump_water_level', //泵站液位
- 'outlet_water_level_city', //排口流量
- ]);
- // 基本数据
- const arrid = ref([
- 'diversion_well_info', // 分流井
- 'drainage_info', // 排水户
- 'lake_info', // 湖泊
- 'outlet_info', // 排口
- 'port_channel_info', // 港渠
- 'rain_water_pump_station_info', // 雨水泵站
- 'region_info', // 分区信息
- 'reservoir_info', // 水库
- 'sewage_factory_info', // 污水处理厂
- 'sewage_factory_station_info', //污水处理站
- 'sewage_pump_station_info', // 污水泵站
- 'storage_tank_info', // 调蓄池
- 'water_gate_info', // 水闸
- 'waterlogging_point_info', // 渍水点
- 'water_region_info', // 水系汇水分区
- 'storehouse', //物资仓库
- 'dikeGood', //堤防备料
- ]);
- // 视频点
- const videoList = ref([
- 'gangqu_video', // 港渠视频
- 'water_logging_video', // 渍水点视频
- 'pump_video', // 泵站视频
- ]);
- // 基础数据
- const switchStcode = (Name, type) => {
- if (type == 'outlet_info') {
- pkClick(Getproperties.value);
- }
- console.log('GetcomIDs.value', GetcomIDs.value);
- // 去除排水体系泵站通用弹框,通过ReturnPSTX来判断是否不打开公共弹窗
- console.log('arrid.value', arrid.value);
- // debugger;
- if (
- (type == 'rain_water_pump_station_info' || type == 'sewage_pump_station_info') &&
- router.currentRoute.value.fullPath == '/DrainageSystem' &&
- localStorage.getItem('ReturnPSTX') == 'off'
- ) {
- // 使用一次后恢复默认值:false
- localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗 默认为On
- return;
- }
-
- // 使用一次后恢复默认值:false
- localStorage.setItem('ReturnPSTX', 'off'); //On打开公共弹窗 off不打开公共弹窗 默认为On
- if (arrid.value.includes(type)) {
- dialogConfig.visible = true;
- dialogConfig.dataCode = type;
- dialogConfig.comIDs = GetcomIDs.value;
- dialogConfig.dataID = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
- } else {
- return;
- }
- };
- // 类型弹框判断
- const typecodeswitch = type => {
- if (diabox[type]) {
- // console.log('diabox[type]', diabox[type]);
- window[type + '_map'] = diabox[type]
- .filter(i => i.geometry)
- .map((item, index) => {
- let coordinates = turf.getCoords(turf.center(Terraformer.WKT.parse(item.geometry)));
- const popup = new mapboxgl1.Popup({
- closeButton: false,
- closeOnClick: false,
- });
- popup
- .setLngLat(coordinates)
- .setDOMContent(document.getElementById(type + index))
- .addTo(newfiberMap.map);
- popup.coordinates = coordinates;
- return popup;
- });
-
- nextTick(() => {
- window[type + '_map'].forEach(i => i._setOpacity(0));
- });
- }
- };
- const switchArr = () => {
- let typearr = [];
- for (var k in diabox) {
- typearr.push(k);
- appStore.MapData.map(item => {
- if (item.pointType == k) {
- diabox[k] = item.data;
- }
- });
- }
- nextTick(() => {
- for (var k in typearr) {
- typecodeswitch(typearr[k]);
- }
- });
- };
-
- // 站点
- const switchid = (Name, type, properties) => {
- if (arrstcode.value.includes(type)) {
- dialogConfig.visible = true;
- dialogConfig.dataCode = type;
- dialogConfig.dataID = Getproperties.value.stCode;
- dialogConfig.comIDs = GetcomIDs.value;
- } else {
- return;
- }
- };
- // 智慧水务大脑一张图 特定大屏动态菜单
- const specificFun = type => {
- // 监测预警模块弹框
- // value值 统一菜单类型
- //name值 特指智慧水务大脑获取的动态菜单类型
- let arr = [
- {
- name: 'dp_zsfx', //渍水点
- value: 'waterlogging',
- },
- {
- name: 'dp_hhsq', //河湖水情
- value: 'lake_water_level',
- },
- {
- name: 'dp_bzgq', //泵站工情
- value: 'rainPumpStation', //雨水泵站
- },
- {
- name: 'dp_gwfx', //管网风险
- value: 'rainwater_pipeline_water_level', //雨水管网液位
- },
- {
- name: 'dp_gwfx', //管网风险
- value: 'rainwater_pipeline_quality', //雨水管网水质
- },
- {
- name: 'dp_gwfx', //接驳口
- value: 'rainwater_pipeline_quality_area', //接驳口
- },
- {
- name: 'dp_wsgwfx', //大屏污水管网风险分析弹框
- value: 'sewage_pipeline_quality', //雨水管网水质
- },
- // {
- // name: "dp_ysgwfx", //大屏雨水管网风险分析弹框
- // value: "rainwater_pipeline_quality", //雨水管网水质
- // },
- ];
- return arr.find(item => item.value == type)?.name || null;
- };
-
- // 获取动态弹框菜单
- const GetBoxmenu = (Name, type) => {
- console.log('name', Name);
- console.log('type', type);
- GetcomIDs.value = [];
- let dataId = '';
-
- if (videoList.value.includes(type)) {
- // 视频单独的获取菜单的
- let params = {
- dataCode: type,
- scene: 'basis_monitor',
- };
- drainageDispatchGetMenuVidoe(params).then(res => {
- console.log('获得的菜单', res.data);
- Getmenuarr.value = res.data;
- if (res.data && res.data.length) {
- res.data.map(item => {
- GetcomIDs.value.push(item.moduleName);
- });
- }
-
- dialogConfig.visible = true;
- dialogConfig.dataCode = type;
- dialogConfig.dataID = Getproperties.value.stCode;
- dialogConfig.comIDs = GetcomIDs.value;
- });
-
- return;
- }
-
- if (arrstcode.value.includes(type)) {
- dataId = Getproperties.value.stCode;
- }
-
- if (arrid.value.includes(type)) {
- dataId = Getproperties.value.pid ? Getproperties.value.pid : Getproperties.value.id;
- }
-
- console.log('dataId', dataId);
- if (!dataId) {
- //渍水调度
- if (type == 'waterlog_point') {
- bus.emit('showZSdispatch', Getproperties.value);
- }
- // proxy.$modal.msgSuccess('');
- return;
- }
- // debugger;
- // 没有注释 不理解前面的代码意义,只能在这里写死
- if (type == 'rainwater_pipeline_quality_area') {
- type = 'rainwater_pipeline_quality';
- dialogConfig.RefName = 'jiancefenxiGWFX';
- }
- if (type == 'outlet_water_level_city') {
- type = 'outlet_water_level';
- }
- if (type == 'rainwater_pipeline_quality_city') {
- type = 'rainwater_pipeline_quality';
- }
- if (type == 'sewage_pipeline_quality_city') {
- type = 'sewage_pipeline_quality';
- }
-
- let params = {
- dataCode: type,
- scene: specificFun(type) || 'basis_monitor',
- // scene: "basis_monitor",
- dataId: dataId,
- };
- drainageDispatchGetMenu(params).then(res => {
- console.log('获得的菜单', res.data);
- Getmenuarr.value = res.data;
- if (res.data && res.data.length) {
- res.data.map(item => {
- GetcomIDs.value.push(item.moduleName);
- });
- }
-
- nextTick(() => {
- switchStcode(Name, type);
- switchid(Name, type);
- });
- });
- };
-
- const pointandlineOpen = (type, properties) => {
- dialogConfig.visible = true;
- switch (type) {
- case 'pipeline_info_text':
- dialogConfig.title = '管线信息';
- break;
- case 'pipeline_info':
- dialogConfig.title = '管线信息';
- break;
- case 'pipeline_point':
- dialogConfig.title = '管点信息';
- break;
- case 'point':
- dialogConfig.title = '问题管线';
- break;
- }
-
- Getmenuarr.value = [
- {
- menuName: '管网信息',
- show: true,
- moduleName: 'PointAndLine',
- },
- ];
- // debugger;
- // dialogConfig.dataID = '0371000003';
- dialogConfig.comIDs = ['PointAndLine'];
- dialogConfig.RefName = 'PointAndLine';
- };
- const loadCallback = () => {};
- // 排口溯源
- const pkClick = async properties => {
- // debugger;
- if (!properties.wellCode) return;
- let results = await upStreamAnalyse({ endPointNumber: properties.wellCode });
- let pipelines = results.data.pipelineInfoList
- .map(i =>
- turf.feature(Terraformer.WKT.parse(i.geometrys), {
- ...i,
- area: i.pipelineType == 'Rain' ? '雨水' : '污水',
- })
- )
- .map(i => (i.properties.flowDirection == 0 ? turf.lineString(turf.getCoords(i).reverse(), i.properties) : i));
- newfiberMap
- .getLayers()
- .filter(i => i.newfiberId == '水系流向')[0]
- .getSource()
- .setData(turf.featureCollection(pipelines));
- };
-
- const a = properties => {
- const keys_ = ['雨水', '污水'];
- const keys = ['1_泵站', '1_污水处理厂', '分区流向', '分区流向1'];
- bus.emit('removeMapDatas', keys);
- newfiberMap
- .getLayers()
- .filter(i => i.newfiberId == keys[3])[0]
- .getSource()
- .setData(turf.featureCollection([]));
- const key = properties.c_layer.includes(keys_[0]) ? keys_[0] : keys_[1];
- const nameKey = properties.name.substring(0, 2);
- let features = line.features.filter(i => i.properties.area.includes(key) && i.properties.name.includes(nameKey));
- let features1 = point.features.filter(i => i.properties.area.includes(key) && i.properties.system.includes(nameKey));
- let points = _.groupBy(features1, a => a.properties.type);
- features.forEach(i => {
- i.properties.type = keys[2];
- i.properties.color = key == keys_[0] ? 'rgba(21,127,176,1)' : 'rgba(255,0,0,1)';
- });
- Object.keys(points).map(key =>
- bus.emit('setGeoJSON', {
- json: turf.featureCollection(
- points[key].map(i => ({
- type: i.type,
- geometry: i.geometry,
- properties: { ...i.properties, type: '1_' + key },
- }))
- ),
- key: '1_' + key,
- })
- );
- bus.emit('setGeoJSON', { json: turf.featureCollection(features), key: keys[2] });
- newfiberMap
- .getLayers()
- .filter(i => i.newfiberId == keys[3])[0]
- .getSource()
- .setData(turf.featureCollection(features));
- };
-
- const mapClick1 = (lngLat, properties = {}, layerId) => {
- console.log('经纬度', lngLat);
- console.log('数据', properties);
- console.log('layerid', layerId);
- dialogConfig.title = properties.stName || properties.name;
-
- // 处理标注
- Getproperties.value = properties;
- let type = properties ? properties.type : '' || 1;
- let Name = properties ? properties.pointTypeName : '' || '';
- // Annotation(properties);
- console.log('1111', type, layerId);
- if (properties.layer == '排水分区') {
- return;
- }
- let layerIdarr = ['湖泊', '湖泊_text', '港渠', '港渠_text', '水库管理范围', '水库管理范围_text'];
- let newsetarr = [
- { name: '湖泊', value: 'lake_info' },
- { name: '湖泊_text', value: 'lake_info' },
- { name: '港渠', value: 'port_channel_info' },
- { name: '港渠_text', value: 'port_channel_info' },
- { name: '水库管理范围', value: 'reservoir_info' },
- { name: '水库管理范围_text', value: 'reservoir_info' },
- ];
- if (layerIdarr.includes(layerId)) {
- type = newsetarr.find(item => {
- return layerId == item.name;
- }).value;
- GetBoxmenu(layerId, type);
-
- return;
- }
-
- let arr = ['pipeline_point', 'pipeline_info', 'pipeline_info_text'];
-
- if (arr.includes(layerId)) {
- console.log('进了方法');
- pointandlineOpen(layerId);
- dialogConfig.dataCode = layerId;
- } else if (properties.type && properties.type == '问题管线') {
- pointandlineOpen('point');
- dialogConfig.dataCode = 'point';
- } else {
- if (type) {
- GetBoxmenu(Name, type);
- }
- }
- };
-
- // 根据类型处理接口返回的标注内容
- const AnnotationArr = ref([]);
- const StringName = ref('');
- const Annotation = properties => {
- if (properties.siteData && properties.siteData.length) {
- let arr = JSON.parse(properties.siteData);
- AnnotationArr.value = arr;
- console.log('数据', arr);
- let string = '';
-
- switch (properties.type) {
- case 'rain':
- AnnotationArr.value = [{ valueName: '监测时间', value: properties.recordTime }, ...arr];
- break;
- }
- string = Methtion(string);
- console.log('数据', string);
- }
- };
-
- const Methtion = StringName => {
- if (AnnotationArr.value.length) {
- AnnotationArr.value.map(item => {
- StringName += `${item.valueName}:${item.value}+'/n' `;
- });
- return StringName;
- }
- };
-
- const allScreen = () => {
- let domElement = document.documentElement;
- if (domElement.requestFullscreen) {
- domElement.requestFullscreen();
- } else if (domElement.mozRequestFullScreen) {
- domElement.mozRequestFullScreen();
- } else if (domElement.webkitRequestFullScreen) {
- domElement.webkitRequestFullScreen();
- }
- };
- const closeFun = is => {
- dialogConfig.visible = is;
- };
- function anotherMeht(item) {
- // debugger;
- let properties = {};
- Getproperties.value.stCode = item.stCode || item.siteCode || item.lakeCode;
- Getproperties.value.dataCode = item.dataCode;
- Getproperties.value.wellCode = item.wellCode || item.dataName || item.pipeLine;
- Getproperties.value.id = item.id;
- Getproperties.value.gwMonitorId = item.gwMonitorId || item.id; //管网坡面
- Getproperties.value.dataId = item.dataId || '';
- Getproperties.value.stType = item.stType;
-
- Getproperties.value.geometry = item.geometry || item.geometrys || '';
- // Terraformer.WKT.convert(turf.point(item.lonLat.split(",").map(Number)).geometry);
-
- Getproperties.value.waterRegionCode = item.lakeCode || item.waterRegionCode; //河湖水情 查询水系分区详情
- Getproperties.value.GWDADataNow = item.GWDADataNow ? item.GWDADataNow : false;
- if (item.daterange) {
- Getproperties.value.daterange = item.daterange;
- } else {
- Getproperties.value.daterange = null;
- }
- console.log('Getproperties', Getproperties.value);
- if (arrstcode.value.includes(item.stType)) {
- properties.stCode = item.stCode;
- }
-
- if (arrid.value.includes(item.stType)) {
- properties.id = item.pid || item.id;
- }
- GetBoxmenu('', item.stType);
- }
-
- onMounted(() => {
- allScreen();
- useStore.getsewageData();
- bus.on('DynamicBus', item => {
- console.log('item', item);
- dialogConfig.RefName = item.RefName || '';
- dialogConfig.title = item.stName || item.name;
- // debugger;
- if (!!!item.NoPromise) {
- anotherMeht(item);
- } else {
- // 将不进行接口请求,直接写死弹窗内容
- dialogConfig.dataCode = item.type;
- Getmenuarr.value = item.Getmenuarr;
- dialogConfig.comIDs = item.comIDs;
- dialogConfig.dataID = item.pid ? item.pid : item.id;
- Getproperties.value.stCode = item.stCode;
- Getproperties.value.dataCode = item.dataCode;
- Getproperties.value.wellcode = item.wellCode || item.dataName || item.startPointNumber;
- Getproperties.value.id = item.relationId || item.id; //item.relationId监测告警的普通id
- Getproperties.value.dataId = item.dataId || '';
- Getproperties.value.stType = item.stType;
- Getproperties.value.geometry = item.geometry || item.geometrys;
- dialogConfig.visible = true;
- }
- });
- bus.on('closedia', e => {
- closediaMeth();
- });
- bus.on('changeData', e => {
- // switchArr();
- });
- // 部分公共弹窗需要使用一个查询时间,目前不确定后期有没有人使用同类型的弹窗,在此初始化,增加公共弹窗的兼容性
- // localStorage.setItem("JCFXDialogTimer", moment().format("YYYY-MM-DD"));
- bus.on('xiaofeifei', e => {
- // lngLat, properties = {}, layerId
-
- mapClick1(e.geometry.coordinates, e.properties, e.geometry.type);
- });
- });
-
- onBeforeUnmount(() => {
- bus.off('DynamicBus');
- bus.off('closedia');
- bus.off('changeData');
- bus.off('xiaofeifei');
- });
- </script>
- <style lang="scss">
- @import '@/assets/styles/pictureOnMap.scss';
- .pictureOnMap {
- width: 100%;
- height: 100%;
- background: url('@/assets/images/pictureOnMap/maxBgc.png') no-repeat center;
- background-size: 100% 100%;
- color: #fff;
- overflow: hidden;
- .mainContentBox {
- width: 100%;
- height: 100%;
- overflow: hidden;
- position: relative;
- // &::before{
- // content: '';
- // position: absolute;
- // top: 0;
- // left: 0;
- // width: 100%;
- // height: 100%;
- // // background: radial-gradient(rgba(255, 255, 255, 0) 30%, #071542 100%);
- // background: url("@/assets/images/pictureOnMap/bg.png") no-repeat;
- // background-size: 100% 100%;
- // /*设置径向渐变*/
- // pointer-events: none;
- // z-index:5;
- // }
- }
- }
- </style>