<template>
|
<div class="screen-page1">
|
<div class="screen-page1-content">
|
<div class="header-block">
|
<screen-header />
|
</div>
|
<div class="header-body">
|
<div class="row-first">
|
<div class="block-percent-25">
|
<module-plans :obj="plans" />
|
</div>
|
<div class="block-percent-50">
|
<module-center :hideSheB.sync="hideSheB"/>
|
</div>
|
<div class="block-percent-25">
|
<module-stock :obj="stockData" :key="refreshKey" />
|
</div>
|
</div>
|
<div class="row-second">
|
<div class="block-percent-25">
|
<module-warnings :list="warnings" :key="refreshKey" :hideSheB.sync="hideSheB"/>
|
</div>
|
<div class="block-percent-36">
|
<module-outputs :list="outputs" :key="refreshKey" :hideSheB.sync="hideSheB"/>
|
</div>
|
<div class="block-percent-36">
|
<module-inputs :list="inputs" :key="refreshKey" :hideSheB.sync="hideSheB"/>
|
</div>
|
</div>
|
<div class="row-end" v-if="planWarnings.length > 0">
|
<plan-warnings :data="planWarnings" :key="refreshKey" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ScreenHeader from './components/Header.vue'
|
import PlanWarnings from './components/PlanWarnings.vue'
|
import ModulePlans from './components/Plans.vue'
|
import ModuleStock from './components/Stock.vue'
|
import ModuleWarnings from './components/Warnings.vue'
|
import ModuleOutputs from './components/Outputs.vue'
|
import ModuleInputs from './components/Inputs.vue'
|
import ModuleCenter from './components/Center.vue'
|
export default {
|
name: 'screenPage1',
|
components: { ScreenHeader, PlanWarnings, ModulePlans, ModuleStock, ModuleWarnings, ModuleOutputs, ModuleInputs, ModuleCenter },
|
data() {
|
return {
|
refreshKey: 0,
|
plans: {},
|
stockData: {},
|
warnings: [],
|
inputs: [],
|
outputs: [],
|
planWarnings: [],
|
hideSheB:false,
|
refreshInterval: null,
|
timerPage: null
|
}
|
},
|
mounted() {
|
this.init()
|
// 跳页面
|
// this.timerPage = setTimeout(() => {
|
// console.log('消除screen1定时器')
|
// clearTimeout(this.timerPage)
|
// this.clearInterVal()
|
// this.timerPage = null
|
// this.hideSheB = true //清除设备定时任务
|
// this.$router.push('/2')
|
// }, this.$config.base.screen.pagechangeTimer)
|
},
|
beforeDestroy() {
|
this.clearInterVal()
|
clearTimeout(this.timerPage)
|
this.timerPage = null
|
},
|
beforeUnmount() {
|
console.log("beforeUnmount--------------清除页面screen1定时器")
|
this.clearInterVal()
|
clearTimeout(this.timerPage)
|
this.timerPage = null
|
},
|
methods: {
|
init() {
|
this.getData((f) => {
|
this.createInterval()
|
})
|
},
|
getData(callback) {
|
this.$loading();
|
Promise.all([
|
// 计划执行
|
this.$api.get('pagedetails', {}, { block: 'screen', needToken: false }),
|
// 库存情况
|
// this.$api.get('pagedetails', { }, { block: 'screen', needToken: false }),
|
// 设备报警
|
this.$api.get('pagewarning', { PageNo: 1, PageSize: 50 }, { block: 'screen', needToken: false }),
|
// 入库任务
|
this.$api.get('pageintask', { PageNo: 1, PageSize: 50 }, { block: 'screen', needToken: false }),
|
// 出库任务
|
this.$api.get('pageouttask', { PageNo: 1, PageSize: 50 }, { block: 'screen', needToken: false })
|
]).then((response) => {
|
// ////console.log(response)
|
// 计划执行
|
let arr1 = [
|
{
|
'name':'今日出入库数',
|
'data':['0000']
|
},
|
{
|
'name':'本月出入库数',
|
'data':['0000']
|
},
|
{
|
'name':'本年出入库数',
|
'data':['0000']
|
},
|
]
|
let arrStock = []
|
// response[0].statisticalAnalysis[0].value =92222
|
response[0].statisticalAnalysis.map(item=>{
|
if(item.key=='今日出入库数'){
|
arr1[0].data[0] = this.formatCount(item.value) || '0000'
|
}
|
if(item.key=='本月出入库数'){
|
arr1[1].data[0] = this.formatCount(item.value) || '0000'
|
}
|
if(item.key=='本年出入库数'){
|
arr1[2].data[0] = this.formatCount(item.value) || '0000'
|
}
|
if(item.key=='总库位数'){
|
arrStock[0] = item.value
|
}
|
if(item.key=='满库位数'){
|
arrStock[1] = item.value
|
}
|
})
|
arrStock[2] = (arrStock[0] - arrStock[1]).toFixed(0) //空库位
|
|
this.plans = arr1 || {};
|
//console.log("计划执行")
|
//console.log(this.plans)
|
|
// 库存情况
|
this.stockData = arrStock || {};
|
//console.log("库存情况")
|
//console.log(this.stockData)
|
|
// 假数据 - 设备报警
|
this.warnings = (response[1].rows || [])
|
//console.log("设备报警")
|
//console.log(this.warnings)
|
|
// 入库任务
|
this.inputs = (response[2].rows || [])
|
//console.log("入库任务")
|
//console.log(this.inputs)
|
|
// 出库任务
|
this.outputs = (response[3].rows || [])
|
//console.log("出库任务")
|
//console.log(this.outputs)
|
|
this.refreshKey = new Date().getTime()
|
this.$loading().close();
|
callback && callback(true)
|
}).catch(() => {
|
this.$loading().close();
|
callback && callback(false)
|
})
|
},
|
createInterval() {
|
this.refreshInterval = window.setInterval(() => {
|
this.getData();
|
}, this.$config.base.screen.screen1.refreshTime)
|
},
|
clearInterVal() {
|
window.clearInterval(this.refreshInterval);
|
this.refreshInterval = null;
|
},
|
formatCount(val) {
|
let res = '0000';
|
if (val) {
|
// if (val>9999) val = 9999;
|
res = this.$utils.numberFormat(val,4);
|
}
|
return res;
|
},
|
formatCountX(val) {
|
let res = '000000';
|
if (val) {
|
if (val>999999) val = 999999;
|
res = this.$utils.numberFormat(val,6);
|
}
|
return res;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.screen-page1 {
|
width: 980px;
|
height: 551.25px;
|
overflow: hidden;
|
margin: 0 auto;
|
}
|
.screen-page1-content {
|
$headerHeight: 40px;
|
// width: 1280px;
|
// height: 720px;
|
// width: 1920px;
|
// height: 1080px;
|
overflow: auto;
|
height: 100%;
|
box-sizing: border-box;
|
padding-top: $headerHeight;
|
position: relative;
|
margin: 0 auto;
|
|
.header-block {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: $headerHeight;
|
z-index: 1;
|
box-sizing: border-box;
|
}
|
|
.header-body {
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
|
.row-end {
|
height: 112px;
|
flex-shrink: 0;
|
}
|
|
.row-first,
|
.row-second {
|
height: 10px;
|
padding: 0 10px;
|
display: flex;
|
}
|
|
.row-first {
|
flex-grow: 4;
|
}
|
|
.row-second {
|
flex-grow: 5;
|
justify-content: space-between;
|
}
|
|
.block-percent-25 {
|
width: 25%;
|
}
|
|
.block-percent-50 {
|
width: 50%;
|
}
|
|
.block-percent-36 {
|
width: 36%;
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
|
.screen-page1-content {
|
.module-block {
|
$titleHeight: 20px;
|
box-sizing: border-box;
|
padding-top: $titleHeight;
|
position: relative;
|
|
.screen1-moudle-block-title {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: $titleHeight;
|
box-sizing: border-box;
|
}
|
|
.module-content {
|
height: 100%;
|
box-sizing: border-box;
|
}
|
}
|
|
.auto-scroll-view {
|
$scrollHeaderHeight: 30px;
|
height: 100%;
|
font-size: 12px;
|
position: relative;
|
box-sizing: border-box;
|
color: #e4ffff;
|
padding-top: $scrollHeaderHeight;
|
|
.scroll-header,
|
.scroll-body .scroll-body-row {
|
display: flex;
|
|
&>* {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
|
&:last-child {
|
border-right: 0;
|
}
|
}
|
}
|
|
.scroll-header {
|
height: $scrollHeaderHeight;
|
box-sizing: border-box;
|
box-sizing: border-box;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
font-size: 13px;
|
|
&>* {
|
height: 100%;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
|
.scroll-body {
|
height: 100%;
|
|
.no-data {
|
padding-top: 12px;
|
font-size: 20px;
|
text-align: center;
|
}
|
|
.scroll-body-row {
|
&:nth-child(odd) {
|
color: #1a87ac;
|
}
|
|
&>* {
|
padding: 0px 1px;
|
word-break: break-all;
|
word-wrap: break-word;
|
height: 27px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
