index.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. <template>
  2. <div id="file_moddle_manage" v-loading="loading">
  3. <!-- 左边模型文件夹列表 -->
  4. <el-col :span="5">
  5. <div class="grid-content grid-left">
  6. <el-card class="box-card" :body-style="{ padding: '0px' }">
  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. <li
  26. @click="openFolder(index,item)"
  27. v-for="(item,index) in navigationModel"
  28. :key="index"
  29. :class="[choiceIndex == index + 1 ? 'li-active' : '']"
  30. >
  31. <i
  32. :class="[choiceIndex == index + 1 ? 'el-icon-folder-opened':'el-icon-folder','icon_font']"
  33. width="40"
  34. height="40"
  35. ></i>
  36. <span>{{item.Name}}</span>
  37. </li>
  38. </ul>
  39. </div>
  40. </el-card>
  41. </div>
  42. </el-col>
  43. <!-- 右边文件表格 -->
  44. <el-col :span="19">
  45. <el-card class="box-card" :body-style="{ padding: '0px' }">
  46. <!-- 顶部操作栏 -->
  47. <div class="top_hand right_top_hand">
  48. <el-button @click="addFloorFile">添加楼层文件</el-button>
  49. <el-button @click="queryFloorFile(currentFolderId)">刷新</el-button>
  50. </div>
  51. <!-- 列表 -->
  52. <floorTable
  53. ref="floorTable"
  54. :tableData="tableData"
  55. @openModelLog="queryModelLog"
  56. @replaceModel="repliaceModel"
  57. :ceshiList="ceshiList"
  58. ></floorTable>
  59. </el-card>
  60. </el-col>
  61. <!-- 弹窗 开始-->
  62. <!-- 模型日志弹窗 -->
  63. <modelLog
  64. :modelLogVisible="modelLogVisible"
  65. @deleteFinish="updataLog"
  66. @CloseModelLogDia="modelLogVisible=false"
  67. :logData="logData"
  68. ></modelLog>
  69. <!-- 替换模型弹窗 -->
  70. <repliceModel
  71. :repliceModelVisible="repliceModelVisible"
  72. @closeReplaceModelDia="repliceModelVisible=false"
  73. :replaceModelItem="replaceModelItem"
  74. @updataModel="updateModelFile"
  75. ></repliceModel>
  76. <!-- 新增楼层 -->
  77. <addFloorDialog
  78. :addFloorFileVisible="addFloorFileVisible"
  79. :FolderName="currentFolderName"
  80. :FolderId="currentFolderId"
  81. @closeAddFloorDia="addFloorFileVisible=false"
  82. @finishCreateFloor="uploadModelFIle"
  83. ></addFloorDialog>
  84. <!-- 新增文件夹名称 -->
  85. <addFolder
  86. :addFolderVisible="addFolderVisible"
  87. @closeAddFolderVisible="addFolderVisible=false;folderName=''"
  88. :folderName="folderName"
  89. @getfolderModel="queryModel"
  90. ></addFolder>
  91. <!-- 编辑文件夹名字 -->
  92. <changeFolderName
  93. :currentFolderId="currentFolderId"
  94. :changeFolderNameVisible="changeFolderNameVisible"
  95. :folderName="folderName"
  96. @finishChangeFolderName="queryModel"
  97. @closeChangeFolderVisible="changeFolderNameVisible=false;folderName=''"
  98. ></changeFolderName>
  99. <!-- 弹窗 结束-->
  100. </div>
  101. </template>
  102. <script>
  103. import { mapGetters } from "vuex";
  104. import request from "@/api/model/file.js";
  105. import dasBoard from "@/views/dasboard/index";
  106. import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
  107. import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
  108. import addFloorDialog from "@/components/model/file/addFloorDialog"; //新增楼层弹窗
  109. import addFolder from "@/components/model/file/addFolder"; //新增文件夹
  110. import changeFolderName from "@/components/model/file/changeFolderName"; //编辑名字
  111. import floorTable from "@/components/model/file/floorTable"; //右侧list表
  112. export default {
  113. computed: {
  114. ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
  115. },
  116. components: {
  117. dasBoard,
  118. modelLog,
  119. repliceModel,
  120. addFloorDialog,
  121. addFolder,
  122. changeFolderName,
  123. floorTable
  124. },
  125. data() {
  126. return {
  127. addFolderVisible: false, //是否显示新增文件夹弹窗
  128. addFloorFileVisible: false, //是否显示增加楼层文件弹窗
  129. repliceModelVisible: false, //是否显示替换楼层模型弹窗
  130. modelLogVisible: false, //是否显示模型日志弹窗
  131. changeFolderNameVisible: false, //是否显示编辑文件夹弹窗
  132. folderName: "", //新建文件夹名称
  133. navigationModel: [
  134. {
  135. Name: ""
  136. }
  137. ], //文件夹模型list
  138. choiceIndex: 0, //当前文件夹index
  139. currentFolderId: "", //当前选择的文件夹id
  140. currentFolderName: "", //当前选择文件夹的Name
  141. currentFloorModelId: "", //当前选择的楼层文件id
  142. tableData: [],
  143. loading: false, //加载loading
  144. logData: [], //楼层文件对应的模型日志
  145. replaceModelItem: null, //替换文件的item
  146. uploadFloorModelIdList: [], //上传楼层文件得数组,上传完成则为空
  147. //请求头
  148. headers: {
  149. ProjectId: ""
  150. },
  151. updataData: {
  152. model: {}
  153. },
  154. ceshiList: [
  155. {
  156. Id: "239ce3d4c33811e993aceb3be9a05be5",
  157. precent: 0
  158. },
  159. {
  160. Id: "7d30fd76c33b11e993ac11710b8cb126",
  161. precent: 0
  162. }
  163. ]
  164. };
  165. },
  166. methods: {
  167. // 以下是模型文件夹
  168. // 打开模型文件夹
  169. openFolder(index, item) {
  170. this.choiceIndex = index + 1;
  171. this.currentFolderId = item.Id;
  172. this.currentFolderName = item.Name;
  173. // 获取模型文件夹对应得楼层文件
  174. this.queryFloorFile(this.currentFolderId);
  175. },
  176. //新增模型文件夹
  177. addFolder() {
  178. this.folderName = "";
  179. this.addFolderVisible = true;
  180. },
  181. //删除模型文件夹
  182. removeFolder() {
  183. this.$alert(`确定要删除文件夹 <${this.currentFolderName}> 吗?`, "提示", {
  184. confirmButtonText: "确定",
  185. callback: action => {
  186. if (action == "confirm") {
  187. let params = {
  188. Id: this.currentFolderId,
  189. ProjectId: this.projectId
  190. };
  191. request.deleteModel(params, res => {
  192. this.$message({
  193. message: "删除成功!",
  194. type: "success"
  195. });
  196. this.queryModel();
  197. });
  198. } else {
  199. this.$message({
  200. type: "info",
  201. message: `取消操作`
  202. });
  203. }
  204. }
  205. });
  206. },
  207. //编辑文件夹
  208. editFolder() {
  209. this.folderName = this.currentFolderName;
  210. this.changeFolderNameVisible = true;
  211. },
  212. // 查询所有文件夹模型
  213. queryModel() {
  214. this.loading = true;
  215. request.queryModel("", res => {
  216. this.navigationModel = res.Content;
  217. //默认选择第一个文件夹
  218. this.choiceIndex = 1;
  219. this.currentFolderName = this.navigationModel[0].Name;
  220. this.currentFolderId = this.navigationModel[0].Id;
  221. this.loading = false;
  222. this.queryFloorFile(this.currentFolderId);
  223. });
  224. },
  225. ///一下是楼层文件
  226. //获取楼层文件
  227. /**
  228. * @param currentFolderId 当前选择得楼层id
  229. */
  230. queryFloorFile(currentFolderId) {
  231. let data = {
  232. FolderId: currentFolderId,
  233. ProjectId: this.projectId
  234. };
  235. return new Promise((resolve, reject) => {
  236. request.queryFloorList(data, res => {
  237. res.Content.map(item => {
  238. Object.assign(item, { isDown: false, precent: 0 });
  239. });
  240. this.tableData = res.Content;
  241. this.loading = false;
  242. resolve();
  243. //测试代码
  244. this.ceshi();
  245. });
  246. });
  247. },
  248. ceshi() {
  249. // let a = setInterval(() => {
  250. // this.ceshiList[0].precent += 5 ;
  251. // this.ceshiList[1].precent += 8
  252. // if (this.ceshiList[0] >= 100) {
  253. // clearInterval(a);
  254. // }
  255. // }, 1000);
  256. },
  257. //添加楼层文件
  258. addFloorFile() {
  259. this.addFloorFileVisible = true;
  260. },
  261. //以下是文件模型
  262. //打开替换文件模型
  263. repliaceModel(item) {
  264. this.replaceModelItem = item;
  265. this.repliceModelVisible = true;
  266. },
  267. // 上传模型文件
  268. uploadModelFIle(data) {
  269. // 在列表中添加
  270. this.ceshiList.push({
  271. Id: data.FloorModelId,
  272. precent: 0
  273. });
  274. // 获取当前文件夹下所有模型文件
  275. this.queryFloorFile(this.currentFolderId).then(() => {
  276. // 开始上传文件
  277. // 开始处理数据
  278. let formData = new FormData();
  279. formData.append(
  280. "model",
  281. JSON.stringify({
  282. FloorModelId: data.FloorModelId,
  283. Id: data.CurrentModelId
  284. })
  285. );
  286. formData.append("file", data.Form.file.raw);
  287. // 处理数据结束
  288. // 修改isdown得值
  289. this.tableData.map(item => {
  290. if (item.Id == data.FloorModelId) {
  291. item.isDown = true;
  292. item.precent = 0;
  293. }
  294. });
  295. // 开始上传
  296. request.uploadModelFile(
  297. formData,
  298. this.projectId,
  299. res => {
  300. let loaded = res.loaded, //加载量
  301. total = res.total; //文件大小
  302. this.$nextTick(() => {
  303. let precent = Math.round((loaded / total) * 100);
  304. // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
  305. this.ceshiList.map(item => {
  306. if (item.Id == data.FloorModelId) {
  307. item.precent = precent
  308. }
  309. });
  310. });
  311. },
  312. res => {
  313. if (res.code === "200") {
  314. this.$message({
  315. message: "文件上传成功",
  316. type: "success"
  317. });
  318. }
  319. }
  320. );
  321. });
  322. },
  323. //更新模型文件;
  324. updateModelFile(data) {
  325. // 修改isdown得值
  326. this.tableData.map(item => {
  327. if (item.Id == data.FloorModelId) {
  328. item.isDown = true;
  329. item.precent = 0;
  330. }
  331. });
  332. // 开始上传
  333. request.upDateModelFile(
  334. data,
  335. this.projectId,
  336. this.userInfo.username,
  337. res => {
  338. let loaded = res.loaded, //加载量
  339. total = res.total; //文件大小
  340. this.$nextTick(() => {
  341. let precent = Math.round((loaded / total) * 100);
  342. this.$refs.floorTable.filterTag(data.FloorModelId, precent);
  343. });
  344. },
  345. res => {
  346. if (res.code === "200") {
  347. this.$message({
  348. message: "文件上传成功",
  349. type: "success"
  350. });
  351. }
  352. }
  353. );
  354. },
  355. //查看模型日志
  356. queryModelLog(item) {
  357. this.FloorModelId = item.Id; //楼层模型文件
  358. request.queryModelFile(this.FloorModelId, res => {
  359. this.logData = res.Content;
  360. this.modelLogVisible = true;
  361. });
  362. },
  363. // 刷新日志
  364. updataLog() {
  365. request.queryModelFile(this.FloorModelId, res => {
  366. this.logData = res.Content;
  367. });
  368. }
  369. },
  370. mounted() {
  371. this.queryModel();
  372. }
  373. };
  374. </script>
  375. <style lang="less" scoped>
  376. #file_moddle_manage {
  377. width: 100%;
  378. .box-card {
  379. min-height: 700px;
  380. }
  381. .grid-left {
  382. padding-right: 10px;
  383. box-sizing: border-box;
  384. }
  385. // 顶部
  386. .top_hand {
  387. height: 60px;
  388. width: 100%;
  389. padding: 10px;
  390. box-sizing: border-box;
  391. display: flex;
  392. }
  393. .left_top_hand {
  394. align-items: center;
  395. justify-content: space-between;
  396. .folder-box {
  397. display: flex;
  398. height: 40px;
  399. flex-direction: row;
  400. }
  401. .box-icon {
  402. width: 40px;
  403. height: 40px;
  404. font-size: 30px;
  405. display: flex;
  406. justify-content: center;
  407. align-items: center;
  408. float: left;
  409. }
  410. }
  411. // 左侧文件夹列表
  412. .folder-list {
  413. width: 100%;
  414. .head {
  415. height: 42px;
  416. width: 100%;
  417. padding-left: 10px;
  418. box-sizing: border-box;
  419. background: #ccc;
  420. color: #000;
  421. display: flex;
  422. justify-content: left;
  423. align-items: center;
  424. font-weight: bold;
  425. }
  426. .lists {
  427. width: 100%;
  428. margin-top: 10px;
  429. li {
  430. height: 42px;
  431. display: flex;
  432. justify-content: left;
  433. align-items: center;
  434. padding-left: 20px;
  435. box-sizing: border-box;
  436. cursor: pointer;
  437. span {
  438. padding-left: 6px;
  439. }
  440. }
  441. li:hover {
  442. background: rgb(240, 238, 238);
  443. font-weight: bold;
  444. }
  445. .li-active {
  446. background: rgb(240, 238, 238);
  447. font-weight: bold;
  448. }
  449. }
  450. }
  451. .icon_font {
  452. font-size: 18px;
  453. }
  454. }
  455. </style>