123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634 |
- <template>
- <div id="file_moddle_manage" v-loading="loading">
- <!-- 左边模型文件夹列表 -->
- <el-col class="col_left" :span="5">
- <div class="grid-content grid-left">
- <el-card class="box-card" :body-style="{ padding: '0px', height: '100%' }">
- <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">
- <el-scrollbar style="height:100%;">
- <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>
- </el-scrollbar>
- </ul>
- </div>
- </el-card>
- </div>
- </el-col>
- <!-- 右边文件表格 -->
- <el-col class="col_left" :span="19">
- <el-card class="box-card" :body-style="{ padding: '0px', height:'100%' }">
- <!-- 顶部操作栏 -->
- <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" :modelFolderName="currentFolderName" @openModelLog="queryModelLog"
- @replaceModel="repliaceModel" @closeUpdateFile="removePersentList" @percentFinish="queryFloorFile(currentFolderId)"
- :persentList="persentList"></floorTable>
- </el-card>
- </el-col>
- <!-- 弹窗 开始-->
- <!-- 模型日志弹窗 -->
- <modelLog :modelLogVisible="modelLogVisible" :modelFolderName="currentFolderName" @deleteFinish="updataLog"
- @CloseModelLogDia="modelLogVisible=false" :logData="logData"></modelLog>
- <!-- 替换模型弹窗 -->
- <repliceModel :repliceModelVisible="repliceModelVisible" @closeReplaceModelDia="repliceModelVisible=false" :replaceModelItem="replaceModelItem"
- @updataModel="updateModelFile"></repliceModel>
- <!-- 新增楼层 -->
- <addFloorDialog :addFloorFileVisible="addFloorFileVisible" :floorList="tableData" :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 Bus from '@/utils/bus.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 {
- // 离开此页面前要判断是是否有下载
- beforeRouteLeave: function (to, from, next) {
- console.log(this.uploadClassList);
- if (this.uploadClassList.length) {
- this.$alert(
- "您有正在上传的模型文件,切换菜单会中断上传,是否继续?",
- "提示",
- {
- confirmButtonText: "确定",
- callback: action => {
- console.log(action);
- if (action == "confirm") {
- next();
- } else {
- next(false);
- }
- }
- }
- );
- } else {
- next();
- }
- },
- 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: {}
- },
- persentList: [], //请求进度列表
- uploadClassList: [], //请求list 用与缓存多个请求问题
- isJump: true //是否可以调整页面
- };
- },
- // mounted() {
- // window.addEventListener('beforeunload', e => {
- // if (this.uploadClassList.length) {
- // window.localStorage.removeItem("当前页有下载内容,关闭或刷新页面下载将会失败。您确定要继续吗?")
- // }
- // })
- // },
- 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.loading = false;
- if (this.navigationModel.length) {
- //默认选择第一个文件夹
- this.choiceIndex = 1;
- this.currentFolderName = this.navigationModel[0].Name;
- this.currentFolderId = this.navigationModel[0].Id;
- this.queryFloorFile(this.currentFolderId);
- } else {
- this.tableData = []
- }
- });
- },
- ///一下是楼层文件
- //获取楼层文件
- /**
- * @param currentFolderId 当前选择的文件夹id
- */
- queryFloorFile(currentFolderId) {
- if(currentFolderId){
- let data = {
- FolderId: currentFolderId,
- ProjectId: this.projectId
- };
- return new Promise((resolve, reject) => {
- request.queryFloorList(data, res => {
- res.Content.map(item => {
- /**
- * @info: 状态显示说明
- * 0: 上传中(上传的用户可操作:中止)
- * 1: 等待检查
- * 10: 模型检查中
- * 11: 未通过检查
- * 2、20、21、3、31: 正常(所有用户可操作:下载、查看历史)
- * 4: 正常(所有用户可操作:下载、替换、查看历史)
- */
- if (item.Status == 2 || item.Status == 20 || item.Status == 21 || item.Status == 3 || item.Status == 31 || item.Status == 4) {
- Object.assign(item, { isDown: false, precent: 0 });
- } else {
- Object.assign(item, { isDown: true, precent: 100 });
- if (this.persentList.length != 0) {
- this.persentList.forEach(pItem => {
- if (item.Id == pItem.Id) {
- Object.assign(item, { isDown: true, precent: pItem.precent ? pItem.precent : 0 });
- }
- });
- }
- }
- });
- this.tableData = res.Content;
- this.loading = false;
- resolve();
- });
- });
- }
- },
- //添加楼层文件
- addFloorFile() {
- this.addFloorFileVisible = true;
- },
- //以下是文件模型
- //打开替换文件模型
- repliaceModel(item) {
- this.replaceModelItem = item;
- this.repliceModelVisible = true;
- },
- // 上传模型文件
- uploadModelFIle(data) {
- // 在列表中添加
- this.persentList.push({
- Id: data.FloorModelId,
- precent: 0
- });
- let uploadClass = this.uploadClass();
- this.uploadClassList.push({
- obj: new uploadClass(data),
- Id: data.FloorModelId
- });
- },
- // 上传文件的类
- uploadClass() {
- let that = this;
- return class {
- constructor(data) {
- this.upload(data);
- }
- upload(data) {
- that.queryFloorFile(that.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得值
- that.tableData.map(item => {
- if (item.Id == data.FloorModelId) {
- item.isDown = true;
- item.precent = 0;
- }
- });
- // 开始上传
- request.uploadModelFile(
- formData,
- that.projectId,
- res => {
- let loaded = res.loaded, //加载量
- total = res.total; //文件大小
- that.$nextTick(() => {
- let precent = Math.round((loaded / total) * 100);
- // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
- if (that.persentList.length != 0) {
- that.persentList.map(item => {
- if (item.Id == data.FloorModelId) {
- item.precent = precent;
- }
- });
- }
- });
- },
- val => {
- if (val.data.Result === "success") {
- if (that.persentList.length != 0) {
- //深拷贝
- let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
- persentListCopy.forEach((item, index) => {
- if (item.Id == data.FloorModelId) {
- // item.precent = 101;
- that.persentList.splice(index, 1);
- that.uploadClassList.splice(index, 1);
- return;
- }
- });
- }
- that.$message({ message: "文件上传成功", type: "success" });
- // 刷新list列表
- that.queryFloorFile(that.currentFolderId);
- } else {
- if (that.persentList.length != 0) {
- //深拷贝
- let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
- persentListCopy.forEach((item, index) => {
- if (item.Id == data.FloorModelId) {
- // item.precent = 101;
- that.persentList.splice(index, 1);
- that.uploadClassList.splice(index, 1);
- return;
- }
- });
- }
- that.$message({
- message: val.data.Message,
- type: "error"
- });
- // 刷新list列表
- that.queryFloorFile(that.currentFolderId);
- }
- }
- );
- });
- }
- };
- },
- //更新模型文件;
- updateModelFile(data) {
- this.persentList.push({
- Id: data.replaceModelItem.Id,
- precent: 0
- });
- // 修改isdown得值
- this.tableData.map(item => {
- if (item.Id == data.replaceModelItem.Id) {
- item.isDown = true;
- item.precent = 0;
- }
- });
- // 开始上传
- let updataclass = this.updateModelClass();
- this.uploadClassList.push({
- obj: new updataclass(data),
- Id: data.replaceModelItem.Id
- });
- },
- // 更新文件的类
- updateModelClass() {
- let that = this;
- // 开始上传
- return class {
- constructor(data) {
- this.upDateModel(data);
- }
- upDateModel(data) {
- request.upDateModelFile(
- data,
- that.projectId,
- that.userInfo.userName,
- that.userInfo.userId,
- res => {
- let loaded = res.loaded, //加载量
- total = res.total; //文件大小
- that.$nextTick(() => {
- let precent = Math.round((loaded / total) * 100);
- // this.$refs.floorTable.filterTag(data.FloorModelId, precent);
- if (that.persentList.length != 0) {
- that.persentList.map(item => {
- if (item.Id == data.replaceModelItem.Id) {
- item.precent = precent;
- }
- });
- }
- });
- },
- val => {
- if (val.data.Result === "success") {
- if (that.persentList.length != 0) {
- //深拷贝
- let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
- persentListCopy.forEach((item, index) => {
- if (item.Id == data.replaceModelItem.Id) {
- // item.precent = 101;
- that.persentList.splice(index, 1);
- that.uploadClassList.splice(index, 1);
- return;
- }
- });
- }
- that.$message({
- message: "文件上传成功",
- type: "success"
- });
- // 刷新list列表
- that.queryFloorFile(that.currentFolderId);
- } else {
- if (that.persentList.length != 0) {
- //深拷贝
- let persentListCopy = JSON.parse(JSON.stringify(that.persentList))
- persentListCopy.forEach((item, index) => {
- if (item.Id == data.FloorModelId) {
- // item.precent = 101;
- that.persentList.splice(index, 1);
- that.uploadClassList.splice(index, 1);
- return;
- }
- });
- }
- that.$message({
- message: val.data.Message,
- type: "error"
- });
- // 刷新list列表
- that.queryFloorFile(that.currentFolderId);
- }
- }
- );
- }
- };
- },
- //查看模型日志
- 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;
- });
- },
- // 删除上传列表item
- removePersentList(item) {
- this.uploadClassList.forEach((i, index) => {
- if (item.Id == i.Id) {
- // this.$delete(this.uploadClassList, index);
- this.uploadClassList.splice(index, 1);
- return;
- }
- });
- this.persentList.forEach((i, index) => {
- if (item.Id == i.Id) {
- this.$delete(this.persentList, index);
- return;
- }
- });
- this.$message({
- message: "中止上传!",
- type: "success"
- });
- // 刷新list列表
- that.queryFloorFile(that.currentFolderId);
- }
- },
- watch: {
- uploadClassList: {
- deep: true,
- handler: function (val) {
- console.log(val);
- }
- },
- projectId() {
- this.queryModel()
- }
- },
- mounted() {
- this.queryModel();
- Bus.$on('modelStatusChange', message => {
- this.queryFloorFile(this.currentFolderId);
- })
- // 十秒刷新次楼层列表
- // setInterval(()=>{
- // this.queryFloorFile(this.currentFolderId)
- // },10000)
- }
- };
- </script>
- <style lang="less" scoped>
- #file_moddle_manage {
- width: 100%;
- height: 100%;
- overflow: hidden !important;
- .col_left {
- height: 100%;
- }
- .grid-content {
- height: 100%;
- }
- .box-card {
- height: 100%;
- }
- .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%;
- height: calc(100% - 60px);
- .head {
- height: 42px;
- width: 100%;
- padding-left: 10px;
- box-sizing: border-box;
- background: #d9d9d9;
- color: #2b2b2b;
- display: flex;
- justify-content: left;
- align-items: center;
- font-weight: bold;
- }
- .lists {
- width: 100%;
- margin-top: 10px;
- height: calc(100% - 52px);
- overflow-y: auto;
- li {
- height: 42px;
- display: flex;
- justify-content: left;
- align-items: center;
- padding-left: 20px;
- box-sizing: border-box;
- color: #555;
- cursor: pointer;
- span {
- padding-left: 6px;
- }
- }
- li:hover {
- background-color: #f5f7fa;
- color: #000;
- }
- .li-active {
- background-color: #f5f7fa;
- color: #000;
- }
- }
- }
- .icon_font {
- font-size: 18px;
- }
- }
- /deep/ .el-scrollbar__wrap {
- overflow-x: hidden;
- }
- </style>
|