Ver código fonte

Merge branch 'dev' of http://39.106.8.246:3003/yunxing/wanda-bm-guide-h5 into dev

zhangyu 4 anos atrás
pai
commit
054dd4109a

+ 3 - 1
src/components/assetDetail/RepairMaintenance.vue

@@ -209,7 +209,9 @@ export default {
     // background-color: #fff;
     text-align: center;
     .equipment-search {
-      width: 80%;
+      width: 100%;
+      padding-left: 15px;
+      padding-right: 15px;
       margin: 0 auto;
       background: none;
     }

+ 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>

+ 51 - 36
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;
-        justify-content: center;
-        align-items: center;
+        flex-wrap: wrap;
         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: auto;
+    max-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;

+ 3 - 1
src/components/equipmentFacilities/RepairMaintenance.vue

@@ -123,7 +123,9 @@ export default {
     // background-color: #fff;
     text-align: center;
     .equipment-search {
-      width: 80%;
+      width: 100%;
+      padding-left: 15px;
+      padding-right: 15px;
       margin: 0 auto;
       background: none;
     }

+ 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>

+ 5 - 1
src/views/equipmentFacilities/EngineRoomPicture.vue

@@ -297,7 +297,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }
@@ -320,6 +322,8 @@ export default {
         /deep/ .van-cell {
             display: flex;
             align-items: center;
+            padding-left: 0;
+            padding-right: 0;
             .van-cell__title {
                 display: flex;
                 vertical-align: center;

+ 6 - 2
src/views/equipmentFacilities/EquipmentList.vue

@@ -426,7 +426,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }
@@ -438,7 +440,7 @@ export default {
     // 设备列表
     .equipment-list {
         width: 100%;
-        padding: 0 10px;
+        padding: 0 15px;
         background-color: #fff;
         min-height: 1px;
         max-height: calc(100% - 100px);
@@ -449,6 +451,8 @@ export default {
         /deep/ .van-cell {
             display: flex;
             align-items: center;
+            padding-left: 0;
+            padding-right: 0;
             .van-cell__title {
                 display: flex;
                 vertical-align: center;

+ 3 - 1
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -314,7 +314,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }

+ 5 - 73
src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

@@ -8,13 +8,8 @@
             <van-search class='equipment-search' v-model='keyword' placeholder='请输入抽屉编号/控制回路/楼层' @search='onSearch'></van-search>
         </div>
         <div class='card-container'>
-            <!-- <swiper class='swiper' ref='bannerSwiper' :options='swiperOption' v-show='list.length'>
-                <swiper-slide v-for='(item,index) in list' :class='{"active":item.active}' :key='`${index}_${item.drawernum}`'>{{item.drawernum}}</swiper-slide>
-                <div class='swiper-pagination' slot='pagination'></div>
-            </swiper>-->
             <!-- 解决input搜索,页面卡顿的情况,将swiper抽离成组件 -->
             <MSwiper :list='list' v-if='list.length' @itemClick='itemClick' />
-            <!-- <Test /> -->
         </div>
         <div class='info-container' v-show='list.length'>
             <div class='border'></div>
@@ -64,7 +59,6 @@ import { queryDygjcxline } from '@/api/equipmentList'
 import { mapGetters } from 'vuex'
 import { cloneDeep } from 'lodash'
 import MSwiper from '@/components/equipmentFacilities/MSwiper'
-import Test from '@/components/equipmentFacilities/Test'
 // let swiperVm = null
 export default {
     name: 'LowVoltageCabinetDetail',
@@ -73,7 +67,6 @@ export default {
         Swiper,
         SwiperSlide,
         MSwiper,
-        Test,
     },
     directives: {
         swiper: directive,
@@ -83,33 +76,6 @@ export default {
             pageKey: `key_${new Date().getTime()}`,
             keyword: '',
             noDataFlag: false,
-            swiperOption: {
-                slidesPerView: 3,
-                // slidesPerGroup: 3,
-                slidesPerColumn: 5,
-                spaceBetween: 10,
-                slidesPerColumnFill: 'row',
-                pagination: {
-                    el: '.swiper-pagination',
-                    clickable: true,
-                },
-                // on: {
-                //     click: function (event) {
-                //         const { realIndex } = this
-                //         // 这里有坑,需要注意的是:this 指向的是 swpier 实例,而不是当前的 vue, 因此借助 vm,来调用 methods 里的方法
-                //         console.log(this) // -> Swiper
-                //         console.log(event.target.innerText)
-                //         // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
-                //         swiperVm.handleTap(event.target.innerText)
-                //     },
-                // },
-                // autoplay: {
-                //     //自动播放
-                //     delay: 1500,
-                //     disableOnInteraction: false,
-                // },
-                // speed: 1500, //播放速度
-            },
             list: [],
             currentInfo: {},
             location: '', //路由传递的参数
@@ -178,7 +144,7 @@ export default {
                 location: this.location,
             }
             if (this.keyword) {
-                getParams.keyword = `${this.keyword}:drawernum,outspec,floor`
+                getParams.keyword = `${this.keyword}:drawernum,control,floor`
             }
             let res = await queryDygjcxline({ getParams })
             if (!res?.data) {
@@ -217,7 +183,9 @@ export default {
         background-color: #f5f6f7;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }
@@ -229,44 +197,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 {

+ 3 - 1
src/views/equipmentFacilities/LowVoltageCabinet_v0.1.vue

@@ -477,7 +477,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }

+ 3 - 1
src/views/equipmentFacilities/LowVoltageCabinet_v_0.2.vue

@@ -440,7 +440,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }

+ 3 - 1
src/views/equipmentFacilities/MainEquipment.vue

@@ -329,7 +329,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-          width: 80%;
+          width: 100%;
+          padding-left: 15px;
+          padding-right: 15px;
           margin: 0 auto;
           background: none;
         }

+ 3 - 1
src/views/equipmentFacilities/MainEquipmentDetail.vue

@@ -350,7 +350,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }

+ 3 - 1
src/views/equipmentFacilities/MoreEquipmentList.vue

@@ -501,7 +501,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-            width: 80%;
+            width: 100%;
+            padding-left: 15px;
+            padding-right: 15px;
             margin: 0 auto;
             background: none;
         }

+ 3 - 1
src/views/equipmentFacilities/OtherMatters.vue

@@ -395,7 +395,9 @@ export default {
         // background-color: #fff;
         text-align: center;
         .equipment-search {
-          width: 80%;
+          width: 100%;
+          padding-left: 15px;
+          padding-right: 15px;
           margin: 0 auto;
           background: none;
         }