+ 深海地球物理数据管理可视化平台
+ 
+
+ 中国科学院深海科学与工程研究所
+ 
+ 
+ 
+
+ Edit
+ components/HelloWorld.vue to test HMR
+
+ Check out + create-vue, the official Vue + Vite starter +
++ Learn more about IDE Support for Vue in the + Vue Docs Scaling up Guide. +
+Click on the Vite and Vue logos to learn more
+ + + diff --git a/src/components/dataSpace/FileTypeIcon.vue b/src/components/dataSpace/FileTypeIcon.vue new file mode 100644 index 0000000..26015ef --- /dev/null +++ b/src/components/dataSpace/FileTypeIcon.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/components/home/IconDataset.vue b/src/components/home/IconDataset.vue new file mode 100644 index 0000000..f95130e --- /dev/null +++ b/src/components/home/IconDataset.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/src/components/home/IconGrid.vue b/src/components/home/IconGrid.vue new file mode 100644 index 0000000..1762d27 --- /dev/null +++ b/src/components/home/IconGrid.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/src/components/home/IconMagnetic.vue b/src/components/home/IconMagnetic.vue new file mode 100644 index 0000000..0386913 --- /dev/null +++ b/src/components/home/IconMagnetic.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/src/components/home/IconSonar.vue b/src/components/home/IconSonar.vue new file mode 100644 index 0000000..1e70ea1 --- /dev/null +++ b/src/components/home/IconSonar.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/src/components/home/IconWave.vue b/src/components/home/IconWave.vue new file mode 100644 index 0000000..a71e4ed --- /dev/null +++ b/src/components/home/IconWave.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/src/components/home/StatIcon.vue b/src/components/home/StatIcon.vue new file mode 100644 index 0000000..4cb9b8d --- /dev/null +++ b/src/components/home/StatIcon.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/src/constants/dataTypes.js b/src/constants/dataTypes.js new file mode 100644 index 0000000..cd753d7 --- /dev/null +++ b/src/constants/dataTypes.js @@ -0,0 +1,102 @@ +/** + * 地球物理数据类型定义 + */ +export const DATA_CATEGORIES = [ + { + label: '多波束数据', + value: 'multibeam', + children: [ + { label: '船载多波束', value: 'ship_multibeam' }, + { label: '潜载多波束', value: 'submarine_multibeam' } + ] + }, + { + label: '侧扫数据', + value: 'sidescan', + children: [] + }, + { + label: '地震数据', + value: 'seismic', + children: [ + { label: '浅地层地震剖面数据', value: 'shallow_seismic' }, + { label: '2D地震数据', value: 'seismic_2d' }, + { label: '3D地震数据', value: 'seismic_3d' }, + { label: 'OBN地震数据', value: 'obn_seismic' } + ] + }, + { + label: '重力数据', + value: 'gravity', + children: [] + }, + { + label: '磁力数据', + value: 'magnetic', + children: [ + { label: '船载磁力', value: 'ship_magnetic' }, + { label: '潜载磁力', value: 'submarine_magnetic' } + ] + }, + { + label: 'CTD数据', + value: 'ctd', + children: [] + }, + { + label: 'ADCP数据', + value: 'adcp', + children: [] + }, + { + label: '海底热流数据', + value: 'heat_flow', + children: [] + } +] + +/** + * 扁平化数据类型选项（含子类型） + * @returns {Array<{label: string, value: string, category: string}>} + */ +export function getFlatDataTypeOptions() { + const options = [] + DATA_CATEGORIES.forEach((category) => { + if (category.children.length === 0) { + options.push({ + label: category.label, + value: category.value, + category: category.value + }) + return + } + category.children.forEach((child) => { + options.push({ + label: child.label, + value: child.value, + category: category.value + }) + }) + }) + return options +} + +/** + * 根据类型值获取显示名称 + * @param {string} typeValue + * @returns {string} + */ +export function getDataTypeLabel(typeValue) { + const option = getFlatDataTypeOptions().find((item) => item.value === typeValue) + return option ? option.label : typeValue +} + +/** + * 根据类型值获取所属大类 + * @param {string} typeValue + * @returns {string} + */ +export function getDataCategory(typeValue) { + const option = getFlatDataTypeOptions().find((item) => item.value === typeValue) + return option ? option.category : '' +} diff --git a/src/constants/homeImages.js b/src/constants/homeImages.js new file mode 100644 index 0000000..0d2acba --- /dev/null +++ b/src/constants/homeImages.js @@ -0,0 +1,59 @@ +import acousticImg from '@/assets/home/acoustic.jpg' +import seismicImg from '@/assets/home/seismic.jpg' +import potentialImg from '@/assets/home/potential.jpg' +import oceanImg from '@/assets/home/ocean.jpg' +import multibeamImg from '@/assets/home/multibeam.jpg' +import submarineImg from '@/assets/home/submarine.jpg' +import sidescanImg from '@/assets/home/sidescan.jpg' +import gravityImg from '@/assets/home/gravity.jpg' +import magneticImg from '@/assets/home/magnetic.jpg' +import ctdImg from '@/assets/home/ctd.jpg' +import adcpImg from '@/assets/home/adcp.jpg' +import heatflowImg from '@/assets/home/heatflow.jpg' + +/** + * 数据资源大类封面图 + */ +export const CATEGORY_IMAGES = { + acoustic: acousticImg, + seismic: seismicImg, + potential: potentialImg, + ocean: oceanImg +} + +/** + * 各数据类型封面图 + */ +export const DATA_TYPE_IMAGES = { + ship_multibeam: multibeamImg, + submarine_multibeam: submarineImg, + sidescan: sidescanImg, + shallow_seismic: seismicImg, + seismic_2d: seismicImg, + seismic_3d: seismicImg, + obn_seismic: seismicImg, + gravity: gravityImg, + ship_magnetic: magneticImg, + submarine_magnetic: magneticImg, + ctd: ctdImg, + adcp: adcpImg, + heat_flow: heatflowImg +} + +/** + * 获取数据类型对应封面图 + * @param {string} typeValue + * @returns {string} + */ +export function getDataTypeImage(typeValue) { + return DATA_TYPE_IMAGES[typeValue] || acousticImg +} + +/** + * 获取资源大类封面图 + * @param {string} categoryId + * @returns {string} + */ +export function getCategoryImage(categoryId) { + return CATEGORY_IMAGES[categoryId] || acousticImg +} diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..74ac381 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,25 @@ +import { createApp } from 'vue' +import { createPinia } from 'pinia' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' +import * as ElementPlusIconsVue from '@element-plus/icons-vue' +import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 引入中文语言包 +import router from './router' +import App from './App.vue' +import './style.css' + +const app = createApp(App) + +const pinia = createPinia() + +for (const [key, component] of Object.entries(ElementPlusIconsVue)) { + app.component(key, component) +} + +app.use(pinia) + +app.use(ElementPlus, { + locale: zhCn +}) +app.use(router) +app.mount('#app') diff --git a/src/mock/dataFiles.js b/src/mock/dataFiles.js new file mode 100644 index 0000000..921f094 --- /dev/null +++ b/src/mock/dataFiles.js @@ -0,0 +1,36 @@ +/** + * 数据资源 mock 存储（文件与云路径） + */ +export const MOCK_DATA_FILES = { + 1: [ + { + id: 101, + file_name: 'multibeam_raw_001.all', + file_size: 2936012800, + source_type: 'upload', + file_path: '/local/upload/multibeam_raw_001.all', + create_time: '2024-03-15 11:00:00' + } + ], + 6: [ + { + id: 601, + file_name: 'seismic_3d_volume.sgy', + file_size: 45097156608, + source_type: 'cloud', + file_path: 's3://geodata-bucket/seismic/qiongdongnan/seismic_3d_volume.sgy', + create_time: '2024-01-21 09:10:00' + } + ] +} + +let fileIdSeed = 1000 + +/** + * 生成新文件记录 ID + * @returns {number} + */ +export function nextFileId() { + fileIdSeed += 1 + return fileIdSeed +} diff --git a/src/mock/dataSpace.js b/src/mock/dataSpace.js new file mode 100644 index 0000000..1c6f709 --- /dev/null +++ b/src/mock/dataSpace.js @@ -0,0 +1,198 @@ +import { DATA_CATEGORIES } from '@/constants/dataTypes.js' + +export const DATA_SPACES = [ + { id: 'geophys-main', label: '深海地球物理数据空间' }, + { id: 'geophys-south', label: '南海地球物理调查数据空间' }, + { id: 'geophys-pacific', label: '西太平洋地球物理数据空间' } +] + +/** + * 根据数据类型常量生成目录树 + * @returns {Array} + */ +function buildDirectoryTree() { + const children = DATA_CATEGORIES.map((category) => { + if (category.children.length > 0) { + return { + id: category.value, + label: category.label, + children: category.children.map((child) => ({ + id: child.value, + label: child.label + })) + } + } + return { + id: category.value, + label: category.label + } + }) + + return [{ + id: 'root', + label: '深海地球物理数据空间', + children + }] +} + +/** + * 目录树结构（按地球物理数据类型组织） + */ +export const DIRECTORY_TREE = buildDirectoryTree() + +/** + * 各目录下文件 + * @type {Record当前数据空间：{{ currentSpaceLabel }}
+支持创建子目录、设置权限及配额管理（演示功能）。
+ +
+ 编号规则:数据类型_航次_4位编号
+ +
+ + 深海地球物理数据管理可视化平台面向深海调查与科学研究需求，汇聚多波束、地震、重磁、侧扫及海洋环境等多类型地球物理数据， + 提供数据入库、可视化检索与空间分析能力，服务数据贡献者、科研团队和管理机构。 +
+{{ featuredData.data_code }} · {{ featuredData.voyage_name }} · {{ featuredData.file_size }}
+ +{{ item.data_code }} · {{ item.voyage_name }}
+ +面向深海地球物理调查需求，构建用户体验良好的地球物理数据目录信息平台。
+提供便捷安全的数据入库、统计分析和可视化检索工具，服务数据贡献者、资助机构和管理机构。
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+
+ 编号规则:任务类型_目标类型_4位编号
+ +
+