Skip to content

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

事件中心页面

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