Skip to content

B
bigDataSystem
Commit 1b726b84 authored by liwei's avatar liwei
Browse files
Options

事件中心页面

parent 655a3967
Show whitespace changes
Inline Side-by-side
Showing with 217 additions and 247 deletions
src/views/dataService/serviceDevelopment/MetadataPreviewDrawer.vue
View file @ 1b726b84
...@@ -131,11 +131,6 @@ ...@@ -131,11 +131,6 @@
.icon { .icon {
font-size: 30px !important; font-size: 30px !important;
} }
.tableClass{
::v-deep(.ant-table){
height: 300px;
}
}
.listItemClass{ .listItemClass{
background-color: #badeee; background-color: #badeee;
height: 30px; height: 30px;
......
src/views/realTimeSync/eventCenter/eventCenter.data.ts
View file @ 1b726b84
...@@ -12,64 +12,28 @@ type CheckedType = boolean | string | number; ...@@ -12,64 +12,28 @@ type CheckedType = boolean | string | number;
/**首页-table列表*/ /**首页-table列表*/
export const columns: BasicColumn[] = [ export const columns: BasicColumn[] = [
{ {
title: '任务名称', title: '发生时间',
dataIndex: 'taskName',
width: 120
},
{
title: '启动时间',
dataIndex: 'startTime', dataIndex: 'startTime',
width: 120 width: 120
}, },
{ {
title: '源端', title: '任务名称',
dataIndex: 'source', dataIndex: 'taskName',
width: 120
},
{
title: '目标端',
dataIndex: 'target',
width: 120
},
{
title: '拥有者',
dataIndex: 'owner',
width: 120
},
{
title: '任务版本',
dataIndex: 'taskVersion',
width: 120
},
{
title: '任务状态',
dataIndex: 'taskStatus',
width: 120
},
{
title: '时延',
dataIndex: 'latency',
width: 120 width: 120
}, },
{ {
title: '24小时数据检查有差异', title: '事件类型',
dataIndex: 'dataCheckDifference24h', dataIndex: 'eventType',
width: 120 width: 120
}, },
{ {
title: '最新事件时间', title: '事件名称',
dataIndex: 'latestEventTime', dataIndex: 'eventName',
width: 120,
slots: {customRender: 'latestEventTime'},
},
{
title: '未处理异常',
dataIndex: 'unhandledExceptions',
width: 120 width: 120
}, },
{ {
title: 'DDL', title: '同步点',
dataIndex: 'ddl', dataIndex: 'syncPoint',
width: 120 width: 120
} }
]; ];
...@@ -96,7 +60,7 @@ export const selectFormSchema: FormSchema[] = [ ...@@ -96,7 +60,7 @@ export const selectFormSchema: FormSchema[] = [
field: 'tree', field: 'tree',
label: '', label: '',
component: 'TreeSelect', component: 'TreeSelect',
colProps: { span: 3 }, colProps: { span: 10 },
componentProps: { componentProps: {
maxTagCount:1,//最大tag数量 maxTagCount:1,//最大tag数量
showArrow: true,//箭头 showArrow: true,//箭头
...@@ -108,4 +72,14 @@ export const selectFormSchema: FormSchema[] = [ ...@@ -108,4 +72,14 @@ export const selectFormSchema: FormSchema[] = [
getPopupContainer: () => document.body, getPopupContainer: () => document.body,
}, },
}, },
{
field: '[startDate, endDate]',
label: '',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD',
placeholder: ['开始日期', '结束日期'],
},
colProps: { span:10 },
},
]; ];
src/views/realTimeSync/eventCenter/eventCenterData.ts
View file @ 1b726b84
...@@ -40,139 +40,125 @@ export const TreeData: any[] = [ ...@@ -40,139 +40,125 @@ export const TreeData: any[] = [
/**主页面列表 数据*/ /**主页面列表 数据*/
export const tableData: any[] =[ export const tableData: any[] =[
{ {
businessId:'1', startTime:'2023-06-28 20:29:48',
taskName: 'wirp-322', taskName:'oracle-mysql',
startTime: '2024-01-01 08:00:00', eventType:'状态切换',
source: 'KUNDB', eventName:'源端任务启动',
target: 'KUNDB', syncPoint:'mysql-bin.00203,41944023'
owner: 'admin', },
taskVersion: '5.0', {
taskStatus: '运行中', startTime:'2023-06-28 20:25:36',
latency: '0.00s', taskName:'oracle-mysql',
dataCheckDifference24h: '是', eventType:'状态切换',
latestEventTime: '2024-01-01 08:10:00', eventName:'目标端任务启动',
unhandledExceptions: '37439', syncPoint:'mysql-bin.00203,41944023'
ddl: '0' },
}, {
{ startTime:'2023-06-28 20:14:26',
businessId:'2', taskName:'oracle-mysql',
taskName: 'WARP-108477', eventType:'状态切换',
startTime: '2024-01-01 08:00:00', eventName:'源端任务启动',
source: 'KUNDB', syncPoint:'-'
target: 'KUNDB', },
owner: 'admin', {
taskVersion: '4.0', startTime:'2023-06-28 20:25:33',
taskStatus: '运行中', taskName:'oracle-mysql',
latency: '0.00s', eventType:'状态切换',
dataCheckDifference24h: '是', eventName:'目标端任务启动',
latestEventTime: '2024-01-01 08:10:00', syncPoint:'mysql-bin.00203,41944023'
unhandledExceptions: '37439', },
ddl: '0' {
}, startTime:'2023-06-28 20:12:32',
{ taskName:'oracle-mysql',
businessId:'3', eventType:'状态切换',
taskName: 'test8988', eventName:'源端任务启动',
startTime: '2024-01-01 08:00:00', syncPoint:'mysql-bin.00203,41944023'
source: 'KUNDB', },
target: 'KUNDB', {
owner: 'admin', startTime:'2023-06-28 20:14:48',
taskVersion: '2.0', taskName:'oracle-mysql',
taskStatus: '运行中', eventType:'状态切换',
latency: '0.00s', eventName:'目标端任务启动',
dataCheckDifference24h: '是', syncPoint:'-'
latestEventTime: '2024-01-01 08:10:00', },
unhandledExceptions: '37439', {
ddl: '0' startTime:'2023-06-28 20:27:28',
}, taskName:'oracle-mysql',
{ eventType:'系统异常',
businessId:'4', eventName:'源端任务启动',
taskName: 'test start slowly', syncPoint:'-'
startTime: '2024-01-01 08:00:00', },
source: 'KUNDB', {
target: 'KUNDB', startTime:'2023-06-28 20:28:29',
owner: 'admin', taskName:'oracle-mysql',
taskVersion: '2.0', eventType:'数据异常',
taskStatus: '运行中', eventName:'源端任务启动',
latency: '0.00s', syncPoint:'-'
dataCheckDifference24h: '是', },
latestEventTime: '2024-01-01 08:10:00', {
unhandledExceptions: '37439', startTime:'2023-06-28 20:23:24',
ddl: '0' taskName:'oracle-mysql',
}, eventType:'策略告警',
{ eventName:'源端任务启动',
businessId:'5', syncPoint:'-'
taskName: 'gd', },
startTime: '2024-01-01 08:00:00', ]
source: 'KUNDB', /**主页面 左侧List*/
target: 'MYSQL', export const cardList:any[] = [
owner: 'admin', {
taskVersion: '1.0', id: 2,
taskStatus: '运行中', desc: 'gxx/jira/test',
latency: '0.00s', title: 'test',
dataCheckDifference24h: '是', icon: 'pepicons-pop:rewind-time',
latestEventTime: '2024-01-01 08:10:00', color: 'rgb(138, 101, 235)',
unhandledExceptions: '37439', },
ddl: '0' {
}, id: 3,
{ desc: 'gxx/jira/90017-4',
businessId:'6', title: '90017-4',
taskName: 'dffhjg', icon: 'pepicons-pop:rewind-time',
startTime: '2024-01-01 08:00:00', color: 'rgb(138, 101, 235)',
source: 'KUNDB', },
target: 'MYSQL', {
owner: 'admin', id: 4,
taskVersion: '2.0', desc: 'gxx/jira/字段映射',
taskStatus: '运行中', title: '字段映射',
latency: '0.00s', icon: 'pepicons-pop:rewind-time',
dataCheckDifference24h: '是', color: 'rgb(138, 101, 235)',
latestEventTime: '2024-01-01 08:10:00', },
unhandledExceptions: '37439', {
ddl: '0' id: 5,
}, desc: 'gxx/jira/wuqi_test',
{ title: 'wuqi_test',
businessId:'7', icon: 'pepicons-pop:rewind-time',
taskName: 'pc-8712', color: 'rgb(138, 101, 235)',
startTime: '2024-01-01 08:00:00', },
source: 'KUNDB', {
target: 'MYSQL', id: 5,
owner: 'admin', desc: 'gxx/jira/目标端规则顺序生效问题',
taskVersion: '1.0', title: '目标端规则顺序生效问题',
taskStatus: '初始化', icon: 'pepicons-pop:rewind-time',
latency: '0.00s', color: 'rgb(138, 101, 235)',
dataCheckDifference24h: '是', },
latestEventTime: '2024-01-01 08:10:00', {
unhandledExceptions: '37439', id: 5,
ddl: '0' desc: 'gxx/jira/oracle-argo-吞如-单表-test',
}, title: 'oracle-argo-吞如-单表-test',
{ icon: 'pepicons-pop:rewind-time',
businessId:'8', color: 'rgb(138, 101, 235)',
taskName: '忽略通知', },
startTime: '2024-01-01 08:00:00', {
source: 'MYSQL', id: 5,
target: 'MYSQL', desc: 'admin-个人工作区/xuekai/多个映射规则配置',
owner: 'admin', title: '多个映射规则配置',
taskVersion: '2.0', icon: 'pepicons-pop:rewind-time',
taskStatus: '失败', color: 'rgb(138, 101, 235)',
latency: '0.00s', },
dataCheckDifference24h: '是', {
latestEventTime: '2024-01-01 08:10:00', id: 5,
unhandledExceptions: '37439', desc: 'gxx/jira/oracle-mysql',
ddl: '0' title: 'oracle-mysql',
}, icon: 'pepicons-pop:rewind-time',
{ color: 'rgb(138, 101, 235)',
businessId:'9',
taskName: 'pg2',
startTime: '2024-01-01 08:00:00',
source: 'POSTGRE_SQL',
target: 'MYSQL',
owner: 'admin',
taskVersion: '1.0',
taskStatus: '停止',
latency: '0.00s',
dataCheckDifference24h: '是',
latestEventTime: '2024-01-01 08:10:00',
unhandledExceptions: '37439',
ddl: '0'
}, },
] ]
src/views/realTimeSync/eventCenter/index.vue
View file @ 1b726b84
<template> <template>
<div style="width: 100%;height: 100%;background-color: white"> <div style="width: 100%;height: 100%;background-color: white">
<div style="width: 100%;height:30%"> <div style="width: 100%;height:30%">
<div style="display: flex;height: 30px;margin-left: 20px"> <div style="display: flex;height: 30px;margin-left: 20px;margin-top: 10px">
<div style="display: flex;align-items: center;font-weight: bold;font-size: 20px"> <div style="display: flex;align-items: center;font-weight: bold;font-size: 20px;">
<Icon icon="ant-design:file-text-outlined" :size="30" :color="'#1091FE'" /> <Icon icon="ant-design:file-text-outlined" :size="30" :color="'#1091FE'" />
事件中心 事件中心
</div> </div>
...@@ -73,62 +73,50 @@ ...@@ -73,62 +73,50 @@
</Row> </Row>
</div> </div>
</div> </div>
<div style="width: 100%;height:70%"> <div style="width: 100%;height:70%;display: flex">
<div style="display:flex;justify-content: space-between"> <div style="width: 25%">
<div style="margin-left: 10px"> <div style="background-color: rgb(245, 247, 252);">
<a-input-search <a-input-search
v-model:value="value" v-model:value="value"
placeholder="请输入关键字" placeholder="关键字搜索"
style="width: 200px" class="inputSearchClass"
@search="onSearch" @search="onSearch"
/> />
</div> </div>
<div> <div class="titleClass">
<a-button type="primary" @click="startButton" style="margin-right: 20px">启动</a-button> <div style="margin-left: 10px">
<a-button type="primary" @click="stopButton" style="margin-right: 20px">暂停</a-button> 所有任务
</div> </div>
</div> </div>
<BasicTable @register="registerTable"> <List class="listClass" :pagination="pagination">
<template #bodyCell="{ column, record }"> <template v-for="item in executionList1" :key="item.id">
<template v-if="column.key === 'action'"> <List.Item @click="clickButton(item)" :class="{ 'listItemClass': selectedItem === item }">
<TableAction <List.Item.Meta style="display: flex !important; align-items: center !important">
:actions="[ <template #avatar>
{ <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
icon: 'ant-design:file-search-outlined',
// label: '查看详情',
onClick: detailButton.bind(null, record),
},
{
icon: 'ant-design:edit-outlined',
// label: '编辑',
onClick: resetNameButton.bind(null, record),
},
{
icon: 'ant-design:caret-right-outlined',
// label: '启动',
onClick: startButton.bind(null, record),
},
{
icon: 'ant-design:pause-outlined',
// label: '暂停',
onClick: stopButton.bind(null, record),
},
]"
/>
</template> </template>
<template #title>
<span style="font-weight: bold">{{ item.title }}</span>
</template> </template>
<template #latestEventTime="{ text, record }"> <template #description>
<a @click="showDetails(record)"> {{ text }}</a> <div class="info">
<div v-if="item.desc">{{ item.desc }}</div>
</div>
</template>
</List.Item.Meta>
</List.Item>
</template> </template>
</BasicTable> </List>
</div>
<div style="width: 75%">
<BasicTable @register="registerTable"/>
</div>
</div> </div>
<!-- 重命名 弹窗-->
<ResetNameModal @register="registerResetNameModal" @success="handleSuccess" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Card, Col, Row} from 'ant-design-vue'; import { Card, Col, Row,List} from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue'; import Icon from '@/components/Icon/Icon.vue';
import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue'; import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
...@@ -139,7 +127,7 @@ ...@@ -139,7 +127,7 @@
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { router } from '@/router'; import { router } from '@/router';
import { columns,selectFormSchema } from './eventCenter.data'; import { columns,selectFormSchema } from './eventCenter.data';
import { tableData,TreeData } from './eventCenterData' import { tableData,TreeData,cardList } from './eventCenterData'
import { BasicForm, useForm } from '@/components/Form'; import { BasicForm, useForm } from '@/components/Form';
import { useECharts } from '@/hooks/web/useECharts'; import { useECharts } from '@/hooks/web/useECharts';
...@@ -152,6 +140,14 @@ ...@@ -152,6 +140,14 @@
const go = useGo(); const go = useGo();
const searchInfo = ref(''); const searchInfo = ref('');
const selectedItem = ref() const selectedItem = ref()
const executionList1 = ref(cardList);
//分页相关
const pagination = {
showTotal: (total: number) => `共 ${total} 条`,
total: 8,
show: true,
pageSize: 8,
};
/** 执行统计echarts渲染*/ /** 执行统计echarts渲染*/
function getEchartsData() { function getEchartsData() {
setOptions({ setOptions({
...@@ -166,8 +162,8 @@ ...@@ -166,8 +162,8 @@
}, },
series: [ series: [
{ {
color: ['rgb(147, 140, 206)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(234, 150, 0)'], color: ['rgb(236, 103, 102)', 'rgb(82, 114, 196)', 'rgb(250, 199, 94)', 'rgb(148, 203, 121)'],
name: '访问来源', name: '事件中心',
type: 'pie', type: 'pie',
radius: ['50%', '70%'], radius: ['50%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
...@@ -191,10 +187,10 @@ ...@@ -191,10 +187,10 @@
show: false, show: false,
}, },
data: [ data: [
{ value: 1, name: '初始化' }, { value: 1, name: '系统异常' },
{ value: 6, name: '进行中' }, { value: 1, name: '数据异常' },
{ value: 1, name: '失败'}, { value: 6, name: '状态切换'},
{ value: 1, name: '停止'}, { value: 1, name: '策略告警'},
], ],
animationType: 'scale', animationType: 'scale',
animationEasing: 'exponentialInOut', animationEasing: 'exponentialInOut',
...@@ -205,9 +201,8 @@ ...@@ -205,9 +201,8 @@
], ],
}); });
} }
const [registerResetNameModal, { openModal: openResetNameModal }] = useModal();
const [registerTable, { reload,getForm,getRowSelection }] = useTable({ const [registerTable, { reload,getForm,getRowSelection }] = useTable({
title: '', title: '所有任务',
api: async (params) => { api: async (params) => {
const response = { const response = {
pageNu: "1", pageNu: "1",
...@@ -220,15 +215,13 @@ ...@@ -220,15 +215,13 @@
}; };
return { ...response,data: tableData }; return { ...response,data: tableData };
}, },
rowKey: 'businessId',
columns, columns,
rowSelection: true,
useSearchForm: false, useSearchForm: false,
showTableSetting: false, showTableSetting: false,
showIndexColumn:false, showIndexColumn:false,
bordered: true, bordered: true,
actionColumn: { actionColumn: {
width: 200, width: 100,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
}, },
...@@ -326,9 +319,6 @@ ...@@ -326,9 +319,6 @@
<style lang="less" scoped> <style lang="less" scoped>
.selectCss{ .selectCss{
margin-left: 30px; margin-left: 30px;
//::v-deep(.ant-select-selector){
// width:200px!important;
//}
::v-deep(.ant-select){ ::v-deep(.ant-select){
width:200px!important; width:200px!important;
} }
...@@ -376,5 +366,30 @@ ...@@ -376,5 +366,30 @@
.listItemClass{ .listItemClass{
background-color: rgb(230, 243, 255); background-color: rgb(230, 243, 255);
} }
.icon {
font-size: 20px !important;
}
.listClass{
::v-deep(.ant-list-item){
padding: 5px 24px 5px 10px!important;
}
::v-deep(.ant-list-item-meta-title){
margin-bottom: -5px!important;
}
}
.titleClass{
height: 40px;
background-color: rgb(233, 236, 247);
font-weight: bold;
font-size: 13px;
display: flex;
align-items: center
}
.inputSearchClass{
width: 200px;
height:40px;
margin-left: 10px;
display: flex;
align-items: center
}
</style> </style>
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