From d2ebb261e3e5579efa01a259725cea75f13f8c68 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 31 Jan 2024 18:48:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9C=8B=E6=9D=BF=E6=8E=92=E7=89=88?=
=?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=8C=E5=A4=9A=E8=AF=AD=E8=A8=80=E7=BF=BB?=
=?UTF-8?q?=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/svg/base.svg | 1 +
src/assets/svg/userIMS.svg | 1 +
src/assets/svg/userSMF.svg | 1 +
src/i18n/locales/en-US.ts | 7 +-
src/i18n/locales/zh-CN.ts | 5 +-
src/views/dashboard/overview/css/index.css | 576 +++------------------
src/views/dashboard/overview/index.vue | 162 +++---
7 files changed, 179 insertions(+), 574 deletions(-)
create mode 100644 src/assets/svg/base.svg
create mode 100644 src/assets/svg/userIMS.svg
create mode 100644 src/assets/svg/userSMF.svg
diff --git a/src/assets/svg/base.svg b/src/assets/svg/base.svg
new file mode 100644
index 00000000..2036fe25
--- /dev/null
+++ b/src/assets/svg/base.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/svg/userIMS.svg b/src/assets/svg/userIMS.svg
new file mode 100644
index 00000000..08faa3e5
--- /dev/null
+++ b/src/assets/svg/userIMS.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/svg/userSMF.svg b/src/assets/svg/userSMF.svg
new file mode 100644
index 00000000..93009a81
--- /dev/null
+++ b/src/assets/svg/userSMF.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/i18n/locales/en-US.ts b/src/i18n/locales/en-US.ts
index d768915f..be91335c 100644
--- a/src/i18n/locales/en-US.ts
+++ b/src/i18n/locales/en-US.ts
@@ -494,8 +494,10 @@ export default {
fullscreen: "Click on the full-screen display",
skim: {
users: "Users",
+ userTitle:'User Information',
session: "Sessions",
base: "Base Stations",
+ baseTitle:'Radios Information',
},
upfFlow:{
title: "User Plane Throughput",
@@ -503,13 +505,14 @@ export default {
down:'Downlink'
},
upfFlowTotal:{
+ title:'Traffic Information',
up:'Uplink',
down:'Downlink'
},
alarmTypeBar:{
alarmSum:'Alarm Summary',
topTitle:"TOP 3",
- },
+ },
resources: {
title: "Resource Summary",
sysMem: "Memory",
@@ -519,7 +522,7 @@ export default {
topology: {
title: "Network Topology",
normal: "Normal",
- abnormal: "AbNormal",
+ abnormal: "Abnormal",
},
userActivity: {
title: "User Activity",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index cbee404b..cafa2ddf 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -494,15 +494,18 @@ export default {
fullscreen: "点击全屏显示",
skim: {
users: "用户数",
+ userTitle:'用户信息',
session: "会话数",
base: "基站数",
+ baseTitle:'基站信息',
},
upfFlow:{
title: "用户面吞吐量",
up:'上行',
down:'下行'
},
- upfFlowTotal:{
+ upfFlowTotal:{
+ title:'流量信息',
up:'上行',
down:'下行'
},
diff --git a/src/views/dashboard/overview/css/index.css b/src/views/dashboard/overview/css/index.css
index 0d43533c..02c34833 100644
--- a/src/views/dashboard/overview/css/index.css
+++ b/src/views/dashboard/overview/css/index.css
@@ -110,35 +110,53 @@
/* 概览区域 */
.skim {
- min-height: 6.167rem;
- height: 14%;
+ min-height: 7.78rem;
+ height: 14.4%;
}
-.skim .inner {
+.skim .inner .data {
display: flex;
- flex-wrap: wrap;
+ flex-direction: row;
align-items: center;
+ height: 90%;
}
-.skim .inner .item {
- width: 50%;
+.skim .inner .data .item {
display: flex;
flex-direction: column;
- justify-content: space-between;
+ align-items: baseline;
+ width: 33%;
}
-.skim .inner .item h4 {
- font-size: 1.167rem;
- padding-left: 0.2rem;
+.skim .inner .data .item div {
+ font-size: 1.467rem;
color: #fff;
- margin-bottom: 0.333rem;
+ margin-bottom: 0;
+ display: flex;
+ align-items: baseline;
+ line-height: 2rem;
}
-.skim .inner .item span {
- font-size: 0.667rem;
+.skim .inner .data .item span {
color: #4c9bfd;
+ font-size: 0.833rem;
+ width: 100%;
+ position: relative;
+ line-height: 2rem;
+}
+.skim .inner .data .item span::before {
+ content: ' ';
+ position: absolute;
+ top: 2px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 0;
+ background-image: linear-gradient(to right, #fff, #fff0);
+ height: 1px;
+ border-radius: 4px;
}
/* 用户行为 */
.userActivity {
- min-height: 22rem;
- height: 82%;
+ min-height: 35.8rem;
+ height: 66.3%;
}
.userActivity .inner .chart {
width: 100%;
@@ -146,15 +164,19 @@
margin-top: 1rem;
}
-/* 总流量 */
+/* 流量统计 */
.upfFlowTotal {
- min-height: 6.167rem;
- height: 14%;
+ min-height: 7.5rem;
+ height: 14.6%;
}
-.upfFlowTotal .inner .filter {
+.upfFlowTotal .inner h3 {
+ display: flex;
+ justify-content: space-between;
+}
+.upfFlowTotal .inner h3 .filter {
display: flex;
}
-.upfFlowTotal .inner .filter span {
+.upfFlowTotal .inner h3 .filter span {
display: block;
height: 0.75rem;
line-height: 1;
@@ -164,37 +186,46 @@
border-right: 0.083rem solid #00f2f1;
cursor: pointer;
}
-.upfFlowTotal .inner .filter span:first-child {
+.upfFlowTotal .inner h3 .filter span:first-child {
padding-left: 0;
}
-.upfFlowTotal .inner .filter span:last-child {
+.upfFlowTotal .inner h3 .filter span:last-child {
border-right: none;
}
-.upfFlowTotal .inner .filter span.active {
+.upfFlowTotal .inner h3 .filter span.active {
color: #fff;
font-size: 0.833rem;
}
-.upfFlowTotal .data {
+.upfFlowTotal .inner .chart {
+ width: 100%;
+ height: 100%;
+ margin-top: 1rem;
+}
+.upfFlowTotal .inner .chart .data {
display: flex;
- margin-top: 1.833rem;
+ flex-direction: column;
+ justify-content: space-around;
+ height: 72%;
}
-.upfFlowTotal .item {
- width: 50%;
+.upfFlowTotal .inner .chart .data .item {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
}
-.upfFlowTotal h4 {
- font-size: 1.167rem;
+.upfFlowTotal .inner .chart .data .item h4 {
+ font-size: 1.467rem;
color: #fff;
- margin-bottom: 0.417rem;
+ margin-bottom: 0;
}
-.upfFlowTotal span {
+.upfFlowTotal .inner .chart .data .item span {
color: #4c9bfd;
- font-size: 0.667rem;
+ font-size: 0.867rem;
}
/* 资源情况 */
.resources {
- min-height: 14rem;
- height: 26%;
+ min-height: 13.6rem;
+ height: 25.5%;
}
.resources .inner .chart {
width: 100%;
@@ -212,480 +243,3 @@
height: 100%;
margin-top: 1rem;
}
-
-/* 监控 */
-.monitor {
- height: 20rem;
-}
-.monitor .inner {
- padding: 1rem 0;
- display: flex;
- flex-direction: column;
-}
-.monitor .tabs {
- padding: 0 1.5rem;
- margin-bottom: 0.75rem;
-}
-.monitor .tabs a {
- color: #1950c4;
- font-size: 0.75rem;
- padding: 0 1.125rem;
-}
-
-.monitor .tabs a:first-child {
- border-right: 0.083rem solid #00f2f1;
- padding-left: 0;
-}
-
-.monitor .tabs a.active {
- color: #fff;
-}
-.monitor .content {
- flex: 1;
- display: none;
- position: relative;
-}
-.monitor .head {
- background: rgba(255, 255, 255, 0.1);
- font-size: 0.583rem;
- padding: 0.5rem 1.5rem;
- color: #68d8fe;
- display: flex;
- justify-content: space-between;
- line-height: 1.05;
-}
-.monitor .col:nth-child(1) {
- width: 3.2rem;
-}
-.monitor .col:nth-child(2) {
- width: 8.4rem;
- /* 不换行 一行省略*/
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.monitor .col:nth-child(3) {
- width: 3.2rem;
-}
-.monitor .marquee-view {
- position: absolute;
- top: 1.6rem;
- bottom: 0;
- width: 100%;
- overflow: hidden;
-}
-
-.monitor .row {
- line-height: 1.05;
- padding: 0.5rem 1.5rem;
- color: #61a8ff;
- font-size: 0.5rem;
- position: relative;
- display: flex;
- justify-content: space-between;
-}
-.monitor .row:hover {
- color: #68d8ff;
- background: rgba(255, 255, 255, 0.1);
-}
-.monitor .row:hover .icon-dot {
- opacity: 1;
-}
-
-.monitor .icon-dot {
- position: absolute;
- left: 0.64rem;
- opacity: 0;
-}
-.monitor .marquee-view {
- position: absolute;
- top: 1.6rem;
- bottom: 0;
- width: 100%;
- overflow: hidden;
-}
-
-.monitor .row {
- line-height: 1.05;
- padding: 0.5rem 1.5rem;
- color: #61a8ff;
- font-size: 0.5rem;
- position: relative;
- display: flex;
- justify-content: space-between;
-}
-.monitor .row:hover {
- color: #68d8ff;
- background: rgba(255, 255, 255, 0.1);
-}
-.monitor .row:hover .icon-dot {
- opacity: 1;
-}
-
-.monitor .icon-dot {
- position: absolute;
- left: 0.64rem;
- opacity: 0;
-}
-/* ------------------------------------------------------------动画 */
-@keyframes row {
- 0% {
- }
- 100% {
- transform: translateY(-50%);
- }
-}
-/* 调用动画 */
-.monitor .marquee {
- /* //infinite永久调用动画 */
- animation: row 10s linear infinite;
-}
-/*鼠标划入 停止动画 */
-.monitor .marquee:hover {
- animation-play-state: paused;
-}
-/* 点位 */
-.point {
- height: 14.167rem;
-}
-.point .chart {
- display: flex;
- margin-top: 1rem;
- justify-content: space-between;
-}
-.point .pie {
- width: 13rem;
- height: 10rem;
- margin-left: -0.4rem;
-}
-.point .data {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 7rem;
- padding: 1.5rem 1.25rem;
- box-sizing: border-box;
- background-image: url(../images/rect.png);
- background-size: cover;
-}
-.point h4 {
- margin-bottom: 0.5rem;
- font-size: 1.167rem;
- color: #fff;
-}
-.point span {
- display: block;
- color: #4c9bfd;
- font-size: 0.667rem;
-}
-/* 地图 */
-.map {
- height: 24.1rem;
- margin-bottom: 0.833rem;
- display: flex;
- flex-direction: column;
-}
-.map h3 {
- line-height: 1;
- padding: 0.667rem 0;
- margin: 0;
- font-size: 0.833rem;
- color: #fff;
-}
-.map .icon-cube {
- color: #68d8fe;
-}
-.map .chart {
- flex: 1;
- background-color: rgba(255, 255, 255, 0.05);
-}
-.map .geo {
- width: 100%;
- height: 100%;
-}
-/* 用户模块 */
-.users {
- height: 14.167rem;
- display: flex;
-}
-.users .chart {
- display: flex;
- margin-top: 1rem;
-}
-.users .bar {
- width: 24.5rem;
- height: 10rem;
-}
-.users .data {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 7rem;
- padding: 1.5rem 1.25rem;
- box-sizing: border-box;
- background-image: url(../images/rect.png);
- background-size: cover;
-}
-.users h4 {
- margin-bottom: 0.5rem;
- font-size: 1.167rem;
- color: #fff;
-}
-.users span {
- display: block;
- color: #4c9bfd;
- font-size: 0.667rem;
-}
-
-/* 销售区域 */
-.sales {
- height: 10.333rem;
-}
-.sales .caption {
- display: flex;
- line-height: 1;
-}
-.sales h3 {
- height: 0.75rem;
- padding-right: 0.75rem;
- border-right: 0.083rem solid #00f2f1;
-}
-.sales a {
- padding: 0.167rem;
- font-size: 0.667rem;
- margin: -0.125rem 0 0 0.875rem;
- border-radius: 0.125rem;
- color: #0bace6;
-}
-.sales a.active {
- background-color: #4c9bfd;
- color: #fff;
-}
-.sales .inner {
- display: flex;
- flex-direction: column;
-}
-.sales .chart {
- flex: 1;
- padding-top: 0.6rem;
- position: relative;
-}
-.sales .label {
- position: absolute;
- left: 1.75rem;
- top: 0.75rem;
- color: #4996f5;
- font-size: 0.583rem;
-}
-.sales .line {
- width: 100%;
- height: 100%;
-}
-/* 渠道区块 */
-.wrap {
- display: flex;
-}
-.channel,
-.quarter {
- flex: 1;
- height: 9.667rem;
-}
-.channel {
- margin-right: 0.833rem;
-}
-.channel .data {
- overflow: hidden;
-}
-.channel .item {
- margin-top: 0.85rem;
-}
-.channel .item:first-child {
- float: left;
-}
-.channel .item:last-child {
- float: right;
-}
-.channel h4 {
- color: #fff;
- font-size: 1.333rem;
- margin-bottom: 0.2rem;
-}
-.channel small {
- font-size: 50%;
-}
-.channel span {
- display: block;
- color: #4c9bfd;
- font-size: 0.583rem;
-}
-/* 季度区块 */
-.quarter .inner {
- display: flex;
- flex-direction: column;
- margin: 0 -0.25rem;
-}
-.quarter .chart {
- flex: 1;
- padding-top: 0.75rem;
-}
-.quarter .box {
- position: relative;
-}
-.quarter .label {
- transform: translate(-50%, -30%);
- color: #fff;
- font-size: 1.25rem;
- position: absolute;
- left: 50%;
- top: 50%;
-}
-.quarter .label small {
- font-size: 50%;
-}
-.quarter .gauge {
- height: 3.5rem;
-}
-.quarter .data {
- display: flex;
- justify-content: space-between;
-}
-.quarter .item {
- width: 50%;
-}
-.quarter h4 {
- color: #fff;
- font-size: 1rem;
- margin-bottom: 0.4rem;
-}
-.quarter span {
- display: block;
- width: 100%;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- color: #4c9bfd;
- font-size: 0.583rem;
-}
-/* 排行榜 */
-.top {
- height: 11.8rem;
-}
-.top .inner {
- display: flex;
-}
-.top .all {
- display: flex;
- flex-direction: column;
- width: 7rem;
- color: #4c9bfd;
- font-size: 0.6rem;
- vertical-align: middle;
-}
-.top .all ul {
- padding-left: 0.5rem;
- margin-top: 0.5rem;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
-}
-.top .all li {
- overflow: hidden;
-}
-.top .all [class^='icon-'] {
- font-size: 1.5rem;
- vertical-align: middle;
- margin-right: 0.5rem;
-}
-.top .province {
- flex: 1;
- display: flex;
- flex-direction: column;
- color: #fff;
-}
-.top .province i {
- padding: 0 0.5rem;
- margin-top: 0.208rem;
- float: right;
- font-style: normal;
- font-size: 0.583rem;
- color: #0bace6;
-}
-.top .province s {
- display: inline-block;
- transform: scale(0.8);
- text-decoration: none;
-}
-.top .province .icon-up {
- color: #dc3c33;
-}
-.top .province .icon-down {
- color: #36be90;
-}
-.top .province .data {
- flex: 1;
- display: flex;
- margin-top: 0.6rem;
-}
-.top .province ul {
- flex: 1;
- line-height: 1;
- margin-bottom: 0.25rem;
-}
-.top .province ul li {
- display: flex;
- justify-content: space-between;
-}
-.top .province ul span {
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-.top .province ul.sup {
- font-size: 0.583rem;
-}
-.top .province ul.sup li {
- color: #4995f4;
- padding: 0.5rem;
-}
-.top .province ul.sup li.active {
- color: #a3c6f2;
- background-color: rgba(10, 67, 188, 0.2);
-}
-.top .province ul.sub {
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- font-size: 0.5rem;
- background-color: rgba(10, 67, 188, 0.2);
-}
-.top .province ul.sub li {
- color: #52ffff;
- padding: 0.417rem 0.6rem;
-}
-.clock {
- position: absolute;
- top: -1.5rem;
- right: 1.667rem;
- font-size: 0.833rem;
- color: #0bace6;
-}
-.clock i {
- margin-right: 5px;
- font-size: 0.833rem;
-}
-@media screen and (max-width: 1600px) {
- .top span {
- transform: scale(0.9);
- }
- .top .province ul.sup li {
- padding: 0.4rem 0.5rem;
- }
- .top .province ul.sub li {
- padding: 0.23rem 0.5rem;
- }
- .quarter span {
- transform: scale(0.9);
- }
-}
diff --git a/src/views/dashboard/overview/index.vue b/src/views/dashboard/overview/index.vue
index 037deddb..2a74a0f6 100644
--- a/src/views/dashboard/overview/index.vue
+++ b/src/views/dashboard/overview/index.vue
@@ -1,5 +1,8 @@