checkGraphy.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <el-dialog id="checkGraphy" title="添加平面图" :visible.sync="checkGraphyVisible" width="900px" @close="handleClose">
  3. <div class="bodys">
  4. <el-cascader :options="options" :show-all-levels="false" @change="handleChange" @active-item-change='handleItemChange' clearable
  5. placeholder="请选择模型文件" v-model="casVal"></el-cascader>
  6. <div>
  7. <el-button type="text">上传图片</el-button>
  8. </div>
  9. <!-- 展示框 -->
  10. <div class="showBox">
  11. <drawFloor ref="drawFloorDialog" :showTools="false" :id="0" :dialog="true"></drawFloor>
  12. </div>
  13. </div>
  14. <span slot="footer" class="dialog-footer">
  15. <el-button @click="handleClose">取 消</el-button>
  16. <el-button type="primary" @click="bindGraphy">确 定</el-button>
  17. </span>
  18. </el-dialog>
  19. </template>
  20. <script>
  21. import drawFloor from "./drawFloor";
  22. import { mapGetters, mapActions } from "vuex";
  23. import request from "@/api/model/file.js";
  24. import { bindFloorModel } from "@/api/model/file";
  25. export default {
  26. components: {
  27. drawFloor
  28. },
  29. computed: {
  30. ...mapGetters("layout", ["projectId"])
  31. },
  32. data() {
  33. return {
  34. casVal: [],
  35. jsonKey: "", //map.josn
  36. checkGraphyVisible: false,
  37. options: [],
  38. floor: {}, // 当前选中的楼层数据
  39. modelIdToFloorId: {}
  40. };
  41. },
  42. methods: {
  43. // 弹窗显示
  44. showDialog(floor) {
  45. this.floor = floor;
  46. this.checkGraphyVisible = true;
  47. },
  48. // 关闭弹窗
  49. handleClose() {
  50. this.checkGraphyVisible = false;
  51. this.casVal = []
  52. this.$refs.drawFloorDialog.clearGraphy()
  53. },
  54. // 更新楼层 平面图文件
  55. bindGraphy() {
  56. if (!this.jsonKey) {
  57. this.$message.warning("请选择模型文件");
  58. return
  59. }
  60. let pa = {
  61. FloorId: this.floor.FloorID,
  62. Id: this.modelIdToFloorId[this.jsonKey],
  63. BuildingId: this.floor.BuildID
  64. };
  65. bindFloorModel(pa, res => {
  66. this.$message.success("更新成功");
  67. this.handleClose()
  68. this.$emit('refresh', this.jsonKey)
  69. });
  70. },
  71. // 点击多级联动
  72. handleChange(val) {
  73. this.$refs.drawFloorDialog.initGraphy(val[1], 1)
  74. this.jsonKey = val[1]
  75. },
  76. // 通过id查询文件夹下模型文件
  77. handleItemChange(val) {
  78. let data = {
  79. FolderId: val[0],
  80. Status: '3, 31, 4',
  81. ProjectId: this.projectId
  82. };
  83. request.queryFloorList(data, res => {
  84. let tempArr = res.Content.map(t => {
  85. this.modelIdToFloorId[t.CurrentModelId] = t.Id;
  86. return {
  87. value: t.CurrentModelId,
  88. label: t.FloorName
  89. }
  90. })
  91. this.pushChild(this.options, tempArr, val[0])
  92. })
  93. },
  94. // 将模型文件list填到相应的文件夹下
  95. pushChild(options, arr, Code) {
  96. options.map(option => {
  97. if (option.value == Code) {
  98. option.children = arr;
  99. } else {
  100. if (option.children) {
  101. this.pushChild(option.children, arr, Code)
  102. }
  103. }
  104. }) },
  105. init() {
  106. this.getDirectory()
  107. },
  108. // 获取文件夹
  109. getDirectory() {
  110. request.queryModel("", res => {
  111. this.options = res.Content.map(t => {
  112. return {
  113. value: t.Id,
  114. label: t.Name,
  115. children: []
  116. }
  117. })
  118. });
  119. },
  120. },
  121. created() {
  122. this.init()
  123. },
  124. watch: {
  125. projectId() {
  126. this.init()
  127. }
  128. }
  129. };
  130. </script>
  131. <style lang="less">
  132. #checkGraphy {
  133. .bodys {
  134. .showBox {
  135. box-sizing: border-box;
  136. width: 100%;
  137. height: 300px;
  138. border: 1px #ccc solid;
  139. padding: 10px;
  140. }
  141. }
  142. }
  143. </style>