<template>
|
<div class="scan_detail_">
|
<div class="scan_bear_header">
|
<el-tabs v-model="activeName" @tab-click="jumpPosition">
|
<el-tab-pane :label="item.name" :name="item.refName" v-for="(item,index) in tabGroups" :key="index"></el-tab-pane>
|
</el-tabs>
|
</div>
|
<div class="scan_bear_main" @scroll="onScroll" :style="'overflow-x:hidden;overflow-y:auto;height:'+contentStyleObj.height">
|
<div :ref="tabGroups[0].refName" class="scroll-item">
|
<div class="scan_bear_headers">管片信息</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">项目名称：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.proName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">环号：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.ringNum}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">管片编号：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.pipeNum}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">尺寸：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.sizeName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">配筋：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.reinforcementName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">块号：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.blockNumName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">注浆孔：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.groutingHolesName}}</div>
|
</div>
|
</div>
|
<div :ref="tabGroups[1].refName" class="scroll-item" style="margin-top:20px">
|
<div class="scan_bear_headers">钢筋笼信息</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">钢筋笼编号：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.produceNumber}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">尺寸：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.sizeName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">配筋：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.reinforcementName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">块号：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.blockNumName}}</div>
|
</div>
|
<!-- <div class="scan_bear_rows">
|
<div class="scan_bear_text">生产班组：</div>
|
<div class="scan_bear_data">{{massLists.pipeNum}}</div>
|
</div> -->
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">制作人：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.createUserName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">生产日期：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.printTime}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">质检人：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.steelCheckUserName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">质检日期：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.steelCheckTime}}</div>
|
</div>
|
</div>
|
<div :ref="tabGroups[2].refName" class="scroll-item" style="margin-top:20px">
|
<div class="scan_bear_headers">模具信息</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">模具编号：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.mouldNum}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">模具循环次数：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.currentCycleTime}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">模具类型：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.blockNumName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">模具尺寸：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.sizeName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">模具型号：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.mouldCode}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">模具转向：</div>
|
<div class="scan_bear_data">{{massLists&&massLists.turnName}}</div>
|
</div>
|
</div>
|
<div :ref="tabGroups[3].refName" class="scroll-item" style="margin-top:20px">
|
<div class="scan_bear_headers">生产信息</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">模具编号：</div>
|
<div class="scan_bear_data">{{productLists&&productLists.mouldNum}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">入模人员：</div>
|
<div class="scan_bear_data">{{productLists&&productLists.intoModUser}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">入模时间：</div>
|
<div class="scan_bear_data">{{productLists&&productLists.intoModTime}}</div>
|
</div>
|
<!-- <div class="scan_bear_rows">
|
<div class="scan_bear_text">浇筑时间：</div>
|
<div class="scan_bear_data">{{productLists&&productLists.pouringTime}}</div>
|
</div> -->
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">成品质检员：</div>
|
<div class="scan_bear_data">{{productLists&&productLists.checkName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">成品质检时间：</div>
|
<div class="scan_bear_data">{{productLists&&productLists.checkTime}}</div>
|
</div>
|
</div>
|
<div :ref="tabGroups[4].refName" class="scroll-item" style="margin-top:20px">
|
<div class="scan_bear_headers">养护信息</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">入池时间：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.create_time}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">水养池名称：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.water_cultivated_name}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">入池操作人：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.inCulUser}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">出池时间：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.outTime}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">出池操作人：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.outCulUser}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">入库时间：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.createTime}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">堆场单元：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.unitName}}</div>
|
</div>
|
<div class="scan_bear_rows">
|
<div class="scan_bear_text">入库操作人：</div>
|
<div class="scan_bear_data">{{curingLists&&curingLists.createUser}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
export default {
|
data(){
|
return{
|
tabIndex:'0',
|
contentStyleObj:{
|
height:'100px'
|
},
|
activeName:"setOneRef",
|
tabGroups:[//菜单栏点击切换
|
{
|
name:'基本信息',
|
refName:'setOneRef'
|
},
|
{
|
name:'钢筋笼信息',
|
refName:'setTwnRef'
|
},
|
{
|
name:'模具信息',
|
refName:'setThreeRef'
|
},
|
{
|
name:'生产信息',
|
refName:'setFourRef'
|
},
|
{
|
name:'养护信息',
|
refName:'setFiveRef'
|
},
|
],
|
productLists:[],//生产信息
|
massLists:[],//质量追溯
|
curingLists:[],//养护信息
|
url:null,//地址中的参数
|
}
|
},
|
created(){
|
this.getHight()
|
window.addEventListener('resize',this.getHight)
|
},
|
mounted(){
|
window.document.title="质量追溯"
|
this.getInfos()
|
},
|
destroyed(){
|
window.removeEventListener('resize',this.getHight)
|
},
|
methods:{
|
//获取信息
|
getInfos(){
|
this.url = window.location.href.split('?')[1].split('=')[1]
|
//获取生产信息
|
this.$api.Scan.searchBearInfo({num:this.url}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.productLists = res.data[0]
|
}else{
|
this.$message.warnning(res.statusMsg)
|
}
|
})
|
//获取质量追溯
|
this.$api.Scan.searchMassInfo({num:this.url}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.massLists = res.data
|
}else{
|
this.$message.warnning(res.statusMsg)
|
}
|
})
|
//获取养护信息
|
this.$api.Scan.searchCuringInfo({num:this.url}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.curingLists = res.data
|
}else{
|
this.$message.warnning(res.statusMsg)
|
}
|
})
|
},
|
//跳转到对应位置
|
jumpPosition(tab){
|
let target = document.querySelector('.scan_bear_main')
|
let scrollItems = document.querySelectorAll('.scroll-item')
|
// 判断滚动条是否滚动到底部
|
if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
|
this.tabIndex = tab.index.toString()
|
}
|
let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
|
let distance = document.querySelector('.scan_bear_main').scrollTop // 滚动条距离滚动区域顶部的距离
|
// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
|
// 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
|
// 计算每一小段的距离
|
let step = totalY / 50
|
if (totalY > distance) {
|
smoothDown(document.querySelector('.scan_bear_main'))
|
} else {
|
let newTotal = distance - totalY
|
step = newTotal / 50
|
smoothUp(document.querySelector('.scan_bear_main'))
|
}
|
|
// 参数element为滚动区域
|
function smoothDown(element) {
|
if (distance < totalY) {
|
distance += step
|
element.scrollTop = distance
|
setTimeout(smoothDown.bind(this, element), 10)
|
} else {
|
element.scrollTop = totalY
|
}
|
}
|
|
// 参数element为滚动区域
|
function smoothUp(element) {
|
if (distance > totalY) {
|
distance -= step
|
element.scrollTop = distance
|
setTimeout(smoothUp.bind(this, element), 10)
|
} else {
|
element.scrollTop = totalY
|
}
|
}
|
},
|
//滚动条滚动
|
onScroll(e){
|
let scrollItems = document.querySelectorAll('.scroll-item')
|
for(let i=scrollItems.length - 1;i>=0;i--){
|
//判断滚动条滚动距离是否大于当前滚动项可滚动距离
|
let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop - 1
|
if(judge){
|
this.tabIndex = i.toString()
|
this.activeName = this.tabGroups[this.tabIndex].refName
|
break
|
}else{
|
this.activeName = this.tabGroups[this.tabIndex+1].refName
|
}
|
}
|
},
|
//获取高度
|
getHight(){
|
this.contentStyleObj.height = window.innerHeight - 190 +'px'
|
},
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
::v-deep .el-tabs__header{
|
background-color: rgba(61, 200, 255, .32);
|
}
|
::v-deep .el-tabs__nav-wrap::after{
|
background-color: rgba(61, 200, 255, .32);
|
}
|
::v-deep .el-tabs__item.is-active{
|
color:rgba(61, 200, 255, 1);
|
font-size: 15px;
|
}
|
::v-deep .el-tabs__active-bar{
|
background-color: rgba(61, 200, 255, 1);
|
left: 0px;
|
}
|
::v-deep .el-tabs__item{
|
font-size: 14px;
|
height: 50px!important;
|
line-height: 50px!important;
|
padding: 0 15px !important;
|
color: rgba(255, 255, 255, .72);
|
}
|
.scan_detail_{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
background-color: #0C264A;
|
|
.scan_bear_header{
|
height: 55px;
|
}
|
.scan_bear_main{
|
padding: 10px 20px;
|
flex: 1;
|
|
.scan_bear_headers{
|
line-height: 35px;
|
color: rgba(255, 255, 255, .88);
|
font-size: 16px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
background:url("../../assets/scan/scan_header_bg.png") no-repeat;
|
background-size: 100% 100%;
|
background-position: center;
|
}
|
.scan_bear_rows{
|
padding: 10px 15px;
|
display: flex;
|
background: url("../../assets/scan/scan_main_rowbg.png") no-repeat;
|
background-size: 100% 100%;
|
margin-top: 10px;
|
.scan_bear_text{
|
font-size: 15px;
|
width: 110px;
|
flex: none;
|
display: flex;
|
align-items: center;
|
color: rgba(255,255,255,.72);
|
}
|
.scan_bear_data{
|
font-size: 15px;
|
flex: 1;
|
color: #3DC8FF;
|
}
|
}
|
}
|
}
|
</style>
|
