代码优化
This commit is contained in:
parent
aefba7c565
commit
557970fd87
317
web/src/views/testdata/fileSynchronization/index.vue
vendored
317
web/src/views/testdata/fileSynchronization/index.vue
vendored
@ -189,7 +189,7 @@ function diffMiss() {
|
||||
function diffColor() {
|
||||
// 1. 使用Map优化查找性能
|
||||
const createMap = (arr: any[]) => new Map(arr.map(item => [item.id, item]));
|
||||
|
||||
|
||||
const localMap = createMap(localOnlyFiles.value);
|
||||
const md5Map = createMap(md5MismatchedFiles.value);
|
||||
const minioMap = createMap(minioOnlyFiles.value);
|
||||
@ -197,7 +197,7 @@ function diffColor() {
|
||||
// 2. 单次遍历优化
|
||||
const processTree = (tree: any[], location: 'local' | 'minio') => {
|
||||
const stack = [...tree];
|
||||
|
||||
|
||||
while (stack.length) {
|
||||
const node = stack.pop();
|
||||
if (!node) continue;
|
||||
@ -272,37 +272,45 @@ function gettreedata() {
|
||||
}
|
||||
function handleNodeClick(data: any, node: any) {
|
||||
pathid.value = data.nodeId
|
||||
localOnlyFiles.value.length = 0
|
||||
md5MismatchedFiles.value.length = 0
|
||||
minioOnlyFiles.value.length = 0
|
||||
getlocaltree()
|
||||
getminiotree()
|
||||
}
|
||||
//工作空间树点击
|
||||
const handleCheckChange = (
|
||||
data: any,
|
||||
checked: boolean,
|
||||
indeterminate: boolean
|
||||
data: any,
|
||||
checked: boolean,
|
||||
indeterminate: boolean
|
||||
) => {
|
||||
// 使用Map优化查找性能
|
||||
const nodeMap = new Map(workall.value.map(item => [item.id, item]));
|
||||
|
||||
// 当完全选中时添加节点
|
||||
if (checked && !indeterminate) {
|
||||
if (!nodeMap.has(data.id)) {
|
||||
workall.value = [...workall.value, data];
|
||||
// 使用Map优化查找性能
|
||||
const nodeMap = new Map(workall.value.map(item => [item.id, item]));
|
||||
|
||||
// 当完全选中时添加节点
|
||||
if (checked && !indeterminate) {
|
||||
if (!nodeMap.has(data.id)) {
|
||||
workall.value = [...workall.value, data];
|
||||
}
|
||||
}
|
||||
// 当取消选中时移除节点
|
||||
else {
|
||||
workall.value = workall.value.filter(item => item.id !== data.id);
|
||||
}
|
||||
}
|
||||
// 当取消选中时移除节点
|
||||
else {
|
||||
workall.value = workall.value.filter(item => item.id !== data.id);
|
||||
}
|
||||
|
||||
// 使用防抖优化批量操作
|
||||
const updateCompare = debounce(() => {
|
||||
comparearr.value = getclickdata(workall.value);
|
||||
// 同步备份空间的选中状态
|
||||
beifentree.value?.setCheckedNodes(comparearr.value, false);
|
||||
}, 50);
|
||||
// 使用防抖优化批量操作
|
||||
const updateCompare = debounce(() => {
|
||||
const compareNodes = getclickdata(workall.value);
|
||||
|
||||
updateCompare();
|
||||
// 转换节点格式
|
||||
const checkedKeys = compareNodes
|
||||
.map(node => node.id)
|
||||
nextTick(() => {
|
||||
beifentree.value?.setCheckedKeys(checkedKeys, false);
|
||||
});
|
||||
}, 50);
|
||||
|
||||
updateCompare();
|
||||
};
|
||||
//递归整理点击参数
|
||||
function getclickdata(nodes: any[]): any[] {
|
||||
@ -310,7 +318,7 @@ function getclickdata(nodes: any[]): any[] {
|
||||
const excludeIds = new Set<string>();
|
||||
// 使用栈结构进行迭代处理
|
||||
const stack = [...nodes];
|
||||
|
||||
|
||||
// 第一阶段：收集所有需要排除的子节点 ID
|
||||
while (stack.length > 0) {
|
||||
const node = stack.pop();
|
||||
@ -339,83 +347,118 @@ function getclickdata(nodes: any[]): any[] {
|
||||
}
|
||||
//获取本地树
|
||||
function getlocaltree() {
|
||||
|
||||
if(projectId.value && pathid.value){
|
||||
worktree.value = true
|
||||
listLocalTree({ taskId: projectId.value, nodeId: pathid.value }).then((res: any) => {
|
||||
workdata.value = res.data.localTrees
|
||||
if (workdata.value.length > 0) {
|
||||
assignment(workdata.value, 'local')
|
||||
}
|
||||
worktree.value = false
|
||||
diffColor()
|
||||
})
|
||||
}
|
||||
if (!projectId.value || !pathid.value) return;
|
||||
|
||||
worktree.value = true;
|
||||
listLocalTree({ taskId: projectId.value, nodeId: pathid.value }).then((res: any) => {
|
||||
const CHUNK_SIZE = 500; // 每批处理500个节点
|
||||
const rawData = res.data.localTrees;
|
||||
|
||||
// 使用requestAnimationFrame分批次处理
|
||||
const processChunk = (index = 0) => {
|
||||
const chunk = rawData.slice(index, index + CHUNK_SIZE);
|
||||
if (chunk.length > 0) {
|
||||
assignment(chunk, 'local');
|
||||
workdata.value.push(...chunk); // 分批追加数据
|
||||
requestAnimationFrame(() => processChunk(index + CHUNK_SIZE));
|
||||
} else {
|
||||
worktree.value = false;
|
||||
diffColor();
|
||||
}
|
||||
};
|
||||
|
||||
workdata.value = []; // 清空旧数据
|
||||
processChunk();
|
||||
});
|
||||
}
|
||||
const worktree1 = ref(false)
|
||||
//获取minio树
|
||||
function getminiotree() {
|
||||
if(projectId.value && pathid.value){
|
||||
worktree1.value = true
|
||||
listBackupTree({ taskId: projectId.value, nodeId: pathid.value }).then((res: any) => {
|
||||
backupsdata.value = res.data.minioTrees
|
||||
if (backupsdata.value.length > 0) {
|
||||
assignment(backupsdata.value, 'minio')
|
||||
}
|
||||
worktree1.value = false
|
||||
diffColor()
|
||||
})
|
||||
}
|
||||
if (!projectId.value || !pathid.value) return;
|
||||
|
||||
worktree1.value = true;
|
||||
listBackupTree({ taskId: projectId.value, nodeId: pathid.value }).then((res: any) => {
|
||||
const CHUNK_SIZE = 500;
|
||||
const rawData = res.data.minioTrees;
|
||||
|
||||
const processChunk = (index = 0) => {
|
||||
const chunk = rawData.slice(index, index + CHUNK_SIZE);
|
||||
if (chunk.length > 0) {
|
||||
assignment(chunk, 'minio');
|
||||
backupsdata.value.push(...chunk);
|
||||
requestAnimationFrame(() => processChunk(index + CHUNK_SIZE));
|
||||
} else {
|
||||
worktree1.value = false;
|
||||
diffColor();
|
||||
}
|
||||
};
|
||||
|
||||
backupsdata.value = [];
|
||||
processChunk();
|
||||
});
|
||||
}
|
||||
//数据递归赋值
|
||||
function assignment(data: any[], difference: 'local' | 'minio') {
|
||||
// 使用栈结构替代递归，防止栈溢出
|
||||
const stack: any[] = [...data];
|
||||
while (stack.length > 0) {
|
||||
const node = stack.pop();
|
||||
const queue = [...data]; // 使用队列代替栈
|
||||
while (queue.length > 0) {
|
||||
const node = queue.shift();
|
||||
if (!node) continue;
|
||||
// 添加类型断言确保操作安全
|
||||
node.location = difference;
|
||||
node.station = '0'; // 0: 相同, 1: 新增, 2: 变更, 3: 删除
|
||||
|
||||
// 反向压栈保持原有顺序
|
||||
// 使用Object.defineProperty避免Vue响应式转换
|
||||
Object.defineProperty(node, 'location', {
|
||||
value: difference,
|
||||
writable: true,
|
||||
enumerable: true
|
||||
});
|
||||
|
||||
Object.defineProperty(node, 'station', {
|
||||
value: '0',
|
||||
writable: true,
|
||||
enumerable: true
|
||||
});
|
||||
|
||||
if (node.children?.length) {
|
||||
stack.push(...[...node.children].reverse());
|
||||
queue.push(...node.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
//备份空间
|
||||
const beifentree = ref()
|
||||
const backupsChange = (
|
||||
data: any,
|
||||
checked: boolean,
|
||||
indeterminate: boolean
|
||||
data: any,
|
||||
checked: boolean,
|
||||
indeterminate: boolean
|
||||
) => {
|
||||
// 使用临时变量避免多次访问响应式对象
|
||||
const currentWorkall = [...workall.value];
|
||||
|
||||
// 使用Map优化查找性能
|
||||
const nodeMap = new Map(currentWorkall.map(item => [item.id, item]));
|
||||
|
||||
// 当完全选中时添加节点（防止重复添加）
|
||||
if (checked && !indeterminate) {
|
||||
if (!nodeMap.has(data.id)) {
|
||||
workall.value = [...currentWorkall, data];
|
||||
// 使用临时变量避免多次访问响应式对象
|
||||
const currentWorkall = [...workall.value];
|
||||
|
||||
// 使用Map优化查找性能
|
||||
const nodeMap = new Map(currentWorkall.map(item => [item.id, item]));
|
||||
|
||||
// 当完全选中时添加节点（防止重复添加）
|
||||
if (checked && !indeterminate) {
|
||||
if (!nodeMap.has(data.id)) {
|
||||
workall.value = [...currentWorkall, data];
|
||||
}
|
||||
}
|
||||
// 当取消选中时精确移除节点
|
||||
else {
|
||||
workall.value = currentWorkall.filter(item => item.id !== data.id);
|
||||
}
|
||||
}
|
||||
// 当取消选中时精确移除节点
|
||||
else {
|
||||
workall.value = currentWorkall.filter(item => item.id !== data.id);
|
||||
}
|
||||
|
||||
// 使用防抖优化批量操作
|
||||
const updateCompare = debounce(() => {
|
||||
comparearr.value = getclickdata(workall.value);
|
||||
// 同步工作空间选中状态
|
||||
workref.value?.setCheckedNodes(comparearr.value, false);
|
||||
}, 50);
|
||||
// 使用防抖优化批量操作
|
||||
|
||||
updateCompare();
|
||||
const updateCompare = debounce(() => {
|
||||
const compareNodes = getclickdata(workall.value);
|
||||
|
||||
// 转换节点格式
|
||||
const checkedKeys = compareNodes
|
||||
.map(node => node.id)
|
||||
nextTick(() => {
|
||||
workref.value?.setCheckedKeys(checkedKeys, false);
|
||||
});
|
||||
}, 50);
|
||||
updateCompare();
|
||||
};
|
||||
//右键菜单
|
||||
const handleRightClick = (event: Event, data: any, node: any) => {
|
||||
@ -929,68 +972,68 @@ const tabs = ref(1)
|
||||
<div class="tree_left">
|
||||
<div class="tree_title">工作空间:</div>
|
||||
<div class="tree_content">
|
||||
<el-scrollbar height="73vh">
|
||||
<el-tree ref="workref" style="max-width: 600px" :props="props" :data="workdata"
|
||||
@node-click="workclick" @node-contextmenu="handleRightClick" default-expand-all
|
||||
:expand-on-click-node="false" show-checkbox node-key="id" v-loading="worktree"
|
||||
@check-change="handleCheckChange">
|
||||
<template #default="{ data }">
|
||||
<span
|
||||
:class="data.station == '0' ? 'custom-tree-node' : (data.station == '1' ? 'custom-tree-node1' : (data.station == '2' ? 'custom-tree-node2' : 'custom-tree-node3'))">
|
||||
<span class="text">
|
||||
{{ data.fileName }}({{ data.isFile == 'FOLDER' ? data.children.length :
|
||||
data.fileSize + 'MB' }})
|
||||
<span v-if="data.station != '0'">({{ data.station == '1' ? '新增' :
|
||||
(data.station
|
||||
== '2' ? '已变更' : '已删除') }})</span>
|
||||
</span>
|
||||
<!-- <el-scrollbar height="73vh"> -->
|
||||
<el-tree-v2 ref="workref" style="max-width: 600px" :props="props" :data="workdata" :height="700"
|
||||
@node-click="workclick" @node-contextmenu="handleRightClick" default-expand-all
|
||||
:expand-on-click-node="false" show-checkbox node-key="id" v-loading="worktree"
|
||||
@check-change="handleCheckChange">
|
||||
<template #default="{ data }">
|
||||
<span
|
||||
:class="data.station == '0' ? 'custom-tree-node' : (data.station == '1' ? 'custom-tree-node1' : (data.station == '2' ? 'custom-tree-node2' : 'custom-tree-node3'))">
|
||||
<span class="text">
|
||||
{{ data.fileName }}({{ data.isFile == 'FOLDER' ? data.children.length :
|
||||
data.fileSize + 'MB' }})
|
||||
<span v-if="data.station != '0'">({{ data.station == '1' ? '新增' :
|
||||
(data.station
|
||||
== '2' ? '已变更' : '已删除') }})</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
<div v-show="contextMenuVisible" class="context-menu" :style="{
|
||||
left: `${contextMenuPosition.x}px`,
|
||||
top: `${contextMenuPosition.y}px`
|
||||
}">
|
||||
<div class="menu-item" @click="handleMenuClick('backups', 'local')">备份</div>
|
||||
<div class="menu-item" @click="handleMenuClick('delete', 'local')">删除</div>
|
||||
<div v-if="currentNode && currentNode.isFile == 'FILE'" class="menu-item"
|
||||
@click="handleMenuClick('preview', 'local')">预览</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
<div v-show="contextMenuVisible" class="context-menu" :style="{
|
||||
left: `${contextMenuPosition.x}px`,
|
||||
top: `${contextMenuPosition.y}px`
|
||||
}">
|
||||
<div class="menu-item" @click="handleMenuClick('backups', 'local')">备份</div>
|
||||
<div class="menu-item" @click="handleMenuClick('delete', 'local')">删除</div>
|
||||
<div v-if="currentNode && currentNode.isFile == 'FILE'" class="menu-item"
|
||||
@click="handleMenuClick('preview', 'local')">预览</div>
|
||||
</div>
|
||||
<!-- </el-scrollbar> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree_left">
|
||||
<div class="tree_title">备份空间:</div>
|
||||
<div class="tree_content">
|
||||
<el-scrollbar height="73vh">
|
||||
<el-tree ref="beifentree" style="max-width: 600px" :props="props" :data="backupsdata"
|
||||
default-expand-all @node-click="workclick" @node-contextmenu="handleRightClick"
|
||||
:expand-on-click-node="false" show-checkbox node-key="id" v-loading="worktree1"
|
||||
@check-change="backupsChange">
|
||||
<template #default="{ data }">
|
||||
<span
|
||||
:class="data.station == '0' ? 'custom-tree-node' : (data.station == '1' ? 'custom-tree-node1' : (data.station == '2' ? 'custom-tree-node2' : 'custom-tree-node3'))">
|
||||
<!-- data.children.length -->
|
||||
<span class="text">{{ data.fileName }}({{ data.isFile == 'FOLDER' ?
|
||||
data.children.length :
|
||||
data.fileSize + 'MB' }})</span>
|
||||
<span v-if="data.station != '0'">({{ data.station == '1' ? '新增' :
|
||||
(data.station
|
||||
== '2' ? '已变更' : '已删除') }})</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
<div v-show="contextMenuVisible2" class="context-menu" :style="{
|
||||
left: `${contextMenuPosition.x}px`,
|
||||
top: `${contextMenuPosition.y}px`
|
||||
}">
|
||||
<div class="menu-item" @click="handleMenuClick('restore', 'minio')">恢复</div>
|
||||
<div class="menu-item" @click="handleMenuClick('delete', 'minio')">删除</div>
|
||||
<div v-if="currentNode && currentNode.isFile == 'FILE'" class="menu-item"
|
||||
@click="handleMenuClick('preview', 'minio')">预览</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<!-- <el-scrollbar height="73vh"> -->
|
||||
<el-tree-v2 ref="beifentree" style="max-width: 600px" :props="props" :data="backupsdata"
|
||||
:height="700" default-expand-all @node-click="workclick"
|
||||
@node-contextmenu="handleRightClick" :expand-on-click-node="false" show-checkbox
|
||||
node-key="id" v-loading="worktree1" @check-change="backupsChange">
|
||||
<template #default="{ data }">
|
||||
<span
|
||||
:class="data.station == '0' ? 'custom-tree-node' : (data.station == '1' ? 'custom-tree-node1' : (data.station == '2' ? 'custom-tree-node2' : 'custom-tree-node3'))">
|
||||
<!-- data.children.length -->
|
||||
<span class="text">{{ data.fileName }}({{ data.isFile == 'FOLDER' ?
|
||||
data.children.length :
|
||||
data.fileSize + 'MB' }})</span>
|
||||
<span v-if="data.station != '0'">({{ data.station == '1' ? '新增' :
|
||||
(data.station
|
||||
== '2' ? '已变更' : '已删除') }})</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
<div v-show="contextMenuVisible2" class="context-menu" :style="{
|
||||
left: `${contextMenuPosition.x}px`,
|
||||
top: `${contextMenuPosition.y}px`
|
||||
}">
|
||||
<div class="menu-item" @click="handleMenuClick('restore', 'minio')">恢复</div>
|
||||
<div class="menu-item" @click="handleMenuClick('delete', 'minio')">删除</div>
|
||||
<div v-if="currentNode && currentNode.isFile == 'FILE'" class="menu-item"
|
||||
@click="handleMenuClick('preview', 'minio')">预览</div>
|
||||
</div>
|
||||
<!-- </el-scrollbar> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user