801 lines
27 KiB
Vue
801 lines
27 KiB
Vue
<!-- 文件管理 -->
|
|
<template>
|
|
<div class="default-main main" :style="{ height: pageHeight.height }">
|
|
<div class="main_left">
|
|
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
|
|
</div>
|
|
<div class="main_right" v-loading="loading">
|
|
<div class="right_nav">
|
|
<div class="menu" v-if="activePathList.length != 0">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item
|
|
v-for="(item, index) in activePathList"
|
|
style="cursor: pointer"
|
|
:key="index"
|
|
@click="handleIntoByPath(item)"
|
|
>
|
|
<span>{{ outPutPath(item, index) }}</span>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<el-button :icon="Refresh" @click="handleRestartDevice" type="primary" :loading="deviceRestartLoading">
|
|
装置重启
|
|
</el-button>
|
|
</div>
|
|
|
|
<div class="filter" v-if="activePathList.length != 0">
|
|
<el-input
|
|
style="width: 200px; height: 32px"
|
|
placeholder="请输入文件或文件夹名称"
|
|
clearable
|
|
v-model="filterText"
|
|
type="text"
|
|
></el-input>
|
|
<el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
|
|
<el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
|
|
<el-upload
|
|
v-if="activePath != '/'"
|
|
action=""
|
|
:auto-upload="false"
|
|
:show-file-list="false"
|
|
:on-change="(file: any, fileList: any) => {
|
|
handleUpload(file, fileList, activePath)
|
|
}
|
|
"
|
|
>
|
|
<el-button>
|
|
文件上传
|
|
<el-icon class="el-icon--right">
|
|
<Upload />
|
|
</el-icon>
|
|
</el-button>
|
|
</el-upload>
|
|
<el-button @click="handleAddNewDir" v-if="activePath != '/'" type="primary" :icon="Plus">
|
|
新建文件夹
|
|
</el-button>
|
|
<div class="upload_progress" v-if="status != 0 && status != 100 && changeType == 'upload'">
|
|
正在上传：{{ fileName }}
|
|
<el-progress :percentage="status" />
|
|
<!-- <el-progress :percentage="30" :indeterminate="true">
|
|
<el-button text>上传中...</el-button>
|
|
</el-progress> -->
|
|
</div>
|
|
</div>
|
|
<!-- 以列表形式展示 -->
|
|
<div :style="tableHeight">
|
|
<vxe-table
|
|
style="margin-top: 10px"
|
|
border
|
|
auto-resize
|
|
height="auto"
|
|
:data="dirList"
|
|
v-bind="defaultAttribute"
|
|
>
|
|
<vxe-column type="seq" title="序号" width="80"></vxe-column>
|
|
<vxe-column field="prjDataPath" align="center" title="名称" #default="{ row }">
|
|
<span
|
|
style="cursor: pointer; color: #551a8b"
|
|
:style="{
|
|
'text-decoration': row.type == 'dir' ? 'underline' : 'none',
|
|
color: row.type == 'dir' ? '#551a8b' : '#000'
|
|
}"
|
|
@click="handleIntoDir(row)"
|
|
>
|
|
{{
|
|
row &&
|
|
row?.prjDataPath &&
|
|
row?.prjDataPath.includes(activePath) &&
|
|
row?.prjDataPath.length > activePath.length
|
|
? row?.prjDataPath.replace(activePath, ' ').replace('/', ' ')
|
|
: row?.prjDataPath.replace('/', ' ')
|
|
}}
|
|
</span>
|
|
</vxe-column>
|
|
<vxe-column field="size" align="center" title="大小" #default="{ row }">
|
|
<span>
|
|
{{ row.size ? row.size + 'KB' : '/' }}
|
|
</span>
|
|
</vxe-column>
|
|
<vxe-column field="type" align="center" title="类型" width="120" #default="{ row }">
|
|
<span>
|
|
{{ row.type == 'dir' ? '文件夹' : row.type == 'file' ? '文件' : '/' }}
|
|
</span>
|
|
</vxe-column>
|
|
<!-- <vxe-column field="startTime" align="center" title="文件时间" width="120" #default="{ row }">
|
|
{{ row.startTime ? row.startTime : '/' }}
|
|
</vxe-column> -->
|
|
<!--<vxe-column field="fileCheck" align="center" title="文件校验码" width="100" #default="{ row }">
|
|
{{ row.fileCheck ? row.fileCheck : '/' }}
|
|
</vxe-column> -->
|
|
<vxe-column title="操作" width="200px">
|
|
<template #default="{ row }">
|
|
<el-button link size="small" type="danger" @click="handleDelDirOrFile(row)">删除</el-button>
|
|
<el-button
|
|
v-if="row.type == 'file'"
|
|
link
|
|
size="small"
|
|
type="primary"
|
|
@click="handleDownLoad(row)"
|
|
>
|
|
下载
|
|
</el-button>
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
</div>
|
|
|
|
<div class="list" v-if="dirList.length != 0 && !loading" style="display: none">
|
|
<div class="list_item" v-for="(item, index) in dirList" :key="index">
|
|
<div class="item_download">
|
|
<el-button
|
|
v-if="activePath && activePath != '/'"
|
|
type="danger"
|
|
size="small"
|
|
@click="handleDelDirOrFile(item)"
|
|
circle
|
|
>
|
|
<el-icon>
|
|
<Delete />
|
|
</el-icon>
|
|
</el-button>
|
|
<el-button v-if="item?.type == 'file'" size="small" @click="handleDownLoad(item)" circle>
|
|
<el-icon>
|
|
<Download />
|
|
</el-icon>
|
|
</el-button>
|
|
</div>
|
|
<img v-if="item?.type == 'dir'" @click="handleIntoDir(item)" src="@/assets/img/wenjianjia.svg" />
|
|
<img
|
|
class="img_file"
|
|
@click="handleIntoDir(item)"
|
|
v-if="item?.type == 'file'"
|
|
src="@/assets/img/wenjian.svg"
|
|
/>
|
|
<!-- <span v-if="!item.type">暂无数据</span> -->
|
|
<p>
|
|
{{
|
|
item &&
|
|
item?.prjDataPath &&
|
|
item?.prjDataPath.includes(activePath) &&
|
|
item?.prjDataPath.length > activePath.length
|
|
? item?.prjDataPath.replace(activePath, ' ').replace('/', ' ')
|
|
: item?.prjDataPath.replace('/', ' ')
|
|
}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- <el-empty v-if="dirList.length === 0" /> -->
|
|
</div>
|
|
<popup ref="fileRef"></popup>
|
|
<el-dialog
|
|
v-model="addDeviceDirOpen"
|
|
:destroy-on-close="true"
|
|
title="新建文件夹目录"
|
|
width="500"
|
|
@closed="close"
|
|
>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="{ path: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }] }"
|
|
>
|
|
<el-form-item label="文件夹名称" prop="path">
|
|
<el-input v-model="form.path" placeholder="请输入文件夹名称" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="close">取消</el-button>
|
|
<el-button type="primary" @click="submitDeviceDir">确定</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
|
|
import { mainHeight } from '@/utils/layout'
|
|
import { ref, reactive, watch, onMounted, onBeforeUnmount, h, inject } from 'vue'
|
|
import { ElMessage, ElMessageBox, ElInput } from 'element-plus'
|
|
import {
|
|
getDeviceRootPath,
|
|
getFileServiceFileOrDir,
|
|
downLoadDeviceFile,
|
|
uploadDeviceFile,
|
|
reStartDevice,
|
|
addDeviceDir,
|
|
delDeviceDir
|
|
} from '@/api/cs-device-boot/fileService.ts'
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
import {
|
|
CirclePlus,
|
|
Delete,
|
|
EditPen,
|
|
ArrowLeft,
|
|
ArrowRight,
|
|
Download,
|
|
Upload,
|
|
View,
|
|
Check,
|
|
Plus,
|
|
Refresh,
|
|
Search
|
|
} from '@element-plus/icons-vue'
|
|
import popup from './popup.vue'
|
|
import mqtt from 'mqtt'
|
|
import { passwordConfirm, updatePassword } from '@/api/user-boot/user'
|
|
defineOptions({
|
|
name: 'govern/device/fileService'
|
|
})
|
|
const pageHeight = mainHeight(20)
|
|
const tableHeight = mainHeight(130)
|
|
|
|
const loading = ref(false)
|
|
//nDid
|
|
const nDid = ref<string>('')
|
|
// 树节点点击
|
|
|
|
//当前目录
|
|
const activePath = ref<string>('')
|
|
//判断是否是根目录
|
|
const isRoot = ref<boolean>(true)
|
|
//储存所有点击过的目录
|
|
const activePathList: any = ref([])
|
|
const nodeClick = (e: any) => {
|
|
console.log(e,"------");
|
|
if (e && (e.level == 2 || e.type == 'device')) {
|
|
loading.value = true
|
|
nDid.value = e.ndid
|
|
dirList.value = []
|
|
activePathList.value = []
|
|
activePath.value = '/'
|
|
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
|
.then((resp: any) => {
|
|
if (resp.code == 'A0000') {
|
|
dirList.value = resp.data
|
|
currentDirList.value = resp.data
|
|
activePathList.value = [{ path: activePath.value }]
|
|
loading.value = false
|
|
}
|
|
})
|
|
.catch(e => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
}
|
|
//搜索文件或文件夹
|
|
const filterText = ref('')
|
|
const handleSearch = () => {
|
|
let filterList: any = []
|
|
dirList.value = currentDirList.value
|
|
dirList.value.map(item => {
|
|
if (filterText.value && item.prjDataPath.includes(filterText.value)) {
|
|
filterList.push(item)
|
|
}
|
|
})
|
|
if (filterList.length != 0) {
|
|
dirList.value = filterList
|
|
}
|
|
if (filterList.length == 0) {
|
|
dirList.value = []
|
|
}
|
|
if (!filterText.value) {
|
|
dirList.value = currentDirList.value
|
|
}
|
|
}
|
|
//重置搜索
|
|
const handleRefresh = () => {
|
|
loading.value = true
|
|
filterText.value = ''
|
|
dirList.value = currentDirList.value
|
|
reloadCurrentMenu('')
|
|
}
|
|
|
|
const reboot: any = ref('')
|
|
const vNode = () => {
|
|
return h('div', {}, [
|
|
h(ElInput, {
|
|
modelValue: reboot.value,
|
|
'onUpdate:modelValue': ($event: any) => {
|
|
reboot.value = $event
|
|
},
|
|
placeholder: '请输入姓名',
|
|
type: 'password',
|
|
autocomplete: 'off',
|
|
class: 'displayPass'
|
|
})
|
|
])
|
|
}
|
|
|
|
//装置重启
|
|
const deviceRestartLoading = ref<boolean>(false)
|
|
const handleRestartDevice = () => {
|
|
deviceRestartLoading.value = true
|
|
ElMessageBox.prompt('二次校验密码确认', '装置重启', {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
customClass: 'customInput',
|
|
inputType: 'text'
|
|
})
|
|
.then(({ value }) => {
|
|
if (!value) {
|
|
ElMessage.warning('请输入密码')
|
|
loading.value = false
|
|
deviceRestartLoading.value = false
|
|
} else {
|
|
passwordConfirm(value)
|
|
.then((resp: any) => {
|
|
if (resp.code == 'A0000') {
|
|
reStartDevice({ nDid: nDid.value }).then((res: any) => {
|
|
if (res.code == 'A0000') {
|
|
deviceRestartLoading.value = false
|
|
ElMessage({ message: res.message, type: 'success', duration: 5000 })
|
|
} else {
|
|
deviceRestartLoading.value = false
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.catch(e => {
|
|
loading.value = false
|
|
deviceRestartLoading.value = false
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
deviceRestartLoading.value = false
|
|
})
|
|
}
|
|
// 进入文件夹
|
|
const dirList = ref([])
|
|
// 当前目录数据
|
|
const currentDirList = ref([])
|
|
const handleIntoDir = (row: any) => {
|
|
if (!row.type || row.type == 'file') return
|
|
loading.value = true
|
|
const obj = {
|
|
nDid: nDid.value,
|
|
name: row.prjDataPath,
|
|
type: row.type
|
|
}
|
|
//当前点击的目录
|
|
activePath.value = row.prjDataPath
|
|
if (activePathList.value.indexOf(obj.name) == -1) {
|
|
activePathList.value.push({ path: obj.name })
|
|
}
|
|
getFileServiceFileOrDir(obj)
|
|
.then(res => {
|
|
dirList.value = res.data
|
|
loading.value = false
|
|
currentDirList.value = res.data
|
|
activePathList.value.map((item: any, index: any) => {
|
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
|
activePathList.value.splice(index, 1)
|
|
}
|
|
})
|
|
isRoot.value = false
|
|
})
|
|
.catch(e => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
//处理导航栏路径
|
|
const outPutPath = (row: any, key: any) => {
|
|
let path = ''
|
|
if (key == 0) {
|
|
path = '/根目录'
|
|
}
|
|
if (key == 1) {
|
|
path = row.path
|
|
}
|
|
if (key > 1) {
|
|
if (row.path.includes(activePathList.value[1].path)) {
|
|
path = row.path.replace(activePathList.value[1].path, ' ')
|
|
}
|
|
if (row.path.split('/').length !== 0) {
|
|
path = '/' + row.path.split('/')[row.path.split('/').length - 1]
|
|
}
|
|
}
|
|
return path.split('/')[1]
|
|
}
|
|
|
|
//根据面包屑导航切换
|
|
const handleIntoByPath = async (val: any) => {
|
|
const obj = {
|
|
nDid: nDid.value,
|
|
name: val.path,
|
|
type: 'dir'
|
|
}
|
|
activePath.value = val.path
|
|
loading.value = true
|
|
getFileServiceFileOrDir(obj)
|
|
.then(res => {
|
|
dirList.value = res.data
|
|
activePathList.value.map((item: any, index: any) => {
|
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
|
activePathList.value.splice(index, 1)
|
|
}
|
|
})
|
|
loading.value = false
|
|
})
|
|
.catch(e => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
const form = ref({
|
|
path: ''
|
|
})
|
|
//新建文件夹弹框flag
|
|
const addDeviceDirOpen = ref<boolean>(false)
|
|
const close = () => {
|
|
addDeviceDirOpen.value = false
|
|
}
|
|
//打开新建文件夹弹框
|
|
const handleAddNewDir = () => {
|
|
form.value.path = ''
|
|
addDeviceDirOpen.value = true
|
|
}
|
|
const formRef = ref()
|
|
//重新加载当前页面菜单
|
|
const reloadCurrentMenu = (msg: string) => {
|
|
loading.value = true
|
|
getFileServiceFileOrDir({ nDid: nDid.value, name: activePath.value, type: 'dir' })
|
|
.then((resp: any) => {
|
|
if (resp.code == 'A0000') {
|
|
loading.value = false
|
|
dirList.value = resp.data
|
|
currentDirList.value = resp.data
|
|
activePathList.value.map((item: any, index: any) => {
|
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
|
activePathList.value.splice(index, 1)
|
|
}
|
|
})
|
|
loading.value = false
|
|
if (!msg) return
|
|
ElMessage({ message: msg, type: 'success', duration: 5000 })
|
|
}
|
|
})
|
|
.catch(e => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
//新建文件夹
|
|
const submitDeviceDir = () => {
|
|
formRef.value.validate((valid: any) => {
|
|
if (valid) {
|
|
let obj = {
|
|
nDid: nDid.value,
|
|
path:
|
|
activePath.value == '/'
|
|
? activePath.value + form.value.path
|
|
: activePath.value + '/' + form.value.path
|
|
}
|
|
loading.value = true
|
|
addDeviceDir(obj).then((res: any) => {
|
|
if (res.code == 'A0000') {
|
|
reloadCurrentMenu(res.message)
|
|
// ElMessage({ message: res.message, type: 'success', duration: 5000 })
|
|
addDeviceDirOpen.value = false
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
//删除文件夹或文件
|
|
const handleDelDirOrFile = (row: any) => {
|
|
// delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
|
|
// if (res.code == 'A0000') {
|
|
// reloadCurrentMenu(res.message)
|
|
// // ElMessage({ message: res.message, type: 'success', duration: 5000 })
|
|
// }
|
|
// })
|
|
|
|
ElMessageBox.prompt('二次校验密码确认', '删除', {
|
|
confirmButtonText: '确认',
|
|
cancelButtonText: '取消',
|
|
customClass: 'customInput',
|
|
inputType: 'text'
|
|
}).then(({ value }) => {
|
|
if (!value) {
|
|
ElMessage.warning('请输入密码')
|
|
} else {
|
|
loading.value = true
|
|
passwordConfirm(value)
|
|
.then((resp: any) => {
|
|
if (resp.code == 'A0000') {
|
|
delDeviceDir({ nDid: nDid.value, path: row.prjDataPath }).then((res: any) => {
|
|
if (res.code == 'A0000') {
|
|
reloadCurrentMenu(res.message)
|
|
|
|
// ElMessage({ message: res.message, type: 'success', duration: 5000 })
|
|
}
|
|
})
|
|
}
|
|
})
|
|
.catch(e => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const changeType = ref<any>('')
|
|
//下载文件
|
|
const fileRef = ref()
|
|
const handleDownLoad = async (row: any) => {
|
|
;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
|
|
// fileName.value = row?.prjDataPath.split('/')[row?.prjDataPath.split('/').length - 1]
|
|
// localStorage.setItem('fileName', fileName.value)
|
|
changeType.value = 'download'
|
|
localStorage.setItem('changeType', changeType.value)
|
|
}
|
|
//上传文件
|
|
const fileName = ref<any>('')
|
|
const handleUpload = (e: any, fileList: any, row: any) => {
|
|
// loading.value=true
|
|
fileName.value = e.name
|
|
localStorage.setItem('fileName', fileName.value)
|
|
changeType.value = 'upload'
|
|
localStorage.setItem('changeType', changeType.value)
|
|
const obj = {
|
|
id: nDid.value,
|
|
file: e.raw,
|
|
filePath: row || row.prjDataPath
|
|
}
|
|
uploadDeviceFile(obj).then((res: any) => {
|
|
if (res.code == 'A0000') {
|
|
reloadCurrentMenu(res.message)
|
|
status.value = 100
|
|
}
|
|
})
|
|
}
|
|
watch(
|
|
() => activePathList.value,
|
|
async (val, oldVal) => {
|
|
if (val) {
|
|
val.map((item: any, index: any) => {
|
|
if (item.path.includes(activePath.value) && item.path.length > activePath.value.length) {
|
|
val.splice(index, 1)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
)
|
|
const mqttRef = ref()
|
|
const url: any = inject('MQTTURL')
|
|
const connectMqtt = () => {
|
|
if (mqttRef.value) {
|
|
if (mqttRef.value.connected) {
|
|
return
|
|
}
|
|
}
|
|
const options = {
|
|
protocolId: 'MQTT',
|
|
qos: 2,
|
|
clean: true,
|
|
connectTimeout: 30 * 1000,
|
|
clientId: 'mqttjs' + Math.random(),
|
|
username: 't_user',
|
|
password: 'njcnpqs'
|
|
}
|
|
mqttRef.value = mqtt.connect(url, options)
|
|
}
|
|
connectMqtt()
|
|
mqttRef.value.on('connect', (e: any) => {
|
|
// ElMessage.success('连接mqtt服务器成功!')
|
|
console.log('mqtt客户端已连接....')
|
|
// mqttRef.value.subscribe('/Web/Progress')
|
|
mqttRef.value.subscribe('/Web/Progress/+')
|
|
})
|
|
const mqttMessage = ref<any>({})
|
|
const status: any = ref()
|
|
|
|
mqttRef.value.on('message', (topic: any, message: any) => {
|
|
// console.log('🚀 ~ mqttRef.value.on ~ message:', JSON.parse(message))
|
|
// console.log('mqtt接收到消息', message,topic)
|
|
console.log('mqtt接收到消息', JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))))
|
|
// "{allStep:\""+times+"\",nowStep:"+i+"}"
|
|
let str = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
|
// eval('(' + str + ')').includes('fileName')
|
|
let regex = /fileName:(.*?),allStep/
|
|
let regex1 = /allStep:(.*?),nowStep/
|
|
let regex2 = /nowStep:(.*?)}/
|
|
mqttMessage.value = {
|
|
fileName: str.match(regex)[1],
|
|
allStep: str.match(regex1)[1],
|
|
nowStep: str.match(regex2)[1]
|
|
}
|
|
console.log(mqttMessage.value, '?????????')
|
|
status.value = parseInt(Number((mqttMessage.value.nowStep / mqttMessage.value.allStep) * 100))
|
|
fileRef.value.setStatus(mqttMessage.value)
|
|
fileName.value = mqttMessage.value.fileName
|
|
localStorage.setItem('fileName', fileName.value)
|
|
if (status.value == 100) {
|
|
status.value = 99
|
|
}
|
|
})
|
|
|
|
mqttRef.value.on('error', (error: any) => {
|
|
console.log('mqtt连接失败...', error)
|
|
mqttRef.value.end()
|
|
})
|
|
|
|
mqttRef.value.on('close', function () {
|
|
console.log('mqtt客户端已断开连接.....')
|
|
})
|
|
onMounted(() => {
|
|
status.value = 0
|
|
fileName.value = localStorage.getItem('fileName') ? localStorage.getItem('fileName') : ''
|
|
changeType.value = localStorage.getItem('changeType') ? localStorage.getItem('changeType') : ''
|
|
})
|
|
onBeforeUnmount(() => {
|
|
if (mqttRef.value) {
|
|
mqttRef.value.end()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 10px;
|
|
.main_left {
|
|
// width: 280px;
|
|
}
|
|
|
|
.main_right {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
padding: 10px 10px 10px 10px;
|
|
//margin-left: 10px;
|
|
border: 1px solid #eee;
|
|
|
|
.el-input__wrapper {
|
|
-webkit-text-security: disc !important;
|
|
}
|
|
|
|
.right_nav {
|
|
width: 100%;
|
|
height: 32px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.menu {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
overflow-x: auto;
|
|
align-items: center;
|
|
background-color: var(--el-color-primary);
|
|
border-radius: 4px;
|
|
|
|
span {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
padding: 0 5px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.el-button {
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
|
|
.filter {
|
|
width: 100%;
|
|
height: 30px;
|
|
display: flex;
|
|
margin-top: 10px;
|
|
justify-content: flex-start;
|
|
|
|
.el-button {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.upload_progress {
|
|
flex: 1;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-left: 10px;
|
|
|
|
.el-progress {
|
|
width: 300px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// align-items: flex-start;
|
|
// justify-content: space-between;
|
|
overflow-y: auto;
|
|
margin-top: 10px;
|
|
max-height: 100%;
|
|
padding-bottom: 200px;
|
|
z-index: 100;
|
|
position: relative;
|
|
.list_item {
|
|
flex: none;
|
|
width: 23.3%;
|
|
height: 100px;
|
|
border: 1px solid var(--el-color-primary);
|
|
margin: 10px 0.5%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
// border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 1001 !important;
|
|
width: 100%;
|
|
height: 40px;
|
|
margin: 0;
|
|
border: 1px solid #eee;
|
|
.item_download,
|
|
.item_upload {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 2001;
|
|
}
|
|
|
|
.img_file {
|
|
// width: 60px;
|
|
// height: 60px;
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
img {
|
|
// width: 50px;
|
|
// height: 50px;
|
|
width: 30px;
|
|
height: 30px;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
p {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.list_item:nth-child(4n + 2),
|
|
.list_item:nth-child(4n + 3) {
|
|
// margin: 10px 0.8%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-form {
|
|
padding: 20px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:deep(.el-breadcrumb__separator) {
|
|
margin: 0px -10px 0px 0px;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.customInput {
|
|
.el-input__inner {
|
|
-webkit-text-security: disc !important;
|
|
}
|
|
}
|
|
</style>
|