384 lines
17 KiB
Vue
384 lines
17 KiB
Vue
<template>
|
|
<MyDialog v-if="show" v-model="show" width="1600px" height="850px" :class="'font-size-' + fontSize"
|
|
class="check-detection-dlg">
|
|
<template slot="title">
|
|
{{ title }}
|
|
</template>
|
|
<div>
|
|
<div class="font-size-tools">
|
|
<i class="set-font-size font-size2" @click="fontSize = 2" :class="fontSize == 2 ? 'active' : ''">
|
|
<svg class="icon svg-icon"
|
|
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
|
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
|
|
<path
|
|
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
|
|
fill="#fff" p-id="3687"></path>
|
|
</svg>
|
|
</i>
|
|
<i class="set-font-size font-size1" @click="fontSize = 1" :class="fontSize == 1 ? 'active' : ''">
|
|
<svg class="icon svg-icon"
|
|
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
|
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
|
|
<path
|
|
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
|
|
fill="#fff" p-id="3687"></path>
|
|
</svg>
|
|
</i>
|
|
<i class="set-font-size font-size0" @click="fontSize = 0" :class="fontSize == 0 ? 'active' : ''">
|
|
<svg class="icon svg-icon"
|
|
style="width: 32px !important;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
|
|
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3686">
|
|
<path
|
|
d="M839 875H735.3l-74.1-198.7H358.6L288.7 875H185l276.8-726h100.4L839 875zM632.1 594.3L522.3 292.4c-3.4-9.7-7.2-26.6-11.3-50.6h-2.3c-3.4 21.9-7.4 38.7-11.7 50.6L388.1 594.3h244z"
|
|
fill="#fff" p-id="3687"></path>
|
|
</svg>
|
|
</i>
|
|
</div>
|
|
<template v-if="dataTable.length>0">
|
|
<div class="data-list scroll" style="max-height:730px;overflow-y: auto;margin:12px 0px;overflow-x: hidden;" >
|
|
<div v-for="(it, idx) in dataTable" :key="idx" class="data-item"
|
|
:class="it.timeout ? 'time-out' : ''">
|
|
<div class="item-left">
|
|
<el-image ref="preview" style="width: 400px; " :preview-src-list="[it.detectionFile]" v-if="it.detectionFile"
|
|
:src="it.detectionFile + '.1000.jpg'">
|
|
</el-image>
|
|
<div v-else style="text-align: center;height:100%" class="left-imglist">
|
|
<template v-if="it.trustDeed||it.specimenPhoto">
|
|
<el-carousel>
|
|
<el-carousel-item>
|
|
<el-image ref="preview" style="width: 400px; " :preview-src-list="['/jhapi/'+it.trustDeed]" v-if="it.trustDeed"
|
|
:src="'/jhapi/'+it.trustDeed + '.1000.jpg'">
|
|
</el-image>
|
|
<div class="div-tip">委托单</div>
|
|
</el-carousel-item>
|
|
<el-carousel-item>
|
|
<el-image ref="preview" style="width: 400px; " :preview-src-list="['/jhapi/'+it.specimenPhoto]" v-if="it.specimenPhoto"
|
|
:src="'/jhapi/'+it.specimenPhoto + '.1000.jpg'">
|
|
</el-image>
|
|
<div class="div-tip">样品照片</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
|
|
|
|
</template>
|
|
<template v-else>
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无图片</div>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="item-right">
|
|
<el-col :span="fontSize==2?24:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">项目名称:</span>
|
|
<div class="div-text">{{ it.projectName }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?24:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">单位名称:</span>
|
|
<div class="div-text">{{ it.deptName }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?12:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">送检类型:</span>
|
|
<div class="div-text">{{ it.checkTypeName }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?12:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">材料名称:</span>
|
|
<div class="div-text">{{ it.materialName }}
|
|
<el-link v-if="it.attachmentFiles && it.attachmentFiles.length>0" type="primary" @click="downFiles(it.attachmentFiles)">下载附件</el-link>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?12:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">使用部位:</span>
|
|
<div class="div-text">{{ it.usePosition }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?24:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">取样数量:</span>
|
|
<div class="div-text">{{ it.sampleNum }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?12:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">合格证:</span>
|
|
<div class="div-text">
|
|
<el-tag v-if="it.qualifiedFlag == 'Y'" type="success">已提供</el-tag>
|
|
<el-tag v-else type="danger">未提供</el-tag>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?12:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">见证人:</span>
|
|
<div class="div-text">{{ it.witnessUser }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?24:24" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">实验室名称:</span>
|
|
<div class="div-text">{{ it.laboratoryName }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?12:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">送检时间:</span>
|
|
<div class="div-text">{{ it.checkTime|formatDate }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?12:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">检测结果:</span>
|
|
<div class="div-text">
|
|
<template v-if="it.detectionResult">
|
|
<el-tag v-if="it.detectionResult == '1'" type="success">合格</el-tag>
|
|
<el-tag v-else type="danger">不合格</el-tag>
|
|
</template>
|
|
<span v-else style="color: #67c23a;">送检中</span>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?24:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交用户:</span>
|
|
<div class="div-text">{{it.createByName}}({{ it.createBy }})</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?24:12" class="item-data">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">提交时间:</span>
|
|
<div class="div-text">{{ it.createTime|formatDate }}</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?24:12" class="item-data" v-if="it.updateBy">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">登记结果用户:</span>
|
|
<div class="div-text">{{it.updateByName}}({{ it.updateBy }})</div>
|
|
</el-col>
|
|
<el-col :span="fontSize==2?24:12" class="item-data" v-if="it.updateTime">
|
|
<img src="images/title_icon.png"><span class="sp-lbl sp-lbl2">登记结果时间:</span>
|
|
<div class="div-text">{{ it.updateTime|formatDate }}</div>
|
|
</el-col>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination layout="total,prev, pager, next" :hide-on-single-page="true"
|
|
@current-change="handleCurrentChange" :total="total" :page-size="size" :current-page.sync="index"
|
|
class="bg-pagination"></el-pagination>
|
|
</template>
|
|
<div v-else style="text-align: center;margin-top: 200px;">
|
|
<img src="images/nodata.png" style="width: 240px;">
|
|
<div style="text-align: center;">暂无数据</div>
|
|
</div>
|
|
</div>
|
|
</MyDialog>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import MyDialog from '../components/MyDialog'
|
|
export default {
|
|
components: {
|
|
MyDialog
|
|
},
|
|
data() {
|
|
return {
|
|
fontSize: 0,
|
|
title:'',
|
|
size: 10,
|
|
index: 1,
|
|
total: 0,
|
|
show: false,
|
|
dataTable: [],
|
|
opt:{}
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
downFiles(files){
|
|
files.forEach(item=>{
|
|
if (item) {
|
|
this.$api.downFile("/jhapi" + item, {}, item.substring(item.lastIndexOf("/") + 1));
|
|
}
|
|
})
|
|
},
|
|
handleCurrentChange(n) {
|
|
this.index = n;
|
|
this.loadData();
|
|
},
|
|
toggleNav(n) {
|
|
this.nav = n;
|
|
},
|
|
showDialog(opt) {
|
|
this.show = true
|
|
this.opt=opt;
|
|
this.loadData();
|
|
},
|
|
loadData(){
|
|
this.$api.checkDetection.getList({
|
|
...this.opt
|
|
},this.size,this.index).then(d=>{
|
|
this.total=d.total||0;
|
|
this.dataTable=(d.rows||[]).map(it=>{
|
|
it.attachmentFiles=this.$tryToJson(it.attachment,[]);
|
|
return it;
|
|
});
|
|
this.title="材料进场取样复试-"+['汇总','钢筋原材料','钢筋试拉件','混凝土试件','其他'][this.opt.checkType||0]+`[${this.dataTable.length}]`;
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" >
|
|
.check-detection-dlg {
|
|
.popup-project-introduction-min {
|
|
transform: translateY(100px);
|
|
position: relative;
|
|
}
|
|
|
|
.popup-project-introduction-details {
|
|
padding: 0px !important;
|
|
|
|
.quality-table {
|
|
padding: 0px !important;
|
|
}
|
|
|
|
.font-size-tools {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 100px;
|
|
}
|
|
}
|
|
|
|
&.font-size-2 {
|
|
.head-title-tab {
|
|
.head-nav {
|
|
font-size: 32px;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
padding: 0px 48px;
|
|
}
|
|
}
|
|
|
|
.item-data {
|
|
line-height: 64px;
|
|
font-size: 32px;
|
|
line-height: 64px;
|
|
|
|
.div-text {
|
|
line-height: 64px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
&.font-size-1 {
|
|
.head-title-tab {
|
|
.head-nav {
|
|
font-size: 24px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0px 30px;
|
|
}
|
|
}
|
|
|
|
.item-data {
|
|
line-height: 48px;
|
|
font-size: 24px;
|
|
line-height: 48px;
|
|
|
|
.div-text {
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.head-title-tab {
|
|
padding-top: 12px;
|
|
display: block;
|
|
width: 100%;
|
|
|
|
.head-nav {
|
|
background-size: 100% 100%;
|
|
display: inline-block;
|
|
width: auto;
|
|
padding: 0px 24px;
|
|
}
|
|
}
|
|
|
|
.data-list {
|
|
.data-item {
|
|
border-bottom: solid 1px #fff;
|
|
box-shadow: inset 7px 0px 11px 5px rgb(36 131 167 / 70%);
|
|
display: flex;
|
|
padding-left: 8px;
|
|
|
|
&.time-out {
|
|
box-shadow: inset 7px 0px 11px 5px rgb(167, 36, 36);
|
|
.text-state {
|
|
color: rgba(167, 36, 36,0.6) !important;
|
|
}
|
|
}
|
|
|
|
.item-left {
|
|
display: inline-flex;
|
|
width: 400px;
|
|
min-height: 220px;
|
|
align-items: center;
|
|
.left-imglist{
|
|
width: 100%;
|
|
height:100%;
|
|
.el-carousel{
|
|
height: 100%;
|
|
.el-carousel__item{
|
|
.div-tip{
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom:40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-state {
|
|
font-size: 32px;
|
|
position: absolute;
|
|
color: rgba(200, 200, 200, 0.2);
|
|
transform: rotate(45deg);
|
|
top: 60px;
|
|
left: calc(50% - 100px);
|
|
&.state4{
|
|
color: rgba(5, 248, 5, 0.5);
|
|
}
|
|
}
|
|
|
|
.item-right {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
width: calc(100% - 414px);
|
|
position: relative;
|
|
.el-tag{
|
|
font-size: unset;
|
|
height: unset;
|
|
line-height: unset;
|
|
}
|
|
.sp-lbl {
|
|
display: inline-block;
|
|
color: aquamarine;
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
.text-timeout {
|
|
position: absolute;
|
|
right: 0px;
|
|
font-size: 64px;
|
|
color: red;
|
|
transform: rotate(45deg);
|
|
top: 27px;
|
|
}
|
|
|
|
.item-data {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: solid 1px rgba(255, 255, 255, 0.1);
|
|
line-height: 36px;
|
|
|
|
.div-text {
|
|
display: inline-block;
|
|
width: calc(100% - 200px);
|
|
vertical-align: top;
|
|
white-space: break-spaces;
|
|
word-break: break-word;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}</style> |