Skip to content

B
bigDataSystem
Commit 68b57c64 authored by liwei's avatar liwei
Browse files
Options

数据源连接页面

parent 6fadeab3
Hide whitespace changes
Inline Side-by-side
Showing with 577 additions and 16 deletions
src/router/routes/index.ts
View file @ 68b57c64
......@@ -82,6 +82,29 @@ export const mainBodyRoute: AppRouteRecordRaw = {
],
};
export const DataSourceRoute: AppRouteRecordRaw = {
path: '/dataSourceManage',
name: 'dataSourceManage',
component: LAYOUT,
meta: {
title: '数据源',
icon: '',
hidden: true,
currentActiveMenu: '/mainBody/index',
},
children: [
{
path: 'connect/CollectRecordModal',
name: 'collectRecordModal',
component: () => import('@/views/dataSourceManage/connect/CollectRecordModal.vue'),
meta: {
title: '日志详情',
icon: '',
},
},
],
};
export const UserRoute: AppRouteRecordRaw = {
path: '/user',
......@@ -251,6 +274,7 @@ export const basicRoutes = [
WorkSpaceRoute,
CommonFileRoute,
ModelRoute,
DataSourceRoute,
// RootRoute,
...mainOutRoutes,
REDIRECT_ROUTE,
......
src/views/dataSourceManage/connect/CollectRecordModal.vue 0 → 100644
View file @ 68b57c64
<template>
<PageWrapper
title="日志详情"
class="content-padding"
contentBackground
@back="goBack"
>
<template #footer>
<div style="display: flex">
<div style="font-size: 25px;margin-bottom: 5px;">
<Icon icon="ion:layers-outline" :size="30" :color="'#1091FE'" />
inceptor-0.12.0-afa6bbfb78asdf78978sd7a8s7das7d8as7d89
</div>
<div style="margin-left: 10px;font-size: 10px;margin-top: 15px;font-weight: bold;">
<Icon icon="ant-design:check-circle-outlined" :size="15" :color="'#1091FE'" />
执行成功
</div>
</div>
<Description
size="middle"
:bordered="false"
:column="3"
:data="formData"
:schema="recordFormSchema"
/>
</template>
<RecordTable @register="registerTableModal" @success="handleSuccess"/>
</PageWrapper>
</template>
<script lang="ts" setup>
import {BasicForm, useForm} from '@/components/Form';
import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { useGo } from '@/hooks/web/usePage';
import { useRoute } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import {router} from "@/router";
import RecordTable from './RecordTable.vue';
import {formSchema, recordFormSchema} from "@/views/dataSourceManage/connect/connect.data";
import { recordData } from "@/views/dataSourceManage/connect/connectData";
import { Description } from '@/components/Description';
import Icon from "@/components/Icon/Icon.vue";
import {formatData} from "@logicflow/core/types/util/compatible";
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerModal, { openModal }] = useModal();
const [registerAddUserModal, { openModal:addUserModal }] = useModal();
const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const formData = ref({});
/** 保存*/
function save() {
createMessage.success('保存成功!')
}
/** 添加类别*/
function handleCreateType() {
openModal(true, {
});
}
/** 取消*/
function cancel() {
go('/metaModel/physicsModel/index');
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
}
onMounted(() => {
const data = {
connectName: route.query.connectName,
connectType: route.query.connectType,
connectString: route.query.connectString,
driveVersion: route.query.driveVersion,
collectionRate: route.query.collectionRate,
createTime: route.query.createDate,
updateTime: route.query.updateDate,
implementor: route.query.implementor,
collectionType: route.query.collectionType,
}
formData.value = data
console.log('formData.value:',formData.value)
});
// 页面左侧点击返回链接时的操作
function goBack() {
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
go('/dataSourceManage/connect');
}
</script>
<style>
.height1 {
.ant-table-container {
.ant-table-body {
min-height: 750px;
}
}
}
.height2 {
.ant-table-container {
.ant-table-body {
min-height: 300px;
}
}
}
.height3 {
.ant-table-container {
.ant-table-body {
min-height: 500px;
}
}
}
.height4 {
.ant-table-container {
.ant-table-body {
min-height: 400px;
}
}
}
</style>
src/views/dataSourceManage/connect/OnlineExecuteModal.vue 0 → 100644
View file @ 68b57c64
<template>
<!-- 数据源-连接-新增或修改 弹窗 -->
<BasicModal
v-bind="$attrs"
@register="registerModal"
showFooter
:title="getTitle"
width="35%"
@ok="handleSubmit"
>
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {BasicForm, useForm} from '@/components/Form';
import {useModalInner} from '@/components/Modal';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import {useMessage} from "@/hooks/web/useMessage";
import {kbr5FormSchema, onlineCollectionFormSchema} from "@/views/dataSourceManage/connect/connect.data";
defineOptions({name: 'ConnectDrawer'});
const emit = defineEmits(['success', 'register']);
const {createMessage} = useMessage();
// 初始化弹窗
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
resetFields();
setModalProps({loading: false, confirmLoading: false});
setFieldsValue({
...data.record
});
});
const [registerForm, {resetFields, setFieldsValue, validate, setProps}] = useForm({
labelWidth: 90,
baseColProps: {span: 24},
schemas: onlineCollectionFormSchema,
showActionButtonGroup: false,
});
const getTitle = ref('执行');
/** 确认按钮 */
async function handleSubmit() {
const values = await validate();
createMessage.success('新增成功！')
closeModal()
}
</script>
src/views/dataSourceManage/connect/RecordTable.vue 0 → 100644
View file @ 68b57c64
<template>
<BasicTable @register="registerTable4">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '查看日志',
onClick: LookRecordButton.bind(null, record),
},
{
label: '下载日志',
onClick: downloadRecordButton.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</template>
<script lang="ts" setup>
import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import {columns, recordTableColumns, searchFormSchema} from './connect.data';
import {connectListData, recordTableData} from './connectData';
import { useGo } from '@/hooks/web/usePage';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { Button, Radio } from 'ant-design-vue';
import {exportUserList} from "@/api/system/user/user";
import {downloadByData} from "@/utils/file/download";
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const go = useGo();
const [registerModal, { openModal }] = useModal();
const [registerAddUserModal, { openModal:addUserModal }] = useModal();
const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([])
const show = ref(true); // 默认展示内容
const [registerTable4, { reload,getForm }] = useTable({
title: '数据库信息',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableData.value.length,
code:'',
message:'',
data: [],
};
//按照部门筛选 如果有进行过滤相应部门的 没有就赋值全部
return { ...response, data: tableData.value };
},
columns:recordTableColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
},
rowKey: 'id',
rowSelection: true,
useSearchForm: true,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
actionColumn: {
width: 150,
title: '操作',
dataIndex: 'action',
},
});
/** 删除按钮*/
function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
}
/** 查看按钮*/
function LookRecordButton() {
}
/** 下载按钮*/
async function downloadRecordButton() {
const params = Object.assign({}, {}, getForm().getFieldsValue());
const data = await exportUserList(params);
downloadByData(data, '日志信息' + '.xlsx');
}
/**新增属性*/
function addProperty() {
const data = {
"businessId" : '',
"name" : "",
"description": '',
"englishName": '',
"isWrite": '0',
"isShow": '0',
"type": '1',
}
tableData.value.push(data)
reload()
}
onMounted(() => {
tableData.value = recordTableData
});
// 页面左侧点击返回链接时的操作
function goBack() {
// 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
go('/metaModel/physicsModel/index');
}
</script>
src/views/dataSourceManage/connect/connect.data.ts
View file @ 68b57c64
import {BasicColumn, FormSchema} from "@/components/Table";
import {uploadApi} from "@/api/sys/upload";
import {DescItem} from "@/components/Description";
// 搜索栏参数
export const searchFormSchema: FormSchema[] = [
......@@ -214,6 +215,10 @@ export const kbr5FormSchema: FormSchema[any] = [
label: '默认kbr5文件路径',
component: 'Input',
required: true,
defaultValue: 'krb5.conf',
componentProps: {
disabled: true,
},
labelWidth: 150,
},
{
......@@ -256,3 +261,151 @@ export const dataRelativeColumns: BasicColumn[any] = [
width: 150,
},
];
// 日志表单表头
export const recordFormSchema: DescItem[any] = [
{
field: 'connectName',
label: '连接名称',
component: 'Input',
colProps: {span: 7},
},
{
field: 'connectType',
label: '连接类型',
component: 'Input',
colProps: {span: 7},
},
{
field: 'connectString',
label: '连接字符串',
component: 'Input',
colProps: {span: 7},
},
{
field: 'driveVersion',
label: '驱动版本',
component: 'Input',
colProps: {span: 7},
},
{
field: 'collectionRate',
label: '采集频率',
component: 'Input',
colProps: {span: 7},
},
{
field: 'createTime',
label: '创建时间',
component: 'Input',
colProps: {span: 7},
},
{
field: 'updateTime',
label: '最近修改时间',
component: 'Input',
colProps: {span: 7},
},
{
field: 'implementor',
label: '执行人',
component: 'Input',
colProps: {span: 7},
},
{
field: 'collectionType',
label: '采集类型',
component: 'Input',
colProps: {span: 7},
},
]
// 日志列表表头
export const recordTableColumns: BasicColumn[any] = [
{
title: '数据库',
dataIndex: 'dataBase',
width: 150,
},
{
title: '节点',
dataIndex: 'node',
width: 150,
},
{
title: '开始时间',
dataIndex: 'startTime',
width: 150,
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 150,
},
{
title: '耗时',
dataIndex: 'consumeTime',
width: 150,
},
{
title: '采集状态',
dataIndex: 'collectionStatus',
width: 150,
},
{
title: '数据库表总数',
dataIndex: 'dataTableNum',
width: 150,
},
{
title: '采集表总数',
dataIndex: 'collectionTableNum',
width: 150,
},
{
title: '新增表总数',
dataIndex: 'addTableNum',
width: 150,
},
{
title: '删除表总数',
dataIndex: 'deleteTableNum',
width: 150,
},
{
title: '更新表总数',
dataIndex: 'updateTableNum',
width: 150,
},
{
title: '未采集表总数',
dataIndex: 'noCollectTableNum',
width: 150,
},
];
// 执行在线采集表单
export const onlineCollectionFormSchema: FormSchema[any] = [
{
field: 'executeStyle',
component: 'RadioGroup',
label: '执行方式',
required: true,
componentProps: {
options: [
{
label: '当前采集范围',
value: '1',
},
{
label: '自定义采集范围',
value: '2',
},
{
label: '表采集',
value: '3',
},
],
},
},
]
src/views/dataSourceManage/connect/connectData.ts
View file @ 68b57c64
......@@ -17,7 +17,9 @@ export const connectListData: any[] = [
"createDate": "2024-10-24 10:04:04",
"updateBy": "admin",
"updateDate": "2024-10-24 10:04:04",
"hdfsMap":"hive"
"hdfsMap":"hive",
"implementor":'admin',
"collectionRate":'正常'
},
{
"id": 1,
......@@ -36,7 +38,9 @@ export const connectListData: any[] = [
"createDate": "2024-10-24 10:04:04",
"updateBy": "admin",
"updateDate": "2024-10-24 10:04:04",
"hdfsMap":"hive"
"hdfsMap":"hive",
"implementor":'admin',
"collectionRate":'正常'
},
{
"id": 2,
......@@ -46,7 +50,7 @@ export const connectListData: any[] = [
"authStatus": "未认证",
"foundDataSource": 12,
"executionState": "执行成功",
"collectionType": "不采集",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "mysql8",
"delFlag": "0",
......@@ -55,8 +59,11 @@ export const connectListData: any[] = [
"createDate": "2024-10-25 11:05:05",
"updateBy": "admin",
"updateDate": "2024-10-25 11:05:05",
"hdfsMap":"hive"
"hdfsMap":"hive",
"implementor":'admin',
"collectionRate":'正常'
},
{
"id": 4,
"connectName": "oracle",
......@@ -64,8 +71,8 @@ export const connectListData: any[] = [
"connectType": "ORACLE",
"authStatus": "未认证",
"foundDataSource": 10,
"executionState": "执行失败",
"collectionType": "不采集",
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "oracle11",
"delFlag": "0",
......@@ -74,7 +81,9 @@ export const connectListData: any[] = [
"createDate": "2024-10-27 13:07:07",
"updateBy": "admin",
"updateDate": "2024-10-27 13:07:07",
"hdfsMap":"hive"
"hdfsMap":"hive",
"implementor":'admin',
"collectionRate":'正常'
},
{
"id": 5,
......@@ -93,7 +102,9 @@ export const connectListData: any[] = [
"createDate": "2024-10-28 14:08:08",
"updateBy": "admin",
"updateDate": "2024-10-28 14:08:08",
"hdfsMap":"hive"
"hdfsMap":"hive",
"implementor":'admin',
"collectionRate":'正常'
}
];
......@@ -247,3 +258,35 @@ export const dataSourceRelativeData: any[] = [
"areaName":'共享工作区',
},
];
//日志表头数据
export const recordData = {
connectName: 'incepror-0.12.0-87897878dasdasdasd789d7',
connectType: 'INCEPTOR',
connectString: 'jdbc:hive2://172.26.5.37:10000/default',
driveVersion: 'inceptor-0.12.0',
collectionRate: '',
createTime: '2023-11-16 10:34:35',
updateTime: '2023-11-16 10:34:35',
implementor: 'admin',
collectionType: '详细元数据',
};
//查看日志里的表数据
export const recordTableData: any[] = [
{
"id":'1',
"dataBase":'zhf',
"node":'node214',
"startTime":'2022-11-11',
"endTime":'2022-11-13',
"consumeTime":'7 seconds',
"collectionStatus":'执行成功',
"dataTableNum":'11',
"collectionTableNum":'2',
"addTableNum":'1',
"deleteTableNum":'1',
"updateTableNum":'0',
"noCollectTableNum":'9',
},
];
src/views/dataSourceManage/connect/index.vue
View file @ 68b57c64
......@@ -40,7 +40,7 @@
{
icon: 'ant-design:caret-right-filled',
// label: '执行',
onClick: handleConnect.bind(null, record),
onClick: handleExecute.bind(null, record),
},
{
icon: 'ant-design:step-forward-filled',
......@@ -48,7 +48,7 @@
onClick: handleStopConnect.bind(null, record),
},
{
icon: 'clarity:info-standard-line',
icon: 'ant-design:save-outlined',
// label: '采集详情',
onClick: handleDetails.bind(null, record),
},
......@@ -60,7 +60,7 @@
<!-- Krb5管理 弹窗 -->
<KrbFiveModal @register="registerKrbFiveModal" @success="handleSuccess"/>
<!-- 驱动管理 弹窗 -->
<DriveModal @register="registerDriveModal"/>
<TableModal @register="registerDriveModal"/>
<!-- 新增或修改 弹窗 -->
<ConnectModal @register="registerConnectModal" @success="handleSuccess"/>
<!-- 重命名 弹窗 -->
......@@ -69,6 +69,8 @@
<krb5Modal @register="registerKrb5Modal" @success="handleSuccess"/>
<!-- 数据源关联 弹窗 -->
<DataRelativeModal @register="registerDataRelativeModal" @success="handleSuccess"/>
<!-- 在线执行 弹窗 -->
<OnlineExecuteModal @register="registerOnlineExecuteModal" @success="handleSuccess"/>
</PageWrapper>
</template>
<script lang="ts" setup>
......@@ -84,11 +86,14 @@
import {fileData, TreeData} from "@/views/commonFile/commonFileData";
import {connectListData} from "@/views/dataSourceManage/connect/connectData";
import KrbFiveModal from "@/views/dataSourceManage/driveManage/KrbFiveModal.vue";
import DriveModal from "@/views/dataSourceManage/driveManage/TableModal.vue";
import TableModal from "@/views/dataSourceManage/driveManage/TableModal.vue";
import ConnectModal from "@/views/dataSourceManage/connect/ConnectModal.vue";
import ResetNameModal from "@/views/dataSourceManage/connect/resetNameModal.vue";
import Krb5Modal from "@/views/dataSourceManage/connect/Krb5Modal.vue";
import DataRelativeModal from "@/views/dataSourceManage/connect/DataRelativeModal.vue";
import CollectRecordModal from "@/views/dataSourceManage/connect/CollectRecordModal.vue";
import OnlineExecuteModal from "@/views/dataSourceManage/connect/OnlineExecuteModal.vue";
import {router} from "@/router";
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
......@@ -101,6 +106,7 @@
const [registerConnectModal, {openModal: openConnectModal}] = useModal();
const [registerKrb5Modal, {openModal: openKrb5Modal}] = useModal();
const [registerDataRelativeModal, {openModal: openDataRelativeModal}] = useModal();
const [registerOnlineExecuteModal, {openModal: openOnlineExecuteModal}] = useModal();
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '',
api: async (params) => {
......@@ -143,6 +149,13 @@
},
});
/** 在线执行 按钮 */
function handleExecute(data) {
openOnlineExecuteModal(true, {
});
}
/** Krb5管理 按钮 */
function handleKrbFiveManage() {
openKrb5Modal(true, {});
......@@ -214,9 +227,20 @@
/** 查看详情 按钮 */
function handleDetails(record: Recordable) {
openKrb5Modal(true, {
isUpdate: true,
record
console.log('查看详情', record)
router.push({
path: '/dataSourceManage/connect/CollectRecordModal',
query: {
connectName: record.connectName,
connectType: record.connectType,
connectString: record.connectString,
driveVersion: record.driveVersion,
collectionRate: record.collectionRate,
createDate: record.createDate,
updateDate: record.updateDate,
implementor: record.implementor,
collectionType: record.collectionType,
},
});
}
......
src/views/dataSourceManage/driveManage/drive.data.ts
View file @ 68b57c64
......@@ -105,9 +105,18 @@ export const driveFormSchema: FormSchema[any] = [
{
field: 'driveType',
label: '驱动类型',
component: 'Input',
component: 'Select',
required: true,
labelWidth: 150,
componentProps: {
options: [
{ label: 'Inceptor', value: 'Inceptor' },
{ label: 'mysql', value: 'mysql' },
{ label: 'hive', value: 'hive' },
{ label: 'oracle', value: 'oracle' },
{ label: 'sqlserver', value: 'sqlserver' },
]
}
},
{
field: 'driveVersion',
......
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