瀏覽代碼

调通草稿箱图

YaolongHan 4 年之前
父節點
當前提交
f553350983
共有 1 個文件被更改,包括 164 次插入28 次删除
  1. 164 28
      src/views/drafts.vue

+ 164 - 28
src/views/drafts.vue

@@ -17,15 +17,31 @@
         <div class="concent-bottom">
           <div class="map">
             <div class="legend-btn" @click="legend = !legend">
-              <a-icon type="right"  style="color: #8D9399;font-size: 10px"/>
+              <a-icon type="right" style="color: #8D9399;font-size: 10px" />
+            </div>
+            <div class="canvas-container">
+              <div id="fengMap"></div>
+              <canvas
+                id="canvas"
+                :width="canvasWidth"
+                :height="canvasHeight"
+                ref="canvas"
+                tabindex="0"
+              ></canvas>
             </div>
           </div>
           <div class="legend" v-if="legend">
-            <div style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px">可能需要补充的图例</div>
+            <div
+              style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
+            >可能需要补充的图例</div>
             <a-table :columns="columns" :data-source="data" size="middle" :pagination="false">
-              <img  style="width:10px;heigth:10px" slot="img" slot-scope="text, record" :src="require('@/assets/images/'+record.img+'.png')" />
-              <template v-slot:state>
-              </template>
+              <img
+                style="width:10px;heigth:10px"
+                slot="img"
+                slot-scope="text, record"
+                :src="require('@/assets/images/'+record.img+'.png')"
+              />
+              <template v-slot:state></template>
             </a-table>
           </div>
         </div>
@@ -85,48 +101,159 @@ const dataArr = [
           { id: "3221", name: "二级1", checked: "uncheck" }
         ]
       }
-    ],
+    ]
   }
 ];
 import Tree from "./../components/Tree/Tree.vue";
+import { SFengParser } from "@saga-web/feng-map";
+import { SFloorParser } from "@saga-web/big";
+import { FloorView } from "./../lib/FloorView";
+import { EditScence } from "@/components/mapClass/EditScence";
+import bus from "@/bus";
+import { saveGroup, readGroup } from "@/api/editer.js";
+import { STopologyParser } from "./../lib/parsers/STopologyParser";
+import { uuid } from "@/components/mapClass/until";
+import { SImageItem } from "@saga-web/graph/lib";
+import store from "../store";
+let fengmap = null;
 export default {
   components: { Tree },
   data() {
     return {
-      treeData:JSON.parse(JSON.stringify(dataArr)),
-      columns:[
+      treeData: JSON.parse(JSON.stringify(dataArr)),
+      columns: [
         {
           title: "名称", // 列的名称
           dataIndex: "name", // 列的标识
-          scopedSlots: { customRender: 'name' }
-        },{
+          scopedSlots: { customRender: "name" }
+        },
+        {
           title: "图例", // 列的名称
           dataIndex: "img", // 列的标识
-          scopedSlots: { customRender: 'img' }
-        },
+          scopedSlots: { customRender: "img" }
+        }
       ],
       data: [
         {
           key: "1",
           name: "客梯",
-          img:'shubiao'
+          img: "shubiao"
         },
         {
           key: "2",
           name: "防火分区",
-          img:'shubiao'
+          img: "shubiao"
         },
         {
           key: "3",
           name: "消防泵室",
-          img:'shubiao'
-        },
+          img: "shubiao"
+        }
       ],
-      legend:false
+      legend: false,
+      canvasWidth: 700,
+      canvasHeight: 800,
+      view: null,
+      urlMsg: null,
+      floorList: {},
+      mapServerURL: "/wdfn",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      appName: "万达可视化系统"
     };
   },
   methods: {
-    change() {}
+    change() {},
+    init() {
+      console.log(this.urlMsg);
+      // const loadings = this.$loading({type: 'global'});
+      document.getElementById(`canvas`).focus();
+      this.clearGraphy();
+      this.scene = new EditScence();
+      fengmap = new SFengParser(
+        "fengMap",
+        this.mapServerURL + "/fmap/" + this.urlMsg.fmapID,
+        this.key,
+        this.appName,
+        null
+      );
+      console.log(this.urlMsg.fmapID);
+      const floorid = this.urlMsg.FloorID;
+      fengmap.loadMap(this.urlMsg.fmapID, resp => {
+        this.floorList = resp;
+        fengmap
+          .loadTheme(
+            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`
+          )
+          .then(response => {
+            console.log("获取rf成功", response);
+            this.parserData(floorid);
+          });
+        this.view.fitSceneToView();
+      });
+    },
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return;
+      }
+      this.view = new FloorView("canvas");
+      document.getElementById("canvas").focus();
+    },
+    parserData(floor) {
+      if (floor == "g80") {
+        // 屋顶
+        if (fengmap.frImg) {
+          const imgItem = new SImageItem(
+            null,
+            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`
+          );
+          this.scene.addItem(imgItem);
+          this.view.scene = this.scene;
+          this.view.fitSceneToView();
+          this.loading = false;
+          this.isQuerying = false;
+        }
+      } else {
+        if (this.floorList[floor]) {
+          fengmap.parseData(this.floorList[floor], res => {
+            if (res.err) {
+              console.log(res.err);
+              return;
+            }
+            this.fParser = new SFloorParser(null);
+            this.fParser.parseData(res);
+            this.fParser.spaceList.forEach(t => {
+              t.selectable = true;
+              this.scene.addItem(t);
+            });
+            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.loading = false;
+            this.isQuerying = false;
+            console.log("success");
+          });
+        } else {
+          console.log("楼层不正确");
+        }
+      }
+    }
+  },
+  mounted() {
+    // this.canvasWidth = this.$refs.graphy.offsetWidth;
+    // this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
+    this.urlMsg = {
+      categoryId: "SCPZ",
+      projectId: "1000423",
+      BuildingID: "1",
+      FloorID: "f1",
+      fmapID: "1000423_120"
+    };
+    this.init();
   }
 };
 </script>
@@ -181,7 +308,7 @@ export default {
           justify-content: space-between;
         }
       }
-      .concent-bottom{
+      .concent-bottom {
         height: calc(100% - 61px);
         display: flex;
         .map {
@@ -189,27 +316,36 @@ export default {
           position: relative;
           /*height: calc(100% - 61px);*/
           /*background: red;*/
-          .legend-btn{
+          .legend-btn {
             position: absolute;
             right: 0;
-            top:9px;
-            width:10px;
-            height:24px;
-            background:rgba(228,229,231,1);
+            top: 9px;
+            width: 10px;
+            height: 24px;
+            background: rgba(228, 229, 231, 1);
             display: flex;
             justify-content: center;
             align-items: center;
             cursor: pointer;
           }
         }
-        .legend{
+        .legend {
           width: 200px;
-          border-left: 1px solid #EFF0F1;
-          height:100%;
+          border-left: 1px solid #eff0f1;
+          height: 100%;
         }
       }
-
     }
   }
 }
+#fengMap {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+.canvas-container {
+  width: 100%;
+  height: 100%;
+}
 </style>