Skip to content

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

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

parent 2c9f988f
Expand all Hide 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/assets/images/LED/green_future.png 0 → 100644
View file @ f8473458
This diff is collapsed.
src/assets/images/LED/logo.png 0 → 100644
View file @ f8473458
This diff is collapsed.
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
This diff is collapsed.
src/views/Led/Station/stationFour.vue
View file @ f8473458
<template>
<!-- 隔热防腐工位级Led -->
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<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" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</div>
<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">
<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" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</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>
\ No newline at end of file
</style>
src/views/Led/Station/stationOne.vue
View file @ f8473458
<template>
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<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" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
<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">
<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="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>
</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
}
},
// 外层swiper配置
outSwiperOption: {
autoplay: {
delay: 5000 //轮播频率 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
})
}
}
}
}
}
......@@ -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 () {
......@@ -102,7 +143,7 @@
width: 100%;
height: 100%;
background-color: #111;
.page-pack {
.page-pack {
width: 1710px;
height: 860px;
background-color: #111;
......@@ -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>
\ No newline at end of file
</style>
src/views/Led/Station/stationSeven.vue
View file @ f8473458
This diff is collapsed.
src/views/Led/Station/stationSix.vue
View file @ f8473458
This diff is collapsed.
src/views/Led/Station/stationThree.vue
View file @ f8473458
<template>
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<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" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</div>
</div>
<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">
<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" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</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>
\ No newline at end of file
</style>
src/views/Led/Station/stationTwo.vue
View file @ f8473458
<template>
<!-- 电泳工位级Led -->
<div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<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" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</div>
<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">
<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" ref="mySwiper">
<swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
</swiper>
</div>
<div class="time">时间：{{ timeNow }}</div>
</div>
</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()
......@@ -102,7 +144,7 @@
width: 100%;
height: 100%;
background-color: #111;
.page-pack {
.page-pack {
width: 1710px;
height: 860px;
background-color: #111;
......@@ -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>
\ No newline at end of file
</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