Commit 1475bc27 authored by liwei's avatar liwei

任务监控初步页面

parent 1f7fc82d
<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>
<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>
<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>
<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>
...@@ -114,6 +114,9 @@ ...@@ -114,6 +114,9 @@
/> />
</template> </template>
</template> </template>
<template #latestEventTime="{ text, record }">
<a @click="showDetails(record)"> {{ text }}</a>
</template>
</BasicTable> </BasicTable>
</div> </div>
</div> </div>
...@@ -145,7 +148,7 @@ ...@@ -145,7 +148,7 @@
const searchInfo = ref(''); const searchInfo = ref('');
const selectedItem = ref() const selectedItem = ref()
/** 执行统计echarts渲染*/ /** 执行统计echarts渲染*/
function getEchartsData() { function getEchartsData() {
setOptions({ setOptions({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
...@@ -224,7 +227,7 @@ ...@@ -224,7 +227,7 @@
}); });
//初始化表单 //初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({ const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100, labelWidth: 100,
schemas: selectFormSchema, schemas: selectFormSchema,
showActionButtonGroup: false, showActionButtonGroup: false,
...@@ -254,6 +257,16 @@ ...@@ -254,6 +257,16 @@
} }
/**详情 按钮*/
function showDetails(record){
router.push({
path: '/realTimeSync/taskOperationsMaintenance/workDetail',
query: {
}
});
}
/**启动 按钮*/ /**启动 按钮*/
function startButton(record){ function startButton(record){
......
...@@ -59,7 +59,8 @@ export const columns: BasicColumn[] = [ ...@@ -59,7 +59,8 @@ export const columns: BasicColumn[] = [
{ {
title: '最新事件时间', title: '最新事件时间',
dataIndex: 'latestEventTime', dataIndex: 'latestEventTime',
width: 120 width: 120,
slots: {customRender: 'latestEventTime'},
}, },
{ {
title: '未处理异常', title: '未处理异常',
...@@ -85,7 +86,7 @@ export const searchFormSchema: FormSchema[] = [ ...@@ -85,7 +86,7 @@ export const searchFormSchema: FormSchema[] = [
}, },
], ],
componentProps: { componentProps: {
palceholder: '请输入关键字搜索', placeholder: '请输入关键字搜索',
} }
}, },
]; ];
...@@ -279,6 +280,34 @@ export const detailColumns5: BasicColumn[] = [ ...@@ -279,6 +280,34 @@ export const detailColumns5: BasicColumn[] = [
slots: {customRender: 'fieldType'} 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[] = [ export const detailFormSchema: FormSchema[] = [
{ {
...@@ -638,71 +667,255 @@ export const detailFormSchema3: FormSchema[] = [ ...@@ -638,71 +667,255 @@ export const detailFormSchema3: FormSchema[] = [
colProps: { span:6 }, colProps: { span:6 },
}, },
]; ];
/**详情页-导入 表单*/
export const importApiFormSchema: FormSchema[] = [
{
/**编辑列表 备注*/ field: 'file',
export const guideModeTableColumns1: BasicColumn[] = [ component: 'Upload',
{ label: '导入文件选择',
title: '列名', componentProps: {
dataIndex: 'column', api: uploadApi,
edit: true, },
editable: true, labelWidth: 150,
editComponent: 'Select', colProps: { lg: 24, md: 24 },
editComponentProps: { itemProps: {
options: [ extra: '仅支持xls、xlsx格式',
{ },
label: 'id', },
value: '1', ];
}, /**详情页-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类型',
}
},
{
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', field: 'targetType',
dataIndex: 'parameterCode', label: '目标端类型:',
width: 200, labelWidth: 120,
edit: true, component: 'Input',
editable: true, defaultValue: 'MYSQL',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端类型',
},
colProps: { lg: 24, md: 24 },
}, },
{ {
title: '参数类型', field: 'pendingUpdateTable',
dataIndex: 'parameterType', label: '目标端待更新表:',
width: 150, labelWidth: 120,
component: 'Input',
defaultValue: 'gxx.gxx3',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端待更新表',
},
colProps: { lg: 24, md: 24 },
}, },
{ {
title: '注释', field: 'pendingUpdateField',
dataIndex: 'comment', label: '目标端待更新字段:',
width: 200, labelWidth: 120,
edit: true, component: 'Input',
editable: true, defaultValue: 'T1',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端待更新字段',
},
colProps: { lg: 24, md: 24 },
}, },
];
/**详情页-DDL详情 表单3*/
export const DDLDetailFormSchema3: FormSchema[] = [
{ {
title: '是否必填', field: 'taskVersion',
dataIndex: 'required', label: '任务版本:',
edit: true, labelWidth: 150,
editable: true, component: 'Input',
editComponent: 'Checkbox', defaultValue: '-',
editValueMap: (value) => { componentProps: {
return value ? '是' : '否'; style: {
border: 'none',
},
readonly: true,
placeholder: '请输入任务版本',
}, },
width: 200, slot: 'taskVersion',
colProps: { lg: 24, md: 24 },
}, },
{ {
title: '默认值', field: 'targetType',
dataIndex: 'defaultValue', label: '目标端类型:',
width: 150 labelWidth: 150,
component: 'Input',
defaultValue: 'MYSQL',
componentProps: {
style: {
border: 'none',
},
readonly: true,
placeholder: '请输入目标端类型',
},
colProps: { lg: 24, md: 24 },
}, },
{ {
title: '示例值', field: 'tableModifyExpectations',
dataIndex: 'exampleValue', label: '待更新表修改预期:',
width: 200, labelWidth: 150,
edit: true, component: 'Input',
editable: true, 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' },
},
];
...@@ -5,7 +5,8 @@ import {Tag} from "ant-design-vue"; ...@@ -5,7 +5,8 @@ import {Tag} from "ant-design-vue";
import { Switch } from 'ant-design-vue'; import { Switch } from 'ant-design-vue';
import {useMessage} from "@/hooks/web/useMessage"; import {useMessage} from "@/hooks/web/useMessage";
import {changeFlagApi} from "@/api/system/user/user"; 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; type CheckedType = boolean | string | number;
/**主页面树/列表 数据*/ /**主页面树/列表 数据*/
...@@ -562,3 +563,53 @@ export const detailTableData6: any[] =[ ...@@ -562,3 +563,53 @@ export const detailTableData6: any[] =[
fieldType:'-', 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