peterlu14
111 lines
3.7 KiB
Vue
111 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-input v-model="filter" placeholder="Filter..." class="mr-3" style="flex: 0 200px" clearable />
|
|
<va-checkbox v-model="isFilterCaseSensitive" class="mr-3" label="Case sensitive" /> -->
|
|
<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>
|
|
<!-- <div v-if="loading">Loading...</div> -->
|
|
<va-inner-loading :loading="loading">
|
|
<div>
|
|
<TableFormat v-if="viewFormat === 0" ref="table_format_ref" :columns="columns" :rows="rows"></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 } from 'vue'
|
|
import { useFileViewStore } from '@/stores/data-analysis/file-view'
|
|
import TableFormat from './TableFormat.vue'
|
|
import TreeFormat from './TreeFormat.vue'
|
|
import ChannelSelector from './ChannelSelector.vue'
|
|
|
|
const fileViewStore = useFileViewStore()
|
|
const fileView = reactive(fileViewStore.fileView)
|
|
const table_format_ref = ref<InstanceType<typeof TableFormat> | null>(null)
|
|
const rows: any = reactive([])
|
|
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
|
|
initLoad()
|
|
console.log('fileView', fileView.getChildren())
|
|
console.log('rows', rows)
|
|
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 1500)
|
|
}
|
|
|
|
const initLoad = async function () {
|
|
rows.length = 0
|
|
rows.push(...fileView.getChildren())
|
|
// if (rows.length < fileView.children.length) {
|
|
// rows.push(...fileView.children.slice(rows.length, fileView.children.length - 1))
|
|
// }
|
|
// for (const index in rows) {
|
|
// console.log(index, rows[index].children.length, fileView.children[index].children.length)
|
|
// if (rows[index].children.length < fileView.children[index].children.length) {
|
|
// rows[index].children.push(
|
|
// ...fileView.children[index].children.slice(
|
|
// rows[index].children.length,
|
|
// fileView.children[index].children.length - 1,
|
|
// ),
|
|
// )
|
|
// }
|
|
// }
|
|
}
|
|
|
|
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)
|
|
initLoad()
|
|
}
|
|
|
|
const expandAll = function (expandOrNot: boolean) {
|
|
if (expandOrNot === true) table_format_ref.value?.expandAll()
|
|
if (expandOrNot === false) table_format_ref.value?.collapseAll()
|
|
}
|
|
|
|
defineExpose({
|
|
showModal,
|
|
})
|
|
</script>
|
|
<style lang="scss"></style>
|