Browse Source

modify buildfloor

haojianlong 5 years ago
parent
commit
f515631ea2

+ 4 - 4
package.json

@@ -10,9 +10,9 @@
         "build": "node build/build.js"
     },
     "dependencies": {
-        "@sybotan-web/base": "2.0.54",
-        "@sybotan-web/draw": "2.0.128",
-        "@sybotan-web/graphy": "2.0.93",
+        "@sybotan-web/base": "2.1.2",
+        "@sybotan-web/draw": "2.1.40",
+        "@sybotan-web/graphy": "2.1.13",
         "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.176"
+        "cad-engine": "2.0.182"
     },
     "devDependencies": {
         "ajv": "^6.9.1",

+ 104 - 18
src/components/business_space/newGraphy/canvasFun.vue

@@ -1,42 +1,112 @@
 <template>
-  <el-row id="canvas-actions-box">
-    <div class="active">
-      <i class="iconfont icon-move"></i>
+  <el-row id="canvas-actions-box" :class="{'isEdit':isEdit}">
+    <div :class="{'active':active=='move'}">
+      <i class="iconfont icon-move" @click="moveCanvas"></i>
     </div>
     <div>
-      <i class="iconfont icon-maximize"></i>
+      <i class="iconfont icon-maximize" @click="fitToWindow"></i>
     </div>
     <div>
-      <el-dropdown size="mini" placement="top-start">
+      <el-dropdown size="mini" placement="top-start" @command="handleCommand">
         <i class="el-icon-download" style="font-size:20px;color:#fff;"></i>
         <el-dropdown-menu slot='dropdown'>
-          <el-dropdown-item>保存为png</el-dropdown-item>
-          <el-dropdown-item>保存为svg</el-dropdown-item>
+          <el-dropdown-item command="savePng">保存为png</el-dropdown-item>
+          <el-dropdown-item command="saveSvg">保存为svg</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-    <div>
-      <i class="iconfont icon-edit1"></i>
+    <div v-if="isEdit" :class="{'active':active=='divide'}">
+      <i class="iconfont icon-edit1" @click="divide"></i>
     </div>
-    <div>
-      <i class="iconfont icon-Erase"></i>
+    <div v-if="isEdit">
+      <i class="iconfont icon-Erase" @click="clearDivide"></i>
     </div>
-    <div>
-      <i class="iconfont icon-Cancel"></i>
+    <div v-if="isEdit">
+      <i class="iconfont icon-Cancel" @click="undo"></i>
+    </div>
+    <div v-if="isEdit">
+      <i class="iconfont icon-Anti-cancel" @click="redo"></i>
     </div>
     <div>
-      <i class="iconfont icon-Anti-cancel"></i>
+      <i class="iconfont icon-narrow" @click="reduce"></i>
     </div>
     <div class="line">
-      <el-slider tooltip-class="tooltip-class" v-model="sliderVal" :show-tooltip="false"></el-slider>
+      <el-slider tooltip-class="tooltip-class" :min="0.004" v-model="sliderVal" :show-tooltip="false" @input="scale"></el-slider>
+    </div>
+    <div>
+      <i class="iconfont icon-zoom" @click="plus"></i>
     </div>
   </el-row>
 </template>
 <script>
 export default {
-  data(){
-    return{
-      sliderVal: '', // 滑块值
+  data() {
+    return {
+      sliderVal: 1, // 滑块值
+      active: ''
+    }
+  },
+  props: {
+    isEdit: {
+      default: false
+    }
+  },
+  methods: {
+    // 移动画布
+    moveCanvas() {
+      this.active = this.active != "move" ? "move" : '';
+      this.$emit('move', this.active == 'move');
+    },
+    // 适配大小
+    fitToWindow() {
+      this.$emit('fit');
+    },
+    // 下拉菜单
+    handleCommand(command) {
+      this.$emit(command)
+    },
+    // 切割编辑
+    divide() {
+      this.active = 'divide';
+      this.$emit('divide');
+    },
+    // 清除编辑
+    clearDivide() {
+      this.active = '';
+      this.$emit('clearDivide');
+    },
+    // 撤销
+    undo() {
+      this.$emit('undo');
+    },
+    // 反撤销
+    redo() {
+      this.$emit('redo');
+    },
+    // 减
+    reduce() {
+      this.sliderVal -= 1;
+      if (this.sliderVal < 0.004) {
+        this.sliderVal = 0.004;
+      }
+      this.scale(this.sliderVal);
+    },
+    // 缩放
+    scale(val) {
+      this.$emit('scale', val);
+    },
+    // 加
+    plus() {
+      this.sliderVal += 1;
+      if (this.sliderVal > 100) {
+        this.sliderVal = 100;
+      }
+      this.scale(this.sliderVal);
+    }
+  },
+  watch: {
+    sliderVal(n, o) {
+      console.log(n)
     }
   }
 }
@@ -50,13 +120,29 @@ export default {
     padding: 0 10px;
     color: #fff;
     background-color: #6da60f;
+    i {
+      cursor: pointer;
+    }
   }
   & > div.active {
     background-color: #4b7902;
   }
+  &.isEdit > div {
+    background-color: #02a7f0;
+  }
+  &.isEdit > div.active {
+    background-color: #027db4;
+  }
   & > div.line {
     width: 200px;
     height: 40px;
+    padding: 0;
+    /deep/.el-slider__runway {
+      margin: 17px 0;
+      .el-slider__bar {
+        background-color: #fff;
+      }
+    }
   }
 }
 </style>

+ 2 - 2
src/router/system.js

@@ -95,8 +95,8 @@ export default [
         name: 'LayoutMain',
         component: LayoutMain,
         children: [
-            // { path: 'buildfloor', name: 'buildFloor', component: buildFloor, meta: { keepAlive: false, breadcrumbs: [{ label: '建筑楼层管理' }] } },
-            { path: 'buildfloor', name: 'buildFloor', component: Dasboard, meta: { keepAlive: false, breadcrumbs: [{ label: '建筑楼层管理' }] } },
+            { path: 'buildfloor', name: 'buildFloor', component: buildFloor, meta: { keepAlive: false, breadcrumbs: [{ label: '建筑楼层管理' }] } },
+            // { 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:'平面图维护' }] }}

+ 2 - 1
src/views/ready/buildfloor/drawGraphy/checkGraphy.vue

@@ -9,7 +9,7 @@
       </div>
       <!-- 展示框 -->
       <div class="showBox">
-        <drawFloor ref="drawFloor"></drawFloor>
+        <drawFloor ref="drawFloor" :showTools="false"></drawFloor>
       </div>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -37,6 +37,7 @@ export default {
       checkGraphyVisible: false,
       options: [],
       floor: {}, // 当前选中的楼层数据
+      props:{}
     };
   },
   methods: {

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

@@ -1,15 +1,23 @@
 <template>
   <div id="drawFloor" v-loading="canvasLoading">
-    <canvas id="floorCanvas" :width="cadWidth" :height="cadHeight" ref="canvas"></canvas>
+    <canvas id="floorCanvas" :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>
+    </div>
   </div>
 </template>
 
 <script>
 import eventBus from "./bus.js";
 import { SGraphyView } from "@sybotan-web/graphy/lib";
-import { FloorScene } from "cad-engine";
+import { DivideFloorScene } from "cad-engine"
 import { SColor } from "@sybotan-web/draw/lib";
+import canvasFun from "@/components/business_space/newGraphy/canvasFun"
 export default {
+  components: {
+    canvasFun
+  },
   data() {
     return {
       drawMainScene: null,
@@ -20,61 +28,34 @@ export default {
       canvasLoading: false
     };
   },
+  props: {
+    isEdit: {
+      default: false
+    },
+    showTools:{
+      default: false
+    }
+  },
   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.cadWidth = document.getElementById("drawFloor").offsetWidth;
     this.cadHeight = document.getElementById("drawFloor").offsetHeight;
+    this.floor = this.$route.query.FloorID
   },
   methods: {
-    clickItem(item) {
-      this.$emit("clickGraphyItem", item);
-    },
-    // 单个个体绘制颜色
-    drawItemColor(item, color) {
-      item.fillColor = new SColor(color); //需要缓存的边框
-      item.cacheFillColor = new SColor(color); //需要
-    },
-    // 绘制所有的item
-    drawAllItemColor() {
-      this.drawMainScene.root.children.forEach((item, index) => {
-        let color = this.initColor[index % 10];
-        this.drawItemColor(item, color);
-      });
-    },
     initGraphy(ModelId) {
-      this.dataKey = ModelId
-      if (!this.dataKey) {
-        return;
-      }
-      this.canvasLoading = true
-      this.clearGraphy()
-      // 初始化view类
-      this.view = new SGraphyView("floorCanvas");
-      this.drawMainScene = new FloorScene(null);
       let that = this;
-      this.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: ModelId }).then(res => {
+      this.view = new SGraphyView('floorCanvas')
+      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.view.scene = that.drawMainScene
         that.view.fitSceneToView();
         this.canvasLoading = false
       })
-      if (this.isScale) {
-        this.cancelScale(this.view);
-      }
     },
     // 单个item 高亮
     heightLightitem(item, highlightColor) {
@@ -93,17 +74,59 @@ export default {
       this.view.scale = val;
     },
     clearGraphy() {
-      if(this.drawMainScene){
+      if (this.drawMainScene) {
         this.drawMainScene.root.children = null
         this.drawMainScene = null;
         this.view = null;
       }
-    }
+    },
+    // canvas 获取焦点
+    focus() {
+      document.getElementById('floorCanvas').focus()
+    },
+    // 工具栏操作
+    // 移动底图
+    moveCanvas() { },
+    // 适配底图到窗口
+    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() {
+      console.log(this.view)
+      console.log(this.drawMainScene)
+    },
+    // 反撤销
+    redo() { },
+    // 缩放
+    scale(val) {
+      console.log(val)
+      this.view.scaleByPoint(val, this.cadWidth / 2, this.cadHeight / 2)
+    },
   },
   watch: {
-    findGraphyItemId(n) {
-      if (n) {
-        this.heightLightitem();
+    "view.scale": {
+      // deep: true,
+      handler(n) {
+        // console.log(n)
+        // this.$refs.canvasFun.sliderVal = n;
+        console.log(this.$refs.canvasFun.sliderVal)
       }
     }
   }
@@ -114,5 +137,12 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
+  .operate {
+    position: absolute;
+    left: 50%;
+    bottom: 20px;
+    transform: translateX(-50%);
+    z-index: 99;
+  }
 }
 </style>

+ 0 - 60
src/views/ready/buildfloor/drawGraphy/repetitionGraphy.vue

@@ -1,60 +0,0 @@
-<template>
-  <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>
-        <el-button size="mini">替换平面图</el-button>
-        <el-button size="mini">编辑平面图</el-button>
-      </div>
-      <!-- 展示图片 -->
-      <div class="drawImg">
-        <drawFloor ref="drawFloor" :findGraphyItemId="findGraphyItemId" :point="point" :pointWidth="pointWidth" :cadWidth="1000" :cadHeight="500"
-          :isScale="true"></drawFloor>
-      </div>
-    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-    </span>
-  </el-dialog>
-</template>
-<script>
-import drawFloor from "./drawFloor";
-export default {
-  components: {
-    drawFloor
-  },
-  props: {
-    repetitionGraphyVisible: Boolean
-  },
-  data() {
-    return {
-      modelId: "04153a22ce3111e9b1c7318645437bfe", // key
-      point: [40703.54760591985, 42678.14510522981], //坐标
-      pointWidth: 2000,
-      findGraphyItemId: "" //高亮的id
-    };
-  },
-  methods: {
-    handleClose() {
-      this.$emit("closeRepeatVisible");
-    }
-  },
-  mounted(){
-    // this.modelId = this.$router.query.modelId
-    console.log(22222)
-    let modelId = this.modelId
-    this.$refs.drawFloor.initGraphy(modelId)
-  }
-};
-</script>
-<style lang="less">
-#checkdrawimg {
-  .drawImg {
-    width: 100%;
-    height: 500px;
-    margin-top: 12px;
-    border: 1px solid #ccc;
-  }
-}
-</style>

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

@@ -38,16 +38,16 @@
             </el-table-column>
             <el-table-column prop="Datasource" label="平面图">
               <template slot-scope="scope">
-                <p v-if="scope.row.StructureInfo&&scope.row.StructureInfo.FloorMap" @click="checfDrawImg(scope.row,1)">
+                <p v-if="scope.row.StructureInfo&&scope.row.StructureInfo.FloorMap" @click="checkDrawImg(scope.row,1)">
                   <i class="iconfont icon-floorplan"></i>
                   查看平面图
                 </p>
-                <p v-else-if="scope.row.type==2" @click="checfDrawImg(scope.row,2)">
+                <p v-else-if="scope.row.type==2" @click="checkDrawImg(scope.row,2)">
                   <el-badge is-dot>
                     <i class="iconfont icon-floorplan"></i>
                   </el-badge>平面图重复
                 </p>
-                <p v-else @click="checfDrawImg(scope.row,3)">
+                <p v-else @click="checkDrawImg(scope.row,3)">
                   <i class="iconfont icon-nopicture"></i>
                   暂无平面图
                 </p>
@@ -235,13 +235,13 @@ export default {
       this.$refs.addConnectivity.floor = row;
     },
     // 查看平面图
-    checfDrawImg(row, index) {
+    checkDrawImg(row, index) {
       if (3 == index) {
         this.$refs.checkGraphy.showDialog(row)
         this.modelId = "";
       } else {
         this.modelId = row.StructureInfo.FloorMap;
-        this.$router.push({ name: "repetitionGraphy", query: { modelId: this.modelId } });
+        this.$router.push({ name: "repetitionGraphy", query: { modelId: this.modelId, FloorID: row.FloorID } });
       }
     }
   },

+ 41 - 31
src/views/ready/buildfloor/repetitionGraphy.vue

@@ -3,59 +3,75 @@
   <div id="repetitionGraphy">
     <div class="buttons">
       <el-button icon="el-icon-back" size="mini" @click="backRouter"></el-button>
-      <el-button size="mini" @click="changeGraphy">替换平面图</el-button>
-      <el-button size="mini">编辑平面图</el-button>
+      <el-button v-if="!isEdit" size="mini" @click="changeGraphy">替换平面图</el-button>
+      <el-button v-if="!isEdit" size="mini" @click="editGraphy">编辑平面图</el-button>
+      <el-button v-if="isEdit" size="mini" @click="cancel">取消</el-button>
+      <el-button v-if="isEdit" size="mini" @click="confirm" type="primary">确认</el-button>
     </div>
     <!-- 展示图片 -->
     <div class="drawImg">
-      <drawFloor ref="drawFloor"></drawFloor>
+      <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true"></drawFloor>
     </div>
     <!-- 查看图片弹窗 -->
-    <checkGraphy :checkGraphyVisible="checkGraphyVisible" @handleCloseCGraphy="checkGraphyVisible=false"></checkGraphy>
-    <div id="operateList">
-      <operateGraphyItem></operateGraphyItem>
-    </div>
+    <checkGraphy></checkGraphy>
   </div>
 </template>
 <script>
 import drawFloor from "./drawGraphy/drawFloor";
 import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
-import operateGraphyItem from "./drawGraphy/operateGraphyItem" //各个item
 export default {
   components: {
     drawFloor,
-    checkGraphy,
-    operateGraphyItem
+    checkGraphy
   },
   data() {
     return {
-      checkGraphyVisible: false, //查看平面图弹窗
-      modelId: "04153a22ce3111e9b1c7318645437bfe", // key
-      point: [40703.54760591985, 42678.14510522981], //坐标
-      pointWidth: 2000,
-      findGraphyItemId: "", //高亮的id
-      slidervalue: 0
+      modelId: "", // 
+      isEdit: false, // 是否编辑模式
     };
   },
+  created() {
+  },
   methods: {
-    handleClose() {
-      this.$emit("closeRepeatVisible");
-    },
     // 返回路由
     backRouter() {
       this.$router.go(-1);
     },
     // 替换模型文件
     changeGraphy() {
-      this.checkGraphyVisible = true;
+      // todo
+      console.log(this.$refs.drawFloor.drawMainScene.grabItem.outLine)
     },
+    // 确认保存
+    confirm() {
+      // todo
+      let grabitem = this.$refs.drawFloor.drawMainScene.grabItem;
+      if (!grabitem || grabitem.outLine.length < 3) {
+        this.$message.warning('请添加轮廓线');
+        return;
+      }
+      if (!grabitem.closeFlag) {
+        this.$message.warning('请按回车闭合轮廓线');
+        this.$refs.drawFloor.focus();
+        return;
+      }
+      console.log(this.$refs.drawFloor.drawMainScene.grabItem.closeFlag)
+      console.log(this.$refs.drawFloor.drawMainScene.grabItem.outLine)
+    },
+    // 取消
+    cancel() {
+      this.isEdit = false;
+      this.$refs.drawFloor.clearDivide();
+    },
+    // 编辑平面图
+    editGraphy() {
+      this.isEdit = true;
+
+    }
   },
   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)
+    this.modelId = this.$route.query.modelId
+    this.$refs.drawFloor.initGraphy(this.modelId)
   },
 };
 </script>
@@ -72,11 +88,5 @@ export default {
     margin-top: 10px;
     height: calc(100% - 40px);
   }
-  #operateList {
-    position: absolute;
-    left: 50%;
-    bottom: 100px;
-    // margin-left:
-  }
 }
 </style>