Skip to content

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

任务监控初步页面

parent 1f7fc82d
Expand all Show 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>
......@@ -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: [
/**详情页-导入 表单*/
export const importApiFormSchema: FormSchema[] = [
{
label: 'id',
value: '1',
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[] = [
{
label: '列名2',
value: '2',
field: 'DDLTypt',
label: 'DDL类型:',
labelWidth: 120,
component: 'Input',
defaultValue: '删除字段',
componentProps: {
style: {
border: 'none',
},
],
readonly: true,
placeholder: '请输入DDL类型',
}
},
width: 200,
{
field: 'state',
label: '状态:',
labelWidth: 150,
component: 'Input',
defaultValue: '未处理',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入状态',
}
},
{
title: '参数code',
dataIndex: 'parameterCode',
width: 200,
edit: true,
editable: true,
field: 'sourceType',
label: '源端类型:',
labelWidth: 120,
component: 'Input',
defaultValue: 'MYSQL',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入源端类型',
}
},
{
title: '参数类型',
dataIndex: 'parameterType',
width: 150,
field: 'sourceDataTable',
label: '源端数据表:',
labelWidth: 150,
component: 'Input',
defaultValue:'gxx.gxx3',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入源端数据表',
}
},
{
title: '注释',
dataIndex: 'comment',
width: 200,
edit: true,
editable: true,
field: 'sourceField',
label: '源端字段:',
labelWidth: 120,
component: 'Input',
defaultValue:'T1',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入源端字段',
}
},
];
/**详情页-DDL详情 表单2*/
export const DDLDetailFormSchema2: FormSchema[] = [
{
title: '是否必填',
dataIndex: 'required',
edit: true,
editable: true,
editComponent: 'Checkbox',
editValueMap: (value) => {
return value ? '是' : '否';
field: 'produceVersion',
label: '时间产生时版本:',
labelWidth: 120,
component: 'Input',
defaultValue: 'V3',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入时间产生时版本',
},
width: 200,
colProps: { lg: 24, md: 24 },
},
{
title: '默认值',
dataIndex: 'defaultValue',
width: 150
field: 'targetType',
label: '目标端类型:',
labelWidth: 120,
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: 'pendingUpdateTable',
label: '目标端待更新表:',
labelWidth: 120,
component: 'Input',
defaultValue: 'gxx.gxx3',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端待更新表',
},
colProps: { lg: 24, md: 24 },
},
{
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[] = [
{
field: 'taskVersion',
label: '任务版本:',
labelWidth: 150,
component: 'Input',
defaultValue: '-',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入任务版本',
},
slot: 'taskVersion',
colProps: { lg: 24, md: 24 },
},
{
field: 'targetType',
label: '目标端类型:',
labelWidth: 150,
component: 'Input',
defaultValue: 'MYSQL',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端类型',
},
colProps: { lg: 24, md: 24 },
},
{
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:''
},
]
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