Browse Source

buildfloor:feat:上传图片与弹窗分离,步骤条

haojianlong 4 years ago
parent
commit
0b9f3eecf9

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

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog id='checkGraphy' title='添加平面图' :visible.sync='checkGraphyVisible' width='900px' @close='handleClose'>
+    <el-dialog id='checkGraphy' title='添加平面图' :visible.sync='checkGraphyVisible' width='500px' @close='handleClose'>
         <div class='bodys'>
             <el-cascader
                 :options='options'
@@ -9,18 +9,17 @@
                 clearable
                 placeholder='请选择模型文件'
                 v-model='casVal'
-                v-if="hasModel"
             ></el-cascader>
-            <span v-else>
+            <!-- <span v-else>
                 <el-upload class='upload-demo' action='string' :http-request='uploadAndSubmit' :show-file-list='false'>
                     <el-button type>上传图片</el-button>
                 </el-upload>
                 <span>(支持jpg,png格式)</span>
-            </span>
+            </span> -->
             <!-- 展示框 -->
-            <div class='showBox'>
+            <!-- <div class='showBox'>
                 <drawFloor ref='drawFloorDialog' :showTools='false' :id='0' :dialog='true'></drawFloor>
-            </div>
+            </div> -->
         </div>
         <span slot='footer' class='dialog-footer'>
             <el-button @click='handleClose'>取 消</el-button>
@@ -32,7 +31,7 @@
 import drawFloor from './drawFloor'
 import { mapGetters } from 'vuex'
 import request from '@/api/model/file.js'
-import { bindFloorModel, countModel } from '@/api/model/file'
+import { bindFloorModel } from '@/api/model/file'
 import { manageUpdateFloor } from '@/api/scan/request'
 export default {
     components: {
@@ -55,7 +54,6 @@ export default {
             floor: {}, // 当前选中的楼层数据
             modelIdToFloorId: {},
             key: '',
-            hasModel: false, // 当前项目是否有模型文件
         }
     },
     methods: {
@@ -68,7 +66,7 @@ export default {
         handleClose() {
             this.checkGraphyVisible = false
             this.casVal = []
-            this.$refs.drawFloorDialog.clearGraphy()
+            // this.$refs.drawFloorDialog.clearGraphy()
         },
         //上传图片
         uploadAndSubmit(item) {
@@ -99,7 +97,7 @@ export default {
                             if (xhr.status == 200) {
                                 vm.key = uploadKey + '.' + type
                                 vm.jsonKey = ''
-                                vm.$refs.drawFloorDialog.initGraphy(vm.key, 3)
+                                // vm.$refs.drawFloorDialog.initGraphy(vm.key, 3)
                                 //vm.$emit("getKey", file.uid + '.' + type, vm.keyName);
                             }
                         }
@@ -145,7 +143,7 @@ export default {
         },
         // 点击多级联动
         handleChange(val) {
-            this.$refs.drawFloorDialog.initGraphy(val[1], 1)
+            // this.$refs.drawFloorDialog.initGraphy(val[1], 1)
             this.jsonKey = val[1]
             this.key = ''
         },
@@ -182,7 +180,6 @@ export default {
         },
         init() {
             this.getDirectory()
-            this.getCountModel()
         },
         // 获取文件夹
         getDirectory() {
@@ -196,13 +193,6 @@ export default {
                 })
             })
         },
-        // 统计项目下是否有模型文件
-        getCountModel(){
-            countModel({}, res => {
-                this.hasModel = res.Count > 0
-                this.$emit('hasModel', this.hasModel)
-            })
-        }
     },
     created() {
         this.init()

+ 7 - 13
src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -2,7 +2,7 @@
   <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 @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @undo="undo" @redo="redo" @scale="scale"
+      <canvasFun @fit="fit" @savePng="savePng" @saveSvg="saveSvg" @divide="divide" @clearDivide="clearDivide" @scale="scale"
         @changeAbsorb="changeAbsorb" :config="config" ref="canvasFun" @saveJson="saveJson"></canvasFun>
     </div>
   </div>
@@ -90,12 +90,12 @@ export default {
         that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: Id }).then(res => {
           that.getGraphtSuc(res)
         })
-      } else if(type==2) {
+      } else if (type == 2) {
         that.drawMainScene.loadUrl(`/image-service/common/file_get?systemId=revit&key=${Id}`).then(res => {
           that.getGraphtSuc(res)
         })
-      } else if(type == 3) {
-        that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, res=>{
+      } else if (type == 3) {
+        that.drawMainScene.loadImg(`/image-service/common/image_get?systemId=dataPlatform&key=${Id}`, res => {
           console.log('imgimg');
           that.getGraphtSuc(res)
         })
@@ -140,10 +140,10 @@ export default {
         if (this.floorData.StructureInfo && this.floorData.StructureInfo.FloorMap) {
           this.getOtherFloorOutLine();
           let floorMap = this.floorData.StructureInfo.FloorMap
-          if (floorMap.split('.')[1].toString() == 'png' || floorMap.split('.')[1].toString() == 'jpg') {
-             this.initGraphy(floorMap, 3)
+          if (floorMap.split('.')[1] == 'png' || floorMap.split('.')[1] == 'jpg') {
+            this.initGraphy(floorMap, 3)
           } else {
-             this.initGraphy(floorMap, 2)
+            this.initGraphy(floorMap, 2)
           }
         } else {
 
@@ -212,12 +212,6 @@ export default {
     changeAbsorb(isAbsorbing) {
       this.drawMainScene.isAbsorbing = isAbsorbing;
     },
-    // 撤销
-    undo() {
-
-    },
-    // 反撤销
-    redo() { },
     // 缩放
     scale(val) {
       if (!this.view) {

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

@@ -3,11 +3,14 @@
     <div id='repetitionGraphy'>
         <div class='buttons'>
             <el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
-            <template v-if="!hasGraph">
-                <el-button size='mini' @click='changeGraphy'>{{hasModel?'关联模型文件':'上传平面图图片'}}</el-button>
+            <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>
+                <el-button v-if='step>-1' style='float:right;' size='mini' type='primary' @click="nextStep">{{step==0?'下一步':step==1?'保存':''}}</el-button>
             </template>
             <template v-else>
-                <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>替换平面图</el-button>
+                <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>{{hasGraph?'关联模型文件':'替换模型文件'}}</el-button>
                 <el-button v-if='(sign||otherSign)&&!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>
@@ -16,8 +19,14 @@
         </div>
         <!-- 展示图片 -->
         <div class='drawImg'>
-            <div style="width: 100%;height: 100%" v-if="hasGraph">
+            <div style="width: 100%;height: 100%;position: relative;" v-if="hasGraph">
                 <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign'></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-steps>
+                </div>
             </div>
             <div style="width: 100%;height: 100%" v-else>
                 <div class="center" style="padding-top: 300px">
@@ -26,14 +35,14 @@
             </div>
         </div>
         <!-- 查看图片弹窗 -->
-        <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel' @hasModel="getCount"></checkGraphy>
+        <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
     </div>
 </template>
 <script>
 import drawFloor from './drawGraphy/drawFloor'
 import checkGraphy from './drawGraphy/checkGraphy' //查看图片
-import { floorUpdateOutline, floorQueryAndSign } from '@/api/scan/request'
-import { getFileNameById } from '@/api/model/file'
+import { floorUpdateOutline, floorQueryAndSign, manageUpdateFloor } from '@/api/scan/request'
+import { getFileNameById, countModel } from '@/api/model/file'
 export default {
     components: {
         drawFloor,
@@ -49,6 +58,7 @@ export default {
             otherSign: false,
             hasGraph: false, // 当前楼层是否有平面图
             hasModel: false, // 项目中时候有模型文件
+            step: -1, // 当前处于第几步
         }
     },
     created() {
@@ -60,13 +70,12 @@ export default {
             this.hasGraph = true;
             const temp = this.modelId.split('.');
             if (temp[1] == 'png' || temp[1] == 'jpg') {
-                return
+                // return
             } else {
                 this.init()
             }
-        } else {
-            this.hasGraph = false;
         }
+        this.getCountModel()
     },
     mounted() {},
     methods: {
@@ -80,7 +89,7 @@ export default {
         },
         // 替换模型文件
         changeGraphy() {
-            this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
+            this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID }) 
         },
         // 确认保存
         confirm() {
@@ -159,20 +168,87 @@ export default {
         changeSign(flag) {
             this.otherSign = flag
         },
-        // 当前项目中是否有模型文件
-        getCount(flag) {
-            this.hasModel = flag;
-        }
+        // 统计项目下是否有模型文件
+        getCountModel(){
+            countModel({}, res => {
+                this.hasModel = res.Count > 0
+            })
+        },
+        //上传图片
+        uploadAndSubmit(item) {
+            let file = item.file
+            let reader = new FileReader()
+            let vm = this
+            let fileType = file.name.split('.')
+            let type = fileType[fileType.length - 1]
+            let uploadKey = file.uid
+            reader.onloadend = function () {
+                // 这个事件在读取结束后,无论成功或者失败都会触发
+                if (reader.error) {
+                } else {
+                    // document.getElementById("bytesRead").textContent = file.size;
+                    // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
+                    var xhr = new XMLHttpRequest()
+                    xhr.open(
+                        /* method */ 'POST',
+                        /* target url */
+                        '/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=' + uploadKey + '.' + type
+                        /*, async, default to true */
+                    )
+                    //xhr.overrideMimeType("application/octet-stream");
+                    xhr.send(reader.result)
+                    xhr.onreadystatechange = function () {
+                        if (xhr.readyState == 4) {
+                            if (xhr.status == 200) {
+                                vm.key = uploadKey + '.' + type
+                                // 将图片展示
+                                vm.refresh(uploadKey + '.' + type)
+                                // 设置步骤为第一步
+                                vm.step = 0;
+                            }
+                        }
+                    }
+                }
+            }
+            reader.readAsArrayBuffer(file)
+        },
+        // 更新楼层key 为图片
+        updateFloorKey(){
+            let Param = {
+                Content: [{ FloorId: this.FloorID, StructureInfo: { FloorMap: this.key } }],
+                Projection: ['FloorMap'],
+            }
+            manageUpdateFloor(Param, (res) => {
+                this.$message.success('更新成功')
+                this.step = -1;
+            })
+        },
+        // 根据modelid初始化
+        initFromModelId(id){
+            if (id.split('.')[1] == 'png' || id.split('.')[1] == 'jpg') {
+                this.$refs.drawFloor.initGraphy(id, 3)
+            } else {
+                this.$refs.drawFloor.initGraphy(id, 1)
+            }
+        },
+        // 下一步||保存
+        nextStep() {
+            // 下一步
+            if (this.step == 0) {
+                this.step = 1
+            } else if (this.step == 1) {
+                // 保存
+                this.updateFloorKey();
+            }
+        },
     },
     watch: {
         modelId(n, o) {
             if (n != o) {
                 if (n) {
-                    if (n.split('.')[1] == 'png' || n.split('.')[1] == 'jpg') {
-                        this.$refs.drawFloor.initGraphy(n, 3)
-                    } else {
-                        this.$refs.drawFloor.initGraphy(n, 1)
-                    }
+                    this.$nextTick(()=>{
+                        this.initFromModelId(n)
+                    })
                 }
             }
         },
@@ -192,5 +268,17 @@ export default {
         margin-top: 10px;
         height: calc(100% - 40px);
     }
+    .upload-demo {
+        display: inline-block;
+    }
+    .stepContainer {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        margin-left: -50%;
+        z-index: 9;
+        background-color: #fff;
+    }
 }
 </style>