Skip to content

B
bigDataSystem
Commit e4ec2448 authored by 曹泽华's avatar 曹泽华
Browse files
Options

数据服务 概览

parent ceeb52ed
Hide whitespace changes
Inline Side-by-side
Showing with 998 additions and 20 deletions
src/views/dataService/Overview/index.vue
View file @ e4ec2448
<template>
<PageWrapper>
</PageWrapper>
<div class="backcolor" style="margin-top: -10px">
<div class="serviceTitle" style="margin-top: 0">API统计</div>
<div style="display: flex; justify-content: center">
<div
style="
display: flex;
margin-bottom: 20px;
width: 310px;
height: 110px;
background-color: #f9fafb;
"
>
<div style="margin: 10px 10px"><Icon size="40px" icon="ion:cube-outline" /></div>
<div>
<div style="margin: 10px 10px; font-weight: bold">API</div>
<div style="display: flex">
<div style="margin: 10px 10px 0">API总量</div>
<div style="margin: 10px 30px 0">已使用API</div>
</div>
<div style="display: flex">
<div style="margin-left: 10px; font-size: 20px; font-weight: bold">{{ apiNum }}</div>
<div style="margin-left: 80px; font-size: 20px; font-weight: bold">{{ useAPI }}</div>
</div>
</div>
</div>
<div
style="
display: flex;
width: 310px;
height: 110px;
background-color: #f9fafb;
margin-left: 20px;
"
>
<div style="margin: 10px 10px"><Icon size="40px" icon="ion:cube-outline" /></div>
<div>
<div style="margin: 10px 10px; font-weight: bold">API上线</div>
<div style="display: flex">
<div style="margin: 10px 10px 0">开发中</div>
<div style="margin: 10px 30px 0">未上线</div>
<div style="margin: 10px 30px 0">已上线</div>
</div>
<div style="display: flex">
<div style="margin-left: 10px; font-size: 20px; font-weight: bold">{{
isDevelop
}}</div>
<div style="margin-left: 80px; font-size: 20px; font-weight: bold">{{
noOnline
}}</div>
<div style="margin-left: 80px; font-size: 20px; font-weight: bold">{{
isOnline
}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="backcolor backcolor1">
<div class="serviceTitle">流量统计</div>
<div>
<Row :gutter="24">
<Col :span="8">
<div class="borderCol">实时总流量</div>
<div style="margin-top: 10px; width: 100%; height: 100%; text-align: center">
<img src="../../../assets/images/serviceMinotor.png" style="width: 68%" />
<div style="font-size: 18px">SLB</div>
<div
><span style="font-size: 23px; font-weight: bold">{{ APIRate }}</span
><span style="font-size: 18px; margin-left: 5px">MB/S</span></div
>
</div>
</Col>
<Col :span="8">
<div class="borderCol">总流量变化趋势</div>
<div id="echarts1" style="width: 100%; height: 350px"></div>
</Col>
<Col :span="8">
<div class="borderCol">Gateway流量变化趋势</div>
<div id="echarts2" style="width: 100%; height: 350px"></div>
</Col>
</Row>
</div>
</div>
<div style="display: flex">
<div class="backcolor w-2/3">
<div class="serviceTitle">API调用统计</div>
<div class="borderCol">API调用总量</div>
<div id="echarts3" style="width: 100%; height: 300px"></div>
<div class="borderCol">请求方式调用量</div>
<div id="echarts4" style="width: 100%; height: 300px"></div>
</div>
<div class="backcolor w-1/3 title2">
<div class="serviceTitle">状态码统计</div>
<div class="borderCol">业务错误码分布统计</div>
<div id="echarts5" style="width: 100%; height: 300px"></div>
<div class="borderCol">Http错误码分布统计</div>
<div id="echarts6" style="width: 100%; height: 300px"></div>
</div>
</div>
<div class="backcolor">
<div class="serviceTitle">响应时长统计</div>
<Row :gutter="24">
<Col :span="12">
<div class="borderCol">响应时长统计</div>
<div id="echarts7" style="width: 100%; height: 300px"></div>
</Col>
<Col :span="12">
<div class="borderCol">响应时长大于X秒的请求量</div>
<div id="echarts8" style="width: 100%; height: 300px"></div>
</Col>
</Row>
</div>
<div class="backcolor">
<div class="serviceTitle">API调用排行Top10</div>
<Row :gutter="24">
<Col :span="12">
<div class="borderCol">调用总量排行</div>
<IpRank />
</Col>
<Col :span="12">
<div class="borderCol">调用失败排行</div>
<UseErrorRank />
</Col>
</Row>
</div>
<div class="backcolor">
<div class="serviceTitle">API调用方Top10</div>
<Row :gutter="24">
<Col :span="12">
<div class="borderCol">调用方调用排行</div>
<UseByRank />
</Col>
<Col :span="12">
<div class="borderCol">IP调用排行</div>
<IpRank />
</Col>
</Row>
</div>
<div class="backcolor backcolor1">
<div class="serviceTitle">业务分组统计</div>
<div>
<Row :gutter="24">
<Col :span="8">
<div class="borderCol">业务分组流量占比</div>
<div id="echarts9" style="width: 100%; height: 300px"></div>
</Col>
<Col :span="16">
<div class="borderCol">业务分组流量趋势</div>
<div id="echarts10" style="width: 100%; height: 300px"></div>
</Col>
</Row>
</div>
</div>
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from "@/components/Page/src/PageWrapper.vue";
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import Icon from '@/components/Icon/Icon.vue';
import { onMounted, reactive, ref } from 'vue';
import { Col, Row } from 'ant-design-vue';
import * as echarts from 'echarts';
import IpRank from '@/views/dataService/Overview/ipRank.vue';
import UseErrorRank from '@/views/dataService/Overview/useErrorRank.vue';
import UseByRank from '@/views/dataService/Overview/useByRank.vue';
</script>
const apiNum = ref(74);
const useAPI = ref(22);
const isOnline = ref(39);
const noOnline = ref(13);
const isDevelop = ref(22);
const APIRate = ref(379);
const dataList = reactive([
'12/01',
'12/02',
'12/03',
'12/04',
'12/05',
'12/06',
'12/07',
'12/08',
'12/09',
'12/10',
'12/11',
'12/12',
'12/13',
'12/14',
'12/15',
'12/16',
'12/17',
'12/18',
'12/19',
'12/20',
'12/21',
'12/22',
'12/23',
'12/24',
'12/25',
'12/26',
'12/27',
'12/28',
'12/29',
'12/30',
'12/31',
'01/01',
]);
function getEcharts1() {
const chartDom = document.getElementById('echarts1')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
// 获取当前时间
var currentDate = new Date();
// 获取一个月前的日期
var oneMonthAgo = new Date();
oneMonthAgo.setMonth(currentDate.getMonth() - 1);
option = {
grid: {
left: '10%',
right: '5%',
top: '10%',
bottom: '10%',
},
xAxis: {
data: dataList,
axisLabel: {
interval: 6,
},
},
yAxis: {
type: 'value',
min: 0,
max: 2,
interval: 1,
axisLabel: {
formatter: '{value} kb',
},
},
series: [
{
data: [0, 0, 1.1, 0.9, 0, 0],
type: 'line',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
function getEcharts2() {
const chartDom = document.getElementById('echarts2')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
grid: {
left: '10%',
right: '5%',
top: '20%',
bottom: '10%',
},
legend: {
left: '3%',
top: '5%',
},
xAxis: {
data: dataList,
axisLabel: {
interval: 6,
},
},
yAxis: {
type: 'value',
min: 0,
max: 2,
interval: 1,
axisLabel: {
formatter: '{value} kb',
},
},
series: [
{
name: 'qa18.gxample.org',
data: [0, 0, 1.1, 0.9, 0, 0],
type: 'line',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
function getEcharts3() {
const chartDom = document.getElementById('echarts3')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
grid: {
left: '5%',
right: '5%',
top: '20%',
bottom: '7%',
},
legend: {
left: '3%',
top: '5%',
},
xAxis: {
data: dataList,
axisLabel: {
interval: 6,
},
},
yAxis: {
type: 'value',
min: 0,
max: 1,
interval: 1,
},
series: [
{
name: '成功',
data: [0, 1, 1, 0.9, 0, 0, 0, 1, 1, 0.9, 0.4, 0],
type: 'line',
areaStyle: {},
},
{
name: '失败',
data: [0, 1, 1, 0.9, 0, 0],
type: 'line',
areaStyle: {},
},
{
name: '总量',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: 'line',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
function getEcharts4() {
const chartDom = document.getElementById('echarts4')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
grid: {
left: '5%',
right: '5%',
top: '20%',
bottom: '7%',
},
legend: {
left: '3%',
top: '5%',
},
xAxis: {
data: dataList,
axisLabel: {
interval: 6,
},
},
yAxis: {
type: 'value',
min: 0,
max: 1,
interval: 1,
},
series: [
{
name: 'GET',
data: [0, 0, 1.0, 0, 0, 0],
type: 'line',
areaStyle: {},
},
{
name: 'POST',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
type: 'line',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
<style scoped>
function getEcharts5() {
const chartDom = document.getElementById('echarts5')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
tooltip: {
trigger: 'item',
},
legend: {
top: '50%',
left: '55%',
},
series: [
{
center: ['30%', '50%'],
name: '623022执行异常，SOL执行错误',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
labelLine: {
show: false,
},
data: [{ value: 1, name: '623022执行异常，SOL执行错误' }],
},
],
};
option && myChart.setOption(option);
}
function getEcharts6() {
const chartDom = document.getElementById('echarts6')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
tooltip: {
trigger: 'item',
},
legend: {
top: '50%',
left: '55%',
},
series: [
{
center: ['30%', '50%'],
name: '500(服务器内部错误)',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
labelLine: {
show: false,
},
data: [{ value: 1, name: '500(服务器内部错误)' }],
},
],
};
option && myChart.setOption(option);
}
function getEcharts7() {
const chartDom = document.getElementById('echarts7')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
grid: {
left: '10%',
right: '5%',
top: '20%',
bottom: '7%',
},
legend: {
left: '3%',
top: '5%',
},
xAxis: {
data: dataList,
axisLabel: {
interval: 6,
},
},
yAxis: {
type: 'value',
min: 0,
max: 2500,
interval: 500,
},
series: [
{
name: '时延',
data: [0, 0, 1.1, 0.9, 0, 0,1000,2000,1000,0,0,0,0],
type: 'line',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
function getEcharts8() {
const chartDom = document.getElementById('echarts8')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
grid: {
left: '5%',
right: '5%',
top: '20%',
bottom: '7%',
},
legend: {
left: '3%',
top: '5%',
},
xAxis: {
data: dataList,
axisLabel: {
interval: 6,
},
},
yAxis: {
type: 'value',
min: 0,
max: 1,
interval: 1,
},
series: [
{
name: '<1秒',
data: [0, 0, 1, 0, 0, 0],
type: 'bar',
areaStyle: {},
},
{
name: '1-10秒',
data: [0, 0, 0, 1, 0, 0],
type: 'bar',
areaStyle: {},
},
{
name: '11-60秒',
data: [0, 0, 0, 0, 0, 0, 0, 1],
type: 'bar',
areaStyle: {},
},
{
name: '>60秒',
data: [0, 1, 0, , 0, 0, 0],
type: 'bar',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
function getEcharts9() {
const chartDom = document.getElementById('echarts9')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
tooltip: {
trigger: 'item',
},
legend: {
top: '50%',
left: '75%',
},
series: [
{
center: ['40%', '50%'],
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
labelLine: {
show: false,
},
data: [{ value: 1, name: '默认业务分组' }],
},
],
};
option && myChart.setOption(option);
}
function getEcharts10() {
const chartDom = document.getElementById('echarts10')!;
const myChart = echarts.init(chartDom);
let option: EChartsOption;
option = {
grid: {
left: '5%',
right: '5%',
top: '20%',
bottom: '7%',
},
legend: {
left: '3%',
top: '5%',
},
xAxis: {
data: dataList,
axisLabel: {
interval: 6,
},
},
yAxis: {
type: 'value',
min: 0,
max: 2,
interval: 1,
axisLabel: {
formatter: '{value} kb',
},
},
series: [
{
name: '默认业务分组',
data: [0, 0, 1.1, 0.9, 0, 0],
type: 'line',
areaStyle: {},
},
],
};
option && myChart.setOption(option);
}
onMounted(() => {
getEcharts1();
getEcharts2();
getEcharts3();
getEcharts4();
getEcharts5();
getEcharts6();
getEcharts7();
getEcharts8();
getEcharts9();
getEcharts10();
});
</script>
<style scoped lang="scss">
.backcolor {
background-color: #ffffff;
border-radius: 6px;
}
.title2 {
margin-left: 20px;
}
.backcolor1 {
margin-bottom: 20px;
}
.serviceTitle {
font-weight: 550;
font-size: 16px;
margin-top: 20px;
padding-top: 20px;
margin-left: 20px;
}
.borderCol {
border-left: 5px solid #357aff;
margin-top: 20px;
margin-left: 20px;
}
::v-deep .vben-page-wrapper-content {
margin: 0 16px 16px 16px;
}
</style>
src/views/dataService/Overview/ipRank.vue 0 → 100644
View file @ e4ec2448
<template>
<PageWrapper>
<BasicTable @register="registerTable" />
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { IPTableList } from './viewData';
import { IPColumns } from './view.data';
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
scroll: { y: 500 },
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: IPTableList.length,
code: '',
message: '',
data: IPTableList,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: false,
pagination: false,
showIndexColumn: false,
columns: IPColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
});
</script>
<style scoped></style>
src/views/dataService/Overview/useByRank.vue 0 → 100644
View file @ e4ec2448
<template>
<PageWrapper>
<BasicTable @register="registerTable" />
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { useByTableList } from './viewData';
import { useByColumns } from './view.data';
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
scroll: { y: 500 },
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: useByTableList.length,
code: '',
message: '',
data: useByTableList,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: false,
pagination: false,
showIndexColumn: false,
columns: useByColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
}) ;
</script>
<style scoped></style>
src/views/dataService/Overview/useErrorRank.vue 0 → 100644
View file @ e4ec2448
<template>
<PageWrapper>
<BasicTable @register="registerTable" />
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { errorTableList } from './viewData';
import { errorColumns } from './view.data';
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
scroll: { y: 500 },
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: errorTableList.length,
code: '',
message: '',
data: errorTableList,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: false,
pagination: false,
showIndexColumn: false,
columns: errorColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
}) ;
</script>
<style scoped></style>
src/views/dataService/Overview/useTotalRank.vue 0 → 100644
View file @ e4ec2448
<template>
<PageWrapper>
<BasicTable @register="registerTable" />
</PageWrapper>
</template>
<script lang="ts" setup>
import PageWrapper from '@/components/Page/src/PageWrapper.vue';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { useTable } from '@/components/Table';
import { totalTableList } from './viewData';
import { totalColumns } from './view.data';
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
scroll: { y: 500 },
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: totalTableList.length,
code: '',
message: '',
data: totalTableList,
};
return { ...response };
},
rowKey: 'businessId',
rowSelection: false,
pagination: false,
showIndexColumn: false,
columns: totalColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
}) ;
</script>
<style scoped></style>
src/views/dataService/Overview/view.data.ts
View file @ e4ec2448
export const totalColumns = [
{
title: '排名',
dataIndex: 'ranking',
},
{
title: 'API名称',
dataIndex: 'apiName',
},
{
title: '调用次数',
dataIndex: 'useNum',
},
{
title: '响应时间',
dataIndex: 'responseTime',
},
];
export const errorColumns = [
{
title: '排名',
dataIndex: 'ranking',
},
{
title: 'API名称',
dataIndex: 'apiName',
},
{
title: '调用次数',
dataIndex: 'useNum',
},
{
title: '调用失败率',
dataIndex: 'useError',
},
{
title: '响应时间',
dataIndex: 'responseTime',
},
];
export const useByColumns = [
{
title: '排名',
dataIndex: 'ranking',
},
{
title: '调用方',
dataIndex: 'useBy',
},
{
title: '调用次数',
dataIndex: 'useNum',
},
];
export const IPColumns = [
{
title: '排名',
dataIndex: 'ranking',
},
{
title: 'IP地址',
dataIndex: 'ipAddress',
},
{
title: '调用次数',
dataIndex: 'useNum',
},
];
src/views/dataService/Overview/viewData.ts
View file @ e4ec2448
export const totalTableList = [
{
ranking: '1',
apiName: 'oracle_sql',
useNum: '1次',
responseTime: '2030ms',
},{
ranking: '2',
apiName: 'test',
useNum: '2次',
responseTime: '12ms',
},
];
export const errorTableList = [
{
ranking: '1',
apiName: 'oracle_sql',
useNum: '1次',
useError: '100%',
responseTime: '2030ms',
},{
ranking: '2',
apiName: 'test',
useNum: '2次',
useError: '0%',
responseTime: '12ms',
},
];
export const useByTableList = [
{
ranking: '1',
useBy: 'admin',
useNum: '2',
},
{
ranking: '2',
useBy: 'user',
useNum: '1',
},
];
export const IPTableList = [
{
ranking: '1',
ipAddress: '172.26.5.31',
useNum: '2',
},
{
ranking: '2',
ipAddress: '172.18.30.18',
useNum: '1',
},
];
src/views/dataService/serviceMonitor/index.vue
View file @ e4ec2448
<template>
<PageWrapper title="供电单位用电量" contentFullHeight fixedHeight >
<PageWrapper title="供电单位用电量" fixedHeight>
<template #extra>
<a-button type="primary" @click="handleLog">调用日志</a-button>
</template>
......@@ -9,16 +8,20 @@
<ModelTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<div class="w-3/4 xl:w-4/5">
<div style="display: flex; flex-direction: column">
<BasicTable @register="registerTable" :searchInfo="searchInfo" :rowSelection="rowSelection">
<BasicTable
@register="registerTable"
:searchInfo="searchInfo"
:rowSelection="rowSelection"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:stop-outlined',
onClick: handleEdit.bind(null, record),
},
]"
{
icon: 'ant-design:stop-outlined',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
</template>
......@@ -28,20 +31,20 @@
<div style="display: flex">
<div class="w-1/3" style="margin-left: 20px">
<div style="border-left: 3px solid #1396e9; margin-top: 20px; font-size: 15px"
>实时总流量</div
>实时总流量</div
>
<div style="margin-top: 10px; width: 100%; height: 100%; text-align: center">
<img src="../../../assets/images/serviceMinotor.png" style="width: 68%" />
<div style="font-size: 18px">SLB</div>
<div
><span style="font-size: 23px; font-weight: bold">{{ APIRate }}</span
><span style="font-size: 18px; margin-left: 5px">MB/S</span></div
><span style="font-size: 23px; font-weight: bold">{{ APIRate }}</span
><span style="font-size: 18px; margin-left: 5px">MB/S</span></div
>
</div>
</div>
<div class="w-2/3">
<div style="border-left: 3px solid #1396e9; font-size: 15px; margin-top: 20px"
>流量统计</div
>流量统计</div
>
<div id="echarts2" style="width: 100%; height: 300px"></div>
</div>
......@@ -50,7 +53,6 @@
</div>
</div>
</div>
</template>
</PageWrapper>
</template>
......
src/views/dataService/serviceMonitor/monitor.data.ts
View file @ e4ec2448
......@@ -7,7 +7,7 @@ export const searchFormSchema: FormSchema[] = [
field: 'APIName',
label: '调用方',
component: 'Select',
colProps: { span: 4 },
colProps: { span: 8 },
componentProps: {
options: [
{ value: 'admin', label: 'admin' },
......@@ -21,7 +21,7 @@ export const searchFormSchema: FormSchema[] = [
field: 'callTime',
label: '调用时间',
component: 'RangePicker',
colProps: { span: 4 },
colProps: { span: 8 },
defaultValue: [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
componentProps: {
......@@ -31,7 +31,7 @@ export const searchFormSchema: FormSchema[] = [
field: 'callUseTime',
label: '调用有效期',
component: 'DatePicker',
colProps: { span: 4 },
colProps: { span: 8 },
},
];
......
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