- <template>
- <!-- 管网监测点详情 -->
- <div class="pipeMonitorDetail">
- <el-tabs v-model="tabActive" @tab-change="changeTab">
- <el-tab-pane label="管网剖面" name="1"></el-tab-pane>
- <el-tab-pane label="监测数据" name="2"></el-tab-pane>
- </el-tabs>
- <div class="content" v-loading="dataLoading">
- <!-- 管网剖面 -->
- <div class="pipePou flex" v-if="tabActive == 1">
- <div class="leftP">
- <!-- 井深 -->
- <div class="part partJ">井深:{{ pipeDetail.bottomBuriedDepthTemp || '--' }}米</div>
-
- <!-- 水高度 -->
- <img src="@/assets/newImgs/HMScreen/pipeW.png" alt="" class="water" :style="{ height: waterHeight + 'px' }" />
- <div :class="['part', 'partW', realData.z > pipeDetail.pipelineDiameterTemp ? 'red' : '']">水深:{{ realData.z || '--' }}米</div>
-
- <!-- 管径 -->
- <div class="part partJ" style="top: 210px">管径:{{ pipeDetail.pipelineDiameterTemp || '--' }}米</div>
- <div class="partGJ"></div>
-
- <!-- 流速 -->
- <div class="part partL">流速:{{ realData.va || '--' }} m/s</div>
-
- <!-- 设备 -->
- <img src="@/assets/newImgs/HMScreen/equip.png" alt="" class="equipA" />
- </div>
- <div class="rightP">
- <div class="title">基本信息</div>
- <div class="part flex">
- <div class="biaoti">站点名称:</div>
- <div class="cont">{{ realData.stName }}</div>
- </div>
- <div class="part flex">
- <div class="biaoti">所在位置:</div>
- <div class="cont">{{ pipeDetail.address || '--' }}</div>
- </div>
- <div class="part flex">
- <div class="biaoti">建设方式:</div>
- <div class="cont">{{ pipeDetail.buildType == 'owner' ? '自建' : '共享' }}</div>
- </div>
- <div class="part flex">
- <div class="biaoti">管网直径:</div>
- <div class="cont">{{ pipeDetail.pipelineDiameterTemp || '--' }} 米</div>
- </div>
- <div class="part flex">
- <div class="biaoti">安装高度:</div>
- <div class="cont">{{ pipeDetail.installHeight || '--' }} 米</div>
- </div>
- <div class="part flex">
- <div class="biaoti">安装日期:</div>
- <div class="cont">{{ pipeDetail.installDate || '--' }}</div>
- </div>
-
- <div class="title" style="margin-top: 30px">实时数据</div>
- <div class="part flex">
- <div class="biaoti">水深:</div>
- <div class="cont">{{ realData.z || '--' }} 米</div>
- </div>
- <div class="part flex">
- <div class="biaoti">流速:</div>
- <div class="cont">{{ realData.va || '--' }}m/s</div>
- </div>
- <div class="part flex">
- <div class="biaoti">SS:</div>
- <div class="cont">{{ realData.turb || '--' }} mg/L</div>
- </div>
- <div class="part flex">
- <div class="biaoti">更新时间:</div>
- <div class="cont">{{ realData.tt || '--' }}</div>
- </div>
-
- <div class="title">责任信息</div>
- <div class="part flex">
- <div class="biaoti">城管负责人:</div>
- <div class="cont">张小强 13328873032</div>
- </div>
-
- <!-- 实时数据 -->
- <div v-if="ifReal">
- <!-- 有满管、管网冒溢风险时推送消息 -->
- <div class="part flex" v-if="realData.z >= (pipeDetail.pipelineDiameterTemp || '2')">
- <div class="biaoti">
- <el-button type="warning" @click="dialogShow = true">有满管风险,通知相关责任人进行处理</el-button>
- </div>
- </div>
- <div class="part flex" v-if="realData.z >= (pipeDetail.bottomBuriedDepthTemp || '2')">
- <div class="biaoti">
- <el-button type="warning" @click="dialogShow = true">有管网冒溢风险,通知相关责任人进行处理</el-button>
- </div>
- </div>
- </div>
-
- <!-- 历史数据 -->
- <div v-if="!ifReal">
- <div class="part flex" v-if="realData.z >= (pipeDetail.pipelineDiameterTemp || '2')">
- <div class="biaoti" @click="dialogShow = true"><el-button type="warning">已短信通知相关责任人进行处理</el-button></div>
- </div>
- </div>
- </div>
- </div>
- <!-- 监测数据 -->
- <div class="pipeMonitor" v-if="tabActive == 2">
- <div class="selectToolList">
- <el-date-picker
- v-model="pipeTime"
- type="daterange"
- value-format="YYYY-MM-DD"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- style="width: 240px"
- :clearable="false"
- />
- <el-button type="warning" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
- </div>
- <div id="monitorPipe" v-loading="pipeLoading"></div>
- </div>
-
- <!-- 发送短信给城管局相关人员 -->
- <el-dialog v-model="dialogShow" title="监测报警反馈" width="600px" append-to-body>
- <SendMessage :realData="realData" :pipeDetail="pipeDetail"></SendMessage>
- </el-dialog>
- </div>
- </div>
- </template>
-
- <script setup>
- import chartOption from '@/components/Echarts/pieChart_1.js';
- import SendMessage from '@/views/sponeScreen/waterFlood/sendMessage.vue';
- import * as echarts from 'echarts';
- import { graphicReport, realtimeDataLatest, getStationDetail } from '@/api/dataAnalysis/syntherticData';
-
- const { proxy } = getCurrentInstance();
- const tabActive = ref('1');
- const pipeTime = ref([proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
- const realData = ref({});
- const pipeDetail = ref({});
- const pipeLoading = ref(true);
- const valIndex = ref(0);
- const dialogShow = ref(false);
- const waterHeight = ref(0);
- const dataLoading = ref(true);
- const ifReal = ref(true);
-
- const props = defineProps({
- pipeParams: {
- type: Object,
- },
- });
-
- // tab切换
- function changeTab(val) {
- if (val == 2) {
- setTimeout(() => {
- initPipeChart();
- });
- }
- }
- // 监测数据日期搜索
- function changePipeDate() {
- initPipeChart();
- }
-
- //管网监测趋势图
- let pipeChart = null;
- const initPipeChart = async () => {
- pipeChart && pipeChart.dispose();
- pipeChart = echarts.init(document.getElementById('monitorPipe'));
- let params = {
- startTime: pipeTime.value[0],
- endTime: pipeTime.value[1],
- stCode: props.pipeParams.stCode,
- };
- pipeLoading.value = true;
- //管网监测值
- let res = await graphicReport(params);
- if (res && res.code == 200) {
- let datas = res.data;
- chartOption.floodOneMapPipeSupervise.xAxis[0].data = datas.propertyMonitorXList;
- chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水深(m)';
- chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
-
- chartOption.floodOneMapPipeSupervise.legend.data = ['水深', '雨量'];
- chartOption.floodOneMapPipeSupervise.series[0].name = '水深';
- chartOption.floodOneMapPipeSupervise.series[0].data = datas.propertyMonitorList[0].ylist;
- }
-
- // 雨量站数据
- let params2 = {
- startTime: pipeTime.value[0],
- endTime: pipeTime.value[1],
- stCode: pipeDetail.value.referRainStCode,
- };
- let res2 = await graphicReport(params2);
- if (res2 && res2.code == 200) {
- let datas = res2.data;
- chartOption.floodOneMapPipeSupervise.series[1].data = datas.propertyMonitorList[0].ylist;
- chartOption.floodOneMapPipeSupervise.yAxis[1].max = Math.max(...datas.propertyMonitorList[0].ylist) + 0.5;
- chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
- chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
- chartOption.floodOneMapPipeSupervise.series[1].barWidth = 'auto';
- chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = true; //翻转
- chartOption.floodOneMapPipeSupervise.yAxis[1].nameLocation = 'start'; //坐标轴名称显示位置
- if (datas.propertyMonitorXList.length > 0) {
- chartOption.floodOneMapPipeSupervise.graphic.invisible = true; //暂无数据
- } else {
- chartOption.floodOneMapPipeSupervise.graphic.invisible = false; //暂无数据
- }
- }
- pipeChart.clear();
- pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
- pipeLoading.value = false;
- };
-
- // 获取管网详情实时数据
- function getDataReal() {
- // 实时数据
- realtimeDataLatest(props.pipeParams.stCode).then(res => {
- realData.value = res.data;
- getWaterHeight();
- });
- }
-
- // 获取管网详情某一天数据
- async function getHistoryData() {
- let params = {
- startTime: localStorage.getItem('setRainDateKF'),
- endTime: localStorage.getItem('setRainDateKF'),
- stCode: props.pipeParams.stCode,
- };
- pipeLoading.value = true;
- //管网监测值
- let res = await graphicReport(params);
- if (res && res.code == 200) {
- let datas = res.data;
- // 取最大的值
- let max = Math.max(...nameToData(datas.propertyMonitorList, '水位'));
- valIndex.value = nameToData(datas.propertyMonitorList, '水位').findIndex(item => {
- return item == max;
- });
- realData.value.z = nameToData(datas.propertyMonitorList, '水位')[valIndex.value];
- realData.value.va = nameToData(datas.propertyMonitorList, '流速')[valIndex.value];
- realData.value.turb = nameToData(datas.propertyMonitorList, 'SS')[valIndex.value];
- realData.value.tt = datas.propertyMonitorXList[valIndex.value];
- realData.value.stName = datas.propertyMonitorList[0].stName;
- getWaterHeight();
- }
- }
- // 公共方法,根据监测名称来匹配对应的数值
- function nameToData(data, name) {
- let arr = data.filter(item => item.monitorPropertyName == name);
- let lists = arr[0] ? arr[0].ylist : [];
- return lists;
- }
-
- // 获取站点详情
- async function getStationData() {
- dataLoading.value = true;
- let res = await getStationDetail(props.pipeParams.id);
- if (res && res.code == 200) {
- pipeDetail.value = res.data;
- // 项目建设中需要获取某一天的监测数据,排水防涝里面获取实时数据
- if (ifReal.value) {
- getDataReal();
- } else {
- pipeTime.value = [localStorage.getItem('setRainDateKF'), localStorage.getItem('setRainDateKF')];
- getHistoryData();
- }
- }
- }
-
- // 水深高度
- function getWaterHeight() {
- // 水深高度判断 非满管 满管溢流
- if (realData.value.z > pipeDetail.value.bottomBuriedDepthTemp) {
- waterHeight.value = 390;
- } else if (realData.value.z <= pipeDetail.value.pipelineDiameterTemp) {
- waterHeight.value = (140 * realData.value.z) / pipeDetail.value.pipelineDiameterTemp;
- } else if (realData.value.z > pipeDetail.value.pipelineDiameterTemp) {
- // 满管溢流
- waterHeight.value =
- 140 +
- (250 * (realData.value.z - pipeDetail.value.pipelineDiameterTemp)) /
- (pipeDetail.value.bottomBuriedDepthTemp - pipeDetail.value.pipelineDiameterTemp);
- }
- dataLoading.value = false;
- }
-
- onMounted(() => {
- if (localStorage.getItem('showHistoryMonitor') == '1') {
- ifReal.value = false; //项目建设历史数据
- } else {
- ifReal.value = true; //其他模块最新数据
- }
- getStationData();
- });
- </script>
-
- <style lang="scss" scoped>
- // prettier-ignore
- .pipeMonitorDetail {
- width: 100%;
- .content {
- height: 600PX;
- .pipePou{
- .leftP{
- width:530PX;
- height: 570PX;
- background: url('@/assets/newImgs/HMScreen/pipe.gif') no-repeat;
- background-size:100% 100%;
- position:relative;
- .water{
- position:absolute;
- bottom:50PX;
- left:0px;
- z-index: 10;
- width:530PX;
- height: 128PX;
- }
- .partGJ{
- width:100%;
- border:1px dashed #484848;
- position:absolute;
- bottom:180PX;
- left:0px;
- z-index: 210;
- }
- .part{
- background: #0874EF;
- border-radius: 12px;
- padding:0px 10px;
- height: 26px;
- line-height: 26px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- font-size: 16px;
- color: #FFFFFF;
- text-align: center
- }
- .partW{
- position:absolute;
- bottom:190PX;
- left:60px;
- z-index: 10;
- }
- .partJ{
- position:absolute;
- top:175PX;
- left:325px;
- z-index: 20;
- }
- .partL{
- position:absolute;
- bottom:190PX;
- left:325px;
- z-index: 10;
- }
- .equipA{
- position:absolute;
- bottom:60PX;
- left:30px;
- z-index: 15;
- width:470PX;
- height: 339PX;
- }
-
- }
- .rightP{
- margin-left:30px;
- color: #fff;
- .title{
- border-left:5px solid #67BCFA;
- padding-left:8px;
- font-size: 16px;
- font-weight: 600;
- margin-top:10px;
- }
- .part{
- margin:14px 0px 10px 10px;
- color: #C8DBE0;
- font-size: 15px;
- .biaoti{
- width:100px;
- }
- }
- }
- }
- #monitorPipe {
- width: 100%;
- height: 520px;
- margin-top: 10px;
- }
- }
- }
- </style>