数据源连接页面

src/router/routes/index.ts

@@ -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

+<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

+<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

+<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

 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

@@ -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

@@ -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

@@ -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',