<!-- 应急疏散二级 -->
<template>
  <div class="performEvacuationData">
    <div class="top-title-box">
      <div class="top-title-img-box">应 急 处 置</div>
      <div class="top-title-button-box" @click="goRoute">
        <i class="el-icon-switch-button"></i>
        <p>{{routeType?'退出全屏':'全屏'}}</p>
      </div>
    </div>
    <div class="content-box">
      <div class="content-left-max-big-box">
        <div class="content-controls-box">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/emergencyManagement/icon_znkz_tb.png">
            <p>智能控制</p>
          </div>
          <div class="content-controls-for-box scrollbar-box" :class="!controlsList[0]?'content-null-box':''">
            <!--非空调-->
            <div class="controls-for-box" v-for="(item,index) in controlsList" :key="index" v-if="item.hardwareTypeKey != 'airConditioner'">
              <div class="for-title-box">
                <div class="for-title-img-box">
                  <svg-icon v-if="item.exceptionIcon" class="svg-img" :icon-class="item.exceptionIcon"/>
                </div>
                <p class="for-title-name-box">{{item.hardwareName}}</p>
                <div class="for-title-button-box">
                  <el-switch
                    class="switch"
                    @click.native="changeIsNeedCaptcha(item)"
                    v-model="item.operatingState"
                    :active-value="false"
                    :inactive-value="true"
                    active-text="关闭"
                    inactive-text="开启"
                    disabled>
                  </el-switch>
                </div>
              </div>
            </div>
            <!--空调-->
            <div class="controls-for-box-one" v-for="(item,index) in controlsList" :key="index" v-if="item.hardwareTypeKey == 'airConditioner'">
              <div class="for-title-box">
                <div class="for-title-img-box">
                  <svg-icon v-if="item.exceptionIcon" class="svg-img" :icon-class="item.exceptionIcon"/>
                </div>
                <p class="for-title-name-box">{{item.hardwareName}}</p>
                <div class="for-title-button-box" @click="dialogOpen(item)">操作</div>
              </div>
              <!--空调-->
              <div class="for-button-box">
                <p :class="item.switchType==1?'colorOpen':'colorOff'">{{item.switchType == 1?'开启':(item.switchType == 0?'关闭':'')}}</p>
                <p :class="item.switchType==1?'colorOpen':'colorOff'" v-for="(minItem,minIndex) in infraredControllerData.functionList"
                   :key="minItem.value" v-if="minItem.value == item.functionType">{{minItem.label}}</p>
                <p :class="item.switchType==1?'colorOpen':'colorOff'" v-for="(minItem,minIndex) in infraredControllerData.refrigerationList"
                   :key="minItem.value" v-if="item.functionType == 1&&minItem.value == item.orderType">{{minItem.label}}</p>
                <p :class="item.switchType==1?'colorOpen':'colorOff'" v-for="(minItem,minIndex) in infraredControllerData.heatingList"
                   :key="minItem.value" v-if="item.functionType == 2&&minItem.value == item.orderType">{{minItem.label}}</p>
              </div>
            </div>
            <div class="null-box" v-if="!controlsList[0]">
              <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_znjcsj.png">
              <p class="null-p">暂无数据</p>
            </div>
          </div>
        </div>
        <div class="content-monitor-box">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/emergencyManagement/icon_znjc_tb.png">
            <p>智能监测</p>
          </div>
          <div class="content-monitor-for-box scrollbar-box" :class="!monitorList[0]?'content-null-box':''">
            <div class="monitor-for-box" v-for="(item,index) in monitorList" :key="index">
              <div class="monitor-for-min-box" :class="item.type?'monitor-for-min-box-yc':'monitor-for-min-box-zc'">
                <div class="for-img-box">
                  <svg-icon v-if="item.icon" class="svg-img" :icon-class="item.icon"/>
                </div>
                <div class="for-text-box">
                  <p>{{item.deviceValue?item.deviceValue:'-'}}{{item.unit}}</p>
                  <p>{{item.deviceName}}</p>
                </div>
              </div>
            </div>
            <div class="null-box" v-if="!monitorList[0]">
              <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_znjcsj.png">
              <p class="null-p">暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <div class="content-center-max-big-box">
        <div class="content-button-box">
          <div class="content-button-min-box">
            <!--楼栋选择-->
            <el-select v-model="buildId" placeholder="请选择"
                       :popper-append-to-body="false"
                       @change="buildingChange"
                       style="width:200px;"
                       class="content-building-box">
              <el-option
                v-for="item in buildOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <div style="display: flex" v-if="item.planType">
                  <img src="@/assets/ZDimages/emergencyManagement/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>
            <!--楼层选择-->
            <el-select v-model="floorId" placeholder="请选择"
                       :popper-append-to-body="false"
                       @change="floorChange"
                       style="width:150px;"
                       class="content-floorId-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/emergencyManagement/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>
            <!--实验室信息-->
            <p class="content-sub-info-box">{{subName}}-{{roomNum}}</p>
            <p class="content-evacuate-button" @click="evacuationButton">{{evacuationType?'结束疏散':'立即疏散'}}</p>
            <p class="content-out-button" @click="backButton">返回</p>
          </div>
        </div>
        <div class="content-map-select-box">
          <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;'+(item.levelColor?'background-color:'+item.levelColor+';':'')">
                <div class="newEvacuation-map-for-min-box">
                  <!--名称/实验室名称-->
                  <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:(item.subName?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?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.onLineNum!=null" class="user-num-box" :class="item.doorList[0].toward == 'top'?'user-num-two':'user-num-one'">
                    <img src="@/assets/ZDimages/emergencyManagement/icon_pmt_ry.png">
                    <p>{{item.onLineNum}} 人</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 class="position-box" @click="shadeButton(2,minItem)"
                       :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;'"></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/emergencyManagement/icon_dp_bjsj.png">
                  <p>{{item.riskPlanTriggerTime}}</p>
                </div>
                <div class="plan-text-box">
                  <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" @click="shadeButton(7,item.groupId)">结束预案</p>
              </div>
            </div>
          </div>
          <p class="null-mapList" v-if="!mapList[0]">暂无数据</p>
        </div>
        <div class="content-loudspeaker-danger-box">
          <div class="content-loudspeaker-box">
            <div class="big-title-box">
              <img src="@/assets/ZDimages/emergencyManagement/icon_yygb_tb.png">
              <p>语音广播</p>
            </div>
            <div class="content-loudspeaker-for-box scrollbar-box" :class="!loudspeakerList[0]?'content-null-box':''">
              <div class="loudspeaker-for-box" v-if="loudspeakerList[0]">
                <div class="loudspeaker-for-button-box scrollbar-box">
                  <p class="for-button-box" @click="clickLoudspeaker(item)"
                     :class="checkLoudspeaker == item.deviceNo?'for-button-box-check':''"
                     v-for="(item,index) in loudspeakerList" :key="index">
                    {{item.deviceName}}
                  </p>
                </div>
                <div class="loudspeaker-for-text-box scrollbar-box">
                  <div class="for-text-box" v-for="(item,index) in loudspeakerTextList" :key="index">
                    <p>{{item.name}} {{item.time}}</p>
                    <p>{{item.value}}</p>
                  </div>
                </div>
                <div class="loudspeaker-for-input-box">
                  <el-input placeholder="请输入内容" v-model="loudspeakerInput" class="input-with-select">
                    <p slot="append" @click="iotBigViewSpeakerPlayText">发送</p>
                  </el-input>
                </div>
              </div>
              <div class="null-box" v-if="!loudspeakerList[0]">
                <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_znjcsj.png">
                <p class="null-p">暂无数据</p>
              </div>
            </div>
          </div>
          <div class="content-danger-box">
            <div class="big-title-box">
              <img src="@/assets/ZDimages/emergencyManagement/icon_yygb_wxy.png">
              <p>危险源</p>
            </div>
            <div class="content-danger-for-box scrollbar-box" :class="!dangerList.nameList[0]?'content-null-box':''">
              <div class="danger-for-box" id="eCharts" v-show="dangerList.nameList[0]"></div>
              <div class="null-box" v-if="!dangerList.nameList[0]">
                <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwzzsj.png">
                <p class="null-p">暂无数据</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right-max-big-box">
        <div class="content-user-box">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/emergencyManagement/icon_sysnry_tb.png">
            <p>实验室内人员</p>
          </div>
          <div class="content-user-for-box scrollbar-box" :class="!userList[0]?'content-null-box':''">
            <div class="user-for-box" v-for="(item,index) in userList" :key="index">
              <div class="user-for-min-box">
                <img v-if="item.avatar" src="">
                <img v-else src="@/assets/ZDimages/basicsModules/tx_cion.png">
                <p>{{item.userName}}</p>
              </div>
            </div>
            <div class="null-box" v-if="!userList[0]">
              <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_znjcsj.png">
              <p class="null-p">暂无数据</p>
            </div>
          </div>
        </div>
        <div class="content-video-box">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/emergencyManagement/icon_sysnry_jk.png">
            <p>视频监控</p>
          </div>
          <div class="content-video-for-box" :class="!videoList[0]?'content-null-box':''">
            <div class="video-for-box" v-if="videoType">
              <H5PlayerVideo style="margin:10px 0 0;"
                v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
            </div>
            <div class="pagination-box">
              <p class="flex-null-p"></p>
              <pagination
                v-show="videoTotal > 2"
                :total="videoTotal"
                layout="total, prev, pager, next"
                :page.sync="videoQueryParams.page"
                :limit.sync="videoQueryParams.pageSize"
                @pagination="videoInitialize"
              />
              <p class="flex-null-p"></p>
            </div>
            <div class="null-box" v-if="!videoList[0]">
              <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwsj.png">
              <p class="null-p">暂无数据</p>
            </div>
          </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>{{shadeType==5?'关闭报警后，3分钟内系统不再触发预案报警，请核实确认后再执行此操作.':''}}</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>
    <!--红外控制器-->
    <el-dialog class="performEvacuationData-dialog" :title='infraredControllerTitle' width="460px" append-to-body
               :visible.sync="infraredControllerType" v-if="infraredControllerType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="infraredController-max-big-box">
        <div class="infraredController-switchType-box">
          <p class="switchType-name-p">{{infraredControllerForm.name}}</p>
          <p class="switchType-type-p"
             @click="switchTypeButton"
             :class="infraredControllerForm.switchType == 1 ? '': 'switchType-type-off-p'">{{infraredControllerForm.switchType == 1 ? '开启':'关闭'}}</p>
        </div>
        <div style="overflow: hidden;height:130px;">
          <div class="infraredController-functionType-box" v-if="infraredControllerForm.switchType == 1">
            <p :class="infraredControllerForm.functionType == item.value?'check-button':''"
               @click="functionButton(item.value)"
               v-for="(item,index) in infraredControllerData.functionList"
               :key="index">{{item.label}}</p>
          </div>
          <div class="infraredController-orderType-box" v-if="infraredControllerForm.switchType == 1 && (infraredControllerForm.functionType == 1 || infraredControllerForm.functionType == 2)">
            <p class="order-minus" @click="minusTextButton()">-</p>
            <p class="order-text" v-for="(item,index) in infraredControllerData.refrigerationList" :key="index" v-if="infraredControllerForm.functionType==1&&infraredControllerForm.orderType == item.value">{{item.label}}</p>
            <p class="order-text" v-for="(item,index) in infraredControllerData.heatingList" :key="index" v-if="infraredControllerForm.functionType==2&&infraredControllerForm.orderType == item.value">{{item.label}}</p>
            <p class="order-add" @click="addTextButton()">+</p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import { controlsRestrictVerify} from '@/utils/index'
  import { laboratoryBigViewGetBuildByBigView, laboratoryBigViewGetFloorByBigView,
    laboratoryExitLineGetRedisEvacuation,laboratoryExitLineExecuteEvacuation,
    laboratoryExitLineEndEvacuation,laboratoryBigViewOnLineUserList,
    iotBigViewHardwareFindByType,iotBigViewSpeakerPlayText,
    iotBigViewDeviceFindBySubId,iotBigViewDeviceFindByType,laboratoryBigViewHazardCensus,
    iotBigViewHardwareOperatingHardware,laboratoryExitRelayOpenLight,
    laboratoryExitRelayCloseLight,laboratoryPlanCloseRiskPlan } from "@/api/emergencyManagement/index";
  import { laboratoryBigViewSelectTriggerInfo } from "@/api/commonality/permission";
  import { iotHardwareOperatingHardware } from '@/api/commonality/permission'
  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  export default {
    name: 'performEvacuationData',
    components: {
      H5PlayerVideo,
    },
    props:{
      propsBigData:{},
    },
    data () {
      return {
        //当前路由状态
        routeType:false,
        // 当前选中数据
        subName:'',
        roomNum:'',
        buildId:'',
        floorId:'',
        //实验室选中/报警数据
        checkSubId:null,
        //选中的喇叭ID
        checkLoudspeaker:null,
        loudspeakerInput:'',
        //广播记录
        loudspeakerTextList:[],
        //下拉列表数据
        buildOptions:[],
        floorOptions:[],
        //地图相关数据
        mapData:{},
        zoomData:null,
        mapList:[],
        mapType:false,
        planMapList:[],
        //智能控制
        controlsList:[],
        //智能监测
        monitorList:[],
        //传感器报警数据
        planSensorList:[],
        //危险源
        dangerList:{
          nameList: [],
          numList: [],
          maxNumList: [],
        },
        //语音广播
        loudspeakerList:[],
        //实验室人员数据
        userList:[],
        width:397,
        height:223,
        videoType:false,
        //视频数据
        videoQueryParams:{
          page:1,
          pageSize:2,
        },
        videoList:[],
        videoTotal:0,
        //疏散用布局数据
        shadeMapList:[],
        //当前实验室/楼栋/楼层
        subText:"",
        floorText:"",
        //优先显示的提示
        checkPlanId:null,
        //当前疏散状态
        evacuationType:false,
        //疏散弹窗状态
        evacuationShadeType:false,
        //弹窗相关
        shadeType:0,
        shadeText:'',
        shadeData:{},
        //结束预案时使用的预案ID
        checkRiskPlanId:null,
        /****************** MQTT相关 ******************/
        //硬件MQTT
        hardwareOpic:"iot/hardware/all/sub/",
        hardwareClient:{},
        //传感器
        sensorOpic:"iot/device/sensor/sub/",
        sensorClient:{},
        //疏散灯
        lightOpic:"iot/hardware/evacuationLight/floor/",
        lightClient:{},
        //疏散
        evacuateOpic:"lab/floor/exit/line",
        evacuateClient:{},
        //预案
        planOpic:'lab/risk/plan/change',
        planClient:{},
        /****************** 红外控制器相关 ******************/
        infraredControllerType:false,
        infraredControllerTitle:"",
        infraredControllerForm:{
          name:null,//设备名称
          switchType:null,//0.关 1.开
          functionType:null, //1.制冷 2.制热 3.通风
          orderType:null, //温度指令
          hardwareNo:null, //设备编号
        },
        infraredControllerData:{
          functionList:[
            {label:'制冷',value:'1'},
            {label:'制热',value:'2'},
            {label:'通风',value:'3'},
          ],
          //制冷
          refrigerationList:[
            {label:"18°C",value:18},
            {label:"19°C",value:19},
            {label:"20°C",value:20},
            {label:"21°C",value:21},
            {label:"22°C",value:22},
            {label:"23°C",value:23},
            {label:"24°C",value:24},
            {label:"25°C",value:25},
            {label:"26°C",value:26},
            {label:"27°C",value:27},
            {label:"28°C",value:28},
          ],
          //制热
          heatingList:[
            {label:"22°C",value:22},
            {label:"23°C",value:23},
            {label:"24°C",value:24},
            {label:"25°C",value:25},
            {label:"26°C",value:26},
            {label:"27°C",value:27},
            {label:"28°C",value:28},
            {label:"29°C",value:29},
            {label:"30°C",value:30},
          ],
        }
      }
    },
    created () {
      //根据判定当前全屏状态
      if(this.$route.path == '/performEvacuationBig'){
        this.$set(this,'routeType',true);
      }else{
        this.$set(this,'routeType',false);
      }
      this.$set(this,'buildId',this.propsBigData.buildId);
      this.$set(this,'floorId',this.propsBigData.floorId);
      this.getBuild();
    },
    mounted () {

    },
    methods: {
      //全屏页面跳转
      goRoute(){
        if(this.routeType){
          this.$router.push({
            path: "/emergencyManagement/performEvacuation",
            query: {
              buildId: this.buildId,
              floorId:this.floorId,
              type:2,
            }
          })
        }else{
          this.$router.push({
            path: "/performEvacuationBig",
            query: {
              buildId: this.buildId,
              floorId:this.floorId,
              type:2,
            }
          })
        }
      },
      //获取相关实验室数据
      buttonSubject(){
        //重置参数
        this.$set(this,'videoQueryParams',{
          page:1,
          pageSize:2,
        });
        this.$set(this,'controlsList',[]);
        this.$set(this,'monitorList',[]);
        this.$set(this,'dangerList',{
          nameList: [],
          numList: [],
          maxNumList: [],
        });
        this.$set(this,'loudspeakerList',[]);
        this.$set(this,'userList',[]);
        this.$set(this,'videoList',[]);
        this.$set(this,'checkLoudspeaker',null);
        this.$set(this,'loudspeakerInput','');
        this.$set(this,'loudspeakerTextList',[]);
        if(this.checkSubId){
          //查询实验室人数
          this.laboratoryBigViewOnLineUserList();
          //查询实验室相关硬件
          this.iotBigViewHardwareFindByType();
          //查询实验室相关摄像头
          this.videoInitialize();
          //查询实验室相关传感器
          this.iotBigViewDeviceFindBySubId();
          //查询实验室相关喇叭
          this.iotBigViewDeviceFindByType();
          //查询实验室危险源
          this.laboratoryBigViewHazardCensus();
        }
        //MQTT相关
        this.offHardwareMQTT('on')
        this.offSensorMQTT('on')
        this.offLightMQTT('on')
        //判断是否已有链接
        if(!this.evacuateClient.unsubscribe){
          this.offEvacuateMQTT('on');
        }
        //判断是否已有链接
        if(!this.planClient.unsubscribe){
          this.offPlanMQTT('on');
        }
      },
      //楼栋选中方法
      buildingChange(){
        //获取楼层数据
        this.getFloor(true);
      },
      //楼层选中方法
      floorChange(){
        this.laboratoryBigViewGetFloorByBigView();
      },
      //获取楼栋数据
      getBuild(){
        laboratoryBigViewGetBuildByBigView({type:2}).then(response => {
          if(response.data[0]){
            this.$set(this,'buildOptions',response.data);
            //获取楼层数据
            this.getFloor();
          }
        })
      },
      //获取楼层数据
      getFloor(type){
        laboratoryBigViewGetBuildByBigView({id:this.buildId,type:3}).then(response => {
          //重置 楼层数据
          this.$set(this,'floorOptions',response.data);
          if(type){
            this.$set(this,'floorId',response.data[0].id);
          }
          this.laboratoryBigViewGetFloorByBigView();
        })
      },
      //返回按钮
      backButton(){
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
        }
        this.$parent.goPage(1,obj);
      },
      //获取楼层布局数据
      laboratoryBigViewGetFloorByBigView(){
        let self = this;
        laboratoryBigViewGetFloorByBigView({id:this.floorId}).then(response => {
          if(response.data[0]){
            if(response.data[0].buildLayoutVoList && response.data[0].labExitLineVo){
              let list = JSON.parse(response.data[0].labExitLineVo.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'){
                  const hex2Rgba = (bgColor) => {
                    let color = bgColor.slice(1); // 去掉'#'号
                    let rgba = [
                      parseInt("0x" + color.slice(0, 2)),
                      parseInt("0x" + color.slice(2, 4)),
                      parseInt("0x" + color.slice(4, 6)),
                      0.6
                    ];
                    return "rgba(" + rgba.toString() + ")";
                  };
                  for(let o=0;o<response.data[0].buildLayoutVoList.length;o++){
                    if(list[i].key == response.data[0].buildLayoutVoList[o].pointName){
                      list[i].id = response.data[0].buildLayoutVoList[o].id;
                      list[i].buildId = response.data[0].buildLayoutVoList[o].buildId;
                      list[i].floorId = response.data[0].buildLayoutVoList[o].floorId;
                      list[i].roomType = response.data[0].buildLayoutVoList[o].roomType;
                      list[i].roomName = response.data[0].buildLayoutVoList[o].roomName;
                      list[i].roomNum = response.data[0].buildLayoutVoList[o].roomNum;
                      list[i].subName = response.data[0].buildLayoutVoList[o].subName;
                      list[i].subId = response.data[0].buildLayoutVoList[o].subId;
                      list[i].onLineNum = response.data[0].buildLayoutVoList[o].onLineNum;
                      list[i].loginAdmin = response.data[0].buildLayoutVoList[o].loginAdmin;
                      list[i].levelColor = response.data[0].buildLayoutVoList[o].levelColor?hex2Rgba(response.data[0].buildLayoutVoList[o].levelColor):'';
                      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);
              //标记第一间实验室
              let subNum = 0;
              for(let x=0;x<list.length;x++){
                if(list[x].subId != -1 &&list[x].type == 1){
                  subNum++
                  this.$set(this,'subName',list[x].subName);
                  this.$set(this,'roomNum',list[x].roomNum);
                  this.$set(this,'checkSubId',list[x].subId);
                  break
                }
              }
              if(subNum == 0){
                this.$set(this,'subName','');
                this.$set(this,'roomNum','');
                this.$set(this,'checkSubId','');
              }
              this.$set(this,'mapList',JSON.parse(JSON.stringify(list)));
              this.$set(this,'shadeMapList',JSON.parse(JSON.stringify(list)));
              this.$set(this,'mapType',true);
              //处理实验室弹窗数据
              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 = 142;
                    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 = 142;
                    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 = 142;
                    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 = 142;
                    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);
            }else{
              this.$set(this,'mapData',{});
              this.$set(this,'mapList',[]);
              this.$set(this,'mapType',false);
              this.$set(this,'planMapList',[]);
            }


            // 等待配置与字段获取到后跳转
            Promise.all([
              //获取路由判断权限
              this.laboratoryBigViewSelectTriggerInfo(),
              this.laboratoryExitLineGetRedisEvacuation(),
            ]).then((result)=>{
              setTimeout(function(){
                self.buttonSubject();
              },100);
            }).catch((error) => {})
          }
        })
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then(response => {
          //楼栋预案标记
          for(let o=0;o<self.buildOptions.length;o++){
            let num = 0;
            for(let i=0;i<response.data.length;i++){
              if(response.data[i].buildId == self.buildOptions[o].id){
                num++
              }
            }
            self.$set(self.buildOptions[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.$set(self.floorOptions[o],'planType',num != 0);
          }
          //实验室预案标记
          for(let o=0;o<self.mapList.length;o++){
            let num = 0;
            //循环地图数据找出实验室
            if(self.mapList[o].type == 1){
              let newData = {};
              //对比预案触发实验室ID与地图中实验室ID
              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.$set(self.mapList[o],'planType',true);
                for(let x=0;x<self.planMapList.length;x++){
                  if(self.planMapList[x].subId == self.mapList[o].subId){
                    self.$set(self.planMapList[x],'riskPlanTriggerTime',this.parseTime(newData.eventStartTime,"{y}-{m}-{d} {h}:{i}:{s}"));
                    self.$set(self.planMapList[x],'riskAttribute',newData.riskAttribute);
                    self.$set(self.planMapList[x],'riskPlanLevel',newData.riskPlanLevel);
                    self.$set(self.planMapList[x],'riskPlanLevelName',newData.riskPlanLevel==1?'低风险':(newData.riskPlanLevel==2?'中风险':(newData.riskPlanLevel==3?'较高风险':(newData.riskPlanLevel==4?'高风险':''))));
                    self.$set(self.planMapList[x],'name',newData.riskPlanName);
                    self.$set(self.planMapList[x],'groupId',newData.eventId);
                    self.$set(self.planMapList[x],'planType',true);
                  }
                }
                let checkNum = 0;
                for(let x=0;x<self.planMapList.length;x++){
                  if(self.planMapList[x].subId == self.mapList[o].subId){
                    this.$set(this,'subName',self.mapList[o].subName);
                    this.$set(this,'roomNum',self.mapList[o].roomNum);
                    this.$set(this,'checkSubId',self.mapList[o].subId);
                    checkNum++
                    break
                  }
                }
              }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.$set(self.planMapList[x],'planType',false);
                    self.$set(self.planMapList[x],'riskPlanTriggerTime',null);
                    self.$set(self.planMapList[x],'riskAttribute',null);
                    self.$set(self.planMapList[x],'riskPlanLevel',null);
                    self.$set(self.planMapList[x],'riskPlanLevelName',null);
                    self.$set(self.planMapList[x],'groupId',null);
                    self.$set(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.$set(self.shadeMapList[o],'planType',num != 0);
            }
          }
          //传感器
          let planSensorList = [];
          response.data.forEach((item)=>{
            let list = JSON.parse(item.triggerUploadData)
            list.forEach((minItem)=>{
              planSensorList.push(minItem.deviceNo)
            })
          })
          this.$set(this,'planSensorList',planSensorList);
          this.iotBigViewDeviceFindBySubId();
          this.$forceUpdate();
        })
      },
      //查询当前楼栋楼层下发生的疏散数据
      laboratoryExitLineGetRedisEvacuation(){
        let self = this;
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
        }
        laboratoryExitLineGetRedisEvacuation(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;
                }
              }
              if(self.mapList[o].type == 3){
                let age = 0;
                for(let i=0;i<response.data.doorPointNames.length;i++){
                  if(response.data.doorPointNames[i] == self.mapList[o].key){
                    age++
                  }
                }
                self.mapList[o].roomCheckType = age != 0;
              }
            }
          }else{
            this.$set(this,'evacuationType',false);
            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++){
                  self.mapList[o].lightList[x].openType = false;
                }
              }
              if(self.mapList[o].type == 3){
                self.mapList[o].roomCheckType = false;
              }
            }
          }
        });
      },
      //计算布局最大尺寸
      calculateMapMax(list) {
        //基础参数
        let height = 500;
        let width = 984;
        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)
      },
      /*********************************** 实验室-相关接口 *********************************/
      //查询实验室人数
      laboratoryBigViewOnLineUserList(){
        laboratoryBigViewOnLineUserList({subId:this.checkSubId}).then(response => {
          this.$set(this,'userList',response.data);
        })
      },
      //查询实验室硬件
      iotBigViewHardwareFindByType(){
        iotBigViewHardwareFindByType({subjectId:this.checkSubId}).then(response => {
          response.data.forEach((item)=>{
            item.exceptionIcon = item.exceptionIcon?localStorage.getItem('fileBrowseEnvironment')+item.exceptionIcon:null;
            if(item.hardwareTypeKey == 'airConditioner'){
              if(item.reservedThree == 0){
                item.switchType = 0;
              }else if(item.reservedThree == 2){
                item.switchType = 1;
                item.functionType = 3;
              }else if(item.reservedThree.indexOf('-') != -1){
                let list = item.reservedThree.split('-');
                item.switchType = 1;
                item.functionType = list[0]==3?1:(list[0]==4?2:'');
                item.orderType = list[1]?list[1]:'';
              }else{
                item.switchType = '';
                item.functionType = '';
                item.orderType = '';
              }
            }
          })
          this.$set(this,'controlsList',response.data);
        })
      },
      //查询实验室摄像头
      videoInitialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:this.videoQueryParams.page,
          pageSize:this.videoQueryParams.pageSize,
          buildId:'',
          floorId:'',
          passageway:this.floorId,
          subIds:[this.checkSubId],
        };
        iotCameraFindByCondition(obj).then(response => {
          let list = [];
          for(let i=0;i<response.data.records.length;i++){
            list.push(
              {
                width: this.width, //(宽度:非必传-默认600)
                height: this.height, //(高度:非必传-默认338)
                url: response.data.records[i].streamUrl,
              }
            )
          }
          this.$set(this,'videoList',list)
          this.$set(this,'videoTotal',response.data.total);
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'videoType', true);
            },1000);
          })
        });
      },
      //查询实验室传感器
      iotBigViewDeviceFindBySubId(){
        let self = this;
        iotBigViewDeviceFindBySubId({subId:this.checkSubId}).then(response => {
          response.data.forEach((item)=>{
            let num = 0;
            self.planSensorList.forEach((minItem)=>{
              if(item.deviceNo == minItem){
                num++
              }
            })
            item.type = num != 0;
            item.icon = item.icon?localStorage.getItem('fileBrowseEnvironment')+item.icon:null;
          })
          this.$set(this,'monitorList',response.data);
        })
      },
      //查询实验室喇叭
      iotBigViewDeviceFindByType(){
        let floorObj = {
          passageway:this.floorId,
          typeKeyList:['horn']
        }
        iotBigViewDeviceFindByType(floorObj).then(floorResponse => {
          let subjectObj = {
            subjectId:this.checkSubId,
            typeKeyList:['horn']
          }
          iotBigViewDeviceFindByType(subjectObj).then(subjectResponse => {
            this.$set(this,'loudspeakerList',floorResponse.data.concat(subjectResponse.data));
          })
        })
      },
      //设备switch开关提示
      changeIsNeedCaptcha(item){
        if(item.hardwareTypeKey != 'airConditioner'){
          //非空调
          this.$set(this,'shadeData',item);
          let text = item.operatingState?'关闭':'开启';
          this.shadeButton(3,`是否`+text+`此设备？`);
        }else{
          //空调
        }
      },
      //硬件开关
      iotBigViewHardwareOperatingHardware(){
        if(this.shadeData.hardwareTypeKey != 'airConditioner'){
          //非空调
          let obj = {
            hardwareNo:this.shadeData.hardwareNo,
            command :this.shadeData.operatingState?'0':'1',
          }
          iotBigViewHardwareOperatingHardware(obj).then(response => {
            this.msgSuccess(response.message);
            this.$set(this,'shadeType',0);
            this.$set(this,'shadeData',{});
            this.$set(this,'shadeText','');
          })
        }else{
          //空调
        }

      },
      //选中喇叭
      clickLoudspeaker(item){
        if(this.checkLoudspeaker != item.deviceNo){
          this.$set(this,'checkLoudspeaker',item.deviceNo);
        }else{
          this.$set(this,'checkLoudspeaker',null);
        }
      },
      //喇叭播放文字
      iotBigViewSpeakerPlayText(){
        if(!controlsRestrictVerify('performEvacuation')){
          this.msgError('没有相关操作权限,请联系管理员')
          return
        }
        if(!this.loudspeakerInput){
          this.msgError('请输入内容')
          return
        }else if(!this.checkLoudspeaker){
          this.msgError('请选择喇叭')
          return
        }
        let obj = {
          text:this.loudspeakerInput,
          deviceNo:this.checkLoudspeaker,
        }
        iotBigViewSpeakerPlayText(obj).then(response => {
          let s = new Date().getHours()
          let f = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
          this.loudspeakerTextList.push({
            name:this.$store.state.user.name,
            time:s+':'+f,
            value:this.loudspeakerInput,
          })
          this.$set(this,'loudspeakerInput','');
        })
      },
      //查询实验室危险源
      laboratoryBigViewHazardCensus(){
        laboratoryBigViewHazardCensus({subId:this.checkSubId}).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].total)
              obj.maxNumList.push(response.data[i].total+5)
            }
            this.$set(this,'dangerList',obj);
            this.eChartsFunction(this.dangerList);
          }else{
            let obj = {
              nameList: [],
              numList: [],
              maxNumList: [],
            }
            this.$set(this,'dangerList',obj);
            this.eChartsFunction(this.dangerList);
          }
        })
      },
      //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],
                //设置一行显示几个字,自己设置
                formatter: function (params) {
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 6;
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                },
                interval: 0,//使x轴上的文字显示完全,
              },

              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);
      },
      /*********************************** 点击操作事件-相关接口 *********************************/
      //选中实验室
      checkSubClick(item){
        let self = this;
        // if(item.roomType != '-99'){
        //   if(item.loginAdmin){
            if((this.checkSubId != item.subId)&&item.subId!= -1&&item.type == 1){
              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.$set(this,'subName',item.subName);
              this.$set(this,'roomNum',item.roomNum);
              setTimeout(function(){
                self.buttonSubject();
              },100);
            }
            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('操作失败，您不是该实验室的管理人员。')
          // }
        // }
      },
      //选中优先展示的预案弹窗
      checkPlanButton(id){
        this.$set(this,'checkPlanId',id);
      },
      //关闭实验室预案弹窗
      offPlanShade(index){
        this.$set(this.planMapList[index],'planType',false)
      },
      //开始/结束疏散按钮
      evacuationButton(){
        let self = this;
        if(!controlsRestrictVerify('performEvacuation')){
          this.msgError('没有相关操作权限,请联系管理员')
          return
        }
        if(this.evacuationType){
          //结束疏散
          this.$set(this,'shadeText','是否结束疏散?');
          this.$set(this,'shadeType',4);
        }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.buildId,
            floorId:this.floorId,
            subId: this.checkSubId,
            badPointNames:list,
            doorPointNames:doorPointNames,
          }
          laboratoryExitLineExecuteEvacuation(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.message);
            this.$set(this,'evacuationShadeType',false);
            this.$set(this,'evacuationType',true);
            this.$forceUpdate();
          })
        }else if(type == 2){
          this.$set(this,'evacuationShadeType',false);
        }
      },
      //遮罩层开关/弹层提示确认
      shadeButton(type,text){
        if(!controlsRestrictVerify('performEvacuation')){
          this.msgError('没有相关操作权限,请联系管理员')
          return
        }
        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.laboratoryExitRelayCloseLight();
            }else{
              //开启
              this.laboratoryExitRelayOpenLight();
            }
          }else if(this.shadeType == 3){
            //设备开关弹窗
            this.iotBigViewHardwareOperatingHardware()
          }else if(this.shadeType == 4){
            //结束疏散
            let obj = {
              buildId:this.buildId,
              floorId:this.floorId,
            }
            laboratoryExitLineEndEvacuation(obj).then(response => {
              this.$set(this,'shadeType',0);
              this.laboratoryExitLineGetRedisEvacuation();
            })
          }else if(this.shadeType == 5){
            //结束预案
            laboratoryPlanCloseRiskPlan({eventId:this.checkRiskPlanId}).then(response => {
              this.$set(this,'shadeType',0);
              this.laboratoryBigViewSelectTriggerInfo();
            });
          }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);
        }
      },
      //应急疏散时-开灯
      laboratoryExitRelayOpenLight(){
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
          pointName:this.shadeData.key
        };
        laboratoryExitRelayOpenLight(obj).then(response => {
          if(response.code==200){
            this.$set(this,'shadeType',0)
            this.msgSuccess(response.message)
          }
        });
      },
      //应急疏散时-关灯
      laboratoryExitRelayCloseLight(){
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
          pointName:this.shadeData.key
        };
        laboratoryExitRelayCloseLight(obj).then(response => {
          if(response.code==200){
            this.$set(this,'shadeType',0)
            this.msgSuccess(response.message)
          }
        });
      },
      /*********************************** MQTT相关 *********************************/
      //硬件开关-MQTT连接
      offHardwareMQTT(type){
        let self = this;
        if(self.hardwareClient.unsubscribe){
          self.hardwareClient.unsubscribe(self.hardwareOpic+self.checkSubId, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.hardwareClient.end();
          this.$set(this,'hardwareClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.hardwareMQTT();
        }
      },
      //硬件开关-MQTT订阅
      hardwareMQTT(){
        let self = this;
        this.hardwareClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.hardwareClient.on("connect", e =>{
          this.hardwareClient.subscribe(self.hardwareOpic+self.checkSubId, (err) => {
            if (!err) {
              // console.log("智能控制-订阅成功:" + self.hardwareOpic+self.checkSubId);
            }else{
              // console.log("智能控制-连接错误:" + err);
            }
          });
        });
        this.hardwareClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            // console.log('硬件-mqtt',data)
            let list = JSON.parse(JSON.stringify(this.controlsList))
            list.forEach((item)=>{
              if(item.hardwareNo == data.hardwareNo){
                if(item.hardwareTypeKey == 'airConditioner'){
                  if(data.command == 0){
                    item.switchType = 0;
                    item.functionType = '';
                    item.orderType = '';
                  }else if(data.command == 2){
                    item.switchType = 1;
                    item.functionType = 3;
                    item.orderType = '';
                  }else if(data.command.indexOf('-') != -1){
                    let list = data.command.split('-');
                    item.switchType = 1;
                    item.functionType = list[0]==3?1:(list[0]==4?2:'');
                    item.orderType = list[1]?list[1]:'';
                  }else{
                    item.switchType = '';
                    item.functionType = '';
                    item.orderType = '';
                  }
                }else{
                  item.operatingState = data.operatingState;
                }
              }
            })
            this.$set(this,'controlsList',list);
          }
        });
      },
      //传感器-MQTT连接
      offSensorMQTT(type){
        let self = this;
        if(self.sensorClient.unsubscribe){
          self.sensorClient.unsubscribe(self.sensorOpic+self.checkSubId, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.sensorClient.end();
          this.$set(this,'sensorClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.sensorMQTT();
        }
      },
      //传感器-MQTT订阅
      sensorMQTT(){
        let self = this;
        this.sensorClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.sensorClient.on("connect", e =>{
          this.sensorClient.subscribe(self.sensorOpic+self.checkSubId, (err) => {
            if (!err) {
              // console.log("智能监测-订阅成功:" + self.sensorOpic+self.checkSubId);
            }else{
              // console.log("智能监测-连接错误:" + err);
            }
          });
        });
        this.sensorClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            let list = JSON.parse(JSON.stringify(this.monitorList))
            list.forEach((item)=>{
              data.forEach((minItem)=>{
                if(item.deviceNo == minItem.deviceNo){
                  item.deviceValue = minItem.deviceValue;
                  item.online = minItem.online;
                }
              })
            })
            this.$set(this,'monitorList',list);
          }
        });
      },
      //疏散-MQTT连接
      offEvacuateMQTT(type){
        let self = this;
        if(self.evacuateClient.unsubscribe){
          self.evacuateClient.unsubscribe(self.evacuateOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.evacuateClient.end();
          this.$set(this,'evacuateClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.evacuateMQTT();
        }
      },
      //疏散-MQTT订阅
      evacuateMQTT(){
        let self = this;
        this.evacuateClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.evacuateClient.on("connect", e =>{
          this.evacuateClient.subscribe(self.evacuateOpic, (err) => {
            if (!err) {
              // console.log("疏散-订阅成功:" + self.evacuateOpic);
            }else{
              // console.log("疏散-连接错误:" + err);
            }
          });
        });
        this.evacuateClient.on("message", (topic, message) => {
          if (message){
            //获取疏散数据
            this.laboratoryExitLineGetRedisEvacuation();
          }
        });
      },
      //疏散灯-MQTT连接
      offLightMQTT(type){
        let self = this;
        if(self.lightClient.unsubscribe){
          self.lightClient.unsubscribe(self.lightOpic+self.floorId, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.lightClient.end();
          this.$set(this,'lightClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.lightMQTT();
        }
      },
      //疏散灯-MQTT订阅
      lightMQTT(){
        let self = this;
        this.lightClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.lightClient.on("connect", e =>{
          this.lightClient.subscribe(self.lightOpic+self.floorId, (err) => {
            if (!err) {
              // console.log("疏散灯-订阅成功:" + self.lightOpic+self.floorId);
            }else{
              // console.log("疏散灯-连接错误:" + err);
            }
          });
        });
        this.lightClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            for(let i=0;i<self.mapList.length;i++){
              if(self.mapList[i].type == 2){
                for(let o=0;o<self.mapList[i].lightList.length;o++){
                  if(data.hardwareNo == self.mapList[i].lightList[o].configName){
                    self.$set(self.mapList[i].lightList[o],'openType',data.operatingState);
                  }
                }
              }
            }
          }
        });
      },
      //预案-MQTT连接
      offPlanMQTT(type){
        let self = this;
        if(self.planClient.unsubscribe){
          self.planClient.unsubscribe(self.planOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.planClient.end();
          this.$set(this,'planClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.planMQTT();
        }
      },
      //预案-MQTT订阅
      planMQTT(){
        let self = this;
        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.planClient.on("connect", e =>{
          this.planClient.subscribe(self.planOpic, (err) => {
            if (!err) {
              // console.log("预案-订阅成功:" + self.planOpic);
            }else{
              // console.log("预案-连接错误:" + err);
            }
          });
        });
        this.planClient.on("message", (topic, message) => {
          if (message){
            //获取预案数据
            this.laboratoryBigViewSelectTriggerInfo();
          }
        });
      },
      /**************** 红外控制器操作相关 ****************/
      //弹层关闭
      dialogOff(){
        this.$set(this,'infraredControllerType',false);
      },
      //弹层开启
      dialogOpen(item){
        if(!controlsRestrictVerify('performEvacuation')){
          this.msgError('没有相关操作权限,请联系管理员')
          return
        }
        this.$set(this,'infraredControllerTitle','空调控制');
        this.$set(this,'infraredControllerForm',{
          name:item.hardwareName,
          switchType:parseInt(item.switchType),
          functionType:item.switchType == 0 ? 1 : parseInt(item.functionType),
          orderType:item.switchType == 1 && item.functionType !=3 ? parseInt(item.orderType):18,
          hardwareNo:item.hardwareNo,
        });
        this.$set(this,'infraredControllerType',true);
      },
      dialogSubmit(){
        let text = '';
        if(this.infraredControllerForm.switchType == 1){
          if(this.infraredControllerForm.functionType == 1){
            text = '3-' + this.infraredControllerForm.orderType;
          }else if(this.infraredControllerForm.functionType == 2){
            text = '4-' + this.infraredControllerForm.orderType;
          }else if(this.infraredControllerForm.functionType == 3){
            text = '2';
          }
        }else if(this.infraredControllerForm.switchType == 0){
          text = '0';
        }
        let switchData = {
          hardwareNo:this.infraredControllerForm.hardwareNo,
          command:text
        };
        iotHardwareOperatingHardware(switchData).then(response => {
          if(response.code==200){
            this.msgSuccess("操作成功")
            this.$set(this,'infraredControllerType',false);
          }
        });
      },
      //开关切换
      switchTypeButton(){
        if(!this.infraredControllerForm.switchType){
          if (this.infraredControllerForm.functionType == 1){
            if(this.infraredControllerForm.orderType<18 || this.infraredControllerForm.orderType>28){
              this.$set(this.infraredControllerForm,'orderType',18);
            }
          } else if(this.infraredControllerForm.functionType == 2){
            if(this.infraredControllerForm.orderType<22 || this.infraredControllerForm.orderType>30){
              this.$set(this.infraredControllerForm,'orderType',22);
            }
          }else if(this.infraredControllerForm.functionType == 3){
            this.$set(this.infraredControllerForm,'orderType',18);
          }else{
            this.$set(this.infraredControllerForm,'functionType',1);
            this.$set(this.infraredControllerForm,'orderType',18);
          }
        }
        this.$set(this.infraredControllerForm,'switchType',!this.infraredControllerForm.switchType);
      },
      //状态切换
      functionButton(value){
        if(this.infraredControllerForm.functionType != value){
          if (value == 1){
            if(this.infraredControllerForm.orderType<18 || this.infraredControllerForm.orderType>28){
              this.$set(this.infraredControllerForm,'orderType',18);
            }
          } else if(value == 2){
            if(this.infraredControllerForm.orderType<22 || this.infraredControllerForm.orderType>30){
              this.$set(this.infraredControllerForm,'orderType',22);
            }
          }
          this.$set(this.infraredControllerForm,'functionType',value);
        }
      },
      //指令切换
      minusTextButton(){
        if (this.infraredControllerForm.functionType == 1){
          if(this.infraredControllerForm.orderType>18){
            this.infraredControllerForm.orderType--
          }
        } else if(this.infraredControllerForm.functionType == 2){
          if(this.infraredControllerForm.orderType>22){
            this.infraredControllerForm.orderType--
          }
        }
      },
      addTextButton(){
        if (this.infraredControllerForm.functionType == 1){
          if(this.infraredControllerForm.orderType<28){
            this.infraredControllerForm.orderType++
          }
        } else if(this.infraredControllerForm.functionType == 2){
          if(this.infraredControllerForm.orderType<30){
            this.infraredControllerForm.orderType++
          }
        }
      },
    },
    beforeDestroy() {
      //清除MQTT
      let self = this;
      self.offHardwareMQTT();
      self.offSensorMQTT();
      self.offEvacuateMQTT();
      self.offLightMQTT();
      self.offPlanMQTT();
    },
  }
</script>
<style scoped lang="scss">
  .performEvacuationData{
    flex:1;
    position: relative;
    display: flex;
    flex-direction: column;
    width:1920px;
    height:1080px;
    background: url("../../../assets/ZDimages/emergencyManagement/img_bg.png") repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .top-title-box{
      height:92px;
      position: relative;
      .top-title-img-box{
        position: absolute;
        top:0;
        height:92px;
        left:41px;
        width: 1837px;
        background: url("../../../assets/ZDimages/emergencyManagement/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
      }
      .top-title-button-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;
        }
      }
    }
    .content-box{
      flex: 1;
      display: flex;
      overflow: hidden;
      .content-left-max-big-box{
        width:400px;
        .content-controls-box{
          margin-left:30px;
          height:666px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .content-controls-for-box{
            flex:1;
            margin:20px 0;
            position: relative;
            .controls-for-box:nth-child(1){
              border:none;
            }
            .controls-for-box{
              padding:6px 0;
              border-top:1px dashed #24D1F9;
              .for-title-box{
                display: flex;
                .for-title-img-box{
                  width:53px;
                  height:53px;
                  //栅格布局居中
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  overflow: hidden;
                  background: url("../../../assets/ZDimages/emergencyManagement/img_znkz_bg.png");
                  .svg-img{
                    display: block;
                    width:28px;
                    height:28px;
                    color:#24D1F9;
                  }
                }
                .for-title-name-box{
                  font-size:20px;
                  color:#24D1F9;
                  line-height:53px;
                  /*单行省略号*/
                  display:block;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                  flex:1;
                  margin:0 28px;
                }
                .for-title-button-box{

                }
              }
            }
            .controls-for-box-one{
              padding:6px 0;
              border-top:1px dashed #24D1F9;
              .for-title-box{
                display: flex;
                .for-title-img-box{
                  width:53px;
                  height:53px;
                  //栅格布局居中
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  overflow: hidden;
                  background: url("../../../assets/ZDimages/emergencyManagement/img_znkz_bg.png");
                  .svg-img{
                    display: block;
                    width:28px;
                    height:28px;
                    color:#24D1F9;
                  }
                }
                .for-title-name-box{
                  font-size:20px;
                  color:#24D1F9;
                  line-height:53px;
                  /*单行省略号*/
                  display:block;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                  flex:1;
                  margin:0 28px;
                }
                .for-title-button-box{
                  width:72px;
                  height:32px;
                  color:#24d1f9;
                  border:1px solid #24d1f9;
                  border-radius:20px;
                  text-align: center;
                  line-height:30px;
                  cursor: pointer;
                  margin:7px;
                  font-size:14px;
                }
              }
              .for-button-box{
                margin-top:10px;
                display: flex;
                padding-left:22px;
                p{
                  width:100px;
                  font-size:14px;
                  height:30px;
                  line-height:30px;
                  margin-right:10px;
                  border-radius:4px;
                  text-align: center;
                }
                .colorOpen{
                  color: #24D1F9;
                  border:1px solid #24D1F9;
                }
                .colorOff{
                  color: #999;
                  border:1px solid #999;
                }
              }
            }
            .null-box{
              position: absolute;
              left:50%;
              top:50%;
              margin-left:-88px;
              margin-top:-91px;
              .null-img{
                width:176px;
                height:143px;
              }
              .null-p{
                margin-top:20px;
                line-height:20px;
                text-align: center;
                font-size:16px;
                color:#CCD6D6;
              }
            }
          }
        }
        .content-monitor-box{
          margin-left:30px;
          height:322px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .content-monitor-for-box{
            flex:1;
            margin:20px 0;
            position: relative;
            .monitor-for-box{
              display: inline-block;
              width:160px;
              margin:0 10px 20px 0;
              .monitor-for-min-box{
                display: flex;
                .for-img-box{
                  width:48px;
                  height:48px;
                  margin-right:10px;
                  //栅格布局居中
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  overflow: hidden;
                  .svg-img{
                    display: block;
                    width:24px;
                    height:24px;
                  }
                }
                .for-text-box{
                  flex:1;
                  overflow: hidden;
                  p{
                    font-size:14px;
                    /*单行省略号*/
                    display:block;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  p:nth-child(1){
                    margin-top:8px;
                    line-height:14px;
                  }
                  p:nth-child(2){
                    margin-top:8px;
                    line-height:14px;
                  }
                }
              }
              .monitor-for-min-box-zc{
                .for-img-box{
                  background: url("../../../assets/ZDimages/emergencyManagement/icon_cgqbg_zc.png") no-repeat;
                  background-size:100%;
                  .svg-img{
                    color:#24D1F9;
                  }
                }
                .for-text-box{
                  overflow: hidden;
                  p{
                    display:block;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  p:nth-child(1){
                    color:#24D1F9;
                  }
                  p:nth-child(2){
                    color:#fff;
                  }
                }
              }
              .monitor-for-min-box-yc{
                .for-img-box{
                  background: url("../../../assets/ZDimages/emergencyManagement/icon_cgqbg_yc.png") no-repeat;
                  background-size:100%;
                  .svg-img{
                    color:#F72837;
                  }
                }
                .for-text-box{
                  overflow: hidden;
                  p{
                    display:block;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  p:nth-child(1){
                    color:#E80000;
                  }
                  p:nth-child(2){
                    color:#E80000;
                  }
                }
              }
            }
            .null-box{
              position: absolute;
              left:50%;
              top:50%;
              margin-left:-88px;
              margin-top:-91px;
              .null-img{
                width:176px;
                height:143px;
              }
              .null-p{
                margin-top:20px;
                line-height:20px;
                text-align: center;
                font-size:16px;
                color:#CCD6D6;
              }
            }
          }
        }
      }
      .content-center-max-big-box{
        flex:1;
        .content-button-box{
          height:145px;
          width:984px;
          margin:0 auto;
          ::v-deep .content-button-min-box{
            padding-top:45px;
            display: flex;
            .content-building-box{
              .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{
                width:200px;
                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;
                }
              }
            }
            .content-floorId-box{
              margin:0 20px 0 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;
              }
              .el-select-dropdown{
                width:150px;
                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;
                }
              }
            }
            .content-sub-info-box{
              line-height:40px;
              font-size:16px;
              color:#20FDFA;
              flex:1;
            }
            .content-evacuate-button{
              width:172px;
              height:40px;
              line-height:40px;
              color:#00D4FF;
              text-align: center;
              background: url("../../../assets/ZDimages/emergencyManagement/icon_sspt_ljssbk.png");
              margin-right:5px;
              cursor: pointer;
            }
            .content-out-button{
              width:120px;
              height:40px;
              line-height:40px;
              color:#00D4FF;
              text-align: center;
              background: url("../../../assets/ZDimages/emergencyManagement/icon_yjzh_fh.png");
              cursor: pointer;
            }
          }
        }
        .content-map-select-box{
          width:984px;
          height:500px;
          margin:0 auto;
          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;
              cursor: pointer;
              .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/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .lightTopOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_sjt.png");
                    background-size: 100%;
                  }
                  .lightTopOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");
                    background-size: 100%;
                  }
                  .lightBottomOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_xjt.png");
                    background-size: 100%;
                  }
                  .lightBottomOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");
                    background-size: 100%;
                  }
                  .lightLeftOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_zuo.png");
                    background-size: 100%;
                  }
                  .lightLeftOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");
                    background-size: 100%;
                  }
                  .lightRightOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_yuo.png");
                    background-size: 100%;
                  }
                  .lightRightOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/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/emergencyManagement/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/emergencyManagement/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/emergencyManagement/img_bg_yatk.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:15px;
                  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:15px auto 0;
                  width:100px;
                  line-height:30px;
                  background: #163277;
                  color:#fff;
                  text-align: center;
                  border-radius:6px;
                  cursor: pointer;
                }
              }
              .check-plan-map-for-box{
                z-index:1000!important;
              }
            }
          }
          .null-mapList{
            text-align: center;
            font-size:16px;
            color:#fff;
            line-height:300px;
          }
        }
        .content-loudspeaker-danger-box{
          width:984px;
          margin:0 auto;
          height:343px;
          display: flex;
          .content-loudspeaker-box{
            width:470px;
            height:323px;
            margin:20px 0 0 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .content-loudspeaker-for-box{
              flex:1;
              margin:20px 0;
              position: relative;
              display: flex;
              flex-direction: column;
              overflow: hidden;
              .loudspeaker-for-box{
                flex:1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .loudspeaker-for-button-box{
                  flex:1;
                  .for-button-box-check{
                    border:1px solid #24D1F9!important;
                    color:#24D1F9!important;
                  }
                  .for-button-box{
                    display: inline-block;
                    margin:0 22px 11px 0;
                    cursor: pointer;
                    width:130px;
                    height:30px;
                    border:1px solid #1E768E;
                    text-align: center;
                    font-size:14px;
                    line-height:30px;
                    border-radius:5px;
                    color:#fff;
                    /*单行省略号*/
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                }
                .loudspeaker-for-text-box{
                  height:94px;
                  .for-text-box{
                    p:nth-child(1){
                      line-height:18px;
                      font-size:16px;
                      color:#24D1F9;
                      margin-bottom:5px;
                    }
                    p:nth-child(2){
                      line-height:17px;
                      font-size:14px;
                      color:#fff;
                      margin-bottom:5px;
                    }
                  }
                }
                ::v-deep .loudspeaker-for-input-box{
                  .el-input__inner{
                    background-color: rgba(0,0,0,0);
                    border:1px solid #24D1F9;
                    box-shadow:0 0 5px 1px #24D1F9 inset;
                  }
                  .el-input-group__append, .el-input-group__prepend{
                    cursor: pointer;
                    background-color: rgba(0,0,0,0);
                    color:#FFFFFF;
                    border:1px solid #24D1F9;
                    box-shadow:0 0 5px 1px #24D1F9 inset;
                  }
                }
              }
              .null-box{
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-88px;
                margin-top:-91px;
                .null-img{
                  width:176px;
                  height:143px;
                }
                .null-p{
                  margin-top:20px;
                  line-height:20px;
                  text-align: center;
                  font-size:16px;
                  color:#CCD6D6;
                }
              }
            }
          }
          .content-danger-box{
            width:480px;
            height:323px;
            margin:20px 0 0 34px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .content-danger-for-box{
              flex:1;
              display: flex;
              flex-direction: column;
              overflow: hidden;
              margin:20px 0;
              position: relative;
              .danger-for-box{
                width:480px;
                height:224px;
              }
              .null-box{
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-88px;
                margin-top:-91px;
                .null-img{
                  width:176px;
                  height:143px;
                }
                .null-p{
                  margin-top:20px;
                  line-height:20px;
                  text-align: center;
                  font-size:16px;
                  color:#CCD6D6;
                }
              }
            }
          }
        }
      }
      .content-right-max-big-box{
        width:400px;
        .content-user-box{
          height:370px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .content-user-for-box{
            flex:1;
            margin:18px 30px 20px 0;
            position: relative;
            /*padding:30px 0 30px 16px;*/
            .user-for-box{
              width:150px;
              height:50px;
              border:1px solid #24D1F9;
              border-radius: 10px;
              margin:0 30px 18px 0;
              display: inline-block;
              .user-for-min-box{
                display: flex;
                img{
                  width:36px;
                  height:36px;
                  border:1px solid #24D1F9;
                  border-radius: 50%;
                  margin:6px 10px 0 7px;
                }
                p{
                  width:90px;
                  line-height:50px;
                  color:#24D1F9;
                  font-size:16px;
                  display:block;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
              }
            }
            .null-box{
              position: absolute;
              left:50%;
              top:50%;
              margin-left:-88px;
              margin-top:-91px;
              .null-img{
                width:176px;
                height:143px;
              }
              .null-p{
                margin-top:20px;
                line-height:20px;
                text-align: center;
                font-size:16px;
                color:#CCD6D6;
              }
            }
          }
        }
        .content-video-box{
          height:618px;
          .content-video-for-box{
            margin:20px 30px 30px 0;
            height:519px;
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .video-for-box{
              height:519px;
            }
            ::v-deep .pagination-box{
              display: flex;
              .flex-null-p{
                flex:1;
              }
              .el-pagination__total,.active{
                color:#24D1F9;
              }
              .active{
                border:1px solid #24D1F9!important;
              }
              .btn-next,.btn-prev,.number{
                border:1px solid #19667e;
                background-color: rgba(0,0,0,0);
              }
            }
            .null-box{
              position: absolute;
              left:50%;
              top:50%;
              margin-left:-82px;
              margin-top:-75px;
              width:165px;
              height:150px;
              .null-img{
                width:165px;
                height:110px;
              }
              .null-p{
                margin-top:20px;
                line-height:20px;
                text-align: center;
                font-size:16px;
                color:#CCD6D6;
              }
            }
          }
        }
      }
      .content-null-box{
        background-color: #021e30;
      }
    }
    ::v-deep .content-box{
      //switch开关
      .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:#1E768E;
      }
      .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: #1E768E;
        background-color: rgba(0,0,0,0);
      }
      .el-switch.is-checked .el-switch__core::after{
        background-color: #1E768E;
        margin-left: -27px!important;
      }
      .el-switch{
        margin-top:10px;
        display: block;
        width:80px!important;
        height:4px!important;
      }
      //滚动条
      .scrollbar-box::-webkit-scrollbar{
        width: 6px!important;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 6px!important;
      }
      .scrollbar-box::-webkit-scrollbar-thumb{
        border-radius: 5px!important;
        -webkit-box-shadow: inset 0 0 5px #116e8e!important;
        background: #116e8e!important;
      }
      .scrollbar-box::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0)!important;
        border-radius: 0!important;
        background: rgba(255,255,255,0)!important;
      }
      //title样式
      .big-title-box{
        width:181px;
        height:59px;
        background: url("../../../assets/ZDimages/emergencyManagement/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;
        }
      }
    }
    .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:-315px;
        margin-top:-125px;
        width:630px;
        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;
            font-weight:500;
          }
          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/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .lightTopOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_sjt.png");
                    background-size: 100%;
                  }
                  .lightTopOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");
                    background-size: 100%;
                  }
                  .lightBottomOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_xjt.png");
                    background-size: 100%;
                  }
                  .lightBottomOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");
                    background-size: 100%;
                  }
                  .lightLeftOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_zuo.png");
                    background-size: 100%;
                  }
                  .lightLeftOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");
                    background-size: 100%;
                  }
                  .lightRightOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_yuo.png");
                    background-size: 100%;
                  }
                  .lightRightOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/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/emergencyManagement/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/emergencyManagement/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;
        }
      }
    }
  }
</style>
<style lang="scss">
  .performEvacuationData-dialog{
    .el-dialog{
      background: #011020;
      border:1px solid #116e8e;
      .el-dialog__header{
        border-bottom:1px solid #116e8e;
        .el-dialog__title{
          color:#24D1F9;
        }
      }
      .el-dialog__footer{
        border-top:1px solid #116e8e;
        .dialog-footer-button-primary{
          background-color: #1E768E;
          border:1px solid #1E768E;
        }
        .dialog-footer-button-primary:hover{
          background-color: #24D1F9;
          border:1px solid #24D1F9;
        }
      }
    }
    .infraredController-max-big-box{
      font-size:16px;
      .infraredController-switchType-box{
        display: flex;
        p{
          line-height:30px;
        }
        .switchType-name-p{
          font-size:18px;
          flex:1;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          color:#24D1F9;
        }
        .switchType-type-p{
          cursor: pointer;
          width:80px;
          text-align: center;
          border-radius:6px;
          background-color: #116e8e;
          border:1px solid #116e8e;
          color:#fff;
        }
        .switchType-type-off-p{
          background-color: #011020!important;
          border:1px solid #116e8e!important;
          color:#116e8e!important;
        }
      }
      .infraredController-functionType-box{
        margin-top:20px;
        display: flex;
        p{
          border-radius:6px;
          background-color: #011020;
          border:1px solid #116e8e;
          color:#116e8e;
          line-height:40px;
          width:130px;
          text-align: center;
          margin-left:14px;
          cursor: pointer;
        }
        p:nth-child(1){
          margin-left:0!important;
        }
        .check-button{
          background-color: #116e8e!important;
          border:1px solid #116e8e!important;
          color:#fff!important;
        }
      }
      .infraredController-orderType-box{
        margin-top:20px;
        display: flex;
        p{
          text-align: center;
          line-height:40px;
          width:60px;
          color:#24D1F9;
        }
        .order-minus{
          cursor: pointer;
          border:1px solid #116e8e;
          border-top-left-radius: 6px;
          border-bottom-left-radius: 6px;
        }
        .order-text{
          width:300px;
          border-top:1px solid #116e8e;
          border-bottom:1px solid #116e8e;
        }
        .order-add{
          cursor: pointer;
          border:1px solid #116e8e;
          border-top-right-radius: 6px;
          border-bottom-right-radius: 6px;
        }
      }
    }
  }
</style>
