From ece5b7b7d24f85a3253cf722291e69ca7a406192 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期二, 16 八月 2022 13:05:18 +0800
Subject: [PATCH] 完善大屏
---
src/views/dataView/index.vue | 120 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 85 insertions(+), 35 deletions(-)
diff --git a/src/views/dataView/index.vue b/src/views/dataView/index.vue
index 7942f46..60882a8 100644
--- a/src/views/dataView/index.vue
+++ b/src/views/dataView/index.vue
@@ -36,40 +36,22 @@
</div>
<div class="device-count">
<img src="/images/data-v/d-total.png" alt="" />
- <div
- style="position: absolute;
- top: 43%;
- left: 36%;
- font-size: 26px;
- color: #d9d6d6;"
- >
- 璁惧鎬婚噺
- </div>
- <div
- style="position: absolute;
- top: 59%;
- left: 45%;
- font-size: 26px;
- color: #ffffff;"
- >
- 6
+ <div class="device-total">
+ <p>璁惧鎬婚噺</p>
+ <p style="color:#FFF">6</p>
</div>
- <div
- class="online"
- style="position: absolute;
- right: 23%;
- top: 17%;"
- >
+ <div class="device-online">
<img src="/images/data-v/online.png" alt="" />
+
+ <p style="margin-top: 10px;">鍦ㄧ嚎</p>
+ <p style="color:#FFF">6</p>
</div>
- <div
- class="offline"
- style="position: absolute;
- right: 23%;
- top: 58%;"
- >
+ <div class="device-offline">
<img src="/images/data-v/offline.png" alt="" />
+
+ <p style="margin-top: 10px;">绂荤嚎</p>
+ <p style="color:#FFF">0</p>
</div>
</div>
</div>
@@ -100,6 +82,36 @@
lineChart: {},
pieChart: {},
barChart: {},
+ top10: [
+ {
+ name: "浜轰簨",
+ value: 230
+ },
+ {
+ name: "浜轰簨",
+ value: 230
+ },
+ {
+ name: "浜轰簨",
+ value: 230
+ },
+ {
+ name: "浜轰簨",
+ value: 230
+ },
+ {
+ name: "浜轰簨",
+ value: 230
+ },
+ {
+ name: "浜轰簨",
+ value: 230
+ },
+ {
+ name: "浜轰簨",
+ value: 230
+ }
+ ],
lineChartOption: {
grid: {
left: "3%",
@@ -287,8 +299,12 @@
]
},
pieChartOption: {
+ tooltip: {
+ trigger: "item"
+ },
legend: {
- top: "bottom"
+ top: "70%",
+ bottom: "center"
},
color: [
"rgb(54, 60, 231)",
@@ -302,16 +318,21 @@
{
name: "Nightingale Chart",
type: "pie",
- radius: [20, 160],
- center: ["50%", "50%"],
- roseType: "area",
+ radius: [60, 80],
+ center: ["50%", "40%"],
+ // roseType: "area",
itemStyle: {
- borderRadius: 8
+ borderRadius: 10
},
label: {
show: false
},
- data: [23, 55, 11, 33, 22, 66]
+ data: [
+ { value: 22, name: "a" },
+ { value: 22, name: "b" },
+ { value: 33, name: "c" },
+ { value: 35, name: "d" }
+ ]
}
]
}
@@ -575,4 +596,33 @@
margin-top: 35px;
margin-left: 68px;
}
+.device-total {
+ position: absolute;
+ top: 43%;
+ left: 36%;
+ font-size: 26px;
+ color: rgb(217, 214, 214);
+ text-align: center;
+}
+.device-online {
+ position: absolute;
+ width: 30%;
+ top: 22%;
+ right: 4%;
+ color: rgb(217, 214, 214);
+}
+
+.device-online img,
+.device-offline img {
+ float: left;
+ margin-right: 10px;
+}
+
+.device-offline {
+ position: absolute;
+ width: 30%;
+ top: 57%;
+ right: 4%;
+ color: rgb(217, 214, 214);
+}
</style>
--
Gitblit v1.8.0