Browse Source

modify canvasGraphy

haojianlong 5 years ago
parent
commit
0c1ffce9ad

+ 3 - 3
package.json

@@ -11,8 +11,8 @@
     },
     "dependencies": {
         "@sybotan-web/base": "2.0.54",
-        "@sybotan-web/draw": "2.0.114",
-        "@sybotan-web/graphy": "2.0.90",
+        "@sybotan-web/draw": "2.0.128",
+        "@sybotan-web/graphy": "2.0.93",
         "axios": "^0.18.0",
         "echarts": "^4.1.0",
         "element-ui": "^2.11.0",
@@ -23,7 +23,7 @@
         "vue-axios": "^2.1.4",
         "vue-router": "^3.0.1",
         "vuex": "^3.1.0",
-        "cad-engine": "2.0.42"
+        "cad-engine": "2.0.56"
     },
     "devDependencies": {
         "ajv": "^6.9.1",

+ 3 - 5
src/views/ready/buildfloor/drawGraphy/checkGraphy.vue

@@ -9,7 +9,7 @@
       </div>
       <!-- 展示框 -->
       <div class="showBox">
-        <drawFloor ref="drawFloor" :findGraphyItemId="findGraphyItemId" :dataKey="dataKey" :point="point" :pointWidth="pointWidth" :cadWidth="720"
+        <drawFloor ref="drawFloor" :findGraphyItemId="findGraphyItemId" :point="point" :pointWidth="pointWidth" :cadWidth="720"
           :cadHeight="300" :isScale="true"></drawFloor>
       </div>
     </div>
@@ -35,7 +35,6 @@ export default {
   data() {
     return {
       casVal:[],
-      dataKey: "", //url
       jsonKey: "", //map.josn
       point: [40703.54760591985, 42678.14510522981], //坐标
       pointWidth: 2000,
@@ -60,6 +59,7 @@ export default {
     handleClose() {
       this.checkGraphyVisible = false;
       this.casVal = []
+      this.$refs.drawFloor.clearGraphy()
     },
     // 更新楼层 平面图文件
     bindGraphy() {
@@ -83,11 +83,9 @@ export default {
     // 点击多级联动
     handleChange(val) {
       console.log(val)
-      this.$refs.drawFloor.initGraphy('3af6d175c34e11e993ac85337be80696')
-      this.dataKey = '3af6d175c34e11e993ac85337be80696'
+      this.$refs.drawFloor.initGraphy(val[1])
       this.jsonKey = val[1]
       // this.jsonKey = val[1];
-      // this.dataKey = `/image-service/common/file_get/${this.jsonKey}?systemId=revit`;
     },
     // 通过id查询文件夹下模型文件
     handleItemChange(val) {

+ 46 - 51
src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="drawFloor">
-    <canvas :id="'canvas'+indexs" :width="cadWidth" :height="cadHeight"></canvas>
+    <canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas"></canvas>
   </div>
 </template>
 
@@ -11,21 +11,16 @@ import { FloorScene } from "cad-engine";
 import { SColor } from "@sybotan-web/draw/lib";
 export default {
   props: {
-    cadWidth: {
-      type: String | Number,
-      default: "100%",
-      required: false
-    },
-    cadHeight: {
-      type: String | Number,
-      default: "100%",
-      required: false
-    },
-    dataKey: {
-      type: String,
-      default: "",
-      required: true
-    },
+    // cadWidth: {
+    //   type: String | Number,
+    //   default: "100%",
+    //   required: false
+    // },
+    // cadHeight: {
+    //   type: String | Number,
+    //   default: "100%",
+    //   required: false
+    // },
     point: {
       type: Array,
       default: [0, 0],
@@ -82,26 +77,31 @@ export default {
   data() {
     return {
       drawMainScene: null,
-      view: null
+      view: null,
+      dataKey: '',
+      cadWidth: 800,
+      cadHeight: 600
     };
   },
   mounted() {
-    this.initGraphy('3af6d175c34e11e993ac85337be80696');
-    let that = this;
-    eventBus.$on("suitableRatios", function () {
-      that.view.fitSceneToView();
-    });
-    eventBus.$on("changeRatios", function (val) {
-      that.changeRatios(val);
-    });
-    eventBus.$on("downImgs", function (val) {
-      that.view.saveImage("saveImage" + new Date(), "png");
-    });
-    eventBus.$on("openDrags", function (val) {
-      if (val) {
+    // this.initGraphy('3af6d175c34e11e993ac85337be80696');
+    // let that = this;
+    // eventBus.$on("suitableRatios", function () {
+    //   that.view.fitSceneToView();
+    // });
+    // eventBus.$on("changeRatios", function (val) {
+    //   that.changeRatios(val);
+    // });
+    // eventBus.$on("downImgs", function (val) {
+    //   that.view.saveImage("saveImage" + new Date(), "png");
+    // });
+    // eventBus.$on("openDrags", function (val) {
+    //   if (val) {
 
-      }
-    });
+    //   }
+    // });
+    this.cadWidth = document.getElementById("drawFloor").offsetWidth - 20;
+    this.cadHeight = document.getElementById("drawFloor").offsetHeight - 20;
   },
   methods: {
     clickItem(item) {
@@ -120,18 +120,17 @@ export default {
       });
     },
     initGraphy(ModelId) {
+      this.dataKey = ModelId
       if (!this.dataKey) {
         return;
       }
-      let arr = ['3af6d175c34e11e993ac85337be80696', 'bd174039c32311e98359dfc652ba919b', '8544a3c3cd2611e99abc839db1015353']
-      let index = Math.floor(Math.random() * 3)
       this.drawMainScene = null;
       this.view = null;
       // 初始化view类
-      this.view = new SGraphyView("canvas" + this.indexs);
+      this.view = new SGraphyView("floorCanvas");
       this.drawMainScene = new FloorScene(null);
       let that = this;
-      this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: arr[index] }).then(res => {
+      this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
         that.view.scene = that.drawMainScene
         that.view.fitSceneToView();
       })
@@ -141,11 +140,11 @@ export default {
     },
     // 单个item 高亮
     heightLightitem(item, highlightColor) {
-      this.drawItemColor(item, highlightColor);
+      // this.drawItemColor(item, highlightColor);
     },
     // 取消放大缩小
     cancelScale(view) {
-      view.wheelZoom = 1;
+      // view.wheelZoom = 1;
     },
     // 左键长按控制canvas的坐标
     leftClickMove(a, b) {
@@ -155,15 +154,15 @@ export default {
       //计算缩放比例
       this.view.scale = val;
     },
+    clearGraphy(){
+      this.drawMainScene.root.children = null
+      this.drawMainScene = null;
+      this.view = null;
+    }
   },
   watch: {
-    dataKey(str) {
-      if (str) {
-        this.initGraphy('3af6d175c34e11e993ac85337be80696');
-      }
-    },
-    findGraphyItemId(str) {
-      if (str) {
+    findGraphyItemId(n) {
+      if (n) {
         this.heightLightitem();
       }
     }
@@ -173,12 +172,8 @@ export default {
 <style scoped lang="less">
 #drawFloor {
   width: 100%;
+  height: 100%;
   position: relative;
-  height: auto;
-  canvas {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
+  margin-top: 10px;
 }
 </style>

+ 10 - 19
src/views/ready/buildfloor/drawGraphy/repetitionGraphy.vue

@@ -1,11 +1,5 @@
 <template>
-  <el-dialog
-    id="checkdrawimg"
-    title="前期准备/建筑楼层管理/平面图维护"
-    :visible.sync="repetitionGraphyVisible"
-    width="60%"
-    :before-close="handleClose"
-  >
+  <el-dialog id="checkdrawimg" title="前期准备/建筑楼层管理/平面图维护" :visible.sync="repetitionGraphyVisible" width="60%" :before-close="handleClose">
     <div class="bodys">
       <div class="buttons">
         <el-button icon="el-icon-back" size="mini"></el-button>
@@ -14,16 +8,8 @@
       </div>
       <!-- 展示图片 -->
       <div class="drawImg">
-        <drawFloor
-          ref="drawFloor"
-          :findGraphyItemId="findGraphyItemId"
-          :dataKey="dataKey"
-          :point="point"
-          :pointWidth="pointWidth"
-          :cadWidth="1000"
-          :cadHeight="500"
-          :isScale="true"
-        ></drawFloor>
+        <drawFloor ref="drawFloor" :findGraphyItemId="findGraphyItemId" :point="point" :pointWidth="pointWidth" :cadWidth="1000" :cadHeight="500"
+          :isScale="true"></drawFloor>
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -43,8 +29,7 @@ export default {
   },
   data() {
     return {
-      dataKey:
-        "/image-service/common/file_get/Fl4201050001c72ff970d2ba11e8a57543fa3e79672520181120041440bim.jsonz?systemId=revit", // key
+      modelId: "04153a22ce3111e9b1c7318645437bfe", // key
       point: [40703.54760591985, 42678.14510522981], //坐标
       pointWidth: 2000,
       findGraphyItemId: "" //高亮的id
@@ -54,6 +39,12 @@ export default {
     handleClose() {
       this.$emit("closeRepeatVisible");
     }
+  },
+  mounted(){
+    // this.modelId = this.$router.query.modelId
+    console.log(22222)
+    let modelId = this.modelId
+    this.$refs.drawFloor.initGraphy(modelId)
   }
 };
 </script>

+ 4 - 4
src/views/ready/buildfloor/index.vue

@@ -125,7 +125,7 @@ export default {
       loading: false, //列表loading
       curBuildId: "", //当前选中的建筑id
       curFloorId: "", //当前选中的楼层id
-      jsonKey: "",
+      modelId: "",
     };
   },
   computed: {
@@ -235,10 +235,10 @@ export default {
     checfDrawImg(row, index) {
       if (3 == index) {
         this.$refs.checkGraphy.showDialog(row)
-        this.jsonKey = "";
+        this.modelId = "";
       } else {
-        this.jsonKey = row.StructureInfo.FloorMap;
-        this.$router.push({ name: "repetitionGraphy", query: { jsonKey: this.jsonKey } });
+        this.modelId = row.StructureInfo.FloorMap;
+        this.$router.push({ name: "repetitionGraphy", query: { modelId: this.modelId } });
       }
     }
   },

+ 15 - 21
src/views/ready/buildfloor/repetitionGraphy.vue

@@ -7,23 +7,11 @@
     </div>
     <!-- 展示图片 -->
     <div class="drawImg">
-      <drawFloor
-        ref="drawFloor"
-        :findGraphyItemId="findGraphyItemId"
-        :dataKey="dataKey"
-        :point="point"
-        :pointWidth="pointWidth"
-        :cadWidth="1400"
-        :cadHeight="700"
-        :isScale="false"
-        indexs="repetion"
-      ></drawFloor>
+      <drawFloor ref="drawFloor" :findGraphyItemId="findGraphyItemId" :point="point" :pointWidth="pointWidth" :cadWidth="1400" :cadHeight="700"
+        :isScale="false" indexs="repetion"></drawFloor>
     </div>
     <!-- 查看图片弹窗 -->
-    <checkGraphy
-      :checkGraphyVisible="checkGraphyVisible"
-      @handleCloseCGraphy="checkGraphyVisible=false"
-    ></checkGraphy>
+    <checkGraphy :checkGraphyVisible="checkGraphyVisible" @handleCloseCGraphy="checkGraphyVisible=false"></checkGraphy>
     <div id="operateList">
       <operateGraphyItem></operateGraphyItem>
     </div>
@@ -42,7 +30,7 @@ export default {
   data() {
     return {
       checkGraphyVisible: false, //查看平面图弹窗
-      dataKey:"",
+      modelId: "04153a22ce3111e9b1c7318645437bfe", // key
       point: [40703.54760591985, 42678.14510522981], //坐标
       pointWidth: 2000,
       findGraphyItemId: "", //高亮的id
@@ -62,8 +50,12 @@ export default {
       this.checkGraphyVisible = true;
     },
   },
-  created() {
-    this.dataKey = `/image-service/common/file_get/${this.$route.query.jsonKey}?systemId=revit`;
+  mounted() {
+    // this.dataKey = `/image-service/common/file_get/${this.$route.query.jsonKey}?systemId=revit`;
+    // this.modelId = this.$router.query.modelId
+    let modelId = this.modelId
+    console.log(this.$refs.drawFloor)
+    this.$refs.drawFloor.initGraphy(modelId)
   },
 };
 </script>
@@ -77,13 +69,15 @@ export default {
   padding-top: 10px;
   padding-left: 10px;
   .drawImg {
-    width: 100%;
+    width: calc(100% - 20px);
     margin: 0 auto;
+    height: calc(100% - 50px);
   }
-  #operateList{
+  #operateList {
     position: absolute;
-    right: 200px;
+    left: 50%;
     bottom: 100px;
+    // margin-left: 
   }
 }
 </style>