yunxing 4 éve
szülő
commit
67d0d20f03

+ 165 - 20
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -11,12 +11,14 @@
             <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
         </div>
         <!-- 配电室 -->
-        <div class='switch-room-container' v-if='1'>
+        <!-- 一个van-list内再嵌套一个van-list,处理较为复杂 -->
+        <van-list class='switch-room-container' v-model='loading' :finished='finished' @load='onLoad' finished-text='没有更多了' v-if='1'>
             <div class='switch-room' v-for='(item,index) in list' :key='index'>
                 <div class='title'>{{item.wzjc}}</div>
                 <!-- 一个低压柜信息 -->
                 <div class='info-container'>
-                    <div class='info' v-for='(detail,dIndex) in item.data || []' :key='dIndex'>
+                    <!-- 第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>
@@ -36,7 +38,55 @@
                         <div class='divider'></div>
                     </div>
                     <!-- 加载更多 -->
-                    <div class='load-more' @click='mock=5'>加载更多</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.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>
             <!-- <div class='switch-room' v-for='ii in 3' :key='ii'>
@@ -64,7 +114,7 @@
                     <div class='load-more' @click='mock=5'>加载更多</div>
                 </div>
             </div>-->
-        </div>
+        </van-list>
         <!-- 点击头部筛选,出现的右侧弹窗 -->
         <van-popup class='m-popup-container' v-model='showPopup' position='right'>
             <div class='m-popup'>
@@ -113,7 +163,8 @@ export default {
             title: '配电室低压柜及出线明细',
             keyword: '',
             page: 1,
-            size: 20, //TODO: size1500
+            size: 5,
+            innerSize: 5,
             list: [],
             loading: false,
             finished: false,
@@ -133,7 +184,6 @@ export default {
     created() {
         // 查询筛选条件(右弹窗)
         this.getFilterList()
-        this.getList()
     },
     beforeMount() {},
     mounted() {},
@@ -142,10 +192,29 @@ export default {
             this.$router.go(-1)
         },
         /**
+         *
+         */
+        async onLoad() {
+            if (this.page > 1) {
+                await sleep(1000)
+            }
+            await this.getList()
+            // list无数据,不执行后续分页查询
+            if (!this.list.length) {
+                this.finished = true
+                return true
+            }
+            this.page++
+            this.loading = false
+            if (this.list.length >= this.count) {
+                this.finished = true
+            }
+        },
+        /**
          * 查询低压柜list
          */
         async getList() {
-            //             请求地址 POST /data/sms_dygjcxline/queryDygjcxline?plazaId=1000772&page=1&size=10&keyword=123:drawernum,outspec
+            // 请求地址 POST /data/sms_dygjcxline/queryDygjcxline?plazaId=1000772&page=1&size=10&keyword=123:drawernum,outspec
             // 参数说明
             // {
             //     "locfl": 1003,//分类内码
@@ -166,7 +235,7 @@ export default {
                     // location: '',
                     pageable: {
                         pageNumber: 1,
-                        pageSize: 10,
+                        pageSize: this.innerSize,
                     },
                 },
             }
@@ -183,28 +252,104 @@ export default {
             }
             // mockData
             res = require('./mockData').queryDygjcxlineData
-            this.list = res.data
+            res.data.map((item, index, arr) => {
+                if (item?.count > 5) {
+                    // console.log(item)
+                    arr[index] = {
+                        ...item,
+                        loadMore: true,
+                        loading: true,
+                        finished: false,
+                        list: [],
+                        page: 2,
+                        size: this.innerSize,
+                    }
+                } else {
+                    item.loadMore = false
+                }
+            })
+            this.list = [...this.list, ...res.data]
+            this.count = res.count
         },
+
         /**
-         *
+         * 点击加载更多
          */
-        async onLoad() {
-            if (this.page > 1) {
+        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.getList()
+            await this.getLocationList({ location, index })
+            // 调用接口后的item
+            let currentItem = cloneDeep(this.list[index])
             // list无数据,不执行后续分页查询
-            if (!this.list.length) {
-                this.finished = true
+            if (!currentItem.list.length) {
+                currentItem.finished = true
                 return true
             }
-            this.page++
-            this.loading = false
-            if (this.list.length >= this.count) {
-                this.finished = 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('getLocationList')
+            console.log(item)
+            const { location, index } = item
+            let currentList = cloneDeep(this.list[index])
+            console.log(currentList)
+            console.log('getLocationList')
+            let queryData = {
+                data: {
+                    page: 1, // TODO: page
+                    size: currentList.size,
+                    plazaId: this.plazaId,
+                },
+                postParams: {
+                    locflList: ['5201', '5204', '5209'], //低压柜
+                    location: item.location,
+                    pageable: {
+                        pageNumber: currentList.page,
+                        pageSize: this.innerSize,
+                    },
+                },
+            }
+            // 筛选 配电室之后, location字段上送
+            console.log(queryData)
+            let res
+            try {
+                res = await queryDygjcxline(queryData)
+            } catch (error) {
+                console.log(error)
+            }
+            // mockData
+            res = require('./mockData').queryDygjcxlineData1
+            currentList.list = [...currentList.list, ...res.data[0].data]
+            this.$set(this.list, index, currentList)
+            console.log('====================')
+            console.log(this.list)
+            console.log('====================')
+        },
+
+        /**
          * 查询筛选条件
          */
         async getFilterList() {
@@ -232,7 +377,7 @@ export default {
                 item.active = ''
             })
             console.log(data)
-            this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data,]
+            this.systemList = [{ text: '全部', location: '全部', active: 'active' }, ...data]
         },
         /**
          * 点击右侧筛选

+ 66 - 4
src/views/equipmentFacilities/mockData.js

@@ -18,6 +18,27 @@ const queryDygjcxlineData = {
                     floor: 'B2',
                     drawernum: '1-4AA-1',
                 },
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '1-1AA', //抽屉编号
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区1营业用电',
+                    floor: 'B2',
+                    drawernum: '1-4AA-1',
+                },
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '1-1AA', //抽屉编号
+                },
 
                 // {
                 //     glsms_proimgupid: 37206,
@@ -27,7 +48,7 @@ const queryDygjcxlineData = {
                 //     drawernum: '2-12AA-9',
                 // },
             ],
-            count: 3,
+            count: 20,
             location: '1054',
             wzjc: '商业楼/B2/停车场/变电所/大商1号变电所',
         },
@@ -56,12 +77,53 @@ const queryDygjcxlineData = {
                 //     drawernum: '2-12AA-10',
                 // },
             ],
-            count: 3,
+            count: 20,
             location: '1054',
             wzjc: '商业楼/B2/停车场/变电所/大商2号变电所',
         },
     ],
-    count: 3,
+    count: 10,
+}
+const queryDygjcxlineData1 = {
+    result: 'success',
+    data: [
+        {
+            data: [
+                {
+                    glsms_proimgupid: 37206, //图id
+                    outspec: '-', //出线规格
+                    control: '进线', //控制回路
+                    floor: '-', //楼层
+                    drawernum: '2-1B', //抽屉编号
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区1营业用电',
+                    floor: 'B2',
+                    drawernum: '2-1C',
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*185+1*95',
+                    control: '步行街分区1营业用电',
+                    floor: 'B2',
+                    drawernum: '2-1D',
+                },
+                {
+                    glsms_proimgupid: 37206,
+                    outspec: '4*95+1*50',
+                    control: '步行街货梯2主',
+                    floor: '1F',
+                    drawernum: '2-12AA-9',
+                },
+            ],
+            count: 20,
+            location: '1054',
+            wzjc: '商业楼/B2/停车场/变电所/大商1号变电所',
+        },
+    ],
+    count: 1,
 }
 
-export { queryDygjcxlineData }
+export { queryDygjcxlineData, queryDygjcxlineData1 }