addModelTask.vue 6.3 KB

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