Skip to content

B
bigDataSystem
Commit 182279ba authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改数据质量报告

parent d749e140
Hide whitespace changes
Inline Side-by-side
Showing with 862 additions and 0 deletions
src/views/dataQuality/dataSheet/task/qualityReport/data.ts 0 → 100644
View file @ 182279ba
import { BasicColumn, FormSchema } from '@/components/Table';
import { DescItem } from '@/components/Description';
export const columns: BasicColumn[] = [
{
title: ' ',
dataIndex: 'name',
width: 120,
},
// {
// title: '插件状态',
// dataIndex: 'status',
// width: 120,
// },
];
export const columnsRight: BasicColumn[] = [
{
title: '数据源',
dataIndex: 'source',
width: 120,
},
{
title: '目录',
dataIndex: 'catalog',
width: 120,
},
{
title: '数据库',
dataIndex: 'database',
width: 120,
},
{
title: '数据表',
dataIndex: 'table',
width: 120,
},
{
title: '字段',
dataIndex: 'field',
width: 120,
},
{
title: '质量模板',
dataIndex: 'qualityModal',
width: 120,
},
{
title: '质量规则',
dataIndex: 'qualityRule',
width: 120,
},
{
title: '检查类型',
dataIndex: 'checkType',
width: 120,
},
{
title: '执行结果',
dataIndex: 'result',
width: 120,
sorter: true,
},
{
title: '问题记录占比',
dataIndex: 'ratio',
width: 120,
},
{
title: '质量通过率',
dataIndex: 'passRate',
width: 120,
},
{
title: '数据整改',
dataIndex: 'dataEdit',
width: 120,
},
];
export const modEditColumns: BasicColumn[] = [
{
title: '连接名称',
dataIndex: 'name',
width: 80,
},
{
title: '连接类型',
dataIndex: 'type',
width: 80,
},
{
title: '连接字符串',
dataIndex: 'filed',
width: 120,
},
];
export const ruleSchema: FormSchema[] = [
{
field: 'type',
label: '过滤类型',
component: 'RadioGroup',
colProps: { lg: 22 },
componentProps: {
options: [
{ label: '黑名单', value: '0' },
{ label: '白名单', value: '1' },
],
},
defaultValue: '0',
required: true,
},
{
field: 'baseRule',
label: '库规则',
component: 'InputTextArea',
colProps: { lg: 22 },
defaultValue: 'system|discover|tmp',
required: true,
},
{
field: 'tableRule',
label: '表规则',
component: 'InputTextArea',
colProps: { lg: 22 },
defaultValue:
'tdt_,TDT_VIEW,baymax_tmp_,TDT_ROCK_VIEW_,TDT_ROCK_TABLE_,TDTTABLEEXTERNAL,TDTTABLE_PERSISTENT',
required: true,
},
{
field: 'rule',
label: '规则检验',
component: 'Input',
colProps: { lg: 22 },
},
];
export const detailHookColumns: BasicColumn[] = [
{
title: '实例地址',
dataIndex: 'name',
width: 120,
},
{
title: '生产者分区ID',
dataIndex: 'code',
width: 120,
},
{
title: '生成者注释',
dataIndex: 'remark',
width: 120,
},
{
title: '实例状态',
dataIndex: 'status',
width: 120,
},
];
export const refundSchema: DescItem[] = [
{
field: 'type',
label: '认证类型',
},
{
field: 'name',
label: '当前消费组名称',
},
{
field: 'code',
label: '消费者分组ID',
},
{
field: 'theme',
label: '消费者主体',
},
];
export const KafkaColumns: BasicColumn[] = [
{
title: 'Partition Number',
dataIndex: 'PartitionNumber',
width: 120,
},
{
title: 'LastEndOffset',
dataIndex: 'LastEndOffset',
width: 120,
},
{
title: 'CurrentOffset',
dataIndex: 'CurrentOffset',
width: 120,
},
{
title: 'Lag',
dataIndex: 'Lag',
width: 120,
},
];
src/views/dataQuality/dataSheet/task/qualityReport/detailModal.vue 0 → 100644
View file @ 182279ba
<template>
<BasicModal
width="60%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<Description size="middle" :bordered="false" title="Hook插件" />
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<Tag color="success" v-if="record.status === '1'">up</Tag>
</template>
</template>
</BasicTable>
<Description
size="middle"
:bordered="false"
title="Kafka服务"
:column="2"
:data="refundData"
:schema="refundSchema"
/>
<BasicTable @register="registerKafkaTable" />
</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 Description from '@/components/Description/src/Description.vue';
import { detailHookColumns, KafkaColumns, refundSchema } from './data';
import { detailHookData, KafkaData, refundData } from './kinshipOperationsData';
import { Tag } from 'ant-design-vue';
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 };
},
pagination: false,
columns: detailHookColumns,
useSearchForm: false,
showTableSetting: false,
bordered: false,
showIndexColumn: false,
scroll: { y: 300 },
actionColumn: {
width: '120px',
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
const [registerKafkaTable] = useTable({
dataSource: KafkaData,
columns: KafkaColumns,
pagination: false,
showIndexColumn: false,
scroll: { y: 300 },
});
async function handleSubmit() {
closeModal();
}
onMounted(() => {
tableData.value = detailHookData;
});
</script>
src/views/dataQuality/dataSheet/task/qualityReport/index.vue 0 → 100644
View file @ 182279ba
<template>
<PageWrapper
title="质量报告"
contentFullHeight
fixedHeight
contentClass="flex flex-col overflow-y-auto h-screen"
>
<BasicForm @register="registerForm" class="h-1/5 xl:h-1/5" />
<div class="h-1/5 xl:h-1/5">图表占位1</div>
<div class="h-2/5 xl:h-2/5" contentClass="flex flex-row"
><div class="w-1/3 xl:w-1/3">图表占位2</div>
<div class="w-2/3 xl:w-2/3">图表占位3</div>
</div>
<div class="h-1/5 xl:h-1/5 height-100">
<BasicTable @register="registerTableRight" :searchInfo="searchInfo" class="height-100">
<template #toolbar>
<a-button type="primary" @click="refresh">刷新</a-button>
</template>
<template #bodyCell="{ column, record }">
<!-- <template v-if="column.key === 'status'">
<Tag color="error" v-if="record.status === '0'">失败</Tag>
</template>
<template v-if="column.key === 'status'">
<Tag color="success" v-if="record.status === '1'">成功</Tag>
</template> -->
<template v-if="column.key === 'result'">
<Tag color="error" v-if="record.status === '0'">不通过</Tag>
</template>
<template v-if="column.key === 'result'">
<Tag color="success" v-if="record.status === '1'">通过</Tag>
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:contract-line',
label: '',
onClick: handleDetail.bind(null),
tooltip: '查看详情',
ifShow: record.result !== '通过',
},
// {
// icon: 'clarity:link-line',
// label: '',
// onClick: modEdit.bind(null),
// },
// {
// icon: 'clarity:usb-line',
// label: '',
// onClick: handleDelete.bind(null),
// },
]"
/>
</template>
</template>
</BasicTable>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { Tag, Switch } from 'ant-design-vue';
import { columns, columnsRight } from './data';
import { Data, DataRight, searchFormSchema, formSchemaRight } from './kinshipOperationsData';
import modEditModal from './modEditModal.vue';
import ruleModal from './ruleModal.vue';
import detailModal from './detailModal.vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { formSchema } from '../mainBody.data';
defineOptions({ name: 'KnowledgeBase' });
const state = reactive({
checked1: true,
});
const { createMessage, createConfirm } = useMessage();
const [registerModal, { openModal }] = useModal();
const [registerRuleModal, { openModal: openRuleModal }] = useModal();
const [registerDetailModal, { openModal: openDetailModal }] = useModal();
const searchInfo = reactive<Recordable>({});
// const [registerTable, { reload }] = useTable({
// dataSource: Data,
// useSearchForm: true,
// columns,
// showIndexColumn: false,
// showTableSetting: false,
// bordered: true,
// formConfig: {
// labelWidth: 10,
// schemas: searchFormSchema,
// },
// rowSelection: {
// type: 'checkbox',
// },
// // actionColumn: {
// // width: 120,
// // title: '操作',
// // dataIndex: 'action',
// // },
// });
const [registerTableRight, { reload: reloadRight }] = useTable({
dataSource: DataRight,
title: '规则清单',
striped: false,
columns: columnsRight,
showIndexColumn: false,
showTableSetting: false,
useSearchForm: true,
bordered: true,
rowSelection: {
type: 'checkbox',
},
formConfig: {
labelWidth: 10,
schemas: searchFormSchema,
},
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
},
});
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
// baseColProps: { lg: 12, md: 12 },
schemas: formSchemaRight,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
function modEdit() {
openModal(true, {
title: '插件配置',
});
}
function refresh() {
createMessage.success('刷新成功!');
}
function handleDelete() {
openRuleModal(true, {
title: '血缘采集规则配置',
});
}
function handleDetail() {
openDetailModal(true, {
title: '血缘插件详情',
});
}
</script>
src/views/dataQuality/dataSheet/task/qualityReport/kinshipOperationsData.ts 0 → 100644
View file @ 182279ba
import { style } from '@logicflow/extension/es/bpmn-elements/presets/icons';
import { colProps } from 'ant-design-vue/es/grid/Col';
import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
import { result } from 'lodash-es';
import { l, s } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';
export const Data: any[] = [
{
name: 'quark1',
status: '1',
},
{
name: 'quark2',
status: '1',
},
{
name: 'quark3',
status: '1',
},
{
name: 'quark4',
status: '1',
},
{
name: 'quark5',
status: '0',
},
];
export const DataRight: any[] = [
{
name: 'quark1',
status: '1',
result: '1',
source: 'inceptor130.52',
catalog: '-',
database: 'client_system',
table: 'client',
field: 'company_no',
qualityModal: '检查客户编号不为空',
qualityRule: 'company_no检查',
checkType: '规范性',
ratio: '100%',
dataEdit: '',
},
{
name: 'quark2',
status: '0',
result: '1',
source: 'inceptor130.52',
catalog: '-',
database: 'client_system',
table: 'client',
field: 'company_no',
qualityModal: '检查客户编号不为空',
qualityRule: 'company_no检查',
checkType: '规范性',
ratio: '100%',
dataEdit: '',
},
{
name: 'quark3',
status: '1',
result: '0',
source: 'inceptor130.52',
catalog: '-',
database: 'client_system',
table: 'client',
field: 'company_no',
qualityModal: '检查客户编号不为空',
qualityRule: 'company_no检查',
checkType: '规范性',
ratio: '100%',
dataEdit: '',
},
{
name: 'quark4',
status: '1',
result: '1',
source: 'inceptor130.52',
catalog: '-',
database: 'client_system',
table: 'client',
field: 'company_no',
qualityModal: '检查客户编号不为空',
qualityRule: 'company_no检查',
checkType: '规范性',
ratio: '100%',
dataEdit: '',
},
{
name: 'quark5',
status: '0',
result: '0',
source: 'inceptor130.52',
catalog: '-',
database: 'client_system',
table: 'client',
field: 'company_no',
qualityModal: '检查客户编号不为空',
qualityRule: 'company_no检查',
checkType: '规范性',
ratio: '100%',
dataEdit: '',
},
];
export const searchFormSchema: any[] = [
{
field: 'name',
component: 'Input',
label: ' ',
componentProps: {
placeholder: '关键字搜索',
style: { width: '100%' },
},
},
];
export const modEditData: any[] = [
{
name: 'quark1',
type: 'mysql',
filed: 'mysql://root:123456@127.0.0.1:3306/quark',
},
{
name: 'quark2',
type: 'mysql',
filed: 'mysql://root:123456@127.0.0.1:3306/quark',
},
{
name: 'quark3',
type: 'mysql',
filed: 'mysql://root:123456@127.0.0.1:3306/quark',
},
];
export const detailHookData: any[] = [
{
name: 'Instance-001',
code: 'Partition-10',
remark: '用于处理日常任务',
status: '1',
},
{
name: 'Instance-002',
code: 'Partition-15',
remark: '仅供测试使用',
status: '1',
},
{
name: 'Instance-003',
code: 'Partition-20',
remark: '处理高优先级任务',
status: '1',
},
{
name: 'Instance-004',
code: 'Partition-25',
remark: '备用实例',
status: '1',
},
];
export const refundData = {
type: 'NONE',
name: 'catalog_hook_group_catalog12',
code: '4',
theme: 'CATALOG_HOOK',
};
export const KafkaData: any[] = [
{
PartitionNumber: '2',
LastEndOffset: '404792',
CurrentOffset: '404792',
Lag: '0',
},
{
PartitionNumber: '3',
LastEndOffset: '3',
CurrentOffset: '3',
Lag: '0',
},
{
PartitionNumber: '0',
LastEndOffset: '55',
CurrentOffset: '55',
Lag: '0',
},
{
PartitionNumber: '1',
LastEndOffset: '5',
CurrentOffset: '5',
Lag: '0',
},
];
export const formSchemaRight: any[] = [
//后续将删掉placeholder内容 现仅作展示用途
{
field: 'taskName',
component: 'Input',
label: '质量任务名称',
componentProps: {
placeholder: '毕业生-mob',
disabled: true,
colProps: {
lg: 24,
},
},
},
{
field: 'createDate',
component: 'Input',
label: '开始时间',
componentProps: {
placeholder: '2023-08-16 14:30:00',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
{
field: 'endDate',
component: 'Input',
label: '结束时间',
componentProps: {
placeholder: '2023-08-17 14:30:00',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
{
field: 'processTime',
component: 'Input',
label: '耗时',
componentProps: {
placeholder: '4s 0ms',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
{
field: 'businessTag',
component: 'Input',
label: '业务标签',
componentProps: {
placeholder: '-',
disabled: true,
colProps: {
lg: 12,
md: 12,
},
},
},
];
src/views/dataQuality/dataSheet/task/qualityReport/modEditModal.vue 0 → 100644
View file @ 182279ba
<template>
<BasicModal
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<Alert
show-icon
message="维护血缘插件与数据连接的映射关系，标识插件中的血缘在以下连接所关联的数据源中展示。"
/>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleDeleteIds">新增映射</a-button>
</template>
<template #bodyCell="{ column }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:delete-outlined',
color: 'error',
label: '',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null),
},
},
]"
/>
</template>
</template>
</BasicTable>
</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, TableAction, useTable } from '@/components/Table';
import { Alert } from 'ant-design-vue';
import { modEditColumns } from './data';
import { modEditData } from './kinshipOperationsData';
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 };
},
pagination: false,
columns: modEditColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 40,
title: '操作',
dataIndex: 'action',
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
}
/** 批量删除按钮*/
function handleDeleteIds() {
createMessage.success('刷新成功!');
}
/** 删除按钮*/
function handleDelete() {
createMessage.success('删除成功!');
reload();
}
onMounted(() => {
tableData.value = modEditData;
});
</script>
src/views/dataQuality/dataSheet/task/qualityReport/ruleModal.vue 0 → 100644
View file @ 182279ba
<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 { ruleSchema } from './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: ruleSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
await resetFields();
}
onMounted(() => {
tableData.value = recommendData;
});
</script>
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