v3-lab-web/src/views/integratedManagement/laboratoryManagement/subject/infoPage.vue

<template>
    <div class="subject-infoPage" v-if="subjectData.infoId">
      <!--左侧数据展示-->
      <div class="left-max-box scrollbar-box">
        <div class="all-title-box">
          <p></p>
          <p style="flex:1;">实验室安全信息牌</p>
        </div>
        <div class="left-top-title-box">
          <div class="left-box">
            <div class="lv-name-box">
              <p :style="'color:'+subjectData.levelColor+';border:1px solid '+subjectData.levelColor+';'">{{subjectData.levelName}}</p>
              <p>{{subjectData.subName}}</p>
              <p class="subArea-p" v-if="subjectData.subArea != 0">({{subjectData.subArea}}M²)</p>
            </div>
            <div class="type-address-box">
              <p class="type-p" v-for="(item,index) in subjectData.labClassTypeList">{{item.typeName}}</p>
              <p class="address-p">{{subjectData.buildName}}{{subjectData.floorName}}</p>
            </div>
          </div>
          <div class="right-code-img" @click="clickCode">
            <vue-qr style="display: block;height:60px;width:60px;cursor:pointer;margin:0 10px 0 0;"
                    :text="identification+'?code='+subjectData.infoId+'&subId='+subjectData.subId+'&type=5'" :size="300">
            </vue-qr>
          </div>
        </div>
        <div class="user-max-box">
          <div class="left-box">
            <p>实验室责任人：<span>{{subjectData.adminName}}</span></p>
            <p>联系方式：<span>{{subjectData.adminPhone}}</span></p>
          </div>
          <div class="right-box">
            <div v-for="(item,index) in subjectData.safeUserList" :key="index">
              <p>安全员：<span>{{item.safeUserName}}</span></p>
              <p>联系方式：<span>{{item.safeUserPhone}}</span></p>
            </div>
          </div>
        </div>
        <p class="info-max-title-p">管控一体机信息</p>
        <div class="info-max-box">
          <div class="left-box">
            <div class="for-text-box">
              <p class="info-title">主要危险类别：{{!subjectData.hazardCategory?'未配置':''}}</p>
              <div class="for-box" v-for="(item,index1) in subjectData.hazardCategory" :key="index1">
                <p class="for-info-p" v-for="(minItem,index2) in hazardCategory" :key="index2" v-if="minItem.value == item">● {{minItem.label}}</p>
              </div>
            </div>
            <div class="for-text-box">
              <p class="info-title">灭火要点：{{!subjectData.outFire?'未配置':''}}</p>
              <div class="for-box" v-for="(item,index1) in subjectData.outFire" :key="index1">
                <p class="for-info-p" v-for="(minItem,index2) in extinguishingKeyPoints" :key="index2" v-if="minItem.value == item">● {{minItem.label}}</p>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="for-text-box">
              <p class="info-title">风险防控措施：{{!subjectData.riskMeasure?'未配置':''}}</p>
              <div class="for-box" v-for="(item,index1) in subjectData.riskMeasure" :key="index1">
                <p class="for-info-p" v-for="(minItem,index2) in riskMeasure" :key="index2" v-if="minItem.value == item">● {{minItem.label}}</p>
              </div>
            </div>
            <div class="for-img-box">
              <p class="info-title" style="margin-bottom:7px;">安全警示标识：{{!subjectData.safeSigns?'未配置':''}}</p>
              <img src="@/assets/ZDimages/integratedManagement/icon_aqxxp_jzxy.png" v-if="item == 'xiyan'" v-for="(item,index) in subjectData.safeSigns" :key="index">
              <img src="@/assets/ZDimages/integratedManagement/icon_aqxxp_jzys.png" v-if="item == 'yinshi'" v-for="(item,index) in subjectData.safeSigns" :key="index">
              <img src="@/assets/ZDimages/integratedManagement/icon_aqxxp_dxaq.png" v-if="item == 'anquan'" v-for="(item,index) in subjectData.safeSigns" :key="index">
              <img src="@/assets/ZDimages/integratedManagement/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in subjectData.safeSigns" :key="index">
              <img src="@/assets/ZDimages/integratedManagement/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in subjectData.safeSigns" :key="index">
              <img src="@/assets/ZDimages/integratedManagement/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in subjectData.safeSigns" :key="index">
            </div>
          </div>
        </div>
        <p class="info-max-title-p">电子信息牌信息</p>
        <div class="info-max-box">
          <p class="null-text-p" v-if="!subjectData.classifyList[0]">电子信息牌未配置</p>
          <div class="for-text-box" v-if="item.privateList.length>0 && item.brandType==1" v-for="(item,index) in  subjectData.classifyList">
            <p class="info-title">{{item.brandName}}:</p>
            <div class="for-box" v-if="!item.isSpecial" v-for="(item2,index2) in item.privateList" :key="index2">
              <p class="for-info-p">● {{item2.infoName}}</p>
            </div>
            <!--特殊类目-->
            <div class="for-box" v-if="item.isSpecial" v-for="(item2,index2) in item.privateList" :key="index2">
              <p class="for-info-p">{{item2.infoName}}</p>
            </div>
          </div>
          <div class="for-img-box" v-if="item.privateList.length>0 && item.brandType==2" v-for="(item,index) in  subjectData.classifyList">
            <p class="info-title" style="margin-bottom:7px;">{{item.brandName}}:</p>
            <img :src="item2.infoContent" v-for="(item2,index2) in item.privateList" :key="index2">
          </div>
        </div>
      </div>
      <!--右侧数据展示-->
      <div class="right-max-box scrollbar-box">
        <!--传感器监测 上报时间 返回按钮-->
        <div class="all-title-box" style="height:40px;">
          <p></p>
          <p>传感器监测</p>
          <p v-if="lastOnlineTime">数据上报时间：{{parseTime(lastOnlineTime)}}</p>
          <p></p>
          <p class="page-out-common-style-button" style="line-height:40px;" @click="backPage">返回</p>
        </div>
        <p class="sensor-box" v-for="(item,index) in sensorList" :key="index">{{item.deviceName}}：<span>{{item.deviceValue}}{{item.unit}}</span></p>
        <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!sensorList[0]">
        <!--物联控制-->
        <div class="all-title-box" style="height:40px;margin-top:20px;">
          <p></p>
          <p>物联控制</p>
        </div>
        <div class="things-box-one" v-for="(item,index) in hardwareList" :key="item.id" v-if="item.hardwareTypeKey == 'airConditioner'">
          <div class="things-box-one-for">
            <p class="name-p">{{item.hardwareName}}</p>
            <div class="text-box">
              <p :class="item.switchType==1?'colorOpen':'colorOff'">{{item.switchType == 1?'开启':(item.switchType == 0?'关闭':'')}}</p>
              <p :class="item.switchType==1?'':'colorText'" v-for="(minItem,minIndex) in infraredControllerData.functionList"
                 :key="minItem.value" v-if="minItem.value == item.functionType">{{minItem.label}}</p>
              <p :class="item.switchType==1?'':'colorText'" v-for="(minItem,minIndex) in infraredControllerData.refrigerationList"
                 :key="minItem.value" v-if="item.functionType == 1&&minItem.value == item.orderType">{{minItem.label}}</p>
              <p :class="item.switchType==1?'':'colorText'" v-for="(minItem,minIndex) in infraredControllerData.heatingList"
                 :key="minItem.value" v-if="item.functionType == 2&&minItem.value == item.orderType">{{minItem.label}}</p>
            </div>
            <p class="button-p" @click="dialogOpen(item)">操作</p>
          </div>
        </div>
        <div class="things-box" v-for="(item,index) in hardwareList" :key="item.id" v-if="item.hardwareTypeKey != 'airConditioner'">
          <div class="things-for-box">
            <p class="left-title">{{item.hardwareName}}</p>
            <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>
        <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!hardwareList[0]">
        <!--视频监控-->
        <div class="all-title-box" style="height:40px;margin-top:20px;" v-if="videoType">
          <p></p>
          <p>视频监控</p>
        </div>
        <div v-if="videoType">
          <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!videoList[0]">
          <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
        </div>
        <!--广播-->
        <div class="all-title-box" style="height:40px;margin-top:10px;">
        <p></p>
        <p>语音广播</p>
        </div>
        <div class="things-box" v-for="(item,index) in loudspeakerList" :key="item.id">
          <div class="things-for-box">
            <p class="left-title">{{item.deviceName}}</p>
            <p class="right-button" @click="handleAdd(item.deviceNo)">播放文字</p>
          </div>
        </div>
        <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!loudspeakerList[0]">
        <!--危险源信息-->
        <div class="all-title-box" style="height:40px;margin-top:10px;">
          <p></p>
          <p>危险源信息</p>
        </div>
        <div class="source-box" style="margin-bottom:20px;" v-if="checkInData.hazardNames">
          <span>{{checkInData.hazardNames}}</span>
        </div>
        <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png" v-if="!checkInData.hazardNames">
        <!--检查项信息-->
        <div class="all-title-box" style="height:30px;">
          <p></p>
          <p>检查项信息</p>
        </div>
        <div class="inspection-box">
          <div class="inspection-left-box">
            <div v-if="checkInData.checkIn">
              <p>穿戴检查项：</p>
              <p>{{checkInData.checkIn}}</p>
            </div>
            <div v-if="checkInData.skipped">
              <p>穿戴检查可跳过：</p>
              <p>{{checkInData.skipped?'是':'否'}}</p>
            </div>
            <div v-if="checkInData.checkIn && checkInData.skipped">
              <p>穿戴检查识别上限：</p>
              <p>{{checkInData.checkCount}}次</p>
            </div>
            <div v-if="checkInData.signTime">
              <p>签到有效时间：</p>
              <p>{{checkInData.signTime}}小时</p>
            </div>
            <div v-if="checkInData.checkOutUpload">
              <p>离开检查是否上传照片：</p>
              <p>{{checkInData.checkOutUpload?'是':'否'}}</p>
            </div>
            <div v-if="checkInData.signTime">
              <p>签到有效时间：</p>
              <p>{{checkInData.signTime}}小时</p>
            </div>
          </div>
          <div class="inspection-right-box">
            <div v-if="checkInData.inspectCheckIn">
              <p>穿戴检查项(巡查)：</p>
              <p>{{checkInData.inspectCheckIn}}</p>
            </div>
            <div v-if="checkInData.inspectSkipped">
              <p>穿戴检查可跳过(巡查)：</p>
              <p>{{checkInData.inspectSkipped?'是':'否'}}</p>
            </div>
            <div v-if="checkInData.inspectCheckIn && checkInData.inspectSkipped">
              <p>穿戴检查识别上限(巡查)：</p>
              <p>{{checkInData.inspectCheckCount}}次</p>
            </div>
            <div v-if="checkInData.inspectSignTime">
              <p>签到有效时间(巡查)：</p>
              <p>{{checkInData.inspectSignTime}}小时</p>
            </div>
          </div>
        </div>
        <img class="null-data-img" src="@/assets/ZDimages/basicsModules/null-data-1.png"  v-if="!checkInData.signTime && !checkInData.inspectSignTime">
      </div>
      <qr-code-dialog ref="qrCodeDialog" :qrCodeDialogData="qrCodeDialogData"></qr-code-dialog>
      <!--播放文字窗口-->
      <el-dialog title="语音广播" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="播放文字" prop="text">
            <el-input v-model="form.text" placeholder="请输入播放文字" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitFormOne">确 定</el-button>
        </div>
      </el-dialog>
      <!--红外控制器-->
      <el-dialog class="subject-infoPage-dialog" :title='infraredControllerTitle' width="460px" append-to-body
                 :visible.sync="infraredControllerType" v-if="infraredControllerType" @close="dialogOff()"
                 :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="infraredController-max-big-box">
          <div class="infraredController-switchType-box">
            <p class="switchType-name-p">{{infraredControllerForm.name}}</p>
            <p class="switchType-type-p"
               @click="switchTypeButton"
               :class="infraredControllerForm.switchType == 1 ? '': 'switchType-type-off-p'">{{infraredControllerForm.switchType == 1 ? '开启':'关闭'}}</p>
          </div>
          <div style="overflow: hidden;height:130px;">
            <div class="infraredController-functionType-box" v-if="infraredControllerForm.switchType == 1">
              <p :class="infraredControllerForm.functionType == item.value?'check-button':''"
                 @click="functionButton(item.value)"
                 v-for="(item,index) in infraredControllerData.functionList"
                 :key="item.value">{{item.label}}</p>
            </div>
            <div class="infraredController-orderType-box" v-if="infraredControllerForm.switchType == 1 && (infraredControllerForm.functionType == 1 || infraredControllerForm.functionType == 2)">
              <p class="order-minus" @click="minusTextButton()">-</p>
              <p class="order-text" v-for="(item,index) in infraredControllerData.refrigerationList" :key="item.value" v-if="infraredControllerForm.functionType==1&&infraredControllerForm.orderType == item.value">{{item.label}}</p>
              <p class="order-text" v-for="(item,index) in infraredControllerData.heatingList" :key="item.value" v-if="infraredControllerForm.functionType==2&&infraredControllerForm.orderType == item.value">{{item.label}}</p>
              <p class="order-add" @click="addTextButton()">+</p>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer dialog-footer-box">
          <p class="dialog-footer-button-null"></p>
          <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
          <p class="dialog-footer-button-null"></p>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import vueQr from 'vue-qr'
  import mqtt from 'mqtt'
  import { controlsRestrictVerify } from '@/utils/index'
  import qrCodeDialog from "@/components/qrCodeDialog/index.vue"
  import {laboratorySubRelInfoGetSubRelByCheckHazard} from '@/api/integratedManagement/index'
  import {
    iotSensorFindBySubId,
    iotHardwareFindByType,
    iotHardwareOperatingHardware,
    iotDeviceFindByType,
    iotSpeakerPlayText
  } from '@/api/commonality/permission'
  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  export default {
      name: "infoPage",
      components: {
        vueQr,
        qrCodeDialog,
        H5PlayerVideo
      },
      props:{
        subjectData:{},
      },
      data() {
        return {
          //二维码规则 服务器域名,需与微信后台开发配置内一致.
          identification: localStorage.getItem('codeOnlineAdd'),
          //二维码参数
          qrCodeDialogData:{},
          //主要危险类别
          hazardCategory:[],
          //风险防控措施
          riskMeasure:[],
          //灭火要点
          extinguishingKeyPoints:[],
          //实验室二维码展示开关
          codeType:false,
          //播放文字的实验室id
          open:false,
          form:{},
          rules:{
            text:[
              {required: true, message: '请输入播放文字', trigger: 'blur'},
              { required: true, message: "请输入播放文字", validator: this.spaceJudgment, trigger: "blur" }
            ],
          },
          //传感器数据
          sensorList:[],
          //硬件数据
          hardwareList:[],
          width: 490,
          height: 280,
          //视频权限
          videoType:false,
          //视频数据
          videoList:[],
          //危险源-关联配置数据
          checkInData:{},
          //喇叭数据
          loudspeakerList:[],
          //MQTT请求参数-传感器
          sensorMtOpic:"iot/device/sensor/sub/",
          sensorClient:{},
          lastOnlineTime:'',
          //MQTT请求参数-硬件
          hardwareMtOpic:"iot/hardware/all/sub/",
          hardwareClient:{},
          //红外控制器相关
          infraredControllerType:false,
          infraredControllerTitle:"",
          infraredControllerForm:{
            name:null,//设备名称
            switchType:null,//0.关 1.开
            functionType:null, //1.制冷 2.制热 3.通风
            orderType:null, //温度指令
            hardwareNo:null, //设备编号
          },
          infraredControllerData:{
            functionList:[
              {label:'制冷',value:'1'},
              {label:'制热',value:'2'},
              {label:'通风',value:'3'},
            ],
            //制冷
            refrigerationList:[
              {label:"18°C",value:18},
              {label:"19°C",value:19},
              {label:"20°C",value:20},
              {label:"21°C",value:21},
              {label:"22°C",value:22},
              {label:"23°C",value:23},
              {label:"24°C",value:24},
              {label:"25°C",value:25},
              {label:"26°C",value:26},
              {label:"27°C",value:27},
              {label:"28°C",value:28},
            ],
            //制热
            heatingList:[
              {label:"22°C",value:22},
              {label:"23°C",value:23},
              {label:"24°C",value:24},
              {label:"25°C",value:25},
              {label:"26°C",value:26},
              {label:"27°C",value:27},
              {label:"28°C",value:28},
              {label:"29°C",value:29},
              {label:"30°C",value:30},
            ],
          }
        }
      },
      created() {
      },
      mounted(){
        // 初始化
        this.initialize();
      },
      methods:{
        initialize(){
          //主要危险类别
          this.getDicts("sys_hazard_category").then(response => {
            this.hazardCategory = response.data;
          });
          //风险防控措施
          this.getDicts("sys_risk_measure").then(response => {
            this.riskMeasure = response.data;
          });
          //灭火要点
          this.getDicts("sys_extinguishing_key_points").then(response => {
            this.extinguishingKeyPoints = response.data;
          });
          //安全警示标识
          if(this.subjectData.safeSigns){
            this.subjectData.safeSigns = this.subjectData.safeSigns.split(',')
          }
          //风控防控措施
          if(this.subjectData.riskMeasure){
            this.subjectData.riskMeasure = this.subjectData.riskMeasure.split(',')
          }
          //主要危险类别
          if(this.subjectData.hazardCategory){
            this.subjectData.hazardCategory = this.subjectData.hazardCategory.split(',')
          }
          //灭火要点
          if(this.subjectData.outFire){
            this.subjectData.outFire = this.subjectData.outFire.split(',')
          }
          //传感器查询
          iotSensorFindBySubId({subId:this.subjectData.subId}).then(response => {
            this.$set(this,'sensorList',response.data);
          })
          //硬件查询
          iotHardwareFindByType({subjectId:this.subjectData.subId}).then(response => {
            response.data.forEach((item)=>{
              if(item.hardwareTypeKey == 'airConditioner'){
                if(item.reservedThree == 0){
                  item.switchType = 0;
                }else if(item.reservedThree == 2){
                  item.switchType = 1;
                  item.functionType = 3;
                }else if(item.reservedThree.indexOf('-') != -1){
                  let list = item.reservedThree.split('-');
                  item.switchType = 1;
                  item.functionType = list[0]==3?1:(list[0]==4?2:'');
                  item.orderType = list[1]?list[1]:'';
                }else{
                  item.switchType = '';
                  item.functionType = '';
                  item.orderType = '';
                }
              }
            })
            this.$set(this,'hardwareList',response.data);
          })
          //喇叭查询
          iotDeviceFindByType({ subjectId:this.subjectData.subId, typeKeyList:['horn'] }).then(response => {
            this.$set(this,'loudspeakerList',response.data);
          })
          //危险源-关联配置查询
          laboratorySubRelInfoGetSubRelByCheckHazard({ infoId:this.subjectData.infoId }).then(response => {
            this.$set(this,'checkInData',response.data);
          })
          //视频查询
          if(!controlsRestrictVerify('subVideo')){
            this.$set(this,'videoType',false);
          }else{
            this.videoInitialize();
          }
          //mqtt订阅
          this.sensorOffMQTT('on');
          this.hardwareOffMQTT('on');

        },
        videoInitialize() {
          let self = this;
          // type 1.楼栋 2.楼层 3.楼道 4.实验室
          let obj = {
            page:'1',
            pageSize:'10',
            buildId:'',
            floorId:'',
            passageway:'',
            subIds:[this.subjectData.subId],
          };
          iotCameraFindByCondition(obj).then(response => {
            let list = [];
            for(let i=0;i<response.data.records.length;i++){
              list.push(
                {
                  width: this.width, //(宽度:非必传-默认600)
                  height: this.height, //(高度:非必传-默认338)
                  url: response.data.records[i].streamUrl,
                }
              )
            }
            this.$set(this,'videoList',list)
            this.$nextTick(()=>{
              setTimeout(function(){
                self.$set(self, 'videoType', true);
              },1000);
            })
          });
        },
        //播放文字
        handleAdd(deviceNo) {
          if(!controlsRestrictVerify('subHardwareControl')){
            this.msgError('没有相关操作权限,请联系管理员')
            return
          }
          this.$set(this,'form',{
            deviceNo:deviceNo,
            text:'',
          });
          this.$set(this,'open',true);
        },
        // 取消按钮
        cancel() {
          this.$set(this,'form',{});
          this.$set(this,'open',false);
        },
        /*播放文字*/
        submitFormOne(){
          this.$refs["form"].validate(valid => {
            if (valid) {
              iotSpeakerPlayText(this.form).then(response => {
                this.msgSuccess(response.message)
                this.$set(this,'open',false);
              })
            }
          });
        },
        //展示实验室二维码
        clickCode(){
          this.$set(this,'qrCodeDialogData',{
            // title:this.subjectData.subName,                                               //弹窗名称(非必传)
            download:true,                                                //二维码下载按钮(非必传)
            type:'5',                                                     //二维码类型 用于区分二维码功能类型
            parameter:this.subjectData.infoId+'&subId='+this.subjectData.subId,                                             //二维码参数
            name:this.subjectData.subName,                                                //二维码名称用于下载时命名(非必传)
            codeName:this.subjectData.subName,                                            //二维码图片下名称展示(非必传)
          });
          this.$refs['qrCodeDialog'].initialize();
        },
        // 开启关闭验证
        async changeIsNeedCaptcha (row) {
          let self = this;
          if(!controlsRestrictVerify('subHardwareControl')){
            this.msgError('没有相关操作权限,请联系管理员')
            return
          }
          let text = row.operatingState?'关闭':'开启';
          this.$confirm(`是否`+text+`此设备`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            self.switchChange(row)
          }).catch(() => {

          })
        },
        //开关按钮
        switchChange(row){
          let switchData = {
            hardwareNo:row.hardwareNo,
            command:row.operatingState?'0':'1'
          };
          iotHardwareOperatingHardware(switchData).then(response => {
            if(response.code==200){
              this.msgSuccess("操作成功")
            }
          });
        },
        //返回上一页
        backPage(){
          this.$parent.clickPage(1);
        },
        //MQTT订阅
        sensorMQTT(){
          let self = this;
          this.sensorClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
            username: localStorage.getItem('mqttUser'),
            password:localStorage.getItem('mqttPassword')
          });
          this.sensorClient.on("connect", e =>{
            this.sensorClient.subscribe(this.sensorMtOpic+self.subjectData.subId, (err) => {
              if (!err) {
                // console.log("订阅成功:" + this.sensorMtOpic+self.subjectData.subId);
              }else{
                // console.log("连接错误:" + err);
              }
            });
          });
          this.sensorClient.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连接
        sensorOffMQTT(type){
          let self = this;
          if(self.sensorClient.unsubscribe){
            self.sensorClient.unsubscribe(this.sensorMtOpic+self.subjectData.subId, error => {
              if (error) {
                // console.log('mqtt关闭连接错误:', error)
              }
            })
            self.sensorClient.end();
            this.$set(this,'sensorClient',{});
          }
          //判断传入参数如果存在 发起一次新的连接
          if(type){
            this.sensorMQTT();
          }
        },
        //MQTT订阅
        hardwareMQTT(){
          let self = this;
          this.hardwareClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
            username: localStorage.getItem('mqttUser'),
            password:localStorage.getItem('mqttPassword')
          });
          this.hardwareClient.on("connect", e =>{
            this.hardwareClient.subscribe(self.hardwareMtOpic+self.subjectData.subId, (err) => {
              if (!err) {
                // console.log("订阅成功:" + self.hardwareMtOpic+self.subjectData.subId);
              }else{
                // console.log("连接错误:" + err);
              }
            });
          });
          this.hardwareClient.on("message", (topic, message) => {
            if (message){
              let data = JSON.parse(message)
              // console.log('硬件-mqtt',data)
              let list = JSON.parse(JSON.stringify(this.hardwareList))
              list.forEach((item)=>{
                if(item.hardwareNo == data.hardwareNo){
                  if(item.hardwareTypeKey == 'airConditioner'){
                    if(data.command == 0){
                      item.switchType = 0;
                      item.functionType = '';
                      item.orderType = '';
                    }else if(data.command == 2){
                      item.switchType = 1;
                      item.functionType = 3;
                      item.orderType = '';
                    }else if(data.command.indexOf('-') != -1){
                      let list = data.command.split('-');
                      item.switchType = 1;
                      item.functionType = list[0]==3?1:(list[0]==4?2:'');
                      item.orderType = list[1]?list[1]:'';
                    }else{
                      item.switchType = '';
                      item.functionType = '';
                      item.orderType = '';
                    }
                  }else{
                    item.operatingState = data.operatingState;
                    item.online = data.online;
                  }
                }
              })
              this.$set(this,'hardwareList',list);
            }
          });
        },
        //取消订阅关闭MQTT连接
        hardwareOffMQTT(type){
          let self = this;
          if(self.hardwareClient.unsubscribe){
            self.hardwareClient.unsubscribe(self.hardwareMtOpic+self.subjectData.subId, error => {
              if (error) {
                // console.log('mqtt关闭连接错误:', error)
              }
            })
            self.hardwareClient.end();
            this.$set(this,'hardwareClient',{});
          }
          //判断传入参数如果存在 发起一次新的连接
          if(type){
            this.hardwareMQTT();
          }
        },

        /**************** 红外控制器操作相关 ****************/
        //弹层关闭
        dialogOff(){
          this.$set(this,'infraredControllerType',false);
        },
        //弹层开启
        dialogOpen(item){
          if(!controlsRestrictVerify('subHardwareControl')){
            this.msgError('没有相关操作权限,请联系管理员')
            return
          }
          this.$set(this,'infraredControllerTitle','空调控制');
          this.$set(this,'infraredControllerForm',{
            name:item.hardwareName,
            switchType:parseInt(item.switchType),
            functionType:item.switchType == 0 ? 1 : parseInt(item.functionType),
            orderType:item.switchType == 1 && item.functionType !=3 ? parseInt(item.orderType):18,
            hardwareNo:item.hardwareNo,
          });
          this.$set(this,'infraredControllerType',true);
        },
        dialogSubmit(){
          let text = '';
          if(this.infraredControllerForm.switchType == 1){
            if(this.infraredControllerForm.functionType == 1){
              text = '3-' + this.infraredControllerForm.orderType;
            }else if(this.infraredControllerForm.functionType == 2){
              text = '4-' + this.infraredControllerForm.orderType;
            }else if(this.infraredControllerForm.functionType == 3){
              text = '2';
            }
          }else if(this.infraredControllerForm.switchType == 0){
            text = '0';
          }
          let switchData = {
            hardwareNo:this.infraredControllerForm.hardwareNo,
            command:text
          };
          iotHardwareOperatingHardware(switchData).then(response => {
            if(response.code==200){
              this.msgSuccess("操作成功")
              this.$set(this,'infraredControllerType',false);
            }
          });
        },
        //开关切换
        switchTypeButton(){
          if(!this.infraredControllerForm.switchType){
            if (this.infraredControllerForm.functionType == 1){
              if(this.infraredControllerForm.orderType<18 || this.infraredControllerForm.orderType>28){
                this.$set(this.infraredControllerForm,'orderType',18);
              }
            } else if(this.infraredControllerForm.functionType == 2){
              if(this.infraredControllerForm.orderType<22 || this.infraredControllerForm.orderType>30){
                this.$set(this.infraredControllerForm,'orderType',22);
              }
            }else if(this.infraredControllerForm.functionType == 3){
              this.$set(this.infraredControllerForm,'orderType',18);
            }else{
              this.$set(this.infraredControllerForm,'functionType',1);
              this.$set(this.infraredControllerForm,'orderType',18);
            }
          }
          this.$set(this.infraredControllerForm,'switchType',!this.infraredControllerForm.switchType);
        },
        //状态切换
        functionButton(value){
          if(this.infraredControllerForm.functionType != value){
            if (value == 1){
              if(this.infraredControllerForm.orderType<18 || this.infraredControllerForm.orderType>28){
                this.$set(this.infraredControllerForm,'orderType',18);
              }
            } else if(value == 2){
              if(this.infraredControllerForm.orderType<22 || this.infraredControllerForm.orderType>30){
                this.$set(this.infraredControllerForm,'orderType',22);
              }
            }
            this.$set(this.infraredControllerForm,'functionType',value);
          }
        },
        //指令切换
        minusTextButton(){
          if (this.infraredControllerForm.functionType == 1){
            if(this.infraredControllerForm.orderType>18){
              this.infraredControllerForm.orderType--
            }
          } else if(this.infraredControllerForm.functionType == 2){
            if(this.infraredControllerForm.orderType>22){
              this.infraredControllerForm.orderType--
            }
          }
        },
        addTextButton(){
          if (this.infraredControllerForm.functionType == 1){
            if(this.infraredControllerForm.orderType<28){
              this.infraredControllerForm.orderType++
            }
          } else if(this.infraredControllerForm.functionType == 2){
            if(this.infraredControllerForm.orderType<30){
              this.infraredControllerForm.orderType++
            }
          }
        },
      },
      beforeDestroy() {
        //清除定时器
        let self = this;
        self.sensorOffMQTT();
        self.hardwareOffMQTT();
      },
    }
</script>

<style lang="scss" scoped>
  .subject-infoPage{
    flex:1;
    display: flex;
    overflow: hidden;
    .left-max-box{
      font-weight:500;
      width:1035px;
      display: flex;
      flex-direction: column;
      border-radius:10px!important;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
      padding:20px;
      margin:5px 10px 20px 10px;
      .left-top-title-box{
        margin-top:13px;
        display: flex;
        border-bottom:1px dashed #999999;
        .left-box{
          flex:1;
          .lv-name-box{
            height:34px;
            display: flex;
            p:nth-child(1){
              height:22px;
              line-height:20px;
              margin:6px 15px 0 0;
              font-size:12px;
              text-align: center;
              padding:0 8px;
              border-radius:4px;
            }
            p:nth-child(2){
              font-size:16px;
              height:34px;
              line-height:34px;
              color:#333;
            }
            .subArea-p{
              font-size:14px;
              height:34px;
              line-height:34px;
              color:#333;
              margin-left:10px;
            }
          }
          .type-address-box{
            padding:5px 0 10px 0;
            p{
              display: inline-block;
              font-size:14px;
              height:20px;
              line-height:20px;
              color:#999;
            }
            .type-p{
              margin-right:10px;
            }
            .type-address{
              margin-left:10px;
            }
          }
        }
        .right-code-img{
          width:60px;
          height:60px;
          margin:0 10px 0 0;
          cursor: pointer;
        }
      }
      .user-max-box{
        margin-top:10px;
        display: flex;
        .left-box{
          width:420px;
          display: flex;
          p{
            line-height: 32px;
            font-size:14px;
            flex:1;
            color:#333;
            span{
              color:#999;
            }
          }
        }
        .right-box{
          flex:1;
          div{
            flex:1;
            display: flex;
            p{
              line-height: 32px;
              font-size:14px;
              flex:1;
              color:#333;
              span{
                color:#999;
              }
            }
          }
        }
      }
      .info-max-title-p{
        line-height:20px;
        font-size:16px;
        color:#333;
        font-weight:700;
        border-top:1px dashed #999999;
        padding-top:20px;
        margin-top:10px;
      }
      .info-max-box{
        margin-top:7px;
        display: flex;
        flex-wrap: wrap;
        .null-text-p{
          flex:1;
          font-size:16px;
          color:#999;
          text-align: center;
          line-height:60px;
        }
        .for-text-box{
          width:420px;
          .info-title{
            font-size:14px;
            color:#333;
            line-height:40px;
            font-weight:700;
          }
          .for-box{
            overflow: hidden;
            .for-info-p{
              line-height:16px;
              font-size:14px;
              color:#999;
              margin:7px 0;
              overflow: hidden;
            }
          }
        }
        .for-img-box{
          width:420px;
          .info-title{
            font-size:14px;
            color:#333;
            line-height:40px;
            font-weight:700;
          }
          img{
            width:37px;
            height:50px;
            margin:0 14px 14px 0;
          }
        }
      }
    }
    .right-max-box{
      font-weight:500;
      width:545px;
      border-radius:10px!important;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
      margin:5px 20px 20px 10px;
      padding:20px;
      .sensor-box{
        display: inline-block;
        font-size:14px;
        color:#333;
        line-height:34px;
        width:220px;
        span{
          color:#999;
        }
      }
      .things-box{
        width:200px;
        height:30px;
        display: inline-block;
        margin-bottom:10px;
        margin-right:40px;
        .things-for-box{
          display: flex;
          .left-title{
            flex:1;
            font-size:14px;
            color:#333;
            line-height:30px;
            margin-right:10px;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          .switch{

          }
          .switch-null-p{
            font-size:14px;
            color:#999;
            line-height:30px;
          }
          .right-button{
            cursor: pointer;
            line-height:30px;
            border-radius:6px;
            border:1px solid #0045af;
            color:#0045af;
            font-size:14px;
            text-align: center;
            width:80px;
          }
        }
      }
      .things-box-one{
        width:440px;
        height:30px;
        display: inline-block;
        margin-bottom:10px;
        margin-right:40px;
        .things-box-one-for{
          display: flex;
          p{
            font-size:14px;
            height:20px;
            line-height:20px;
          }
          .name-p{
            width:140px;
            color:#333;
            margin-right:10px;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          .text-box{
            display: flex;
            flex:1;
            p:nth-child(1){
              width:40px;
              text-align: center;
              border-radius:4px;
              margin-right:10px;
              font-size:12px!important;
            }
            p:nth-child(2){
              width:50px;
              text-align: center;
            }
            p:nth-child(3){
              width:40px;
              text-align: center;
            }
            .colorOpen{
              background-color: #0183FA;
              color:#fff;
            }
            .colorOff{
              background-color: #999;
              color:#fff;
            }
            .colorText{
              color:#999;
            }
          }
          .button-p{
            background-color: #0183FA;
            color:#fff;
            font-size:12px;
            width:50px;
            line-height:20px;
            text-align: center;
            border-radius:20px;
            cursor: pointer;
          }
        }
      }
      .source-box{
        span{
          font-size:14px;
          line-height:18px;
          color:#333;
        }
      }
      .inspection-box{
        display: flex;
        .inspection-left-box{
          flex:1;
          div{
            display: flex;
            p:nth-child(1){
              line-height:16px;
              font-size:14px;
              margin:11px 0;
              color:#333;
            }
            p:nth-child(2){
              flex:1;
              line-height:16px;
              font-size:14px;
              margin:11px 0;
              color:#999;
              span{
                color:#999;
              }
            }
          }
        }
        .inspection-right-box{
          flex:1;
          div{
            display: flex;
            p:nth-child(1){
              line-height:16px;
              font-size:14px;
              margin:11px 0;
              color:#333;
            }
            p:nth-child(2){
              flex:1;
              line-height:16px;
              font-size:14px;
              margin:11px 0;
              color:#999;
              span{
                color:#999;
              }
            }
          }
        }
      }
    }
    .null-p{
      line-height:50px;
      text-align: center;
      font-size:14px;
      color:#999;
    }
    .null-data-img{
      display: block;
      margin:10px auto;
      width:150px;
    }
    .all-title-box{
      display: flex;
      height:18px;
      p{
        line-height:18px;
      }
      p:nth-child(1){
        width:4px;
        height:18px;
        margin-right:12px;
        background: #0045af;
      }
      p:nth-child(2){
        font-size:18px;
        color:#0045af;
        margin-right:28px;
        font-weight:700;
      }
      p:nth-child(3){
        font-size:14px;
        color:#999;
        flex:1;
      }
      p:nth-child(4){
        line-height:40px!important;
      }
    }
  }
</style>
<style lang="scss">
  .subject-infoPage{
    .el-switch{
      display: block;
      width:50px!important;
      height:20px!important;
      margin-top: 5px!important;
    }
    .switch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    .switch .el-switch__label.is-active {
      display: block;
    }
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 50px !important;
      height:20px!important;
      line-height:20px!important;
      -webkit-border-radius: 20px!important;
      -moz-border-radius: 20px!important;
      border-radius: 20px!important;
      margin: 0;
      position: absolute;
      top: 0;
    }
    .switch .el-switch__label--left {
      z-index: 1;
    }
    .switch .el-switch__label--left span{
      margin-left:19px;
      font-size: 12px;
      color:#fff;
    }
    .switch .el-switch__label--right {
      z-index: 1;
    }
    .switch .el-switch__label--right span{
      margin-left:6px;
      font-size: 12px;
      color:#fff;
    }
    .el-switch__core{
      background-color: #999;
    }
    .el-switch__core:after{
      height:14px!important;
      width:14px!important;
      top:2px!important;
      left:2px;
    }
    .el-switch.is-checked .el-switch__core{
      background-color: #1890ff;
    }
    .el-switch.is-checked .el-switch__core::after{
      margin-left: -16px!important;
    }
  }
  .subject-infoPage-dialog{
    .infraredController-max-big-box{
      font-size:16px;
      .infraredController-switchType-box{
        display: flex;
        p{
          line-height:30px;
        }
        .switchType-name-p{
          font-size:18px;
          flex:1;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .switchType-type-p{
          cursor: pointer;
          width:80px;
          text-align: center;
          border-radius:6px;
          background-color: #fff;
          border:1px solid #0183FB;
          color:#0183FB;
        }
        .switchType-type-off-p{
          background-color: #fff!important;
          border:1px solid #999!important;
          color:#999!important;
        }
      }
      .infraredController-functionType-box{
        margin-top:20px;
        display: flex;
        p{
          border-radius:6px;
          background-color: #fff;
          border:1px solid #999;
          color:#333;
          line-height:40px;
          width:130px;
          text-align: center;
          margin-left:14px;
          cursor: pointer;
        }
        p:nth-child(1){
          margin-left:0!important;
        }
        .check-button{
          background-color: #0183FB!important;
          border:1px solid #0183FB!important;
          color:#fff!important;
        }
      }
      .infraredController-orderType-box{
        margin-top:20px;
        display: flex;
        p{
          text-align: center;
          line-height:40px;
          width:60px;
        }
        .order-minus{
          cursor: pointer;
          border:1px solid #999;
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
        }
        .order-text{
          width:300px;
          border-top:1px solid #999;
          border-bottom:1px solid #999;
        }
        .order-add{
          cursor: pointer;
          border:1px solid #999;
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
        }
      }
    }
  }
</style>