boyue2025/boyue-ui-admin-vue3
3
0
Fork 0
mirror of https://gitee.com/myxzgzs/boyue-ui-admin-vue3 synced 2025-08-08 16:32:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: home 1

Browse Source
This commit is contained in:
alwayssuper 2025-02-27 09:52:04 +08:00
parent b7d6c94657
commit 9a3d1ad934
1 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/iot/home/index.vue
View File

@ -8,7 +8,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex justify-between items-center mb-1"> <div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">品类数量</span> <span class="text-gray-500 text-base font-medium">品类数量</span>
<Icon icon="ep:menu" class="text-2xl text-blue-400" /> <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.categoryTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.categoryTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
@ -24,7 +24,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex justify-between items-center mb-1"> <div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">产品数量</span> <span class="text-gray-500 text-base font-medium">产品数量</span>
<Icon icon="ep:box" class="text-2xl text-orange-400" /> <Icon icon="ep:box" class="text-[32px] text-orange-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.productTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.productTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
@ -40,7 +40,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex justify-between items-center mb-1"> <div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">设备数量</span> <span class="text-gray-500 text-base font-medium">设备数量</span>
<Icon icon="ep:cpu" class="text-2xl text-purple-400" /> <Icon icon="ep:cpu" class="text-[32px] text-purple-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.deviceTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.deviceTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
@ -56,7 +56,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="flex justify-between items-center mb-1"> <div class="flex justify-between items-center mb-1">
<span class="text-gray-500 text-base font-medium">物模型消息</span> <span class="text-gray-500 text-base font-medium">物模型消息</span>
<Icon icon="ep:message" class="text-2xl text-teal-400" /> <Icon icon="ep:message" class="text-[32px] text-teal-400" />
</div> </div>
<span class="text-3xl font-bold text-gray-700">{{ statsData.reportTotal }}</span> <span class="text-3xl font-bold text-gray-700">{{ statsData.reportTotal }}</span>
<el-divider class="my-2" /> <el-divider class="my-2" />
@ -236,12 +236,19 @@ const initCharts = () => {
/** 初始化仪表盘图表 */ /** 初始化仪表盘图表 */
const initGaugeChart = (el: any, value: number, color: string) => { const initGaugeChart = (el: any, value: number, color: string) => {
// 计算百分比，保留1位小数
const percentage = statsData.value.deviceTotal > 0
? Number(((value / statsData.value.deviceTotal) * 100).toFixed(1))
: 0
echarts.init(el).setOption({ echarts.init(el).setOption({
series: [ series: [
{ {
type: 'gauge', type: 'gauge',
startAngle: 360, startAngle: 360,
endAngle: 0, endAngle: 0,
min: 0,
max: 100, // 将最大值设为100
progress: { progress: {
show: true, show: true,
width: 12, width: 12,
@ -263,16 +270,29 @@ const initGaugeChart = (el: any, value: number, color: string) => {
title: { show: false }, title: { show: false },
detail: { detail: {
valueAnimation: true, valueAnimation: true,
fontSize: 24, fontSize: 20,
fontWeight: 'bold', fontWeight: 'bold',
fontFamily: 'Inter, sans-serif', fontFamily: 'Inter, sans-serif',
color: color, color: color,
offsetCenter: [0, '0'], offsetCenter: [0, '0'],
formatter: (value: number) => { formatter: (value: number) => {
return value + '个' return `${value}%\n(${statsData.value.deviceTotal > 0 ? Math.round((value / 100) * statsData.value.deviceTotal) : 0}个)`
},
rich: {
value: {
fontSize: 20,
fontWeight: 'bold',
color: color,
padding: [0, 0, 10, 0]
},
unit: {
fontSize: 14,
color: '#6B7280',
padding: [0, 0, 0, 0]
}
} }
}, },
data: [{ value: value }] data: [{ value: percentage }]
} }
] ]
}) })