<template>
<!-- 厂站设施弹窗 -->
<div class="cesiumPopup" id="cesiumPopupID" v-show="allData.popupShow">
<div class="title">
<div class="titleNameIcon"></div>
<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">杨家岭隧道新区方向五十米处</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"
style="margin-top: 10px"
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";
import dialogTabsStore from "@/store/modules/dialogTabs";
const useDialogTabs = dialogTabsStore();
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"),
],
streetPosition: null,
});
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 = {
title: allData.dataList.roadName,
comIDs: ["gdpf"],
getSiteId: allData.dataList.id,
};
bus.emit("publicDialog", data);
};
//街景弹框点击事件
const showStreetLayer = () => {
useDialogTabs.addPosition(allData.streetPosition);
let data = {
title: allData.dataList.roadName,
comIDs: ["streetscape"],
};
bus.emit("publicDialog", data);
// setTimeout(() => {
// bus.emit("streetPosition", allData.streetPosition);
// }, 200);
};
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.streetPosition = params.point;
allData.dataList = params.popupInfo;
let pipePopupDiv = document.getElementById("cesiumPopupID");
let popupCenter,
center,
offsets = null;
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];
} else {
center = [params.point[0], params.point[1] + 0.0005];
offsets = [-150, 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: offsets ? 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 (
params.popupInfo.type == "paishuiSupervise" ||
params.popupInfo.type == "ranQi_supervise"
) {
allData.popupShow = false;
let title =
params.popupInfo.type == "paishuiSupervise"
? "水位计：" + params.popupInfo.name
: "燃气井下探测器：" + params.popupInfo.name;
useDialogTabs.setMapType(params.popupInfo.type, title);
let data = {
// 燃气井下探测器 device_id
title,
comIDs: ["JC_dialog", "JC_oldList"],
SiteNo:
params.popupInfo.type == "paishuiSupervise"
? params.popupInfo.siteNo
: params.popupInfo.device_id,
};
bus.emit("publicDialog", data);
// setTimeout(() => {
// bus.emit("xxinformationList", params);
// }, 100);
return;
}
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: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
border-radius: 6px;
border: 1px solid #6acefe;
box-shadow: inset 0 0 5px 5px #47eef38a;
#chartPopupRainC,
#chartHistoryZM,
#chartHistoryJSD {
width: 450px;
height: 260px;
margin-top: 10px;
}
.title {
background: linear-gradient(
90deg,
rgba(14, 210, 254, 0.5) 0%,
rgba(31, 221, 255, 0.2) 100%
);
background-size: cover;
display: flex;
align-items: center;
.titleNameIcon {
height: 17px;
width: 14px;
background: url("@/assets/images/titleIcon.png") no-repeat;
background-size: 100% 100%;
margin-left: 10px;
}
.titleNamePP {
width: 450px;
height: 22px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #b8ecff;
line-height: 22px;
margin: 5px;
overflow: hidden;
text-overflow: ellipsis; /* 超出宽度后显示省略号 */
white-space: nowrap; /* 限制不允许换行 */
&:before {
// display: block;
// content: '';
// width: 3px;
// height: 16px;
// background: #00d1ff;
// margin-right: 10px;
}
}
.PopupClosed {
position: absolute;
top: 20px;
right: 20px;
z-index: 9999;
cursor: pointer;
color: #cee3ecff;
}
}
.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>
