Skip to content

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

数据服务-服务监控和概览改bug

parent ca84300a
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 75 deletions
src/views/dataService/Overview/index.vue
View file @ 5c8fe63a
......@@ -20,8 +20,8 @@
<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 style="margin-left: 20px; font-size: 20px; font-weight: bold">{{ apiNum }}</div>
<div style="margin-left: 70px; font-size: 20px; font-weight: bold">{{ useAPI }}</div>
</div>
</div>
</div>
......@@ -39,17 +39,17 @@
<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 style="margin: 10px 20px 0">未上线</div>
<div style="margin: 10px 20px 0">已上线</div>
</div>
<div style="display: flex">
<div style="margin-left: 10px; font-size: 20px; font-weight: bold">{{
<div style="margin-left: 20px; font-size: 20px; font-weight: bold">{{
isDevelop
}}</div>
<div style="margin-left: 80px; font-size: 20px; font-weight: bold">{{
<div style="margin-left: 50px; font-size: 20px; font-weight: bold">{{
noOnline
}}</div>
<div style="margin-left: 80px; font-size: 20px; font-weight: bold">{{
<div style="margin-left: 60px; font-size: 20px; font-weight: bold">{{
isOnline
}}</div>
</div>
......@@ -502,7 +502,7 @@
series: [
{
name: '时延',
data: [0, 0, 1.1, 0.9, 0, 0,1000,2000,1000,0,0,0,0],
data: [0, 0, 1.1, 0.9, 0, 0, 1000, 2000, 1000, 0, 0, 0, 0],
type: 'line',
areaStyle: {},
},
......@@ -682,9 +682,20 @@
margin-left: 20px;
}
.borderCol {
border-left: 5px solid #357aff;
margin-top: 20px;
margin-left: 20px;
margin-left: 15px;
margin-top: 15px;
display: inline-block; /* 使 div 成为一个内联块级元素 */
font-size: 16px; /* 设置文字大小 */
}
.borderCol::before {
content: ''; /* 必须要设置 content */
display: inline-block; /* 让伪元素和 div 在同一行显示 */
width: 5px; /* 设置方块宽度 */
height: 15px; /* 设置方块高度 */
background-color: #357aff; /* 设置方块颜色 */
margin-right: 8px; /* 给方块和文字之间添加空隙 */
vertical-align: middle; /* 让方块垂直居中 */
}
::v-deep .vben-page-wrapper-content {
margin: 0 16px 16px 16px;
......
src/views/dataService/serviceMonitor/index.vue
View file @ 5c8fe63a
<template>
<PageWrapper title="供电单位用电量" fixedHeight>
<template #extra>
<a-button type="primary" @click="handleLog">调用日志</a-button>
</template>
<template #footer>
<div style="display: flex">
<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"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:stop-outlined',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
<PageWrapper dense contentClass="flex" style="height: 100%">
<ModelTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<PageWrapper class="p-4 w-3/4 xl:w-4/5 enter-y" dense @back="handleGoBack">
<template #headerContent>
<div style="display: flex; justify-content: space-between">
<div class="title">
<div class="title_left">
<div>
<Icon icon="dashicons:admin-plugins" :size="32" :color="'#7360E2'" />
</div>
<div style="padding-left: 10px">
<div class="name">供电单位用电量</div>
<div style="color: darkgray">API监控/市场营销</div>
</div>
</div>
</div>
<a-button type="primary" @click="handleLog">调用日志</a-button>
</div>
</template>
<template #footer>
<div style="display: flex; flex-direction: column">
<BasicTable
@register="registerTable"
:searchInfo="searchInfo"
:rowSelection="rowSelection"
>
<template #headerTop>
<BasicForm @register="registerForm" />
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:stop-outlined',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
</BasicTable>
<div>
<div style="margin-left: 20px; font-weight: bold; font-size: 16px">流量统计</div>
<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
</template>
</BasicTable>
<div>
<div style="margin-left: 20px; font-weight: bold; font-size: 16px">流量统计</div>
<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 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 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>
</div>
<div class="w-2/3">
<div style="border-left: 3px solid #1396e9; font-size: 15px; margin-top: 20px"
>流量统计</div
>
<div id="echarts2" style="width: 100%; height: 300px"></div>
</div>
</div>
<div class="w-2/3">
<div style="border-left: 3px solid #1396e9; font-size: 15px; margin-top: 20px"
>流量统计</div
>
<div id="echarts2" style="width: 100%; height: 300px"></div>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
</PageWrapper>
</PageWrapper>
</template>
<script lang="ts" setup>
......@@ -67,9 +81,10 @@
import { router } from '@/router';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { Alert } from 'ant-design-vue';
import * as echarts from 'echarts';
import ModelTree from './ModelTree.vue';
import Icon from '@/components/Icon/Icon.vue';
import { BasicForm, useForm } from '@/components/Form';
type EChartsOption = echarts.EChartsOption;
......@@ -80,6 +95,17 @@
const [registerImport, { openModal: openImportModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const APIRate = ref('375');
const [registerForm, { resetFields }] = useForm({
labelAlign: 'right',
labelWidth: 50,
baseColProps: { lg: 12, md: 24 },
schemas: searchFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const [
registerTable,
{ reload, updateTableDataRecord, setTableData, getSearchInfo, getForm, getRowSelection },
......@@ -104,15 +130,7 @@
rowSelection: false,
showIndexColumn: false,
columns,
formConfig: {
labelWidth: 100,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.deptId = '';
},
},
useSearchForm: true,
useSearchForm: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
......@@ -133,6 +151,10 @@
});
}
function handleGoBack() {
router.go(-1);
}
/** 部门树的select*/
function handleSelect(key) {
if (key !== null && key !== undefined) {
......@@ -178,6 +200,7 @@
reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
......@@ -198,7 +221,7 @@
option = {
grid: {
left: '5%',
left: '7%',
right: '5%',
top: '10%',
bottom: '7%',
......@@ -243,3 +266,23 @@
getEcharts2();
});
</script>
<style scoped lang="scss">
.title {
display: flex;
align-items: center;
justify-content: space-between;
.title_left {
display: flex;
align-items: center;
justify-content: space-between;
.name {
font-weight: 600;
font-size: 17px;
padding-bottom: 5px;
}
}
}
</style>
src/views/dataService/serviceMonitor/logMangae.vue
View file @ 5c8fe63a
......@@ -3,7 +3,10 @@
<template #footer>
<BasicTable @register="registerTable" :searchInfo="searchInfo" :rowSelection="rowSelection">
<template #toolbar>
<a-button type="link" :disabled="getRowSelection().selectedRowKeys <= 0"
<a-button
type="link"
:disabled="getRowSelection().selectedRowKeys <= 0"
@click="handleDownLoad"
>下载日志</a-button
>
</template>
......@@ -97,7 +100,20 @@
},
});
function handleDownLoad() {}
function handleDownLoad() {
// 创建一个空的 Blob 对象，表示空文件内容
const emptyBlob = new Blob([], { type: 'text/plain' });
// 使用 URL.createObjectURL 创建一个可下载的链接
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(emptyBlob);
// 设置下载文件的名称
downloadLink.download = 'emptyFile.txt';
// 自动触发点击事件，开始下载
downloadLink.click();
// 释放对象URL，避免内存泄漏
URL.revokeObjectURL(downloadLink.href);
}
function handleView() {}
......
src/views/dataService/serviceMonitor/monitor.data.ts
View file @ 5c8fe63a
......@@ -7,7 +7,8 @@ export const searchFormSchema: FormSchema[] = [
field: 'APIName',
label: '调用方',
component: 'Select',
colProps: { span: 8 },
colProps: { lg: 5, md: 24 },
labelWidth: 50,
componentProps: {
options: [
{ value: 'admin', label: 'admin' },
......@@ -20,8 +21,9 @@ export const searchFormSchema: FormSchema[] = [
{
field: 'callTime',
label: '调用时间',
labelWidth: 100,
component: 'RangePicker',
colProps: { span: 8 },
colProps: { lg: 8, md: 24 },
defaultValue: [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
componentProps: {
......@@ -30,8 +32,9 @@ export const searchFormSchema: FormSchema[] = [
{
field: 'callUseTime',
label: '调用有效期',
labelWidth: 100,
component: 'DatePicker',
colProps: { span: 8 },
colProps: { lg: 5, md: 24 },
},
];
......
src/views/dataService/serviceMonitor/monitorData.ts
View file @ 5c8fe63a
......@@ -192,6 +192,103 @@ export const logTableList = [
taskErrorNum: '-',
useBy: 'apiuser',
},
{
routerName: 'employee',
businessId: 311,
isAPI: false,
ipName: '172.22.204.228',
useTime: '2023/01/12 16:40:35',
useStatus: '成功',
useTimeLength: '663.0 ms',
herrorNum: '-',
taskErrorNum: '-',
useBy: 'apiuser',
},
{
routerName: 'employee',
businessId: 312,
isAPI: true,
ipName: '172.22.204.45',
useTime: '2024/03/22 14:22:11',
useStatus: '失败',
useTimeLength: '1021.3 ms',
herrorNum: '2',
taskErrorNum: '1',
useBy: 'apiuser2',
},
{
routerName: 'employee',
businessId: 313,
isAPI: false,
ipName: '172.16.3.55',
useTime: '2024/06/18 12:00:20',
useStatus: '成功',
useTimeLength: '432.1 ms',
herrorNum: '-',
taskErrorNum: '-',
useBy: 'apiuser5',
},
{
routerName: 'employee',
businessId: 314,
isAPI: true,
ipName: '192.168.2.150',
useTime: '2024/07/29 10:05:10',
useStatus: '失败',
useTimeLength: '1205.2 ms',
herrorNum: '1',
taskErrorNum: '2',
useBy: 'apiuser6',
},
{
routerName: 'employee',
businessId: 315,
isAPI: false,
ipName: '10.0.0.103',
useTime: '2024/08/03 18:45:33',
useStatus: '成功',
useTimeLength: '565.7 ms',
herrorNum: '-',
taskErrorNum: '-',
useBy: 'apiuser7',
},
{
routerName: 'employee',
businessId: 316,
isAPI: true,
ipName: '172.22.205.230',
useTime: '2024/09/14 13:22:45',
useStatus: '失败',
useTimeLength: '1750.6 ms',
herrorNum: '3',
taskErrorNum: '2',
useBy: 'apiuser8',
},
{
routerName: 'employee',
businessId: 317,
isAPI: false,
ipName: '192.168.1.115',
useTime: '2024/10/25 11:30:58',
useStatus: '成功',
useTimeLength: '426.3 ms',
herrorNum: '-',
taskErrorNum: '-',
useBy: 'apiuser9',
},
{
routerName: 'employee',
businessId: 318,
isAPI: true,
ipName: '10.1.1.204',
useTime: '2024/11/12 17:55:04',
useStatus: '成功',
useTimeLength: '789.2 ms',
herrorNum: '-',
taskErrorNum: '-',
useBy: 'apiuser10',
}
];
......
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