index.vue 20 KB

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