index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. <template>
  2. <div id="file_moddle_manage" v-loading="loading">
  3. <!-- 左边模型文件夹列表 -->
  4. <el-col class="col_left" :span="5">
  5. <div class="grid-content grid-left">
  6. <el-card class="box-card" :body-style="{ padding: '0px', height: '100%' }">
  7. <div class="top_hand left_top_hand">
  8. <div class="folder-box">
  9. <el-tooltip class="item" effect="dark" content="新建文件夹" placement="top-start">
  10. <el-button icon="el-icon-folder-add" @click="addFolder" class="icon_font"></el-button>
  11. </el-tooltip>
  12. <el-tooltip class="item" effect="dark" content="删除文件夹" placement="top-start">
  13. <el-button icon="el-icon-folder-remove" class="icon_font" @click="removeFolder"></el-button>
  14. </el-tooltip>
  15. </div>
  16. <div class="file-box">
  17. <el-tooltip class="item" effect="dark" content="编辑文件夹" placement="top-start">
  18. <el-button @click="editFolder" icon="el-icon-edit" class="icon_font"></el-button>
  19. </el-tooltip>
  20. </div>
  21. </div>
  22. <div class="folder-list">
  23. <div class="head">建筑模型文件夹
  24. <span>(建议按建筑模型进行命名)</span>
  25. </div>
  26. <ul class="lists">
  27. <el-scrollbar style="height:100%;">
  28. <li @click="openFolder(index,item)" v-for="(item,index) in navigationModel" :key="index"
  29. :class="[choiceIndex == index + 1 ? 'li-active' : '']">
  30. <i :class="[choiceIndex == index + 1 ? 'el-icon-folder-opened':'el-icon-folder','icon_font']" width="40" height="40"></i>
  31. <span>{{item.Name}}</span>
  32. </li>
  33. </el-scrollbar>
  34. </ul>
  35. </div>
  36. </el-card>
  37. </div>
  38. </el-col>
  39. <!-- 右边文件表格 -->
  40. <el-col class="col_left" :span="19">
  41. <el-card class="box-card" :body-style="{ padding: '0px', height:'100%' }">
  42. <!-- 顶部操作栏 -->
  43. <div class="top_hand right_top_hand">
  44. <el-button @click="addFloorFile">添加楼层文件</el-button>
  45. <el-button @click="queryFloorFile(currentFolderId)">刷新</el-button>
  46. </div>
  47. <!-- 列表 -->
  48. <floorTable ref="floorTable" :tableData="tableData" :modelFolderName="currentFolderName" @openModelLog="queryModelLog"
  49. @replaceModel="repliaceModel" @percentFinish="queryFloorFile(currentFolderId)"
  50. :persentList="persentList"></floorTable>
  51. </el-card>
  52. </el-col>
  53. <!-- 弹窗 开始-->
  54. <!-- 模型日志弹窗 -->
  55. <modelLog :modelLogVisible="modelLogVisible" :modelFolderName="currentFolderName" @deleteFinish="updataLog"
  56. @CloseModelLogDia="modelLogVisible=false" :logData="logData"></modelLog>
  57. <!-- 替换模型弹窗 -->
  58. <repliceModel :repliceModelVisible="repliceModelVisible" @closeReplaceModelDia="repliceModelVisible=false" :replaceModelItem="replaceModelItem"
  59. @updataModel="updateModelFile"></repliceModel>
  60. <!-- 新增楼层 -->
  61. <addFloorDialog :addFloorFileVisible="addFloorFileVisible" :floorList="tableData" :FolderName="currentFolderName" :FolderId="currentFolderId"
  62. @closeAddFloorDia="addFloorFileVisible=false" @finishCreateFloor="uploadModelFIle"></addFloorDialog>
  63. <!-- 新增文件夹名称 -->
  64. <addFolder :addFolderVisible="addFolderVisible" @closeAddFolderVisible="addFolderVisible=false;folderName=''" :folderName="folderName"
  65. @getfolderModel="queryModel"></addFolder>
  66. <!-- 编辑文件夹名字 -->
  67. <changeFolderName :currentFolderId="currentFolderId" :changeFolderNameVisible="changeFolderNameVisible" :folderName="folderName"
  68. @finishChangeFolderName="queryModel" @closeChangeFolderVisible="changeFolderNameVisible=false;folderName=''"></changeFolderName>
  69. <!-- 弹窗 结束-->
  70. </div>
  71. </template>
  72. <script>
  73. import { mapGetters } from "vuex";
  74. import request from "@/api/model/file.js";
  75. import Bus from '@/utils/bus.js'
  76. import dasBoard from "@/views/dasboard/index";
  77. import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
  78. import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
  79. import addFloorDialog from "@/components/model/file/addFloorDialog"; //新增楼层弹窗
  80. import addFolder from "@/components/model/file/addFolder"; //新增文件夹
  81. import changeFolderName from "@/components/model/file/changeFolderName"; //编辑名字
  82. import floorTable from "@/components/model/file/floorTable"; //右侧list表
  83. export default {
  84. computed: {
  85. ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret", "uploaderList"])
  86. },
  87. components: {
  88. dasBoard,
  89. modelLog,
  90. repliceModel,
  91. addFloorDialog,
  92. addFolder,
  93. changeFolderName,
  94. floorTable
  95. },
  96. data() {
  97. return {
  98. addFolderVisible: false, //是否显示新增文件夹弹窗
  99. addFloorFileVisible: false, //是否显示增加楼层文件弹窗
  100. repliceModelVisible: false, //是否显示替换楼层模型弹窗
  101. modelLogVisible: false, //是否显示模型日志弹窗
  102. changeFolderNameVisible: false, //是否显示编辑文件夹弹窗
  103. folderName: "", //新建文件夹名称
  104. navigationModel: [
  105. {
  106. Name: ""
  107. }
  108. ], //文件夹模型list
  109. choiceIndex: 0, //当前文件夹index
  110. currentFolderId: "", //当前选择的文件夹id
  111. currentFolderName: "", //当前选择文件夹的Name
  112. currentFloorModelId: "", //当前选择的楼层文件id
  113. tableData: [],
  114. loading: false, //加载loading
  115. logData: [], //楼层文件对应的模型日志
  116. replaceModelItem: null, //替换文件的item
  117. uploadFloorModelIdList: [], //上传楼层文件得数组,上传完成则为空
  118. //请求头
  119. headers: {
  120. ProjectId: ""
  121. },
  122. updataData: {
  123. model: {}
  124. },
  125. persentList: [], //请求进度列表
  126. isJump: true //是否可以调整页面
  127. };
  128. },
  129. mounted() {
  130. // // 文件选择后的回调
  131. // Bus.$on('fileAdded', () => {
  132. // console.log('文件已选择')
  133. // });
  134. // // 文件上传成功的回调
  135. // Bus.$on('fileSuccess', () => {
  136. // console.log('文件上传成功')
  137. // });
  138. },
  139. destroyed() {
  140. // Bus.$off('fileAdded');
  141. // Bus.$off('fileSuccess');
  142. },
  143. methods: {
  144. // 以下是模型文件夹
  145. // 打开模型文件夹
  146. openFolder(index, item) {
  147. this.choiceIndex = index + 1;
  148. this.currentFolderId = item.Id;
  149. this.currentFolderName = item.Name;
  150. // 获取模型文件夹对应得楼层文件
  151. this.queryFloorFile(this.currentFolderId);
  152. },
  153. //新增模型文件夹
  154. addFolder() {
  155. this.folderName = "";
  156. this.addFolderVisible = true;
  157. },
  158. //删除模型文件夹
  159. removeFolder() {
  160. this.$alert(`确定要删除文件夹 <${this.currentFolderName}> 吗?`, "提示", {
  161. confirmButtonText: "确定",
  162. callback: action => {
  163. if (action == "confirm") {
  164. let params = {
  165. Id: this.currentFolderId,
  166. ProjectId: this.projectId
  167. };
  168. request.deleteModel(params, res => {
  169. this.$message({
  170. message: "删除成功!",
  171. type: "success"
  172. });
  173. this.queryModel();
  174. });
  175. } else {
  176. this.$message({
  177. type: "info",
  178. message: `取消操作`
  179. });
  180. }
  181. }
  182. });
  183. },
  184. //编辑文件夹
  185. editFolder() {
  186. this.folderName = this.currentFolderName;
  187. this.changeFolderNameVisible = true;
  188. },
  189. // 查询所有文件夹模型
  190. queryModel() {
  191. this.loading = true;
  192. request.queryModel("", res => {
  193. this.navigationModel = res.Content;
  194. this.loading = false;
  195. if (this.navigationModel.length) {
  196. //默认选择第一个文件夹
  197. this.choiceIndex = 1;
  198. this.currentFolderName = this.navigationModel[0].Name;
  199. this.currentFolderId = this.navigationModel[0].Id;
  200. this.queryFloorFile(this.currentFolderId);
  201. } else {
  202. this.tableData = []
  203. }
  204. });
  205. },
  206. ///一下是楼层文件
  207. //获取楼层文件
  208. /**
  209. * @param currentFolderId 当前选择的文件夹id
  210. */
  211. queryFloorFile(currentFolderId) {
  212. if(currentFolderId){
  213. let data = {
  214. FolderId: currentFolderId,
  215. ProjectId: this.projectId
  216. };
  217. return new Promise((resolve, reject) => {
  218. request.queryFloorList(data, res => {
  219. res.Content.map(item => {
  220. /**
  221. * @info: 状态显示说明
  222. * 0: 上传中(上传的用户可操作:中止)
  223. * 1: 等待检查
  224. * 10: 模型检查中
  225. * 11: 未通过检查
  226. * 2、20、21、3、31: 正常(所有用户可操作:下载、查看历史)
  227. * 4: 正常(所有用户可操作:下载、替换、查看历史)
  228. */
  229. if (item.Status == 2 || item.Status == 20 || item.Status == 21 || item.Status == 3 || item.Status == 31 || item.Status == 4) {
  230. Object.assign(item, { isDown: false, precent: 0 });
  231. } else {
  232. Object.assign(item, { isDown: true, precent: 100 });
  233. if (this.persentList.length != 0) {
  234. this.persentList.forEach(pItem => {
  235. if (item.Id == pItem.Id) {
  236. Object.assign(item, { isDown: true, precent: pItem.precent ? pItem.precent : 0 });
  237. }
  238. });
  239. }
  240. }
  241. //删除错误模型(多人登录会有问题)
  242. /****状态为0,上传人为本人并且上传列表无对应的模型文件 */
  243. // if (item.Status == 0 && item.UserName == this.userInfo.userName && !this.uploaderList.some(file => {return file.modelId == item.CurrentModelId})) {
  244. // request.deleteModelFileList({Id: item.CurrentModelId}, res => {console.log('删除错误模型:',item.CurrentModelId)})
  245. // }
  246. });
  247. this.tableData = res.Content;
  248. this.loading = false;
  249. resolve();
  250. });
  251. });
  252. }
  253. },
  254. //添加楼层文件
  255. addFloorFile() {
  256. this.addFloorFileVisible = true;
  257. },
  258. //以下是文件模型
  259. //打开替换文件模型
  260. repliaceModel(item) {
  261. this.replaceModelItem = item;
  262. this.repliceModelVisible = true;
  263. },
  264. // 上传模型文件
  265. uploadModelFIle(data) {
  266. Bus.$emit('openUploader', {
  267. uploadId: data.uploadId,
  268. modelId: data.modelId,
  269. systemId: 'revit', //系统名称
  270. secret: '63afbef6906c342b', //系统密码
  271. }, data.file.raw)
  272. // 在列表中添加
  273. this.persentList.push({
  274. Id: data.floorId,
  275. precent: 0
  276. });
  277. this.queryFloorFile(this.currentFolderId);
  278. },
  279. //更新模型文件;
  280. updateModelFile(data) {
  281. let params = {
  282. FileName: data.file.name,
  283. FloorName: data.replaceModelItem.FloorName,
  284. FolderId: data.replaceModelItem.FolderId,
  285. Note: data.replaceModelItem.Note,
  286. ProjectId: this.projectId,
  287. ReplaceReason: 0,
  288. Size: data.file.size,
  289. UserName: this.userInfo.userName,
  290. UserId: this.userInfo.userId
  291. };
  292. // 替换模型文件
  293. request.modelFileUpload(params, res => {
  294. // 上传
  295. this.persentList.push({
  296. Id: data.replaceModelItem.Id,
  297. precent: 0
  298. });
  299. // 修改isdown得值
  300. this.tableData.map(item => {
  301. if (item.Id == data.replaceModelItem.Id) {
  302. item.isDown = true;
  303. item.precent = 0;
  304. }
  305. });
  306. this.queryFloorFile(this.currentFolderId);
  307. Bus.$emit('openUploader', {
  308. uploadId: res.UploadId,
  309. modelId: res.ModelId,
  310. systemId: 'revit', //系统名称
  311. secret: '63afbef6906c342b', //系统密码
  312. }, data.file.raw)
  313. });
  314. },
  315. //查看模型日志
  316. queryModelLog(item) {
  317. this.FloorModelId = item.Id; //楼层模型文件
  318. request.queryModelFile(this.FloorModelId, res => {
  319. this.logData = res.Content;
  320. this.modelLogVisible = true;
  321. });
  322. },
  323. // 刷新日志
  324. updataLog() {
  325. request.queryModelFile(this.FloorModelId, res => {
  326. this.logData = res.Content;
  327. });
  328. },
  329. },
  330. watch: {
  331. projectId() {
  332. this.queryModel()
  333. }
  334. },
  335. mounted() {
  336. this.queryModel();
  337. Bus.$on('modelStatusChange', message => {
  338. this.queryFloorFile(this.currentFolderId);
  339. })
  340. // 十秒刷新次楼层列表
  341. // setInterval(()=>{
  342. // this.queryFloorFile(this.currentFolderId)
  343. // },10000)
  344. }
  345. };
  346. </script>
  347. <style lang="less" scoped>
  348. #file_moddle_manage {
  349. width: 100%;
  350. height: 100%;
  351. overflow: hidden !important;
  352. .col_left {
  353. height: 100%;
  354. }
  355. .grid-content {
  356. height: 100%;
  357. }
  358. .box-card {
  359. height: 100%;
  360. }
  361. .grid-left {
  362. padding-right: 10px;
  363. box-sizing: border-box;
  364. }
  365. // 顶部
  366. .top_hand {
  367. height: 60px;
  368. width: 100%;
  369. padding: 10px;
  370. box-sizing: border-box;
  371. display: flex;
  372. }
  373. .left_top_hand {
  374. align-items: center;
  375. justify-content: space-between;
  376. .folder-box {
  377. display: flex;
  378. height: 40px;
  379. flex-direction: row;
  380. }
  381. .box-icon {
  382. width: 40px;
  383. height: 40px;
  384. font-size: 30px;
  385. display: flex;
  386. justify-content: center;
  387. align-items: center;
  388. float: left;
  389. }
  390. }
  391. // 左侧文件夹列表
  392. .folder-list {
  393. width: 100%;
  394. height: calc(100% - 60px);
  395. .head {
  396. height: 42px;
  397. width: 100%;
  398. padding-left: 10px;
  399. box-sizing: border-box;
  400. background: #d9d9d9;
  401. color: #2b2b2b;
  402. display: flex;
  403. justify-content: left;
  404. align-items: center;
  405. font-weight: bold;
  406. span{
  407. font-weight: normal;
  408. font-size: 12px;
  409. color: #606266;
  410. }
  411. }
  412. .lists {
  413. width: 100%;
  414. margin-top: 10px;
  415. height: calc(100% - 52px);
  416. overflow-y: auto;
  417. li {
  418. height: 42px;
  419. display: flex;
  420. justify-content: left;
  421. align-items: center;
  422. padding-left: 20px;
  423. box-sizing: border-box;
  424. color: #555;
  425. cursor: pointer;
  426. span {
  427. padding-left: 6px;
  428. }
  429. }
  430. li:hover {
  431. background-color: #f5f7fa;
  432. color: #000;
  433. }
  434. .li-active {
  435. background-color: #f5f7fa;
  436. color: #000;
  437. }
  438. }
  439. }
  440. .icon_font {
  441. font-size: 18px;
  442. }
  443. }
  444. /deep/ .el-scrollbar__wrap {
  445. overflow-x: hidden;
  446. }
  447. </style>