Просмотр исходного кода

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

zhangyu 4 лет назад
Родитель
Сommit
85fd0901e4

+ 6 - 2
src/api/equipmentList.js

@@ -43,9 +43,13 @@ export function queryRoomCount({ getParams }) {
 export function querySmsLocation({ data, postParams }) {
     return httputils.fetchJson(`/data/sms_location/query`, data, postParams)
 }
+// 设备设施 - 查询配电室低压柜
+export function queryDygjcx({ data, postParams }) {
+    return httputils.fetchJson(`/data/sms_location/queryDygjcx`, data, postParams)
+}
 // 设备设施 - 查询低压出线柜明细
-export function queryDygjcxline({ data, postParams }) {
-    return httputils.fetchJson(`/data/sms_dygjcxline/queryDygjcxline`, data, postParams)
+export function queryDygjcxline({ getParams }) {
+    return httputils.getJson(`/data/sms_dygjcxline/queryDygjcxline`, getParams)
 }
 // 查询更多主要设备
 export function queryMoreAsset({ data, postParams }) {

+ 52 - 11
src/components/equipmentFacilities/Card.vue

@@ -1,5 +1,6 @@
 <template>
     <div class='m-card' :class='"type-"+type' v-if='type != 4'>
+        <div class='top-left'></div>
         <div class='name'>{{name}}</div>
         <div class='number'>
             {{total}}
@@ -12,10 +13,11 @@
         </div>
         <!-- 右上角tag -->
         <div class='tag' v-if='[2,3].includes(type)'></div>
+        <div class='bottom-right'></div>
     </div>
     <!-- 更多主要设备 卡片 -->
     <div class='m-card type-4' v-else>
-        <div>更多主要设备</div>
+        <div class='type'>更多主要设备</div>
         <div class='toggle'>展开</div>
     </div>
 </template>
@@ -82,11 +84,12 @@ export default {
     height: 100%;
     border-radius: 4px;
     background-size: cover !important;
-    padding: 15px 0 15px 15px;
+    padding: 8px 12px;
     line-height: 25px;
     display: flex;
     flex-direction: column;
     position: relative;
+    overflow: hidden;
     .name,
     .number {
         font-size: 14px;
@@ -109,21 +112,50 @@ export default {
     }
     .tag {
         position: absolute;
-        right: 15px;
-        top: 6px;
+        right: 5px;
+        top: 0;
         border-top: 10px solid #0481e1;
         border-left: 5px solid #0481e1;
         border-right: 5px solid #0481e1;
         border-bottom: 3px solid transparent;
     }
+    .top-left {
+        width: 100px;
+        height: 100px;
+        background: #edf6fd;
+        border-radius: 100px;
+        position: absolute;
+        top: -50px;
+        left: -30px;
+        z-index: -1;
+    }
+    .bottom-right {
+        width: 80px;
+        height: 80px;
+        background: #edf6fd;
+        border-radius: 100px;
+        position: absolute;
+        bottom: -40px;
+        right: -30px;
+        z-index: -1;
+    }
 }
 // 正常运维
 .type-1 {
-    background: url('../../assets/images/normal.png');
+    // background: url('../../assets/images/normal.png');
+    border: 2.5px solid #aadfd0;
+    .top-left,
+    .bottom-right {
+        background: #f0f9f7;
+    }
 }
 // 重要维保
 .type-2 {
-    background: url('../../assets/images/weibao.png');
+    border: 2.5px solid #9accf3;
+    .top-left,
+    .bottom-right {
+        background: #edf6fd;
+    }
     .type {
         color: #0481e1;
     }
@@ -134,7 +166,11 @@ export default {
 }
 // 重要维修
 .type-3 {
-    background: url('../../assets/images/weixiu.png');
+    border: 2.5px solid #efb1ad;
+    .top-left,
+    .bottom-right {
+        background: #fcf1f0;
+    }
     .type {
         color: #d83931;
     }
@@ -148,13 +184,17 @@ export default {
     display: flex;
     padding: 0;
     font-size: 14px;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
-    background: url('../../assets/images/more.png');
     position: relative;
-
+    border: 2.5px solid #cecfcf;
     .type {
         color: #666666;
+        height: 20px;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
     }
     .tag {
         border-color: #666;
@@ -165,8 +205,9 @@ export default {
         font-size: 12px;
         font-weight: 400;
         position: absolute;
-        bottom: 15px;
-        right: 20px;
+        bottom: 6px;
+        right: 8px;
     }
 }
+
 </style>

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

@@ -0,0 +1,156 @@
+<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>

+ 1 - 1
src/router/index.ts

@@ -160,7 +160,7 @@ const routes: Array<RouteConfig> = [
         name: 'LowVoltageCabinet',
         component: () => import(/* webpackChunkName: "lowVoltageCabinet" */ '../views/equipmentFacilities/LowVoltageCabinet.vue'),
         meta: {
-            keepAlive: false,
+            keepAlive: true,
             showTabbar: false,
             hideNarBar: true,
         },

+ 40 - 47
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -50,7 +50,7 @@ import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
 Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
 import { mapGetters } from 'vuex'
 
-import { queryDygjcxline, querySmsLocation } from '@/api/equipmentList'
+import { queryDygjcx, querySmsLocation } from '@/api/equipmentList'
 import { sleep } from '@/utils/util'
 import { cloneDeep } from 'lodash'
 export default {
@@ -59,12 +59,10 @@ export default {
     components: {},
     data() {
         return {
-            mock: 2,
             title: '配电室低压出线柜及出线明细',
             keyword: '',
             page: 1,
-            size: 100,
-            innerSize: 15,
+            size: 12,
             list: [],
             loading: false,
             finished: false,
@@ -86,11 +84,37 @@ export default {
         // 查询筛选条件(右弹窗)
         this.getFilterList()
         // this.onLoad()
-        window.vm = this
+    },
+    activated() {
+        if (this.$route.params.initPage || this.$route.params.type === 'all') {
+            this.initPage()
+        }
     },
     beforeMount() {},
     mounted() {},
     methods: {
+        /**
+         * 初始化页面,从设备设施,全局搜索,进入低压柜页面时,重置页面
+         * 低压柜返回该页面时,保持keepAlive
+         */
+        initPage() {
+            this.keyword = ''
+            this.page = 1
+            this.size = 12
+            this.list = []
+            this.loading = false
+            this.finished = false
+            this.noDataFlag = false
+            this.showPopup = false
+            this.systemList = [{ text: '全部', location: '全部', active: 'active' }]
+            this.modalData = {
+                location: '全部',
+            }
+            this.modalDataBak = {
+                location: '全部',
+            }
+            this.getFilterList()
+        },
         backPage() {
             this.$router.go(-1)
         },
@@ -106,6 +130,10 @@ export default {
             // list无数据,不执行后续分页查询
             console.log(this.list)
             console.log(this.count)
+            // TODO: 111
+            this.loading = false
+            this.finished = true
+            return true
             if (!this.list.length) {
                 this.finished = true
                 this.loading = false
@@ -128,16 +156,12 @@ export default {
                     plazaId: this.plazaId,
                 },
                 postParams: {
-                    // location: '',
+                    // locfl: '1001',
                     locflList: ['5201', '5204', '5209'], //低压柜
-                    pageable: {
-                        pageNumber: 1,
-                        pageSize: this.innerSize,
-                    },
                 },
             }
             if (this.keyword) {
-                queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
+                queryData.data.keyword = `${this.keyword}:wzjc;`
             }
             // 筛选 配电室之后, location字段上送
             if (this.modalData.location && this.modalData.location !== '全部') {
@@ -146,7 +170,7 @@ export default {
             console.log(queryData)
             let res
             try {
-                res = await queryDygjcxline(queryData)
+                res = await queryDygjcx(queryData)
             } catch (error) {
                 console.log(error)
             }
@@ -155,42 +179,17 @@ export default {
             if (!res?.data?.data) {
                 return false
             }
-            res.data.data.map((item, index, arr) => {
-                // console.log(item)
-                if (item?.count >= this.innerSize || item?.data?.length >= this.innerSize) {
-                    // console.log(item)
-                    arr[index] = {
-                        ...item,
-                        loadMore: true,
-                        loading: true,
-                        finished: false,
-                        list: [],
-                        page: 2,
-                        size: this.innerSize,
-                    }
-                } else {
-                    item.loadMore = false
-                }
-                if (!item.data) {
-                    item.data = []
-                }
-            })
             this.list = [...this.list, ...res.data.data]
-            console.log('%csssss', 'color:blue')
-            console.log(this.list)
             this.count = res.data.count
-            // 是否显示无数据的标志
-            let noDataFlag = !Boolean(this.list.filter((v) => v.data.length).length)
-            console.log(noDataFlag)
-            this.noDataFlag = noDataFlag
         },
 
         /**
-         *
+         * 跳转详情页面
          */
         goToDetail(item) {
             console.log(item)
-            this.$router.push({ name: 'LowVoltageCabinetDetail', params: {} })
+            const { location, wzjc } = item
+            this.$router.push({ name: 'LowVoltageCabinetDetail', params: { location, wzjc } })
         },
         /**
          * 查询筛选条件
@@ -225,13 +224,7 @@ export default {
             console.log(data)
             this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
         },
-        /**
-         * 显示详情
-         */
-        showDetail(detail) {
-            console.log(detail)
-            this.$router.push({ name: 'LowVoltageCabinetDetail', params: { ...detail } })
-        },
+
         /**
          * 点击右侧筛选
          */

+ 148 - 43
src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

@@ -1,64 +1,53 @@
 <template>
     <div class='low-voltage-cabinet-detail'>
         <!-- 顶部条 -->
-        <van-nav-bar :title='drawernum' left-arrow @click-left='backPage'></van-nav-bar>
+        <van-nav-bar :title='wzjc' left-arrow @click-left='backPage'></van-nav-bar>
         <!-- 搜索框 -->
         <div class='equipment-search-container'>
             <!-- TODO: 配电室名称 -->
             <van-search class='equipment-search' v-model='keyword' placeholder='请输入抽屉编号/控制回路/楼层' @search='onSearch'></van-search>
         </div>
         <div class='card-container'>
-            <swiper class='swiper' :options='swiperOption'>
-                <swiper-slide>1-2AA1-11</swiper-slide>
-                <swiper-slide>1-2AA1-112</swiper-slide>
-                <swiper-slide>1-2AA1-113</swiper-slide>
-                <swiper-slide>1-2AA1-114</swiper-slide>
-                <swiper-slide>1-2AA1-115</swiper-slide>
-                <swiper-slide>1-2AA1-116</swiper-slide>
-                <swiper-slide>1-2AA1-117</swiper-slide>
-                <swiper-slide>1-2AA1-118</swiper-slide>
-                <swiper-slide>1-2AA1-119</swiper-slide>
-                <swiper-slide>1-2AA1-1110</swiper-slide>
-                <swiper-slide>1-2AA1-1111</swiper-slide>
-                <swiper-slide>1-2AA1-1112</swiper-slide>
-                <swiper-slide>1-2AA1-1113</swiper-slide>
-                <swiper-slide>1-2AA1-1114</swiper-slide>
-                <swiper-slide>1-2AA1-1115</swiper-slide>
-                <swiper-slide>1-2AA1-1116</swiper-slide>
-                <swiper-slide>1-2AA1-1117</swiper-slide>
-                <swiper-slide>1-2AA1-1118</swiper-slide>
-                <swiper-slide>1-2AA1-1119</swiper-slide>
-                <swiper-slide>1-2AA1-1120</swiper-slide>
+            <!-- <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>
+            </swiper>-->
+            <!-- 解决input搜索,页面卡顿的情况,将swiper抽离成组件 -->
+            <MSwiper :list='list' v-if='list.length' @itemClick='itemClick' />
         </div>
-        <div class='info-container'>
+        <div class='info-container' v-show='list.length'>
             <div class='border'></div>
+            <div class='title'>{{currentInfo.drawernum}}</div>
             <div class='info'>
                 <div class='label'>出线规格:</div>
-                <div class='value'>{{outspec}}</div>
+                <div class='value'>{{currentInfo.outspec}}</div>
             </div>
             <div class='info'>
                 <div class='label'>楼 层:</div>
-                <div class='value'>{{floor}}</div>
+                <div class='value'>{{currentInfo.floor}}</div>
             </div>
             <div class='info'>
                 <div class='label'>电井编号:</div>
-                <div class='value'>{{wellnum}}</div>
+                <div class='value'>{{currentInfo.wellnum}}</div>
             </div>
             <div class='info'>
                 <div class='label'>电箱编号:</div>
-                <div class='value'>{{boxnum}}</div>
+                <div class='value'>{{currentInfo.boxnum}}</div>
             </div>
             <div class='info'>
                 <div class='label'>供电容量:</div>
-                <div class='value'>{{capacitynum}} kw</div>
+                <div class='value'>{{currentInfo.capacitynum}} kw</div>
             </div>
             <div class='info'>
                 <div class='label'>控制回路:</div>
-                <div class='value'>{{control}}</div>
+                <div class='value'>{{currentInfo.control}}</div>
             </div>
         </div>
+        <van-empty class='m-empty' v-if='noDataFlag && !list.length' description='暂无数据'>
+            <template #image>
+                <img class='no-data' src='../../assets/images/search_null.png' alt />
+            </template>
+        </van-empty>
     </div>
 </template>
 <script>
@@ -70,19 +59,27 @@ import { NavBar, Search } from 'vant'
 Vue.use(NavBar).use(Search)
 import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
 import 'swiper/swiper-bundle.css'
+import { queryDygjcxline } from '@/api/equipmentList'
+import { mapGetters } from 'vuex'
+import { cloneDeep } from 'lodash'
+import MSwiper from '@/components/equipmentFacilities/MSwiper'
+// let swiperVm = null
 export default {
     name: 'LowVoltageCabinetDetail',
     props: {},
     components: {
         Swiper,
         SwiperSlide,
+        MSwiper,
     },
     directives: {
         swiper: directive,
     },
     data() {
         return {
+            pageKey: `key_${new Date().getTime()}`,
             keyword: '',
+            noDataFlag: false,
             swiperOption: {
                 slidesPerView: 3,
                 // slidesPerGroup: 3,
@@ -93,6 +90,16 @@ export default {
                     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,
@@ -100,23 +107,28 @@ export default {
                 // },
                 // speed: 1500, //播放速度
             },
-            control: '',
-            drawernum: '',
-            floor: '',
-            glsms_proimgupid: '',
-            outspec: '',
-            wellnum: '',
-            boxnum: '',
-            capacitynum: '',
+            list: [],
+            currentInfo: {},
+            location: '', //路由传递的参数
+            wzjc: '', //位置简称
         }
     },
-    computed: {},
+    computed: {
+        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
+    },
     created() {
+        // 将this指向swiperVm,供swiper点击事件使用
+        // swiperVm = this
         this.control = '步行街分区2中庭用电'
         this.drawernum = '1-5AA-2'
         this.floor = '1F'
         this.glsms_proimgupid = 37206
         this.outspec = '4*150+1*70'
+
+        const { location, wzjc } = this.$route.params
+        this.location = location
+        this.wzjc = wzjc
+        this.getList()
     },
     beforeMount() {},
     mounted() {},
@@ -124,7 +136,63 @@ export default {
         backPage() {
             this.$router.go(-1)
         },
-        onSearch() {},
+        onSearch() {
+            console.log('sssss')
+            this.initData()
+            this.getList()
+        },
+        itemClick(currentInfo) {
+            this.currentInfo = cloneDeep(currentInfo)
+        },
+        handleTap(text) {
+            console.log(text)
+            console.time(1)
+            //
+            if (text.indexOf('\n') !== -1) {
+                return false
+            }
+            this.list.map((item, index) => {
+                item.active = false
+                if (text === item.drawernum) {
+                    item.active = true
+                    this.currentInfo = cloneDeep(item)
+                }
+            })
+            console.timeEnd(1)
+            console.log(this.currentInfo)
+            // this.key = `key_${new Date().getTime()}`
+        },
+        initData() {
+            this.noDataFlag = false
+            this.list = []
+            this.currentInfo = {}
+        },
+        async getList() {
+            let getParams = {
+                page: 1,
+                size: 500,
+                plazaId: this.plazaId,
+                location: this.location,
+            }
+            if (this.keyword) {
+                getParams.keyword = `${this.keyword}:drawernum,outspec,floor`
+            }
+            let res = await queryDygjcxline({ getParams })
+            if (!res?.data) {
+                this.noDataFlag = true
+                this.list = []
+                this.currentInfo = {}
+                return false
+            }
+            this.noDataFlag = false
+            let list = res.data
+            list.map((item, index) => {
+                item.active = false
+                index === 0 && (item.active = true)
+            })
+            this.list = list
+            this.currentInfo = cloneDeep(list[0])
+        },
     },
 }
 </script>
@@ -132,7 +200,8 @@ export default {
 .low-voltage-cabinet-detail {
     width: 100%;
     height: 100%;
-    background-color: #f5f6f7;
+    // background-color: #f5f6f7;
+    background-color: #fff;
     // 返回箭头修改
     /deep/ .van-nav-bar .van-icon {
         color: #000;
@@ -142,6 +211,7 @@ export default {
         width: 100%;
         height: 55px;
         // background-color: #fff;
+        background-color: #f5f6f7;
         text-align: center;
         .equipment-search {
             width: 80%;
@@ -153,6 +223,7 @@ export default {
             border-radius: 50px;
         }
     }
+    // 轮播
     .card-container {
         margin-top: 12px;
         padding: 20px 15px 0 15px;
@@ -165,8 +236,9 @@ export default {
                 justify-content: center;
                 align-items: center;
                 text-align: center;
-                font-weight: bold;
+                color: #333333;
                 font-size: 14px;
+                font-weight: 400;
                 background: #ebeded;
             }
         }
@@ -185,9 +257,15 @@ export default {
             height: 30px;
             display: flex;
             justify-content: center;
-            align-items: center;
+            align-items: flex-end;
+            flex-wrap: wrap;
+        }
+        .active {
+            background: #025baa !important;
+            color: #fff !important;
         }
     }
+    // 下方信息
     .info-container {
         padding: 15px;
         background: #fff;
@@ -195,6 +273,14 @@ export default {
             border-top: 1px solid #e4e6e7;
             margin-bottom: 23px;
         }
+        .title {
+            height: 24px;
+            font-size: 16px;
+            font-weight: 500;
+            color: #025baa;
+            line-height: 24px;
+            margin-bottom: 16px;
+        }
         .info {
             display: flex;
             height: 20px;
@@ -215,5 +301,24 @@ export default {
             flex: 1;
         }
     }
+    // 空状态
+    .m-empty {
+        // position: fixed;
+        // top: 0;
+        // left: 0;
+        // width: 100%;
+        // height: 100%;
+        display: flex;
+        align-items: center;
+        /deep/ .van-empty__image {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            img {
+                width: auto;
+                height: auto;
+            }
+        }
+    }
 }
 </style>

+ 2 - 2
src/views/equipmentFacilities/MainEquipmentDetail.vue

@@ -476,8 +476,8 @@ export default {
             justify-content: center;
             align-items: flex-end;
             img {
-                width: auto;
-                height: auto;
+                width: auto !important;
+                height: auto !important;
             }
         }
     }

+ 19 - 9
src/views/equipmentFacilities/index.vue

@@ -39,7 +39,7 @@
                     @click.native='goToEquipment(item)'
                 />
                 <!-- 更多主要设备 -->
-                <m-card class='card' :type='4' name unit v-show='!showMoreCardList' :total='0' @click.native='goToMoreEquipment' />
+                <m-card class='card' :type='4' name unit v-if='!showMoreCardList' :total='0' @click.native='goToMoreEquipment' />
                 <m-card
                     v-show='moreCardList.length && showMoreCardList'
                     class='card'
@@ -238,6 +238,7 @@ export default {
          * @param { String }  currentSmsxt 系统id? 1001 - 1008
          */
         async changeSystem({ text, categoryId, smsxt }) {
+            this.showMoreCardList = false
             this.showRight = false
             this.currentSmsxt = smsxt
             this.systemText = text + '系统'
@@ -566,13 +567,13 @@ export default {
             this.$router.push({ name: 'MainEquipment' })
         },
         handleWxwb() {
-            this.$router.push({ name: 'MaintenanceRecordView', params: {isInit: true} })
+            this.$router.push({ name: 'MaintenanceRecordView', params: { isInit: true } })
         },
         /**
          * 配电室低压柜及出线明细
          */
         hanldeDyg() {
-            this.$router.push({ name: 'LowVoltageCabinet', params: {} })
+            this.$router.push({ name: 'LowVoltageCabinet', params: { initPage: true } })
         },
         /**
          * 其他事项
@@ -728,13 +729,22 @@ export default {
             display: flex;
             flex-wrap: wrap;
             flex-flow: wrap;
+            // .card {
+            //     flex: 1;
+            //     width: calc(50% - 10px);
+            //     margin: 0 10px 10px 0;
+            //     min-width: calc(50% - 10px); // 加入这两个后每个item的宽度就生效了
+            //     max-width: calc(50% - 10px); // 加入这两个后每个item的宽度就生效了
+            //     height: 110px;
+            //     margin-right: auto;
+            // }
             .card {
-                flex: 1;
-                width: 50%;
-                margin: 0 0 5px 0;
-                min-width: 50%; // 加入这两个后每个item的宽度就生效了
-                max-width: 50%; // 加入这两个后每个item的宽度就生效了
-                height: 110px;
+                width: calc(50% - 5px);
+                margin-bottom: 9px;
+                height: 90px;
+            }
+            .card:not(:nth-child(2n)) {
+                margin-right: 9px;
             }
         }
         .close {