Browse Source

modify buildfloor canvas

haojianlong 5 years ago
parent
commit
0d62131b67

+ 1 - 1
package.json

@@ -23,7 +23,7 @@
         "vue-axios": "^2.1.4",
         "vue-router": "^3.0.1",
         "vuex": "^3.1.0",
-        "cad-engine": "2.0.182"
+        "cad-engine": "2.0.193"
     },
     "devDependencies": {
         "ajv": "^6.9.1",

+ 12 - 15
src/components/business_space/newGraphy/canvasFun.vue

@@ -31,7 +31,7 @@
       <i class="iconfont icon-narrow" @click="reduce"></i>
     </div>
     <div class="line">
-      <el-slider tooltip-class="tooltip-class" :min="0.004" v-model="sliderVal" :show-tooltip="false" @input="scale"></el-slider>
+      <el-slider tooltip-class="tooltip-class" :min="min" :max="maxScale" v-model="sliderVal" :show-tooltip="false" @input="scale"></el-slider>
     </div>
     <div>
       <i class="iconfont icon-zoom" @click="plus"></i>
@@ -42,8 +42,10 @@
 export default {
   data() {
     return {
-      sliderVal: 1, // 滑块值
-      active: ''
+      sliderVal: 0.004, // 滑块值
+      active: '',
+      min: 0.004,
+      maxScale: 1,
     }
   },
   props: {
@@ -85,9 +87,9 @@ export default {
     },
     // 减
     reduce() {
-      this.sliderVal -= 1;
-      if (this.sliderVal < 0.004) {
-        this.sliderVal = 0.004;
+      this.sliderVal /= 1.1;
+      if (this.sliderVal < this.min) {
+        this.sliderVal = this.min;
       }
       this.scale(this.sliderVal);
     },
@@ -97,23 +99,18 @@ export default {
     },
     // 加
     plus() {
-      this.sliderVal += 1;
-      if (this.sliderVal > 100) {
-        this.sliderVal = 100;
+      this.sliderVal *= 1.1;
+      if (this.sliderVal > this.maxScale) {
+        this.sliderVal = this.maxScale;
       }
       this.scale(this.sliderVal);
     }
-  },
-  watch: {
-    sliderVal(n, o) {
-      console.log(n)
-    }
   }
 }
 </script>
 <style lang="less" scoped>
 #canvas-actions-box {
-  min-width: 490px;
+  min-width: 542px;
   & > div {
     float: left;
     font-size: 20px;

+ 45 - 2
src/components/business_space/newGraphy/graphy.vue

@@ -7,7 +7,7 @@
       </div>
     </div>
     <div class="canvas-box" v-show="FloorMap">
-      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+      <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
       <!-- 初始两个按钮 -->
       <el-row class="buttons-box">
         <div>
@@ -51,7 +51,8 @@
       </el-row>
       <!-- 底部操作按钮 -->
       <el-row class="canvas-actions-box">
-        <canvasFun></canvasFun>
+        <canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
+          @redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
       </el-row>
     </div>
     <!--  -->
@@ -78,6 +79,7 @@ export default {
       search: '',//搜索
       num: 0, // 未关联空间的业务空间条数
       FloorMap: '',
+      isEdit: false
     }
   },
   computed: {
@@ -115,7 +117,48 @@ export default {
         this.num = res.Count
       })
     },
+    // 工具栏操作
+    // 移动底图
+    moveCanvas(move) {
+      // todo
+      let canvas = document.getElementById('floorCanvas');
+      if (move) {
+        canvas.style.cursor = 'move';
+      } else {
+        canvas.style.cursor = 'default';
+      }
+    },
+    // 适配底图到窗口
+    fit() {
+      this.view.fitSceneToView()
+    },
+    // 保存为png
+    savePng() {
+      this.view.saveImage(`${this.floor}.png`, 'png');
+    },
+    // 保存为svg
+    saveSvg() {
+      this.view.saveSceneSvg(`${this.floor}.png`, 6400, 4800);
+    },
+    // 切割划分
+    divide() {
+      this.drawMainScene.isMarking = true;
+    },
+    // 清除切割划分
+    clearDivide() {
+      this.drawMainScene.clearSceneMark()
+    },
+    // 撤销
+    undo() {
 
+    },
+    // 反撤销
+    redo() { },
+    // 缩放
+    scale(val) {
+      let scale = this.view.scale
+      this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
+    },
   },
   filters: {
     cutString: function (str, len) {

+ 1 - 1
src/router/system.js

@@ -99,7 +99,7 @@ export default [
             // { path: 'buildfloor', name: 'buildFloor', component: Dasboard, meta: { keepAlive: false, breadcrumbs: [{ label: '建筑楼层管理' }] } },
             { path: 'collectsetting', name: 'collectsetting', component: collectsetting, meta: { keepAlive: false, breadcrumbs: [{ label: '需采集的信息点' }] } },
             { path: 'appuser', name: 'buildUser', component: buildUser, meta: { keepAlive: false, breadcrumbs: [{ label: '扫楼App用户管理' }] } },
-            { path: 'buildfloor/repetitionGraphy', name: 'repetitionGraphy', component: repetitionGraphy, meta: { keepAlive: false, breadcrumbs: [{ label: '建筑楼层管理', path: '/ready/buildfloor' }, { label:'平面图维护' }] }}
+            { path: 'repetitionGraphy', name: 'repetitionGraphy', component: repetitionGraphy, meta: { keepAlive: false, breadcrumbs: [{ label: '建筑楼层管理', path: '/ready/buildfloor' }, { label:'平面图维护' }] }}
         ]
     },
     //模型管理

+ 9 - 12
src/views/ready/buildfloor/drawGraphy/checkGraphy.vue

@@ -9,7 +9,7 @@
       </div>
       <!-- 展示框 -->
       <div class="showBox">
-        <drawFloor ref="drawFloor" :showTools="false"></drawFloor>
+        <drawFloor ref="drawFloorDialog" :showTools="false" :id="0"></drawFloor>
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -32,12 +32,12 @@ export default {
   },
   data() {
     return {
-      casVal:[],
+      casVal: [],
       jsonKey: "", //map.josn
       checkGraphyVisible: false,
       options: [],
       floor: {}, // 当前选中的楼层数据
-      props:{}
+      props: {}
     };
   },
   methods: {
@@ -50,7 +50,7 @@ export default {
     handleClose() {
       this.checkGraphyVisible = false;
       this.casVal = []
-      this.$refs.drawFloor.clearGraphy()
+      this.$refs.drawFloorDialog.clearGraphy()
     },
     // 更新楼层 平面图文件
     bindGraphy() {
@@ -58,22 +58,19 @@ export default {
         this.$message.warning("请选择模型文件");
         return
       }
-      if (!this.floor.StructureInfo) {
-        this.floor.StructureInfo = {}
-      }
-      this.floor.StructureInfo.FloorMap = this.jsonKey
       let pa = {
-        Content: [this.floor]
+        Content: [{ FloorID: this.floor.FloorID, ModeId: this.jsonKey }],
+        Projection: ['ModeId']
       };
       floorUpdate(pa, res => {
-        this.$message.success("添加成功");
+        this.$message.success("更新成功");
         this.handleClose()
         this.$emit('refresh')
       });
     },
     // 点击多级联动
     handleChange(val) {
-      this.$refs.drawFloor.initGraphy(val[1])
+      this.$refs.drawFloorDialog.initGraphy(val[1])
       this.jsonKey = val[1]
     },
     // 通过id查询文件夹下模型文件
@@ -119,7 +116,7 @@ export default {
       });
     },
   },
-  created(){
+  created() {
     this.init()
   },
   watch: {

+ 62 - 45
src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="drawFloor" v-loading="canvasLoading">
-    <canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
+  <div :id="`drawFloor${id}`" class="drawFloor" v-loading="canvasLoading">
+    <canvas :id="`floorCanvas${id}`" :width="cadWidth" :height="cadHeight" ref="canvas" tabindex="0"></canvas>
     <div class="operate" v-if="showTools">
       <canvasFun @move="moveCanvas" @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo"
         @redo="redo" @scale="scale" :isEdit="isEdit" ref="canvasFun"></canvasFun>
@@ -12,7 +12,7 @@
 import eventBus from "./bus.js";
 import { SGraphyView } from "@sybotan-web/graphy/lib";
 import { DivideFloorScene } from "cad-engine"
-import { SColor } from "@sybotan-web/draw/lib";
+import { SColor, SPoint } from "@sybotan-web/draw/lib";
 import canvasFun from "@/components/business_space/newGraphy/canvasFun"
 export default {
   components: {
@@ -25,68 +25,87 @@ export default {
       dataKey: '',
       cadWidth: 800,
       cadHeight: 600,
-      canvasLoading: false
+      canvasLoading: false,
+      modelId: '',
+      FloorID: '',
+      Outline: [],
     };
   },
   props: {
     isEdit: {
       default: false
     },
-    showTools:{
+    showTools: {
       default: false
+    },
+    id: {
+      default: 0
     }
   },
+  created() {
+    this.modelId = this.$route.query.modelId;
+    this.FloorID = this.$route.query.FloorID;
+    this.Outline = this.$route.query.Outline || [];
+  },
   mounted() {
-    this.cadWidth = document.getElementById("drawFloor").offsetWidth;
-    this.cadHeight = document.getElementById("drawFloor").offsetHeight;
-    this.floor = this.$route.query.FloorID
+    this.cadWidth = document.getElementById(`drawFloor${this.id}`).offsetWidth;
+    this.cadHeight = document.getElementById(`drawFloor${this.id}`).offsetHeight;
   },
   methods: {
     initGraphy(ModelId) {
       let that = this;
-      this.view = new SGraphyView('floorCanvas')
+      that.clearGraphy()
+      let id = `floorCanvas${that.id}`;
+      console.log(id)
+      that.view = new SGraphyView(id)
       that.drawMainScene = new DivideFloorScene();
-      // that.drawMainScene.loadUrl(`/image-service/common/file_get/${ModelId}?systemId=revit`).then(res => {
-      //   that.view.scene = that.drawMainScene
-      //   that.view.fitSceneToView();
-      //   this.canvasLoading = false
-      // })
-      this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: '5fec5a64cedd11e994a0ad55e7095c26' }).then(res => {
+      that.canvasLoading = true;
+      that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
+        // let Elements = res.EntityList[0].Elements;
+        // let flag = false;
+        // for (let key in Elements) {
+        //   if (Elements[key].length > 0) {
+        //     flag = true;
+        //   }
+        // }
+        // if (flag) {
         that.view.scene = that.drawMainScene
         that.view.fitSceneToView();
-        this.canvasLoading = false
+        that.canvasLoading = false;
+        // that.view.maxScale = that.view.scale * 1000;
+        // that.$refs.canvasFun.maxScale = that.view.maxScale;
+        // if (that.Outline.length) {
+        //   let newArr = that.Outline.map(t => {
+        //     return new SPoint(t.X, t.Y);
+        //   })
+        //   that.drawMainScene.addSceneMark(newArr)
+        // }
+        // }
       })
     },
-    // 单个item 高亮
-    heightLightitem(item, highlightColor) {
-      // this.drawItemColor(item, highlightColor);
-    },
-    // 取消放大缩小
-    cancelScale(view) {
-      // view.wheelZoom = 1;
-    },
-    // 左键长按控制canvas的坐标
-    leftClickMove(a, b) {
-      //  console.log('move',a,b)
-    },
-    changeRatios(val) {
-      //计算缩放比例
-      this.view.scale = val;
-    },
+    // 清空平面图
     clearGraphy() {
-      if (this.drawMainScene) {
-        this.drawMainScene.root.children = null
+      if (this.view) {
+        this.drawMainScene.root.children = null;
         this.drawMainScene = null;
         this.view = null;
       }
     },
     // canvas 获取焦点
     focus() {
-      document.getElementById('floorCanvas').focus()
+      document.getElementById(`floorCanvas${this.id}`).focus()
     },
     // 工具栏操作
     // 移动底图
-    moveCanvas() { },
+    moveCanvas(move) {
+      // todo
+      let canvas = document.getElementById(`floorCanvas${this.id}`);
+      if (move) {
+        canvas.style.cursor = 'move';
+      } else {
+        canvas.style.cursor = 'default';
+      }
+    },
     // 适配底图到窗口
     fit() {
       this.view.fitSceneToView()
@@ -109,31 +128,29 @@ export default {
     },
     // 撤销
     undo() {
-      console.log(this.view)
-      console.log(this.drawMainScene)
+
     },
     // 反撤销
     redo() { },
     // 缩放
     scale(val) {
-      console.log(val)
-      this.view.scaleByPoint(val, this.cadWidth / 2, this.cadHeight / 2)
+      let scale = this.view.scale
+      this.view.scaleByPoint(val / scale, this.cadWidth / 2, this.cadHeight / 2)
     },
   },
   watch: {
     "view.scale": {
-      // deep: true,
       handler(n) {
-        // console.log(n)
-        // this.$refs.canvasFun.sliderVal = n;
-        console.log(this.$refs.canvasFun.sliderVal)
+        if (this.$refs.canvasFun) {
+          this.$refs.canvasFun.sliderVal = n;
+        }
       }
     }
   }
 };
 </script>
 <style scoped lang="less">
-#drawFloor {
+.drawFloor {
   width: 100%;
   height: 100%;
   position: relative;

+ 0 - 112
src/views/ready/buildfloor/drawGraphy/operateGraphyItem.vue

@@ -1,112 +0,0 @@
-<template>
-  <div id="operateGraphyItem">
-    <div class="div-box" @click="openDrag">
-      <i class="el-icon-rank"></i>
-    </div>
-    <div class="div-box" @click="suitableRatio">
-      <i class="el-icon-rank"></i>
-    </div>
-    <div class="div-box" @click="downImg">
-      <i class="el-icon-download"></i>
-    </div>
-    <div class="div-box" @click="removeRatio">
-      <i class="el-icon-remove-outline"></i>
-    </div>
-    <div class="line">
-      <el-slider tooltip-class="tooltip-class"  :max="0.02" :min="0.004" v-model="sliderValue" @change="adjustRatio"></el-slider>
-    </div>
-    <div class="div-box" @click="addRatio">
-      <i class="el-icon-circle-plus-outline"></i>
-    </div>
-  </div>
-</template>
-<script>
-import eventBus from "./bus.js";
-export default {
-  data() {
-    return {
-      sliderValue: 0.004,
-      isopenDrags:false ,//是否鼠标左键移动图片
-    };
-  },
-  methods: {
-    // 开启拖动
-    openDrag() {
-      this.isopenDrags = !this.isopenDrags;
-      eventBus.$emit('openDrags',this.isopenDrags)
-    },
-    //合适比例
-    suitableRatio() {
-      eventBus.$emit("suitableRatios");
-    },
-    // 滑块调整比例
-    adjustRatio(val) {
-      this.sliderValue = val;
-      eventBus.$emit("changeRatios", this.sliderValue);
-    },
-    //增加比例
-    addRatio() {
-      if (this.sliderValue >= 0.02) {
-        this.sliderValue = 0.02;
-      } else {
-        this.sliderValue = this.sliderValue + 0.001;
-      }
-      eventBus.$emit("changeRatios", this.sliderValue);
-    },
-    //减少比例
-    removeRatio() {
-      if (this.sliderValue <=0.004) {
-        this.sliderValue = 0.004;
-      } else {
-        this.sliderValue = this.sliderValue - 0.001;
-      }
-      eventBus.$emit("changeRatios", this.sliderValue);
-    },
-    // 下载图片
-    downImg(){
-      eventBus.$emit("downImgs");
-    }
-  },
-  mounted() {
-    let that = this;
-     eventBus.$on('viewScale',function(scale){
-       console.log(scale,'scalescale')
-       that.sliderValue = scale;
-
-     })
-  },
-};
-</script>
-<style lang="less">
-#operateGraphyItem {
-  display: flex;
-  position: relative;
-  border: 1px #ddd solid;
-  border-radius: 5px;
-  overflow: hidden;
-  z-index: 999;
-  .div-box {
-    font-size: 24px;
-    width: 40px;
-    height: 40px;
-    background: #67c23a;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    cursor: pointer;
-    border-right: 1px #ddd solid;
-  }
-  .line {
-    width: 200px;
-    font-size: 12px;
-    display: block;
-    background: #67c23a;
-    border-right: 1px #ddd solid;
-    .tooltip-class {
-      width: 100%;
-      background-color: #409eff;
-    }
-  }
-}
-</style>

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

@@ -38,7 +38,7 @@
             </el-table-column>
             <el-table-column prop="Datasource" label="平面图">
               <template slot-scope="scope">
-                <p v-if="scope.row.StructureInfo&&scope.row.StructureInfo.FloorMap" @click="checkDrawImg(scope.row,1)">
+                <p v-if="scope.row.ModeId" @click="checkDrawImg(scope.row,1)">
                   <i class="iconfont icon-floorplan"></i>
                   查看平面图
                 </p>
@@ -114,11 +114,7 @@ export default {
         lineHeight: "30px"
       },
       buildList: [],
-      tableData: [
-        {
-          EquipmentMark: 1
-        }
-      ],
+      tableData: [],
       page: {
         pageSize: 500,
         pageSizes: [10, 20, 50, 100],
@@ -240,8 +236,12 @@ export default {
         this.$refs.checkGraphy.showDialog(row)
         this.modelId = "";
       } else {
-        this.modelId = row.StructureInfo.FloorMap;
-        this.$router.push({ name: "repetitionGraphy", query: { modelId: this.modelId, FloorID: row.FloorID } });
+        this.modelId = row.ModeId;
+        let pa = { modelId: this.modelId, FloorID: row.FloorID }
+        if (row.Outline && row.Outline.length) {
+          pa.Outline = row.Outline;
+        }
+        this.$router.push({ name: "repetitionGraphy", query: pa });
       }
     }
   },

+ 20 - 14
src/views/ready/buildfloor/repetitionGraphy.vue

@@ -10,15 +10,16 @@
     </div>
     <!-- 展示图片 -->
     <div class="drawImg">
-      <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true"></drawFloor>
+      <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true" :id="1"></drawFloor>
     </div>
     <!-- 查看图片弹窗 -->
-    <checkGraphy></checkGraphy>
+    <checkGraphy ref="checkGraphy" @refresh="refresh"></checkGraphy>
   </div>
 </template>
 <script>
 import drawFloor from "./drawGraphy/drawFloor";
 import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
+import { floorUpdate } from "@/api/scan/request";
 export default {
   components: {
     drawFloor,
@@ -31,20 +32,24 @@ export default {
     };
   },
   created() {
+    this.modelId = this.$route.query.modelId;
+    this.FloorID = this.$route.query.FloorID;
+    this.Outline = this.$route.query.Outline || [];
+  },
+  mounted() {
+    this.$refs.drawFloor.initGraphy(this.modelId)
   },
   methods: {
     // 返回路由
     backRouter() {
-      this.$router.go(-1);
+      this.$router.push({ name: 'buildFloor' })
     },
     // 替换模型文件
     changeGraphy() {
-      // todo
-      console.log(this.$refs.drawFloor.drawMainScene.grabItem.outLine)
+      this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID })
     },
     // 确认保存
     confirm() {
-      // todo
       let grabitem = this.$refs.drawFloor.drawMainScene.grabItem;
       if (!grabitem || grabitem.outLine.length < 3) {
         this.$message.warning('请添加轮廓线');
@@ -55,8 +60,13 @@ export default {
         this.$refs.drawFloor.focus();
         return;
       }
-      console.log(this.$refs.drawFloor.drawMainScene.grabItem.closeFlag)
-      console.log(this.$refs.drawFloor.drawMainScene.grabItem.outLine)
+      let pa = {
+        Content: [{ FloorID: this.FloorID, Outline: this.$refs.drawFloor.drawMainScene.grabItem.outLine }],
+        Projection: ['Outline']
+      }
+      floorUpdate(pa, res => {
+        this.$message.success("更新成功");
+      })
     },
     // 取消
     cancel() {
@@ -66,12 +76,8 @@ export default {
     // 编辑平面图
     editGraphy() {
       this.isEdit = true;
-
-    }
-  },
-  mounted() {
-    this.modelId = this.$route.query.modelId
-    this.$refs.drawFloor.initGraphy(this.modelId)
+    },
+    refresh() { }
   },
 };
 </script>