Jelajahi Sumber

'显示拍卖泥土'

zhangyu 4 tahun lalu
induk
melakukan
5e64c92f5f
3 mengubah file dengan 364 tambahan dan 84 penghapusan
  1. 28 0
      src/store/index.ts
  2. 335 83
      src/views/overview/MapView.vue
  3. 1 1
      tsconfig.json

+ 28 - 0
src/store/index.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import { queryfmapID } from '@/api/login.js'
+import { queryBrand } from '@/api/public.js'
 
 Vue.use(Vuex)
 
@@ -12,6 +13,8 @@ export default new Vuex.Store({
         plazaId: '1000423', //项目Id
         fmapID: '',
         haveFengMap: -1, //是否有蜂鸟地图的数据 -1为等待 0 为失败 1 为成功
+        isMessage: true, //是否有发布的图
+        bunkObj: {}, // 铺位名称
     },
     getters: {
         ssoToken: (state) => state.ssoToken,
@@ -19,6 +22,8 @@ export default new Vuex.Store({
         plazaId: (state) => state.plazaId,
         fmapID: (state) => state.fmapID,
         haveFengMap: (state) => state.haveFengMap,
+        isMessage: (state) => state.isMessage,
+        bunkObj: (state) => state.bunkObj,
     },
     mutations: {
         SETSSOTOKEN(state, data) {
@@ -36,6 +41,12 @@ export default new Vuex.Store({
         SETHAVEFENGMAP(state, data) {
             state.haveFengMap = data
         },
+        SETISMESSAGE(state, data) {
+            state.isMessage = data
+        },
+        SETBUNKOBJ(state, data) {
+            state.bunkObj = data
+        },
     },
     actions: {
         async getfmapID(context) {
@@ -45,6 +56,23 @@ export default new Vuex.Store({
                 context.commit('SETMAPID', `${context.state.plazaId}_${res.mapVersion}`)
             })
         },
+        async getBrand(context) {
+            let data = {
+                plazaId: `${context.state.plazaId}`,
+            }
+            await queryBrand({
+                data,
+            }).then((res) => {
+                let obj = {}
+                if (res.data.data) {
+                    let Data = res.data.data
+                    Data.forEach((i) => {
+                        obj[i.bunkdesc] = i
+                    })
+                }
+                context.commit('SETBUNKOBJ', obj)
+            })
+        },
     },
     modules: {},
 })

+ 335 - 83
src/views/overview/MapView.vue

@@ -1,28 +1,30 @@
 <template>
-    <div class='map-view'>
-        <van-nav-bar title="F3平面图" @click-left='backPage'>
-          <template #left>
-            <van-icon name="arrow-left" size="18" color="#333333" />
-          </template>
-        </van-nav-bar>
-        <div id="bind-map-content" v-loading="canvasLoading">
-          <canvas id="bind-canvas" ref="bind-canvas" tabindex="0"></canvas>
-          <!-- 地图底部操作按钮 -->
-          <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>
-        </div>
+  <div class='map-view'>
+    <van-nav-bar title="F3平面图" @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' @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>
     </div>
+  </div>
 </template>
 <script>
 /**
  * 说明书更新记录
  */
 import Vue from 'vue'
+import { mapGetters } from 'vuex'
 import { NavBar } from 'vant'
 import floorList from "@/components/floorMap/floorList.vue"
 import canvasFun from '@/components/floorMap/canvasFun'
+import { readGroup, queryStatis, graphQuery } from '@/api/public'
 import { FloorView } from '@/lib/FloorView'
 import { FloorScene } from '@/lib/FloorScene'
 import { STopologyParser } from '@/lib/parsers/STopologyParser'
@@ -31,89 +33,339 @@ import { TipelineItem } from '@/lib/items/TipelineItem'
 import { SImageLegendItem } from '@/lib/items/SImageLegendItem'
 
 import { SImageItem, SImageShowType, SGraphItem } from '@saga-web/graph/lib'
+import { SFloorParser, ItemOrder, ItemColor, SPolygonItem, SBoardItem } from '@saga-web/big'
 import { SColor } from '@saga-web/draw/lib'
 Vue.use(NavBar)
 export default {
-    name: 'MapView',
-    props: {},
-    components: { floorList, canvasFun },
-    data() {
-        return {
-            floorsArr: [],
-            view: '',
-            scene: '',
-            mapServerURL: "http://map.wanda.cn/editor",
-            activeFloor: null,
-            canvasLoading: false
+  name: 'MapView',
+  props: {},
+  components: { floorList, canvasFun },
+  computed: {
+    ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj']),
+  },
+  data() {
+    return {
+      floorsArr: [],
+      view: '',
+      scene: '',
+      mapServerURL: "http://map.wanda.cn/editor",
+      activeFloor: null,
+      canvasLoading: false,
+      floorid: 'f1', //楼层id
+      count: 0, // 顶楼为多张图时计数器
+      topologyParser: null, // 解析器数据
+      fParser: null, // 底图解析器
+    }
+  },
+  props: {
+    categoryId: {
+      default: 'LCGN',
+      type: String,
+    }
+  },
+  beforeMount() { },
+  mounted() {
+    this.$nextTick(() => {
+      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: {
+    backPage() {
+      this.$router.go(-1)
+    },
+    // 切换楼层
+    emitFloor(floorObj) {
+      // if (floorObj) {
+      //   this.$nextTick(() => {
+      //     this.canvasLoading = true;
+      //     this.activeFloor = floorObj;
+      //     this.initGraph(floorObj.FloorId);
+      //   })
+      // }
+    },
+    init(floorid) {
+      this.canvasLoading = true
+      // this.floorid = floorid
+      // this.$refs.canvasFun.isShow = false
+      setTimeout(() => {
+        this.clearGraphy()
+        this.scene = new FloorScene()
+        if (this.haveFengMap == 1) {
+          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
         }
+      }, 100)
     },
-    beforeMount() {},
-    mounted() {
-      this.$nextTick(() => {
-        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;
+    // 解析底图
+    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()
       })
     },
-    methods: {
-        backPage() {
-            this.$router.go(-1)
-        },
-        init(floorid) {
-            this.canvasLoading = true
-            this.floorid = floorid
-            this.$refs.canvasFun.isShow = false
-            setTimeout(() => {
-                this.clearGraphy()
-                this.scene = new FloorScene()
-                if (this.haveFengMap == 1) {
-                    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
-                }
-            }, 100)
-        },
-        // 切换楼层
-        emitFloor(floorObj) {
-          // if (floorObj) {
-          //   this.$nextTick(() => {
-          //     this.canvasLoading = true;
-          //     this.activeFloor = floorObj;
-          //     this.initGraph(floorObj.FloorId);
+    readGraph() {
+      this.readGroup()
+        .then((data) => {
+          if (data.Result == 'failure') {
+            this.$store.commit('SETISMESSAGE', false)
+            this.view.minScale = this.view.scale
+            if (this.$refs.canvasFun) {
+              this.$refs.canvasFun.everyScale = this.view.scale
+            }
+            this.loading = false
+            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)
+          //     }
           //   })
           // }
-        },
-        clearGraphy() {
-          if (this.view) {
-            this.view.scene = null
-            return
+          // 放到后边 $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 = new FloorView("bind-canvas");
-        },
+          this.view.fitSceneToView()
+          this.view.minScale = this.view.scale
+          this.canvasLoading = false
+        })
+        .catch(() => {
+          this.canvasLoading = false
+        })
+    },
+    // 顶楼为多张图时计数器
+    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");
+    },
+    // 小眼睛控制显示铺位名称
+    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)
+    },
+  }
 }
 </script>
 <style lang='less' scoped>
 .map-view {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    #bind-map-content {
-      flex: 1;
-    }
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  #bind-map-content {
+    flex: 1;
+  }
 }
 </style>

+ 1 - 1
tsconfig.json

@@ -31,7 +31,7 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx", "src/store/index.js"
+    "tests/**/*.tsx", "src/store/index.ts", "src/main.ts"
   ],
   "exclude": [
     "node_modules"