|
@@ -1,147 +1,149 @@
|
|
|
<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></p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>化学品编号:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
+ <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 class="infoPage-left-text-box-one">
|
|
|
- <div>
|
|
|
- <p>CAS:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>别名:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <p>化学品编号:</p>
|
|
|
+ <p>{{infoData.joinNum}}</p>
|
|
|
</div>
|
|
|
- <div class="infoPage-left-text-box-one">
|
|
|
- <div>
|
|
|
- <p>化学品分类:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>纯度:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="infoPage-left-text-box-one">
|
|
|
+ <div>
|
|
|
+ <p>CAS:</p>
|
|
|
+ <p>{{infoData.casNum}}</p>
|
|
|
</div>
|
|
|
- <div class="infoPage-left-text-box-two">
|
|
|
- <p>形态:</p>
|
|
|
- <p></p>
|
|
|
+ <div>
|
|
|
+ <p>别名:</p>
|
|
|
+ <p>{{infoData.anotherName}}</p>
|
|
|
</div>
|
|
|
- <div class="infoPage-left-text-box-two">
|
|
|
- <p>属性:</p>
|
|
|
- <p></p>
|
|
|
+ </div>
|
|
|
+ <div class="infoPage-left-text-box-one">
|
|
|
+ <div>
|
|
|
+ <p>化学品分类:</p>
|
|
|
+ <p>{{infoData.classifyName}}</p>
|
|
|
</div>
|
|
|
- <div class="infoPage-left-text-box-one">
|
|
|
- <div>
|
|
|
- <p>标签类型:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>标签编号:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <p>纯度:</p>
|
|
|
+ <p>{{infoData.purity}}</p>
|
|
|
</div>
|
|
|
- <div class="infoPage-left-text-box-one">
|
|
|
- <div>
|
|
|
- <p>容量规格:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>容器规格:</p>
|
|
|
- <p></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 class="infoPage-left-text-box-one">
|
|
|
- <div>
|
|
|
- <p>过期时间:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <p>领用时效:</p>
|
|
|
- <p></p>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <p>标签编号:</p>
|
|
|
+ <p>{{infoData.tagCode}}</p>
|
|
|
</div>
|
|
|
- <div class="infoPage-left-text-box-two">
|
|
|
- <p>化学品柜:</p>
|
|
|
- <p></p>
|
|
|
+ </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 class="infoPage-left-text-box-two">
|
|
|
- <p>所在位置:</p>
|
|
|
+ </div>
|
|
|
+ <div class="infoPage-left-text-box-one">
|
|
|
+ <div>
|
|
|
+ <p>过期时间:</p>
|
|
|
+ <p>{{infoData.expirationTime}}</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>
|
|
|
+ </div>
|
|
|
+ <div class="table-title-box-one">
|
|
|
+ <p>领用时净重</p>
|
|
|
+ <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.operator}}</p>
|
|
|
+ <el-tooltip class="item" effect="dark" :content="infoData.outDetail.outUsers" placement="top">
|
|
|
+ <p>{{infoData.outDetail.outUsers}}</p>
|
|
|
+ </el-tooltip>
|
|
|
+ <p>{{infoData.outDetail.outType==1?'称重':(infoData.outDetail.outType==2?'录入':'')}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="infoPage-right-box scrollbar-box">
|
|
|
- <p class="infoPage-right-title">当前使用状态:aaaaaaaaaaaaaa</p>
|
|
|
- <div class="infoPage-right-data-box">
|
|
|
- <div class="title-button-max-box">
|
|
|
- <p></p>
|
|
|
- <p>领用</p>
|
|
|
- <p>2022-06-09 10:12:22</p>
|
|
|
- <p class="inquire-button-one" @click="lockVideo">操作视频</p>
|
|
|
- </div>
|
|
|
- <div class="table-title-box">
|
|
|
- <p>领用时净重</p>
|
|
|
- <p>损耗量</p>
|
|
|
- <p>领用净重</p>
|
|
|
- <p>操作人</p>
|
|
|
- <p>双人验证</p>
|
|
|
- <p>称重方式</p>
|
|
|
- </div>
|
|
|
- <div class="table-list-box">
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- </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>
|
|
|
+ </div>
|
|
|
+ <div class="table-title-box-two">
|
|
|
+ <p>本次使用量</p>
|
|
|
+ <p>剩余库存净重</p>
|
|
|
+ <p>操作人</p>
|
|
|
+ <p>双人验证</p>
|
|
|
+ <p>称重方式</p>
|
|
|
</div>
|
|
|
- <div class="infoPage-right-data-box">
|
|
|
- <div class="title-button-max-box">
|
|
|
- <p></p>
|
|
|
- <p>归还</p>
|
|
|
- <p>2022-06-09 10:12:22</p>
|
|
|
- <p class="inquire-button-one" @click="lockVideo">操作视频</p>
|
|
|
- </div>
|
|
|
- <div class="table-title-box">
|
|
|
- <p>领用时净重</p>
|
|
|
- <p>损耗量</p>
|
|
|
- <p>领用净重</p>
|
|
|
- <p>操作人</p>
|
|
|
- <p>双人验证</p>
|
|
|
- <p>称重方式</p>
|
|
|
- </div>
|
|
|
- <div class="table-list-box">
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- <p>100g</p>
|
|
|
- </div>
|
|
|
+ <div class="table-list-box-two">
|
|
|
+ <p>{{infoData.returnDetail.useStockNum}}</p>
|
|
|
+ <p>{{infoData.returnDetail.returnSuttle}}</p>
|
|
|
+ <p>{{infoData.operator}}</p>
|
|
|
+ <p>{{infoData.returnDetail.backUsers}}</p>
|
|
|
+ <p>{{infoData.returnDetail.returnType==1?'称重':(infoData.returnDetail.returnType==2?'录入':'')}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-dialog title="操作视频" :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>
|
|
|
+ <el-dialog title="操作视频" :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>
|
|
@@ -164,10 +166,20 @@
|
|
|
},
|
|
|
methods: {
|
|
|
//视频按钮
|
|
|
- lockVideo(type,row){
|
|
|
- let obj = {
|
|
|
- // type:type,
|
|
|
- // url:row.unLockVideo
|
|
|
+ lockVideo(type){
|
|
|
+ let obj = {};
|
|
|
+ if (type == 1){
|
|
|
+ if(!this.infoData.outDetail.outVideo){
|
|
|
+ this.msgError('操作视频异常无法观看');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ obj.url = this.infoData.outDetail.outVideo;
|
|
|
+ } else if(type == 2){
|
|
|
+ if(!this.infoData.returnDetail.returnVideo){
|
|
|
+ this.msgError('操作视频异常无法观看');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ obj.url = this.infoData.returnDetail.returnVideo;
|
|
|
}
|
|
|
this.$set(this,'videoData',obj);
|
|
|
this.videoType = true;
|
|
@@ -296,7 +308,7 @@
|
|
|
margin:20px 10px 0 0;
|
|
|
}
|
|
|
}
|
|
|
- .table-title-box{
|
|
|
+ .table-title-box-one{
|
|
|
width:755px;
|
|
|
height:60px;
|
|
|
background: #f5f5f5;
|
|
@@ -321,7 +333,7 @@
|
|
|
}
|
|
|
p:nth-child(4){
|
|
|
text-align: center;
|
|
|
- width:132px;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
p:nth-child(5){
|
|
|
text-align: center;
|
|
@@ -329,10 +341,10 @@
|
|
|
}
|
|
|
p:nth-child(6){
|
|
|
text-align: center;
|
|
|
- width:131px;
|
|
|
+ width:130px;
|
|
|
}
|
|
|
}
|
|
|
- .table-list-box{
|
|
|
+ .table-list-box-one{
|
|
|
width:755px;
|
|
|
height:70px;
|
|
|
border:1px solid #e0e0e0;
|
|
@@ -357,15 +369,84 @@
|
|
|
}
|
|
|
p:nth-child(4){
|
|
|
text-align: center;
|
|
|
- width:132px;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
p:nth-child(5){
|
|
|
text-align: center;
|
|
|
width:136px;
|
|
|
+ display:block;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+
|
|
|
}
|
|
|
p:nth-child(6){
|
|
|
text-align: center;
|
|
|
- width:131px;
|
|
|
+ width:130px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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:130px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ text-align: center;
|
|
|
+ width:118px;
|
|
|
+ }
|
|
|
+ p:nth-child(3){
|
|
|
+ text-align: center;
|
|
|
+ width:132px;
|
|
|
+ }
|
|
|
+ p:nth-child(4){
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ p:nth-child(5){
|
|
|
+ text-align: center;
|
|
|
+ width:130px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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:130px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ text-align: center;
|
|
|
+ width:118px;
|
|
|
+ }
|
|
|
+ p:nth-child(3){
|
|
|
+ text-align: center;
|
|
|
+ width:132px;
|
|
|
+ }
|
|
|
+ p:nth-child(4){
|
|
|
+ text-align: center;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ p:nth-child(5){
|
|
|
+ text-align: center;
|
|
|
+ width:130px;
|
|
|
}
|
|
|
}
|
|
|
}
|