Jelajahi Sumber

floor-list 逻辑修改,弹窗中floor-list 默认 选中楼层

yx 4 tahun lalu
induk
melakukan
12ba5186d2

+ 19 - 7
src/App.vue

@@ -21,11 +21,23 @@ export default {
             mapthemeUrl: `http://map.wanda.cn/editor/webtheme`
         }
     },
+    /**
+     * 刷新保存vuex信息
+     */
+    created() {
+        this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('beforeunload'))))
+        localStorage.removeItem('beforeunload')
+        window.addEventListener('beforeunload', () => {
+            let state = JSON.stringify(this.$store.state)
+            localStorage.setItem('beforeunload', state)
+        })
+    },
     mounted() {
+        window.vm = this
         // 监听页面刷新事件
-        window.addEventListener('unload', this.unload)
+        // window.addEventListener('unload', this.unload)
         // 页面加载完成后,移除session里的存储的信息
-        window.addEventListener('load', this.load)
+        // window.addEventListener('load', this.load)
         // 请求该项目下的楼层数据
         this.getFengMap()
     },
@@ -268,13 +280,13 @@ body {
         width: 8%;
     }
 }
-.el-dialog__header{
-  border-bottom: 1px solid rgba(239,240,241,1);
+.el-dialog__header {
+    border-bottom: 1px solid rgba(239, 240, 241, 1);
 }
-.gantt-chart .el-dialog__title{
-  font-weight: 500;
+.gantt-chart .el-dialog__title {
+    font-weight: 500;
 }
-.img-detail-container{
+.img-detail-container {
     .el-dialog__body {
         padding-top: 0;
         padding-bottom: 0;

+ 6 - 2
src/components/floorList.vue

@@ -79,7 +79,6 @@ export default {
         ...mapGetters(['legendTable'])
     },
     mounted() {
-        window.vm = this
         this.init()
     },
     methods: {
@@ -101,6 +100,12 @@ export default {
                 this.floorIdArr.push(item.seq)
             })
             this.currentFloorId = Number(this.$cookie.get('currentFloorId') || 100)
+            // bug fix 修复 fenbuPic 弹窗中,楼层不能选中的问题
+            // 如果 floorIdArr 不在 floorIdArr数组中, 使用 floorIdArr[0], 而不使用 cookie
+            let index = this.floorIdArr.findIndex(item => item === this.currentFloorId)
+            if (index === -1) {
+                this.currentFloorId = this.floorIdArr[0]
+            }
             this.changeFloor(0)
         },
         /**
@@ -120,7 +125,6 @@ export default {
                 index++
                 this.currentFloorId = this.floorIdArr[index]
             }
-            // 数据处理
             this.handleCookie()
             // 楼层位置动画处理
             this.handlePosition(flag, index, len)

+ 1 - 1
src/views/equipment/fenbuPic.vue

@@ -4,7 +4,7 @@
         <div class='legend-boxs'>
             <Legend :innerLeng='1' :floors='floors' type='0' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`'></Legend>
         </div>
-        <floor-list v-if='floors.length>0' :floorsArr='floors' :type='1' @emitFloor='emitFloor' :id='"floor"'></floor-list>
+        <floor-list v-if='floors.length>0' :floorsArr='floors' @emitFloor='emitFloor' :id='"floor"'></floor-list>
         <div v-show='floors.length>0' class='canvas-box'>
             <floorMap ref='floorMap' :modalHeight='modalHeight' :loadName='""' :categoryId='`${typecode=="FBT1"?"FZQZL":"XFBFYCFL"}`' :type='"floor"'></floorMap>
         </div>

+ 13 - 2
src/views/equipment/index.vue

@@ -45,7 +45,7 @@
                         </div>
                     </div>
 
-                    <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
+                    <floor-list :key='keyFL' v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
                 </div>
             </div>
         </div>
@@ -81,10 +81,21 @@ export default {
             fqPic: [],
             loadName: '',
             type: '',
-            objCount: []
+            objCount: [],
+            keyFL: 'keyFL' + new Date().getTime()
         }
     },
     components: { floorList, eqDialog, floorMap, editList },
+    watch: {
+        // 监听currentFloor变化,重新渲染楼层组件,解决 数据与视图不照应的问题
+        '$store.state.currentFloor': {
+            handler(newV, oldV) {
+                if (newV.seq !== oldV.seq) {
+                    this.keyFL = 'keyFL' + new Date().getTime()
+                }
+            }
+        }
+    },
     methods: {
         // 查询tab页
         tabSyatem(item) {