From 042c09280227c3d855b7340c2b372e078fe86f0a Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Sun, 6 Apr 2025 15:51:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=B3=BB=E7=BB=9F=E9=A6=96?=
=?UTF-8?q?=E9=A1=B5=E7=9A=84=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/chart/options.ts | 12 +--
src/views/dashboard.vue | 160 ++++++++++++++++++-------------------
2 files changed, 82 insertions(+), 90 deletions(-)
diff --git a/src/views/chart/options.ts b/src/views/chart/options.ts
index 3cbce15..4faae57 100644
--- a/src/views/chart/options.ts
+++ b/src/views/chart/options.ts
@@ -67,7 +67,7 @@ export const lineOptions = {
export const pieOptions = {
title: {
- text: 'Referer of a Website',
+ text: '系统开发语言',
subtext: 'Fake Data',
left: 'center',
},
@@ -84,11 +84,11 @@ export const pieOptions = {
type: 'pie',
radius: '50%',
data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' },
+ { value: 1048, name: 'golang' },
+ { value: 735, name: 'Vue3' },
+ { value: 580, name: 'TypeScript' },
+ { value: 484, name: 'CSS' },
+ { value: 300, name: 'Python' },
],
emphasis: {
itemStyle: {
diff --git a/src/views/dashboard.vue b/src/views/dashboard.vue
index b891d21..4acbc1e 100644
--- a/src/views/dashboard.vue
+++ b/src/views/dashboard.vue
@@ -51,19 +51,19 @@
-
+
-
+
@@ -72,7 +72,7 @@
@@ -88,19 +88,18 @@
-
-
-
-
+
+
+ 饼状图
+
+
+
@@ -108,7 +107,7 @@
{{ rank.title }}
-
销量：{{ rank.value }}
+
使用量：{{ rank.value }}
import { ref, reactive } from 'vue';
import countup from '@/components/countup.vue';
+import { Function } from '@/types/function';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import {
@@ -140,9 +140,10 @@ import {
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
-import { dashOpt1, dashOpt2, mapOptions } from './chart/options';
+import { dashOpt1, dashOpt2, pieOptions } from './chart/options';
import chinaMap from '@/utils/china';
import {GetDashBoardStatisticsService} from '@/api/tool';
+import {FindFunctionService} from "@/api/function";
use([
CanvasRenderer,
BarChart,
@@ -155,7 +156,8 @@ use([
VisualMapComponent,
MapChart,
]);
-registerMap('china', chinaMap);
+const dashOpt2_ = reactive(dashOpt2);
+const dashOpt1_ = reactive(dashOpt1);
//"dashboard_statistics_st": {
// "session_num": 176,
@@ -172,71 +174,22 @@ interface DashBoardBaseInfo {
today_message_count: number;
}
const baseInfo = ref({} as DashBoardBaseInfo);
-const activities = [
- {
- content: '收藏商品',
- description: 'xxx收藏了你的商品，就是不买',
- timestamp: '30分钟前',
- color: '#00bcd4',
- },
- {
- content: '用户评价',
- description: 'xxx给了某某商品一个差评，吐血啊',
- timestamp: '55分钟前',
- color: '#1ABC9C',
- },
- {
- content: '订单提交',
- description: 'xxx提交了订单，快去收钱吧',
- timestamp: '1小时前',
- color: '#3f51b5',
- },
- {
- content: '退款申请',
- description: 'xxx申请了仅退款，又要亏钱了',
- timestamp: '15小时前',
- color: '#f44336',
- },
- {
- content: '商品上架',
- description: '运营专员瞒着你上架了一辆飞机',
- timestamp: '1天前',
- color: '#009688',
- },
-];
-const ranks = [
- {
- title: '手机',
- value: 10000,
- percent: 80,
- color: '#f25e43',
- },
- {
- title: '电脑',
- value: 8000,
- percent: 70,
- color: '#00bcd4',
- },
- {
- title: '相机',
- value: 6000,
- percent: 60,
- color: '#64d572',
- },
- {
- title: '衣服',
- value: 5000,
- percent: 55,
- color: '#e9a745',
- },
- {
- title: '书籍',
- value: 4000,
- percent: 50,
- color: '#009688',
- },
-];
+interface Activitie{
+ content: string;
+ description: string;
+ timestamp: string;
+ color: string;
+}
+const activities = ref([]);
+
+interface Rank {
+ title: string;
+ value: number;
+ percent: number;
+ color: string;
+}
+const ranks = ref([]);
const getDashBoardStatistics = async () => {
let req = {
@@ -246,11 +199,45 @@ const getDashBoardStatistics = async () => {
if (result['code'] === 0) {
console.log('dashboard:', result['data']);
baseInfo.value = result['data']["dashboard_statistics_st"];
+ dashOpt2_.series[0].data = result['data']["dashboard_statistics_model_st"];
+ let max_model = Math.max(...result['data']["dashboard_statistics_model_st"].map((item: any) => item.value));
+ ranks.value = result['data']["dashboard_statistics_model_st"].map((item: any) => {
+ return {
+ title: item.name,
+ value: item.value,
+ percent: (item.value / max_model*2) * 100,
+ color: '#2d8cf0',
+ };
+ });
+ ranks.value.sort((a, b) => b.value - a.value);
+ console.log('ranks:', ranks.value);
// 处理数据
- // 例如：更新图表数据、统计信息等
+ //过去一周会话、消息数
+ let sessionData = result['data']["dashboard_statistics_week"]["session_count"];
+ let messageData = result['data']["dashboard_statistics_week"]["message_count"];
+ let sessionCounts = sessionData.map((item: any) => item.count);
+ let messageCounts = messageData.map((item: any) => item.count);
+ dashOpt1_.series[0].data = sessionCounts;
+ dashOpt1_.series[1].data = messageCounts;
} else {
console.error('获取统计数据失败:', result['msg']);
}
+ let function_result = await FindFunctionService(req);
+ if (function_result['code'] === 0) {
+ let functions: Function[] = function_result['data'];
+ activities.value = functions.map((item: any) => {
+ return {
+ content: item.Name,
+ description: item.Function,
+ timestamp: item.CreatedAt,
+ color: '#2d8cf0',
+ };
+ });
+ activities.value.unshift({content: '基础管理功能',description: '系统基础管理功能开发',timestamp: "2024-03-23 12:21:42",color: '#2d8cf0'});
+ activities.value.push({content: '数据统计功能',description: '系统数据统计功能开发',timestamp: "2024-03-23 12:21:42",color: '#2d8cf0'});
+ } else {
+ console.error('获取统计数据失败:', function_result['msg']);
+ }
};
getDashBoardStatistics();
@@ -388,4 +375,9 @@ getDashBoardStatistics();
width: 100%;
height: 350px;
}
+.content-title {
+ font-weight: 400;
+ font-size: 22px;
+ color: #1f2f3d;
+}