checkGraphy.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <el-dialog id='checkGraphy' title='添加平面图' :visible.sync='checkGraphyVisible' width='900px' @close='handleClose'>
  3. <div class='bodys'>
  4. <el-cascader
  5. :options='options'
  6. :show-all-levels='false'
  7. @change='handleChange'
  8. @active-item-change='handleItemChange'
  9. clearable
  10. placeholder='请选择模型文件'
  11. v-model='casVal'
  12. ></el-cascader>
  13. <span>
  14. &nbsp;&nbsp;或&nbsp;&nbsp;
  15. <el-upload class='upload-demo' action='string' :http-request='uploadAndSubmit' :show-file-list='false'>
  16. <el-button type>上传图片</el-button>
  17. </el-upload>
  18. <span>(支持jpg,png格式)</span>
  19. </span>
  20. <!-- 展示框 -->
  21. <div class='showBox'>
  22. <drawFloor ref='drawFloorDialog' :showTools='false' :id='0' :dialog='true'></drawFloor>
  23. </div>
  24. </div>
  25. <span slot='footer' class='dialog-footer'>
  26. <el-button @click='handleClose'>取 消</el-button>
  27. <el-button type='primary' @click='bindGraphy'>确 定</el-button>
  28. </span>
  29. </el-dialog>
  30. </template>
  31. <script>
  32. import drawFloor from './drawFloor'
  33. import { mapGetters } from 'vuex'
  34. import request from '@/api/model/file.js'
  35. import { bindFloorModel } from '@/api/model/file'
  36. import { manageUpdateFloor } from '@/api/scan/request'
  37. export default {
  38. components: {
  39. drawFloor,
  40. },
  41. computed: {
  42. ...mapGetters('layout', ['projectId']),
  43. },
  44. props: {
  45. alreadyRelatedModel: {
  46. default: [],
  47. },
  48. },
  49. data() {
  50. return {
  51. casVal: [],
  52. jsonKey: '', //map.josn
  53. checkGraphyVisible: false,
  54. options: [],
  55. floor: {}, // 当前选中的楼层数据
  56. modelIdToFloorId: {},
  57. key: '',
  58. }
  59. },
  60. methods: {
  61. // 弹窗显示
  62. showDialog(floor) {
  63. this.floor = floor
  64. this.checkGraphyVisible = true
  65. },
  66. // 关闭弹窗
  67. handleClose() {
  68. this.checkGraphyVisible = false
  69. this.casVal = []
  70. this.$refs.drawFloorDialog.clearGraphy()
  71. },
  72. //上传图片
  73. uploadAndSubmit(item) {
  74. let file = item.file
  75. console.log(file)
  76. let reader = new FileReader()
  77. let vm = this
  78. let fileType = file.name.split('.')
  79. let type = fileType[fileType.length - 1]
  80. let uploadKey = file.uid
  81. reader.onloadend = function () {
  82. // 这个事件在读取结束后,无论成功或者失败都会触发
  83. if (reader.error) {
  84. } else {
  85. // document.getElementById("bytesRead").textContent = file.size;
  86. // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
  87. var xhr = new XMLHttpRequest()
  88. xhr.open(
  89. /* method */ 'POST',
  90. /* target url */
  91. '/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=' + file.uid + '.' + type
  92. /*, async, default to true */
  93. )
  94. //xhr.overrideMimeType("application/octet-stream");
  95. xhr.send(reader.result)
  96. xhr.onreadystatechange = function () {
  97. if (xhr.readyState == 4) {
  98. if (xhr.status == 200) {
  99. vm.key = uploadKey + '.' + type
  100. vm.jsonKey = ''
  101. vm.$refs.drawFloorDialog.initGraphy(vm.key, 3)
  102. //vm.$emit("getKey", file.uid + '.' + type, vm.keyName);
  103. }
  104. }
  105. }
  106. }
  107. }
  108. reader.readAsArrayBuffer(file)
  109. },
  110. // 更新楼层 平面图文件
  111. bindGraphy() {
  112. if (!this.jsonKey && !this.key) {
  113. this.$message.warning('请选择模型文件')
  114. return
  115. }
  116. if (this.alreadyRelatedModel.indexOf(this.modelIdToFloorId[this.jsonKey]) > -1) {
  117. this.$message.warning('此模型已关联该建筑下的楼层')
  118. return
  119. }
  120. let pa = {
  121. FloorId: this.floor.FloorID,
  122. BuildingId: this.floor.BuildID,
  123. Cover: true,
  124. }
  125. if (this.jsonKey) {
  126. pa.Id = this.modelIdToFloorId[this.jsonKey]
  127. bindFloorModel(pa, (res) => {
  128. this.$message.success('更新成功')
  129. this.handleClose()
  130. this.$emit('refresh', this.jsonKey)
  131. })
  132. }
  133. if (this.key) {
  134. let Param = {
  135. Content: [{ FloorId: this.floor.FloorID, StructureInfo: { FloorMap: this.key } }],
  136. Projection: ['FloorMap'],
  137. }
  138. manageUpdateFloor(Param, (res) => {
  139. this.$message.success('更新成功')
  140. this.handleClose()
  141. this.$emit('refresh', this.key)
  142. })
  143. }
  144. },
  145. // 点击多级联动
  146. handleChange(val) {
  147. this.$refs.drawFloorDialog.initGraphy(val[1], 1)
  148. this.jsonKey = val[1]
  149. this.key = ''
  150. },
  151. // 通过id查询文件夹下模型文件
  152. handleItemChange(val) {
  153. let data = {
  154. FolderId: val[0],
  155. Status: '4',
  156. ProjectId: this.projectId,
  157. }
  158. request.queryFloorList(data, (res) => {
  159. let tempArr = res.Content.map((t) => {
  160. this.modelIdToFloorId[t.CurrentModelId] = t.Id
  161. return {
  162. value: t.CurrentModelId,
  163. label: t.FloorName,
  164. }
  165. })
  166. console.log(tempArr, 'tempArr')
  167. this.pushChild(this.options, tempArr, val[0])
  168. })
  169. },
  170. // 将模型文件list填到相应的文件夹下
  171. pushChild(options, arr, Code) {
  172. options.map((option) => {
  173. if (option.value == Code) {
  174. option.children = arr
  175. } else {
  176. if (option.children) {
  177. this.pushChild(option.children, arr, Code)
  178. }
  179. }
  180. })
  181. },
  182. init() {
  183. this.getDirectory()
  184. },
  185. // 获取文件夹
  186. getDirectory() {
  187. request.queryModel('', (res) => {
  188. this.options = res.content.map((t) => {
  189. return {
  190. value: t.id,
  191. label: t.name,
  192. children: [],
  193. }
  194. })
  195. })
  196. },
  197. },
  198. created() {
  199. this.init()
  200. },
  201. watch: {
  202. projectId() {
  203. this.init()
  204. },
  205. },
  206. }
  207. </script>
  208. <style lang="less">
  209. #checkGraphy {
  210. .bodys {
  211. .upload-demo {
  212. display: inline-block;
  213. }
  214. .showBox {
  215. box-sizing: border-box;
  216. width: 100%;
  217. height: 300px;
  218. border: 1px #ccc solid;
  219. padding: 10px;
  220. margin-top: 20px;
  221. }
  222. }
  223. }
  224. </style>