yangg il y a 1 jour
Parent
commit
f0d4c9f3d9
1 fichiers modifiés avec 95 ajouts et 7 suppressions
  1. 95 7
      src/views/system/home/index.vue

+ 95 - 7
src/views/system/home/index.vue

@@ -26,7 +26,7 @@
 							<li>
 								<div v-if="panelSettings.deviceUtilization" class="boxall" :style="{ height: !panelSettings.borrowTrend ? '700px' : '360px' }">
 									<div class="alltitle">设备利用率趋势</div>
-									<div class="navboxall" id="echart5" style="height: 95%;"></div>
+									<div class="navboxall" id="echart5" style="height: 100%;"></div>
 								</div>
 								<div v-if="panelSettings.deviceRanking" class="boxall device-duration-container" :style="{ height: !panelSettings.borrowTrend ? '700px' : '340px' }">
 									<div class="alltitle">单台设备累计借用时长排名</div>
@@ -109,8 +109,8 @@
 									</div>
 								</div>
 								<div v-if="panelSettings.borrowTrend" class="boxall borrow-trend-container" :style="getBorrowTrendHeight()">
-									<div class="alltitle">整体设备借用次数趋势</div>
-									<div class="navboxall" id="echart3" :style="getBorrowTrendChartStyle()"></div>
+									<div class="alltitle">整体设备借用次数趋势</div><!-- getBorrowTrendChartStyle() -->
+									<div class="navboxall" id="echart3" style="width:100%;"></div>
 								</div>
 
 								<!-- <div class="boxall" style="height:350px">
@@ -287,12 +287,20 @@ export default defineComponent({
 			if (!document.fullscreenElement) {
 				element.requestFullscreen().then(() => {
 					isFullscreen.value = true;
+					// 全屏后重新初始化图表
+					setTimeout(() => {
+						reinitializeCharts();
+					}, 500);
 				}).catch(err => {
 					console.error(`全屏错误: ${err.message}`);
 				});
 			} else {
 				document.exitFullscreen().then(() => {
 					isFullscreen.value = false;
+					// 退出全屏后重新初始化图表
+					setTimeout(() => {
+						reinitializeCharts();
+					}, 500);
 				}).catch(err => {
 					console.error(`退出全屏错误: ${err.message}`);
 				});
@@ -670,12 +678,29 @@ export default defineComponent({
 						chartInstance.resize();
 					}
 				}
+				
+				// 处理echart5
+				const echart5 = document.getElementById('echart5');
+				if (echart5 && window.echarts) {
+					const chartInstance = window.echarts.getInstanceByDom(echart5);
+					if (chartInstance) {
+						chartInstance.resize();
+					}
+				}
 			});
 		};
 
 		// 监听全屏状态变化
-		watch(isFullscreen, () => {
+		watch(isFullscreen, (newValue) => {
+			console.log("Fullscreen status changed to:", newValue);
 			handleResize();
+			// 全屏状态变化时重新初始化图表
+			nextTick(() => {
+				setTimeout(() => {
+					console.log("Calling reinitializeCharts after fullscreen change");
+					reinitializeCharts();
+				}, 300); // 增加延迟时间,确保DOM更新完成
+			});
 		});
 
 		// 添加窗口大小变化监听器
@@ -765,8 +790,7 @@ export default defineComponent({
 					initPieChart();
 					initBarChart();
 					// 重新获取并更新图表数据
-					updateMonthlyUtilizationChart(state.utilizationData || []);
-					updateBorrowTrendChart(state.borrowTrendData || []);
+					reinitializeCharts();
 				}, 100);
 				
 				// 显示成功提示
@@ -889,10 +913,54 @@ export default defineComponent({
 			// 更新折线图数据
 			updateLineChart(data.application_trend);
 		};
+		// 重新初始化echart3和echart5图表
+		const reinitializeCharts = () => {
+			console.log("reinitializeCharts called");
+			console.log("borrowTrendData:", state.borrowTrendData);
+			console.log("utilizationData:", state.utilizationData);
+			
+			// 确保DOM元素存在
+			const echart3Element = document.getElementById('echart3');
+			const echart5Element = document.getElementById('echart5');
+			
+			if (!echart3Element) {
+				console.log("echart3 element not found");
+			}
+			if (!echart5Element) {
+				console.log("echart5 element not found");
+			}
+			
+			// 重新初始化echart3(借用趋势图)
+			if (state.borrowTrendData && state.borrowTrendData.length > 0 && echart3Element) {
+				console.log("Reinitializing echart3 with borrowTrendData");
+				updateBorrowTrendChart(state.borrowTrendData);
+			} else {
+				console.log("No borrowTrendData available for echart3 or element not found");
+			}
+			
+			// 重新初始化echart5(利用率趋势图)
+			if (state.utilizationData && state.utilizationData.length > 0 && echart5Element) {
+				console.log("Reinitializing echart5 with utilizationData");
+				updateMonthlyUtilizationChart(state.utilizationData);
+			} else {
+				console.log("No utilizationData available for echart5 or element not found");
+			}
+		};
+
 		//更新整体借用趋势
 		const updateBorrowTrendChart = (trendData: Array<{ date: string; borrow_count: number; total_duration: number }>) => {
 			const monthlyData =trendData /* groupByMonth()  */
 			console.log("monthlyData:::", monthlyData)
+			
+			// 先销毁旧的图表实例
+			const echart3Element = document.getElementById('echart3');
+			if (echart3Element) {
+				const existingChart = echarts.getInstanceByDom(echart3Element);
+				if (existingChart) {
+					existingChart.dispose();
+				}
+			}
+			
 			const echart3 = echarts.init(document.getElementById('echart3'));
 			if (!echart3) return;
 
@@ -981,6 +1049,11 @@ export default defineComponent({
 			};
 
 			echart3.setOption(option);
+			
+			// 强制重新渲染
+			setTimeout(() => {
+				echart3.resize();
+			}, 100);
 		};
 
 		const formatRange = (s: string) => {
@@ -992,9 +1065,19 @@ export default defineComponent({
 
 		//更新利用趋势图
 		const updateMonthlyUtilizationChart = (monthlyData: Array<{ date: string; utilization_rate: number }>) => {
+			console.log("updateMonthlyUtilizationChart called with data:", monthlyData);
+			
+			// 先销毁旧的图表实例
+			const echart5Element = document.getElementById('echart5');
+			if (echart5Element) {
+				const existingChart = echarts.getInstanceByDom(echart5Element);
+				if (existingChart) {
+					existingChart.dispose();
+				}
+			}
+			
 			const echart5 = echarts.init(document.getElementById('echart5'));
 			if (!echart5) return;
-			console.log(monthlyData);
 			
 
 			const option = {
@@ -1043,6 +1126,11 @@ export default defineComponent({
 			};
 
 			echart5.setOption(option);
+			
+			// 强制重新渲染
+			setTimeout(() => {
+				echart5.resize();
+			}, 100);
 		};
 
 		//更新设备信息