<template>
  <div class="planComponent">
    <div class="planComponent-max-big-box">
      <div class="planComponent-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="planComponent-name-box">
        <div class="lv-box">
          <div>一级</div>
        </div>
        <p class="name-p">水产科学实验室（A101）：报警预案</p>
        <p class="time-p">报警时间：2024/03/01   13:22:56</p>
      </div>
      <div class="planComponent-big-box">
        <img class="planComponent-left-box" src="@/assets/ZDimages/plan_img_1.png"/>
        <div class="planComponent-right-box">
          <div class="planComponent-text-box">
            <div class="planComponent-text-left-box">
              <div>
                <p>所属单位：</p>
                <p>化学与药物学院</p>
              </div>
              <div>
                <p>所在位置：</p>
                <p>A栋-3层-101</p>
              </div>
              <div>
                <p>实验室负责人：</p>
                <p>董老师</p>
              </div>
              <div>
                <p>实验室安全员：</p>
                <p>周老师、李老师、柴老师</p>
              </div>
            </div>
            <div class="planComponent-text-right-box">
              <div class="box-one">
                <p>持续时间：</p>
                <p>30秒</p>
              </div>
              <div class="box-one">
                <p>实验室内人员：</p>
                <p>A栋-3层-101</p>
              </div>
              <div class="box-two">
                <p class="box-tile-p">预警通知：</p>
                <div class="box-two-box">
                  <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 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="planComponent-sensor-box">
            <div v-for="(item,index) in sensorList" :key="index">
              <p :class="item.type == 1?'checkColor':''">{{item.value}}</p>
              <p>{{item.name}}</p>
            </div>
          </div>
          <div class="planComponent-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" v-for="(item,index) in imgList" :key="index">-->
              <img src="@/assets/ZDimages/plan_img_2.png">
              <img src="@/assets/ZDimages/plan_img_2.png">
              <img src="@/assets/ZDimages/plan_img_2.png">
              <img src="@/assets/ZDimages/plan_img_2.png">
            </div>
            <!--<p class="img-null-p" v-if="!imgList[0]">无</p>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'planComponent',
    data () {
      return {
        imgList:[],
        sensorList:[
          {
            name:'温度传感器',
            value:'45℃',
            type:1,
          },
          {
            name:'湿度传感器',
            value:'45%',
            type:2,
          },
          {
            name:'烟感传感器',
            value:'12',
            type:2,
          },
          {
            name:'TVOC传感器',
            value:'12ppm',
            type:2,
          },
          {
            name:'火焰传感器',
            value:'无',
            type:2,
          },
        ]
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      outPlan(){
        this.$parent.planButton('off');
      },
    },
  }
</script>
<style scoped lang="scss">
  .planComponent{
    height:100%;
    width:100%;
    position: absolute;
    top:0;
    left:0;
    z-index:1000;
    background-color: rgba(0,0,0,0.6);
    .planComponent-max-big-box{
      position: absolute;
      left:50%;
      top:50%;
      margin-top:-536px;
      margin-left:-985px;
      width: 1877px;
      height: 1072px;
      background-color: #01232A;
      border-radius:20px;
      display: flex;
      flex-direction: column;
      .planComponent-title-box{
        display: flex;
        padding:40px 0 36px 30px;
        border-bottom:1px solid #1ed0f8;
        .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;
        }
      }
      .planComponent-name-box{
        height:107px;
        display: flex;
        padding:0 20px;
        .lv-box{
          margin-top:26px;
          width:120px;
          height:54px;
          border:1px solid #FF0000;
          border-radius:50px;
          div{
            margin:3px 4px;
            width:110px;
            height:46px;
            line-height:46px;
            font-size:20px;
            background-color: #FF0000;
            color:#fff;
            text-align: center;
            border-radius:50px;
          }
        }
        .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;
        }
      }
      .planComponent-big-box{
        flex:1;
        display: flex;
        padding:20px;
        .planComponent-left-box{
          width: 917px;
          height: 810px;
          margin-right:20px;
          border-radius:10px;
        }
        .planComponent-right-box{
          width: 900px;
          height: 810px;
          .planComponent-text-box{
            width: 900px;
            height: 270px;
            display: flex;
            .planComponent-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;
                }
              }
            }
            .planComponent-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;
                      }
                    }
                  }
                }
              }
            }
          }
          .planComponent-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;
              }
            }
          }
          .planComponent-img-box{
            width: 900px;
            height: 256px;
            background-color: #032C32;
            border-radius:10px;
            margin-top:20px;
            overflow: hidden;
            .img-title-p{
              font-size:22px;
              height:22px;
              line-height:22px;
              margin:30px 0 17px 30px;
              color:#fff;
            }
            .for-max-box{
              img{
                display:inline-block;
                width:150px;
                height:150px;
                border-radius:10px;
                margin-left:30px;
              }
            }
            .img-null-p{
              text-align: center;
              font-size:22px;
              color:#dedede;
            }
          }
        }
      }
    }
  }
</style>
