Skip to content

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

fea(工位5、6、7): 工位屏5、6、7展示效果修改，加入服务端当前时间校验功能

parent 493cd3b4
Hide whitespace changes
Inline Side-by-side
Showing with 375 additions and 431 deletions
src/views/CenterControl/index.vue
View file @ d36fc393
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
this.pollingRequestTime = new Date() this.pollingRequestTime = new Date()
setInterval(() => { setInterval(() => {
this.pollingRequestTime = new Date() this.pollingRequestTime = new Date()
}, 60000) }, 3600000)
} }
}, },
mounted () { mounted () {
......
src/views/Led/Station/stationFive.vue
View file @ d36fc393
...@@ -2,51 +2,30 @@ ...@@ -2,51 +2,30 @@
<div class="container"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2" ref="outSwiper"> <swiper :options="swiperOption2" ref="outSwiper">
<!-- <swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
<div class="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息：
<div class="line"></div>
<swiper :options="swiperOption">
<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>
</swiper-slide> -->
<swiper-slide> <swiper-slide>
<div class="title-pack">{{ timmingData.name }}</div> <div class="title-pack">{{ timmingData.name }}</div>
<div class="spray-drying"> <div class="spray-drying">
<div class="tr clear-float" :class="roomInfoList.length > 8 ? 'ntr' : ''"> <div class="tr clear-float">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'"></div> <div class="th-1"></div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">状态</div> <div class="th-2">状态</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">作业时间</div> <div class="th-3">作业时间</div>
<div v-if="roomInfoList.length > 8"
:class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'"></div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">状态
</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">
作业时间
</div>
</div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index"
:class="roomInfoList.length >'8'? 'ntr' : ''">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].stationState: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${roomInfoList[index+8].workingHours}min`: '' }}</div>
</div> </div>
<swiper :options="infoSwiperOption" ref="inoSwiper">
<swiper-slide>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div class="th-1">{{firstScreenData.length - 1 >= index ? firstScreenData[index].name : ''}}</div>
<div class="th-2">{{firstScreenData.length - 1 >= index ? firstScreenData[index].stationState : ''}}</div>
<div class="th-3">{{firstScreenData.length - 1 >= index ? `${firstScreenData[index].workingHours}min` : ''}}</div>
</div>
</swiper-slide>
<swiper-slide v-if="secondScreenData.length > 0">
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div class="th-1">{{secondScreenData.length - 1 >= index ? secondScreenData[index].name : ''}}</div>
<div class="th-2">{{secondScreenData.length - 1 >= index ? secondScreenData[index].stationState : ''}}</div>
<div class="th-3">{{secondScreenData.length - 1 >= index ? `${secondScreenData[index].workingHours}min` : ''}}</div>
</div>
</swiper-slide>
</swiper>
<div class="time">时间：{{ timeNow }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</swiper-slide> </swiper-slide>
...@@ -96,23 +75,23 @@ ...@@ -96,23 +75,23 @@
timeNow: '', timeNow: '',
// 定时器 // 定时器
timer: '', timer: '',
// swiper配置信息 // 信息轮播
// swiperOption: { infoSwiperOption: {
// autoplay: { autoplay: {
// delay: 5000 //轮播频率 5s delay: 25000
// } }
// }, },
swiperOption2: { swiperOption2: {
autoplay: { autoplay: {
delay: 5000 delay: 30000
}, },
effect: 'fade', effect: 'fade',
on: { on: {
slideChange () { slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换 // 当为第一屏是时间为30s切换，其他屏为3s切换
if (this.activeIndex === 0) { if (this.activeIndex === 0) {
self.$nextTick(() => { self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000 self.$refs.outSwiper.swiper.params.autoplay.delay = 30000
}) })
} else { } else {
self.$nextTick(() => { self.$nextTick(() => {
...@@ -122,41 +101,48 @@ ...@@ -122,41 +101,48 @@
} }
} }
}, },
// 面清漆室实时数据 // 第一屏数据
roomInfoList: [] firstScreenData: [],
// 第二屏数据
secondScreenData: []
} }
}, },
methods: { methods: {
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '5'}).then(res => { this.$fetch('led-controller/ledInfo-get', {ledNo: '5'}).then(res => {
this.timmingData = _.cloneDeep(res); this.timmingData = _.cloneDeep(res)
this.roomInfoList = _.cloneDeep(res.roomInfoList); let roomInfoList = _.cloneDeep(res.roomInfoList)
this.warningList = _.cloneDeep(res.warningList) if (roomInfoList.length > 0) {
for (let item of this.roomInfoList) { roomInfoList.forEach((item, index) => {
if (item.stationState === 'USE') { if (item.stationState === 'USE') {
item.stationState = '使用' item.stationState = '使用'
} }
if (item.stationState === 'FREE') { if (item.stationState === 'FREE') {
item.stationState = '空闲' item.stationState = '空闲'
}
})
// 以6条数据为基准分割数组
if (roomInfoList.length <= 6) {
this.firstScreenData = _.cloneDeep(roomInfoList)
this.secondScreenData = []
} else {
this.firstScreenData = roomInfoList.slice(0, 6)
this.secondScreenData = roomInfoList.slice(6, 12)
} }
} }
}) })
}, },
// 实时时间 // 实时时间
judgeTimeNow () { judgeTimeNow () {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') this.$fetch('led-controller/currentTime-get').then(res => {
this.timer = setInterval(() => { let resolveCurrentTime = new Date(_.cloneDeep(res))
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') this.timeNow = Moment(resolveCurrentTime).format('YYYY-MM-DD HH:mm:ss')
}, 1000) this.timer = setInterval(() => {
}, let resolveStamp = new Date(this.timeNow).getTime() + 1000
// 判断数据是否需要渲染 this.timeNow = Moment(resolveStamp).format('YYYY-MM-DD HH:mm:ss')
judgeDataRnder (index) { }, 1000)
if (index < this.roomInfoList.length) { })
return true
} else {
return false
}
} }
}, },
mounted () { mounted () {
...@@ -166,7 +152,11 @@ ...@@ -166,7 +152,11 @@
// 实时时间 // 实时时间
this.judgeTimeNow() this.judgeTimeNow()
this.dataTimer = setInterval(() => { this.dataTimer = setInterval(() => {
//获取工位实时信息
this.getData() this.getData()
// 实时时间
this.judgeTimeNow()
clearInterval(this.timer)
}, 60000) }, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
......
src/views/Led/Station/stationSeven.vue
View file @ d36fc393
...@@ -2,51 +2,30 @@ ...@@ -2,51 +2,30 @@
<div class="container"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2" ref="outSwiper"> <swiper :options="swiperOption2" ref="outSwiper">
<!-- <swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
<div class="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息：
<div class="line"></div>
<swiper :options="swiperOption">
<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>
</swiper-slide> -->
<swiper-slide> <swiper-slide>
<div class="title-pack">{{ timmingData.name }}</div> <div class="title-pack">{{ timmingData.name }}</div>
<div class="sprayDrying"> <div class="spray-drying">
<div class="tr clear-float" :class="roomInfoList.length > 8 ? 'ntr' : ''"> <div class="tr clear-float">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'"></div> <div class="th-1"></div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">状态</div> <div class="th-2">状态</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">作业时间</div> <div class="th-3">作业时间</div>
<div v-if="roomInfoList.length > 8"
:class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'"></div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">状态
</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">
作业时间
</div>
</div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index"
:class="roomInfoList.length >'8'? 'ntr' : ''">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].stationState: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${roomInfoList[index+8].workingHours}min`: '' }}</div>
</div> </div>
<swiper :options="infoSwiperOption" ref="inoSwiper">
<swiper-slide>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div class="th-1">{{firstScreenData.length - 1 >= index ? firstScreenData[index].name : ''}}</div>
<div class="th-2">{{firstScreenData.length - 1 >= index ? firstScreenData[index].stationState : ''}}</div>
<div class="th-3">{{firstScreenData.length - 1 >= index ? `${firstScreenData[index].workingHours}min` : ''}}</div>
</div>
</swiper-slide>
<swiper-slide v-if="secondScreenData.length > 0">
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div class="th-1">{{secondScreenData.length - 1 >= index ? secondScreenData[index].name : ''}}</div>
<div class="th-2">{{secondScreenData.length - 1 >= index ? secondScreenData[index].stationState : ''}}</div>
<div class="th-3">{{secondScreenData.length - 1 >= index ? `${secondScreenData[index].workingHours}min` : ''}}</div>
</div>
</swiper-slide>
</swiper>
<div class="time">时间：{{ timeNow }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</swiper-slide> </swiper-slide>
...@@ -62,7 +41,7 @@ ...@@ -62,7 +41,7 @@
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -73,7 +52,7 @@ ...@@ -73,7 +52,7 @@
let self = null let self = null
export default { export default {
name: 'StationSeven', name: 'StationFive',
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
...@@ -96,23 +75,23 @@ ...@@ -96,23 +75,23 @@
timeNow: '', timeNow: '',
// 定时器 // 定时器
timer: '', timer: '',
// swiper配置信息 // 信息轮播
// swiperOption: { infoSwiperOption: {
// autoplay: { autoplay: {
// delay: 5000 //轮播频率 5s delay: 25000
// } }
// }, },
swiperOption2: { swiperOption2: {
autoplay: { autoplay: {
delay: 5000 delay: 30000
}, },
effect: 'fade', effect: 'fade',
on: { on: {
slideChange () { slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换 // 当为第一屏是时间为30s切换，其他屏为3s切换
if (this.activeIndex === 0) { if (this.activeIndex === 0) {
self.$nextTick(() => { self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000 self.$refs.outSwiper.swiper.params.autoplay.delay = 30000
}) })
} else { } else {
self.$nextTick(() => { self.$nextTick(() => {
...@@ -122,41 +101,48 @@ ...@@ -122,41 +101,48 @@
} }
} }
}, },
// 面清漆室实时数据 // 第一屏数据
roomInfoList: [] firstScreenData: [],
// 第二屏数据
secondScreenData: []
} }
}, },
methods: { methods: {
//获取工位实时信息 //获取工位实时信息
getData () { getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '7'}).then(res => { this.$fetch('led-controller/ledInfo-get', {ledNo: '7'}).then(res => {
this.timmingData = _.cloneDeep(res); this.timmingData = _.cloneDeep(res)
this.roomInfoList = _.cloneDeep(res.roomInfoList); let roomInfoList = _.cloneDeep(res.roomInfoList)
this.warningList = _.cloneDeep(res.warningList) if (roomInfoList.length > 0) {
for (let item of this.roomInfoList) { roomInfoList.forEach((item, index) => {
if (item.stationState === 'USE') { if (item.stationState === 'USE') {
item.stationState = '使用' item.stationState = '使用'
} }
if (item.stationState === 'FREE') { if (item.stationState === 'FREE') {
item.stationState = '空闲' item.stationState = '空闲'
}
})
// 以6条数据为基准分割数组
if (roomInfoList.length <= 6) {
this.firstScreenData = _.cloneDeep(roomInfoList)
this.secondScreenData = []
} else {
this.firstScreenData = roomInfoList.slice(0, 6)
this.secondScreenData = roomInfoList.slice(6, 12)
} }
} }
}) })
}, },
// 实时时间 // 实时时间
judgeTimeNow () { judgeTimeNow () {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') this.$fetch('led-controller/currentTime-get').then(res => {
this.timer = setInterval(() => { let resolveCurrentTime = new Date(_.cloneDeep(res))
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') this.timeNow = Moment(resolveCurrentTime).format('YYYY-MM-DD HH:mm:ss')
}, 1000) this.timer = setInterval(() => {
}, let resolveStamp = new Date(this.timeNow).getTime() + 1000
// 判断数据是否需要渲染 this.timeNow = Moment(resolveStamp).format('YYYY-MM-DD HH:mm:ss')
judgeDataRnder (index) { }, 1000)
if (index < this.roomInfoList.length) { })
return true
} else {
return false
}
} }
}, },
mounted () { mounted () {
...@@ -165,14 +151,16 @@ ...@@ -165,14 +151,16 @@
this.getData() this.getData()
// 实时时间 // 实时时间
this.judgeTimeNow() this.judgeTimeNow()
// 每一分钟请求一次数据
this.dataTimer = setInterval(() => { this.dataTimer = setInterval(() => {
//获取工位实时信息
this.getData() this.getData()
// 实时时间
this.judgeTimeNow()
clearInterval(this.timer)
}, 60000) }, 60000)
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(this.zoom)
}, 0) }, 0)
}, },
beforeDestroy () { beforeDestroy () {
...@@ -268,121 +256,110 @@ ...@@ -268,121 +256,110 @@
font-size: 70px; font-size: 70px;
} }
} }
.sprayDrying { .spray-drying {
width: 1710px; width: 1710px;
background-color: #111; background-color: #111;
.title-pack { .title-pack {
// width: 1710px; // width: 1710px;
// height: 100px; // height: 100px;
text-align: center; text-align: center;
color: red; color: red;
line-height: 120px; line-height: 120px;
font-weight: bold; font-weight: bold;
font-size: 100px; font-size: 100px;
} }
// .table-pack { // .table-pack {
// overflow: hidden; // overflow: hidden;
.tr {
width: 1708px;
// height: 30px;
.th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
width: 600px;
height: 92px;
border-top: 2px solid red;
border-right: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 92px;
font-weight: bold;
font-size: 85px;
}
.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 { .tr {
// width: 855px; width: 1708px;
height: 100px; // height: 30px;
border-top: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
width: 600px;
height: 92px;
border-top: 2px solid red;
border-right: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 92px;
font-weight: bold;
font-size: 85px;
} }
// 数据量大于8条时 .th-2 {width: 506px;}
.ntr { .th-3 {
width: 1708px; width: 598px;
// height: 30px; border-right: 0px;
}
.th-4 {width: 17%;}
.th-5 {width: 15%;}
.th-6 {width: 17%;}
.nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 { .th-r {
width: 16%; // width: 855px;
height: 70px; height: 100px;
border-top: 2px solid red; border-top: 2px solid red;
border-right: 2px solid red; float: left;
float: left; text-align: center;
text-align: center; color: red;
color: red; line-height: 100px;
line-height: 75px; font-weight: bold;
font-weight: bold; font-size: 60px;
font-size: 40px; }
}
.nth-2 {width: 14%;}
.nth-3 {
width: 19.3%;
border-right: 2px solid red;
}
.nth-4 {width: 16%;}
.nth-5 {width: 14%;}
.nth-6 {
width: 19.3%;
border-right: none;
}
.nth-r { }
// width: 855px; // 数据量大于8条时
height: 100px; .ntr {
border-top: 2px solid red; width: 1708px;
float: left; // height: 30px;
text-align: center;
color: red;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 {
width: 16%;
height: 70px;
border-top: 2px solid red;
border-right: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 75px;
font-weight: bold;
font-size: 40px;
}
.nth-2 {width: 14%;}
.nth-3 {
width: 19.3%;
border-right: 2px solid red;
}
.nth-4 {width: 16%;}
.nth-5 {width: 14%;}
.nth-6 {
width: 19.3%;
border-right: none;
} }
// .info { .nth-r {
// width: 1710px; // width: 855px;
// height: 454px; height: 100px;
// border-top: 2px solid yellow;
// color: yellow;
// font-weight: bold;
// font-size: 60px;
// }
.time {
width: 1710px;
height: 92px;
border-top: 2px solid red; border-top: 2px solid red;
float: left;
text-align: center;
color: red; color: red;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 92px; font-size: 60px;
font-size: 70px; }
// } }
.time {
width: 1710px;
height: 92px;
border-top: 2px solid red;
color: red;
font-weight: bold;
line-height: 92px;
font-size: 70px;
} }
} }
} }
......
src/views/Led/Station/stationSix.vue
View file @ d36fc393
...@@ -2,51 +2,30 @@ ...@@ -2,51 +2,30 @@
<div class="container"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2" ref="outSwiper"> <swiper :options="swiperOption2" ref="outSwiper">
<!-- <swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
<div class="tr">
<div class="th-l">进车数</div>
<div class="th-r">{{timmingData.busIn}}</div>
</div>
<div class="tr">
<div class="th-l">出车数</div>
<div class="th-r">{{timmingData.busOut}}</div>
</div>
<div class="info">
设备报警信息：
<div class="line"></div>
<swiper :options="swiperOption">
<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>
</swiper-slide> -->
<swiper-slide> <swiper-slide>
<div class="title-pack">{{ timmingData.name }}</div> <div class="title-pack">{{ timmingData.name }}</div>
<div class="sprayDrying"> <div class="spray-drying">
<div class="tr clear-float" :class="roomInfoList.length > 8 ? 'ntr' : ''"> <div class="tr clear-float">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'"></div> <div class="th-1"></div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">状态</div> <div class="th-2">状态</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">作业时间</div> <div class="th-3">作业时间</div>
<div v-if="roomInfoList.length > 8"
:class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'"></div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">状态
</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">
作业时间
</div>
</div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index"
:class="roomInfoList.length >'8'? 'ntr' : ''">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].stationState: '' }}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${roomInfoList[index+8].workingHours}min`: '' }}</div>
</div> </div>
<swiper :options="infoSwiperOption" ref="inoSwiper">
<swiper-slide>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div class="th-1">{{firstScreenData.length - 1 >= index ? firstScreenData[index].name : ''}}</div>
<div class="th-2">{{firstScreenData.length - 1 >= index ? firstScreenData[index].stationState : ''}}</div>
<div class="th-3">{{firstScreenData.length - 1 >= index ? `${firstScreenData[index].workingHours}min` : ''}}</div>
</div>
</swiper-slide>
<swiper-slide v-if="secondScreenData.length > 0">
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div class="th-1">{{secondScreenData.length - 1 >= index ? secondScreenData[index].name : ''}}</div>
<div class="th-2">{{secondScreenData.length - 1 >= index ? secondScreenData[index].stationState : ''}}</div>
<div class="th-3">{{secondScreenData.length - 1 >= index ? `${secondScreenData[index].workingHours}min` : ''}}</div>
</div>
</swiper-slide>
</swiper>
<div class="time">时间：{{ timeNow }}</div> <div class="time">时间：{{ timeNow }}</div>
</div> </div>
</swiper-slide> </swiper-slide>
...@@ -62,7 +41,7 @@ ...@@ -62,7 +41,7 @@
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
...@@ -73,7 +52,7 @@ ...@@ -73,7 +52,7 @@
let self = null let self = null
export default { export default {
name: 'StationSix', name: 'StationFive',
components: { components: {
swiper, swiper,
swiperSlide, swiperSlide,
...@@ -96,23 +75,23 @@ ...@@ -96,23 +75,23 @@
timeNow: '', timeNow: '',
// 定时器 // 定时器
timer: '', timer: '',
// swiper配置信息 // 信息轮播
// swiperOption: { infoSwiperOption: {
// autoplay: { autoplay: {
// delay: 5000 //轮播频率 5s delay: 25000
// } }
// }, },
swiperOption2: { swiperOption2: {
autoplay: { autoplay: {
delay: 5000 delay: 30000
}, },
effect: 'fade', effect: 'fade',
on: { on: {
slideChange () { slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换 // 当为第一屏是时间为30s切换，其他屏为3s切换
if (this.activeIndex === 0) { if (this.activeIndex === 0) {
self.$nextTick(() => { self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000 self.$refs.outSwiper.swiper.params.autoplay.delay = 30000
}) })
} else { } else {
self.$nextTick(() => { self.$nextTick(() => {
...@@ -122,8 +101,10 @@ ...@@ -122,8 +101,10 @@
} }
} }
}, },
// 面清漆室实时数据 // 第一屏数据
roomInfoList: [] firstScreenData: [],
// 第二屏数据
secondScreenData: []
} }
}, },
methods: { methods: {
...@@ -131,33 +112,37 @@ ...@@ -131,33 +112,37 @@
getData () { getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => { this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => {
this.timmingData = _.cloneDeep(res) this.timmingData = _.cloneDeep(res)
this.roomInfoList = _.cloneDeep(res.roomInfoList) let roomInfoList = _.cloneDeep(res.roomInfoList)
this.warningList = _.cloneDeep(res.warningList) if (roomInfoList.length > 0) {
for (let item of this.roomInfoList) { roomInfoList.forEach((item, index) => {
console.log('item', item) if (item.stationState === 'USE') {
if (item.stationState === 'USE') { item.stationState = '使用'
item.stationState = '使用' }
} if (item.stationState === 'FREE') {
if (item.stationState === 'FREE') { item.stationState = '空闲'
item.stationState = '空闲' }
})
// 以6条数据为基准分割数组
if (roomInfoList.length <= 6) {
this.firstScreenData = _.cloneDeep(roomInfoList)
this.secondScreenData = []
} else {
this.firstScreenData = roomInfoList.slice(0, 6)
this.secondScreenData = roomInfoList.slice(6, 12)
} }
} }
}) })
}, },
// 实时时间 // 实时时间
judgeTimeNow () { judgeTimeNow () {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') this.$fetch('led-controller/currentTime-get').then(res => {
this.timer = setInterval(() => { let resolveCurrentTime = new Date(_.cloneDeep(res))
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') this.timeNow = Moment(resolveCurrentTime).format('YYYY-MM-DD HH:mm:ss')
}, 1000) this.timer = setInterval(() => {
}, let resolveStamp = new Date(this.timeNow).getTime() + 1000
// 判断数据是否需要渲染 this.timeNow = Moment(resolveStamp).format('YYYY-MM-DD HH:mm:ss')
judgeDataRnder (index) { }, 1000)
if (index < this.roomInfoList.length) { })
return true
} else {
return false
}
} }
}, },
mounted () { mounted () {
...@@ -166,9 +151,12 @@ ...@@ -166,9 +151,12 @@
this.getData() this.getData()
// 实时时间 // 实时时间
this.judgeTimeNow() this.judgeTimeNow()
// 每一分钟请求一次数据
this.dataTimer = setInterval(() => { this.dataTimer = setInterval(() => {
//获取工位实时信息
this.getData() this.getData()
// 实时时间
this.judgeTimeNow()
clearInterval(this.timer)
}, 60000) }, 60000)
this.width = document.body.offsetWidth this.width = document.body.offsetWidth
this.height = document.body.offsetHeight this.height = document.body.offsetHeight
...@@ -268,121 +256,110 @@ ...@@ -268,121 +256,110 @@
font-size: 70px; font-size: 70px;
} }
} }
.sprayDrying { .spray-drying {
width: 1710px; width: 1710px;
background-color: #111; background-color: #111;
.title-pack { .title-pack {
// width: 1710px; // width: 1710px;
// height: 100px; // height: 100px;
text-align: center; text-align: center;
color: red; color: red;
line-height: 120px; line-height: 120px;
font-weight: bold; font-weight: bold;
font-size: 100px; font-size: 100px;
} }
// .table-pack { // .table-pack {
// overflow: hidden; // overflow: hidden;
.tr {
width: 1708px;
// height: 30px;
.th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
width: 600px;
height: 92px;
border-top: 2px solid red;
border-right: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 92px;
font-weight: bold;
font-size: 85px;
}
.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 { .tr {
// width: 855px; width: 1708px;
height: 100px; // height: 30px;
border-top: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
width: 600px;
height: 92px;
border-top: 2px solid red;
border-right: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 92px;
font-weight: bold;
font-size: 85px;
} }
// 数据量大于8条时 .th-2 {width: 506px;}
.ntr { .th-3 {
width: 1708px; width: 598px;
// height: 30px; border-right: 0px;
}
.th-4 {width: 17%;}
.th-5 {width: 15%;}
.th-6 {width: 17%;}
.nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 { .th-r {
width: 16%; // width: 855px;
height: 70px; height: 100px;
border-top: 2px solid red; border-top: 2px solid red;
border-right: 2px solid red; float: left;
float: left; text-align: center;
text-align: center; color: red;
color: red; line-height: 100px;
line-height: 75px; font-weight: bold;
font-weight: bold; font-size: 60px;
font-size: 40px; }
}
.nth-2 {width: 14%;}
.nth-3 {
width: 19.3%;
border-right: 2px solid red;
}
.nth-4 {width: 16%;}
.nth-5 {width: 14%;}
.nth-6 {
width: 19.3%;
border-right: none;
}
.nth-r { }
// width: 855px; // 数据量大于8条时
height: 100px; .ntr {
border-top: 2px solid red; width: 1708px;
float: left; // height: 30px;
text-align: center;
color: red;
line-height: 100px;
font-weight: bold;
font-size: 60px;
}
.nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 {
width: 16%;
height: 70px;
border-top: 2px solid red;
border-right: 2px solid red;
float: left;
text-align: center;
color: red;
line-height: 75px;
font-weight: bold;
font-size: 40px;
}
.nth-2 {width: 14%;}
.nth-3 {
width: 19.3%;
border-right: 2px solid red;
}
.nth-4 {width: 16%;}
.nth-5 {width: 14%;}
.nth-6 {
width: 19.3%;
border-right: none;
} }
// .info { .nth-r {
// width: 1710px; // width: 855px;
// height: 454px; height: 100px;
// border-top: 2px solid yellow;
// color: yellow;
// font-weight: bold;
// font-size: 60px;
// }
.time {
width: 1710px;
height: 92px;
border-top: 2px solid red; border-top: 2px solid red;
float: left;
text-align: center;
color: red; color: red;
line-height: 100px;
font-weight: bold; font-weight: bold;
line-height: 92px; font-size: 60px;
font-size: 70px; }
// } }
.time {
width: 1710px;
height: 92px;
border-top: 2px solid red;
color: red;
font-weight: bold;
line-height: 92px;
font-size: 70px;
} }
} }
} }
......
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