|
@@ -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>
|
|
|
+ 或
|
|
|
+ <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, this.modelIdToFloorId[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>
|