Skip to content

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

fea(工位级LED): 工位级LED新增两屏图片轮播

parent 2c9f988f
Show whitespace changes
Inline Side-by-side
Showing with 672 additions and 267 deletions
index.html
View file @ f8473458
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>中通SCADA+AVI系统</title>
<title>数据采集系统 AVI车体自动识别系统</title>
</head>
<body>
<div id="app"></div>
......
src/views/Led/Station/components/GreenFuture.vue 0 → 100644
View file @ f8473458
<template>
<div class="page-pack">
<div class="container-pack"></div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(255,255,255);
.container-pack {
width: 1710px;
height: 860px;
background-image: url("../../../../assets/images/LED/green_future.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
</style>
src/views/Led/Station/components/Logo.vue 0 → 100644
View file @ f8473458
<template>
<div class="page-pack">
<div class="container-pack"></div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(255,255,255);
.container-pack {
width: 1710px;
height: 860px;
background-image: url("../../../../assets/images/LED/logo.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
</style>
src/views/Led/Station/stationFive.vue
View file @ f8473458
<template>
<div class="container">
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2">
<swiper :options="swiperOption2" ref="outSwiper">
<!-- <swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
......@@ -30,11 +30,16 @@
<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 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 class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="roomInfoList.length >'8'? 'ntr' : ''">
<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>
......@@ -45,6 +50,16 @@
<div class="time">时间：{{ timeNow }}</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="logo-pack">
<Logo></Logo>
</div>
</swiper-slide>
<swiper-slide>
<div class="green-future-pack">
<GreenFuture></GreenFuture>
</div>
</swiper-slide>
</swiper>
</div>
</div>
......@@ -52,13 +67,18 @@
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment'
let self = null
export default {
name: 'StationFive',
components: {
swiper,
swiperSlide
swiperSlide,
Logo,
GreenFuture
},
data () {
return {
......@@ -77,14 +97,29 @@
// 定时器
timer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
},
// swiperOption: {
// autoplay: {
// delay: 5000 //轮播频率 5s
// }
// },
swiperOption2: {
autoplay: {
delay: 10000 //轮播频率 5s
delay: 5000
},
effect: 'fade',
on: {
slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换
if (this.activeIndex === 0) {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
})
} else {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
})
}
}
}
},
// 面清漆室实时数据
......@@ -126,6 +161,7 @@
},
mounted () {
setTimeout(() => {
self = this
this.getData()
// 实时时间
this.judgeTimeNow()
......@@ -337,5 +373,15 @@
}
}
}
.logo-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
.green-future-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
}
</style>
src/views/Led/Station/stationFour.vue
View file @ f8473458
<template>
<!-- 隔热防腐工位级Led -->
<div class="container">
<swiper :options="outSwiperOption" ref="outSwiper">
<swiper-slide>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
......@@ -22,17 +24,35 @@
<div class="time">时间：{{ timeNow }}</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="logo-pack">
<Logo></Logo>
</div>
</swiper-slide>
<swiper-slide>
<div class="green-future-pack">
<GreenFuture></GreenFuture>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment'
let self = null
export default {
name: 'StationFour',
components: {
swiper,
swiperSlide
swiperSlide,
Logo,
GreenFuture
},
data () {
return {
......@@ -52,7 +72,28 @@
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
delay: 5000
}
},
// 外层swiper配置
outSwiperOption: {
autoplay: {
delay: 5000
},
effect: 'fade',
on: {
slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换
if (this.activeIndex === 0) {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
})
} else {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
})
}
}
}
}
}
......@@ -75,6 +116,7 @@
},
mounted () {
setTimeout(() => {
self = this
this.getData()
// 实时时间
this.judgeTimeNow()
......@@ -179,5 +221,15 @@
}
}
}
.logo-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
.green-future-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
}
</style>
src/views/Led/Station/stationOne.vue
View file @ f8473458
<template>
<div class="container">
<swiper :options="outSwiperOption" ref="outSwiper">
<swiper-slide>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
......@@ -14,24 +16,42 @@
<div class="info">
设备报警信息：
<div class="line"></div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper :options="contentSwiperOption" ref="contentSwiper">
<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>
</div>
</swiper-slide>
<swiper-slide>
<div class="logo-pack">
<Logo></Logo>
</div>
</swiper-slide>
<swiper-slide>
<div class="green-future-pack">
<GreenFuture></GreenFuture>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment'
let self = null
export default {
name: 'StationOne',
components: {
swiper,
swiperSlide
swiperSlide,
Logo,
GreenFuture
},
data () {
return {
......@@ -48,10 +68,31 @@
timer: '',
// Data轮询定时器
dataTimer: '',
// swiper配置信息
swiperOption: {
// 内容swiper配置信息
contentSwiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
delay: 5000
}
},
// 外层swiper配置
outSwiperOption: {
autoplay: {
delay: 5000
},
effect: 'fade',
on: {
slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换
if (this.activeIndex === 0) {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
})
} else {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
})
}
}
}
}
}
......@@ -74,6 +115,7 @@
},
mounted () {
setTimeout(() => {
self = this
this.getData()
// 实时时间
this.judgeTimeNow()
......@@ -83,7 +125,6 @@
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 1710})`
console.log(this.zoom)
}, 0)
},
beforeDestroy () {
......@@ -179,5 +220,15 @@
}
}
}
.logo-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
.green-future-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
}
</style>
src/views/Led/Station/stationSeven.vue
View file @ f8473458
<template>
<div class="container">
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2">
<swiper :options="swiperOption2" ref="outSwiper">
<!-- <swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
......@@ -30,11 +30,16 @@
<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 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 class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="roomInfoList.length >'8'? 'ntr' : ''">
<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>
......@@ -45,19 +50,35 @@
<div class="time">时间：{{ timeNow }}</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="logo-pack">
<Logo></Logo>
</div>
</swiper-slide>
<swiper-slide>
<div class="green-future-pack">
<GreenFuture></GreenFuture>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment'
let self = null
export default {
name: 'StationSeven',
components: {
swiper,
swiperSlide
swiperSlide,
Logo,
GreenFuture
},
data () {
return {
......@@ -76,14 +97,29 @@
// 定时器
timer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
},
// swiperOption: {
// autoplay: {
// delay: 5000 //轮播频率 5s
// }
// },
swiperOption2: {
autoplay: {
delay: 10000 //轮播频率 5s
delay: 5000
},
effect: 'fade',
on: {
slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换
if (this.activeIndex === 0) {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
})
} else {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
})
}
}
}
},
// 面清漆室实时数据
......@@ -125,6 +161,7 @@
},
mounted () {
setTimeout(() => {
self = this
this.getData()
// 实时时间
this.judgeTimeNow()
......@@ -349,5 +386,15 @@
}
}
}
.logo-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
.green-future-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
}
</style>
src/views/Led/Station/stationSix.vue
View file @ f8473458
<template>
<div class="container">
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<swiper :options="swiperOption2">
<swiper :options="swiperOption2" ref="outSwiper">
<!-- <swiper-slide>
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
......@@ -30,11 +30,16 @@
<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 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 class="tr clear-float" v-for="(item, index) in mockArray" :key="index" :class="roomInfoList.length >'8'? 'ntr' : ''">
<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>
......@@ -45,19 +50,35 @@
<div class="time">时间：{{ timeNow }}</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="logo-pack">
<Logo></Logo>
</div>
</swiper-slide>
<swiper-slide>
<div class="green-future-pack">
<GreenFuture></GreenFuture>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment'
let self = null
export default {
name: 'StationSix',
components: {
swiper,
swiperSlide
swiperSlide,
Logo,
GreenFuture
},
data () {
return {
......@@ -76,14 +97,29 @@
// 定时器
timer: '',
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
}
},
// swiperOption: {
// autoplay: {
// delay: 5000 //轮播频率 5s
// }
// },
swiperOption2: {
autoplay: {
delay: 10000 //轮播频率 5s
delay: 5000
},
effect: 'fade',
on: {
slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换
if (this.activeIndex === 0) {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
})
} else {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
})
}
}
}
},
// 面清漆室实时数据
......@@ -126,6 +162,7 @@
},
mounted () {
setTimeout(() => {
self = this
this.getData()
// 实时时间
this.judgeTimeNow()
......@@ -349,5 +386,15 @@
}
}
}
.logo-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
.green-future-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
}
</style>
src/views/Led/Station/stationThree.vue
View file @ f8473458
<template>
<div class="container">
<swiper :options="outSwiperOption" ref="outSwiper">
<swiper-slide>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="title-pack">{{ timmingData.name }}</div>
<div class="table-pack">
......@@ -21,17 +23,35 @@
<div class="time">时间：{{ timeNow }}</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="logo-pack">
<Logo></Logo>
</div>
</swiper-slide>
<swiper-slide>
<div class="green-future-pack">
<GreenFuture></GreenFuture>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment'
let self = null
export default {
name: 'StationThree',
components: {
swiper,
swiperSlide
swiperSlide,
Logo,
GreenFuture
},
data () {
return {
......@@ -53,6 +73,27 @@
autoplay: {
delay: 5000 //轮播频率 5s
}
},
// 外层swiper配置
outSwiperOption: {
autoplay: {
delay: 5000
},
effect: 'fade',
on: {
slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换
if (this.activeIndex === 0) {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
})
} else {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
})
}
}
}
}
}
},
......@@ -74,6 +115,7 @@
},
mounted () {
setTimeout(() => {
self = this
this.getData()
// 实时时间
this.judgeTimeNow()
......@@ -178,5 +220,15 @@
}
}
}
.logo-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
.green-future-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
}
</style>
src/views/Led/Station/stationTwo.vue
View file @ f8473458
<template>
<!-- 电泳工位级Led -->
<div class="container">
<swiper :options="outSwiperOption" ref="outSwiper">
<swiper-slide>
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="title-pack">{{timmingData.name}}</div>
<div class="table-pack">
......@@ -22,17 +24,35 @@
<div class="time">时间：{{ timeNow }}</div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="logo-pack">
<Logo></Logo>
</div>
</swiper-slide>
<swiper-slide>
<div class="green-future-pack">
<GreenFuture></GreenFuture>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment'
let self = this
export default {
name: 'StationTwo',
components: {
swiper,
swiperSlide
swiperSlide,
Logo,
GreenFuture
},
data () {
return {
......@@ -52,7 +72,28 @@
// swiper配置信息
swiperOption: {
autoplay: {
delay: 5000 //轮播频率 5s
delay: 5000
}
},
// 外层swiper配置
outSwiperOption: {
autoplay: {
delay: 5000
},
effect: 'fade',
on: {
slideChange () {
// 当为第一屏是时间为5s切换，其他屏为3s切换
if (this.activeIndex === 0) {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
})
} else {
self.$nextTick(() => {
self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
})
}
}
}
}
}
......@@ -75,6 +116,7 @@
},
mounted () {
setTimeout(() => {
self = this
this.getData()
// 实时时间
this.judgeTimeNow()
......@@ -179,5 +221,15 @@
}
}
}
.logo-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
.green-future-pack {
width: 1710px;
height: 860px;
background-color: rgb(255,255,255);
}
}
</style>
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