事件中心页面

src/views/realTimeSync/eventCenter/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 { 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/eventCenter/eventCenterData.ts

@@ -44,14 +44,14 @@ export const tableData: any[] =[
     taskName:'oracle-mysql',
     eventType:'状态切换',
     eventName:'源端任务启动',
-    syncPoint:'mysql-bin.00203,41944023'
+    syncPoint:'-'
   },
   {
     startTime:'2023-06-28 20:25:36',
     taskName:'oracle-mysql',
     eventType:'状态切换',
     eventName:'目标端任务启动',
-    syncPoint:'mysql-bin.00203,41944023'
+    syncPoint:'-'
   },
   {
     startTime:'2023-06-28 20:14:26',
@@ -65,14 +65,14 @@ export const tableData: any[] =[
     taskName:'oracle-mysql',
     eventType:'状态切换',
     eventName:'目标端任务启动',
-    syncPoint:'mysql-bin.00203,41944023'
+    syncPoint:'-'
   },
   {
     startTime:'2023-06-28 20:12:32',
     taskName:'oracle-mysql',
     eventType:'状态切换',
     eventName:'源端任务启动',
-    syncPoint:'mysql-bin.00203,41944023'
+    syncPoint:'-'
   },
   {
     startTime:'2023-06-28 20:14:48',
@@ -93,7 +93,7 @@ export const tableData: any[] =[
     taskName:'oracle-mysql',
     eventType:'数据异常',
     eventName:'源端任务启动',
-    syncPoint:'-'
+    syncPoint:'mysql-bin.00203,41944023'
   },
   {
     startTime:'2023-06-28 20:23:24',

src/views/realTimeSync/eventCenter/index.vue

 <template>
   <div style="width: 100%;height: 100%;background-color: white">
     <div style="width: 100%;height:30%">
-      <div style="display: flex;height: 30px;margin-left: 20px;margin-top: 10px">
-        <div style="display: flex;align-items: center;font-weight: bold;font-size: 20px;">
+      <div class="eventCenterTop">
+        <div class="eventCenterTitle">
           <Icon icon="ant-design:file-text-outlined" :size="30" :color="'#1091FE'" />
           事件中心
         </div>
@@ -109,9 +109,29 @@
         </List>
       </div>
       <div style="width: 75%">
-        <BasicTable @register="registerTable"/>
+        <BasicTable @register="registerTable">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                {
+                  label: '跳转任务运维',
+                  onClick: toTaskMaintenanceButton.bind(null, record),
+                },
+                {
+                  label: '查看日志',
+                  onClick: lookLogButton.bind(null, record),
+                  ifShow: record.eventType === '系统异常',
+                },
+              ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
       </div>
     </div>
+<!--    查看日志 弹窗-->
+    <LookLogModal @register="registerLookLogModal" @success="handleSuccess" />
   </div>
 </template>
 
@@ -130,7 +150,7 @@
  import { tableData,TreeData,cardList } from './eventCenterData'
  import { BasicForm, useForm } from '@/components/Form';
  import { useECharts } from '@/hooks/web/useECharts';
-
+ import LookLogModal from './LookLogModal.vue'
 
  defineOptions({ name: 'AccountManagement' });
  const chartRef = ref<HTMLDivElement | null>(null);
@@ -201,6 +221,7 @@
         ],
       });
   }
+ const [registerLookLogModal, { openModal: openLookLogModal }] = useModal();
  const [registerTable, { reload,getForm,getRowSelection }] = useTable({
     title: '所有任务',
     api: async (params) => {
@@ -221,7 +242,7 @@
     showIndexColumn:false,
     bordered: true,
     actionColumn: {
-      width: 100,
+      width: 150,
       title: '操作',
       dataIndex: 'action',
     },
@@ -242,42 +263,17 @@
      selectedItem.value = item;
    }
 
-   /**详情 按钮*/
-   function detailButton(record){
+   /**跳转任务运维 按钮*/
+   function toTaskMaintenanceButton(record){
       router.push({
-        path: '/realTimeSync/taskOperationsMaintenance/workDetail',
-        query: {
-
-        }
+        path: '/realTimeSync/taskOperationsMaintenance/index',
+        query: {}
       });
    }
 
-   /**修改 按钮*/
-   function resetNameButton(record){
-     openResetNameModal(true,{
-       record
-     })
-   }
-
-
-   /**详情 按钮*/
-   function showDetails(record){
-     router.push({
-       path: '/realTimeSync/taskOperationsMaintenance/workDetail',
-       query: {
-
-       }
-     });
-  }
-
-   /**启动 按钮*/
-   function startButton(record){
-     createMessage.success('启动成功！')
-   }
-
-   /**暂停 按钮*/
-   function stopButton(record){
-     createMessage.success('暂停成功！')
+   /**查看日志 按钮*/
+   function lookLogButton(record){
+     openLookLogModal(true,{})
    }
 
    /** 转成树 */
@@ -392,4 +388,17 @@
   display: flex;
   align-items: center
 }
+.eventCenterTop{
+  display: flex;
+  height: 30px;
+  margin-left: 20px;
+  margin-top: 10px;
+  .eventCenterTitle{
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    font-size: 20px
+  }
+}
+
 </style>