569 lines
18 KiB
Vue
569 lines
18 KiB
Vue
<template>
|
|
<!-- <custom-nav-bar :left="true" title="首部"></custom-nav-bar> -->
|
|
<view>
|
|
<uni-row style="background-color:cadetblue;height: 40px;">
|
|
<uni-col :span="2">
|
|
<u-icon name="arrow-left" size="18" @click="onClosePage"
|
|
style="margin-left: 20px;margin-top: 14px;"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="12">
|
|
<view class="demo-uni-col dark"
|
|
style="color: white;text-align: left ;margin-right: 3px;font-weight: 400;font-size: 20px;margin-top: 10px;">
|
|
{{datestr}}
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="8">
|
|
<view class="demo-uni-col dark"
|
|
style="color: white;text-align: right;margin-right: 3px;font-weight: 400;font-size: 20px;margin-top: 10px;">
|
|
{{timestr}}
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="background-color:cadetblue;height: 120px;color: white;">
|
|
<view style="margin-top: 3px;height: 100%;width: 100%;">
|
|
<uni-col :span="11" style="border: 1px solid white;margin-right: 5px;margin-left: 5px;">
|
|
<uni-row style="height: 30px;">
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: left;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
水泵</view>
|
|
</uni-col>
|
|
<uni-col :span="6" v-if="item.isFertilizer==1">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: left;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
施肥机</view>
|
|
</uni-col>
|
|
<uni-col :span="6" v-if="item.isBackWash==1">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: left;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
反冲洗</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 30px;">
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
状态</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<u-icon :label="`${itemProperty.sc == 1? '启动':'停止'}`" size="32"
|
|
:name="`${itemProperty.sc == 1? '../../../static/images/head/deviceon.png':'../../../static/images/head/deviceoff.png'}`"
|
|
style="text-align: center;"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" v-if="item.isFertilizer==1">
|
|
<u-icon :label="`${itemProperty.fst == 1? '启动':'停止'}`" size="32"
|
|
:name="`${itemProperty.fst == 1? '../../../static/images/head/deviceon.png':'../../../static/images/head/deviceoff.png'}`"
|
|
style="text-align: center;"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" v-if="item.isBackWash==1">
|
|
<u-icon :label="`${itemProperty.bws == 1? '启动':'停止'}`" size="32"
|
|
:name="`${itemProperty.bws == 1? '../../../static/images/head/deviceon.png':'../../../static/images/head/deviceoff.png'}`"
|
|
style="text-align: center;"></u-icon>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 40px;">
|
|
<uni-col :span="4">
|
|
<uni-row style="height: 50%;">
|
|
<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
|
|
水泵</view>
|
|
</uni-row>
|
|
<uni-row style="height: 50%;">
|
|
<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
|
|
开关</view>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<u-button text="开泵" type="success" @click="pump(1)"
|
|
style="height: 27px;width: 80px;margin-top: 6px;margin-right: 5px;"></u-button>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<u-button text="关泵" type="error" @click="pump(0)"
|
|
style="height: 27px;width: 80px;margin-top: 6px;"></u-button>
|
|
</uni-col>
|
|
<uni-col :span="4" v-if="item.testStatus == 0">
|
|
<uni-row style="height: 50%;">
|
|
<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
|
|
电灯</view>
|
|
</uni-row>
|
|
<uni-row style="height: 50%;">
|
|
<view style="height:100%;width: 100%;text-align: center;font-size: 14px;">
|
|
开关</view>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col :span="4" v-if="item.testStatus == 0">
|
|
<u-button :text="`${lampFlag == 1? '关灯':'开灯'}`" :type="`${lampFlag == 1? 'success':'info'}`"
|
|
@click="lampOff()" style="height: 27px;width: 80px;margin-top: 6px;"></u-button>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col :span="11" style="border: 1px solid white;margin-left: 5px;">
|
|
<uni-row style="height: 30px;">
|
|
<uni-col :span="24" v-if="item.controlMode===1">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
频率设定</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 30px;">
|
|
<uni-col :span="5" v-if="item.controlMode===1">
|
|
<u-button :type="`${itemProperty.fl == 1000? 'primary':'info'}`" text="1"
|
|
@click="onRear(1000)" :loading="speeLoading1" :disabled="speedDisabled"
|
|
style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
</u-button>
|
|
</uni-col>
|
|
<uni-col :span="5" v-if="item.controlMode===1">
|
|
<u-button :type="`${itemProperty.fl == 2000? 'primary':'info'}`" text="2"
|
|
@click="onRear(2000)" :loading="speeLoading2" :disabled="speedDisabled"
|
|
style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
</u-button>
|
|
</uni-col>
|
|
<uni-col :span="5" v-if="item.controlMode===1">
|
|
<u-button :type="`${itemProperty.fl == 3000? 'primary':'info'}`" text="3"
|
|
@click="onRear(3000)" :loading="speeLoading3" :disabled="speedDisabled"
|
|
style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
</u-button>
|
|
</uni-col>
|
|
<uni-col :span="5" v-if="item.controlMode===1">
|
|
<u-button :type="`${itemProperty.fl == 4000? 'primary':'info'}`" text="4"
|
|
@click="onRear(4000)" :loading="speeLoading4" :disabled="speedDisabled"
|
|
style="height:30px;width: 70%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
</u-button>
|
|
</uni-col>
|
|
<uni-col :span="4" v-if="item.controlMode===1">
|
|
<u-button :type="`${itemProperty.fl == 5000? 'primary':'info'}`" text="5"
|
|
@click="onRear(5000)" :loading="speeLoading5" :disabled="speedDisabled"
|
|
style="height:30px;width: 90%;text-align: center;margin-top: 2px;line-height: 30px;font-size: 14px;">
|
|
</u-button>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 40px;">
|
|
<uni-col :span="6" v-if="item.controlMode===1">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 8px;line-height: 25px;font-size: 14px;">
|
|
当前:</view>
|
|
</uni-col>
|
|
<uni-col :span="6" v-if="item.controlMode===1">
|
|
<view class="valuecol" style="margin-top: 8px;">
|
|
{{ (itemProperty.fl!=null && itemProperty.fl!='') ? itemProperty.fl/100 :''}}Hz
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
<uni-row style="background-color:cadetblue;height: 140px;color: white;">
|
|
<view style="margin-bottom: 3px;height: 100%;width: 100%;">
|
|
<uni-col :span="11" style="border: 1px solid white;margin-right: 5px;margin-left: 5px;">
|
|
<uni-row style="height: 25px;">
|
|
<uni-col :span="24">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
电压检测</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 25px;">
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
电压A:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.va}}V
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
电流A:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.ca}}A
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 25px;">
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
电压B:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.vb}}V
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
电流B:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.cb}}A
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 25px;">
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
电压C:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.vc}}V
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
电流C:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.cc}}A
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
</uni-col>
|
|
<uni-col :span="11" style="border: 1px solid white;margin-left: 5px;">
|
|
<uni-row style="height: 25px;">
|
|
<uni-col :span="24">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
流速液位</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 25px;">
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
水流:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.fs == 1 ? "有" : "无"}}
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
压力:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.wip}}Mpa
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 25px;">
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
液位1:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.wl}}m
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view
|
|
style="height:100%;width: 100%;text-align: center;margin-top: 2px;line-height: 25px;font-size: 14px;">
|
|
液位2:</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.wl2}}m
|
|
</view>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row style="height: 25px;">
|
|
</uni-row>
|
|
<uni-row style="height: 21px;">
|
|
</uni-row>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
<uni-row style="margin-bottom: 3px;background-color:cadetblue;height: 50px;">
|
|
<uni-col :span="7">
|
|
<u-button text="监控画面" type="success"
|
|
style="height: 35px;width: 120px;margin-bottom: 2px;margin-top: 2px;"></u-button>
|
|
</uni-col>
|
|
</uni-row>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
controlHeadSwitch
|
|
} from "@/api/controlHeadInterface";
|
|
import store from "@/store"
|
|
export default {
|
|
data() {
|
|
return {
|
|
item: {},
|
|
itemProperty: {},
|
|
timestr: "",
|
|
datestr: "",
|
|
time3: {},
|
|
time4: {},
|
|
Intervalflag: true,
|
|
disabled1: false,
|
|
disabled2: false,
|
|
flValue: 0,
|
|
switchLoading: false,
|
|
speedDisabled: false,
|
|
resValue: -1,
|
|
resSpeedValue: -1,
|
|
resSpeedValue1: -1,
|
|
resSpeedValue2: -1,
|
|
resSpeedValue3: -1,
|
|
resSpeedValue4: -1,
|
|
resSpeedValue5: -1,
|
|
speeLoading1: false,
|
|
speeLoading2: false,
|
|
speeLoading3: false,
|
|
speeLoading4: false,
|
|
speeLoading5: false,
|
|
lampFlag: false,
|
|
mqttshow: false, // h5端手动链接mqtt按钮显示
|
|
mqttConnected: false, // mqtt链接状态
|
|
user: store.state.user.user,
|
|
topics: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// #ifdef APP-PLUS
|
|
plus.screen.lockOrientation('landscape-primary');
|
|
plus.navigator.setFullscreen(true);
|
|
// #endif
|
|
if (options.item != null) {
|
|
this.item = JSON.parse(decodeURIComponent(options.item));
|
|
this.itemProperty = this.item.deviceData;
|
|
this.devicePropertyStatus();
|
|
let topic = "jsy/iot/push/outProduct/" + this.item.deviceCode;
|
|
this.topics.push(topic);
|
|
this.mqttSubscribes(this.topics);
|
|
getApp().addMsgEvent("mqtt", "mqtt_head", function(e) {
|
|
if (e.type == "state") {
|
|
this.mqttConnected = e.connected;
|
|
} else if (e.type == "msg") {
|
|
this.itemProperty = e.data;
|
|
this.devicePropertyStatus();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onUnload() {
|
|
this.mqttUnSubscribes(this.topics);
|
|
// #ifdef APP-PLUS
|
|
plus.screen.lockOrientation('portrait-primary')
|
|
plus.navigator.setFullscreen(false);
|
|
// #endif
|
|
},
|
|
methods: {
|
|
mqttSubscribes(topics) {
|
|
getApp().mqttSubscribes(topics);
|
|
},
|
|
mqttUnSubscribes(topics) {
|
|
getApp().mqttUnsubscribes(topics);
|
|
},
|
|
devicePropertyStatus() {
|
|
if (this.itemProperty.sc == this.resValue) {
|
|
this.switchLoading = false
|
|
}
|
|
switch (this.itemProperty.fl) {
|
|
case this.resSpeedValue1:
|
|
this.resSpeedValue1 = "-1";
|
|
this.speeLoading1 = false
|
|
break;
|
|
case this.resSpeedValue2:
|
|
this.resSpeedValue2 = "-1";
|
|
this.speeLoading2 = false
|
|
break;
|
|
case this.resSpeedValue3:
|
|
this.resSpeedValue3 = "-1";
|
|
this.speeLoading3 = false
|
|
break;
|
|
case this.resSpeedValue4:
|
|
this.resSpeedValue4 = "-1";
|
|
this.speeLoading4 = false
|
|
break;
|
|
case this.resSpeedValue5:
|
|
this.resSpeedValue5 = "-1";
|
|
this.speeLoading5 = false
|
|
break;
|
|
}
|
|
if (this.resSpeedValue == this.itemProperty.fl) {
|
|
this.speedDisabled = false;
|
|
}
|
|
},
|
|
pump(e) {
|
|
if (!this.item) return;
|
|
let par = {
|
|
controlKey: "sc",
|
|
deviceTypeId: 5,
|
|
operationType: 11,
|
|
controlMode: this.item.controlMode,
|
|
productKey: this.item.productKey,
|
|
deviceCode: this.item.deviceCode,
|
|
controlValve: e,
|
|
isTest: this.item.testStatus
|
|
};
|
|
controlHeadSwitch(par).then(res => {});
|
|
},
|
|
lampOff() {
|
|
let lamp = uni.getStorageSync("lampOff")
|
|
if (!lamp || lamp == 0) {
|
|
lamp = 1;
|
|
} else {
|
|
uni.removeStorageSync("lampOff");
|
|
lamp = lamp == 1 ? 0 : 1;
|
|
}
|
|
if (lamp == 1) {
|
|
this.lampFlag = true;
|
|
} else {
|
|
this.lampFlag = false;
|
|
}
|
|
uni.setStorageSync("lampOff", lamp)
|
|
let par = {
|
|
controlKey: "do3",
|
|
deviceTypeId: 5,
|
|
controlMode: this.item.controlMode,
|
|
productKey: this.item.productKey,
|
|
operationType: 11,
|
|
deviceCode: this.item.deviceCode,
|
|
controlValve: lamp,
|
|
isTest: this.item.testStatus
|
|
};
|
|
controlHeadSwitch(par).then(res => {});
|
|
},
|
|
onRear(g) {
|
|
if (!this.item) return;
|
|
let par = {
|
|
controlKey: "fl",
|
|
deviceTypeId: 5,
|
|
productKey: this.item.productKey,
|
|
operationType: 12,
|
|
deviceCode: this.item.deviceCode,
|
|
controlValve: g
|
|
};
|
|
controlHeadSwitch(par).then(res => {
|
|
this.speedDisabled = true;
|
|
switch (g) {
|
|
case 1000:
|
|
this.resSpeedValue1 = g + "";
|
|
this.speeLoading1 = true
|
|
break;
|
|
case 2000:
|
|
this.resSpeedValue2 = g + "";
|
|
this.speeLoading2 = true
|
|
break;
|
|
case 3000:
|
|
this.resSpeedValue3 = g + "";
|
|
this.speeLoading3 = true
|
|
break;
|
|
case 4000:
|
|
this.resSpeedValue4 = g + "";
|
|
this.speeLoading4 = true
|
|
break;
|
|
case 5000:
|
|
this.resSpeedValue5 = g + "";
|
|
this.speeLoading5 = true
|
|
break;
|
|
}
|
|
resSpeedValue.value = g + "";
|
|
});
|
|
},
|
|
getNowFormatDay() {
|
|
var date = new Date();
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1;
|
|
var d = date.getDate();
|
|
if (month < 10) {
|
|
month = "0" + month;
|
|
}
|
|
if (d < 10) {
|
|
d = "0" + d;
|
|
}
|
|
return year + "/" + month + "/" + d;
|
|
},
|
|
getNowFormatDateTime() {
|
|
var date = new Date();
|
|
var hour = date.getHours();
|
|
var minute = date.getMinutes();
|
|
var second = date.getSeconds();
|
|
if (hour < 10) {
|
|
hour = "0" + hour;
|
|
}
|
|
if (minute < 10) {
|
|
minute = "0" + minute;
|
|
}
|
|
if (second < 10) {
|
|
second = "0" + second;
|
|
}
|
|
return hour + ":" + minute + ":" + second;
|
|
},
|
|
|
|
//关闭页面
|
|
onClosePage() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.uni-page-head {
|
|
display: none
|
|
}
|
|
|
|
.demo-uni-col {
|
|
height: 32px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.dark {
|
|
background-color: cadetblue;
|
|
}
|
|
|
|
.light {
|
|
background-color: cadetblue;
|
|
}
|
|
|
|
.valuecol {
|
|
height: 80%;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
text-align: center;
|
|
line-height: 25px;
|
|
font-size: 14px;
|
|
border: 1px solid black;
|
|
width: 95%;
|
|
background-color: white;
|
|
color: black;
|
|
|
|
}
|
|
|
|
::v-deep .u-loading-icon__spinner,
|
|
.u-loading-icon__spinner--spinner {
|
|
color: #9ef800 !important;
|
|
}
|
|
|
|
::v-deep .u-button--disabled {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
::v-deep .u-loading-icon .u-loading-icon__spinner {
|
|
color: #22ac38 !important;
|
|
}
|
|
</style> |