repetitionGraphy.vue 4.2 KB

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