<template>
|
<div class="wrap">
|
<div class="header">
|
<div class="header_name">中铁十四局通甬站前I标管片场拌合站</div>
|
</div>
|
<div class="container">
|
<div class="con_name">
|
<div class="line left"></div>
|
<div class="name">
|
<p class="p">{{ infoL.siloName }}</p>
|
<p class="p">{{ infoR.siloName }}</p>
|
</div>
|
<div class="line right"></div>
|
</div>
|
<div class="con_main">
|
<div class="con_main_item con_main_l">
|
<div class="placeholder"></div>
|
<div class="list_wrap">
|
<list :data="infoL.mixing"></list>
|
</div>
|
</div>
|
<div class="con_main_item con_main_c">
|
<div :class="`image ${infoL.percentImgName || ''}`">
|
<p>{{ infoL.siloName }}</p>
|
</div>
|
<div :class="`image ${infoR.percentImgName || ''}`">
|
<p>{{ infoR.siloName }}</p>
|
</div>
|
</div>
|
<div class="con_main_item con_main_r">
|
<div class="placeholder"></div>
|
<div class="list_wrap">
|
<list :data="infoR.mixing"></list>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import List from './components/List'
|
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: 'mixing',
|
data() {
|
return {
|
type: '',
|
infoL: {},
|
infoR: {},
|
percents: {
|
0: 'container_10',
|
10: 'container_10',
|
20: 'container_20',
|
40: 'container_40',
|
60: 'container_60',
|
80: 'container_80',
|
90: 'container_90',
|
100: 'container_100',
|
}
|
};
|
},
|
components: {
|
List
|
},
|
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 percentArr = Object.keys(this.percents)
|
this.$api.Infos.getMixing({types: this.type}).then(res => {
|
if (res.statusMsg === 'ok' && res.data && res.data.length) {
|
res.data.forEach((item, index) => {
|
if (item && item.mixing && item.mixing.percentage) {
|
let targetVal = +item.mixing.percentage
|
for (let index = 0; index < percentArr.length - 1; index++) {
|
const val = percentArr[index]
|
const valNext = percentArr[index + 1]
|
if (val <= targetVal && targetVal <= valNext) {
|
item.percentImgName = this.percents[val]
|
break
|
}
|
}
|
} else {
|
item.percentImgName = this.percents[0]
|
}
|
index === 0 && (this.infoL = item)
|
index === 1 && (this.infoR = item)
|
})
|
} else {
|
this.$message.warning('请检查网络或联系管理员!!!')
|
}
|
})
|
|
|
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
li {
|
list-style: none;
|
}
|
|
.wrap {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
font-size: 1rem;
|
background: #040A3F;
|
overflow: hidden;
|
}
|
|
.header {
|
position: absolute;
|
width: 100%;
|
height: 3rem;
|
text-align: center;
|
font-family: 'Microsoft YaHei';
|
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;
|
}
|
}
|
|
.container {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
position: absolute;
|
left: 20px;
|
right: 20px;
|
top: 3.6rem;
|
bottom: 20px;
|
color: #fff;
|
|
.con_name {
|
display: flex;
|
align-items: center;
|
height: 2.2rem;
|
|
.name {
|
width: 20rem;
|
display: flex;
|
justify-content: space-evenly;
|
|
.p {
|
height: 2rem;
|
padding: 0 2rem;
|
line-height: 2rem;
|
font-size: 1.2rem;
|
font-weight: bold;
|
white-space: nowrap;
|
background: url(../../assets/mixing/name_bg.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
.line {
|
flex: 1;
|
height: 14px;
|
|
&.left {
|
background: -webkit-linear-gradient(right, rgba(18, 99, 162, 1) 0, rgba(18, 99, 162, 0) 100%);
|
}
|
|
&.right {
|
background: -webkit-linear-gradient(left, rgba(18, 99, 162, 1) 0, rgba(18, 99, 162, 0) 100%);
|
}
|
}
|
}
|
|
.con_main {
|
margin-top: 10px;
|
flex: 1;
|
display: flex;
|
|
.con_main_item {
|
padding: 15px 15px 0 15px;
|
position: relative;
|
flex: 1;
|
|
&.con_main_l,
|
&.con_main_r {
|
background: url(../../assets/mixing/list_bg.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
|
&.con_main_l .placeholder {
|
width: 100%;
|
height: 8%;
|
background: url(../../assets/mixing/list_l_bg.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
|
&.con_main_r .placeholder {
|
width: 100%;
|
height: 8%;
|
background: url(../../assets/mixing/list_r_bg.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
|
&.con_main_c .image {
|
position: relative;
|
float: left;
|
width: 50%;
|
height: 100%;
|
min-height: 480px;
|
text-align: center;
|
|
> p {
|
position: absolute;
|
left: 50%;
|
top: 21%;
|
white-space: nowrap;
|
transform: translate(-50%, -50%);
|
}
|
|
&.container_10 {
|
background: url(../../assets/mixing/container_10.png) center 30% no-repeat;
|
background-size: auto 70%;
|
}
|
|
&.container_20 {
|
background: url(../../assets/mixing/container_20.png) center 30% no-repeat;
|
background-size: auto 70%;
|
}
|
|
&.container_40 {
|
background: url(../../assets/mixing/container_40.png) center 30% no-repeat;
|
background-size: auto 70%;
|
}
|
|
&.container_60 {
|
background: url(../../assets/mixing/container_60.png) center 30% no-repeat;
|
background-size: auto 70%;
|
}
|
|
&.container_80 {
|
background: url(../../assets/mixing/container_80.png) center 30% no-repeat;
|
background-size: auto 70%;
|
}
|
|
&.container_90 {
|
background: url(../../assets/mixing/container_90.png) center 30% no-repeat;
|
background-size: auto 70%;
|
}
|
|
&.container_100 {
|
background: url(../../assets/mixing/container_100.png) center 30% no-repeat;
|
background-size: auto 70%;
|
}
|
}
|
|
.list_wrap {
|
position: absolute;
|
top: 12%;
|
bottom: 0;
|
}
|
|
}
|
}
|
}
|
</style>
|
