Skip to content

B
bigDataSystem
Commit d749e140 authored by LiXuyang's avatar LiXuyang
Browse files
Options

落标检查-落标检查报告

parent 7b73fd53
Hide whitespace changes
Inline Side-by-side
Showing with 477 additions and 34 deletions
src/router/routes/index.ts
View file @ d749e140
......@@ -443,6 +443,15 @@ export const DataStandardRoute: AppRouteRecordRaw = {
icon: '',
},
},
{
path: 'labelDropInspection/labelReport',
name: 'labelReport',
component: () => import('@/views/dataStandards/labelDropInspection/labelReport/index.vue'),
meta: {
title: '落标检查详情',
icon: '',
},
},
{
path: 'publicCode/detailPublicCode',
name: 'detailPublicCode',
......
src/views/dataStandards/labelDropInspection/index.vue
View file @ d749e140
......@@ -9,11 +9,17 @@
/>
<BasicTable class="w-4/5" @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">批量上线</a-button>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">批量下载</a-button>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">复制到</a-button>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">删除</a-button>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <=0">移动</a-button>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
>批量上线</a-button
>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
>批量下载</a-button
>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0"
>复制到</a-button
>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">删除</a-button>
<a-button type="primary" :disabled="getRowSelection().selectedRowKeys <= 0">移动</a-button>
<a-button type="primary">新建分类</a-button>
<a-button type="primary" @click="handleAdd">新建落标检查</a-button>
</template>
......@@ -71,7 +77,8 @@
import { useMessage } from '@/hooks/web/useMessage';
import AddLabelModel from './addLabelModel.vue';
import { useModal } from '@/components/Modal';
import {useRouter} from "vue-router";
import { useRouter } from 'vue-router';
import { router } from '@/router';
const { push } = useRouter();
const [addLabelModel, { openModal: openAddLabelModel }] = useModal();
......@@ -116,7 +123,7 @@
{
label: '查看详情',
handler: () => {
console.log('点击了查看详情', node);
handleReport(node);
},
icon: 'ant-design:file-search-outlined',
},
......@@ -144,6 +151,14 @@
resolve(menu);
});
}
function handleReport(node) {
router.push({
path: '/dataStandards/labelDropInspection/labelReport',
query: {
name: node.name,
},
});
}
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
......
src/views/dataStandards/labelDropInspection/labelData.ts
View file @ d749e140
export const treeData = [
{
title: '落标检查',
name: '落标检查',
key: '0-0',
icon: 'ant-design:line-chart-outlined',
children: [
{ title: 'DMP_admin-个人工作区', key: '0-0-0', icon: 'ion:desktop-outline',
{ title: 'DMP_admin-个人工作区', name: 'DMP_admin-个人工作区', key: '0-0-0', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-1', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-2', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-1', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-2', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: '共享工作区', key: '0-0-1', icon: 'ion:desktop-outline',
{ title: '共享工作区', name: '共享工作区', key: '0-0-1', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-3', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-4', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-3', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-4', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: 'gxx', key: '0-0-2', icon: 'ion:desktop-outline',
{ title: 'gxx', name: 'gxx', key: '0-0-2', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-5', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-6', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-5', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-6', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: '商城工作区', key: '0-0-3', icon: 'ion:desktop-outline',
{ title: '商城工作区', name: '商城工作区', key: '0-0-3', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-7', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-8', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-7', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-8', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: '数据中台工作区01', key: '0-0-4', icon: 'ion:desktop-outline',
{ title: '数据中台工作区01', name: '数据中台工作区01', key: '0-0-4', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-9', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-10', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-9', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-10', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: '数据中台工作区02', key: '0-0-5', icon: 'ion:desktop-outline',
{ title: '数据中台工作区02', name: '数据中台工作区02', key: '0-0-5', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-11', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-12', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-11', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-12', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: 'glc', key: '0-0-6', icon: 'ion:desktop-outline',
{ title: 'glc', name: 'glc', key: '0-0-6', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-13', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-14', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-13', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-14', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: '数据中台工作区04', key: '0-0-7', icon: 'ion:desktop-outline',
{ title: '数据中台工作区04', name: '数据中台工作区04', key: '0-0-7', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-15', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-16', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-15', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-16', icon: 'ant-design:line-chart-outlined' },
],
},
{ title: '数据中台工作区', key: '0-0-8', icon: 'ion:desktop-outline',
{ title: '数据中台工作区', name: '数据中台工作区', key: '0-0-8', icon: 'ion:desktop-outline',
children: [
{ title: 'dmp落标检查', key: '0-0-0-17', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', key: '0-0-0-18', icon: 'ant-design:line-chart-outlined' },
{ title: 'dmp落标检查', name: 'dmp落标检查', key: '0-0-0-17', icon: 'ant-design:line-chart-outlined' },
{ title: 'gxx落标检查', name: 'gxx落标检查', key: '0-0-0-18', icon: 'ant-design:line-chart-outlined' },
],
},
],
......
src/views/dataStandards/labelDropInspection/labelReport/index.vue 0 → 100644
View file @ d749e140
<template>
<PageWrapper :title="modelName" contentBackground headerSticky>
<template #extra>
<span>执行批次</span>
<Select
@change="getTimeDifference()"
:options="options"
style="width: 320px"
v-model:value="selectBatch"
/>
<a-button>导出报告</a-button>
</template>
<template #footer>
<Descriptions :column="3">
<Descriptions.Item label="任务名称">
{{ modelName }}
</Descriptions.Item>
<Descriptions.Item label="开始时间：">
{{ timeList ? timeList[0] : '' }}
</Descriptions.Item>
<Descriptions.Item label="结束时间：">
{{ timeList ? timeList[1] : '' }}
</Descriptions.Item>
<Descriptions.Item label="耗时："> {{ runTime }}s 0ms </Descriptions.Item>
</Descriptions>
<div style="display: flex">
<div style="flex: 1">
<span>本次执行</span>
<div id="echarts1" style="width: 100%; height: 250px"></div>
</div>
<div style="flex: 2">
<span>规则类型分布</span>
<div id="echarts2" style="width: 100%; height: 250px"></div>
</div>
</div>
<div>
<span>规则清单</span>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<span>规则总量：103</span>
<CheckCircleOutlined style="color: #25a665" />
<span>通过：79</span>
<CloseCircleOutlined style="color: #dd4b4c" />
<span>未通过：14</span>
<QuestionCircleOutlined style="color: #ee8b16" />
<span>执行失败：10</span>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
v-if="record.result === '未通过'"
:actions="[
{
// 编辑
icon: 'clarity:contract-line',
},
]"
/>
</template>
</template>
<template #standard="{ text, record }">
<a>{{ text }}</a>
</template>
<template #result="{ text, record }">
<CheckCircleOutlined v-if="text === '通过'" style="color: #25a665" />
<InfoCircleOutlined v-if="text === '未通过'" style="color: #dd4b4c" />
<QuestionCircleOutlined v-if="text === '执行失败'" style="color: #ee8b16" />
{{ text }}
</template>
</BasicTable>
</div>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import { Descriptions, Select } from 'ant-design-vue';
import {
CheckCircleOutlined,
CloseCircleOutlined,
QuestionCircleOutlined,
InfoCircleOutlined,
} from '@ant-design/icons-vue';
import * as echarts from 'echarts';
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import moment from 'moment';
import {
reportColumn,
reportFormSchema,
} from '@/views/dataStandards/labelDropInspection/labelReport/report.data';
import { reportData } from '@/views/dataStandards/labelDropInspection/labelReport/reportData';
type EChartsOption = echarts.EChartsOption;
const route = useRoute();
const modelName = route.query.name;
const selectBatch = ref('2023/06/07 19:45:59~2023/06/07 19:46:10');
const timeList = computed(() => selectBatch.value.split('~'));
const options = reactive([
{
label: '2023/06/07 19:45:59~2023/06/07 19:46:10',
value: '2023/06/07 19:45:59~2023/06/07 19:46:10',
},
{
label: '2024/11/19 11:10:06~2024/11/19 11:11:01',
value: '2024/11/19 11:10:06~2024/11/19 11:11:01',
},
]);
const runTime = ref('0');
function getTimeDifference() {
if (!timeList.value) return '0';
// 使用 moment 解析带有自定义格式的日期字符串
const format = 'YYYY/MM/DD HH:mm:ss'; // 自定义日期格式
const startMoment = moment(timeList.value[0], format);
const endMoment = moment(timeList.value[1], format);
// 计算时间差（秒数）
console.log('被调用');
runTime.value = endMoment.diff(startMoment, 'seconds');
}
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '',
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: reportData.length,
code: '',
message: '',
data: reportData,
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: reportColumn,
showIndexColumn: false,
striped: false,
// 搜索
formConfig: {
labelWidth: 120,
schemas: reportFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
actionColumn: {
width: 60,
title: '操作',
dataIndex: 'action',
},
});
function getEcharts1() {
const chartDom = document.getElementById('echarts1')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
const dataList = reactive([
{ value: 79, name: '通过' },
{ value: 14, name: '未通过' },
{ value: 10, name: '执行失败' },
]);
const total = dataList.reduce((sum, item) => sum + item.value, 0);
option = {
tooltip: {
trigger: 'item',
},
legend: {
orient: 'vertical',
top: 'center',
left: '75%',
data: [
{ value: total, name: '数据总数' }, // 添加总数项到 legend
...dataList.map((item) => item.name), // 添加实际的数据项
],
},
series: [
{
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: true,
position: 'center',
formatter: function (params: any) {
// 计算通过率
const total = params.dataIndex === 0 ? 79 : params.dataIndex === 1 ? 14 : 10;
const totalCount = 79 + 14 + 10; // 总和
const passRate = ((79 / totalCount) * 100).toFixed(1);
return `通过率: ${passRate}%`; // 中心显示通过率
},
fontSize: 20,
fontWeight: 'bold',
},
labelLine: {
show: false,
},
data: dataList,
},
],
};
option && myChart.setOption(option);
}
function getEcharts2() {
const chartDom = document.getElementById('echarts2')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
},
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['及时性', '准确性', '一致性', '规范性', '唯一性', '完整性', '元数据检查'],
},
color: [
'#D66868',
'#5A88C5',
],
series: [
{
name: '问题规则',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [320, 302, 301, 334, 390, 330, 320],
},
{
name: '成功规则',
type: 'bar',
stack: 'total',
label: {
show: true,
},
emphasis: {
focus: 'series',
},
data: [120, 132, 101, 134, 90, 230, 210],
},
],
};
option && myChart.setOption(option);
}
onMounted(() => {
getTimeDifference();
getEcharts1();
getEcharts2();
});
</script>
<style lang="scss" scoped>
// 导出报告按钮
.ant-btn-default {
border-color: #2a7dc9;
color: #2a7dc9;
}
</style>
src/views/dataStandards/labelDropInspection/labelReport/report.data.ts 0 → 100644
View file @ d749e140
import { FormSchema } from '@/components/Form';
import { BasicColumn } from '@/components/Table';
export const reportFormSchema: FormSchema[] = [
{
field: 'name',
component: 'Input',
componentProps: {
placeholder: '输入关键字搜索',
},
colProps: { lg: 4, md: 6 },
},
];
export const reportColumn: BasicColumn[] = [
{
title: '数据源',
dataIndex: 'data',
width: 80,
},
{
title: '目录',
dataIndex: 'catalog',
width: 80,
},
{
title: '数据库',
dataIndex: 'database',
width: 80,
},
{
title: '数据表',
dataIndex: 'table',
width: 80,
},
{
title: '字段',
dataIndex: 'field',
width: 80,
},
{
title: '标准',
dataIndex: 'standard',
width: 80,
slots: { customRender: 'standard' },
},
{
title: '质量模板',
dataIndex: 'model',
width: 80,
},
{
title: '质量规则',
dataIndex: 'rule',
width: 80,
},
{
title: '检查类型',
dataIndex: 'checkType',
width: 80,
},
{
title: '执行结果',
dataIndex: 'result',
width: 80,
slots: { customRender: 'result' },
},
{
title: '问题记录占比',
dataIndex: 'perc',
width: 80,
},
];
src/views/dataStandards/labelDropInspection/labelReport/reportData.ts 0 → 100644
View file @ d749e140
export const reportData = [
{
data: 'mysql_test',
catalog: null,
database: 'mob_data',
table: 'member',
field: 'member_name',
standard: '姓名',
model: '元数据检查',
rule: '长度检查',
checkType: '元数据检查',
result: '通过',
perc: '0/183487',
},
{
data: 'mysql_test',
catalog: null,
database: 'mob_data',
table: 'member',
field: 'member_name',
standard: '姓名',
model: '元数据检查',
rule: '数据类型检查',
checkType: '元数据检查',
result: '通过',
perc: '0/100000',
},
{
data: 'mysql_test',
catalog: null,
database: 'mob_data',
table: 'graduates_info',
field: 'name',
standard: '姓名',
model: '元数据检查',
rule: '长度检查',
checkType: '元数据检查',
result: '执行失败',
perc: '0/0',
},
{
data: 'mysql_test',
catalog: null,
database: 'mob_data',
table: 'graduates_info',
field: 'name',
standard: '姓名',
model: '元数据检查',
rule: '数据类型检查',
checkType: '元数据检查',
result: '未通过',
perc: null,
},
];
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