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 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>中通SCADA+AVI系统</title> <title>数据采集系统 AVI车体自动识别系统</title>
</head> </head>
<body> <body>
<div id="app"></div> <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> <template>
<!-- 隔热防腐工位级Led --> <!-- 隔热防腐工位级Led -->
<div class="container"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;"> <swiper :options="outSwiperOption" ref="outSwiper">
<div class="title-pack">{{timmingData.name}}</div> <swiper-slide>
<div class="table-pack"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="tr"> <div class="title-pack">{{timmingData.name}}</div>
<div class="th-l">进车数</div> <div class="table-pack">
<div class="th-r">{{timmingData.busIn}}</div> <div class="tr">
</div> <div class="th-l">进车数</div>
<div class="tr"> <div class="th-r">{{timmingData.busIn}}</div>
<div class="th-l">出车数</div> </div>
<div class="th-r">{{timmingData.busOut}}</div> <div class="tr">
</div> <div class="th-l">出车数</div>
<div class="info"> <div class="th-r">{{timmingData.busOut}}</div>
设备报警信息： </div>
<div class="line"></div> <div class="info">
<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> <div class="line"></div>
</swiper> <swiper :options="swiperOption" ref="mySwiper">
</div> <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>
<div class="time">时间：{{ timeNow }}</div> </swiper>
</div> </div>
</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> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment' import Moment from 'moment'
let self = null
export default { export default {
name: 'StationFour', name: 'StationFour',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
Logo,
GreenFuture
}, },
data () { data () {
return { return {
...@@ -52,7 +72,28 @@ ...@@ -52,7 +72,28 @@
// swiper配置信息 // swiper配置信息
swiperOption: { swiperOption: {
autoplay: { 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 @@ ...@@ -75,6 +116,7 @@
}, },
mounted () { mounted () {
setTimeout(() => { setTimeout(() => {
self = this
this.getData() this.getData()
// 实时时间 // 实时时间
this.judgeTimeNow() this.judgeTimeNow()
...@@ -179,5 +221,15 @@ ...@@ -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> </style>
\ No newline at end of file
src/views/Led/Station/stationOne.vue
View file @ f8473458
<template> <template>
<div class="container"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <swiper :options="outSwiperOption" ref="outSwiper">
<div class="title-pack">{{timmingData.name}}</div> <swiper-slide>
<div class="table-pack"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="tr"> <div class="title-pack">{{timmingData.name}}</div>
<div class="th-l">进车数</div> <div class="table-pack">
<div class="th-r">{{timmingData.busIn}}</div> <div class="tr">
</div> <div class="th-l">进车数</div>
<div class="tr"> <div class="th-r">{{timmingData.busIn}}</div>
<div class="th-l">出车数</div> </div>
<div class="th-r">{{timmingData.busOut}}</div> <div class="tr">
</div> <div class="th-l">出车数</div>
<div class="info"> <div class="th-r">{{timmingData.busOut}}</div>
设备报警信息： </div>
<div class="line"></div> <div class="info">
<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> <div class="line"></div>
</swiper> <swiper :options="contentSwiperOption" ref="contentSwiper">
</div> <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>
<div class="time">时间：{{ timeNow }}</div> </swiper>
</div> </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>
</div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment' import Moment from 'moment'
let self = null
export default { export default {
name: 'StationOne', name: 'StationOne',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
Logo,
GreenFuture
}, },
data () { data () {
return { return {
...@@ -48,10 +68,31 @@ ...@@ -48,10 +68,31 @@
timer: '', timer: '',
// Data轮询定时器 // Data轮询定时器
dataTimer: '', dataTimer: '',
// swiper配置信息 // 内容swiper配置信息
swiperOption: { contentSwiperOption: {
autoplay: {
delay: 5000
}
},
// 外层swiper配置
outSwiperOption: {
autoplay: { 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 @@ ...@@ -74,6 +115,7 @@
}, },
mounted () { mounted () {
setTimeout(() => { setTimeout(() => {
self = this
this.getData() this.getData()
// 实时时间 // 实时时间
this.judgeTimeNow() this.judgeTimeNow()
...@@ -83,7 +125,6 @@ ...@@ -83,7 +125,6 @@
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 () {
...@@ -102,7 +143,7 @@ ...@@ -102,7 +143,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #111; background-color: #111;
.page-pack { .page-pack {
width: 1710px; width: 1710px;
height: 860px; height: 860px;
background-color: #111; background-color: #111;
...@@ -179,5 +220,15 @@ ...@@ -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> </style>
\ No newline at end of file
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> <template>
<div class="container"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0"> <swiper :options="outSwiperOption" ref="outSwiper">
<div class="title-pack">{{ timmingData.name }}</div> <swiper-slide>
<div class="table-pack"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
<div class="tr"> <div class="title-pack">{{ timmingData.name }}</div>
<div class="th-l">进车数</div> <div class="table-pack">
<div class="th-r">{{timmingData.busIn}}</div> <div class="tr">
</div> <div class="th-l">进车数</div>
<div class="tr"> <div class="th-r">{{timmingData.busIn}}</div>
<div class="th-l">出车数</div> </div>
<div class="th-r">{{timmingData.busOut}}</div> <div class="tr">
</div> <div class="th-l">出车数</div>
<div class="info"> <div class="th-r">{{timmingData.busOut}}</div>
设备报警信息： </div>
<div class="line"></div> <div class="info">
<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> <div class="line"></div>
</swiper> <swiper :options="swiperOption" ref="mySwiper">
</div> <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>
<div class="time">时间：{{ timeNow }}</div> </swiper>
</div> </div>
</div> <div class="time">时间：{{ timeNow }}</div>
</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> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment' import Moment from 'moment'
let self = null
export default { export default {
name: 'StationThree', name: 'StationThree',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
Logo,
GreenFuture
}, },
data () { data () {
return { return {
...@@ -53,6 +73,27 @@ ...@@ -53,6 +73,27 @@
autoplay: { autoplay: {
delay: 5000 //轮播频率 5s 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 @@ ...@@ -74,6 +115,7 @@
}, },
mounted () { mounted () {
setTimeout(() => { setTimeout(() => {
self = this
this.getData() this.getData()
// 实时时间 // 实时时间
this.judgeTimeNow() this.judgeTimeNow()
...@@ -178,5 +220,15 @@ ...@@ -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> </style>
\ No newline at end of file
src/views/Led/Station/stationTwo.vue
View file @ f8473458
<template> <template>
<!-- 电泳工位级Led --> <!-- 电泳工位级Led -->
<div class="container"> <div class="container">
<div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;"> <swiper :options="outSwiperOption" ref="outSwiper">
<div class="title-pack">{{timmingData.name}}</div> <swiper-slide>
<div class="table-pack"> <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0;">
<div class="tr"> <div class="title-pack">{{timmingData.name}}</div>
<div class="th-l">进车数</div> <div class="table-pack">
<div class="th-r">{{timmingData.busIn}}</div> <div class="tr">
</div> <div class="th-l">进车数</div>
<div class="tr"> <div class="th-r">{{timmingData.busIn}}</div>
<div class="th-l">出车数</div> </div>
<div class="th-r">{{timmingData.busOut}}</div> <div class="tr">
</div> <div class="th-l">出车数</div>
<div class="info"> <div class="th-r">{{timmingData.busOut}}</div>
设备报警信息： </div>
<div class="line"></div> <div class="info">
<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> <div class="line"></div>
</swiper> <swiper :options="swiperOption" ref="mySwiper">
</div> <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>
<div class="time">时间：{{ timeNow }}</div> </swiper>
</div> </div>
</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> </template>
<script> <script>
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Logo from './components/Logo'
import GreenFuture from './components/GreenFuture'
import Moment from 'moment' import Moment from 'moment'
let self = this
export default { export default {
name: 'StationTwo', name: 'StationTwo',
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
Logo,
GreenFuture
}, },
data () { data () {
return { return {
...@@ -52,7 +72,28 @@ ...@@ -52,7 +72,28 @@
// swiper配置信息 // swiper配置信息
swiperOption: { swiperOption: {
autoplay: { 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 @@ ...@@ -75,6 +116,7 @@
}, },
mounted () { mounted () {
setTimeout(() => { setTimeout(() => {
self = this
this.getData() this.getData()
// 实时时间 // 实时时间
this.judgeTimeNow() this.judgeTimeNow()
...@@ -102,7 +144,7 @@ ...@@ -102,7 +144,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #111; background-color: #111;
.page-pack { .page-pack {
width: 1710px; width: 1710px;
height: 860px; height: 860px;
background-color: #111; background-color: #111;
...@@ -179,5 +221,15 @@ ...@@ -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> </style>
\ No newline at end of file
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