<!--实验室配置-->
<template>
  <div class="subject">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="form-box" v-if="pageType==1">
      <el-col :span="1.5" style="margin-right:20px;margin-bottom:30px;">
        <p class="add-button-one-120"
           @click="drawerBoxOn()"
           v-hasPermi="['laboratory:subject:add']"
        ><i class="el-icon-plus"></i>新增实验室</p>
      </el-col>
      <el-form-item label="实验室名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入实验室名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="学院" prop="type" style="margin-left:-30px;">
        <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable size="small">
          <el-option
            v-for="dict in deptOptions"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <p class="inquire-button-one" @click="handleQuery">查询</p>
        <p class="reset-button-one" @click="resetQuery">重置</p>
      </el-form-item>
    </el-form>
    <div class="max-for-box" v-if="pageType==1">
      <div class="big-for-box" v-for="(item,index) in subjectList" :key="indexTwo">
        <div class="for-top-box">
          <div class="for-top-box-left">
            <div class="display-inline-block" style="width:110px;">
              <div class="for-warn-lv-box" :style="'color:'+item.fiedColor+';border:2px solid '+item.fiedColor+';'">
                <!--<img v-if="item.subClassVO.classtypeId==1" src="@/assets/ZDimages/icon_11.png">-->
                <!--<img v-if="item.subClassVO.classtypeId==2" src="@/assets/ZDimages/icon_12.png">-->
                <!--<img v-if="item.subClassVO.classtypeId==3" src="@/assets/ZDimages/icon_13.png">-->
                <!--<img v-if="item.subClassVO.classtypeId==4" src="@/assets/ZDimages/icon_14.png">-->
                <div>
                  <p>{{item.typeName}}</p>
                  <p>{{item.levelName}}</p>
                </div>
              </div>
            </div>
            <div class="display-inline-block" style="width:250px;">
              <div class="for-name-box address-box">
                <p class="color_99">{{item.name}}</p>
                <p class="color_33">{{item.address}}</p>
              </div>
            </div>
            <div class="display-inline-block" style="width:130px;">
              <div class="for-name-box ">
                <p class="color_99">学院</p>
                <p class="color_33">{{item.deptName}}</p>
              </div>
            </div>
            <div class="display-inline-block" style="width:120px;">
              <div class="for-name-box ">
                <p class="color_99">实验室负责人</p>
                <p class="color_33">{{item.adminName}}</p>
              </div>
            </div>
            <div class="display-inline-block">
              <div class="for-button-box "
                   v-if="item.videoType">
                <p class="color_33">视频控制</p>
                <p @click="pageSwitchOn(item)">查看监控</p>
              </div>
            </div>
            <div class="display-inline-block"
                 v-for="(minItem,index) in item.labHardwareVOList" :key="indexTwo"
                 v-if="minItem.hardwareTypeEnum.enumName=='SWITCH'">
              <div class="for-switch-box ">
                <p class="color_33">电源控制</p>
                <el-switch
                  v-if="minItem.state.code == 3||minItem.state.code == 4"
                  class="switch"
                  @click.native="changeIsNeedCaptcha(minItem)"
                  v-model="minItem.state.code"
                  :active-value="3"
                  :inactive-value="4"
                  active-text="开"
                  inactive-text="关"
                  disabled
                >
                </el-switch>
                <p v-else :class="minItem.state.code == 0?'table-type-color-red':''">{{minItem.state.code == 0?'离线':'未知'}}</p>
              </div>
            </div>
            <div class="display-inline-block"
                 v-for="(minItem,index) in item.labHardwareVOList" :key="indexTwo"
                 v-if="minItem.hardwareTypeEnum.enumName=='AI_VENTILATION'">
              <div class="for-switch-box ">
                <p class="color_33">智能通风</p>
                <el-switch
                  v-if="minItem.state.code == 3||minItem.state.code == 4"
                  class="switch"
                  @click.native="changeIsNeedCaptcha(minItem)"
                  v-model="minItem.state.code"
                  :active-value="3"
                  :inactive-value="4"
                  active-text="开"
                  inactive-text="关"
                  disabled
                >
                </el-switch>
                <p v-else :class="minItem.state.code == 0?'table-type-color-red':''">{{minItem.state.code == 0?'离线':'未知'}}</p>
              </div>
            </div>
            <div class="display-inline-block"
                 v-for="(minItem,index) in item.labHardwareVOList" :key="indexTwo"
                 v-if="minItem.hardwareTypeEnum.enumName=='ONE_MACHINE'">
              <div class="for-button-box ">
                <p class="color_33">广播系统</p>
                <p @click="handleAdd(item.id)" v-hasPermi="['laboratory:subject:add']">播放文字</p>
              </div>
            </div>
          </div>
          <div class="for-top-box-right">
            <div class="display-inline-block">
              <div class="for-warn-button-box-one ">
                <img src="@/assets/ZDimages/icon_syspz_sysmp.png">
                <p @click="safetyCardButton(item)">安全信息牌</p>
              </div>
            </div>
            <div class="display-inline-block">
              <div class="for-warn-button-box ">
                <img src="@/assets/ZDimages/icon_15.png">
                <p @click="drawerBoxOnTwo(item.id,item.layoutId)">关联危险源</p>
              </div>
            </div>
            <div class="display-inline-block" style="margin-right:0;">
              <el-dropdown @command="moreClick" v-if="item.admin">
                <p class="table-more-p">更多>></p>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{item,command:1}">编辑</el-dropdown-item>
                  <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;" :command="{item,command:2}">准入配置</el-dropdown-item>
                  <el-dropdown-item style="margin:0 10px;" :command="{item,command:3}">{{item.isDel?'启用':'禁用'}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <p class="position-date-p" v-if="item.sensorFunctionStatusList[0]">{{item.sendDate}}</p>
        <div class="for-bottom-box" v-if="item.sensorFunctionStatusList[0]">
          <div class="for-type-box-big" v-for="(minItem,index2) in item.sensorFunctionStatusList" :key="index2">
            <div class="for-type-box" >
              <img src="@/assets/ZDimages/icon_16.png" v-if="minItem.funNum == 'wendu'">
              <img src="@/assets/ZDimages/icon_17.png" v-if="minItem.funNum == 'shidu'">
              <img src="@/assets/ZDimages/icon_18.png" v-if="minItem.funNum == 'co'">
              <img src="@/assets/ZDimages/icon_19.png" v-if="minItem.funNum == 'jiawan'">
              <img src="@/assets/ZDimages/icon_20.png" v-if="minItem.funNum == 'fenchen'">
              <img src="@/assets/ZDimages/icon_21.png" v-if="minItem.funNum == 'o2'">
              <img src="@/assets/ZDimages/icon_22.png" v-if="minItem.funNum == 'yanwu'">
              <img src="@/assets/ZDimages/icon_23.png" v-if="minItem.funNum == 'daqiya'">
              <img src="@/assets/ZDimages/icon_tovc.png" v-if="minItem.funNum == 'tvoc'">
              <img src="@/assets/ZDimages/icon_tovc.png" v-if="minItem.funNum == 'voc'">
              <img src="@/assets/ZDimages/icon_so2.png" v-if="minItem.funNum == 'so2'">
              <img src="@/assets/ZDimages/icon_no.png" v-if="minItem.funNum == 'no1'">
              <!--
              tovc
              so2
              no1

              -->
              <div>
                <p class="color_99">{{minItem.describe}}：</p>
                <p class="color_33">{{minItem.formatVal}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="for-bottom-box" v-if="!item.sensorFunctionStatusList[0]">
          <p class="null-p-box">暂未绑定硬件设备</p>
        </div>
      </div>
      <img v-if="!subjectList[0]" src="@/assets/ZDimages/null-data-1.png" style="display: block;width:200px;margin:100px auto;">
    </div>
    <!--视屏监控-->
    <subject-video :videoData="videoData" v-if="pageType==2"></subject-video>
    <!--实验室准入-->
    <admission-configuration v-if="pageType==3" :subjectData="subjectData"></admission-configuration>
    <!-- 添加或修改实验室对话框 -->
    <el-dialog :title="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="txt">
          <el-input v-model="form.txt" placeholder="请输入播放文字" />
        </el-form-item>
        <el-form-item label="播报方式" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">文字</el-radio>
            <el-radio :label="2">音频</el-radio>
          </el-radio-group>
        </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-drawer
      class="configuration-drawer-one"
      :visible.sync="drawer"
      direction="rtl"
      ref="drawer"
      :with-header="false"
      :show-close="false"
      :before-close="handleClose">
      <div class="configuration-drawer-max-box-one">
        <div class="configuration-drawer-content" style="padding:20px 20px;">
          <el-form ref="form" :model="form" label-width="110px" :rules="rules" >
            <el-form-item label="实验室名称" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输实验室名称"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="展示排序" prop="diyOrder">
              <el-input
                v-model="form.diyOrder"
                placeholder="请输入展示排序"
                clearable
                maxlength="20"
                size="small"
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item label="安全分级"  prop="subDept">
              <el-select v-model="form.level" placeholder="请选择安全分级" clearable>
                <el-option
                  v-for="dict in levelList"
                  :key="dict.id"
                  :label="dict.classifiedName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="安全分类"  prop="subDept">
              <el-select v-model="form.typeId" placeholder="请选择安全分类" clearable>
                <el-option
                  v-for="dict in typeList"
                  :key="dict.id"
                  :label="dict.typeName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
<!--            <el-form-item label="学科类别"  prop="subDept">-->
<!--              <el-select v-model="form.subDept" placeholder="请选择学科类别" clearable>-->
<!--                <el-option-->
<!--                  v-for="dict in subClassOptions"-->
<!--                  :key="dict.dictValue"-->
<!--                  :label="dict.dictLabel"-->
<!--                  :value="dict.dictValue"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
            <el-form-item label="学院" prop="deptId" style="width:260px;">
              <el-select v-model="form.deptId" placeholder="请选择学院" @change="getBuildings">
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼栋"  prop="buildId">
              <el-select v-model="form.buildId" placeholder="请选择楼栋"  @change="getFloors">
                <el-option
                  v-for="dict in buildings"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="层数" prop="floorId">
              <el-select v-model="form.floorId"  placeholder="请选择层数" @change="getLayouts">
                 <el-option
                  v-for="dict in floors"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细位置" prop="layoutId">
              <el-select v-model="form.layoutId"  placeholder="请选择详细位置">
                 <el-option
                  v-for="dict in layoutLists"
                  :key="dict.id"
                  :label="dict.room"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="实验室负责人" prop="adminId">
              <el-select
                v-model="form.adminId"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入至少2个字符"
                :remote-method="userSelectList"
                :loading="loading">
                <el-option
                  v-for="item in optionsUser"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="进入时检查项" prop="checkOutArr">
              <el-select v-model="form.checkIn" multiple  placeholder="请选择实验室检查项" >
                <el-option
                  v-for="dict in onepcOutcheckIn"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="离开时检查项" prop="checkOutArr">
                <el-select v-model="form.checkOutArr" multiple  placeholder="请选择实验室检查项" >
                 <el-option
                  v-for="dict in onepcOutcheck"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
                </el-select>
            </el-form-item>
            <!--新增部分-->
            <el-form-item label="安全责任人" prop="safeUserId">
              <el-select
                v-model="form.safeUserId"
                :multiple-limit="2"
                multiple
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入至少2个字符"
                :remote-method="userSelectListOne"
                :loading="loading">
                <el-option
                  v-for="item in optionsUserOne"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="安全警示标识" prop="safeSigns">
              <el-select v-model="form.safeSigns" multiple  placeholder="请选择安全警示标识" >
                <el-option
                  v-for="dict in safetyWarning"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主要危险类别" prop="hazardCategory">
              <el-select v-model="form.hazardCategory" multiple  placeholder="请选择主要危险类别" >
                <el-option
                  v-for="dict in hazardCategory"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="风控防控措施" prop="riskMeasure">
              <el-select v-model="form.riskMeasure" multiple  placeholder="请选择风险防控措施" >
                <el-option
                  v-for="dict in riskMeasure"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="灭火要点" prop="outfire">
              <el-select v-model="form.outfire" multiple  placeholder="请选择灭火要点" >
                <el-option
                  v-for="dict in extinguishingKeyPoints"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二维码" prop="qrCode">
              <el-upload
                class="avatar-uploader"
                :action="uploadImgUrl"
                accept="image/jpeg,image/gif,image/png"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :headers="headers"
                :before-upload="beforeAvatarUpload">
                <img v-if="form.qrCode" :src="form.qrCode" class="avatar">
                <i v-if="!form.qrCode" class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

          </el-form>
        </div>
        <div class="configuration-bottom-button-box">
          <p></p>
          <p @click="offDrawer">取消</p>
          <p style="color:#fff;background:#0045af;" @click="addSub">提交</p>
        </div>
      </div>
    </el-drawer>
    <!--关联危险源-->
    <el-drawer
      class="subject-drawer subject-drawer-box"
      :visible.sync="drawerTwo"
      direction="rtl"
      ref="drawerTwo"
      :with-header="false"
      :show-close="false"
      :before-close="handleClose">
      <div class="subject-drawer-max-box">
        <div class="subject-drawer-content">
          <el-form label-width="80px" ref="hazardForm" :model="form" :rules="rules">
            <el-form-item label="危险源" prop="hazardId">
              <el-select v-model="form.hazardId" multiple @change="addMapObj"  placeholder="请选择危险源" >
                <el-option
                  v-for="dict in hazardList"
                  :key="dict.id"
                  :label="dict.chName"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="危险源位置" style="display: flex;">
              <div class="map-box" :style="'width:'+mapData.widthData*3+'px;height:'+mapData.heightData*3+'px;'">
                <div v-for="(item,index1) in newDangerData" :key="index1"
                   :style="'top:'+item.yPoint+'px;left:'+item.xPoint+'px;'"
                   @mouseenter="moveClick(index1)"
                   @mousedown="move">
                  <i class="el-icon-close" @click="delBox(index1)"></i>
                  {{item.label?item.label:item.name}}
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="subject-bottom-button-box">
          <p></p>
          <p @click="offDrawerTwo">取消</p>
          <p @click="submitHazard">提交</p>
        </div>
      </div>
    </el-drawer>

    <el-dialog title="安全牌信息" class="safety-card-type-max-box" :visible.sync="safetyCardType" v-if="safetyCardType" width="800px" append-to-body>
      <div class="safety-card-type-big-box">
        <div class="top-title-box">
          <div class="for-warn-lv-box" :style="'color:'+safetyCardType.fiedColor+';border:1px solid '+safetyCardType.fiedColor+';'">
            <!--<img v-if="safetyCardData.subClassVO.classtypeId==1" src="@/assets/ZDimages/icon_11.png">-->
            <!--<img v-if="safetyCardData.subClassVO.classtypeId==2" src="@/assets/ZDimages/icon_12.png">-->
            <!--<img v-if="safetyCardData.subClassVO.classtypeId==3" src="@/assets/ZDimages/icon_13.png">-->
            <!--<img v-if="safetyCardData.subClassVO.classtypeId==4" src="@/assets/ZDimages/icon_14.png">-->
            <div>
              <p>{{safetyCardData.typeName}}</p>
              <p>{{safetyCardData.levelName}}</p>
            </div>
          </div>
          <p class="right-name-p">{{safetyCardData.name}}</p>
        </div>
        <div class="address-max-box">
          <div style="flex:4;">
            <p class="text-p">{{safetyCardData.address}}</p>
          </div>
          <div style="flex:3;">
            <p class="name-p">实验室负责人：</p>
            <p class="text-p">{{safetyCardData.adminName}}</p>
          </div>
          <div style="flex:4;">
            <p class="name-p">安全责任人：</p>
            <p class="text-p">{{safetyCardData.safeUserName}}</p>
          </div>
        </div>
        <div class="address-max-box">
          <div style="flex:4;">
            <p class="name-p">责任单位：</p>
            <p class="text-p">{{safetyCardData.deptName}}</p>
          </div>
          <div style="flex:3;">
            <p class="name-p">联系方式：</p>
            <p class="text-p">{{safetyCardData.adminPhone}}</p>
          </div>
          <div style="flex:4;">
            <p class="name-p">联系方式：</p>
            <p class="text-p">{{safetyCardData.safeUserPhone}}</p>
          </div>
        </div>
        <div class="position-max-box">
          <div class="position-min-box">
            <p class="left-p">主要危险类别：</p>
            <div class="right-box">
              <div class="for-box" v-for="(item,index1) in safetyCardData.hazardCategory" :key="index1">
                <p class="for-p" v-for="(minItem,index2) in hazardCategory" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</p>
              </div>
            </div>
          </div>
          <div class="position-min-box">
            <p class="left-p">风控防控措施：</p>
            <div class="right-box">
              <div class="for-box" v-for="(item,index1) in safetyCardData.riskMeasure" :key="index1">
                <p class="for-p" v-for="(minItem,index2) in riskMeasure" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="inline-block-max-box">
          <p class="left-p">灭火要点：</p>
          <div class="right-box">
            <div class="for-box" v-for="(item,index1) in safetyCardData.outfire" :key="index1">
              <p class="for-p" v-for="(minItem,index2) in extinguishingKeyPoints" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</p>
            </div>
          </div>
        </div>
        <div class="img-max-box">
          <p class="left-p">安全警示标识：</p>
          <div class="right-box">
            <img src="@/assets/newImages/icon_aqxxp_jzxy.png" v-if="item == 'xiyan'" v-for="(item,index) in safetyCardData.safeSigns" :key="indexTwo">
            <img src="@/assets/newImages/icon_aqxxp_jzys.png" v-if="item == 'yinshi'" v-for="(item,index) in safetyCardData.safeSigns" :key="indexTwo">
            <img src="@/assets/newImages/icon_aqxxp_dxaq.png" v-if="item == 'anquan'" v-for="(item,index) in safetyCardData.safeSigns" :key="indexTwo">
            <img src="@/assets/newImages/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in safetyCardData.safeSigns" :key="indexTwo">
            <img src="@/assets/newImages/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in safetyCardData.safeSigns" :key="indexTwo">
            <img src="@/assets/newImages/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in safetyCardData.safeSigns" :key="indexTwo">
          </div>
        </div>
        <img class="code-img" :src="safetyCardData.qrCode">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mqtt from 'mqtt'
import { hardWareControl } from "@/api/laboratory/hardware";
import { listSubject, authListSubject,getSubject, delSubject, addSubject, updateSubject,removeSubject,channels,startUrl,mangerVoice,subjectType } from "@/api/laboratory/subject";
import { listFloorByBuildId } from "@/api/laboratory/building";
import { onUselistLayoutByFloorId,onUselistLayoutByFloorIdTwo } from "@/api/laboratory/layout";
import { subjectListHazard,getHazardLayout,addRelation } from "@/api/laboratory/hazard";
import { listHazard } from "@/api/permissionRequired";
import subjectVideo from "./video.vue";
import admissionConfiguration from "./admissionConfiguration.vue";
import Treeselect from "@riophae/vue-treeselect";
import { done } from 'element-ui';
import { listDepartments,listbuildings } from "@/api/system/dept";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { selectTeacherList } from "@/api/system/user";
import { Message } from 'element-ui'
import { getToken } from "@/utils/auth";
import { listClassifiedAll } from "@/api/laboratory/classified";
import { listClasstypeAll } from "@/api/laboratory/classtype";

export default {
  components: {
    subjectVideo,
    Treeselect,
    admissionConfiguration
  },
  name: "Subject",
  data() {
    return {
      // 上传相关
      uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken()
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 实验室表格数据
      subjectList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 学科类别字典
      subClassOptions: [],
      // 进入检查项配置
      onepcOutcheckIn:[],
      // 离开检查项配置
      onepcOutcheck: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        floorId: null,
        room: null,
        deptId: null,
        deptName: null,
        adminId: null,
        isDel: null,
        userId: null,
        diyOrder: null
      },
      // 表单参数
      form: {
        id: null,
        name: null,
        floorId: null,
        buildId:null,
        layoutId:null,
        room: null,
        qrCode:null,
        deptId: null,
        deptName: null,
        adminId: null,
        subDept:null,
        checkOut:null,
        remark: null,
        typeId: null
      },
      // 表单校验
      rules: {
        name:[
          {required: true, message: '请输入房间编号', trigger: 'blur'},
          { required: true, message: "请输入房间编号", validator: this.spaceJudgment, trigger: "blur" }
        ],
        deptId:[
          {required: true, message: '学院不能为空', trigger: 'blur'}
        ],
        // subDept:[
        //   {required: true, message: '学科类别不能为空', trigger: 'blur'}
        // ],
        buildId:[
          {required: true, message: '楼栋不能为空', trigger: 'blur'}
        ],
        floorId:[
          {required: true, message: '层数不能为空', trigger: 'blur'}
        ],
        layoutId:[
          {required: true, message: '详细位置不能为空', trigger: 'blur'}
        ],
        // adminId:[
        //   {required: true, message: '实验室负责人不能为空', trigger: 'blur'}
        // ],
        // checkOutArr:[
        //   {required: true, message: '实验室检查项不能为空', trigger: 'blur'}
        // ],
        hazardId:[
          {required: true, message: '请选择危险源', trigger: 'blur'}
        ],
        txt:[
          {required: true, message: '请输入播放文字', trigger: 'blur'},
          { required: true, message: "请输入播放文字", validator: this.spaceJudgment, trigger: "blur" }
        ],
        type:[
          {required: true, message: '请选择播报方式', trigger: 'blur'}
        ],
        /*safeUserId:[
          {required: true, message: '安全责任人不能为空', trigger: 'blur'}
        ],
        safeSigns:[
          {required: true, message: '请选择安全警示标识', trigger: 'blur'}
        ],
        hazardCategory:[
          {required: true, message: '请选择主要危险类别', trigger: 'blur'}
        ],
        riskMeasure:[
          {required: true, message: '请选择风险防控措施', trigger: 'blur'}
        ],
        outfire:[
          {required: true, message: '请选择灭火要点', trigger: 'blur'}
        ],
        qrCode:[
          {required: true, message: '请上传二维码', trigger: 'blur'}
        ],*/
      },
      //  关联实验室弹窗开关
      drawer:false,
      drawerTwo:false,
      deptOptions:[],
      deptOptionsTwo:[],
      buildings:[],
      floors:[],
      layoutLists:[],
      //人员
      optionsUser: [],
      //安全人员
      optionsUserOne: [],
      // 页面状态
      pageType:1,
      //视频数据
      videoData:[],
      //所有危险源列表
      hazardList:[],
      //对比存留-现有危险源
      dangerData:[],
      //当前页面使用-现有危险源
      newDangerData:[],
      mapData:{
        widthData:"",
        heightData:"",
        list:[
          {
            top:"",
            left:"",
          }
        ]
      },
    //  当前选中对象
      moveIndex:0,
      // 实验室ID
      subId:"",
      //MQTT请求参数-传感器
      mtopic:"lab/function/data",
      //MQTT请求参数-硬件
      mtopicOne:"lab/hardware/data",
      msg:"",
      client:{},
      //安全标识
      safetyWarning:[],
      //主要危险类别
      hazardCategory:[],
      //风险防控措施
      riskMeasure:[],
      //灭火要点
      extinguishingKeyPoints:[],
      //安全牌
      safetyCardType:false,
      safetyCardData:{},
      levelList:[],
      typeList:[],
      // 实验室准入编辑数据
      subjectData:{}
    };
  },
  created() {
  },
  mounted(){
    this.getList();
    this.getDicts("subject_class").then(response => {
      this.subClassOptions = response.data;
    });
    this.getDicts("sub_check_in").then(response => {
      this.onepcOutcheckIn = response.data;
    });
    this.getDicts("lab_onepc_outcheck").then(response => {
      this.onepcOutcheck = response.data;
    });
    //安全标识字典
    this.getDicts("sys_safety_warning").then(response => {
      this.safetyWarning = response.data;
    });
    //主要危险类别
    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;
    });
    this.getDeptListTow();
    this.subscriptionMQTT();
  },
  methods: {
    //安全牌开关
    safetyCardButton(item){
      if(item){
        this.safetyCardData = JSON.parse(JSON.stringify(item));
        if(this.safetyCardData.safeUserName){
          this.safetyCardData.safeUserName = this.safetyCardData.safeUserName.replace(/,/,'、');
        }
        if(this.safetyCardData.safeUserPhone){
          this.safetyCardData.safeUserPhone = this.safetyCardData.safeUserPhone.replace(/,/,'、');
        }
        if(this.safetyCardData.hazardCategory){
          this.safetyCardData.hazardCategory = this.safetyCardData.hazardCategory.split(',')
        }
        if(this.safetyCardData.riskMeasure){
          this.safetyCardData.riskMeasure = this.safetyCardData.riskMeasure.split(',')
        }
        if(this.safetyCardData.safeSigns){
          this.safetyCardData.safeSigns = this.safetyCardData.safeSigns.split(',')
        }
        if(this.safetyCardData.outfire){
          this.safetyCardData.outfire = this.safetyCardData.outfire.split(',')
        }
      }else{
        this.safetyCardData = {};
      }
      this.safetyCardType = !this.safetyCardType;
    },
    //图片上传
    handleAvatarSuccess(res, file,index) {
      this.form.qrCode = res.data.url;
      this.$forceUpdate()
    },
    //上传检查
    beforeAvatarUpload(file) {
      let type = false;
      console.log('file',file);
      if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
        type = true;
      }else{
        this.$message.error('只能上传png/jpeg/gif格式图片');
        type = false;
      }
      return type;
    },
    // 开启关闭验证
    async changeIsNeedCaptcha (row) {
      let self = this;
      console.log(row)
      if(row.state.code!=3 && row.state.code!=4){
        return
      }
      let text = row.state.code==3?'关闭':(row.state.code==4?'开启':'')
      this.$confirm(`是否`+text+`此设备`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        self.switchChange(row)
      }).catch(() => {

      })
    },
    //开关按钮
    switchChange(row){
      let switchData = {
        id:row.id,
        switchVal:row.state.code==3?'close':(row.state.code==4?'open':'')
      };
      hardWareControl(switchData).then(response => {
        console.log(response);
        if(response.code==200){
          row.state.code = row.state.code==3?4:(row.state.code==4?3:'')
        }
      });
    },
    //MQTT订阅
    subscriptionMQTT(){
      let self = this;
      this.client = mqtt.connect(process.env.VUE_APP_BASE_MQTT_API, {
        username: process.env.VUE_APP_BASE_MQTT_USERNAME,
        password: process.env.VUE_APP_BASE_MQTT_PASSWORD
      });
      this.client.on("connect", e =>{
        console.log("连接成功");
        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("message", (topic, message) => {
        if (message){
          let data = JSON.parse(message)
          if(topic == this.mtopic){
            //传感器
            console.log("传感器",data);
            if(data.data.subId){
              for(let i=0;i<self.subjectList.length;i++){
                if(self.subjectList[i].id == data.data.subId){
                  self.$set(self.subjectList[i],'sendDate','上报时间:'+data.sendDate);
                  self.$set(self.subjectList[i],'sensorFunctionStatusList',data.data.functionStatuses);
                }
              }
            }
          }else if(topic == this.mtopicOne){
            //硬件
            console.log("硬件",data);

            for(let i=0;i<data.data.length;i++){
              for(let o=0;o<self.subjectList.length;o++){
                if(self.subjectList[o].labHardwareVOList){
                  for(let k=0;k<self.subjectList[o].labHardwareVOList.length;k++){
                    if(self.subjectList[o].labHardwareVOList[k].id == data.data[i].num){
                      if(data.data[i].hardwareOperate == 'CLOSE'){
                        self.subjectList[o].labHardwareVOList[k].state.code = 4;
                      }else if(data.data[i].hardwareOperate == 'OPEN'){
                        self.subjectList[o].labHardwareVOList[k].state.code = 3;
                      }else if(data.data[i].hardwareOperate == 'OFFLINE'){
                        self.subjectList[o].labHardwareVOList[k].state.code = 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      });
    },
    //取消订阅关闭MQTT连接
    offMQTT(){
      this.client.unsubscribe(this.mtopic, error => {
        if (error) {
          console.log('Unsubscribe error', error)
        }
      })
      this.client.end();
      this.client = {};
    },
    /** 查询学院列表 */
    getDeptListTow() {
      listDepartments().then(response => {
        // this.deptOptionsTwo = response.data;
         this.$set(this, 'deptOptions', response.data)
      });
    },
    getListClassifiedAll(){
        listClassifiedAll().then(response=>{
            if(response.code==200){
                console.log(response)
                this.levelList=response.data
            }
        })
    },
    getListClasstypeAll(){
        listClasstypeAll().then(response=>{
             if(response.code==200){
                 this.typeList=response.data;
             }
        });
    },
    //提交危险源
    submitHazard(){
      let self = this;
      let obj = {
        delIds:[],
        hazardSubVOS:[],
        subId:self.subId,
      }
      for(let i=0;i<self.dangerData.length;i++) {
        let age = 0;
        for (let o = 0; o < self.newDangerData.length; o++) {
          if (self.dangerData[i].id == self.newDangerData[o].id) {
            age++;
          }
        }
        if(age==0){
          obj.delIds.push(self.dangerData[i].xyId)
        }
      }
      for(let i=0;i<self.newDangerData.length;i++) {
        let newObj = {
          id:self.newDangerData[i].id,
          xyId:self.newDangerData[i].xyId,
          yPoint:parseInt(self.newDangerData[i].yPoint/3),
          xPoint:parseInt(self.newDangerData[i].xPoint/3)
        };
        obj.hazardSubVOS.push(newObj)
      }
      let num = 0;
      for(let i=0;i<self.dangerData.length;i++) {
        for(let o=0;o<obj.hazardSubVOS.length;o++) {
          if (self.dangerData[i].id == obj.hazardSubVOS[o].id&&self.dangerData[i].xPoint == obj.hazardSubVOS[o].xPoint&&self.dangerData[i].yPoint == obj.hazardSubVOS[o].yPoint){
            num++
          }
        }
      }
      if(num != 0 && num == self.dangerData.length){
        Message({
          message: "请修改新增危险源的位置后提交",
          type: 'warning'
        });
        return
      }
      if(!obj.delIds[0]&&!obj.hazardSubVOS[0]){
        this.$refs["hazardForm"].validate(valid => {
          if (valid) {

          }
        });
      }else{
        addRelation(obj).then(response => {
          this.msgSuccess("修改成功");
          this.drawerTwo = false;
          this.getList();
        });
      }
    },
    //实验室危险源添加项
    addMapObj(value){
      let self = this;
      let list = [];
      for(let i=0;i<value.length;i++){
        let age = 0;
        for(let o=0;o<self.newDangerData.length;o++){
          if(value[i]==self.newDangerData[o].id){
            age++;
            list.push(self.newDangerData[o]);
          }
        }
        if(age == 0){
          let num = 0;
          for(let o=0;o<self.dangerData.length;o++){
            if(value[i]==self.dangerData[o].id){
              num++;
              list.push(self.dangerData[o]);
            }
          }
          if(num == 0){
            for(let o=0;o<self.hazardList.length;o++){
              if(value[i]==self.hazardList[o].hazardId){
                self.hazardList[o].xyId = "";
                self.hazardList[o].xPoint = 0;
                self.hazardList[o].yPoint = 0;
                let obj = self.hazardList[o];
                obj.id = self.hazardList[o].hazardId;
                list.push(self.hazardList[o]);
              }
            }
          }
        }
      }
      self.newDangerData = JSON.parse(JSON.stringify(list));
      this.$forceUpdate();
      this.$refs.hazardForm.clearValidate();
      console.log(value);
    },
    //实验室添加提交按钮
    addSub(){
      this.$refs["form"].validate(valid => {
      if (valid) {
        if(this.form.checkOutArr) {
          this.form.checkOut = this.form.checkOutArr.join() ;
        }
        if(this.form.checkIn) {
          this.form.checkIn = this.form.checkIn.join() ;
        }
        if(this.form.safeUserId) {
          this.form.safeUserId = this.form.safeUserId.join() ;
        }
        if(this.form.safeSigns) {
          this.form.safeSigns = this.form.safeSigns.join() ;
        }
        if(this.form.hazardCategory) {
          this.form.hazardCategory = this.form.hazardCategory.join() ;
        }
        if(this.form.riskMeasure) {
          this.form.riskMeasure = this.form.riskMeasure.join() ;
        }
        if(this.form.outfire) {
          this.form.outfire = this.form.outfire.join() ;
        }
        if(this.isUpdate) {
          if(!this.form.adminId){
            this.form.adminId = "-1";
          }
          updateSubject(this.form).then(response => {
                    this.msgSuccess("修改成功");
                    this.drawer = false;
                    this.getList();
                  });
        }
        else {
          addSubject(this.form).then(response => {
                    this.msgSuccess("新增成功");
                    this.drawer = false;
                    this.getList();
                  });
        }

      }
      });

    },
    /** 查询学院列表 */
    getDeptList()
    {
      listDepartments().then(response => {
        // this.deptOptions = response.data;
        this.$set(this, 'deptOptions', response.data)
      });
    },
    /** 查询楼栋列表  */
    getBuildings(id) {
      if(id) {
        this.$set(this.form, 'buildId', '');//楼栋
        this.buildings = [];
        this.$set(this.form, 'floorId', '');//楼层
        this.floors = [];
        this.$set(this.form, 'layoutId', '');//房间
        this.layoutLists = [];
        listbuildings(id).then(response => {
          this.buildings = response.data;
        });
      }
    },
    //查询楼层
    getFloors(id) {
      if(id) {
        this.$set(this.form, 'floorId', '');//楼层
        this.floors = [];
        this.$set(this.form, 'layoutId', '');//房间
        this.layoutLists = [];
        listFloorByBuildId(id).then(response=>{
          this.floors = response.data;
        });
      }
    },
    //查询布局信息
    getLayouts(id) {
      if(id) {
        this.$set(this.form, 'layoutId', '');//房间
        this.layoutLists = [];
        onUselistLayoutByFloorId(id).then(response=>{
          this.layoutLists = response.data;
        });
      }
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.form.deptId = data;
    },
    // 处置学科字典翻译
    subjectClassFormat(row) {
      return this.selectDictLabel(this.subClassOptions, row.subjectClass);
    },
    //根据实验室获取视频地址
    pageSwitchOn(item){
      console.log(item)
      let self = this;
      let text = ""
      for(let i=0;i<item.labHardwareVOList.length;i++){
        if(item.labHardwareVOList[i].hardwareTypeEnum.enumName == 'VIDEO_MONITOR'){
          text = text + item.labHardwareVOList[i].hardwareNUM + ',';
        }
      }
      let obj = {
        count:"2",
        deviceIds:text,
        page:"1",
      };
      startUrl(obj).then(res => {
        if(res.code == 200){
          if(!res.data[0]){
            Message({
              message: "视频配置异常请联系管理员",
              type: 'warning'
            });
            return
          }
          self.videoData = [];
          for(let i=0;i<res.data.length;i++){
            let obj = {
              name:item.name + item.subAddrr.room,
              videoType:"flv",
              divId:'divId'+i,
              url:res.data[i].result.body.data.flv,
            }
            self.videoData.push(obj)
          }
          this.pageType=2;
        }
      });
    },
    pageSwitchOff(){
      // this.videoData = {};
      this.pageType=1;
    },
    //删除
    delBox(index){
      let self = this;
      this.newDangerData.splice(indexTwo,1);
      let list = [];
      for (let i=0;i<this.newDangerData.length;i++){
        list.push(this.newDangerData[i].id)
      }
      this.$set(this.form, 'hazardId',list);
      this.$forceUpdate();
    },
    moveClick(index){
      this.moveIndex = indexTwo
      console.log(",index",indexTwo)
    },
    //锚点拖动
    move(e){
      let odiv = e.target;        //获取目标元素
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e)=>{       //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        //绑定元素位置到positionX和positionY上面
        //移动当前元素
        if(left>0&&left<(this.mapData.widthData*3-60)){
          odiv.style.left = left + 'px';
          this.newDangerData[this.moveIndex].xPoint = left;
          this.newDangerData[this.moveIndex].minXPoint = parseInt(left/6);
        }
        if(top>0&&top<(this.mapData.heightData*3-60)){
          odiv.style.top = top + 'px';
          this.newDangerData[this.moveIndex].yPoint = top;
          this.newDangerData[this.moveIndex].minYPoint = parseInt(top/6);
        }
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      this.$forceUpdate();
    },
    //关联实验室危险源弹窗
    drawerBoxOnTwo(id,layoutId){
      let self = this;
      //获取危险源列表
      this.subId = id;
      this.reset();
      getHazardLayout(layoutId).then(response=>{
        if(!response.data){
          this.msgError("请先给该实验室设置布局尺寸");
          return
        }
        //大屏布局排版减少25宽度给传感器显示
        this.mapData.widthData = response.data.layWidth - 25;
        this.mapData.heightData = response.data.layHeight - 25;
        listHazard({}).then(response=>{
          this.hazardList = response.data;
          //获取当前实验室危险源列表
          subjectListHazard(id).then(response=>{
            console.log(response);
            let list = [];
            for(let i=0;i<response.data.length;i++){
              response.data[i].yPoint = self.accMul(response.data[i].yPoint,3);
              response.data[i].xPoint = self.accMul(response.data[i].xPoint,3);
              list.push(response.data[i].id);
            }
            this.$set(this.form, 'hazardId', list);
            console.log("list",list);
            this.dangerData = JSON.parse(JSON.stringify(response.data));
            this.newDangerData = JSON.parse(JSON.stringify(response.data));
            this.drawerTwo = true;
          });
        });
      });
    },
    //新增实验室弹窗
    drawerBoxOn(row){
      this.getListClassifiedAll();
      this.getListClasstypeAll();
      this.reset();
      //学院
      if(!this.deptOptions){
          this.getDeptList();
      }
      if(row){
        this.form = JSON.parse(JSON.stringify(row));
        if(this.form.level){
          this.form.level = this.form.level
        }
        if(this.form.checkOut){
          let list = this.form.checkOut.split(",")
          this.$set(this.form, 'checkOutArr', list);
        }
        if(this.form.checkIn){
          let list = this.form.checkIn.split(",")
          this.$set(this.form, 'checkIn', list);
        }
        if(this.form.safeUserId){
          let list = [];
          let safeUserIdList = [];
          let nameList = "";
          if(this.form.safeUserName){
            nameList = this.form.safeUserName.split(",");
          }
          let idList = "";
          if(this.form.safeUserId){
            idList = this.form.safeUserId.split(",");
          }
          for(let i=0;i<nameList.length;i++){
            safeUserIdList.push(parseInt(idList[i]))
            let obj = {
              nickName:nameList[i],
              userId:parseInt(idList[i]),
            };
            list.push(obj)
          }
          this.optionsUserOne = list;
          this.$set(this.form, 'safeUserId', safeUserIdList);
        }else{
          this.optionsUserOne = [];
        }
        if(this.form.safeSigns){
          let list = this.form.safeSigns.split(",")
          this.$set(this.form, 'safeSigns', list);
        }
        if(this.form.hazardCategory){
          let list = this.form.hazardCategory.split(",")
          this.$set(this.form, 'hazardCategory', list);
        }
        if(this.form.riskMeasure){
          let list = this.form.riskMeasure.split(",")
          this.$set(this.form, 'riskMeasure', list);
        }
        if(this.form.outfire){
          let list = this.form.outfire.split(",")
          this.$set(this.form, 'outfire', list);
        }
        //根据学院获取楼栋
        listbuildings(this.form.deptId).then(response => {
          this.buildings = response.data;
          //根据楼栋获取层
          listFloorByBuildId(this.form.buildId).then(response=>{
            this.floors = response.data;
            //根据层获取实验室
            onUselistLayoutByFloorIdTwo(this.form.floorId,this.form.layoutId).then(response=>{
              this.layoutLists = response.data;
            });
          });
        });
        if(this.form.adminId){
          let list = [];
          let obj = {
            nickName:this.form.adminName,
            userId:this.form.adminId
          };
          list.push(obj);
          this.optionsUser = list;
        }else{
          this.optionsUser = [];
        }
        // this.userSelectList.userId=this.form.adminId;
        // this.userSelectListOne.safeUserId=this.form.safeUserId;
        // selectTeacherList(this.userSelectList).then(response => {
        //   console.log(response.data)
        //   this.optionsUser = response.data;
        // });
      }
      this.drawer = true;
    },
    //关闭弹窗
    offDrawer(){
      this.$refs.drawer.closeDrawer();
    },
    offDrawerTwo(){
      this.$refs.drawerTwo.closeDrawer();
    },
    //弹窗关闭前回调
    handleClose(done) {
      this.$confirm('确认关闭吗？')
        .then(_ => {
          this.delData();
          done();
        })
        .catch(_ => {});
    },
    delData(){
      this.form = {};
      this.buildings = [];
      this.floors = [];
      this.layoutLists = [];
    },
    //更多选项
    moreClick(item){
      if(item.command == 1){
        this.isUpdate = true;
        this.drawerBoxOn(item.item)
      }else if(item.command == 3){
        this.handleDelete(item.item)
      }else if(item.command == 2){
        this.subjectData = item.item;
        this.pageType = 3;
        console.log("item",item)
      }
    },
    /** 查询实验室列表 */
    getList() {
      this.loading = true;
      authListSubject(this.queryParams).then(response => {
        for(let i=0;i<response.data.length;i++){
          if(response.data[i].labHardwareVOList){
            if(response.data[i].labHardwareVOList[0]){
              for(let o=0;o<response.data[i].labHardwareVOList.length;o++){
                if(response.data[i].labHardwareVOList[o].hardwareTypeEnum.enumName == 'VIDEO_MONITOR'){
                  response.data[i].videoType = true;
                  break
                }
              }
            }
          }
        }
        console.log('1')
        this.subjectList = response.data;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        floorId: null,
        buildId:null,
        layoutId:null,
        qrCode:null,
        room: null,
        deptId: null,
        deptName: null,
        adminId: null,
        subDept:null,
        checkOut:null,
        remark: null,
        txt:'',
        type:"",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.deptId = null
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd(id) {
      this.reset();
      this.open = true;
      this.title = "广播系统";
      this.subId = id;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSubject(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改实验室";
      });
    },
    /*播放文字*/
    submitFormOne(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          let id = this.subId;
          mangerVoice(this.form,id).then(response => {
            this.msgSuccess("播放成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSubject(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSubject(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const ids = row.id || this.ids;
      let type = row.isDel == true ? false : true;
      let text = row.isDel == true ? '启用' : '禁用';
      this.$confirm('确认要'+text+'此实验室吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          subjectType(row.id,type).then(response => {
            this.msgSuccess("操作成功");
            this.getList();
          });
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('laboratory/subject/export', {
        ...this.queryParams
      }, `laboratory_subject.xlsx`)
    },
        /** 下列人员-懒加载 */
    userSelectList(query) {
        if (query !== '' && query.length>1) {
          selectTeacherList({"nickName":query}).then(response => {
            this.optionsUser = response.data;
          });
        } else {
          this.optionsUser = [];
        }
      },
    userSelectListOne(query) {
      if (query !== '' && query.length>1) {
        this.userSelectListOne.nickName=query;
        selectTeacherList(this.userSelectListOne).then(response => {
          console.log('安全责任人',response.data)
          this.optionsUserOne = response.data;
        });
      } else {
        this.optionsUserOne = [];
      }
    },
    //乘法
    accMul(arg1,arg2){
      var m=0,s1=arg1.toString(),s2=arg2.toString();
      try{m+=s1.split(".")[1].length}catch(e){}
      try{m+=s2.split(".")[1].length}catch(e){}
      return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
    },
  },
  beforeDestroy() {
    //清除定时器
    let self = this;
    self.offMQTT();
    console.log("beforeDestroy");
  },
};
</script>

<style scoped lang="scss">
  .subject {
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    .form-box{
      box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
      padding:30px 20px 0!important ;
      margin:20px 20px 0;
      border-radius: 10px;
    }
    .max-for-box{
      flex:1;
      overflow-y: scroll;
      overflow-x: hidden;
      margin-top:10px;
      p{
        margin:0;
      }
      .big-for-box:nth-child(1){
        margin-top:10px;
      }
      .big-for-box{
        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.1);
        padding:20px 20px 30px!important;
        margin:0 20px 20px;
        border-radius: 10px;
        position: relative;
        .for-top-box{
          border-bottom:1px dashed #e0e0e0;
          display: flex;
          /*height:87px;*/
          overflow: hidden;
          .for-top-box-left{
            flex:1;
          }
          .for-top-box-right{
            width:360px;
          }
          .display-inline-block{
            height:87px;
            overflow: hidden;
            display: inline-block!important;
            margin-right:20px;
          }
          .for-warn-lv-box{
            width:110px;
            height:50px;
            border-radius:4px;
            margin:7px 0 30px 0;
            display: flex;
            img{
              display: block;
              width:30px;
              height:30px;
              margin:9px 0 0 6px;
            }
            div{
              flex:1;
              p{
                margin:0;
                font-size:12px;
                line-height:14px;
                text-align: center;
              }
              p:nth-child(1){
                margin-top:10px;
              }
            }
          }
          .for-name-box{
            p{
              line-height:29px;
            }
            p:nth-child(1){
              font-size:16px;
              margin-bottom:10px;
            }
            p:nth-child(2){
              font-size:14px;
            }
          }
          .address-box{
            p:nth-child(2){
              font-size:14px;
              line-height:14px;
              margin-top:18px;
            }
          }
          .for-name-box:nth-child(2){
            width:250px;
            /*flex:1;*/
            /*margin-right:20px;*/
          }
          .for-name-box:nth-child(3){
            width:172px;
          }
          .for-name-box:nth-child(4){
            width:130px;
          }
          .for-button-box{
            width:82px;
            display: inline-block;
            p{
              text-align: center;
            }
            p:nth-child(1){
              line-height:29px;
              font-size:16px;
            }
            p:nth-child(2){
              cursor:pointer;
              font-size:14px;
              width:80px;
              line-height:30px;
              margin:10px auto 0;
              border:1px solid #0045AF;
              color:#0045AF;
              border-radius:4px;
            }
          }
          .for-switch-box{
            width:100px;
            display: inline-block;
            p{
              text-align: center;
            }
            p:nth-child(1){
              line-height:29px;
              font-size:16px;
            }
            p:nth-child(2){
              margin-top:10px;
              line-height:29px;
              font-size:14px;
            }
            .table-type-color-red{
              color:#FF6666;
            }
          }
          .for-switch-box-border{
            height:40px;
            width:1px;
            background: #999999;
            /*margin-top:20px;*/
          }
          .for-null-p{
            flex:1;
          }
          .for-warn-button-box-one{
            width:118px;
            height:38px;
            border:1px solid #0045AF;
            border-radius:4px;
            display: flex;
            margin:16px 0 0 0;
            cursor:pointer;
            img{
              display: block;
              width:14px;
              height:11px;
              margin:14px 6px 0 12px;
            }
            p{
              flex:1;
              color:#0045AF;
              font-size:14px;
              line-height:38px;
            }
          }
          .for-warn-button-box{
            width:118px;
            height:38px;
            border:1px solid #ff6766;
            border-radius:4px;
            display: flex;
            margin:16px 0 0 0;
            cursor:pointer;
            img{
              display: block;
              width:14px;
              height:14px;
              margin:12px 6px 0 12px;
            }
            p{
              flex:1;
              color:#ff6766;
              font-size:14px;
              line-height:38px;
            }
          }
          .table-more-p{
            width:78px;
            height:38px;
            line-height:38px;
            margin-top:16px;
            border:1px solid #0184fa;
            border-radius:4px;
          }
        }
        .position-date-p{
          position: absolute;
          left:0;
          bottom:10px;
          width:100%;
          color:#999;
          font-size:12px;
          text-align: center;
        }
        /*滚动条样式*/
        .for-bottom-box::-webkit-scrollbar{
          width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
          height: 4px;
        }
        .for-bottom-box::-webkit-scrollbar-thumb{
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 5px #999;
          background: #fff;
        }
        .for-bottom-box::-webkit-scrollbar-track{
          -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
          border-radius: 0;
          background: rgba(255,255,255,0);
        }
        .for-bottom-box{
          position: relative;
          overflow-x:scroll;
          overflow-y:hidden;
          white-space: nowrap;
          .null-p-box{
            text-align: center;
            flex: 1;
            color: #999;
            font-size:14px;
            margin-top:20px;
            line-height:83px;
          }
          .for-type-box-big{
            display: inline-block;
            .for-type-box{
              display: flex;
              height:52px;
              width:190px;
              margin:31px 0 20px;
              img{
                width:24px;
                height:24px;
                margin:18px 16px 0 20px;
              }
              div{
                p:nth-child(1){
                  font-size:14px;
                  line-height:14px;
                }
                p:nth-child(2){
                  font-size:16px;
                  line-height:16px;
                  margin-top:22px;
                }
              }
            }
          }
        }
      }
    }
    .max-for-box::-webkit-scrollbar{
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    .max-for-box::-webkit-scrollbar-thumb{
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #999;
      background: #fff;
    }
    .max-for-box::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
      border-radius: 0;
      background: rgba(255,255,255,0);
    }
  }
</style>
