<template>
|
<div class="pump-container">
|
<div class="content">
|
<div v-for="(item,index) in pumpList" :key="index" class="item">
|
<div class="item-title">{{index+6}}号{{item.title}}</div>
|
<div class="item-up">
|
<!-- <div class="item-up-img"></div>
|
<div class="item-up-img"></div>
|
<div class="item-up-img"></div>
|
<div class="item-up-img"></div> -->
|
<video
|
ref="videoRef"
|
:src="videoUrl"
|
width="160"
|
height="120"
|
autoplay
|
controls
|
@timeupdate="handleTimeUpdate"
|
></video>
|
<video
|
ref="videoRef"
|
:src="videoUrl"
|
width="160"
|
height="120"
|
autoplay
|
controls
|
@timeupdate="handleTimeUpdate"
|
></video>
|
<video
|
ref="videoRef"
|
:src="videoUrl"
|
width="160"
|
height="120"
|
autoplay
|
controls
|
@timeupdate="handleTimeUpdate"
|
></video>
|
<video
|
ref="videoRef"
|
:src="videoUrl"
|
width="160"
|
height="120"
|
autoplay
|
controls
|
@timeupdate="handleTimeUpdate"
|
></video>
|
<!--
|
src: 视频路径
|
width: 视频宽度
|
height: 视频高度
|
autoplay: 是否自动播放
|
controls: 是否显示控制条
|
@timeupdate: 视频播放时触发(获取视频播放的时间)
|
-->
|
|
</div>
|
<div class="item-center">
|
<div v-for="(centerItem,index01) in item.facilityList" :key="index01" class="center-item">
|
<img :src="centerItem.img" alt="">
|
<div class="center-value">
|
<span :style="{color:centerItem.color}">{{centerItem.value}}</span>
|
<span>{{centerItem.unit}}</span>
|
</div>
|
<div class="center-name">{{centerItem.label}}</div>
|
</div>
|
</div>
|
|
<div class="item-bottom">
|
<div class="bottom-item-info">
|
<img src="../../../assets/images/screen/pump/bottom-bg.png" alt="">
|
<div class="info-title" >{{ item.pList.info1.infoTitle}}</div>
|
<div class="info-status">
|
<div v-if="item.pList.info1.infoHandel == 0" class="status-text">运行中</div>
|
<div v-else class="status-text">已停止</div>
|
</div>
|
<div class="info-btn">
|
<!-- 远程控制+手动：显示开关阀 -->
|
<!-- 就地控制、远程控制+自动：不显示开关阀 -->
|
<el-button class="handel-btn" v-if="item.pList.info1.infoHandel == 1 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info1.order)">开泵</el-button>
|
<el-button class="handel-btn" v-if="item.pList.info1.infoHandel == 0 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info1.order)">关泵</el-button>
|
</div>
|
</div>
|
<div class="bottom-item-info">
|
<img src="../../../assets/images/screen/pump/bottom-bg.png" alt="">
|
<div class="info-title">{{ item.pList.info2.infoTitle}}</div>
|
<div class="info-status">
|
<div v-if="item.pList.info2.infoHandel == 0" class="status-text">运行中</div>
|
<div v-else class="status-text">已停止</div>
|
</div>
|
<div class="info-btn">
|
<el-button class="handel-btn" v-if="item.pList.info2.infoHandel == 1 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info2.order)">开泵</el-button>
|
<el-button class="handel-btn" v-if="item.pList.info2.infoHandel == 0 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info1.infoHandel,index,item.pList.info2.order)">关泵</el-button>
|
</div>
|
</div>
|
<div class="bottom-item-info" v-if="item.pList.info3.infoTitle">
|
<img src="../../../assets/images/screen/pump/bottom-bg.png" alt="">
|
<div class="info-title">{{ item.pList.info3.infoTitle}}</div>
|
<div class="info-status">
|
<div v-if="item.pList.info3.infoHandel == 0" class="status-text">运行中</div>
|
<div v-else class="status-text">已停止</div>
|
</div>
|
<div class="info-btn">
|
<el-button class="handel-btn" v-if="item.pList.info3.infoHandel == 1 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info3.infoHandel,index,item.pList.info3.order)">开泵</el-button>
|
<el-button class="handel-btn" v-if="item.pList.info3.infoHandel == 0 && item.isAuto == 1 && item.remode" @click="handelPump(item.pList.info3.infoHandel,index,item.pList.info3.order)">关泵</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { onMounted } from "vue";
|
|
import flowImg from "../../../assets/images/screen/pump/flow.png";
|
import liquidImg from "../../../assets/images/screen/pump/liquid.png";
|
import pressure from "../../../assets/images/screen/pump/pressure.png";
|
import pumpStatus from "../../../assets/images/screen/pump/status.png";
|
|
import pump from '../../../api/screen/pupm/index'
|
import overview from '@/api/screen/overview/index';
|
const {proxy} = getCurrentInstance();
|
const videoUrl="https://113.250.189.120:4012/rtp/65432500541119000103_65432500541329000107.live.mp4"
|
const pumpBaseData =
|
{
|
title: '泵房',
|
pointId:null,
|
img: '',
|
isAuto:2,
|
remode:false,
|
facilityList: [
|
{label: '当前模式', value: '就地模式', unit: '', color: '#FCCE4A', img: pumpStatus},
|
{label: '流速', value: '0.00', unit: 'm3/h', color: '#2CFFB1', img: flowImg},
|
{label: '管网压力', value: '0.00', unit: 'MPa', color: '#1CFBFF', img: pressure},
|
{label: '当前液位', value: '0.00', unit: 'm', color: '#FCCE4A', img: liquidImg},
|
],
|
pList: {
|
info1:{
|
order:1,
|
infoTitle:'',
|
infoHandel:1,//开关阀状态，1：关阀状态，0：开阀状态
|
vdata:[
|
{name: 'A相电流', value: '0.00', unit: 'A' },
|
{name: 'A相电压', value: '0.00', unit: 'V' },
|
{name: 'B相电流', value: '0.00', unit: 'A' },
|
{name: 'B相电压', value: '0.00', unit: 'V' },
|
{name: 'C相电流', value: '0.00', unit: 'A' },
|
{name: 'C相电压', value: '0.00', unit: 'V' }
|
]
|
},
|
info2:{
|
order:2,
|
infoTitle:'',
|
infoHandel:1,
|
vdata:[
|
{name: 'A相电流', value: '0.00', unit: 'A' },
|
{name: 'A相电压', value: '0.00', unit: 'V' },
|
{name: 'B相电流', value: '0.00', unit: 'A' },
|
{name: 'B相电压', value: '0.00', unit: 'V' },
|
{name: 'C相电流', value: '0.00', unit: 'A' },
|
{name: 'C相电压', value: '0.00', unit: 'V' }
|
]
|
},
|
info3:{
|
order:3,
|
infoTitle:'',
|
infoHandel:1,
|
}
|
}
|
}
|
const pumpList = ref([])
|
function setPumpData(){
|
pumpList.value = []
|
pumpList.value[0] = JSON.parse(JSON.stringify(pumpBaseData))
|
pumpList.value[1] = JSON.parse(JSON.stringify(pumpBaseData))
|
// pumpList.value[2] = JSON.parse(JSON.stringify(pumpBaseData))
|
|
pumpList.value.forEach((item,index) =>{
|
if(index === 0){
|
item.pList.info1.infoTitle = "1#泵"
|
item.pList.info2.infoTitle ="2#泵"
|
item.pList.info3.infoTitle = "3#泵"
|
}else if(index === 1){
|
item.pList.info1.infoTitle ="1#泵"
|
item.pList.info2.infoTitle ="2#泵"
|
}
|
})
|
}
|
async function getPumpList(){
|
|
await pump().getPumpData().then((res) =>{
|
|
res.data.forEach((item,index) =>{
|
if(item.pointCode === 'JKD001'){
|
pumpList.value[0].remode = item.remode
|
pumpList.value[0].remode = pumpList.value[0].remode == 'true' ? true : false
|
|
pumpList.value[0].isAuto = item.pattern
|
pumpList.value[0].pList.info1.infoHandel = item.B001
|
pumpList.value[0].pList.info2.infoHandel = item.B002
|
pumpList.value[0].pointId = item.pointId
|
pumpList.value[0].title = item.pointName
|
|
}else if(item.pointCode === 'JKD002'){
|
pumpList.value[1].remode = item.remode
|
pumpList.value[1].remode = pumpList.value[1].remode == 'true' ? true : false
|
|
pumpList.value[1].isAuto = item.pattern
|
pumpList.value[1].pList.info1.infoHandel = item.B003
|
pumpList.value[1].pList.info2.infoHandel = item.B004
|
pumpList.value[1].pList.info3.infoHandel = item.B007
|
pumpList.value[1].pointId = item.pointId
|
pumpList.value[1].title = item.pointName
|
|
}else if(item.pointCode === 'JKD003'){
|
pumpList.value[2].remode = item.remode
|
pumpList.value[2].remode = pumpList.value[2].remode == 'true' ? true : false
|
|
pumpList.value[2].isAuto = item.pattern
|
pumpList.value[2].pList.info1.infoHandel = item.B005
|
pumpList.value[2].pList.info2.infoHandel = item.B006
|
pumpList.value[2].pointId = item.pointId
|
pumpList.value[2].title = item.pointName
|
}
|
})
|
console.log('pumpList.value',pumpList.value)
|
})
|
|
}
|
// 获取流量、压力、液位数据
|
const getData = async()=>{
|
await overview().getDataOverview().then((res) =>{
|
|
function setData(item,index1){
|
|
if(item.columnsCode === '1011'){
|
pumpList.value[index1].facilityList[0].value = item.columnsValue
|
}
|
if(item.columnsCode === '1002'){
|
pumpList.value[index1].facilityList[1].value = item.columnsValue
|
}
|
if(item.columnsCode === '1001'&&(item.facilityCode === 'YWJ001' || item.facilityCode === 'YWJ002' || item.facilityCode === 'YWJ003')){
|
pumpList.value[index1].facilityList[2].value = item.columnsValue
|
|
if(index1 == 0){
|
pumpList.value[index1].facilityList[2].label = '水源点液位'
|
}else if(index1 == 1){
|
pumpList.value[index1].facilityList[2].label = '水厂液位'
|
}else if(index1 == 2){
|
pumpList.value[index1].facilityList[2].label = '水厂液位'
|
}
|
}
|
if(item.columnsCode === '1001'&& (item.facilityCode === 'YWJ004' || item.facilityCode === 'YWJ005' || item.facilityCode === 'YWJ006')){
|
pumpList.value[index1].facilityList[3].value = item.columnsValue
|
pumpList.value[index1].facilityList[3].label = '当前液位'
|
}
|
}
|
if(res.data){
|
res.data.forEach((item,index1)=>{
|
|
if( item.pointCode === 'JKD001'){
|
// console.log(1,item.pointName)
|
item.dataList.forEach((item1)=>{
|
setData(item1,0)
|
})
|
|
}else if(item.pointCode === 'JKD002'){
|
// console.log(2,item.pointName)
|
item.dataList.forEach((item1)=>{
|
setData(item1,1)
|
})
|
|
}else if(item.pointCode === 'JKD003'){
|
// console.log(3,item.pointName,item.dataList)
|
item.dataList.forEach((item1)=>{
|
setData(item1,2)
|
})
|
}
|
})
|
}
|
})
|
pumpList.value.forEach((item) =>{
|
item.facilityList.forEach((chidItem1) =>{
|
chidItem1.value = Number(chidItem1.value).toFixed(2)
|
})
|
})
|
}
|
|
//控制当前模式
|
const handelModel = (isAuto,id,num) =>{
|
if(isAuto == 2 && num === 2){
|
console.log('点击无效')
|
}else if(isAuto == 1 && num == 1){
|
console.log('点击无效')
|
}else{
|
let text = ''
|
let status = null
|
if(isAuto == 2){
|
text = '确认切换为手动控制模式？'
|
status = 1
|
}else{
|
text = '确认切换为自动控制模式？'
|
status = 2
|
}
|
proxy.$modal.confirm(text).then(async function () {
|
await pump().handelPumpStatus({pointId:id,status:status})
|
}).then(async() => {
|
proxy.$modal.msgSuccess("操作成功");
|
await getPumpList()
|
}).catch(() => {
|
proxy.$modal.msg("取消操作");
|
});
|
}
|
}
|
//开关泵
|
const handelPump = (val,index,order) =>{
|
console.log('val',val,index,order)
|
|
//控制不能同时开两个泵，同一个泵房中，一个开启，另一个就不能开启
|
let pump1 = order == 1 && (pumpList.value[index].pList.info1.infoHandel == 0) && val == 1
|
let pump2 = order == 2 && (pumpList.value[index].pList.info2.infoHandel == 0) && val == 1
|
let pump3 = order == 3 && (pumpList.value[index].pList.info3.infoHandel == 0) && val == 1
|
console.log('pump1',pump1,pump2)
|
if(pump1 || pump2){
|
proxy.$modal.confirm('不能同时开泵！')
|
}else{
|
|
let text = ''
|
if(val == 1) {
|
text = '确认开阀？'
|
}else if(val == 0){
|
text = '确认关阀？'
|
}
|
proxy.$modal.confirm(text).then(async function () {
|
let dataEnd
|
switch(val){
|
case 1:
|
dataEnd = "_start";
|
break;
|
case 0:
|
dataEnd = "_stop";
|
break;
|
}
|
|
let dataPre
|
if(index == 0 && order == 1){
|
dataPre = 'B001'
|
}else if(index == 0 && order == 2){
|
dataPre = 'B002'
|
}else if(index == 1 && order == 1){
|
dataPre = 'B003'
|
}else if(index == 1 && order == 2){
|
dataPre = 'B004'
|
}else if(index == 2 && order == 1){
|
dataPre = 'B005'
|
}else if(index == 2 && order == 2){
|
dataPre = 'B006'
|
}else if(index == 1 && order == 3){
|
dataPre = 'B007'
|
}
|
|
|
let dataObj = dataPre + dataEnd
|
|
await pump().handelPump({data:dataObj}).then( async(res) =>{
|
if(res.code == 200){
|
proxy.$modal.msgSuccess("操作成功,等待设备响应！");
|
await getPumpList()
|
}
|
})
|
})
|
// .then(async() => {
|
// })
|
}
|
}
|
|
let requestTimer1 = ref()
|
let requestTimer2 = ref()
|
|
onMounted(async() =>{
|
setPumpData()
|
await getPumpList()
|
await getData()
|
|
requestTimer1.value = setInterval(async()=>{
|
// await getPumpList()
|
},1000)
|
|
requestTimer2.value = setInterval(async()=>{
|
// await getData()
|
},5000)
|
})
|
|
onUnmounted(() =>{
|
clearInterval(requestTimer1.value)
|
clearInterval(requestTimer2.value)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.pump-container {
|
width: 100%;
|
height: 100%;
|
display:flex;
|
justify-content:center;
|
align-items: center;
|
.content{
|
width: 90%;
|
height: 92%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.item{
|
width: 46%;
|
height: 100%;
|
background-image: url("../../../assets/images/screen/pump/item_bg.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
.item-title{
|
width: 100%;
|
height: 10%;
|
background-image: url("../../../assets/images/screen/pump/title.png");
|
background-repeat: no-repeat;
|
background-position: center;
|
background-size: 35% 60%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 400;
|
font-size: 18px;
|
color: #FFFFFF;
|
}
|
.item-up{
|
width: 100%;
|
height: 26%;
|
padding: 0 5%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.item-up-img{
|
width: 42%;
|
height: 100%;
|
background-image: url("../../../assets/images/screen/facility/no-img.png");
|
background-position: center;
|
background-repeat: no-repeat;
|
background-size: 50% auto;
|
}
|
.item-up-right{
|
width:58%;
|
height: 100%;
|
display: flex;
|
justify-content: space-evenly;
|
flex-direction: column;
|
align-items: center;
|
padding:2% 0;
|
.now{
|
width: 100%;
|
height: 60%;
|
background: rgba(91, 117, 124, 0.45);
|
border-radius: 4px;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
img{
|
width:54px;
|
height:48px;
|
margin-right:2%;
|
margin-left: 2%;
|
}
|
.name{
|
font-weight: 400;
|
font-size: 16px;
|
color: #CFEDFF;
|
// margin-right: 2%;
|
}
|
.now-value{
|
font-weight: 400;
|
font-size: 18px;
|
color: #1BCB6D;
|
}
|
.now-model{
|
width:42%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.check{
|
width:48%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.check-box{
|
width:18px;
|
height: 18px;
|
// background: #2c7fdd;
|
background: rgba(12,12,12,0.4);
|
border-radius:4px;
|
position: relative;
|
}
|
.checked-box{
|
width:18px;
|
height: 18px;
|
background: #2c7fdd;
|
// background: rgba(12,12,12,0.4);
|
border-radius:4px;
|
position: relative;
|
}
|
.selected{
|
width:16px;
|
height: 8px;
|
position: absolute;
|
border-bottom:2px solid #e3eee8;
|
border-left:2px solid #f9fcfa;
|
top:calc(50% - 6px);
|
left:6%;
|
transform: rotate(-45deg);
|
}
|
.check-title{
|
font-weight:600;
|
font-size: 14px;
|
// color: rgba(93, 168, 255, 1);
|
color: #CFEDFF;
|
}
|
}
|
}
|
}
|
}
|
.item-center{
|
width: 100%;
|
height: 26%;
|
padding: 0 5%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.center-item{
|
width: 28%;
|
height: 100%;
|
background-image: url("../../../assets/images/screen/pump/center-bg.png");
|
background-repeat: no-repeat;
|
background-position: center;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 3% 0;
|
justify-content:space-evenly;
|
img{
|
width:74px;
|
height: 80px;
|
}
|
.center-value{
|
display:block;
|
height: 15%;
|
text-align: center;
|
span:first-child{
|
font-weight: 400;
|
font-size: 18px;
|
margin-right: 5px;
|
}
|
span:last-child{
|
font-weight: 400;
|
font-size: 14px;
|
color: #B8C6D3;
|
}
|
}
|
.center-name{
|
display:block;
|
height: 20%;
|
text-align: center;
|
font-weight: 400;
|
font-size: 13px;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.item-bottom{
|
width: 100%;
|
height: 38%;
|
padding: 0 5%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.bottom-item-info{
|
height: 100%;
|
width: 60%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
flex-direction: column;
|
position: relative;
|
padding: 1% 5% 6%;
|
img{
|
position: absolute;
|
top:2%;
|
width:200px;
|
|
height:90%;
|
}
|
.info-title{
|
height: 16%;
|
width: 100%;
|
z-index: 100;
|
font-weight: 400;
|
font-size: 18px;
|
color: #D7FEFF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.info-status{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width:166px;
|
height:50px;
|
border-radius:10px;
|
position: absolute;
|
bottom: 50%;
|
box-shadow: 0 0 20px 2px rgba(22,155,214,0.2);
|
background: linear-gradient(to right,rgba(22,155,214,0.5),rgba(207,237,255,0.1));
|
.status-text{
|
color: #00FBFF;
|
font-size:20px;
|
letter-spacing:3px;
|
}
|
// .status-off{
|
// color: #00FBFF;
|
// font-size:20px;
|
// letter-spacing:3px;
|
// }
|
}
|
// .info-container{
|
// height: 72%;
|
// width: 100%;
|
// z-index: 100;
|
// //background: rgba(0, 255, 240, 0.38);
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// justify-content: space-between;
|
// .info-content{
|
// width: 100%;
|
// flex-wrap: nowrap;
|
// display: flex;
|
// justify-content:center;
|
// align-items: center;
|
// font-weight: 400;
|
// font-size: 16px;
|
// color: #B8C6D3;
|
// .point-icon{
|
// width: 8px;
|
// height: 8px;
|
// background: rgba(20,220,232,0.78);
|
// transform: rotate(45deg);
|
// margin-right: 10%;
|
// }
|
// .point-label{
|
// letter-spacing: 2px;
|
// }
|
// .point-value{
|
// font-weight: 400;
|
// color: #16FCFF;
|
// margin-left:6%;
|
// margin-right: 4%;
|
// }
|
// }
|
// }
|
.info-btn{
|
height: 13%;
|
width: 100%;
|
z-index: 100;
|
display: flex;
|
justify-content: center;
|
.handel-btn{
|
// width: 96%;
|
width: 100px;
|
font-weight: 400;
|
font-size: 22px;
|
color: #91F9FF;
|
border: 2px solid #00FBFF;
|
background:#169BD6;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
