暂无图片的时候上传图片

src/views/ready/buildfloor/drawGraphy/checkGraphy.vue

@@ -1,157 +1,224 @@
 <template>
-  <el-dialog id="checkGraphy" title="添加平面图" :visible.sync="checkGraphyVisible" width="900px" @close="handleClose">
-    <div class="bodys">
-      <el-cascader :options="options" :show-all-levels="false" @change="handleChange" @active-item-change='handleItemChange' clearable
-        placeholder="请选择模型文件" v-model="casVal"></el-cascader>
-      <div>
-        或
-        <el-button type="text">上传图片</el-button>
-      </div>
-      <!-- 展示框 -->
-      <div class="showBox">
-        <drawFloor ref="drawFloorDialog" :showTools="false" :id="0" :dialog="true"></drawFloor>
-      </div>
-    </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="handleClose">取 消</el-button>
-      <el-button type="primary" @click="bindGraphy">确 定</el-button>
-    </span>
-  </el-dialog>
+    <el-dialog id='checkGraphy' title='添加平面图' :visible.sync='checkGraphyVisible' width='900px' @close='handleClose'>
+        <div class='bodys'>
+            <el-cascader
+                :options='options'
+                :show-all-levels='false'
+                @change='handleChange'
+                @active-item-change='handleItemChange'
+                clearable
+                placeholder='请选择模型文件'
+                v-model='casVal'
+            ></el-cascader>
+            <span>
+                &nbsp;&nbsp;或&nbsp;&nbsp;
+                <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>
+            <!-- 展示框 -->
+            <div class='showBox'>
+                <drawFloor ref='drawFloorDialog' :showTools='false' :id='0' :dialog='true'></drawFloor>
+            </div>
+        </div>
+        <span slot='footer' class='dialog-footer'>
+            <el-button @click='handleClose'>取 消</el-button>
+            <el-button type='primary' @click='bindGraphy'>确 定</el-button>
+        </span>
+    </el-dialog>
 </template>
 <script>
-  import drawFloor from "./drawFloor";
-  import {mapGetters} from "vuex";
-  import request from "@/api/model/file.js";
-  import {bindFloorModel} from "@/api/model/file";
-
-  export default {
+import drawFloor from './drawFloor'
+import { mapGetters } from 'vuex'
+import request from '@/api/model/file.js'
+import { bindFloorModel } from '@/api/model/file'
+import { manageUpdateFloor } from '@/api/scan/request'
+export default {
     components: {
-      drawFloor
+        drawFloor,
     },
     computed: {
-      ...mapGetters("layout", ["projectId"])
+        ...mapGetters('layout', ['projectId']),
     },
     props: {
-      alreadyRelatedModel: {
-        default: []
-      }
+        alreadyRelatedModel: {
+            default: [],
+        },
     },
     data() {
-      return {
-        casVal: [],
-        jsonKey: "", //map.josn
-        checkGraphyVisible: false,
-        options: [],
-        floor: {}, // 当前选中的楼层数据
-        modelIdToFloorId: {}
-      };
+        return {
+            casVal: [],
+            jsonKey: '', //map.josn
+            checkGraphyVisible: false,
+            options: [],
+            floor: {}, // 当前选中的楼层数据
+            modelIdToFloorId: {},
+            key: '',
+        }
     },
     methods: {
-      // 弹窗显示
-      showDialog(floor) {
-        this.floor = floor;
-        this.checkGraphyVisible = true;
-      },
-      // 关闭弹窗
-      handleClose() {
-        this.checkGraphyVisible = false;
-        this.casVal = []
-        this.$refs.drawFloorDialog.clearGraphy()
-      },
-      // 更新楼层 平面图文件
-      bindGraphy() {
-        if (!this.jsonKey) {
-          this.$message.warning("请选择模型文件");
-          return
-        }
-        if (this.alreadyRelatedModel.indexOf(this.modelIdToFloorId[this.jsonKey]) > -1) {
-          this.$message.warning('此模型已关联该建筑下的楼层');
-          return;
-        }
-        let pa = {
-          FloorId: this.floor.FloorID,
-          Id: this.modelIdToFloorId[this.jsonKey],
-          BuildingId: this.floor.BuildID,
-          Cover: true
-        };
-        bindFloorModel(pa, res => {
-          this.$message.success("更新成功");
-          this.handleClose()
-          this.$emit('refresh', this.jsonKey)
-        });
-      },
-      // 点击多级联动
-      handleChange(val) {
-        this.$refs.drawFloorDialog.initGraphy(val[1], 1)
-        this.jsonKey = val[1]
-      },
-      // 通过id查询文件夹下模型文件
-      handleItemChange(val) {
-        let data = {
-          FolderId: val[0],
-          Status: '4',
-          ProjectId: this.projectId
-        };
-        request.queryFloorList(data, res => {
-          let tempArr = res.Content.map(t => {
-            this.modelIdToFloorId[t.CurrentModelId] = t.Id;
-            return {
-              value: t.CurrentModelId,
-              label: t.FloorName
+        // 弹窗显示
+        showDialog(floor) {
+            this.floor = floor
+            this.checkGraphyVisible = true
+        },
+        // 关闭弹窗
+        handleClose() {
+            this.checkGraphyVisible = false
+            this.casVal = []
+            this.$refs.drawFloorDialog.clearGraphy()
+        },
+        //上传图片
+        uploadAndSubmit(item) {
+            let file = item.file
+            console.log(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=' + file.uid + '.' + 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.jsonKey = ''
+                                vm.$refs.drawFloorDialog.initGraphy(vm.key, 3)
+                                //vm.$emit("getKey", file.uid + '.' + type, vm.keyName);
+                            }
+                        }
+                    }
+                }
+            }
+            reader.readAsArrayBuffer(file)
+        },
+        // 更新楼层 平面图文件
+        bindGraphy() {
+            if (!this.jsonKey && !this.key) {
+                this.$message.warning('请选择模型文件')
+                return
+            }
+            if (this.alreadyRelatedModel.indexOf(this.modelIdToFloorId[this.jsonKey]) > -1) {
+                this.$message.warning('此模型已关联该建筑下的楼层')
+                return
+            }
+            let pa = {
+                FloorId: this.floor.FloorID,
+                BuildingId: this.floor.BuildID,
+                Cover: true,
+            }
+            if (this.jsonKey) {
+                pa.Id = this.modelIdToFloorId[this.jsonKey]
+                bindFloorModel(pa, (res) => {
+                    this.$message.success('更新成功')
+                    this.handleClose()
+                    this.$emit('refresh', this.jsonKey)
+                })
             }
-          })
-          console.log(tempArr,'tempArr')
-          this.pushChild(this.options, tempArr, val[0])
-        })
-      },
-      // 将模型文件list填到相应的文件夹下
-      pushChild(options, arr, Code) {
-        options.map(option => {
-          if (option.value == Code) {
-            option.children = arr;
-          } else {
-            if (option.children) {
-              this.pushChild(option.children, arr, Code)
+            if (this.key) {
+                let Param = {
+                    Content: [{ FloorId: this.floor.FloorID, StructureInfo: { FloorMap: this.key } }],
+                    Projection: ['FloorMap'],
+                }
+                manageUpdateFloor(Param, (res) => {
+                    this.$message.success('更新成功')
+                    this.handleClose()
+                    this.$emit('refresh', this.key)
+                })
             }
-          }
-        })
-      },
-      init() {
-        this.getDirectory()
-      },
-      // 获取文件夹
-      getDirectory() {
-        request.queryModel("", res => {
-          this.options = res.Content.map(t => {
-            return {
-              value: t.Id,
-              label: t.Name,
-              children: []
+        },
+        // 点击多级联动
+        handleChange(val) {
+            this.$refs.drawFloorDialog.initGraphy(val[1], 1)
+            this.jsonKey = val[1]
+            this.key = ''
+        },
+        // 通过id查询文件夹下模型文件
+        handleItemChange(val) {
+            let data = {
+                FolderId: val[0],
+                Status: '4',
+                ProjectId: this.projectId,
             }
-          })
-        });
-      },
+            request.queryFloorList(data, (res) => {
+                let tempArr = res.Content.map((t) => {
+                    this.modelIdToFloorId[t.CurrentModelId] = t.Id
+                    return {
+                        value: t.CurrentModelId,
+                        label: t.FloorName,
+                    }
+                })
+                console.log(tempArr, 'tempArr')
+                this.pushChild(this.options, tempArr, val[0])
+            })
+        },
+        // 将模型文件list填到相应的文件夹下
+        pushChild(options, arr, Code) {
+            options.map((option) => {
+                if (option.value == Code) {
+                    option.children = arr
+                } else {
+                    if (option.children) {
+                        this.pushChild(option.children, arr, Code)
+                    }
+                }
+            })
+        },
+        init() {
+            this.getDirectory()
+        },
+        // 获取文件夹
+        getDirectory() {
+            request.queryModel('', (res) => {
+                this.options = res.Content.map((t) => {
+                    return {
+                        value: t.Id,
+                        label: t.Name,
+                        children: [],
+                    }
+                })
+            })
+        },
     },
     created() {
-      this.init()
+        this.init()
     },
     watch: {
-      projectId() {
-        this.init()
-      }
-    }
-  };
+        projectId() {
+            this.init()
+        },
+    },
+}
 </script>
 <style lang="less">
 #checkGraphy {
-  .bodys {
-    .showBox {
-      box-sizing: border-box;
-      width: 100%;
-      height: 300px;
-      border: 1px #ccc solid;
-      padding: 10px;
+    .bodys {
+        .upload-demo {
+            display: inline-block;
+        }
+        .showBox {
+            box-sizing: border-box;
+            width: 100%;
+            height: 300px;
+            border: 1px #ccc solid;
+            padding: 10px;
+            margin-top: 20px;
+        }
     }
-  }
 }
 </style>

src/views/ready/buildfloor/drawGraphy/drawFloor.vue

@@ -89,10 +89,15 @@ export default {
         that.drawMainScene.getFloorData('/modelapi/base-graph/query', { ModelId: Id }).then(res => {
           that.getGraphtSuc(res)
         })
-      } else {
+      } 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=>{
+        // fdfd
+          that.getGraphtSuc(res)
+      })
       }
 
     },
@@ -132,7 +137,12 @@ export default {
       floorQueryOutline(pa, res => {
         this.floorData = res.Content[0];
         this.getOtherFloorOutLine();
-        this.initGraphy(this.floorData.StructureInfo.FloorMap, 2)
+        let floorMap = this.floorData.StructureInfo.FloorMap
+        if(floorMap.split('.')[1].toString() == 'png' || floorMap.split('.')[1].toString() == 'jpg'){
+           this.initGraphy(floorMap, 3)
+        }else{
+           this.initGraphy(floorMap, 2)
+        }
       })
     },
     // 获取绑定该模型id的其他楼层轮廓线

src/views/ready/buildfloor/index.vue

@@ -408,6 +408,10 @@
         if (3 == index) {
           this.$refs.checkGraphy.showDialog(row);
           this.modelId = "";
+        } else if(index ==1){
+            this.modelId = row.StructureInfo.FloorMap
+            let pa = {modelId: this.modelId, FloorID: row.FloorID, BuildID: row.BuildID, BuildName: this.curBuildName};
+            this.$router.push({name: "repetitionGraphy", query: pa});
         } else {
           this.modelId = row.ModelId;
           let pa = {modelId: this.modelId, FloorID: row.FloorID, BuildID: row.BuildID, BuildName: this.curBuildName};
@@ -423,7 +427,6 @@
           PageSize: 500
         };
         objectQueryBuild(param, res => {
-
           this.currentBuildList = res.Content
         });
       },

src/views/ready/buildfloor/repetitionGraphy.vue

@@ -1,157 +1,168 @@
 <template>
-  <!-- 查看平面图页面 -->
-  <div id="repetitionGraphy">
-    <div class="buttons">
-      <el-button icon="el-icon-back" size="mini" @click="backRouter"></el-button>
-      <el-button v-if="!isEdit" size="mini" @click="changeGraphy">替换平面图</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>
-      <span style="float:right;" v-if="file.FolderName">当前对应的模型文件：{{file.FolderName}} - {{file.FloorName}}</span>
+    <!-- 查看平面图页面 -->
+    <div id='repetitionGraphy'>
+        <div class='buttons'>
+            <el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
+            <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>替换平面图</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>
+            <span style='float:right;' v-if='file.FolderName'>当前对应的模型文件：{{file.FolderName}} - {{file.FloorName}}</span>
+        </div>
+        <!-- 展示图片 -->
+        <div class='drawImg'>
+            <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign'></drawFloor>
+        </div>
+        <!-- 查看图片弹窗 -->
+        <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
     </div>
-    <!-- 展示图片 -->
-    <div class="drawImg">
-      <drawFloor ref="drawFloor" :isEdit="isEdit" :showTools="true" :id="1" @changeSign="changeSign"></drawFloor>
-    </div>
-    <!-- 查看图片弹窗 -->
-    <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 drawFloor from './drawGraphy/drawFloor'
+import checkGraphy from './drawGraphy/checkGraphy' //查看图片
+import { floorUpdateOutline, floorQueryAndSign } from '@/api/scan/request'
+import { getFileNameById } from '@/api/model/file'
 export default {
-  components: {
-    drawFloor,
-    checkGraphy
-  },
-  data() {
-    return {
-      modelId: "", //
-      isEdit: false, // 是否编辑模式
-      file: {},
-      alreadyRelatedModel: [],
-      sign: false,
-      otherSign: false
-    };
-  },
-  created() {
-    this.modelId = this.$route.query.modelId;
-    this.FloorID = this.$route.query.FloorID;
-    this.BuildID = this.$route.query.BuildID;
-    this.BuildName = this.$route.query.BuildName;
-    this.init();
-  },
-  mounted() { },
-  methods: {
-    init() {
-      this.getFileName(this.modelId)
-      this.getFloorData()
-    },
-    // 返回路由
-    backRouter() {
-      this.$router.push({ name: 'buildFloor' })
-    },
-    // 替换模型文件
-    changeGraphy() {
-      this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
+    components: {
+        drawFloor,
+        checkGraphy,
     },
-    // 确认保存
-    confirm() {
-      let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark, Outline = null;
-      if (sceneMark) {
-        if (sceneMark.outLine.length < 3) {
-          this.$message.warning('请添加轮廓线');
-          return;
+    data() {
+        return {
+            modelId: '', //
+            isEdit: false, // 是否编辑模式
+            file: {},
+            alreadyRelatedModel: [],
+            sign: false,
+            otherSign: false,
         }
-        if (!sceneMark.closeFlag) {
-          this.$message.warning('请按回车闭合轮廓线');
-          this.$refs.drawFloor.focus();
-          return;
-        }
-        Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
-        Outline = Outline.map(t => {
-          return {
-            x: t.x.toFixed(2),
-            y: -t.y.toFixed(2),
-          }
-        })
-      }
-      let pa = {
-        Content: [{ FloorID: this.FloorID, Outline: Outline }],
-        Projection: ['Outline']
-      }
-      floorUpdateOutline(pa, res => {
-        this.isEdit = false;
-        this.$message.success("更新成功");
-      })
-    },
-    // 取消
-    cancel() {
-      this.isEdit = false;
-      this.$refs.drawFloor.init();
-    },
-    // 编辑平面图
-    editGraphy() {
-      this.isEdit = true;
     },
-    // 替换模型文件成功
-    refresh(modelId) {
-      this.modelId = modelId;
-      this.getFileName(this.modelId)
+    created() {
+        this.modelId = this.$route.query.modelId
+        this.FloorID = this.$route.query.FloorID
+        this.BuildID = this.$route.query.BuildID
+        this.BuildName = this.$route.query.BuildName
+        if (this.modelId.split('.')[1].toString() == 'png' || this.modelId.split('.')[1].toString() == 'jpg') {
+          return
+        }else{
+           this.init()
+        }
+       
     },
-    // 获取文件夹名称
-    getFileName(modelId) {
-      if (!modelId) return
-      let pa = {
-        Id: modelId
-      }
-      getFileNameById(pa, res => {
-        this.file = res;
-      })
+    mounted() {},
+    methods: {
+        init() {
+            this.getFileName(this.modelId)
+            this.getFloorData()
+        },
+        // 返回路由
+        backRouter() {
+            this.$router.push({ name: 'buildFloor' })
+        },
+        // 替换模型文件
+        changeGraphy() {
+            this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
+        },
+        // 确认保存
+        confirm() {
+            let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark,
+                Outline = null
+            if (sceneMark) {
+                if (sceneMark.outLine.length < 3) {
+                    this.$message.warning('请添加轮廓线')
+                    return
+                }
+                if (!sceneMark.closeFlag) {
+                    this.$message.warning('请按回车闭合轮廓线')
+                    this.$refs.drawFloor.focus()
+                    return
+                }
+                Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
+                Outline = Outline.map((t) => {
+                    return {
+                        x: t.x.toFixed(2),
+                        y: -t.y.toFixed(2),
+                    }
+                })
+            }
+            let pa = {
+                Content: [{ FloorID: this.FloorID, Outline: Outline }],
+                Projection: ['Outline'],
+            }
+            floorUpdateOutline(pa, (res) => {
+                this.isEdit = false
+                this.$message.success('更新成功')
+            })
+        },
+        // 取消
+        cancel() {
+            this.isEdit = false
+            this.$refs.drawFloor.init()
+        },
+        // 编辑平面图
+        editGraphy() {
+            this.isEdit = true
+        },
+        // 替换模型文件成功
+        refresh(modelId) {
+            this.modelId = modelId
+            this.getFileName(this.modelId)
+        },
+        // 获取文件夹名称
+        getFileName(modelId) {
+            if (!modelId) return
+            let pa = {
+                Id: modelId,
+            }
+            getFileNameById(pa, (res) => {
+                this.file = res
+            })
+        },
+        // 获取楼层
+        getFloorData() {
+            let floorParam = {
+                PageSize: 1000,
+                Filters: `BuildID='${this.BuildID}'`,
+            }
+            floorQueryAndSign(floorParam, (res) => {
+                this.alreadyRelatedModel = res.Content.map((t) => {
+                    if (t.FloorID != this.FloorID) return t.ModelId
+                    this.sign = t.Sign > 0
+                    this.FloorName = t.FloorLocalName || t.FloorName
+                    this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
+                }).filter((t) => t)
+            })
+        },
+        changeSign(flag) {
+            this.otherSign = flag
+        },
     },
-    // 获取楼层
-    getFloorData() {
-      let floorParam = {
-        PageSize: 1000,
-        Filters: `BuildID='${this.BuildID}'`
-      };
-      floorQueryAndSign(floorParam, res => {
-        this.alreadyRelatedModel = res.Content.map(t => {
-          if (t.FloorID != this.FloorID) return t.ModelId
-          this.sign = t.Sign > 0
-          this.FloorName = t.FloorLocalName || t.FloorName
-          this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
-        }).filter(t => t);
-      });
+    watch: {
+        modelId(n, o) {
+            if (o && n != o) {
+                console.log(n.split('.')[1])
+                if (n.split('.')[1].toString() == 'png' || n.split('.')[1].toString() == 'jpg') {
+                    this.$refs.drawFloor.initGraphy(n, 3)
+                } else {
+                    this.$refs.drawFloor.initGraphy(n, 1)
+                }
+            }
+        },
     },
-    changeSign(flag) {
-      this.otherSign = flag
-    }
-  },
-  watch: {
-    modelId(n, o) {
-      if (o && n != o) {
-        this.$refs.drawFloor.initGraphy(n, 1);
-      }
-    }
-  }
-};
+}
 </script>
 <style lang="less">
 #repetitionGraphy {
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  position: relative;
-  padding: 10px;
-  box-sizing: border-box;
-  .drawImg {
     width: 100%;
-    margin-top: 10px;
-    height: calc(100% - 40px);
-  }
+    height: 100%;
+    background: #fff;
+    position: relative;
+    padding: 10px;
+    box-sizing: border-box;
+    .drawImg {
+        width: 100%;
+        margin-top: 10px;
+        height: calc(100% - 40px);
+    }
 }
 </style>