Skip to content

B
bigDataSystem
Commit 8c4e2041 authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

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

任务运维--Bug修改
parent 6436fa85
Hide whitespace changes
Inline Side-by-side
Showing with 345 additions and 186 deletions
src/views/dataIntegration/dataLakePunctual/addDataConversionRuleModal.vue
View file @ 8c4e2041
......@@ -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
View file @ 8c4e2041
......@@ -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
View file @ 8c4e2041
......@@ -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
View file @ 8c4e2041
......@@ -2,7 +2,7 @@
<BasicModal
v-bind="$attrs"
@register="registerModal"
title="全局字段类型映射规则"
title="字段类型映射规则"
@ok="handleSubmit"
minHeight="50"
>
......
src/views/dataIntegration/dataLakePunctual/getMetadataModal.vue
View file @ 8c4e2041
......@@ -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
View file @ 8c4e2041
<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
View file @ 8c4e2041
......@@ -415,7 +415,7 @@ export const cardRuleList = [
},
{
title: '【全局】字段映射规则',
title: '【全局】表名映射规则',
type: 'singleTableFieldMappingRule',
description: '根据业务需求，对选中的源端表进行详情字段名、类型、注释 的映射配置',
},
......
src/views/dataIntegration/dataLakePunctual/newFieldRuleModal.vue
View file @ 8c4e2041
......@@ -2,7 +2,7 @@
<BasicModal
v-bind="$attrs"
@register="registerModal"
title="全局新增字段规则"
title="新增字段规则"
@ok="handleSubmit"
minHeight="50"
>
......
src/views/dataIntegration/dataLakePunctual/singleTableFieldMappingRuleModal.vue
View file @ 8c4e2041
......@@ -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
View file @ 8c4e2041
......@@ -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,7 +141,79 @@ import {BasicForm,useForm} from "@/components/Form";
defineOptions({ name: 'AccountManagement' });
/*饼图数据获取*/
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) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
series: [
{
color: ['rgb(84,198,159)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(147, 140, 206)'],
// 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: successNum.value, name:'成功'},
{ value: runningNum.value , name:'进行中'},
{ value: failNum.value ,name:'失败'},
{ value: waitNum.value ,name:'等待'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true },
);
})
const [register1] = useDescription({
bordered: false,
data: mockData,
......@@ -148,59 +237,7 @@ const route = useRoute();
const go = useGo();
const searchInfo = ref('');
const selectedItem = ref()
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
series: [
{
color: ['rgb(84,198,159)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(147, 140, 206)'],
// 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:'成功'},
{ value: 2 , name:'进行中'},
{ value: 3 ,name:'失败'},
{ value: 4 ,name:'等待'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true },
);
//初始化表单
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
View file @ 8c4e2041
......@@ -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
View file @ 8c4e2041
......@@ -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
View file @ 8c4e2041
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: {
......@@ -90,26 +88,27 @@ export const resetNameFormSchema: FormSchema[] = [
},
},
},
{
{
field: 'days',
component: 'DatePicker',
colProps: {
lg: 3,
md: 3,
lg: 3,
md: 3,
},
defaultValue: new Date(),
componentProps: {
format: 'YYYY-MM-DD',
placeholder: '选择日期范围',
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
View file @ 8c4e2041
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment