|
@@ -2,34 +2,37 @@
|
|
|
<template>
|
|
|
<div class="indexRightPage-hardwarePage scrollbar-box">
|
|
|
<img class="null-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!hardwareList[0]">
|
|
|
- <div class="for-hardware-max-big-box" :class="!item.online?'offLineColor':'onLineColor'"
|
|
|
- v-for="(item,index) in hardwareList" :key="index">
|
|
|
- <div class="for-hardware-big-box">
|
|
|
- <div class="for-hardware-text-box" >
|
|
|
- <el-tooltip class="item" effect="dark" :content="item.hardwareName" placement="bottom">
|
|
|
- <p>{{item.hardwareName}}</p>
|
|
|
- </el-tooltip>
|
|
|
- <p v-if="!item.online">离线</p>
|
|
|
- </div>
|
|
|
- <div class="for-hardware-switch-box">
|
|
|
- <div class="for-hardware-switch-title">
|
|
|
- <p v-if="item.online">{{item.reservedThree}}</p>
|
|
|
+ <div class="for-hardware-max-big-box scrollbar-box">
|
|
|
+ <div class="for-hardware-big-box" :class="!item.online?'offLineColor':'onLineColor'"
|
|
|
+ v-for="(item,index) in hardwareList" :key="index">
|
|
|
+ <div class="for-hardware-box">
|
|
|
+ <div class="for-hardware-text-box" >
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.hardwareName" placement="bottom">
|
|
|
+ <p>{{item.hardwareName}}</p>
|
|
|
+ </el-tooltip>
|
|
|
+ <p v-if="!item.online">离线</p>
|
|
|
</div>
|
|
|
- <div class="for-hardware-switch" v-if="item.online">
|
|
|
- <el-switch
|
|
|
- class="switch"
|
|
|
- @click.native="changeIsNeedCaptcha(item)"
|
|
|
- v-model="item.operatingState"
|
|
|
- :active-value="false"
|
|
|
- :inactive-value="true"
|
|
|
- active-text="开启"
|
|
|
- inactive-text="关闭"
|
|
|
- disabled>
|
|
|
- </el-switch>
|
|
|
+ <div class="for-hardware-switch-box">
|
|
|
+ <div class="for-hardware-switch-title">
|
|
|
+ <p v-if="item.online && item.operatingState">{{item.reservedThree}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="for-hardware-switch" v-if="item.online">
|
|
|
+ <el-switch
|
|
|
+ class="switch"
|
|
|
+ @click.native="changeIsNeedCaptcha(item)"
|
|
|
+ v-model="item.operatingState"
|
|
|
+ :active-value="true"
|
|
|
+ :inactive-value="false"
|
|
|
+ active-text="开启"
|
|
|
+ inactive-text="关闭"
|
|
|
+ disabled>
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <p class="bottom-time-p" v-if="lastOnlineTime">数据上报时间:{{parseTime(lastOnlineTime)}}</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -42,7 +45,11 @@
|
|
|
name: 'hardwarePage',
|
|
|
data(){
|
|
|
return{
|
|
|
+ //MQTT请求参数-传感器
|
|
|
+ mtOpic:"iot/device/hardware/sub/",
|
|
|
+ client:{},
|
|
|
hardwareList:[],
|
|
|
+ lastOnlineTime:'',
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
@@ -53,8 +60,8 @@
|
|
|
},
|
|
|
methods:{
|
|
|
initialize(){
|
|
|
- console.log(this.$parent.subId)
|
|
|
this.iotHardwareFindBySubId();
|
|
|
+ this.offMQTT('on');
|
|
|
},
|
|
|
//查询传感器数据
|
|
|
iotHardwareFindBySubId(){
|
|
@@ -65,11 +72,7 @@
|
|
|
// 开启关闭验证
|
|
|
async changeIsNeedCaptcha (row) {
|
|
|
let self = this;
|
|
|
- console.log(row)
|
|
|
- if(row.operatingState!=3 && row.operatingState!=4){
|
|
|
- return
|
|
|
- }
|
|
|
- let text = row.operatingState==3?'关闭':(row.operatingState==4?'开启':'')
|
|
|
+ let text = row.operatingState?'关闭':'开启';
|
|
|
this.$confirm(`是否`+text+`此设备`, "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
@@ -91,8 +94,66 @@
|
|
|
this.msgSuccess("操作成功")
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
},
|
|
|
+ //MQTT订阅
|
|
|
+ sensorMQTT(){
|
|
|
+ let self = this;
|
|
|
+ this.client = mqtt.connect(localStorage.getItem('mqttUrl'), {
|
|
|
+ username: localStorage.getItem('mqttUser'),
|
|
|
+ password:localStorage.getItem('mqttPassword')
|
|
|
+ });
|
|
|
+ this.client.on("connect", e =>{
|
|
|
+ this.client.subscribe(this.mtOpic+self.$parent.subId, (err) => {
|
|
|
+ if (!err) {
|
|
|
+ // console.log("订阅成功:" + this.mtOpic+self.$parent.subId);
|
|
|
+ }else{
|
|
|
+ // console.log("连接错误:" + err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.client.on("message", (topic, message) => {
|
|
|
+ if (message){
|
|
|
+ let data = JSON.parse(message)
|
|
|
+ // let list = JSON.parse(JSON.stringify(this.sensorList))
|
|
|
+ // list.forEach((item)=>{
|
|
|
+ // data.forEach((minItem)=>{
|
|
|
+ // if(item.deviceNo == minItem.deviceNo){
|
|
|
+ // item.deviceValue = minItem.deviceValue;
|
|
|
+ // item.online = minItem.online;
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // if(data[0].lastOnlineTime){
|
|
|
+ // this.$set(this,'lastOnlineTime',data[0].lastOnlineTime);
|
|
|
+ // }else{
|
|
|
+ // this.$set(this,'lastOnlineTime','');
|
|
|
+ // }
|
|
|
+ // this.$set(this,'sensorList',list);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //取消订阅关闭MQTT连接
|
|
|
+ offMQTT(type){
|
|
|
+ let self = this;
|
|
|
+ if(self.client.unsubscribe){
|
|
|
+ self.client.unsubscribe(self.mtOpic+self.$parent.subId, error => {
|
|
|
+ if (error) {
|
|
|
+ // console.log('mqtt关闭连接错误:', error)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ self.client.end();
|
|
|
+ this.$set(this,'client',{});
|
|
|
+ }
|
|
|
+ //判断传入参数如果存在 发起一次新的连接
|
|
|
+ if(type){
|
|
|
+ this.sensorMQTT();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ //清除定时器
|
|
|
+ let self = this;
|
|
|
+ self.offMQTT();
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -100,72 +161,82 @@
|
|
|
<style scoped lang="scss">
|
|
|
.indexRightPage-hardwarePage{
|
|
|
flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
.null-img{
|
|
|
display: block;
|
|
|
margin:80px 0 0 150px;
|
|
|
width:150px;
|
|
|
}
|
|
|
.for-hardware-max-big-box{
|
|
|
- display: inline-block;
|
|
|
- overflow: hidden;
|
|
|
- width: 180px;
|
|
|
- height: 70px;
|
|
|
- padding:10px 14px;
|
|
|
- margin: 0 0 11px 16px;
|
|
|
- border-radius: 10px;
|
|
|
+ flex:1;
|
|
|
.for-hardware-big-box{
|
|
|
- .for-hardware-text-box{
|
|
|
- display: flex;
|
|
|
- flex:1;
|
|
|
- p{
|
|
|
- overflow: hidden;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- p:nth-child(1){
|
|
|
- flex:1;
|
|
|
- display:block;
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space:nowrap;
|
|
|
- margin-right:10px;
|
|
|
- }
|
|
|
- p:nth-child(2){
|
|
|
- }
|
|
|
- }
|
|
|
- .for-hardware-switch-box{
|
|
|
- flex:1;
|
|
|
- display: flex;
|
|
|
- margin-top: 7px;
|
|
|
- overflow: hidden;
|
|
|
- .for-hardware-switch-title{
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 180px;
|
|
|
+ height: 70px;
|
|
|
+ padding:10px 14px;
|
|
|
+ margin: 0 0 11px 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ .for-hardware-box{
|
|
|
+ .for-hardware-text-box{
|
|
|
+ display: flex;
|
|
|
flex:1;
|
|
|
p{
|
|
|
- width: 70px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 10px;
|
|
|
- opacity: 1;
|
|
|
- border: 1px solid #0183FA;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: #0183FA;
|
|
|
- line-height: 17px;
|
|
|
- text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ display:block;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ margin-right:10px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
}
|
|
|
}
|
|
|
- .for-hardware-switch{
|
|
|
-
|
|
|
+ .for-hardware-switch-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 7px;
|
|
|
+ overflow: hidden;
|
|
|
+ .for-hardware-switch-title{
|
|
|
+ flex:1;
|
|
|
+ p{
|
|
|
+ width: 70px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #0183FA;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0183FA;
|
|
|
+ line-height: 17px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .offLineColor{
|
|
|
+ color:#333;
|
|
|
+ background-color: #E0E0E0;
|
|
|
+ }
|
|
|
+ .onLineColor{
|
|
|
+ color:#333;
|
|
|
+ background-color: #E5F2FF;
|
|
|
+ }
|
|
|
}
|
|
|
- .offLineColor{
|
|
|
- color:#333;
|
|
|
- background-color: #E0E0E0;
|
|
|
- }
|
|
|
- .onLineColor{
|
|
|
- color:#333;
|
|
|
- background-color: #E5F2FF;
|
|
|
+ .bottom-time-p{
|
|
|
+ font-size:14px;
|
|
|
+ color:#999;
|
|
|
+ text-align: center;
|
|
|
+ height:40px;
|
|
|
+ line-height:40px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|