数据入湖-准实时--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/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>