216 lines
7.9 KiB
Vue
216 lines
7.9 KiB
Vue
<template>
|
||
<a-layout style="height: 100vh; width: 100vw;">
|
||
<a-layout-header>
|
||
<menubardatavue></menubardatavue>
|
||
</a-layout-header>
|
||
<a-layout>
|
||
<a-layout-sider :resize-directions="['right']" style=" min-width: 20vw;max-width: 50vw;">
|
||
<a-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block' }">
|
||
<GuiLeftSider class="lefttree" v-on:NodeClicked="ononeFilechoese"
|
||
v-on:NodeDblClicked="onFileDblClick" v-on:FilesSelected="onFilesSelected"
|
||
v-on:FolderClicked="onFolderClicked" v-on:FolderDblClicked="onFolderDblClick"
|
||
v-on:SaveFilesRequested="onSaveFilesRequested" v-on:reset="resetTreeData">
|
||
</GuiLeftSider>
|
||
<template #content>
|
||
<a-doption @click="onShowCurvesClick">显示曲线</a-doption>
|
||
<a-doption @click="openCurveSaveDialogForSelectedFiles">数据导出</a-doption>
|
||
<!-- <a-doption>Option 3</a-doption> -->
|
||
</template>
|
||
</a-dropdown>
|
||
</a-layout-sider>
|
||
<a-layout-content class="right">
|
||
<GuiForDataShow ref="GuiForDataShow"></GuiForDataShow>
|
||
</a-layout-content>
|
||
</a-layout>
|
||
<!-- <a-layout-footer>Footer</a-layout-footer> -->
|
||
|
||
<!-- 保存文件弹窗 -->
|
||
<SaveFileDialog v-model:visible="showSaveDialog" :files="filesToSave" @save="handleSaveFiles"
|
||
@cancel="handleCancelSave" />
|
||
</a-layout>
|
||
</template>
|
||
|
||
<script>
|
||
import menubardatavue from './menuvue/menubar.vue';
|
||
import GuiForDataShow from './vuecomponents/GuiForDataShow.vue';
|
||
import GuiLeftSider from './vuecomponents/GuiLeftSider.vue';
|
||
import SaveFileDialog from './vuecomponents/SaveFileDialog.vue';
|
||
import { fs } from '@tauri-apps/api';
|
||
import { ElMessage } from 'element-plus';
|
||
|
||
export default {
|
||
name: 'APPDataview',
|
||
components: {
|
||
menubardatavue,
|
||
GuiForDataShow,
|
||
GuiLeftSider,
|
||
SaveFileDialog
|
||
},
|
||
data() {
|
||
return {
|
||
// 初始化数据
|
||
message: '欢迎使用 Vue!',
|
||
selectedFilePath: null, // 存储当前选中的文件路径
|
||
selectedFilePaths: [], // 存储多选的文件路径
|
||
treeData: [
|
||
{
|
||
title: 'Trunk 0-0',
|
||
key: '0-0',
|
||
children: [
|
||
{
|
||
title: 'Branch 0-0-0',
|
||
key: '0-0-0',
|
||
children: [
|
||
{
|
||
title: 'Leaf',
|
||
key: '0-0-0-0',
|
||
},
|
||
{
|
||
title: 'Leaf',
|
||
key: '0-0-0-1',
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: 'Branch 0-0-1',
|
||
key: '0-0-1',
|
||
children: [
|
||
{
|
||
title: 'Leaf',
|
||
key: '0-0-1-0',
|
||
},
|
||
]
|
||
},
|
||
],
|
||
},
|
||
],
|
||
showSaveDialog: false,
|
||
filesToSave: [],
|
||
}
|
||
},
|
||
methods: {
|
||
// 处理单个文件选择（单击）
|
||
async ononeFilechoese(filePath) {
|
||
// console.log('选中文件路径:', filePath);
|
||
// 只记录选中的文件路径，不立即加载数据
|
||
this.selectedFilePath = filePath;
|
||
},
|
||
|
||
// 处理文件双击事件
|
||
async onFileDblClick(filePath) {
|
||
// console.log('双击文件路径:', filePath);
|
||
// 双击时加载数据
|
||
this.$refs.GuiForDataShow.onloaddata([filePath]);
|
||
},
|
||
|
||
// 处理多个文件选择（当使用Shift或Ctrl多选时）
|
||
async onFilesSelected(filePaths) {
|
||
// console.log('多选文件路径:', filePaths);
|
||
// 存储多选的文件路径
|
||
this.selectedFilePaths = filePaths;
|
||
// 多选时，可以选择不自动加载数据，等待用户进一步操作
|
||
if (filePaths && filePaths.length > 0) {
|
||
this.selectedFilePath = filePaths[0];
|
||
}
|
||
},
|
||
|
||
// 处理文件夹点击事件
|
||
async onFolderClicked(folderPath, childFilePaths) {
|
||
// console.log('选中文件夹:', folderPath);
|
||
// console.log('文件夹下的文件:', childFilePaths);
|
||
// 存储文件夹下的文件路径
|
||
this.selectedFilePaths = childFilePaths;
|
||
},
|
||
|
||
// 处理文件夹双击事件
|
||
async onFolderDblClick(folderPath, childFilePaths) {
|
||
// console.log('双击文件夹:', folderPath);
|
||
// console.log('文件夹下的文件:', childFilePaths);
|
||
|
||
// 如果文件夹下有文件，则加载所有文件
|
||
if (childFilePaths && childFilePaths.length > 0) {
|
||
// 将所有文件路径传递给 GuiForDataShow 组件
|
||
this.$refs.GuiForDataShow.onloaddata(childFilePaths);
|
||
}
|
||
},
|
||
|
||
// 处理"显示曲线"菜单项点击事件
|
||
async onShowCurvesClick() {
|
||
// console.log('点击显示曲线菜单项');
|
||
// 如果有多选文件，则加载所有选中的文件
|
||
if (this.selectedFilePaths && this.selectedFilePaths.length > 0) {
|
||
// console.log('加载多选文件:', this.selectedFilePaths);
|
||
this.$refs.GuiForDataShow.onloaddata(this.selectedFilePaths);
|
||
} else if (this.selectedFilePath) {
|
||
// 如果只有单选文件，则加载单个文件
|
||
// console.log('加载单选文件:', this.selectedFilePath);
|
||
this.$refs.GuiForDataShow.onloaddata(this.selectedFilePath);
|
||
}
|
||
},
|
||
|
||
resetTreeData() {
|
||
this.selectedFilePaths = []
|
||
this.$refs.GuiForDataShow.onloaddata(this.selectedFilePaths);
|
||
},
|
||
|
||
// 处理保存文件请求
|
||
onSaveFilesRequested(selectedFiles) {
|
||
this.filesToSave = selectedFiles
|
||
this.showSaveDialog = true
|
||
},
|
||
// 处理保存文件
|
||
async handleSaveFiles(saveData) {
|
||
try {
|
||
const { files, location } = saveData
|
||
|
||
for (const file of files) {
|
||
// 构建目标文件路径
|
||
const fileName = file.label
|
||
const targetPath = `${location}/${fileName}`
|
||
|
||
// 复制文件
|
||
await fs.copyFile(file.path, targetPath)
|
||
}
|
||
|
||
ElMessage.success(`成功保存 ${files.length} 个文件到 ${location}`)
|
||
} catch (error) {
|
||
console.error('保存文件失败:', error)
|
||
alert('保存文件失败: ' + error.message)
|
||
}
|
||
},
|
||
|
||
// 取消保存
|
||
handleCancelSave() {
|
||
this.showSaveDialog = false
|
||
this.filesToSave = []
|
||
},
|
||
async openCurveSaveDialogForSelectedFiles() {
|
||
const paths = (this.selectedFilePaths && this.selectedFilePaths.length > 0)
|
||
? this.selectedFilePaths
|
||
: (this.selectedFilePath ? [this.selectedFilePath] : []);
|
||
|
||
if (!paths.length) {
|
||
alert('请先选择一个或多个文件后再导出');
|
||
return;
|
||
}
|
||
|
||
this.$refs.GuiForDataShow.openSaveCurveDialogByPaths(paths);
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 样式区域 */
|
||
h1 {
|
||
color: #42b983;
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
background-color: #f3f5fa;
|
||
overflow: auto;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
</style> |