index.vue 18 KB

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