Browse Source

比例尺添加;保存位置

haojianlong 4 years ago
parent
commit
95ac4f52cf

+ 58 - 0
src/components/ready/buildfloor/setScaleDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-dialog title="设定比例尺" :visible.sync="dialogVis" width="500px" id="scaleDialog" :close-on-click-modal='false'>
+    <el-row>
+      <div style="line-height:32px;">设定比例尺长度 : </div>
+      <div style="width:70%">
+        <el-input v-model="scaleInput" placeholder="设定比例尺">
+          <template slot="append">mm</template>
+        </el-input>
+      </div>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="dialogVis=false">取消</el-button>
+      <el-button size="small" type="primary" @click="confirm">确认</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import { createRelationInFloor } from "@/api/scan/request";
+export default {
+  data() {
+    return {
+      dialogVis: false,
+      scaleInput: '',
+      item: '', // 当前修改的item
+    }
+  },
+  methods: {
+    showDialog(v) {
+      this.dialogVis = true
+      this.item = v;
+      this.scaleInput = v.text.substring(0, v.text.length - 3);
+    },
+    confirm() {
+      this.item.text = this.scaleInput + ' mm';
+      this.dialogVis = false
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+#scaleDialog {
+  .el-row{
+    height: 50px;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .el-row > div {
+    float: left;
+  }
+  .el-row > div + div {
+    margin-left: 10px;
+  }
+  /deep/ .el-input__inner {
+    vertical-align: baseline;
+  }
+}
+</style>

+ 2 - 0
src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -117,6 +117,8 @@ export default {
       this.view.fitSceneToView();
       this.drawMainScene.isSpaceSelectable = false;
 
+      this.$emit('getGraphSuc');
+
       if (this.$refs.canvasFun) {
         this.view.minScale = this.view.scale;
         this.$refs.canvasFun.everyScale = this.view.scale;

+ 119 - 7
src/views/ready/buildfloor/repetitionGraphy.vue

@@ -3,7 +3,7 @@
     <div id='repetitionGraphy'>
         <div class='buttons'>
             <el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
-            <template v-if="!hasModel">
+            <template v-if="!!hasModel">
                 <el-upload class='upload-demo' action='string' :http-request='uploadAndSubmit' :show-file-list='false' v-if="step==-1">
                     <el-button size="mini">{{hasGraph?'替换平面图图片':'上传平面图图片'}}</el-button>
                 </el-upload>
@@ -20,13 +20,19 @@
         <!-- 展示图片 -->
         <div class='drawImg'>
             <div style="width: 100%;height: 100%;position: relative;" v-if="hasGraph">
-                <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign'></drawFloor>
+                <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign' @getGraphSuc="getGraphSuc"></drawFloor>
                 <div class="stepContainer" v-if="step>-1">
                     <el-steps :active="step" align-center finish-status="success" process-status="process">
-                        <el-step title="设定比例尺"></el-step>
-                        <el-step title="楼层对齐"></el-step>
+                        <el-step title="设定比例尺" :description="stepDes[0]"></el-step>
+                        <el-step title="楼层对齐" :description="stepDes[1]"></el-step>
                     </el-steps>
                 </div>
+                <ul class="floorList" v-if="step==1">
+                    <li style="border-bottom:1px solid #ccc;text-align: center;padding: 0">选择对齐楼层</li>
+                    <li v-for="t in floorList" :key="t.FloorID">
+                        <el-radio v-model="floorRadio" :label="t" @change="changeFloor" :disabled="t.FloorID == FloorID">{{t.FloorLocalID || t.FloorLocalName}}</el-radio>
+                    </li>
+                </ul>
             </div>
             <div style="width: 100%;height: 100%" v-else>
                 <div class="center" style="padding-top: 300px">
@@ -36,22 +42,30 @@
         </div>
         <!-- 查看图片弹窗 -->
         <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
+        <!-- 设定比例尺弹窗 -->
+        <setScaleDialog ref="setScaleDialog"></setScaleDialog>
     </div>
 </template>
 <script>
 import drawFloor from './drawGraphy/drawFloor'
 import checkGraphy from './drawGraphy/checkGraphy' //查看图片
+import setScaleDialog from '@/components/ready/buildfloor/setScaleDialog'
 import { floorUpdateOutline, floorQueryAndSign, manageUpdateFloor } from '@/api/scan/request'
 import { getFileNameById, countModel } from '@/api/model/file'
+import { EditLineItem, SItemStatus, SImageShowType, IconTextItem} from "@saga-web/cad-engine"
+import { SColor } from "@saga-web/draw"
+import { SImageItem } from '@saga-web/graph/lib'
 export default {
     components: {
         drawFloor,
         checkGraphy,
+        setScaleDialog
     },
     data() {
         return {
             modelId: '', //
             isEdit: false, // 是否编辑模式
+            FloorID: '',
             file: {},
             alreadyRelatedModel: [],
             sign: false,
@@ -59,6 +73,17 @@ export default {
             hasGraph: false, // 当前楼层是否有平面图
             hasModel: false, // 项目中时候有模型文件
             step: -1, // 当前处于第几步
+            key: '', // 当楼层图为图片时图的key
+            stepDes: [
+                '请在图上点击两点绘制线段并标记实际长度',
+                '请移动图片与其他楼层对齐'
+            ], // 描述文字
+            floorList: [], // 当前建筑下所有楼层
+            floorRadio: '', // 
+            imgService: `/image-service/common/image_get?systemId=dataPlatform&key=`,
+            curImgItem: null, // 对齐的楼层图片
+            scaleItem: null, // 比例尺item
+            baseImgItem: null, // 当前楼层图的图片
         }
     },
     created() {
@@ -137,6 +162,7 @@ export default {
             this.hasGraph = true;
             const temp = this.modelId.split('.');
             if (temp[1] && temp[1] != 'png' && temp[1] != 'jpg') {
+                this.key = '';
                 this.getFileName(this.modelId)
             }
         },
@@ -155,8 +181,12 @@ export default {
             let floorParam = {
                 PageSize: 1000,
                 Filters: `BuildID='${this.BuildID}'`,
+                Orders: 'FloorSequenceID desc'
             }
             floorQueryAndSign(floorParam, (res) => {
+                this.floorList = res.Content;
+                // todo
+                this.floorRadio = res.Content[0];
                 this.alreadyRelatedModel = res.Content.map((t) => {
                     if (t.FloorID != this.FloorID) return t.ModelId
                     this.sign = t.Sign > 0
@@ -215,8 +245,17 @@ export default {
         // 更新楼层key 为图片
         updateFloorKey(){
             let Param = {
-                Content: [{ FloorId: this.FloorID, StructureInfo: { FloorMap: this.key } }],
-                Projection: ['FloorMap'],
+                Content: [{
+                    FloorId: this.FloorID,
+                    StructureInfo: { FloorMap: this.key },
+                    Properties: {
+                        X: this.baseImgItem.x, 
+                        Y: this.baseImgItem.y,
+                        line: this.scaleItem.line,
+                        Scale: this.scaleItem
+                    }
+                }],
+                Projection: ['FloorMap', 'Properties'],
             }
             manageUpdateFloor(Param, (res) => {
                 this.$message.success('更新成功')
@@ -233,14 +272,70 @@ export default {
         },
         // 下一步||保存
         nextStep() {
+            this.baseImgItem = this.$refs.drawFloor.drawMainScene.imgList[0]
+            this.baseImgItem.globalAlpha = 0.2
+            this.baseImgItem.moveable = true;
             // 下一步
             if (this.step == 0) {
-                this.step = 1
+                this.step = 1;
+                this.scaleItem.hide();
+                // 
+                this.getFloorData()
             } else if (this.step == 1) {
                 // 保存
                 this.updateFloorKey();
             }
         },
+        //  比例尺
+        setScale() {
+            this.scaleItem = new EditLineItem(null)
+            this.$refs.drawFloor.drawMainScene.addItem(this.scaleItem)
+            this.scaleItem.connect('changText', this, this.changeText)
+            this.scaleItem.strokeColor = SColor.Red;
+            this.scaleItem.status = SItemStatus.Create;
+            this.$refs.drawFloor.drawMainScene.grabItem = this.scaleItem;
+            this.scaleItem.moveable = true;
+        },
+        // 加载图成功
+        getGraphSuc() {
+            if (this.key) {
+                this.setScale();
+            }
+        },
+        // 修改比例尺文字
+        changeText(t, e) {
+            this.$refs.setScaleDialog.showDialog(t)
+        },
+        // 第二部楼层修改
+        changeFloor(v) {
+            this.removeLast();
+            if (v.StructureInfo && v.StructureInfo.FloorMap) {
+                const url = this.imgService + v.StructureInfo.FloorMap
+                this.curImgItem = new SImageItem(null, url);
+                this.curImgItem.globalAlpha = 0.2;
+                this.curImgItem.showType = SImageShowType.AutoFit;
+                if (v.Properties) {
+                    try {
+                        // 计算比例尺- todo
+                        this.curImgItem.showType == SImageShowType.Full;
+                        this.curImgItem.moveTo(v.Properties.x, v.Properties.y);
+                        this.curImgItem.width = v.Properties.width;
+                        this.curImgItem.height = v.Properties.height;
+                    } catch (err) {
+                        console.log(err);
+                    }
+                }
+                this.$refs.drawFloor.drawMainScene.addItem(this.curImgItem);
+                this.$refs.drawFloor.view.fitSceneToView()
+            }
+        },
+        // 清除上一张底图
+        removeLast() {
+            if (this.curImgItem) {
+                this.$refs.drawFloor.drawMainScene.removeItem(this.curImgItem);
+                this.curImgItem = null;
+            }
+        }
     },
     watch: {
         modelId(n, o) {
@@ -280,5 +375,22 @@ export default {
         z-index: 9;
         background-color: #fff;
     }
+    .floorList {
+        position: absolute;
+        width: 100px;
+        max-height: 250px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        left: 40px;
+        top: 200px;
+        z-index: 10;
+        background: #fff;
+        border: 1px solid #ccc;
+        li {
+            box-sizing: border-box;
+            padding: 0 10px;
+            width: 100%;
+        }
+    }
 }
 </style>