peterlu14
122 lines
3.7 KiB
Vue
122 lines
3.7 KiB
Vue
<template>
|
|
<slideout v-model="showSlideOut" title="The title" :size="'120%'" dock="left" resizable>
|
|
<ChannelSelector></ChannelSelector>
|
|
<div class="pa-1 d-flex align-center">
|
|
<va-button-group class="mr-1">
|
|
<va-button @click="changeViewFormat(0)">Table</va-button>
|
|
<va-button disabled @click="changeViewFormat(1)">Tree</va-button>
|
|
</va-button-group>
|
|
<va-button-group class="mr-3">
|
|
<va-button @click="changeFileView('time')">Time</va-button>
|
|
<va-button @click="changeFileView('folder')">Folder</va-button>
|
|
<va-button @click="changeFileView('project')">Project</va-button>
|
|
</va-button-group>
|
|
<va-button-group>
|
|
<va-button @click="expandAll(true)">Expand</va-button>
|
|
<va-button @click="expandAll(false)">Close</va-button>
|
|
</va-button-group>
|
|
</div>
|
|
<va-inner-loading :loading="loading">
|
|
<div>
|
|
<TableFormat
|
|
v-if="viewFormat === 0"
|
|
ref="table_format_ref"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
@on-select="onSelect"
|
|
></TableFormat>
|
|
<TreeFormat v-if="viewFormat === 1" ref="table_format_ref" :columns="columns" :rows="rows"></TreeFormat>
|
|
</div>
|
|
</va-inner-loading>
|
|
</slideout>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { useFileViewStore } from '@/stores/data-analysis/file-view'
|
|
import { useChannelStore } from '@/stores/data-analysis/channel'
|
|
import { MetaFile } from '@/utils/file'
|
|
import TableFormat from './TableFormat.vue'
|
|
import TreeFormat from './TreeFormat.vue'
|
|
import ChannelSelector from './ChannelSelector.vue'
|
|
import configTable from '@/data/config-table'
|
|
|
|
const table_format_ref = ref<InstanceType<typeof TableFormat> | null>(null)
|
|
|
|
const fileViewStore = useFileViewStore()
|
|
const channelStore = useChannelStore()
|
|
const fileView = reactive(fileViewStore.fileView)
|
|
const rows: any = fileView.children
|
|
const columns = reactive([
|
|
{
|
|
label: 'Name',
|
|
field: 'name',
|
|
},
|
|
{
|
|
label: 'TotalTime',
|
|
field: 'time',
|
|
type: 'number',
|
|
},
|
|
{
|
|
label: 'Size',
|
|
field: 'size',
|
|
type: 'number',
|
|
},
|
|
])
|
|
|
|
const loading = ref(true)
|
|
const showSlideOut = ref(false)
|
|
const showModal = function () {
|
|
showSlideOut.value = !showSlideOut.value
|
|
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 500)
|
|
}
|
|
|
|
const viewFormat = ref(0)
|
|
const changeViewFormat = function (view: number) {
|
|
viewFormat.value = view
|
|
}
|
|
|
|
const changeFileView = async function (view: string) {
|
|
fileView.changeView(view)
|
|
await fileView.appendChildren(1)
|
|
}
|
|
|
|
const expandAll = function (expandOrNot: boolean) {
|
|
if (expandOrNot === true) table_format_ref.value?.expandAll()
|
|
if (expandOrNot === false) table_format_ref.value?.collapseAll()
|
|
}
|
|
|
|
const onSelect = function (selectedFile: MetaFile[]) {
|
|
fileViewStore.filesSelected.length = 0
|
|
fileViewStore.filesSelected.push(...selectedFile)
|
|
|
|
if (fileViewStore.filesSelected.length > 0) {
|
|
// TODO get all selected library
|
|
const config: any = configTable.getModeConfig(
|
|
fileViewStore.filesSelected[0].device.library_name,
|
|
fileViewStore.filesSelected[0].parameter.MODE,
|
|
)
|
|
const channel = Object.values(config.channels)
|
|
const channelOptions = channel.map((v: any, idx) => {
|
|
v.id = idx
|
|
return v
|
|
})
|
|
channelStore.xAxisOptions.length = 0
|
|
channelStore.xAxisOptions.push(...channelOptions)
|
|
channelStore.yAxisOptions.length = 0
|
|
channelStore.yAxisOptions.push(...channelOptions)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fileView.appendChildren()
|
|
})
|
|
|
|
defineExpose({
|
|
showModal,
|
|
})
|
|
</script>
|
|
<style lang="scss"></style>
|