Quellcode durchsuchen

'平面图参数传递'

zhangyu vor 4 Jahren
Ursprung
Commit
a7849b1192
5 geänderte Dateien mit 86 neuen und 36 gelöschten Zeilen
  1. 3 4
      src/App.vue
  2. 8 8
      src/components/floorMap/floorList.vue
  3. 7 0
      src/store/index.ts
  4. 20 3
      src/views/FloorFunc.vue
  5. 48 21
      src/views/overview/MapView.vue

+ 3 - 4
src/App.vue

@@ -86,7 +86,7 @@ export default {
     },
     methods: {
         ...mapActions(['getfmapID', 'getFloors']),
-        ...mapMutations(['SETHAVEFENGMAP']),
+        ...mapMutations(['SETHAVEFENGMAP', 'SETCATEGORYID']),
         getFengMap() {
             this.getfmapID().then(() => {
                 this.getMap()
@@ -128,10 +128,9 @@ export default {
         changeTabbar(active) {
             console.log(active)
             if (active == 1) {
-                this.$router.push({ path: 'floorFunc', query: { categoryId: 'LCGN' } })
-            } else {
-                this.$router.push({ name: this.routeDict[active] })
+                this.SETCATEGORYID('LCGN')
             }
+            this.$router.push({ name: this.routeDict[active] })
             store.commit('SETAPPTITLE', this.titleDict[active])
         },
         /**

+ 8 - 8
src/components/floorMap/floorList.vue

@@ -9,8 +9,8 @@
       <div class='floor-out' :style='{ height:conHeight + "px" }'>
         <!--  放开marginTop样式  -->
         <div class='floor-center' :style='{ marginTop : marginTop }'>
-          <div class='floor-item' :class='item.FloorId == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
-            v-for='(item,index) in floorsArr' :key='index'>{{item.Name}}</div>
+          <div class='floor-item' :class='item.gcname == currentFloorId?"isActive":""' @click='tabFloor(item,index)'
+            v-for='(item,index) in floorsArr' :key='index'>{{item.code}}</div>
         </div>
       </div>
       <div class='icon-bottom' v-if='floorsArr.length>8'>
@@ -72,8 +72,8 @@ export default {
       this.showNumber = this.floorsArr.length > 8 ? 8 : this.floorsArr.length
 
       this.marginTopMax = -(this.floorsArr.length - this.showNumber) * this.height
-      this.changeFloor(0, 0);
-      this.tabFloor(this.floorsArr[0], 0);
+      // this.changeFloor(0, 0);
+      // this.tabFloor(this.floorsArr[0], 0);
     },
     /**
      * @name changeFloor
@@ -100,7 +100,7 @@ export default {
      * @param {Number} index 楼层信息在floorsArr数组中的位置
      */
     tabFloor(item, index) {
-      this.currentFloorId = item.FloorId;
+      this.currentFloorId = item.gcname;
       this.$emit("emitFloor", item)
       this.handlePosition(2, index, this.floorsArr.length)
     },
@@ -159,7 +159,7 @@ export default {
 <style lang="less" scoped>
 .floor-box {
   .floor-list {
-    width: 44px;
+    width: 40px;
     // height: 212px;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
@@ -222,8 +222,8 @@ export default {
     }
     .isActive {
       border-radius: 4px;
-      color: #025baa;
-      background: #e1f2ff;
+      color: #ffffff;
+      background: #025BAA;
     }
   }
   .disabled {

+ 7 - 0
src/store/index.ts

@@ -16,6 +16,7 @@ export default new Vuex.Store({
         isMessage: true, //是否有发布的图
         bunkObj: {}, // 铺位名称
         floorsArr: [], //楼层数组
+        categoryId: "", //系统类型
         // 事件类型字典
         objtypeDict: {
             1: '重要维保',
@@ -33,6 +34,8 @@ export default new Vuex.Store({
         isMessage: (state) => state.isMessage,
         bunkObj: (state) => state.bunkObj,
         objtypeDict: (state) => state.objtypeDict,
+        floorsArr: (state) => state.floorsArr,
+        categoryId: (state) => state.categoryId,
     },
     mutations: {
         SETSSOTOKEN(state, data) {
@@ -60,6 +63,10 @@ export default new Vuex.Store({
         SETFLOORS(state, data) {
             state.floorsArr = data
         },
+        // 设置系统类型
+        SETCATEGORYID(state, data) {
+            state.categoryId = data
+        },
     },
     actions: {
         async getfmapID(context) {

+ 20 - 3
src/views/FloorFunc.vue

@@ -3,7 +3,7 @@
     <div class="floor-item" v-for="floor in floorData" :key="floor.FloorId">
       <div class="floor-item-title">
         <span class="floor-item-text"><i class="iconfont wanda-louceng1"></i> {{floor.FloorId}}</span>
-        <p class="floor-item-goMap" @click='goToMapView'>
+        <p class="floor-item-goMap" @click='goToMapView(floor)'>
           <span>查看平面图 </span>
           <van-icon class='floor-item-arrow' name='arrow' />
         </p>
@@ -51,6 +51,10 @@
   </div>
 </template>
 <script>
+import Vue from 'vue';
+import { Toast } from 'vant';
+Vue.use(Toast);
+import { mapGetters } from 'vuex'
 export default {
   name: 'FloorFunc',
   props: {},
@@ -59,6 +63,7 @@ export default {
       floorData: [
         {
           "FloorId": "f1",
+          "FloorName": "F1",
           "Note": "1111111111",
           "Statistics": [
             {
@@ -331,6 +336,7 @@ export default {
         },
         {
           "FloorId": "f2",
+          "FloorName": "F2",
           "Note": "",
           "Statistics": [
             {
@@ -618,12 +624,23 @@ export default {
       ]
     }
   },
+  computed: {
+    ...mapGetters(['categoryId']),
+  },
   components: {},
   beforeMount() { },
   mounted() { },
   methods: {
-    goToMapView() {
-      this.$router.push({ name: 'MapView', params: {categoryId: this.$route.query.categoryId} })
+    goToMapView(floor) {
+      if (floor.FloorId && floor.FloorName) {
+        let floorObj = {
+          FloorId: floor.FloorId,
+          FloorName: floor.FloorName
+        }
+        this.$router.push({ name: 'MapView', params: {floor: floorObj} })
+      } else {
+        Toast.fail('缺少楼层信息!');
+      }
     },
   },
 }

+ 48 - 21
src/views/overview/MapView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class='map-view'>
-    <van-nav-bar title="F3平面图" @click-left='backPage'>
+    <van-nav-bar :title="`${floorName}平面图`" @click-left='backPage'>
       <template #left>
         <van-icon name="arrow-left" size="18" color="#333333" />
       </template>
@@ -11,7 +11,7 @@
       <div class='strip-bottom'>
         <!-- <canvasFun @fit='fit' @savePng='savePng' @saveSvg='saveSvg' @saveJson='saveJson' @scale='scale' @showText='showText' ref='canvasFun'></canvasFun> -->
       </div>
-      <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
+      <floor-list ref="fList" class="bind-floor-list" v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor'></floor-list>
     </div>
   </div>
 </template>
@@ -21,7 +21,7 @@
  */
 import Vue from 'vue'
 import { mapGetters } from 'vuex'
-import { NavBar } from 'vant'
+import { NavBar, Toast } from 'vant'
 import floorList from "@/components/floorMap/floorList.vue"
 import canvasFun from '@/components/floorMap/canvasFun'
 import { readGroup, queryStatis, graphQuery } from '@/api/public'
@@ -33,25 +33,25 @@ import { TipelineItem } from '@/lib/items/TipelineItem'
 import { SImageLegendItem } from '@/lib/items/SImageLegendItem'
 
 import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
+import { ProjectRf } from '@saga-web/feng-map'
 import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } from '@saga-web/big'
 import { SColor } from '@saga-web/draw/lib'
-Vue.use(NavBar)
+Vue.use(NavBar).use(Toast)
 export default {
   name: 'MapView',
   props: {},
   components: { floorList, canvasFun },
   computed: {
-    ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
+    ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj', 'floorsArr', 'categoryId']),
   },
   data() {
     return {
-      floorsArr: [],
       view: '',
       scene: '',
       mapServerURL: "http://map.wanda.cn/editor",
-      activeFloor: null,
       canvasLoading: false,
-      floorid: 'f1', //楼层id
+      floorid: '', //楼层id
+      floorName: '', //楼层名
       count: 0, // 顶楼为多张图时计数器
       topologyParser: null, // 解析器数据
       fParser: null, // 底图解析器
@@ -64,7 +64,6 @@ export default {
       console.log(document.getElementById("bind-map-content").offsetHeight)
       document.getElementById("bind-canvas").width = document.getElementById("bind-map-content").offsetWidth;
       document.getElementById("bind-canvas").height = document.getElementById("bind-map-content").offsetHeight;
-      this.init(this.floorid)
     })
   },
   methods: {
@@ -73,16 +72,21 @@ export default {
     },
     // 切换楼层
     emitFloor(floorObj) {
-      // if (floorObj) {
-      //   this.$nextTick(() => {
-      //     this.canvasLoading = true;
-      //     this.activeFloor = floorObj;
-      //     this.initGraph(floorObj.FloorId);
-      //   })
-      // }
+      if (floorObj) {
+        this.$nextTick(() => {
+          this.floorid = floorObj.gcname;
+          this.floorName = floorObj.code;
+          this.init(floorObj.gcname);
+        })
+      }
     },
     init(floorid) {
-      this.canvasLoading = true
+      // this.canvasLoading = true
+      Toast.loading({
+        duration: 0, // 持续展示 toast
+        message: '加载中...',
+        forbidClick: true,
+      });
       // this.floorid = floorid
       // this.$refs.canvasFun.isShow = false
       setTimeout(() => {
@@ -105,6 +109,7 @@ export default {
           this.readGraph()
         } else {
           this.canvasLoading = false
+          Toast.clear();
         }
       }, 100)
     },
@@ -202,7 +207,7 @@ export default {
             if (this.$refs.canvasFun) {
               this.$refs.canvasFun.everyScale = this.view.scale
             }
-            this.loading = false
+            Toast.clear();
             return
           } else {
             if (
@@ -304,9 +309,11 @@ export default {
           this.view.fitSceneToView()
           this.view.minScale = this.view.scale
           this.canvasLoading = false
+          Toast.clear();
         })
         .catch(() => {
           this.canvasLoading = false
+          Toast.clear();
         })
     },
     // 顶楼为多张图时计数器
@@ -336,7 +343,7 @@ export default {
       const data = {
         BuildingID: '1',
         FloorID: this.floorid,
-        categoryId: this.$route.params.categoryId,
+        categoryId: this.categoryId,
         projectId: this.plazaId,
         Pub: true,
       }
@@ -344,13 +351,27 @@ export default {
     },
     // 获取图最大最小值
     getGraphDetail() {
-      const categoryId = this.$route.params.categoryId
+      const categoryId = this.categoryId
       const data = {
         Filters: `categoryId='${categoryId}';projectId='${this.plazaId}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
       }
       return graphQuery(data)
     },
-  }
+  },
+  watch: {
+    '$route.params.floor': {
+      handler(floor) {
+        this.$nextTick(() => {
+          this.floorid = floor.FloorId;
+          this.floorName = floor.FloorName;
+          this.$refs.fList.currentFloorId = floor.FloorId;
+          this.init(floor.FloorId);
+        })
+      },
+      immediate: true,
+      deep: true
+    }
+  },
 }
 </script>
 <style lang='less' scoped>
@@ -361,6 +382,12 @@ export default {
   flex-direction: column;
   #bind-map-content {
     flex: 1;
+    position: relative;
+    .bind-floor-list {
+      position: fixed;
+      top: 65px;
+      right: 16px;
+    }
   }
 }
 </style>