Skip to content

Z
zhongtong-avi-web
Commit fc4a9d7c authored by 车宾's avatar 车宾
Browse files
Options

feat(led工位级大屏)：功能联调（80%）

parent ef5e0d33
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 717 additions and 199 deletions
config/index.js
View file @ fc4a9d7c
......@@ -15,7 +15,7 @@ module.exports = {
'/host': {
// target: 'http://10.100.172.150:9108', //设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.43.244:8888', // 东伟服务器地址
target: 'http://192.168.0.126', // 训浩服务器
target: 'http://192.168.0.126:8080', // 训浩服务器
changeOrigin: true,
pathRewrite: {
'^/host': ''//这里理解成用‘/host’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
......
src/views/Led/Station/applyArtificial.vue
View file @ fc4a9d7c
<template>
<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="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{width}}</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">人工喷涂完工数</div>
<div class="th-r">{{height}}</div>
</div>
<div class="tr">
<div class="th-l">中涂交车完工数</div>
<div class="th-r">{{height}}</div>
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息：
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper-slide>I'mSlide14455555555555 58866666666666666555589</swiper-slide>
<swiper-slide>I'55589</swiper-slide>
<swiper-slide>I'mSlide144556666666666666555589</swiper-slide>
<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 class="time">时间：{{ timeNow }}</div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
components: {
swiper,
......@@ -37,25 +32,68 @@
},
data () {
return {
// 实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 0,
height: 0,
zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '',
// 定时器
timer: '',
// Data轮询定时器
dataTimer: '',
// swiper配置信息
swiperOption: {
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 () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = vm.formatTime()
}, 1000)
setTimeout(() => {
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})`
}, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
}
}
</script>
......
src/views/Led/Station/electrophoresis.vue
View file @ fc4a9d7c
<template>
<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="tr">
<div class="th-l">{{width}}</div>
<div class="th-r">{{width}}</div>
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">{{height}}</div>
<div class="th-r">{{height}}</div>
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息：
<div>&nbsp;</div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I'mSlide14455555555555 58866666666666666555589</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-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 class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
......@@ -34,18 +32,23 @@
},
data () {
return {
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 0,
height: 0,
zoom: 'scale(0)',
// 屏幕显示当前时间
timeNow: '',
// 定时器
timer: '',
// minLength: null,
// minutes: null,
// secondsLength: null,
// seconds: null,
// Data轮询定时器
dataTimer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000
delay: 5000 //轮播频率 5s
}
}
}
......@@ -59,18 +62,24 @@
return '暂无'
}
},
//获取工位实时信息
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)
})
}
},
mounted () {
this.getData()
let vm = this
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
// console.log(this.timeNow)
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => {
this.width = document.body.offsetWidth
......@@ -83,6 +92,9 @@
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
}
}
</script>
......
src/views/Led/Station/floatingCoatRobot.vue
View file @ fc4a9d7c
<template>
<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="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{width}}</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">喷涂机器人完工数</div>
<div class="th-r">{{height}}</div>
</div>
<div class="tr">
<div class="th-l">中途交车完工数</div>
<div class="th-r">{{height}}</div>
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<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 class="time">时间：2019-08-29 09:00:00</div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
width: 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 () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
// console.log(this.timeNow)
}, 1000)
setTimeout(() => {
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})`
}, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
}
}
</script>
......
src/views/Led/Station/insulatingAnticorrosive.vue
View file @ fc4a9d7c
<template>
<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="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{width}}</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">完工数</div>
<div class="th-r">{{height}}</div>
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<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 class="time">时间：2019-08-29 09:00:00</div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
width: 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 () {
this.getData()
this.dataTimer = setInterval(() => {
this.getData()
}, 60000)
// 模拟时间运作
this.timer = setInterval(() => {
this.timeNow = this.formatTime()
}, 1000)
setTimeout(() => {
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})`
console.log(`scale(${this.width / 1710})`)
}, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
if (this.dataTimer) {
clearInterval(this.dataTimer); //在Vue实例销毁前，清除定时器
}
}
}
</script>
......
src/views/Led/Station/putty.vue
View file @ fc4a9d7c
<template>
<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="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{width}}</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">完工数</div>
<div class="th-r">{{height}}</div>
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<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 class="time">时间：2019-08-29 09:00:00</div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 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 () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
setTimeout(() => {
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})`
}, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
}
}
</script>
......
src/views/Led/Station/sprayDryingRoom.vue
View file @ fc4a9d7c
This diff is collapsed.
src/views/Led/Station/surfaceVarnish.vue
View file @ fc4a9d7c
<template>
<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="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{width}}</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">完工数</div>
<div class="th-r">{{height}}</div>
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<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 class="time">时间：2019-08-29 09:00:00</div>
<div class="time">时间：{{ formatTime(timeNow,'YYYY-MM-DD HH:mm:ss') }}</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Moment from 'moment'
export default {
components: {
swiper,
swiperSlide
},
data () {
return {
// 工位实时数据
timmingData: {},
// 报警数据
warningList: {},
width: 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 () {
this.getData()
let vm = this
// 模拟时间运作
this.timer = setInterval(() => {
vm.timeNow = this.formatTime()
}, 1000)
setTimeout(() => {
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})`
}, 3000)
},
beforeDestroy () {
if (this.timer) {
clearInterval(this.timer); //在Vue实例销毁前，清除定时器
}
}
}
</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