yunxing 4 лет назад
Родитель
Сommit
38addbbf2d
1 измененных файлов с 57 добавлено и 27 удалено
  1. 57 27
      src/views/equipmentFacilities/ElectricWell.vue

+ 57 - 27
src/views/equipmentFacilities/ElectricWell.vue

@@ -33,7 +33,7 @@
                 </div>
                 <!-- 电井 -->
                 <div class='well-container'>
-                    <div class='well' v-for='(detail,dIndex) in item.data.slice(0,2)' :key='`${dIndex}_${detail.floor}`'>
+                    <div class='well' v-for='(detail) in item.data.slice(0,2)' :key='detail.meterbox'>
                         <div class='well-title'>{{detail.welldes}}</div>
                         <div class='meterbox'>
                             <span class='well-left'>商铺电表箱:</span>
@@ -45,10 +45,10 @@
                         </div>
                     </div>
                     <!-- 加载更多 -->
-                    <div class='load-more' v-show='!detail.loadmore && item.data.length>2' @click='detail.loadMore=true'></div>
+                    <div class='load-more' v-show='!item.loadMore && item.data.length>2' @click='loadMore(item)'>加载更多</div>
                     <!-- 第三条以上 -->
-                    <div v-show='detail.loadMore && item.data.length>2'>
-                        <div class='well' v-for='(detail,dIndex) in item.data.slice(2)' :key='`${dIndex}_${detail.floor}`'>
+                    <div v-show='item.loadMore &&  item.data.length>2' :key='key'>
+                        <div class='well' v-for='(detail) in item.data.slice(2)' :key='detail.meterbox'>
                             <div class='well-title'>{{detail.welldes}}</div>
                             <div class='meterbox'>
                                 <span class='well-left'>商铺电表箱:</span>
@@ -60,6 +60,8 @@
                             </div>
                         </div>
                     </div>
+
+                    <!-- </div> -->
                 </div>
             </div>
         </div>
@@ -77,18 +79,16 @@
                 <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='changeSystem(item)'>{{item.text}}</van-button>
+                        <div class='system-btn' v-for='(item,index) in floorList' :key='index'>
+                            <van-button class='m-btn' :class='item.active' @click='changeFloor(item)'>{{item.text}}</van-button>
                         </div>
                     </div>
                 </div>
                 <div class='divider'></div>
                 <!-- 设备设施 -->
                 <div class='sbss'>
-                    <h1 class='title'>
-                        设备设施
-                        <!-- <div v-for='i in 10' :key='i'>{{i}}</div> -->
-                    </h1>
+                    <h1 class='title'>电井类型</h1>
+                    <!-- <div v-for='i in 10' :key='i'>{{i}}</div> -->
                 </div>
                 <div class='footer'>
                     <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
@@ -119,8 +119,11 @@ export default {
             page: 1,
             size: 20,
             list: [],
+            key: new Date().getTime(),
             loading: false,
             showPopup: false,
+            floorList: [],
+            currentFloor: '全部',
             // 弹窗中使用数据
             modalData: {
                 system: '',
@@ -138,6 +141,17 @@ export default {
     },
     components: {},
     created() {
+        // code:"F6"
+        // gcname:"f6"
+        // gcode:"6F"
+        // gname:"f6"
+        // seq:600
+
+        let floorList = [{ code: '全部', gcname: '全部', gcode: '全部', gname: '全部', seq: null }]
+        this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
+            floorList.push({ code, gcname, gcode, gname, seq })
+        })
+        this.floorList = floorList
         this.getList()
     },
     beforeMount() {},
@@ -152,10 +166,10 @@ export default {
         handleRightClick() {
             this.showPopup = true
             // 设置选中的专业系统
-            this.changeSystem({ smsxt: this.system_code })
+            this.changeFloor({ code: this.currentFloor })
         },
         /**
-         * 获取设备列表
+         * 获取电井列表
          */
         async getList() {
             console.log('getList')
@@ -193,31 +207,34 @@ export default {
             console.log(this.list)
             // console.log(JSON.stringify(res_data, null, 2))
         },
-        async onLoad() {},
+        /**
+         * 点击加载更多,显示该楼层下的更多数据
+         */
+        loadMore(item) {
+            item.loadMore = true
+            this.key = new Date().getTime()
+        },
         /**
          * 搜索
          */
         onSearch() {
             // 初始化数据,查询列表
             this.initData()
-            this.onLoad()
+            this.getList()
         },
         /**
          *  初始化数据,查询列表
          */
         initData() {
-            this.finished = false
-            this.page = 1
-            this.count = 0
             this.list = []
         },
         /**
-         * popup 更改系统
+         * popup 更改楼层
          */
-        changeSystem(data) {
+        changeFloor(data) {
             console.log(data)
-            let systemList = this.systemList
-            systemList.map((item) => {
+            let floorList = this.floorList
+            floorList.map((item) => {
                 item.active = ''
                 if (item.smsxt === data.smsxt) {
                     item.active = 'active'
@@ -247,7 +264,7 @@ export default {
         confirm() {
             this.modalData = cloneDeep(this.modalDataBak)
             this.showPopup = false
-            this.system_code = this.systemList.filter((v) => v.active)[0].smsxt
+            this.system_code = this.floorList.filter((v) => v.active)[0].smsxt
             // 初始化数据,查询列表
             this.initData()
             this.onLoad()
@@ -259,8 +276,9 @@ export default {
 .electric-well-page {
     width: 100%;
     height: 100%;
-    display: flex;
-    flex-direction: column;
+
+    // display: flex;
+    // flex-direction: column;
     background-color: #f5f6f7;
     // 返回箭头修改
     /deep/ .van-nav-bar .van-icon {
@@ -285,16 +303,18 @@ export default {
     // 设备列表
     .electric-well-list {
         width: 100%;
-        flex: 1;
+        // flex: 1;
+        height: calc(100% - 100px);
         // padding: 0 10px;
         background-color: #fff;
-        // overflow: auto;
+        overflow: auto;
         font-size: 14px;
         font-weight: 400;
         color: #333333;
         .floor {
             width: 100%;
             max-height: 400px;
+            overflow: auto;
             display: flex;
             flex-direction: column;
             // 楼层title
@@ -329,7 +349,7 @@ export default {
                 .well {
                     width: 100%;
                     // height: 130px;
-                    padding-bottom: 10px;
+                    padding: 10px 0;
                     border-bottom: 1px solid #e6e6e6;
                     .well-title {
                         font-size: 16px;
@@ -354,6 +374,16 @@ export default {
                         }
                     }
                 }
+                .load-more {
+                    width: 80px;
+                    height: 25px;
+                    line-height: 25px;
+                    text-align: center;
+                    margin: 0 auto;
+                    margin-top: 10px;
+                    color: #025baa;
+                    background: #e5eef6;
+                }
             }
         }
     }