yangg 1 dienu atpakaļ
vecāks
revīzija
8cfb6d5309
1 mainītis faili ar 79 papildinājumiem un 31 dzēšanām
  1. 79 31
      src/views/system/home/index.vue

+ 79 - 31
src/views/system/home/index.vue

@@ -11,6 +11,9 @@
 							<el-button class="fullscreen-btn" type="text" @click="toggleFullScreen">
 								<el-icon><FullScreen v-if="!isFullscreen"/><Aim v-else/></el-icon>
 							</el-button>
+							<el-button class="settings-btn" type="text" @click="openSettings">
+								<el-icon><Setting /></el-icon>
+							</el-button>
 						</div>
 						<h1>设备运维数据中心</h1>
 					</div>
@@ -18,11 +21,11 @@
 					<div class="mainbox">
 						<ul class="clearfix">
 							<li>
-								<div class="boxall" style="flex: 2;">
+								<div v-if="panelSettings.deviceUtilization" class="boxall" :style="{ flex: !panelSettings.deviceRanking ? 3.5 : 2 }">
 									<div class="alltitle">设备利用率趋势</div>
 									<div class="navboxall" id="echart5" style="height: 95%;"></div>
 								</div>
-								<div class="boxall" style="flex: 1.5; overflow: hidden;">
+								<div v-if="panelSettings.deviceRanking" class="boxall" :style="{ flex: !panelSettings.deviceUtilization ? 3.5 : 1.5, overflow: 'hidden' }">
 									<div class="alltitle">单台设备累计借用时长排名</div>
 									<div class="navboxall">
 										<div class="wraptit">
@@ -50,7 +53,7 @@
 							</li>
 
 							<li>
-								<div class="boxall" style="height:360px">
+								<div v-if="panelSettings.coreMetrics" class="boxall" :style="{ height: !panelSettings.borrowTrend ? '700px' : '360px' }">
 									<div class="alltitle">核心概览指标</div>
 									<div class="clearfix navboxall" style="height: 100%">
 										<div class="data-overview">
@@ -99,7 +102,7 @@
 										</div>
 									</div>
 								</div>
-								<div class="boxall" style="height:340px">
+								<div v-if="panelSettings.borrowTrend" class="boxall" :style="{ height: !panelSettings.coreMetrics ? '700px' : '340px' }">
 									<div class="alltitle">整体设备借用次数趋势</div>
 									<div class="navboxall" id="echart3" style="height: 95%;"></div>
 								</div>
@@ -122,7 +125,7 @@
 										<el-radio-button label="year">今年</el-radio-button>
 									</el-radio-group>
 								</div>
-								<div class="boxall" style="height:350px; overflow: hidden;">
+								<div v-if="panelSettings.deviceBorrowRanking" class="boxall" :style="{ height: !panelSettings.activeUsers ? '670px' : '350px', overflow: 'hidden' }">
 									<div class="alltitle">单台设备累计借用次数排名</div>
 									<div class="navboxall">
 
@@ -162,33 +165,13 @@
 											<el-table-column prop="borrow_count" label="借用次数" />
 										</el-table>
 
-										<!-- <div class="scroll-table-wrapper"> -->
-										<!-- 固定表头 -->
-
-
-										<!-- <div class="wraptit">
-											<span>排名</span><span>设备名称</span><span>设备编号</span><span>借用次数</span>
-										     </div> -->
-										<!-- 滚动内容区域 -->
-										<!-- <div class="scroll-body">
-											<div class="scroll-inner" :style="{ transform: `translateY(-${scrollOffset}px)` }">
-												<el-table :data="teamRankings" style="width: 100%" header-row-class-name="hidden-header">
-												<el-table-column type="index" width="80"/>
-												<el-table-column prop="device_name"/>
-												<el-table-column prop="device_code"/>
-												<el-table-column prop="borrow_count"/>
-												</el-table>
-											</div>
-											</div> -->
-										<!-- </div> -->
-
 									</div>
 
 
 								</div>
 
 
-								<div class="boxall" style="height:320px">
+								<div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '320px' }">
 									<div class="alltitle">活跃用户</div>
 									<div class="navboxall">
 										<div class="wraptit">
@@ -207,7 +190,6 @@
 											</ul>
 										</div>
 									</div>
-									<!-- <div class="navboxall" id="echart2" style="height: 95%;"></div> -->
 								</div>
 								<!-- <div class="boxall" style="height:300px">
 									<div class="alltitle">设备维修时间统计</div>
@@ -218,6 +200,29 @@
 				</div>
 			</el-col>
 		</el-row>
+		<!-- 设置弹窗 -->
+		<el-dialog
+			v-model="settingsDialogVisible"
+			title="面板设置"
+			width="500px"
+			:close-on-click-modal="false"
+			destroy-on-close
+		>
+			<div class="panel-settings">
+				<el-checkbox v-model="panelSettings.deviceUtilization">设备利用率趋势</el-checkbox>
+				<el-checkbox v-model="panelSettings.deviceRanking">单台设备累计借用时长排名</el-checkbox>
+				<el-checkbox v-model="panelSettings.coreMetrics">核心概览指标</el-checkbox>
+				<el-checkbox v-model="panelSettings.borrowTrend">整体设备借用次数趋势</el-checkbox>
+				<el-checkbox v-model="panelSettings.deviceBorrowRanking">单台设备累计借用次数排名</el-checkbox>
+				<el-checkbox v-model="panelSettings.activeUsers">活跃用户</el-checkbox>
+			</div>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="() => state.settingsDialogVisible = false">取消</el-button>
+					<el-button type="primary" @click="saveSettings">确定</el-button>
+				</span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
@@ -232,7 +237,7 @@ import { useRouter } from 'vue-router';
 import { request } from '/@/utils/service';
 import dayjs from 'dayjs';
 import { GetList } from '../devicelabel/api'
-import { FullScreen, Aim } from '@element-plus/icons-vue'
+import { FullScreen, Aim, Setting } from '@element-plus/icons-vue'
 
 
 
@@ -313,6 +318,15 @@ export default defineComponent({
 				today_returned: 0,
 				total_borrows: 0
 			},
+			panelSettings: {
+				deviceUtilization: true, // 设备利用率趋势
+				deviceRanking: true,    // 单台设备累计借用时长排名
+				coreMetrics: true,      // 核心概览指标
+				borrowTrend: true,      // 整体设备借用次数趋势
+				deviceBorrowRanking: true, // 单台设备累计借用次数排名
+				activeUsers: true,      // 活跃用户
+			},
+			settingsDialogVisible: false,
 			homeOne: [],
 			homeThree: [],
 			myCharts: [],
@@ -584,7 +598,12 @@ export default defineComponent({
 			initEchartsResize();
 			initTime(); // 初始化时间显示
 			// initHeroScroll(); // 添加英雄数据轮播初始化
-			getList()
+			getList();
+			// 从本地存储加载面板设置
+			const savedSettings = localStorage.getItem('dashboardPanelSettings');
+			if (savedSettings) {
+				state.panelSettings = JSON.parse(savedSettings);
+			}
 			nextTick(() => {
 
 			});
@@ -995,6 +1014,9 @@ export default defineComponent({
 
 
 
+		const settingsDialogVisible = computed(() => state.settingsDialogVisible);
+		const panelSettings = computed(() => state.panelSettings);
+
 		return {
 			homeLineRef,
 			homePieRef,
@@ -1008,11 +1030,25 @@ export default defineComponent({
 			handleQuickRange,
 			fetchRankings,
 			scrollOffset,
-			...toRefs(state),
+			devicedata: computed(() => state.devicedata),
+			heroData: computed(() => state.heroData),
+			userList: computed(() => state.userList),
+			teamRankings: computed(() => state.teamRankings),
+			settingsDialogVisible,
+			panelSettings,
 			isFullscreen,
 			toggleFullScreen,
+			// 打开设置弹窗
+			openSettings: () => {
+				state.settingsDialogVisible = true;
+			},
+			// 保存设置
+			saveSettings: () => {
+				state.settingsDialogVisible = false;
+				// 可以在这里添加保存到本地存储的逻辑
+				localStorage.setItem('dashboardPanelSettings', JSON.stringify(state.panelSettings));
+			},
 		};
-
 	},
 });
 
@@ -1694,6 +1730,18 @@ $homeNavLengh: 8;
 			}
 		}
 	}
+	}
 }
+
+.panel-settings {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 20px;
+	padding: 20px;
+
+	.el-checkbox {
+		margin-right: 0;
+		color: #606266;
+	}
 }
 </style>