repetitionGraphy.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <!-- 查看平面图页面 -->
  3. <div id='repetitionGraphy'>
  4. <div class='buttons'>
  5. <el-button icon='el-icon-back' size='mini' @click='backRouter'></el-button>
  6. <el-button v-if='!isEdit' size='mini' @click='changeGraphy'>替换平面图</el-button>
  7. <el-button v-if='(sign||otherSign)&&!isEdit' size='mini' @click='editGraphy'>编辑平面图</el-button>
  8. <el-button v-if='isEdit' size='mini' @click='cancel'>取消</el-button>
  9. <el-button v-if='isEdit' size='mini' @click='confirm' type='primary'>确认</el-button>
  10. <span style='float:right;' v-if='file.folderName'>当前对应的模型文件:{{ file.folderName }} - {{ file.floorName }}</span>
  11. </div>
  12. <!-- 展示图片 -->
  13. <div class='drawImg'>
  14. <drawFloor ref='drawFloor' :isEdit='isEdit' :showTools='true' :id='1' @changeSign='changeSign'></drawFloor>
  15. </div>
  16. <!-- 查看图片弹窗 -->
  17. <checkGraphy ref='checkGraphy' @refresh='refresh' :alreadyRelatedModel='alreadyRelatedModel'></checkGraphy>
  18. </div>
  19. </template>
  20. <script>
  21. import drawFloor from './drawGraphy/drawFloor'
  22. import checkGraphy from './drawGraphy/checkGraphy' //查看图片
  23. import {floorUpdateOutline, floorQueryAndSign} from '@/api/scan/request'
  24. import {getFileNameById} from '@/api/model/file'
  25. export default {
  26. components: {
  27. drawFloor,
  28. checkGraphy,
  29. },
  30. data() {
  31. return {
  32. modelId: '', //
  33. isEdit: false, // 是否编辑模式
  34. file: {},
  35. alreadyRelatedModel: [],
  36. sign: false,
  37. otherSign: false,
  38. }
  39. },
  40. created() {
  41. this.modelId = this.$route.query.modelId
  42. this.FloorID = this.$route.query.FloorID
  43. this.BuildID = this.$route.query.BuildID
  44. this.BuildName = this.$route.query.BuildName
  45. if (this.modelId.split('.')[1].toString() == 'png' || this.modelId.split('.')[1].toString() == 'jpg') {
  46. return
  47. } else {
  48. this.init()
  49. }
  50. },
  51. mounted() {
  52. },
  53. methods: {
  54. init() {
  55. this.getFileName(this.modelId)
  56. this.getFloorData()
  57. },
  58. // 返回路由
  59. backRouter() {
  60. this.$router.push({name: 'buildFloor'})
  61. },
  62. // 替换模型文件
  63. changeGraphy() {
  64. this.$refs.checkGraphy.showDialog({FloorID: this.FloorID, BuildID: this.BuildID})
  65. },
  66. // 确认保存
  67. confirm() {
  68. let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark,
  69. Outline = null
  70. if (sceneMark) {
  71. if (sceneMark.outLine.length < 3) {
  72. this.$message.warning('请添加轮廓线')
  73. return
  74. }
  75. if (!sceneMark.closeFlag) {
  76. this.$message.warning('请按回车闭合轮廓线')
  77. this.$refs.drawFloor.focus()
  78. return
  79. }
  80. Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
  81. Outline = Outline.map((t) => {
  82. return {
  83. x: t.x.toFixed(2),
  84. y: -t.y.toFixed(2),
  85. }
  86. })
  87. }
  88. let pa = {
  89. content: [{id: this.FloorID, outline: Outline}],
  90. Projection: ['outline'],
  91. }
  92. floorUpdateOutline(pa, (res) => {
  93. this.isEdit = false
  94. this.$message.success('更新成功')
  95. })
  96. },
  97. // 取消
  98. cancel() {
  99. this.isEdit = false
  100. this.$refs.drawFloor.init()
  101. },
  102. // 编辑平面图
  103. editGraphy() {
  104. this.isEdit = true
  105. },
  106. // 替换模型文件成功
  107. refresh(modelId) {
  108. this.modelId = modelId
  109. this.getFileName(this.modelId)
  110. },
  111. // 获取文件夹名称
  112. getFileName(modelId) {
  113. if (!modelId) return
  114. let pa = {
  115. id: modelId,
  116. }
  117. getFileNameById(pa, (res) => {
  118. this.file = res
  119. })
  120. },
  121. // 获取楼层
  122. getFloorData() {
  123. let _this = this
  124. let floorParam = {
  125. PageSize: 1000,
  126. Filters: `buildingId='${this.BuildID}'`,
  127. }
  128. floorQueryAndSign(floorParam, (res) => {
  129. this.alreadyRelatedModel = res.content.map((t) => {
  130. if (t.id != _this.FloorID) return t.modelId
  131. this.sign = t.sign > 0
  132. this.FloorName = t.localName
  133. this.$refs.drawFloor.buildFloorName = `${this.name}-${this.localName}`
  134. }).filter((t) => t)
  135. })
  136. },
  137. changeSign(flag) {
  138. this.otherSign = flag
  139. },
  140. },
  141. watch: {
  142. modelId(n, o) {
  143. if (o && n != o) {
  144. console.log(n.split('.')[1])
  145. if (n.split('.')[1].toString() == 'png' || n.split('.')[1].toString() == 'jpg') {
  146. this.$refs.drawFloor.initGraphy(n, 3)
  147. } else {
  148. this.$refs.drawFloor.initGraphy(n, 1)
  149. }
  150. }
  151. },
  152. },
  153. }
  154. </script>
  155. <style lang="less">
  156. #repetitionGraphy {
  157. width: 100%;
  158. height: 100%;
  159. background: #fff;
  160. position: relative;
  161. padding: 10px;
  162. box-sizing: border-box;
  163. .drawImg {
  164. width: 100%;
  165. margin-top: 10px;
  166. height: calc(100% - 40px);
  167. }
  168. }
  169. </style>