From dc28fb65ba1b16569cd61bce6385b4e954f48661 Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Thu, 9 Oct 2025 14:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E9=A2=91=E6=AC=A1=E6=B7=BB?=
=?UTF-8?q?=E5=8A=A0=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.env.development | 4 +-
.../homeIndex/components/DeviceUsage.vue | 154 ++++++++++++++----
2 files changed, 122 insertions(+), 36 deletions(-)
diff --git a/.env.development b/.env.development
index c07c55a..fef6581 100644
--- a/.env.development
+++ b/.env.development
@@ -6,8 +6,8 @@ VITE_APP_ENV = 'development'
# 开发环境
#VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
-# VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
-VITE_APP_BASE_API = 'http://192.168.110.56:8000'
+ VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
+#VITE_APP_BASE_API = 'http://192.168.2.34:8000'
#代永飞接口
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
diff --git a/src/views/homeIndex/components/DeviceUsage.vue b/src/views/homeIndex/components/DeviceUsage.vue
index cc153e1..35121e3 100644
--- a/src/views/homeIndex/components/DeviceUsage.vue
+++ b/src/views/homeIndex/components/DeviceUsage.vue
@@ -4,8 +4,9 @@
近一月
近半年
-
-
+
@@ -14,19 +15,46 @@ import * as echarts from 'echarts';
import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
const chartRef = ref(null);
+const chartContainerRef = ref(null);
const activeTab = ref('month');
-let myChart: echarts.ECharts | null = null; // 保存图表实例
-let dataTimer: NodeJS.Timeout | null = null; // 数据更新定时器
+const showScroll = ref(false); // 控制是否显示滚动条
+let myChart: echarts.ECharts | null = null;
+let dataTimer: NodeJS.Timeout | null = null;
// 根据天数获取数据并更新图表
const fetchDataAndUpdate = (days: number) => {
getDeviceUsageFrequency({ days }).then((res) => {
if (res.code === 200 && res.data && myChart) {
- //（转换为图表所需格式）
+ // 模拟数据（根据需求调整数量）
+ const dataCount = activeTab.value === 'month' ? 8 : 25; // 一月8条，半年25条
+ const mockData = Array.from({ length: dataCount }, (_, index) => ({
+ deviceName: `设备${index + 1}`,
+ frequency: Math.floor(Math.random() * 100)
+ }));
const chartData = res.data.map(item => ({
name: item.deviceName,
value: item.frequency
}));
+ const scrollThreshold = 20;
+ showScroll.value = chartData.length > scrollThreshold;
+
+ // 动态计算图表高度
+ const baseItemHeight = 20;
+ const minHeight = 200;
+ const maxHeight = 600;
+
+ let chartHeight;
+ if (showScroll.value) {
+
+ chartHeight = Math.min(chartData.length * baseItemHeight, maxHeight);
+ } else {
+ chartHeight = Math.max(chartData.length * baseItemHeight, minHeight);
+ }
+
+ if (chartRef.value) {
+ chartRef.value.style.height = `${chartHeight}px`;
+ }
+
// 更新图表
myChart.setOption({
yAxis: {
@@ -36,21 +64,30 @@ const fetchDataAndUpdate = (days: number) => {
data: chartData.map(item => item.value)
}]
});
+
+ // 数据更新后，重新调整图表尺寸
+ setTimeout(() => {
+ if (myChart) {
+ myChart.resize();
+ }
+ }, 0);
}
}).catch(err => {
- console.error('获取数据失败', err);
+ console.error(err);
});
};
// 切换标签逻辑
const switchTab = (tab: string) => {
activeTab.value = tab;
- // 根据标签切换天数（近一月=30天，近半年=180天）
const days = tab === 'month' ? 30 : 180;
fetchDataAndUpdate(days);
-
- // 切换标签后重新启动定时器
startDataTimer();
+
+ // 重置滚动位置
+ if (chartContainerRef.value) {
+ chartContainerRef.value.scrollTop = 10;
+ }
};
// 开始数据定时器
@@ -58,7 +95,6 @@ const startDataTimer = () => {
if (dataTimer) {
clearInterval(dataTimer);
}
- // 每300秒（5分钟）更新一次数据
dataTimer = setInterval(() => {
const days = activeTab.value === 'month' ? 30 : 180;
fetchDataAndUpdate(days);
@@ -76,23 +112,24 @@ const clearDataTimer = () => {
// 初始化图表
const initChart = () => {
if (!chartRef.value) return;
-
+
myChart = echarts.init(chartRef.value);
const option = {
tooltip: {
trigger: 'axis',
- axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
+ axisPointer: { type: 'shadow' }
},
grid: {
left: '5%',
- right: '10%',
- bottom: '3%',
- top: '20%',
+ right: '5%',
+ bottom: '2%',
+ top: '12%',
containLabel: true
},
yAxis: {
type: 'category',
- data: [], // 初始空数据
+ inverse: true,
+ data: [],
axisLine: {
lineStyle: {
color: '#1e3a8a',
@@ -100,26 +137,37 @@ const initChart = () => {
}
},
axisLabel: {
- color: '#DEEFFF'
+ color: '#DEEFFF',
+ fontSize: 12
+ },
+ axisTick: {
+ alignWithLabel: true
}
},
xAxis: {
type: 'value',
axisLine: { show: false },
axisLabel: { show: false },
- splitLine: { show: false }
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(30, 58, 138, 0.3)',
+ type: 'dashed'
+ }
+ }
},
series: [{
name: '使用频次',
type: 'bar',
- data: [], // 初始空数据
- barWidth: '9px',
+ data: [],
+ barWidth: '12px',
stack: 'total',
label: {
show: true,
position: 'right',
valueAnimation: true,
- color: '#DEEFFF'
+ color: '#DEEFFF',
+ fontSize: 11
},
itemStyle: {
color: new echarts.graphic.LinearGradient(
@@ -130,15 +178,14 @@ const initChart = () => {
]
),
borderRadius: 4
- }
+ },
+ barGap: '30%',
+ barCategoryGap: '40%'
}]
};
myChart.setOption(option);
-
- // 初始化数据
+
fetchDataAndUpdate(30);
-
- // 启动定时器
startDataTimer();
};
@@ -155,11 +202,8 @@ onMounted(() => {
});
onUnmounted(() => {
- // 清除定时器
clearDataTimer();
- // 移除事件监听
window.removeEventListener('resize', handleResize);
- // 销毁图表实例
if (myChart) {
myChart.dispose();
myChart = null;
@@ -170,7 +214,8 @@ onUnmounted(() => {
\ No newline at end of file