数据入湖-准实时--Bug修改（未完）

任务运维--Bug修改

src/views/dataIntegration/dataLakePunctual/addDataConversionRuleModal.vue

@@ -3,13 +3,6 @@
     <template #title>
       <span style="font-size: 23px; font-weight: lighter">新建规则</span>
     </template>
-    <Span style="font-size: 18px">
-      <Icon
-        style="margin-right: 5px; font-size: 18px"
-        :color="'#5cb3ff'"
-        icon="material-symbols:table-convert-outline"
-      />数据转换规则
-    </Span>
     <List>
       <Row :gutter="16">
         <template v-for="item in cardRuleList" :key="item.title">

src/views/dataIntegration/dataLakePunctual/dataLakePunctual.data.ts

@@ -55,7 +55,7 @@ export const sourceSideConfigurationFormSchema: FormSchema[] = [
     component: 'Select',
     required: true,
     componentProps: {
-      placeholder: '请选择数据源',
+      placeholder: '请选择数据',
       displayRender: ({ labels }) => {
         return labels[labels.length - 1];
       },
@@ -146,7 +146,18 @@ export const NewFieldRuleFormSchema: FormSchema[] = [
   {
     field: 'newFieldType',
     label: '新增字段类型',
-    component: 'Input',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'STRING', value: 'STRING' },
+        { label: 'INTEGER', value: 'INTEGER' },
+        { label: 'FLOAT', value: 'FLOAT' },
+        { label: 'DECIMAL', value: 'DECIMAL' },
+        { label: 'DATE', value: 'DATE' },
+        { label: 'TIMESTAMP', value: 'TIMESTAMP' },
+        { label: 'BOOLEAN', value: 'BOOLEAN' },
+      ]
+    },
     required: true,
   },
   {
@@ -273,13 +284,35 @@ export const FieldTypeMappingRuleFormSchema: FormSchema[] = [
   {
     field: 'sourceFieldType',
     label: '源字段类型',
-    component: 'Input',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'STRING', value: 'STRING' },
+        { label: 'INTEGER', value: 'INTEGER' },
+        { label: 'FLOAT', value: 'FLOAT' },
+        { label: 'DECIMAL', value: 'DECIMAL' },
+        { label: 'DATE', value: 'DATE' },
+        { label: 'TIMESTAMP', value: 'TIMESTAMP' },
+        { label: 'BOOLEAN', value: 'BOOLEAN' },
+      ]
+    },
     required: true,
   },
   {
     field: 'targetFieldType',
     label: '目标字段类型',
-    component: 'Input',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: 'STRING', value: 'STRING' },
+        { label: 'INTEGER', value: 'INTEGER' },
+        { label: 'FLOAT', value: 'FLOAT' },
+        { label: 'DECIMAL', value: 'DECIMAL' },
+        { label: 'DATE', value: 'DATE' },
+        { label: 'TIMESTAMP', value: 'TIMESTAMP' },
+        { label: 'BOOLEAN', value: 'BOOLEAN' },
+      ]
+    },
     required: true,
   },
 ];

src/views/dataIntegration/dataLakePunctual/fieldNameMappingRuleModal.vue

@@ -2,9 +2,9 @@
   <BasicModal
     v-bind="$attrs"
     @register="registerModal"
-    title="全局字段名称映射规则"
+    title="字段名映射规则"
     @ok="handleSubmit"
-    style="width: 35%"
+    width="40%"
     minHeight="50"
   >
     <BasicForm @register="registerForm">

src/views/dataIntegration/dataLakePunctual/fieldTypeMappingRuleModal.vue

@@ -2,7 +2,7 @@
   <BasicModal
     v-bind="$attrs"
     @register="registerModal"
-    title="全局字段类型映射规则"
+    title="字段类型映射规则"
     @ok="handleSubmit"
     minHeight="50"
   >

src/views/dataIntegration/dataLakePunctual/getMetadataModal.vue

@@ -39,8 +39,7 @@
   import { getMetadataTableList } from './mock'
   import { getMetadataColumns } from './dataLakePunctual.data';
   import Icon from '@/components/Icon/Icon.vue';
-
-  const emit = defineEmits(['success', 'register']);
+  const emit = defineEmits(['success', 'register', 'setFlag']);
   const { createMessage } = useMessage();
   const unfold = ref(false);
   let startId = ref();
@@ -79,6 +78,7 @@
   /**确定按钮*/
   async function handleSubmit() {
     closeModal();
+    emit('setFlag', 0);
   }
 
   /**获取元数据-选择按钮*/

src/views/dataIntegration/dataLakePunctual/index.vue

 <template>
   <PageWrapper class="content-padding" contentBackground @back="goBack">
     <div>
-      <Tabs>
+      <Tabs v-model:activeKey="key" type="card">
         <TabPane key="1" tab="源端配置">
           <div style="display: flex">
             <div class="w-3/10">
@@ -10,13 +10,13 @@
                   <div style="display: flex" v-if="model.logParser === '1'">
                     <a-button @click="handleGetMetadata" type="primary">获取元数据</a-button>
                     <a-button class="ml-3" @click="handleCanalConfiguration" type="primary"
-                      >Canal配置</a-button
-                    >
+                      >Canal配置
+                    </a-button>
                   </div>
                   <div style="display: flex" v-if="model.logParser === '2'">
                     <a-button :disabled="!model.dataBase" @click="handleGetMetadata" type="primary"
-                      >获取元数据</a-button
-                    >
+                      >获取元数据
+                    </a-button>
                   </div>
                 </template>
               </BasicForm>
@@ -29,9 +29,9 @@
             </div>
             <div style="width: 20%; padding: 0 5px 5px">
               <BasicTree
-                title="表头"
+                title="表名"
                 :search="true"
-                v-if="!metadataAcquisitionModeFlag"
+                v-show="!metadataAcquisitionModeFlag"
                 :checkable="false"
                 :actionList="actionList"
                 :treeData="tableTreeData"
@@ -39,7 +39,12 @@
                 @select="handleSelect"
               />
             </div>
-            <BasicForm @register="registerLoadingStrategyForm" style="width: 50%">
+
+            <BasicForm
+              @register="registerLoadingStrategyForm"
+              v-show="!metadataAcquisitionModeFlag"
+              style="width: 50%"
+            >
               <template #notCustomSQLTable>
                 <BasicTable @register="registerNotCustomSQLTable">
                   <template #bodyCell="{ column, record }">
@@ -66,57 +71,42 @@
                 :disabled="getRowSelection().selectedRowKeys <= 0"
                 type="primary"
                 @click="handleDeleteRules"
-                >删除规则</a-button>
+                >删除规则
+              </a-button>
               <a-button type="primary" @click="handleAddRule">新增规则</a-button>
             </template>
             <template #ruleType="{ text, record }">
-              {{text}}
+              {{ text }}
               <Icon :size="15" icon="ant-design:question-circle-filled" />
             </template>
             <template #ruleContent="{ text, record }">
-<!--              {{text}}-->
+              <!--              {{text}}-->
               <div v-if="text === '新增字段'" style="display: flex">
-                <AInput v-model:value="record.newFieldName"
-                  placeholder="字段名"
-                />&nbsp;&nbsp;
-                <Select v-model:value="record.newFieldType"
-                  style="width:100%"
+                <AInput v-model:value="record.newFieldName" placeholder="字段名" />&nbsp;&nbsp;
+                <Select
+                  v-model:value="record.newFieldType"
+                  style="width: 100%"
                   placeholder="字段类型"
                   :options="theTypeOfField"
                 />&nbsp;&nbsp;
-                <AInput v-model:value="record.newFieldExpression"
-                  placeholder="字段表达式"
-                />
+                <AInput v-model:value="record.newFieldExpression" placeholder="字段表达式" />
               </div>
 
               <div v-if="text === '字段名称'" style="display: flex">
-                <AInput v-model:value="record.sourceFieldName"
-                  placeholder="输入源列名"
-                />
+                <AInput v-model:value="record.sourceFieldName" placeholder="输入源列名" />
                 <Icon :color="'rgb(207,208,214)'" icon="ant-design:right-outlined" />
-                <AInput v-model:value="record.targetFieldName"
-                  placeholder="输入目标列名"
-                />
+                <AInput v-model:value="record.targetFieldName" placeholder="输入目标列名" />
               </div>
               <div v-if="text === '字段类型'" style="display: flex">
-                <AInput v-model:value="record.sourceFieldType"
-                  placeholder="输入源字段类型"
-                />
+                <AInput v-model:value="record.sourceFieldType" placeholder="输入源字段类型" />
                 <Icon :color="'rgb(207,208,214)'" icon="ant-design:right-outlined" />
-                <AInput v-model:value="record.targetFieldType"
-                  placeholder="输入目标字段类型"
-                />
+                <AInput v-model:value="record.targetFieldType" placeholder="输入目标字段类型" />
               </div>
               <div v-if="text === '表名'" style="display: flex">
-                <AInput v-model:value="record.sourceTableName"
-                  placeholder="输入源表名"
-                />
+                <AInput v-model:value="record.sourceTableName" placeholder="输入源表名" />
                 <Icon :color="'rgb(207,208,214)'" icon="ant-design:right-outlined" />
-                <AInput v-model:value="record.targetTableName"
-                  placeholder="输入目标表名"
-                />
+                <AInput v-model:value="record.targetTableName" placeholder="输入目标表名" />
               </div>
-
             </template>
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'action'">
@@ -141,14 +131,15 @@
           <BasicForm class="w-1/2" @register="registerDestinationConfigurationForm">
             <template #HDFSpath="{ field, model }">
               <div style="display: flex">
-                <AInput
-                  v-model:value="model.HDFSpath"
-                  :disabled="!model.HDFSDataSource"
-
-                />
-                <a-button :disabled="!model.HDFSpath" @click="handleGetHDFSpath" type="primary">浏览</a-button>
+                <AInput v-model:value="model.HDFSpath" :disabled="!model.HDFSDataSource" />
+                <a-button @click="handleGetHDFSpath" type="primary">
+                  浏览
+                </a-button>
               </div>
             </template>
+            <template #divider="{ field, model }">
+              <a-divider><b>运行参数</b></a-divider>
+            </template>
           </BasicForm>
         </TabPane>
         <TabPane key="4" tab="列表展示" style="display: flex">
@@ -186,23 +177,33 @@
         </TabPane>
       </Tabs>
     </div>
-<!--    源端配置-left-获取元数据按钮-弹窗  -->
-    <GetMetadataModal @register="registerGetMetadataModal" />
+    <!--    源端配置-left-获取元数据按钮-弹窗  -->
+    <GetMetadataModal @setFlag="setFlag" @register="registerGetMetadataModal" />
     <AddDataConversionRuleModal @register="registerAddRuleModal" />
     <ViewLogModal @register="registerViewLogsModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { Tabs, TabPane, Alert, Modal,Select } from 'ant-design-vue';
+  import { Tabs, TabPane, Alert, Modal, Select } from 'ant-design-vue';
   import { h, ref, onMounted } from 'vue';
   import { BasicTree } from '@/components/Tree';
   import { BasicForm, FormSchema, useForm } from '@/components/Form';
-  import { notCustomSQLColumns,sourceSideConfigurationFormSchema, mappingRuleConfigurationColumns,LoadingStrategyFormSchema } from './dataLakePunctual.data';
+  import {
+    notCustomSQLColumns,
+    sourceSideConfigurationFormSchema,
+    mappingRuleConfigurationColumns,
+    LoadingStrategyFormSchema,
+  } from './dataLakePunctual.data';
   import Icon from '@/components/Icon/Icon.vue';
   import { useMessage } from '@/hooks/web/useMessage';
   import { PageWrapper } from '@/components/Page';
   import { useRoute } from 'vue-router';
-  import { tableTreeData,notCustomSQLTableList,mappingRuleConfigurationTableList,theTypeOfField ,} from './mock'
+  import {
+    tableTreeData,
+    notCustomSQLTableList,
+    mappingRuleConfigurationTableList,
+    theTypeOfField,
+  } from './mock';
   import { router } from '@/router';
   import { DeleteOutlined } from '@ant-design/icons-vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
@@ -211,14 +212,15 @@
   import AddDataConversionRuleModal from './addDataConversionRuleModal.vue';
   import {
     compareTableList,
-    tabularPresentationTableList
-  } from "@/views/dataIntegration/dataLoading/dataEntryLake/mock";
+    tabularPresentationTableList,
+  } from '@/views/dataIntegration/dataLoading/dataEntryLake/mock';
   import {
-    showLogFormSchema, showLogTable,
+    showLogFormSchema,
+    showLogTable,
     showTableColumn,
-    showTableFormSchema
-  } from "@/views/dataIntegration/dataLoading/fileLoading/file.data";
-  import ViewLogModal from "@/views/dataIntegration/dataLoading/dataEntryLake/ViewLogModal.vue";
+    showTableFormSchema,
+  } from '@/views/dataIntegration/dataLoading/fileLoading/file.data';
+  import ViewLogModal from '@/views/dataIntegration/dataLoading/dataEntryLake/ViewLogModal.vue';
 
   const route = useRoute();
   const emit = defineEmits(['success', 'register']);
@@ -228,11 +230,14 @@
   let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
   let mappingRuleConfiguration = ref(mappingRuleConfigurationColumns);
   let sql = ref('SELECT * FROM user_info,customer_details,order_history,product_inventory');
-  let metadataAcquisitionModeFlag = ref();
+  let metadataAcquisitionModeFlag = ref(1);
   let isParsingSQL = ref(false);
   const selectKey = ref('0');
+  const key = ref('1');
 
-
+  function setFlag(flag) {
+    metadataAcquisitionModeFlag.value = flag;
+  }
 
   const DestinationConfigurationFormSchema: FormSchema[] = [
     {
@@ -242,9 +247,8 @@
       componentProps: {
         placeholder: '',
         options: [
-          { label: 'maoyanceshi1', value: 'maoyanceshi1' },
-          { label: 'bigevent', value: 'bigevent' },
-          { label: 'database1', value: 'database1' },
+          { label: 'Inceptor', value: 'Inceptor' },
+          { label: 'ArgoDB', value: 'ArgoDB' },
         ],
       },
       required: true,
@@ -256,9 +260,8 @@
       componentProps: {
         placeholder: '',
         options: [
-          { label: 'maoyanceshi1', value: 'maoyanceshi1' },
-          { label: 'bigevent', value: 'bigevent' },
-          { label: 'database1', value: 'database1' },
+          { label: 'Inceptor', value: 'Inceptor' },
+          { label: 'ArgoDB', value: 'ArgoDB' },
         ],
       },
     },
@@ -283,8 +286,8 @@
       required: true,
     },
     {
-      label: '运行参数',
-      component: 'Divider',
+      slot: 'divider',
+      field: 'divider',
     },
     {
       field: 'theMaximumNumberOfConcurrentRequestsAllowed',
@@ -347,7 +350,10 @@
     },
   });
 
-  const [registerNotCustomSQLTable, { reload: notCustomSQLTableReload, getDataSource: notCustomSQLTableDataSource }] = useTable({
+  const [
+    registerNotCustomSQLTable,
+    { reload: notCustomSQLTableReload, getDataSource: notCustomSQLTableDataSource },
+  ] = useTable({
     api: async () => {
       notCustomSQLTable.value = notCustomSQLTableList.filter(
         (item) => item.ownershipTableId[0] === selectKey.value,
@@ -413,7 +419,7 @@
   let target = 0; // 目标数据序号
   // Table拖拽
   function customRow(record, index) {
-    console.log('record, index:',record, index); // 这里输出是表格全部的数据
+    console.log('record, index:', record, index); // 这里输出是表格全部的数据
     return {
       props: {
         // draggable: 'true'
@@ -454,7 +460,11 @@
         target = index;
         // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
         console.log(mappingRuleConfigurationTable);
-        [mappingRuleConfigurationTable.value[source], mappingRuleConfigurationTable.value[target]] = [mappingRuleConfigurationTable.value[target], mappingRuleConfigurationTable.value[source]];
+        [mappingRuleConfigurationTable.value[source], mappingRuleConfigurationTable.value[target]] =
+          [
+            mappingRuleConfigurationTable.value[target],
+            mappingRuleConfigurationTable.value[source],
+          ];
         // const temp = ref();
         // temp.value = mappingRuleConfigurationTable.value[source];
         // mappingRuleConfigurationTable.value[source] = mappingRuleConfigurationTable.value[target];
@@ -482,7 +492,6 @@
     setFieldsValue({
       sourceDataTableName: 'user_info,customer_details,order_history,product_inventory',
     });
-
   });
 
   // 删除节点
@@ -518,18 +527,16 @@
     });
   }
 
-
-
   function handleSelect(keys) {
     isParsingSQL.value = false;
-    console.log(keys,'keys', getFieldsValue());
+    console.log(keys, 'keys', getFieldsValue());
     selectKey.value = keys.toString();
     const querySQL = tableTreeData.filter((item) => item.key === keys.toString())[0].sql;
     setFieldsValue({ querySQL: querySQL });
     notCustomSQLTableReload().then(() => {
       const data = notCustomSQLTableDataSource();
       const options = [];
-      data.forEach(item => {
+      data.forEach((item) => {
         options.push({
           label: item.fieldName,
           value: item.fieldName,
@@ -540,16 +547,18 @@
         ifShow: true,
         componentProps: {
           options: [...options],
-          mode: 'multiple'
-        }
-      })
+          mode: 'multiple',
+        },
+      });
     });
     // emit('select', keys[0]);
   }
+
   /**撤回上个页面 */
   function goBack() {
     router.back();
   }
+
   /**头部-保存按钮 */
   async function handleSave() {
     try {
@@ -572,8 +581,8 @@
     openGetMetadataModal(true);
   }
 
-  function handleCanalConfiguration(){
-    console.log('点击了canal配置按钮')
+  function handleCanalConfiguration() {
+    console.log('点击了canal配置按钮');
   }
 
   /**映射规则配置-新增规则按钮-弹窗 */
@@ -589,6 +598,7 @@
   function handleDeleteRule(record) {
     createMessage.success('删除规则成功' + record);
   }
+
   /**映射规则配置-删除规则按钮*/
   function handleDeleteRules() {
     createMessage.success('批量删除数据转换规则成功' + getRowSelection().selectedRowKeys);
@@ -596,11 +606,12 @@
 
   /**列表展示-查看日志按钮*/
   const [registerViewLogsModal, { openModal: openViewLogsModal }] = useModal();
+
   function handleViewLogs() {
     openViewLogsModal(true);
   }
 
-/**列表展示-列表1*/
+  /**列表展示-列表1*/
   let tabularPresentationTable = ref(tabularPresentationTableList);
   const [
     registerTabularPresentationTable,
@@ -695,18 +706,22 @@
   .content-padding {
     background-color: white;
   }
+
   .modal_top {
     padding: 0 0 20px 0;
     display: flex;
     align-items: center;
+
     .title {
       font-size: 16px;
       font-weight: 500;
     }
+
     .path {
       font-size: 14px;
       color: gray;
     }
+
     .buttonGroup {
       margin-left: auto;
       display: flex;

src/views/dataIntegration/dataLakePunctual/mock.ts

@@ -415,7 +415,7 @@ export const cardRuleList = [
   },
 
   {
-    title: '【全局】字段映射规则',
+    title: '【全局】表名映射规则',
     type: 'singleTableFieldMappingRule',
     description: '根据业务需求，对选中的源端表进行详情字段名、类型、注释 的映射配置',
   },

src/views/dataIntegration/dataLakePunctual/newFieldRuleModal.vue

@@ -2,7 +2,7 @@
   <BasicModal
     v-bind="$attrs"
     @register="registerModal"
-    title="全局新增字段规则"
+    title="新增字段规则"
     @ok="handleSubmit"
     minHeight="50"
   >

src/views/dataIntegration/dataLakePunctual/singleTableFieldMappingRuleModal.vue

@@ -2,9 +2,9 @@
   <BasicModal
     v-bind="$attrs"
     @register="registerModal"
-    title="全局字段映射规则"
+    title="表名映射规则"
     @ok="handleSubmit"
-    style="width: 35%"
+    width="40%"
     minHeight="50"
   >
     <BasicForm @register="registerForm">

src/views/dataIntegration/taskOM/index.vue

@@ -6,8 +6,24 @@
       <Col :span="24">
         <Card>
           <div style="flex: 1">
-            <div class="ml-1 mt-1">
-              <BasicForm @register="registerForm"/>
+            <div class="ml-2 mt-1">
+              <div class="flex">
+                <a-button type="default" @click="handleGoBack"><icon icon="ant-design:left-outlined"/>返回</a-button>
+                <Select
+                  class="ml-6"
+                  v-model:value="value1"
+                  style="width: 260px"
+                  :options="options1"
+                  @change="handleChange"
+                ></Select>
+              </div>
+              <BasicForm class="mt-2" @register="registerForm">
+                <template #refresh="{ field, model }">
+                  <div class="mr-2" style="float: right">
+                    <a-button type="primary" @click="resetFields">刷新</a-button>
+                  </div>
+                </template>
+              </BasicForm>
             </div>
             <div class="card_content">
               <col :span="3" />
@@ -21,7 +37,7 @@
               <Col :span="3" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
                 <div class="card_item">
                   <div class="card_itemInfo">
-                    <div class="dataNum">10</div>
+                    <div class="dataNum">{{ allNum }}</div>
                     <div class="dataTitle">执行记录</div>
                   </div>
                 </div>
@@ -30,7 +46,7 @@
                 <div class="card_item">
                   <Icon icon="ant-design:check-circle-filled" :size="30" :color="'rgb(84,198,159)'" />
                   <div class="card_itemInfo">
-                    <div class="dataNum">1</div>
+                    <div class="dataNum">{{ successNum }}</div>
                     <div class="dataTitle">成功</div>
                   </div>
                 </div>
@@ -39,7 +55,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">2</div>
+                    <div class="dataNum">{{ runningNum }}</div>
                     <div class="dataTitle">进行中</div>
                   </div>
                 </div>
@@ -48,7 +64,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">3</div>
+                    <div class="dataNum">{{ failNum }}</div>
                     <div class="dataTitle">失败</div>
                   </div>
                 </div>
@@ -57,7 +73,7 @@
                 <div class="card_item">
                   <Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(147, 140, 206)'" />
                   <div class="card_itemInfo">
-                    <div class="dataNum">4</div>
+                    <div class="dataNum">{{ waitNum }}</div>
                     <div class="dataTitle">等待</div>
                   </div>
                 </div>
@@ -106,9 +122,10 @@
 <script setup lang="ts">
 
 import PageWrapper from "@/components/Page/src/PageWrapper.vue";
-import {Card, Col, Row} from "ant-design-vue";
+import {Card, Col, Row,Select} from "ant-design-vue";
+import type { SelectProps } from 'ant-design-vue';
 import Icon from "@/components/Icon/Icon.vue";
-import {Ref, ref, watch} from "vue";
+import {onMounted, onUnmounted, Ref, ref, watch} from "vue";
 import {useECharts} from "@/hooks/web/useECharts";
 import {useMessage} from "@/hooks/web/useMessage";
 import {useRoute} from "vue-router";
@@ -124,31 +141,26 @@ import {BasicForm,useForm} from "@/components/Form";
 
 defineOptions({ name: 'AccountManagement' });
 
-
-const [register1] = useDescription({
-  bordered: false,
-  data: mockData,
-  schema: schema,
-});
-const props = defineProps({
-  loading: Boolean,
-  width: {
-    type: String as PropType<string>,
-    default: '100%',
-  },
-  height: {
-    type: String as PropType<string>,
-    default: '300px',
-  },
-});
-const chartRef = ref<HTMLDivElement | null>(null);
-const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-const { createMessage, createConfirm } = useMessage();
-const route = useRoute();
-const go = useGo();
-const searchInfo = ref('');
-const selectedItem = ref()
-watch(
+/*饼图数据获取*/
+const successNum = ref(0);
+const runningNum = ref(0);
+const failNum = ref(0);
+const waitNum = ref(0);
+const allNum = ref(0);
+onMounted(() => {
+  tableList.forEach(item => {
+    if (item.operationalStatus === '成功') {
+      successNum.value ++
+    } else if (item.operationalStatus === '进行中') {
+      runningNum.value ++
+    } else if (item.operationalStatus === '失败') {
+      failNum.value ++
+    } else if (item.operationalStatus === '等待') {
+      waitNum.value ++
+    }
+    allNum.value ++
+  })
+  watch(
     () => props.loading,
     () => {
       if (props.loading) {
@@ -185,10 +197,10 @@ watch(
               show: false,
             },
             data: [
-            { value: 1 , name:'成功'},
-            { value: 2 , name:'进行中'},
-            { value: 3 ,name:'失败'},
-            { value: 4 ,name:'等待'},
+              { value: successNum.value, name:'成功'},
+              { value: runningNum.value , name:'进行中'},
+              { value: failNum.value ,name:'失败'},
+              { value: waitNum.value ,name:'等待'},
             ],
             animationType: 'scale',
             animationEasing: 'exponentialInOut',
@@ -200,7 +212,32 @@ watch(
       });
     },
     { immediate: true },
-);
+  );
+})
+const [register1] = useDescription({
+  bordered: false,
+  data: mockData,
+  schema: schema,
+});
+const props = defineProps({
+  loading: Boolean,
+  width: {
+    type: String as PropType<string>,
+    default: '100%',
+  },
+  height: {
+    type: String as PropType<string>,
+    default: '300px',
+  },
+});
+const chartRef = ref<HTMLDivElement | null>(null);
+const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+const { createMessage, createConfirm } = useMessage();
+const route = useRoute();
+const go = useGo();
+const searchInfo = ref('');
+const selectedItem = ref()
+
 //初始化表单
 const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
   labelWidth: 100,
@@ -256,8 +293,11 @@ const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,get
   // },
 });
 
+/**返回按钮*/
+function handleGoBack() {
+  router.go(-1);
 
-
+}
 /**执行 按钮*/
 const handleExecute = () => {
   console.log('触发了执行按钮')
@@ -273,22 +313,73 @@ function handleEdit() {
 /**重跑 按钮*/
 const handleRun = () => {
   console.log('触发了重跑按钮')
+  createConfirm({
+    iconType: 'warning',
+    title: '重跑',
+    content: '确认重跑选中数据吗？',
+    onOk() {
+      createMessage.success('重跑成功!');
+    },
+  });
 };
 /**错误恢复 按钮*/
 const handleRecover = () => {
   console.log('触发了错误恢复按钮')
+  createConfirm({
+    iconType: 'warning',
+    title: '错误恢复',
+    content: '确认恢复选中数据吗？',
+    onOk() {
+      createMessage.success('恢复成功!');
+    },
+  });
 };
 /**取消 按钮*/
 const handleCancel = () => {
   console.log('触发了取消执行按钮')
+  createConfirm({
+    iconType: 'warning',
+    title: '取消执行',
+    content: '确认取消执行选中数据吗？',
+    onOk() {
+      createMessage.success('取消执行成功!');
+    },
+  });
 };
 
+const value1 = ref('admin-个人工作区,共享工作区,test001');
+const options1 = ref<SelectProps['options']>([
+  {
+    label: 'admin-个人工作区',
+    value: 'admin-个人工作区',
+  },
+  {
+    label: '共享工作区',
+    value: '共享工作区',
+  },
+  {
+    label: 'test001',
+    value: 'test001',
+  },
+  {
+    label: 'test002',
+    value: 'test002',
+  },
+  {
+    label: 'test003',
+    value: 'test003',
+  },
+]);
+const handleChange = (value: string) => {
+  console.log(`selected ${value}`);
+};
 
 
 /**点击card 改变css样式*/
 function clickButton(item){
   selectedItem.value = item;
 }
+
 </script>
 
 
@@ -298,7 +389,6 @@ function clickButton(item){
   ::v-deep(.ant-card-body) {
     display: flex;
     justify-content: center;
-    height: 150px;
     padding: 0;
   }
   .homePage_left {
@@ -308,6 +398,7 @@ function clickButton(item){
     }
     .card_content {
       width: 100%;
+      margin-bottom: 16px;
       display: flex;
       justify-content: center;
       align-items: center;

src/views/dataIntegration/taskOM/mock.ts

@@ -26,6 +26,24 @@ export const tableList: any[] = [
     version: 'V2',
     executeMode: '手动执行',
   },
+  {
+    dispatchTime: '2024-10-25 10:04:05',
+    executeTime: '2024-10-25 10:04:05',
+    rows: 12,
+    executeDuration: '5s',
+    operationalStatus: '等待',
+    version: 'V2',
+    executeMode: '手动执行',
+  },
+  {
+    dispatchTime: '2024-10-25 10:04:05',
+    executeTime: '2024-10-25 10:04:05',
+    rows: 12,
+    executeDuration: '5s',
+    operationalStatus: '等待',
+    version: 'V2',
+    executeMode: '手动执行',
+  },
 
 ]
 

src/views/dataIntegration/taskOM/recordDetails.vue

@@ -31,8 +31,8 @@
       <template #toolbar>
         <div style="flex: 1;display: flex; justify-content: space-between;">
           <div>
-            <span>加载成功数量：2&nbsp;</span>
-            <span>加载成功数量：0</span>
+            <span>加载成功数量：2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            <span>加载成功数量：0&nbsp;&nbsp;</span>
             <span>（加载成功数量：0，</span>
             <span>加载成功数量：0）</span>
           </div>

src/views/dataIntegration/taskOM/taskOM.data.ts

-import {BasicColumn, FormSchema} from "@/components/Table";
-import {DescItem} from "@/components/Description";
-
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { DescItem } from '@/components/Description';
 
 export const columns: BasicColumn[] = [
   {
@@ -57,9 +56,7 @@ export const searchFormSchema: FormSchema[] = [
     component: 'Select',
     componentProps: {
       placeholder: '按来源过滤',
-      options: [
-        { label: '指标汇总表', value: '1' },
-      ],
+      options: [{ label: '指标汇总表', value: '1' }],
     },
     colProps: { span: 8 },
   },
@@ -71,7 +68,8 @@ export const resetNameFormSchema: FormSchema[] = [
     field: 'schedulingTime',
     component: 'RadioButtonGroup',
     colProps: {
-      lg: 4, md: 4,
+      lg: 4,
+      md: 4,
     },
     defaultValue: '1',
     componentProps: {
@@ -102,14 +100,15 @@ export const resetNameFormSchema: FormSchema[] = [
       format: 'YYYY-MM-DD',
       placeholder: '选择日期范围',
     },
-},
+  },
 
   {
     field: 'schedulingType',
     component: 'Select',
     label: '调度类型',
     colProps: {
-      lg: 4, md: 4,
+      lg: 4,
+      md: 4,
     },
     defaultValue: '1',
     componentProps: {
@@ -137,7 +136,8 @@ export const resetNameFormSchema: FormSchema[] = [
     component: 'Select',
     label: '发布状态',
     colProps: {
-      lg: 4, md: 4,
+      lg: 4,
+      md: 4,
     },
     defaultValue: '1',
     componentProps: {
@@ -160,6 +160,16 @@ export const resetNameFormSchema: FormSchema[] = [
       ],
     },
   },
+  {
+    field: 'refresh',
+    label: ' ',
+    colProps: {
+      lg: 9,
+      md: 9,
+    },
+    component: 'Slot',
+    slot: 'refresh',
+  },
 ];
 
 export const schema: DescItem[] = [
@@ -175,7 +185,6 @@ export const schema: DescItem[] = [
     field: 'createdBy',
     label: '创建者',
   },
-
 ];
 export const detailsColumns: BasicColumn[] = [
   {
@@ -194,7 +203,7 @@ export const detailsColumns: BasicColumn[] = [
     width: 170,
   },
   {
-    title: '调用状态',
+    title: '运行状态',
     dataIndex: 'callStatus',
     width: 100,
     slots: { customRender: 'callStatus' },
@@ -204,7 +213,7 @@ export const detailsColumns: BasicColumn[] = [
     dataIndex: 'rows',
     width: 100,
   },
-]
+];
 
 export const detailSchemas: FormSchema[] = [
   {

src/views/dataIntegration/taskOM/viewTheLog.vue

 <template>
   <BasicModal
-    width="50%"
+    width="40%"
     @register="registerModal"
     :title="getTitle"
     @ok="handleSubmit"
@@ -8,7 +8,7 @@
     <template #insertFooter>
       <a-button @click="downloadLog" style="float: left;" type="link" >下载日志</a-button>
     </template>
-      <img src="@/assets/images/Log.png"/>
+      <img class="w-1/1" src="@/assets/images/Log.png"/>
 
   </BasicModal>
 </template>