<template>
<!-- 厂站设施弹窗 -->
<div class="cesiumPopup" id="cesiumPopupID" v-show="allData.popupShow">
<div class="title">
<div class="titleNamePP" v-if="allData.dataList.pumpName">
{{ allData.dataList.pumpName }}
</div>
<div class="titleNamePP" v-if="allData.dataList.sewageName">
{{ allData.dataList.sewageName }}
</div>
<div class="titleNamePP" v-if="allData.dataList.roadName">
{{ allData.dataList.roadName }}
</div>
<div class="titleNamePP" v-if="allData.dataList.stName">
{{ allData.dataList.stName }}
</div>
<div class="titleNamePP" v-if="allData.dataList.waterloggingName">
{{ allData.dataList.waterloggingName }}
</div>
<div class="titleNamePP" v-if="allData.dataList.materialName">
{{ allData.dataList.materialName }}
</div>
<div class="titleNamePP" v-if="allData.dataList.起点号">
{{ allData.dataList.起点号 }}
</div>
<div class="titleNamePP" v-if="allData.dataList.编号">
{{ allData.dataList.编号 }}
</div>
<div class="titleNamePP" v-if="allData.dataList.devicename">
{{ allData.dataList.devicename }}
</div>
<div class="titleNamePP" v-if="allData.dataList.name">
{{ allData.dataList.name }}
</div>
<div class="PopupClosed">
<el-icon :size="18" @click="closePopupCES"><Close /></el-icon>
</div>
</div>
<div class="dividerLine"></div>
<!-- 泵站 -->
<div class="basicInfo" v-if="allData.dataList.pumpCode">
<div class="basicContentCP">
<div class="contentInfo">
<div class="contentName">厂站编码：</div>
<div class="contentValue">{{ allData.dataList.pumpCode }}</div>
<div class="contentName">厂站类型：</div>
<div class="contentValue">
{{
allData.dataList.pumpType == 'rain_water'
? '雨水泵站'
: allData.dataList.pumpType == 'sewage_water'
? '污水泵站'
: '雨污合建'
}}
</div>
</div>
<div class="contentInfo">
<div class="contentName">建筑面积：</div>
<div class="contentValue">{{ allData.dataList.buildArea }} ㎡</div>
<div class="contentName">设计规模：</div>
<div class="contentValue">
{{ allData.dataList.rainpump.designScaleSecond || allData.dataList.sweagepump.designScaleSecond || '--' }}
m³/s
</div>
</div>
<div class="contentInfo">
<div class="contentName">泵机台数：</div>
<div class="contentValue">
{{ allData.dataList.rainpump.deviceCount || allData.dataList.sweagepump.deviceCount || '--' }}台
</div>
<div class="contentName">建设单位：</div>
<div class="contentValue" :title="allData.dataList.unitDep">
{{ allData.dataList.unitDep }}
</div>
</div>
<div class="contentInfo" style="width: 100%">
<div class="contentName">地址：</div>
<div class="contentValue" style="width: 100%">
{{ allData.dataList.address }}
</div>
</div>
</div>
</div>
<!-- 污水处理厂 -->
<div class="basicInfo" v-if="allData.dataList.sewageCode">
<div class="basicContentCP">
<div class="contentInfo">
<div class="contentName">厂站编码：</div>
<div class="contentValue">{{ allData.dataList.sewageCode }}</div>
<div class="contentName">出水标准：</div>
<div class="contentValue">{{ allData.dataList.standard }}</div>
</div>
<div class="contentInfo">
<div class="contentName">核心工艺：</div>
<div class="contentValue" style="width: 100%">
{{ allData.dataList.workmanship }}
</div>
</div>
<div class="contentInfo">
<div class="contentName">设计规模：</div>
<div class="contentValue">{{ allData.dataList.planScale }}万吨/日</div>
<div class="contentName">排放水体：</div>
<div class="contentValue">{{ allData.dataList.intoWater }}</div>
</div>
<div class="contentInfo">
<div class="contentName">地址：</div>
<div class="contentValue" style="width: 100%">
{{ allData.dataList.address }}
</div>
</div>
</div>
</div>
<!-- 积水点 -->
<div class="basicInfo" v-if="allData.dataList.type == 'waterLoging'">
<div class="mt-10">
<div class="flex flex-start">
<div>
<el-date-picker
v-model="allData.dateTime"
type="daterange"
value-format="YYYY-MM-DD"
start-placeholder="开始时间"
end-placeholder="结束时间"
size="small"
style="width: 240px; margin-right: 10px"
/>
</div>
<el-button type="primary" size="small" @click="changeDateJSD">搜索</el-button>
</div>
<div id="chartHistoryJSD"></div>
</div>
</div>
<!-- 河道水位监测 -->
<div class="basicInfo" v-if="allData.dataList.type == 'waterCourse'">
<div class="mt-10">
<div class="basicContentCP">
<div class="contentInfo">
<div class="">实时水位：</div>
<div class="contentValue">{{ realRiverVal }}m</div>
</div>
</div>
<div id="chartHistoryZM"></div>
</div>
</div>
<!-- 雨量站 -->
<div class="basicInfo" v-if="allData.dataList.siteType == 'rain'">
<div class="mt-10">
<el-date-picker
v-model="allData.dateTime"
type="daterange"
value-format="YYYY-MM-DD"
start-placeholder="开始时间"
end-placeholder="结束时间"
size="small"
style="width: 200px"
@change="changeDate"
/>
<el-select v-model="selectCode" style="margin: -7px 0px 0px 10px; width: 150px" size="small" @change="changeRainType">
<el-option v-for="item in dataOption" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div id="chartPopupRainC"></div>
</div>
</div>
<!-- 物资 -->
<div class="basicInfo" v-if="allData.dataList.materialDetails">
<div class="materialContent">
<div class="materialName">负责人：</div>
<div class="materialValue">{{ allData.dataList.header }}</div>
</div>
<div class="materialContent">
<div class="materialName">联系方式：</div>
<div class="materialValue">{{ allData.dataList.headerPhone }}</div>
</div>
<div class="materialContent">
<div class="materialName">物资详情：</div>
<div class="materialValue">{{ allData.dataList.materialDetails }}</div>
</div>
</div>
<!-- 排水管网 -->
<div class="basicInfo" v-if="allData.dataList.起点号">
<div class="basicContentCP">
<div class="contentInfo">
<div class="contentName">起点管井编号：</div>
<div class="contentValue">{{ allData.dataList.起点号 }}</div>
<div class="contentName">终点管井编号：</div>
<div class="contentValue">{{ allData.dataList.终点号 }}</div>
</div>
<div class="contentInfo">
<div class="contentName">起点地面高程：</div>
<div class="contentValue">{{ allData.dataList.地面高1 }}</div>
<div class="contentName">终点地面高程</div>
<div class="contentValue">{{ allData.dataList.地面高2 }}</div>
</div>
<div class="contentInfo">
<div class="contentName">起点井底高程：</div>
<div class="contentValue">{{ allData.dataList.井底高1 }}</div>
<div class="contentName">终点井底高程：</div>
<div class="contentValue">{{ allData.dataList.井底高2 }}</div>
</div>
<div class="contentInfo">
<div class="contentName">管网类型：</div>
<div class="contentValue" style="width: 100%">{{ allData.dataList.type }}</div>
</div>
</div>
</div>
<!--排水检查井 -->
<div class="basicInfo" v-if="allData.dataList.编号">
<div class="basicContentCP">
<div class="contentInfo">
<div class="contentName">管井编号：</div>
<div class="contentValue">{{ allData.dataList.编号 }}</div>
<div class="contentName">管井类型：</div>
<div class="contentValue">{{ allData.dataList.type }}</div>
</div>
<div class="contentInfo">
<div class="contentName">地面高程：</div>
<div class="contentValue">{{ allData.dataList.地面高 }}</div>
<div class="contentName">井底高程</div>
<div class="contentValue">{{ allData.dataList.井底高 }}</div>
</div>
</div>
</div>
<!--燃气管道 -->
<div class="basicInfo" v-if="allData.dataList.pipediameter">
<div class="basicContentCP">
<div class="materialContent">
<div class="materialName">设备名称：</div>
<div class="materialValue">{{ allData.dataList.deviceName }}</div>
</div>
<div class="materialContent">
<div class="materialName">设备地址：</div>
<div class="materialValue">{{ allData.dataList.address }}</div>
</div>
<div class="materialContent">
<div class="materialName">公称管径：</div>
<div class="materialValue">{{ allData.dataList.pipediameter }}</div>
</div>
</div>
</div>
<!-- 燃气 巡查反馈 模块 -->
<div class="basicInfo" v-if="allData.dataList.layerClass == 'rq_xunCha'">
<div class="materialContent">
<div class="materialName">派单时间：</div>
<div class="materialValue">2024-09-20 13:00</div>
</div>
<div class="materialContent">
<div class="materialName">工单编号</div>
<div class="materialValue">RQ00011</div>
</div>
<div class="materialContent">
<div class="materialName">责任单位：</div>
<div class="materialValue">巡查二分区</div>
</div>
<div class="materialContent">
<div class="materialName">位置：</div>
<div class="materialValue">XX路与XX路下交叉口</div>
</div>
<div class="materialContent">
<div class="materialName">处理时间：</div>
<div class="materialValue">--</div>
</div>
<div class="materialContent">
<div class="materialName">工单状况：</div>
<div class="materialValue">超时未完成</div>
<div class="submitControl" @click="submitControl">派发</div>
</div>
</div>
<!-- 街景图 -->
<div class="basicInfo" v-if="allData.dataList.code == 200" @click="showStreetLayer()">
<img :src="allData.dataList.data.base64" />
</div>
</div>
</template>
<script setup name="CesiumPopup">
import bus from '@/bus';
//import chartOption from '@/components/Echarts/pieChart_1.js';
//import { graphicReport, getoneRiverRisk } from '@/api/dataAnalysis/syntherticData';
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();
const allData = reactive({
dataList: {},
popupShow: false,
dateTime: [proxy.moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
});
const dataOption = ref([]);
const selectData = ref([]);
const selectCode = ref('');
const seleceName = ref('');
const unitName = ref('');
const propertyMonitorXList = ref([]);
const realRiverVal = ref(0);
//
function closePopupCES() {
allData.popupShow = false;
if (!!newfiberMapbox.getLayerByName('rqLine')) {
newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
}
// 取消之后回到中心点
// newfiberMapbox.map.easeTo({
// center: [109.488, 36.596],
// zoom: 13.6,
// pitch: 55,
// });
}
// 积水点
let chartJSD = null;
function changeDateJSD() {
setTimeout(() => {
if (!!chartJSD) chartJSD.dispose();
chartJSD = echarts.init(document.getElementById('chartHistoryJSD'));
chartOption.popupRainTrend.legend.data = ['水深'];
chartOption.popupRainTrend.yAxis.name = 'm';
chartOption.popupRainTrend.xAxis.data = [
'2024-07-12 12:30:20',
'2024-07-12 13:30:20',
'2024-07-12 14:30:20',
'2024-07-12 15:30:20',
];
chartOption.popupRainTrend.xAxis.boundaryGap = true;
chartOption.popupRainTrend.series.name = '水深';
chartOption.popupRainTrend.series.barWidth = 10;
chartOption.popupRainTrend.series.data = [0.23, 0.3, 0.25, 0.18];
// 设置鼠标滚轮放大缩小展示数据区间
// chartOption.popupRainTrend.dataZoom = [{ type: 'inside', startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2] }];
// if (propertyMonitorXList.value.length > 0) {
// chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
// } else {
// chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
// }
chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
chartJSD.clear();
chartJSD.setOption(chartOption.popupRainTrend);
});
}
// 雨量站弹窗内容
const changeDate = () => {
getSuperViseData();
};
// 河道水位计弹窗内容
function changeDateSW() {
setTimeout(() => {
getRiverData();
});
}
// 河道echarts
let chartRiver = null;
// async function getRiverData() {
// if (!!chartRiver) chartRiver.dispose();
// chartRiver = echarts.init(document.getElementById('chartHistoryZM'));
// let params = {
// riverCode: allData.dataList.stCode,
// };
// dataOption.value = [];
// let res = await getoneRiverRisk(params);
// if (res && res.code == 200) {
// let datas = res.data;
// console.log(datas, 'datas');
// // if (datas.propertyMonitorXList.length == 0) return;
// // echarts赋值
// chartOption.floodOneMapFXYP.xAxis[0].data = datas.riverX; //x轴
// chartOption.floodOneMapFXYP.series[1].data = datas.riverY; //河床高度
// chartOption.floodOneMapFXYP.series[1].markLine.data[0].yAxis = datas.sfZ; //设防水位
// chartOption.floodOneMapFXYP.series[1].markLine.data[0].label.formatter = '设防水位 ' + datas.sfZ + 'm';
// let arrs2 = [];
// datas.riverX.map(item => {
// arrs2.push(Number(datas.z) + Number(datas.gcZ));
// });
// realRiverVal.value = datas.z; //实时水位
// chartOption.floodOneMapFXYP.series[0].data = arrs2; //当前水位
// if (datas.riverX.length == 0) {
// chartOption.floodOneMapFXYP.graphic.invisible = false; //暂无数据
// } else {
// chartOption.floodOneMapFXYP.graphic.invisible = true; //暂无数据
// }
// chartRiver.clear();
// chartRiver.setOption(chartOption.floodOneMapFXYP);
// }
// }
// 降雨趋势折线图
let chartPopupRain = null;
const initEchartsPopup = () => {
if (!!chartPopupRain) chartPopupRain.dispose();
chartPopupRain = echarts.init(document.getElementById('chartPopupRainC'));
chartOption.popupRainTrend.legend.data = [seleceName.value];
chartOption.popupRainTrend.yAxis.name = unitName.value;
chartOption.popupRainTrend.xAxis.data = propertyMonitorXList.value;
chartOption.popupRainTrend.series.name = seleceName.value;
chartOption.popupRainTrend.series.data = selectData.value;
// 设置鼠标滚轮放大缩小展示数据区间
chartOption.popupRainTrend.dataZoom = [
{
type: 'inside',
startValue: propertyMonitorXList.value[propertyMonitorXList.value.length / 2],
},
];
if (propertyMonitorXList.value.length > 0) {
chartOption.popupRainTrend.graphic.invisible = true; //暂无数据
} else {
chartOption.popupRainTrend.graphic.invisible = false; //暂无数据
}
chartPopupRain.clear();
chartPopupRain.setOption(chartOption.popupRainTrend);
};
// 切换因子点击
const changeRainType = val => {
selectCode.value = val;
let obj = dataOption.value.filter(item => item.value == val)[0];
selectCode.value = obj.value;
seleceName.value = obj.label;
unitName.value = obj.propertyUnit;
selectData.value = obj.ylist;
initEchartsPopup();
};
//获取监测数据
// const getSuperViseData = async () => {
// let params = {
// startTime: allData.dateTime[0],
// endTime: allData.dateTime[1],
// stCode: allData.dataList['stCode'],
// };
// dataOption.value = [];
// let res = await graphicReport(params);
// if (res && res.code == 200) {
// let datas = res.data;
// if (datas.propertyMonitorXList.length == 0) return;
// datas.propertyMonitorList.map(item => {
// dataOption.value.push({
// value: item.stCode + item.monitorPropertyName,
// label: item.monitorPropertyName,
// propertyUnit: item.propertyUnit,
// ylist: item.ylist,
// });
// });
// if (Boolean(datas.propertyMonitorXList.length)) {
// propertyMonitorXList.value = [];
// datas.propertyMonitorXList.forEach(i => {
// propertyMonitorXList.value.push(i.substr(0, 16));
// });
// }
// selectCode.value = dataOption.value[0].value;
// seleceName.value = dataOption.value[0].label;
// // propertyMonitorXList.value = datas.propertyMonitorXList;
// unitName.value = datas.propertyMonitorList[0].propertyUnit;
// selectData.value = datas.propertyMonitorList[0].ylist;
// initEchartsPopup();
// }
// };
//巡查反馈派发
const submitControl = () => {
let data = {
comIDs: ['gdpf'],
};
bus.emit('publicDialog', data);
};
//街景弹框点击事件
const showStreetLayer = () => {
console.log('少爷在这里加~~~~~~~~~');
};
onMounted(() => {
bus.on('closeCesiumPopup', () => {
allData.popupShow = false;
if (!!newfiberMapbox.getLayerByName('rqLine')) {
newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
}
});
bus.on('popupcontent', params => {
console.log('popup接收地图标注点值---111', params);
allData.dataList = params.popupInfo;
let pipePopupDiv = document.getElementById('cesiumPopupID');
let popupCenter, center, offsets;
if (allData.dataList.geometry) {
if (allData.dataList.geometry.includes('LINESTRING')) {
popupCenter = turf.center(turf.feature(Terraformer.WKT.parse(allData.dataList.geometry))).geometry.coordinates;
} else {
popupCenter = Terraformer.WKT.parse(allData.dataList.geometry).coordinates;
}
center = [popupCenter[0], popupCenter[1]];
offsets = [-130, 200];
}
if (allData.dataList.pumpCode) {
allData.dataList.rainpump = JSON.parse(allData.dataList.rainpump);
allData.dataList.sweagepump = JSON.parse(allData.dataList.sweagepump);
}
window.window.pipePopup = new mapboxL7.Popup({
html: pipePopupDiv,
lngLat: {
lng: popupCenter ? popupCenter[0] : params.point[0],
lat: popupCenter ? popupCenter[1] : params.point[1],
},
anchor: 'center',
offsets: [-90, 130],
autoClose: false,
});
newfiberMapbox.addPopup(pipePopup);
newfiberMapbox.map.easeTo({
center: center,
zoom: 18,
});
allData.popupShow = true;
// 建筑社区弹框
if (params.popupInfo.type == 'HMJZYSQ') {
allData.popupShow = false;
let data = {
title: params.popupInfo.name,
comIDs: ['xxinformation'],
};
bus.emit('publicDialog', data);
setTimeout(() => {
bus.emit('xxinformationList', params);
}, 100);
}
if (allData.dataList.siteType == 'rain') changeDate(); //雨量站曲线图
if (allData.dataList.type == 'waterCourse') changeDateSW(); //河道水位计
if (allData.dataList.type == 'waterLoging') changeDateJSD(); //内涝积水点
});
});
onBeforeUnmount(() => {
bus.off('popupcontent');
bus.off('closeCesiumPopup');
});
</script>
<style lang="scss">
.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;
}
.cesiumPopup {
padding: 10px;
background: #003b6d;
border: 1px solid #6acefe;
#chartPopupRainC,
#chartHistoryZM,
#chartHistoryJSD {
width: 450px;
height: 260px;
margin-top: 10px;
}
.title {
background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
.titleNamePP {
display: flex;
align-items: center;
height: 22px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #b8ecff;
line-height: 22px;
margin: 5px;
width: 330px;
padding-left: 25px;
&:before {
// display: block;
// content: '';
// width: 3px;
// height: 16px;
// background: #00d1ff;
// margin-right: 10px;
}
}
.PopupClosed {
position: absolute;
top: 15px;
right: 20px;
z-index: 9999;
cursor: pointer;
color: #c6c6c6;
}
}
.materialContent {
display: flex;
align-items: center;
.materialName {
margin: 3px;
width: 80px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #b8ecff;
}
.materialValue {
margin: 3px;
width: 300px;
font-size: 14px;
font-weight: 400;
color: #b8ecff;
word-wrap: break-word;
}
.submitControl {
width: 80px;
font-size: 14px;
font-weight: 400;
color: azure;
background-color: #6acefe;
text-align: center;
cursor: pointer;
}
}
.basicContentCP {
.contentInfo {
display: flex;
align-items: center;
margin-left: 10px;
.contentName {
margin: 3px;
width: 100px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #b8ecff;
}
.contentName1 {
margin: 3px;
width: 185px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #b8ecff;
}
.contentValue {
margin: 3px;
width: 100px;
font-size: 14px;
font-weight: 400;
color: #b8ecff;
word-wrap: break-word;
}
}
}
}
</style>
