任务监控初步页面

src/views/realTimeSync/taskOperationsMaintenance/DDLDetailModal.vue

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

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

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

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

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

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

@@ -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:''
+  },
+]
+

src/views/realTimeSync/taskOperationsMaintenance/workDetail.vue

@@ -11,7 +11,7 @@
           </div>
         </div>
         <div style="margin-top: 10px;">
-          <a-button type="primary" style="margin-right: 10px" @click="editButton"><Icon icon="material-symbols:sync"/>刷新</a-button>
+          <a-button type="primary" style="margin-right: 10px" @click="reloadButton"><Icon icon="material-symbols:sync"/>刷新</a-button>
         </div>
       </div>
       <div style="margin-left: 20px">
@@ -141,7 +141,7 @@
                       :actions="[
                           {
                             label: '查看日志',
-                            onClick: detailButton.bind(null, record),
+                            onClick: lookLogButton.bind(null, record),
                           },
                         ]"
                       />
@@ -159,11 +159,11 @@
                     <BasicForm @register="registerForm2"/>
                   </div>
                   <div>
-                    <a-button type="primary" style="margin-right: 10px" @click="">一键忽略</a-button>
-                    <a-button type="primary" style="margin-right: 10px" @click="">导入</a-button>
-                    <a-button type="primary" style="margin-right: 10px" @click="">查看导入记录</a-button>
-                    <a-button type="primary" style="margin-right: 10px" @click="">导出</a-button>
-                    <a-button type="primary" style="margin-right: 10px" @click="">导出全部</a-button>
+                    <a-button type="primary" style="margin-right: 10px" @click="ignoreButton">一键忽略</a-button>
+                    <a-button type="primary" style="margin-right: 10px" @click="ImportButton">导入</a-button>
+                    <a-button type="primary" style="margin-right: 10px" @click="lookExportRecordButton">查看导入记录</a-button>
+                    <a-button type="primary" style="margin-right: 10px" @click="exportButton">导出</a-button>
+                    <a-button type="primary" style="margin-right: 10px" @click="exportAllButton">导出全部</a-button>
                   </div>
                 </div>
                 <div class="homePage_module">
@@ -362,7 +362,7 @@
                       :actions="[
                           {
                             label: '查看',
-                            onClick: detailButton.bind(null, record),
+                            onClick: detailDDLButton.bind(null, record),
                           },
                           {
                             label: '忽略',
@@ -376,11 +376,129 @@
               </div>
             </div>
           </TabPane>
-          <TabPane tab="任务监控详情" key="任务监控详情"></TabPane>
+          <TabPane tab="任务监控详情" key="任务监控详情">
+            <div style="width: 100%;height: 100%">
+              <div style="height: 25%">
+                <Card
+                  size="small"
+                  :loading="loading"
+                >
+                  <div style="display: flex">
+                    <div style="width: 15%">
+                      <div style="font-weight: bold">同步任务总览</div>
+                      <div style="margin-top: 10px;margin-bottom: 10px">
+                        <div><span style="font-weight: bold">720823</span>行</div>
+                        <div style="font-size: 12px"><Icon icon="material-symbols:sync" :size="20"  :color="'rgb(82, 114, 196)'" />源端解析数据量</div>
+                      </div>
+                      <div>
+                        <div><span style="font-weight: bold">715905</span>行</div>
+                        <div style="font-size: 12px"><Icon icon="material-symbols:sync" :size="20"  :color="'rgb(148, 203, 121)'" />源端解析数据量</div>
+                      </div>
+                    </div>
+                    <div ref="chartRef4" style="width:85%;height: 220%"></div>
+                  </div>
+                </Card>
+              </div>
+              <div style="display: flex;height: 25%">
+                <Card
+                  class="md:w-1/2 w-full !md:mt-0"
+                  size="small"
+                  :loading="loading"
+                >
+                  <div style="display: flex">
+                    <div style="width: 20%">
+                      <div style="font-weight: bold">同步任务总览</div>
+                      <div style="margin-top: 10px;margin-bottom: 10px">
+                        <div><span style="font-weight: bold">720823</span>行</div>
+                        <div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18"  :color="'rgb(82, 114, 196)'" />源端解析数据量</div>
+                      </div>
+                      <div>
+                        <div><span style="font-weight: bold">715905</span>行</div>
+                        <div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18"  :color="'rgb(148, 203, 121)'" />源端解析数据量</div>
+                      </div>
+                    </div>
+                    <div ref="chartRef5" style="width:80%;height: 220%"></div>
+                  </div>
+                </Card>
+                <Card
+                  class="md:w-1/2 w-full !md:mt-0"
+                  style="height: 220%"
+                  size="small"
+                  :loading="loading"
+                >
+                  <div style="display: flex">
+                    <div style="width: 20%">
+                      <div style="font-weight: bold">同步任务总览</div>
+                      <div style="margin-top: 10px;margin-bottom: 10px">
+                        <div><span style="font-weight: bold">720823</span>行</div>
+                        <div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18"  :color="'rgb(82, 114, 196)'" />源端解析数据量</div>
+                      </div>
+                      <div>
+                        <div><span style="font-weight: bold">715905</span>行</div>
+                        <div style="font-size: 10px"><Icon icon="material-symbols:sync" :size="18"  :color="'rgb(148, 203, 121)'" />源端解析数据量</div>
+                      </div>
+                    </div>
+                    <div ref="chartRef6" style="width:80%;height: 220%"></div>
+                  </div>
+                </Card>
+              </div>
+              <div style="display: flex;height: 25%">
+                <Card
+                  class="md:w-1/2 w-full !md:mt-0"
+                  size="small"
+                  :loading="loading"
+                >
+                  <div ref="chartRef7" style="width:80%;height: 100%"></div>
+                </Card>
+                <Card
+                  class="md:w-1/4 w-full !md:mt-0"
+                  size="small"
+                  :loading="loading"
+                  title="同步点信息"
+                >
+                  <span style="font-size: 25px">53960492</span>
+                </Card>
+                <Card
+                  class="md:w-1/4 w-full !md:mt-0"
+                  size="small"
+                  :loading="loading"
+                  title="日志文件"
+                >
+                  <span style="font-size: 25px">binlog.000349</span>
+                </Card>
+              </div>
+              <div style="display: flex;height: 25%">
+                <Card
+                  class="md:w-1/2 w-full !md:mt-0"
+                  size="small"
+                  :loading="loading"
+                  title="111"
+                >
+                  <div ref="chartRef8" style="width:80%;height: 100%"></div>
+                </Card>
+                <Card
+                  class="md:w-1/2 w-full !md:mt-0"
+                  size="small"
+                  :loading="loading"
+                  title="1111"
+                >
+                  <div ref="chartRef9" style="width:80%;height: 100%"></div>
+                </Card>
+              </div>
+            </div>
+          </TabPane>
         </Tabs>
       </div>
+<!--    导入 弹窗-->
+    <ImportModal @register="registerImportModal" @success="handleSuccess" />
+<!--    导入记录 弹窗-->
+    <ImportRecordModal @register="registerImportRecordModal" @success="handleSuccess" />
 <!--    处理 抽屉-->
     <AbnormalDataHandleDrawer @register="registerDrawer" @success="handleSuccess" />
+<!--    DDL详情 弹窗-->
+    <DDLDetailModal @register="registerDDLDetailModal" @success="handleSuccess" />
+<!--    查看日志 弹窗-->
+    <LookLogModal @register="registerLookLogModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -390,7 +508,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { CodeEditor, JsonPreview, MODE } from '@/components/CodeEditor';
-  import { Card, Tabs, TabPane, Col, Row,RangePicker,RadioGroup,RadioButton } from 'ant-design-vue';
+  import { Card, Tabs, TabPane, Col, Row,RangePicker,RadioGroup,RadioButton,Tag} from 'ant-design-vue';
   import { Select,Textarea } from 'ant-design-vue';
   import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
   import { BasicForm, useForm } from '@/components/Form';
@@ -404,11 +522,26 @@
   import { detailColumns,detailFormSchema,detailColumns2,detailFormSchema2,detailColumns3,detailFormSchema3,detailColumns4 } from './maintenance.data';
   import { detailTableData,tableData,detailTableData2,detailTableData3,detailTableData4 } from './maintenanceData'
   import  AbnormalDataHandleDrawer from './AbnormalDataHandleDrawer.vue'
+  import {exportUserList} from "@/api/system/user/user";
+  import {downloadByData} from "@/utils/file/download";
+  import ImportModal from './ImportModal.vue'
+  import ImportRecordModal from './ImportRecordModal.vue'
+  import DDLDetailModal from './DDLDetailModal.vue'
+  import LookLogModal from './LookLogModal.vue'
+  import { CountTo } from '@/components/CountTo';
 
   defineOptions({ name: 'AccountModal' });
   const selectedItem = ref()
   type RangeValue = [Dayjs, Dayjs];
   const value1 = ref<RangeValue>();
+  const item = ref({
+    title: '数据统计',
+    icon: 'ant-design:database-outlined',
+    color: 'blue',
+    value: 100,
+    total: 10000,
+    action: '+10%',
+  })
   const selectRadio = ref('')
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
@@ -416,8 +549,24 @@
   const { setOptions:setOptions2 } = useECharts(chartRef2 as Ref<HTMLDivElement>);
   const chartRef3 = ref<HTMLDivElement | null>(null);
   const { setOptions:setOptions3 } = useECharts(chartRef3 as Ref<HTMLDivElement>);
+  const chartRef4 = ref<HTMLDivElement | null>(null);
+  const { setOptions:setOptions4 } = useECharts(chartRef4 as Ref<HTMLDivElement>);
+  const chartRef5 = ref<HTMLDivElement | null>(null);
+  const { setOptions:setOptions5 } = useECharts(chartRef5 as Ref<HTMLDivElement>);
+  const chartRef6 = ref<HTMLDivElement | null>(null);
+  const { setOptions:setOptions6 } = useECharts(chartRef6 as Ref<HTMLDivElement>);
+  const chartRef7 = ref<HTMLDivElement | null>(null);
+  const { setOptions:setOptions7 } = useECharts(chartRef7 as Ref<HTMLDivElement>);
+  const chartRef8 = ref<HTMLDivElement | null>(null);
+  const { setOptions:setOptions8 } = useECharts(chartRef8 as Ref<HTMLDivElement>);
+  const chartRef9 = ref<HTMLDivElement | null>(null);
+  const { setOptions:setOptions9 } = useECharts(chartRef9 as Ref<HTMLDivElement>);
   const emit = defineEmits(['success', 'register']);
   const { createMessage } = useMessage();
+  const [registerLookLogModal, { openModal: openLookLogModal }] = useModal();
+  const [registerImportModal, { openModal: openImportModal }] = useModal();
+  const [registerDDLDetailModal, { openModal: openDDLDetailModal }] = useModal();
+  const [registerImportRecordModal, { openModal: openImportRecordModal }] = useModal();
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerTable1] = useTable({
     title: '',
@@ -707,12 +856,370 @@
         ],
       });
   }
+  /** 执行统计echarts渲染4*/
+  function getEchartsData4() {
+    setOptions4({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
+          },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        // data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
+        data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: 400000,
+          splitNumber: 4,
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+            },
+          },
+        },
+      ],
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      series: [
+        {
+          smooth: false,
+          data: [
+            1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
+          ],
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#5ab1ef',
+          },
+        },
+      ],
+    });
+  }
+  /** 执行统计echarts渲染5*/
+  function getEchartsData5() {
+    setOptions5({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
+          },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        // data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
+        data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: 400000,
+          splitNumber: 4,
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+            },
+          },
+        },
+      ],
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      series: [
+        {
+          smooth: false,
+          data: [
+            1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
+          ],
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#5ab1ef',
+          },
+        },
+      ],
+    });
+  }
+  /** 执行统计echarts渲染6*/
+  function getEchartsData6() {
+    setOptions6({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
+          },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        // data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
+        data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: 400000,
+          splitNumber: 4,
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+            },
+          },
+        },
+      ],
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      series: [
+        {
+          smooth: false,
+          data: [
+            1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
+          ],
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#5ab1ef',
+          },
+        },
+      ],
+    });
+  }
+  /** 执行统计echarts渲染7*/
+  function getEchartsData7() {
+    setOptions7({
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: {
+        bottom: '1%',
+        left: 'center',
+      },
+      series: [
+        {
+          color: ['rgb(147, 140, 206)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(234, 150, 0)'],
+          name: '访问来源',
+          type: 'pie',
+          radius: ['50%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 0,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: false,
+            position: 'center',
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '12',
+              fontWeight: 'bold',
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { value: 1 , name: '1'},
+            { value: 10, name: '2' },
+            { value: 9 , name: '3'},
+            { value: 30 , name: '4'},
+          ],
+          animationType: 'scale',
+          animationEasing: 'exponentialInOut',
+          animationDelay: function () {
+            return Math.random() * 100;
+          },
+        },
+      ],
+    });
+  }
+  /** 执行统计echarts渲染8*/
+  function getEchartsData8() {
+    setOptions8({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
+          },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        // data: [...new Array(8)].map((_item, index) => `${index + 6}:00`),
+        data: [...new Array(8)].map((_item, index) => `2023-06-26 0${index + 1}:00:00`),
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: 400000,
+          splitNumber: 4,
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
+            },
+          },
+        },
+      ],
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      series: [
+        {
+          smooth: false,
+          data: [
+            1000, 1000, 1000, 1000, 1000, 388888, 1000, 1000
+          ],
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#5ab1ef',
+          },
+        },
+      ],
+    });
+  }
+  /** 执行统计echarts渲染9*/
+  function getEchartsData9() {
+    setOptions9({
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: {
+        bottom: '1%',
+        left: 'center',
+      },
+      series: [
+        {
+          color: ['rgb(147, 140, 206)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(234, 150, 0)'],
+          name: '访问来源',
+          type: 'pie',
+          radius: ['50%', '70%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 0,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: false,
+            position: 'center',
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: '12',
+              fontWeight: 'bold',
+            },
+          },
+          labelLine: {
+            show: false,
+          },
+          data: [
+            { value: 1 , name: '1'},
+            { value: 10, name: '2' },
+            { value: 9 , name: '3'},
+            { value: 30 , name: '4'},
+          ],
+          animationType: 'scale',
+          animationEasing: 'exponentialInOut',
+          animationDelay: function () {
+            return Math.random() * 100;
+          },
+        },
+      ],
+    });
+  }
   /**标签切换*/
   function handleChangeTab(key: string) {
     // 处理标签页切换逻辑...
     getEchartsData()
     getEchartsData2()
     getEchartsData3()
+    getEchartsData4()
+    getEchartsData5()
+    getEchartsData6()
+    getEchartsData7()
+    getEchartsData8()
+    getEchartsData9()
+  }
+
+
+  /**DDL详情 弹窗*/
+  function detailDDLButton(){
+    openDDLDetailModal(true,{})
   }
 
   /**跳转事件列表*/
@@ -720,6 +1227,52 @@
 
   }
 
+
+  /**查看日志 按钮*/
+  function lookLogButton(){
+    openLookLogModal(true,{})
+  }
+
+
+  /**查看导入记录 按钮*/
+  function lookExportRecordButton(){
+    openImportRecordModal(true, {
+
+    });
+  }
+
+
+  /**导出 按钮*/
+  async function exportButton() {
+    const params = Object.assign({}, {});
+    const data = await exportUserList(params);
+    downloadByData(data, '异常数据信息' + '.xlsx');
+  }
+
+  /**导出全部 按钮*/
+  async function exportAllButton() {
+    const params = Object.assign({}, {});
+    const data = await exportUserList(params);
+    downloadByData(data, '异常数据信息' + '.xlsx');
+  }
+
+  /**导入*/
+  function ImportButton() {
+    openImportModal(true, {
+
+    });
+  }
+
+  /**一键忽略 按钮*/
+  function ignoreButton(){
+    createMessage.success('忽略成功!')
+  }
+
+  /**刷新  按钮*/
+  function reloadButton(){
+     createMessage.success('刷新成功!')
+  }
+
   /**点击card 改变css样式*/
    function clickButton(item){
      selectedItem.value = item;