229 lines
7.4 KiB
Vue
229 lines
7.4 KiB
Vue
<template>
|
|
<div class="dry_wraper">
|
|
<div class="dry_content">
|
|
<div class="dry_item_wraper">
|
|
<div class="dry_title">冷却输送线</div>
|
|
<div class="dry_item">
|
|
<div class="dry_hj fl" v-for="e in outKilnInfoVos" :key="e.vehicleCode" :class="e.active ? 'dry_hj_active' : ''">
|
|
<div class="dry_hj_i">
|
|
<div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
|
|
<div v-show="e.active" class="mater_info">
|
|
<div class="mater_p p2">{{e.materialCode}}</div>
|
|
<div class="mater_p p3">{{ e.materialModel }}</div>
|
|
<div class="mater_p p4">{{ e.materialQty }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<flow-svg direction="pathLeft"></flow-svg>
|
|
</div>
|
|
<div class="dry_item_wraper">
|
|
<div class="dry_title">1号窑</div>
|
|
<div class="dry_item">
|
|
<div class="dry_hj dry_hj_1 fr" v-for="e in oneKilnInfoVos" :key="e.vehicleCode" :class="e.active ? 'dry_hj_active' : ''">
|
|
<div class="dry_hj_i">
|
|
<div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
|
|
<div v-show="e.active" class="mater_info">
|
|
<div class="mater_p p2">{{e.materialCode}}</div>
|
|
<div class="mater_p p3">{{ e.materialModel }}</div>
|
|
<div class="mater_p p4">{{ e.materialQty }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<flow-svg direction="pathRight"></flow-svg>
|
|
</div>
|
|
<div class="dry_item_wraper">
|
|
<div class="dry_title">2号窑</div>
|
|
<div class="dry_item">
|
|
<div class="dry_hj dry_hj_1 fr" v-for="e in twoKilnInfoVos" :key="e.vehicleCode" :class="e.active ? 'dry_hj_active' : ''">
|
|
<div class="dry_hj_i">
|
|
<div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
|
|
<div v-show="e.active" class="mater_info">
|
|
<div class="mater_p p2">{{e.materialCode}}</div>
|
|
<div class="mater_p p3">{{ e.materialModel }}</div>
|
|
<div class="mater_p p4">{{ e.materialQty }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<flow-svg direction="pathRight"></flow-svg>
|
|
</div>
|
|
<div class="dry_item_wraper">
|
|
<div class="dry_title">进窑输送线</div>
|
|
<div class="dry_item">
|
|
<div class="dry_hj fl" v-for="e in inKilnInfoVos" :key="e.vehicleCode" :class="e.active ? 'dry_hj_active' : ''">
|
|
<div class="dry_hj_i">
|
|
<div v-show="e.active" class="p1">{{ e.vehicleCode }}</div>
|
|
<div v-show="e.active" class="mater_info">
|
|
<div class="mater_p p2">{{e.materialCode}}</div>
|
|
<div class="mater_p p3">{{ e.materialModel }}</div>
|
|
<div class="mater_p p4">{{ e.materialQty }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<flow-svg direction="pathLeft"></flow-svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import FlowSvg from '@components/flowsvg.vue'
|
|
import { klineInfo } from '@js/mork2.js'
|
|
export default {
|
|
components: {
|
|
FlowSvg
|
|
},
|
|
data () {
|
|
return {
|
|
interTime: this.$store.getters.setTime,
|
|
timer: null,
|
|
outKilnInfoVos: [], // 出窑缓存线信息
|
|
inKilnInfoVos: [], // 入窑缓存线
|
|
oneKilnInfoVos: [], // 窑1
|
|
twoKilnInfoVos: [] // 窑2
|
|
}
|
|
},
|
|
created () {
|
|
this._klineInfo()
|
|
this.refresh()
|
|
},
|
|
beforeDestroy () {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
},
|
|
destroyed () {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
},
|
|
methods: {
|
|
refresh () {
|
|
this.timer = setInterval(() => {
|
|
this._klineInfo()
|
|
}, this.interTime)
|
|
},
|
|
async _klineInfo () {
|
|
let res = await klineInfo()
|
|
this.outKilnInfoVos = [...res.outKilnInfoVos]
|
|
this.outKilnInfoVos.map(el => {
|
|
this.$set(el, 'active', true)
|
|
})
|
|
for (let i = this.outKilnInfoVos.length; i < 39; i++) {
|
|
this.outKilnInfoVos.push({vehicleCode: `out${i}`, active: false})
|
|
}
|
|
this.inKilnInfoVos = [...res.inKilnInfoVos]
|
|
this.inKilnInfoVos.map(el => {
|
|
this.$set(el, 'active', true)
|
|
})
|
|
for (let i = this.inKilnInfoVos.length; i < 40; i++) {
|
|
this.inKilnInfoVos.push({vehicleCode: `in${i}`, active: false})
|
|
}
|
|
this.oneKilnInfoVos = [...res.oneKilnInfoVos]
|
|
this.oneKilnInfoVos.map(el => {
|
|
this.$set(el, 'active', true)
|
|
})
|
|
for (let i = this.oneKilnInfoVos.length; i < 37; i++) {
|
|
this.oneKilnInfoVos.push({vehicleCode: `yao1${i}`, active: false})
|
|
}
|
|
this.twoKilnInfoVos = [...res.twoKilnInfoVos]
|
|
this.twoKilnInfoVos.map(el => {
|
|
this.$set(el, 'active', true)
|
|
})
|
|
for (let i = this.twoKilnInfoVos.length; i < 37; i++) {
|
|
this.twoKilnInfoVos.push({vehicleCode: `yao2${i}`, active: false})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.dry_wraper
|
|
position relative
|
|
// border-left 4px solid #18537a
|
|
// border-right 4px solid #18537a
|
|
_wh(100%, 100%)
|
|
// background: -webkit-radial-gradient(closest-side circle,rgba(86, 188, 234, 50%) 25%, #034c6d 100%)
|
|
// box-shadow inset 3px -6px 6px 0px rgba(0, 0, 0, 30%), inset -6px 3px 6px 0px rgba(0, 0, 0, 30%)
|
|
background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
|
.dry_content
|
|
position relative
|
|
_wh(100%, 100%)
|
|
padding 10px 0
|
|
// box-shadow inset 3px -6px 6px 0px rgba(0, 0, 0, 30%), inset -6px 3px 6px 0px rgba(0, 0, 0, 30%)
|
|
.dry_item_wraper
|
|
_wh(100%, calc((100% - 60px) / 4))
|
|
margin-bottom 20px
|
|
&:last-child
|
|
margin-bottom 0
|
|
.dry_title
|
|
font-size 24px
|
|
font-family: 'YouSheBiaoTiHei';
|
|
font-weight: 400;
|
|
color: transparent;
|
|
line-height 30px
|
|
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
text-align: center;
|
|
.dry_item
|
|
clear both
|
|
_wh(100%, calc(100% - 46px))
|
|
padding 20px 10px 0px 10px
|
|
.dry_hj
|
|
position relative
|
|
_wh(2.5%, calc(100% - 10px))
|
|
// background-color #02344d
|
|
// border 2px solid #186189
|
|
border-radius 4px
|
|
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
|
border 2px solid rgba(42, 189, 251, 50%)
|
|
border-right 0
|
|
&:last-child
|
|
border-right 2px solid rgba(42, 189, 251, 50%)
|
|
&:after
|
|
content ''
|
|
position absolute
|
|
_wh(2px, 10px)
|
|
bottom -11px
|
|
left calc(50% - 1px)
|
|
background-color rgba(42, 189, 251, 50%)
|
|
.dry_hj_i
|
|
_wh(100%, 100%)
|
|
background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
|
|
background-size 12px 12px
|
|
background-repeat repeat
|
|
.dry_hj_active
|
|
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
|
border 2px solid #B55F4E
|
|
border-right 0
|
|
&:last-child
|
|
border-right 2px solid #B55F4E
|
|
.dry_hj_i
|
|
background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
|
|
.dry_hj_1
|
|
&:last-child
|
|
border-right 0
|
|
.p1
|
|
_font(14px, 30px, #73f440,,)
|
|
// border-bottom 2px solid rgba(42, 189, 251, 50%)
|
|
.mater_info
|
|
height calc(100% - 32px)
|
|
.mater_p
|
|
display flex
|
|
justify-content center
|
|
align-items center
|
|
width 100%
|
|
_font(12px, 13px, #fff,,center)
|
|
.p2
|
|
height 50%
|
|
// border-bottom 2px solid #186189
|
|
.p3
|
|
height 25%
|
|
// border-bottom 2px solid #186189
|
|
.p4
|
|
height 25%
|
|
</style>
|
|
|