From 42f5a37e4d6ff52684a8f93ced59bb1046bf9bdb Mon Sep 17 00:00:00 2001 From: peterlu14 Date: Thu, 29 Dec 2022 10:49:19 +0800 Subject: [PATCH 1/8] [update] build file system for data analysis --- change-note.md | 8 + package-lock.json | 6 +- .../data-analysis/FileContainer.vue | 23 ++ src/components/data-analysis/FileModal.vue | 108 ++++++ src/data/axios/index.ts | 13 + src/data/server-api/collection.ts | 29 ++ src/data/server-api/index.ts | 11 + src/data/server-api/meta.ts | 51 +++ src/data/server-api/project.ts | 17 + src/main.ts | 30 +- .../admin/data-analysis/DataAnalysis.vue | 102 ++--- src/utils/collection.d.ts | 12 + src/utils/file.ts | 355 ++++++++++++++++++ 13 files changed, 684 insertions(+), 81 deletions(-) create mode 100644 change-note.md create mode 100644 src/components/data-analysis/FileContainer.vue create mode 100644 src/components/data-analysis/FileModal.vue create mode 100644 src/data/axios/index.ts create mode 100644 src/data/server-api/collection.ts create mode 100644 src/data/server-api/index.ts create mode 100644 src/data/server-api/meta.ts create mode 100644 src/data/server-api/project.ts create mode 100644 src/utils/collection.d.ts create mode 100644 src/utils/file.ts diff --git a/change-note.md b/change-note.md new file mode 100644 index 0000000..aaf5d8e --- /dev/null +++ b/change-note.md @@ -0,0 +1,8 @@ +# + +# MAIN +### 2022.10.30 +- setup environment +- vite config add path +- import windicss +- add vue-shim.d.ts file (TS2307) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8314769..6e3d29b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2781,9 +2781,9 @@ "dev": true }, "follow-redirects": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", - "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==" + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" }, "form-data": { "version": "4.0.0", diff --git a/src/components/data-analysis/FileContainer.vue b/src/components/data-analysis/FileContainer.vue new file mode 100644 index 0000000..6d10357 --- /dev/null +++ b/src/components/data-analysis/FileContainer.vue @@ -0,0 +1,23 @@ + + + diff --git a/src/components/data-analysis/FileModal.vue b/src/components/data-analysis/FileModal.vue new file mode 100644 index 0000000..2fa5bc0 --- /dev/null +++ b/src/components/data-analysis/FileModal.vue @@ -0,0 +1,108 @@ + + + diff --git a/src/data/axios/index.ts b/src/data/axios/index.ts new file mode 100644 index 0000000..2cf0a67 --- /dev/null +++ b/src/data/axios/index.ts @@ -0,0 +1,13 @@ +import axios, { Axios } from 'axios' + +export const setBaseURL = function (baseURL: string) { + if (baseURL) { + axios.defaults.baseURL = `http://${baseURL}:3000` + } +} + +setBaseURL(location.href.split('/')[2].split(':')[0]) + +export const getAxios = function (): Axios { + return axios +} diff --git a/src/data/server-api/collection.ts b/src/data/server-api/collection.ts new file mode 100644 index 0000000..a0643a4 --- /dev/null +++ b/src/data/server-api/collection.ts @@ -0,0 +1,29 @@ +import { getAxios } from '@/data/axios' +import { AxiosResponse } from 'axios' + +const axios = getAxios() +const FOLDER_TYPE = 'folder' + +const getCollection = async function ( + parent: number, + offset: number, + limit: number, + order: Array, +): Promise> { + let url = `api/file/collection/get?type=${FOLDER_TYPE}&` + if (parent) url += `parent=${parent}&` + if (offset) url += `offset=${offset}&` + if (limit) url += `limit=${limit}&` + if (order) { + const _order = order?.join('-') + url += `order=${_order}` + } + const result = await axios.get(url) + return result +} + +const meta = { + getCollection, +} + +export default meta diff --git a/src/data/server-api/index.ts b/src/data/server-api/index.ts new file mode 100644 index 0000000..11a1e5b --- /dev/null +++ b/src/data/server-api/index.ts @@ -0,0 +1,11 @@ +import meta from './meta' +import collection from './collection' +import project from './project' + +const api = { + collection, + meta, + project, +} + +export default api diff --git a/src/data/server-api/meta.ts b/src/data/server-api/meta.ts new file mode 100644 index 0000000..5f056ce --- /dev/null +++ b/src/data/server-api/meta.ts @@ -0,0 +1,51 @@ +import { getAxios } from '@/data/axios' +import { AxiosResponse } from 'axios' + +const FOLDER_TYPE = 'folder' + +const axios = getAxios() + +const getMetaWithTypeFolder = async function ( + parent: number, + offset: number, + limit: number, + order: Array, +): Promise> { + let url = `api/file/meta/get?type=${FOLDER_TYPE}&` + if (parent) url += `parent=${parent}&` + if (offset) url += `offset=${offset}&` + if (limit) url += `limit=${limit}&` + if (order) { + const _order = order?.join('-') + url += `order=${_order}` + } + const result = await axios.get(url) + return result +} + +const getMetaByTime = async function (time: string): Promise> { + const url = `api/file/meta/get?time=${time}` + const result = await axios.get(url) + return result +} + +const getMetaGroupByTime = async function (): Promise> { + const url = `api/file/meta/get?group=time` + const result = await axios.get(url) + return result +} + +const getMetaByProject = async function (uuid: string): Promise> { + const url = `api/file/meta/get?type=project&project=${uuid}` + const result = await axios.get(url) + return result +} + +const meta = { + getMetaWithTypeFolder, + getMetaByTime, + getMetaByProject, + getMetaGroupByTime, +} + +export default meta diff --git a/src/data/server-api/project.ts b/src/data/server-api/project.ts new file mode 100644 index 0000000..06b73c2 --- /dev/null +++ b/src/data/server-api/project.ts @@ -0,0 +1,17 @@ +import { getAxios } from '@/data/axios' +import { AxiosResponse } from 'axios' + +const axios = getAxios() + +const getProjectGroup = async function (attrs?: Array): Promise> { + let url = `api/project/report/get?` + if (attrs) url += `attrs=${attrs.join('-')}` + const result = await axios.get(url) + return result +} + +const project = { + getProjectGroup, +} + +export default project diff --git a/src/main.ts b/src/main.ts index 732569f..52f079a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -26,20 +26,6 @@ import { BrushComponent, } from 'echarts/components' -// import { -// TitleComponentOption, -// LegendComponentOption, -// GridComponentOption, -// TooltipComponentOption, -// DataZoomComponentOption, -// MarkLineComponentOption, -// ToolboxComponentOption, -// BrushComponentOption, -// XAXisComponentOption, -// YAXisComponentOption, -// } from 'echarts' - -// use echarts necessary component use([ CanvasRenderer, LineChart, @@ -55,19 +41,7 @@ use([ MarkLineComponent, ]) -// // declare chart types -// declare global { -// type TitleOption = TitleComponentOption -// type LegendOption = LegendComponentOption -// type TooltipOption = TooltipComponentOption -// type GridOption = GridComponentOption -// type DataZoomOption = DataZoomComponentOption -// type MarkLineOption = MarkLineComponentOption -// type ToolboxOption = ToolboxComponentOption -// type BrushOption = BrushComponentOption -// type XAXisOption = XAXisComponentOption -// type YAXisOption = YAXisComponentOption -// } +import serverApi from '@/data/server-api' const app = createApp(App) @@ -78,6 +52,8 @@ app.use(createVuestic({ config: vuesticGlobalConfig })) app.component('EChart', ECharts) +app.provide('server-api', serverApi) + if (import.meta.env.VITE_APP_GTM_ENABLED) { app.use( createGtm({ diff --git a/src/pages/admin/data-analysis/DataAnalysis.vue b/src/pages/admin/data-analysis/DataAnalysis.vue index 0e83435..e2f1d47 100644 --- a/src/pages/admin/data-analysis/DataAnalysis.vue +++ b/src/pages/admin/data-analysis/DataAnalysis.vue @@ -1,71 +1,71 @@ - diff --git a/src/utils/collection.d.ts b/src/utils/collection.d.ts new file mode 100644 index 0000000..43a1d9b --- /dev/null +++ b/src/utils/collection.d.ts @@ -0,0 +1,12 @@ +interface collection { + id: number + name: string + parent: object + controller_id: number + size: number + type: string + description: string + deleted: bool +} + +export { collection } diff --git a/src/utils/file.ts b/src/utils/file.ts new file mode 100644 index 0000000..96e7df5 --- /dev/null +++ b/src/utils/file.ts @@ -0,0 +1,355 @@ +import api from '@/data/server-api' + +declare type FolderType = { + file: number + collection: number +} + +class FileView { + children: Array + viewBy: string + offset: number + limit: number + + constructor() { + this.children = [] + this.viewBy = 'time' + this.offset = 0 + this.limit = 20 + } + + init() { + this.children.length = 0 + this.offset = 0 + this.limit = 20 + } + + changeView(viewBy: string) { + this.viewBy = viewBy + this.init() + } + + async appendChildren(id: number) { + if (this.viewBy === 'folder') { + // append children folder + const folderResult = await this.getCollectionsFromServer(id) + for (const _data of folderResult.rows) { + const folder = new Folder(_data.id, _data.name) + // console.log('folder', folder) + await folder.init() + this.children.push(folder) + } + } else if (this.viewBy == 'time') { + const timeGroup = await this.getTimeGroupFromServer() + for (const time in timeGroup) { + const timeInstance = new Time(time, timeGroup[time]?.date) + await timeInstance.appendChildren() + this.children.push(timeInstance) + } + } else if (this.viewBy == 'project') { + const projectGroup = await this.getProjectGroupFromServer(['id', 'name', 'uuid', 'created_at']) + for (const project of projectGroup) { + const projectInstance = new Project(project.id, project.name, project.uuid, project.created_at) + await projectInstance.appendChildren() + this.children.push(projectInstance) + } + } + // console.log('children', this.children) + } + + async getCollectionsFromServer(id: number, order: string[] = ['id', 'desc']) { + const result = await api.collection.getCollection(id, this.offset, this.limit, order) + return result.data + } + + async getFilesByIdFromServer(id: number, order: string[] = ['id', 'desc']) { + const result = await api.meta.getMetaWithTypeFolder(id, this.offset, this.limit, order) + return result.data + } + + async getTimeGroupFromServer() { + const result = await api.meta.getMetaGroupByTime() + return result.data + } + + async getProjectGroupFromServer(attrs: string[]) { + const result = await api.project.getProjectGroup(attrs) + return result.data + } + + getChildren() { + return this.children + } +} + +class Time { + id: string + type: string + idType: string + name: string + children: Array