Skip to content

B
bigDataSystem
Commit e0391cb6 authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改元数据

parent 276d4f20
Hide whitespace changes
Inline Side-by-side
Showing with 915 additions and 26 deletions
src/views/metadata/GroupTree.vue
View file @ e0391cb6
...@@ -8,20 +8,22 @@ ...@@ -8,20 +8,22 @@
:treeData="treeData" :treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'workSpaceName' }" :fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
@select="handleSelect" @select="handleSelect"
:actionList="actionList"
/> />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue'; import { h, nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree'; import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { Nullable } from '@vben/types'; import { Nullable } from '@vben/types';
import { router } from '@/router';
import { TreeData } from '@/views/metadata/metadataData'; import { TreeData } from '@/views/metadata/metadataData';
import { ReloadOutlined } from '@ant-design/icons-vue';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'DataSourceTree' }); defineOptions({ name: 'DataSourceTree' });
const emit = defineEmits(['select']); const emit = defineEmits(['select']);
const { createMessage } = useMessage();
const treeData = ref<TreeItem[]>([]); const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null); const treeRef = ref<Nullable<TreeActionType>>(null);
function getTree() { function getTree() {
...@@ -74,7 +76,22 @@ ...@@ -74,7 +76,22 @@
// console.log('node', node); // console.log('node', node);
emit('select', node); emit('select', node);
} }
// 树的操作列表
const actionList = [
{
render: () => {
return h(ReloadOutlined, {
class: 'ml-2',
onClick: () => {
refresh();
},
});
},
},
];
const refresh = () => {
createMessage.success('刷新成功');
};
onMounted(() => { onMounted(() => {
fetch(); fetch();
}); });
......
src/views/metadata/addTagModal.vue 0 → 100644
View file @ e0391cb6
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { recommendData } from '@/views/metadata/metadataData';
import { BasicForm, useForm } from '@/components/Form';
import { addTagSchema } from '@/views/metadata/data';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: addTagSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
resetFields();
}
onMounted(() => {
tableData.value = recommendData;
});
</script>
src/views/metadata/correlationAnalysis/index.vue 0 → 100644
View file @ e0391cb6
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<GroupTree class="w-1/3 xl:w-2/9" @select="onNodeSelect" />
<div class="w-2/3 xl:w-7/9">
<div class="charts-container">
<!-- 图表容器 -->
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
</div>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleManage">存储管理</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="error" v-if="record.dataSourceStatus === '0'">数据待采集</Tag>
</template>
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="warning" v-if="record.dataSourceStatus === '1'">数据采集中</Tag>
</template>
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="success" v-if="record.dataSourceStatus === '2'">采集已完成</Tag>
</template>
</template>
<template #name="{ text, record }">
<a @click="handleCreate(record)"> {{ text }}</a>
</template>
</BasicTable>
</div>
<MetaDataModal @register="registerModal" @success="handleSuccess" />
<storageManagementModal @register="registerStorageManagementModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { Tag } from 'ant-design-vue';
import { BasicTable, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data';
import GroupTree from '@/views/metadata/GroupTree.vue';
import { fieldChangeData, metadataData, tableChangeData } from '@/views/metadata/metadataData';
import MetaDataModal from '@/views/metadata/metaDataModal.vue';
import * as echarts from 'echarts';
import storageManagementModal from './storageManagementModal.vue';
defineOptions({ name: 'Metadata' });
const title = ref('admin-个人工作区');
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerStorageManagementModal, { openModal: openStorageManagementModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const selectedNode = ref(null);
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
title: title,
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
var data = [];
data = tableData.value.filter((item) => item.parentId !== 0);
return { ...response, data: data };
},
rowKey: 'businessId',
striped: false,
columns: sourceColumns,
formConfig: {
labelWidth: 120,
schemas: sourceSearchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {},
},
useSearchForm: true,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
tableData.value = metadataData.filter(
(item) =>
(info.name === undefined || item.name.includes(info.name)) &&
(info.workSpaceName === undefined ||
info.workSpaceName === '数据库对象资源' ||
item.workSpaceName.includes(info.workSpaceName)),
);
console.log('tableData', tableData.value);
console.log('info', info);
return info;
},
});
function handleCreate(record) {
// console.log(record);
openModal(true, {
...record,
});
}
// 选中节点
async function onNodeSelect(node: any) {
selectedNode.value = node;
title.value = node.workSpaceName;
await getForm().setFieldsValue({
workSpaceName: title.value,
});
const info = await getForm().getFieldsValue();
tableData.value = metadataData.filter(
(item) =>
(info.name === undefined || item.name.includes(info.name)) &&
(info.workSpaceName === undefined ||
info.workSpaceName === '数据库对象资源' ||
item.workSpaceName.includes(info.workSpaceName)),
);
await reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
// console.log(result);
reload();
} else {
reload();
}
}
function handleManage() {
openStorageManagementModal(true, {
title: '存储管理',
});
}
function initCharts() {
// 获取图表容器
const chart1Container = document.getElementById('chart1');
const chart2Container = document.getElementById('chart2');
// 初始化图表实例
const chart1Instance = echarts.init(chart1Container);
const chart2Instance = echarts.init(chart2Container);
// 设置图表选项
chart1Instance.setOption({
title: {
text: '数据表变更趋势图',
},
tooltip: {},
xAxis: {
// axisLabel: {
// interval: 0, // 强制显示所有标签
// },
data: tableChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
max: 250,
splitNumber: 5,
},
toolbox: {
show: true,
feature: {
myRecent7Days: {
title: '最近7天',
icon: 'M0,0 L0,20 L20,20 L20,0 Z',
onclick: function () {},
},
myRecent15Days: {
title: '最近15天',
icon: 'M0,0 L0,20 L20,20 L20,0 Z',
onclick: function () {},
},
myRecentMonth: {
title: '最近1个月',
icon: 'M0,0 L0,20 L20,20 L20,0 Z',
onclick: function () {},
},
},
right: 20,
},
series: [
{
name: '数据表变更',
type: 'line',
color: '#cacaec',
areaStyle: { color: '#dcd4ec' },
data: tableChangeData.map((item) => item.value),
},
],
});
chart2Instance.setOption({
title: {
text: '字段变更趋势图',
},
tooltip: {},
xAxis: {
// axisLabel: {
// interval: 0, // 强制显示所有标签
// },
data: fieldChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
// max: 1000,
splitNumber: 5,
},
series: [
{
name: '字段变更',
type: 'line',
color: '#f9e1c1',
areaStyle: { color: '#fbf0e0' },
data: fieldChangeData.map((item) => item.value),
},
],
});
}
onMounted(() => {
tableData.value = metadataData;
initCharts();
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
console.log('11111111111111111111111111111', params);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
});
searchInfo.deptId = params.deptId;
}
}
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
// console.log('path', from.path);
// console.log('params', params);
filterStore.setSearchParams({
path: from.path,
param: {
...params,
},
});
next(); // 允许导航
});
</script>
<style scoped>
.charts-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart {
margin: 20px 0 0 15px;
width: calc(50% - 10px); /* 确保两个图表并排显示 */
height: 400px;
background-color: white;
}
</style>
src/views/metadata/data.ts
View file @ e0391cb6
...@@ -988,7 +988,7 @@ export const storageManagementColumns: BasicColumn[] = [ ...@@ -988,7 +988,7 @@ export const storageManagementColumns: BasicColumn[] = [
{ {
title: '执行耗时', title: '执行耗时',
dataIndex: 'useTime', dataIndex: 'useTime',
width: 120, width: 80,
}, },
{ {
title: '执行状态', title: '执行状态',
...@@ -1013,7 +1013,7 @@ export const storageManagementColumns: BasicColumn[] = [ ...@@ -1013,7 +1013,7 @@ export const storageManagementColumns: BasicColumn[] = [
{ {
title: '操作者', title: '操作者',
dataIndex: 'user', dataIndex: 'user',
width: 120, width: 80,
}, },
]; ];
export const storageManagementFormSchema: FormSchema[] = [ export const storageManagementFormSchema: FormSchema[] = [
...@@ -1048,3 +1048,57 @@ export const storageManagementFormSchema: FormSchema[] = [ ...@@ -1048,3 +1048,57 @@ export const storageManagementFormSchema: FormSchema[] = [
colProps: { lg: 4, md: 4 }, colProps: { lg: 4, md: 4 },
}, },
]; ];
export const importFormSchema: FormSchema[] = [
{
field: 'file',
component: 'Upload',
label: '上传',
colProps: { lg: 24, md: 24 },
rules: [{ required: true, message: '请选择上传文件' }],
},
{
field: 'flag',
label: '文件重名',
component: 'RadioGroup',
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{ label: '全部替换', value: '0' },
{ label: '全部放弃', value: '1' },
],
},
required: true,
},
];
export const addTagSchema: FormSchema[] = [
{
field: 'name',
label: '选择分类',
component: 'Select',
componentProps: {
options: [
{ label: 'zz1', value: '1' },
{ label: 'test2', value: '2' },
{ label: 'eeee3', value: '3' },
],
},
colProps: { lg: 24, md: 24 },
required: true,
},
{
field: 'tag',
label: '选择标签',
component: 'Select',
componentProps: {
mode: 'multiple',
options: [
{ label: 'qqqq', value: '1' },
{ label: 'www', value: '2' },
{ label: 'eew', value: '3' },
{ label: 'wadwad', value: '4' },
],
},
colProps: { lg: 24, md: 24 },
required: true,
},
];
src/views/metadata/databaseModal.vue
View file @ e0391cb6
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
</div> </div>
</BasicModal> </BasicModal>
<TableModal @register="registerTableModal" /> <TableModal @register="registerTableModal" />
<StoredDetailModal @register="registerStoredDetailModal" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { BasicTable, TableAction, useTable } from '@/components/Table'; import { BasicTable, TableAction, useTable } from '@/components/Table';
...@@ -63,23 +64,16 @@ ...@@ -63,23 +64,16 @@
import { useModal, useModalInner } from '@/components/Modal'; import { useModal, useModalInner } from '@/components/Modal';
import { import {
dataBaseSchema, dataBaseSchema,
partitionColumns,
refundSchema,
storedColumns, storedColumns,
tbColumns, tbColumns,
tbSearchFormSchema, tbSearchFormSchema,
viewColumns, viewColumns,
} from '@/views/metadata/data'; } from '@/views/metadata/data';
import { import { refundData, storedData, tbData, viewData } from '@/views/metadata/metadataData';
partitionData,
refundData,
storedData,
tbData,
viewData,
} from '@/views/metadata/metadataData';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import TableModal from '@/views/metadata/tableModal.vue'; import TableModal from '@/views/metadata/tableModal.vue';
import { Description } from '@/components/Description'; import { Description } from '@/components/Description';
import StoredDetailModal from './storedDetailModal.vue';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const page = ref('1'); const page = ref('1');
...@@ -88,6 +82,7 @@ ...@@ -88,6 +82,7 @@
const tableTitle = ref(''); const tableTitle = ref('');
const params = ref({}); const params = ref({});
const [registerTableModal, { openModal }] = useModal(); const [registerTableModal, { openModal }] = useModal();
const [registerStoredDetailModal, { openModal: openStoredDetailModal }] = useModal();
const [registerTable, { reload, getForm }] = useTable({ const [registerTable, { reload, getForm }] = useTable({
api: async () => { api: async () => {
const response = { const response = {
...@@ -158,7 +153,9 @@ ...@@ -158,7 +153,9 @@
}); });
} }
function handleEdit() { function handleEdit() {
createMessage.success('解绑成功'); openStoredDetailModal(true, {
title: '查看',
});
} }
</script> </script>
<style scoped lang="less"></style> <style scoped lang="less"></style>
src/views/metadata/improtModal.vue 0 → 100644
View file @ e0391cb6
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { computed, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { getDeptList } from '@/api/system/dept/dept';
import { importFormSchema } from './data';
defineOptions({ name: 'AccountModal' });
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: importFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
const treeData = await getDeptList();
const treeList = handleTree(treeData.data, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'username',
show: !unref(isUpdate),
},
{
field: 'password',
show: !unref(isUpdate),
},
{
field: 'flag',
show: !unref(isUpdate),
},
{
field: 'deptId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => (!unref(isUpdate) ? '导入' : '导出'));
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
async function handleSubmit() {
closeModal();
}
</script>
src/views/metadata/metaDataModal.vue
View file @ e0391cb6
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
<a-tab-pane key="1" tab="数据库"> <a-tab-pane key="1" tab="数据库">
<BasicTable @register="registerTable" :title="tableTitle" v-if="page === '1'"> <BasicTable @register="registerTable" :title="tableTitle" v-if="page === '1'">
<template #toolbar> <template #toolbar>
<a-button type="primary" @click="download">导出</a-button>
<a-button type="primary" @click="handleImport">导入</a-button>
<a-button type="primary" @click="handleNew">新建数据库</a-button> <a-button type="primary" @click="handleNew">新建数据库</a-button>
</template> </template>
<template #dbName="{ text, record }"> <template #dbName="{ text, record }">
...@@ -29,6 +31,7 @@ ...@@ -29,6 +31,7 @@
</BasicModal> </BasicModal>
<DatabaseModal @register="registerDatabaseModal" /> <DatabaseModal @register="registerDatabaseModal" />
<AddDatabaseModal @register="registerAddDataBaseModal" /> <AddDatabaseModal @register="registerAddDataBaseModal" />
<importModal @register="registerImport" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { BasicTable, useTable } from '@/components/Table'; import { BasicTable, useTable } from '@/components/Table';
...@@ -42,8 +45,9 @@ ...@@ -42,8 +45,9 @@
import DatabaseModal from '@/views/metadata/databaseModal.vue'; import DatabaseModal from '@/views/metadata/databaseModal.vue';
import { Description } from '@/components/Description'; import { Description } from '@/components/Description';
import AddDatabaseModal from './addDataBaseModal.vue'; import AddDatabaseModal from './addDataBaseModal.vue';
import importModal from './improtModal.vue';
const { createMessage } = useMessage(); const { createMessage, createConfirm } = useMessage();
const page = ref('1'); const page = ref('1');
const tableData = ref([]); const tableData = ref([]);
const title = ref(''); const title = ref('');
...@@ -51,6 +55,7 @@ ...@@ -51,6 +55,7 @@
const params = ref({}); const params = ref({});
const [registerDatabaseModal, { openModal }] = useModal(); const [registerDatabaseModal, { openModal }] = useModal();
const [registerAddDataBaseModal, { openModal: openAddDataBaseModal }] = useModal(); const [registerAddDataBaseModal, { openModal: openAddDataBaseModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const [registerTable, { reload, getForm }] = useTable({ const [registerTable, { reload, getForm }] = useTable({
api: async () => { api: async () => {
const response = { const response = {
...@@ -97,7 +102,22 @@ ...@@ -97,7 +102,22 @@
title: '新建数据库', title: '新建数据库',
}); });
} }
function handleImport() {
openImportModal(true, {
isUpdate: false,
});
}
/** 导出按钮*/
function download() {
createConfirm({
iconType: 'warning',
title: '确认导出',
content: '确认导出？',
onOk() {
createMessage.success('导出成功!');
},
});
}
function handleCreate(record) { function handleCreate(record) {
openModal(true, { openModal(true, {
...record, ...record,
......
src/views/metadata/metadataComparison/index.vue 0 → 100644
View file @ e0391cb6
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<GroupTree class="w-1/3 xl:w-2/9" @select="onNodeSelect" />
<div class="w-2/3 xl:w-7/9">
<div class="charts-container">
<!-- 图表容器 -->
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
</div>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleManage">存储管理</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="error" v-if="record.dataSourceStatus === '0'">数据待采集</Tag>
</template>
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="warning" v-if="record.dataSourceStatus === '1'">数据采集中</Tag>
</template>
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="success" v-if="record.dataSourceStatus === '2'">采集已完成</Tag>
</template>
</template>
<template #name="{ text, record }">
<a @click="handleCreate(record)"> {{ text }}</a>
</template>
</BasicTable>
</div>
<MetaDataModal @register="registerModal" @success="handleSuccess" />
<storageManagementModal @register="registerStorageManagementModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { Tag } from 'ant-design-vue';
import { BasicTable, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data';
import GroupTree from '@/views/metadata/GroupTree.vue';
import { fieldChangeData, metadataData, tableChangeData } from '@/views/metadata/metadataData';
import MetaDataModal from '@/views/metadata/metaDataModal.vue';
import * as echarts from 'echarts';
import storageManagementModal from './storageManagementModal.vue';
defineOptions({ name: 'Metadata' });
const title = ref('admin-个人工作区');
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerStorageManagementModal, { openModal: openStorageManagementModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const selectedNode = ref(null);
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
title: title,
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
var data = [];
data = tableData.value.filter((item) => item.parentId !== 0);
return { ...response, data: data };
},
rowKey: 'businessId',
striped: false,
columns: sourceColumns,
formConfig: {
labelWidth: 120,
schemas: sourceSearchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {},
},
useSearchForm: true,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
tableData.value = metadataData.filter(
(item) =>
(info.name === undefined || item.name.includes(info.name)) &&
(info.workSpaceName === undefined ||
info.workSpaceName === '数据库对象资源' ||
item.workSpaceName.includes(info.workSpaceName)),
);
console.log('tableData', tableData.value);
console.log('info', info);
return info;
},
});
function handleCreate(record) {
// console.log(record);
openModal(true, {
...record,
});
}
// 选中节点
async function onNodeSelect(node: any) {
selectedNode.value = node;
title.value = node.workSpaceName;
await getForm().setFieldsValue({
workSpaceName: title.value,
});
const info = await getForm().getFieldsValue();
tableData.value = metadataData.filter(
(item) =>
(info.name === undefined || item.name.includes(info.name)) &&
(info.workSpaceName === undefined ||
info.workSpaceName === '数据库对象资源' ||
item.workSpaceName.includes(info.workSpaceName)),
);
await reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
// console.log(result);
reload();
} else {
reload();
}
}
function handleManage() {
openStorageManagementModal(true, {
title: '存储管理',
});
}
function initCharts() {
// 获取图表容器
const chart1Container = document.getElementById('chart1');
const chart2Container = document.getElementById('chart2');
// 初始化图表实例
const chart1Instance = echarts.init(chart1Container);
const chart2Instance = echarts.init(chart2Container);
// 设置图表选项
chart1Instance.setOption({
title: {
text: '数据表变更趋势图',
},
tooltip: {},
xAxis: {
// axisLabel: {
// interval: 0, // 强制显示所有标签
// },
data: tableChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
max: 250,
splitNumber: 5,
},
toolbox: {
show: true,
feature: {
myRecent7Days: {
title: '最近7天',
icon: 'M0,0 L0,20 L20,20 L20,0 Z',
onclick: function () {},
},
myRecent15Days: {
title: '最近15天',
icon: 'M0,0 L0,20 L20,20 L20,0 Z',
onclick: function () {},
},
myRecentMonth: {
title: '最近1个月',
icon: 'M0,0 L0,20 L20,20 L20,0 Z',
onclick: function () {},
},
},
right: 20,
},
series: [
{
name: '数据表变更',
type: 'line',
color: '#cacaec',
areaStyle: { color: '#dcd4ec' },
data: tableChangeData.map((item) => item.value),
},
],
});
chart2Instance.setOption({
title: {
text: '字段变更趋势图',
},
tooltip: {},
xAxis: {
// axisLabel: {
// interval: 0, // 强制显示所有标签
// },
data: fieldChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
// max: 1000,
splitNumber: 5,
},
series: [
{
name: '字段变更',
type: 'line',
color: '#f9e1c1',
areaStyle: { color: '#fbf0e0' },
data: fieldChangeData.map((item) => item.value),
},
],
});
}
onMounted(() => {
tableData.value = metadataData;
initCharts();
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
console.log('11111111111111111111111111111', params);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
});
searchInfo.deptId = params.deptId;
}
}
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
// console.log('path', from.path);
// console.log('params', params);
filterStore.setSearchParams({
path: from.path,
param: {
...params,
},
});
next(); // 允许导航
});
</script>
<style scoped>
.charts-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart {
margin: 20px 0 0 15px;
width: calc(50% - 10px); /* 确保两个图表并排显示 */
height: 400px;
background-color: white;
}
</style>
src/views/metadata/metadataData.ts
View file @ e0391cb6
...@@ -1120,6 +1120,7 @@ export const metaData = { ...@@ -1120,6 +1120,7 @@ export const metaData = {
}; };
export const storageManagementData: any[] = [ export const storageManagementData: any[] = [
{ {
id: '1',
startTime: '2024-10-01 08:00:00', startTime: '2024-10-01 08:00:00',
endTime: '2024-10-01 10:30:00', endTime: '2024-10-01 10:30:00',
useTime: '2小时30分钟', useTime: '2小时30分钟',
...@@ -1130,6 +1131,7 @@ export const storageManagementData: any[] = [ ...@@ -1130,6 +1131,7 @@ export const storageManagementData: any[] = [
user: '张三', user: '张三',
}, },
{ {
id: '2',
startTime: '2024-10-02 09:00:00', startTime: '2024-10-02 09:00:00',
endTime: '2024-10-02 11:45:00', endTime: '2024-10-02 11:45:00',
useTime: '2小时45分钟', useTime: '2小时45分钟',
...@@ -1140,6 +1142,7 @@ export const storageManagementData: any[] = [ ...@@ -1140,6 +1142,7 @@ export const storageManagementData: any[] = [
user: '李四', user: '李四',
}, },
{ {
id: '3',
startTime: '2024-10-03 10:00:00', startTime: '2024-10-03 10:00:00',
endTime: '2024-10-03 12:15:00', endTime: '2024-10-03 12:15:00',
useTime: '2小时15分钟', useTime: '2小时15分钟',
...@@ -1150,6 +1153,7 @@ export const storageManagementData: any[] = [ ...@@ -1150,6 +1153,7 @@ export const storageManagementData: any[] = [
user: '王五', user: '王五',
}, },
{ {
id: '4',
startTime: '2024-10-04 11:00:00', startTime: '2024-10-04 11:00:00',
endTime: '2024-10-04 13:20:00', endTime: '2024-10-04 13:20:00',
useTime: '2小时20分钟', useTime: '2小时20分钟',
...@@ -1160,6 +1164,7 @@ export const storageManagementData: any[] = [ ...@@ -1160,6 +1164,7 @@ export const storageManagementData: any[] = [
user: '赵六', user: '赵六',
}, },
{ {
id: '5',
startTime: '2024-10-05 12:00:00', startTime: '2024-10-05 12:00:00',
endTime: '2024-10-05 14:30:00', endTime: '2024-10-05 14:30:00',
useTime: '2小时30分钟', useTime: '2小时30分钟',
......
src/views/metadata/storageManagementModal.vue
View file @ e0391cb6
...@@ -6,31 +6,41 @@ ...@@ -6,31 +6,41 @@
:title="title" :title="title"
@ok="handleSubmit" @ok="handleSubmit"
> >
<div style="display: flex; justify-content: flex-end; padding-bottom: 10px">
<a-button style="margin-right: 5px" type="primary" @click="deleteAll">批量删除</a-button>
<a-button style="margin-right: 5px" type="primary" @click="handleImport">规则设置</a-button>
</div>
<template #footer> <template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button> <a-button type="primary" @click="handleSubmit">关闭</a-button>
</template> </template>
<BasicTable @register="registerTable"> <BasicTable @register="registerTable">
<template #bodyCell="{ column }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
label: '提交', //配置详情
icon: 'clarity:note-edit-line',
label: '',
onClick: handleEdit.bind(null), onClick: handleEdit.bind(null),
}, },
{ {
label: '查看', icon: 'ant-design:delete-outlined',
onClick: handleDetail.bind(null),
},
{
color: 'error', color: 'error',
label: '删除', label: '',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
placement: 'left', placement: 'left',
confirm: handleDelete.bind(null), confirm: handleDelete.bind(null),
}, },
}, },
{
//失败日志
icon: 'clarity:contract-line',
label: '',
ifShow: record.status === '失败',
onClick: handleDetail.bind(null),
},
]" ]"
/> />
</template> </template>
...@@ -49,7 +59,7 @@ ...@@ -49,7 +59,7 @@
defineOptions({ name: 'KnowledgeModal' }); defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']); const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage(); const { createMessage, createConfirm } = useMessage();
const title = ref(); const title = ref();
const tableData = ref([]); const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框） //获取接口数据并放在下拉框里（这里是打开了一个弹框）
...@@ -79,6 +89,8 @@ ...@@ -79,6 +89,8 @@
schemas: storageManagementFormSchema, schemas: storageManagementFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
}, },
rowKey: 'id',
rowSelection: true,
bordered: true, bordered: true,
showIndexColumn: false, showIndexColumn: false,
actionColumn: { actionColumn: {
...@@ -106,6 +118,19 @@ ...@@ -106,6 +118,19 @@
function handleDelete() { function handleDelete() {
createMessage.success('删除成功'); createMessage.success('删除成功');
} }
function deleteAll() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('批量删除成功!');
},
});
}
function handleImport() {
createMessage.success('导出完成');
}
onMounted(() => { onMounted(() => {
tableData.value = storageManagementData; tableData.value = storageManagementData;
}); });
......
src/views/metadata/storedDetailModal.vue 0 → 100644
View file @ e0391cb6
<template>
<BasicModal
width="55%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button>
</template>
<Tabs v-model:activeKey="page" size="large">
<a-tab-pane key="1" tab="概览">
<div v-if="page === '1'">
<Description
size="middle"
title="基本信息"
:bordered="false"
:column="3"
:data="metaData"
:schema="metaDataSchema"
/>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="SQL">
<div v-if="page === '2'">
<img src="../../assets/images/SQL.png" style="width: 100%" alt="Logo" />
</div>
</a-tab-pane>
</Tabs>
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { metaData, recommendData } from '@/views/metadata/metadataData';
import { Tabs } from 'ant-design-vue';
import { metaDataSchema } from '@/views/metadata/data';
import { Description } from '@/components/Description';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
const page = ref('1');
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
}
onMounted(() => {
tableData.value = recommendData;
});
</script>
src/views/metadata/tableModal.vue
View file @ e0391cb6
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
:data="refundData" :data="refundData"
:schema="refundSchema" :schema="refundSchema"
/> />
<a-button type="primary" @click="addTag">新增标签</a-button>
<Description <Description
size="middle" size="middle"
title="分区信息" title="分区信息"
...@@ -114,6 +115,7 @@ ...@@ -114,6 +115,7 @@
<physicsModal @register="registerPhysicsModal" /> <physicsModal @register="registerPhysicsModal" />
<versionModal @register="registerVersionModal" /> <versionModal @register="registerVersionModal" />
<analysisModal @register="registerAnalysisModal" /> <analysisModal @register="registerAnalysisModal" />
<AddTagModal @register="registerAddTagModal" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { BasicTable, TableAction, useTable } from '@/components/Table'; import { BasicTable, TableAction, useTable } from '@/components/Table';
...@@ -157,6 +159,7 @@ ...@@ -157,6 +159,7 @@
import physicsModal from './physicsModal.vue'; import physicsModal from './physicsModal.vue';
import versionModal from './versionModal.vue'; import versionModal from './versionModal.vue';
import analysisModal from './analysisModal.vue'; import analysisModal from './analysisModal.vue';
import AddTagModal from './addTagModal.vue';
const { createMessage } = useMessage(); const { createMessage } = useMessage();
const page = ref('1'); const page = ref('1');
...@@ -168,6 +171,7 @@ ...@@ -168,6 +171,7 @@
const [registerPhysicsModal, { openModal: openPhysicsModal }] = useModal(); const [registerPhysicsModal, { openModal: openPhysicsModal }] = useModal();
const [registerVersionModal, { openModal: openVersionModal }] = useModal(); const [registerVersionModal, { openModal: openVersionModal }] = useModal();
const [registerAnalysisModal, { openModal: openAnalysisModal }] = useModal(); const [registerAnalysisModal, { openModal: openAnalysisModal }] = useModal();
const [registerAddTagModal, { openModal: openAddTagModal }] = useModal();
const [registerTable, { reload, getForm }] = useTable({ const [registerTable, { reload, getForm }] = useTable({
api: async () => { api: async () => {
const response = { const response = {
...@@ -279,6 +283,11 @@ ...@@ -279,6 +283,11 @@
title: '智能推荐数据标准', title: '智能推荐数据标准',
}); });
} }
function addTag() {
openAddTagModal(true, {
title: '添加标签',
});
}
function quotation() { function quotation() {
openQuotationModal(true, { openQuotationModal(true, {
title: '引用数据标准', title: '引用数据标准',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment