fea(AVI轮播): AVI详情工作区轮播效果开发

src/lang/zh/route.js

@@ -48,5 +48,8 @@ export default {
     StationPaintingWorkShop: '涂装车间',
     // 监控大屏
     CenterControl: '监控大屏',
-    CenterControlIndex: '监控大屏'
+    CenterControlIndex: '监控大屏',
+    // 轮播AVI
+    CarouselAvi: 'AVI轮播',
+    CarouselAviIndex: 'AVI轮播'
 }

src/permission.js

@@ -27,7 +27,8 @@ const whiteList = [
     '/monitor/monitorPutty',
     '/monitor/monitorMiddleCoat',
     '/monitor/monitorComplexionPaint',
-    '/monitor/monitorFinishedCar'
+    '/monitor/monitorFinishedCar',
+    '/carouselAvi/index'
 ]
 
 NProgress.configure({

src/router/index.js

@@ -49,6 +49,21 @@ export const constantRouterMap = [{
     component: () => import('@/views/ErrorPage/401'),
     hidden: true
 },
+{
+    path: '/carouselAvi',
+    component: () => import('@/views/Layout/lsd'),
+    redirect: '/carouselAvi/index',
+    meta: { title: 'CarouselAvi', icon: 'template', openNewWindow: true },
+    hidden: true,
+    children: [
+        {
+            path: 'index',
+            component: () => import('@/views/Monitor/CarouselAvi/index'),
+            name: 'CarouselAviIndex',
+            meta: { title: 'CarouselAviIndex', icon: 'template' }
+        }
+    ]
+},
 {
     path: '/led',
     component: () => import('@/views/Layout/lsd'),
@@ -57,49 +72,57 @@ export const constantRouterMap = [{
     hidden: true,
     children: [
         {
-            path: 'stationElectrophoresis', //电泳
+            //电泳
+            path: 'stationElectrophoresis',
             component: () => import('@/views/Led/Station/electrophoresis'),
             name: 'StationElectrophoresis',
             meta: { title: 'StationElectrophoresis', icon: 'template' }
         },
         {
-            path: 'stationInsulatingAnticorrosive', //隔热防腐
+            //隔热防腐
+            path: 'stationInsulatingAnticorrosive',
             component: () => import('@/views/Led/Station/insulatingAnticorrosive'),
             name: 'StationInsulatingAnticorrosive',
             meta: { title: 'stationInsulatingAnticorrosive', icon: 'template' }
         },
         {
-            path: 'stationPutty', //腻子
+            //腻子
+            path: 'stationPutty',
             component: () => import('@/views/Led/Station/putty'),
             name: 'StationPutty',
             meta: { title: 'StationPutty', icon: 'template' }
         },
         {
-            path: 'stationApplyArtificial', //中涂人工
+            //中涂人工
+            path: 'stationApplyArtificial',
             component: () => import('@/views/Led/Station/applyArtificial'),
             name: 'StationApplyArtificial',
             meta: { title: 'StationApplyArtificial', icon: 'template' }
         },
         {
-            path: 'stationFloatingCoatRobot', //中涂机器人
+            //中涂机器人
+            path: 'stationFloatingCoatRobot',
             component: () => import('@/views/Led/Station/floatingCoatRobot'),
             name: 'StationFloatingCoatRobot',
             meta: { title: 'StationFloatingCoatRobot', icon: 'template' }
         },
         {
-            path: 'stationSurfaceVarnish', //面/清漆
+            //面/清漆
+            path: 'stationSurfaceVarnish',
             component: () => import('@/views/Led/Station/surfaceVarnish'),
             name: 'StationSurfaceVarnish',
             meta: { title: 'StationSurfaceVarnish', icon: 'template' }
         },
         {
-            path: 'stationSprayDryingRoom', //喷漆室，烘干室
+            //喷漆室，烘干室
+            path: 'stationSprayDryingRoom',
             component: () => import('@/views/Led/Station/sprayDryingRoom'),
             name: 'StationSprayDryingRoom',
             meta: { title: 'StationSprayDryingRoom', icon: 'template' }
         },
         {
-            path: 'stationPaintingWorkShop', //涂装车间
+            //涂装车间
+            path: 'stationPaintingWorkShop',
             component: () => import('@/views/Led/Station/paintingWorkShop'),
             name: 'StationPaintingWorkShop',
             meta: { title: 'StationPaintingWorkShop', icon: 'template' }

src/views/Monitor/CarouselAvi/index.vue

+<template>
+    <!-- AVI详情工作区轮播 -->
+    <div class="swiper-pack">
+        <swiper 
+            :options="swiperOption" 
+            ref="mySwiper">
+            <!-- 钣金车 -->
+            <swiper-slide>
+                <SheetMetalCar></SheetMetalCar>
+            </swiper-slide>
+            <!-- 电泳 -->
+            <swiper-slide>
+                <Electroporesis></Electroporesis>
+            </swiper-slide>
+            <!-- 密封防腐 -->
+            <swiper-slide>
+                <SealedAnticorrosion></SealedAnticorrosion>
+            </swiper-slide>
+            <!-- 腻子 -->
+            <swiper-slide>
+                <Putty></Putty>
+            </swiper-slide>
+            <!-- 中涂 -->
+            <swiper-slide>
+                <MiddleCoat></MiddleCoat>
+            </swiper-slide>
+            <!-- 面/色漆 -->
+            <swiper-slide>
+                <ComplexionPaint></ComplexionPaint>
+            </swiper-slide>
+            <!-- 成品 -->
+            <swiper-slide>
+                <FinishedCar></FinishedCar>
+            </swiper-slide>
+        </swiper>
+    </div>
+</template>
+
+<script>
+    import { swiper, swiperSlide } from 'vue-awesome-swiper'
+    // 钣金车
+    import SheetMetalCar from '../components/SheetMetalCar'
+    // 电泳
+    import Electroporesis from '../components/Electrophoresis'
+    // 密封防腐
+    import SealedAnticorrosion from '../components/SealedAnticorrosion'
+    // 腻子
+    import Putty from '../components/Putty'
+    // 中涂
+    import MiddleCoat from '../components/MiddleCoat'
+    // 面/色漆
+    import ComplexionPaint from '../components/ComplexionPaint'
+    // 成品
+    import FinishedCar from '../components/FinishedCar'
+
+    export default {
+        name: 'CarouselAviIndex',
+        components: {
+            swiper,
+            swiperSlide,
+            SheetMetalCar,
+            Electroporesis,
+            SealedAnticorrosion,
+            Putty,
+            MiddleCoat,
+            ComplexionPaint,
+            FinishedCar
+        },
+        data () {
+            return {
+                // swiper配置信息
+                swiperOption: {
+                    autoplay: {
+                        delay: 8000,
+                        loop: true
+                    }
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .swiper-pack {
+        min-height: 100%;
+        background: rgba(0, 7, 12, 1);
+
+        .swiper-container {
+
+            .swiper-wrapper {
+
+                .swiper-slide {
+                    width: 1600px;
+                    height: 900px;
+                    overflow: hidden;
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file