Skip to content

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

新建了API监控页面

parent 5a7e64aa
Hide whitespace changes
Inline Side-by-side
Showing with 540 additions and 8 deletions
src/views/dataSharingAndExchange/ApiMonitor/ApiMonitor.data.ts 0 → 100644
View file @ eba85597
import {getAllRoleList} from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import {h} from "vue";
import {Tag} from "ant-design-vue";
import { Switch } from 'ant-design-vue';
import {useMessage} from "@/hooks/web/useMessage";
import {changeFlagApi} from "@/api/system/user/user"; // 引入开关组件
type CheckedType = boolean | string | number;
export const columns1: BasicColumn[] = [
{
title: 'gateway',
dataIndex: 'gateway',
width: 150,
},
{
title: 'executor',
dataIndex: 'executor',
width: 150,
},
{
title: '调用者',
dataIndex: 'caller',
width: 150,
},
{
title: '开始时间',
dataIndex: 'startTime',
width: 150,
},
{
title: '已耗时',
dataIndex: 'consume',
width: 150,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'callBy',
label: '调用者',
component: 'Select',
labelWidth:50,
componentProps: {
options:[
{
label:'admin',
value:'admin'
},
],
placeholder: '请选择调用者',
},
colProps: { lg: 5, md: 24 },
},
{
field: 'callTime',
label: ' 调用时间',
labelWidth:100,
component: 'DatePicker',
colProps: { lg: 7, md: 24 },
},
];
src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData.ts 0 → 100644
View file @ eba85597
import {getAllRoleList} from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import {h} from "vue";
import {Tag} from "ant-design-vue";
import { Switch } from 'ant-design-vue';
import {useMessage} from "@/hooks/web/useMessage";
import {changeFlagApi} from "@/api/system/user/user"; // 引入开关组件
type CheckedType = boolean | string | number;
export const TreeData: any[] = [
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 100,
"institutionName" : "机构管理",
"anotherName":"机构管理",
"parentId" : 0,
"code": "DataGovernanceDep_product1",
"ancestors" : "0",
"orderNum" : 0,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 101,
"institutionName" : "数据平台治理部",
"anotherName":"数据平台治理部",
"parentId" : 100,
"code": "DataGovernanceDep_product2",
"ancestors" : "0,100",
"orderNum" : 1,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 107,
"institutionName" : "数据资源管理部",
"anotherName":"数据资源管理部",
"parentId" : 100,
"code": "DataGovernanceDep_product3",
"ancestors" : "0,100",
"orderNum" : 2,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 102,
"institutionName" : "研发部门",
"anotherName":"研发部门",
"parentId" : 101,
"code": "DataGovernanceDep_product4",
"ancestors" : "0,100,101",
"orderNum" : 1,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 103,
"institutionName" : "市场部门",
"anotherName":"市场部门",
"parentId" : 101,
"code": "DataGovernanceDep_product5",
"ancestors" : "0,100,101",
"orderNum" : 2,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 104,
"institutionName" : "测试部门",
"anotherName":"测试部门",
"parentId" : 101,
"code": "DataGovernanceDep_product6",
"ancestors" : "0,100,101",
"orderNum" : 3,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 105,
"institutionName" : "财务部门",
"anotherName":"财务部门",
"parentId" : 101,
"code": "DataGovernanceDep_product7",
"ancestors" : "0,100,101",
"orderNum" : 4,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 106,
"institutionName" : "运维部门",
"anotherName":"运维部门",
"parentId" : 101,
"code": "DataGovernanceDep_product8",
"ancestors" : "0,100,101",
"orderNum" : 5,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "1",
"businessId" : 202,
"institutionName" : "数据部门",
"anotherName":"数据部门",
"parentId" : 107,
"code": "DataGovernanceDep_product9",
"ancestors" : "0,100,107",
"orderNum" : 1,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
{
"delFlag" : "0",
"flag" : "0",
"businessId" : 203,
"institutionName" : "检查部门",
"anotherName":"检查部门",
"parentId" : 107,
"code": "DataGovernanceDep_product10",
"ancestors" : "0,100,107",
"orderNum" : 2,
"children" : [ ],
"selectType" : null,
icon: 'ion:settings-outline',
},
];
export const TableData: any[] = [
{gateway: 'gw-001', executor: 'exec-001', caller: 'user-001', startTime: '2024-11-30 13:05:05', consume: '1s'},
{gateway: 'gw-002', executor: 'exec-002', caller: 'user-002', startTime: '2024-11-30 13:10:08', consume: '2s'},
{gateway: 'gw-003', executor: 'exec-003', caller: 'user-003', startTime: '2024-11-30 13:20:09', consume: '3s'},
{gateway: 'gw-004', executor: 'exec-004', caller: 'user-004', startTime: '2024-11-30 13:25:10', consume: '4s'},
{gateway: 'gw-005', executor: 'exec-005', caller: 'user-005', startTime: '2024-11-30 13:30:11', consume: '5s'},
{gateway: 'gw-006', executor: 'exec-006', caller: 'user-006', startTime: '2024-11-30 13:35:12', consume: '6s'},
{gateway: 'gw-007', executor: 'exec-007', caller: 'user-007', startTime: '2024-11-30 13:40:13', consume: '7s'},
{gateway: 'gw-008', executor: 'exec-008', caller: 'user-008', startTime: '2024-11-30 13:45:14', consume: '8s'},
{gateway: 'gw-009', executor: 'exec-009', caller: 'user-009', startTime: '2024-11-30 13:50:15', consume: '9s'},
{gateway: 'gw-010', executor: 'exec-010', caller: 'user-010', startTime: '2024-11-30 13:55:16', consume: '10s'}
]
src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorTree.vue 0 → 100644
View file @ eba85597
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
title="API监控"
ref="treeRef"
toolbar
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'institutionName' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import {h, nextTick, onMounted, ref, unref} from 'vue';
import {BasicTree, TreeActionItem, TreeActionType, TreeItem} from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import {Nullable} from "@vben/types";
import { TreeData } from "@/views/system/institution/institutionData";
import {Modal} from "ant-design-vue";
import { useMessage } from '@/hooks/web/useMessage';
import {useModal} from "@/components/Modal";
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const { createMessage } = useMessage();
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
const [registerModal, { openModal }] = useModal();
const [registerMoveTreeModel, { openModal:openMoveTreeModel }] = useModal();
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function fetch() {
const data = TreeData
treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
await nextTick(() => {
getTree().expandAll(true)
})
}
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
// 循环所有项
const treeData = cloneData.filter(father => {
const branchArr = cloneData.filter(child => {
// 返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? father.children = branchArr : ''
// 返回第一层
return father[parentId] === rootId
})
return treeData !== '' ? treeData : data
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
/** 成功回调函数*/
function handleSuccess() {
}
</script>
src/views/dataSharingAndExchange/ApiMonitor/RightContent1.vue 0 → 100644
View file @ eba85597
<template>
<div class="center">
<div style="display: flex;justify-content: space-between;margin-left: 10px;padding-top: 10px">
<div style="display: flex">
<Icon icon="dashicons:admin-plugins" style="color: rgb(22, 179, 197);font-size: 30px"></Icon>
<div>
<span style="font-weight: bold">供电单位用电量</span><br>
<span>API监控/市场营销/供电单位用电量</span>
</div>
</div>
<div>
<a-button type="primary" style="margin-right: 10px">API详情</a-button>
<a-button type="primary" style="margin-right: 10px">API Doc</a-button>
</div>
</div>
<Alert
style="margin-top: 10px;margin-bottom: 10px"
show-icon
type="info"
message="此处仅展示拉取数据模式的API调用情况。"
/>
<BasicTable @register="registerTable">
<template #headerTop>
<BasicForm @register="registerForm" />
</template>
<!-- <template #bodyCell="{ column, record }">-->
<!-- <template v-if="column.key === 'action'">-->
<!-- <TableAction-->
<!-- :actions="[-->
<!-- {-->
<!-- icon: 'ant-design:delete-outlined',-->
<!-- color: 'error',-->
<!-- popConfirm: {-->
<!-- title: '是否确认删除',-->
<!-- placement: 'left',-->
<!-- confirm: deleteButton.bind(null, record),-->
<!-- },-->
<!-- },-->
<!-- ]"-->
<!-- />-->
<!-- </template>-->
<!-- </template>-->
</BasicTable>
</div>
</template>
<script lang="ts" setup>
import { CountTo } from '@/components/CountTo';
import Icon from '@/components/Icon/Icon.vue';
import { Tag, Card,Select,Alert } from 'ant-design-vue';
import { reactive,unref,onDeactivated,onMounted,ref,watch,Ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {columns1,searchFormSchema} from "./ApiMonitor.data";
import {TableData} from "./ApiMonitorData";
import { BasicForm, useForm } from '@/components/Form';
defineProps({
loading: {
type: Boolean,
},
});
const [registerForm, { resetFields }] = useForm({
labelAlign: 'right',
labelWidth: 50,
baseColProps: { lg: 12, md: 24 },
schemas: searchFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [registerTable] = useTable({
title: '执行中请求',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: TableData.length,
code:'',
message:'',
data: [],
};
return { ...response,data: TableData };
},
columns:columns1,
pagination:true,
useSearchForm: false,
showTableSetting: false,
showIndexColumn:false,
bordered: true,
scroll: { y: 500 },
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
},
});
function deleteButton(){
}
</script>
<style lang="less" scoped>
.card{
::v-deep(.ant-card-body){
width: 100%;
display: flex;
}
}
.center{
width: 100%;
height:800px;
background-color: white;
}
</style>
src/views/dataSharingAndExchange/ApiMonitor/RightContent2.vue 0 → 100644
View file @ eba85597
<template>
<Card :loading="loading">
2222
</Card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {} from "./ApiMonitor.data";
import {} from "./ApiMonitorData";
import Icon from '@/components/Icon/Icon.vue';
</script>
<style lang="less" scoped>
</style>
src/views/dataSharingAndExchange/ApiMonitor/RightContent3.vue 0 → 100644
View file @ eba85597
<template>
<Card :loading="loading">
333
</Card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {} from "./ApiMonitor.data";
import {} from "./ApiMonitorData";
import Icon from '@/components/Icon/Icon.vue';
</script>
<style lang="less" scoped>
</style>
src/views/dataSharingAndExchange/ApiMonitor/RightContent4.vue 0 → 100644
View file @ eba85597
<template>
<Card :loading="loading">
4444
</Card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {} from "./ApiMonitor.data";
import {} from "./ApiMonitorData";
import Icon from '@/components/Icon/Icon.vue';
</script>
<style lang="less" scoped>
</style>
src/views/dataSharingAndExchange/ApiMonitor/RightContent5.vue 0 → 100644
View file @ eba85597
<template>
<Card :loading="loading">
5555
</Card>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import {} from "./ApiMonitor.data";
import {} from "./ApiMonitorData";
import Icon from '@/components/Icon/Icon.vue';
</script>
<style lang="less" scoped>
</style>
src/views/dataSharingAndExchange/ApiMonitor/index.vue
View file @ eba85597
<template> <template>
<div>11111</div> <PageWrapper contentClass="flex">
<ApiMonitorTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<div class="p-4 w-3/4 xl:w-4/5">
<RightContent1 :loading="loading" class="enter-y" />
<RightContent2 class="!my-4 w-full" :loading="loading" />
<RightContent3 class="!my-4 !md:my-0 !my-4 w-full" :loading="loading" />
<RightContent4 class="!my-4 w-full" :loading="loading" />
<RightContent5 class="!my-4 !md:my-0 w-full" :loading="loading" />
</div>
</PageWrapper>
</template> </template>
<script lang="ts" setup>
import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import ApiMonitorTree from './ApiMonitorTree.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import { useGo } from '@/hooks/web/usePage';
import { useRoute,onBeforeRouteLeave } from 'vue-router';
import {forEach} from "lodash-es";
import RightContent1 from './RightContent1.vue';
import RightContent3 from './RightContent3.vue';
import RightContent2 from './RightContent2.vue';
import RightContent4 from './RightContent4.vue';
import RightContent5 from './RightContent5.vue';
defineOptions({ name: 'AccountManagement' });
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const go = useGo();
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style> onMounted(() => {
});
</script>
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