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

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/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>