FE-V2-PC/src/views/oneKeyOutfire/planExecuteRecord/planExecuteRecordDetail.vue

<!-预案执行记录详情-->
<template>
  <div class="addPage">
    <div class="addPage_title">
      <p>详情</p>
      <P></P>
      <p class="button-p reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="addPage_b">
      <div class="addPage_b_t">
        <div class="addPage_b_t_l">
          <div class="small_title">风险概况</div>
          <div class="addPage_b_t_l_b" v-if="form">
            <li><i>事故原因：</i><i>{{form.riskReason?form.riskReason:''}}</i></li>
            <li v-if="form.riskLevel==1"><i>风险级别：</i><i>低风险</i></li>
            <li v-if="form.riskLevel==2"><i>风险级别：</i><i>中风险</i></li>
            <li v-if="form.riskLevel==3"><i>风险级别：</i><i>较高风险</i></li>
            <li v-if="form.riskLevel==4"><i>风险级别：</i><i>高风险</i></li>
            <li><i>发生时间：</i><i>{{form.startDate?form.startDate:''}} - {{form.endDate?form.endDate:''}}</i></li>
            <li><i>持续时间：</i><i>{{form.riskDuration?form.riskDuration:''}}秒</i></li>
            <li><i>风险响应人员：</i><i>{{form.handledPerson?form.handledPerson:'-'}}</i></li>
            <li><i>实验室内人员：</i><i>{{form.internalPerson?form.internalPerson:'-'}}</i></li>
          </div>
        </div>
        <div class="addPage_b_t_c">
          <div class="small_title">现场记录<i>(预案发生一个月后将自动清理）</i></div>
          <div class="addPage_b_t_c_b"  v-if="form">
<!--            <img src="@/assets/images/login-background.jpg">-->
            <video class="video" :src="form.recordVideo?form.recordVideo:''"  autoplay controls ></video>
          </div>
        </div>
        <div class="addPage_b_t_r">
          <div class="small_title">消息推送记录</div>
          <div class="addPage_b_t_r_b" v-if="msgsPush.length>0">
            <li v-for="(item,index3) in msgsPush" :key="index3">
              <i>{{item.createTimeStr}}</i>
              <i>{{item.pushType.code==0?'语音播报':'短信推送'}}</i>
              <i>{{item.recipientName}}</i></li>
          </div>
        </div>
      </div>
      <div class="addPage_b_b">
        <div class="small_title">风险轨迹</div>
        <div class="addPage_b_b_b">
          <div class="new-time-box">
            <div class="for-planAxis" v-for="(item,index) in planAxis">
              <div class="for-planAxis-min-box">
                <div class="for-planAxis-top-box">
                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">{{index == 0?item.riskPlanName+'('+item.riskPlanLevelName+')':item.riskPlanName}}</p>
                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">{{item.sensorJsonName}}：<span>{{item.sensorJsonValue}}</span></p>
                  <p v-if="(item.riskStatus==1||item.riskStatus==2)">时间：{{item.createTime}}</p>
                </div>
                <div class="for-planAxis-center-box">
                  <p :class="index == 0 || index == planAxis.length-1?'dot-p-A':'dot-p-B'"></p>
                  <p class="line-p" v-if="index != planAxis.length-1"></p>
                </div>
                <div class="for-planAxis-bottom-box">
                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">{{item.riskPlanName}}</p>
                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">{{item.sensorJsonName}}：<span>{{item.sensorJsonValue}}</span></p>
                  <p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">时间：{{item.createTime}}</p>
                </div>
              </div>
            </div>
          </div>
          <!--<div class="time-box">-->
            <!--<ul>-->
              <!--<li :class="(item.riskStatus==1||item.riskStatus==2)?'risk_trend':'hardware'" v-for="(item,index2) in planAxis" :key="index2">-->
                <!--<p v-if="(index2 !=0 && index2 !=planAxis.length-1)" :class="(item.riskStatus==1||item.riskStatus==2)?'dot':'dot_tow'"></p>-->

                <!--<p v-if="(item.riskStatus==1||item.riskStatus==2) && item.riskPlanName !='风险解除'"> {{item.riskPlanName}} ({{item.riskPlanLevelName}})</p>-->
                <!--<p v-if="(item.riskStatus==1||item.riskStatus==2) && item.riskPlanName =='风险解除'"> {{item.riskPlanName}}</p>-->

                <!--<p v-if="(item.riskStatus!=1&& item.riskStatus!=2)">{{item.riskPlanName}}</p>-->
                <!--<p class="sensor_val">{{item.sensorJsonName}}：<i class="color: #FF3131;">{{item.sensorJsonValue}}</i></p>-->
                <!--<p class="sensor_timer">时间：<i>{{item.createTime}}</i></p>-->

                <!--<p v-if="index2 !=planAxis.length-1" :class="(item.riskStatus==1||item.riskStatus==2)?'ledgement':'ledgement_tow'"></p>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  abnormalLogOrderByList,
  riskExeRecordList,
  riskPlanAbnormalDesc,
  viewWarnMessage
} from '@/api/laboratory/subject'

export default {
  name: "addPage",
  props:{
    pageData:{},
  },
  data() {
    return {
      pageType:1,
      planAxis:[],
      form:{},
      msgsPush:[],
    };
  },
  methods: {
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
      this.$parent.getList();
    },
    getInfo(){
      let _this=this;
      riskPlanAbnormalDesc(_this.pageData.id).then( response => {
        let res=response.data;
        if(response.code==200){
            if(res){
              _this.form=res
              _this.form.endDate=res.endDate.split(' ')[1]
            }
        }
      });
      //风险轨迹
      abnormalLogOrderByList(_this.pageData.id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.planAxis=res;
          for(let i=0;i< _this.planAxis.length;i++){
            if( _this.planAxis[i].sensorJson){
              _this.planAxis[i].sensorJsonValue = JSON.parse(_this.planAxis[i].sensorJson)[0].value;
              _this.planAxis[i].sensorJsonName = JSON.parse(_this.planAxis[i].sensorJson)[0].describe;
            }
          }
          console.log( _this.planAxis)
        }
      });
      //消息推送记录
      viewWarnMessage(_this.pageData.id).then( response => {
        let res=response.data;
        if(response.code==200){
          let data=response.data;
          _this.msgsPush=data
        }
      });



    },

  },
  mounted() {
    console.log(this.pageData)
    this.getInfo();


  }

};
</script>
<style>
::-webkit-scrollbar {/*滚动条整体样式*/
  width:5px;     /*高宽分别对应横竖滚动条的尺寸*/
  height:5px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius:3px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: none;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius:3px;
  background: none;
}
</style>

<style scoped lang="scss">
.addPage {
  flex:1;
  display: flex!important;
  flex-direction: column;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  border-radius:10px;
  i{font-style: normal;}
  li{list-style-type:none;}
  /*顶部*/
  .addPage_title{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
    padding-top:20px;
    p:nth-child(1){
      line-height:60px;
      color: #0045AF;
      font-size:16px;
      font-weight: 400;
      margin:0 12px 0 20px;
    }
    p:nth-child(2){
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      flex: 1;
    }
    p:nth-child(3){
      margin-right:20px;
    }
  }
  .addPage_b{
    flex: 1;
    display: flex!important;
    flex-direction: column;
    padding: 34px 80px 0;
    box-sizing: border-box;
    /*小标题*/
    .small_title{
      font-size: 16px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      line-height: 24px;
      margin-bottom: 24px;
      >i{
        color: #666;
      }
    }
    .addPage_b_t{
      display: flex;
      justify-content: space-between;
      .addPage_b_t_l{
        width: 378px;
        .addPage_b_t_l_b{
          >li{
            margin-bottom: 20px;
            >i{
              font-size: 14px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              line-height: 14px;
              display: inline-block;
              vertical-align:top;
            }
            >i:nth-of-type(1){
              color: #333333;
            }
            >i:nth-of-type(2){
              width: 280px;
              color: #666666;
              line-height: 16px;
            }
          }
        }
      }
      .addPage_b_t_c{
        width: 380px;
        .addPage_b_t_c_b{
          width: 380px;
          height: 222px;
          >img{
            width: 380px;
            height: 222px;
          }
          .video{
            width: 380px;
            height: 222px;
          }
        }
      }
      .addPage_b_t_r{
        .addPage_b_t_r_b{
          width: 456px;
          >li{
            margin-bottom: 20px;
            >i{
              font-size: 14px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #666666;
              line-height: 18px;
              display: inline-block;
              vertical-align: top;
            }
            >i:nth-of-type(1){
              width: 148px;
            }
            >i:nth-of-type(2){
              width: 84px;
            }
            >i:nth-of-type(3){
              width: 224px;
            }
          }
        }
      }
    }
    .addPage_b_b{
      margin-top: 84px;
      .new-time-box{
        height: 280px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        .for-planAxis{
          display: inline-block;
          font-weight:500;
          overflow: hidden;
          .for-planAxis-min-box{
            overflow: hidden;
            display: flex;
            flex-direction: column;
            .for-planAxis-top-box{
              height:90px;
              p{
                margin-left:28px;
                margin-right:40px;
                font-size:14px;
                line-height:30px;
              }
              p:nth-child(1){
                color:#333;
              }
              p:nth-child(2){
                color:#666;
                span{
                  color:#FF3131;
                }
              }
              p:nth-child(3){
                color:#666;
              }
            }
            .for-planAxis-center-box{
              display: flex;
              .dot-p-A{
                width:23px;
                height:23px;
                background: #fff;
                border:2px solid #0183fa;
                margin:17px;
                border-radius:50%;
              }
              .dot-p-B{
                width:17px;
                height:17px;
                margin:20px;
                background: #0183fa;
                border-radius:50%;
              }
              .line-p{
                flex:1;
                height:1px;
                margin-top:28px;
                background: #dedede;
              }
            }
            .for-planAxis-bottom-box{
              height:90px;
              p{
                margin-left:28px;
                margin-right:40px;
                font-size:14px;
                line-height:30px;
              }
              p:nth-child(1){
                color:#333;
              }
              p:nth-child(2){
                color:#666;
                span{
                  color:#FF3131;
                }
              }
              p:nth-child(3){
                color:#666;
              }
            }
          }
        }
      }
      .time-box{
        width: 100%;
        overflow-y: auto;
        >ul{
          position: relative;
          height:355px;
          white-space: nowrap;
          display: inline-flex;
          >li{
            width:242px;
            height: 98px;
            float: left;
            position: relative;
            cursor: pointer;
            >p{
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 14px;
              margin-bottom: 14px;
            }
            >p:nth-of-type(1){

            }
            .sensor_val{
              color: #666666;
              >i{
                color: #FF3131;
              }
            }
            .sensor_timer{
              color: #666666;
              >i{
                color: #333333;
              }
            }
            //>p:nth-of-type(2){
            //  color: #666666;
            //  >i{
            //    color: #FF3131;
            //  }
            //}
            //>p:nth-of-type(3){
            //  color: #666666;
            //  >i{
            //    color: #333333;
            //  }
            //}
          }
          /*横线*/
          .ledgement{
            width:250px;
            background: #d2d2d2;
            height: 1px;
            position: absolute;
            left:0;
            bottom:-48%;
          }
          .ledgement_tow{
            width:250px;
            background: #d2d2d2;
            height: 1px;
            position: absolute;
            left:0;
            top:-48%;
          }
          //>li:nth-child(2n){
          //  margin-top:160px;
          //}
          /*点*/
          .dot{
            content: "";
            width: 56px;
            height: 56px;
            border-radius: 28px;
            background: #0183FA;
            position: absolute;
            left:20%;
            margin-left:-64px;
            bottom: 0;
            bottom:-74px;
            z-index: 1;
            border: 20px solid #fff;
          }
          .dot_tow{
            content: "";
            width: 56px;
            height: 56px;
            border-radius: 28px;
            background: #0183FA;
            position: absolute;
            left:20%;
            margin-left:-64px;
            top:-74px;
            z-index: 1;
            border: 20px solid #fff;
          }
          //>li:before{
          //  content: "";
          //  width: 56px;
          //  height: 56px;
          //  border-radius: 28px;
          //  background: #0183FA;
          //  position: absolute;
          //  left:20%;
          //  margin-left:-64px;
          //  bottom: 0;
          //  bottom:-60px;
          //  z-index: 1;
          //  border: 20px solid #fff;
          //}
          //>li:nth-child(2n):before{
          //  bottom: auto;top:-60px;
          //}
          /*风险趋势*/
          .risk_trend{

          }
          /*硬件执行动作*/
          .hardware{
            margin-top:160px;
          }
          //>li:after{
          //  content: "";  display: block; background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;bottom:-32%;
          //}
          //>li:nth-child(2n):after{
          //  top:-32%;
          //}
          //>li:last-child:after{
          //  content: "";  display: block; background: none;height: 1px;width: 100%;position: absolute;left:0;bottom:-32%;
          //}
          >li:first-child:before{
            content: "";
            width: 26px;
            height: 26px;
            border: 2px solid #0183FA;
            border-radius: 28px;
            background: #fff;
            position: absolute;
            left:20%;
            margin-left:-64px;
            bottom:-44px;
            z-index: 1;
          }
          >li:last-child:before{
            content: "";
            width: 26px;
            height: 26px;
            border: 2px solid #0183FA;
            border-radius: 28px;
            background: #fff;
            position: absolute;
            left:20%;
            margin-left:-64px;
            bottom:-44px;
            z-index: 1;
          }

        }


      }
    }
  }

}
</style>