123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <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>
- <!-- 展示图片 -->
- <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'
- 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
- if (this.modelId.split('.')[1].toString() == 'png' || this.modelId.split('.')[1].toString() == 'jpg') {
- return
- } else {
- 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})
- },
- // 确认保存
- 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: [{id: 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 _this = this
- let floorParam = {
- PageSize: 1000,
- Filters: `buildingId='${this.BuildID}'`,
- }
- floorQueryAndSign(floorParam, (res) => {
- this.alreadyRelatedModel = res.content.map((t) => {
- if (t.id != _this.FloorID) return t.modelId
- this.sign = t.sign > 0
- this.FloorName = t.localName
- this.$refs.drawFloor.buildFloorName = `${this.name}-${this.localName}`
- }).filter((t) => t)
- })
- },
- changeSign(flag) {
- this.otherSign = flag
- },
- },
- 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)
- }
- }
- },
- },
- }
- </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);
- }
- }
- </style>
|