yunxing %!s(int64=4) %!d(string=hai) anos
pai
achega
64ea563094

+ 2 - 0
package.json

@@ -29,9 +29,11 @@
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.20",
     "moment": "^2.27.0",
+    "swiper": "^6.3.4",
     "vant": "^2.10.6",
     "vconsole": "^3.3.4",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

BIN=BIN
src/assets/images/more1.png


BIN=BIN
src/assets/images/more1@2x.png


+ 94 - 0
src/components/MSwiper.vue

@@ -0,0 +1,94 @@
+<template>
+    <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>
+        <div class='swiper-pagination' slot='pagination'></div>
+    </swiper>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+import 'swiper/swiper-bundle.css'
+export default {
+    components: {
+        Swiper,
+        SwiperSlide,
+    },
+    directives: {
+        swiper: directive,
+    },
+    data() {
+        return {
+            swiperOption: {
+                slidesPerView: 3,
+                // slidesPerGroup: 3,
+                slidesPerColumn: 5,
+                spaceBetween: 10,
+                slidesPerColumnFill: 'row',
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true,
+                },
+                // autoplay: {
+                //     //自动播放
+                //     delay: 1500,
+                //     disableOnInteraction: false,
+                // },
+                // speed: 1500, //播放速度
+            },
+        }
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.swiper {
+    max-height: 300px;
+    width: 100%;
+    .swiper-slide {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        font-weight: bold;
+        font-size: 14px;
+        background: #ebeded;
+    }
+}
+
+.swiper {
+    max-height: 300px;
+    margin-left: auto;
+    margin-right: auto;
+    .swiper-slide {
+        height: 30px;
+    }
+}
+.swiper-pagination {
+    position: relative;
+    bottom: 0;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>

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

@@ -16,6 +16,7 @@
     <!-- 更多主要设备 卡片 -->
     <div class='m-card type-4' v-else>
         <div>更多主要设备</div>
+        <div class='toggle'>展开</div>
     </div>
 </template>
 <script>
@@ -150,6 +151,8 @@ export default {
     justify-content: center;
     align-items: center;
     background: url('../../assets/images/more.png');
+    position: relative;
+
     .type {
         color: #666666;
     }
@@ -157,5 +160,13 @@ export default {
         border-color: #666;
         border-bottom: 3px solid transparent;
     }
+    .toggle {
+        color: #0481e1;
+        font-size: 12px;
+        font-weight: 400;
+        position: absolute;
+        bottom: 15px;
+        right: 20px;
+    }
 }
 </style>

+ 1 - 0
src/views/equipmentFacilities/EquipmentList.vue

@@ -232,6 +232,7 @@ export default {
             let postParams = {
                 system_code: this.system_code,
                 category_code: this.category_code,
+                // classstructureid:'1484'
             }
             // 筛选后,专业系统选择全部, 删除上传system_code的字段
             if (!this.system_code || this.system_code === '全部') {

+ 10 - 129
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -8,47 +8,12 @@
         </van-nav-bar>
         <!-- 搜索框 -->
         <div class='equipment-search-container'>
-            <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
+            <!-- TODO: 配电室名称 -->
+            <van-search class='equipment-search' v-model='keyword' placeholder='请输入配电室名称' @search='onSearch'></van-search>
         </div>
         <!-- 配电室 -->
-        <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
-        <van-list
-            class='switch-room-container'
-            :class='{"one-list":list.length === 1}'
-            v-model='loading'
-            :finished='finished'
-            @load='onLoad'
-            finished-text
-        >
-            <div class='switch-room' v-for='(item,index) in list' :key='index'>
-                <div class='title' v-show='item.data.length'>{{item.wzjc}}</div>
-                <!-- 一个低压柜信息 -->
-                <div class='info-container'>
-                    <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.data' :key='dIndex'>{{detail.drawernum}}</div>
-                    <!-- 加载更多 -->
-                    <div class='load-more-container'>
-                        <div
-                            class='load-more'
-                            v-show='item.loadMore && item.data && item.data.length >= innerSize'
-                            @click='locationLoadMore(item,index)'
-                        >加载更多</div>
-                    </div>
-                    <van-list
-                        class='more-list'
-                        v-model='item.loading'
-                        v-show='!item.loadMore && item.list && item.list.length'
-                        :finished='item.finished'
-                        :immediate-check='false'
-                        @load='locationOnLoad(item,index)'
-                        finished-text='没有更多了'
-                    >
-                        <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.list' :key='dIndex'>{{detail.drawernum}}</div>
-                    </van-list>
-                </div>
-                <div class='bottom'>
-                    <div class='divider'></div>
-                </div>
-            </div>
+        <van-list class='switch-room-container' v-model='loading' :finished='finished' @load='onLoad' finished-text>
+            <van-cell v-for='(item,index ) in list' :key='index' :border='false' is-link :value='item.wzjc' @click='goToDetail(item)'></van-cell>
         </van-list>
         <!-- 点击头部筛选,出现的右侧弹窗 -->
         <van-popup class='m-popup-container' v-model='showPopup' position='right'>
@@ -69,7 +34,7 @@
             </div>
         </van-popup>
         <!-- 无数据 -->
-        <van-empty class='m-empty' v-if='finished &&(!list.length || noDataFlag)' description='暂无数据'>
+        <van-empty class='m-empty' v-if='finished &&!list.length ' description='暂无数据'>
             <template #image>
                 <img class='no-data' src='../../assets/images/search_null.png' alt />
             </template>
@@ -98,7 +63,7 @@ export default {
             title: '配电室低压出线柜及出线明细',
             keyword: '',
             page: 1,
-            size: 5,
+            size: 100,
             innerSize: 15,
             list: [],
             loading: false,
@@ -121,6 +86,7 @@ export default {
         // 查询筛选条件(右弹窗)
         this.getFilterList()
         // this.onLoad()
+        window.vm = this
     },
     beforeMount() {},
     mounted() {},
@@ -220,97 +186,12 @@ export default {
         },
 
         /**
-         * 点击加载更多
-         */
-        locationLoadMore(item, index) {
-            // console.log(item, index)
-            item.loadMore = false
-            this.$set(this.list, index, item)
-            this.locationOnLoad(item, index)
-        },
-        /**
-         *  查询一个location下的onLoad事件
-         */
-        async locationOnLoad({ location }, index) {
-            console.log(location, index)
-            let item = cloneDeep(this.list[index])
-            console.log(item)
-            if (item.page > 2) {
-                // await sleep(1000)
-            }
-            await this.getLocationList({ location, index })
-            // 调用接口后的item
-            let currentItem = cloneDeep(this.list[index])
-            // list无数据,不执行后续分页查询
-            if (!currentItem.list.length) {
-                currentItem.finished = true
-                return true
-            }
-            currentItem.page++
-            currentItem.finished = false
-            currentItem.loading = false
-            if (currentItem.list.length + currentItem.data.length >= currentItem.count) {
-                currentItem.finished = true
-            }
-            this.$set(this.list, index, currentItem)
-        },
-        /**
-         * 查询一个location下的设备
+         *
          */
-        async getLocationList(item) {
-            console.log('=========')
-            console.log('=========')
-            console.log('=========')
-            console.log('=========')
-            console.log('=========')
-            console.log('=========')
-            console.log('getLocationList')
+        goToDetail(item) {
             console.log(item)
-            const { location, index } = item
-            let currentList = cloneDeep(this.list[index])
-            console.log(currentList)
-            console.log('getLocationList')
-            let queryData = {
-                data: {
-                    page: Math.ceil((index + 1) / this.size), // 当前出线柜,所在的页码
-                    size: currentList.size,
-                    plazaId: this.plazaId,
-                },
-                postParams: {
-                    locflList: ['5201', '5204', '5209'], //低压柜
-                    location: item.location,
-                    pageable: {
-                        pageNumber: currentList.page,
-                        pageSize: this.innerSize,
-                    },
-                },
-            }
-            if (this.keyword) {
-                queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
-            }
-            // 筛选 配电室之后, location字段上送
-            console.log(queryData)
-            let res
-            try {
-                res = await queryDygjcxline(queryData)
-            } catch (error) {
-                console.log(error)
-            }
-            // mockData
-            // res = require('./mockData').queryDygjcxlineData1
-            console.log('=============')
-            console.log(res)
-            console.log('=============')
-            if (!res?.data?.data[0]?.data) {
-                return false
-            }
-            currentList.list = [...currentList.list, ...res.data.data[0].data]
-            this.$set(this.list, index, currentList)
-            console.log('====================')
-            console.log(this.list)
-            console.log('====================')
+            this.$router.push({ name: 'LowVoltageCabinetDetail', params: {} })
         },
-
         /**
          * 查询筛选条件
          */

+ 64 - 16
src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

@@ -2,7 +2,16 @@
     <div class='low-voltage-cabinet-detail'>
         <!-- 顶部条 -->
         <van-nav-bar :title='drawernum' 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'>
+            <m-swiper></m-swiper>
+        </div>
         <div class='info-container'>
+            <div class='border'></div>
             <div class='info'>
                 <div class='label'>出线规格:</div>
                 <div class='value'>{{outspec}}</div>
@@ -35,36 +44,48 @@
  * 配电室低压柜及出线明细
  */
 import Vue from 'vue'
-import { NavBar } from 'vant'
-Vue.use(NavBar)
-
+import { NavBar, Search } from 'vant'
+Vue.use(NavBar).use(Search)
+// import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+// import 'swiper/swiper.less'
+import MSwiper from '../../components/MSwiper.vue'
 export default {
     name: 'LowVoltageCabinetDetail',
     props: {},
-    components: {},
+    // components: { Swiper, SwiperSlide },
+    components: { MSwiper },
+    // directives: {
+    //     swiper: directive,
+    // },
     data() {
         return {
+            keyword: '',
+            swiperOption: {
+                slidesPerView: 3,
+                slidesPerColumn: 2,
+                spaceBetween: 30,
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true,
+                },
+            },
             control: '',
             drawernum: '',
             floor: '',
             glsms_proimgupid: '',
             outspec: '',
+            wellnum: '',
+            boxnum: '',
+            capacitynum: '',
         }
     },
     computed: {},
     created() {
-        // control: "步行街分区2中庭用电"
-        // drawernum: "1-5AA-2"
-        // floor: "1F"
-        // glsms_proimgupid: 37206
-        // outspec: "4*150+1*70"
-        let { control, drawernum, floor, glsms_proimgupid, outspec, wellnum, boxnum, capacitynum } = this.$route.params
-        let arr = ['control', 'drawernum', 'floor', 'glsms_proimgupid', 'outspec', 'wellnum', 'boxnum', 'capacitynum']
-        arr.map((item) => {
-            console.log(item)
-            this[item] = eval(item) || '-'
-        })
-        console.log(this.$route.params)
+        this.control = '步行街分区2中庭用电'
+        this.drawernum = '1-5AA-2'
+        this.floor = '1F'
+        this.glsms_proimgupid = 37206
+        this.outspec = '4*150+1*70'
     },
     beforeMount() {},
     mounted() {},
@@ -72,6 +93,7 @@ export default {
         backPage() {
             this.$router.go(-1)
         },
+        onSearch() {},
     },
 }
 </script>
@@ -84,8 +106,34 @@ export default {
     /deep/ .van-nav-bar .van-icon {
         color: #000;
     }
+    // 搜索
+    .equipment-search-container {
+        width: 100%;
+        height: 55px;
+        // background-color: #fff;
+        text-align: center;
+        .equipment-search {
+            width: 80%;
+            margin: 0 auto;
+            background: none;
+        }
+        .van-search__content {
+            background: #fff;
+            border-radius: 50px;
+        }
+    }
+    .card-container {
+        margin-top: 12px;
+        padding: 20px 15px 0 15px;
+        background: #fff;
+    }
     .info-container {
         padding: 15px;
+        background: #fff;
+        .border {
+            border-top: 1px solid #e4e6e7;
+            margin-bottom: 23px;
+        }
         .info {
             display: flex;
             height: 20px;

+ 110 - 0
src/views/equipmentFacilities/LowVoltageCabinetDetail_v_0.2.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class='low-voltage-cabinet-detail'>
+        <!-- 顶部条 -->
+        <van-nav-bar :title='drawernum' left-arrow @click-left='backPage'></van-nav-bar>
+        <div class='info-container'>
+            <div class='info'>
+                <div class='label'>出线规格:</div>
+                <div class='value'>{{outspec}}</div>
+            </div>
+            <div class='info'>
+                <div class='label'>楼 层:</div>
+                <div class='value'>{{floor}}</div>
+            </div>
+            <div class='info'>
+                <div class='label'>电井编号:</div>
+                <div class='value'>{{wellnum}}</div>
+            </div>
+            <div class='info'>
+                <div class='label'>电箱编号:</div>
+                <div class='value'>{{boxnum}}</div>
+            </div>
+            <div class='info'>
+                <div class='label'>供电容量:</div>
+                <div class='value'>{{capacitynum}} kw</div>
+            </div>
+            <div class='info'>
+                <div class='label'>控制回路:</div>
+                <div class='value'>{{control}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+/**
+ * 配电室低压柜及出线明细
+ */
+import Vue from 'vue'
+import { NavBar } from 'vant'
+Vue.use(NavBar)
+
+export default {
+    name: 'LowVoltageCabinetDetail',
+    props: {},
+    components: {},
+    data() {
+        return {
+            control: '',
+            drawernum: '',
+            floor: '',
+            glsms_proimgupid: '',
+            outspec: '',
+        }
+    },
+    computed: {},
+    created() {
+        // control: "步行街分区2中庭用电"
+        // drawernum: "1-5AA-2"
+        // floor: "1F"
+        // glsms_proimgupid: 37206
+        // outspec: "4*150+1*70"
+        let { control, drawernum, floor, glsms_proimgupid, outspec, wellnum, boxnum, capacitynum } = this.$route.params
+        let arr = ['control', 'drawernum', 'floor', 'glsms_proimgupid', 'outspec', 'wellnum', 'boxnum', 'capacitynum']
+        arr.map((item) => {
+            console.log(item)
+            this[item] = eval(item) || '-'
+        })
+        console.log(this.$route.params)
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        backPage() {
+            this.$router.go(-1)
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.low-voltage-cabinet-detail {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f6f7;
+    // 返回箭头修改
+    /deep/ .van-nav-bar .van-icon {
+        color: #000;
+    }
+    .info-container {
+        padding: 15px;
+        .info {
+            display: flex;
+            height: 20px;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            margin-bottom: 8px;
+        }
+        .label {
+            color: #666;
+            // width: 60px;
+            // text-align: justify;
+            // text-align-last: justify;
+        }
+        .value {
+            color: #333;
+            margin-left: 10px;
+            flex: 1;
+        }
+    }
+}
+</style>

+ 703 - 0
src/views/equipmentFacilities/LowVoltageCabinet_v_0.2.vue

@@ -0,0 +1,703 @@
+<template>
+    <div class='low-voltage-cabinet'>
+        <!-- 顶部条 -->
+        <van-nav-bar :title='title' left-arrow @click-left='backPage' @click-right='handleRightClick'>
+            <template #right>
+                <i class='iconfont wanda-scan'></i>
+            </template>
+        </van-nav-bar>
+        <!-- 搜索框 -->
+        <div class='equipment-search-container'>
+            <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
+        </div>
+        <!-- 配电室 -->
+        <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
+        <van-list
+            class='switch-room-container'
+            :class='{"one-list":list.length === 1}'
+            v-model='loading'
+            :finished='finished'
+            @load='onLoad'
+            finished-text
+        >
+            <div class='switch-room' v-for='(item,index) in list' :key='index'>
+                <div class='title' v-show='item.data.length'>{{item.wzjc}}</div>
+                <!-- 一个低压柜信息 -->
+                <div class='info-container'>
+                    <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.data' :key='dIndex'>{{detail.drawernum}}</div>
+                    <!-- 加载更多 -->
+                    <div class='load-more-container'>
+                        <div
+                            class='load-more'
+                            v-show='item.loadMore && item.data && item.data.length >= innerSize'
+                            @click='locationLoadMore(item,index)'
+                        >加载更多</div>
+                    </div>
+                    <van-list
+                        class='more-list'
+                        v-model='item.loading'
+                        v-show='!item.loadMore && item.list && item.list.length'
+                        :finished='item.finished'
+                        :immediate-check='false'
+                        @load='locationOnLoad(item,index)'
+                        finished-text='没有更多了'
+                    >
+                        <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.list' :key='dIndex'>{{detail.drawernum}}</div>
+                    </van-list>
+                </div>
+                <div class='bottom'>
+                    <div class='divider'></div>
+                </div>
+            </div>
+        </van-list>
+        <!-- 点击头部筛选,出现的右侧弹窗 -->
+        <van-popup class='m-popup-container' v-model='showPopup' position='right'>
+            <div class='m-popup'>
+                <!-- 系统 -->
+                <div class='system'>
+                    <h1 class='title'>配电室</h1>
+                    <div class='system-btn-container'>
+                        <div class='system-btn' v-for='(item,index) in systemList' :key='index'>
+                            <van-button class='m-btn' :class='item.active' @click='changeSwitchRoom(item)'>{{item.text}}</van-button>
+                        </div>
+                    </div>
+                </div>
+                <div class='footer'>
+                    <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
+                    <van-button size='large' color='#025BAA' type='info' @click='confirm'>确定</van-button>
+                </div>
+            </div>
+        </van-popup>
+        <!-- 无数据 -->
+        <van-empty class='m-empty' v-if='finished &&(!list.length || noDataFlag)' description='暂无数据'>
+            <template #image>
+                <img class='no-data' src='../../assets/images/search_null.png' alt />
+            </template>
+        </van-empty>
+    </div>
+</template>
+<script>
+/**
+ * 配电室低压柜及出线明细
+ */
+import Vue from 'vue'
+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 { sleep } from '@/utils/util'
+import { cloneDeep } from 'lodash'
+export default {
+    name: 'LowVoltageCabinet',
+    props: {},
+    components: {},
+    data() {
+        return {
+            mock: 2,
+            title: '配电室低压出线柜及出线明细',
+            keyword: '',
+            page: 1,
+            size: 5,
+            innerSize: 15,
+            list: [],
+            loading: false,
+            finished: false,
+            noDataFlag: false,
+            showPopup: false,
+            systemList: [{ text: '全部', location: '全部', active: 'active' }],
+            modalData: {
+                location: '全部',
+            },
+            modalDataBak: {
+                location: '全部',
+            },
+        }
+    },
+    computed: {
+        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
+    },
+    created() {
+        // 查询筛选条件(右弹窗)
+        this.getFilterList()
+        // this.onLoad()
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        backPage() {
+            this.$router.go(-1)
+        },
+        /**
+         *
+         */
+        async onLoad() {
+            console.log('onLoad')
+            if (this.page > 1) {
+                // await sleep(1000)
+            }
+            await this.getList()
+            // list无数据,不执行后续分页查询
+            console.log(this.list)
+            console.log(this.count)
+            if (!this.list.length) {
+                this.finished = true
+                this.loading = false
+                return true
+            }
+            this.page++
+            this.loading = false
+            if (this.list.length >= this.count) {
+                this.finished = true
+            }
+        },
+        /**
+         * 查询低压柜list
+         */
+        async getList() {
+            let queryData = {
+                data: {
+                    page: this.page,
+                    size: this.size,
+                    plazaId: this.plazaId,
+                },
+                postParams: {
+                    // location: '',
+                    locflList: ['5201', '5204', '5209'], //低压柜
+                    pageable: {
+                        pageNumber: 1,
+                        pageSize: this.innerSize,
+                    },
+                },
+            }
+            if (this.keyword) {
+                queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
+            }
+            // 筛选 配电室之后, location字段上送
+            if (this.modalData.location && this.modalData.location !== '全部') {
+                queryData.postParams.location = this.modalData.location
+            }
+            console.log(queryData)
+            let res
+            try {
+                res = await queryDygjcxline(queryData)
+            } catch (error) {
+                console.log(error)
+            }
+            // mockData
+            // res = require('./mockData').queryDygjcxlineData
+            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
+        },
+
+        /**
+         * 点击加载更多
+         */
+        locationLoadMore(item, index) {
+            // console.log(item, index)
+            item.loadMore = false
+            this.$set(this.list, index, item)
+            this.locationOnLoad(item, index)
+        },
+        /**
+         *  查询一个location下的onLoad事件
+         */
+        async locationOnLoad({ location }, index) {
+            console.log(location, index)
+            let item = cloneDeep(this.list[index])
+            console.log(item)
+            if (item.page > 2) {
+                // await sleep(1000)
+            }
+            await this.getLocationList({ location, index })
+            // 调用接口后的item
+            let currentItem = cloneDeep(this.list[index])
+            // list无数据,不执行后续分页查询
+            if (!currentItem.list.length) {
+                currentItem.finished = true
+                return true
+            }
+            currentItem.page++
+            currentItem.finished = false
+            currentItem.loading = false
+            if (currentItem.list.length + currentItem.data.length >= currentItem.count) {
+                currentItem.finished = true
+            }
+            this.$set(this.list, index, currentItem)
+        },
+        /**
+         * 查询一个location下的设备
+         */
+        async getLocationList(item) {
+            console.log('=========')
+            console.log('=========')
+            console.log('=========')
+            console.log('=========')
+            console.log('=========')
+            console.log('=========')
+            console.log('getLocationList')
+            console.log(item)
+            const { location, index } = item
+            let currentList = cloneDeep(this.list[index])
+            console.log(currentList)
+            console.log('getLocationList')
+            let queryData = {
+                data: {
+                    page: Math.ceil((index + 1) / this.size), // 当前出线柜,所在的页码
+                    size: currentList.size,
+                    plazaId: this.plazaId,
+                },
+                postParams: {
+                    locflList: ['5201', '5204', '5209'], //低压柜
+                    location: item.location,
+                    pageable: {
+                        pageNumber: currentList.page,
+                        pageSize: this.innerSize,
+                    },
+                },
+            }
+            if (this.keyword) {
+                queryData.data.keyword = `${this.keyword}:drawernum,outspec,control;`
+            }
+            // 筛选 配电室之后, location字段上送
+            console.log(queryData)
+            let res
+            try {
+                res = await queryDygjcxline(queryData)
+            } catch (error) {
+                console.log(error)
+            }
+            // mockData
+            // res = require('./mockData').queryDygjcxlineData1
+            console.log('=============')
+            console.log(res)
+            console.log('=============')
+            if (!res?.data?.data[0]?.data) {
+                return false
+            }
+            currentList.list = [...currentList.list, ...res.data.data[0].data]
+            this.$set(this.list, index, currentList)
+            console.log('====================')
+            console.log(this.list)
+            console.log('====================')
+        },
+
+        /**
+         * 查询筛选条件
+         */
+        async getFilterList() {
+            let queryData = {
+                data: {
+                    // page: this.page,
+                    // size: this.size,
+                    plazaId: this.plazaId,
+                },
+                postParams: {
+                    locflList: ['5201', '5204', '5209'], //低压柜
+                    // location: '',
+                    // system_code: this.smsxt,
+                },
+            }
+            if (this.smsxt) {
+                queryData.postParams.system_code = this.smsxt
+            }
+            let res = await querySmsLocation(queryData)
+            console.log(res)
+            if (!res?.data?.data) {
+                this.systemList = [{ text: '全部', location: '全部', active: 'active' }]
+                return false
+            }
+            let data = res?.data?.data || []
+            data.map((item) => {
+                item.text = item.wzjc
+                item.active = ''
+            })
+            console.log(data)
+            this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
+        },
+        /**
+         * 显示详情
+         */
+        showDetail(detail) {
+            console.log(detail)
+            this.$router.push({ name: 'LowVoltageCabinetDetail', params: { ...detail } })
+        },
+        /**
+         * 点击右侧筛选
+         */
+        handleRightClick() {
+            this.showPopup = true
+            // 设置选中的专业系统
+        },
+        onSearch() {
+            // 初始化数据,查询列表
+            this.initData()
+            this.onLoad()
+        },
+        /**
+         * popup 更改配电室
+         */
+        changeSwitchRoom(data) {
+            let systemList = this.systemList
+            systemList.map((item) => {
+                item.active = ''
+                if (item.location === data.location) {
+                    item.active = 'active'
+                }
+            })
+            // 弹窗选中的系统
+            this.$set(this.modalDataBak, 'location', data.location)
+        },
+        /**
+         * 重置
+         */
+        reset() {
+            this.modalDataBak = {
+                location: '全部',
+            }
+            this.modalData = {
+                location: '全部',
+            }
+            let { systemList } = this
+            systemList.map((item) => {
+                item.active = ''
+                if (item.text === '全部') {
+                    item.active = 'active'
+                }
+            })
+            this.systemList = systemList
+            this.showPopup = false
+            // 初始化数据,查询列表
+            this.initData()
+            this.onLoad()
+        },
+        /**
+         * 弹窗确认
+         */
+        confirm() {
+            this.modalData = cloneDeep(this.modalDataBak)
+            this.showPopup = false
+            // 初始化数据,查询列表
+            this.initData()
+            this.onLoad()
+        },
+        /**
+         *  初始化数据,查询列表
+         */
+        initData() {
+            // this.finished = false
+            // this.loading = false
+            this.noDataFlag = false
+            this.page = 1
+            this.count = 0
+            this.list = []
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+.low-voltage-cabinet {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f6f7;
+    // 返回箭头修改
+    /deep/ .van-nav-bar .van-icon {
+        color: #000;
+    }
+    // 搜索
+    .equipment-search-container {
+        width: 100%;
+        height: 55px;
+        // background-color: #fff;
+        text-align: center;
+        .equipment-search {
+            width: 80%;
+            margin: 0 auto;
+            background: none;
+        }
+        .van-search__content {
+            background: #fff;
+            border-radius: 50px;
+        }
+    }
+    // 配电室列表
+    .switch-room-container {
+        width: 100%;
+        // background-color: #fff;
+        min-height: 1px;
+        max-height: calc(100% - 100px);
+        // overflow: auto;
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        .switch-room {
+            width: 100%;
+            position: relative;
+            max-height: 300px;
+            display: flex;
+            background: #fff;
+            flex-direction: column;
+            // 浅蓝色title
+            .title {
+                padding: 0 10px;
+                color: #025baa;
+                height: 45px;
+                background: rgba(2, 91, 170, 0.1);
+                font-size: 16px;
+                font-weight: 500;
+                color: #025baa;
+                line-height: 45px;
+            }
+            // 每个配电室出线明细信息
+            .info-container {
+                width: 100%;
+                flex: 1;
+                overflow: auto;
+                display: flex;
+                flex-wrap: wrap;
+                // justify-content: space-between;
+                padding: 12px 10px;
+                // 每个配电室出线明细
+                .card {
+                    width: 32%;
+                    // min-width: calc(33% - 8px);
+                    // max-width: calc(33% - 8px);
+                    // margin-right: 8px;
+                    margin-bottom: 8px;
+                    height: 30px;
+                    background: #e4e6e7;
+                    border-radius: 2px;
+                    opacity: 0.74;
+                    text-align: center;
+                    line-height: 30px;
+                }
+
+                // .card:nth-child(3n) {
+                //     margin-right: 0;
+                // }
+                .card:not(:nth-child(3n)) {
+                    margin-right: 2%;
+                }
+                .load-more-container {
+                    width: 100%;
+                    .load-more {
+                        width: 80px;
+                        height: 25px;
+                        line-height: 25px;
+                        text-align: center;
+                        margin: 10px auto;
+                        color: #025baa;
+                        background: #e5eef6;
+                    }
+                }
+                .more-list {
+                    width: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    // justify-content: space-between;
+                    // padding: 12px 10px;
+                    /deep/ .van-list__loading {
+                        margin: 0 auto;
+                    }
+                    /deep/ .van-list__finished-text {
+                        width: 100%;
+                        margin: 0 auto;
+                    }
+                }
+            }
+        }
+        .bottom {
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 10px;
+            padding: 0 10px;
+            background-color: #f5f6f7;
+            .divider {
+                background: #e6e6e6;
+                height: 1px;
+                width: 100%;
+            }
+        }
+    }
+    // 只有一个出线柜时,样式
+    .one-list {
+        height: calc(100% - 100px) !important;
+        .switch-room {
+            max-height: 100% !important;
+            // height: 100% !important;
+            .load-more {
+                margin: 10px auto !important;
+            }
+        }
+    }
+    // 空状态
+    .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;
+            }
+        }
+    }
+    // 筛选弹窗
+    .m-popup-container {
+        width: 80%;
+        height: 100%;
+        padding: 55px 20px 10px 20px;
+        .m-popup {
+            width: 100%;
+            height: calc(100% - 80px);
+            // display: flex;
+            // flex-direction: column;
+            .title {
+                font-size: 16px;
+                font-weight: 500;
+                color: #333333;
+                margin-bottom: 15px;
+            }
+            // 配电室
+            .system {
+                width: 100%;
+                height: 100%;
+                overflow: auto;
+                // 专业系统按钮
+                .system-btn-container {
+                    display: flex;
+                    width: 100%;
+                    max-height: calc(100% - 80px);
+                    overflow: auto;
+                    flex-wrap: wrap;
+                    flex-flow: wrap;
+                    .system-btn {
+                        width: 100% !important;
+                        min-width: 100% !important;
+                        max-width: 100% !important;
+                        // min-height: 40px;
+                        height: auto;
+                        box-sizing: border-box;
+                        padding: 5px 0 !important;
+                        .m-btn {
+                            width: 100%;
+                            font-size: 14px;
+                            height: 100%;
+                            // height: 32px !important;
+                            text-align: center;
+                            background: #eff0f1;
+                            border-radius: 2px;
+                            padding: 5px 0 !important;
+                        }
+                    }
+                }
+                .active {
+                    background-color: #025baa !important;
+                    color: #fff;
+                }
+            }
+            // 设备设施
+            .sbss {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                overflow: auto;
+                .title {
+                    width: 100%;
+                    height: 25px;
+                }
+                .system-btn-container {
+                    width: 100%;
+                    height: 40px;
+                    flex: 1;
+                    overflow: auto;
+                    .system-btn {
+                        width: 100% !important;
+                        box-sizing: border-box;
+                        background: #eff0f1 !important;
+                        margin: 10px 0 10px 0;
+                        .m-btn {
+                            display: block !important;
+                            width: 100% !important;
+                            height: 32px !important;
+                            text-align: center;
+                            background: #eff0f1;
+                            border-radius: 2px;
+                        }
+                    }
+                }
+                .active {
+                    background-color: #025baa !important;
+                    color: #fff;
+                }
+                .load-more {
+                    width: 80px;
+                    height: 25px;
+                    line-height: 25px;
+                    text-align: center;
+                    margin: 0 auto;
+                    color: #025baa;
+                    background: #e5eef6;
+                }
+            }
+            .divider {
+                border-bottom: 1px solid #e6e6e6;
+                margin: 20px 0;
+            }
+            .footer {
+                position: absolute;
+                bottom: 30px;
+                right: 0;
+                width: 100%;
+                height: 35px;
+                display: flex;
+                justify-content: space-around;
+                .van-button {
+                    width: 40%;
+                    height: 100%;
+                    max-width: 40%;
+                    min-width: 40%;
+                }
+            }
+        }
+    }
+}
+</style>

+ 153 - 22
src/views/equipmentFacilities/index.vue

@@ -16,7 +16,10 @@
                     :title='item.text'
                     :border='false'
                     is-link
+                    :class='item.class'
+                    :arrow-direction='item.arrow'
                     :value='`${item.count||""}`'
+                    v-show='!item.hide'
                     @click='handleClick(item)'
                 />
             </div>
@@ -36,8 +39,21 @@
                     @click.native='goToEquipment(item)'
                 />
                 <!-- 更多主要设备 -->
-                <m-card class='card' :type='4' name unit :total='0' @click.native='goToMoreEquipment' />
+                <m-card class='card' :type='4' name unit v-show='!showMoreCardList' :total='0' @click.native='goToMoreEquipment' />
+                <m-card
+                    v-show='moreCardList.length && showMoreCardList'
+                    class='card'
+                    :type='item.type'
+                    :name='item.name'
+                    :unit='item.unit'
+                    :total='item.total'
+                    :number='item.number'
+                    v-for='(item,index) in cardList'
+                    :key='index'
+                    @click.native='goToEquipment(item)'
+                />
             </div>
+            <div class='close' v-show='showMoreCardList' @click='showMoreCardList=false'>收起</div>
         </div>
         <!-- 原理图 -->
         <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
@@ -48,12 +64,13 @@ import Vue from 'vue'
 import { Cell, Toast } from 'vant'
 Vue.use(Cell).use(Toast)
 import { mapGetters, mapMutations } from 'vuex'
-import { querySystemCount, querySystemCard, querySystemImage, querySystemTuJianImage, queryRoomCount } from '@/api/equipmentList'
+import { querySystemCount, querySystemCard, querySystemImage, querySystemTuJianImage, queryRoomCount, queryMoreAsset } from '@/api/equipmentList'
+
 import { appGraphElementQuery } from '@/api/public'
 import MCard from '@/components/equipmentFacilities/Card'
 import SystemMenu from '@/components/systemMenu'
 import ImagePreview from '@/components/ImagePreview'
-
+import { cloneDeep } from 'lodash'
 export default {
     name: 'EquipmentFacilities',
     props: {},
@@ -73,11 +90,12 @@ export default {
                     //供电
                     { text: '供电系统原理图', dataType: 'img', typecode: '2010', count: '无' },
                     { text: '机房平面布置图', dataType: 'room' },
-                    { text: '配电室低压出线柜及出线明细', dataType: 'dyg' },
+                    { text: '配电室低压出线柜及出线明细', dataType: 'dyg', class: 'dyg' },
                     { text: '楼层分布', dataType: 'floor', value: ' ' },
                     { text: '电井控制商铺范围', dataType: 'electricWell' },
                     { text: '主要设备清单', dataType: 'mainEquipment' },
                     { text: '重要维修及重要维保', dataType: 'wxwb' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
                 1002: [
                     //暖通
@@ -87,44 +105,57 @@ export default {
                     { text: '楼层分布', dataType: 'floor' },
                     { text: '主要设备清单', dataType: 'mainEquipment' },
                     { text: '重要维修及重要维保', dataType: 'wxwb' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
                 1003: [
                     //消防
-                    { text: '消防电系统原理示意图', dataType: 'img', typecode: '2014', count: '无' },
-                    { text: '消防喷淋系统示意图', dataType: 'img', typecode: '2015', count: '无' },
-                    { text: '消防窗喷系统示意图', dataType: 'img', typecode: '2016', count: '无' },
-                    { text: '消火栓系统示意图', dataType: 'img', typecode: '2017', count: '无' },
+                    { text: '系统原理图', id: '1003', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
+                    { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
+                    { text: '消防电系统原理示意图', dataType: 'img', typecode: '2014', count: '无', hide: true, class: 'img-cell' },
+                    { text: '消防喷淋系统示意图', dataType: 'img', typecode: '2015', count: '无', hide: true, class: 'img-cell' },
+                    { text: '消防窗喷系统示意图', dataType: 'img', typecode: '2016', count: '无', hide: true, class: 'img-cell' },
+                    { text: '消火栓系统示意图', dataType: 'img', typecode: '2017', count: '无', hide: true, class: 'img-cell' },
                     { text: '消防泵房引出管路分布图', dataType: 'fbt', categoryId: 'XFBFYCFL' },
                     { text: '机房平面布置图', dataType: 'room' },
                     { text: '楼层分布+附加数据', dataType: 'floor' },
                     { text: '主要设备清单', dataType: 'mainEquipment' },
                     { text: '重要维修及重要维保', dataType: 'wxwb' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
                 1004: [
                     //弱电
-                    { text: '门禁管理系统原理图', dataType: 'img', typecode: '2019', count: '无' },
-                    { text: 'BA楼宇智能化系统原理图', dataType: 'img', typecode: '2020', count: '无' },
+                    { text: '系统原理图', id: '1004', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
+                    { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
+                    { text: '门禁管理系统原理图', dataType: 'img', typecode: '2019', count: '无', hide: true, class: 'img-cell' },
+                    { text: 'BA楼宇智能化系统原理图', dataType: 'img', typecode: '2020', count: '无', hide: true, class: 'img-cell' },
                     { text: '机房平面布置图', dataType: 'room' },
                     { text: '楼层分布+附加数据', dataType: 'floor' },
                     { text: '主要设备清单', dataType: 'mainEquipment' },
                     { text: '重要维修及重要维保', dataType: 'wxwb' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
                 1005: [
                     //给排水
-                    { text: '给水系统原理示意图', dataType: 'img', typecode: '2021', count: '无' },
-                    { text: '排水系统原理示意图', dataType: 'img', typecode: '2022', count: '无' },
+                    { text: '系统原理图', id: '1005', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
+                    { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
+                    { text: '给水系统原理示意图', dataType: 'img', typecode: '2021', count: '无', hide: true, class: 'img-cell' },
+                    { text: '排水系统原理示意图', dataType: 'img', typecode: '2022', count: '无', hide: true, class: 'img-cell' },
                     { text: '机房平面布置图', dataType: 'room' },
                     { text: '楼层分布', dataType: 'floor' },
                     { text: '主要设备清单', dataType: 'mainEquipment' },
                     { text: '重要维修及重要维保', dataType: 'wxwb' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
                 1006: [
                     //电梯
-                    { text: '扶梯原理图', dataType: 'img', typecode: '2023', count: '无' },
-                    { text: '直梯原理图', dataType: 'img', typecode: '2024', count: '无' },
+                    { text: '系统原理图', id: '1006', dataType: 'moreImg', count: '', arrow: 'down', class: 'more-img-cell' },
+                    { text: '', dataType: '', count: '', arrow: 'none', class: 'more-img-cell-border' }, // 1px边框
+                    { text: '扶梯原理图', dataType: 'img', typecode: '2023', count: '无', hide: true, class: 'img-cell' },
+                    { text: '直梯原理图', dataType: 'img', typecode: '2024', count: '无', hide: true, class: 'img-cell' },
                     { text: '楼层分布', dataType: 'floor' },
                     { text: '主要设备清单', dataType: 'mainEquipment' },
                     { text: '重要维修及重要维保', dataType: 'wxwb' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
                 1007: [
                     // 燃气
@@ -132,6 +163,7 @@ export default {
                     { text: '楼层分布', dataType: 'floor' },
                     { text: '主要设备清单', dataType: 'mainEquipment' },
                     { text: '重要维修及重要维保', dataType: 'wxwb' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
                 1008: [
                     // 土建
@@ -143,10 +175,13 @@ export default {
                     // { text: '建筑立面图', dataType: 'img', typecode: '2026', count: '无' },
                     { text: '建筑立面图', dataType: 'img', typecode: ['2026', '2027', '2028', '2029'], count: '无' },
                     { text: '楼层分布', dataType: 'floor' },
+                    { text: '其他事项', dataType: 'otherMatter' },
                 ],
             },
             listKey: `list_${new Date().getTime()}`,
             cardList: [],
+            moreCardList: [],
+            showMoreCardList: false,
             showRight: false, //是否显示右侧内容
             showImgPreview: false, //是否展示图片预览
             imgList: [], //图片数组
@@ -176,6 +211,7 @@ export default {
         },
     },
     async created() {
+        window.vm = this
         // let initSys = {
         //     text: '供电',
         //     categoryId: 'GDXT',
@@ -205,7 +241,7 @@ export default {
             this.showRight = false
             this.currentSmsxt = smsxt
             this.systemText = text + '系统'
-            console.log(this.systemText)
+            // console.log(this.systemText)
             /**
              * 查询图片数量,设备卡片
              */
@@ -296,9 +332,9 @@ export default {
                     }
                 }),
             }
-            console.log(params)
+            // console.log(params)
             let res = await appGraphElementQuery(params)
-            console.log(res)
+            // console.log(res)
             if (!res?.Data) {
                 return false
             }
@@ -381,12 +417,16 @@ export default {
                 }
             })
             this.cardList = cardList
-            console.log('=============')
-            console.log(this.cardList)
-            console.log('=============')
+            // console.log('=============')
+            // console.log(this.cardList)
+            // console.log('=============')
         },
         handleClick(item) {
             switch (item.dataType) {
+                // 点击系统原理图, 显示/隐藏 具体的原理图
+                case 'moreImg':
+                    this.handleMoreImg(item)
+                    break
                 // 原理图
                 case 'img':
                     this.handleImg(item)
@@ -418,11 +458,34 @@ export default {
                 case 'dyg':
                     this.hanldeDyg(item)
                     break
+                // 其他事项
+                case 'otherMatter':
+                    this.handleOtherMatter(item)
+                    break
                 default:
                     break
             }
         },
         /**
+         * 点击系统原理图
+         * 显示隐藏详细的系统原理图
+         */
+        handleMoreImg(item) {
+            console.log(item)
+            const currentItem = this.listData[item.id]
+            if (item.arrow === 'down') {
+                currentItem.map((v) => {
+                    v.dataType === 'img' && (v.hide = false)
+                })
+                item.arrow = 'up'
+            } else {
+                currentItem.map((v) => {
+                    v.dataType === 'img' && (v.hide = true)
+                })
+                item.arrow = 'down'
+            }
+        },
+        /**
          * 显示原理图预览
          */
         handleImg(item) {
@@ -512,6 +575,12 @@ export default {
             this.$router.push({ name: 'LowVoltageCabinet', params: {} })
         },
         /**
+         * 其他事项
+         */
+        handleOtherMatter(item) {
+            //    this.$router.push({ name: '', params: {} })
+        },
+        /**
          * 跳转 楼层分布
          */
         handleFloor(item) {
@@ -562,8 +631,29 @@ export default {
         /**
          * 点击更多设备卡片,跳转设备列表页面
          */
-        goToMoreEquipment() {
-            this.$router.push({ name: 'MoreEquipmentList', params: {} })
+        async goToMoreEquipment(e) {
+            // this.$router.push({ name: 'MoreEquipmentList', params: {} })
+            console.log(e.target)
+            this.showMoreCardList = true
+            this.moreCardList = cloneDeep(this.cardList)
+            console.log()
+            //
+            // let data = {
+            //     // page: 1,
+            //     // size: 400,
+            //     // subPage: 1,
+            //     // subSize: 100,
+            //     plazaId: this.plazaId,
+            //     onlyMainAsset: true,
+            // }
+            // let postParams = {
+            //     system_code: this.smsxt,
+            // }
+            // let res = await queryMoreAsset({ data, postParams })
+            // if (!res?.data?.data) {
+            //     return false
+            // }
+            // console.log(res.data.data)
         },
     },
 }
@@ -598,6 +688,36 @@ export default {
                     flex: none;
                 }
             }
+            // 系统原理图
+            .more-img-cell {
+                margin-bottom: 0 !important;
+            }
+            .more-img-cell-border {
+                height: 1px;
+                overflow: hidden;
+                width: calc(100% - 20px);
+                background: #fff;
+                border: none;
+                border-radius: 0;
+                border-bottom: 1px solid #e4e6e7;
+                margin: 0;
+                line-height: 0;
+                font-size: 0;
+                padding: 0;
+                margin: 0 auto;
+            }
+            .img-cell {
+                background: #eff0f1;
+                border-radius: 0;
+            }
+            .img-cell:not(:last-child) {
+                margin-bottom: 0 !important;
+            }
+            .dyg {
+                /deep/ .van-cell__value {
+                    width: 0;
+                }
+            }
         }
         .divider {
             border-bottom: 1px solid #e6e6e6;
@@ -617,6 +737,17 @@ export default {
                 height: 110px;
             }
         }
+        .close {
+            position: fixed;
+            background-color: #fff;
+            width: 50px;
+            height: 50px;
+            line-height: 50px;
+            border-radius: 50px;
+            text-align: center;
+            bottom: 80px;
+            right: 30px;
+        }
     }
 }
 </style>