Commit 3131f4fb authored by liwei's avatar liwei

任务运维页面

parent df76dafd
......@@ -8,9 +8,9 @@
@ok="handleSubmit"
>
<div style="display:flex;justify-content: flex-end">
<a-button type="primary" style="margin-right: 10px;background-color: tomato" @click="">忽略</a-button>
<a-button type="primary" style="margin-right: 10px" @click="">保存并更新</a-button>
<a-button style="margin-right: 10px" @click="">保存</a-button>
<a-button type="primary" style="margin-right: 10px;background-color: tomato" @click="ignoreButton">忽略</a-button>
<a-button type="primary" style="margin-right: 10px" @click="saveAndUpdateButton">保存并更新</a-button>
<a-button style="margin-right: 10px" @click="saveButton">保存</a-button>
</div>
<div style="margin-left: 10px">
<Tabs defaultActiveKey="报错详情" @change="handleChangeTab">
......@@ -58,8 +58,10 @@
</TabPane>
</Tabs>
</div>
<!-- 查看完整数据 弹窗-->
<!-- 查看版本信息 弹窗-->
<VersionModal @register="registerVersionModal" @success="handleSuccess" />
<!-- 查看完整数据 弹窗-->
<LookAllDataModal @register="registerLookAllDataModal" @success="handleSuccess" />
</BasicDrawer>
</template>
<script lang="ts" setup>
......@@ -82,7 +84,7 @@
const jsonData =
'INSERT INTO orders (id, customer_name, product_name, quantity, order_date)\n' +
'VALUES (1, "张三", "笔记本电脑", 2, "2024-11-23 14:46:00");\n'
const [registerModal, { openModal: openModal }] = useModal();
const [registerLookAllDataModal, { openModal: openLookAllDataModal }] = useModal();
const [registerVersionModal, { openModal: openVersionModal }] = useModal();
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
......@@ -142,7 +144,22 @@
/**查看完整数据 按钮*/
function lookAllDataButton() {
openModal(true,{})
openLookAllDataModal(true,{})
}
/**忽略 按钮*/
function ignoreButton() {
createMessage.success('忽略成功!')
}
/**保存并更新 按钮*/
function saveAndUpdateButton() {
createMessage.success('更新成功!')
}
/**保存 按钮*/
function saveButton() {
createMessage.success('保存成功!')
}
/**查看版本变更信息*/
......
......@@ -15,7 +15,7 @@
<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>
<a-button style="border-color: rgb(98, 177, 252);color: rgb(98, 177, 252)" @click="getCurrentVersionButton">获取当前运行版本</a-button>
</span>
</template>
</BasicForm>
......@@ -28,9 +28,9 @@
/>
<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>
<a-button type="primary" @click="copyButton">复制</a-button>
</div>
<textarea style="width: 100%;border: 1px solid #ccc;" rows="4" v-model="textAreaData"/>
<textarea style="width: 100%;border: 1px solid #ccc;" rows="4" readonly disabled v-model="textAreaData1"/>
<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">
......@@ -38,7 +38,7 @@
<a-button type="primary" @click="reloadButton">刷新</a-button>
</div>
</div>
<textarea style="width: 100%;border: 1px solid #ccc;" rows="4" v-model="textAreaData"/>
<textarea style="width: 100%;border: 1px solid #ccc;" rows="4" v-model="textAreaData2"/>
</TabPane>
<TabPane tab="处理历史" key="处理历史">
<BasicTable @register="registerTable">
......@@ -52,17 +52,21 @@
</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>
<a-button @click="cancelButton">取消</a-button>
<a-button style="background-color: rgb(245, 128, 41);color: white" @click="ignoreButton">忽略</a-button>
<a-button style="background-color: rgb(0, 157, 93);color: white" @click="saveButton">保存</a-button>
<a-button type="primary" @click="saveAndUpdateButton">保存并更新</a-button>
</template>
<!-- 查看SQL 弹窗-->
<LookSQLModal @register="registerLookSQLModal" @success="handleSuccess" />
<!-- 查看日志 弹窗-->
<LookLogModal @register="registerLookLogModal" @success="handleSuccess" />
</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 {BasicModal, useModal, useModalInner} from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {
......@@ -79,13 +83,17 @@
import {downloadByData} from "@/utils/file/download";
import { Alert } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import LookLogModal from './LookLogModal.vue'
import LookSQLModal from './LookSQLModal.vue'
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const getTitle = computed(() => ('DDL详情'));
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
const textAreaData1 = ref('alter table gxx3 drop column T1')
const textAreaData2 = ref('')
const [registerLookSQLModal, { openModal: openLookSQLModal }] = useModal();
const [registerLookLogModal, { openModal: openLookLogModal }] = useModal();
const [registerForm1] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
......@@ -104,7 +112,7 @@
span: 23,
},
});
const [registerForm3] = useForm({
const [registerForm3,{setFieldsValue:setFieldsValue3}] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: DDLDetailFormSchema3,
......@@ -133,6 +141,7 @@
showIndexColumn:false,
bordered: true,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,showOkBtn: false,showCancelBtn: false });
......@@ -147,11 +156,49 @@
/**查看SQL 按钮*/
function lookSQLButton(){
createMessage.success('查看SQL')
openLookSQLModal(true,{})
}
/**查看日志 按钮*/
function lookLogButton(){
createMessage.success('查看日志')
openLookLogModal(true,{})
}
/**复制 按钮*/
function copyButton(){
createMessage.success('复制成功!')
}
/**获取当前运行版本 按钮*/
function getCurrentVersionButton(){
const params = {
taskVersion:'V1'
}
setFieldsValue3({
...params
})
}
/**忽略 按钮*/
function ignoreButton(){
createMessage.success('忽略成功!')
}
/**取消 按钮*/
function cancelButton(){
createMessage.success('取消成功!')
}
/**保存 按钮*/
function saveButton(){
createMessage.success('保存成功!')
}
/**保存并更新 按钮*/
function saveAndUpdateButton(){
createMessage.success('更新成功!')
}
</script>
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<textarea style="width: 100%;margin-top:20px;border: 1px solid #ccc;" rows="22" v-model="textAreaData"/>
<textarea style="width: 100%;margin-top:20px;border: 1px solid #ccc;" disabled readonly rows="22" v-model="textAreaData"/>
</BasicModal>
</template>
<script lang="ts" setup>
......@@ -43,7 +43,7 @@
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
setModalProps({ confirmLoading: false,showOkBtn:false });
});
/**确定按钮*/
......
<template>
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<textarea style="width: 100%;margin-top:20px;border: 1px solid #ccc;" disabled 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(() => ('查看SQL'));
const textAreaData = ref('{\n' +
' "after":{\n' +
' "id":1,\n' +
' "age_new":"1",\n' +
' "dgd_test":"fd",\n' +
' "uiui":"fd",\n' +
' "dfgghj":"fd"\n' +
' }\n' +
' "before":{\n' +
' "id":1,\n' +
' "age_new":"1",\n' +
' "dgd_test":"fd",\n' +
' "uiui":"fd",\n' +
' "dfgghj":"fd"\n' +
' }\n'+
' "table_name":"test_table",\n' +
' "table_id":1,\n' +
' "table_field":"age_new",\n' +
' "table_field_type":"int",\n' +
' "table_field_comment":"1",\n' +
' "table_field_value":"1",\n' +
' "table_field_value_new":"2",\n' +
' "table_field_value_old":"1",\n' +
'}'
)
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false,showOkBtn:false });
});
/**确定按钮*/
async function handleSubmit() {
closeModal()
}
</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 { resetNameFormSchema } from './maintenance.data';
import { useMessage } from '@/hooks/web/useMessage';
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: resetNameFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
setFieldsValue({
...data.record
});
});
/**提交按钮*/
function handleSubmit() {
createMessage.success('导入成功!')
closeModal();
}
</script>
......@@ -2,24 +2,54 @@
<BasicModal width="40%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<div style="font-weight: bold">异常数据Schema信息</div>
<div style="display:flex;width: 100%">
<div>
<div style="display: flex;justify-content: space-between;margin-top: 10px">
<div>
<Icon icon="majesticons:table" :size="15" :color="'#1091FE'" />
gxx.gxx3 异常数据版本:version8
gxx.gxx3
</div>
<div style="margin-right: 10px">
异常数据版本:version8
</div>
</div>
<BasicTable @register="registerTable1">
<template #fieldName="{ text, record }">
<span v-if="text === 'school'" style="color:red;"> {{ text }}</span>
<span v-else> {{ text }}</span>
</template>
<template #fieldType="{ text, record }">
<span v-if="text === 'VARCHAR(100)'" style="color:red;"> {{ text }}</span>
<span v-if="record.fieldName === 'school' && text === 'VARCHAR(100)'" style="color:red;"> {{ text }}</span>
<span v-else> {{ text }}</span>
</template>
</BasicTable>
</div>
<div>
<div style="display: flex;justify-content: space-between;align-items: center">
<div>
<Icon icon="majesticons:table" :size="15" :color="'#1091FE'" />
gxx.gxx3 异常数据版本:version8
<BasicTable @register="registerTable2"/>
gxx.gxx3
</div>
<div style="margin-right: 10px">
异常数据版本:<Select
v-model:value="optionValue"
show-search
placeholder="请选择版本"
style="width: 100px;margin-left: 10px"
:options="options"
@change="handleChange"
></Select>
</div>
</div>
<BasicTable @register="registerTable2">
<template #fieldName="{ text, record }">
<span v-if="text === '-'" style="color:red;"> {{ text }}</span>
<span v-else> {{ text }}</span>
</template>
<template #fieldType="{ text, record }">
<span v-if="text === '-'" style="color:red;"> {{ text }}</span>
<span v-else> {{ text }}</span>
</template>
</BasicTable>
</div>
</div>
<div style="display: flex;margin-top: 20px;">
......@@ -44,11 +74,47 @@
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import Icon from '@/components/Icon/Icon.vue';
import { Select } from 'ant-design-vue';
defineOptions({ name: 'AccountModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const getTitle = computed(() => ('Schema版本信息'));
const options = ref([
{
label:'version1',
value:'1'
},
{
label:'version2',
value:'2'
},
{
label:'version3',
value:'3'
},
{
label:'version4',
value:'4'
},
{
label:'version5',
value:'5'
},
{
label:'version6',
value:'6'
},
{
label:'version7',
value:'7'
},
{
label:'version8',
value:'8'
},
])
const optionValue = ref('1')
const textAreaData = ref('schema版本:2024–01–18 21:04:34 version8\n' +
'2024–01–03 21:04:29 (2024–01–03 21:04:30) alter table gxx3 change school1 school varchar(100)\n' +
'2024–01–04 19:22:51 (2024–01–04 19:22:51) alter table gxx3 add column T1 int\n' +
......
......@@ -23,7 +23,7 @@
<div class="card_item">
<Icon icon="eos-icons:database" :size="30" :color="'#1091FE'" />
<div class="card_itemInfo">
<div class="dataNum">50</div>
<div class="dataNum">9</div>
<div class="dataTitle">所有任务</div>
</div>
</div>
......@@ -41,7 +41,7 @@
<div class="card_item">
<Icon icon="line-md:loading-twotone-loop" :size="30" :color="'rgb(81, 160, 248)'" />
<div class="card_itemInfo">
<div class="dataNum">10</div>
<div class="dataNum">6</div>
<div class="dataTitle">进行中</div>
</div>
</div>
......@@ -50,7 +50,7 @@
<div class="card_item">
<Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(212, 115, 113)'" />
<div class="card_itemInfo">
<div class="dataNum">9</div>
<div class="dataNum">1</div>
<div class="dataTitle">失败</div>
</div>
</div>
......@@ -59,7 +59,7 @@
<div class="card_item">
<Icon icon="line-md:minus-circle-filled" :size="30" :color="'rgb(234, 150, 0)'" />
<div class="card_itemInfo">
<div class="dataNum">30</div>
<div class="dataNum">1</div>
<div class="dataTitle">停止</div>
</div>
</div>
......@@ -119,6 +119,8 @@
</template>
</BasicTable>
</div>
<!-- 重命名 弹窗-->
<ResetNameModal @register="registerResetNameModal" @success="handleSuccess" />
</div>
</template>
......@@ -138,6 +140,7 @@
import { tableData,TreeData } from './maintenanceData'
import { BasicForm, useForm } from '@/components/Form';
import { useECharts } from '@/hooks/web/useECharts';
import ResetNameModal from './ResetNameModal.vue'
defineOptions({ name: 'AccountManagement' });
const chartRef = ref<HTMLDivElement | null>(null);
......@@ -152,10 +155,12 @@
setOptions({
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)',
},
legend: {
bottom: '1%',
left: 'center',
show: false,
},
series: [
{
......@@ -184,10 +189,10 @@
show: false,
},
data: [
{ value: 1 },
{ value: 10 },
{ value: 9 },
{ value: 30 },
{ value: 1, name: '初始化' },
{ value: 6, name: '进行中' },
{ value: 1, name: '失败'},
{ value: 1, name: '停止'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
......@@ -198,6 +203,7 @@
],
});
}
const [registerResetNameModal, { openModal: openResetNameModal }] = useModal();
const [registerTable, { reload,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
......@@ -253,7 +259,9 @@
/**修改 按钮*/
function resetNameButton(record){
openResetNameModal(true,{
record
})
}
......@@ -269,12 +277,12 @@
/**启动 按钮*/
function startButton(record){
createMessage.success('启动成功!')
}
/**暂停 按钮*/
function stopButton(record){
createMessage.success('暂停成功!')
}
/** 转成树 */
......
......@@ -107,6 +107,23 @@ export const selectFormSchema: FormSchema[] = [
},
},
];
/**首页-重命名表单*/
export const resetNameFormSchema: FormSchema[] = [
{
field: 'taskName',
label: '任务名称',
component: 'Input',
rules: [
{
required: true,
message: '请输入任务名称',
},
],
componentProps: {
placeholder: '请输入任务名称',
}
},
];
/**详情页-table列表*/
export const detailColumns: BasicColumn[] = [
{
......
......@@ -137,7 +137,7 @@ export const tableData: any[] =[
target: 'MYSQL',
owner: 'admin',
taskVersion: '1.0',
taskStatus: '运行中',
taskStatus: '初始化',
latency: '0.00s',
dataCheckDifference24h: '是',
latestEventTime: '2024-01-01 08:10:00',
......@@ -152,7 +152,7 @@ export const tableData: any[] =[
target: 'MYSQL',
owner: 'admin',
taskVersion: '2.0',
taskStatus: '运行中',
taskStatus: '失败',
latency: '0.00s',
dataCheckDifference24h: '是',
latestEventTime: '2024-01-01 08:10:00',
......@@ -167,7 +167,7 @@ export const tableData: any[] =[
target: 'MYSQL',
owner: 'admin',
taskVersion: '1.0',
taskStatus: '运行中',
taskStatus: '停止',
latency: '0.00s',
dataCheckDifference24h: '是',
latestEventTime: '2024-01-01 08:10:00',
......@@ -423,7 +423,7 @@ export const detailTableData3: any[] =[
involvedTable: 'wuqi_performance_t...',
involvedOperation: 'C',
syncPoint: 'mysql-bin.000202,6...',
processingStatus: '未处理'
processingStatus: '更新成功'
},
]
/**详情页列表 数据4*/
......@@ -455,7 +455,7 @@ export const detailTableData4: any[] =[
sourceInvolvedTable: 'gxx.gxx3',
taskVersionAtDdl: 'V3',
ddlType: '删除字段',
status: '未处理',
status: '已忽略',
processingType: '自动'
},
{
......
......@@ -280,7 +280,7 @@
<div class="card_item">
<Icon icon="eos-icons:database" :size="30" :color="'rgb(76, 87, 215)'" />
<div class="card_itemInfo">
<div class="dataNum">10</div>
<div class="dataNum">8</div>
<div class="dataTitle">所有状态</div>
</div>
</div>
......@@ -289,7 +289,7 @@
<div class="card_item">
<Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(141, 141, 141)'" />
<div class="card_itemInfo">
<div class="dataNum">6</div>
<div class="dataNum">5</div>
<div class="dataTitle">未处理</div>
</div>
</div>
......@@ -307,7 +307,7 @@
<div class="card_item">
<Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(1, 157, 93)'" />
<div class="card_itemInfo">
<div class="dataNum">2</div>
<div class="dataNum">1</div>
<div class="dataTitle">处理成功</div>
</div>
</div>
......@@ -325,7 +325,7 @@
<div class="card_item">
<Icon icon="line-md:minus-circle-filled" :size="30" :color="'rgb(228, 90, 93)'" />
<div class="card_itemInfo">
<div class="dataNum">2</div>
<div class="dataNum">1</div>
<div class="dataTitle">处理失败</div>
</div>
</div>
......@@ -366,7 +366,7 @@
},
{
label: '忽略',
onClick: detailButton.bind(null, record),
onClick: ignoreButton.bind(null, record),
},
]"
/>
......@@ -791,14 +791,16 @@
setOptions3({
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)',
},
legend: {
bottom: '1%',
left: 'center',
show: false,
},
series: [
{
color: ['rgb(226, 66, 69)', 'rgb(245, 128, 41)', 'rgb(5, 158, 96)', 'rgb(56, 113, 212)', 'rgb(241, 172, 173)',, 'rgb(52, 110, 212)',, 'rgb(101, 80, 230)'],
color: ['rgb(141, 141, 141)', 'rgb(245, 134, 53)', 'rgb(1, 157, 93)', 'rgb(141, 198, 252)', 'rgb(228, 90, 93)',, 'rgb(54, 111, 212)',, 'rgb(101, 80, 230)'],
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
......@@ -823,13 +825,13 @@
show: false,
},
data: [
{value: 5},
{value: 1},
{value: 1},
{value: 0},
{value: 2},
{value: 0},
{value: 0},
{value: 5,name:'未处理'},
{value: 1,name:'已忽略'},
{value: 1,name:'处理成功'},
{value: 0,name:'更新中'},
{value: 1,name:'处理失败'},
{value: 0,name:'审批中'},
{value: 0,name:'审批通过待处理'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
......@@ -1098,7 +1100,7 @@
series: [
{
color: ['rgb(82, 114, 196)', 'rgb(148, 203, 121)'],
name: '访问来源',
name: '操作分布',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
......@@ -1236,7 +1238,7 @@
series: [
{
color: ['rgb(49, 144, 222)', 'rgb(84, 162, 227)','rgb(112, 177, 231)'],
name: '访问来源',
name: 'Topic同步数量排行',
type: 'pie',
radius: ['0%', '100%'],
avoidLabelOverlap: false,
......
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