Commit 0a007e12 authored by LiXuyang's avatar LiXuyang

文件离线加载

parent cc6afbd8
......@@ -621,6 +621,15 @@ export const DataStandardRoute: AppRouteRecordRaw = {
icon: '',
},
},
{
path: 'labelDropInspection/labelOperation',
name: 'labelOperation',
component: () => import('@/views/dataStandards/labelDropInspection/labelOperation/index.vue'),
meta: {
title: '任务运维',
icon: '',
},
},
{
path: 'labelDropInspection/labelReport',
name: 'labelReport',
......
......@@ -294,19 +294,7 @@ export const dataSourceFieldFormSchema: FormSchema[] = [
show: ({ model }) => {
return model.createTable === '是';
},
component: 'Select',
componentProps: {
options: [
{
label: 'Table1',
value: 'Table1',
},
{
label: 'Table2',
value: 'Table2',
},
],
},
component: 'Input',
},
];
export const dataSourceTableColumn: BasicColumn[] = [
......@@ -400,6 +388,30 @@ export const dataSourceSqlFormSchema: FormSchema[] = [
],
},
},
{
label: '分区键',
field: 'areaKey',
show: ({ model }) => {
return model.area !== '无';
},
slot: 'areaKey',
},
{
label: '分区范围',
field: 'areaRange',
show: ({ model }) => {
return model.area === '范围分区';
},
slot: 'areaRange',
},
{
label: '分区间隔',
field: 'areaSpace',
show: ({ model }) => {
return model.area === '范围分区';
},
component: 'Input',
},
{
field: '',
slot: 'title2',
......@@ -422,6 +434,22 @@ export const dataSourceSqlFormSchema: FormSchema[] = [
],
},
},
{
label: '分桶键',
field: 'bucketKey',
component: 'Input',
show: ({ model }) => {
return model.bucket === '是';
},
},
{
label: '分桶个数',
field: 'bucketNum',
show: ({ model }) => {
return model.bucket === '是';
},
slot: 'bucketNum',
},
{
field: '',
slot: 'title3',
......@@ -851,3 +879,22 @@ export const headGlobalConfigSchema: FormSchema[] = [
colProps: { lg: 24, md: 24 },
},
];
export const runOptionsColumns: BasicColumn[] = [
{
title: '参数名称',
dataIndex: 'name',
width: 120,
},
{
title: '参数类型',
dataIndex: 'type',
width: 120,
},
{
title: '参数值',
dataIndex: 'data',
width: 120,
edit: true,
editable: true,
},
];
......@@ -96,3 +96,25 @@ export const mappingRuleConfigurationTableList = [
ruleContent: "自定义规则:field1 != 'axxc'",
},
];
export const runOptionsData: any[] = [
{
name: 'tdt.job.cleaning',
type: '服务参数',
data: 'true',
},
{
name: 'tdt.jdbc.mapper.size',
type: '服务参数',
data: '1024',
},
{
name: 'tdt.job.mapper.count',
type: '服务参数',
data: 'true',
},
{
name: 'tdt.strict.mode',
type: '服务参数',
data: 'false',
},
];
......@@ -15,17 +15,19 @@
<a-button :disabled="isDebug" type="primary" @click="handleSave">保存</a-button>
<a-button v-if="!isDebug" type="primary" @click="handleDebug">调试</a-button>
<a-button v-else type="primary" @click="handleExitDebug">退出调试</a-button>
<a-button :disabled="isDebug || !isUpload" type="primary" @click="handleRun">运行</a-button>
<a-button :disabled="isDebug || !isUpload" type="primary" @click="handleRun"
>运行
</a-button>
<a-button :disabled="!isSave || isDebug" type="primary" @click="handlePublish"
>发布</a-button
>
>发布
</a-button>
<a-button type="primary" @click="handleGobalDeply">全局配置</a-button>
<a-button type="primary" @click="handleParameterConfiguration">参数配置</a-button>
<a-button type="primary" @click="handleVersionManagement">版本管理</a-button>
</div>
</div>
</template>
<template #extra> </template>
<template #extra></template>
<template #footer>
<Tabs v-model:activeKey="activeKey">
<TabPane key="1" tab="源端配置">
......@@ -137,8 +139,8 @@
:disabled="getMappingRuleConfigurationRowSelection().selectedRowKeys <= 0"
type="primary"
@click="handleDeleteRules"
>删除规则</a-button
>
>删除规则
</a-button>
<a-button type="primary" @click="handleAddRule">新增规则</a-button>
</template>
<template #executionSequence="{ index }">
......@@ -181,7 +183,7 @@
</TabPane>
<TabPane key="3" tab="目标端配置">
<!-- 上半部分-->
<BasicForm @register="dataSourceForm">
<BasicForm @register="dataSourceForm" style="margin-top: 15px">
<template #clear="{ field, model }">
<div class="flex">
<RadioGroup v-model:value="model[field]" :options="clearOptions" />
......@@ -239,7 +241,9 @@
v-if="indexSelect"
style="display: flex; align-items: center; gap: 5px; margin-top: 5px"
>
<a-input v-model:value="startIndex" style="width: 60px" />
<a-input v-model:value="startIndex" style="width: 60px" />
<a-input v-model:value="endIndex" style="width: 60px" />
<a-button @click="handleSelectIndex">选择</a-button>
<a-button @click="handleResetIndex">清空</a-button>
......@@ -250,14 +254,15 @@
type="primary"
:disabled="getDataSourceRowSelection().selectedRowKeys <= 0"
@click="handlePartitionedDataProcessing"
>分区数据处理</a-button
>
>分区数据处理
</a-button>
<a-button @click="handleBatchScaleNameMapping">批量表名映射</a-button>
</div>
</div>
</template>
<template #source="{ text, record }">
<TableOutlined /><span>{{ text }}</span>
<TableOutlined style="margin-right: 10px" />
<span>{{ text }}</span>
</template>
<template #target="{ text, record }">
<Input v-model:value="record.target" />
......@@ -273,8 +278,8 @@
<BasicTable v-else @register="dataSourceFieldTable">
<template #toolbar>
<a-button type="primary" @click="handlePartitionedDataProcessing"
>分区数据处理</a-button
>
>分区数据处理
</a-button>
<a-button type="primary">导入映射文件</a-button>
<a-button type="primary">导出文件</a-button>
</template>
......@@ -314,9 +319,43 @@
<template #title1>
<span style="font-weight: bolder">分区配置</span>
</template>
<!-- 分区键 -->
<template #areaKey="{ field, model }">
<div class="areaKey" v-for="(item, index) in areaKeyList" :key="item">
<Input class="sqlForm-field" v-model:value="item.field" />
<Select
class="sqlForm-type"
v-model:value="item.type"
:options="sqlFormTypeOptions"
/>
<DeleteOutlined class="sqlForm-icon" @click="handleSqlAreaKeyRemove(index)" />
</div>
<a-button type="primary" @click="handleSqlAreaKeyAdd"
><PlusOutlined />添加分区键</a-button
>
</template>
<!-- 分区范围 -->
<template #areaRange="{ field, model }">
<div class="areaKey" v-for="(item, index) in areaRangeList" :key="item">
<Input class="sqlForm-field" v-model:value="item.field" />
<Input
class="sqlForm-condition"
v-model:value="item.type"
:options="sqlFormTypeOptions"
/>
<DeleteOutlined class="sqlForm-icon" @click="handleSqlAreaRangeRemove(index)" />
</div>
<a-button type="primary" @click="handleSqlAreaRangeAdd"
><PlusOutlined />添加分区键</a-button
>
</template>
<template #title2>
<span style="font-weight: bolder">分桶配置</span>
</template>
<template #bucketNum="{ field, model }">
<Input v-model:value="model[field]" />
<div class="bucketNum-txt"> 分桶数量推荐为除31以外的质数 </div>
</template>
<template #title3>
<span style="font-weight: bolder">其他配置</span>
</template>
......@@ -338,8 +377,8 @@
<div style="display: flex; justify-content: space-between">
<strong>自定义查询SQL</strong>
<a-button type="primary" style="margin-right: 5px" @click="handleSqlPreview"
>切换至配置项</a-button
>
>切换至配置项
</a-button>
</div>
<CodeEditor
v-model:value="sqlTxt"
......@@ -393,7 +432,7 @@
<GlobalOptionsModal @register="registerGlobalOptionsModal" />
<DataOptionsModal @register="registerDataOptionsModal" />
<VersionManageModal @register="registerVersionManageModal" />
<RunOptionsModal @register="registerRunOptionsModal" />
<RunOptionsModal @register="registerRunOptionsModal" @success="RunOptionsSuccess" />
</PageWrapper>
</template>
......@@ -418,6 +457,7 @@
SearchOutlined,
TableOutlined,
LeftOutlined,
PlusOutlined,
} from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { useModal } from '@/components/Modal';
......@@ -474,7 +514,7 @@
import DataOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/dataOptionsModal.vue';
import VersionManageModal from '@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue';
import PartitionDataHandleModal from '@/views/dataIntegration/dataLoading/fileLoading/partitionDataHandleModal.vue';
import RunOptionsModal from '@/views/dataIntegration/dataLoading/dataEntryLake/runOptionsModal.vue';
import RunOptionsModal from '@/views/dataIntegration/dataLoading/fileLoading/runOptionsModal.vue';
const [registerSaveModal, { openModal: openSaveModal }] = useModal();
const [registerGlobalOptionsModal, { openModal: openGlobalOptionsModal }] = useModal();
......@@ -483,15 +523,25 @@
const [partitionDataHandleModal, { openModal: openPartitionDataHandleModal }] = useModal();
const [registerRunOptionsModal, { openModal: openRunOptionsModal }] = useModal();
const isSave = ref(false);
async function handleSave() {
createMessage.success('保存成功');
isSave.value = true;
}
function goBack() {
router.back();
}
const isDebug = ref(false);
function handleDebug() {
function RunOptionsSuccess(data) {
if (data.isDebug) {
successDebug();
} else {
createMessage.success('运行成功')!
}
}
function successDebug() {
isDebug.value = true;
activeKey.value = '4';
tabularPresentationTable.value = [
......@@ -538,38 +588,54 @@
];
reloadTabularPresentationTable();
}
function handleDebug() {
openRunOptionsModal(true, {
title: '参数列表',
isDebug: true,
});
}
function handleExitDebug() {
isDebug.value = false;
}
function handlePublish() {
openSaveModal(true, {
title: '发布新版本',
});
}
const isUpload = ref(false);
function handleSaveSuccess() {
isUpload.value = true;
}
function handleGobalDeply() {
openGlobalOptionsModal(true, {
title: '数据加载全局配置',
});
}
function handleRun() {
openRunOptionsModal(true, {
title: '参数列表',
});
}
function handleParameterConfiguration() {
openDataOptionsModal(true, {
title: '数据加载参数配置',
});
}
function handleVersionManagement() {
openVersionManageModal(true, {
title: '版本管理',
});
}
const key = ref('');
const activeKey = ref('1');
const modelName = ref('文件离线加载');
......@@ -663,9 +729,11 @@
},
]);
const seniorConfig = ref(false);
function handleSeniorConfig() {
seniorConfig.value = !seniorConfig.value;
}
// 高级配置-切换 点击tabs3 获取tab1的状态
// function getFileLoadingType() {
// const form = getFileFormValue();
......@@ -719,9 +787,11 @@
},
];
const createTable = ref('否');
function changeCreateTable(value) {
createTable.value = value;
}
const [dataSourceFieldForm, { getFieldsValue: getDataSourceFieldValue }] = useForm({
labelWidth: 120,
baseColProps: { lg: 24, md: 24 },
......@@ -740,12 +810,48 @@
const sqlPreview = ref(false);
const sqlTxt = ref('');
const sqlDisabled = ref(true);
const sqlFormTypeOptions = [
{
label: 'STRING',
value: 'STRING',
},
{
label: 'INT',
value: 'INT',
},
{
label: 'DATETIME',
value: 'DATETIME',
},
{
label: 'CHAR',
value: 'CHAR',
},
{
label: 'BOOLEAN',
value: 'BOOLEAN',
},
];
function handleSqlPreview() {
const value = getDataSourceFieldValue();
sqlTxt.value = 'CREATE TABLE ' + value.tableName;
sqlPreview.value = !sqlPreview.value;
sqlDisabled.value = false;
}
const areaKeyList = ref([{}]);
const areaRangeList = ref([{}]);
function handleSqlAreaKeyRemove(index) {
areaKeyList.value.splice(index, 1);
}
function handleSqlAreaKeyAdd() {
areaKeyList.value.push({});
}
function handleSqlAreaRangeRemove(index) {
areaRangeList.value.splice(index, 1);
}
function handleSqlAreaRangeAdd() {
areaRangeList.value.push({});
}
const [dataSourceSqlForm] = useForm({
labelWidth: 60,
baseColProps: { lg: 24, md: 24 },
......@@ -824,6 +930,7 @@
},
];
const showFileTable = ref(false);
function handleTableDelete() {
createConfirm({
iconType: 'warning',
......@@ -834,6 +941,7 @@
},
});
}
const [fileTable, { reload: fileReload }] = useTable({
api: async () => {
const response = {
......@@ -854,22 +962,27 @@
showIndexColumn: false,
bordered: false,
});
// tabs2
function handleDeleteRules() {
createMessage.success(
'批量删除数据转换规则成功' + getMappingRuleConfigurationRowSelection().selectedRowKeys,
);
}
const [registerAddRuleModal, { openModal: openAddRuleModal }] = useModal();
function handleAddRule() {
openAddRuleModal();
}
function handleMoveTop(source) {
[mappingRuleConfigurationTable.value[source], mappingRuleConfigurationTable.value[0]] = [
mappingRuleConfigurationTable.value[0],
mappingRuleConfigurationTable.value[source],
];
}
function handleMoveDown(source) {
if (mappingRuleConfigurationTable.value[source + 1]) {
[
......@@ -881,6 +994,7 @@
];
}
}
function handleMoveUp(source) {
if (mappingRuleConfigurationTable.value[source - 1]) {
[
......@@ -892,12 +1006,15 @@
];
}
}
function handleEdit(record) {
createMessage.success('编辑:' + record);
}
function handleDeleteRule(record) {
createMessage.success('删除规则成功' + record);
}
let mappingRuleConfigurationTable = ref(mappingRuleConfigurationTableList);
const [
registerMappingRuleConfigurationTable,
......@@ -932,25 +1049,33 @@
// tabs3
const dataSourceKey = ref('');
const indexSelect = ref(false);
function handlePartitionedDataProcessing() {
openPartitionDataHandleModal();
}
const [registerClearConfigurationModal, { openModal: openClearConfigurationModal }] = useModal();
function handleClearConfiguration(record) {
openClearConfigurationModal(true, {
sourceTableName: record.source,
});
}
const [registerBatchScaleNameMappingModal, { openModal: openBatchScaleNameMappingModal }] =
useModal();
function handleBatchScaleNameMapping() {
openBatchScaleNameMappingModal();
}
const startIndex = ref();
const endIndex = ref();
function handleIndexSelect() {
indexSelect.value = !indexSelect.value;
}
function handleSelectIndex() {
const start =
startIndex.value > dataSourceData.length ? dataSourceFieldData.length : startIndex.value;
......@@ -959,11 +1084,13 @@
const sublist = dataSourceData.slice(start - 1, end);
setDataSourceRows([...sublist]);
}
function handleResetIndex() {
startIndex.value = null;
endIndex.value = null;
setDataSourceRows([]);
}
const [
dataSourceTable,
{ getRowSelection: getDataSourceRowSelection, setSelectedRows: setDataSourceRows },
......@@ -1011,9 +1138,11 @@
} as BasicTableProps);
// tabs 4
const [registerViewLogsModal, { openModal: openViewLogsModal }] = useModal();
function handleViewLogs() {
openViewLogsModal(true);
}
let tabularPresentationTable = ref(tabularPresentationTableList);
const [
registerTabularPresentationTable,
......@@ -1114,32 +1243,59 @@
gap: 10px;
}
}
.header {
display: flex;
.title {
display: flex;
flex: 1;
gap: 10px;
.icon-back {
font-size: 20px;
}
.icon-base {
font-size: 30px !important;
color: #9064e9;
}
.txt {
.txt-title {
font-size: 18px;
}
.txt-des {
font-size: 14px;
color: #808080;
}
}
}
.button-group {
display: flex;
gap: 10px;
}
}
.areaKey {
display: flex;
gap: 10px;
margin-bottom: 15px;
.sqlForm-field {
flex: 2;
}
.sqlForm-type {
flex: 1;
}
.sqlForm-condition {
flex: 2;
}
.sqlForm-icon {
font-size: 18px;
}
}
.bucketNum-txt {
color: #8c8c8c;
}
</style>
<template>
<BasicModal
width="55%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<BasicTable @register="registerTable" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable } from '@/components/Table';
import { runOptionsColumns } from '@/views/dataIntegration/dataLoading/fileLoading/file.data';
import { runOptionsData } from '@/views/dataIntegration/dataLoading/fileLoading/fileData';
defineOptions({ name: 'KnowledgeModal' });
let isDebug = false;
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerTable, { reload }] = useTable({
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据,取出等于params.deptId的数据
var data = [];
data = tableData.value;
return { ...response, data: data };
},
pagination: false,
columns: runOptionsColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
isDebug = data.isDebug;
title.value = data.title;
});
async function handleSubmit() {
closeModal();
emit('success', {
isDebug: isDebug,
});
}
onMounted(() => {
tableData.value = runOptionsData;
});
</script>
<template>
<PageWrapper dense contentFullHeight fixedHeight>
<template #headerContent>
<div class="header">
<div class="title"> 所有数据质量任务 </div>
<Select
mode="multiple"
:max-tag-count="1"
class="select"
v-model:value="queryParams.searchArea"
:options="searchOptions"
/>
</div>
</template>
<template #footer>
<div class="search">
<div class="query">
<RadioGroup class="group" v-model:value="queryParams.timeType">
<RadioButton class="button" value="调度时间">调度时间</RadioButton>
<RadioButton class="button" value="执行时间">执行时间</RadioButton>
</RadioGroup>
<Select class="select" v-model:value="queryParams.days" :options="daysOptions" />
<div class="label">发布状态</div>
<Select
class="select"
v-model:value="queryParams.uploadStatus"
:options="uploadStatusOptions"
/>
<div class="label">检查结果</div>
<Select class="select" v-model:value="queryParams.result" :options="resultOptions" />
<div class="label">执行模式</div>
<Select class="select" v-model:value="queryParams.runType" :options="runTypeOptions" />
</div>
<div class="extra">
<a-button class="refresh"><SyncOutlined />刷新</a-button>
</div>
</div>
<div class="h-tabs">
<div class="tab-chart"></div>
<div
class="tab-txt"
:class="{ active: checked === index }"
@click="handleTabs(index)"
v-for="(item, index) in headList"
:key="item"
>
<div class="txt-num">
{{ item.num }}
</div>
<div class="txt-des">
<Icon v-if="item.icon" :icon="item.icon" class="des-icon" />
<span class="des-span">
{{ item.des }}
</span>
</div>
</div>
</div>
<div class="detail">
<div class="table">
<div class="column">
<Checkbox class="checkBox" />
<Icon class="icon" />
<div class="txt">
<div class="title">
</div>
<div class="des">
</div>
</div>
<div class="type">
</div>
<div class="num">
</div>
</div>
</div>
</div>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import { Select, RadioGroup, RadioButton, Checkbox } from 'ant-design-vue';
import { SyncOutlined } from '@ant-design/icons-vue';
import {
searchOptions,
daysOptions,
uploadStatusOptions,
resultOptions,
runTypeOptions,
headList,
} from './operationData';
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import { ref } from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { tableListtab1 } from '@/views/auditLog/mock';
import { columns, searchFormSchema } from '@/views/auditLog/audi.data';
// 初始化
const queryParams = ref({
searchArea: [],
timeType: '调度时间',
days: '最近30d',
uploadStatus: '全部',
result: '不限',
runType: '全部',
});
const checked = ref(0);
// 数据
/**
* 方法
*/
// 选中tab标签类型
function handleTabs(index) {
checked.value = index;
// 更新数据
}
/**
* 列表
*/
</script>
<style scoped>
.header {
display: flex;
gap: 10px;
.title {
font-size: 18px;
}
.select {
width: 250px;
}
}
.search {
display: flex;
.query {
display: flex;
gap: 10px;
flex: 1;
.group {
.button {
}
}
.select {
width: 120px;
}
.label {
width: 60px;
display: flex;
align-items: center;
}
}
.extra {
.refresh {
}
}
}
.h-tabs {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px 0;
.tab-chart {
width: 200px;
height: 100px;
}
.tab-txt {
width: 160px;
padding: 10px 0 10px 15px;
cursor: pointer;
.txt-num {
font-size: 20px;
font-weight: bolder;
}
.txt-des {
margin-top: 10px;
}
}
.active {
background-color: #f4f7fb;
border-bottom: 2px solid #319ffd;
}
}
</style>
export const searchOptions = [
{
label: '个人工作区',
value: '个人工作区',
},
{
label: '共享工作区',
value: '共享工作区',
},
];
export const daysOptions = [
{
label: '最近30d',
value: '最近30d',
},
{
label: '最近7d',
value: '最近7d',
},
];
export const uploadStatusOptions = [
{
label: '全部',
value: '全部',
},
{
label: '成功',
value: '成功',
},
{
label: '运行中',
value: '运行中',
},
{
label: '失败',
value: '失败',
},
{
label: '等待',
value: '等待',
},
];
export const resultOptions = [
{
label: '不限',
value: '不限',
},
{
label: '合格',
value: '合格',
},
{
label: '不合格',
value: '不合格',
},
];
export const runTypeOptions = [
{
label: '全部',
value: '全部',
},
{
label: '重跑',
value: '重跑',
},
{
label: '手动执行',
value: '手动执行',
},
];
export const headList = [
{
num: 29,
des: '执行成功',
},
{
num: 10,
des: '成功',
icon: 'ant-design:check-circle-outlined',
},
{
num: 0,
des: '运行中',
icon: 'ant-design:check-circle-outlined',
},
{
num: 19,
des: '失败',
icon: 'ant-design:check-circle-outlined',
},
{
num: 0,
des: '等待',
icon: 'ant-design:check-circle-outlined',
},
];
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