Skip to content

Z
zhongtong-avi-web
Commit 452e9d10 authored by 李志鸣's avatar 李志鸣
Browse files
Options

Merge branch 'dev' of git.vtstar.net:zhongtong/zhongtong-avi-web into dev

parents c0a4ca6f fc4a9d7c
Hide whitespace changes
Inline Side-by-side
Showing with 716 additions and 198 deletions
src/views/Led/Station/applyArtificial.vue
View file @ 452e9d10
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">中涂人工</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
<div class="th-l">进车数</div> <div class="th-l">进车数</div>
<div class="th-r">{{width}}</div> <div class="th-r">{{timmingData.busIn}}</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="th-l">人工喷涂完工数</div> <div class="th-l">出车数</div>
<div class="th-r">{{height}}</div> <div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="tr">
<div class="th-l">中涂交车完工数</div>
<div class="th-r">{{height}}</div>
</div> </div>
<div class="info"> <div class="info">
设备报警信息： 设备报警信息：
<div>&nbsp;</div> <div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>I'mSlide14455555555555 58866666666666666555589</swiper-slide> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
<swiper-slide>I'55589</swiper-slide>
<swiper-slide>I'mSlide144556666666666666555589</swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="time">时间：{{ timeNow }}</div> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default { export default {
components: { components: {
swiper, swiper,
...@@ -37,25 +32,68 @@ ...@@ -37,25 +32,68 @@
}, },
data () { data () {
return { return {
// 实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)', zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '', timeNow: '',
// 定时器
timer: '', timer: '',
// Data轮询定时器
dataTimer: '',
// swiper配置信息
swiperOption: { swiperOption: {
autoplay: { autoplay: {
delay: 5000 delay: 5000 //轮播频率 5s
} }
} }
} }
}, },
methods: {}, methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '1'}).then(res => {
this.timmingData = res;
this.warningList = res.warningList;
console.log(this.warningList)
})
}
},
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = vm.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) }, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
......
src/views/Led/Station/electrophoresis.vue
View file @ 452e9d10
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="title-pack">电泳</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
<div class="th-l">{{width}}</div> <div class="th-l">进车数</div>
<div class="th-r">{{width}}</div> <div class="th-r">{{timmingData.busIn}}</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="th-l">{{height}}</div> <div class="th-l">出车数</div>
<div class="th-r">{{height}}</div> <div class="th-r">{{timmingData.busOut}}</div>
</div> </div>
<div class="info"> <div class="info">
设备报警信息： 设备报警信息：
<div>&nbsp;</div> <div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper"> <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'mSlide14455555555555 58866666666666666555589</swiper-slide> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
<swiper-slide>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'55589</swiper-slide>
<swiper-slide>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'mSlide144556666666666666555589</swiper-slide>
</swiper> </swiper>
</div> </div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
...@@ -34,18 +32,23 @@ ...@@ -34,18 +32,23 @@
}, },
data () { data () {
return { return {
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)', zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '', timeNow: '',
// 定时器
timer: '', timer: '',
// minLength: null, // Data轮询定时器
// minutes: null, dataTimer: '',
// secondsLength: null, // swiper配置信息
// seconds: null,
swiperOption: { swiperOption: {
autoplay: { autoplay: {
delay: 5000 delay: 5000 //轮播频率 5s
} }
} }
} }
...@@ -59,18 +62,24 @@ ...@@ -59,18 +62,24 @@
return '暂无' return '暂无'
} }
}, },
//获取工位实时信息
getData () { getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '1'}).then(res => { this.$fetch('led-controller/ledInfo-get', {ledNo: '2'}).then(res => {
this.timmingData = res;
this.warningList = res.warningList;
// console.log(this.warningList)
console.log(res) console.log(res)
}) })
} }
}, },
mounted () { mounted () {
this.getData() this.getData()
let vm = this this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => { this.timer = setInterval(() => {
vm.timeNow = this.formatTime() this.timeNow = this.formatTime()
// console.log(this.timeNow)
}, 1000) }, 1000)
setTimeout(() => { setTimeout(() => {
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
...@@ -83,6 +92,9 @@ ...@@ -83,6 +92,9 @@
if (this.timer) { if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器 clearInterval(this.timer); //在Vue实例销毁前，清除定时器
} }
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
......
src/views/Led/Station/floatingCoatRobot.vue
View file @ 452e9d10
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">中涂机器人</div> <div class="title-pack">{{ timmingData.name }}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
<div class="th-l">进车数</div> <div class="th-l">进车数</div>
<div class="th-r">{{width}}</div> <div class="th-r">{{timmingData.busIn}}</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="th-l">喷涂机器人完工数</div> <div class="th-l">出车数</div>
<div class="th-r">{{height}}</div> <div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="tr">
<div class="th-l">中途交车完工数</div>
<div class="th-r">{{height}}</div>
</div> </div>
<div class="info"> <div class="info">
设备报警信息： 设备报警信息：
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div> </div>
<div class="time">时间：2019-08-29 09:00:00</div> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default { export default {
components: {
swiper,
swiperSlide
},
data () { data () {
return { return {
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)' zoom: 'scale(0)',
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
// 屏幕显示当前时间
timeNow: '',
// 定时器
timer: '',
// Data轮询定时器
dataTimer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
}
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '3'}).then(res => {
this.timmingData = res;
this.warningList = res.warningList;
console.log(this.warningList)
})
} }
}, },
methods: {},
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
// console.log(this.timeNow)
}, 1000)
setTimeout(() => { setTimeout(() => {
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) }, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
......
src/views/Led/Station/insulatingAnticorrosive.vue
View file @ 452e9d10
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="title-pack">隔热防腐</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
<div class="th-l">进车数</div> <div class="th-l">进车数</div>
<div class="th-r">{{width}}</div> <div class="th-r">{{timmingData.busIn}}</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="th-l">完工数</div> <div class="th-l">出车数</div>
<div class="th-r">{{height}}</div> <div class="th-r">{{timmingData.busOut}}</div>
</div> </div>
<div class="info"> <div class="info">
设备报警信息： 设备报警信息：
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div> </div>
<div class="time">时间：2019-08-29 09:00:00</div> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default { export default {
components: {
swiper,
swiperSlide
},
data () { data () {
return { return {
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)' zoom: 'scale(0)',
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
// 屏幕显示当前时间
timeNow: '',
// 定时器
timer: '',
// Data轮询定时器
dataTimer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
}
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '4'}).then(res => {
console.log(res)
this.timmingData = res;
this.warningList = res.warningList;
console.log(this.warningList)
})
} }
}, },
methods: {},
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
console.log(`scale(${this.width / 1710})`) console.log(`scale(${this.width / 1710})`)
}, 3000) }, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
......
src/views/Led/Station/putty.vue
View file @ 452e9d10
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">腻子</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
<div class="th-l">进车数</div> <div class="th-l">进车数</div>
<div class="th-r">{{width}}</div> <div class="th-r">{{timmingData.busIn}}</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="th-l">完工数</div> <div class="th-l">出车数</div>
<div class="th-r">{{height}}</div> <div class="th-r">{{timmingData.busOut}}</div>
</div> </div>
<div class="info"> <div class="info">
设备报警信息： 设备报警信息：
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div> </div>
<div class="time">时间：2019-08-29 09:00:00</div> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default { export default {
components: {
swiper,
swiperSlide
},
data () { data () {
return { return {
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)' zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '',
// 定时器
timer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
}
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '5'}).then(res => {
this.timmingData = res;
this.warningList = res.warningList;
// console.log(this.warningList)
console.log(res)
})
} }
}, },
methods: {},
mounted () { mounted () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) }, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
......
src/views/Led/Station/sprayDryingRoom.vue
View file @ 452e9d10
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="container">
<div class="title-pack">喷漆室、烘干室</div> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="table-pack"> <swiper :options="swiperOption2">
<div class="tr clear-float"> <swiper-slide>
<div class="th-l"></div> <div class="title-pack">{{timmingData.name}}</div>
<div class="th-2">状态</div> <div class="table-pack">
<div class="th-3">作业时间</div> <div class="tr">
<div class="th-4">{{width}}</div> <div class="th-l">进车数</div>
<div class="th-5">状态</div> <div class="th-r">{{timmingData.busIn}}</div>
<div class="th-6">作业时间</div> </div>
</div> <div class="tr">
<div class="tr clear-float"> <div class="th-l">出车数</div>
<div class="th-l">喷漆室1</div> <div class="th-r">{{timmingData.busOut}}</div>
<div class="th-2">工作</div> </div>
<div class="th-3">60min</div> <div class="info">
<div class="th-4">{{width}}</div> 设备报警信息：
<div class="th-5">{{width}}</div> <div>&nbsp;</div>
<div class="th-6">{{width}}</div> <swiper :options="swiperOption">
</div> <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
<div class="tr clear-float"> </swiper>
<div class="th-l">喷漆室2</div> </div>
<div class="th-2">空闲</div> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
<div class="th-3">{{width}}</div> </div>
<div class="th-4">{{width}}</div> </swiper-slide>
<div class="th-5">{{width}}</div> <swiper-slide>
<div class="th-6">{{width}}</div> <div class="title-pack">{{ timmingData.name }}</div>
</div> <div class="sprayDrying">
<div class="tr clear-float"> <div class="tr clear-float" :class="reponse.length > 8 ? 'ntr' : ''">
<div class="th-l">喷漆室3</div> <div :class="reponse.length > 8 ? 'nth-1' : 'th-1'"></div>
<div class="th-2">{{width}}</div> <div :class="reponse.length > 8 ? 'nth-2' : 'th-2'">状态</div>
<div class="th-3">{{width}}</div> <div :class="reponse.length > 8 ? 'nth-3' : 'th-3'">作业时间</div>
<div class="th-4">{{width}}</div> <div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-4' : 'th-4'"></div>
<div class="th-5">{{width}}</div> <div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-5' : 'th-5'">状态</div>
<div class="th-6">{{width}}</div> <div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-6' : 'th-6'">作业时间</div>
</div> </div>
<div class="tr clear-float"> <div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="reponse.length >'8'? 'ntr' : ''">
<div class="th-l">喷漆室4</div> <div :class="reponse.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? reponse[index].name: '' }}</div>
<div class="th-2">{{width}}</div> <div :class="reponse.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? reponse[index].stationState: '' }}</div>
<div class="th-3">{{width}}</div> <div :class="reponse.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${reponse[index].workingHours}min`: '' }}</div>
<div class="th-4">{{width}}</div> <div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? reponse[index+8].name: '' }}</div>
<div class="th-5">{{width}}</div> <div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? reponse[index+8].stationState: '' }}</div>
<div class="th-6">{{width}}</div> <div v-if="reponse.length > 8" :class="reponse.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${reponse[index+8].workingHours}min`: '' }}</div>
</div> </div>
<div class="tr clear-float"> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
<div class="th-l">喷漆室5</div> </div>
<div class="th-2">{{width}}</div> </swiper-slide>
<div class="th-3">{{width}}</div> </swiper>
<div class="th-4">{{width}}</div>
<div class="th-5">{{width}}</div>
<div class="th-6">{{width}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">喷漆室6</div>
<div class="th-2">{{width}}</div>
<div class="th-3">{{width}}</div>
<div class="th-4">{{width}}</div>
<div class="th-5">{{width}}</div>
<div class="th-6">{{width}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">喷漆室7</div>
<div class="th-2">{{width}}</div>
<div class="th-3">{{width}}</div>
<div class="th-4">{{width}}</div>
<div class="th-5">{{width}}</div>
<div class="th-6">{{width}}</div>
</div>
<div class="tr clear-float">
<div class="th-l">喷漆室8</div>
<div class="th-2">{{width}}</div>
<div class="th-3">{{width}}</div>
<div class="th-4">{{width}}</div>
<div class="th-5">{{width}}</div>
<div class="th-6">{{width}}</div>
</div>
<!-- <div class="info">
设备报警信息：
</div> -->
<div class="time">时间：2019-08-29 09:00:00</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default { export default {
name: 'StationSprayDryingRoom',
components: {
swiper,
swiperSlide
},
data () { data () {
return { return {
// Data轮询定时器
dataTimer: '',
mockArray: [0, 1, 2, 3, 4, 5, 6, 7],
// 工位实时数据
timmingData: {},
// 报警数据
warningList: [],
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)' zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '',
// 定时器
timer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
},
swiperOption2: {
autoplay: {
delay: 10000 //轮播频率 5s
}
},
// 面清漆室实时数据
roomInfoList: [],
reponse: [
{
name: '喷漆飞机1',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机2',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机3',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机4',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机5',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机6',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机7',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机8',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机9',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机10',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机11',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机12',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机13',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机14',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机15',
stationState: '工作',
workingHours: '60'
},
{
name: '喷漆飞机16',
stationState: '工作',
workingHours: '60'
}
]
}
},
methods: {
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '7'}).then(res => {
this.timmingData = _.cloneDeep(res);
this.roomInfoList = _.cloneDeep(res.roomInfoList);
this.warningList = _.cloneDeep(res.warningList)
// console.log(this.warningList)
console.log(this.roomInfoList.length)
console.log(res)
})
},
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
// 判断数据是否需要渲染
judgeDataRnder (index) {
if (index < this.reponse.length) {
return true
} else {
return false
}
} }
}, },
methods: {},
mounted () { mounted () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
console.log(this.width, this.height)
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) }, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-pack { .container {
width: 1710px; height: 100%;
height: 860px; width: 100%;
background-color: #111; background-color: #111;
.title-pack { .page-pack {
width: 1710px; width: 1710px;
height: 100px; height: 860px;
text-align: center; background-color: #111;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 50px;
}
.table-pack {
overflow: hidden;
.tr { .title-pack {
width: 1710px; width: 1710px;
// height: 30px; height: 100px;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.table-pack {
overflow: hidden;
.tr {
width: 1710px;
height: 102px;
.th-l {
width: 853px;
height: 100px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-l,.th-2,.th-3,.th-4,.th-5,.th-6 { .th-r {
width: 16%; width: 855px;
height: 75px; height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
.info {
width: 1710px;
height: 454px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 75px;
font-weight: bold; font-weight: bold;
font-size: 30px; font-size: 60px;
} }
.th-2 {width: 15%;}
.th-3 {width: 19.3%;} .time {
.th-4 {width: 17%;} width: 1710px;
.th-5 {width: 15%;}
.th-6 {width: 17%;}
.th-r {
// width: 855px;
height: 100px; height: 100px;
border-top: 2px solid yellow; border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow; color: yellow;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 100px;
font-size: 60px; font-size: 60px;
} }
} }
.sprayDrying {
.info {
width: 1710px; width: 1710px;
height: 454px; height: 860px;
border-top: 2px solid yellow; background-color: #111;
color: yellow;
font-weight: bold;
font-size: 60px;
}
.time { .title-pack {
width: 1710px; // width: 1710px;
height: 65px; // height: 100px;
border-top: 2px solid yellow; text-align: center;
color: yellow; color: yellow;
font-weight: bold; line-height: 100px;
line-height: 65px; font-weight: bold;
font-size: 30px; font-size: 50px;
}
// .table-pack {
// overflow: hidden;
.tr {
width: 1708px;
// height: 30px;
.th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
width: 600px;
height: 60px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 60px;
font-weight: bold;
font-size: 50px;
}
.th-2 {width: 506px;}
.th-3 {
width: 598px;
border-right: 0px;
}
.th-4 {width: 17%;}
.th-5 {width: 15%;}
.th-6 {width: 17%;}
.th-r {
// width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
// 数据量大于8条时
.ntr {
width: 1708px;
// height: 30px;
.nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 {
width: 16%;
height: 70px;
border-top: 2px solid yellow;
border-right: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 75px;
font-weight: bold;
font-size: 40px;
}
.nth-2 {width: 14%;}
.nth-3 {
width: 19.3%;
border-right: 2px solid yellow;
}
.nth-4 {width: 16%;}
.nth-5 {width: 14%;}
.nth-6 {
width: 19.3%;
border-right: none;
}
.nth-r {
// width: 855px;
height: 100px;
border-top: 2px solid yellow;
float: left;
text-align: center;
color: yellow;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
}
// .info {
// width: 1710px;
// height: 454px;
// border-top: 2px solid yellow;
// color: yellow;
// font-weight: bold;
// font-size: 60px;
// }
.time {
width: 1710px;
height: 100px;
border-top: 2px solid yellow;
color: yellow;
font-weight: bold;
line-height: 100px;
font-size: 60px;
// }
}
} }
} }
} }
......
src/views/Led/Station/surfaceVarnish.vue
View file @ 452e9d10
<template> <template>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">面/清漆</div> <div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack"> <div class="table-pack">
<div class="tr"> <div class="tr">
<div class="th-l">进车数</div> <div class="th-l">进车数</div>
<div class="th-r">{{width}}</div> <div class="th-r">{{timmingData.busIn}}</div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="th-l">完工数</div> <div class="th-l">出车数</div>
<div class="th-r">{{height}}</div> <div class="th-r">{{timmingData.busOut}}</div>
</div> </div>
<div class="info"> <div class="info">
设备报警信息： 设备报警信息：
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div> </div>
<div class="time">时间：2019-08-29 09:00:00</div> <div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default { export default {
components: {
swiper,
swiperSlide
},
data () { data () {
return { return {
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 0, width: 0,
height: 0, height: 0,
zoom: 'scale(0)' zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '',
// 定时器
timer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
}
}
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => {
this.timmingData = res;
this.warningList = res.warningList;
// console.log(this.warningList)
console.log(res)
})
} }
}, },
methods: {},
mounted () { mounted () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
setTimeout(() => { setTimeout(() => {
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})` this.zoom = `scale(${this.width / 1710})`
}, 3000) }, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
} }
} }
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment