Skip to content

B
bigDataSystem
Commit 47895f65 authored by liwei's avatar liwei
Browse files
Options

新增了任务运维界面

parent 244dd030
Show whitespace changes
Inline Side-by-side
Showing with 647 additions and 13 deletions
src/router/routes/index.ts
View file @ 47895f65
......@@ -772,6 +772,25 @@ export const serviceDevelopmentRoute: AppRouteRecordRaw = {
],
};
/**实时同步-任务运维*/
export const SyncMaintenanceRoute: AppRouteRecordRaw = {
path: '/realTimeSync',
name: 'realTimeSync',
component: LAYOUT,
meta: {
title: '实时同步',
icon: '',
hidden: true,
currentActiveMenu: '/realTimeSync',
},
children: [
{
path: 'taskOperationsMaintenance/workDetail',
name: 'workDetail',
component: () => import('@/views/realTimeSync/taskOperationsMaintenance/workDetail.vue'),
}
]
}
// Basic routing without permission
// 没有权限要求的基本路由
export const basicRoutes = [
......@@ -787,6 +806,7 @@ export const basicRoutes = [
kinshipParseRoute,
serviceDevelopmentRoute,
RootRoute,
SyncMaintenanceRoute,
...mainOutRoutes,
REDIRECT_ROUTE,
DataWarehousePlanningRoute,
......
src/views/realTimeSync/taskOperationsMaintenance/index.vue
View file @ 47895f65
......@@ -81,8 +81,8 @@
/>
</div>
<div>
<a-button type="primary" @click="" style="margin-right: 20px">启动</a-button>
<a-button type="primary" @click="" style="margin-right: 20px">暂停</a-button>
<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>
</div>
<BasicTable @register="registerTable">
......@@ -91,9 +91,9 @@
<TableAction
:actions="[
{
icon: 'ant-design:form-outlined',
icon: 'ant-design:file-search-outlined',
// label: '查看详情',
onClick: resetNameButton.bind(null, record),
onClick: detailButton.bind(null, record),
},
{
icon: 'ant-design:edit-outlined',
......@@ -101,14 +101,14 @@
onClick: resetNameButton.bind(null, record),
},
{
icon: 'ant-design:form-outlined',
icon: 'ant-design:caret-right-outlined',
// label: '启动',
onClick: resetNameButton.bind(null, record),
onClick: startButton.bind(null, record),
},
{
icon: 'ant-design:form-outlined',
icon: 'ant-design:pause-outlined',
// label: '暂停',
onClick: resetNameButton.bind(null, record),
onClick: stopButton.bind(null, record),
},
]"
/>
......@@ -250,17 +250,34 @@
},
});
/**点击card 改变css样式*/
function clickButton(item){
selectedItem.value = item;
}
/**详情 按钮*/
function detailButton(record){
router.push({
path: '/realTimeSync/taskOperationsMaintenance/workDetail',
query: {
}
});
}
/**修改 按钮*/
function resetNameButton(record){
}
/**删除 按钮*/
function deleteButton(record){
/**启动 按钮*/
function startButton(record){
}
/**暂停 按钮*/
function stopButton(record){
}
......@@ -305,9 +322,9 @@
::v-deep(.ant-select-selector){
width:200px!important;
}
//::v-deep(.ant-select){
// width:200px!important;
//}
::v-deep(.ant-select){
width:200px!important;
}
}
.homePage_module {
margin-top: 20px;
......
src/views/realTimeSync/taskOperationsMaintenance/maintenance.data.ts
View file @ 47895f65
......@@ -106,6 +106,141 @@ export const selectFormSchema: FormSchema[] = [
},
},
];
/**详情页-table列表*/
export const detailColumns: BasicColumn[] = [
{
"title": "检查批次",
"dataIndex": "checkBatch",
"width": 120
},
{
"title": "统计时间",
"dataIndex": "statisticalTime",
"width": 120
},
{
"title": "源端解析数量",
"dataIndex": "sourceParseCount",
"width": 120
},
{
"title": "Kafka写入数量",
"dataIndex": "kafkaWriteCount",
"width": 120
},
{
"title": "Kafka消费数量",
"dataIndex": "kafkaConsumeCount",
"width": 120
},
{
"title": "目标端写入数量",
"dataIndex": "targetWriteCount",
"width": 120
},
{
"title": "同步点",
"dataIndex": "syncPoint",
"width": 120
}
];
/**详情页-下拉框表单*/
export const detailFormSchema: FormSchema[] = [
{
field: 'eventType',
label: '',
component: 'Select',
required: true,
componentProps: {
placeholder: '事件类型',
options: [
{
label: '系统异常',
value: '系统异常',
},
{
label: '数据异常',
value: '数据异常',
},
{
label: '状态切换',
value: '状态切换',
},
{
label: '策略告警',
value: '策略告警',
},
],
},
colProps: { span:3.5 },
},
{
field: 'eventName',
label: '',
component: 'Select',
required: true,
componentProps: {
placeholder: '事件名称',
options: [
{
label: '源端连接异常',
value: '源端连接异常',
},
{
label: '日志解析异常',
value: '日志解析异常',
},
{
label: '内部异常',
value: '内部异常',
},
{
label: 'kafka写入异常',
value: 'kafka写入异常',
},
{
label: '数据写入异常',
value: '数据写入异常',
},
{
label: '数据转换异常',
value: '数据转换异常',
},
{
label: '未知错误',
value: '未知错误',
},
{
label: '目标端任务启动',
value: '目标端任务启动',
},
{
label: '目标端任务暂停',
value: '目标端任务暂停',
},
{
label: '源端任务启动',
value: '源端任务启动',
},
{
label: '源端任务暂停',
value: '源端任务暂停',
},
],
},
colProps: { span:3.5 },
},
{
field: '[startDate, endDate]',
label: '',
component: 'RangePicker',
componentProps: {
format: 'YYYY-MM-DD',
placeholder: ['开始日期', '结束日期'],
},
colProps: { span:4 },
},
];
/**table列表*/
......
src/views/realTimeSync/taskOperationsMaintenance/maintenanceData.ts
View file @ 47895f65
......@@ -174,3 +174,77 @@ export const tableData: any[] =[
ddl: '0'
},
]
/**详情页列表 数据*/
export const detailTableData: any[] =[
{
businessId:'1',
checkBatch:'2023-06-21 19:25:00',
statisticalTime:'2023-06-21 19:27:32',
sourceParseCount:'4',
kafkaWriteCount:'4',
kafkaConsumeCount:'4',
targetWriteCount:'0',
syncPoint:'5902430'
},
{
businessId:'2',
checkBatch:'2023-06-21 19:21:00',
statisticalTime:'2023-06-21 19:21:55',
sourceParseCount:'3',
kafkaWriteCount:'1',
kafkaConsumeCount:'2',
targetWriteCount:'0',
syncPoint:'5902123'
},
{
businessId:'3',
checkBatch:'2023-06-21 19:23:05',
statisticalTime:'2023-06-21 19:23:45',
sourceParseCount:'2',
kafkaWriteCount:'3',
kafkaConsumeCount:'4',
targetWriteCount:'0',
syncPoint:'5912530'
},
{
businessId:'4',
checkBatch:'2023-06-21 19:21:01',
statisticalTime:'2023-06-21 19:21:10',
sourceParseCount:'1',
kafkaWriteCount:'4',
kafkaConsumeCount:'3',
targetWriteCount:'0',
syncPoint:'5902340'
},
{
businessId:'5',
checkBatch:'2023-06-21 19:22:23',
statisticalTime:'2023-06-21 19:22:55',
sourceParseCount:'2',
kafkaWriteCount:'2',
kafkaConsumeCount:'2',
targetWriteCount:'1',
syncPoint:'5984530'
},
{
businessId:'6',
checkBatch:'2023-06-21 19:23:05',
statisticalTime:'2023-06-21 19:23:35',
sourceParseCount:'4',
kafkaWriteCount:'4',
kafkaConsumeCount:'4',
targetWriteCount:'0',
syncPoint:'5862330'
},
{
businessId:'7',
checkBatch:'2023-06-21 19:25:00',
statisticalTime:'2023-06-21 19:25:00',
sourceParseCount:'2',
kafkaWriteCount:'3',
kafkaConsumeCount:'1',
targetWriteCount:'1',
syncPoint:'5912330'
},
]
src/views/realTimeSync/taskOperationsMaintenance/workDetail.vue 0 → 100644
View file @ 47895f65
<template>
<PageWrapper contentFullHeight contentBackground>
<div style="display: flex;justify-content: space-between; align-items: center;margin-bottom: 10px">
<div style="margin-top: 10px;display: flex;margin-left: 10px;align-items: center">
<div>
<Icon icon="material-symbols:sync" :size="35" :color="'rgb(121, 74, 235)'" />
</div>
<div>
<div style="font-weight: bold;font-size: 25px;">orsadas-ter</div>
<div>命名字典/admin-个人工作区/企业/企业号</div>
</div>
</div>
<div style="margin-top: 10px;">
<a-button type="primary" style="margin-right: 10px" @click="editButton"><Icon icon="material-symbols:sync"/>刷新</a-button>
</div>
</div>
<div style="margin-left: 20px">
<Tabs defaultActiveKey="任务事件详情" @change="handleChangeTab">
<TabPane tab="任务运行详情" key="任务运行详情">
<img src="../../../../src/assets/images/syncMaintenanceImg1.png" style="width: 100%;" alt="Logo" />
</TabPane>
<TabPane tab="一致性检查详情" key="一致性检查详情">
<div style="width: 100%;">
<div style="display:flex;justify-content: space-between">
<div style="margin-left: 10px">
<a-input-search
v-model:value="value"
placeholder="请输入关键字"
style="width: 200px"
@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>
</div>
<BasicTable @register="registerTable1">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '跳转事件列表',
onClick: detailButton.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</div>
</TabPane>
<TabPane tab="任务事件详情" key="任务事件详情">
<div style="width: 100%;height: 100%;background-color: white">
<div style="width: 100%;height:30%">
<div style="height: 30px;">
<div class="selectCss">
<BasicForm @register="registerForm"/>
</div>
</div>
<div class="homePage_module">
<Row :gutter="16" class="homePage_left">
<Col :span="24">
<Card>
<div class="card_content">
<Col :span="4">
<div class="card_item">
<div class="card_itemInfo">
<div ref="chartRef" :style="{ width, height }"></div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
<div class="card_item">
<Icon icon="eos-icons:database" :size="30" :color="'rgb(76, 87, 215)'" />
<div class="card_itemInfo">
<div class="dataNum">9</div>
<div class="dataTitle">所有类型</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(2)" :class="{ 'listItemClass': selectedItem === 2 }">
<div class="card_item">
<Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(76, 87, 215)'" />
<div class="card_itemInfo">
<div class="dataNum">7</div>
<div class="dataTitle">状态切换</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(3)" :class="{ 'listItemClass': selectedItem === 3 }">
<div class="card_item">
<Icon icon="line-md:loading-twotone-loop" :size="30" :color="'rgb(167, 113, 255)'" />
<div class="card_itemInfo">
<div class="dataNum">0</div>
<div class="dataTitle">系统异常</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(4)" :class="{ 'listItemClass': selectedItem === 4 }">
<div class="card_item">
<Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(249, 148, 78)'" />
<div class="card_itemInfo">
<div class="dataNum">0</div>
<div class="dataTitle">数据异常</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(5)" :class="{ 'listItemClass': selectedItem === 5 }">
<div class="card_item">
<Icon icon="line-md:minus-circle-filled" :size="30" :color="'rgb(221, 75, 75)'" />
<div class="card_itemInfo">
<div class="dataNum">1</div>
<div class="dataTitle">策略告警</div>
</div>
</div>
</Col>
</div>
</Card>
</Col>
</Row>
</div>
</div>
<div style="width: 100%;height:70%">
<div style="display:flex;justify-content: space-between">
<div style="margin-left: 10px">
<a-input-search
v-model:value="value"
placeholder="请输入关键字"
style="width: 200px"
@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>
</div>
<BasicTable @register="registerTable2">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
]"
/>
</template>
</template>
</BasicTable>
</div>
</div>
</TabPane>
<TabPane tab="异常数据详情" key="异常数据详情"></TabPane>
<TabPane tab="任务监控详情" key="任务监控详情"></TabPane>
</Tabs>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { Divider } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
import { Card, Tabs, TabPane, Col, Row } from 'ant-design-vue';
import { Select,Textarea } from 'ant-design-vue';
import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import DebugModal from './DebugModal.vue'
import { useModal } from '@/components/Modal';
import { useDrawer } from '@/components/Drawer';
import {router} from "@/router";
import Icon from '@/components/Icon/Icon.vue';
import { useECharts } from '@/hooks/web/useECharts';
import { detailColumns,searchFormSchema,selectFormSchema,columns,detailFormSchema } from './maintenance.data';
import { detailTableData,tableData } from './maintenanceData'
defineOptions({ name: 'AccountModal' });
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
});
const selectedItem = ref()
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const [registerTable1] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: detailTableData.length,
code:'',
message:'',
data: [],
};
return { ...response,data: detailTableData };
},
columns:detailColumns,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
},
});
const [registerTable2] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableData.length,
code:'',
message:'',
data: [],
};
return { ...response,data: tableData };
},
rowKey: 'businessId',
columns,
rowSelection: true,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
},
});
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: detailFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
legend: {
bottom: '1%',
left: 'center',
},
series: [
{
color: ['rgb(76, 87, 215)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(234, 150, 0)'],
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 7 },
{ value: 0 },
{ value: 0 },
{ value: 1 },
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true },
);
/**标签切换*/
function handleChangeTab(key: string) {
// 处理标签页切换逻辑...
}
/**跳转事件列表*/
function detailButton(){
}
/**点击card 改变css样式*/
function clickButton(item){
selectedItem.value = item;
}
/**初始化*/
onMounted(() => {
});
</script>
<style scoped lang="scss">
.selectCss{
::v-deep(.ant-select-selector){
width:200px!important;
}
::v-deep(.ant-select){
width:200px!important;
}
}
.homePage_module {
margin-top: 20px;
::v-deep(.ant-card-body) {
display: flex;
justify-content: center;
height: 180px;
}
.homePage_left {
::v-deep(.ant-tabs-tab) {
font-size: 18px;
font-weight: 600;
}
.card_content {
width: 70%;
display: flex;
justify-content: center;
align-items: center;
.card_item {
padding-left: 20px;
display: flex;
align-items: center;
width: 120px;
height: 80px;
border-radius: 10px;
.card_itemInfo {
padding-left: 7px;
.dataNum {
font-size: 20px;
line-height: 26px;
font-weight: bold;
}
.dataTitle {
font-size: 12px;
line-height: 12px;
}
}
}
}
}
}
.listItemClass{
background-color: rgb(230, 243, 255);
}
</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