FE-V2-PC/src/views/studentViews/chemicalManagement/studentUsageRecord/infoPage.vue

<template>
    <div class="infoPage">
      <div class="title-box">
        <p>使用详情</p>
        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </div>
      <div class="infoPage-max-box">
        <div class="infoPage-left-box scrollbar-box">
          <div class="infoPage-left-text-box-one">
            <div>
              <p>化学品名称：</p>
              <p>{{infoData.chemicalName}}</p>
            </div>
            <div>
              <p>化学品编号：</p>
              <p>{{infoData.joinNum}}</p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>CAS：</p>
              <p>{{infoData.casNum}}</p>
            </div>
            <div>
              <p>别名：</p>
              <p>{{infoData.anotherName}}</p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>化学品分类：</p>
              <p>{{infoData.classifyName}}</p>
            </div>
            <div>
              <p>纯度：</p>
              <p>{{infoData.purity}}</p>
            </div>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>形态：</p>
            <p>{{infoData.chemicalShapeName}}</p>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>属性：</p>
            <p>{{infoData.classifyAttribute}}</p>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>标签类型：</p>
              <p>{{infoData.labelType == 1?'RFID':(infoData.labelType == 2?'二维码':'')}}</p>
            </div>
            <div>
              <p>标签编号：</p>
              <p>{{infoData.tagCode}}</p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>容量规格：</p>
              <p>{{infoData.chemicalAmountUnit}}</p>
            </div>
            <div>
              <p>容器规格：</p>
              <p>{{infoData.tareUnit}}</p>
            </div>
          </div>
          <div class="infoPage-left-text-box-one">
            <div>
              <p>过期时间：</p>
              <p>{{infoData.expirationTime}} 丨 30天前提醒</p>
            </div>
            <div>
              <p>领用时效：</p>
              <p>{{infoData.collectHour&&infoData.collectMinute?infoData.collectHour+'小时'+infoData.collectMinute+'分钟':(
                !infoData.collectHour&&infoData.collectMinute?infoData.collectMinute+'分钟':(
                infoData.collectHour&&!infoData.collectMinute?infoData.collectHour+'小时':''))}}</p>
            </div>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>化学品柜：</p>
            <p>{{infoData.cabinetName}}</p>
          </div>
          <div class="infoPage-left-text-box-two">
            <p>所在位置：</p>
            <p>{{infoData.posi}}</p>
          </div>
        </div>
        <div class="infoPage-right-box scrollbar-box">
          <p class="infoPage-right-title">当前使用状态：{{infoData.useStatus}}</p>
          <div class="infoPage-right-data-box" v-if="infoData.outDetail">
            <div class="title-button-max-box">
              <p></p>
              <p>领用</p>
              <p>{{infoData.collectTime}}</p>
              <p class="inquire-button-one" @click="lockVideo(1)">操作视频</p>
              <p class="inquire-button-one" @click="lockVideo(3)">开关锁视频</p>
            </div>
            <div class="table-title-box-one">
              <p>领用时库存净重</p>
              <p>损耗量</p>
              <p>领用净重</p>
              <p>双人验证</p>
              <p>称重方式</p>
            </div>
            <div class="table-list-box-one">
              <p>{{infoData.outDetail.stockSuttle}}</p>
              <p>{{infoData.outDetail.lossAmount}}</p>
              <p>{{infoData.outDetail.collectSuttle}}</p>
              <p>{{infoData.outDetail.outUsers}}</p>
              <p>{{infoData.outDetail.outType==1?'称重':(infoData.outDetail.outType==2?'录入':'')}}</p>
            </div>
          </div>
          <div class="infoPage-right-data-box" v-if="infoData.returnDetail">
            <div class="title-button-max-box">
              <p></p>
              <p>归还</p>
              <p>{{infoData.returnTime}}</p>
              <p class="inquire-button-one" @click="lockVideo(2)">操作视频</p>
              <p class="inquire-button-one" @click="lockVideo(4)">开关锁视频</p>
            </div>
            <div class="table-title-box-two">
              <p>本次使用量</p>
              <p>剩余库存净重</p>
              <p>双人验证</p>
              <p>称重方式</p>
            </div>
            <div class="table-list-box-two">
              <p>{{infoData.returnDetail.useStockNum}}</p>
              <p>{{infoData.returnDetail.returnSuttle}}</p>
              <p>{{infoData.returnDetail.backUsers}}</p>
              <p>{{infoData.returnDetail.returnType==1?'称重':(infoData.returnDetail.returnType==2?'录入':'')}}</p>
            </div>
          </div>
        </div>
      </div>
      <el-dialog :title="videoTitle" :visible.sync="videoType" v-if="videoType"
                 width="840px" append-to-body id="operationRecord-dialog-box">
        <video style="width:800px;height:450px;" controls="" autoplay="" name="media" :poster="videoCover">
          <source :src="videoData.url" type="video/mp4">
        </video>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "infoPage",
    props:{
      infoData:{},
    },
    data(){
      return {
        videoCover:process.env.VUE_APP_BASE_API + localStorage.getItem('videoCover'),
        videoType:false,
        videoData:{},
        videoTitle:"",
      }
    },
    created() {

    },
    mounted(){

    },
    methods: {
      //视频按钮
      lockVideo(type){
        let obj = {};
        if (type == 1){
          //领用操作视频
          if(!this.infoData.outDetail.outVideo){
            this.msgError('操作视频异常无法观看');
            return
          }
          this.$set(this,'videoTitle','操作视频');
          obj.url = window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/admin/" + this.infoData.outDetail.outVideo;
        } else if(type == 2){
          //归还操作视频
          if(!this.infoData.returnDetail.returnVideo){
            this.msgError('操作视频异常无法观看');
            return
          }
          this.$set(this,'videoTitle','操作视频');
          obj.url = window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/admin/" + this.infoData.returnDetail.returnVideo;
        } else if(type == 3){
          //领用开关锁视频
          if(!this.infoData.outDetail.outLockVideo){
            this.msgError('开关锁视频异常无法观看');
            return
          }
          this.$set(this,'videoTitle','开关锁视频');
          obj.url = window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/admin/" + this.infoData.outDetail.outLockVideo;
        } else if(type == 4){
          //归还开关锁视频
          if(!this.infoData.returnDetail.returnLockVideo){
            this.msgError('开关锁视频异常无法观看');
            return
          }
          this.$set(this,'videoTitle','开关锁视频');
          obj.url = window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/admin/" + this.infoData.returnDetail.returnLockVideo;
        }
        this.$set(this,'videoData',obj);
        this.videoType = true;
      },
      backPage(){
        this.$parent.goPageInfo(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden!important;
    p{
      margin:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .infoPage-max-box{
      flex:1;
      display: flex;
      overflow: hidden;
      font-weight: 500;
      .infoPage-left-box{
        flex:1;
        margin:44px 22px 37px 80px;
        padding:13px 0;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .infoPage-left-text-box-one{
          display: flex;
          div:nth-child(1){
            flex:1;
          }
          div{
            display: flex;
            p{
              font-size:14px;
              line-height:56px;
            }
            p:nth-child(1){
              color:#333;
              text-align: right;
              width:116px;
            }
            p:nth-child(2){
              color:#666;
              flex:1;
            }
          }
          div:nth-child(2){
            width:260px;
          }
        }
        .infoPage-left-text-box-two{
          display: flex;
          p{
            font-size:14px;
            line-height:56px;
          }
          p:nth-child(1){
            color:#333;
            text-align: right;
            width:116px;
          }
          p:nth-child(2){
            color:#666;
            flex:1;
          }
        }
      }
      .infoPage-right-box{
        width:839px;
        margin:44px 80px 37px 0;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .infoPage-right-title{
          line-height:60px;
          margin:0 24px;
          font-size:16px;
        }
        .infoPage-right-data-box{
          width:792px;
          margin:0 auto;
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
          padding-bottom:22px;
          border-radius:10px;
          margin-bottom:21px;
          .title-button-max-box{
            width:755px;
            margin:0 auto;
            height:80px;
            display: flex;
            font-size:16px;
            p:nth-child(1){
              background: #0045AF;
              width:3px;
              height:14px;
              margin:33px 0;
              margin-right:12px;
              margin-left:7px;
            }
            p:nth-child(2){
              line-height:80px;
              margin-right:27px;
            }
            p:nth-child(3){
              line-height:80px;
              flex:1;
            }
            p:nth-child(4){
              width:100px;
              line-height:40px;
              margin:20px 10px 0 0;
            }
            p:nth-child(5){
              width:100px;
              line-height:40px;
              margin:20px 10px 0 0;
            }
          }
          .table-title-box-one{
            width:755px;
            height:60px;
            background: #f5f5f5;
            margin:0 auto;
            display: flex;
            p{
              color:#333;
              font-size:16px;
              line-height:60px;
            }
            p:nth-child(1){
              text-align: center;
              width:130px;
            }
            p:nth-child(2){
              text-align: center;
              width:108px;
            }
            p:nth-child(3){
              text-align: center;
              width:118px;
            }
            p:nth-child(4){
              text-align: center;
              flex: 1;
            }
            p:nth-child(5){
              text-align: center;
              width:136px;
            }
          }
          .table-list-box-one{
            width:755px;
            height:70px;
            border:1px solid #e0e0e0;
            margin:0 auto;
            display: flex;
            p{
              color:#333;
              font-size:16px;
              line-height:70px;
            }
            p:nth-child(1){
              text-align: center;
              width:130px;
            }
            p:nth-child(2){
              text-align: center;
              width:108px;
            }
            p:nth-child(3){
              text-align: center;
              width:118px;
            }
            p:nth-child(4){
              text-align: center;
              flex: 1;
            }
            p:nth-child(5){
              text-align: center;
              width:136px;
            }
          }
          .table-title-box-two{
            width:755px;
            height:60px;
            background: #f5f5f5;
            margin:0 auto;
            display: flex;
            p{
              color:#333;
              font-size:16px;
              line-height:60px;
            }
            p:nth-child(1){
              text-align: center;
              width:170px;
            }
            p:nth-child(2){
              text-align: center;
              width:148px;
            }
            p:nth-child(3){
              text-align: center;
              flex: 1;
            }
            p:nth-child(4){
              text-align: center;
              width:172px;
            }
          }
          .table-list-box-two{
            width:755px;
            height:70px;
            border:1px solid #e0e0e0;
            margin:0 auto;
            display: flex;
            p{
              color:#333;
              font-size:16px;
              line-height:70px;
            }
            p:nth-child(1){
              text-align: center;
              width:170px;
            }
            p:nth-child(2){
              text-align: center;
              width:148px;
            }
            p:nth-child(3){
              text-align: center;
              flex: 1;
            }
            p:nth-child(4){
              text-align: center;
              width:172px;
            }
          }
        }
      }
    }
  }
</style>