料仓监控
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
@@ -68,7 +68,7 @@ export default {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
options: [{value: '1', label: '大屏'}, {value: '2', label: '压制生产看板'}, {value: '3', label: '分拣作业监控'}, {value: '4', label: '干燥作业监控'}],
|
||||
options: [{value: '1', label: '大屏'}, {value: '2', label: '压制生产看板'}, {value: '3', label: '分拣作业监控'}, {value: '4', label: '干燥作业监控'}, {value: '5', label: '料仓监控'}],
|
||||
value: this.$store.getters.equipId,
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
@@ -103,6 +103,8 @@ export default {
|
||||
this.$router.push('/boardindex/sortwork')
|
||||
} else if (this.value === '4') {
|
||||
this.$router.push('/boardindex/drytask')
|
||||
} else if (this.value === '5') {
|
||||
this.$router.push('/boardindex/stockbin')
|
||||
}
|
||||
let element = document.documentElement
|
||||
if (this.fullscreen) {
|
||||
|
||||
229
src/pages/modules/board/DryTask_back.vue
Normal file
229
src/pages/modules/board/DryTask_back.vue
Normal 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>
|
||||
|
||||
174
src/pages/modules/board/StockBin.vue
Normal file
174
src/pages/modules/board/StockBin.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="st_wraper">
|
||||
<div class="state_wraper">
|
||||
<div class="state_icon bg_col_1"></div>
|
||||
<div class="state_title">满货位</div>
|
||||
<div class="state_icon bg_col_2"></div>
|
||||
<div class="state_title">空货位</div>
|
||||
</div>
|
||||
<div class="st_content">
|
||||
<div class="st_item">
|
||||
<div class="txt">A区</div>
|
||||
<div class="p_wraper">
|
||||
<div class="p_item" v-for="(e, i) in dataList[0]" :key="'a'+ i">
|
||||
<div class="p_item_i">
|
||||
<p class="p1">{{ e.point_name }}</p>
|
||||
<p class="p2">{{ e.qty }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="st_item">
|
||||
<div class="txt">B区</div>
|
||||
<div class="p_wraper">
|
||||
<div class="p_item" v-for="(e, i) in dataList[1]" :key="'b'+ i">
|
||||
<div class="p_item_i">
|
||||
<p class="p1">{{ e.point_name }}</p>
|
||||
<p class="p2">{{ e.qty }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="st_item">
|
||||
<div class="txt">C区</div>
|
||||
<div class="p_wraper">
|
||||
<div class="p_item" v-for="(e, i) in dataList[2]" :key="'c'+ i">
|
||||
<div class="p_item_i">
|
||||
<p class="p1">{{ e.point_name }}</p>
|
||||
<p class="p2">{{ e.qty }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="st_item">
|
||||
<div class="txt">Z区</div>
|
||||
<div class="p_wraper">
|
||||
<div class="p_item" v-for="(e, i) in dataList[3]" :key="'z'+ i" :class="{'p_item_active': e.point_status === '2'}">
|
||||
<div class="p_item_i">
|
||||
<p class="p1">{{ e.point_name }}</p>
|
||||
<p class="p2">{{ e.qty }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { klineInfo } from '@js/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
dataList: [[], [], [], []]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refresh()
|
||||
for (let i = 0; i < 4; i++) {
|
||||
if (i < 3) {
|
||||
for (let j = 0; j < 16; j++) {
|
||||
this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '1'})
|
||||
}
|
||||
} else {
|
||||
for (let j = 0; j < 12; j++) {
|
||||
this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '2'})
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(this.dataList)
|
||||
},
|
||||
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()
|
||||
// console.log(res)
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.st_wraper
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
background center / 100% 100% url('../../../images/bg-center.png') no-repeat
|
||||
padding 20px 20px 0 20px
|
||||
.state_wraper
|
||||
_wh(100%, 40px)
|
||||
_fj(row, flex-start)
|
||||
.state_icon
|
||||
_wh(14px, 14px)
|
||||
.state_title
|
||||
_font(20px, 40px, #fff,,)
|
||||
margin 0 40px 0 10px
|
||||
.bg_col_1
|
||||
border-radius 4px
|
||||
box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
|
||||
border 1px solid #B55F4E
|
||||
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
||||
.bg_col_2
|
||||
border-radius 4px
|
||||
box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
|
||||
border 1px solid rgba(42, 189, 251, 50%)
|
||||
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
|
||||
.st_content
|
||||
_wh(100%, calc(100% - 40px))
|
||||
_fj(row)
|
||||
.st_item
|
||||
_wh(22.5%, 100%)
|
||||
.txt
|
||||
_font(26px, 40px, #fff,,center)
|
||||
font-family: "YouSheBiaoTiHei"
|
||||
margin-bottom 20px
|
||||
.p_wraper
|
||||
_wh(100%, calc(100% - 60px))
|
||||
_fj(row, flex-start, flex-start)
|
||||
align-content: flex-start
|
||||
flex-wrap wrap
|
||||
.p_item
|
||||
_wh(30%, 14%)
|
||||
padding 14px
|
||||
margin-bottom 4%
|
||||
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 4px solid rgba(42, 189, 251, 50%)
|
||||
overflow hidden
|
||||
&:nth-child(3n+2)
|
||||
margin 0 5% 2% 5%
|
||||
.p_item_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
|
||||
_fj(,center)
|
||||
.p_item_active
|
||||
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
|
||||
border 4px solid #B55F4E
|
||||
.p_item_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)
|
||||
.p1
|
||||
_font(20px, 30px,#EFF2FF,,)
|
||||
// font-family: 'YouSheBiaoTiHei'
|
||||
font-family: "SourceHanSansCN-Bold";
|
||||
height 30px
|
||||
text-shadow: 0px 1px 1px #A0D4FF;
|
||||
.p2
|
||||
_font(18px, 30px, #EFF2FF,,center)
|
||||
font-family: "SourceHanSansCN-Bold";
|
||||
height 30px
|
||||
</style>
|
||||
@@ -155,7 +155,7 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: [{value: 1, label: '压制生产看板'}, {value: 2, label: '分拣作业监控'}, {value: 3, label: '干燥作业监控'}],
|
||||
options: [{value: 1, label: '压制生产看板'}, {value: 2, label: '分拣作业监控'}, {value: 3, label: '干燥作业监控'}, {value: 4, label: '料仓监控'}],
|
||||
value: '',
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
@@ -223,6 +223,8 @@ export default {
|
||||
this.$router.push('/boardindex/sortwork')
|
||||
} else if (this.value === 3) {
|
||||
this.$router.push('/boardindex/drytask')
|
||||
} else if (this.value === 4) {
|
||||
this.$router.push('/boardindex/stockbin')
|
||||
}
|
||||
},
|
||||
refresh () {
|
||||
|
||||
@@ -7,6 +7,7 @@ const boardIndex = r => require.ensure([], () => r(require('@page/modules/board/
|
||||
const PressProd = r => require.ensure([], () => r(require('@page/modules/board/PressProd')), 'PressProd')
|
||||
const SortWorkMonitor = r => require.ensure([], () => r(require('@page/modules/board/SortWorkMonitor')), 'SortWorkMonitor')
|
||||
const DryTask = r => require.ensure([], () => r(require('@page/modules/board/DryTask')), 'DryTask')
|
||||
const StockBin = r => require.ensure([], () => r(require('@page/modules/board/StockBin')), 'StockBin')
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
@@ -40,6 +41,10 @@ export default new Router({
|
||||
path: 'drytask',
|
||||
component: DryTask,
|
||||
meta: {title: '干燥作业监控'}
|
||||
}, {
|
||||
path: 'stockbin',
|
||||
component: StockBin,
|
||||
meta: {title: '料仓监控'}
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user