<template> <!-- 管网运行监测 --> <div class="PipelineOpera"> <div class="ListBoxHeader"> <div class="ListBoxHeader_font">管网运行监测</div> </div> <div class="Assessmentop"> <div class="tabContent"> <ul> <li class="listOne curCick" v-for="(i, index) in listData" :key="index" @click="showMapDalog(i)"> <div class="line flex flex-align-center"> <div class="lable">站点名称:</div> <div class="box flex flex-align-center flex-justcontent-center"> {{ i.siteName }} </div> <span :class="i.siteStatus == '在线' ? 'green' : 'rad'">{{ i.siteStatus }}</span> </div> <div class="line flex flex-align-center"> <div class="lable">水<i></i>深:</div> <div class="box flex flex-align-center flex-justcontent-center">{{ i.z || 0 }}米</div> </div> <div class="line flex flex-align-center"> <div class="lable">风险分析:</div> <div class="box flex flex-align-center flex-justcontent-center" :class="i.warnInfo != '无风险' ? 'cRad' : 'cGreen'"> {{ i.warnInfo }} </div> </div> </li> </ul> </div> </div> </div> <!-- 泵站运行监控 --> <div class="PumpStation"> <div class="ListBoxHeader"> <div class="ListBoxHeader_font">泵站运行监控</div> <div class="select_box flex flex-r" style="margin-bottom: 0"> <el-select class="picker" popper-class="fxddPopperClass" v-model="search.stCode" placeholder="请选择节点" style="width: 200px" > <el-option v-for="item in siteData" :key="item.stCode" :label="item.stName" :value="item.stCode" /> </el-select> </div> </div> <div class="bzxq flex"> <div style="width: 60%" class="flex"> <div style="margin-left: 15px" v-if="bzname == '工况'">泵站联系人:周晓峰</div> <div style="margin-left: 25px" v-if="bzname == '工况'">电话:1306035468</div> </div> <div class="switch flex"> <div class="head-item" v-for="(item, index) in bzList" :key="item" :class="bzname == item.name ? 'activedright' : ''" @click="bzclick(item, index)" > {{ item.name }} </div> </div> </div> <div class="PumpListBox" v-if="bzname == '工况'"> <div class="StationMc"> <div class="flex flex-justcontent-spacebetween"> <div class="drcpl"> <div class="percent" style="width: 70%"> <div class="round"></div> <div class="text">当日抽排量</div> <div class="value">878.9m³</div> </div> </div> <div class="percentVal flex-1">70%</div> </div> <div class="info flex flex-justcontent-spacebetween"> <div class="flex"> <div class="circle"></div> <div>累计抽排量</div> <div class="value">108.9</div> <div>万m³</div> </div> <div class="flex"> <div class="circle"></div> <div>前水池水位</div> <div class="value">8.9</div> <div>m</div> </div> </div> </div> <div class="StationList flex flex-justcontent-start"> <div class="item" v-for="item in list" :key="item.name"> <div class="img"> <img :src="bengzhanyunxing" alt="" v-if="item.status == 1" /> <img :src="bengzhantingzhi" alt="" v-else /> </div> <div class="name">{{ item.name }}</div> </div> </div> </div> <div class="bzsp" v-if="bzname == '视频'"> <video controls="controls" src="https://47.97.35.33:6089/video/2021/20210621.mp4" id="videoEvent" loop></video> </div> </div> <!-- 入河排口运行监控 --> <div class="DischargeMonitor"> <div class="ListBoxHeader"> <div class="ListBoxHeader_font">入河排口运行监控</div> </div> <div class="JkMonitor"> <div class="tableHeader"> <span class="tableHeaderList tableList1">排口监测点</span> <span class="tableHeaderList tableList2">当前出流状态</span> <span class="tableHeaderList tableList3">流量(m³/h)</span> </div> <Vue3SeamlessScroll :list="FXJCData" :singleHeight="33" :singleWaitTime="1500" :hover="true" class="tableBody"> <div class="tableBodyList" v-for="item in FXJCData"> <span class="tableBodyList_span1">{{ item.pk }}</span> <span class="tableBodyList_span2" :class="item.zk == '是' ? 'green' : 'rad'">{{ item.zk }} </span> <span class="tableBodyList_span3">{{ item.ls }}</span> <span class="tableBodyList_span4" @click="spshowMapDalog(item)"> <img :src="monitor_icon" alt="" /> </span> </div> </Vue3SeamlessScroll> </div> </div> <!-- 管网监测点详情 --> <!-- <el-dialog v-model="showPipe" id="dialogContent" title="管网运行监测" width="900px" append-to-body :close-on-click-modal="false" > <PipeDetail v-if="showPipe"></PipeDetail> </el-dialog> --> </template> <script setup> import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'; import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'; import bus from '@/bus'; import monitor_icon from '@/assets/images/fhpl/monitor_icon.png'; import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png'; import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png'; import PipeDetail from './PipeDetail.vue'; const bzList = ref([ { name: '工况', value: 1 }, { name: '视频', value: 2 }, ]); const bzname = ref('工况'); function bzclick(val) { bzname.value = val.name; } const listData = ref([ { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' }, { siteName: '大桥街与延河西路交叉口', siteStatus: '离线', warnInfo: '无风险' }, { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' }, ]); const search = ref({ stCode: 1, }); const siteData = [ { stName: '罗家坪排涝泵站', stCode: 1, }, ]; const FXJCData = ref([ { pk: '广通排口', zk: '是', ls: '0.1', }, { pk: '东三巷排口', zk: '否', ls: '0.0', }, { pk: '延河西路排口', zk: '否', ls: '0.0', }, { pk: '西沟大桥西排口1', zk: '否', ls: '0.0', }, { pk: '西沟大桥西排口2', zk: '否', ls: '0.0', }, ]); const list = [ { name: '1#泵', status: 1, }, { name: '2#泵', status: 0, }, { name: '3#泵', status: 0, }, { name: '4#泵', status: 1, }, ]; // const showPipe = ref(false); // 弹框 function showMapDalog(val) { console.log(val.siteName, 'val.siteName'); let data = { title: val.siteName, comIDs: ['gwpm', 'jcsj'], }; bus.emit('publicDialog', data); // showPipe.value = true; } // 积水弹框 function spshowMapDalog(val) { let data = { title: val.pk, comIDs: ['spjk'], }; bus.emit('publicDialog', data); // showPipe.value = true; } </script> <style lang="scss" scoped> .PipelineOpera { width: 450px; height: 33%; // background: yellow; .Assessmentop { position: relative; margin: 0 auto; width: 440px; height: calc(100% - 60px); // background: #0fcd22; .tabContent { height: calc(100% - 1px); ul { height: 100%; // overflow: hidden; overflow-y: auto; padding: 0 16px; list-style: none; cursor: pointer; .listOne { margin-top: 5px; background: linear-gradient(0deg, #008599 0%, #08596d 100%); border-radius: 4px; padding: 2px 20px; .line { position: relative; padding: 6px 0; overflow: hidden; .lable { width: 80px; font-size: 14px; font-weight: 400; color: #39f7ff; padding-right: 4px; i { display: inline-block; width: 28px; } span { display: inline-block; width: 7px; } } .lable2 { width: 190px; } .box { // height: 26px; width: 240px; padding: 3px 0; line-height: 20px; border-radius: 2px 2px 2px 2px; border: 1px solid #1cf5fc; text-align: center; font-size: 14px; font-weight: 400; color: #ffffff; } .box2 { width: 120px; } span { display: block; padding: 0 6px; line-height: 18px; margin-left: 10px; font-size: 12px; border: 1px solid #b7b7b7; border-radius: 14px; color: #b7b7b7; background: rgba(183, 183, 183, 0.15); white-space: nowrap; &.rad { border-color: #ff3737; color: #ff3737; background: rgba(255, 55, 55, 0.15); } &.green { border-color: #0fcd22; color: #0fcd22; background: rgba(15, 205, 34, 0.15); } } } } } } } } .PumpStation { width: 450px; height: 33%; margin-top: 3px; .bzxq { margin-top: 5px; color: #c6c6c6; height: 25px; font-family: Source Han Sans CN; align-items: center; .switch { position: relative; left: 18px; top: 5px; width: 35%; height: 25px; .head-item { width: 70px; margin-left: 5px; padding: 2px 3px; background: #00344f; height: 23px; text-align: center; cursor: pointer; position: relative; top: -3px; } .activedright { border: 1px solid #2cfce9; color: #e4f5ff; background: #166f84; } } } .PumpListBox { height: calc(100% - 80px); width: 435px; margin: 3px auto; .StationMc { width: 435px; height: 50%; // background: yellow; .drcpl { width: 360px; height: 22px; background: #155a89; border-radius: 11px; color: #fff; margin-top: 15px; .percent { position: relative; height: 100%; background: linear-gradient(90deg, #0066e5, #00b6ff); border-radius: 11px; .round { position: absolute; left: 4px; top: 3px; width: 16px; height: 16px; background: #02fff0; border-radius: 50%; } .text { position: absolute; left: 36px; top: 3px; } .value { position: absolute; right: 10px; top: 4px; } } } .percentVal { margin-top: 15px; color: #fff; font-size: 18px; font-weight: 400; color: #ffffff; margin-left: 30px; } .info { color: #fff; height: 40px; background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%); border-radius: 2px; border: 1px solid #74dde1; padding: 0 20px; margin-top: 20px; line-height: 40px; // background: red; > div { .circle { width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; } .value { font-size: 18px; margin-left: 5px; margin-right: 3px; } &:nth-of-type(1) { .circle { background-color: rgba(58, 255, 248, 1); position: relative; top: 16px; } .value { color: rgba(58, 255, 248, 1); } } &:nth-of-type(2) { .circle { background-color: rgba(24, 232, 122, 1); position: relative; top: 16px; } .value { color: rgba(24, 232, 122, 1); } } } } } .StationList { // width: 435px; height: 50%; // background: black; .item { padding-left: 5px; margin-top: 13px; margin-left: 48px; &:first-of-type { margin-left: 0; } .img { width: 66px; height: 66px; cursor: pointer; img { display: block; width: 100%; height: 100%; } } .name { text-align: center; color: #fff; font-size: 16px; } } } } .bzsp { height: calc(100% - 80px); width: 435px; margin: 3px auto; #videoEvent { width: 100%; height: 100%; } } } .DischargeMonitor { width: 450px; height: 31%; margin-top: 3px; .JkMonitor { margin: 5px auto; width: 430px; height: calc(100% - 50px); .tableHeader { width: 100%; height: 34px; background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%); border-radius: 2px; border: 1px solid #74dde1; display: flex; .tableHeaderList { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 34px; // padding-left: 5px; // text-align: center; } .tableList1 { width: 35%; padding-left: 15px; } .tableList2 { width: 30%; text-align: center; } .tableList3 { width: 20%; text-align: center; } } .tableBody { width: 100%; height: calc(100% - 35px); overflow: hidden; .tableBodyList { height: 34px; line-height: 34px; width: 100%; display: flex; /* 选择偶数行 */ &:nth-child(even) { background: linear-gradient(0deg, #008599 0%, #08596d 100%); } .tableBodyList_span1 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 34px; // text-align: center; width: 35%; padding-left: 15px; // background: red; // padding-left: 5px; } .tableBodyList_span2 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 34px; text-align: center; width: 30%; } .tableBodyList_span3 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 34px; text-align: center; width: 20%; } .tableBodyList_span4 { font-family: Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; height: 34px; line-height: 45px; text-align: center; width: 15%; cursor: pointer; // background: red; } .rad { color: #ff3737; } .green { color: #0fcd22; } } } } } .ListBoxHeader { height: 44px; line-height: 50px; width: 98%; background: url('@/assets/newImgs/partBg.png') no-repeat; background-size: 100% 100%; display: flex; align-items: center; justify-content: space-between; margin: 7px 0px 0px 8px; .ListBoxHeader_font { font-family: PangMenZhengDao; font-weight: 400; font-size: 23px; color: #ebfeff; padding-left: 34px; } // 搜索 .select_box { width: 48%; margin-bottom: 8px; } } ::-webkit-scrollbar { width: 5px; /* 设置滚动条的宽度 */ } </style>