From dad0474e3ee6c2c58fd2338733fa7d0652c82f5b Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期二, 25 十月 2022 09:29:41 +0800
Subject: [PATCH] feat: 增加用户总览
---
src/views/index/left-center.vue | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++
src/mock/mock-index.ts | 9 +-
src/views/index/index.vue | 4 +
3 files changed, 160 insertions(+), 5 deletions(-)
diff --git a/src/mock/mock-index.ts b/src/mock/mock-index.ts
index b9efa66..6442cfa 100644
--- a/src/mock/mock-index.ts
+++ b/src/mock/mock-index.ts
@@ -10,12 +10,13 @@
const a = Mock.mock({
success: true,
data: {
- offlineNum: '@integer(1, 100)',
- lockNum: '@integer(1, 10)',
- totalNum: 218
+ offlineNum: '@integer(50, 100)',
+ alarmNum: '@integer(20, 100)',
+ lockNum: '@integer(10, 50)',
+ totalNum: 368
}
})
- a.data.onlineNum = a.data.totalNum - a.data.offlineNum - a.data.lockNum
+ a.data.onlineNum = a.data.totalNum - a.data.offlineNum - a.data.lockNum-a.data.alarmNum
return a
},
},
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 59d1174..e538b84 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,6 +1,8 @@
<script setup lang="ts">
import ItemWrap from "@/components/item-wrap";
import LeftTop from "./left-top.vue";
+import LeftCenter from "./left-center.vue";
+
</script>
<template>
@@ -14,7 +16,7 @@
<LeftTop />
</ItemWrap>
<ItemWrap class="contetn_left-center contetn_lr-item" title="鐢ㄦ埛鎬昏">
- <!-- <LeftCenter /> -->
+ <LeftCenter />
</ItemWrap>
<ItemWrap
class="contetn_left-bottom contetn_lr-item"
diff --git a/src/views/index/left-center.vue b/src/views/index/left-center.vue
new file mode 100644
index 0000000..7b88b4e
--- /dev/null
+++ b/src/views/index/left-center.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { graphic } from "echarts/core";
+import { currentGET } from "@/api";
+
+let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
+const option = ref({});
+const state = reactive({
+ lockNum: 0,
+ offlineNum: 0,
+ onlineNum: 0,
+ alarmNum: 0,
+ totalNum: 0,
+});
+const echartsGraphic = (colors: string[]) => {
+ return new graphic.LinearGradient(1, 0, 0, 0, [
+ { offset: 0, color: colors[0] },
+ { offset: 1, color: colors[1] },
+ ]);
+};
+const getData = () => {
+ currentGET("leftCenter").then((res) => {
+ console.log(res);
+ if (res.success) {
+ state.lockNum = res.data.lockNum;
+ state.offlineNum = res.data.offlineNum;
+ state.onlineNum = res.data.onlineNum;
+ state.totalNum = res.data.totalNum;
+ state.alarmNum = res.data.alarmNum;
+ setOption();
+ }
+ });
+};
+getData();
+const setOption = () => {
+ option.value = {
+ title: {
+ top: "center",
+ left: "center",
+ text: [`{value|${state.totalNum}}`, "{name|鎬绘暟}"].join("\n"),
+ textStyle: {
+ rich: {
+ value: {
+ color: "#ffffff",
+ fontSize: 24,
+ fontWeight: "bold",
+ lineHeight: 20,
+ padding:[4,0,4,0]
+ },
+ name: {
+ color: "#ffffff",
+ lineHeight: 20,
+ },
+ },
+ },
+ },
+ tooltip: {
+ trigger: "item",
+ backgroundColor: "rgba(0,0,0,.6)",
+ borderColor: "rgba(147, 235, 248, .8)",
+ textStyle: {
+ color: "#FFF",
+ },
+ },
+ series: [
+ {
+ name: "鐢ㄦ埛鎬昏",
+ type: "pie",
+ radius: ["40%", "70%"],
+ // avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 6,
+ borderColor: "rgba(255,255,255,0)",
+ borderWidth: 2,
+ },
+ color: colors,
+ label: {
+ show: true,
+ formatter: " {b|{b}} \n {c|{c}涓獇 {per|{d}%} ",
+ // position: "outside",
+ rich: {
+ b: {
+ color: "#fff",
+ fontSize: 12,
+ lineHeight: 26,
+ },
+ c: {
+ color: "#31ABE3",
+ fontSize: 14,
+ },
+ per: {
+ color: "#31ABE3",
+ fontSize: 14,
+ },
+ },
+ },
+ emphasis: {
+ show: false,
+ },
+ legend: {
+ show: false,
+ },
+ tooltip: { show: true },
+
+ labelLine: {
+ show: true,
+ length: 20, // 绗竴娈电嚎 闀垮害
+ length2: 36, // 绗簩娈电嚎 闀垮害
+ smooth: 0.2,
+ lineStyle: {},
+ },
+ data: [
+ {
+ value: state.onlineNum,
+ name: "鍦ㄧ嚎",
+ itemStyle: {
+ color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
+ },
+ },
+ {
+ value: state.offlineNum,
+ name: "绂荤嚎",
+ itemStyle: {
+ color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
+ },
+ },
+ {
+ value: state.lockNum,
+ name: "閿佸畾",
+ itemStyle: {
+ color: echartsGraphic(["#F48C02", "#FDDB7D"]),
+ },
+ },
+ {
+ value: state.alarmNum,
+ name: "寮傚父",
+ itemStyle: {
+ color: echartsGraphic(["#F4023C", "#FB6CB7"]),
+ },
+ },
+ ],
+ },
+ ],
+ };
+};
+</script>
+
+<template>
+ <v-chart class="chart" :option="option" />
+</template>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0