数仓开发 策略指标-清理策略

src/views/realTimeSync/strategicIndicators/clearStrategic.vue

+<template>
+  <PageWrapper
+    style="height: clamp(200px, 100vw, 800px)"
+    contentFullHeight
+    fixedHeight
+    title="任务清理策略配置"
+  >
+    <template #footer>
+      <div style="color: #d3d5e1; font-size: 12px"
+        >以下配置项修改后无需重启当前任务，保存后即可生效。</div
+      >
+      <Alert
+        style="margin: 20px 0"
+        type="warning"
+        showIcon
+        message="该策略将会对实时任务的一致性检查统计数据、异常数据、事件记录数据、任务监控采样数据做定期清理。"
+      />
+      <BasicForm @register="registerForm">
+        <template #retainTime="{ field, model }">
+          <RadioGroup v-model:value="model[field]">
+            <Radio :style="radioStyle" :value="1"
+              ><span>保留从</span><DatePicker style="width: 200px" /><span
+                >开始的所有执行或监控数据</span
+              ></Radio
+            >
+            <Radio :style="radioStyle" :value="2"
+              ><span>保留时间为</span><InputNumber style="width: 200px" /><span
+                >天的执行或监控数据</span
+              ></Radio
+            >
+          </RadioGroup>
+        </template>
+        <template #formFooter>
+          <a-button style="margin-left: 30%" type="primary" @click="handleSave"> 保存 </a-button>
+        </template>
+      </BasicForm>
+    </template>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+  import { Alert, RadioGroup, DatePicker, InputNumber, Radio } from 'ant-design-vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { useForm } from '@/components/Form';
+  import { checkFormSchema, clearFormSchema } from './strategic.data';
+  import { reactive } from 'vue';
+
+  const { createMessage } = useMessage();
+
+  const radioStyle = reactive({
+    display: 'flex',
+    height: '30px',
+    margin: '0 0 20px 0',
+    lineHeight: '30px',
+  });
+
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 300,
+    schemas: clearFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
+
+  function handleSave() {
+    createMessage.success('保存成功!');
+  }
+</script>
+
+<style scoped></style>

src/views/realTimeSync/strategicIndicators/errorStrategic.vue

+<template>
+  <BasicTable @register="registerTable">
+    <template #eventHandle="{ text, record }">
+      <RadioGroup v-model:value="record.eventHandle" :options="eventList" />
+    </template>
+  </BasicTable>
+</template>
+
+<script lang="ts" setup>
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import { errorData } from './strategicData';
+  import { errorColumns, systemColumns } from './strategic.data';
+  import { RadioGroup } from 'ant-design-vue';
+  import { reactive } from 'vue';
+
+  const eventList = [
+    {
+      label: '目标端停止写入任务',
+      value: '1',
+    },
+    {
+      label: '忽略并继续写入',
+      value: '2',
+    },
+  ];
+  const [
+    registerTable,
+    {
+      reload,
+      updateTableDataRecord,
+      setTableData,
+      setColumns,
+      getSearchInfo,
+      getForm,
+      getRowSelection,
+      setSelectedRows,
+      clearSelectedRowKeys,
+    },
+  ] = useTable({
+    scroll: { y: 200 },
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: errorData.length,
+        code: '',
+        message: '',
+        data: errorData,
+      };
+      return { ...response };
+    },
+    rowKey: 'strategicId',
+    columns: errorColumns,
+    showIndexColumn: false,
+    useSearchForm: false,
+    striped: true,
+    showTableSetting: false,
+    bordered: false,
+    pagination: false,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+  } as BasicTableProps);
+</script>
+
+<style scoped></style>

src/views/realTimeSync/strategicIndicators/index.vue

 <template>
-  <div>策略指标</div>
+  <PageWrapper>
+    <Tabs v-model:activeKey="tabsKey">
+      <Tabs.TabPane key="1" tab="任务策略配置">
+        <div style="display: flex">
+          <div class="w-1/4">
+            <BasicTable @register="registerTable" :searchInfo="searchInfo">
+              <template #toolbar>
+                <div style="flex: 1">
+                  <InputSearch placeholder="输入关键字搜索" style="width: 170px" />
+                  <Select
+                    placeholder="策略类型"
+                    style="width: 150px; margin-left: 10px"
+                    :options="typeOptions"
+                  />
+                  <a-button type="link"><PlusOutlined style="color: #9396a4" /></a-button>
+                </div>
+              </template>
+              <template #strategicName="{ text, record }">
+                <div @click="handleRow(record)" class="hover1">
+                  {{ text }}
+                </div>
+              </template>
+              <template #strategicType="{ text, record }">
+                <div @click="handleRow(record)" class="hover1">
+                  {{ text }}
+                </div>
+              </template>
+            </BasicTable>
+          </div>
+          <!--        <a-button style="position: relative" @click="handleAdd" size="small"-->
+          <!--          ><PlusOutlined style="color: #9396a4"-->
+          <!--        /></a-button>-->
+          <div class="w-3/4">
+            <div v-if="titleName !== null" style="display: flex; justify-content: space-between">
+              <div style="font-size: 16px; font-weight: 650; margin: 0 0 20px 20px">{{
+                titleName
+              }}</div>
+              <div><a-button type="primary" @click="handleSubmit">保存</a-button></div>
+            </div>
+            <BasicForm v-show="titleName === '一致性检查默认策略'" @register="registerCheck">
+              <template #strategicType="{ field, model }">
+                <Select v-model:value="model[field]" :options="typeOptions" />
+                <Alert
+                  style="margin-top: 20px"
+                  type="info"
+                  showIcon
+                  message="含义：实时任务数据一致性功能的采集时间间隔设定。"
+                />
+              </template>
+              <template #checkSpan="{ field, model }">
+                <Input style="width: 200px" v-model:value="model[field]" /><span>分钟</span>
+                <div style="font-size: 13px; font-weight: 300"
+                  >检查间隔不建议过小，推荐5分钟、10分钟等可被整除的检查间隔，不可以超过60分钟。</div
+                >
+              </template>
+            </BasicForm>
+            <BasicForm
+              v-show="titleName !== null && titleName !== '一致性检查默认策略'"
+              @register="registerForm"
+            >
+              <template #strategicType="{ field, model }">
+                <div
+                  v-if="titleName === 'DB-DB源端DDL处理默认策略'"
+                  v-show="titleName === 'DB-DB源端DDL处理默认策略'"
+                >
+                  <Select v-model:value="model[field]" :options="typeOptions" />
+                  <Alert
+                    style="margin-top: 20px"
+                    type="info"
+                    showIcon
+                    message="当前DDL自动变更仅支持源端和目标端数据源类型相同，且未配置库/表/字段映射的场景。并且自动变更不经过审批流程，对于目标端数据结构、数据传输等方面存在影响，请谨慎选择。"
+                  />
+                </div>
+                <div
+                  v-if="titleName === 'DB-Kafka源端DDL处理默认策略'"
+                  v-show="titleName === 'DB-Kafka源端DDL处理默认策略'"
+                >
+                  <Select v-model:value="model[field]" :options="typeOptions" />
+                  <Alert
+                    style="margin-top: 20px"
+                    type="info"
+                    showIcon
+                    message="含义：源端表对象进行DDL，任务应对策略配置。"
+                  />
+                </div>
+                <div
+                  v-if="titleName === '系统异常默认策略'"
+                  v-show="titleName === '系统异常默认策略'"
+                >
+                  <Select v-model:value="model[field]" :options="typeOptions" />
+                  <Alert
+                    style="margin-top: 20px"
+                    type="info"
+                    showIcon
+                    message="含义：服务级别的系统异常的应对措施预览，部分异常支持自定义配置。"
+                  />
+                  <SystemStrategic />
+                </div>
+                <div
+                  v-if="titleName === '目标端数据异常默认策略'"
+                  v-show="titleName === '目标端数据异常默认策略'"
+                >
+                  <Select v-model:value="model[field]" :options="typeOptions" />
+                  <Alert
+                    style="margin-top: 20px"
+                    type="info"
+                    showIcon
+                    message="含义：实时任务目标端进行数据写入、数据转换等出现数据异常是的任务处理策略。"
+                  />
+                  <Alert
+                    style="margin-top: 20px"
+                    type="info"
+                    showIcon
+                    message="所有捕获的异常数据均会记录在任务运维的异常数据详情中"
+                  />
+                  <ErrorStrategic />
+                </div>
+                <div
+                  v-if="titleName === '数据积压默认策略'"
+                  v-show="titleName === '数据积压默认策略'"
+                >
+                  <Select v-model:value="model[field]" :options="typeOptions" />
+                  <Alert
+                    style="margin-top: 20px"
+                    type="info"
+                    showIcon
+                    message="含义：有效数据进入任务对应的Topic后，任务中任意Topic的数据积压情况的策略定义"
+                  />
+                  <div style="margin-top: 20px">
+                    <span>当数据偏差超过</span
+                    ><Input style="width: 200px" v-model.value="model.strategicWarn" /><span
+                      >条时，进行告警处理</span
+                    >
+                  </div>
+                  <div style="margin-top: 20px">
+                    <span>当数据偏差超过</span
+                    ><Input style="width: 200px" v-model.value="model.strategicStop" /><span
+                      >条时，暂停源端读取任务</span
+                    >
+                  </div>
+                </div>
+              </template>
+            </BasicForm>
+          </div>
+        </div>
+      </Tabs.TabPane>
+      <Tabs.TabPane key="2" tab="清理策略">
+        <ClearStrategic />
+      </Tabs.TabPane>
+    </Tabs>
+  </PageWrapper>
 </template>
 
-<script>
-export default {
-  name: "index"
-}
-</script>
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
+  import { Tabs, Select, Alert, Input, InputSearch } from 'ant-design-vue';
+  import { nextTick, onMounted, reactive, ref } from 'vue';
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import BasicForm from '@/components/Form/src/BasicForm.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import { TreeSystem } from './strategicData';
+  import {
+    columnsSystem,
+    searchFormSchema,
+    dbFormSchema,
+    kafkaFormSchema,
+    systemFormSchema,
+    errorFormSchema,
+    backlogFormSchema,
+    checkFormSchema,
+  } from './strategic.data';
+  import { useForm } from '@/components/Form';
+  import SystemStrategic from '@/views/realTimeSync/strategicIndicators/systemStrategic.vue';
+  import ErrorStrategic from '@/views/realTimeSync/strategicIndicators/errorStrategic.vue';
+  import ClearStrategic from '@/views/realTimeSync/strategicIndicators/clearStrategic.vue';
+
+  const searchInfo = reactive<Recordable>({});
+
+  const tabsKey = ref('1');
+
+  const typeOptions = [
+    {
+      label: '数据积压策略',
+      value: '数据积压策略',
+    },
+    {
+      label: '数据异常策略',
+      value: '数据异常策略',
+    },
+    {
+      label: 'DB-DB源媛DDL处理策略',
+      value: 'DB-DB源媛DDL处理策略',
+    },
+    {
+      label: '系统异常策略',
+      value: '系统异常策略',
+    },
+    {
+      label: '致性检查策略',
+      value: '致性检查策略',
+    },
+    {
+      label: 'DB-Kafka源端DDL处理策略',
+      value: 'DB-Kafka源端DDL处理策略',
+    },
+  ];
+  const [registerForm, { setFieldsValue, updateSchema, resetSchema, resetFields, validate }] =
+    useForm({
+      labelWidth: 150,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 24,
+      },
+    });
+  const [registerCheck, { setFieldsValue: checkSetFieldsValue, updateSchema: checkUpdateSchema }] =
+    useForm({
+      labelWidth: 150,
+      schemas: checkFormSchema,
+      showActionButtonGroup: false,
+      actionColOptions: {
+        span: 24,
+      },
+    });
 
-<style scoped>
+  const [
+    registerTable,
+    {
+      reload,
+      updateTableDataRecord,
+      setTableData,
+      setColumns,
+      getSearchInfo,
+      getForm,
+      getRowSelection,
+      setSelectedRows,
+      clearSelectedRowKeys,
+    },
+  ] = useTable({
+    title: '',
+    scroll: { y: 500 },
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: TreeSystem.length,
+        code: '',
+        message: '',
+        data: TreeSystem,
+      };
+      return { ...response };
+    },
+    rowKey: 'strategicId',
+    columns: columnsSystem,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 5,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      showActionButtonGroup: false,
+    },
+    useSearchForm: false,
+    striped: false,
+    showTableSetting: false,
+    bordered: false,
+    pagination: false,
+    rowSelection: { onSelect: handleSelect },
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 20,
+      title: '',
+      dataIndex: 'action',
+    },
+  } as BasicTableProps);
+
+  function handleRow(record) {
+    titleName.value = record.strategicName;
+    console.log('record', record);
+    setSelectedRows([{ strategicId: record.strategicId }]);
+    if (record.strategicId === 101) {
+      console.log('被调用1');
+      resetSchema([...backlogFormSchema]);
+    }
+    if (record.strategicId === 102) {
+      console.log('被调用2');
+      resetSchema([...errorFormSchema]);
+    }
+    if (record.strategicId === 103) {
+      console.log('被调用3');
+      resetSchema([...dbFormSchema]);
+    }
+    if (record.strategicId === 104) {
+      console.log('被调用4');
+      resetSchema([...systemFormSchema]);
+    }
+    if (record.strategicId === 106) {
+      console.log('被调用5');
+      resetSchema([...kafkaFormSchema]);
+    }
+  }
+  const titleName = ref(null);
+  function handleSelect(record) {
+    console.log('record', record);
+    titleName.value = record.strategicName;
+    nextTick(() => {
+      setSelectedRows([{ strategicId: record.strategicId }]);
+    });
+    console.log('getRowSelection', getRowSelection());
+  }
+  onMounted(() => {});
+
+  function handleAdd() {}
+  function handleSubmit() {}
+</script>
 
+<style lang="less" scoped>
+  .hover1 {
+    cursor: pointer;
+  }
 </style>

src/views/realTimeSync/strategicIndicators/strategic.data.ts

+import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '@/components/Table';
+
+/**查询表单*/
+export const searchFormSchema = [
+  {
+    field: 'strategicName',
+    label: ' ',
+    component: 'InputSearch',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+    colProps: { span: 12 },
+  },
+  {
+    field: 'strategicType',
+    label: ' ',
+    component: 'Select',
+    componentProps: {
+      placeholder: '策略类型',
+      options: [
+        { label: 'DB-DB源端DDL处理策略', value: 'DB-DB源端DDL处理策略' },
+        { label: 'DB-Kafka源端DDL处理策略', value: 'DB-Kafka源端DDL处理策略' },
+        { label: '系统异常处理策略', value: '系统异常处理策略' },
+        { label: '异常数据处理策略', value: '异常数据处理策略' },
+        { label: '数据积压策略', value: '数据积压策略' },
+        { label: '—致性检查策略', value: '致性检查策略' },
+      ],
+    },
+    colProps: { span: 10 },
+  },
+];
+
+export const columnsSystem = [
+  {
+    title: '策略名称',
+    dataIndex: 'strategicName',
+    width: 150,
+    slots: { customRender: 'strategicName' },
+  },
+  {
+    title: '策略类型',
+    dataIndex: 'strategicType',
+    width: 150,
+    slots: { customRender: 'strategicType' },
+  },
+];
+
+export const systemColumns: BasicColumn[] = [
+  {
+    title: '事件详情',
+    dataIndex: 'eventDetail',
+    width: 150,
+  },
+  {
+    title: '事件处理',
+    dataIndex: 'eventHandle',
+    width: 300,
+    slots: { customRender: 'eventHandle' },
+  },
+];
+
+export const errorColumns: BasicColumn[] = [
+  {
+    title: '事件详情',
+    dataIndex: 'eventDetail',
+    width: 150,
+  },
+  {
+    title: '事件处理',
+    dataIndex: 'eventHandle',
+    slots: { customRender: 'eventHandle' },
+    width: 300,
+  },
+];
+
+export const dbFormSchema: FormSchema[] = [
+  {
+    field: 'strategicName',
+    label: '策略名称',
+    component: 'Input',
+    colProps: { lg: 13, md: 13 },
+    required: true,
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'strategicType',
+    label: '策略类型',
+    slot: 'strategicType',
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'originType',
+    label: '源端数据类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '数据积压策略',
+          value: '数据积压策略',
+        },
+        {
+          label: '数据异常策略',
+          value: '数据异常策略',
+        },
+        {
+          label: 'DB-DB源媛DDL处理策略',
+          value: 'DB-DB源媛DDL处理策略',
+        },
+        {
+          label: '系统异常策略',
+          value: '系统异常策略',
+        },
+        {
+          label: '致性检查策略',
+          value: '致性检查策略',
+        },
+        {
+          label: 'DB-Kafka源端DDL处理策略',
+          value: 'DB-Kafka源端DDL处理策略',
+        },
+      ],
+    },
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'deleteTable',
+    label: '数据表删除',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '忽略，目标端数据表和任务配置均不做变更',
+          value: '2',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'deleteField',
+    label: '字段删除',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '自动删除目标端对应字段，任务配置不做变更',
+          value: '2',
+        },
+        {
+          label: '忽略，目标端字段和任务配置均不做变更，自动写入空值',
+          value: '3',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'addField',
+    label: '新增字段',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '自动为目标端新增字段，任务配置不做变更',
+          value: '2',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'fieldUpdate',
+    label: '字段类型或精度变更',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '自动为目标端更改字段类型或精度，任务配置不做变更',
+          value: '2',
+        },
+        {
+          label: '忽略，目标端字段类型或精度不变更',
+          value: '3',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'addTable',
+    label: '新增数据表',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '自动为目标端更改字段类型或精度，任务配置不做变更',
+          value: '2',
+        },
+        {
+          label: '忽略，目标端字段类型或精度不变更',
+          value: '3',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'clearTable',
+    label: '清空表',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '自动清空目标端对应数据表中数据',
+          value: '2',
+        },
+        {
+          label: '忽略，不清空目标端对应表数据',
+          value: '3',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'fieldRename',
+    label: '字段重命名',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '自动为目标端字段重命名，任务配置不变更',
+          value: '2',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'renameTable',
+    label: '表重命名',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+        {
+          label: '自动为目标端表重命名，并自动发布新版本和重启任务',
+          value: '2',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];
+
+export const kafkaFormSchema: FormSchema[] = [
+  {
+    field: 'strategicName',
+    label: '策略名称',
+    component: 'Input',
+    colProps: { lg: 13, md: 13 },
+    required: true,
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'strategicType',
+    label: '策略类型',
+    slot: 'strategicType',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'deleteTable',
+    label: '数据表删除',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'deleteField',
+    label: '字段删除',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'addField',
+    label: '新增字段',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'fieldUpdate',
+    label: '字段类型或精度变更',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'addTable',
+    label: '新增数据表',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'clearTable',
+    label: '清空表',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'fieldRename',
+    label: '字段重命名',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '源端暂停',
+          value: '1',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];
+
+export const systemFormSchema: FormSchema[] = [
+  {
+    field: 'strategicName',
+    label: '策略名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'strategicType',
+    label: '策略类型',
+    slot: 'strategicType',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+
+export const errorFormSchema: FormSchema[] = [
+  {
+    field: 'strategicName',
+    label: '策略名称',
+    component: 'Input',
+    colProps: { lg: 24, md: 24 },
+    required: true,
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'strategicType',
+    label: '策略类型',
+    slot: 'strategicType',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+
+export const backlogFormSchema: FormSchema[] = [
+  {
+    field: 'strategicName',
+    label: '策略名称',
+    component: 'Input',
+    colProps: { lg: 13, md: 13 },
+    required: true,
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'strategicType',
+    label: '策略类型',
+    slot: 'strategicType',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'strategicWarn',
+    label: ' ',
+    slot: 'strategicWarn',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'strategicStop',
+    label: ' ',
+    slot: 'strategicStop',
+    colProps: { lg: 24, md: 24 },
+  },
+];
+
+export const checkFormSchema: FormSchema[] = [
+  {
+    field: 'strategicName',
+    label: '策略名称',
+    component: 'Input',
+    colProps: { lg: 13, md: 13 },
+    required: true,
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'strategicType',
+    label: '策略类型',
+    slot: 'strategicType',
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'checkSpan',
+    label: '检查间隔',
+    slot: 'checkSpan',
+    colProps: { lg: 13, md: 13 },
+  },
+
+  {
+    field: 'checkSkna',
+    slot: 'checkSkna',
+    colProps: { lg: 13, md: 13 },
+  },
+];
+
+export const clearFormSchema: FormSchema[] = [
+  {
+    field: 'retainTime',
+    label: '执行记录保留时间*',
+    slot: 'retainTime',
+    colProps: { lg: 13, md: 13 },
+    required: true,
+  },
+  {
+    field: 'clearTime',
+    label: '清理时间配置',
+    component: 'TimePicker',
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'errorData',
+    label: '保留未处理完成异常数据',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        {
+          label: '是',
+          value: '1',
+        },
+        {
+          label: '否',
+          value: '2',
+        },
+      ],
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/realTimeSync/strategicIndicators/strategicData.ts

+export const TreeSystem: any[] = [
+  {
+    strategicId: 101,
+    strategicName: '数据积压默认策略',
+    strategicType: '数据积压策略',
+  },
+  {
+    strategicId: 102,
+    strategicName: '目标端数据异常默认策略',
+    strategicType: '数据异常策略',
+  },
+  {
+    strategicId: 103,
+    strategicName: 'DB-DB源端DDL处理默认策略',
+    strategicType: 'DB-DB源媛DDL处理策略',
+  },
+  {
+    strategicId: 104,
+    strategicName: '系统异常默认策略',
+    strategicType: '系统异常策略',
+  },
+  {
+    strategicId: 105,
+    strategicName: '一致性检查默认策略',
+    strategicType: '致性检查策略',
+  },
+  {
+    strategicId: 106,
+    strategicName: 'DB-Kafka源端DDL处理默认策略',
+    strategicType: 'DB-Kafka源端DDL处理策略',
+  },
+];
+
+export const systemData: any[] = [
+  {
+    eventDetail: '源端解析异常',
+    eventHandle: '任务暂停',
+    isStop: false,
+  },
+  {
+    eventDetail: 'Kafka异常',
+    eventHandle: '',
+    isStop: true,
+  },
+  {
+    eventDetail: '内部异常',
+    eventHandle: '任务暂停',
+    isStop: false,
+  },
+  {
+    eventDetail: '数据源连接异常',
+    eventHandle: '',
+    isStop: true,
+  },
+]
+
+export const errorData: any[] = [
+  {
+    eventDetail: '数据异常',
+    eventHandle: '',
+  },
+]

src/views/realTimeSync/strategicIndicators/systemStrategic.vue

+<template>
+  <BasicTable @register="registerTable">
+    <template #eventHandle="{ text, record }">
+      <div v-if="record.isStop">
+        <span>若连接超时，自动重试</span><Input v-model:value="record.eventHandle" /><span
+          >分钟，其它场景均任务暂停</span
+        >
+      </div>
+      <div v-else>任务暂停</div>
+    </template>
+  </BasicTable>
+</template>
+
+<script lang="ts" setup>
+  import BasicTable from '@/components/Table/src/BasicTable.vue';
+  import { BasicTableProps, useTable } from '@/components/Table';
+  import { systemData } from './strategicData';
+  import { systemColumns } from './strategic.data';
+
+  const [
+    registerTable,
+    {
+      reload,
+      updateTableDataRecord,
+      setTableData,
+      setColumns,
+      getSearchInfo,
+      getForm,
+      getRowSelection,
+      setSelectedRows,
+      clearSelectedRowKeys,
+    },
+  ] = useTable({
+    scroll: { y: 200 },
+    api: async (params) => {
+      console.log('params:', params);
+      const response = {
+        pageNu: '1',
+        pageSize: '10',
+        pages: '1',
+        total: systemData.length,
+        code: '',
+        message: '',
+        data: systemData,
+      };
+      return { ...response };
+    },
+    rowKey: 'strategicId',
+    columns: systemColumns,
+    showIndexColumn: false,
+    useSearchForm: false,
+    striped: true,
+    showTableSetting: false,
+    bordered: false,
+    pagination: false,
+    handleSearchInfoFn(info) {
+      return info;
+    },
+    actionColumn: {
+      width: 20,
+      title: '',
+      dataIndex: 'action',
+    },
+  } as BasicTableProps);
+</script>
+
+<style scoped></style>