<template>
|
<div class="wrap">
|
<div class="header">
|
<div class="header_name">中铁十四局通甬站前I标管片场拌合站</div>
|
</div>
|
<div class="table">
|
<div class="row title">{{ info.signboardName }}</div>
|
|
<div class="row">
|
<div class="name">工程名称</div>
|
<div class="value">{{ info.proName }}</div>
|
</div>
|
|
<div class="row">
|
<div class="name">施工单位</div>
|
<div class="value">{{ info.constructionUnit }}</div>
|
</div>
|
|
<div class="row line">
|
<div>
|
<div class="name">施工日期</div>
|
<div class="value">{{ info.saveStamp }}</div>
|
</div>
|
<div>
|
<div class="name">施工部位</div>
|
<div class="value">{{ info.construction }}</div>
|
</div>
|
</div>
|
|
<div class="row" v-for="item in dataLists" :key="item.name">
|
<div class="name">{{ item.name }}</div>
|
<div class="column">
|
<div class="column-item" v-for="(sub, index) in item.value" :key="index">{{ sub }}</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
const interval = function (fn, Vue) {
|
let timer = setInterval(
|
(() => {
|
fn()
|
return fn
|
})(),
|
1000 * 60 * 1
|
)
|
if (Vue) {
|
Vue.$once('hook:beforeDestroy', function () {
|
timer && clearInterval(timer)
|
})
|
}
|
}
|
export default {
|
name: 'Page2',
|
data() {
|
return {
|
info: {
|
signboardName: '', // 标识排
|
proName: '', // 工程名称
|
constructionUnit: '', // 施工单位
|
saveStamp: '', // 施工日期
|
construction: '', // 施工部位
|
},
|
dataLists: [
|
{name: '材料名称', type: 'dictName', value: []}, // 材料名称
|
{name: '规格型号', type: 'spec', value: []}, // 规格型号
|
{name: '生产厂家', type: 'manufacturer', value: []}, // 生产厂家
|
{name: '材料含水率(%)', type: 'watFull', value: []}, // 含水率
|
{name: '理论用量(kg/m³)', type: 'planAmnt', value: []}, // 理论用量
|
{name: '实际用量(kg/m³)', type: 'factAmnt', value: []}, // 实际用量
|
]
|
}
|
},
|
beforeCreate() {
|
this.$http = this.$api.Infos
|
},
|
beforeRouteEnter(to, form, next) {
|
const {path} = to
|
|
const type = path.slice(-1)
|
|
next(vm => {
|
vm.type = type
|
interval(vm.getLists, vm)
|
})
|
},
|
mounted() {
|
let width = document.getElementsByClassName('wrap')[0].clientWidth
|
let $html = document.getElementsByTagName('html')[0]
|
let fontsize = width / 1920 * 35.2
|
$html.style.fontSize = `${fontsize}px`
|
window.onresize = () => {
|
let width = document.getElementById('app').clientWidth
|
let fontsize = width / 1920 * 35.2
|
$html.style.fontSize = `${fontsize}px`
|
}
|
},
|
beforeDestroy() {
|
let $html = document.getElementsByTagName('html')[0]
|
$html.style.fontSize = ''
|
},
|
methods: {
|
getLists() {
|
const params = {
|
pageNum: --this.type, // 传 0 1对应两个页面
|
pageSize: 1,
|
}
|
this.$api.Infos.getMixRatio(params).then(res => {
|
if (res.statusMsg === 'ok' && res.data) {
|
const {list} = res.data
|
if (list && list.length) {
|
const item = list[0]
|
const {tmixingConsumes} = item
|
|
this.info.signboardName = item.signboardName
|
this.info.proName = item.proName
|
this.info.constructionUnit = item.constructionUnit
|
|
if (tmixingConsumes && tmixingConsumes.length) {
|
this.info.saveStamp = tmixingConsumes[0].saveStamp
|
this.info.construction = tmixingConsumes[0].construction
|
|
tmixingConsumes.forEach(item => {
|
this.dataLists.forEach(val => {
|
item[val.type] && val.value.push(item[val.type])
|
})
|
})
|
}
|
}
|
} else {
|
this.$message.warning('请检查网络或联系管理员!!!')
|
}
|
})
|
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.wrap {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
font-size: 1rem;
|
background: #040A3F;
|
overflow: hidden;
|
}
|
|
.header {
|
position: absolute;
|
top: 0;
|
width: 100%;
|
height: 3rem;
|
text-align: center;
|
color: #fff;
|
background: url('../../assets/mixing/header.png') no-repeat center center;
|
background-size: 100% auto;
|
|
.header_name {
|
font-size: 1.6rem;
|
font-weight: bold;
|
line-height: 3.2rem;
|
letter-spacing: 2px;
|
text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05);
|
background: -webkit-linear-gradient(90deg, #2AC0FF 0%, #FFFFFF 70%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
|
.table {
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
top: 4rem;
|
bottom: 2rem;
|
left: 2rem;
|
right: 2rem;
|
font-size: 0.8rem;
|
color: #fff;
|
|
.title {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #BEE2F0;
|
background: rgba(1, 142, 196, .35);
|
}
|
|
.row {
|
flex: 1;
|
width: 100%;
|
height: 2rem;
|
margin: 0 -1px -1px 0;
|
text-align: center;
|
line-height: 2rem;
|
border: 1px solid #01B3EF;
|
|
.name {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
float: left;
|
width: 8rem;
|
height: 100%;
|
margin: -1px -1px -1px 0;
|
color: #BEE2F0;
|
border: 1px solid #01B3EF;
|
background: rgba(1, 142, 196, .75);
|
box-sizing: unset;
|
}
|
|
.value {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.column {
|
display: flex;
|
height: 100%;
|
|
.column-item {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex: 1;
|
margin: -1px -1px -1px 0;
|
border: 1px solid #01B3EF;
|
}
|
}
|
}
|
|
.row.line {
|
display: flex;
|
|
> div {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
