index.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634
  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">模型文件夹</div>
  24. <ul class="lists">
  25. <el-scrollbar style="height:100%;">
  26. <li @click="openFolder(index,item)" v-for="(item,index) in navigationModel" :key="index"
  27. :class="[choiceIndex == index + 1 ? 'li-active' : '']">
  28. <i :class="[choiceIndex == index + 1 ? 'el-icon-folder-opened':'el-icon-folder','icon_font']" width="40" height="40"></i>
  29. <span>{{item.Name}}</span>
  30. </li>
  31. </el-scrollbar>
  32. </ul>
  33. </div>
  34. </el-card>
  35. </div>
  36. </el-col>
  37. <!-- 右边文件表格 -->
  38. <el-col class="col_left" :span="19">
  39. <el-card class="box-card" :body-style="{ padding: '0px', height:'100%' }">
  40. <!-- 顶部操作栏 -->
  41. <div class="top_hand right_top_hand">
  42. <el-button @click="addFloorFile">添加楼层文件</el-button>
  43. <el-button @click="queryFloorFile(currentFolderId)">刷新</el-button>
  44. </div>
  45. <!-- 列表 -->
  46. <floorTable ref="floorTable" :tableData="tableData" :modelFolderName="currentFolderName" @openModelLog="queryModelLog"
  47. @replaceModel="repliaceModel" @closeUpdateFile="removePersentList" @percentFinish="queryFloorFile(currentFolderId)"
  48. :persentList="persentList"></floorTable>
  49. </el-card>
  50. </el-col>
  51. <!-- 弹窗 开始-->
  52. <!-- 模型日志弹窗 -->
  53. <modelLog :modelLogVisible="modelLogVisible" :modelFolderName="currentFolderName" @deleteFinish="updataLog"
  54. @CloseModelLogDia="modelLogVisible=false" :logData="logData"></modelLog>
  55. <!-- 替换模型弹窗 -->
  56. <repliceModel :repliceModelVisible="repliceModelVisible" @closeReplaceModelDia="repliceModelVisible=false" :replaceModelItem="replaceModelItem"
  57. @updataModel="updateModelFile"></repliceModel>
  58. <!-- 新增楼层 -->
  59. <addFloorDialog :addFloorFileVisible="addFloorFileVisible" :floorList="tableData" :FolderName="currentFolderName" :FolderId="currentFolderId"
  60. @closeAddFloorDia="addFloorFileVisible=false" @finishCreateFloor="uploadModelFIle"></addFloorDialog>
  61. <!-- 新增文件夹名称 -->
  62. <addFolder :addFolderVisible="addFolderVisible" @closeAddFolderVisible="addFolderVisible=false;folderName=''" :folderName="folderName"
  63. @getfolderModel="queryModel"></addFolder>
  64. <!-- 编辑文件夹名字 -->
  65. <changeFolderName :currentFolderId="currentFolderId" :changeFolderNameVisible="changeFolderNameVisible" :folderName="folderName"
  66. @finishChangeFolderName="queryModel" @closeChangeFolderVisible="changeFolderNameVisible=false;folderName=''"></changeFolderName>
  67. <!-- 弹窗 结束-->
  68. </div>
  69. </template>
  70. <script>
  71. import { mapGetters } from "vuex";
  72. import request from "@/api/model/file.js";
  73. import Bus from '@/utils/bus.js'
  74. import dasBoard from "@/views/dasboard/index";
  75. import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
  76. import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
  77. import addFloorDialog from "@/components/model/file/addFloorDialog"; //新增楼层弹窗
  78. import addFolder from "@/components/model/file/addFolder"; //新增文件夹
  79. import changeFolderName from "@/components/model/file/changeFolderName"; //编辑名字
  80. import floorTable from "@/components/model/file/floorTable"; //右侧list表
  81. export default {
  82. // 离开此页面前要判断是是否有下载
  83. beforeRouteLeave: function (to, from, next) {
  84. console.log(this.uploadClassList);
  85. if (this.uploadClassList.length) {
  86. this.$alert(
  87. "您有正在上传的模型文件,切换菜单会中断上传,是否继续?",
  88. "提示",
  89. {
  90. confirmButtonText: "确定",
  91. callback: action => {
  92. console.log(action);
  93. if (action == "confirm") {
  94. next();
  95. } else {
  96. next(false);
  97. }
  98. }
  99. }
  100. );
  101. } else {
  102. next();
  103. }
  104. },
  105. computed: {
  106. ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
  107. },
  108. components: {
  109. dasBoard,
  110. modelLog,
  111. repliceModel,
  112. addFloorDialog,
  113. addFolder,
  114. changeFolderName,
  115. floorTable
  116. },
  117. data() {
  118. return {
  119. addFolderVisible: false, //是否显示新增文件夹弹窗
  120. addFloorFileVisible: false, //是否显示增加楼层文件弹窗
  121. repliceModelVisible: false, //是否显示替换楼层模型弹窗
  122. modelLogVisible: false, //是否显示模型日志弹窗
  123. changeFolderNameVisible: false, //是否显示编辑文件夹弹窗
  124. folderName: "", //新建文件夹名称
  125. navigationModel: [
  126. {
  127. Name: ""
  128. }
  129. ], //文件夹模型list
  130. choiceIndex: 0, //当前文件夹index
  131. currentFolderId: "", //当前选择的文件夹id
  132. currentFolderName: "", //当前选择文件夹的Name
  133. currentFloorModelId: "", //当前选择的楼层文件id
  134. tableData: [],
  135. loading: false, //加载loading
  136. logData: [], //楼层文件对应的模型日志
  137. replaceModelItem: null, //替换文件的item
  138. uploadFloorModelIdList: [], //上传楼层文件得数组,上传完成则为空
  139. //请求头
  140. headers: {
  141. ProjectId: ""
  142. },
  143. updataData: {
  144. model: {}
  145. },
  146. persentList: [], //请求进度列表
  147. uploadClassList: [], //请求list 用与缓存多个请求问题
  148. isJump: true //是否可以调整页面
  149. };
  150. },
  151. // mounted() {
  152. // window.addEventListener('beforeunload', e => {
  153. // if (this.uploadClassList.length) {
  154. // window.localStorage.removeItem("当前页有下载内容,关闭或刷新页面下载将会失败。您确定要继续吗?")
  155. // }
  156. // })
  157. // },
  158. methods: {
  159. // 以下是模型文件夹
  160. // 打开模型文件夹
  161. openFolder(index, item) {
  162. this.choiceIndex = index + 1;
  163. this.currentFolderId = item.Id;
  164. this.currentFolderName = item.Name;
  165. // 获取模型文件夹对应得楼层文件
  166. this.queryFloorFile(this.currentFolderId);
  167. },
  168. //新增模型文件夹
  169. addFolder() {
  170. this.folderName = "";
  171. this.addFolderVisible = true;
  172. },
  173. //删除模型文件夹
  174. removeFolder() {
  175. this.$alert(`确定要删除文件夹 <${this.currentFolderName}> 吗?`, "提示", {
  176. confirmButtonText: "确定",
  177. callback: action => {
  178. if (action == "confirm") {
  179. let params = {
  180. Id: this.currentFolderId,
  181. ProjectId: this.projectId
  182. };
  183. request.deleteModel(params, res => {
  184. this.$message({
  185. message: "删除成功!",
  186. type: "success"
  187. });
  188. this.queryModel();
  189. });
  190. } else {
  191. this.$message({
  192. type: "info",
  193. message: `取消操作`
  194. });
  195. }
  196. }
  197. });
  198. },
  199. //编辑文件夹
  200. editFolder() {
  201. this.folderName = this.currentFolderName;
  202. this.changeFolderNameVisible = true;
  203. },
  204. // 查询所有文件夹模型
  205. queryModel() {
  206. this.loading = true;
  207. request.queryModel("", res => {
  208. this.navigationModel = res.Content;
  209. this.loading = false;
  210. if (this.navigationModel.length) {
  211. //默认选择第一个文件夹
  212. this.choiceIndex = 1;
  213. this.currentFolderName = this.navigationModel[0].Name;
  214. this.currentFolderId = this.navigationModel[0].Id;
  215. this.queryFloorFile(this.currentFolderId);
  216. } else {
  217. this.tableData = []
  218. }
  219. });
  220. },
  221. ///一下是楼层文件
  222. //获取楼层文件
  223. /**
  224. * @param currentFolderId 当前选择的文件夹id
  225. */
  226. queryFloorFile(currentFolderId) {
  227. if(currentFolderId){
  228. let data = {
  229. FolderId: currentFolderId,
  230. ProjectId: this.projectId
  231. };
  232. return new Promise((resolve, reject) => {
  233. request.queryFloorList(data, res => {
  234. res.Content.map(item => {
  235. /**
  236. * @info: 状态显示说明
  237. * 0: 上传中(上传的用户可操作:中止)
  238. * 1: 等待检查
  239. * 10: 模型检查中
  240. * 11: 未通过检查
  241. * 2、20、21、3、31: 正常(所有用户可操作:下载、查看历史)
  242. * 4: 正常(所有用户可操作:下载、替换、查看历史)
  243. */
  244. if (item.Status == 2 || item.Status == 20 || item.Status == 21 || item.Status == 3 || item.Status == 31 || item.Status == 4) {
  245. Object.assign(item, { isDown: false, precent: 0 });
  246. } else {
  247. Object.assign(item, { isDown: true, precent: 100 });
  248. if (this.persentList.length != 0) {
  249. this.persentList.forEach(pItem => {
  250. if (item.Id == pItem.Id) {
  251. Object.assign(item, { isDown: true, precent: pItem.precent ? pItem.precent : 0 });
  252. }
  253. });
  254. }
  255. }
  256. });
  257. this.tableData = res.Content;
  258. this.loading = false;
  259. resolve();
  260. });
  261. });
  262. }
  263. },
  264. //添加楼层文件
  265. addFloorFile() {
  266. this.addFloorFileVisible = true;
  267. },
  268. //以下是文件模型
  269. //打开替换文件模型
  270. repliaceModel(item) {
  271. this.replaceModelItem = item;
  272. this.repliceModelVisible = true;
  273. },
  274. // 上传模型文件
  275. uploadModelFIle(data) {
  276. // 在列表中添加
  277. this.persentList.push({
  278. Id: data.FloorModelId,
  279. precent: 0
  280. });
  281. let uploadClass = this.uploadClass();
  282. this.uploadClassList.push({
  283. obj: new uploadClass(data),
  284. Id: data.FloorModelId
  285. });
  286. },
  287. // 上传文件的类
  288. uploadClass() {
  289. let that = this;
  290. return class {
  291. constructor(data) {
  292. this.upload(data);
  293. }
  294. upload(data) {
  295. that.queryFloorFile(that.currentFolderId).then(() => {
  296. // 开始上传文件
  297. // 开始处理数据
  298. let formData = new FormData();
  299. formData.append(
  300. "model",
  301. JSON.stringify({
  302. FloorModelId: data.FloorModelId,
  303. Id: data.CurrentModelId
  304. })
  305. );
  306. formData.append("file", data.Form.file.raw);
  307. // 处理数据结束
  308. // 修改isdown得值
  309. that.tableData.map(item => {
  310. if (item.Id == data.FloorModelId) {
  311. item.isDown = true;
  312. item.precent = 0;
  313. }
  314. });
  315. // 开始上传
  316. request.uploadModelFile(
  317. formData,
  318. that.projectId,
  319. res => {
  320. let loaded = res.loaded, //加载量
  321. total = res.total; //文件大小
  322. that.$nextTick(() => {
  323. let precent = Math.round((loaded / total) * 100);
  324. // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
  325. if (that.persentList.length != 0) {
  326. that.persentList.map(item => {
  327. if (item.Id == data.FloorModelId) {
  328. item.precent = precent;
  329. }
  330. });
  331. }
  332. });
  333. },
  334. val => {
  335. if (val.data.Result === "success") {
  336. if (that.persentList.length != 0) {
  337. //深拷贝
  338. let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
  339. persentListCopy.forEach((item, index) => {
  340. if (item.Id == data.FloorModelId) {
  341. // item.precent = 101;
  342. that.persentList.splice(index, 1);
  343. that.uploadClassList.splice(index, 1);
  344. return;
  345. }
  346. });
  347. }
  348. that.$message({ message: "文件上传成功", type: "success" });
  349. // 刷新list列表
  350. that.queryFloorFile(that.currentFolderId);
  351. } else {
  352. if (that.persentList.length != 0) {
  353. //深拷贝
  354. let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
  355. persentListCopy.forEach((item, index) => {
  356. if (item.Id == data.FloorModelId) {
  357. // item.precent = 101;
  358. that.persentList.splice(index, 1);
  359. that.uploadClassList.splice(index, 1);
  360. return;
  361. }
  362. });
  363. }
  364. that.$message({
  365. message: val.data.Message,
  366. type: "error"
  367. });
  368. // 刷新list列表
  369. that.queryFloorFile(that.currentFolderId);
  370. }
  371. }
  372. );
  373. });
  374. }
  375. };
  376. },
  377. //更新模型文件;
  378. updateModelFile(data) {
  379. this.persentList.push({
  380. Id: data.replaceModelItem.Id,
  381. precent: 0
  382. });
  383. // 修改isdown得值
  384. this.tableData.map(item => {
  385. if (item.Id == data.replaceModelItem.Id) {
  386. item.isDown = true;
  387. item.precent = 0;
  388. }
  389. });
  390. // 开始上传
  391. let updataclass = this.updateModelClass();
  392. this.uploadClassList.push({
  393. obj: new updataclass(data),
  394. Id: data.replaceModelItem.Id
  395. });
  396. },
  397. // 更新文件的类
  398. updateModelClass() {
  399. let that = this;
  400. // 开始上传
  401. return class {
  402. constructor(data) {
  403. this.upDateModel(data);
  404. }
  405. upDateModel(data) {
  406. request.upDateModelFile(
  407. data,
  408. that.projectId,
  409. that.userInfo.userName,
  410. that.userInfo.userId,
  411. res => {
  412. let loaded = res.loaded, //加载量
  413. total = res.total; //文件大小
  414. that.$nextTick(() => {
  415. let precent = Math.round((loaded / total) * 100);
  416. // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
  417. if (that.persentList.length != 0) {
  418. that.persentList.map(item => {
  419. if (item.Id == data.replaceModelItem.Id) {
  420. item.precent = precent;
  421. }
  422. });
  423. }
  424. });
  425. },
  426. val => {
  427. if (val.data.Result === "success") {
  428. if (that.persentList.length != 0) {
  429. //深拷贝
  430. let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
  431. persentListCopy.forEach((item, index) => {
  432. if (item.Id == data.replaceModelItem.Id) {
  433. // item.precent = 101;
  434. that.persentList.splice(index, 1);
  435. that.uploadClassList.splice(index, 1);
  436. return;
  437. }
  438. });
  439. }
  440. that.$message({
  441. message: "文件上传成功",
  442. type: "success"
  443. });
  444. // 刷新list列表
  445. that.queryFloorFile(that.currentFolderId);
  446. } else {
  447. if (that.persentList.length != 0) {
  448. //深拷贝
  449. let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
  450. persentListCopy.forEach((item, index) => {
  451. if (item.Id == data.FloorModelId) {
  452. // item.precent = 101;
  453. that.persentList.splice(index, 1);
  454. that.uploadClassList.splice(index, 1);
  455. return;
  456. }
  457. });
  458. }
  459. that.$message({
  460. message: val.data.Message,
  461. type: "error"
  462. });
  463. // 刷新list列表
  464. that.queryFloorFile(that.currentFolderId);
  465. }
  466. }
  467. );
  468. }
  469. };
  470. },
  471. //查看模型日志
  472. queryModelLog(item) {
  473. this.FloorModelId = item.Id; //楼层模型文件
  474. request.queryModelFile(this.FloorModelId, res => {
  475. this.logData = res.Content;
  476. this.modelLogVisible = true;
  477. });
  478. },
  479. // 刷新日志
  480. updataLog() {
  481. request.queryModelFile(this.FloorModelId, res => {
  482. this.logData = res.Content;
  483. });
  484. },
  485. // 删除上传列表item
  486. removePersentList(item) {
  487. this.uploadClassList.forEach((i, index) => {
  488. if (item.Id == i.Id) {
  489. // this.$delete(this.uploadClassList, index);
  490. this.uploadClassList.splice(index, 1);
  491. return;
  492. }
  493. });
  494. this.persentList.forEach((i, index) => {
  495. if (item.Id == i.Id) {
  496. this.$delete(this.persentList, index);
  497. return;
  498. }
  499. });
  500. this.$message({
  501. message: "中止上传!",
  502. type: "success"
  503. });
  504. // 刷新list列表
  505. that.queryFloorFile(that.currentFolderId);
  506. }
  507. },
  508. watch: {
  509. uploadClassList: {
  510. deep: true,
  511. handler: function (val) {
  512. console.log(val);
  513. }
  514. },
  515. projectId() {
  516. this.queryModel()
  517. }
  518. },
  519. mounted() {
  520. this.queryModel();
  521. Bus.$on('modelStatusChange', message => {
  522. this.queryFloorFile(this.currentFolderId);
  523. })
  524. // 十秒刷新次楼层列表
  525. // setInterval(()=>{
  526. // this.queryFloorFile(this.currentFolderId)
  527. // },10000)
  528. }
  529. };
  530. </script>
  531. <style lang="less" scoped>
  532. #file_moddle_manage {
  533. width: 100%;
  534. height: 100%;
  535. overflow: hidden !important;
  536. .col_left {
  537. height: 100%;
  538. }
  539. .grid-content {
  540. height: 100%;
  541. }
  542. .box-card {
  543. height: 100%;
  544. }
  545. .grid-left {
  546. padding-right: 10px;
  547. box-sizing: border-box;
  548. }
  549. // 顶部
  550. .top_hand {
  551. height: 60px;
  552. width: 100%;
  553. padding: 10px;
  554. box-sizing: border-box;
  555. display: flex;
  556. }
  557. .left_top_hand {
  558. align-items: center;
  559. justify-content: space-between;
  560. .folder-box {
  561. display: flex;
  562. height: 40px;
  563. flex-direction: row;
  564. }
  565. .box-icon {
  566. width: 40px;
  567. height: 40px;
  568. font-size: 30px;
  569. display: flex;
  570. justify-content: center;
  571. align-items: center;
  572. float: left;
  573. }
  574. }
  575. // 左侧文件夹列表
  576. .folder-list {
  577. width: 100%;
  578. height: calc(100% - 60px);
  579. .head {
  580. height: 42px;
  581. width: 100%;
  582. padding-left: 10px;
  583. box-sizing: border-box;
  584. background: #d9d9d9;
  585. color: #2b2b2b;
  586. display: flex;
  587. justify-content: left;
  588. align-items: center;
  589. font-weight: bold;
  590. }
  591. .lists {
  592. width: 100%;
  593. margin-top: 10px;
  594. height: calc(100% - 52px);
  595. overflow-y: auto;
  596. li {
  597. height: 42px;
  598. display: flex;
  599. justify-content: left;
  600. align-items: center;
  601. padding-left: 20px;
  602. box-sizing: border-box;
  603. color: #555;
  604. cursor: pointer;
  605. span {
  606. padding-left: 6px;
  607. }
  608. }
  609. li:hover {
  610. background-color: #f5f7fa;
  611. color: #000;
  612. }
  613. .li-active {
  614. background-color: #f5f7fa;
  615. color: #000;
  616. }
  617. }
  618. }
  619. .icon_font {
  620. font-size: 18px;
  621. }
  622. }
  623. /deep/ .el-scrollbar__wrap {
  624. overflow-x: hidden;
  625. }
  626. </style>