- <template>
- <!-- 排水防涝子系统 一张图 -->
- <div class="publicContainer">
- <gisMap2D :initJson="`/static/libs/mapbox/style/floodOneMap.json`" @map-click="mapClick"></gisMap2D>
- <commonLegendNew></commonLegendNew>
- <commonPopup></commonPopup>
- <commonPopupRain></commonPopupRain>
- <commonPopupZS></commonPopupZS>
- <commonPopupSupervise></commonPopupSupervise>
- <commonPopupDM></commonPopupDM>
- <commonPopupRiver></commonPopupRiver>
- <waterLeverAlongRiner></waterLeverAlongRiner>
- <commonPopupPK></commonPopupPK>
- <commonPopupJCGJ></commonPopupJCGJ>
- <!-- <centerSearch></centerSearch> -->
- <tabSelect></tabSelect>
- <div v-show="GechangeTableContent2 == 1">
- <tabContent2></tabContent2>
- </div>
- <div v-show="GechangeTableContent2 !== 1">
- <tabContent></tabContent>
- </div>
- </div>
- <!-- 管网基础信息弹窗 -->
- <div id="pipeInfo" class="pipeInfo" v-show="pipePopupShow" style="width: 400px">
- <div class="title">
- <div class="infoTitle">{{ pipeData.startPointNumber }}-{{ pipeData.endPointNumber }}</div>
- <div class="closePopup">
- <el-icon :size="18" @click="closePopup">
- <Close />
- </el-icon>
- </div>
- </div>
- <div class="dividerLine"></div>
-
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">管网类型:</div>
- <div class="infoData">
- {{
- pipeData.pipelineType == 'Rain'
- ? '雨水'
- : pipeData.pipelineType == 'Sewage'
- ? '污水'
- : pipeData.pipelineType == 'Combined'
- ? '雨污合流'
- : '--'
- }}
- </div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">管网等级:</div>
- <div class="infoData">{{ pipeData.pipelineLevel }}</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">断面尺寸:</div>
- <div class="infoData">{{ pipeData.sectionType }}</div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">所属道路:</div>
- <div class="infoData">{{ pipeData.roadName }}</div>
- </div>
- </el-space>
-
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">起点编号:</div>
- <div class="infoData">{{ pipeData.startPointNumber }}</div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">终点编号:</div>
- <div class="infoData">{{ pipeData.endPointNumber }}</div>
- </div>
- </el-space>
-
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">起点高程:</div>
- <div class="infoData">{{ pipeData.startCopNoseElevation }}m</div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">终点高程:</div>
- <div class="infoData">{{ pipeData.endCopNoseElevation }}m</div>
- </div>
- </el-space>
-
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">起点埋深:</div>
- <div class="infoData">{{ pipeData.startGroundDepth }}</div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">终点埋深:</div>
- <div class="infoData">{{ pipeData.endGroundDepth }}</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">管网材质:</div>
- <div class="infoData">{{ pipeData.pipelineTexture }}</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs" style="width: 400px">
- <div class="infoName">普查单位:</div>
- <div class="infoData">{{ pipeData.operationalUnits }}</div>
- </div>
- </el-space>
- </div>
- <!-- 管井基础信息弹窗 -->
- <div id="pointInfo" v-show="pointPopupShow" style="width: 400px">
- <div class="title">
- <div class="infoTitle">{{ pointData.pointNumber }}</div>
- <div class="closePopup">
- <el-icon :size="18" @click="closePointPopup">
- <Close />
- </el-icon>
- </div>
- </div>
- <div class="dividerLine"></div>
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">管井类型:</div>
- <div class="infoData"><dict-tag :options="point_type" :value="pointData.pointType" /></div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">管井等级:</div>
- <div class="infoData">{{ pointData.pointLevel }}</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">所属道路:</div>
- <div class="infoData">{{ pointData.roadName }}</div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">地面高程:</div>
- <div class="infoData">{{ pointData.groundElevation }}m</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">井盖材质:</div>
- <div class="infoData">{{ pointData.pointTexture }}</div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">井底深度:</div>
- <div class="infoData">{{ pointData.bottomBuriedDepth }}</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">结构形式:</div>
- <div class="infoData">{{ pointData.structureForm }}</div>
- </div>
- <div class="infoContent flexs">
- <div class="infoName">井盖形状:</div>
- <div class="infoData">{{ pointData.manholeCoverShape }}</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs">
- <div class="infoName">井盖尺寸:</div>
- <div class="infoData">{{ pointData.manholeCoverSize }}</div>
- </div>
- </el-space>
- <el-space>
- <div class="infoContent flexs" style="width: 400px">
- <div class="infoName">普查单位:</div>
- <div class="infoData">{{ pointData.operationalUnits }}</div>
- </div>
- </el-space>
- </div>
- </template>
-
- <script setup name="page">
- import gisMap2D from '../../gisMapPage/gisMapBox1.vue';
- import commonLegendNew from '../../gisMapPage/commonLegendNew.vue';
- import tabSelect from './tabSelect.vue';
- import tabContent from './tabContent.vue';
- import tabContent2 from './tabContent2.vue';
- // import centerSearch from './centerSearch.vue'; //头部播放云图
- import commonPopup from './commonPopup.vue'; //厂站弹窗
- import commonPopupRain from './commonPopupRain.vue'; //雨量站弹窗
- import commonPopupZS from './commonPopupZS.vue'; //积水点弹窗
- import commonPopupSupervise from './commonPopupSupervise.vue'; //监测点弹窗
- import commonPopupJCGJ from './commonPopupJCGJ.vue'; //监测告警弹窗
- import commonPopupDM from './commonPopupDM.vue'; //断面监测点弹窗
- import waterLeverAlongRiner from './waterLeverAlongRiner.vue'; //沿河水位
- import commonPopupRiver from './commonPopupRiver.vue'; //河湖监测弹窗
- import commonPopupPK from './commonPopupPK.vue'; //排口监测点弹窗
- import bus from '@/bus';
- import { pagepipelineInfo } from '@/api/drainagePipeline/pipelineInfo';
- import { pagepipelinePoint } from '@/api/drainagePipeline/pipelinePoint';
-
-
- const { proxy } = getCurrentInstance();
- const pipeData = ref({});
- const pointData = ref({});
- const pipePopupShow = ref(false);
- const pointPopupShow = ref(false);
- const { point_type } = proxy.useDict('point_type');
-
- const GechangeTableContent2 = ref(1);
-
- const mapClick = (point, properties) => {
- console.log('point', point);
- console.log('properties', properties);
- let featureKey = properties.type;
- let data = properties;
- if (
- properties.type == 'pipeSupervise' ||
- properties.type == 'rainStation' ||
- properties.type == 'riverLake' ||
- properties.type == 'PKsupervise' ||
- properties.type == 'waterlog' ||
- properties.type == 'orinign' ||
- properties.type == 'pipeSupervise_1' ||
- properties.type == 'rainStation_1' ||
- properties.type == 'riverLake_1' ||
- properties.type == 'PKsupervise_1' ||
- properties.type == 'waterlog_1' ||
- properties.type == 'orinign_1'
- ) {
- !!properties.onlineStatus && properties.onlineStatus == 'online'
- ? (properties.onlineStatus = '在线')
- : (properties.onlineStatus = '离线');
- properties.lon = properties.lonLat.split(',')[0];
- properties.lat = properties.lonLat.split(',')[1];
- let popupData = {
- popupInfo: properties,
- popupShow: true,
- };
-
- newfiberMapbox.map.easeTo({
- center: [Number(properties.lonLat.split(',')[0]) + 0.000025, Number(properties.lonLat.split(',')[1]) + 0.000025],
- zoom: 22,
- });
- let closeCommonPopup = false;
- bus.emit('closeCommonPopup', closeCommonPopup);
- properties.type == 'rainStation'
- ? bus.emit('popupRainData', popupData)
- : properties.type == 'riverLake'
- ? bus.emit('popupRiverData', popupData)
- : properties.type == 'PKsupervise'
- ? bus.emit('popupPKData', popupData)
- : properties.type == 'waterlog'
- ? bus.emit('popupZSData', popupData)
- : properties.type == 'rainStation_1'
- ? bus.emit('popupRainData', popupData)
- : properties.type == 'riverLake_1'
- ? bus.emit('popupRiverData', popupData)
- : properties.type == 'PKsupervise_1'
- ? bus.emit('popupPKData', popupData)
- : properties.type == 'waterlog_1'
- ? bus.emit('popupZSData', popupData)
- : bus.emit('popupSuperviseData', popupData);
- } else if (
- featureKey == 'YSBZ' ||
- featureKey == 'WSBZ' ||
- featureKey == 'WSCLC' ||
- featureKey == 'paiKou' ||
- featureKey == 'drainOutlet' ||
- featureKey == 'YSBZ_1' ||
- featureKey == 'WSBZ_1' ||
- featureKey == 'WSCLC_1' ||
- featureKey == 'paiKou_1' ||
- featureKey == 'drainOutlet_1' ||
- featureKey == 'PLBZ_1' ||
- featureKey == 'PLBZ'
- ) {
- let popupData = {
- popupInfo: data,
- popupShow: true,
- };
- if (featureKey == 'paiKou' || featureKey == 'paiKou_1') {
- data.lon = Number(data.originalX);
- data.lat = Number(data.originalY);
- } else if (featureKey == 'drainOutlet' || featureKey == 'drainOutlet_1') {
- if (data.pointNumber == '天仙路溢流口') {
- data.lon = Number(data.originalX);
- data.lat = Number(data.originalY);
- } else {
- data.lon = Number(data.originalX);
- data.lat = Number(data.originalY);
- }
- }
- bus.emit('popupData', popupData);
- let popupDiv = document.getElementById('psPopup');
- window.stationPopup = new mapboxL7.Popup({
- html: popupDiv,
- lngLat: {
- lng: data.lon,
- lat: data.lat,
- },
- anchor: 'center',
- offsets: [0, 200],
- autoClose: false,
- });
- newfiberMapbox.addPopup(stationPopup);
- newfiberMapbox.map.easeTo({
- center: [Number(data.lon), Number(data.lat)],
- zoom: 15,
- });
- }
- if (!!data['起点点号'] && !!data['终点点号'] && data.geometry.includes('MULTILINESTRING')) {
- let startPoint = data['起点点号'];
- let endPoint = data['终点点号'];
- getPipeDataInfo(startPoint, endPoint);
- } else if (!!data['设施编码'] && data.geometry.includes('POINT')) {
- let pointNumber = data['设施编码'].split('-')[0];
- getPipePointInfo(pointNumber);
- let pipePointPopupDiv = document.getElementById('pointInfo');
- window.pipePointPopup = new mapboxL7.Popup({
- html: pipePointPopupDiv,
- lngLat: {
- lng: point[0],
- lat: point[1],
- },
- anchor: 'center',
- offsets: [-50, 120],
- autoClose: false,
- });
- newfiberMapbox.addPopup(pipePointPopup);
- newfiberMapbox.map.easeTo({
- center: [point[0] + 0.0005, point[1]],
- zoom: 17,
- });
- }
- };
- let getPipeDataInfo = async (startPoint, endPoint) => {
- let params = {
- startPointNumber: startPoint,
- endPointNumber: endPoint,
- pageNum: 1,
- pageSize: 1,
- };
- let res = await pagepipelineInfo(params);
- if (res && res.code == 200) {
- pipeData.value = res.data[0];
- let pipeCenter = turf.center(Terraformer.WKT.parse(pipeData.value.geometrys)).geometry.coordinates;
- let pipePopupDiv = document.getElementById('pipeInfo');
- window.window.pipePopup = new mapboxL7.Popup({
- html: pipePopupDiv,
- lngLat: {
- lng: pipeCenter[0],
- lat: pipeCenter[1],
- },
- anchor: 'center',
- offsets: [0, 100],
- autoClose: false,
- });
- newfiberMapbox.addPopup(pipePopup);
- newfiberMapbox.map.easeTo({
- center: [pipeCenter[0] + 0.0005, pipeCenter[1]],
- zoom: 17,
- });
- pipePopupShow.value = true;
- }
- };
- let getPipePointInfo = async pointNumber => {
- let params = {
- pointNumber: pointNumber,
- pageNum: 1,
- pageSize: 1,
- };
- let res = await pagepipelinePoint(params);
- if (res && res.code == 200) {
- pointData.value = res.data[0];
- pointPopupShow.value = true;
- }
- };
- //关闭弹窗
- const closePopup = () => {
- pipePopupShow.value = false;
- };
- const closePointPopup = () => {
- pointPopupShow.value = false;
- };
- onMounted(() => {
- bus.on('closePipeInfo', () => {
- closePopup();
- closePointPopup();
- });
- bus.on('changeTableContent2', val => {
- console.log('changeTableContent2', val);
- GechangeTableContent2.value = val;
- });
- });
- onBeforeUnmount(() => {
- bus.off('popupSuperviseData');
- bus.off('popupJCGJData');
- bus.off('popupPKData');
- bus.off('popupRiverData');
- bus.off('popupZSData');
- bus.off('popupRainData');
- bus.off('popupData');
- bus.off('closeCommonPopup');
- bus.off('closePipeInfo');
- bus.off('changeTableContent2');
- });
- </script>
- <style lang="scss">
- .page {
- width: 100%;
- }
- .l7-popup-tip {
- display: none;
- }
- .l7-popup .l7-popup-content {
- padding: 0px;
- background: none;
- }
- .l7-popup .l7-popup-content .l7-popup-close-button {
- display: none;
- }
- </style>
- <style lang="scss" scoped>
- .flexs {
- display: flex;
- }
- .infoContent {
- width: 200px;
- }
- </style>