addModelTask.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <div id="bd-fl-manage">
  3. <div class="header-nav">
  4. <el-button style="float:left;margin-right:20px;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
  5. <model-folder ref="modelFolder" @change="handleChangeModelFolder" style="margin-right:10px;"></model-folder>
  6. <my-cascader :isWidth="false" ref="cascader" @change="changeDevice"></my-cascader>
  7. <el-button style="float:right;margin-top:1px;" @click="handleClickCreate">创建所选</el-button>
  8. </div>
  9. <el-row>
  10. <div class="l-list">
  11. <h4>模型文件</h4>
  12. <div class="model-file-list">
  13. <el-scrollbar style="height:100%;">
  14. <div v-for="item in modelFileList" :key="item.Id" :class="{'model-file-item':true,'active':item.active}" @click="handleChangeModelFile(item)">
  15. <span>{{item.FloorName}}</span>
  16. </div>
  17. </el-scrollbar>
  18. </div>
  19. </div>
  20. <div class="r-model">
  21. <draw-model ref="drawModel" :id="1" :CurrentModelId="CurrentModelId"></draw-model>
  22. </div>
  23. </el-row>
  24. <modelTask-dialog :dialogVisible.sync="dialogVisible" :params="params"></modelTask-dialog>
  25. </div>
  26. </template>
  27. <script>
  28. import modelFolder from "@/components/ready/buildfloor/modelFolder"
  29. import myCascader from "@/components/ledger/lib/cascader"
  30. import drawModel from "@/components/data_admin/buildTask/draw/drawModel"
  31. import modelTaskDialog from "@/components/data_admin/buildTask/dialog/modelTaskDialog"
  32. import { mapGetters, mapActions } from "vuex";
  33. import request from "@/api/model/file.js";
  34. import {} from "@/api/scan/request";
  35. export default {
  36. components: {
  37. modelFolder,
  38. myCascader,
  39. drawModel,
  40. modelTaskDialog
  41. },
  42. data() {
  43. return {
  44. query: {},//query信息
  45. dialogVisible: false,//是否显示弹窗
  46. modelFolderName: '',//模型文件夹名字
  47. modelFolderId: '',//模型文件夹的id
  48. modelFileName: '',//模型文件名字
  49. modelFileList: [],
  50. CurrentModelId: '',//模型文件id
  51. device: '',//设备类别
  52. spaceList: []//选中的空间
  53. };
  54. },
  55. computed: {
  56. ...mapGetters("layout", ["projectId"]),
  57. params(){
  58. return {
  59. device: this.device,
  60. CurrentModelId: this.CurrentModelId,
  61. modelFolderName: this.modelFolderName,
  62. modelFileName: this.modelFileName,
  63. spaceList: this.spaceList,
  64. isVerification: this.query.isVerification
  65. }
  66. }
  67. },
  68. created() {
  69. this.query = this.$route.query
  70. },
  71. methods: {
  72. goBack(){//返回
  73. this.$router.push({name:'buildTask'})
  74. },
  75. handleChangeModelFolder(item){//切换模型文件夹
  76. let val = item.value
  77. if(val){
  78. this.modelFolderName = item.label
  79. let data = {
  80. FolderId: val,
  81. ProjectId: this.projectId
  82. };
  83. request.queryFloorList(data, res => {
  84. this.modelFileList = res.Content.map(item => {
  85. item.active = false
  86. return item
  87. })
  88. if (this.modelFileList.length) {
  89. this.handleChangeModelFile(this.modelFileList[0]);
  90. }
  91. })
  92. } else {
  93. this.resetSelected()
  94. }
  95. },
  96. resetSelected(){
  97. this.modelFileList = []
  98. this.CurrentModelId = ''
  99. this.modelFolderName = ''
  100. this.modelFolderId = ''
  101. this.modelFileName = ''
  102. this.spaceList = []
  103. this.dialogVisible = false
  104. this.$refs.drawModel.clearGraphy()
  105. },
  106. handleChangeModelFile(file){//切换模型文件
  107. this.modelFileList.map(item => {
  108. file.Id == item.Id?item.active = true:item.active = false
  109. return item
  110. })
  111. this.CurrentModelId = file.CurrentModelId
  112. this.modelFolderId = file.FolderId
  113. this.modelFileName = file.FloorName
  114. },
  115. changeDevice(val){//切换设备类别
  116. this.device = val.code
  117. },
  118. handleClickCreate(){//创建已选
  119. if(!this.CurrentModelId){
  120. this.$message('请选择模型文件!')
  121. return false
  122. }
  123. this.spaceList = this.$refs.drawModel.getSelectedSpaces().map(item => {
  124. return item.data.SourceId
  125. })
  126. this.dialogVisible = true
  127. }
  128. },
  129. watch: {
  130. projectId() {
  131. this.resetSelected()
  132. }
  133. }
  134. };
  135. </script>
  136. <style lang="less" scoped>
  137. #bd-fl-manage {
  138. overflow: hidden;
  139. height: 100%;
  140. position: relative;
  141. .header-nav{
  142. height: 32px;
  143. padding-bottom: 10px;
  144. }
  145. .el-row {
  146. height: calc(100% - 50px);
  147. & > div {
  148. float: left;
  149. height: 100%;
  150. overflow: hidden;
  151. background-color: #fff;
  152. box-sizing: border-box;
  153. border: 1px solid #dfe6ec;
  154. .action-box {
  155. padding: 10px;
  156. .el-button--small {
  157. padding: 10px 11px;
  158. }
  159. }
  160. }
  161. .l-list {
  162. width: 250px;
  163. height: 100%;
  164. border-right: 0;
  165. h4 {
  166. padding-left: 10px;
  167. border-top: 1px solid #d9d9d9;
  168. border-bottom: 1px solid #dfe6ec;
  169. background: #d9d9d9;
  170. color: #333;
  171. line-height: 44px;
  172. }
  173. .model-file-list {
  174. height: calc(100% - 46px);
  175. line-height: 48px;
  176. /deep/.el-scrollbar__wrap {
  177. overflow-x: hidden;
  178. }
  179. .model-file-item {
  180. white-space: nowrap;
  181. overflow: hidden;
  182. text-overflow: ellipsis;
  183. cursor: pointer;
  184. span {
  185. margin-left: 10px;
  186. }
  187. }
  188. .model-file-item.active,
  189. .model-file-item:hover {
  190. background-color: #f5f7fa;
  191. color: #000;
  192. }
  193. }
  194. }
  195. .r-model {
  196. width: calc(100% - 250px);
  197. box-sizing: border-box;
  198. padding: 10px;
  199. }
  200. }
  201. }
  202. </style>