<template>
  <div class="planAlarm">
    <div class="planAlarmBlack" v-if="showType">
      <div class="planAlarm-max-big-box">
        <div class="planAlarm-title-box">
          <div class="top-img-box">
            <img class="top-img-one vibrate" src="@/assets/ZDimages/icon_bt_yso@1x.png">
            <img class="top-img-two" src="@/assets/ZDimages/icon_bt_yst@1x.png">
          </div>
          <p class="top-name-p">预警事件详情</p>
          <p class="top-out-p el-icon-close" @click="outPlan"></p>
        </div>
        <div class="planAlarm-name-box">
          <div class="lv-box" :class="planData.riskPlanLevel == 1?'type-color-a':(planData.riskPlanLevel == 2?'type-color-b':(planData.riskPlanLevel == 3?'type-color-c':(planData.riskPlanLevel == 4?'type-color-d':'')))">
            <div>{{planData.riskPlanLevel == 1?'低风险':(planData.riskPlanLevel == 2?'中风险':(planData.riskPlanLevel == 3?'较高风险':(planData.riskPlanLevel == 4?'高风险':'')))}}</div>
          </div>
          <p class="name-p">{{subData.subName}}{{subData.roomNum?' ('+subData.roomNum+')':''}}：{{planData.eventName}}</p>
          <p class="time-p">报警时间：{{parseTime(planData.eventStartTime)}}</p>
        </div>
        <div v-if="!lookImgType" class="planAlarm-big-box">
          <div class="planAlarm-left-box">
            <div class="video-box planAlarm-scrollbar">
              <H5PlayerVideo style="margin:10px 0 0 18px;"
                             v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
              <!--<img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">-->
              <!--<mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>-->
              <p class="null-video-p" v-if="!videoList[0]">实验室未配置摄像头</p>
            </div>
            <!--<div class="bugle-box">-->
              <!--<div class="bugle-for-button-box planAlarm-scrollbar">-->
                <!--<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="bugle-for-text-box planAlarm-scrollbar">-->
                <!--<p class="null-p" v-if="!loudspeakerTextList[0]">历史发送记录</p>-->
                <!--<div class="for-text-box" v-for="(item,index) in loudspeakerTextList" :key="index">-->
                  <!--<p>{{item.time}}</p>-->
                  <!--<p>{{item.value}}</p>-->
                <!--</div>-->
              <!--</div>-->
              <!--<div class="bugle-for-input-box">-->
                <!--<el-input placeholder="请输入内容" v-model="loudspeakerInput" class="input-with-select">-->
                  <!--<p slot="append" style="cursor: pointer" @click="iotBigViewSpeakerPlayText">发送</p>-->
                <!--</el-input>-->
              <!--</div>-->
            <!--</div>-->
          </div>
          <div class="planAlarm-right-box">
            <div class="planAlarm-text-box">
              <div class="planAlarm-text-left-box planAlarm-scrollbar">
                <div>
                  <p>所属单位：</p>
                  <p>{{subData.deptName}}</p>
                </div>
                <div>
                  <p>所在位置：</p>
                  <p>{{subData.buildName}}{{subData.floorName?'-'+subData.floorName:''}}{{subData.roomNum?'-'+subData.roomNum:''}}</p>
                </div>
                <div>
                  <p>实验室负责人：</p>
                  <p>{{subData.adminName}}</p>
                </div>
                <div>
                  <p>实验室安全员：</p>
                  <p><span v-for="(item,index) in subData.safeUserList" :key="index">{{index == 0 ?item.safeUserName:'，'+item.safeUserName}}</span></p>
                </div>
              </div>
              <div class="planAlarm-text-right-box planAlarm-scrollbar">
                <div class="box-one">
                  <p>持续时间：</p>
                  <p>{{convertSecondsToHMS(seconds)}}</p>
                </div>
                <div class="box-one">
                  <p>实验室内人员：</p>
                  <p>{{internalPerson}}</p>
                </div>
                <div class="box-two">
                  <p class="box-tile-p">预警通知：</p>
                  <div class="box-two-box">
                    <div class="box-two-box-min" v-if="messageType">
                      <div>
                        <p class="el-icon-check"></p>
                        <p>短信通知</p>
                      </div>
                    </div>
                    <div class="box-two-box-min" v-if="voiceType">
                      <div>
                        <p class="el-icon-check"></p>
                        <p>报警电话</p>
                      </div>
                    </div>
                    <div class="box-two-box-min">
                      <div>
                        <p class="el-icon-check"></p>
                        <p>企业微信</p>
                      </div>
                    </div>
                    <!--<div class="box-two-box-min">-->
                      <!--<div>-->
                        <!--<p class="el-icon-check"></p>-->
                        <!--<p>声光报警</p>-->
                      <!--</div>-->
                    <!--</div>-->
                  </div>
                </div>
              </div>
            </div>
            <div class="planAlarm-sensor-box planAlarm-scrollbar">
              <div v-for="(item,index) in monitorList" :key="index">
                <p :class="item.type?'checkColor':''">{{item.deviceValue?item.deviceValue:'-'}}{{item.unit?item.unit:''}}</p>
                <p>{{item.deviceName}}</p>
              </div>
            </div>
            <div class="planAlarm-img-box">
              <p class="img-title-p">报警抓拍</p>
              <!--<div class="for-max-box" v-if="imgList[0]">-->
              <div class="for-max-box">
                <img :src="item" @click="lookImgButton(true,item)"
                     v-for="(item,index) in photographList" :key="index">
              </div>
              <p class="img-null-p" v-if="!photographList[0]">无抓拍照片</p>
            </div>
          </div>
        </div>
        <div v-if="lookImgType" class="planAlarm-big-box">
          <img class="lookImg" :src="lookImgUrl">
        </div>
        <div class="planAlarm-bottom-button-box">
          <p class="null-p"></p>
          <p class="button-out-p" @click="outPlan">关闭</p>
          <p class="button-finish-p" v-if="!lookImgType" @click="overPlan">结束预案</p>
          <p class="null-p"></p>
        </div>
      </div>
    </div>
    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import {
    laboratoryBigViewSelectTriggerInfo,
    iotBigViewDeviceFindByType,
    iotCameraFindByCondition,
    iotBigViewDeviceFindBySubId,
    laboratoryEventFindByEventId,
    laboratorySubRelInfoGetDetailInfo,
    iotBigViewSpeakerPlayText,
    laboratoryPlanCloseRiskPlan,
  } from "@/api/index";
  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'

  export default {
    name: 'planAlarm',
    components: {
      mpegtsVideo,
      H5PlayerVideo,
      fullH5PlayerVideo
    },
    data () {
      return {
        showType:false,
        //预案MQTT
        planOpic:'lab/risk/plan/change',
        planClient:{},
        //预案参数
        planData:{},
        //实验室数据
        subData:{},
        //实验室人数
        internalPerson:{},
        //实验室人数
        userList:[],
        //持续时间
        seconds:null,
        //定时器
        timer:null,
        //抓拍照片
        lookImgType:false,
        lookImgUrl:'',
        photographList:[],
        //传感器
        monitorList:[],
        planSensorList:[],
        //文字转语音
        loudspeakerInput:'',
        loudspeakerTextList:[],
        loudspeakerList:[],
        checkLoudspeaker:'',
        //语音报警
        voiceType:false,
        //短信报警
        messageType:false,
        //视频
        width:920,
        height:470,
        videoType:false,
        videoList:[],
        videoTotal:0,
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created(){

    },
    mounted(){
      let self = this;
      //判断是否已有链接
      if(!this.planClient.unsubscribe){
        this.offPlanMQTT('on');
      }
      setTimeout(function(){
        self.laboratoryBigViewSelectTriggerInfo();
      },500)
    },
    methods:{
      //选中喇叭
      clickLoudspeaker(item){
        if(this.checkLoudspeaker != item.deviceNo){
          this.$set(this,'checkLoudspeaker',item.deviceNo);
        }else{
          this.$set(this,'checkLoudspeaker',null);
        }
      },
      //发送文字转语音
      iotBigViewSpeakerPlayText(){
        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({
            time:s+':'+f,
            value:this.loudspeakerInput,
          })
          this.$set(this,'loudspeakerInput','');
        })
      },
      //查看/关闭抓拍照片
      lookImgButton(type, item){
        if(type){
          this.$set(this,'lookImgUrl',item)
          this.$set(this,'lookImgType',true)
        }else{
          this.$set(this,'lookImgUrl','')
          this.$set(this,'lookImgType',false)
        }
      },
      //关闭窗口
      outPlan(){
        let self = this;
        if(this.lookImgType){
          this.$set(this,'lookImgType',false);
        }else{
          this.$confirm('传感器数据监测异常，确定要关闭窗口？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            clearInterval(self.timer);
            self.$set(self,'showType',false);
          }).catch(() => {});
        }
      },
      //结束预案
      overPlan(){
        let self = this;
        this.$confirm('传感器数据监测异常，确定要强制结束预案?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          laboratoryPlanCloseRiskPlan({eventId:self.planData.eventId}).then(response => {
            self.$set(self,'showType',false);
            setTimeout(function(){
              self.laboratoryBigViewSelectTriggerInfo();
            },500)
          });
        }).catch(() => {});
      },
      //查询实验室喇叭
      iotBigViewDeviceFindByType(){
        let floorObj = {
          passageway:this.planData.floorId,
          typeKeyList:['horn']
        }
        iotBigViewDeviceFindByType(floorObj).then(floorResponse => {
          let subjectObj = {
            subjectId:this.planData.subId,
            typeKeyList:['horn']
          }
          iotBigViewDeviceFindByType(subjectObj).then(subjectResponse => {
            this.$set(this,'loudspeakerList',floorResponse.data.concat(subjectResponse.data));
          })
        })
      },
      //查询实验室传感器
      iotBigViewDeviceFindBySubId(){
        let self = this;
        iotBigViewDeviceFindBySubId({subId:this.planData.subId}).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);
        })
      },
      //预案详情
      laboratoryEventFindByEventId() {
        laboratoryEventFindByEventId({ eventId: this.planData.eventId }).then(response => {
          if(response.data.recordPhoto){
            this.$set(this,'photographList',response.data.recordPhoto.split(','));
          }
          let num1 = 0;
          let num2 = 0;
          for (let i=0;i<response.data.messageLogVoList.length;i++) {
            if(response.data.messageLogVoList[i].alarmType == 1){
              num1++
            }else if(response.data.messageLogVoList[i].alarmType == 2){
              num2++
            }
          }
          this.$set(this,'voiceType',num1 == 0?false:true);
          this.$set(this,'messageType',num2 == 0?false:true);
          this.$set(this,'internalPerson',response.data.internalPerson);
        })
      },
      //实验室详情
      laboratorySubRelInfoGetDetailInfo(){
        laboratorySubRelInfoGetDetailInfo({ infoId: this.planData.infoId }).then(response => {
          this.$set(this, 'subData', response.data)
        })
      },
      //预案-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){
            //获取预案数据
            setTimeout(function(){
              self.laboratoryBigViewSelectTriggerInfo();
            },500)
          }
        });
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        clearInterval(this.timer);
        laboratoryBigViewSelectTriggerInfo().then(response => {
          if(response.data[0]){
            let planData = {
              buildId:response.data[response.data.length-1].buildId,
              floorId:response.data[response.data.length-1].floorId,
              subId:response.data[response.data.length-1].subId,
              infoId:response.data[response.data.length-1].infoId,
              eventId:response.data[response.data.length-1].eventId,
              eventName:response.data[response.data.length-1].eventName,
              riskPlanLevel:response.data[response.data.length-1].riskPlanLevel,
              eventStartTime:response.data[response.data.length-1].eventStartTime,
              eventStartTimestamp:response.data[response.data.length-1].eventStartTimestamp,
            };
            this.$set(this,'planData',planData);
            //传感器
            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.$nextTick(()=>{
              Promise.all([
                //查询实验室喇叭
                this.iotBigViewDeviceFindByType(),
                //查询实验室摄像头
                this.videoInitialize(),
                //查询实验室传感器
                this.iotBigViewDeviceFindBySubId(),
                //查询预案详情
                this.laboratoryEventFindByEventId(),
                //查询实验室详情
                this.laboratorySubRelInfoGetDetailInfo(),
              ]).then((result)=>{
                this.$nextTick(()=>{
                  this.newTimestamp(planData.eventStartTimestamp);
                  this.$set(this,'showType',true);
                })
              }).catch((error) => {})
            })
          }else{
            this.$set(this,'showType',false);
          }
        })
      },
      //计算时间戳
      newTimestamp(value){
        let timestamp = this.accSub(this.accDiv(Date.parse(new Date()),1000),value);
        this.time(timestamp);
      },
      //定时器
      time(time){
        let self = this;
        self.seconds = parseInt(time);
        self.timer = window.setInterval(refreshCount, 1000);
        function refreshCount() {
          self.seconds++
        }
      },
      //时间格式
      convertSecondsToHMS(seconds) {
        var hours = Math.floor(seconds / 3600);
        var minutes = Math.floor((seconds % 3600) / 60);
        var remainingSeconds = seconds % 60;
        return hours + "小时 " + minutes + "分钟 " + remainingSeconds + "秒";
      },
      //查询实验室摄像头
      videoInitialize(){
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:1,
          pageSize:10,
          buildId:'',
          floorId:'',
          passageway:'',
          subIds:[this.planData.subId],
          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
          streamType:1,
          source:0,
        };
        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,
                cameraIndexCode: response.data.records[i].deviceNo,
              }
            )
          }
          this.$set(this,'videoList',list)
          this.$set(this,'videoTotal',response.data.total);
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'videoType', true);
            },1000);
          })
        });
      },
      //全屏开启-关闭轮播
      stopTime(cameraIndexCode){
        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
        this.$set(this,'fullVideoType',true);
      },
      //全屏关闭-开启轮播
      outFullScreen(){
        this.$set(this,'fullVideoType',false);
        this.$set(this,'fullVideoProps',{});
      },
    },
    beforeDestroy() {
      //清除MQTT
      let self = this;
      self.offPlanMQTT();
    },
  }
</script>
<style scoped lang="scss">
  .planAlarm{
    .planAlarmBlack{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      z-index:1000;
      background-color: rgba(0,0,0,0.8);
      .planAlarm-max-big-box{
        position: absolute;
        left:50%;
        top:50%;
        margin-top:-567px;
        margin-left:-938px;
        width: 1877px;
        height: 1134px;
        display: flex;
        flex-direction: column;
        .planAlarm-title-box{
          display: flex;
          padding:40px 0 36px 30px;
          border-bottom:1px solid #1ed0f8;
          background-color: #01232A;
          border-top-left-radius:20px;
          border-top-right-radius:20px;
          .top-img-box {
            width: 60px;
            position: relative;
            .top-img-one {
              z-index:5;
              display: block;
              width:18px;
              height:20px;
              position: absolute;
              top:5px;
              left:15px;
            }
            .top-img-two{
              z-index:1;
              display: block;
              width:28px;
              height:30px;
              position: absolute;
              top:0;
              left:25px;
            }
            .vibrate {
              position: relative;
              animation: vibrate 2s infinite;
            }

            @keyframes vibrate {
              0% {
                left:15px;
              }

              50% {
                left:20px;
              }

              100% {
                left:15px;
              }
            }
          }
          .top-name-p {
            flex: 1;
            line-height: 30px;
            height:30px;
            color: #fff;
            font-size: 26px;
            margin-left:10px;
          }
          .top-out-p{
            cursor: pointer;
            font-size:26px;
            line-height: 30px;
            height:30px;
            color:#fff;
            margin-right:40px;
          }
        }
        .planAlarm-name-box{
          height:107px;
          display: flex;
          padding:0 20px;
          background-color: #01232A;
          .lv-box{
            margin-top:26px;
            width:120px;
            height:54px;
            border-radius:50px;
            div{
              margin:3px 4px;
              width:110px;
              height:46px;
              line-height:46px;
              font-size:20px;
              text-align: center;
              border-radius:50px;
            }
          }
          .type-color-a {
            border:1px solid #CCE6FE;
            div{
              background-color: #CCE6FE;
              color:#0183FA;
            }
          }
          .type-color-b {
            border:1px solid rgb(256, 232, 206);
            div{
              background-color: rgb(256, 232, 206);
              color:#FF9900;
            }
          }
          .type-color-c {
            border:1px solid rgb(251, 228, 206);
            div{
              background-color: rgb(251, 228, 206);
              color:#FF4800;
            }
          }
          .type-color-d {
            border:1px solid rgb(248, 206, 205);
            div{
              background-color: rgb(248, 206, 205);
              color:#FF0000;
            }
          }
          .name-p{
            width:450px;
            font-size:20px;
            line-height:107px;
            color:#fff;
            margin-left:20px;
          }
          .time-p{
            width:450px;
            font-size:20px;
            line-height:107px;
            color:#fff;
          }
        }
        .planAlarm-big-box{
          flex:1;
          display: flex;
          padding:20px 20px 0;
          background-color: #01232A;
          border-bottom-left-radius:20px;
          border-bottom-right-radius:20px;
          .planAlarm-left-box{
            width: 917px;
            height: 808px;
            margin-right:20px;
            border-radius:10px;
            .video-box{
              width: 917px;
              height: 808px;
              overflow-y: scroll;
              .null-video-p{
                line-height:532px;
                text-align: center;
                font-size:20px;
                color:#999;
              }
            }
          }
          .bugle-box{
            width: 917px;
            height: 236px;
            margin-top:20px;
            border-radius:10px;
            background-color: #032C32;
            display: flex;
            flex-direction: column;
            .bugle-for-button-box{
              padding:20px 20px 10px;
              .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:150px;
                padding:0 10px;
                height:50px;
                border:1px solid #1E768E;
                text-align: center;
                font-size:18px;
                line-height:50px;
                border-radius:5px;
                color:#fff;
                /*单行省略号*/
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
            }
            .bugle-for-text-box{
              flex:1;
              padding:10px 20px;
              .null-p{
                color:#999;
                font-size:18px;
                text-align: center;
              }
              .for-text-box{
                display: flex;
                p:nth-child(1){
                  line-height:24px;
                  font-size:18px;
                  color:#24D1F9;
                  margin-bottom:5px;
                  margin-right:10px;
                }
                p:nth-child(2){
                  line-height:24px;
                  font-size:18px;
                  color:#fff;
                  margin-bottom:5px;
                }
              }
            }
            .bugle-for-input-box{
              margin:20px;
            }
            ::v-deep .bugle-for-input-box{
              .el-input__inner{
                height:50px;
                line-height:50px;
                font-size:18px;
                background-color: rgba(0,0,0,0);
                border:1px solid #15827C;
                box-shadow:0 0 2px 1px #15827C inset;
                color:#FFFFFF;
              }
              .el-input-group__append, .el-input-group__prepend{
                height:50px;
                font-size:18px;
                cursor: pointer;
                background-color: rgba(0,0,0,0);
                color:#FFFFFF;
                border:1px solid #15827C;
                box-shadow:0 0 2px 1px #15827C inset;
              }
            }
          }
          .planAlarm-right-box{
            width: 900px;
            height: 810px;
            .planAlarm-text-box{
              width: 900px;
              height: 270px;
              display: flex;
              .planAlarm-text-left-box{
                width: 440px;
                height: 270px;
                margin-right:20px;
                border-radius:10px;
                background-color: #032C32;
                padding:20px 30px;
                div{
                  display: flex;
                  p{
                    color:#fff;
                    line-height:45px;
                    font-size:20px;
                  }
                  p:nth-child(1){
                  }
                  p:nth-child(2){
                    flex:1;
                  }
                }
              }
              .planAlarm-text-right-box{
                width: 440px;
                height: 270px;
                border-radius:10px;
                background-color: #032C32;
                padding:20px 30px;
                .box-one{
                  display: flex;
                  p{
                    color:#fff;
                    line-height:45px;
                    font-size:20px;
                  }
                  p:nth-child(1){
                  }
                  p:nth-child(2){
                    flex:1;
                  }
                }
                .box-two{
                  display: flex;
                  .box-tile-p{
                    color:#fff;
                    line-height:45px;
                    font-size:20px;
                  }
                  .box-two-box{
                    flex:1;
                    .box-two-box-min{
                      display: inline-block;
                      div{
                        display: flex;
                        p:nth-child(1){
                          background-color: #11C01D;
                          font-size:20px;
                          border-radius:50%;
                          width:26px;
                          height:26px;
                          color:#fff;
                          line-height:27px;
                          text-align: center;
                          margin:9px;
                        }
                        p:nth-child(2){
                          font-size:20px;
                          line-height:45px;
                          color:#fff;
                        }
                      }
                    }
                  }
                }
              }
            }
            .planAlarm-sensor-box{
              width: 900px;
              height: 243px;
              background-color: #032C32;
              border-radius:10px;
              margin-top:20px;
              padding:29px 0 0 30px;
              div{
                display: inline-block;
                margin:0 14px 22px 0;
                border-radius:10px;
                width:200px;
                height:81px;
                background-color: #053539;
                padding:14px 19px;
                .checkColor{
                  color:#FF0000;
                }
                p{
                  color:#fff;
                }
                p:nth-child(1){
                  font-size:24px;
                  line-height:24px;
                  height:24px;
                }
                p:nth-child(2){
                  margin-top:10px;
                  font-size:18px;
                  line-height:18px;
                  height:18px;
                  display:block;
                  overflow:hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
              }
            }
            .planAlarm-img-box{
              width: 900px;
              height: 236px;
              background-color: #032C32;
              border-radius:10px;
              margin-top:20px;
              overflow: hidden;
              .img-title-p{
                font-size:22px;
                height:22px;
                line-height:22px;
                margin:20px 0 20px 30px;
                color:#fff;
              }
              .for-max-box{
                img{
                  cursor: pointer;
                  display:inline-block;
                  width:267px;
                  height:150px;
                  border-radius:10px;
                  margin-left:25px;
                }
              }
              .img-null-p{
                line-height:150px;
                text-align: center;
                font-size:20px;
                color:#999;
              }
            }
          }
          .lookImg{
            display: block;
            width:1449px;
            height:815px;
            margin:20px auto 0;
          }
        }
        .planAlarm-bottom-button-box{
          display: flex;
          height:81px;
          .null-p{
            flex:1;
          }
          .button-out-p{
            cursor: pointer;
            border:1px solid #15827C;
            background-color: #000F14;
            color:#15827C;
            width:162px;
            height:54px;
            line-height:54px;
            font-size:20px;
            text-align: center;
            border-radius:50px;
            margin-top:27px;
          }
          .button-finish-p{
            cursor: pointer;
            border:1px solid #15827C;
            background-color: #15827C;
            color:#fff;
            width:162px;
            height:54px;
            line-height:54px;
            font-size:20px;
            text-align: center;
            border-radius:50px;
            margin-top:27px;
            margin-left:64px;
          }
        }
      }
    }
    .planAlarm-scrollbar{
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .planAlarm-scrollbar::-webkit-scrollbar {
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 8px;
    }
    .planAlarm-scrollbar::-webkit-scrollbar-thumb {
      border-radius: 6px;
      -webkit-box-shadow: inset 0 0 5px #15827C;
      background: #15827C;
    }
    .planAlarm-scrollbar::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(3,44,50,0);
      border-radius: 0;
      background:  rgba(3,44,50,0);
    }
  }
</style>
