|
@@ -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);
|
|
|
};
|
|
|
|
|
|
//更新设备信息
|