Skip to content

B
bigDataSystem
Commit 7e295b4a authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改API监控

parent 38782e2c
Hide whitespace changes
Inline Side-by-side
Showing with 574 additions and 146 deletions
src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData.ts
View file @ 7e295b4a
import {getAllRoleList} from '@/api/system/role/role'; import { getAllRoleList } from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table'; import { BasicColumn, FormSchema } from '@/components/Table';
import {h} from "vue"; import { h } from 'vue';
import {Tag} from "ant-design-vue"; import { Tag, Switch } from 'ant-design-vue';
import { Switch } from 'ant-design-vue'; import { useMessage } from '@/hooks/web/useMessage';
import {useMessage} from "@/hooks/web/useMessage"; import { changeFlagApi } from '@/api/system/user/user';
import {changeFlagApi} from "@/api/system/user/user"; // 引入开关组件 // 引入开关组件
type CheckedType = boolean | string | number; type CheckedType = boolean | string | number;
export const TreeData: any[] = [ export const TreeData: any[] = [
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 100, businessId: 100,
"institutionName" : "机构管理", institutionName: '机构管理',
"anotherName":"机构管理", anotherName: '机构管理',
"parentId" : 0, parentId: 0,
"code": "DataGovernanceDep_product1", code: 'DataGovernanceDep_product1',
"ancestors" : "0", ancestors: '0',
"orderNum" : 0, orderNum: 0,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 101, businessId: 101,
"institutionName" : "数据平台治理部", institutionName: '数据平台治理部',
"anotherName":"数据平台治理部", anotherName: '数据平台治理部',
"parentId" : 100, parentId: 100,
"code": "DataGovernanceDep_product2", code: 'DataGovernanceDep_product2',
"ancestors" : "0,100", ancestors: '0,100',
"orderNum" : 1, orderNum: 1,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 107, businessId: 107,
"institutionName" : "数据资源管理部", institutionName: '数据资源管理部',
"anotherName":"数据资源管理部", anotherName: '数据资源管理部',
"parentId" : 100, parentId: 100,
"code": "DataGovernanceDep_product3", code: 'DataGovernanceDep_product3',
"ancestors" : "0,100", ancestors: '0,100',
"orderNum" : 2, orderNum: 2,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 102, businessId: 102,
"institutionName" : "研发部门", institutionName: '研发部门',
"anotherName":"研发部门", anotherName: '研发部门',
"parentId" : 101, parentId: 101,
"code": "DataGovernanceDep_product4", code: 'DataGovernanceDep_product4',
"ancestors" : "0,100,101", ancestors: '0,100,101',
"orderNum" : 1, orderNum: 1,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 103, businessId: 103,
"institutionName" : "市场部门", institutionName: '市场部门',
"anotherName":"市场部门", anotherName: '市场部门',
"parentId" : 101, parentId: 101,
"code": "DataGovernanceDep_product5", code: 'DataGovernanceDep_product5',
"ancestors" : "0,100,101", ancestors: '0,100,101',
"orderNum" : 2, orderNum: 2,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 104, businessId: 104,
"institutionName" : "测试部门", institutionName: '测试部门',
"anotherName":"测试部门", anotherName: '测试部门',
"parentId" : 101, parentId: 101,
"code": "DataGovernanceDep_product6", code: 'DataGovernanceDep_product6',
"ancestors" : "0,100,101", ancestors: '0,100,101',
"orderNum" : 3, orderNum: 3,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 105, businessId: 105,
"institutionName" : "财务部门", institutionName: '财务部门',
"anotherName":"财务部门", anotherName: '财务部门',
"parentId" : 101, parentId: 101,
"code": "DataGovernanceDep_product7", code: 'DataGovernanceDep_product7',
"ancestors" : "0,100,101", ancestors: '0,100,101',
"orderNum" : 4, orderNum: 4,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 106, businessId: 106,
"institutionName" : "运维部门", institutionName: '运维部门',
"anotherName":"运维部门", anotherName: '运维部门',
"parentId" : 101, parentId: 101,
"code": "DataGovernanceDep_product8", code: 'DataGovernanceDep_product8',
"ancestors" : "0,100,101", ancestors: '0,100,101',
"orderNum" : 5, orderNum: 5,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "1", flag: '1',
"businessId" : 202, businessId: 202,
"institutionName" : "数据部门", institutionName: '数据部门',
"anotherName":"数据部门", anotherName: '数据部门',
"parentId" : 107, parentId: 107,
"code": "DataGovernanceDep_product9", code: 'DataGovernanceDep_product9',
"ancestors" : "0,100,107", ancestors: '0,100,107',
"orderNum" : 1, orderNum: 1,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
{ {
"delFlag" : "0", delFlag: '0',
"flag" : "0", flag: '0',
"businessId" : 203, businessId: 203,
"institutionName" : "检查部门", institutionName: '检查部门',
"anotherName":"检查部门", anotherName: '检查部门',
"parentId" : 107, parentId: 107,
"code": "DataGovernanceDep_product10", code: 'DataGovernanceDep_product10',
"ancestors" : "0,100,107", ancestors: '0,100,107',
"orderNum" : 2, orderNum: 2,
"children" : [ ], children: [],
"selectType" : null, selectType: null,
icon: 'ion:settings-outline', icon: 'ion:settings-outline',
}, },
]; ];
export const TableData: any[] = [ 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-001',
{gateway: 'gw-003', executor: 'exec-003', caller: 'user-003', startTime: '2024-11-30 13:20:09', consume: '3s'}, executor: 'exec-001',
{gateway: 'gw-004', executor: 'exec-004', caller: 'user-004', startTime: '2024-11-30 13:25:10', consume: '4s'}, caller: 'user-001',
{gateway: 'gw-005', executor: 'exec-005', caller: 'user-005', startTime: '2024-11-30 13:30:11', consume: '5s'}, startTime: '2024-11-30 13:05:05',
{gateway: 'gw-006', executor: 'exec-006', caller: 'user-006', startTime: '2024-11-30 13:35:12', consume: '6s'}, consume: '1s',
{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-002',
{gateway: 'gw-010', executor: 'exec-010', caller: 'user-010', startTime: '2024-11-30 13:55:16', consume: '10s'} 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',
},
];
export const totalApiData = [
{ date: '10/01', value: 3000 },
{ date: '10/02', value: 4000 },
{ date: '10/03', value: 3222 },
{ date: '10/04', value: 4521 },
{ date: '10/05', value: 3552 },
{ date: '10/06', value: 4899 },
{ date: '10/07', value: 4788 },
];
export const totalApiSucessData = [
{ date: '10/01', value: 2212 },
{ date: '10/02', value: 2122 },
{ date: '10/03', value: 2402 },
{ date: '10/04', value: 2468 },
{ date: '10/05', value: 2487 },
{ date: '10/06', value: 2888 },
{ date: '10/07', value: 2322 },
];
export const totalApiFailedData = [
{ date: '10/01', value: 988 },
{ date: '10/02', value: 888 },
{ date: '10/03', value: 788 },
{ date: '10/04', value: 988 },
{ date: '10/05', value: 688 },
{ date: '10/06', value: 788 },
{ date: '10/07', value: 888 },
];
export const totalGetApiData = [
{ date: '10/01', value: 310 },
{ date: '10/02', value: 322 },
{ date: '10/03', value: 420 },
{ date: '10/04', value: 379 },
{ date: '10/05', value: 489 },
{ date: '10/06', value: 499 },
{ date: '10/07', value: 400 },
];
export const totalPostApiData = [
{ date: '10/01', value: 50 },
{ date: '10/02', value: 89 },
{ date: '10/03', value: 78 },
{ date: '10/04', value: 66 },
{ date: '10/05', value: 180 },
{ date: '10/06', value: 99 },
{ date: '10/07', value: 140 },
];
src/views/dataSharingAndExchange/ApiMonitor/RightContent4.vue
View file @ 7e295b4a
<template> <template>
<Card :loading="loading"> <div class="charts-container">
4444 <div class="header">
</Card> <span>API调用统计</span>
</div>
<div class="charts">
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { onMounted } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue'; import * as echarts from 'echarts';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import {
import {} from "./ApiMonitor.data"; totalApiData,
import {} from "./ApiMonitorData"; totalApiFailedData,
import Icon from '@/components/Icon/Icon.vue'; totalApiSucessData,
totalGetApiData,
totalPostApiData,
} from '@/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData';
onMounted(() => {
{
// 获取图表容器
const chart1Container = document.getElementById('chart1');
const chart2Container = document.getElementById('chart2');
// 初始化图表实例
const chart1Instance = echarts.init(chart1Container);
const chart2Instance = echarts.init(chart2Container);
// 设置图表选项
chart1Instance.setOption({
title: {
text: 'API调用统计', // 修改了标题文字
},
legend: {
data: ['总量', '成功', '失败'],
top: '8%', // 图例位置调整
left: '5%',
},
xAxis: {
type: 'category',
boundaryGap: false, // 坐标轴两边留白策略
data: totalApiData.map((item) => item.date), // 假设每个数据点有日期属性
axisLabel: {
rotate: 45, // 旋转x轴标签以避免重叠
},
},
yAxis: {
min: 0,
max: 5000,
splitNumber: 5,
nameTextStyle: {
padding: [0, 0, 10, 0], // 调整y轴名称与轴线的距离
},
},
series: [
{
name: '总量',
type: 'line',
color: '#67a6f1',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(173,204,236,0.8)', // 顶部颜色较深
},
{
offset: 1,
color: 'rgba(173,204,236,0)', // 底部颜色透明
},
],
global: false,
},
},
data: totalApiData.map((item) => item.value),
},
{
name: '成功',
type: 'line',
color: '#6fe3e3',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(153,236,233,0.8)', // 顶部颜色较深
},
{
offset: 1,
color: 'rgba(153,236,233,0)', // 底部颜色透明
},
],
global: false,
},
},
data: totalApiSucessData.map((item) => item.value),
},
{
name: '失败',
type: 'line',
color: '#90ed7d',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(144,237,125,0.8)', // 顶部颜色较深
},
{
offset: 1,
color: 'rgba(144,237,125,0)', // 底部颜色透明
},
],
global: false,
},
},
data: totalApiFailedData.map((item) => item.value),
},
],
});
chart2Instance.setOption({
title: {
text: '请求方式调用量', // 修改了标题文字
},
legend: {
data: ['Get', 'Post'],
top: '8%', // 图例位置调整
left: '5%',
},
xAxis: {
type: 'category',
boundaryGap: false, // 坐标轴两边留白策略
data: totalApiData.map((item) => item.date), // 假设每个数据点有日期属性
axisLabel: {
rotate: 45, // 旋转x轴标签以避免重叠
},
},
yAxis: {
min: 0,
max: 500,
splitNumber: 5,
nameTextStyle: {
padding: [0, 0, 10, 0], // 调整y轴名称与轴线的距离
},
},
series: [
{
name: 'Get',
type: 'line',
color: '#f3a770',
areaStyle: {
color: {
type: 'linear', // 渐变类型，可选 'linear' 或 'radial'
x: 0, // 渐变起始位置，x轴方向
y: 0, // 渐变起始位置，y轴方向
x2: 0, // 渐变结束位置，x轴方向
y2: 1, // 渐变结束位置，y轴方向
colorStops: [
// 颜色停止位
{
offset: 0,
color: 'rgba(246,208,170,0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(246,208,170,0)', // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: totalGetApiData.map((item) => item.value),
},
{
name: 'Post',
type: 'line',
color: '#ce9be5',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(212,184,229,0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(212,184,229,0)', // 100% 处的颜色
},
],
global: false,
},
},
data: totalPostApiData.map((item) => item.value),
},
],
});
}
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.charts-container {
background-color: white; /* 设置容器背景为白色 */
padding: 20px; /* 给容器添加内边距 */
border-radius: 10px; /* 可选：给容器添加圆角 */
width: 100%; /* 确保容器宽度适应父级元素 */
}
.header {
font-size: 20px;
margin-bottom: 20px;
text-align: left;
color: #333;
}
.charts {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart {
width: calc(50% - 10px); /* 确保两个图表并排显示 */
height: 400px;
background-color: transparent; /* 使图表的背景透明 */
}
</style> </style>
src/views/dataSharingAndExchange/ApiMonitor/RightContent5.vue
View file @ 7e295b4a
<template> <template>
<Card :loading="loading"> <div class="charts-container">
5555 <div class="header">
</Card> <span>API调用统计</span>
</div>
<div class="charts">
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import { onMounted } from 'vue';
import { Tag, Card,Select } from 'ant-design-vue'; import * as echarts from 'echarts';
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { fieldChangeData, tableChangeData } from '@/views/metadata/metadataData';
import {} from "./ApiMonitor.data";
import {} from "./ApiMonitorData";
import Icon from '@/components/Icon/Icon.vue';
onMounted(() => {
{
// 获取图表容器
const chart3Container = document.getElementById('chart3');
const chart4Container = document.getElementById('chart4');
// 初始化图表实例
const chart3Instance = echarts.init(chart3Container);
const chart4Instance = echarts.init(chart4Container);
// 设置图表选项
chart3Instance.setOption({
title: {
text: '数据表变更趋势图',
},
tooltip: {},
xAxis: {
data: tableChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
max: 250,
splitNumber: 5,
},
series: [
{
name: '数据表变更',
type: 'line',
color: '#cacaec',
areaStyle: { color: '#dcd4ec' },
data: tableChangeData.map((item) => item.value),
},
],
});
chart4Instance.setOption({
title: {
text: '字段变更趋势图',
},
tooltip: {},
xAxis: {
// axisLabel: {
// interval: 0, // 强制显示所有标签
// },
data: fieldChangeData.map((item) => item.date),
boundaryGap: false, // 数据点与标签对齐
},
yAxis: {
min: 0, // 设置 Y 轴的最小值
// max: 1000,
splitNumber: 5,
},
series: [
{
name: '字段变更',
type: 'line',
color: '#f9e1c1',
areaStyle: { color: '#fbf0e0' },
data: fieldChangeData.map((item) => item.value),
},
],
});
}
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.charts-container {
background-color: white; /* 设置容器背景为白色 */
padding: 20px; /* 给容器添加内边距 */
border-radius: 10px; /* 可选：给容器添加圆角 */
width: 100%; /* 确保容器宽度适应父级元素 */
}
.header {
font-size: 20px;
margin-bottom: 20px;
text-align: left;
color: #333;
}
.charts {
display: flex;
justify-content: space-between;
gap: 20px;
}
.chart {
width: calc(50% - 10px); /* 确保两个图表并排显示 */
height: 400px;
background-color: transparent; /* 使图表的背景透明 */
}
</style> </style>
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