Kaynağa Gözat

调整样式

YaolongHan 4 yıl önce
ebeveyn
işleme
549f4ec638
1 değiştirilmiş dosya ile 53 ekleme ve 45 silme
  1. 53 45
      src/views/drafts.vue

+ 53 - 45
src/views/drafts.vue

@@ -17,10 +17,7 @@
         </div>
         <div class="concent-bottom">
           <div class="map">
-            <div class="legend-btn" @click="legend = !legend">
-              <a-icon type="right" style="color: #8D9399;font-size: 10px" />
-            </div>
-            <div class="canvas-container">
+            <div class="canvas-container" ref="draftsCanvas">
               <div id="fengMap"></div>
               <canvas
                 id="canvas"
@@ -31,6 +28,12 @@
               ></canvas>
             </div>
           </div>
+          <div v-show="!legend" class="legend-btn" @click="legend = !legend">
+            <a-icon type="right" style="color: #8D9399;font-size: 10px" />
+          </div>
+          <div  v-show="legend" class="legend-btn legend-btn-close" @click="legend = !legend">
+            <a-icon type="right" style="color: #8D9399;font-size: 10px" />
+          </div>
           <div class="legend" v-if="legend">
             <div
               style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
@@ -112,38 +115,38 @@ export default {
       key: "23f30a832a862c58637a4aadbf50a566",
       appName: "万达可视化系统",
       defaultProps: {
-        children: 'Category',
-        label: 'Gcode'
+        children: "Category",
+        label: "Gcode"
       },
-      graphId:'',
+      graphId: "",
+      projectId: "", //项目id
+      fmapID: "" //蜂鸟地图id
     };
   },
   methods: {
     handleNodeClick(data) {
       console.log(data);
-      this.graphId = '124aeab6fbb346cd92057525a30aee18';
+      this.graphId = "124aeab6fbb346cd92057525a30aee18";
       this.getLegend();
     },
     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.mapServerURL + "/fmap/" + this.fmapID,
         this.key,
         this.appName,
         null
       );
-      console.log(this.urlMsg.fmapID);
-      const floorid = this.urlMsg.FloorID;
-      fengmap.loadMap(this.urlMsg.fmapID, resp => {
+      const floorid = "f1";
+      fengmap.loadMap(this.fmapID, resp => {
         this.floorList = resp;
         fengmap
           .loadTheme(
-            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`
+            `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
           )
           .then(response => {
             console.log("获取rf成功", response);
@@ -166,7 +169,7 @@ export default {
         if (fengmap.frImg) {
           const imgItem = new SImageItem(
             null,
-            `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`
+            `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
           );
           this.scene.addItem(imgItem);
           this.view.scene = this.scene;
@@ -206,28 +209,26 @@ export default {
     getTreeData() {
       queryDraftGroup({ projectId: this.projectId }).then(res => {
         console.log(res);
-        if(res.Result =='success'){
+        if (res.Result == "success") {
           this.treeData = res.Data;
-        }else{
-          this.treeData=[];
-          this.$message.err('获取楼层结构失败');
+        } else {
+          this.treeData = [];
+          this.$message.err("获取楼层结构失败");
         }
-      })
+      });
     },
-    getLegend(){
+    getLegend() {
       const data = {
-        projectId:'1000423',
-        flag:true,
-        graphId:this.graphId,
-      }
-      queryStatistic(data).then(res=>{
-
-      })
+        projectId: this.projectId,
+        flag: true,
+        graphId: this.graphId
+      };
+      queryStatistic(data).then(res => {});
     }
   },
   mounted() {
-    // // this.canvasWidth = this.$refs.graphy.offsetWidth;
-    // // this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
+    this.canvasWidth = this.$refs.draftsCanvas.offsetWidth - 10;
+    this.canvasHeight = this.$refs.draftsCanvas.offsetHeight - 10;
 
     const href = window.location.href;
     let params = href.split("?")[1];
@@ -242,9 +243,9 @@ export default {
       const arr = item.split("=");
       obj[arr[0]] = arr[1];
     });
-    console.log('obj',obj)
-    this.projectId = obj.projectId ?obj.projectId : '1000423';
-    this.fmapID = obj.fmapID
+    console.log("obj", obj);
+    this.projectId = obj.projectId ? obj.projectId : "1000423";
+    this.fmapID = obj.fmapID ? obj.fmapID : "1000423_120";
     this.init();
     this.getTreeData();
   }
@@ -315,30 +316,37 @@ export default {
       .concent-bottom {
         height: calc(100% - 61px);
         display: flex;
+        position: relative;
         .map {
           flex: 1;
           position: relative;
           height: 100%;
           /*height: calc(100% - 61px);*/
           /*background: red;*/
-          .legend-btn {
-            position: absolute;
-            right: 0;
-            top: 9px;
-            width: 10px;
-            height: 24px;
-            background: rgba(228, 229, 231, 1);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-          }
         }
         .legend {
+          position: absolute;
+          right: 0;
+          top: 0;
           width: 200px;
           border-left: 1px solid #eff0f1;
           height: 100%;
         }
+        .legend-btn {
+          position: absolute;
+          right: 0px;
+          top: 9px;
+          width: 10px;
+          height: 24px;
+          background: rgba(228, 229, 231, 1);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+        .legend-btn-close {
+          right: 200px;
+        }
       }
     }
   }