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
Show 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>
<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> </div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" </swiper-slide>
:class="roomInfoList.length >'8'? 'ntr' : ''"> <swiper-slide v-if="secondScreenData.length > 0">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div> <div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div> <div class="th-1">{{secondScreenData.length - 1 >= index ? secondScreenData[index].name : ''}}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div> <div class="th-2">{{secondScreenData.length - 1 >= index ? secondScreenData[index].stationState : ''}}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div> <div class="th-3">{{secondScreenData.length - 1 >= index ? `${secondScreenData[index].workingHours}min` : ''}}</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-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 => {
let resolveCurrentTime = new Date(_.cloneDeep(res))
this.timeNow = Moment(resolveCurrentTime).format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') let resolveStamp = new Date(this.timeNow).getTime() + 1000
this.timeNow = Moment(resolveStamp).format('YYYY-MM-DD HH:mm:ss')
}, 1000) }, 1000)
}, })
// 判断数据是否需要渲染
judgeDataRnder (index) {
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>
<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> </div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" </swiper-slide>
:class="roomInfoList.length >'8'? 'ntr' : ''"> <swiper-slide v-if="secondScreenData.length > 0">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div> <div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div> <div class="th-1">{{secondScreenData.length - 1 >= index ? secondScreenData[index].name : ''}}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div> <div class="th-2">{{secondScreenData.length - 1 >= index ? secondScreenData[index].stationState : ''}}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div> <div class="th-3">{{secondScreenData.length - 1 >= index ? `${secondScreenData[index].workingHours}min` : ''}}</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-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 => {
let resolveCurrentTime = new Date(_.cloneDeep(res))
this.timeNow = Moment(resolveCurrentTime).format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') let resolveStamp = new Date(this.timeNow).getTime() + 1000
this.timeNow = Moment(resolveStamp).format('YYYY-MM-DD HH:mm:ss')
}, 1000) }, 1000)
}, })
// 判断数据是否需要渲染
judgeDataRnder (index) {
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,7 +256,7 @@ ...@@ -268,7 +256,7 @@
font-size: 70px; font-size: 70px;
} }
} }
.sprayDrying { .spray-drying {
width: 1710px; width: 1710px;
background-color: #111; background-color: #111;
...@@ -362,18 +350,8 @@ ...@@ -362,18 +350,8 @@
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
} }
} }
// .info {
// width: 1710px;
// height: 454px;
// border-top: 2px solid yellow;
// color: yellow;
// font-weight: bold;
// font-size: 60px;
// }
.time { .time {
width: 1710px; width: 1710px;
height: 92px; height: 92px;
...@@ -382,7 +360,6 @@ ...@@ -382,7 +360,6 @@
font-weight: bold; font-weight: bold;
line-height: 92px; line-height: 92px;
font-size: 70px; 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>
<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> </div>
<div class="tr clear-float" v-for="(item, index) in mockArray" :key="index" </swiper-slide>
:class="roomInfoList.length >'8'? 'ntr' : ''"> <swiper-slide v-if="secondScreenData.length > 0">
<div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div> <div class="tr clear-float" v-for="(item, index) in mockArray" :key="index">
<div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div> <div class="th-1">{{secondScreenData.length - 1 >= index ? secondScreenData[index].name : ''}}</div>
<div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div> <div class="th-2">{{secondScreenData.length - 1 >= index ? secondScreenData[index].stationState : ''}}</div>
<div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div> <div class="th-3">{{secondScreenData.length - 1 >= index ? `${secondScreenData[index].workingHours}min` : ''}}</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-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 => {
let resolveCurrentTime = new Date(_.cloneDeep(res))
this.timeNow = Moment(resolveCurrentTime).format('YYYY-MM-DD HH:mm:ss')
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss') let resolveStamp = new Date(this.timeNow).getTime() + 1000
this.timeNow = Moment(resolveStamp).format('YYYY-MM-DD HH:mm:ss')
}, 1000) }, 1000)
}, })
// 判断数据是否需要渲染
judgeDataRnder (index) {
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,7 +256,7 @@ ...@@ -268,7 +256,7 @@
font-size: 70px; font-size: 70px;
} }
} }
.sprayDrying { .spray-drying {
width: 1710px; width: 1710px;
background-color: #111; background-color: #111;
...@@ -362,18 +350,8 @@ ...@@ -362,18 +350,8 @@
font-weight: bold; font-weight: bold;
font-size: 60px; font-size: 60px;
} }
} }
// .info {
// width: 1710px;
// height: 454px;
// border-top: 2px solid yellow;
// color: yellow;
// font-weight: bold;
// font-size: 60px;
// }
.time { .time {
width: 1710px; width: 1710px;
height: 92px; height: 92px;
...@@ -382,7 +360,6 @@ ...@@ -382,7 +360,6 @@
font-weight: bold; font-weight: bold;
line-height: 92px; line-height: 92px;
font-size: 70px; 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