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