Skip to content

B
bigDataSystem
Commit 35148a63 authored by baiyinhao's avatar baiyinhao
Browse files
Options

新增数据质量报告页面

parent be1b5992
Show whitespace changes
Inline Side-by-side
Showing with 387 additions and 47 deletions
src/views/dataQuality/dataSheet/task/qualityReport/data.ts
View file @ 35148a63
import { BasicColumn, FormSchema } from '@/components/Table';
import { DescItem } from '@/components/Description';
import { c } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';
export const columns: BasicColumn[] = [
{
......@@ -95,41 +96,58 @@ export const modEditColumns: BasicColumn[] = [
];
export const ruleSchema: FormSchema[] = [
{
field: 'type',
label: '过滤类型',
component: 'RadioGroup',
colProps: { lg: 22 },
field: 'path',
label: '路径',
component: 'TreeSelect',
componentProps: {
options: [
{ label: '黑名单', value: '0' },
{ label: '白名单', value: '1' },
treeData: [
{
label: 'system',
value: 'system',
children: [
{ label: 'discover2', value: 'discover2' },
{ label: 'tmp', value: 'tmp' },
],
},
defaultValue: '0',
required: true,
{ label: 'discover', value: 'discover' },
],
},
{
field: 'baseRule',
label: '库规则',
component: 'InputTextArea',
colProps: { lg: 22 },
colProps: { lg: 24 },
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',
field: 'fileName',
label: '文件名称',
component: 'Input',
colProps: { lg: 24 },
componentProps: {},
defaultValue: '白名单test',
required: true,
},
{
field: 'rule',
label: '规则检验',
field: 'description',
label: '描述',
component: 'Input',
colProps: { lg: 22 },
colProps: { lg: 24 },
},
{
field: 'fileType',
label: '文件类型',
component: 'Input',
componentProps: {
disabled: true,
},
colProps: { lg: 24 },
defaultValue: '质量白名单',
},
{
field: 'tableName',
label: '名单存储表名',
component: 'Input',
componentProps: {},
colProps: { lg: 24 },
required: true,
},
];
export const detailHookColumns: BasicColumn[] = [
......
src/views/dataQuality/dataSheet/task/qualityReport/detailModal.vue
View file @ 35148a63
......@@ -6,15 +6,22 @@
:title="title"
@ok="handleSubmit"
>
<Description size="middle" :bordered="false" title="Hook插件" />
<BasicForm @register="registerForm" />
<Description size="middle" :bordered="false" title="问题数据示例" />
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleAddWhite" v-if="isWhite"
>添加问题数据到白名单</a-button
>
<a-button type="primary" @click="reload">设置问题规则</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<Tag color="success" v-if="record.status === '1'">up</Tag>
</template>
</template>
</BasicTable>
<Description
<!-- <Description
size="middle"
:bordered="false"
title="Kafka服务"
......@@ -22,18 +29,22 @@
:data="refundData"
:schema="refundSchema"
/>
<BasicTable @register="registerKafkaTable" />
<BasicTable @register="registerKafkaTable" /> -->
</BasicModal>
<whiteListModal @register="registerWhiteListModal" />
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicModal, useModalInner, useModal } 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 { detailHookData, KafkaData, detailModalSchema } from './kinshipOperationsData';
import { Tag } from 'ant-design-vue';
import { useForm, BasicForm } from '@/components/Form';
import { downloadByData } from '@/utils/file/download';
import whiteListModal from './modEditModal.vue';
defineOptions({ name: 'KnowledgeModal' });
......@@ -41,9 +52,14 @@
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
const isWhite = ref(true);
const [
registerWhiteListModal,
{ setModalProps: setWhiteListModalProps, openModal: openWhiteListModal },
] = useModal();
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerTable, { reload }] = useTable({
const [registerTable, { reload, getForm, getRowSelection }] = useTable({
api: async () => {
const response = {
pageNum: '1',
......@@ -66,6 +82,10 @@
bordered: false,
showIndexColumn: false,
scroll: { y: 300 },
rowSelection: {
type: 'checkbox',
},
actionColumn: {
width: '120px',
title: '操作',
......@@ -86,9 +106,19 @@
showIndexColumn: false,
scroll: { y: 300 },
});
const [registerForm] = useForm({
labelWidth: 100,
schemas: detailModalSchema,
showActionButtonGroup: false,
actionColOptions: { span: 24 },
});
async function handleSubmit() {
closeModal();
}
/**添加数据到白名单按钮*/
function handleAddWhite() {
openWhiteListModal(true, {});
}
onMounted(() => {
tableData.value = detailHookData;
});
......
src/views/dataQuality/dataSheet/task/qualityReport/index.vue
View file @ 35148a63
......@@ -5,6 +5,12 @@
fixedHeight
contentClass="flex flex-col overflow-y-auto h-screen"
>
<div class="flex flex-row justify-end mb-3">
<a-button type="primary" @click="handleExport" class="w-1/10 xl:w-1/10"
>导出问题数据</a-button
>
<a-button type="primary" @click="handleExport" class="w-1/10 xl:w-1/10">导出报告</a-button>
</div>
<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"
......@@ -13,9 +19,7 @@
</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 #toolbar> </template>
<template #bodyCell="{ column, record }">
<!-- <template v-if="column.key === 'status'">
<Tag color="error" v-if="record.status === '0'">失败</Tag>
......@@ -37,7 +41,7 @@
label: '',
onClick: handleDetail.bind(null),
tooltip: '查看详情',
ifShow: record.result !== '通过',
ifShow: record.status === '0',
},
// {
// icon: 'clarity:link-line',
......@@ -56,6 +60,7 @@
</BasicTable>
</div>
</PageWrapper>
<detail-modal @register="registerDetailModal" />
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
......@@ -72,6 +77,8 @@
import detailModal from './detailModal.vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { formSchema } from '../mainBody.data';
import { getRoleListByPage, deleteById, exportRoleList } from '@/api/system/role/role';
import { downloadByData } from '@/utils/file/download';
defineOptions({ name: 'KnowledgeBase' });
const state = reactive({
......@@ -103,7 +110,7 @@
// // dataIndex: 'action',
// // },
// });
const [registerTableRight, { reload: reloadRight }] = useTable({
const [registerTableRight, { reload: reloadRight, getForm }] = useTable({
dataSource: DataRight,
title: '规则清单',
striped: false,
......@@ -149,7 +156,14 @@
}
function handleDetail() {
openDetailModal(true, {
title: '血缘插件详情',
title: '问题规则',
});
}
//导出报告
async function handleExport() {
console.log('导出----');
const params = Object.assign({}, getForm().getFieldsValue());
const data = await exportRoleList(params);
downloadByData(data, '报告' + '.xlsx');
}
</script>
src/views/dataQuality/dataSheet/task/qualityReport/kinshipOperationsData.ts
View file @ 35148a63
......@@ -256,3 +256,213 @@ export const formSchemaRight: any[] = [
},
},
];
export const detailModalSchema: any[] = [
{
field: 'source',
component: 'Input',
label: '数据库:',
componentProps: {
disabled: true,
placeholder: 'mob_data',
style: { width: '100%' },
},
},
{
field: 'dataTable',
component: 'Input',
label: '数据表/主体:',
componentProps: {
disabled: true,
placeholder: 'menber_relationship_info',
style: { width: '100%' },
},
},
{
field: 'field',
component: 'Input',
label: '字段:',
componentProps: {
disabled: true,
placeholder: 'menber_identity',
style: { width: '100%' },
},
},
{
field: 'ruleName',
component: 'Input',
label: '规则名称:',
componentProps: {
disabled: true,
placeholder: 'menber_identity公民身份号码',
style: { width: '100%' },
},
},
{
field: 'ruleType',
component: 'Input',
label: '规则类型:',
componentProps: {
disabled: true,
placeholder: 'menber_identity公民身份号码',
style: { width: '100%' },
},
},
{
field: 'problemCount',
component: 'Input',
label: '问题记录数:',
componentProps: {
disabled: true,
placeholder: '16723',
style: { width: '100%' },
colProps: {
lg: 24,
md: 24,
},
},
},
{
field: 'reportDimension',
component: 'Input',
label: '报告维度:',
componentProps: {
disabled: true,
placeholder: '',
style: { width: '100%' },
},
},
{
field: 'ruleDesc',
component: 'Input',
label: '规则描述:',
componentProps: {
disabled: true,
placeholder: '',
style: { width: '100%' },
},
},
];
export const whiteListData: any[] = [
{
field: 'requestTitle',
component: 'Input',
label: '申请标题',
componentProps: {
required: true,
placeholder: '',
style: { width: '100%' },
},
},
{
field: 'requestReason',
component: 'Input',
label: '申请理由',
componentProps: {
required: true,
placeholder: '',
style: { width: '100%' },
},
},
{
field: 'requester',
component: 'Input',
label: '申请人',
componentProps: {
// required: true,
disabled: true,
placeholder: 'admin',
style: { width: '100%' },
},
},
{
field: 'requesterOrg',
component: 'Input',
label: '申请人组织',
componentProps: {
// required: true,
disabled: true,
placeholder: '-',
style: { width: '100%' },
},
},
{
field: 'whiteList',
component: 'Select',
label: '白名单',
componentProps: {
required: true,
// disabled: true,
placeholder: '-',
style: { width: '100%' },
options: [
{
label: 'tyh',
value: 'tyh',
},
{
label: 'tyh2',
value: 'tyh2',
},
],
},
},
{
field: 'LinkSubject',
component: 'Input',
label: '名单关联主体',
componentProps: {
// required: true,
disabled: true,
placeholder: '/质量主体/共享工作区/tyh',
style: { width: '100%' },
},
},
{
field: 'SourceInfo',
component: 'Input',
label: '来源信息',
componentProps: {
// required: true,
disabled: true,
placeholder: '',
style: { width: '100%' },
colProps: {
lg: 24,
md: 24,
},
},
},
{
field: 'QualityTask',
component: 'Input',
label: '质量任务',
componentProps: {
// required: true,
disabled: true,
placeholder: 'tyh',
style: { width: '100%' },
},
},
{
field: 'QualityRule',
component: 'Input',
label: '质量规则',
componentProps: {
// required: true,
disabled: true,
placeholder: 'tyh-1',
style: { width: '100%' },
},
},
{
field: 'TaskBatch',
component: 'Input',
label: '任务批次',
componentProps: {
// required: true,
disabled: true,
placeholder: '2023-08-16 14:30:00 ~ 2023-08-17 14:30:00',
style: { width: '100%' },
},
},
];
src/views/dataQuality/dataSheet/task/qualityReport/modEditModal.vue
View file @ 35148a63
......@@ -6,13 +6,10 @@
:title="title"
@ok="handleSubmit"
>
<Alert
show-icon
message="维护血缘插件与数据连接的映射关系，标识插件中的血缘在以下连接所关联的数据源中展示。"
/>
<BasicForm @register="registerForm" />
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleDeleteIds">新增映射</a-button>
<a-button type="primary" @click="handleNewWhiteFast">快速创建白名单</a-button>
</template>
<template #bodyCell="{ column }">
<template v-if="column.key === 'action'">
......@@ -34,22 +31,34 @@
</template>
</BasicTable>
</BasicModal>
<new-white-list-fast-modal @register="registerNewWhiteListFastModal" />
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicModal, useModalInner, useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form';
import { Alert } from 'ant-design-vue';
import { modEditColumns } from './data';
import { modEditData } from './kinshipOperationsData';
import { modEditData, whiteListData } from './kinshipOperationsData';
import newWhiteListFastModal from './newWhiteListFastModal.vue';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const title = '申请更新白名单';
const isNew = ref(true);
const tableData = ref([]);
const [registerNewWhiteListFastModal, { openModal: openNewWhiteFastModal }] = useModal();
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
baseColProps: { lg: 12, md: 24 },
schemas: whiteListData,
showActionButtonGroup: false,
actionColOptions: {},
labelWidth: 150,
});
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerTable, { reload }] = useTable({
......@@ -84,16 +93,16 @@
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
// title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
}
/** 批量删除按钮*/
function handleDeleteIds() {
createMessage.success('刷新成功!');
/** 快速新建白名单弹窗按钮*/
function handleNewWhiteFast() {
openNewWhiteFastModal();
}
/** 删除按钮*/
function handleDelete() {
......
src/views/dataQuality/dataSheet/task/qualityReport/newWhiteListFastModal.vue 0 → 100644
View file @ 35148a63
<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>
src/views/dataQuality/dataSheet/task/taskOperation/index.vue
View file @ 35148a63
......@@ -148,4 +148,11 @@
title: '血缘插件详情',
});
}
//导出报告
async function handleExport() {
console.log('导出----');
const params = Object.assign({}, getForm().getFieldsValue());
const data = await exportRoleList(params);
downloadByData(data, '报告' + '.xlsx');
}
</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