root/screen-huahong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

料仓监控

Browse Source
This commit is contained in:
caill
2024-07-10 11:00:31 +08:00
parent 79cdf269fc
commit 7995961c82
6 changed files with 414 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/pages/modules/board/DryTask_back.vue Normal file
View File

@@ -0,0 +1,229 @@
<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>