610 lines
19 KiB
Vue
610 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<div class="medium-home-container">
|
|||
|
|
<div class="medium-home-main">
|
|||
|
|
<div class="medium-home-main-top">
|
|||
|
|
<div class="medium-breadcrumb">
|
|||
|
|
<div v-for="item in paths" :key="item" class="breadcrumb-item" @click="changePath(item)">
|
|||
|
|
{{ item || '全部文件' }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="medium-home-top-btn">
|
|||
|
|
<div>
|
|||
|
|
<el-button size="small" @click="handleDelete(false)" type="danger"> 删除 </el-button>
|
|||
|
|
<el-button size="small" @click="handleDownload(false)" type="success"> 下载 </el-button>
|
|||
|
|
</div>
|
|||
|
|
<div class="medium-check">
|
|||
|
|
<div class="check-item">已选/全部：</div>
|
|||
|
|
<div class="check-item">{{ selectNum }}/{{ totle }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="medium-home-main-table">
|
|||
|
|
<el-table
|
|||
|
|
ref="multipleTable"
|
|||
|
|
:data="fileList"
|
|||
|
|
tooltip-effect="dark"
|
|||
|
|
stripe
|
|||
|
|
size="small"
|
|||
|
|
height="600"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
>
|
|||
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|||
|
|
<el-table-column prop="fileName" label="文件名称">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div
|
|||
|
|
class="file-name-wrapper"
|
|||
|
|
style="display: flex; align-items: center; cursor: pointer"
|
|||
|
|
@click="handleSelectFile(scope.row.path, scope.row)"
|
|||
|
|
>
|
|||
|
|
<img :src="scope.row.img" alt="" style="width: 16px; height: 16px; transform: translateY(-1px); margin-right: 2px" />
|
|||
|
|
<div class="file-name">{{ scope.row.name ? scope.row.name : scope.row.fileName }}</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="size" label="大小" width="80" show-overflow-tooltip> </el-table-column>
|
|||
|
|
<el-table-column prop="creatTime" label="创建时间">
|
|||
|
|
<template slot-scope="scope">{{ scope.row.creatTime }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column fixed="right" label="操作" width="120">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div class="opration-btns">
|
|||
|
|
<el-tooltip v-if="scope.row.size !== 'N/A'" class="item" content="下载" effect="dark">
|
|||
|
|
<!-- v-if="scope.row.size !== 'N/A'" -->
|
|||
|
|
<span class="opration-btn" style="display: inline-block; cursor: pointer" @click="handleDownload(scope.row)">
|
|||
|
|
<img :src="require('../../images/medium/down-load.png')" srcset="" />
|
|||
|
|
</span>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip v-if="scope.row.size !== 'N/A'" class="item" content="预览" effect="dark">
|
|||
|
|
<span class="opration-btn" style="display: inline-block; cursor: pointer" @click="handlePreview(scope.row)">
|
|||
|
|
<img :src="require('../../images/medium/prview-icon.png')" srcset="" />
|
|||
|
|
</span>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip class="item" content="删除" effect="dark">
|
|||
|
|
<span class="opration-btn" style="display: inline-block; cursor: pointer" @click="handleDelete(scope.row)">
|
|||
|
|
<img :src="require('../../images/medium/delete.png')" srcset="" />
|
|||
|
|
</span>
|
|||
|
|
</el-tooltip>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="shade" v-if="loading">
|
|||
|
|
<el-progress type="circle" :percentage="percentage"></el-progress>
|
|||
|
|
<!-- <div
|
|||
|
|
style="white-space: pre-line;text-align: center;color: aqua;color: aqua; display: flex; flex-direction: column;">
|
|||
|
|
<img src="../../images/loadingdow.gif" alt="">
|
|||
|
|
<span style="display: inline-block;position: absolute;left: 50%;top:50%;transform: translate(-50%, -50%);">{{
|
|||
|
|
this.text }}</span>
|
|||
|
|
</div> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import axios from 'axios';
|
|||
|
|
import JSZip from 'jszip';
|
|||
|
|
import { getAiFiles, deleteAiFile, getAiUrlList } from '@/api/fileMangement';
|
|||
|
|
import Preview from './preview.vue';
|
|||
|
|
import { useAirStore } from '@/store/modules/drone';
|
|||
|
|
export default {
|
|||
|
|
components: { Preview },
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
percentage: 0,
|
|||
|
|
info: {},
|
|||
|
|
paths: [''],
|
|||
|
|
fileList: [
|
|||
|
|
// {
|
|||
|
|
// fileName: item,
|
|||
|
|
// size: list[item].size,
|
|||
|
|
// creatTime: list[item].creation_time,
|
|||
|
|
// path:''
|
|||
|
|
// img: ''
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
totle: 0,
|
|||
|
|
selectNum: 0,
|
|||
|
|
length: 0,
|
|||
|
|
sn: '',
|
|||
|
|
currentPath: '',
|
|||
|
|
searchName: '', // 搜索关键字
|
|||
|
|
dateTime: [new Date(), new Date()], // 初始时间范围为今日至今日
|
|||
|
|
typeOptions: [
|
|||
|
|
{
|
|||
|
|
value: '选项1',
|
|||
|
|
label: '选项1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '选项2',
|
|||
|
|
label: '选项2'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
typeValue: '',
|
|||
|
|
loadOptions: [
|
|||
|
|
{
|
|||
|
|
value: '选项1',
|
|||
|
|
label: '选项1'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '选项2',
|
|||
|
|
label: '选项2'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
loadValue: '',
|
|||
|
|
selectList: [],
|
|||
|
|
loading: false,
|
|||
|
|
gateWay: useAirStore().gateWay,
|
|||
|
|
text: ''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 监听 Vuex 中的状态变化
|
|||
|
|
'useAirStore().gateWay': {
|
|||
|
|
handler(newValue, oldVal) {
|
|||
|
|
this.gateWay = newValue;
|
|||
|
|
this.getFileList(this.gateWay.gateway);
|
|||
|
|
},
|
|||
|
|
deep: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleSelectionChange(datas) {
|
|||
|
|
// console.log("datas: ", datas);
|
|||
|
|
this.selectList = datas;
|
|||
|
|
this.selectNum = datas.length;
|
|||
|
|
},
|
|||
|
|
isEmptyObject(obj) {
|
|||
|
|
return Object.keys(obj).length === 0;
|
|||
|
|
},
|
|||
|
|
// 获取文件列表
|
|||
|
|
async getFileList(gateway, path = '') {
|
|||
|
|
this.fileList = [];
|
|||
|
|
const list = await getAiFiles({ gateway, itemPath: path });
|
|||
|
|
// console.log("文件列表1-------", list);
|
|||
|
|
if (Object.keys(list).length === 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.paths = [
|
|||
|
|
'',
|
|||
|
|
...Object.keys(list)[0]
|
|||
|
|
.split('/')
|
|||
|
|
.filter((path) => path !== '')
|
|||
|
|
.slice(0, -1)
|
|||
|
|
];
|
|||
|
|
this.fileList = Object.keys(list).map((item) => {
|
|||
|
|
const pathList = item.split('/').filter((path) => path !== '');
|
|||
|
|
let img = require('../../images/medium/files-icon.png');
|
|||
|
|
let type = 'file';
|
|||
|
|
// console.log("item----------", item);
|
|||
|
|
// console.log("list----------", list[item]);
|
|||
|
|
// 文件缩略图
|
|||
|
|
if (list[item].size !== 'N/A') {
|
|||
|
|
type = item.split('.')[1];
|
|||
|
|
if (item.split('.')[1] !== 'mp4') {
|
|||
|
|
img = list[item].download_url;
|
|||
|
|
} else {
|
|||
|
|
img = require('../../images/medium/video-icon.png');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
name: list[item].missionName,
|
|||
|
|
fileName: pathList[pathList.length - 1],
|
|||
|
|
size: list[item].size,
|
|||
|
|
creatTime: list[item].creation_time,
|
|||
|
|
path: item,
|
|||
|
|
img,
|
|||
|
|
type,
|
|||
|
|
url: list[item].download_url,
|
|||
|
|
fileLength: list[item].length
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
this.totle = this.fileList.length;
|
|||
|
|
this.length = this.fileList.fileLength;
|
|||
|
|
// console.log("文件列表2-------", this.fileList);
|
|||
|
|
},
|
|||
|
|
// 文件夹点击进入文件夹
|
|||
|
|
handleSelectFile(path, data) {
|
|||
|
|
console.log('path11111111111', path);
|
|||
|
|
if (data && data.size !== 'N/A') {
|
|||
|
|
// console.log("文件------------");
|
|||
|
|
} else {
|
|||
|
|
this.currentPath = path;
|
|||
|
|
const { gateway } = this.gateWay;
|
|||
|
|
this.getFileList(gateway, path);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 路径变化
|
|||
|
|
changePath(path) {
|
|||
|
|
if (path) {
|
|||
|
|
// console.log("currentPath", this.currentPath);
|
|||
|
|
this.currentPath = this.currentPath.split(path)[0] + path;
|
|||
|
|
// console.log("path", path);
|
|||
|
|
// 跳转到该路径
|
|||
|
|
this.handleSelectFile(this.currentPath);
|
|||
|
|
} else {
|
|||
|
|
this.handleSelectFile('');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 删除
|
|||
|
|
handleDelete(row) {
|
|||
|
|
// console.log("删除---------", row);
|
|||
|
|
let params = { itemPaths: [row.path], gateway: this.gateWay.gateway };
|
|||
|
|
if (!row) {
|
|||
|
|
if (this.selectList.length === 0) {
|
|||
|
|
this.$message.warning('请先选择要删除的文件');
|
|||
|
|
this.loading = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const pathList = this.selectList.map((item) => item.path);
|
|||
|
|
params = { itemPaths: pathList, gateway: this.gateWay.gateway };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning',
|
|||
|
|
customClass: 'customMessageBox',
|
|||
|
|
confirmButtonClass: 'customConfirm',
|
|||
|
|
cancelButtonClass: 'customCancel'
|
|||
|
|
}).then(() => {
|
|||
|
|
deleteAiFile(params).then((res) => {
|
|||
|
|
this.$message.success(res.msg);
|
|||
|
|
this.$sendChanel('mediumDel');
|
|||
|
|
// 过滤掉删除的文件
|
|||
|
|
this.fileList = this.fileList.filter((file) => {
|
|||
|
|
return !params.itemPaths.includes(file.path);
|
|||
|
|
});
|
|||
|
|
if (this.fileList.length === 0) {
|
|||
|
|
// 如果列表为空跳转到根路径
|
|||
|
|
this.handleSelectFile('');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 下载
|
|||
|
|
handleDownload(row) {
|
|||
|
|
this.loading = true;
|
|||
|
|
// console.log("下载---------", row);
|
|||
|
|
let params = { itemPath: row.path, gateway: this.gateWay.gateway };
|
|||
|
|
if (!row) {
|
|||
|
|
if (this.selectList.length === 0) {
|
|||
|
|
this.$message.warning('请先选择要下载的文件');
|
|||
|
|
this.loading = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let pathList = [];
|
|||
|
|
// 定义是否是文件夹
|
|||
|
|
let isFile = false;
|
|||
|
|
// console.log("this.selectList", this.selectList);
|
|||
|
|
this.selectList.forEach((item) => {
|
|||
|
|
if (item.type === 'file') {
|
|||
|
|
isFile = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (isFile) {
|
|||
|
|
const { gateway } = this.gateWay;
|
|||
|
|
// this.selectList.forEach((item) => {
|
|||
|
|
// const params = { gateway, itemPath: item.path };
|
|||
|
|
// getUrlList(params).then((res) => {
|
|||
|
|
// pathList.push(...res);
|
|||
|
|
// });
|
|||
|
|
// });
|
|||
|
|
// console.log("pathList1", pathList);
|
|||
|
|
// // 并行下载文件并压缩为 zip
|
|||
|
|
// this.downloadAndZipFiles(pathList);
|
|||
|
|
const promises = this.selectList.map((item) => {
|
|||
|
|
const params = { gateway, itemPath: item.path };
|
|||
|
|
return getAiUrlList(params).then((res) => {
|
|||
|
|
pathList.push(...res); // 将结果合并到 pathList
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 等待所有异步操作完成后，再执行下载操作
|
|||
|
|
Promise.all(promises)
|
|||
|
|
.then(() => {
|
|||
|
|
// console.log("pathList1", pathList);
|
|||
|
|
// 确保 pathList 有值后再调用下载方法
|
|||
|
|
this.downloadAndZipFiles(pathList);
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
console.error('获取文件路径列表时出错:', error);
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
pathList = this.selectList.map((item) => item.url);
|
|||
|
|
// console.log("pathList2", pathList);
|
|||
|
|
// 并行下载文件并压缩为 zip
|
|||
|
|
this.downloadAndZipFiles(pathList);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.downloadAndZipFiles([row.url], row);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async downloadAndZipFiles(fileUrls, file) {
|
|||
|
|
try {
|
|||
|
|
const zip = new JSZip();
|
|||
|
|
const fileSizeMap = new Map();
|
|||
|
|
let fileTotal = 0;
|
|||
|
|
if (file) {
|
|||
|
|
fileTotal = file.fileLength;
|
|||
|
|
} else {
|
|||
|
|
this.selectList.forEach((item) => {
|
|||
|
|
fileTotal += item.fileLength;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// console.log("file-----", fileTotal);l
|
|||
|
|
// 并行下载所有文件
|
|||
|
|
const downloadPromises = fileUrls.map((url) =>
|
|||
|
|
axios({
|
|||
|
|
url: url,
|
|||
|
|
method: 'get',
|
|||
|
|
responseType: 'blob',
|
|||
|
|
onDownloadProgress: (progressEvent) => {
|
|||
|
|
const { loaded, total } = progressEvent;
|
|||
|
|
fileSizeMap.set(url, loaded);
|
|||
|
|
const totalFileSize = [...fileSizeMap.values()].reduce((acc, value) => acc + value, 0);
|
|||
|
|
const progress = Math.round((totalFileSize / fileTotal) * 100); // 计算下载进度百分比
|
|||
|
|
// console.log("progressEvent", progressEvent);
|
|||
|
|
// console.log("overallProgress", progress);
|
|||
|
|
// this.percentage = progress; // 更新进度百分比
|
|||
|
|
if (progress == 100) {
|
|||
|
|
this.text = `${99}%\n 正在打包中`;
|
|||
|
|
} else {
|
|||
|
|
this.text = `${progress}%\n 下载中`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).then((response) => {
|
|||
|
|
console.log('Response:', response); // 在这里打印 response 对象
|
|||
|
|
console.log('url:', url); // 在这里打印 response 对象
|
|||
|
|
console.log('flie:', file); // 在这里打印 response 对象
|
|||
|
|
const regex = /\/(DJI_[^\/]+\/DJI_[^\/]+\.[^\/?]+)(?=\?)/;
|
|||
|
|
// 提取匹配的部分
|
|||
|
|
const match = url.match(regex);
|
|||
|
|
let extractedString = response.data.size + '.jpg';
|
|||
|
|
if (match) {
|
|||
|
|
extractedString = match[1]; // 捕获的字符串
|
|||
|
|
}
|
|||
|
|
// 打印文件名和文件数据
|
|||
|
|
const fileName = file ? file.fileName : extractedString; // 获取文件名
|
|||
|
|
const fileData = response.data; // 保存文件数据
|
|||
|
|
// 获取文件大小：使用 Blob 的 size 属性
|
|||
|
|
const fileSize = fileData.size; // 单位为字节（bytes）
|
|||
|
|
// console.log("File size:", fileSize);
|
|||
|
|
// 返回一个对象，继续后续操作
|
|||
|
|
return { fileName, fileData };
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
// 等待所有文件下载完成
|
|||
|
|
const downloadedFiles = await Promise.all(downloadPromises);
|
|||
|
|
if (file) {
|
|||
|
|
// console.log("Downloading", downloadedFiles);
|
|||
|
|
const url = window.URL.createObjectURL(downloadedFiles[0].fileData);
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.href = url;
|
|||
|
|
link.setAttribute('download', downloadedFiles[0].fileName); // 设置下载的文件名
|
|||
|
|
document.body.appendChild(link);
|
|||
|
|
link.click();
|
|||
|
|
link.remove();
|
|||
|
|
this.loading = false;
|
|||
|
|
this.percentage = 0; // 下载完进度百分比清零
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 将每个文件添加到 zip 中
|
|||
|
|
downloadedFiles.forEach(({ fileName, fileData }) => {
|
|||
|
|
// console.log("File Name:", fileName);
|
|||
|
|
zip.file(fileName, fileData); // 添加文件到 zip
|
|||
|
|
});
|
|||
|
|
// 生成 zip 文件并触发下载
|
|||
|
|
const zipBlob = await zip.generateAsync({ type: 'blob' });
|
|||
|
|
const url = window.URL.createObjectURL(zipBlob);
|
|||
|
|
const link = document.createElement('a');
|
|||
|
|
link.href = url;
|
|||
|
|
const temp = new Date().getTime();
|
|||
|
|
link.setAttribute('download', `文件${temp}.zip`); // 设置下载的文件名
|
|||
|
|
document.body.appendChild(link);
|
|||
|
|
link.click();
|
|||
|
|
link.remove();
|
|||
|
|
this.loading = false;
|
|||
|
|
this.percentage = 0; // 下载完进度百分比清零
|
|||
|
|
} catch (error) {
|
|||
|
|
// console.error("Error downloading or zipping files:", error);
|
|||
|
|
this.loading = false;
|
|||
|
|
this.percentage = 0; // 下载完进度百分比清零
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 预览
|
|||
|
|
handlePreview(row) {
|
|||
|
|
const list = this.fileList;
|
|||
|
|
// console.log("预览---------", row);
|
|||
|
|
// console.log("list---------", list);
|
|||
|
|
const index = list.findIndex((item) => item === row);
|
|||
|
|
const data = { list, detail: row, index };
|
|||
|
|
this.$sendChanel('previewBus', data);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {},
|
|||
|
|
mounted() {
|
|||
|
|
this.getFileList(this.gateWay.gateway);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.medium-home-container {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
background-color: antiquewhite;
|
|||
|
|
|
|||
|
|
.medium-home-search-wrapper {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 60px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
> .el-date-editor {
|
|||
|
|
width: 38%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
> .el-select {
|
|||
|
|
width: 18%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
> .el-input {
|
|||
|
|
width: 18%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
> .el-button {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.medium-home-main {
|
|||
|
|
height: calc(100%);
|
|||
|
|
background: #fff;
|
|||
|
|
|
|||
|
|
.medium-home-main-top {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
line-height: 40px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.medium-breadcrumb {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.breadcrumb-item {
|
|||
|
|
// margin-right: 20px;
|
|||
|
|
color: #909399;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '/';
|
|||
|
|
display: inline-block;
|
|||
|
|
margin: 0 3px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumb-item:last-child {
|
|||
|
|
color: #000;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-name-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.file-img-wrapper {
|
|||
|
|
height: 20px !important;
|
|||
|
|
width: 20px !important;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-table {
|
|||
|
|
.el-checkbox {
|
|||
|
|
margin-left: 8px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.medium-home-top-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
.medium-check {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.medium-home-main-table {
|
|||
|
|
overflow-y: auto;
|
|||
|
|
height: calc(100% - 80px);
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-checkbox__input {
|
|||
|
|
margin-left: 8px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.shade {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.el-progress__text {
|
|||
|
|
color: aqua !important;
|
|||
|
|
white-space: pre-line;
|
|||
|
|
line-height: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-picker-panel {
|
|||
|
|
background: rgba(255, 255, 255, 1) !important;
|
|||
|
|
color: #606266 !important;
|
|||
|
|
filter: drop-shadow(2px 4px 6px black);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opration-btns {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: start;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
// background-color: #606266;
|
|||
|
|
.opration-btn {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
// background: #e6e6e6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|