Ver código fonte

低压柜轮播修改

yunxing 4 anos atrás
pai
commit
4c0732d467

+ 0 - 156
src/components/equipmentFacilities/MSwiper copy.vue

@@ -1,156 +0,0 @@
-<template>
-    <swiper class='swiper' ref='mySwiper' :options='swiperOption' v-show='swiperList.length'>
-        <swiper-slide v-for='(item,index) in swiperList' :class='{"active":item.active}' :key='`${index}_${item.drawernum}`'>{{item.drawernum}}</swiper-slide>
-        <div class='swiper-pagination' slot='pagination'></div>
-        <!-- 如果需要滚动条 -->
-        <!-- <div class='swiper-scrollbar'></div> -->
-    </swiper>
-</template>
-
-<script>
-import Vue from 'vue'
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
-import 'swiper/swiper-bundle.css'
-import { cloneDeep } from 'lodash'
-let swiperVm = null
-export default {
-    components: {
-        Swiper,
-        SwiperSlide,
-    },
-    directives: {
-        swiper: directive,
-    },
-    props: {
-        list: {
-            type: Array,
-            default: () => {
-                return []
-            },
-        },
-    },
-    computed: {
-        swiper() {
-            return this.$refs.mySwiper.$swiper
-        },
-    },
-    data() {
-        return {
-            swiperList: [],
-            swiperOption: {
-                observer: true,
-                observeParents: true,
-                slidesPerView: 3,
-                // slidesPerGroup: 3,
-                slidesPerColumn: 5,
-                spaceBetween: 10,
-                slidesPerColumnFill: 'row',
-                pagination: {
-                    el: '.swiper-pagination',
-                    clickable: false,
-                    type: 'fraction',
-                    // bulletClass: 'my-bullet',
-                    // bulletActiveClass: 'my-bullet-active',
-                },
-                on: {
-                    click: function (event) {
-                        const { realIndex } = this
-                        // 这里有坑,需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
-                        // console.log(this) // -> Swiper
-                        // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
-                        swiperVm.handleTap(event.target.innerText)
-                    },
-                },
-                // autoplay: {
-                //     //自动播放
-                //     delay: 1500,
-                //     disableOnInteraction: false,
-                // },
-                // speed: 1500, //播放速度
-            },
-        }
-    },
-    created() {
-        swiperVm = this
-        this.swiperList = cloneDeep(this.list)
-    },
-    mounted() {
-        console.log(this.swiper)
-    },
-    methods: {
-        handleTap(text) {
-            console.log(text)
-            if (text.indexOf('\n') !== -1) {
-                return false
-            }
-            let currentInfo = {}
-            this.swiperList.map((item, index) => {
-                item.active = false
-                if (text === item.drawernum) {
-                    item.active = true
-                    currentInfo = cloneDeep(item)
-                }
-            })
-            this.$emit('itemClick', currentInfo)
-        },
-    },
-}
-</script>
-
-<style lang="less" scoped>
-.swiper {
-    max-height: 300px;
-    width: 100%;
-    .swiper-slide {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        color: #333333;
-        font-size: 14px;
-        font-weight: 400;
-        background: #ebeded;
-    }
-}
-
-.swiper {
-    max-height: 300px;
-    margin-left: auto;
-    margin-right: auto;
-    .swiper-slide {
-        height: 30px;
-    }
-}
-.swiper-pagination {
-    position: relative;
-    bottom: 0;
-    height: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    flex-wrap: wrap;
-    color: #025baa;
-    font-size: 14px;
-}
-.active {
-    background: #025baa !important;
-    color: #fff !important;
-}
-/deep/ .my-bullet {
-    width: 0.21333rem;
-    height: 0.21333rem;
-    border-radius: 100%;
-    background: #80add4;
-    opacity: 0.2;
-    margin: 0 3px;
-    display: none;
-}
-/deep/ .my-bullet:nth-child(1),
-/deep/ .my-bullet:nth-child(2),
-/deep/ .my-bullet:nth-child(3) {
-    display: inline-block;
-}
-/deep/ .my-bullet-active {
-    background: #80add4;
-}
-</style>

+ 50 - 35
src/components/equipmentFacilities/MSwiper.vue

@@ -1,6 +1,14 @@
 <template>
     <swiper class='swiper' ref='mySwiper' :options='swiperOption' v-show='swiperList.length'>
-        <swiper-slide v-for='(item,index) in swiperList' :class='{"active":item.active}' :key='`${index}_${item.drawernum}`'>{{item.drawernum}}</swiper-slide>
+        <swiper-slide v-for='(item,index) in swiperData' :key='index'>
+            <div
+                class='card'
+                :class='{"active":detail.active}'
+                @click='handleClick(detail)'
+                v-for='(detail,dIndex) in item'
+                :key='dIndex'
+            >{{detail.drawernum}}</div>
+        </swiper-slide>
         <div class='swiper-pagination' slot='pagination'></div>
         <!-- 如果需要滚动条 -->
         <!-- <div class='swiper-scrollbar'></div> -->
@@ -37,14 +45,10 @@ export default {
     data() {
         return {
             swiperList: [],
+            swiperData: [],
             swiperOption: {
                 observer: true,
                 observeParents: true,
-                slidesPerView: 3,
-                // slidesPerGroup: 3,
-                slidesPerColumn: 5,
-                spaceBetween: 10,
-                slidesPerColumnFill: 'row',
                 pagination: {
                     el: '.swiper-pagination',
                     clickable: false,
@@ -52,15 +56,15 @@ export default {
                     // bulletClass: 'my-bullet',
                     // bulletActiveClass: 'my-bullet-active',
                 },
-                on: {
-                    click: function (event) {
-                        const { realIndex } = this
-                        // 这里有坑,需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
-                        // console.log(this) // -> Swiper
-                        // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
-                        swiperVm.handleTap(event.target.innerText)
-                    },
-                },
+                // on: {
+                //     click: function (event) {
+                //         const { realIndex } = this
+                //         // 这里有坑,需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
+                //         // console.log(this) // -> Swiper
+                //         // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
+                //         swiperVm.handleTap(event.target.innerText)
+                //     },
+                // },
                 // autoplay: {
                 //     //自动播放
                 //     delay: 1500,
@@ -73,59 +77,69 @@ export default {
     created() {
         swiperVm = this
         this.swiperList = cloneDeep(this.list)
+        let swiperData = []
+        swiperData = this.group(this.swiperList, 15)
+        this.swiperData = swiperData
     },
     mounted() {
         console.log(this.swiper)
-        window.sssss= this.swiper
     },
     methods: {
-        handleTap(text) {
-            console.log(text)
-            if (text.indexOf('\n') !== -1) {
-                return false
-            }
+        handleClick(detail) {
+            // console.log(detail)
             let currentInfo = {}
             this.swiperList.map((item, index) => {
                 item.active = false
-                if (text === item.drawernum) {
+                if (detail.drawernum === item.drawernum) {
                     item.active = true
                     currentInfo = cloneDeep(item)
                 }
             })
             this.$emit('itemClick', currentInfo)
         },
+        // 数组拆分为 15个的二维数组
+        group(array, subGroupLength) {
+            let index = 0
+            let newArray = []
+            while (index < array.length) {
+                newArray.push(array.slice(index, (index += subGroupLength)))
+            }
+            return newArray
+        },
     },
 }
 </script>
 
 <style lang="less" scoped>
 .swiper {
-    max-height: 300px;
+    height: 210px;
     width: 100%;
     .swiper-slide {
         display: flex;
+        flex-wrap: wrap;
         justify-content: center;
-        align-items: center;
         text-align: center;
         color: #333333;
         font-size: 14px;
         font-weight: 400;
-        background: #ebeded;
     }
 }
-
-.swiper {
-    max-height: 300px;
-    margin-left: auto;
-    margin-right: auto;
-    .swiper-slide {
-        height: 30px;
-    }
+/deep/ .swiper-wrapper {
+    height: 190px;
+}
+.card {
+    width: calc(33.33333% - 5.333334px);
+    margin-bottom: 8px;
+    height: 30px;
+    line-height: 30px;
+    background: #ebeded;
+}
+.card:not(:nth-child(3n)) {
+    margin-right: 8px;
 }
 .swiper-pagination {
-    position: relative;
+    position: absolute;
     bottom: 0;
-    height: 30px;
     display: flex;
     justify-content: center;
     align-items: flex-end;
@@ -137,6 +151,7 @@ export default {
     background: #025baa !important;
     color: #fff !important;
 }
+
 /deep/ .my-bullet {
     width: 0.21333rem;
     height: 0.21333rem;

+ 0 - 101
src/components/equipmentFacilities/Test.vue

@@ -1,101 +0,0 @@
-<template>
-    <div class='cardFlow'>
-        <swiper :options='swiperOption' ref='mySwiper'>
-            <swiper-slide v-for='(slide, index) in virtualData.slides' :key='index'>
-                <img :src='"https://api.godsunchained.com/v0/image/" +slide +"?format=card&w=300"' />
-            </swiper-slide>
-
-            <!-- Optional controls -->
-            <div class='swiper-pagination' slot='pagination'></div>
-            <div class='swiper-button-prev' slot='button-prev'></div>
-            <div class='swiper-button-next' slot='button-next'></div>
-        </swiper>
-    </div>
-</template>
-
-<script>
-import 'swiper/swiper-bundle.css'
-
-import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
-export default {
-    components: {
-        Swiper,
-        SwiperSlide,
-    },
-
-    data() {
-        return {
-            virtualData: {
-                slides: [],
-            },
-            swiperOption: {
-                slidesPerView: 9,
-                centeredSlides: true,
-                spaceBetween: -120,
-                slideToClickedSlide: true,
-                effect: 'coverflow',
-                autoHeight: false,
-                setWrapperSize: true,
-                height: 500,
-                coverflowEffect: {
-                    rotate: 20,
-                    slideShadows: false,
-                    stretch: -200,
-                    depth: 400,
-                    //modifier: 5
-                },
-                pagination: {
-                    el: '.swiper-pagination',
-                    type: 'fraction',
-                },
-                navigation: {
-                    nextEl: '.swiper-button-next',
-                    prevEl: '.swiper-button-prev',
-                    
-                },
-                virtual: {
-                    addSlidesBefore: 15,
-                    addSlidesAfter: 15,
-                    renderExternal: (data) => {
-                        console.log('renderExternal', data)
-                        this.virtualData = data
-                    },
-                    slides: (function () {
-                        console.log(1111111111111)
-                        const slides = []
-                        for (let i = 0; i < 600; i += 1) {
-                            slides.push(parseInt(Math.random() * 380))
-                        }
-                        console.log(slides)
-                        return slides
-                    })(),
-                },
-            },
-        }
-    },
-    methods: {
-        toSlide(i) {
-            console.log('toSlide')
-            this.$refs.mySwiper.swiper.slideTo(i, 0)
-        },
-    },
-}
-</script>
-
-<style>
-.cardFlow {
-    position: relative;
-    background-color: black;
-    padding: 20px 0;
-    border-radius: 15px;
-    overflow: hidden;
-    height: 500px;
-    transform-style: preserve-3d;
-}
-
-/*.swiper-pagination{
-background-color: rgba(0,0,0, 0.4);
-padding: 5px 10px;
-border-radius: 3px;
-}*/
-</style>

+ 1 - 37
src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

@@ -229,44 +229,8 @@ export default {
     // 轮播
     .card-container {
         margin-top: 12px;
-        padding: 20px 15px 0 15px;
+        padding: 10px 15px 0 15px;
         background: #fff;
-        .swiper {
-            max-height: 300px;
-            width: 100%;
-            .swiper-slide {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                text-align: center;
-                color: #333333;
-                font-size: 14px;
-                font-weight: 400;
-                background: #ebeded;
-            }
-        }
-
-        .swiper {
-            max-height: 300px;
-            margin-left: auto;
-            margin-right: auto;
-            .swiper-slide {
-                height: 30px;
-            }
-        }
-        .swiper-pagination {
-            position: relative;
-            bottom: 0;
-            height: 30px;
-            display: flex;
-            justify-content: center;
-            align-items: flex-end;
-            flex-wrap: wrap;
-        }
-        .active {
-            background: #025baa !important;
-            color: #fff !important;
-        }
     }
     // 下方信息
     .info-container {