123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- <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>
- <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'
- import { manageUpdateFloor } from '@/api/scan/request'
- export default {
- components: {
- drawFloor,
- },
- computed: {
- ...mapGetters('layout', ['projectId']),
- },
- props: {
- alreadyRelatedModel: {
- default: [],
- },
- },
- data() {
- 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()
- },
- //上传图片
- 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)
- })
- }
- 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)
- })
- }
- },
- // 点击多级联动
- 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()
- },
- watch: {
- projectId() {
- this.init()
- },
- },
- }
- </script>
- <style lang="less">
- #checkGraphy {
- .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>
|