FE-V2-XCX/pages_manage/workbench/laboratory/laboratoryInfo.vue

<!-- 我的实验室 -->
<template>
  <view id="laboratoryInfo">
    <view class="name-max-box">
      <view class="title-box">
        <view :style="'border:1rpx solid '+itemData.fiedColor+';background:#fff;color:'+itemData.fiedColor+';'">{{itemData.levelName}}</view>
        <view>{{itemData.name}}</view>
      </view>
      <view class="address-box"><span>{{itemData.typeName}}</span>{{itemData.deptName}}</view>
      <view class="address-box-two">
        <img src="@/images/icon_14.png">
        <view>{{itemData.subAddrrStr}}</view>
      </view>
    </view>
    <view class="sensor-max-box" v-if="itemData.sensorFunctionList[0]&&!saoCodeType">
      <view class="title-max-box">
        <view class="left-view"></view>
        <view class="right-view">传感器</view>
      </view>
      <view class="text-box">
        <view class="min-box" v-for="(minItem,index2) in itemData.sensorFunctionList" :key="index2">
          <view class="min-min-box">
            <img v-show="minItem.hasWarn" src="@/images/icon_15.png">
            <view :class="{'colorA':minItem.hasWarn}">{{minItem.funcName}}：{{minItem.formatVal?minItem.formatVal:'-'}}</view>
          </view>
        </view>
      </view>
    </view>
	<!-- 一键灭火 -->
	<view class="outfire" v-if='fireType'>
	  <view class="outfire_li" v-if="!fireListType">
	    <img src="@/images/icon_sy_wt.png">
	    <text style="color: #FF7B1A;">设备已离线，请及时处理。</text>
	  </view>
	  <view class="outfire_li" v-if="fireStartType">
	    <img src="@/images/icon_sy_mhwc.png">
	    <text style="color: #FF2333;">灭火中，灭火程序将于<text>{{conductCountdown}}</text>秒后结束</text>
	  </view>
	  <view class="outfire_li" v-if="outfireEnd">
	    <img src="@/images/icon_sy_mhwc.png">
	    <text style="color: #FF2333;">灭火完成，请您及时补充灭火设备耗材</text>
	  </view>
	  <template v-if="fireListType && !fireStartType && !outfireEnd">
	    <view class="outfire_li">
	      <img v-if='!outfireData.smoke' src="@/images/icon_yw_zc.png">
	      <img v-if='outfireData.smoke' src="@/images/icon_yw_yc.png">
	      <text
	          :class="outfireData.smoke?'abnormal':'normal'">{{outfireData.smoke?'有烟雾':'无烟雾'}}</text>
	    </view>
	    <view class="outfire_li">
	      <img v-if='!outfireData.temperature' src="@/images/icon_wd_zc.png">
	      <img v-if='outfireData.temperature' src="@/images/icon_wd_yc.png">
	      <text
	          :class="outfireData.temperature?'abnormal':'normal'">{{outfireData.temperature?'温度异常':'温度正常'}}</text>
	    </view>
	    <view class="outfire_li">
	      <img v-if='!outfireData.fire' src="@/images/icon_hy_zc.png">
	      <img v-if='outfireData.fire' src="@/images/icon_hy_yc.png">
	      <text :class="outfireData.fire?'abnormal':'normal'">{{outfireData.fire?'发现火焰':'无火焰'}}</text>
	    </view>
	  </template>
	  <view v-if="fireListType && !fireStartType && !outfireEnd"
	        :class="fireListType?'outfire_yes_btn':'outfire_no_btn'" @click="outfireFun()">一键灭火
	  </view>
	</view>
    <view class="control-max-box" v-if="!saoCodeType">
      <view class="title-max-box">
        <view class="left-view"></view>
        <view class="right-view">智能控制</view>
      </view>
      <view class="button-max-box">
        <view class="button-box" v-if="itemData.videoNum>0">
          <view>视频监控</view>
          <view @click="goVideo()">查看</view>
        </view>
<!--        <view class="button-box">
          <view>语音播报</view>
          <view @click="goWord()">播放文字</view>
        </view> -->
        <view class="for-button-box" v-for="(minItem,minIndex) in itemData.labHardwareVOList" :key="minIndex" v-if="minItem.hardwareTypeEnum.enumName!='VIDEO_MONITOR' && minItem.hardwareTypeEnum.enumName!='RFID_RECOGNIZER'&& minItem.hardwareTypeEnum.enumName!='AI_TERMINAL'&& minItem.hardwareTypeEnum.enumName!='AI_DOORLOCK'&& minItem.hardwareTypeEnum.enumName!='AI_CABINETLOCK' && minItem.hardwareName!='一键灭火'">
          <view>{{minItem.hardwareName}}</view>
          <img v-if="minItem.state.code=='3'" src="@/images/icon_10.png" @click="hardwareButton(minItem,'close')">
          <img v-if="minItem.state.code=='4'" src="@/images/icon_11.png" @click="hardwareButton(minItem,'open')">
          <view v-if="minItem.state.code=='0'">离线</view>
          <view v-if="minItem.state.code=='2'" style="color:#0183FA;">在线</view>
        </view>
      </view>
    </view>
    <view class="info-max-box">
      <view class="title-max-box" :class="{'title-max-box-none':!infoMaxBoxType}">
        <view class="left-view"></view>
        <view class="right-view">安全信息牌</view>
        <view class="click-view" @click="infoMaxBoxClick">
          <view>{{infoMaxBoxType?'收起':'展开'}}</view>
          <img v-if="infoMaxBoxType" src="@/images/icon_06_1.png">
          <img v-else src="@/images/icon_06.png">
        </view>
      </view>
      <view  v-if="infoMaxBoxType">
        <view class="text-max-box">
          <view class="text-min-box">
            <view>责任单位：</view>
            <view>{{itemData.deptName}}</view>
          </view>
          <view class="text-min-box">
            <view>实验室负责人：</view>
            <view>{{itemData.safeInfo.subAdmin[0]?"":"未设置"}}</view>
          </view>
          <view class="text-min-box" v-for="(item,index) in itemData.safeInfo.subAdmin" :key="index">
            <view style="color:#999;">{{item.name}}</view>
            <view>{{item.phone?item.phone:'未填写'}}</view>
          </view>
          <view class="text-min-box">
            <view>安全负责人：</view>
            <view>{{itemData.safeInfo.safeUser[0]?"":"未设置"}}</view>
          </view>
           <view class="text-min-box" v-for="(item,index) in itemData.safeInfo.safeUser" :key="index">
			  <view style="color:#999;">{{item.name}}</view>
			  <view>{{item.phone?item.phone:'未填写'}}</view>
			</view>
        </view>
        <view class="safety-max-box" v-if="itemData.hazardCategory[0]||itemData.riskMeasure[0]||itemData.outfire[0]">
          <view class="max-for-box" v-if="itemData.hazardCategory[0]">
            <view class="title-box">主要危险类别</view>
            <view class="for-box" v-for="(item,index1) in itemData.hazardCategory" :key="index1">● {{item}}</view>
          </view>
          <view class="max-for-box" v-if="itemData.riskMeasure[0]">
            <view class="title-box">风险防控措施</view>
            <view class="for-box" v-for="(item,index1) in itemData.riskMeasure" :key="index1">● {{item}}</view>
          </view>
          <view class="max-for-box" v-if="itemData.outfire[0]">
            <view class="title-box">灭火要点</view>
            <view class="for-box" v-for="(item,index1) in itemData.outfire" :key="index1">● {{item}}</view>
          </view>
        </view>
        <view class="img-bottom-box" v-if="itemData.safeSigns[0]||itemData.qrCode">
          <view class="title-box">安全警示标识</view>
          <view class="for-box">
            <img class="img-ojb" src="@/images/icon_aqxxp_jzxy.png" v-if="item == 'xiyan'" v-for="(item,index) in itemData.safeSigns" :key="index">
            <img class="img-ojb" src="@/images/icon_aqxxp_jzys.png" v-if="item == 'yinshi'" v-for="(item,index) in itemData.safeSigns" :key="index">
            <img class="img-ojb" src="@/images/icon_aqxxp_dxaq.png" v-if="item == 'anquan'" v-for="(item,index) in itemData.safeSigns" :key="index">
            <img class="img-ojb" src="@/images/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in itemData.safeSigns" :key="index">
            <img class="img-ojb" src="@/images/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in itemData.safeSigns" :key="index">
            <img class="img-ojb" src="@/images/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in itemData.safeSigns" :key="index">
            <img v-if="itemData.safeInfo.qrCode" class="code-img" :src="itemData.safeInfo.qrCode">
          </view>
        </view>
      </view>
    </view>
	<!-- 一键灭火遮罩-->
	<view class="shade-outfire" v-if="dialogVisible">
	  <view class="null-box" @click="dialogOutfire()"></view>
	  <view class="shade-outfire-n">
	    <img class="shade-outfire-n-t" src="@/images/icon_mh.png" />
	    <view class="shade-outfire-n-m">一键灭火启动中，倒计时<text>{{countdown}}</text>秒</view>
	    <view class="shade-outfire-n-b" @click="cancelOutfire()">放弃一键灭火</view>
	  </view>
	</view>
  </view>
</template>

<script>
import $mqtt from '@/utils/mqtt.min.js';
import { config } from '@/api/request/config.js'
import { mySubjectList,subject_class,listDepartments,mangerControl,getDicts,laboratoryInfo,firedeviceStatus,firedeviceStart,firedeviceCancel} from '@/api/index.js'
export default {
  data() {
    return {
      itemData:{},
      //MQTT请求参数-传感器
      mtopic:"lab/function/data",
      //MQTT请求参数-设备
      mtopicOne:"lab/hardware/data",
      msg:"",
      client:{},
      //安全信息牌
      infoMaxBoxType:false,
      subject:[],
      safetyWarning:[],
      hazardCategory:[],
      riskMeasure:[],
      extinguishingKeyPoints:[],
      deptId:"",
      saoCodeType:false,
	  
	  countdown: '', //倒计时
	  timer2: null, //倒计时
	  dialogVisible: false, //一键灭火弹出层
	  
	  conductCountdown: '',
	  timer3: null, //倒计时
	  outfireEnd: false, //灭火结束状态
	  //新布局地图相关数据
	  zoomData: null,
	  mapType:false,
	  mapList: [],
	  mapWidth: null, //40边框距离
	  mapHeight: null, //40边框距离
	  //新MQTT
	  floorClient: {},
	  evacuationTopic: "lab/newexit/line", //疏散
	  //灭火设备MQTT相关
	  fireClient:{},
	  fireTopic:"lab/fireDevice/Warn/",//传感器状态异常
	  fireOnlineTopic:"lab/fireDevice/isOnline/",//设备是否在线
	  firePerformTopic:"lab/fireDevice/executing/",//是否正在执行灭火操作
	  
	  
	  fireType:false,//有无火焰设备状态
	  fireListType:false,//灭火设备在线离线
	  fireCode:null,// //灭火设备code
	  fireStartType:false, //灭火启动状态
	  outfireData: {}, //一键灭火
	  subId:'',
    }
  },
  onLoad(option) {
    let self = this;
    if(uni.getStorageSync('saoCodeId')){
      this.saoCodeType = true;
	  this.subId=uni.getStorageSync('saoCodeId');
      this.laboratoryInfo();
    }else{
      if(option.q){
        let text = decodeURIComponent(option.q)
        console.log('text',text)
        let codeId = "";
        let newList = text.split("?")[1].split("&")
        let list = newList[0].split("=")[1].split("-")
        codeId = list[0];
        uni.setStorageSync('saoCodeId',codeId)
		this.subId=uni.getStorageSync('saoCodeId');
        this.saoCodeType = true;
        this.laboratoryInfo();
      }else{
        this.deptId = JSON.parse(decodeURIComponent(option.deptId));
        this.itemData = JSON.parse(decodeURIComponent(option.item));
		this.subId=this.itemData.id;
        self.itemData.videoNum = 0;
        self.itemData.hardwareNUM = "";
        for(let i=0;i<self.itemData.labHardwareVOList.length;i++){
          if(self.itemData.labHardwareVOList[i].hardwareTypeEnum.enumName=='VIDEO_MONITOR'){
            self.itemData.hardwareNUM = self.itemData.hardwareNUM+self.itemData.labHardwareVOList[i].hardwareNUM+',';
            self.itemData.videoNum++
          }
        }
        this.itemData.safeUserName = this.itemData.safeInfo.safeUserName
        this.itemData.safePhone = this.itemData.safeInfo.safePhone
        if(this.itemData.safeInfo.hazardCategory){
          this.itemData.hazardCategory = this.itemData.safeInfo.hazardCategory
        }
        if(this.itemData.safeInfo.riskMeasure){
          this.itemData.riskMeasure = this.itemData.safeInfo.riskMeasure
        }
        if(this.itemData.safeInfo.safeSigns){
          this.itemData.safeSigns = this.itemData.safeInfo.safeSigns
        }
        if(this.itemData.safeInfo.outfire){
          this.itemData.outfire = this.itemData.safeInfo.outfire
        }
        if(this.itemData.safeInfo.safeUserNameAdminPhone){
          let list = [];
          let newList = [];
          list = this.itemData.safeInfo.safeUserNameAdminPhone.split(",");
          for(let i=0;i<list.length;i++){
            list[i] = list[i].split("@");
            let obj = {
              name:list[i][0],
              phone:list[i][1]
            }
            newList.push(obj);
          }
          this.itemData.safeInfo.safeUser = newList;
        }
        if(this.itemData.safeInfo.adminNameAndPhone){
          let list = [];
          let newList = [];
          list = this.itemData.safeInfo.adminNameAndPhone.split(",");
          for(let i=0;i<list.length;i++){
            list[i] = list[i].split("@");
            let obj = {
              name:list[i][0],
              phone:list[i][1]
            }
            newList.push(obj);
          }
          this.itemData.safeInfo.subAdmin = newList;
        }
        this.saoCodeType = false;
      }
    }
	this.firedeviceStatus();

  },
  onShow(){
    if(!this.saoCodeType){
      // //监听传感器信息
      getApp().watch(this.getMqttSensorData,'mqttSensorData')
      // //监听设备信息
      getApp().watch(this.getMqttDeviceData,'mqttDeviceData')
	  //一键灭火-灭火传感器状态异常
      getApp().watch(this.getMqttfireData,'mqttfireData')
	  //一键灭火-是否正在执行灭火操作
      getApp().watch(this.getMqttPerformData,'mqttPerformData')
    }
	
  },
  methods: {
	  //一键灭火-查询设备状态
	  async firedeviceStatus() {
	    let _this = this;
	  
	    const {data} = await firedeviceStatus(_this.subId)
	    if (data.code == 200) {
	      if(data.data.isexist){//是否有灭火设备
	        this.$set(this,'fireType',data.data.isexist);
	        if(data.data.online){
	          _this.outfireData = data.data
	          _this.$set(this,'fireListType',data.data.online);
	          _this.$set(this,'fireCode',data.data.fireDevice.deviceCode);
	          if(data.data.temperature && data.data.smoke){
	            if(!this.fireStartType){
	              this.$set(this,'fireStartType',true);
	              this.sendCode2(data.data.timeDifference);
	            }
	          }
	        }else{
	          this.$set(this,'fireListType',false);
	          this.$set(this,'fireCode',null);
	        }
	      }else{
	        this.$set(this,'fireType',false);
	      }
		  this.mqttInfo()
	    }
	  },
	  //启动灭火设备
	  async firedeviceStart() {
	    let _this = this;
	    let obj={
	      subjectId:this.subId,
	      deviceCode:_this.fireCode
	    }
	    const {data} = await firedeviceStart(obj)
	    if (data.code == 200) {
	      if (data.data.online) {
	        _this.dialogVisible = true;
	        _this.$set(this,'fireListType',data.data.online);
	        _this.countdown = data.data.waitTime;//灭火倒计时
	        _this.sendCode() //倒计时
	  
	      } else {
	        wx.showToast({
	          title: '一键灭火启动失败!',
	          icon: "none",
	          duration: 6000
	        });
	      }
	    }
	  },
	  //取消灭火设备
	  async firedeviceCancel() {
	    let _this = this;
	    const {data} = await firedeviceCancel(_this.itemData.subjectId)
	    if (data.code == 200) {
	      wx.showToast({
	        title: '放弃一键灭火!',
	        icon: "none",
	        duration: 2000
	      });
	    }
	  },
	  //一键灭火按钮
	  outfireFun() {
	    let _this = this;
	    uni.showModal({
	      title: "是否确认执行一键灭火?",
	      content: '该操作存在风险，请您务必确认实验室内人员已安全撤离?',
	      cancelColor: "#999",
	      confirmColor: "#0183FA",
	      success: function(res) {
	        if (res.confirm) {
	          _this.firedeviceStart(); //启动灭火设备
	  
	        } else if (res.cancel) {
	  
	        }
	      }
	    });
	  
	  },
	  //一键灭火弹出层关闭
	  dialogOutfire() {
	    this.dialogVisible = !this.dialogVisible
	    this.clearTimer(); //关闭定时器
	  },
	  //取消一键灭火
	  cancelOutfire() {
	    this.dialogVisible = false;
	    this.clearTimer(); //关闭定时器
	    this.firedeviceCancel()
	  },
	  //倒计时
	  sendCode() {
	    let _this = this;
	    _this.loading(); //启动定时器
	    _this.timer2 = setInterval(() => {
	      //创建定时器
	      if (_this.countdown === 1) {
	        _this.clearTimer(); //关闭定时器
	      } else {
	        _this.loading();
	      }
	    }, 1000);
	  },
	  loading() {
	    //启动定时器
	    this.countdown--; //定时器减1
	  },
	  clearTimer() {
	    //清除定时器
	    clearInterval(this.timer2);
	    this.timer2 = null;
	    this.dialogVisible = false;
	  
	  },
	  //进行中倒计时
	  sendCode2(time) {
	    let _this = this;
	    _this.conductCountdown=time
	    _this.loading2(); //启动定时器
	    _this.timer3 = setInterval(() => {
	      //创建定时器
	      if (_this.conductCountdown === 1) {
	        _this.clearTimer2(); //关闭定时器
	        _this.outfireEnd = true; //灭火倒计时结束
	        _this.fireStartType = false; //灭火状态
	  
	        console.log()
	      } else {
	        _this.loading2();
	      }
	    }, 1000);
	  },
	  loading2() {
	    //启动定时器
	    this.conductCountdown--; //定时器减1
	  },
	  clearTimer2() {
	    //清除定时器
	    clearInterval(this.timer3);
	    this.timer3 = null;
	  },
	//详情页面MQTT
	mqttInfo(){
		let list = [];
		let obj = {
			type:"lab/function/data",
			idList:[this.itemData.id],
		}
		let objOne = {
			type:"lab/hardware/data",
			idList:[this.itemData.id],
		}
		let objTow = {
			type:"lab/fireDevice/Warn/",
			fireCode:this.fireCode,
		}
		let objThree = {
			type:"lab/fireDevice/isOnline/",
			fireCode:this.fireCode,
		}
		let objFour = {
			type:"lab/fireDevice/executing/",
			fireCode:this.fireCode,
		}
		list.push(obj);
		list.push(objOne);
		list.push(objTow);
		list.push(objThree);
		list.push(objFour);
		// mqtt订阅因为返回数据频率问题 暂时取消列表的MQTT刷新
		getApp().appMqttOn(1,list);
	},
    //查询详情
    async laboratoryInfo(){
      let self = this;
      let id = uni.getStorageSync('saoCodeId');
      const {data} = await laboratoryInfo(id);
      if(data.code == 200){
        uni.removeStorageSync('saoCodeId')
        this.itemData = data.data[0];
        self.itemData.videoNum = 0;
        self.itemData.hardwareNUM = "";
        this.itemData.safeUserName = this.itemData.safeInfo.safeUserName
        this.itemData.safePhone = this.itemData.safeInfo.safePhone
        if(this.itemData.safeInfo.hazardCategory){
          this.itemData.hazardCategory = this.itemData.safeInfo.hazardCategory
        }
        if(this.itemData.safeInfo.riskMeasure){
          this.itemData.riskMeasure = this.itemData.safeInfo.riskMeasure
        }
        if(this.itemData.safeInfo.safeSigns){
          this.itemData.safeSigns = this.itemData.safeInfo.safeSigns
        }
        if(this.itemData.safeInfo.outfire){
          this.itemData.outfire = this.itemData.safeInfo.outfire
        }
        if(this.itemData.safeInfo.safeUserNameAdminPhone){
          let list = [];
          let newList = [];
          list = this.itemData.safeInfo.safeUserNameAdminPhone.split(",");
          for(let i=0;i<list.length;i++){
            list[i] = list[i].split("@");
            let obj = {
              name:list[i][0],
              phone:list[i][1]
            }
            newList.push(obj);
          }
          this.itemData.safeInfo.safeUser = newList;
        }
        if(this.itemData.safeInfo.adminNameAndPhone){
          let list = [];
          let newList = [];
          list = this.itemData.safeInfo.adminNameAndPhone.split(",");
          for(let i=0;i<list.length;i++){
            list[i] = list[i].split("@");
            let obj = {
              name:list[i][0],
              phone:list[i][1]
            }
            newList.push(obj);
          }
          this.itemData.safeInfo.subAdmin = newList;
        }
        this.infoMaxBoxType = true;
      }
    },
	//一键灭火-传感器状态异常
	getMqttfireData(val){
		let self = this;
		if(val){
			//传感器状态
			console.log('传感器状态');
			self.firedeviceStatus();
		}
	},
	//一键灭火-是否正在执行灭火操作
	getMqttPerformData(val){
		let self = this;
		debugger
		if(val){
			//灭火执行操作
			if(val.fireStatus == 1){
			  if(!self.fireStartType){
			    self.$set(self,'fireStartType',true);
			    self.sendCode2(val.direTime);
			  }else if(val.fireStatus == 0){
				uni.showToast({
				  title: '一键灭火启动失败',
				  icon: "none",
				  mask: true,
				  duration: 2000
				});
			  }
			}
		}
	},
    //监听传感器信息
    getMqttSensorData(val){
      let self = this;
      if(val.subId){
        if(self.itemData.id == val.subId){
          self.$set(self.itemData,'sensorFunctionList',val.functionStatuses);
        }
      }
    },
    //监听设备信息
    getMqttDeviceData(val){
      let self = this;
      // console.log('页面获取的-设备信息',val)
      for(let i=0;i<val.length;i++){
        for(let k=0;k<self.itemData.labHardwareVOList.length;k++){
          if(val[i].num == self.itemData.labHardwareVOList[k].id){
            if(val[i].hardwareOperate == 'CLOSE'){
              self.itemData.labHardwareVOList[k].state.code = 4;
            }else if(val[i].hardwareOperate == 'OPEN'){
              self.itemData.labHardwareVOList[k].state.code = 3;
            }else if(val[i].hardwareOperate == 'OFFLINE'){
              self.itemData.labHardwareVOList[k].state.code = 0;
            }else if(val[i].hardwareOperate == 'ONLINE'){
              self.itemData.labHardwareVOList[k].state.code = 2;
            }
          }
        }
      }
    },
    infoMaxBoxClick(){
      this.infoMaxBoxType = !this.infoMaxBoxType;
    },
    async getSafetyWarning(){
      const {data} = await getDicts('sys_safety_warning');
      if(data.code == 200){
        this.safetyWarning = data.data;
      }
    },
    async getHazardCategory(){
      const {data} = await getDicts('sys_hazard_category');
      if(data.code == 200){
        this.hazardCategory = data.data;
      }
    },
    async getRiskMeasure(){
      const {data} = await getDicts('sys_risk_measure');
      if(data.code == 200){
        this.riskMeasure = data.data;
      }
    },
    async getExtinguishingKeyPoints(){
      const {data} = await getDicts('sys_extinguishing_key_points');
      if(data.code == 200){
        this.extinguishingKeyPoints = data.data;
      }
    },
    //MQTT订阅-传感器
    subscriptionMQTT(){
      let self = this;
      const mqttOptions = {
        keepalive: 30,
        clean: false,//保留会话
        connectTimeout: 5000, // 超时时间
        reconnectPeriod:5000, // 重连间隔
        clientId: 'lab/function/data',
        username: uni.getStorageSync('mqttUser'),
        password: uni.getStorageSync('mqttPassword'),
      }

      const connectUrl = uni.getStorageSync('mqttUrl');
      this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
      this.client.on('connect', () => {
        // 这是为了给自己发条消息，其它无作用
        this.client.subscribe(this.mtopic, (err) => {
          if (!err) {
            console.log("订阅传感器成功",this.mtopic)
          }
        })
        this.client.subscribe(this.mtopicOne, (err) => {
          if (!err) {
            console.log("订阅设备成功",this.mtopicOne)
          }
        })
      });
      // 自动重连
      this.client.on('reconnect', (msg) => {
        console.log('reconnect', msg)
      });
      // 错误
      this.client.on('error', () => {
        console.log('error')
      });
      // 断开
      this.client.on('end', () => {
        console.log('end')
      });
      // 掉线
      this.client.on('offline', (msg) => {
        console.log('offline',msg)
      });
      // 收到消息
      this.client.on('message', (topic, message) => {
        let data = JSON.parse(message)
        console.log('topic',topic)
        console.log('data',data)
        if(topic == this.mtopic){
          if(data.data.subId){
            if(self.itemData.id == data.data.subId){
              self.$set(self.itemData,'sensorFunctionList',data.data.functionStatuses);
            }
          }
        }else if(topic == this.mtopicOne){
          for(let i=0;i<data.data.length;i++){
            for(let k=0;k<self.itemData.labHardwareVOList.length;k++){
              if(data.data[i].num == self.itemData.labHardwareVOList[k].id){
                if(data.data[i].hardwareOperate == 'CLOSE'){
                  self.itemData.labHardwareVOList[k].state.code = 4;
                }else if(data.data[i].hardwareOperate == 'OPEN'){
                  self.itemData.labHardwareVOList[k].state.code = 3;
                }else if(data.data[i].hardwareOperate == 'OFFLINE'){
                  self.itemData.labHardwareVOList[k].state.code = 0;
                }else if(data.data[i].hardwareOperate == 'ONLINE'){
                  self.itemData.labHardwareVOList[k].state.code = 2;
                }
              }
            }
          }
        }
      })
      // 全局监听是否有关闭mqtt的消息的事件
      uni.$on('closeMqtt',() => {
        this.client.end(true); // 主动断开连接
      })
    },
    //取消订阅关闭MQTT连接
    offMQTT(){
      this.client.unsubscribe(this.mtopic, error => {
        if (error) {
          console.log('Unsubscribe error', error)
        }
      })
      this.client.end();
      this.client = {};
    },
    //设备开关按钮
    hardwareButton(minItem,command){
      let self = this;
      let text = '';
      if(command == 'close'){
        text = '关闭';
      }else if(command == 'open'){
        text = '开启';
      }
      uni.showModal({
        content: '确认要'+text+'吗?',
        cancelColor:"#999",
        confirmColor:"#0183FA",
        success: function (res) {
          if (res.confirm) {
            self.mangerControl(minItem,command);
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    //设备开关
    async mangerControl(minItem,command){
      let obj = {
        id:minItem.id,
        command:command,
      };
      const {data} = await mangerControl(obj);
      if(data.code == 200){
        if(command == 'open'){
          minItem.type = 3;
        }else if(command == 'close'){
          minItem.type = 4;
        }
        uni.showToast({
          title: '操作成功',
          icon:"none",
          mask:true,
          duration: 2000
        });
      }
    },
    goVideo(){
		this.itemData.floorId = this.itemData.subAddrr.floorId;
      uni.navigateTo({
        url:'/pages_manage/workbench/laboratory/monitor?item='+encodeURIComponent(JSON.stringify(this.itemData))+'&deptId='+this.deptId
      })
    },
    goWord(){
      uni.navigateTo({
        url:'/pages_manage/workbench/laboratory/word?item='+encodeURIComponent(JSON.stringify(this.itemData))
      })
    },
  },
  onHide(){
    // //删除传感器监听
    getApp().deleteSensorWatch();
    // //删除设备监听
    getApp().deleteDeviceWatch();
	//删除一键灭火-传感器状态
	getApp().deletefireData();
	//删除一键灭火-设备是否在线
	getApp().deleteOnlineData();
	//删除一键灭火-是否正在执行灭火
	getApp().deletePerformData();
   
  },
  beforeDestroy(){
    // //删除传感器监听
    getApp().deleteSensorWatch();
    // //删除设备监听
    getApp().deleteDeviceWatch();
	//删除一键灭火-传感器状态
	getApp().deletefireData();
	//删除一键灭火-设备是否在线
	getApp().deleteOnlineData();
	//删除一键灭火-是否正在执行灭火
	getApp().deletePerformData();
  }
}
</script>

<style lang="stylus" scoped>
#laboratoryInfo{
  height:100%;
  display flex;
  flex-direction column;
  /* 一键灭火 */
  .outfire {
    width: 750rpx;
    height: auto;
    background: #FFFFFF;
    margin: 20rpx 0;
    padding: 20rpx 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    .outfire_li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
  
      >img {
        width: 24rpx;
        height: 30rpx;
        margin-right: 12rpx;
      }
  
      .normal {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
  
      .abnormal {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #F11C00;
      }
    }
  
    .outfire_li:nth-of-type(1) {
      >img {
        width: 30rpx;
        height: 28rpx;
        margin-right: 12rpx;
      }
    }
  
    .outfire_yes_btn {
      width: 120rpx;
      height: 40rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #F21C00;
      line-height: 40rpx;
      border: 1px solid #F21C00;
      border-radius: 8rpx;
      text-align: center;
      margin-left: 54rpx;
    }
  
    .outfire_no_btn {
      width: 120rpx;
      height: 40rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #CCCCCC;
      line-height: 40rpx;
      border: 1px solid #E0E0E0;
      border-radius: 8rpx;
      text-align: center;
      margin-left: 54rpx;
    }
  }
  /* 一键灭火 */
  .shade-outfire {
    height: 100%;
    width: 100%;
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: 10;
    background: rgba(0, 0, 0, 0.2);
  
    .null-box {
      flex: 1;
    }
    .shade-outfire-n {
      width: 625rpx;
      height: 450rpx;
      background: #FFFFFF;
      border-radius: 20rpx;
      position: absolute;
      top: 370rpx;
      left: 62rpx;
  
      .shade-outfire-n-t {
        width: 172rpx;
        height: 172rpx;
        margin: 38rpx 0 0 226rpx;
      }
  
      .shade-outfire-n-m {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #E30000;
        line-height: 84rpx;
        text-align: center;
        border-bottom: 1px solid #E0E0E0;
  
        >text {
          font-size: 40rpx;
        }
      }
  
      .shade-outfire-n-b {
        width: 402rpx;
        height: 82rpx;
        background: #FFFFFF;
        border: 2rpx solid #0183FA;
        border-radius: 10rpx;
        font-size: 28rpx;
        line-height: 82rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #0183FA;
        text-align: center;
        margin: 30rpx 0 0 112rpx;
      }
    }
  }
  .name-max-box{
    background #fff
    .title-box{
      margin:20rpx 20rpx 0;
      display flex
      view:nth-child(1){
        height:40rpx;
        line-height:40rpx;
        font-size:20rpx;
        border-radius:10rpx;
        padding:0 20rpx;
        color:#fff;
        margin-right:20rpx;
      }
      view:nth-child(2){
        line-height:42rpx;
        font-size:30rpx;
        color:#0183FA;
        max-width:600rpx;
        flex:1;
      }
      img{
        width:12rpx;
        height:20rpx;
        margin-top:11rpx;
      }
      .colorA{
        background:#aa2315;
      }
      .colorB{
        background:#ff9b09;
      }
      .colorC{
        background:#3ea3e9;
      }
      .colorD{
        background:#3ea34c;
      }

    }
    .address-box{
      margin:20rpx 20rpx;
      font-size:26rpx;
      color:#999999;
      span{
        margin-right:60rpx;
      }
    }
    .address-box-two{
      display flex
      margin:0 20rpx 20rpx 20rpx;
      img{
        width:28rpx;
        height:30rpx;
        margin-right:18rpx;
      }
      view{
        line-height:30rpx;
        font-size:24rpx;
        color:#999999;
      }
    }
  }
  .title-max-box-none{
    border:none!important;
  }
  .title-max-box{
    display flex
    height:80rpx;
    border-bottom:1rpx solid #E0E0E0;
    .left-view{
      width: 4rpx;
      height: 34rpx;
      margin:25rpx 24rpx 0 20rpx;
      background:#0D97EB;
    }
    .right-view{
      line-height:80rpx;
      font-size: 30rpx;
      color: #333333;
      flex:1;
    }
    .click-view{
      display flex
      padding:0 20rpx;
      view{
        line-height:80rpx;
        font-size: 24rpx;
        color: #666666;
      }
      img{
        width:20rpx;
        height:10rpx;
        margin:35rpx 0 0 20rpx;
      }
    }
  }
  .sensor-max-box{
    background #fff
    margin-top:20rpx;
    .text-box{
      /*border-top:1rpx dashed #e0e0e0;*/
      /*border-top:1rpx solid #E0E0E0;*/
      padding:0 20rpx;
      /*
      overflow-x:scroll;
      overflow-y:hidden;
      white-space: nowrap;
      */
      .min-box{
        display inline-block
        /*padding:0 30rpx 0 10rpx;*/
        width:355rpx;
        .min-min-box{
          display: flex
          img{
            width:30rpx;
            height:27rpx;
            margin-top:24rpx;
            margin-right:10rpx;
          }
          view{
            line-height:74rpx;
            text-align center
            font-size:28rpx;
            color:#333;
          }
          .colorA{
            color:#EE3A3A;
          }
        }
      }
    }
  }
  .control-max-box{
    background #fff
    margin-top:20rpx;
    .button-max-box{
      .button-box:last-child{
        border:none!important;
      }
      .button-box{
        display flex
        border-bottom:1rpx solid #e0e0e0;
        margin:0 20rpx;
        view:nth-child(1){
          flex:1;
          line-height:90rpx;
          color:#333333;
          font-size:28rpx;
        }
        view:nth-child(2){
          width:120rpx;
          line-height:42rpx;
          border:4rpx solid #0183FA;
          border-radius:30rpx;
          color: #0183FA;
          font-size: 24rpx;
          text-align center;
          margin:20rpx 0 20rpx 0;
        }
      }
      .for-button-box:last-child{
        border:none!important;
      }
      .for-button-box{
        display flex
        border-bottom:1rpx solid #e0e0e0;
        margin:0 20rpx;
        view{
          flex:1;
          line-height:90rpx;
          color:#333333;
          font-size:28rpx;
        }
        img{
          height:50rpx;
          width:100rpx;
          margin:20rpx 0 20rpx 0;
        }
        view:nth-child(2){
          text-align right
          color:#999;
        }
      }
    }
  }
  .info-max-box{
    background #fff
    margin-top:20rpx;
    .top-name-max-box{
      background #fff
      overflow hidden
      .name-box{
        margin:27rpx 20rpx 0;
        display:flex;
        view:nth-child(1){
          background:#f95f5f;
          color:#fff;
          border-radius:6rpx;
          font-size:20rpx;
          padding:0 10rpx;
          height:42rpx;
          line-height:42rpx;
        }
        view:nth-child(2){
          color:#333;
          margin-left:20rpx;
          font-size:28rpx;
          height:30rpx;
          line-height:42rpx;
          font-weight:700;
        }
      }
      .address-box{
        margin:22rpx 20rpx;
        font-size:26rpx;
      }
    }
    .text-max-box{
      background #fff
      padding:8rpx 20rpx;
      border-bottom:1rpx solid #e0e0e0;
      .text-min-box{
        display:flex;
        view{
          line-height:66rpx;
          height:66rpx;
          font-size:28rpx;
        }
        view:nth-child(1){
          width:220rpx;
          color:#333;
        }
        view:nth-child(2){
          flex:1;
          color:#999;
          text-align:right;
        }
      }
    }
    .safety-max-box{
      background #fff
      padding:8rpx 20rpx;
      .max-for-box{
        .title-box{
          line-height:76rpx;
          font-size:30rpx;
          color:#333;
        }
        .for-box{
          line-height:48rpx;
          font-size:28rpx;
          color:#999;
        }
      }
    }
    .img-bottom-box{
      margin-top:20rpx;
      background #fff
      padding:8rpx 20rpx 20rpx;
      .title-box{
        line-height:76rpx;
        font-size:28rpx;
        color:#333;
      }
      .for-box{
        line-height:48rpx;
        font-size:26rpx;
        color:#999;
        .img-ojb{
          display inline-block
          width:86rpx;
          height:114rpx;
          margin-left:30rpx;
        }
        .code-img{
          width:200rpx;
          height:200rpx;
          margin:20rpx auto 40rpx;
        }
      }
    }
  }
}
</style>