Pārlūkot izejas kodu

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

zhangyu 4 gadi atpakaļ
vecāks
revīzija
6aac164819

+ 11 - 0
src/router/index.ts

@@ -143,6 +143,17 @@ const routes: Array<RouteConfig> = [
             hideNarBar: true,
         },
     },
+    // 设备设置 --> 配电室低压柜及出线明细 --> 详情
+    {
+        path: '/lowVoltageCabinetDetail',
+        name: 'LowVoltageCabinetDetail',
+        component: () => import(/* webpackChunkName: "lowVoltageCabinetDetail" */ '../views/equipmentFacilities/LowVoltageCabinetDetail.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
     // 其他事项
     {
         path: '/otherMatter',

+ 92 - 118
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -24,49 +24,17 @@
                 <div class='title' v-show='item.data.length'>{{item.wzjc}}</div>
                 <!-- 一个低压柜信息 -->
                 <div class='info-container'>
-                    <!-- 第1,2条 -->
-                    <div class='info' v-for='(detail,dIndex) in item.data.slice(0,2) || []' :key='dIndex'>
-                        <div class='name'>{{detail.drawernum}}</div>
-                        <div class='specification'>
-                            <div class='label'>出线规格:</div>
-                            <div class='value'>{{detail.outspec}}</div>
-                        </div>
-                        <div class='loop'>
-                            <div class='label'>控制回路:</div>
-                            <div class='value'>{{detail.control}}</div>
-                        </div>
-                        <div class='floor'>
-                            <div class='label'>
-                                <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
-                                <span>楼层:</span>
-                            </div>
-                            <div class='value'>{{detail.floor}}</div>
-                        </div>
-                        <div class='divider'></div>
-                    </div>
+                    <div class='card' @click='showDetail(detail)' v-for='(detail,dIndex) in item.data' :key='dIndex'>{{detail.drawernum}}</div>
                     <!-- 加载更多 -->
-                    <div class='load-more' v-show='item.loadMore && item.data && item.data.length>=3' @click='locationLoadMore(item,index)'>加载更多</div>
-                    <!-- 第3-5条 -->
-                    <div class='info' v-show='!item.loadMore' v-for='(detail,dIndex) in item.data.slice(2) || []' :key='`loadMore-${dIndex}`'>
-                        <div class='name'>{{detail.drawernum}}</div>
-                        <div class='specification'>
-                            <div class='label'>出线规格:</div>
-                            <div class='value'>{{detail.outspec}}</div>
-                        </div>
-                        <div class='loop'>
-                            <div class='label'>控制回路:</div>
-                            <div class='value'>{{detail.control}}</div>
-                        </div>
-                        <div class='floor'>
-                            <div class='label'>
-                                <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
-                                <span>楼层:</span>
-                            </div>
-                            <div class='value'>{{detail.floor}}</div>
-                        </div>
-                        <div class='divider'></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'
@@ -74,27 +42,12 @@
                         @load='locationOnLoad(item,index)'
                         finished-text='没有更多了'
                     >
-                        <div class='info' v-for='(detail,dIndex) in item.list || []' :key='dIndex'>
-                            <div class='name'>{{detail.drawernum}}</div>
-                            <div class='specification'>
-                                <div class='label'>出线规格:</div>
-                                <div class='value'>{{detail.outspec}}</div>
-                            </div>
-                            <div class='loop'>
-                                <div class='label'>控制回路:</div>
-                                <div class='value'>{{detail.control}}</div>
-                            </div>
-                            <div class='floor'>
-                                <div class='label'>
-                                    <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
-                                    <span>楼层:</span>
-                                </div>
-                                <div class='value'>{{detail.floor}}</div>
-                            </div>
-                            <div class='divider'></div>
-                        </div>
+                        <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>
         <!-- 点击头部筛选,出现的右侧弹窗 -->
@@ -146,7 +99,7 @@ export default {
             keyword: '',
             page: 1,
             size: 5,
-            innerSize: 5,
+            innerSize: 15,
             list: [],
             loading: false,
             finished: false,
@@ -181,7 +134,7 @@ export default {
         async onLoad() {
             console.log('onLoad')
             if (this.page > 1) {
-                await sleep(1000)
+                // await sleep(1000)
             }
             await this.getList()
             // list无数据,不执行后续分页查询
@@ -238,7 +191,7 @@ export default {
             }
             res.data.data.map((item, index, arr) => {
                 // console.log(item)
-                if (item?.count >= 5 || item?.data?.length >= 5) {
+                if (item?.count >= this.innerSize || item?.data?.length >= this.innerSize) {
                     // console.log(item)
                     arr[index] = {
                         ...item,
@@ -257,8 +210,8 @@ export default {
                 }
             })
             this.list = [...this.list, ...res.data.data]
-            // console.log('%csssss', 'color:blue')
-            // console.log(this.list)
+            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)
@@ -283,7 +236,7 @@ export default {
             let item = cloneDeep(this.list[index])
             console.log(item)
             if (item.page > 2) {
-                await sleep(1000)
+                // await sleep(1000)
             }
             await this.getLocationList({ location, index })
             // 调用接口后的item
@@ -389,6 +342,13 @@ export default {
             this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
         },
         /**
+         * 显示详情
+         */
+        showDetail(detail) {
+            console.log(detail)
+            this.$router.push({ name: 'LowVoltageCabinetDetail', params: { ...detail } })
+        },
+        /**
          * 点击右侧筛选
          */
         handleRightClick() {
@@ -492,14 +452,16 @@ export default {
         // background-color: #fff;
         min-height: 1px;
         max-height: calc(100% - 100px);
-        overflow: auto;
+        // overflow: auto;
         font-size: 14px;
         font-weight: 400;
         color: #333333;
         .switch-room {
             width: 100%;
-            max-height: 390px;
+            position: relative;
+            max-height: 300px;
             display: flex;
+            background: #fff;
             flex-direction: column;
             // 浅蓝色title
             .title {
@@ -517,62 +479,71 @@ export default {
                 width: 100%;
                 flex: 1;
                 overflow: auto;
+                display: flex;
+                flex-wrap: wrap;
+                // justify-content: space-between;
+                padding: 12px 10px;
                 // 每个配电室出线明细
-                .info {
+                .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%;
-                    padding: 15px;
-                    position: relative;
-                    background-color: #fff;
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #666666;
-                    .name {
-                        font-size: 16px;
-                        height: 20px;
-                        line-height: 20px;
-                        font-weight: 500;
-                        color: #333333;
-                    }
-                    .specification,
-                    .loop,
-                    .floor {
-                        margin-top: 8px;
-                        width: 100%;
-                        display: flex;
-                        height: auto;
-                        .label {
-                            width: 70px;
-                            min-width: 70px;
-                            max-width: 70px;
-                        }
-                        .value {
-                            flex: 1;
-                        }
+                    .load-more {
+                        width: 80px;
+                        height: 25px;
+                        line-height: 25px;
+                        text-align: center;
+                        margin: 10px auto;
+                        color: #025baa;
+                        background: #e5eef6;
                     }
-                    .floor .label > span {
-                        display: inline-block;
-                        margin-left: 5px;
+                }
+                .more-list {
+                    width: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    // justify-content: space-between;
+                    // padding: 12px 10px;
+                    /deep/ .van-list__loading {
+                        margin: 0 auto;
                     }
-
-                    // 底部1px边框
-                    .divider {
-                        width: calc(100% - 30px);
-                        height: 1px;
-                        left: 15px;
-                        bottom: 0;
-                        position: absolute;
-                        background: #e6e6e6;
+                    /deep/ .van-list__finished-text {
+                        width: 100%;
+                        margin: 0 auto;
                     }
                 }
-                .load-more {
-                    width: 80px;
-                    height: 25px;
-                    line-height: 25px;
-                    text-align: center;
-                    margin: 10px auto;
-                    color: #025baa;
-                    background: #e5eef6;
-                }
+            }
+        }
+        .bottom {
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 10px;
+            padding: 0 10px;
+            background-color: #f5f6f7;
+            .divider {
+                background: #e6e6e6;
+                height: 1px;
+                width: 100%;
             }
         }
     }
@@ -581,7 +552,10 @@ export default {
         height: calc(100% - 100px) !important;
         .switch-room {
             max-height: 100% !important;
-            height: 100% !important;
+            // height: 100% !important;
+            .load-more {
+                margin: 10px auto !important;
+            }
         }
     }
     // 空状态

+ 109 - 0
src/views/equipmentFacilities/LowVoltageCabinetDetail.vue

@@ -0,0 +1,109 @@
+<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;
+        }
+        .label {
+            color: #666;
+            // width: 60px;
+            // text-align: justify;
+            // text-align-last: justify;
+        }
+        .value {
+            color: #333;
+            margin-left: 10px;
+            flex: 1;
+        }
+    }
+}
+</style>

+ 726 - 0
src/views/equipmentFacilities/LowVoltageCabinet_v0.1.vue

@@ -0,0 +1,726 @@
+<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'>
+                    <!-- 第1,2条 -->
+                    <div class='info' v-for='(detail,dIndex) in item.data.slice(0,2) || []' :key='dIndex'>
+                        <div class='name'>{{detail.drawernum}}</div>
+                        <div class='specification'>
+                            <div class='label'>出线规格:</div>
+                            <div class='value'>{{detail.outspec}}</div>
+                        </div>
+                        <div class='loop'>
+                            <div class='label'>控制回路:</div>
+                            <div class='value'>{{detail.control}}</div>
+                        </div>
+                        <div class='floor'>
+                            <div class='label'>
+                                <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
+                                <span>楼层:</span>
+                            </div>
+                            <div class='value'>{{detail.floor}}</div>
+                        </div>
+                        <div class='divider'></div>
+                    </div>
+                    <!-- 加载更多 -->
+                    <div class='load-more' v-show='item.loadMore && item.data && item.data.length>=3' @click='locationLoadMore(item,index)'>加载更多</div>
+                    <!-- 第3-5条 -->
+                    <div class='info' v-show='!item.loadMore' v-for='(detail,dIndex) in item.data.slice(2) || []' :key='`loadMore-${dIndex}`'>
+                        <div class='name'>{{detail.drawernum}}</div>
+                        <div class='specification'>
+                            <div class='label'>出线规格:</div>
+                            <div class='value'>{{detail.outspec}}</div>
+                        </div>
+                        <div class='loop'>
+                            <div class='label'>控制回路:</div>
+                            <div class='value'>{{detail.control}}</div>
+                        </div>
+                        <div class='floor'>
+                            <div class='label'>
+                                <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
+                                <span>楼层:</span>
+                            </div>
+                            <div class='value'>{{detail.floor}}</div>
+                        </div>
+                        <div class='divider'></div>
+                    </div>
+                    <van-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='info' v-for='(detail,dIndex) in item.list || []' :key='dIndex'>
+                            <div class='name'>{{detail.drawernum}}</div>
+                            <div class='specification'>
+                                <div class='label'>出线规格:</div>
+                                <div class='value'>{{detail.outspec}}</div>
+                            </div>
+                            <div class='loop'>
+                                <div class='label'>控制回路:</div>
+                                <div class='value'>{{detail.control}}</div>
+                            </div>
+                            <div class='floor'>
+                                <div class='label'>
+                                    <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
+                                    <span>楼层:</span>
+                                </div>
+                                <div class='value'>{{detail.floor}}</div>
+                            </div>
+                            <div class='divider'></div>
+                        </div>
+                    </van-list>
+                </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: 5,
+            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 >= 5 || item?.data?.length >= 5) {
+                    // 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,
+                },
+            }
+            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]
+        },
+        /**
+         * 点击右侧筛选
+         */
+        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%;
+            max-height: 390px;
+            display: flex;
+            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;
+                // 每个配电室出线明细
+                .info {
+                    width: 100%;
+                    padding: 15px;
+                    position: relative;
+                    background-color: #fff;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #666666;
+                    .name {
+                        font-size: 16px;
+                        height: 20px;
+                        line-height: 20px;
+                        font-weight: 500;
+                        color: #333333;
+                    }
+                    .specification,
+                    .loop,
+                    .floor {
+                        margin-top: 8px;
+                        width: 100%;
+                        display: flex;
+                        height: auto;
+                        .label {
+                            width: 70px;
+                            min-width: 70px;
+                            max-width: 70px;
+                        }
+                        .value {
+                            flex: 1;
+                        }
+                    }
+                    .floor .label > span {
+                        display: inline-block;
+                        margin-left: 5px;
+                    }
+
+                    // 底部1px边框
+                    .divider {
+                        width: calc(100% - 30px);
+                        height: 1px;
+                        left: 15px;
+                        bottom: 0;
+                        position: absolute;
+                        background: #e6e6e6;
+                    }
+                }
+                .load-more {
+                    width: 80px;
+                    height: 25px;
+                    line-height: 25px;
+                    text-align: center;
+                    margin: 10px auto;
+                    color: #025baa;
+                    background: #e5eef6;
+                }
+            }
+        }
+    }
+    // 只有一个出线柜时,样式
+    .one-list {
+        height: calc(100% - 100px) !important;
+        .switch-room {
+            max-height: 100% !important;
+            height: 100% !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>