FE-V2-PC/src/views/newEvacuationBigData.vue

<template>
    <div class="newEvacuationBigData">
      <div class="evacuation-title-position-box">风险应急处置指挥平台</div>
      <div class="evacuation-out-button-position-box">
        <i class="el-icon-switch-button"></i>
        <p @click="goRoute">{{routeType?'退出全屏':'全屏'}}</p>
      </div>
      <!--顶部标题-->
      <!--左侧 传感器/硬件/echarts-->
      <div class="left-max-big-box">
        <div class="left-big-box-one">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_znjc_tb.png">
            <p>智能监测</p>
          </div>
          <div class="max-sensor-box scrollbar-box" id="max-sensor-box">
            <div class="sensor-for-max-box" :class="item.type==1?'sensor-alarm-one':'sensor-alarm-two'"
                 v-if="item.funNum != 'huoyan'"
                 v-for="(item,index) in sensorList" :key="index">
              <div class="sensor-min-img-box">
              </div>
              <img v-if="item.type == 0" :src="item.zcImg" alt="">
              <img v-if="item.type == 1" :src="item.ycImg" alt="">
              <p class="sensor-name-p">{{item.funcName}}</p>
              <p class="sensor-num-p">{{item.formatVal}}</p>
            </div>
            <p v-if="!sensorList[0]" style="line-height:200px;font-size:16px;color:#fff;text-align: center">暂无数据</p>
          </div>
        </div>
        <div class="left-big-box-two">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_znkz_tb.png">
            <p>智能控制</p>
          </div>
          <div class="control-max-box scrollbar-box" id="control-max-box">
            <div class="control-for-box" v-for="(item,index) in controlList" :key="index">
              <p class="control-for-title-p">{{item.name}}</p>
              <div class="control-for-img-box">
                <img class="position-img" src="@/assets/ZDimages/bigData3_2/icon_znkz_bg.png">
                <img v-if="item.enumName == 'AI_VENTILATION'" class="for-img" src="@/assets/ZDimages/bigData3_2/icon_znkz_tf.png">
                <img v-if="item.enumName == 'SWITCH'" class="for-img" src="@/assets/ZDimages/bigData3_2/icon_znkz_dy.png">
              </div>
              <img class="position-big-img" src="@/assets/ZDimages/bigData3_2/icon_znkz_wq.png">
              <el-switch
                v-if="(item.code == 3||item.code == 4) && item.pcType != 1"
                class="switch"
                @click.native="changeIsNeedCaptcha(item)"
                v-model="item.code"
                :active-value="4"
                :inactive-value="3"
                active-text="关闭"
                inactive-text="开启"
                disabled>
              </el-switch>
              <p class="control-null-p" v-if="(item.code != 3&&item.code != 4) && item.pcType != 1">离线</p>
              <p class="control-button-p" v-if="item.pcType == 1" @click="shadeButton(8,item.id)">操作</p>
            </div>
            <p v-if="!controlList[0]" style="line-height:200px;font-size:16px;color:#fff;text-align: center">暂无数据</p>
          </div>
        </div>
        <div class="left-big-box-three">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_yygb_wxy.png">
            <p>危险源</p>
          </div>
          <div id="eCharts"></div>
          <p v-if="!eChartsData.nameList[0]" class="eCharts-null-p">暂无数据</p>
        </div>
      </div>
      <!--中间 楼栋/楼层/当前位置/疏散开关-->
      <div class="center-max-big-box">
        <div class="left-big-box-one">
          <div>
            <el-select v-model="buildingId" placeholder="请选择"
                       :popper-append-to-body="false"
                       @change="buildingChange"
                       class="building-select-box">
              <el-option
                v-for="item in buildingOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <div style="display: flex" v-if="item.planType">
                  <img src="@/assets/ZDimages/bigData3_2/icon_lc_yc.png" style="margin:11px 10px 0 0;width:14px;height:12px;">
                  <p style="margin-right:24px;">{{ item.name }}</p>
                </div>
                <div style="display: flex" v-else>
                  <p  style="margin:0 24px;">{{ item.name }}</p>
                </div>
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="floorId" placeholder="请选择"
                       :popper-append-to-body="false"
                       @change="floorChange"
                       class="floor-select-box">
              <el-option
                v-for="item in floorOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <div style="display: flex" v-if="item.planType">
                  <img src="@/assets/ZDimages/bigData3_2/icon_lc_yc.png" style="margin:11px 10px 0 0;width:14px;height:12px;">
                  <p style="margin-right:24px;">{{ item.name }}</p>
                </div>
                <div style="display: flex" v-else>
                  <p style="margin:0 24px;">{{ item.name }}</p>
                </div>
              </el-option>
            </el-select>
          </div>
          <el-tooltip class="item" effect="dark" :content="subText+floorText" placement="top">
            <p class="text-p">{{subText}}  {{floorText}}</p>
          </el-tooltip>
          <p class="button-p-one" @click="evacuationButton">{{evacuationType?'结束疏散':'立即疏散'}}</p>
          <p class="button-p-two" @click="backButton">返回</p>
        </div>
        <div class="left-big-box-two">
          <div class="newEvacuation-map-max-big-box"
               v-if="mapType"
               :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
            <div class="newEvacuation-map-big-box"
                 :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
              <div class="newEvacuation-map-for-box for-map-box-one"
                   :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
                           item.planType && checkSubId !=item.subId ? 'room-type-two':(
                           item.planType && checkSubId ==item.subId ? 'room-type-three':(
                           !item.loginAdmin ? 'room-type-noe':''
                           )))"
                   @click="checkSubClick(item)"
                   v-for="(item,index) in mapList" :key="item.key" v-if="item.type == 1"
                   :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                <div class="newEvacuation-map-for-min-box">
                  <!--名称/实验室名称-->
                  <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:item.subName" placement="top">
                    <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'px;'">{{item.roomType == '-99'?item.roomName:item.subName}}</p>
                  </el-tooltip>
                  <!--编号-->
                  <el-tooltip class="item" effect="dark" :content="'('+item.roomNum+')'" placement="top">
                    <p class="map-for-num-p">({{item.roomNum}})</p>
                  </el-tooltip>
                  <!--门-->
                  <div class="position-box"
                       :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                       v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                       :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                  <!--实验室人数-->
                  <div v-if="item.online!=null" class="user-num-box" :class="item.doorList[0].toward == 'top'?'user-num-two':'user-num-one'">
                    <img src="@/assets/ZDimages/bigData3_2/icon_pmt_ry.png">
                    <p>{{item.online}} 人</p>
                  </div>
                </div>
              </div>
              <div class="newEvacuation-map-for-box for-map-box"
                   v-for="(item,indexOne) in mapList" :key="item.key" v-if="item.type == 2"
                   :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                <div class="newEvacuation-map-for-min-box">
                  <!--灯-->
                  <div @click="shadeButton(2,minItem)"
                       class="position-box"
                       :class="
                        minItem.state=='1'&&minItem.openType?'lightTopOn':(minItem.state=='1'&&!minItem.openType?'lightTopOff':
                        (minItem.state=='2'&&minItem.openType?'lightBottomOn':(minItem.state=='2'&&!minItem.openType?'lightBottomOff':
                        (minItem.state=='3'&&minItem.openType?'lightLeftOn':(minItem.state=='3'&&!minItem.openType?'lightLeftOff':
                        (minItem.state=='4'&&minItem.openType?'lightRightOn':(minItem.state=='4'&&!minItem.openType?'lightRightOff':'')))))))"
                       v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
                       :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;cursor: pointer;'"></div>
                </div>
              </div>
              <div class="newEvacuation-map-for-box for-map-box-two"
                   v-for="(item,indexTwo) in mapList" :key="item.key" v-if="item.type == 3"
                   :class="item.roomCheckType?'for-map-box-two-check':''"
                   :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                <div class="newEvacuation-map-for-min-box"></div>
              </div>
              <div class="plan-map-for-box" :class="checkPlanId == item.subId?'check-plan-map-for-box':''"
                   :style="'width:'+item.width+'px;height:'+item.height+'px;left:'+item.left+'px;top:'+item.top+'px;'"
                   @click="checkPlanButton(item.subId)"
                   v-for="(item,index) in planMapList" :key="item.subId" v-if="item.planType">
                <div class="plan-top-button-box">
                  <p></p>
                  <p class="el-icon-close" @click="offPlanShade(index)"></p>
                </div>
                <div class="plan-time-box">
                  <img src="@/assets/ZDimages/bigData3_2/icon_dp_bjsj.png">
                  <p>{{item.riskPlanTriggerTime}}</p>
                </div>
                <div :class="item.riskAttribute == 1?'plan-text-box':'plan-text-box-two'">
                  <p class="plan-title-p" :class="item.riskPlanLevel==1?'color-type-1':(item.riskPlanLevel==2?'color-type-2':(item.riskPlanLevel==3?'color-type-3':(item.riskPlanLevel==4?'color-type-4':'')))">{{item.riskPlanLevelName}}</p>
                  <p class="plan-text-p">{{item.name}}</p>
                </div>
                <p class="plan-button-p" v-if="item.riskAttribute == 1" @click="shadeButton(7,item.groupId)">结束预案</p>
              </div>
            </div>
          </div>
          <p class="null-mapList" v-if="!mapList[0]">暂无数据</p>
        </div>
        <div class="left-big-box-three">
          <div class="horn-max-big-box-one" v-show="fireType">
            <div class="horn-max-big-box-one-left">
              <div class="big-title-box">
                <img src="@/assets/ZDimages/bigData3_2/icon_yygb_tb.png">
                <p>语音广播</p>
              </div>
              <div class="radio-button-box scrollbar-box">
                <p class="horn-for-p" @click="checkTrumpet(index)" :class="item.type?'check-p':''"
                   v-for="(item,index) in trumpetList" :key="index">{{item.name}}</p>
                <p v-if="!trumpetList[0]" style="line-height:60px;font-size:16px;color:#fff;text-align: center">暂无数据</p>
              </div>
              <div class="radio-text-box scrollbar-box">
                <div v-for="(item,index) in radioTextList" :key="index">
                  <p>
                    <span>{{item.name}}</span>
                    <span>{{item.time}}</span>
                  </p>
                  <p>{{item.text}}</p>
                </div>
              </div>
              <div class="radio-input-box">
                <el-input placeholder="请输入内容" v-model="inputText" maxLength="50">
                  <p class="radio-input-button" slot="append" @click="addHxpChemical">发送</p>
                </el-input>
              </div>
            </div>
            <div class="horn-max-big-box-one-right">
              <div class="big-title-box">
                <img src="@/assets/ZDimages/bigData3_2/icon_zdmh.png">
                <p>自动灭火</p>
              </div>
              <div class="fire-max-box" v-if="fireListType">
                <div class="fire-min-box">
                  <p class="fire-title-p" :class="!fireData.temperatureType?'fire-title-color-one':'fire-title-color-two'">{{!fireData.temperatureType?'正常':'温度异常'}}</p>
                  <img class="center-img" src="@/assets/ZDimages/bigData3_2/icon_zdmh_wd_zc.png" v-if="!fireData.temperatureType">
                  <img class="center-img" src="@/assets/ZDimages/bigData3_2/icon_zdmh_wd_yc.png" v-if="fireData.temperatureType">
                  <img class="background-img" src="@/assets/ZDimages/bigData3_2/img_zdmh_zcbg.png" v-if="!fireData.temperatureType">
                  <img class="background-img" src="@/assets/ZDimages/bigData3_2/img_zdmh_ycbg.png" v-if="fireData.temperatureType">
                  <p class="fire-name-p">温度</p>
                  <p class="img-p" :class="!fireData.temperatureType?'img-p-1-one':'img-p-1-two'"></p>
                  <p class="img-p" :class="!fireData.temperatureType?'img-p-2-one':'img-p-2-two'"></p>
                  <p class="img-p" :class="!fireData.temperatureType?'img-p-3-one':'img-p-3-two'"></p>
                </div>
                <div class="fire-min-box">
                  <p class="fire-title-p" :class="!fireData.smokeType?'fire-title-color-one':'fire-title-color-two'">{{!fireData.smokeType?'正常':'发现烟雾'}}</p>
                  <img class="center-img" src="@/assets/ZDimages/bigData3_2/icon_zdmh_yg_zc.png" v-if="!fireData.smokeType">
                  <img class="center-img" src="@/assets/ZDimages/bigData3_2/icon_zdmh_yg_yc.png" v-if="fireData.smokeType">
                  <img class="background-img" src="@/assets/ZDimages/bigData3_2/img_zdmh_zcbg.png" v-if="!fireData.smokeType">
                  <img class="background-img" src="@/assets/ZDimages/bigData3_2/img_zdmh_ycbg.png" v-if="fireData.smokeType">
                  <p class="fire-name-p">烟感</p>
                  <p class="img-p" :class="!fireData.smokeType?'img-p-1-one':'img-p-1-two'"></p>
                  <p class="img-p" :class="!fireData.smokeType?'img-p-2-one':'img-p-2-two'"></p>
                  <p class="img-p" :class="!fireData.smokeType?'img-p-3-one':'img-p-3-two'"></p>
                </div>
                <div class="fire-min-box">
                  <p class="fire-title-p" :class="!fireData.flameType?'fire-title-color-one':'fire-title-color-two'">{{!fireData.flameType?'正常':'发现火焰'}}</p>
                  <img class="center-img" src="@/assets/ZDimages/bigData3_2/icon_zdmh_hyjc_zc.png" v-if="!fireData.flameType">
                  <img class="center-img" src="@/assets/ZDimages/bigData3_2/icon_zdmh_hyjc_yc.png" v-if="fireData.flameType">
                  <img class="background-img" src="@/assets/ZDimages/bigData3_2/img_zdmh_zcbg.png" v-if="!fireData.flameType">
                  <img class="background-img" src="@/assets/ZDimages/bigData3_2/img_zdmh_ycbg.png" v-if="fireData.flameType">
                  <p class="fire-name-p">火焰监测</p>
                  <p class="img-p" :class="!fireData.flameType?'img-p-1-one':'img-p-1-two'"></p>
                  <p class="img-p" :class="!fireData.flameType?'img-p-2-one':'img-p-2-two'"></p>
                  <p class="img-p" :class="!fireData.flameType?'img-p-3-one':'img-p-3-two'"></p>
                </div>
              </div>
              <p class="fire-button" v-if="fireListType&&!fireStartType&&!fireTextStartType" @click="shadeButton(1)">一键灭火</p>
              <p class="fire-text" v-if="fireListType&&fireStartType&&!fireTextStartType">{{fireStartText}}，灭火程序将于{{fireStartTime}}秒后结束</p>
              <p class="fire-text-one" v-if="fireListType&&!fireStartType&&fireTextStartType">自动灭火完成，请确保在关闭灭火一体机电源后补充灭火耗材，耗</p>
              <p class="fire-text-two" v-if="fireListType&&!fireStartType&&fireTextStartType">材补充完毕需要打开电源并点击一体机上的复位按钮</p>
              <div class="null-fire-box" v-if="!fireListType">
                <img src="@/assets/ZDimages/bigData3_2/icon_sblx.png">
                <p>设备已离线，请及时处理</p>
              </div>
            </div>
          </div>
          <div class="horn-max-big-box-two" v-show="!fireType">
            <div class="big-title-box">
              <img src="@/assets/ZDimages/bigData3_2/icon_yygb_tb.png">
              <p>语音广播</p>
            </div>
            <div class="horn-big-box-two">
              <div class="horn-max-big-box-two-left scrollbar-box">
                <p class="horn-for-p" @click="checkTrumpet(index)" :class="item.type?'check-p':''"
                   v-for="(item,index) in trumpetList" :key="index">{{item.name}}</p>
                <p v-if="!trumpetList[0]" style="line-height:60px;font-size:16px;color:#fff;text-align: center">暂无数据</p>
              </div>
              <div class="horn-max-big-box-two-right">
                <div class="radio-text-box scrollbar-box">
                  <div v-for="(item,index) in radioTextList" :key="index">
                    <p>
                      <span>{{item.name}}</span>
                      <span>{{item.time}}</span>
                    </p>
                    <p>{{item.text}}</p>
                  </div>
                </div>
                <div class="radio-input-box">
                  <el-input placeholder="请输入内容" v-model="inputText" maxLength="50">
                    <p class="radio-input-button" slot="append" @click="addHxpChemical">发送</p>
                  </el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--右侧 人员/视频-->
      <div class="right-max-big-box">
        <div class="left-big-box-one">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_sysnry_tb.png">
            <p>实验室内人员</p>
          </div>
          <div class="user-max-box scrollbar-box" id="user-max-box">
            <div class="user-box" v-for="(item,index) in userList" :key="index">
              <div>
                <img v-if="item.avatar" :src="item.avatar">
                <img v-if="!item.avatar" src="@/assets/ZDimages/tx_cion.png">
                <p>{{item.nickName}}</p>
              </div>
            </div>
            <p v-if="!userList[0]" style="line-height:200px;font-size:16px;color:#fff;text-align: center">暂无数据</p>
          </div>
        </div>
        <div class="left-big-box-two scrollbar-box">
          <div class="video-max-big-for-box">
            <div class="video-max-big-title-box">
              <p>实验室摄像头</p>
              <i :class="subjectVideoType?'el-icon-arrow-up':'el-icon-arrow-down'" @click="subjectVideoCheckClick"></i>
            </div>
            <div class="video-mx-big-box" v-show="subjectVideoType"
                 v-for="(item,index) in subjectVideoList" :key="index">
              <video class="video-box" :id="item.divId" ref="videoRef" :poster="videoCover"
                     autoplay controls  muted width="368px" height="210px"></video>
            </div>
          </div>
          <div class="video-max-big-for-box" >
            <div class="video-max-big-title-box">
              <p>楼层摄像头</p>
              <i :class="floorVideoType?'el-icon-arrow-up':'el-icon-arrow-down'" @click="floorVideoCheckClick"></i>
            </div>
            <div class="video-mx-big-box" v-show="floorVideoType"
                 v-for="(item,index) in floorVideoList" :key="index">
              <video class="video-box" :id="item.divId" ref="videoRef" autoplay controls  muted width="368px" height="210px"></video>
            </div>
          </div>
        </div>
      </div>
      <!--确认弹层-->
      <div class="shade-max-big-box" v-if="shadeType != 0">
        <div class="shade-big-box">
          <p class="off-button el-icon-close" @click="shadeButton(4)"></p>
          <div class="text-box" v-if="shadeType == 1">
            <p>是否确认执行一键灭火</p>
            <p>该操作存在风险，请您务必确认实验室内人员已安全撤离</p>
          </div>
          <div class="text-box" v-if="shadeType == 2 || shadeType == 3 || shadeType == 4 || shadeType == 5 || shadeType == 6">
            <p>{{shadeText}}</p>
            <p></p>
          </div>
          <div class="button-box">
            <p class="button-null"></p>
            <p class="button-p" style="margin-right:39px;" @click="shadeButton(4)">取消</p>
            <p class="button-p" @click="shadeButton(5)">确定</p>
            <p class="button-null"></p>
          </div>
        </div>
      </div>
      <!--疏散选择-->
      <div class="evacuation-shade-max-big-box" v-if="evacuationShadeType">
        <div class="evacuation-shade-big-box">
          <p class="position-title-p">请确定疏散出口</p>
          <p class="position-off-button-p el-icon-close" @click="executeEvacuation(2)"></p>
          <div class="evacuation-shade-map-max-big-box">
            <div class="evacuation-shade-map-big-box"
                 :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
              <div class="evacuation-shade-map-box"
                   :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
                <div class="evacuation-shade-map-for-box for-map-box-one"
                     :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
                           item.planType && checkSubId !=item.subId ? 'room-type-two':(
                           item.planType && checkSubId ==item.subId ? 'room-type-three':(
                           !item.loginAdmin ? 'room-type-noe':''
                           )))"
                     v-for="(item,index) in shadeMapList" :key="index" v-if="item.type == 1"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="evacuation-shade-map-min-box">
                    <!--名称/实验室名称-->
                    <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:item.subName" placement="top">
                      <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'px;'">{{item.roomType == '-99'?item.roomName:item.subName}}</p>
                    </el-tooltip>
                    <!--编号-->
                    <el-tooltip class="item" effect="dark" :content="'('+item.roomNum+')'" placement="top">
                      <p class="map-for-num-p">({{item.roomNum}})</p>
                    </el-tooltip>
                    <!--门-->
                    <div class="position-box"
                         :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                         v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                         :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                  </div>
                </div>
                <div class="evacuation-shade-map-for-box for-map-box"
                     v-for="(item,indexOne) in shadeMapList" :key="indexOne" v-if="item.type == 2"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="evacuation-shade-map-min-box"></div>
                </div>
                <div class="evacuation-shade-map-for-box for-map-box-two"
                     v-for="(item,indexTwo) in shadeMapList" :key="indexTwo" v-if="item.type == 3"
                     @click="shadeCheckRoomClick(item)"
                     :class="item.roomCheckType?'for-map-box-two-check':''"
                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                  <div class="evacuation-shade-map-min-box"></div>
                </div>
              </div>
            </div>
          </div>
          <p class="evacuation-button-p" @click="executeEvacuation(1)">已确定疏散出口，立即执行疏散</p>
        </div>
      </div>
      <!--灭火倒计时-->
      <div class="fire-shade-max-big-box" v-if="fireShadeType">
        <div class="fire-shade-big-box">
          <img src="@/assets/ZDimages/bigData3_2/img_mhz.png">
          <p>一键灭火启动中，倒计时<span>{{fireTime}}</span>秒.</p>
          <p @click="putOutTheFireButton">放弃一键灭火</p>
        </div>
      </div>
    </div>
</template>

<script>
  import mqtt from 'mqtt'
  import flvjs from 'flv.js'
  import { hardWareControl } from "@/api/laboratory/hardware";
  import { subjectInfo,startUrl } from "@/api/laboratory/subject";
  import { getCameraByFloor } from '@/api/executeThePlan.js'
  import { getDeviceList,addHxpChemical,getHornLastMess, subOnlineUser,
           exitHazardTotal,getFireStatus,getFloorData,getBuildOrFloorList,
           executeEvacuation,endEvacuation,openLight,closeLight,getRedisEvacuation,
           outfirepc,isCancelOutFile,selectTriggerInfo,riskPlanId} from '@/api/evacuationBigData/index.js'
  import { closeRiskPlan } from '@/api/bigData/index.js'
  import { controlSwitch } from "@/api/laboratory/hardware";
  export default {
    name: 'newEvacuationBigData',
    props:{
      propsBigData:{},
    },
    computed:{
      Obj(){
        return this.$store.state.settings.planData
      }
    },
    watch:{
      Obj(newVal,oldVal){
        //可以对数据执行相应的操作
        console.log(newVal,oldVal)
        this.selectTriggerInfo();
      }
    },
    data() {
      return {
        videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/admin/" + localStorage.getItem('videoCover'),
        //当前路由状态
        routeType:false,
        //全局MQTT相关
        allClient:{},
        planTopic:"lab/newexit/line",//预案
        //楼层MQTT相关
        floorClient:{},
        messageTopic:"lab/horn",//消息
        evacuationTopic:"lab/newexit/line",//疏散
        userTopic:"lab/subuser/change",//实验室人员数量
        //实验室MQTT相关
        subClient:{},
        sensorTopic:"lab/function/data",//传感器
        switchTopic:"lab/hardware/data",//硬件
        //灭火设备MQTT相关
        fireClient:{},
        fireTopic:"lab/fireDevice/Warn/",//传感器状态异常
        fireOnlineTopic:"lab/fireDevice/isOnline/",//设备是否在线
        firePerformTopic:"lab/fireDevice/executing/",//是否正在执行灭火操作
        //当前实验室/楼栋/楼层
        subText:"",
        floorText:"",
        //楼栋ID
        buildingId:null,
        //楼层ID
        floorId:null,
        //实验室ID
        subId:null,
        //楼栋下拉列表
        buildingOptions:[],
        //楼层下拉列表
        floorOptions:[],
        //传感器小图标数据
        sensorIconData:null,
        //传感器数据
        sensorList:[],
        //控制器数据
        controlList:[],
        //控制器开关
        code:3,
        //喇叭列表
        trumpetList:[],
        //广播历史记录
        inputText:"",
        radioTextList:[],
        //有无火焰设备状态
        fireType:false,
        //灭火设备在线离线
        fireListType:false,
        fireData:{ //0正常 1异常
          temperatureType:false,//温度
          smokeType:false,//烟感
          flameType:false,//火焰
        },
        //灭火设备code
        fireCode:null,
        //灭火启动状态
        fireStartType:false,
        //灭火描述
        fireStartText:null,
        //灭火完成后展示提示文字状态
        fireTextStartType:false,
        /***********一键灭火相关数据***********/
        //一件灭火遮罩
        fireShadeType:false,
        //灭火倒计时
        fireTime:null,
        //灭火倒计时方法数据
        fireTimeData:null,
        //灭火中倒计时
        fireStartTime:null,
        //灭火中倒计时方法数据
        fireStartTimeData:null,
        //一键灭火倒计时开启状态
        putOutTheFireType:false,
        //实验室人员数据
        userList:[],
        //地图数据
        mapType:false,
        mapData:{},
        mapList:[],
        zoomData:null,
        //预案发生实验室弹层数据
        planMapList:[],
        //遮罩层
        shadeType:0,
        shadeText:'',
        shadeData:{},
        //视频监控相关数据
        subjectVideoType:false,
        subjectVideoIds:[],
        subjectVideoList:[],
        subjectVideoPlayList:[],
        floorVideoType:false,
        floorVideoIds:[],
        floorVideoList:[],
        floorVideoPlayList:[],
        /********************疏散遮罩相关数据********************/
        //当前疏散状态
        evacuationType:false,
        //疏散弹窗状态
        evacuationShadeType:false,
        //疏散用布局数据
        shadeMapList:[],
        //实验室选中/报警数据
        checkSubId:null,
        //传参状态
        planDataType:false,
        //优先显示的提示
        checkPlanId:null,
        //结束预案时使用的预案ID
        checkRiskPlanId:null,
        //eCharts
        eChartsData:{
          nameList: [],
          numList: [],
          maxNumList: [],
        },
      }
    },
    created() {
      if(this.$route.path == '/newEvacuationBigData'){
        this.$set(this,'routeType',true);
      }else{
        this.$set(this,'routeType',false);
      }
      if(this.$route.query.subId){
        this.$set(this,'buildingId',parseInt(this.$route.query.buildId));
        this.$set(this,'floorId',parseInt(this.$route.query.floorId));
        this.$set(this,'subId',parseInt(this.$route.query.subId));
        this.$set(this,'checkSubId',parseInt(this.$route.query.subId));
        if(this.$route.query.groupId){
          this.setRiskPlanId(this.$route.query.groupId);
        }
        this.$set(this,'planDataType',true);
        this.initialization();
        console.log('跳转传参',this.$route.query);
      }else if(this.propsBigData.subId){
        this.$set(this,'buildingId',parseInt(this.propsBigData.buildId));
        this.$set(this,'floorId',parseInt(this.propsBigData.floorId));
        this.$set(this,'subId',parseInt(this.propsBigData.subId));
        this.$set(this,'checkSubId',parseInt(this.propsBigData.subId));
        if(this.propsBigData.groupId){
          this.setRiskPlanId(this.propsBigData.groupId);
        }
        this.$set(this,'planDataType',true);
        this.initialization();
        console.log('父类传参',this.propsBigData);
      }else{
        this.$set(this,'planDataType',false);
        this.initialization();
        console.log('无参数',this.$route.query);
      }
    },
    mounted(){
      //全局类MQTT
      // this.onAllMQTT('on');
      //初始化
      // this.initialization();
    },
    methods:{
      //标记当前查看的预案
      setRiskPlanId(id){
        let obj = {
          groupId:id,
          ifCheck:1,
        };
        riskPlanId(obj).then(response => {})
      },
      //初始化
      initialization(){
        getBuildOrFloorList({type:2,parentId:''}).then(response => {
          if(response.data[0]){
            for(let i=0;i<response.data.length;i++){
              response.data[i].planType = false
            }
            this.$set(this,'buildingOptions',response.data);
            if(this.planDataType){
              this.getBuildOrFloorList();
            }else{
              //处理实验室数量多的楼栋优先选择
              let num = 0;
              let index = null;
              for(let i=0;i<response.data.length;i++){
                if(response.data[i].subNum>num){
                  num = response.data[i].subNum;
                  index = i;
                }
              }
              this.$set(this,'buildingId',response.data[index].id);
              this.getBuildOrFloorList('automatic');
            }
          }
        })
      },
      //返回按钮
      backButton(){
        this.$parent.goPage(1);
      },
      //全屏页面跳转
      goRoute(){
        if(this.routeType){
          this.$router.push({
            path: "/emergencyManagement/newPerformEvacuation",
            query: {
              buildId: this.$route.query.buildId?this.$route.query.buildId:(this.propsBigData.buildId?this.propsBigData.buildId:''),
              floorId:this.$route.query.floorId?this.$route.query.floorId:(this.propsBigData.floorId?this.propsBigData.floorId:''),
              subId:this.$route.query.subId?this.$route.query.subId:(this.propsBigData.subId?this.propsBigData.subId:''),
            }
          })
        }else{
          this.$router.push({
            path: "/newEvacuationBigData",
            query: {
              buildId: this.$route.query.buildId?this.$route.query.buildId:(this.propsBigData.buildId?this.propsBigData.buildId:''),
              floorId:this.$route.query.floorId?this.$route.query.floorId:(this.propsBigData.floorId?this.propsBigData.floorId:''),
              subId:this.$route.query.subId?this.$route.query.subId:(this.propsBigData.subId?this.propsBigData.subId:''),
            }
          })
        }
      },
      /*********************************** 点击操作事件-相关接口 *********************************/
      //选中实验室
      checkSubClick(item){
        let self = this;
        if(item.roomType != '-99'){
          if(item.loginAdmin){
            if(this.checkSubId != item.subId){
              this.$set(this,'subId',item.subId);
              this.$set(this,'checkSubId',item.subId);
              let subText = item.roomType == '-99'?item.roomName:item.subName +' - '+ item.roomNum;
              this.$set(this,'subText',subText);
              this.buttonSubject();
            }
            if(item.planType){
              for(let i=0;i<self.planMapList.length;i++){
                if(self.planMapList[i].subId == item.subId){
                  this.$set(self.planMapList[i],'planType',true)
                }
              }
            }
          }else{
            this.msgError('操作失败，您不是该实验室的管理人员。')
          }
        }
      },
      //关闭实验室预案弹窗
      offPlanShade(index){
        this.$set(this.planMapList[index],'planType',false)
      },
      //设备switch开关
      changeIsNeedCaptcha(item){
        let self = this;
        console.log(item)
        if(item.code!=3 && item.code!=4){
          return
        }
        this.$set(this,'shadeData',item);
        let text = item.code==3?'关闭':(item.code==4?'开启':'')
        this.shadeButton(3,`是否`+text+`此设备？`);
      },
      //遮罩层开关/弹层提示确认
      shadeButton(type,text){
        if(type == 1){
          this.$set(this,'shadeType',1);
        }else if(type == 2){
          //疏散灯开关   执行疏散时才可以开启
          if(this.evacuationType){
            let newText = `是否`+(text.openType?'关闭':'开启')+`该疏散灯？`
            this.$set(this,'shadeData',text);
            this.$set(this,'shadeText',newText);
            this.$set(this,'shadeType',2);
          }
        }else if(type == 3){
          //设备开关
          this.$set(this,'shadeText',text);
          this.$set(this,'shadeType',3);
        }else if(type == 4){
          this.$set(this,'shadeType',0)
        }else if(type == 5){
          if(this.shadeType == 1){
            //一键灭火弹窗
            this.putOutTheFireButton();
          }else if(this.shadeType == 2){
            //开关灯弹窗
            if(this.shadeData.openType){
              //关闭
              this.closeLight();
            }else{
              //开启
              this.openLight();
            }
          }else if(this.shadeType == 3){
            //设备开关弹窗
            this.switchChange(this.shadeData)
          }else if(this.shadeType == 4){
            //结束疏散
            let obj = {
              buildId:this.buildingId,
              floorId:this.floorId,
            }
            endEvacuation(obj).then(response => {
              this.$set(this,'shadeType',0);
              this.getBuildingData();
            })
          }else if(this.shadeType == 5){
            //结束预案
            closeRiskPlan({id:this.checkRiskPlanId}).then(response => {
              this.$set(this,'shadeType',0);
              this.selectTriggerInfo();
            });
          }else if(this.shadeType == 6){
            //通风橱开关
            controlSwitch({id:this.checkRiskPlanId}).then(response => {
              this.$set(this,'shadeType',0);
              this.selectTriggerInfo();
            });
          }
        }else if(type == 6){
          this.$set(this,'shadeText','是否结束疏散?');
          this.$set(this,'shadeType',4);
        }else if(type == 7){
          this.$set(this,'shadeText','是否结束预案?');
          this.$set(this,'checkRiskPlanId',text);
          this.$set(this,'shadeType',5);
        }else if(type == 8){
          this.$set(this,'shadeText','是否确认操作该通风橱?');
          this.$set(this,'checkRiskPlanId',text);
          this.$set(this,'shadeType',6);
        }
      },
      //选中优先展示的预案弹窗
      checkPlanButton(id){
        this.$set(this,'checkPlanId',id);
      },
      //实验室视频展开收起开关
      subjectVideoCheckClick(){
        if(this.subjectVideoType){
          this.videoOff('subject')
        }else{
          if(this.subjectVideoIds[0]){
            this.startUrl('subject');
          }else{
            this.msgError('该实验室未配置摄像头')
          }
        }
      },
      //楼层视频展开收起开关
      floorVideoCheckClick(){
        if(this.floorVideoType){
          this.videoOff('floor')
        }else{
          if(this.floorVideoIds[0]){
            this.startUrl('floor');
          }else{
            this.msgError('该楼层未配置摄像头')
          }
        }
      },
      //楼栋选择
      buildingChange(val){
        this.$set(this,'buildingId',val);
        this.getBuildOrFloorList('automatic');
      },
      //楼层选择
      floorChange(val){
        this.$set(this,'floorId',val);
        //获取楼层消息
        this.getHornLastMess();
        //获取楼层摄像头数据
        this.getCameraByFloor();
        //获取楼层数据
        this.getBuildingData();
        //楼层mqtt
        this.offFloorMQTT('on');
        //断开楼层视频流
        this.videoOff('floor');
      },
      //开始/结束疏散按钮
      evacuationButton(){
        let self = this;
        if(this.evacuationType){
          //结束疏散
          this.shadeButton(6);
        }else{
          //开始疏散
          //默认勾选所有疏散口
          if(!this.mapList[0]){
            this.msgError('没有楼层数据,无法疏散')
            return
          }
          for(let i=0;i<self.shadeMapList.length;i++){
            if(self.shadeMapList[i].type == 3){
              self.shadeMapList[i].roomCheckType = true;
            }
          }
          this.$set(this,'evacuationShadeType',true);
        }
      },
      //选中疏散通道
      shadeCheckRoomClick(item){
        item.roomCheckType = !item.roomCheckType;
      },
      //执行疏散 上报疏散通道
      executeEvacuation(type){
        let self = this;
        if(type == 1){
          let list = [];
          let doorPointNames = [];
          for(let i=0;i<self.shadeMapList.length;i++){
            if(self.shadeMapList[i].type == 3){
              if(!self.shadeMapList[i].roomCheckType){
                list.push(self.shadeMapList[i].key)
              }else{
                doorPointNames.push(self.shadeMapList[i].key)
              }
            }
          }
          if(!doorPointNames[0]){
            this.msgError('请选择疏散出口')
            return
          }
          let obj = {
            buildId:this.buildingId,
            floorId:this.floorId,
            subId: this.subId,
            badPointNames:list,
            doorPointNames:doorPointNames,
          }
          executeEvacuation(obj).then(response => {
            for(let o=0;o<self.mapList.length;o++){
              if(self.mapList[o].type == 2){
                for(let x=0;x<self.mapList[o].lightList.length;x++){
                  let num = 0;
                  for(let i=0;i<response.data.lightPointSet.length;i++){
                    if(self.mapList[o].lightList[x].key == response.data.lightPointSet[i].key){
                      num++
                    }
                  }
                  self.mapList[o].lightList[x].openType = num != 0;
                }
              }
            }
            for(let i=0;i<response.data.doorPointNames.length;i++){
              for(let o=0;o<self.mapList.length;o++){
                if(self.mapList[o].type == 3){
                  if(response.data.doorPointNames[i] == self.mapList[o].key){
                    self.mapList[o].roomCheckType = true;
                  }
                }
              }
            }
            this.msgSuccess(response.msg);
            this.$set(this,'evacuationShadeType',false);
            this.$set(this,'evacuationType',true);
            this.$forceUpdate();
          })
          console.log('key',list);
        }else if(type == 2){
          this.$set(this,'evacuationShadeType',false);
        }
      },
      //执行灭火
      putOutTheFireButton(){
        let self = this;
        if(!self.putOutTheFireType){
          let obj = {
            subjectId:self.subId,
            deviceCode:self.fireCode,
          }
          outfirepc(obj).then(response => {
            if(response.data.waitTime){
              self.$set(self,'fireTime',response.data.waitTime);
              self.fireTimeData = window.setInterval(refreshCount, 1000);
              self.$set(self,'shadeType',0);
              self.$set(self,'fireShadeType',true);
              self.$set(self,'putOutTheFireType',true);
              function refreshCount() {
                if(self.fireTime<=1){
                  window.clearInterval(self.fireTimeData);
                  self.$set(self,'putOutTheFireType',false);
                  self.$set(self,'fireShadeType',false);
                }else{
                  self.fireTime--
                }
              }
            }else{
              self.msgError('一键灭火启动失败')
            }
          })
        }else{
          let obj = {
            subjectId:this.subId
          };
          isCancelOutFile(obj).then(response => {
            if(response.code == 200){
              window.clearInterval(self.fireTimeData);
              self.$set(self,'putOutTheFireType',false);
              self.$set(self,'fireShadeType',false);
            }else{
              self.msgError('放弃一键灭火失败')
            }
          })
        }
      },
      //灭火中倒计时
      fireStartTimeFunction(time){
        let self = this;
        self.$set(self,'fireStartTime',time);
        self.fireStartTimeData = window.setInterval(refreshCount, 1000);
        function refreshCount() {
          if(self.fireStartTime<=1){
            window.clearInterval(self.fireStartTimeData);
            self.$set(self,'fireStartTimeData',null);
            self.$set(self,'fireStartType',false);
            self.$set(self,'fireTextStartType',true);
          }else{
            self.fireStartTime--
          }
        }
      },
      //获取相关实验室数据
      buttonSubject(){
        //获取实验室人员数据
        this.subOnlineUser();
        //获取危险源数据
        this.exitHazardTotal();
        //获取楼层喇叭
        this.getDeviceList();
        //获取实验室数据(传感器/硬件)
        this.subjectInfo();
        //获取实验室火焰报警数据
        this.$set(this,'fireStartType',false);
        this.$set(this,'fireTextStartType',false);
        if(this.fireStartTimeData){
          window.clearInterval(this.fireStartTimeData);
          this.$set(this,'fireStartTimeData',null);
        }
        this.getFireStatus();
        //实验室相关MQTT
        this.offSubMQTT('on');
        //断开实验室视频流
        this.videoOff('subject');
      },
      /*********************************** 查询当前是否有进行中的疏散-相关接口 *********************************/
      getRedisEvacuation(){
        let self = this;
        let obj = {
          buildId:this.buildingId,
          floorId:this.floorId,
        }
        getRedisEvacuation(obj).then(response => {
          if(response.data.doorPointNames){
            this.$set(this,'evacuationType',true);
            for(let o=0;o<self.mapList.length;o++){
              if(self.mapList[o].type == 2){
                for(let x=0;x<self.mapList[o].lightList.length;x++){
                  let num = 0;
                  for(let i=0;i<response.data.lightPointSet.length;i++){
                    if(response.data.lightPointSet[i]){//处理后端返回的异常的NULL
                      if(self.mapList[o].lightList[x].key == response.data.lightPointSet[i].key){
                        num++
                      }
                    }
                  }
                  self.mapList[o].lightList[x].openType = num != 0;
                }
              }
            }
            for(let i=0;i<response.data.doorPointNames.length;i++){
              for(let o=0;o<self.mapList.length;o++){
                if(self.mapList[o].type == 3){
                  if(response.data.doorPointNames[i] == self.mapList[o].key){
                    self.mapList[o].roomCheckType = true;
                  }
                }
              }
            }
            this.$forceUpdate();
          }else{
            this.$set(this,'evacuationType',false);
          }
        });
      },
      /*********************************** 喇叭-相关接口 *********************************/
      //获取喇叭列表
      getDeviceList(){
        let obj ={
          subId:this.subId,
          floorId:this.floorId,
          page:1,
          pageSize:100,
        };
        getDeviceList(obj).then(response => {
          for(let i=0;i<response.data.length;i++){
            response.data[i].type = false;
          }
          this.$set(this,'trumpetList',response.data)
        });
      },
      //喇叭操作
      checkTrumpet(index){
        let self = this;
        self.trumpetList[index].type = !self.trumpetList[index].type
        // for(let i=0;i<self.trumpetList.length;i++){
        //   self.trumpetList[i].type = i == index;
        // }
      },
      //发送消息到喇叭
      addHxpChemical(){
        let self = this;
        let obj = {
          floorId:this.floorId,
          messageContext:this.inputText,
          playVo:[],
        };
        let num = 0;
        for(let i=0;i<self.trumpetList.length;i++){
          if(self.trumpetList[i].type){
            // obj.playVo=[{
            //   sn:self.trumpetList[i].deviceSn,
            //   port:self.trumpetList[i].port,
            //   deviceIp:self.trumpetList[i].deviceIp,
            //   type:"",
            //   name:"",
            //   speed:"",
            //   params:{
            //     tid:"",
            //     vol:self.trumpetList[i].deviceVol,
            //     urls:[]
            //   }
            // }];
            obj.playVo.push({
              sn:self.trumpetList[i].deviceSn,
              port:self.trumpetList[i].port,
              deviceIp:self.trumpetList[i].deviceIp,
              type:"",
              name:"",
              speed:"",
              params:{
                tid:"",
                vol:self.trumpetList[i].deviceVol,
                urls:[]
              }
            })
            num++
          }
        }
        if(num == 0){
          this.msgError('请选择喇叭')
          return
        }
        addHxpChemical(obj).then(response => {
          this.msgSuccess(response.msg);
          this.$set(this,'inputText','');
        });
      },
      //获取楼层消息
      getHornLastMess(){
        let obj = {
          floorId : this.floorId
        }
        getHornLastMess(obj).then(response => {
          if(response.data.messageContext){
            this.$set(this,'radioTextList',[{
              name:response.data.sendName,
              time:response.data.nowTime,
              text:response.data.messageContext
            }]);
          }
        });
      },
      /*********************************** 开关疏散灯-相关接口 *********************************/
      //开启疏散灯
      openLight(){
        let obj = {
          buildId:this.buildingId,
          floorId:this.floorId,
          pointName:this.shadeData.key
        };
        openLight(obj).then(response => {
          if(response.code==200){
            this.$set(this,'shadeType',0)
            this.msgSuccess(response.msg)
          }
        });
      },
      //关闭疏散灯
      closeLight(){
        let obj = {
          buildId:this.buildingId,
          floorId:this.floorId,
          pointName:this.shadeData.key
        };
        closeLight(obj).then(response => {
          if(response.code==200){
            this.$set(this,'shadeType',0)
            this.msgSuccess(response.msg)
          }
        });
      },
      /*********************************** 开关设备-相关接口 *********************************/
      //开关设备按钮
      switchChange(item){
        let switchData = {
          id:item.id,
          switchVal:item.code==3?'close':(item.code==4?'open':'')
        };
        hardWareControl(switchData).then(response => {
          if(response.code==200){
            item.code = item.code==3?4:(item.code==4?3:'')
            this.$set(this,'shadeType',0);
            this.msgSuccess("操作成功")
          }
        });
      },
      /*********************************** 实验室人员-相关接口 *********************************/
      subOnlineUser(id){
        let self = this;
        subOnlineUser({subId:this.subId}).then(response => {
          this.$set(this,'userList',response.rows);
          if(id){
            for(let i=0;i<self.mapList.length;i++){
              if(self.mapList[i].type == '1'){
                if(self.mapList[i].subId == id){
                  this.$set(self.mapList[i],'online',response.rows.length);
                }
              }
            }
          }
        });
      },
      /*********************************** 危险源-相关接口 *********************************/
      exitHazardTotal(){
        exitHazardTotal({subjectId:this.subId}).then(response => {
          if(response.data[0]){
            let obj = {
              nameList: [],
              numList: [],
              maxNumList: [],
            }
            for(let i=0;i<response.data.length;i++){
              obj.nameList.push(response.data[i].name)
              obj.numList.push(response.data[i].percentage)
              obj.maxNumList.push(100)
            }
            this.$set(this,'eChartsData',obj);
            this.eChartsFunction(this.eChartsData);
          }else{
            let obj = {
              nameList: [],
              numList: [],
              maxNumList: [],
            }
            this.$set(this,'eChartsData',obj);
            this.eChartsFunction(this.eChartsData);
            // document.getElementById('eCharts').innerHTML = '<p style="line-height:200px;font-size:16px;color:#fff;text-align: center">暂无数据</p>'
          }
        });
      },
      //eCharts表格
      eChartsFunction(obj){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts'));
        let option = {
          backgroundColor: 'rgba(0,0,0,0)',
          grid: {
            left: '6%',
            right: '4%',
            bottom: '5%',
            top: '10%',
            containLabel: true,
          },
          legend: [{
            show: false,
          }],
          xAxis: [
            {
              type: 'category',
              data: obj.nameList,
              axisLine: {
                lineStyle: {
                  color: 'rgba(5, 80, 93, 1)',
                },
              },
              axisLabel: {
                fontSize: 12,
                // color: 'black',
                color: '#fff',
                fontFamily: 'DIN-Medium',
                padding: [3, 0, 0, 0]
              },

              axisTick: {
                show: false,
              },
            },
            {
              type: 'category',
              data: obj.nameList,
              show: false,
            },],
          yAxis: [{
            type: 'value',
            name: "",
            nameTextStyle: {
              fontSize: 14,
              fontFamily: 'Source Han Sans CN',
              fontWeight: '400',
              color: 'rgba(255, 255, 255, 1)',
              padding: [0, 75, -8, 0]
            },
            nameGap: 24,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(5, 80, 93, 1)',
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(5, 80, 93, 1)',
                type: "dashed",
              },
            },
            alignTicks: true,
            axisLabel: {
              fontSize: 14,
              color: 'rgba(255, 255, 255, 1)',
              fontFamily: 'DIN-Medium',
              padding: [0, 7, 0, 0]
            },
            splitArea: {
              show: false,
            },
          }],
          series: [
            {
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  fontSize: 12,
                  color: 'rgba(16, 213, 223, 1)',
                  formatter: function (params) {
                    return params.value + '%'
                  },
                  offset: [0, -10],
                },
              },
              tooltip: {
                show: false
              },
              barWidth: 14,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, x2: 0, y: 0, y2: 1,
                  colorStops: [
                    { offset: 0, color: '#00FCFC' },
                    { offset: 1, color: '#016FCC' }
                  ]
                },
              },
              name: '',
              data: obj.numList
            },
            {
              // 分隔
              type: 'pictorialBar',
              itemStyle: {
                normal: {
                  color: 'rgba(3, 72, 84, 0.5)',
                },
              },
              symbolRepeat: 'fixed',//重复
              symbolMargin: 2,//上下间隔
              symbol: 'rect',//图形类型
              symbolClip: true,//是否裁剪
              symbolSize: [20, 2],//图形的大小,可以用数组分开表示宽和高
              symbolPosition: 'center',//图形的定位位置
              symbolOffset: [0, 2],//图形相对于原本位置的偏移
              data: obj.numList,
              z: 0,
              zlevel: 1,
            },
            {
              type: 'bar',
              barWidth: 40,
              xAxisIndex: 1,
              itemStyle: {
                color: 'rgba(0, 0, 0, 0)'
              },
              name: '',
              data: obj.maxNumList
            },
          ],
        }
        myChart.setOption(option);
      },
      /*********************************** 传感器/设备/视频-相关接口 *********************************/
      //获取实验室传感器/设备/视屏相关接口
      subjectInfo(){
        //1.只查硬件数据   0.查询所有数据
        subjectInfo(this.subId,1).then(response => {
          let list = [];
          let videoList = [];
          if (response.data.labHardwareVOList){
            for(let i=0;i<response.data.labHardwareVOList.length;i++){
              if((response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'AI_VENTILATION' ||
                response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'SWITCH') && response.data.labHardwareVOList[i].isPcfire != 1){
                //AI_VENTILATION 通风   SWITCH 电源开关
                let obj = {
                  id:response.data.labHardwareVOList[i].id,
                  name:response.data.labHardwareVOList[i].hardwareName?response.data.labHardwareVOList[i].hardwareName:'未命名',
                  enumName:response.data.labHardwareVOList[i].hardwareTypeEnum.enumName,
                  code:response.data.labHardwareVOList[i].state.code,
                  pcType:response.data.labHardwareVOList[i].pcType
                }
                list.push(obj);
              }
              if(response.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'VIDEO_MONITOR'){
                videoList.push(response.data.labHardwareVOList[i].hardwareNUM);
              }
            }
          }
          this.$set(this,'controlList',list);
          this.$set(this,'subjectVideoIds',videoList);
          this.$set(this,'sensorList',this.sensorIconMatching(response.data.sensorFunctionStatusList));
        })
      },
      //获取楼层视频接口
      getCameraByFloor(){
        getCameraByFloor({floorId:this.floorId}).then(response => {
          this.$set(this,'floorVideoIds',response.data);
        })
      },
      /*********************************** 视频-相关接口 *********************************/
      //视频播放接口
      async startUrl(type){
        let self = this;
        let list = [];
        if(type == 'subject'){
          list = self.subjectVideoIds+'';
        }else if(type == 'floor'){
          list = self.floorVideoIds+'';
        }
        let obj = {
          page:"1",
          count:"100",
          deviceIds:list,
        };
        const { data } = await startUrl(obj);
        console.log('data',data);
        if(data){
          let newData = data;
          let urlText = window.location.href;
          if(urlText.indexOf(localStorage.getItem('ipIdentify')) != -1){
            console.log('本地');
            for(let i=0;i<newData.length;i++){
              let obj = {
                divId:'divId'+type+i,
                hasAudio:false,
                height:false,
                videoUrl:newData[i].ws_flv,
              }
              if(type == 'subject'){
                self.subjectVideoList.push(obj)
              }else if(type == 'floor'){
                self.floorVideoList.push(obj)
              }
            }
          }else{
            console.log('外网');
            for(let i=0;i<newData.length;i++){
              let text = localStorage.getItem('cameraUrl');
              let url = newData[i].ws_flv;
              url = url.split("rtp/");
              let newUrl = text+'rtp/'+url[1];
              let obj = {
                divId:'divId'+type+i,
                hasAudio:false,
                height:false,
                videoUrl:newUrl,
              }
              if(type == 'subject'){
                self.subjectVideoList.push(obj)
              }else if(type == 'floor'){
                self.floorVideoList.push(obj)
              }
            }
          }
          if(type == 'subject'){
            this.$set(this,'subjectVideoType',true);
          }else if(type == 'floor'){
            this.$set(this,'floorVideoType',true);
          }
          setTimeout(function(){
            self.videoPlay(type);
          },300);
        }
      },
      //播放视频流
      videoPlay(type){
        let self = this;
        this.loading = false;
        let videoList = []
        if(type == 'subject'){
          videoList = JSON.parse(JSON.stringify(this.subjectVideoList))
        }else if(type == 'floor'){
          videoList = JSON.parse(JSON.stringify(this.floorVideoList))
        }
        for(let i=0;i<videoList.length;i++){
          let obj = {
            player :{},
            flvPlayer:{}
          };
          obj.player = document.getElementById(videoList[i].divId);
          obj.flvPlayer = flvjs.createPlayer(
            {
              // isLive: true, //=> 是否为直播流
              // hasAudio: false, //=> 是否开启声音
              type: 'flv', //媒体类型 flv 或 mp4
              url: videoList[i].videoUrl //视频流地址
            },
            {
              enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
              stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
              isLive: true,//是否是直播
              lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
              autoCleanupSourceBuffer: true,//进行自动清理
              autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
              autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
            }
          );
          if(type == 'subject'){
            self.subjectVideoPlayList.push(obj);
          }else if(type == 'floor'){
            self.floorVideoPlayList.push(obj);
          }
        }
        if(type == 'subject'){
          for(let i=0;i<self.subjectVideoPlayList.length;i++){
            self.subjectVideoPlayList[i].flvPlayer.attachMediaElement(self.subjectVideoPlayList[i].player);
            self.subjectVideoPlayList[i].flvPlayer.load(); //加载
            self.subjectVideoPlayList[i].flvPlayer.play(); //加载
          }
        }else if(type == 'floor'){
          for(let i=0;i<self.floorVideoPlayList.length;i++){
            self.floorVideoPlayList[i].flvPlayer.attachMediaElement(self.floorVideoPlayList[i].player);
            self.floorVideoPlayList[i].flvPlayer.load(); //加载
            self.floorVideoPlayList[i].flvPlayer.play(); //加载
          }
        }
      },
      //断开视频流
      videoOff(type){
        let self = this;
        if(type == 'subject'){
          if(self.subjectVideoPlayList[0]){
            for(let i=0;i<self.subjectVideoPlayList.length;i++){
              if(self.subjectVideoPlayList[i].flvPlayer){
                self.subjectVideoPlayList[i].flvPlayer.pause();
                self.subjectVideoPlayList[i].flvPlayer.unload();
                self.subjectVideoPlayList[i].flvPlayer.detachMediaElement();
                self.subjectVideoPlayList[i].flvPlayer.destroy();
                self.subjectVideoPlayList[i].flvPlayer = null;
              }
            }
            self.$set(self,'subjectVideoList',[]);
            self.$set(self,'subjectVideoPlayList',[]);
            self.$set(self,'subjectVideoType',false);
          }
        }else if(type == 'floor'){
          if(self.floorVideoPlayList[0]){
            for(let i=0;i<self.floorVideoPlayList.length;i++){
              if(self.floorVideoPlayList[i].flvPlayer){
                self.floorVideoPlayList[i].flvPlayer.pause();
                self.floorVideoPlayList[i].flvPlayer.unload();
                self.floorVideoPlayList[i].flvPlayer.detachMediaElement();
                self.floorVideoPlayList[i].flvPlayer.destroy();
                self.floorVideoPlayList[i].flvPlayer = null;
              }
            }
            self.$set(self,'floorVideoList',[]);
            self.$set(self,'floorVideoPlayList',[]);
            self.$set(self,'floorVideoType',false);
          }
        }
      },
      /*********************************** 火焰报警-相关接口 *********************************/
      //获取实验室灭火设备数据
      getFireStatus(type){
        getFireStatus({subjectId:this.subId}).then(response => {
          if(response.data.isexist){
            console.log('miehuo',response.data);
            this.$set(this,'fireType',response.data.isexist);
            if(response.data.online){
              this.$set(this,'fireListType',response.data.online);
              this.$set(this.fireData,'temperatureType',response.data.temperature);
              this.$set(this.fireData,'smokeType',response.data.smoke);
              this.$set(this.fireData,'flameType',response.data.fire);
              this.$set(this,'fireCode',response.data.fireDevice.deviceCode);
              if(type != 'mqtt'){
                this.offFireMQTT('on');
              }
              if(response.data.temperature && response.data.smoke){
                if(!this.fireStartType){
                  this.$set(this,'fireStartType',true);
                  this.$set(this,'fireStartText','自动灭火中');
                  this.fireStartTimeFunction(response.data.timeDifference);
                }
              }else if(response.data.timeDifference != -1){
                if(!this.fireStartType){
                  this.$set(this,'fireStartType',true);
                  this.$set(this,'fireStartText','灭火中');
                  this.fireStartTimeFunction(response.data.timeDifference);
                }
              }
            }else{
              this.$set(this,'fireListType',false);
              this.$set(this.fireData,'temperatureType',false);
              this.$set(this.fireData,'smokeType',false);
              this.$set(this.fireData,'flameType',false);
              this.$set(this,'fireCode',null);
              if(type != 'mqtt'){
                this.offFireMQTT('on');
              }
            }
          }else{
            this.$set(this,'fireType',false);
            if(type != 'mqtt'){
              this.offFireMQTT('on');
            }
          }
        })
      },
      /*********************************** 楼层数据-相关接口 *********************************/
      //地图数据
      getBuildingData(){
        let self = this;
        getFloorData(this.floorId).then(response => {
          if(response.data.buildFloorLayoutVoList[0]){
            let list = JSON.parse(response.data.labExitLineVertex.layoutJoinData)
            for(let i=0;i<list.length;i++){
              if(list[i].type == '2'){
                //楼道
                for(let o=0;o<list[i].lightList.length;o++){
                  list[i].lightList[o].openType = false;
                }
              }else if(list[i].type == '1'){
                for(let o=0;o<response.data.buildFloorLayoutVoList.length;o++){
                  if(list[i].key == response.data.buildFloorLayoutVoList[o].pointName){
                    list[i].id = response.data.buildFloorLayoutVoList[o].id;
                    list[i].buildId = response.data.buildFloorLayoutVoList[o].buildId;
                    list[i].floorId = response.data.buildFloorLayoutVoList[o].floorId;
                    list[i].roomType = response.data.buildFloorLayoutVoList[o].roomType;
                    list[i].roomName = response.data.buildFloorLayoutVoList[o].roomName;
                    list[i].roomNum = response.data.buildFloorLayoutVoList[o].roomNum;
                    list[i].subName = response.data.buildFloorLayoutVoList[o].subName;
                    list[i].subId = response.data.buildFloorLayoutVoList[o].subId;
                    list[i].online = response.data.buildFloorLayoutVoList[o].online;
                    list[i].loginAdmin = response.data.buildFloorLayoutVoList[o].loginAdmin;
                    list[i].planType = false;
                  }
                }
              }else if(list[i].type == 3){
                list[i].roomCheckType = false;
              }
            }
            let obj = this.calculateMapMax(list)
            this.$set(this.mapData,'width',obj.maxWidth);
            this.$set(this.mapData,'height',obj.maxHeight);
            this.$set(this.mapData,'zoomData',obj.zoomData);
            this.$set(this,'mapList',JSON.parse(JSON.stringify(list)));
            this.$set(this,'shadeMapList',JSON.parse(JSON.stringify(list)));
            this.$set(this,'mapType',true);
            let floorText = '';
            for(let i=0;i<self.buildingOptions.length;i++){
              if(self.buildingOptions[i].id == self.buildingId){
                floorText = floorText + self.buildingOptions[i].name
              }
            }
            for(let i=0;i<self.floorOptions.length;i++){
              if(self.floorOptions[i].id == self.floorId){
                floorText = floorText + ' - ' + self.floorOptions[i].name
              }
            }
            this.$set(this,'floorText',floorText);
            //自动选中楼层中该用户有权限的第一个实验室
            if(!this.planDataType){
              console.log('无传参');
              for(let i=0;i<response.data.buildFloorLayoutVoList.length;i++){
                if(response.data.buildFloorLayoutVoList[i].loginAdmin === true){
                  let subText = response.data.buildFloorLayoutVoList[i].roomType == '-99'?response.data.buildFloorLayoutVoList[i].roomName:response.data.buildFloorLayoutVoList[i].subName +' - '+ response.data.buildFloorLayoutVoList[i].roomNum;
                  this.$set(this,'subText',subText);
                  this.$set(this,'subId',response.data.buildFloorLayoutVoList[i].subId);
                  this.$set(this,'checkSubId',response.data.buildFloorLayoutVoList[i].subId);
                  break
                }
              }
            }else{
              console.log('传参');
              for(let i=0;i<response.data.buildFloorLayoutVoList.length;i++){
                if(response.data.buildFloorLayoutVoList[i].subId == self.subId){
                  let subText = response.data.buildFloorLayoutVoList[i].roomType == '-99'?response.data.buildFloorLayoutVoList[i].roomName:response.data.buildFloorLayoutVoList[i].subName +' - '+ response.data.buildFloorLayoutVoList[i].roomNum;
                  this.$set(this,'subText',subText);
                  break
                }
              }
            }
            //处理实验室弹窗数据
            let roomList = [];
            for(let i=0;i<list.length;i++){
              if(list[i].type == 1 && list[i].subId){
                let roomObj = {
                  subId:list[i].subId
                };
                if(list[i].doorList[0].toward == 'top'){
                  roomObj.width = 266;
                  roomObj.height = 111;
                  roomObj.left = (list[i].w/2) + (list[i].x) - 133;
                  roomObj.top = list[i].y - 111;
                  roomObj.planType = false;
                }else if(list[i].doorList[0].toward == 'bottom'){
                  roomObj.width = 266;
                  roomObj.height = 111;
                  roomObj.left = (list[i].w/2) + (list[i].x) - 133;
                  roomObj.top = list[i].y + list[i].h;
                  roomObj.planType = false;
                }else if(list[i].doorList[0].toward == 'left'){
                  roomObj.width = 266;
                  roomObj.height = 111;
                  roomObj.left = list[i].x - 133;
                  roomObj.top = (list[i].h/2) + (list[i].y) - 56;
                  roomObj.planType = false;
                }else if(list[i].doorList[0].toward == 'fight'){
                  roomObj.width = 266;
                  roomObj.height = 111;
                  roomObj.left = list[i].x + list[i].w + 133;
                  roomObj.top = (list[i].h/2) + (list[i].y) - 56;
                  roomObj.planType = false;
                }
                roomList.push(roomObj);
              }
            }
            this.$set(this,'planMapList',roomList);
            //获取相关实验室数据
            this.buttonSubject();
            //查询当前是否有进行中的疏散
            this.getRedisEvacuation();
            //测试查询预案
            this.selectTriggerInfo();
            this.$set(this,'planDataType',false);
          }
        })
      },
      //计算布局最大尺寸
      calculateMapMax(list) {
        //基础参数
        let height = 500;
        let width = 1000;
        let maxWidth = 0
        let maxHeight = 0
        let zoomData = 1;
        //参数处理
        for (let i = 0; i < list.length; i++) {
          if ((list[i].x + list[i].w) > maxWidth) {
            maxWidth = list[i].x + list[i].w
          }
          if ((list[i].y + list[i].h) > maxHeight) {
            maxHeight = list[i].y + list[i].h
          }
        }
        //处理等值数据
        if(maxHeight == height){
          maxHeight++
        }
        if(maxWidth == width){
          maxWidth++
        }
        //缩放判断
        let zoomNumOne = height / maxHeight;
        if(parseInt(this.accMul(zoomNumOne,maxHeight)) <= height && parseInt(this.accMul(zoomNumOne,maxWidth)) <= width){
          zoomData = zoomNumOne;
          this.$set(this,'zoomData',zoomNumOne);
        }
        let zoomNumTwo = width / maxWidth;
        if(parseInt(this.accMul(zoomNumTwo,maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo,maxWidth)) <= width){
          zoomData = zoomNumTwo;
          this.$set(this,'zoomData',zoomNumTwo);
        }
        return { maxWidth: maxWidth, maxHeight: maxHeight,zoomData:zoomData }
      },
      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)
      },
      /*********************************** 楼层/楼栋数据-相关接口 *********************************/
      //根据楼栋获取楼层数据
      getBuildOrFloorList(type){
        let obj = {
          type : 3,
          parentId : this.buildingId
        }
        getBuildOrFloorList(obj).then(response => {
          if(response.data[0]){
            for(let i=0;i<response.data.length;i++){
              response.data[i].planType = false
            }
            this.$set(this,'floorOptions',response.data);
            if(!this.planDataType){
              if(type == 'automatic'){
                //处理实验室数量多的楼层优先选择
                let num = 0;
                let index = null;
                for(let i=0;i<response.data.length;i++){
                  if(response.data[i].subNum>num){
                    num = response.data[i].subNum;
                    index = i;
                  }
                }
                console.log('floorId',this.floorId)
                console.log('index',index)
                console.log('response.data',response.data)
                this.$set(this,'floorId',response.data[index].id);
              }
            }
            //获取楼层消息
            this.getHornLastMess();
            //获取楼层摄像头数据
            this.getCameraByFloor();
            //获取楼层数据
            this.getBuildingData();
            //楼层mqtt
            this.offFloorMQTT('on');
            //断开楼层视频流
            this.videoOff('floor');
          }
        })
      },
      //查询当前用户下的预案触发数据
      selectTriggerInfo(){
        let self = this;
        selectTriggerInfo().then(response => {
          //楼栋预案标记
          for(let o=0;o<self.buildingOptions.length;o++){
            let num = 0;
            for(let i=0;i<response.data.length;i++){
              if(response.data[i].buildId == self.buildingOptions[o].id){
                num++
              }
            }
            self.buildingOptions[o].planType = num != 0;
          }
          //楼层预案标记
          for(let o=0;o<self.floorOptions.length;o++){
            let num = 0;
            for(let i=0;i<response.data.length;i++){
              if(response.data[i].floorId == self.floorOptions[o].id){
                num++
              }
            }
            self.floorOptions[o].planType = num != 0;
          }
          //实验室预案标记
          for(let o=0;o<self.mapList.length;o++){
            if(self.mapList[o].type == 1){
              let num = 0;
              let newData = {};
              for(let i=0;i<response.data.length;i++){
                if(response.data[i].subId == self.mapList[o].subId){
                  num++
                  newData = response.data[i];
                }
              }
              if(num != 0){
                self.mapList[o].planType = true;
                for(let x=0;x<self.planMapList.length;x++){
                  if(self.planMapList[x].subId == self.mapList[o].subId){
                    self.planMapList[x].riskPlanTriggerTime = newData.riskPlanTriggerTime;
                    self.planMapList[x].riskAttribute = newData.riskAttribute;
                    self.planMapList[x].riskPlanLevel = newData.riskPlanLevel;
                    self.planMapList[x].riskPlanLevelName = newData.riskPlanLevelName;
                    self.planMapList[x].name = newData.name;
                    self.planMapList[x].groupId = newData.groupId;
                    self.planMapList[x].planType = true;
                  }
                }
              }else{
                self.mapList[o].planType = false;
                for(let x=0;x<self.planMapList.length;x++){
                  if(self.planMapList[x].subId == self.mapList[o].subId){
                    self.planMapList[x].planType = false;
                    self.planMapList[x].riskPlanTriggerTime = null;
                    self.planMapList[x].riskAttribute = null;
                    self.planMapList[x].riskPlanLevel = null;
                    self.planMapList[x].riskPlanLevelName = null;
                    self.planMapList[x].groupId = null;
                    self.planMapList[x].name = null;
                  }
                }
              }
            }
          }
          //浮层实验室预案标记
          for(let o=0;o<self.shadeMapList.length;o++){
            if(self.shadeMapList[o].type == 1){
              let num = 0;
              for(let i=0;i<response.data.length;i++){
                if(response.data[i].subId == self.shadeMapList[o].subId){
                  num++
                }
              }
              self.shadeMapList[o].planType = num != 0;
            }
          }
          this.$forceUpdate();
        })
      },
      /*********************************** MQTT相关-相关接口 *********************************/
      //全局-MQTT订阅
      onAllMQTT(){
        let self = this;
        this.allClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password: localStorage.getItem('mqttPassword')
        });
        this.allClient.on("connect", e =>{
          console.log("连接成功");
          this.allClient.subscribe(self.planTopic, (err) => {
            if (!err) {
              console.log("预案-订阅成功:" + self.planTopic);
            }
          });
        });
        this.allClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            if(data){
              console.log('data',data);
              if(topic == self.planTopic){
                //传感器状态
                console.log('预案-状态');
              }
            }
          }
        });
      },
      //楼层-MQTT订阅
      onFloorMQTT(){
        let self = this;
        this.floorClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password: localStorage.getItem('mqttPassword')
        });
        this.floorClient.on("connect", e =>{
          console.log("连接成功");
          this.floorClient.subscribe(self.messageTopic+self.floorId, (err) => {
            if (!err) {
              console.log("消息订阅成功:" + self.messageTopic+self.floorId);
            }
          });
        });
        this.floorClient.subscribe(self.evacuationTopic+self.floorId, (err) => {
          if (!err) {
            console.log("疏散-订阅成功:" + self.evacuationTopic+self.floorId);
            self.getRedisEvacuation();
          }
        });
        this.floorClient.subscribe(self.userTopic+self.floorId, (err) => {
          if (!err) {
            console.log("实验室人数-订阅成功:" + self.userTopic+self.floorId);
          }
        });
        this.floorClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            if(data){
              console.log('data',data);
              if(topic == (self.messageTopic+self.floorId)){
                //消息状态
                console.log('消息-状态');
                if(data.data == 'FLOOR_HORN'){
                  self.getHornLastMess();
                }
              }else if(topic == (self.evacuationTopic+self.floorId)){
                console.log('疏散-状态');
                if(data.data == 'FLOOR_EXITLINE'){
                  //疏散消息
                  self.getRedisEvacuation();
                }else if(data.data == 'FLOOR_OVER_EXITLINE'){
                  self.getBuildingData();
                }
              }else if(topic == (self.userTopic+self.floorId)){
                console.log('实验室人数-状态');
                //实验室人数
                self.subOnlineUser(data.data);
              }
            }
          }
        });
      },
      //实验室-MQTT订阅
      onSubMQTT(){
        let self = this;
        this.subClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password: localStorage.getItem('mqttPassword')
        });
        this.subClient.on("connect", e =>{
          console.log("连接成功");
          this.subClient.subscribe(self.sensorTopic+self.subId, (err) => {
            if (!err) {
              console.log("传感器-订阅成功:" + self.sensorTopic+self.subId);
            }
          });
          this.subClient.subscribe(self.switchTopic+self.subId, (err) => {
            if (!err) {
              console.log("设备-订阅成功:" + self.switchTopic+self.subId);
            }
          });
        });
        this.subClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            if(data){
              console.log('data',data);
              if(topic == (self.sensorTopic+self.subId)){
                //传感器状态
                console.log('实验室传感器-状态');
                this.$set(this,'sensorList',this.sensorIconMatching(data.data.functionStatuses));
              }else if(topic == (self.switchTopic+self.subId)){
                //设备在线状态
                console.log('实验室设备-状态');
                for (let i = 0; i < data.data.length; i++) {
                  if (self.controlList[0]) {
                    for (let k = 0; k < self.controlList.length; k++) {
                      if (self.controlList[k].id == data.data[i].num) {
                        if (data.data[i].hardwareOperate == 'CLOSE') {
                          self.controlList[k].code = 4;
                        } else if (data.data[i].hardwareOperate == 'OPEN') {
                          self.controlList[k].code = 3;
                        } else if (data.data[i].hardwareOperate == 'OFFLINE') {
                          self.controlList[k].code = 0;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        });
      },
      //灭火设备-MQTT订阅
      onFireMQTT(){
        let self = this;
        if(self.fireCode){
          this.fireClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
            username: localStorage.getItem('mqttUser'),
            password: localStorage.getItem('mqttPassword')
          });
          this.fireClient.on("connect", e =>{
            console.log("连接成功");
            this.fireClient.subscribe(self.fireTopic+self.fireCode, (err) => {
              if (!err) {
                console.log("火灾传感器状态-订阅成功:" + self.fireTopic+self.fireCode);
              }
            });
            this.fireClient.subscribe(self.fireOnlineTopic+self.fireCode, (err) => {
              if (!err) {
                console.log("火灾设备是否在线-订阅成功:" + self.fireOnlineTopic+self.fireCode);
              }
            });
            this.fireClient.subscribe(self.firePerformTopic+self.fireCode, (err) => {
              if (!err) {
                console.log("火灾是否正在执行灭火操作-订阅成功:" + self.firePerformTopic+self.fireCode);
              }
            });
          });
          this.fireClient.on("message", (topic, message) => {
            if (message){
              let data = JSON.parse(message)
              if(data){
                console.log('data',data);
                console.log('topic',topic);
                console.log('self.fireTopic + self.fireCode',self.fireTopic + self.fireCode);
                console.log('self.fireOnlineTopic + self.fireCode',self.fireOnlineTopic + self.fireCode);
                console.log('self.firePerformTopic + self.fireCode',self.firePerformTopic + self.fireCode);
                if(topic == (self.fireTopic + self.fireCode)){
                  //火灾传感器状态
                  console.log('火灾传感器状态');
                  self.getFireStatus('mqtt');
                }else if(topic == (self.fireOnlineTopic + self.fireCode)){
                  //设备在线状态
                  console.log('设备在线状态');
                  self.getFireStatus('mqtt');
                }else if(topic == (self.firePerformTopic + self.fireCode)){
                  //灭火执行操作
                  if(data.fireStatus == 1){
                    if(!self.fireStartType){
                      self.getFireStatus('mqtt');
                      // self.$set(self,'fireStartType',true);
                      // self.$set(self,'fireStartText','灭火中');
                      // self.fireStartTimeFunction(data.direTime);
                    }
                  }else if(data.fireStatus == 0){
                    self.msgError('一键灭火启动失败')
                  }
                }
              }
            }
          });
        }
      },
      //取消订阅-全局-关闭MQTT连接
      offAllMQTT(type){
        let self = this;
        //判断是否已有连接如果有责断开
        if(this.allClient.unsubscribe){
          this.allClient.unsubscribe(self.planTopic, error => {
            if (error) {
              console.log('预案-MQTT断开报错=>', error)
            }
          })
          this.allClient.end();
          this.$set(this,'allClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.onAllMQTT();
        }
      },
      //取消订阅-楼层-关闭MQTT连接
      offFloorMQTT(type){
        let self = this;
        //判断是否已有连接如果有责断开
        if(this.floorClient.unsubscribe){
          this.floorClient.unsubscribe(self.evacuationTopic+self.floorId, error => {
            if (error) {
              console.log('疏散-MQTT断开报错=>', error)
            }
          })
          this.floorClient.unsubscribe(self.messageTopic+self.floorId, error => {
            if (error) {
              console.log('消息-MQTT断开报错=>', error)
            }
          })
          this.floorClient.unsubscribe(self.userTopic+self.floorId, error => {
            if (error) {
              console.log('实验室人数-MQTT断开报错=>', error)
            }
          })
          this.floorClient.end();
          this.$set(this,'floorClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.onFloorMQTT();
        }
      },
      //取消订阅-实验室-关闭MQTT连接
      offSubMQTT(type){
        let self = this;
        //判断是否已有连接如果有责断开
        if(this.subClient.unsubscribe){
          this.subClient.unsubscribe(self.sensorTopic+self.subId, error => {
            if (error) {
              console.log('传感器-MQTT断开报错=>', error)
            }
          })
          this.subClient.unsubscribe(self.switchTopic+self.subId, error => {
            if (error) {
              console.log('硬件-MQTT断开报错=>', error)
            }
          })
          this.subClient.end();
          this.$set(this,'subClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.onSubMQTT();
        }
      },
      //取消订阅-灭火设备-关闭MQTT连接
      offFireMQTT(type){
        let self = this;
        //判断是否已有连接如果有责断开
        if(this.fireClient.unsubscribe){
          this.fireClient.unsubscribe(self.fireTopic+self.fireCode, error => {
            if (error) {
              console.log('火灾传感器状态-MQTT断开报错=>', error)
            }
          })
          this.fireClient.unsubscribe(self.fireOnlineTopic+self.fireCode, error => {
            if (error) {
              console.log('火灾设备是否在线-MQTT断开报错=>', error)
            }
          })
          this.fireClient.unsubscribe(self.firePerformTopic+self.fireCode, error => {
            if (error) {
              console.log('火灾是否正在执行灭火操作-MQTT断开报错=>', error)
            }
          })
          this.fireClient.end();
          this.$set(this,'fireClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.onFireMQTT();
        }
      },
      /*********************************** 其他-相关接口 *********************************/
      // 传感器图标匹配
      sensorIconMatching(list){
        if(!this.sensorIconData){
          this.$set(this,'sensorIconData',{
          wendu_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_wsd.png'),
          wendu_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_wsd_yc.png'),
          shidu_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_sd.png'),
          shidu_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_sd_yc.png'),
          co_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_yyht_zc.png'),
          co_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_yyht_yc.png'),
          jiawan_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_jw.png'),
          jiawan_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_jw_yc.png'),
          o2_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_yq_zc.png'),
          o2_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_yq_yc.png'),
          yanwu_zc : require('@/assets/ZDimages/bigData3_2/icon_yg_zc.png'),
          yanwu_yc : require('@/assets/ZDimages/bigData3_2/icon_yg_yc.png'),
          daqiya_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_dqy.png'),
          daqiya_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_dqy_yc.png'),
          voc_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_voc.png'),
          voc_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_voc_yc.png'),
          tvoc_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_tcoc.png'),
          tvoc_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_tcoc_yc.png'),
          so2_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_soer.png'),
          so2_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_soe_yc.png'),
          no1_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_noy.png'),
          no1_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_noy_yc.png'),
          fenchen_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_fc.png'),
          fenchen_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_fc_yc.png'),
          H2_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_he.png'),
          H2_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_he_yc.png'),
          guangqi_zc : require('@/assets/ZDimages/bigData3_2/icon_yygb_gq.png'),
          guangqi_yc : require('@/assets/ZDimages/bigData3_2/icon_yygb_gq_yc.png'),
          lvqi_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_lq.png'),
          lvqi_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_lq_yc.png'),
          jiaquan_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_jq_zc.png'),
          jiaquan_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_jq_yc.png'),
          huoyan_zc : require('@/assets/ZDimages/bigData3_2/icon_zdmh_hyjc_zc.png'),
          huoyan_yc : require('@/assets/ZDimages/bigData3_2/icon_zdmh_hyjc_yc.png'),
          hwcw_zc : require('@/assets/ZDimages/bigData3_2/icon_znjc_hwcw.png'),
          hwcw_yc : require('@/assets/ZDimages/bigData3_2/icon_znjc_hwcw_yc.png'),
          nullClass : require('@/assets/ZDimages/evacuation3_2/icon_znwl_sybz.png'),
          });
        }
        let newList = [];
        for(let i=0;i<list.length;i++){
          let obj = {
            id:list[i].id,
            funcName:list[i].funcName,
            funNum:list[i].funNum,
            formatVal:list[i].formatVal,
            type:0,
          }
          switch (list[i].funNum)
          {
            case 'wendu':
              obj.zcImg = this.sensorIconData.wendu_zc;
              obj.ycImg = this.sensorIconData.wendu_yc;
              break;
            case 'shidu':
              obj.zcImg = this.sensorIconData.shidu_zc;
              obj.ycImg = this.sensorIconData.shidu_yc;
              break;
            case 'co':
              obj.zcImg = this.sensorIconData.co_zc;
              obj.ycImg = this.sensorIconData.co_yc;
              break;
            case 'jiawan':
              obj.zcImg = this.sensorIconData.jiawan_zc;
              obj.ycImg = this.sensorIconData.jiawan_yc;
              break;
            case 'o2':
              obj.zcImg = this.sensorIconData.o2_zc;
              obj.ycImg = this.sensorIconData.o2_yc;
              break;
            case 'yanwu':
              obj.zcImg = this.sensorIconData.yanwu_zc;
              obj.ycImg = this.sensorIconData.yanwu_yc;
              break;
            case 'daqiya':
              obj.zcImg = this.sensorIconData.daqiya_zc;
              obj.ycImg = this.sensorIconData.daqiya_yc;
              break;
            case 'voc':
              obj.zcImg = this.sensorIconData.voc_zc;
              obj.ycImg = this.sensorIconData.voc_yc;
              break;
            case 'FB_VOC':
              obj.zcImg = this.sensorIconData.voc_zc;
              obj.ycImg = this.sensorIconData.voc_yc;
              break;
            case 'tvoc':
              obj.zcImg = this.sensorIconData.tvoc_zc;
              obj.ycImg = this.sensorIconData.tvoc_yc;
              break;
            case 'so2':
              obj.zcImg = this.sensorIconData.so2_zc;
              obj.ycImg = this.sensorIconData.so2_yc;
              break;
            case 'no1':
              obj.zcImg = this.sensorIconData.no1_zc;
              obj.ycImg = this.sensorIconData.no1_yc;
              break;
            case 'fenchen':
              obj.zcImg = this.sensorIconData.fenchen_zc;
              obj.ycImg = this.sensorIconData.fenchen_yc;
              break;
            case 'H2':
              obj.zcImg = this.sensorIconData.H2_zc;
              obj.ycImg = this.sensorIconData.H2_yc;
              break;
            case 'guangqi':
              obj.zcImg = this.sensorIconData.guangqi_zc;
              obj.ycImg = this.sensorIconData.guangqi_yc;
              break;
            case 'lvqi':
              obj.zcImg = this.sensorIconData.lvqi_zc;
              obj.ycImg = this.sensorIconData.lvqi_yc;
              break;
            case 'jiaquan':
              obj.zcImg = this.sensorIconData.jiaquan_zc;
              obj.ycImg = this.sensorIconData.jiaquan_yc;
              break;
            case 'huoyan':
              obj.zcImg = this.sensorIconData.huoyan_zc;
              obj.ycImg = this.sensorIconData.huoyan_yc;
              break;
            case 'hwcwy':
              obj.zcImg = this.sensorIconData.hwcw_zc;
              obj.ycImg = this.sensorIconData.hwcw_yc;
              break;
            default:
              obj.zcImg = this.sensorIconData.nullClass;
              obj.ycImg = this.sensorIconData.nullClass;
          }
          newList.push(obj)
        }
        return newList;
      },
    },
    beforeDestroy() {
      //清除定时器
      let self = this;
      self.videoOff('floor');
      self.videoOff('subject');
      // self.offAllMQTT();
      self.offFloorMQTT();
      self.offSubMQTT();
      if(self.fireListType){
        self.offFireMQTT();
      }
      console.log("beforeDestroy");
    },
  }
</script>

<style scoped lang="scss">
  .newEvacuationBigData{
    flex:1;
    position: relative;
    display: flex;
    width:1920px;
    height:1080px;
    background: url("../assets/ZDimages/bigData3_2/img_bg.png") repeat;
    background-size: 100% 100%;
    p{
      margin:0;
    }
    .evacuation-title-position-box{
      position: absolute;
      top:0;
      /*left:2%;*/
      /*width:96%;*/
      height:92px;
      left:41px;
      width: 1837px;
      background: url("../assets/ZDimages/bigData3_2/sy_db_bg.png");
      background-size: 100% 100%;
      text-align: center;
      font-size:40px;
      line-height:82px;
      color:#24d1f9;
      font-weight:900;
      letter-spacing:10px
    }
    .evacuation-out-button-position-box{
      display: flex;
      position: absolute;
      top:0;
      right:0;
      width:110px;
      cursor: pointer;
      i{
        margin:0 10px;
        line-height:40px;
        color:#24D1F9;
        font-size:18px;
      }
      p{
        line-height:40px;
        color:#24D1F9;
        font-size:14px;
      }
    }
    .big-title-box{
      width:181px;
      height:59px;
      background: url("../assets/ZDimages/bigData3_2/img_zjdp_bg.png");
      background-size: 100%;
      display: flex;
      img{
        width:18px;
        height:18px;
        margin:27px 16px 0 20px;
      }
      p{
        margin-top:16px;
        line-height:40px;
        color:#fff;
        font-size:16px;
      }
    }
    .left-max-big-box{
      width:462px;
      /*智能监测*/
      .left-big-box-one{
        margin-left:30px;
        margin-top:70px;
        height:414px;
        .max-sensor-box{
          height:318px;
          margin:17px 20px 20px 0;
          .sensor-for-max-box{
            width:348px;
            height:70px;
            margin-bottom:12px;
            display: flex;
            position: relative;
            .sensor-min-img-box{
              position: absolute;
              width:54px;
              height:54px;
              top:8px;
              left:12px;
              z-index: 5;
              animation:rotating 6s linear infinite; //旋转动画
            }
            img{
              width:24px;
              height:24px;
              margin:23px 50px 23px 27px;
              z-index: 10;
            }
            .sensor-name-p{
              width:130px;
              line-height:70px;
              font-size:18px;
            }
            .sensor-num-p{
              flex:1;
              line-height:70px;
              font-size:20px;
            }
          }
          .sensor-alarm-one{
            background: url("../assets/ZDimages/bigData3_2/img_yc_bg.png");
            background-size: 100% 100%;
            color:#E80000;
            .sensor-min-img-box{
              background: url("../assets/ZDimages/bigData3_2/icon_cgqbg_yc.png");
              background-size: 100% 100%;
            }
          }
          .sensor-alarm-two{
            color:#24D1F9;
            background: url("../assets/ZDimages/bigData3_2/img_zc_bg.png");
            background-size: 100% 100%;
            .sensor-min-img-box{
              background: url("../assets/ZDimages/bigData3_2/icon_cgqbg_zc.png");
              background-size: 100% 100%;
            }
          }
        }
      }
      .left-big-box-two{
        margin-left:30px;
        height:274px;
        /*智能控制*/
        .control-max-box{
          height:214px;
          margin-right: 20px;
          .control-for-box:nth-child(2n+1){
            margin-right:72px;
          }
          .control-for-box{
            overflow: hidden;
            height:210px;
            width:160px;
            display: inline-block;
            position: relative;
            .control-for-title-p{
              line-height:40px;
              margin-top:5px;
              text-align: center;
              font-size:18px;
              color:#24D1F9;
            }
            .control-for-img-box{
              width:104px;
              height:104px;
              position: relative;
              margin:0 28px;
              .position-img{
                position:absolute;
                width:84px;
                height:84px;
                margin:10px;
                z-index:5;
                animation:rotating 6s linear infinite; //旋转动画
              }
              .for-img{
                width:50px;
                height:50px;
                margin:27px;
                z-index:10;
              }
            }
            .position-big-img{
              width:104px;
              height:104px;
              position: absolute;
              top:45px;
              left:28px;
              animation: scaleDraw 5s ease-in-out infinite;
              -webkit-animation: scaleDraw 5s ease-in-out infinite;
            }
            .control-null-p{
              color:#999;
              width:70px;
              height:30px;
              line-height:30px;
              border:1px solid #999;
              font-size:14px;
              text-align: center;
              border-radius:15px;
              margin:12px 0 0 44px;
            }
            .control-button-p{
              color:#24D1F9;
              width:70px;
              height:30px;
              line-height:30px;
              border:1px solid #24D1F9;
              font-size:14px;
              text-align: center;
              border-radius:15px;
              margin:12px 0 0 44px;
              cursor: pointer;
            }
          }
        }
      }
      .left-big-box-three{
        margin-left:30px;
        height:322px;
        position: relative;
        #eCharts{
          height:233px;
        }
        .eCharts-null-p{
          color:#fff;
          position: absolute;
          top:170px;
          left:168px;
        }
      }
    }
    .center-max-big-box{
      flex:1;
      .left-big-box-one{
        height:137px;
        margin-top:92px;
        display: flex;
        .text-p{
          width:359px;
          margin-right:10px;
          margin-top:45px;
          height:40px;
          line-height:40px;
          flex:1;
          color:#24d1f9;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .button-p-one{
          width:172px;
          height:38px;
          line-height:38px;
          color:#24d1f9;
          text-align: center;
          background: url("../assets/ZDimages/bigData3_2/icon_sspt_ljssbk.png");
          margin-right:5px;
          margin-top:45px;
          cursor: pointer;
        }
        .button-p-two{
          width:120px;
          height:38px;
          line-height:38px;
          color:#24d1f9;
          text-align: center;
          background: url("../assets/ZDimages/bigData3_2/icon_yjzh_fh.png");
          margin-top:45px;
          cursor: pointer;
        }
      }
      .left-big-box-two{
        height:500px;
        position: relative;
        .newEvacuation-map-max-big-box{
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-user-select: none;
          img{
            -webkit-user-drag: none;
          }
          .newEvacuation-map-big-box{
            position: relative;
            border:1px dashed #24D1F9;
            .newEvacuation-map-for-box{
              position: absolute;
              display: flex;
              flex-direction: column;
              overflow: hidden;
              .newEvacuation-map-for-min-box{
                height:100%;
                position: relative;
                .map-for-name-p{
                  padding:0 10px;
                  height:20px;
                  line-height:20px;
                  font-size:14px;
                  text-align: center;
                  color:#24D1F9;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
                .map-for-num-p{
                  padding:0 10px;
                  height:20px;
                  line-height:20px;
                  font-size:14px;
                  text-align: center;
                  color:#24D1F9;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
                .user-num-box{
                  position: absolute;
                  left:0;
                  display: flex;
                  img{
                    width:20px;
                    height:15px;
                    margin:10px;
                  }
                  p{
                    line-height:35px;
                    font-size:14px;
                    color:#24D1F9;
                  }
                }
                .user-num-one{
                  top:0;
                }
                .user-num-two{
                  bottom:0;
                }
                .position-box{
                  position: absolute;
                  font-size:14px;
                  overflow: hidden;
                }
                .center-move-door-p-t {
                  background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                  background-size: 100% !important;
                  transform: rotate(180deg);
                }
                .center-move-door-p-b {
                  background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                  background-size: 100% !important;
                }
                .center-move-door-p-l {
                  background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                  background-size: 100% !important;
                  transform: rotate(90deg);
                }
                .center-move-door-p-r {
                  background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                  background-size: 100% !important;
                  transform: rotateZ(270deg);
                }
                .lightTopOn {
                  background: url("../assets/ZDimages/evacuation3_2/icon_sjt.png");
                  background-size: 100%;
                }
                .lightTopOff {
                  background: url("../assets/ZDimages/evacuation3_2/icon_shang_hs.png");
                  background-size: 100%;
                }
                .lightBottomOn {
                  background: url("../assets/ZDimages/evacuation3_2/icon_xjt.png");
                  background-size: 100%;
                }
                .lightBottomOff {
                  background: url("../assets/ZDimages/evacuation3_2/icon_xia_hs.png");
                  background-size: 100%;
                }
                .lightLeftOn {
                  background: url("../assets/ZDimages/evacuation3_2/icon_zuo.png");
                  background-size: 100%;
                }
                .lightLeftOff {
                  background: url("../assets/ZDimages/evacuation3_2/icon_zou_hs.png");
                  background-size: 100%;
                }
                .lightRightOn {
                  background: url("../assets/ZDimages/evacuation3_2/icon_yuo.png");
                  background-size: 100%;
                }
                .lightRightOff {
                  background: url("../assets/ZDimages/evacuation3_2/icon_you_hs.png");
                  background-size: 100%;
                }
              }
            }
            .for-map-box-one{
              border:1px solid #24D1F9;
            }
            .for-map-box{
              background: rgba(1,16,32,0.5);
            }
            .for-map-box-two{
              background: url("../assets/ZDimages/bigData3_2/icon_jjck.png") center center no-repeat rgba(5,45,43,0.5);
              background-size: 80px 80px;
            }
            .for-map-box-two-check{
              background: url("../assets/ZDimages/bigData3_2/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
              background-size: 80px 80px;
            }
            .room-type-one{
              //选中
              background: rgba(30,118,142,0.4);
            }
            .room-type-two{
              //报警
              background: rgba(232,0,0,0.4);
              box-shadow:0 0 10px 1px #E80000 inset;
            }
            .room-type-three{
              //选中报警
              background: rgba(30,118,142,0.4);
              box-shadow:0 0 10px 1px #E80000 inset;
            }
            .room-type-noe{
              /*border:1px solid #666;*/
              /*background: rgba(102,102,102,0.6);*/
              /*color:#666!important;*/
              p{
                /*color:#666!important;*/
              }
            }
            .plan-map-for-box{
              font-weight:500;
              position:absolute;
              z-index:100;
              background: url("../assets/ZDimages/bigData3_2/img_zhpt_bg.png");
              .plan-top-button-box{
                display: flex;
                p:nth-child(1){
                  flex:1;
                }
                p:nth-child(2){
                  font-size:14px;
                  color:#fff;
                  cursor: pointer;
                  margin:9px 12px 0 0 ;
                }
              }
              .plan-time-box{
                display: flex;
                img{
                  width:24px;
                  height:24px;
                  margin-left:19px;
                  margin-right:8px;
                }
                p{
                  line-height:24px;
                  color:#fff;
                  font-size:14px;
                }
              }
              .plan-text-box{
                display: flex;
                color:#fff;
                margin-top:10px;
                overflow: hidden;
                .plan-title-p{
                  width:60px;
                  height:20px;
                  line-height:20px;
                  font-size:14px;
                  text-align: center;
                  margin:0 10px 0 18px;
                  border-radius:15px;
                }
                .plan-text-p{
                  width:170px;
                  height:20px;
                  line-height:20px;
                  font-size:14px;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
                .color-type-1{
                  background: #0183FA;
                }
                .color-type-2{
                  background: #FF9900;
                }
                .color-type-3{
                  background: #FF4800;
                }
                .color-type-4{
                  background: #FF0000;
                }
              }
              .plan-text-box-two{
                display: flex;
                color:#fff;
                margin-top:22px;
                overflow: hidden;
                .plan-title-p{
                  width:60px;
                  height:20px;
                  line-height:20px;
                  font-size:14px;
                  text-align: center;
                  margin:0 10px 0 18px;
                  border-radius:15px;
                }
                .plan-text-p{
                  width:170px;
                  height:20px;
                  line-height:20px;
                  font-size:14px;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
                .color-type-1{
                  background: #0183FA;
                }
                .color-type-2{
                  background: #FF9900;
                }
                .color-type-3{
                  background: #FF4800;
                }
                .color-type-4{
                  background: #FF0000;
                }
              }
              .plan-button-p{
                margin:5px auto 0;
                width:80px;
                line-height:22px;
                background: #00a0e9;
                color:#fff;
                text-align: center;
                border-radius:10px;
                cursor: pointer;
              }
            }
            .check-plan-map-for-box{
              z-index:1000!important;
            }
          }
        }
        .null-mapList{
          text-align: center;
          font-size:16px;
          color:#fff;
          line-height:300px;
        }
      }
      .left-big-box-three{
        height:284px;
        margin-top:47px;
        .big-title-box{
          margin-left:21px;
        }
        .horn-max-big-box-one{
          display: flex;
          margin-top:20px;
          .horn-max-big-box-one-left{
            flex:1;
            //广播
            .radio-button-box{
              margin:10px 40px 10px 12px;
              height:60px;
              .horn-for-p{
                width:128px;
                line-height:28px;
                font-size:14px;
                text-align: center;
                color:#fff;
                border: 1px solid #1E768E;
                border-radius: 5px;
                display: inline-block;
                margin:0 0 10px 10px;
                cursor: pointer;
              }
              .horn-for-p:hover{
                color:#24d1f9;
              }
              .check-p{
                color:#24d1f9;
              }
            }
            .radio-text-box{
              height:90px;
              margin:0 40px 0 22px;
              div{
                margin-bottom:10px;
                p:nth-child(1){
                  color:#24D1F9;
                  font-size: 16px;
                  line-height:18px;
                  margin-bottom:10px;
                  span{
                    margin-right:20px;
                  }
                }
                p:nth-child(2){
                  font-size:14px;
                  line-height:16px;
                  color:#fff;
                }
              }
            }
            .radio-input-box{
              margin:10px 40px 10px 22px;
              .radio-input-button{
                cursor: pointer;
              }
            }
          }
          .horn-max-big-box-one-right{
            width:473px;
            //火焰
            .fire-max-box{
              display: flex;
              margin-left:16px;
              .fire-min-box{
                width:147px;
                height:165px;
                position: relative;
                .fire-title-color-one{
                  color:#24d1f9;
                }
                .fire-title-color-two{
                  color:#FF2333;
                }
                .fire-title-p{
                  font-size:16px;
                  margin-top:28px;
                  text-align: center;
                }
                .center-img{
                  width:40px;
                  height:40px;
                  position: absolute;
                  top:60px;
                  left:54px;
                }
                .background-img{
                  position: absolute;
                  top:28px;
                  left:0;
                  width:147px;
                  height:113px;
                }
                .fire-name-p{
                  text-align: center;
                  margin-top:94px;
                  line-height:24px;
                  font-size:16px;
                  color:#fff;
                }
                .img-p{
                  z-index:10;
                }
                .img-p-1-one{
                  width:109px;
                  height:59px;
                  position: absolute;
                  top: 35px;
                  left:19px;
                  background: url("../assets/ZDimages/bigData3_2/img_yh_db_zdmh.png");
                  -webkit-animation-name: ringMove;
                  -webkit-animation-duration: 2s;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-delay: 0s;
                }
                .img-p-2-one{
                  width:117px;
                  height:59px;
                  position: absolute;
                  top: 25px;
                  left:15px;
                  background: url("../assets/ZDimages/bigData3_2/img_yh_zj_zdmh.png");
                  -webkit-animation-name: ringMove;
                  -webkit-animation-duration: 2s;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-delay: 0.2s;
                }
                .img-p-3-one{
                  width:133px;
                  height:65px;
                  position: absolute;
                  top: 8px;
                  left:7px;
                  background: url("../assets/ZDimages/bigData3_2/img_yh_dd_zdmh.png");
                  -webkit-animation-name: ringMove;
                  -webkit-animation-duration: 2s;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-delay: 0.4s;
                }
                .img-p-1-two{
                  width:109px;
                  height:59px;
                  position: absolute;
                  top: 35px;
                  left:19px;
                  background: url("../assets/ZDimages/bigData3_2/img_yh_db_zdmh_yc.png");
                  -webkit-animation-name: ringMove;
                  -webkit-animation-duration: 2s;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-delay: 0s;
                }
                .img-p-2-two{
                  width:117px;
                  height:59px;
                  position: absolute;
                  top: 25px;
                  left:15px;
                  background: url("../assets/ZDimages/bigData3_2/img_yh_zj_zdmh_yc.png");
                  -webkit-animation-name: ringMove;
                  -webkit-animation-duration: 2s;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-delay: 0.2s;
                }
                .img-p-3-two{
                  width:133px;
                  height:65px;
                  position: absolute;
                  top: 8px;
                  left:7px;
                  background: url("../assets/ZDimages/bigData3_2/img_yh_dd_zdmh_yc.png");
                  -webkit-animation-name: ringMove;
                  -webkit-animation-duration: 2s;
                  -webkit-animation-iteration-count: infinite;
                  -webkit-animation-delay: 0.4s;
                }
              }
            }
            .fire-button{
              width:200px;
              line-height:40px;
              font-size:16px;
              border:1px solid #FF2333;
              color:#FF2333;
              text-align: center;
              border-radius:6px;
              margin:15px auto;
              cursor: pointer;
            }
            .fire-button:hover{
              border:1px solid #FF2333;
              background:#FF2333;
              color:#fff;
            }
            .fire-text{
              color:#FF2333;
              font-size:14px;
              text-align: center;
              margin-top:25px;
            }
            .fire-text-one{
              color:#FF2333;
              font-size:14px;
              text-align: center;
              margin-top:20px;
              line-height:20px;
            }
            .fire-text-two{
              color:#FF2333;
              font-size:14px;
              text-align: center;
              line-height:20px;
            }
            .null-fire-box{
              img{
                width:60px;
                height:47px;
                margin:88px 0 20px 204px;
              }
              p{
                color:#fff;
                font-size:16px;
                text-align: center;
              }
            }
          }
        }
        .horn-max-big-box-two{
          margin-top:20px;
          .horn-big-box-two{
            display: flex;
            margin-top:20px;
            .horn-max-big-box-two-left{
              height: 195px;
              width:470px;
              margin-right:20px;
              .horn-for-p{
                width:128px;
                line-height:28px;
                font-size:14px;
                text-align: center;
                color:#fff;
                border: 1px solid #1E768E;
                border-radius: 5px;
                display: inline-block;
                margin:0 0 20px 20px;
                cursor: pointer;
              }
              .horn-for-p:hover{
                color:#24d1f9;
              }
              .check-p{
                color:#24d1f9;
              }
            }
            .horn-max-big-box-two-right{
              flex:1;
              .radio-text-box{
                height:150px;
                margin:0 0 0 22px;
                div{
                  margin-bottom:10px;
                  p:nth-child(1){
                    color:#24D1F9;
                    font-size: 16px;
                    line-height:18px;
                    margin-bottom:10px;
                    span{
                      margin-right:20px;
                    }
                  }
                  p:nth-child(2){
                    font-size:14px;
                    line-height:16px;
                    color:#fff;
                  }
                }
              }
              .radio-input-box{
                margin:10px 0 10px 22px;
                .radio-input-button{
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
    .right-max-big-box{
      width:462px;
      .left-big-box-one{
        margin-top:70px;
        height:365px;
        .big-title-box{
          margin-left:65px;
        }
        .user-max-box{
          height:340px;
          margin-left:65px;
          margin-top:27px;
          .user-box{
            width:175px;
            line-height:48px;
            border-radius:5px;
            border: 1px solid #24D1F9;
            display: inline-block;
            margin:0 20px 18px 0;
            div{
              display: flex;
              img{
                margin:7px 16px;
                height:36px;
                width:36px;
                border: 1px solid #24D1F9;
                border-radius:50%;
                padding:2px;
                overflow: hidden;
                box-shadow:0 0 5px 1px #24D1F9
              }
              p{
                color:#24D1F9;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                margin-right:10px;
              }
            }
          }
        }
      }
      .left-big-box-two{
        height:550px;
        margin:70px 20px 0 65px;
        .video-max-big-for-box{
          .video-max-big-title-box{
            border-bottom: 1px dashed #24d1f9;
            display: flex;
            color:#24d1f9;
            margin-bottom:14px;
            p{
              line-height:55px;
              margin-left:8px;
              font-size:16px;
              flex:1;
            }
            i{
              font-size:16px;
              line-height:55px;
              margin-right:32px;
              cursor: pointer;
            }
          }
          .video-mx-big-box{
            width:368px;
            height:210px;
            margin-top:14px;
          }
        }
      }
    }
    .shade-max-big-box{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      background: rgba(0,0,0,0.5);
      .shade-big-box{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-250px;
        margin-top:-125px;
        width:500px;
        height:250px;
        background: #011020;
        border:1px solid #116e8e;
        border-radius:10px;
        .off-button{
          position: absolute;
          right:15px;
          top:15px;
          color:#fff;
          font-size:16px;
          cursor: pointer;
        }
        .text-box{
          height:160px;
          color:#fff;
          overflow: hidden;
          p{
            padding:0 45px;
            font-size:16px;
            height:20px;
            line-height:20px;
          }
          p:nth-child(1){
            margin-top:55px;
          }
          p:nth-child(2){
            margin-top:20px;
          }
        }
        .button-box{
          height:88px;
          border-top:2px solid #116e8e;
          display: flex;
          .button-null{
            flex:1;
          }
          .button-p{
            width:80px;
            height:30px;
            line-height:30px;
            margin-top:29px;
            text-align: center;
            border:1px solid #24D1F9;
            color:#fff;
            font-size:16px;
            border-radius:4px;
            cursor: pointer;
          }
          .button-p:hover{
            border:1px solid #24D1F9;
            background: #24D1F9;
            color:#fff;
          }
        }
      }
    }
    .evacuation-shade-max-big-box{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      background: rgba(0,0,0,0.5);
      .evacuation-shade-big-box{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-550px;
        margin-top:-335px;
        width:1100px;
        height:670px;
        background: #011020;
        border:1px solid #116e8e;
        border-radius:10px;
        .position-title-p{
          position: absolute;
          top:31px;
          left:28px;
          font-size:16px;
          color:#fff;
          line-height:18px;
        }
        .position-off-button-p{
          position: absolute;
          top:32px;
          right:28px;
          font-size:16px;
          width:14px;
          height:14px;
          color:#24D1F9;
          cursor: pointer;
        }
        .evacuation-shade-map-max-big-box{
          width:1000px;
          height:500px;
          margin:77px 50px 20px;
          position: relative;
          /*border:1px solid #1E768E;*/
          .evacuation-shade-map-big-box{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-user-select: none;
            .evacuation-shade-map-box{
              position: relative;
              border:1px dashed #24D1F9;
              overflow: hidden;
              .evacuation-shade-map-for-box{
                position: absolute;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .evacuation-shade-map-min-box{
                  height:100%;
                  position: relative;
                  .map-for-name-p{
                    padding:0 10px;
                    height:20px;
                    line-height:20px;
                    font-size:14px;
                    text-align: center;
                    color:#24D1F9;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  .map-for-num-p{
                    padding:0 10px;
                    height:20px;
                    line-height:20px;
                    font-size:14px;
                    text-align: center;
                    color:#24D1F9;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  .user-num-box{
                    position: absolute;
                    left:0;
                    display: flex;
                    img{
                      width:20px;
                      height:15px;
                      margin:10px;
                    }
                    p{
                      line-height:35px;
                      font-size:14px;
                      color:#24D1F9;
                    }
                  }
                  .user-num-one{
                    top:0;
                  }
                  .user-num-two{
                    bottom:0;
                  }
                  .position-box{
                    position: absolute;
                    font-size:14px;
                    overflow: hidden;
                  }
                  .center-move-door-p-t {
                    background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b {
                    background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l {
                    background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r {
                    background: url("../assets/ZDimages/bigData3_2/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .lightTopOn {
                    background: url("../assets/ZDimages/evacuation3_2/icon_sjt.png");
                    background-size: 100%;
                  }
                  .lightTopOff {
                    background: url("../assets/ZDimages/evacuation3_2/icon_shang_hs.png");
                    background-size: 100%;
                  }
                  .lightBottomOn {
                    background: url("../assets/ZDimages/evacuation3_2/icon_xjt.png");
                    background-size: 100%;
                  }
                  .lightBottomOff {
                    background: url("../assets/ZDimages/evacuation3_2/icon_xia_hs.png");
                    background-size: 100%;
                  }
                  .lightLeftOn {
                    background: url("../assets/ZDimages/evacuation3_2/icon_zuo.png");
                    background-size: 100%;
                  }
                  .lightLeftOff {
                    background: url("../assets/ZDimages/evacuation3_2/icon_zou_hs.png");
                    background-size: 100%;
                  }
                  .lightRightOn {
                    background: url("../assets/ZDimages/evacuation3_2/icon_yuo.png");
                    background-size: 100%;
                  }
                  .lightRightOff {
                    background: url("../assets/ZDimages/evacuation3_2/icon_you_hs.png");
                    background-size: 100%;
                  }
                }
              }
              .for-map-box-one{
                background: rgba(7,36,54,1);
                border:1px solid #24D1F9;
              }
              .for-map-box{
                /*background: rgba(1,16,32,1);*/
                background: rgba(6,30,48,1);
              }
              .for-map-box-two{
                background: url("../assets/ZDimages/bigData3_2/icon_jjck.png") center center no-repeat rgba(5,45,43,1);
                background-size: 80px 80px;
              }
              .for-map-box-two-check{
                background: url("../assets/ZDimages/bigData3_2/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
                background-size: 80px 80px;
              }
              .room-type-one{
                //选中
                background: rgba(30,118,142,0.4);
              }
              .room-type-two{
                //报警
                background: rgba(232,0,0,0.4);
                box-shadow:0 0 10px 1px #E80000 inset;
              }
              .room-type-three{
                //选中报警
                background: rgba(30,118,142,0.4);
                box-shadow:0 0 10px 1px #E80000 inset;
              }
              .room-type-noe{
                /*border:1px solid #666;*/
                /*background: rgba(102,102,102,0.6);*/
              }
            }
          }
        }
        .evacuation-button-p{
          width:500px;
          line-height:50px;
          border:1px solid #1E768E;
          box-shadow:0 0 10px 1px #1E768E inset;
          color:#24D1F9;
          border-radius:6px;
          text-align: center;
          margin:0 300px;
          cursor: pointer;
        }
      }
    }
    .fire-shade-max-big-box{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      background: rgba(0,0,0,0.8);
      .fire-shade-big-box{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-175px;
        margin-top:-105px;
        width:350px;
        height:210px;
        border-radius:10px;
        img{
          width:106px;
          height:81px;
          margin:0 122px 25px;
        }
        p:nth-child(2){
          font-size:22px;
          line-height:30px;
          text-align: center;
          color:#fff;
          margin-bottom:26px;
          span{
            font-size:28px;
            color:#D60000;
            font-weight:400;
          }
        }
        p:nth-child(3){
          font-size:14px;
          box-shadow:0 0 10px 1px rgba(214,0,0,0.8) inset;
          border: 1px solid #D60000;
          color:#DE1F1F;
          line-height:50px;
          width:350px;
          text-align: center;
          cursor: pointer;
          border-radius:10px;
        }
      }
    }
    /******************** css动画 ***********************/
    //旋转
    @keyframes rotating{
      0% {
        transform: rotate(0deg);
        /*transform: rotatex(0deg) rotateY(0deg) rotateZ(0deg);*/
      }
      100% {
        transform: rotate(360deg);
        /*transform: rotatex(360deg) rotateY(360deg) rotateZ(360deg);*/
      }
      /*100%{transform:rotate(360deg);}*/
    }
    //心跳
    @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
      0%{
        transform: scale(1);  /*开始为原始大小*/
      }
      25%{
        transform: scale(0.9); /*放大1.1倍*/
      }
      50%{
        transform: scale(1);
      }
      75%{
        transform: scale(0.9);
      }
    }
    //上浮
    @-webkit-keyframes ringMove {
      0% {
        -webkit-transform: translateY(0px);
        /*transform:scale(0.5px;*/
        /*opacity:1;*/
      }
      50% {
        -webkit-transform: translateY(20px);
        /*transform:scale(0.5px;*/
        /*opacity:0;*/
      }
      100% {
        -webkit-transform: translateY(0);
        /*transform:scale(0.6px;/*/
        /*opacity:0;*/
      }
    }
  }
</style>
<style lang="scss">
  .newEvacuationBigData{
    .building-select-box{
      margin-top:45px;
      width:200px;
      margin-right:10px;
      .el-input__inner{
        background:rgba(0,0,0,0);
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
        color:#fff;
      }
      .el-input__inner:hover{
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
      }
    }
    .floor-select-box{
      margin-top:45px;
      width:100px;
      margin-right:20px;
      .el-input__inner{
        background:rgba(0,0,0,0);
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
        color:#fff;
      }
      .el-input__inner:hover{
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
      }
    }
    .el-select-dropdown{
      background:#01294d;
      border:1px solid #24D1F9;
      .el-select-dropdown__item{
        background: rgba(0,0,0,0);
        color:#fff;
      }
      .el-select-dropdown__item:hover{
        background: #24D1F9;
      }
    }
    .popper__arrow{
      top:-7px;
      border-bottom-color:#24D1F9!important;
    }
    ::after{
      border-bottom-color:#24D1F9!important;
    }
    ::placeholder{
      color: #fff;
    }
    .scrollbar-box::-webkit-scrollbar{
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    .scrollbar-box::-webkit-scrollbar-thumb{
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #116e8e;
      background: #116e8e;
    }
    .scrollbar-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);
    }
    //switch开关
    .control-for-box{
      .switch .el-switch__label {
        position: absolute;
        display: none;
      }
      .switch .el-switch__label--right {
        z-index: 1;
      }
      .switch .el-switch__label--right span{
        margin-right: 9px;
      }
      .switch .el-switch__label--left {
        z-index: 1;
      }
      .switch .el-switch__label--left span{
        margin-left: 9px;
      }
      .switch .el-switch__label.is-active {
        display: block;
      }
      .switch.el-switch .el-switch__core,
      .el-switch .el-switch__label {
        width: 72px !important;
        height:32px!important;
        line-height:32px!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 span{
        margin-left:36px!important;
        color: #24d1f9;
      }
      .switch .el-switch__label--right span{
        margin-left:8px!important;
        color:#0c516b;
      }
      .el-switch__core:after{
        height:24px!important;
        width:24px!important;
        top:3px!important;
        margin-left: 2px!important;
        background-color: #24d1f9;
      }
      .el-switch__core{
        border-color: #24d1f9;
        background-color: rgba(0,0,0,0);
      }
      .el-switch.is-checked .el-switch__core{
        border-color: #0c516b;
        background-color: rgba(0,0,0,0);
      }
      .el-switch.is-checked .el-switch__core::after{
        background-color: #0c516b;
        margin-left: -27px!important;
      }
      .el-switch{
        margin:12px 0 0 42px;
        display: block;
        width:80px!important;
        height:4px!important;
      }
    }
    //input 样式
    .radio-input-box{
      .el-input__inner{
        background:rgba(0,0,0,0);
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
        color:#fff;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
        border-bottom-right-radius: 0!important;
        border-top-right-radius: 0!important;
      }
      .el-input-group__append{
        background:rgba(0,0,0,0);
        border:1px solid #24D1F9;
        box-shadow:0 0 5px 1px #24D1F9 inset;
        color:#fff;
        border-bottom-left-radius: 0!important;
        border-top-left-radius: 0!important;
      }
    }
  }
</style>