Skip to content

B
bigDataSystem
Commit 1475bc27 authored by liwei's avatar liwei
Browse files
Options

任务监控初步页面

parent 1f7fc82d
Hide whitespace changes
Inline Side-by-side
Showing with 1226 additions and 67 deletions
src/views/realTimeSync/taskOperationsMaintenance/DDLDetailModal.vue 0 → 100644
View file @ 1475bc27
<template>
<BasicModal width="60%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<Tabs defaultActiveKey="DDL处理" @change="handleChangeTab">
<TabPane tab="DDL处理" key="DDL处理">
<Alert
style="margin-bottom: 10px"
type="info"
message="DDL处理成功后,建议发布新的任务配置版本后重启任务(若目标端为Argodb请“强制重启“任务)"
show-icon
/>
<BasicForm @register="registerForm1" style="border: 1px solid rgb(235, 236, 241)"/>
<div style="display: flex">
<BasicForm @register="registerForm2" style="border: 1px solid rgb(235, 236, 241);width: 50%"/>
<BasicForm @register="registerForm3" style="border: 1px solid rgb(235, 236, 241);width: 50%">
<template #taskVersion="{model,field}">
<span>
&nbsp;&nbsp;&nbsp{{model.taskVersion}}&nbsp;&nbsp;&nbsp;
<a-button style="border-color: rgb(98, 177, 252);color: rgb(98, 177, 252)">获取当前运行版本</a-button>
</span>
</template>
</BasicForm>
</div>
<Alert
style="margin-top: 20px"
type="info"
message="“待更新表/字段修改预期”根据当前最新任务配置版本生成，若目标端已经按照配置更新，则可忽略该操作;反之请与“待更新表/字段修改预期”保持一致，否则会导致数据写入失败。"
show-icon
/>
<div style="display: flex;justify-content: space-between;margin-top: 20px;margin-bottom: 10px">
<div style="font-weight: bold">DDL语句</div>
<a-button type="primary">复制</a-button>
</div>
<textarea style="width: 100%;border: 1px solid #ccc;" rows="4" v-model="textAreaData"/>
<div style="display: flex;margin-top: 20px;margin-bottom: 10px;justify-content: space-between;align-items: center">
<div style="font-weight: bold">支持用户在此框对DDL语句进行编辑</div>
<div style="display: flex;align-items: center">
<div style="font-weight: bold;margin-right: 10px">当前是否存在积压数据:<span style="color: red">否</span></div>
<a-button type="primary" @click="reloadButton">刷新</a-button>
</div>
</div>
<textarea style="width: 100%;border: 1px solid #ccc;" rows="4" v-model="textAreaData"/>
</TabPane>
<TabPane tab="处理历史" key="处理历史">
<BasicTable @register="registerTable">
<template #SQL="{ text, record }">
<a><Icon icon="ant-design:file-search-outlined" :size="20" @click="lookSQLButton"/></a>
</template>
<template #log="{ text, record }">
<a><Icon icon="ant-design:file-sync-outlined" :size="20" @click="lookLogButton"/></a>
</template>
</BasicTable>
</TabPane>
</Tabs>
<template #footer>
<a-button>取消</a-button>
<a-button style="background-color: rgb(245, 128, 41);color: white">忽略</a-button>
<a-button style="background-color: rgb(0, 157, 93);color: white">保存</a-button>
<a-button type="primary">保存并更新</a-button>
</template>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { Card, Tabs, TabPane, Col, Row,RangePicker,RadioGroup,RadioButton,Select } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {
columns,
DDLDetailColumns,
DDLDetailFormSchema1,
DDLDetailFormSchema2,
DDLDetailFormSchema3,
} from './maintenance.data';
import {detailTableData8} from './maintenanceData'
import { useMessage } from '@/hooks/web/useMessage';
import { BasicUpload } from '@/components/Upload';
import { uploadApi } from '@/api/sys/upload';
import {downloadByData} from "@/utils/file/download";
import { Alert } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const getTitle = computed(() => ('DDL详情'));
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
const [registerForm1] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: DDLDetailFormSchema1,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm2] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: DDLDetailFormSchema2,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerForm3] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: DDLDetailFormSchema3,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerTable, { reload,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: detailTableData8.length,
code:'',
message:'',
data: [],
};
return { ...response,data: detailTableData8 };
},
columns:DDLDetailColumns,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,showOkBtn: false,showCancelBtn: false });
});
/**刷新*/
function reloadButton(){
createMessage.success('刷新成功!')
}
/**查看SQL 按钮*/
function lookSQLButton(){
createMessage.success('查看SQL')
}
/**查看日志 按钮*/
function lookLogButton(){
createMessage.success('查看日志')
}
</script>
src/views/realTimeSync/taskOperationsMaintenance/ImportModal.vue 0 → 100644
View file @ 1475bc27
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { importApiFormSchema } from './maintenance.data';
import { TreeData } from './maintenanceData'
import { useMessage } from '@/hooks/web/useMessage';
import { BasicUpload } from '@/components/Upload';
import { uploadApi } from '@/api/sys/upload';
import {downloadByData} from "@/utils/file/download";
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const getTitle = computed(() => ('导入文件选择'));
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: importApiFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const treeList = handleTree(TreeData, 'businessId',undefined,undefined,undefined)
updateSchema([
{
field: 'path',
componentProps: {
treeData: treeList
},
},
]);
});
/**下载*/
function handleDownByData() {
downloadByData('text content', '导入数据标准模版.xls');
}
/**上传事件*/
function handleChange(list: string[]) {
createMessage.success(`已上传文件${JSON.stringify(list)}`);
}
/**提交按钮*/
function handleSubmit() {
createMessage.success('导入成功！')
closeModal();
}
/**数组对象转成树*/
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
</script>
src/views/realTimeSync/taskOperationsMaintenance/ImportRecordModal.vue 0 → 100644
View file @ 1475bc27
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="reloadButton">刷新</a-button>
</template>
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {detailColumns6} from './maintenance.data';
import {detailTableData7} from './maintenanceData'
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction } from '@/components/Table';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const getTitle = computed(() => ('导入记录'));
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,showOkBtn:false,showCancelBtn:false });
});
const [registerTable, { reload,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: detailTableData7.length,
code:'',
message:'',
data: [],
};
return { ...response,data: detailTableData7 };
},
columns:detailColumns6,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
});
function reloadButton(){
createMessage.success('刷新成功!')
}
</script>
src/views/realTimeSync/taskOperationsMaintenance/LookLogModal.vue 0 → 100644
View file @ 1475bc27
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<textarea style="width: 100%;margin-top:20px;background-color: rgb(89, 96, 116);color: white" readonly rows="22" v-model="textAreaData"/>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { } from './maintenance.data';
import { } from './maintenanceData';
import { useMessage } from '@/hooks/web/useMessage';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const getTitle = computed(() => ('日志'));
const textAreaData = ref('\n' +
' 源端发生DDL事件,DDL处理策略为自动变更,自动启动源端')
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,showOkBtn:false,cancelText:'关闭' });
});
/**确定按钮*/
async function handleSubmit() {
closeModal()
}
</script>
src/views/realTimeSync/taskOperationsMaintenance/index.vue
View file @ 1475bc27
......@@ -114,6 +114,9 @@
/>
</template>
</template>
<template #latestEventTime="{ text, record }">
<a @click="showDetails(record)"> {{ text }}</a>
</template>
</BasicTable>
</div>
</div>
......@@ -145,7 +148,7 @@
const searchInfo = ref('');
const selectedItem = ref()
/** 执行统计echarts渲染*/
function getEchartsData() {
function getEchartsData() {
setOptions({
tooltip: {
trigger: 'item',
......@@ -224,7 +227,7 @@
});
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
schemas: selectFormSchema,
showActionButtonGroup: false,
......@@ -254,6 +257,16 @@
}
/**详情 按钮*/
function showDetails(record){
router.push({
path: '/realTimeSync/taskOperationsMaintenance/workDetail',
query: {
}
});
}
/**启动 按钮*/
function startButton(record){
......
src/views/realTimeSync/taskOperationsMaintenance/maintenance.data.ts
View file @ 1475bc27
......@@ -59,7 +59,8 @@ export const columns: BasicColumn[] = [
{
title: '最新事件时间',
dataIndex: 'latestEventTime',
width: 120
width: 120,
slots: {customRender: 'latestEventTime'},
},
{
title: '未处理异常',
......@@ -85,7 +86,7 @@ export const searchFormSchema: FormSchema[] = [
},
],
componentProps: {
palceholder: '请输入关键字搜索',
placeholder: '请输入关键字搜索',
}
},
];
......@@ -279,6 +280,34 @@ export const detailColumns5: BasicColumn[] = [
slots: {customRender: 'fieldType'}
},
];
/**详情页-导入 列表6*/
export const detailColumns6: BasicColumn[] = [
{
title: '导入时间',
dataIndex: 'importTime',
width: 120,
},
{
title: '文件名',
dataIndex: 'fileName',
width: 120,
},
{
title: '操作人',
dataIndex: 'createBy',
width: 120,
},
{
title: '导入状态',
dataIndex: 'importState',
width: 120,
},
{
title: '导入信息',
dataIndex: 'importInfo',
width: 120,
},
];
/**详情页-下拉框表单*/
export const detailFormSchema: FormSchema[] = [
{
......@@ -638,71 +667,255 @@ export const detailFormSchema3: FormSchema[] = [
colProps: { span:6 },
},
];
/**编辑列表 备注*/
export const guideModeTableColumns1: BasicColumn[] = [
{
title: '列名',
dataIndex: 'column',
edit: true,
editable: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: 'id',
value: '1',
},
{
label: '列名2',
value: '2',
},
],
/**详情页-导入 表单*/
export const importApiFormSchema: FormSchema[] = [
{
field: 'file',
component: 'Upload',
label: '导入文件选择',
componentProps: {
api: uploadApi,
},
labelWidth: 150,
colProps: { lg: 24, md: 24 },
itemProps: {
extra: '仅支持xls、xlsx格式',
},
},
];
/**详情页-DDL详情 表单1*/
export const DDLDetailFormSchema1: FormSchema[] = [
{
field: 'DDLTypt',
label: 'DDL类型:',
labelWidth: 120,
component: 'Input',
defaultValue: '删除字段',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入DDL类型',
}
},
{
field: 'state',
label: '状态:',
labelWidth: 150,
component: 'Input',
defaultValue: '未处理',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入状态',
}
},
{
field: 'sourceType',
label: '源端类型:',
labelWidth: 120,
component: 'Input',
defaultValue: 'MYSQL',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入源端类型',
}
},
{
field: 'sourceDataTable',
label: '源端数据表:',
labelWidth: 150,
component: 'Input',
defaultValue:'gxx.gxx3',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入源端数据表',
}
},
{
field: 'sourceField',
label: '源端字段:',
labelWidth: 120,
component: 'Input',
defaultValue:'T1',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入源端字段',
}
},
];
/**详情页-DDL详情 表单2*/
export const DDLDetailFormSchema2: FormSchema[] = [
{
field: 'produceVersion',
label: '时间产生时版本:',
labelWidth: 120,
component: 'Input',
defaultValue: 'V3',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入时间产生时版本',
},
width: 200,
colProps: { lg: 24, md: 24 },
},
{
title: '参数code',
dataIndex: 'parameterCode',
width: 200,
edit: true,
editable: true,
field: 'targetType',
label: '目标端类型:',
labelWidth: 120,
component: 'Input',
defaultValue: 'MYSQL',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端类型',
},
colProps: { lg: 24, md: 24 },
},
{
title: '参数类型',
dataIndex: 'parameterType',
width: 150,
field: 'pendingUpdateTable',
label: '目标端待更新表:',
labelWidth: 120,
component: 'Input',
defaultValue: 'gxx.gxx3',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端待更新表',
},
colProps: { lg: 24, md: 24 },
},
{
title: '注释',
dataIndex: 'comment',
width: 200,
edit: true,
editable: true,
field: 'pendingUpdateField',
label: '目标端待更新字段:',
labelWidth: 120,
component: 'Input',
defaultValue: 'T1',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端待更新字段',
},
colProps: { lg: 24, md: 24 },
},
];
/**详情页-DDL详情 表单3*/
export const DDLDetailFormSchema3: FormSchema[] = [
{
title: '是否必填',
dataIndex: 'required',
edit: true,
editable: true,
editComponent: 'Checkbox',
editValueMap: (value) => {
return value ? '是' : '否';
field: 'taskVersion',
label: '任务版本:',
labelWidth: 150,
component: 'Input',
defaultValue: '-',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入任务版本',
},
width: 200,
slot: 'taskVersion',
colProps: { lg: 24, md: 24 },
},
{
title: '默认值',
dataIndex: 'defaultValue',
width: 150
field: 'targetType',
label: '目标端类型:',
labelWidth: 150,
component: 'Input',
defaultValue: 'MYSQL',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端类型',
},
colProps: { lg: 24, md: 24 },
},
{
title: '示例值',
dataIndex: 'exampleValue',
width: 200,
edit: true,
editable: true,
field: 'tableModifyExpectations',
label: '待更新表修改预期:',
labelWidth: 150,
component: 'Input',
defaultValue: '-',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入待更新表修改预期',
},
colProps: { lg: 24, md: 24 },
},
{
field: 'fieldModifyExpectations',
label: '待更新字段修改预期:',
labelWidth: 150,
component: 'Input',
defaultValue: '-',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入待更新字段修改预期',
},
colProps: { lg: 24, md: 24 },
},
];
/**详情页-DDL详情 列表*/
export const DDLDetailColumns: BasicColumn[] = [
{
title: '处理时间',
dataIndex: 'handleTime',
width: 120,
},
{
title: '处理类型',
dataIndex: 'handleType',
width: 120,
},
{
title: '处理时任务版本',
dataIndex: 'handleTaskVersion',
width: 120,
},
{
title: '处理结果',
dataIndex: 'handleResult',
width: 120,
},
{
title: 'SQL语句',
dataIndex: 'SQL',
width: 120,
slots: { customRender: 'SQL' },
},
{
title: '日志',
dataIndex: 'log',
width: 120,
slots: { customRender: 'log' },
},
];
src/views/realTimeSync/taskOperationsMaintenance/maintenanceData.ts
View file @ 1475bc27
......@@ -5,7 +5,8 @@ import {Tag} from "ant-design-vue";
import { Switch } from 'ant-design-vue';
import {useMessage} from "@/hooks/web/useMessage";
import {changeFlagApi} from "@/api/system/user/user";
import {relatedQualityColumns} from "@/views/dataStandards/basicStandards/basicStandards.data"; // 引入开关组件
import {relatedQualityColumns} from "@/views/dataStandards/basicStandards/basicStandards.data";
import {GrowCardItem} from "@/views/dashboard/analysis/data"; // 引入开关组件
type CheckedType = boolean | string | number;
/**主页面树/列表 数据*/
......@@ -562,3 +563,53 @@ export const detailTableData6: any[] =[
fieldType:'-',
},
]
/**详情页-列表 数据7*/
export const detailTableData7: any[] =[
{
importTime:'2024/01/23 20:54:34',
fileName:'taskone.xlsx',
createBy:'admin',
importState:'导入成功',
importInfo:'-'
},
{
importTime:'2024/01/15 20:50:34',
fileName:'task1.xlsx',
createBy:'admin',
importState:'导入成功',
importInfo:'-'
},
{
importTime:'2024/01/12 20:45:34',
fileName:'task2.xlsx',
createBy:'admin',
importState:'导入成功',
importInfo:'-'
},
{
importTime:'2024/01/10 20:23:34',
fileName:'task3.xlsx',
createBy:'admin',
importState:'导入成功',
importInfo:'-'
},
{
importTime:'2024/01/5 20:47:34',
fileName:'task4.xlsx',
createBy:'admin',
importState:'导入成功',
importInfo:'-'
},
]
/**详情页-列表 数据8*/
export const detailTableData8: any[] =[
{
handleTime:'2024-01-26 15:51:36',
handleType:'自动',
handleTaskVersion:'9.0',
handleResult:'处理失败',
SQL:'',
log:''
},
]
src/views/realTimeSync/taskOperationsMaintenance/workDetail.vue
View file @ 1475bc27
......@@ -11,7 +11,7 @@
</div>
</div>
<div style="margin-top: 10px;">
<a-button type="primary" style="margin-right: 10px" @click="editButton"><Icon icon="material-symbols:sync"/>刷新</a-button>
<a-button type="primary" style="margin-right: 10px" @click="reloadButton"><Icon icon="material-symbols:sync"/>刷新</a-button>
</div>
</div>
<div style="margin-left: 20px">
......@@ -141,7 +141,7 @@
:actions="[
{
label: '查看日志',
onClick: detailButton.bind(null, record),
onClick: lookLogButton.bind(null, record),
},
]"
/>
......@@ -159,11 +159,11 @@
<BasicForm @register="registerForm2"/>
</div>
<div>
<a-button type="primary" style="margin-right: 10px" @click="">一键忽略</a-button>
<a-button type="primary" style="margin-right: 10px" @click="">导入</a-button>
<a-button type="primary" style="margin-right: 10px" @click="">查看导入记录</a-button>
<a-button type="primary" style="margin-right: 10px" @click="">导出</a-button>
<a-button type="primary" style="margin-right: 10px" @click="">导出全部</a-button>
<a-button type="primary" style="margin-right: 10px" @click="ignoreButton">一键忽略</a-button>
<a-button type="primary" style="margin-right: 10px" @click="ImportButton">导入</a-button>
<a-button type="primary" style="margin-right: 10px" @click="lookExportRecordButton">查看导入记录</a-button>
<a-button type="primary" style="margin-right: 10px" @click="exportButton">导出</a-button>
<a-button type="primary" style="margin-right: 10px" @click="exportAllButton">导出全部</a-button>
</div>
</div>
<div class="homePage_module">
......@@ -362,7 +362,7 @@
:actions="[
{
label: '查看',
onClick: detailButton.bind(null, record),
onClick: detailDDLButton.bind(null, record),
},
{
label: '忽略',
......@@ -376,11 +376,129 @@
</div>
</div>
</TabPane>
<TabPane tab="任务监控详情" key="任务监控详情"></TabPane>
<TabPane tab="任务监控详情" key="任务监控详情">
<div style="width: 100%;height: 100%">
<div style="height: 25%">
<Card
size="small"
:loading="loading"
>
<div style="display: flex">
<div style="width: 15%">
<div style="font-weight: bold">同步任务总览</div>
<div style="margin-top: 10px;margin-bottom: 10px">
<div><span style="font-weight: bold">720823</span>行</div>
<div style="font-size: 12px"><Icon icon="material-symbols:sync" :size="20" :color="'rgb(82, 114, 196)'" />源端解析数据量</div>
</div>
<div>
<div><span style="font-weight: bold">715905</span>行</div>
<div style="font-size: 12px"><Icon icon="material-symbols:sync" :size="20" :color="'rgb(148, 203, 121)'" />源端解析数据量</div>
</div>
</div>
<div ref="chartRef4" style="width:85%;height: 220%"></div>
</div>
</Card>
</div>
<div style="display: flex;height: 25%">
<Card
class="md:w-1/2 w-full !md:mt-0"
size="small"
:loading="loading"
>
<div style="display: flex">
<div style="width: 20%">
<div style="font-weight: bold">同步任务总览</div>
<div style="margin-top: 10px;margin-bottom: 10px">
<div><span style="font-weight: bold">720823</span>行</div>
<div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18" :color="'rgb(82, 114, 196)'" />源端解析数据量</div>
</div>
<div>
<div><span style="font-weight: bold">715905</span>行</div>
<div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18" :color="'rgb(148, 203, 121)'" />源端解析数据量</div>
</div>
</div>
<div ref="chartRef5" style="width:80%;height: 220%"></div>
</div>
</Card>
<Card
class="md:w-1/2 w-full !md:mt-0"
style="height: 220%"
size="small"
:loading="loading"
>
<div style="display: flex">
<div style="width: 20%">
<div style="font-weight: bold">同步任务总览</div>
<div style="margin-top: 10px;margin-bottom: 10px">
<div><span style="font-weight: bold">720823</span>行</div>
<div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18" :color="'rgb(82, 114, 196)'" />源端解析数据量</div>
</div>
<div>
<div><span style="font-weight: bold">715905</span>行</div>
<div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18" :color="'rgb(148, 203, 121)'" />源端解析数据量</div>
</div>
</div>
<div ref="chartRef6" style="width:80%;height: 220%"></div>
</div>
</Card>
</div>
<div style="display: flex;height: 25%">
<Card
class="md:w-1/2 w-full !md:mt-0"
size="small"
:loading="loading"
>
<div ref="chartRef7" style="width:80%;height: 100%"></div>
</Card>
<Card
class="md:w-1/4 w-full !md:mt-0"
size="small"
:loading="loading"
title="同步点信息"
>
<span style="font-size: 25px">53960492</span>
</Card>
<Card
class="md:w-1/4 w-full !md:mt-0"
size="small"
:loading="loading"
title="日志文件"
>
<span style="font-size: 25px">binlog.000349</span>
</Card>
</div>
<div style="display: flex;height: 25%">
<Card
class="md:w-1/2 w-full !md:mt-0"
size="small"
:loading="loading"
title="111"
>
<div ref="chartRef8" style="width:80%;height: 100%"></div>
</Card>
<Card
class="md:w-1/2 w-full !md:mt-0"
size="small"
:loading="loading"
title="1111"
>
<div ref="chartRef9" style="width:80%;height: 100%"></div>
</Card>
</div>
</div>
</TabPane>
</Tabs>
</div>
<!-- 导入 弹窗-->
<ImportModal @register="registerImportModal" @success="handleSuccess" />
<!-- 导入记录 弹窗-->
<ImportRecordModal @register="registerImportRecordModal" @success="handleSuccess" />
<!-- 处理 抽屉-->
<AbnormalDataHandleDrawer @register="registerDrawer" @success="handleSuccess" />
<!-- DDL详情 弹窗-->
<DDLDetailModal @register="registerDDLDetailModal" @success="handleSuccess" />
<!-- 查看日志 弹窗-->
<LookLogModal @register="registerLookLogModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
......@@ -390,7 +508,7 @@
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,RangePicker,RadioGroup,RadioButton } from 'ant-design-vue';
import { Card, Tabs, TabPane, Col, Row,RangePicker,RadioGroup,RadioButton,Tag} 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';
......@@ -404,11 +522,26 @@
import { detailColumns,detailFormSchema,detailColumns2,detailFormSchema2,detailColumns3,detailFormSchema3,detailColumns4 } from './maintenance.data';
import { detailTableData,tableData,detailTableData2,detailTableData3,detailTableData4 } from './maintenanceData'
import AbnormalDataHandleDrawer from './AbnormalDataHandleDrawer.vue'
import {exportUserList} from "@/api/system/user/user";
import {downloadByData} from "@/utils/file/download";
import ImportModal from './ImportModal.vue'
import ImportRecordModal from './ImportRecordModal.vue'
import DDLDetailModal from './DDLDetailModal.vue'
import LookLogModal from './LookLogModal.vue'
import { CountTo } from '@/components/CountTo';
defineOptions({ name: 'AccountModal' });
const selectedItem = ref()
type RangeValue = [Dayjs, Dayjs];
const value1 = ref<RangeValue>();
const item = ref({
title: '数据统计',
icon: 'ant-design:database-outlined',
color: 'blue',
value: 100,
total: 10000,
action: '+10%',
})
const selectRadio = ref('')
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
......@@ -416,8 +549,24 @@
const { setOptions:setOptions2 } = useECharts(chartRef2 as Ref<HTMLDivElement>);
const chartRef3 = ref<HTMLDivElement | null>(null);
const { setOptions:setOptions3 } = useECharts(chartRef3 as Ref<HTMLDivElement>);
const chartRef4 = ref<HTMLDivElement | null>(null);
const { setOptions:setOptions4 } = useECharts(chartRef4 as Ref<HTMLDivElement>);
const chartRef5 = ref<HTMLDivElement | null>(null);
const { setOptions:setOptions5 } = useECharts(chartRef5 as Ref<HTMLDivElement>);
const chartRef6 = ref<HTMLDivElement | null>(null);
const { setOptions:setOptions6 } = useECharts(chartRef6 as Ref<HTMLDivElement>);
const chartRef7 = ref<HTMLDivElement | null>(null);
const { setOptions:setOptions7 } = useECharts(chartRef7 as Ref<HTMLDivElement>);
const chartRef8 = ref<HTMLDivElement | null>(null);
const { setOptions:setOptions8 } = useECharts(chartRef8 as Ref<HTMLDivElement>);
const chartRef9 = ref<HTMLDivElement | null>(null);
const { setOptions:setOptions9 } = useECharts(chartRef9 as Ref<HTMLDivElement>);
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const [registerLookLogModal, { openModal: openLookLogModal }] = useModal();
const [registerImportModal, { openModal: openImportModal }] = useModal();
const [registerDDLDetailModal, { openModal: openDDLDetailModal }] = useModal();
const [registerImportRecordModal, { openModal: openImportRecordModal }] = useModal();
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerTable1] = useTable({
title: '',
......@@ -707,12 +856,370 @@
],
});
}
/** 执行统计echarts渲染4*/
function getEchartsData4() {
setOptions4({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
max: 400000,
splitNumber: 4,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: false,
data: [
1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
},
},
],
});
}
/** 执行统计echarts渲染5*/
function getEchartsData5() {
setOptions5({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
max: 400000,
splitNumber: 4,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: false,
data: [
1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
},
},
],
});
}
/** 执行统计echarts渲染6*/
function getEchartsData6() {
setOptions6({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
max: 400000,
splitNumber: 4,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: false,
data: [
1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
},
},
],
});
}
/** 执行统计echarts渲染7*/
function getEchartsData7() {
setOptions7({
tooltip: {
trigger: 'item',
},
legend: {
bottom: '1%',
left: 'center',
},
series: [
{
color: ['rgb(147, 140, 206)', '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: 1 , name: '1'},
{ value: 10, name: '2' },
{ value: 9 , name: '3'},
{ value: 30 , name: '4'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
}
/** 执行统计echarts渲染8*/
function getEchartsData8() {
setOptions8({
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
width: 1,
color: '#019680',
},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
max: 400000,
splitNumber: 4,
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
series: [
{
smooth: false,
data: [
1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
],
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
},
},
],
});
}
/** 执行统计echarts渲染9*/
function getEchartsData9() {
setOptions9({
tooltip: {
trigger: 'item',
},
legend: {
bottom: '1%',
left: 'center',
},
series: [
{
color: ['rgb(147, 140, 206)', '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: 1 , name: '1'},
{ value: 10, name: '2' },
{ value: 9 , name: '3'},
{ value: 30 , name: '4'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
}
/**标签切换*/
function handleChangeTab(key: string) {
// 处理标签页切换逻辑...
getEchartsData()
getEchartsData2()
getEchartsData3()
getEchartsData4()
getEchartsData5()
getEchartsData6()
getEchartsData7()
getEchartsData8()
getEchartsData9()
}
/**DDL详情 弹窗*/
function detailDDLButton(){
openDDLDetailModal(true,{})
}
/**跳转事件列表*/
......@@ -720,6 +1227,52 @@
}
/**查看日志 按钮*/
function lookLogButton(){
openLookLogModal(true,{})
}
/**查看导入记录 按钮*/
function lookExportRecordButton(){
openImportRecordModal(true, {
});
}
/**导出 按钮*/
async function exportButton() {
const params = Object.assign({}, {});
const data = await exportUserList(params);
downloadByData(data, '异常数据信息' + '.xlsx');
}
/**导出全部 按钮*/
async function exportAllButton() {
const params = Object.assign({}, {});
const data = await exportUserList(params);
downloadByData(data, '异常数据信息' + '.xlsx');
}
/**导入*/
function ImportButton() {
openImportModal(true, {
});
}
/**一键忽略 按钮*/
function ignoreButton(){
createMessage.success('忽略成功!')
}
/**刷新 按钮*/
function reloadButton(){
createMessage.success('刷新成功!')
}
/**点击card 改变css样式*/
function clickButton(item){
selectedItem.value = item;
......
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