Skip to content

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

修改元数据

parent 121afbee
Hide whitespace changes
Inline Side-by-side
Showing with 233 additions and 351 deletions
src/views/metadata/correlationAnalysis/analysisDetailModal.vue 0 → 100644
View file @ 22cd5d75
<template>
<BasicModal
width="55%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<template #footer>
<a-button type="primary" @click="handleSubmit">关闭</a-button>
</template>
<BasicTable @register="registerTable" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable } from '@/components/Table';
import { detailColumns } from '@/views/metadata/correlationAnalysis/data';
import { detailData } from '@/views/metadata/correlationAnalysis/corrlationAnalysisData';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerTable, { reload }] = useTable({
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;
return { ...response, data: data };
},
columns: detailColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
}
onMounted(() => {
tableData.value = detailData;
});
</script>
src/views/metadata/correlationAnalysis/corrlationAnalysisData.ts 0 → 100644
View file @ 22cd5d75
export const data: any[] = [
{
ENname: 'Title',
CNname: '标题',
path: '/metadata/title',
num: 5,
},
{
ENname: 'Author',
CNname: '作者',
path: '/metadata/author',
num: 3,
},
{
ENname: 'PublicationDate',
CNname: '出版日期',
path: '/metadata/publication_date',
num: 4,
},
{
ENname: 'ISBN',
CNname: '国际标准书号',
path: '/metadata/isbn',
num: 2,
},
{
ENname: 'Publisher',
CNname: '出版社',
path: '/metadata/publisher',
num: 4,
},
];
export const detailData: any[] = [
{
name: '用户信息',
path: '/data/user_info',
type: '数据标准',
num: 1,
},
{
name: '订单详情',
path: '/data/order_details',
type: '数据标准',
num: 1,
},
{
name: '产品列表',
path: '/data/product_list',
type: '数据标准',
num: 1,
},
{
name: '评论数据',
path: '/data/review_data',
type: '数据标准',
num: 1,
},
{
name: '物流信息',
path: '/data/logistics_info',
type: '数据标准',
num: 1,
},
];
src/views/metadata/correlationAnalysis/data.ts 0 → 100644
View file @ 22cd5d75
import { FormSchema } from '@/components/Form';
import { BasicColumn } from '@/components/Table';
export const columns: BasicColumn[] = [
{
title: '元数据英文名',
dataIndex: 'ENname',
width: 120,
},
{
title: '元数据中文名',
dataIndex: 'CNname',
width: 120,
},
{
title: '路径',
dataIndex: 'path',
width: 140,
},
{
title: '关联度',
dataIndex: 'num',
width: 80,
},
];
export const SearchFormSchema: FormSchema[] = [
{
field: 'name',
label: '表关联度',
component: 'Select',
componentProps: {
options: [
{ label: '等于', value: '1' },
{ label: '大于', value: '2' },
{ label: '小于', value: '3' },
],
},
colProps: { span: 4 },
},
{
field: 'num',
label: '',
component: 'Input',
colProps: { span: 4 },
},
];
export const detailColumns: BasicColumn[] = [
{
title: '关联对象',
dataIndex: 'name',
width: 120,
},
{
title: '路径',
dataIndex: 'path',
width: 120,
},
{
title: '关联类型',
dataIndex: 'type',
width: 120,
},
{
title: '关联度',
dataIndex: 'num',
width: 120,
},
];
src/views/metadata/correlationAnalysis/index.vue
View file @ 22cd5d75
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<GroupTree class="w-1/3 xl:w-2/9" @select="onNodeSelect" /> <BasicTable @register="registerTable">
<div class="w-2/3 xl:w-7/9"> <template #bodyCell="{ column, record }">
<div class="charts-container"> <template v-if="column.key === 'action'">
<!-- 图表容器 --> <TableAction
<div id="chart1" class="chart"></div> :actions="[
<div id="chart2" class="chart"></div> {
</div> icon: 'clarity:note-edit-line',
<BasicTable @register="registerTable" :searchInfo="searchInfo"> label: '',
<template #toolbar> onClick: handleEdit.bind(null, record),
<a-button type="primary" @click="handleManage">存储管理</a-button> },
]"
/>
</template> </template>
<template #bodyCell="{ column, record }"> </template>
<template v-if="column.key === 'dataSourceStatus'"> </BasicTable>
<Tag color="error" v-if="record.dataSourceStatus === '0'">数据待采集</Tag> <analysisDetailModal @register="registerModal" />
</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> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'; import { reactive, onMounted, ref } from 'vue';
import { Tag } from 'ant-design-vue'; import { BasicTable, TableAction, useTable } from '@/components/Table';
import { BasicTable, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { useRoute, onBeforeRouteLeave } from 'vue-router'; import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData'; import { useFilterStore } from '@/store/modules/filterData';
import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data'; import { columns, SearchFormSchema } from '@/views/metadata/correlationAnalysis/data';
import GroupTree from '@/views/metadata/GroupTree.vue'; import { data } from '@/views/metadata/correlationAnalysis/corrlationAnalysisData';
import { fieldChangeData, metadataData, tableChangeData } from '@/views/metadata/metadataData'; import analysisDetailModal from './analysisDetailModal.vue';
import MetaDataModal from '@/views/metadata/metaDataModal.vue';
import * as echarts from 'echarts';
import storageManagementModal from './storageManagementModal.vue';
defineOptions({ name: 'Metadata' }); defineOptions({ name: 'Metadata' });
const title = ref('admin-个人工作区'); const title = ref('关联度分析');
const { createMessage } = useMessage();
const filterStore = useFilterStore(); const filterStore = useFilterStore();
const route = useRoute(); const route = useRoute();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerStorageManagementModal, { openModal: openStorageManagementModal }] = useModal();
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const tableData = ref([]); const tableData = ref([]);
const selectedNode = ref(null);
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({ const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
title: title, title: title,
api: async () => { api: async () => {
...@@ -72,166 +51,36 @@ ...@@ -72,166 +51,36 @@
}; };
//过滤data中的数据，取出等于params.deptId的数据 //过滤data中的数据，取出等于params.deptId的数据
var data = []; var data = [];
data = tableData.value.filter((item) => item.parentId !== 0); data = tableData.value;
return { ...response, data: data }; return { ...response, data: data };
}, },
rowKey: 'businessId', rowKey: 'businessId',
striped: false, striped: false,
columns: sourceColumns, columns,
formConfig: { formConfig: {
labelWidth: 120, labelWidth: 80,
schemas: sourceSearchFormSchema, schemas: SearchFormSchema,
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
resetFunc: () => {}, resetFunc: () => {},
}, },
actionColumn: {
width: 50,
title: '操作',
dataIndex: 'action',
},
useSearchForm: true, useSearchForm: true,
showIndexColumn: false, showIndexColumn: false,
showTableSetting: false, showTableSetting: false,
bordered: true, 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) { function handleEdit(record) {
// console.log(record);
openModal(true, { openModal(true, {
...record, title: '关联度详情',
});
}
// 选中节点
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(() => { onMounted(() => {
tableData.value = metadataData; tableData.value = data;
initCharts();
const path = route.path; const path = route.path;
if (filterStore.getSearchParams[path]) { if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) { if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
......
src/views/metadata/metadataComparison/index.vue
View file @ 22cd5d75
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'; import { reactive, onMounted, ref } from 'vue';
import { Tag } from 'ant-design-vue'; import { useTable } from '@/components/Table';
import { BasicTable, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal'; import { useModal } from '@/components/Modal';
import { useRoute, onBeforeRouteLeave } from 'vue-router'; import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData'; import { useFilterStore } from '@/store/modules/filterData';
import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data'; import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data';
import GroupTree from '@/views/metadata/GroupTree.vue'; import { metadataData } from '@/views/metadata/metadataData';
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' }); defineOptions({ name: 'Metadata' });
...@@ -54,7 +19,6 @@ ...@@ -54,7 +19,6 @@
const filterStore = useFilterStore(); const filterStore = useFilterStore();
const route = useRoute(); const route = useRoute();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerStorageManagementModal, { openModal: openStorageManagementModal }] = useModal();
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const tableData = ref([]); const tableData = ref([]);
const selectedNode = ref(null); const selectedNode = ref(null);
...@@ -101,137 +65,8 @@ ...@@ -101,137 +65,8 @@
return 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(() => { onMounted(() => {
tableData.value = metadataData; tableData.value = metadataData;
initCharts();
const path = route.path; const path = route.path;
if (filterStore.getSearchParams[path]) { if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) { if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
......
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