123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464 |
- <template>
- <div id="file_moddle_manage" v-loading="loading">
- <!-- 左边模型文件夹列表 -->
- <el-col :span="5">
- <div class="grid-content grid-left">
- <el-card class="box-card" :body-style="{ padding: '0px' }">
- <div class="top_hand left_top_hand">
- <div class="folder-box">
- <el-tooltip class="item" effect="dark" content="新建文件夹" placement="top-start">
- <el-button icon="el-icon-folder-add" @click="addFolder" class="icon_font"></el-button>
- </el-tooltip>
- <el-tooltip class="item" effect="dark" content="删除文件夹" placement="top-start">
- <el-button icon="el-icon-folder-remove" class="icon_font" @click="removeFolder"></el-button>
- </el-tooltip>
- </div>
- <div class="file-box">
- <el-tooltip class="item" effect="dark" content="编辑文件夹" placement="top-start">
- <el-button @click="editFolder" icon="el-icon-edit" class="icon_font"></el-button>
- </el-tooltip>
- </div>
- </div>
- <div class="folder-list">
- <div class="head">模型文件夹</div>
- <ul class="lists">
- <li
- @click="openFolder(index,item)"
- v-for="(item,index) in navigationModel"
- :key="index"
- :class="[choiceIndex == index + 1 ? 'li-active' : '']"
- >
- <i
- :class="[choiceIndex == index + 1 ? 'el-icon-folder-opened':'el-icon-folder','icon_font']"
- width="40"
- height="40"
- ></i>
- <span>{{item.Name}}</span>
- </li>
- </ul>
- </div>
- </el-card>
- </div>
- </el-col>
- <!-- 右边文件表格 -->
- <el-col :span="19">
- <el-card class="box-card" :body-style="{ padding: '0px' }">
- <!-- 顶部操作栏 -->
- <div class="top_hand right_top_hand">
- <el-button @click="addFloorFile">添加楼层文件</el-button>
- <el-button @click="queryFloorFile(currentFolderId)">刷新</el-button>
- </div>
- <!-- 列表 -->
- <floorTable
- ref="floorTable"
- :tableData="tableData"
- @openModelLog="queryModelLog"
- @replaceModel="repliaceModel"
- :ceshiList="ceshiList"
- ></floorTable>
- </el-card>
- </el-col>
- <!-- 弹窗 开始-->
- <!-- 模型日志弹窗 -->
- <modelLog
- :modelLogVisible="modelLogVisible"
- @deleteFinish="updataLog"
- @CloseModelLogDia="modelLogVisible=false"
- :logData="logData"
- ></modelLog>
- <!-- 替换模型弹窗 -->
- <repliceModel
- :repliceModelVisible="repliceModelVisible"
- @closeReplaceModelDia="repliceModelVisible=false"
- :replaceModelItem="replaceModelItem"
- @updataModel="updateModelFile"
- ></repliceModel>
- <!-- 新增楼层 -->
- <addFloorDialog
- :addFloorFileVisible="addFloorFileVisible"
- :FolderName="currentFolderName"
- :FolderId="currentFolderId"
- @closeAddFloorDia="addFloorFileVisible=false"
- @finishCreateFloor="uploadModelFIle"
- ></addFloorDialog>
- <!-- 新增文件夹名称 -->
- <addFolder
- :addFolderVisible="addFolderVisible"
- @closeAddFolderVisible="addFolderVisible=false;folderName=''"
- :folderName="folderName"
- @getfolderModel="queryModel"
- ></addFolder>
- <!-- 编辑文件夹名字 -->
- <changeFolderName
- :currentFolderId="currentFolderId"
- :changeFolderNameVisible="changeFolderNameVisible"
- :folderName="folderName"
- @finishChangeFolderName="queryModel"
- @closeChangeFolderVisible="changeFolderNameVisible=false;folderName=''"
- ></changeFolderName>
- <!-- 弹窗 结束-->
- </div>
- </template>
- <script>
- import { mapGetters } from "vuex";
- import request from "@/api/model/file.js";
- import dasBoard from "@/views/dasboard/index";
- import modelLog from "@/components/model/file/modelLog"; //模型日志弹窗
- import repliceModel from "@/components/model/file/replaceModelDialog"; //替换模型弹窗
- import addFloorDialog from "@/components/model/file/addFloorDialog"; //新增楼层弹窗
- import addFolder from "@/components/model/file/addFolder"; //新增文件夹
- import changeFolderName from "@/components/model/file/changeFolderName"; //编辑名字
- import floorTable from "@/components/model/file/floorTable"; //右侧list表
- export default {
- computed: {
- ...mapGetters("layout", ["projectId", "userInfo", "userId", "secret"])
- },
- components: {
- dasBoard,
- modelLog,
- repliceModel,
- addFloorDialog,
- addFolder,
- changeFolderName,
- floorTable
- },
- data() {
- return {
- addFolderVisible: false, //是否显示新增文件夹弹窗
- addFloorFileVisible: false, //是否显示增加楼层文件弹窗
- repliceModelVisible: false, //是否显示替换楼层模型弹窗
- modelLogVisible: false, //是否显示模型日志弹窗
- changeFolderNameVisible: false, //是否显示编辑文件夹弹窗
- folderName: "", //新建文件夹名称
- navigationModel: [
- {
- Name: ""
- }
- ], //文件夹模型list
- choiceIndex: 0, //当前文件夹index
- currentFolderId: "", //当前选择的文件夹id
- currentFolderName: "", //当前选择文件夹的Name
- currentFloorModelId: "", //当前选择的楼层文件id
- tableData: [],
- loading: false, //加载loading
- logData: [], //楼层文件对应的模型日志
- replaceModelItem: null, //替换文件的item
- uploadFloorModelIdList: [], //上传楼层文件得数组,上传完成则为空
- //请求头
- headers: {
- ProjectId: ""
- },
- updataData: {
- model: {}
- },
- ceshiList: [
- {
- Id: "239ce3d4c33811e993aceb3be9a05be5",
- precent: 0
- },
- {
- Id: "7d30fd76c33b11e993ac11710b8cb126",
- precent: 0
- }
- ]
- };
- },
- methods: {
- // 以下是模型文件夹
- // 打开模型文件夹
- openFolder(index, item) {
- this.choiceIndex = index + 1;
- this.currentFolderId = item.Id;
- this.currentFolderName = item.Name;
- // 获取模型文件夹对应得楼层文件
- this.queryFloorFile(this.currentFolderId);
- },
- //新增模型文件夹
- addFolder() {
- this.folderName = "";
- this.addFolderVisible = true;
- },
- //删除模型文件夹
- removeFolder() {
- this.$alert(`确定要删除文件夹 <${this.currentFolderName}> 吗?`, "提示", {
- confirmButtonText: "确定",
- callback: action => {
- if (action == "confirm") {
- let params = {
- Id: this.currentFolderId,
- ProjectId: this.projectId
- };
- request.deleteModel(params, res => {
- this.$message({
- message: "删除成功!",
- type: "success"
- });
- this.queryModel();
- });
- } else {
- this.$message({
- type: "info",
- message: `取消操作`
- });
- }
- }
- });
- },
- //编辑文件夹
- editFolder() {
- this.folderName = this.currentFolderName;
- this.changeFolderNameVisible = true;
- },
- // 查询所有文件夹模型
- queryModel() {
- this.loading = true;
- request.queryModel("", res => {
- this.navigationModel = res.Content;
- //默认选择第一个文件夹
- this.choiceIndex = 1;
- this.currentFolderName = this.navigationModel[0].Name;
- this.currentFolderId = this.navigationModel[0].Id;
- this.loading = false;
- this.queryFloorFile(this.currentFolderId);
- });
- },
- ///一下是楼层文件
- //获取楼层文件
- /**
- * @param currentFolderId 当前选择得楼层id
- */
- queryFloorFile(currentFolderId) {
- let data = {
- FolderId: currentFolderId,
- ProjectId: this.projectId
- };
- return new Promise((resolve, reject) => {
- request.queryFloorList(data, res => {
- res.Content.map(item => {
- Object.assign(item, { isDown: false, precent: 0 });
- });
- this.tableData = res.Content;
- this.loading = false;
- resolve();
- //测试代码
- this.ceshi();
- });
- });
- },
- ceshi() {
- // let a = setInterval(() => {
- // this.ceshiList[0].precent += 5 ;
- // this.ceshiList[1].precent += 8
- // if (this.ceshiList[0] >= 100) {
- // clearInterval(a);
- // }
- // }, 1000);
- },
- //添加楼层文件
- addFloorFile() {
- this.addFloorFileVisible = true;
- },
- //以下是文件模型
- //打开替换文件模型
- repliaceModel(item) {
- this.replaceModelItem = item;
- this.repliceModelVisible = true;
- },
- // 上传模型文件
- uploadModelFIle(data) {
- // 在列表中添加
- this.ceshiList.push({
- Id: data.FloorModelId,
- precent: 0
- });
- // 获取当前文件夹下所有模型文件
- this.queryFloorFile(this.currentFolderId).then(() => {
- // 开始上传文件
- // 开始处理数据
- let formData = new FormData();
- formData.append(
- "model",
- JSON.stringify({
- FloorModelId: data.FloorModelId,
- Id: data.CurrentModelId
- })
- );
- formData.append("file", data.Form.file.raw);
- // 处理数据结束
- // 修改isdown得值
- this.tableData.map(item => {
- if (item.Id == data.FloorModelId) {
- item.isDown = true;
- item.precent = 0;
- }
- });
- // 开始上传
- request.uploadModelFile(
- formData,
- this.projectId,
- res => {
- let loaded = res.loaded, //加载量
- total = res.total; //文件大小
- this.$nextTick(() => {
- let precent = Math.round((loaded / total) * 100);
- // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
- this.ceshiList.map(item => {
- if (item.Id == data.FloorModelId) {
- item.precent = precent
- }
- });
- });
- },
- res => {
- if (res.code === "200") {
- this.$message({
- message: "文件上传成功",
- type: "success"
- });
- }
- }
- );
- });
- },
- //更新模型文件;
- updateModelFile(data) {
- // 修改isdown得值
- this.tableData.map(item => {
- if (item.Id == data.FloorModelId) {
- item.isDown = true;
- item.precent = 0;
- }
- });
- // 开始上传
- request.upDateModelFile(
- data,
- this.projectId,
- this.userInfo.username,
- res => {
- let loaded = res.loaded, //加载量
- total = res.total; //文件大小
- this.$nextTick(() => {
- let precent = Math.round((loaded / total) * 100);
- this.$refs.floorTable.filterTag(data.FloorModelId, precent);
- });
- },
- res => {
- if (res.code === "200") {
- this.$message({
- message: "文件上传成功",
- type: "success"
- });
- }
- }
- );
- },
- //查看模型日志
- queryModelLog(item) {
- this.FloorModelId = item.Id; //楼层模型文件
- request.queryModelFile(this.FloorModelId, res => {
- this.logData = res.Content;
- this.modelLogVisible = true;
- });
- },
- // 刷新日志
- updataLog() {
- request.queryModelFile(this.FloorModelId, res => {
- this.logData = res.Content;
- });
- }
- },
- mounted() {
- this.queryModel();
- }
- };
- </script>
- <style lang="less" scoped>
- #file_moddle_manage {
- width: 100%;
- .box-card {
- min-height: 700px;
- }
- .grid-left {
- padding-right: 10px;
- box-sizing: border-box;
- }
- // 顶部
- .top_hand {
- height: 60px;
- width: 100%;
- padding: 10px;
- box-sizing: border-box;
- display: flex;
- }
- .left_top_hand {
- align-items: center;
- justify-content: space-between;
- .folder-box {
- display: flex;
- height: 40px;
- flex-direction: row;
- }
- .box-icon {
- width: 40px;
- height: 40px;
- font-size: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- float: left;
- }
- }
- // 左侧文件夹列表
- .folder-list {
- width: 100%;
- .head {
- height: 42px;
- width: 100%;
- padding-left: 10px;
- box-sizing: border-box;
- background: #ccc;
- color: #000;
- display: flex;
- justify-content: left;
- align-items: center;
- font-weight: bold;
- }
- .lists {
- width: 100%;
- margin-top: 10px;
- li {
- height: 42px;
- display: flex;
- justify-content: left;
- align-items: center;
- padding-left: 20px;
- box-sizing: border-box;
- cursor: pointer;
- span {
- padding-left: 6px;
- }
- }
- li:hover {
- background: rgb(240, 238, 238);
- font-weight: bold;
- }
- .li-active {
- background: rgb(240, 238, 238);
- font-weight: bold;
- }
- }
- }
- .icon_font {
- font-size: 18px;
- }
- }
- </style>
|