addModelTask.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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" :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. },
  72. created() {
  73. this.query = this.$route.query
  74. },
  75. methods: {
  76. goBack(){//返回
  77. this.$router.push({name:'buildTask'})
  78. },
  79. handleChangeModelFolder(item){//切换模型文件夹
  80. let val = item.value
  81. if(val){
  82. this.modelFolderName = item.label
  83. let data = {
  84. FolderId: val,
  85. ProjectId: this.projectId
  86. };
  87. request.queryFloorList(data, res => {
  88. this.modelFileList = res.Content.map(item => {
  89. item.active = false
  90. return item
  91. })
  92. if (this.modelFileList.length) {
  93. this.handleChangeModelFile(this.modelFileList[0]);
  94. }
  95. })
  96. } else {
  97. this.resetSelected()
  98. }
  99. },
  100. resetSelected(){
  101. this.modelFileList = []
  102. this.CurrentModelId = ''
  103. this.modelFolderName = ''
  104. this.modelFolderId = ''
  105. this.modelFileName = ''
  106. this.spaceList = []
  107. this.dialogVisible = false
  108. this.$refs.drawModel.clearGraphy()
  109. },
  110. handleChangeModelFile(file){//切换模型文件
  111. this.modelFileList.map(item => {
  112. file.Id == item.Id?item.active = true:item.active = false
  113. return item
  114. })
  115. this.CurrentModelId = file.CurrentModelId
  116. this.modelFolderId = file.FolderId
  117. this.modelFileName = file.FloorName
  118. this.newTaskTypes = this.$route.query.newTaskTypes
  119. },
  120. changeDevice(val){//切换设备类别
  121. this.device = val.code
  122. },
  123. handleClickCreate(){//创建已选
  124. if(!this.CurrentModelId){
  125. this.$message('请选择模型文件!')
  126. return false
  127. }
  128. this.spaceList = this.$refs.drawModel.getSelectedSpaces().map(item => {
  129. return item.data.SourceId
  130. })
  131. this.dialogVisible = true
  132. },
  133. changeButtonContent(val){// 通过判断是否选中模型空间调整文案
  134. this.buttonContent = val;
  135. }
  136. },
  137. watch: {
  138. projectId() {
  139. this.resetSelected()
  140. }
  141. }
  142. };
  143. </script>
  144. <style lang="less" scoped>
  145. #bd-fl-manage {
  146. overflow: hidden;
  147. height: 100%;
  148. position: relative;
  149. .header-nav{
  150. height: 32px;
  151. padding-bottom: 10px;
  152. }
  153. .el-row {
  154. height: calc(100% - 50px);
  155. & > div {
  156. float: left;
  157. height: 100%;
  158. overflow: hidden;
  159. background-color: #fff;
  160. box-sizing: border-box;
  161. border: 1px solid #dfe6ec;
  162. .action-box {
  163. padding: 10px;
  164. .el-button--small {
  165. padding: 10px 11px;
  166. }
  167. }
  168. }
  169. .l-list {
  170. width: 250px;
  171. height: 100%;
  172. border-right: 0;
  173. h4 {
  174. padding-left: 10px;
  175. border-top: 1px solid #d9d9d9;
  176. border-bottom: 1px solid #dfe6ec;
  177. background: #d9d9d9;
  178. color: #333;
  179. line-height: 44px;
  180. }
  181. .model-file-list {
  182. height: calc(100% - 46px);
  183. line-height: 48px;
  184. /deep/.el-scrollbar__wrap {
  185. overflow-x: hidden;
  186. }
  187. .model-file-item {
  188. white-space: nowrap;
  189. overflow: hidden;
  190. text-overflow: ellipsis;
  191. cursor: pointer;
  192. span {
  193. margin-left: 10px;
  194. }
  195. }
  196. .model-file-item.active,
  197. .model-file-item:hover {
  198. background-color: #f5f7fa;
  199. color: #000;
  200. }
  201. }
  202. }
  203. .r-model {
  204. width: calc(100% - 250px);
  205. box-sizing: border-box;
  206. padding: 10px;
  207. }
  208. }
  209. }
  210. </style>