Browse Source

'添加特殊视图页面'

zhangyu 4 years ago
parent
commit
758cc47314
3 changed files with 576 additions and 1 deletions
  1. 11 0
      src/router/index.ts
  2. 1 1
      src/views/legendList.vue
  3. 564 0
      src/views/overview/MapOther.vue

+ 11 - 0
src/router/index.ts

@@ -195,6 +195,17 @@ const routes: Array<RouteConfig> = [
             hideNarBar: true,
         },
     },
+    // 平面图查看(特殊)
+    {
+        path: '/mapOther',
+        name: 'MapOther',
+        component: () => import(/* webpackChunkName: "mapOther" */ '../views/overview/MapOther.vue'),
+        meta: {
+            keepAlive: false,
+            showTabbar: false,
+            hideNarBar: true,
+        },
+    },
     // 全局搜索
     {
         path: '/globalSearch',

+ 1 - 1
src/views/legendList.vue

@@ -124,7 +124,7 @@ export default {
           FloorId: floor.FloorId,
           FloorName: floor.FloorName
         }
-        this.$router.push({ name: 'MapView', params: { floor: floorObj } })
+        this.$router.push({ name: 'MapOther', params: { floor: floorObj, floorsArr: this.floorsArr } })
       } else {
         Toast.fail('缺少楼层信息!');
       }

+ 564 - 0
src/views/overview/MapOther.vue

@@ -0,0 +1,564 @@
+<template>
+  <div class='map-view'>
+    <van-nav-bar :title="`${floorName}平面图`" @click-left='backPage'>
+      <template #left>
+        <van-icon name="arrow-left" size="18" color="#333333" />
+      </template>
+    </van-nav-bar>
+    <div id="bind-map-content">
+      <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
+      <!-- 地图底部操作按钮 -->
+      <div class='strip-bottom'>
+        <canvasFun @fit='fit' @showText='showText' ref='canvasFun'></canvasFun>
+      </div>
+      <floor-list ref="fList" class="bind-floor-list" v-if='floorsArr.length>0' :floorsArr='floorsArr'
+        @emitFloor='emitFloor'></floor-list>
+      <div class="change-direction" @click='changeOri'>
+        <i class="iconfont wanda-hengshuping"></i>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/**
+ * 平面图展示
+ */
+import Vue from 'vue'
+import { mapGetters } from 'vuex'
+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'
+import { queryShops } from '@/api/equipmentList.js'
+import { FloorView } from '@/lib/FloorView'
+import { FloorScene } from '@/lib/FloorScene'
+import { STopologyParser } from '@/lib/parsers/STopologyParser'
+
+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).use(Toast)
+export default {
+  name: 'MapOther',
+  props: {},
+  components: { floorList, canvasFun },
+  computed: {
+    ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj', 'categoryId']),
+  },
+  data() {
+    return {
+      view: '',
+      scene: '',
+      floorsArr: [],
+      mapServerURL: "http://map.wanda.cn/editor",
+      canvasLoading: false,
+      floorid: '', //楼层id
+      floorName: '', //楼层名
+      count: 0, // 顶楼为多张图时计数器
+      topologyParser: null, // 解析器数据
+      fParser: null, // 底图解析器
+      direction: '竖屏',
+    }
+  },
+  props: {},
+  beforeMount() { },
+  mounted() {
+    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
+      this.clearGraphy();
+      setTimeout(() => {
+        if (window.orientation === 0 || window.orientation === 180) {
+          console.log("竖屏");
+        }
+        if (window.orientation === 90 || window.orientation === -90) {
+          console.log("横屏");
+        }
+        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)
+      }, 500)
+    }, false);
+    this.$nextTick(() => {
+      document.getElementById("bind-canvas").width = document.getElementById("bind-map-content").offsetWidth;
+      document.getElementById("bind-canvas").height = document.getElementById("bind-map-content").offsetHeight;
+    })
+  },
+  methods: {
+    backPage() {
+      if (this.direction === '横屏') {
+        this.roateY()
+        this.direction = '竖屏'
+      }
+      this.$router.go(-1);
+    },
+    // 切换楼层
+    emitFloor(floorObj) {
+      if (floorObj) {
+        this.$nextTick(() => {
+          this.floorid = floorObj.gcname;
+          this.floorName = floorObj.code;
+          this.init(floorObj.gcname);
+        })
+      }
+    },
+    init(floorid) {
+      // this.canvasLoading = true
+      Toast.loading({
+        duration: 0, // 持续展示 toast
+        message: '加载中...',
+        forbidClick: true,
+      });
+      // this.floorid = floorid
+      // this.$refs.canvasFun.isShow = false
+      setTimeout(() => {
+        this.clearGraphy()
+        this.scene = new FloorScene()
+        if (this.haveFengMap == 1) {
+          this.scene.selectContainer.connect('listChange', this, this.listChange)
+          this.getGraphDetail().then((res) => {
+            if (res.Content.length == 1) {
+              const data = res.Content[0]
+              if (data.MaxY && data.MinX) {
+                window.fengmapData.maxY = data.MaxY
+                window.fengmapData.minX = data.MinX
+              }
+            }
+            this.parserData(floorid)
+          })
+          // this.parserData(floorid);
+        } else if (this.haveFengMap == 0) {
+          this.view.scene = this.scene
+          this.readGraph()
+        } else {
+          this.canvasLoading = false
+          Toast.clear();
+        }
+      }, 100)
+    },
+    // 解析底图
+    parserData(floor) {
+      if (floor == 'g80') {
+        // 屋顶
+        if (window.fengmapData.frImg) {
+          const pj = this.fmapID.split('_')[0]
+          // 单张图片
+          if (!ProjectRf[pj]) {
+            let imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${window.fengmapData.frImg}`)
+            imgItem.showType = SImageShowType.AutoFit
+            imgItem.connect('imgLoadOver', this, () => {
+              this.readGraph()
+            })
+            this.scene.addItem(imgItem)
+            this.view.scene = this.scene
+            // this.view.fitSceneToView()
+          } else {
+            // 多张图
+            try {
+              // 初始化0
+              this.count = 0
+              ProjectRf[pj].forEach((t) => {
+                const item = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.fmapID}/${t.name}`)
+                item.width = t.width
+                item.height = t.height
+                item.moveTo(t.x, t.y)
+                item.connect('imgLoadOver', this, () => {
+                  this.countRf(ProjectRf[pj].length)
+                })
+                this.scene.addItem(item)
+              })
+              this.view.scene = this.scene
+            } catch (e) {
+              console.log(e)
+            }
+          }
+        } else {
+          // 屋顶图不为图片
+          this.readBaseMap(floor)
+        }
+      } else {
+        if (window.fengmapData.gnameToGid[floor]) {
+          this.readBaseMap(floor)
+        } else {
+          console.log('楼层不正确')
+        }
+      }
+    },
+    // 解析楼地板
+    loadBoard(floor) {
+      window.fengmapData.loadFloor(floor, (res) => {
+        const zone = new SBoardItem(null, res)
+        this.scene.addItem(zone)
+      })
+    },
+    readBaseMap(floor) {
+      this.loadBoard(window.fengmapData.gnameToGid[floor])
+      window.fengmapData.parseData(window.fengmapData.gnameToGid[floor], (res) => {
+        if (res.err) {
+          console.log('errr', res.err)
+          return
+        }
+        this.fParser = new SFloorParser(null)
+        this.fParser.parseData(res)
+        this.fParser.spaceList.forEach((t) => {
+          this.scene.addItem(t)
+          t.nameSize = 12
+          t.nameColor = '#2a2a2a'
+          if (t.data.Name && this.bunkObj[t.data.Name]) {
+            t.name = this.bunkObj[t.data.Name].brandname
+          } else {
+            // t.name = t.data.Name
+            t.name = ''
+          }
+        })
+        this.fParser.wallList.forEach((t) => this.scene.addItem(t))
+        this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t))
+        this.fParser.doorList.forEach((t) => this.scene.addItem(t))
+        this.fParser.columnList.forEach((t) => this.scene.addItem(t))
+        this.fParser.casementList.forEach((t) => this.scene.addItem(t))
+        this.view.scene = this.scene
+        // this.view.fitSceneToView()
+        this.readGraph()
+      })
+    },
+    readGraph() {
+      this.readGroup()
+        .then((data) => {
+          if (data.Result == 'failure') {
+            this.$store.commit('SETISMESSAGE', false)
+            this.view.fitSceneToView()
+            this.view.minScale = this.view.scale
+            if (this.$refs.canvasFun) {
+              this.$refs.canvasFun.everyScale = this.view.scale
+            }
+            Toast.clear();
+            return
+          } else {
+            if (
+              data.Data[0].Elements.Nodes.length === 0 &&
+              data.Data[0].Elements.Markers.length === 0 &&
+              data.Data[0].Elements.Relations.length === 0
+            ) {
+              this.$store.commit('SETISMESSAGE', false)
+            } else {
+              this.$store.commit('SETISMESSAGE', true)
+            }
+          }
+          // 无返回Data处理
+          if (!(data.Data && data.Data.length)) {
+            this.view.fitSceneToView()
+            this.view.minScale = this.view.scale
+            if (this.$refs.canvasFun) {
+              this.$refs.canvasFun.everyScale = this.view.scale
+            }
+            return false
+          }
+          // // 请求回来的备注
+          // if (data.Data && data.Data[0].Note) {
+          //   let note = data.Data[0].Note
+          //   bus.$emit('queryRemarksMethods', note)
+          // } else {
+          //   bus.$emit('queryRemarksMethods', '')
+          // }
+          // //土建装饰的图例展示
+          // if (this.$cookie.get('categoryId') == 'SCPZ') {
+          //   let scpzTable = [],
+          //     arr = []
+          //   scpzTable = data.Data[0].Elements.Nodes || []
+          //   console.log(scpzTable)
+          //   if (scpzTable.length > 0) {
+          //     scpzTable.forEach((e) => {
+          //       if (e.Properties.ItemExplain) {
+          //         let obj = e
+          //         arr.push(obj)
+          //       }
+          //     })
+          //   }
+          //   console.log(arr)
+          //   this.$store.commit('SETSCPZTABLE', arr)
+          // }
+          // if (data.Data[0].Elements.Nodes.length > 0) {
+          //   this.$store.commit('SETTYPENUM', '')
+          //   let Lengd = data.Data[0].Elements.Nodes
+          //   Lengd.forEach((el) => {
+          //     if (el.Type == 'Image' && el.Num > 1) {
+          //       console.log(el.Num)
+          //       this.$store.commit('SETTYPENUM', el.Num)
+          //     }
+          //   })
+          // }
+          // 放到后边 $cookie graphId
+          // this.$cookie.set('graphId', data.Data[0].ID, 3)
+          // if (this.$cookie.get('graphId')) {
+          //   // 得到graphId 就请求图例
+          //   // 除土建装饰之外的图例展示 包括楼层功能
+          //   bus.$emit('queryViewMethods')
+          // }
+          this.topologyParser = new STopologyParser(null)
+          this.topologyParser.parseData(data.Data[0].Elements)
+          // 多边形
+          this.topologyParser.zoneLegendList.forEach((t) => {
+            this.scene.addItem(t)
+            // t.connect('legendItemClick', t, this.handleClickLegendItem)
+          })
+          // 增加文字
+          this.topologyParser.textMarkerList.forEach((t) => {
+            this.scene.addItem(t)
+          })
+          // 增加图片
+          this.topologyParser.imageMarkerList.forEach((t) => {
+            this.scene.addItem(t)
+          })
+          // 增加直线
+          this.topologyParser.lineMarkerList.forEach((t) => {
+            this.scene.addItem(t)
+          })
+          // 增加图标类图例
+          this.topologyParser.imageLegendList.forEach((t) => {
+            this.scene.addItem(t)
+            // t.connect('legendItemClick', t, this.handleClickLegendItem)
+          })
+          // 增加管线类
+          // 增加图标类图例
+          this.topologyParser.relationList.forEach((t) => {
+            t.selectable = true
+            this.scene.addItem(t)
+            // t.connect('legendItemClick', t, this.handleClickLegendItem)
+          })
+          // this.view.fitSceneToView()
+          // this.view.minScale = this.view.scale
+          if (this.$refs.canvasFun) {
+            this.$refs.canvasFun.everyScale = this.view.scale
+          }
+          this.view.fitSceneToView()
+          this.view.minScale = this.view.scale
+          this.canvasLoading = false
+          Toast.clear();
+        })
+        .catch(() => {
+          this.canvasLoading = false
+          Toast.clear();
+        })
+    },
+    // 顶楼为多张图时计数器
+    countRf(len) {
+      this.count++
+      if (len == this.count) {
+        this.readGraph()
+      } else {
+        console.log('所有图片未加载完成')
+      }
+    },
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null
+        return
+      }
+      this.view = new FloorView("bind-canvas");
+    },
+    listChange(item, ev) {
+      if (ev[0].length) {
+        // 选中电井设置电井关联的商铺高亮
+        this.setHightLight(ev[0])
+      } else {
+        this.clearHightLight()
+      }
+    },
+    // 选中电井关联的商铺高亮
+    setHightLight(arr) {
+      this.clearHightLight()
+      arr.forEach((item) => {
+        let location = item.data.AttachObjectIds[0] ? item.data.AttachObjectIds[0].id : ''
+        // 添加了位置类型并且选中的类型为电井类型
+        if (
+          (item.data.GraphElementId == '100050' ||
+            item.data.GraphElementId == '100055' ||
+            item.data.GraphElementId == '100056' ||
+            item.data.GraphElementId == '100057') &&
+          location
+        ) {
+          let getParams = {
+            plazaId: this.plazaId,
+            floor: this.floorid,
+            keyword: `${location}:wellnum;`,
+          }
+          queryShops({ getParams }).then((res) => {
+            let shopsnumList = []
+            if (res.data && res.data.length) {
+              for (let floor in res.data[0]) {
+                if (res.data[0][floor].length) {
+                  res.data[0][floor].forEach((v) => {
+                    shopsnumList = shopsnumList.concat(v.shopsnumList.split(','))
+                  })
+                }
+              }
+            }
+            if (shopsnumList.length) {
+              this.fParser.spaceList.forEach((item) => {
+                if (shopsnumList.findIndex((name) => name == item.data.Name) != -1) {
+                  item.highLightFlag = true
+                  item.zOrder = 30
+                }
+              })
+            }
+          })
+        }
+      })
+    },
+    // 清除电井关联商铺的高亮状态
+    clearHightLight() {
+      ItemColor.spaceHighColor = new SColor('#FBF2CC')
+      this.fParser.spaceList.forEach((item) => {
+        item.highLightFlag = false
+        item.zOrder = ItemOrder.spaceOrder
+      })
+    },
+    // 适配底图到窗口
+    fit() {
+      this.view.fitSceneToView()
+    },
+    // 小眼睛控制显示铺位名称
+    showText(val) {
+      this.fParser.spaceList.forEach((t) => {
+        t.showBaseName = val
+      })
+    },
+    // 读取数据
+    readGroup() {
+      const data = {
+        BuildingID: '1',
+        FloorID: this.floorid,
+        categoryId: this.categoryId,
+        projectId: this.plazaId,
+        Pub: true,
+      }
+      return readGroup(data)
+    },
+    // 获取图最大最小值
+    getGraphDetail() {
+      const categoryId = this.categoryId
+      const data = {
+        Filters: `categoryId='${categoryId}';projectId='${this.plazaId}';BuildingID='1';FloorID='${this.floorid}';isPub=true`,
+      }
+      return graphQuery(data)
+    },
+    changeOri() {
+      if (this.direction === '竖屏') {
+        this.roateX()
+        this.direction = '横屏'
+      } else if (this.direction === '横屏') {
+        this.roateY()
+        this.direction = '竖屏'
+      }
+    },
+    roateX() {
+      console.log('横屏')
+      window.webkit &&
+        webkit.messageHandlers.cordova_iab.postMessage(
+          JSON.stringify({
+            method: 'roateX',
+          })
+        )
+    },
+
+    // 竖屏
+    roateY() {
+      console.log('竖屏')
+      window.webkit &&
+        webkit.messageHandlers.cordova_iab.postMessage(
+          JSON.stringify({
+            method: 'roateY',
+          })
+        )
+    },
+  },
+  watch: {
+    '$route.params.floor': {
+      handler(floor) {
+        if (this.$route.params.floorsArr) {
+          this.floorsArr = this.$route.params.floorsArr;
+        }
+        this.$nextTick(() => {
+          this.floorid = floor.FloorId;
+          this.floorName = floor.FloorName;
+          let index = this.floorsArr.findIndex(item => {
+            return item.gcname === floor.FloorId
+          })
+          let item = {
+            gcname: floor.FloorId,
+            code: floor.FloorName
+          }
+          this.$refs.fList.tabFloor(item ,index);
+          // this.$refs.fList.currentFloorId = floor.FloorId;
+          // this.init(floor.FloorId);
+        })
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+}
+</script>
+<style lang='less' scoped>
+.map-view {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  #bind-map-content {
+    width: 100%;
+    height: calc(100% - 50px);
+    position: relative;
+    overflow: hidden;
+    .bind-floor-list {
+      position: fixed;
+      top: 65px;
+      right: 16px;
+    }
+    .strip-bottom {
+      position: fixed;
+      bottom: 60px;
+      right: 16px;
+    }
+    .change-direction {
+      position: fixed;
+      bottom: 60px;
+      left: 16px;
+      .wanda-hengshuping {
+        font-size: 26px;
+      }
+    }
+  }
+}
+// 横屏
+@media screen and (orientation: landscape) {
+  .map-view {
+    /deep/ .van-nav-bar {
+      height: 40px;
+    }
+    #bind-map-content {
+      .bind-floor-list {
+        position: fixed;
+        top: 47px;
+        right: 16px;
+      }
+      .strip-bottom {
+        position: fixed;
+        bottom: 15px;
+        right: 60px;
+      }
+      .change-direction {
+        position: fixed;
+        bottom: 15px;
+        left: 15px;
+        .wanda-hengshuping {
+          font-size: 26px;
+        }
+      }
+    }
+  }
+}
+</style>