PIS轮播图

src/views/pis/components/slideshow.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="wrapper">
+    <div :class="{ content: true, animation: animation }" :style="`transform: translateX(-${currentIndex}00%)`">
+      <template v-for="(path, idx) in _paths">
+        <img class="img" :src="idx - currentIndex < 3 ? `${prefix}${path}` : ''" :key="`${path}${idx}`" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+let timer
+export default {
+  name: 'SlideShow',
+  props: {
+    paths: {
+      type: Array,
+      validator: val => Array.isArray(val) && val.every(item => typeof item === 'string'),
+    },
+    prefix: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      animation: true,
+    }
+  },
+  computed: {
+    len() {
+      return this._paths.length
+    },
+    _paths() {
+      return [...this.paths, this.paths[0]]
+    },
+  },
+  mounted() {
+    this.initAnimation()
+  },
+  methods: {
+    initAnimation() {
+      timer = setInterval(() => {
+        this.animation = true
+        this.currentIndex = this.nextIndex(this.currentIndex)
+        setTimeout(() => {
+          if (this.currentIndex === this.len - 1) {
+            this.animation = false
+            this.currentIndex = this.nextIndex(this.currentIndex)
+          }
+        }, 1000)
+      }, 3000)
+    },
+    nextIndex(idx) {
+      return idx < this.len - 1 ? idx + 1 : 0
+    },
+  },
+  beforeDestroy() {
+    timer = null
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  .content {
+    height: 100%;
+    white-space: nowrap;
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.animation {
+  transition: 1s linear all;
+}
+</style>

src/views/pis/index.vue

@@ -48,7 +48,16 @@
         </div>
       </div>
       <div class="media">
-        <div class="mediacontent" :style="{ backgroundImage: `url(${standPisImgUrl})` }"></div>
+        <div class="mediacontent">
+          <SlideShow
+            :prefix="prefix"
+            :paths="
+              Array(27)
+                .fill()
+                .map((e, i) => `img${i + 1}.jpg`)
+            "
+          />
+        </div>
         <div class="banner">
           <div class="text">{{ standPisState.text }}</div>
           <div class="text">{{ standPisState.text }}</div>
@@ -98,7 +107,16 @@
               }}{{ onboardPisState.endStationNameEn ? ' / TO: ' + currentTrain.endStationNameEn : '' }}
             </div>
           </div>
-          <div class="media" :style="{ backgroundImage: `url(${onboardPisImgUrl})` }"></div>
+          <div class="media">
+            <SlideShow
+              :prefix="prefix"
+              :paths="
+                Array(27)
+                  .fill()
+                  .map((e, i) => `img${i + 1}.jpg`)
+              "
+            />
+          </div>
         </div>
       </div>
       <div class="banner">
@@ -113,8 +131,10 @@
 import { creatSubscribe, clearSubscribe, getTopic, displayTopic } from '@/utils/stomp'
 import { timestampFormat } from '@/utils/date'
 import logo from '@/assets/icon/favicon_hhzy.png'
+import SlideShow from './components/slideshow'
 export default {
   name: 'PIS',
+  components: { SlideShow },
   watch: {
     '$store.state.socket.simulationTimeSync': function(val) {
       this.time = timestampFormat('HH:mm', val)
@@ -147,18 +167,19 @@ export default {
         firstEndStationName: '',
         secondTrainRemain: undefined,
         secondEndStationName: '',
-        text: '党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。',
+        text:
+          '党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。',
       },
       onboardPisState: {
         groupNumber: '',
         stationName: '',
         endStationName: '',
         parking: 0,
-        text:
-          '今日天气：晴，最低气温15℃，最高气温22℃，风向风力：东北风3级，空气质量：良好',
+        text: '今日天气：晴，最低气温15℃，最高气温22℃，风向风力：东北风3级，空气质量：良好',
       },
       standPisImgUrl: `${this.$store.state.user.resourcesUrl}/PICTURE/2022-08-01/standPis.png`,
       onboardPisImgUrl: `${this.$store.state.user.resourcesUrl}/PICTURE/2022-08-01/onboardPis.png`,
+      prefix: `${this.$store.state.user.resourcesUrl}/PICTURE/pis/`,
     }
   },
   mounted() {