<template>
|
<div class="screen-page1">
|
<img class="bg1" src="@/assets/images/bg.jpg" />
|
<div class="screen-page1-content">
|
<div class="header-block" @click="changeHome">
|
<screen-header />
|
</div>
|
<div class="header-body">
|
<div class="row-second">
|
<div class="block-percent-50">
|
<module-info :list="warnings" :key="refreshKey" :hideSheB.sync="hideSheB"/>
|
</div>
|
|
<div class="block-percent-50">
|
<table-task :list="taskList" :key="refreshKey" :hideSheB.sync="hideSheB"/>
|
</div>
|
</div>
|
<div class="txt10">{{sitecode || ''}} 模式：{{mouldname}}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ScreenHeader from './components/Header.vue'
|
import ModuleInfo from './components/TableInfo.vue'
|
import TableTask from './components/TableTask.vue'
|
import cache from '@/utils/cache'
|
|
export default {
|
name: 'screenPage4',
|
components: { ModuleInfo , ScreenHeader ,TableTask },
|
data() {
|
return {
|
refreshKey: 0,
|
plans: {},
|
stockData: {},
|
warnings: [],
|
taskList:[],
|
inputs: [],
|
outputs: [],
|
planWarnings: [],
|
hideSheB:false,
|
refreshInterval: null,
|
timerPage: null,
|
sitecode:'',
|
mouldname:''
|
}
|
},
|
beforeMount(){
|
|
},
|
mounted() {
|
const itemCatch = cache.getCache('pageDefault');
|
console.log(this.$route)
|
if(itemCatch){
|
this.sitecode = itemCatch.sitecode
|
this.init()
|
}else{
|
this.$router.push('/')
|
}
|
// 跳页面
|
// this.timerPage = setTimeout(() => {
|
// //console.log('消除定时器')
|
// clearTimeout(this.timerPage)
|
// this.timerPage = null
|
// this.clearInterVal()
|
// this.hideSheB = true //清除设备定时任务
|
// //console.log("切换页面1")
|
// // this.$router.push('/screen3')
|
// }, this.$config.base.screen.pagechangeTimer)
|
},
|
beforeDestroy() {
|
this.clearInterVal()
|
clearTimeout(this.timerPage)
|
this.timerPage = null
|
},
|
methods: {
|
init() {
|
this.getData((f) => {
|
this.createInterval()
|
})
|
},
|
getData(callback) {
|
this.$loading();
|
Promise.all([
|
// table
|
this.$api.get('pagetask', { PageNo: 1, PageSize: 50, sitecode:this.sitecode}, { block: 'screen', needToken: false }),
|
this.$api.get('pagewarning', { PageNo: 1, PageSize: 50, sitecode:this.sitecode }, { block: 'screen', needToken: false }),
|
// 出入库模式
|
this.$api.get('getmodle', { PageNo: 1, PageSize: 50, sitecode:this.sitecode }, { block: 'screen', needToken: false }),
|
|
]).then((response) => {
|
//table
|
this.taskList = (response[0].rows || [])
|
this.warnings = (response[1].rows || [])
|
// 出入库模式
|
this.mouldname = (response[2] || '')
|
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() {
|
try {
|
window.clearInterval(this.refreshInterval);
|
this.refreshInterval = null;
|
} catch (e) {
|
//TODO handle the exception
|
}
|
},
|
changeHome(){
|
this.createInterval()
|
cache.clearCache('pageDefault','');
|
this.$router.push('/')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.bg1 {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
}
|
.screen-page1 {
|
// border: 1px solid red;
|
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: 5;
|
}
|
|
.row-second {
|
flex-grow: 4;
|
justify-content: space-between;
|
}
|
.block-percent-100 {
|
width: 100%;
|
}
|
|
.block-percent-25 {
|
width: 25%;
|
}
|
|
.block-percent-50 {
|
width: 50%;
|
}
|
|
.block-percent-36 {
|
width: 36%;
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
|
.screen-page1-content {
|
|
.txt10{
|
text-align: right;
|
width: 80%;
|
margin: 0 auto;
|
// margin-top: 10px;
|
color: white;
|
position: absolute;
|
bottom: 15px;
|
right: 20px;
|
}
|
.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: 20px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
