11/10问题修改提交

pull/28/head
孙萌 2023-11-10 17:23:30 +08:00
parent 5d1c0d32a3
commit 5ca623bb55
15 changed files with 353 additions and 191 deletions

View File

@ -147,4 +147,8 @@ export default {
getReadControlSensorInputSynthesis(data){ getReadControlSensorInputSynthesis(data){
return sendGetRequest('/readControl/sensorInputSynthesis',data) return sendGetRequest('/readControl/sensorInputSynthesis',data)
}, },
//控制器 主页查看控制器气象站实时数据
getControlRtDatastation(data){
return sendGetRequest('/getcontrol/rtDatastation',data)
},
}; };

View File

@ -786,6 +786,7 @@
.btn.green { .btn.green {
background: #00BB88; background: #00BB88;
opacity: 0.5;
} }
.btn.blue { .btn.blue {
@ -988,6 +989,10 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
.sensorSet {
height: 100%;
}
.sensorSet .sensor-view { .sensorSet .sensor-view {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1099,6 +1104,10 @@
margin-right: 30px; margin-right: 30px;
} }
.sensorSet.sensorSet-con .sensor-view {
height: calc(100% - 120px);
}
.sensorSet.sensorSet-con .right-sel { .sensorSet.sensorSet-con .right-sel {
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
@ -1466,7 +1475,48 @@
height: 100%; height: 100%;
background: rgba(0, 92, 178, 0.15); background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.2); border: 2px solid rgba(0, 186, 255, 0.2);
padding: 20px 30px; padding: 30px 30px 20px;
}
.realTime .page-content .control-view {
display: flex;
align-items: center;
position: absolute;
right: 30px;
top: 10px;
}
.realTime .page-content .control-view .title {
margin-right: 10px;
}
.realTime .page-content .control-view .control-list {
display: flex;
align-items: center;
overflow: hidden;
max-width: 500px;
}
.realTime .page-content .control-view .control-list > div {
display: flex;
overflow: unset !important;
}
.realTime .page-content .control-view .control-list > div > div {
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 100px;
}
.realTime .page-content .control-view .control-list .list-view {
display: flex;
align-items: center;
}
.realTime .page-content .control-view .control-list .list-view .icon {
width: 30px;
height: 30px;
} }
.realTime .page-content .timeNow { .realTime .page-content .timeNow {

File diff suppressed because one or more lines are too long

View File

@ -824,6 +824,7 @@
&.green { &.green {
background: #00BB88; background: #00BB88;
opacity: 0.5;
} }
&.blue { &.blue {
@ -1045,6 +1046,7 @@
} }
.sensorSet { .sensorSet {
height: 100%;
.sensor-view { .sensor-view {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1160,6 +1162,9 @@
} }
&.sensorSet-con{ &.sensorSet-con{
.sensor-view{
height: calc(100% - 120px);
}
.right-sel{ .right-sel{
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
@ -1548,15 +1553,52 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px; padding: 20px;
.page-content { .page-content {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 92, 178, 0.15); background: rgba(0, 92, 178, 0.15);
border: 2px solid rgba(0, 186, 255, 0.20); border: 2px solid rgba(0, 186, 255, 0.20);
padding: 20px 30px; padding: 30px 30px 20px;
.control-view{
display: flex;
align-items: center;
position: absolute;
right: 30px;
top: 10px;
.title{
margin-right: 10px;
}
.control-list{
display: flex;
align-items: center;
overflow: hidden;
max-width: 500px;
>div {
// width: 100%!important;
display: flex;
overflow: unset !important;
>div {
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 100px;
}
}
.list-view{
display: flex;
align-items: center;
.icon{
width: 30px;
height: 30px;
}
}
}
}
.timeNow { .timeNow {
text-align: center; text-align: center;
position: absolute; position: absolute;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -19,19 +19,19 @@
</div> </div>
<div class="flex-view"> <div class="flex-view">
<div @click="changeIndexOpen(1)" class="btn" :class="actList1[1]=='1'?'blue':'off'"> <div @click="changeIndexOpen(0)" class="btn" :class="actList1[0]=='1'?'blue':'off'">
一号风组 一号风组
</div> </div>
<div @click="changeIndexOpen(2)" class="btn" :class="actList1[2]=='1'?'blue':'off'"> <div @click="changeIndexOpen(1)" class="btn" :class="actList1[1]=='1'?'blue':'off'">
二号风组 二号风组
</div> </div>
<div @click="changeIndexOpen(3)" class="btn" :class="actList1[3]=='1'?'blue':'off'"> <div @click="changeIndexOpen(2)" class="btn" :class="actList1[2]=='1'?'blue':'off'">
三号风组 三号风组
</div> </div>
<div @click="changeIndexOpen(4)" class="btn" :class="actList1[4]=='1'?'blue':'off'"> <div @click="changeIndexOpen(3)" class="btn" :class="actList1[3]=='1'?'blue':'off'">
四号风组 四号风组
</div> </div>
<div @click="changeIndexOpen(5)" class="btn" :class="actList1[5]=='1'?'blue':'off'"> <div @click="changeIndexOpen(4)" class="btn" :class="actList1[4]=='1'?'blue':'off'">
五号风组 五号风组
</div> </div>
</div> </div>
@ -246,9 +246,9 @@ export default {
}, },
getAct21601(){ getAct21601(){
this.actList1=[] this.actList1=[]
var num = this.inputData['21601']?this.inputData['21601']:0 var num = this.inputData['21601']
var num1 = this.padString(num.toString(2), 5) var num1 = this.padString(num.toString(2), 5)
var openListNew var openListNew=[]
openListNew = num1.split("") openListNew = num1.split("")
openListNew.forEach((el, index) => { openListNew.forEach((el, index) => {
this.actList1.push(openListNew[openListNew.length - index - 1]) this.actList1.push(openListNew[openListNew.length - index - 1])

View File

@ -4,8 +4,25 @@
<div class="timeNow" v-if="list.length"> <div class="timeNow" v-if="list.length">
<!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS <!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
}}</span> --> }}</span> -->
{{ list[0].updateTime?list[0].updateTime:'' }} {{ list[0].updateTime ? list[0].updateTime : '' }}
</div> </div>
<div class="control-view">
<div class="title">气象站:</div>
<vue-seamless class="control-list" v-if="deviceName == 10" :data="controlList" :class-option="defaultOption">
<div class="list-view" v-for="item, index in controlList " :key="index">
<img class="icon" :src="item.img" alt="">
{{ item.environmentDataId
}}:{{ getControlData(item) }}
</div>
</vue-seamless>
</div>
<!-- <div class="control-list" >
<div v-for="(item, index) in controlList" :key="index">
<img :src="item.img" alt="">
{{ item.environmentDataId
}}:{{ getControlData(item) }}
</div>
</div> -->
<div class="table-title"> <div class="table-title">
<img src="../../assets/image/real-time.png" alt="" /> <img src="../../assets/image/real-time.png" alt="" />
实时数据 实时数据
@ -24,12 +41,12 @@
<div class="realTime-list" v-if="list.length"> <div class="realTime-list" v-if="list.length">
<vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption"> <vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
<div class="list-view" v-for="item, index in list " :key="index"> <div class="list-view" v-for="item, index in list " :key="index">
<img :src="item.img" alt=""> <img :src="item.img" alt="">
<div class="text">{{ item.name }}</div> <div class="text">{{ item.name }}</div>
<div class="number">{{ item.num }}</div> <div class="number">{{ item.num }}</div>
</div> </div>
</vue-seamless> </vue-seamless>
</div> </div>
<div class="flex-list realTime-bottom"> <div class="flex-list realTime-bottom">
<div class="left"> <div class="left">
@ -72,16 +89,17 @@ export default {
indexs: 1, indexs: 1,
player: null, player: null,
url: '', url: '',
timer:null, timer: null,
deviceName:1, deviceName: 1,
controlList: [],
} }
}, },
watch: { watch: {
$route(newVal, oldVal) { $route(newVal, oldVal) {
const that = this; const that = this;
const store=this.$store.state const store = this.$store.state
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex; this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
this.deviceName =store.equipmentList[this.indexs - 1].deviceName this.deviceName = store.equipmentList[this.indexs - 1].deviceName
setTimeout(() => { setTimeout(() => {
that.dataInit(); that.dataInit();
}, 0); }, 0);
@ -89,19 +107,19 @@ export default {
}, },
mounted() { mounted() {
const that = this; const that = this;
const store=this.$store.state const store = this.$store.state
this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex; this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
this.deviceName =store.equipmentList[this.indexs - 1].deviceName this.deviceName = store.equipmentList[this.indexs - 1].deviceName
// this.getTime() // this.getTime()
setTimeout(() => { setTimeout(() => {
that.dataInit(); that.dataInit();
that.timer&&clearInterval(that.timer) that.timer && clearInterval(that.timer)
that.timer= setInterval(() => { that.timer = setInterval(() => {
that.dataInit(); that.dataInit();
}, 60000); }, 60000);
}, 0); }, 0);
}, },
beforeDestroy() { beforeDestroy() {
const that = this; const that = this;
@ -109,8 +127,8 @@ export default {
if (this.player) { if (this.player) {
this.player.dispose(); this.player.dispose();
} }
that.timer&&clearInterval(that.timer) that.timer && clearInterval(that.timer)
this.$bus.$off('refreshTime') this.$bus.$off('refreshTime')
}, },
methods: { methods: {
createVideo() { createVideo() {
@ -136,191 +154,237 @@ export default {
} }
return num return num
}, },
//countType //countType
//0 //0
//1-400 //1-400
//2/10 //2/10
//3(-400) / 10 //3(-400) / 10
countType1(data) { countType1(data) {
var num=data - 400 var num = data - 400
return num.toFixed(2) return num.toFixed(2)
}, },
countType2(data) { countType2(data) {
var num=data / 10 var num = data / 10
return num.toFixed(2) return num.toFixed(2)
}, },
countType3(data) { countType3(data) {
var num=(data - 400) / 10 var num = (data - 400) / 10
return num.toFixed(2) return num.toFixed(2)
}, },
//
getControlData(item) {
var x = item.environmentData
var num = item.num
if (item.formula == '12') {
if (x < 22 || x > 337) {
return '北'
} else if (x >= 22 && x <= 67) {
return '东北'
} else if (x > 67 && x < 112) {
return '东'
} else if (x >= 112 && x <= 157) {
return '东南'
} else if (x > 157 && x < 202) {
return '南'
} else if (x >= 202 && x <= 247) {
return '西南'
} else if (x > 247 && x < 292) {
return '西'
} else if (x >= 292 && x <= 337) {
return '西北'
}
} else {
return num
}
},
dataInit() { dataInit() {
var store = this.$store.state var store = this.$store.state
var equipmentId=store.equipmentList[this.indexs - 1].deviceId var equipmentId = store.equipmentList[this.indexs - 1].deviceId
// var data = { // var data = {
// equipmentId: store.equipmentList[this.indexs - 1].deviceId, // equipmentId: store.equipmentList[this.indexs - 1].deviceId,
// // pattern: 0, // //6ph- // // pattern: 0, // //6ph-
// // regNum: 73, // // regNum: 73,
// }; // };
var formData = {
equipmentId: store.equipmentList[this.indexs - 1].deviceId
}
var list = store.typeList var list = store.typeList
if(this.deviceName==1){ if (this.deviceName == 1) {
this.api.postRtdata(equipmentId).then((res) => { this.api.postRtdata(equipmentId).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.inputData = res.data.data; this.inputData = res.data.data;
this.list=[] this.list = []
this.inputData.forEach((el,index)=>{ this.inputData.forEach((el, index) => {
list.forEach((el1,index1)=>{ list.forEach((el1, index1) => {
if(el.formula==el1.value){ if (el.formula == el1.value) {
var num=0 var num = 0
var name='' var name = ''
// if(el1.countType==1){ // if(el1.countType==1){
// num=this.countType1(el.environmentData)+el1.unit // num=this.countType1(el.environmentData)+el1.unit
// }else if(el1.countType==2){ // }else if(el1.countType==2){
// num=this.countType2(el.environmentData)+el1.unit // num=this.countType2(el.environmentData)+el1.unit
// }else if(el1.countType==3){ // }else if(el1.countType==3){
// num=this.countType3(el.environmentData)+el1.unit // num=this.countType3(el.environmentData)+el1.unit
// }else{ // }else{
num=el.environmentData+el1.unit num = el.environmentData + el1.unit
// } // }
if(el.equipmentNumber==0){ if (el.equipmentNumber == 0) {
if(el.targetValue==1){ if (el.targetValue == 1) {
name='目标'+el.environmentDataId name = '目标' + el.environmentDataId
}else{ } else {
name='1#平均'+el.environmentDataId name = '1#平均' + el.environmentDataId
} }
}else if(el.equipmentNumber==15){ } else if (el.equipmentNumber == 15) {
if(el.targetValue==1){ if (el.targetValue == 1) {
name='目标'+el.environmentDataId name = '目标' + el.environmentDataId
}else{ } else {
name='2#平均'+el.environmentDataId name = '2#平均' + el.environmentDataId
} }
}else{ } else {
name=el.equipmentNumber+'#'+el.environmentDataId name = el.equipmentNumber + '#' + el.environmentDataId
} }
this.list.push({ this.list.push({
...el, ...el,
name:name, name: name,
num: num, num: num,
img: require(`../../assets/image/real-time-${el.formula}.png`) img: require(`../../assets/image/real-time-${el.formula}.png`)
}) })
} }
})
}) })
}) } else {
} else { this.$message.error(res.data.msg);
this.$message.error(res.data.msg); }
} });
}); var data1 = store.equipmentList[this.indexs - 1].deviceId
var data1 = store.equipmentList[this.indexs - 1].deviceId
this.api.postFsdata(data1).then(res => { this.api.postFsdata(data1).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
var chartsData=res.data.data var chartsData = res.data.data
realTimeLine('realTime-line',chartsData) realTimeLine('realTime-line', chartsData)
} else { } else {
this.$message.error(res.data.msg); this.$message.error(res.data.msg);
}
})
var nowDevice = store.equipmentList[this.indexs - 1]
var data2 = {
cameraid: nowDevice.cameraSerialNumber,
channelid: nowDevice.cameraChannelNumber
} }
})
var nowDevice = store.equipmentList[this.indexs - 1]
var data2={
cameraid:nowDevice.cameraSerialNumber,
channelid:nowDevice.cameraChannelNumber
}
// //
// var data2 = { // var data2 = {
// cameraid: 'L18357958', // cameraid: 'L18357958',
// channelid: '1' // channelid: '1'
// } // }
this.api.getGethls(data2).then(res => { this.api.getGethls(data2).then(res => {
console.log(res.data, 11); if (res.data.code == 200) {
if (res.data.code == 200) { this.url = res.data.msg
this.url = res.data.msg this.createVideo()
this.createVideo() }
} })
}) } else if (this.deviceName == 10) {
}else if(this.deviceName==10){
this.api.getControlRtdata(equipmentId).then((res) => { this.api.getControlRtdata(equipmentId).then((res) => {
if (res.data.code == 200) { if (res.data.code == 200) {
this.inputData = res.data.data; this.inputData = res.data.data;
this.list=[] this.list = []
this.inputData.forEach((el,index)=>{ this.inputData.forEach((el, index) => {
list.forEach((el1,index1)=>{ list.forEach((el1, index1) => {
if(el.formula==el1.value){ if (el.formula == el1.value) {
var num=0 var num = 0
var name='' var name = ''
// if(el1.countType==1){ // if(el1.countType==1){
// num=this.countType1(el.environmentData)+el1.unit // num=this.countType1(el.environmentData)+el1.unit
// }else if(el1.countType==2){ // }else if(el1.countType==2){
// num=this.countType2(el.environmentData)+el1.unit // num=this.countType2(el.environmentData)+el1.unit
// }else if(el1.countType==3){ // }else if(el1.countType==3){
// num=this.countType3(el.environmentData)+el1.unit // num=this.countType3(el.environmentData)+el1.unit
// }else{ // }else{
num=el.environmentData+el1.unit num = el.environmentData + el1.unit
// } // }
if(el.equipmentNumber==0){ if (el.equipmentNumber == 0) {
if(el.targetValue==1){ if (el.targetValue == 1) {
name='目标'+el.environmentDataId name = '目标' + el.environmentDataId
}else{ } else {
name='1#平均'+el.environmentDataId name = '1#平均' + el.environmentDataId
} }
}else if(el.equipmentNumber==15){ } else if (el.equipmentNumber == 15) {
if(el.targetValue==1){ if (el.targetValue == 1) {
name='目标'+el.environmentDataId name = '目标' + el.environmentDataId
}else{ } else {
name='2#平均'+el.environmentDataId name = '2#平均' + el.environmentDataId
} }
}else{ } else {
name=el.equipmentNumber+'#'+el.environmentDataId name = el.equipmentNumber + '#' + el.environmentDataId
} }
this.list.push({ this.list.push({
...el, ...el,
name:name, name: name,
num: num, num: num,
img: require(`../../assets/image/real-time-${el.formula}.png`) img: require(`../../assets/image/real-time-${el.formula}.png`)
})
}
})
})
} else {
this.$message.error(res.data.msg);
}
});
this.api.getControlRtDatastation(formData).then(res => {
this.controlList = []
res.data.data.forEach((el, index) => {
list.forEach((el1, index1) => {
if (el.formula == el1.value) {
console.log(el1);
var num = el.environmentData + el1.unit
this.controlList.push({
...el,
num: num,
img: require(`../../assets/image/real-time-${el.formula}.png`)
}) })
}
}
}) })
}) })
} else { console.log(this.controlList);
this.$message.error(res.data.msg); })
}
});
var data1 = store.equipmentList[this.indexs - 1].deviceId
this.api.getControlFsdata(data1).then(res => { var data1 = store.equipmentList[this.indexs - 1].deviceId
if (res.data.code == 200) {
var chartsData=res.data.data this.api.getControlFsdata(data1).then(res => {
realTimeLine('realTime-line',chartsData) if (res.data.code == 200) {
} else { var chartsData = res.data.data
this.$message.error(res.data.msg); realTimeLine('realTime-line', chartsData)
} else {
this.$message.error(res.data.msg);
}
})
var nowDevice = store.equipmentList[this.indexs - 1]
var data2 = {
cameraid: nowDevice.cameraSerialNumber,
channelid: nowDevice.cameraChannelNumber
} }
})
var nowDevice = store.equipmentList[this.indexs - 1] //
var data2={ // var data2 = {
cameraid:nowDevice.cameraSerialNumber, // cameraid: 'L18357958',
channelid:nowDevice.cameraChannelNumber // channelid: '1'
// }
this.api.getGethls(data2).then(res => {
console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.msg
this.createVideo()
}
})
} }
//
// var data2 = {
// cameraid: 'L18357958',
// channelid: '1'
// }
this.api.getGethls(data2).then(res => {
console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.msg
this.createVideo()
}
})
}
}, },
getTime() { getTime() {
this.time = getnowtime() this.time = getnowtime()

View File

@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<div class="input-sel"> <div class="input-sel">
<div class="title">感器类型</div> <div class="title">感器类型</div>
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<div class="el-dropdown-link"> <div class="el-dropdown-link">
<input v-model="sensorType" type="text" class="input-input" placeholder="选择传感器类型"> <input v-model="sensorType" type="text" class="input-input" placeholder="选择传感器类型">

View File

@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<div class="input-sel"> <div class="input-sel">
<div class="title">感器类型</div> <div class="title">感器类型</div>
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<div class="el-dropdown-link"> <div class="el-dropdown-link">
<input v-model="sensorType" type="text" class="input-input" placeholder="选择传感器类型"> <input v-model="sensorType" type="text" class="input-input" placeholder="选择传感器类型">
@ -107,7 +107,7 @@ export default {
watch:{ watch:{
'active'(newVal,oldVal){ 'active'(newVal,oldVal){
this.getSensorType() this.getSensorType()
this.getCountData() // this.getCountData()
}, },
}, },
mounted() { mounted() {
@ -167,23 +167,25 @@ export default {
}, },
// //
getCountData(){ getCountData(){
for (var i = 0; i < 6; i++) {
this.typeList.forEach((el, index) => { this.typeList.forEach((el, index) => {
if (el.value == this.inputData[this.numberList[this.active]]) { if (el.value == this.inputData[this.numberList[i]]) {
if(el.countType==0){ if(el.countType==0){
}else if(el.countType==1){ }else if(el.countType==1){
this.inputData[this.numberList[this.active] + 2]=this.countType1(this.inputData[this.numberList[this.active] + 2]) this.inputData[this.numberList[i] + 2]=this.countType1(this.inputData[this.numberList[i] + 2])
this.inputData[this.numberList[this.active] + 4]=this.countType1(this.inputData[this.numberList[this.active] + 4]) this.inputData[this.numberList[i] + 4]=this.countType1(this.inputData[this.numberList[i] + 4])
}else if(el.countType==2){ }else if(el.countType==2){
this.inputData[this.numberList[this.active] + 2]=this.countType2(this.inputData[this.numberList[this.active] + 2]) this.inputData[this.numberList[i] + 2]=this.countType2(this.inputData[this.numberList[i] + 2])
this.inputData[this.numberList[this.active] + 4]=this.countType2(this.inputData[this.numberList[this.active] + 4]) this.inputData[this.numberList[i] + 4]=this.countType2(this.inputData[this.numberList[i] + 4])
}else if(el.countType==3){ }else if(el.countType==3){
this.inputData[this.numberList[this.active] + 2]=this.countType3(this.inputData[this.numberList[this.active] + 2]) this.inputData[this.numberList[i] + 2]=this.countType3(this.inputData[this.numberList[i] + 2])
this.inputData[this.numberList[this.active] + 4]=this.countType3(this.inputData[this.numberList[this.active] + 4]) this.inputData[this.numberList[i] + 4]=this.countType3(this.inputData[this.numberList[i] + 4])
} }
} }
}) })
}
}, },
getSensorType(){ getSensorType(){
this.typeList.forEach((el,index)=>{ this.typeList.forEach((el,index)=>{

View File

@ -9,10 +9,10 @@
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行 <img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div> </div>
<div class="btn" @click="changeOpen(2)" :class="openIndex == 2 ? 'blue' : 'green'"> <div class="btn" @click="changeOpen(2)" :class="openIndex == 2 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭 <img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div> </div>
<div class="btn" @click="changeOpen(3)" :class="openIndex == 3 ? 'blue' : 'green'"> <div class="btn" @click="changeOpen(3)" :class="openIndex == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开 <img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div> </div>
<div class="btn" @click="changeOpen(4)" :class="openIndex == 4 ? 'blue' : 'green'"> <div class="btn" @click="changeOpen(4)" :class="openIndex == 4 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />停止 <img src="../../assets/image/irrigateSet1.png" alt="" />停止