feat: 仪表盘
This commit is contained in:
TsMask
@@ -1,500 +1,310 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import {
|
||||
listCacheName,
|
||||
listCacheKey,
|
||||
getCacheValue,
|
||||
clearCacheName,
|
||||
clearCacheKey,
|
||||
clearCacheSafe,
|
||||
} from '@/api/monitor/cache';
|
||||
import { PageContainer } from 'antdv-pro-layout';
|
||||
import { ColumnsType } from 'ant-design-vue/lib/table/Table';
|
||||
import { message } from 'ant-design-vue/lib';
|
||||
import { hasPermissions } from '@/plugins/auth-user';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import Topology from './components/Topology/index.vue';
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
const { t } = useI18n();
|
||||
/**请求点击 */
|
||||
let isClick = ref<boolean>(false);
|
||||
|
||||
/**缓存内容信息 */
|
||||
let cacheKeyInfo = reactive({
|
||||
loading: true,
|
||||
data: {
|
||||
cacheKey: '',
|
||||
cacheName: '',
|
||||
cacheValue: '',
|
||||
remark: '',
|
||||
},
|
||||
});
|
||||
/**总览节点 */
|
||||
const viewportDom = ref<HTMLElement | null>(null);
|
||||
const { isFullscreen, toggle } = useFullscreen(viewportDom);
|
||||
|
||||
/**
|
||||
* 查询缓存内容详细
|
||||
* @param cacheKey
|
||||
*/
|
||||
function fnCacheKeyInfo(cacheKey: string) {
|
||||
if (!hasPermissions(['monitor:cache:query'])) return;
|
||||
if (isClick.value) return;
|
||||
isClick.value = true;
|
||||
cacheKeyInfo.loading = true;
|
||||
getCacheValue(cacheKeyTable.cacheName, cacheKey).then(res => {
|
||||
isClick.value = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
cacheKeyInfo.data = Object.assign(cacheKeyInfo.data, res.data);
|
||||
cacheKeyInfo.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**键名列表表格字段列 */
|
||||
let cacheKeyTableColumns: ColumnsType = [
|
||||
{
|
||||
title: t('common.rowId'),
|
||||
dataIndex: 'num',
|
||||
width: '50px',
|
||||
align: 'center',
|
||||
customRender(opt) {
|
||||
return opt.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('views.monitor.cache.cacheKey'),
|
||||
dataIndex: 'cacheKey',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
// 渲染值处理
|
||||
customRender(opt) {
|
||||
return opt.text;
|
||||
},
|
||||
// 自定义过滤控件
|
||||
customFilterDropdown: true,
|
||||
onFilter: (value, record) => {
|
||||
if (typeof value === 'string') {
|
||||
const nameLower = record.cacheKey.toLowerCase();
|
||||
return nameLower.includes(value.toLowerCase());
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('common.operate'),
|
||||
key: 'option',
|
||||
align: 'center',
|
||||
width: '50px',
|
||||
},
|
||||
];
|
||||
|
||||
/**键名列表表格数据 */
|
||||
let cacheKeyTable = reactive({
|
||||
loading: false,
|
||||
data: [],
|
||||
/**当前键名列表的缓存名称 */
|
||||
cacheName: '',
|
||||
});
|
||||
|
||||
/**
|
||||
* 清理指定缓存键名
|
||||
* @param cacheKey 键名列表中的缓存键名
|
||||
*/
|
||||
function fnCacheKeyClear(cacheKey: string) {
|
||||
if (isClick.value) return;
|
||||
isClick.value = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
clearCacheKey(cacheKeyTable.cacheName, cacheKey).then(res => {
|
||||
hide();
|
||||
isClick.value = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('views.monitor.cache.clearCacheKeyOk', { txt: cacheKey }),
|
||||
duration: 3,
|
||||
});
|
||||
// 缓存内容显示且是删除的缓存键名，需要进行加载显示
|
||||
if (!cacheKeyInfo.loading && cacheKeyInfo.data.cacheKey === cacheKey) {
|
||||
cacheKeyInfo.loading = true;
|
||||
}
|
||||
} else {
|
||||
message.error({
|
||||
content: res.msg,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
fnCacheKeyList();
|
||||
});
|
||||
}
|
||||
|
||||
/** 查询缓存键名列表 */
|
||||
function fnCacheKeyList(cacheName: string = 'load') {
|
||||
if (cacheName === 'load') {
|
||||
cacheName = cacheKeyTable.cacheName;
|
||||
}
|
||||
if (!cacheName) {
|
||||
message.warning(t('views.monitor.cache.cacheKeyListErr'), 3);
|
||||
return;
|
||||
}
|
||||
if (isClick.value) return;
|
||||
isClick.value = true;
|
||||
cacheKeyTable.loading = true;
|
||||
listCacheKey(cacheName).then(res => {
|
||||
isClick.value = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
cacheKeyTable.cacheName = cacheName;
|
||||
cacheKeyTable.data = res.data;
|
||||
cacheKeyTable.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**缓存列表表格数据 */
|
||||
let cacheNameTable = reactive({
|
||||
loading: true,
|
||||
data: [],
|
||||
});
|
||||
|
||||
/**缓存列表表格字段列 */
|
||||
let cacheNameTableColumns: ColumnsType = [
|
||||
{
|
||||
title: t('common.rowId'),
|
||||
dataIndex: 'num',
|
||||
width: '50px',
|
||||
align: 'center',
|
||||
customRender(opt) {
|
||||
return opt.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('views.monitor.cache.cacheName'),
|
||||
dataIndex: 'cacheName',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
// 渲染值处理
|
||||
customRender(opt) {
|
||||
return opt.text;
|
||||
},
|
||||
// 自定义过滤控件
|
||||
customFilterDropdown: true,
|
||||
onFilter: (value, record) => {
|
||||
if (typeof value === 'string') {
|
||||
const nameLower = record.cacheName.toLowerCase();
|
||||
return nameLower.includes(value.toLowerCase());
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('views.monitor.cache.remark'),
|
||||
dataIndex: 'remark',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: t('common.operate'),
|
||||
key: 'option',
|
||||
align: 'center',
|
||||
width: '50px',
|
||||
},
|
||||
];
|
||||
|
||||
/**安全清理缓存 */
|
||||
function fnClearCacheSafe() {
|
||||
if (isClick.value) return;
|
||||
isClick.value = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
clearCacheSafe().then(res => {
|
||||
hide();
|
||||
isClick.value = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('views.monitor.cache.clearCacheSafeOk'),
|
||||
duration: 3,
|
||||
});
|
||||
cacheKeyTable.loading = true;
|
||||
cacheKeyInfo.loading = true;
|
||||
} else {
|
||||
message.error({
|
||||
content: res.msg,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理指定缓存名称
|
||||
* @param cacheName 缓存名称
|
||||
*/
|
||||
function fnCacheNameClear(cacheName: string) {
|
||||
if (isClick.value) return;
|
||||
isClick.value = true;
|
||||
const hide = message.loading(t('common.loading'), 0);
|
||||
clearCacheName(cacheName).then(res => {
|
||||
hide();
|
||||
isClick.value = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success({
|
||||
content: t('views.monitor.cache.clearCacheNameOk', { txt: cacheName }),
|
||||
duration: 3,
|
||||
});
|
||||
// 缓存内容显示且是删除的缓存名称，需要进行加载显示
|
||||
if (!cacheKeyInfo.loading && cacheKeyInfo.data.cacheName === cacheName) {
|
||||
cacheKeyInfo.loading = true;
|
||||
}
|
||||
} else {
|
||||
message.error({
|
||||
content: res.msg,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
fnCacheKeyList(cacheName);
|
||||
});
|
||||
}
|
||||
|
||||
/**查询缓存名称列表 */
|
||||
function fnCacheNameList() {
|
||||
if (isClick.value) return;
|
||||
isClick.value = true;
|
||||
cacheNameTable.loading = true;
|
||||
listCacheName().then(res => {
|
||||
isClick.value = false;
|
||||
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
cacheNameTable.data = res.data;
|
||||
cacheNameTable.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnCacheNameList();
|
||||
});
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer>
|
||||
<a-row :gutter="20">
|
||||
<a-col :lg="8" :md="8" :xs="24">
|
||||
<a-card
|
||||
:title="t('views.monitor.cache.cacheList')"
|
||||
:bordered="false"
|
||||
:body-style="{ marginBottom: '24px', padding: 0 }"
|
||||
>
|
||||
<template #extra>
|
||||
<a-space :size="8" align="center">
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ t('common.reloadText') }}
|
||||
</template>
|
||||
<a-button type="text" @click.prevent="fnCacheNameList">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ t('views.monitor.cache.clearCacheSafe') }}
|
||||
</template>
|
||||
<a-popconfirm
|
||||
placement="bottomRight"
|
||||
:title="t('views.monitor.cache.clearCacheSafeTip')"
|
||||
:ok-text="t('common.ok')"
|
||||
:cancel-text="t('common.cancel')"
|
||||
@confirm="fnClearCacheSafe()"
|
||||
>
|
||||
<a-button type="text" v-perms:has="['monitor:cache:remove']">
|
||||
<template #icon><ClearOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
<a-table
|
||||
row-key="cacheName"
|
||||
size="small"
|
||||
:columns="cacheNameTableColumns"
|
||||
:data-source="cacheNameTable.data"
|
||||
:loading="cacheNameTable.loading"
|
||||
:scroll="{ y: 'calc(100vh - 350px)' }"
|
||||
:pagination="false"
|
||||
:row-selection="{
|
||||
type: 'radio',
|
||||
onChange: (selectedRowKeys: (string|number)[]) => fnCacheKeyList(selectedRowKeys[0] as string),
|
||||
}"
|
||||
>
|
||||
<template
|
||||
#customFilterDropdown="{
|
||||
setSelectedKeys,
|
||||
selectedKeys,
|
||||
confirm,
|
||||
clearFilters,
|
||||
column,
|
||||
}"
|
||||
>
|
||||
<div style="padding: 8px">
|
||||
<a-input
|
||||
:placeholder="
|
||||
t('views.monitor.cache.filterPlace', { txt: column.title })
|
||||
"
|
||||
:value="selectedKeys[0]"
|
||||
style="width: 188px; margin-bottom: 8px; display: block"
|
||||
@change="
|
||||
(e:any)=> setSelectedKeys(e.target.value ? [e.target.value] : [])
|
||||
"
|
||||
@pressEnter="confirm()"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="width: 90px; margin-right: 8px"
|
||||
@click="confirm()"
|
||||
>
|
||||
{{ t('views.monitor.cache.filter') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
style="width: 90px"
|
||||
@click="clearFilters({ confirm: true })"
|
||||
>
|
||||
{{ t('common.reset') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'option'">
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
:title="t('views.monitor.cache.clearCacheNameTip')"
|
||||
,
|
||||
:ok-text="t('common.ok')"
|
||||
:cancel-text="t('common.cancel')"
|
||||
@confirm="fnCacheNameClear(record.cacheName)"
|
||||
>
|
||||
<a-button type="text" v-perms:has="['monitor:cache:remove']">
|
||||
<template #icon><ClearOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<div class="viewport" ref="viewportDom">
|
||||
<div class="brand">
|
||||
<div class="brand-title" @click="toggle">
|
||||
核心网系统看板
|
||||
<FullscreenExitOutlined v-if="isFullscreen" />
|
||||
<FullscreenOutlined v-else />
|
||||
</div>
|
||||
<div class="brand-desc">5GC 核心网数据</div>
|
||||
</div>
|
||||
|
||||
<a-col :lg="8" :md="8" :xs="24">
|
||||
<a-card
|
||||
:title="t('views.monitor.cache.keyNameList')"
|
||||
:bordered="false"
|
||||
:body-style="{ marginBottom: '24px', padding: 0 }"
|
||||
>
|
||||
<template #extra>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
{{ t('common.reloadText') }}
|
||||
</template>
|
||||
<a-button type="text" @click.prevent="fnCacheKeyList()">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-table
|
||||
row-key="cacheKey"
|
||||
size="small"
|
||||
:columns="cacheKeyTableColumns"
|
||||
:data-source="cacheKeyTable.data"
|
||||
:loading="cacheKeyTable.loading"
|
||||
:scroll="{ y: 'calc(100vh - 350px)' }"
|
||||
:pagination="false"
|
||||
:row-selection="{
|
||||
type: 'radio',
|
||||
onChange: (selectedRowKeys: (string|number)[]) => fnCacheKeyInfo(selectedRowKeys[0] as string),
|
||||
}"
|
||||
>
|
||||
<template
|
||||
#customFilterDropdown="{
|
||||
setSelectedKeys,
|
||||
selectedKeys,
|
||||
confirm,
|
||||
clearFilters,
|
||||
column,
|
||||
}"
|
||||
>
|
||||
<div style="padding: 8px">
|
||||
<a-input
|
||||
:placeholder="
|
||||
t('views.monitor.cache.filterPlace', { txt: column.title })
|
||||
"
|
||||
:value="selectedKeys[0]"
|
||||
style="width: 188px; margin-bottom: 8px; display: block"
|
||||
@change="
|
||||
(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])
|
||||
"
|
||||
@pressEnter="confirm()"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="width: 90px; margin-right: 8px"
|
||||
@click="confirm()"
|
||||
>
|
||||
{{ t('views.monitor.cache.filter') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
style="width: 90px"
|
||||
@click="clearFilters({ confirm: true })"
|
||||
>
|
||||
{{ t('common.reset') }}
|
||||
</a-button>
|
||||
<div class="column">
|
||||
<!-- 基站数量 -->
|
||||
<div class="wrap">
|
||||
<div class="channel panel">
|
||||
<div class="inner">
|
||||
<h3>UE数量</h3>
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>39 <small>%</small></h4>
|
||||
<span>
|
||||
<i class="icon-plane"></i>
|
||||
IMS
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'option'">
|
||||
<a-popconfirm
|
||||
placement="topRight"
|
||||
:title="t('views.monitor.cache.clearCacheKeyTip')"
|
||||
,
|
||||
:ok-text="t('common.ok')"
|
||||
:cancel-text="t('common.cancel')"
|
||||
@confirm="fnCacheKeyClear(record.cacheKey)"
|
||||
>
|
||||
<a-button type="text" v-perms:has="['monitor:cache:remove']">
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>20 <small>%</small></h4>
|
||||
<span>
|
||||
<i class="icon-train"></i>
|
||||
AMF
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quarter panel">
|
||||
<div class="inner">
|
||||
<h3>基站数量</h3>
|
||||
<div class="chart">
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>1,321</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #6acca3"></i>
|
||||
在线
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h4>150%</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #ed3f35"></i>
|
||||
不在线
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-col :lg="8" :md="8" :xs="24" v-perms:has="['monitor:cache:query']">
|
||||
<a-card
|
||||
:title="t('views.monitor.cache.keyContent')"
|
||||
:bordered="false"
|
||||
:body-style="{ marginBottom: '24px', padding: 0 }"
|
||||
:loading="cacheKeyInfo.loading"
|
||||
>
|
||||
<a-descriptions
|
||||
size="small"
|
||||
layout="vertical"
|
||||
:bordered="true"
|
||||
:column="1"
|
||||
>
|
||||
<a-descriptions-item :label="t('views.monitor.cache.cacheName')">
|
||||
{{ cacheKeyInfo.data.cacheName }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="t('views.monitor.cache.cacheKey')">
|
||||
{{ cacheKeyInfo.data.cacheKey }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :label="t('views.monitor.cache.cacheValue')">
|
||||
<a-typography-paragraph>
|
||||
<a-textarea
|
||||
:value="cacheKeyInfo.data.cacheValue"
|
||||
:auto-size="{ minRows: 4, maxRows: 20 }"
|
||||
:maxlength="4000"
|
||||
:disabled="true"
|
||||
/>
|
||||
</a-typography-paragraph>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</PageContainer>
|
||||
<!--本月告警统计-->
|
||||
<div class="point panel">
|
||||
<div class="inner">
|
||||
<h3>本月告警统计</h3>
|
||||
<div class="chart">
|
||||
<div class="pie"></div>
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>320,11</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #ed3f35"></i>
|
||||
告警总数
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h4>418</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #eacf19"></i>
|
||||
本月新增
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 告警趋势 -->
|
||||
<div class="top panel">
|
||||
<div class="inner">
|
||||
<div class="all">
|
||||
<h3>告警趋势</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<i class="icon-cup1" style="color: #d93f36"></i>
|
||||
可爱多
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-cup2" style="color: #68d8fe"></i>
|
||||
娃哈啥
|
||||
</li>
|
||||
<li>
|
||||
<i class="icon-cup3" style="color: #4c9bfd"></i>
|
||||
喜之郎
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
|
||||
<!-- 实时流量 -->
|
||||
<div class="users panel">
|
||||
<div class="inner">
|
||||
<h3>实时流量</h3>
|
||||
<div class="chart">
|
||||
<div class="bar"></div>
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>120,899</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #ed3f35"></i>
|
||||
用户总量
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h4>248</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #eacf19"></i>
|
||||
本月新增
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 拓扑图 -->
|
||||
<div class="topology panel">
|
||||
<div class="topology-title">
|
||||
<PartitionOutlined style="color: #68d8fe" />
|
||||
<DeploymentUnitOutlined style="color: #68d8fe" />
|
||||
网络拓扑
|
||||
</div>
|
||||
<div class="topology-chart">
|
||||
<Topology />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!-- 流量 -->
|
||||
<div class="order panel">
|
||||
<div class="inner">
|
||||
<!-- 筛选 -->
|
||||
<div class="filter">
|
||||
<a href="javascript:;" data-key="day1" class="active">24小时</a>
|
||||
<a href="javascript:;" data-key="day30">7天</a>
|
||||
<a href="javascript:;" data-key="day30">30天</a>
|
||||
</div>
|
||||
<!-- 数据 -->
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>20,301 TB</h4>
|
||||
<span>
|
||||
<ArrowUpOutlined style="color: #ed3f35" />
|
||||
上行
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h4>99834 TB</h4>
|
||||
<span>
|
||||
<ArrowDownOutlined style="color: #eacf19" />
|
||||
下行
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 资源情况 -->
|
||||
<div class="users panel">
|
||||
<div class="inner">
|
||||
<h3>资源情况</h3>
|
||||
<div class="chart">
|
||||
<div class="bar"></div>
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>120,899</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #ed3f35"></i>
|
||||
磁盘
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h4>248</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #eacf19"></i>
|
||||
cpu
|
||||
</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h4>248</h4>
|
||||
<span>
|
||||
<i class="icon-dot" style="color: #eacf19"></i>
|
||||
内存
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--会话监控-->
|
||||
<div class="monitor panel">
|
||||
<div class="inner">
|
||||
<div class="tabs">
|
||||
<a href="javascript:;" data-index="0" class="active">会话监控</a>
|
||||
</div>
|
||||
<div class="content" style="display: block">
|
||||
<div class="head">
|
||||
<span class="col">故障时间</span>
|
||||
<span class="col">设备地址</span>
|
||||
<span class="col">异常代码</span>
|
||||
</div>
|
||||
<div class="marquee-view">
|
||||
<div class="marquee">
|
||||
<div class="row">
|
||||
<span class="col">20180701</span>
|
||||
<span class="col">11北京市昌平西路金燕龙写字楼</span>
|
||||
<span class="col">1000001</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190601</span>
|
||||
<span class="col">北京市昌平区城西路金燕龙写字楼</span>
|
||||
<span class="col">1000002</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190704</span>
|
||||
<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
|
||||
<span class="col">1000003</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20180701</span>
|
||||
<span class="col">北京市昌平区建路金燕龙写字楼</span>
|
||||
<span class="col">1000004</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190701</span>
|
||||
<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
|
||||
<span class="col">1000005</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190701</span>
|
||||
<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
|
||||
<span class="col">1000006</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190701</span>
|
||||
<span class="col">北京市昌平区建西路金燕龙写字楼</span>
|
||||
<span class="col">1000007</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190701</span>
|
||||
<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
|
||||
<span class="col">1000008</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190701</span>
|
||||
<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
|
||||
<span class="col">1000009</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="col">20190710</span>
|
||||
<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
|
||||
<span class="col">1000010</span>
|
||||
<span class="icon-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
<style lang="less" scoped>
|
||||
@import url('./css/index.css');
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user