feat: 仪表板看板
This commit is contained in:
TsMask
@@ -2,6 +2,12 @@
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import Topology from './components/Topology/index.vue';
|
||||
import NeResources from './components/NeResources/index.vue';
|
||||
import CDR from './components/CDR/index.vue';
|
||||
import AlarnDayLine from './components/AlarnDayLine/index.vue';
|
||||
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
|
||||
import UPFFlow from './components/UPFFlow/index.vue';
|
||||
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
const appStore = useAppStore();
|
||||
@@ -61,11 +67,13 @@ onMounted(() => {});
|
||||
</div>
|
||||
|
||||
<!--本月告警统计-->
|
||||
<div class="point panel">
|
||||
<div class="alarmType panel">
|
||||
<div class="inner">
|
||||
<h3>本月告警统计</h3>
|
||||
<div class="chart">
|
||||
<div class="pie"></div>
|
||||
<div class="bar">
|
||||
<AlarnTypeBar />
|
||||
</div>
|
||||
<div class="data">
|
||||
<div class="item">
|
||||
<h4>320,11</h4>
|
||||
@@ -87,75 +95,46 @@ onMounted(() => {});
|
||||
</div>
|
||||
|
||||
<!-- 告警趋势 -->
|
||||
<div class="top panel">
|
||||
<div class="alarmDay 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>
|
||||
<h3>告警趋势</h3>
|
||||
<div class="chart">
|
||||
<AlarnDayLine />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
|
||||
<!-- 实时流量 -->
|
||||
<div class="users panel">
|
||||
<div class="upfFlow 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>
|
||||
<UPFFlow />
|
||||
</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 class="inner">
|
||||
<h3>
|
||||
<ApartmentOutlined style="color: #68d8fe" /> 网络拓扑
|
||||
</h3>
|
||||
<div class="chart">
|
||||
<Topology />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!-- 流量 -->
|
||||
<div class="order panel">
|
||||
<!-- 总流量 -->
|
||||
<div class="totalFlow 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>
|
||||
<span data-key="1" class="active">24小时</span>
|
||||
<span data-key="7">7天</span>
|
||||
<span data-key="30">30天</span>
|
||||
</div>
|
||||
<!-- 数据 -->
|
||||
<div class="data">
|
||||
@@ -177,113 +156,24 @@ onMounted(() => {});
|
||||
</div>
|
||||
</div>
|
||||
<!-- 资源情况 -->
|
||||
<div class="users panel">
|
||||
<div class="resources panel">
|
||||
<div class="inner">
|
||||
<h3>资源情况</h3>
|
||||
<h3>
|
||||
<DashboardOutlined style="color: #68d8fe" /> 资源情况
|
||||
</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>
|
||||
<NeResources />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--会话监控-->
|
||||
<div class="monitor panel">
|
||||
<!-- 会话监控 -->
|
||||
<div class="cdr 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>
|
||||
<h3>
|
||||
<WhatsAppOutlined style="color: #d93f36" /> 会话监控
|
||||
</h3>
|
||||
<div class="chart">
|
||||
<CDR />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user