repetitionGraphy.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  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. this.init();
  46. },
  47. mounted() { },
  48. methods: {
  49. init() {
  50. this.getFileName(this.modelId)
  51. this.getFloorData()
  52. },
  53. // 返回路由
  54. backRouter() {
  55. this.$router.push({ name: 'buildFloor' })
  56. },
  57. // 替换模型文件
  58. changeGraphy() {
  59. this.$refs.checkGraphy.showDialog({ FloorID: this.FloorID, BuildID: this.BuildID })
  60. },
  61. // 确认保存
  62. confirm() {
  63. let sceneMark = this.$refs.drawFloor.drawMainScene.sceneMark, Outline = null;
  64. if (sceneMark) {
  65. if (sceneMark.outLine.length < 3) {
  66. this.$message.warning('请添加轮廓线');
  67. return;
  68. }
  69. if (!sceneMark.closeFlag) {
  70. this.$message.warning('请按回车闭合轮廓线');
  71. this.$refs.drawFloor.focus();
  72. return;
  73. }
  74. Outline = this.$refs.drawFloor.drawMainScene.sceneMark.outLine
  75. Outline = Outline.map(t => {
  76. return {
  77. x: t.x.toFixed(2),
  78. y: -t.y.toFixed(2),
  79. }
  80. })
  81. }
  82. let pa = {
  83. Content: [{ FloorID: this.FloorID, Outline: Outline }],
  84. Projection: ['Outline']
  85. }
  86. floorUpdateOutline(pa, res => {
  87. this.isEdit = false;
  88. this.$message.success("更新成功");
  89. })
  90. },
  91. // 取消
  92. cancel() {
  93. this.isEdit = false;
  94. this.$refs.drawFloor.init();
  95. },
  96. // 编辑平面图
  97. editGraphy() {
  98. this.isEdit = true;
  99. },
  100. // 替换模型文件成功
  101. refresh(modelId) {
  102. this.modelId = modelId;
  103. this.getFileName(this.modelId)
  104. },
  105. // 获取文件夹名称
  106. getFileName(modelId) {
  107. if (!modelId) return
  108. let pa = {
  109. Id: modelId
  110. }
  111. getFileNameById(pa, res => {
  112. this.file = res;
  113. })
  114. },
  115. // 获取楼层
  116. getFloorData() {
  117. let floorParam = {
  118. PageSize: 1000,
  119. Filters: `BuildID='${this.BuildID}'`
  120. };
  121. floorQueryAndSign(floorParam, res => {
  122. this.alreadyRelatedModel = res.Content.map(t => {
  123. if (t.FloorID != this.FloorID) return t.ModelId
  124. this.sign = t.Sign > 0
  125. this.FloorName = t.FloorLocalName || t.FloorName
  126. this.$refs.drawFloor.buildFloorName = `${this.BuildName}-${this.FloorName}`
  127. }).filter(t => t);
  128. });
  129. },
  130. changeSign(flag) {
  131. this.otherSign = flag
  132. }
  133. },
  134. watch: {
  135. modelId(n, o) {
  136. if (o && n != o) {
  137. this.$refs.drawFloor.initGraphy(n, 1);
  138. }
  139. }
  140. }
  141. };
  142. </script>
  143. <style lang="less">
  144. #repetitionGraphy {
  145. width: 100%;
  146. height: 100%;
  147. background: #fff;
  148. position: relative;
  149. padding: 10px;
  150. box-sizing: border-box;
  151. .drawImg {
  152. width: 100%;
  153. margin-top: 10px;
  154. height: calc(100% - 40px);
  155. }
  156. }
  157. </style>