<template>
	<div class="home-container">

		<!-- 添加英雄联盟数据可视化部分 -->
		<el-row :gutter="15" class="lol-data-section">
			<el-col :span="24">
				<div class="lol-container">
					<div class="head">
						<div class="weather">
							<span id="showTime" style="font-size: 20px;"></span>
							<el-button class="fullscreen-btn" type="text" @click="refreshPageData" :disabled="isRefreshing" title="刷新数据">
								<el-icon :size="20" :class="{ 'refresh-rotating': isRefreshing }"><Refresh /></el-icon>
							</el-button>
							<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="fullscreen-btn" type="text" @click="openSettings">
								<el-icon :size="40"><Setting /></el-icon>
							</el-button>
						</div>
						<h1>设备运维数据中心</h1>
					</div>

					<div class="mainbox">
						<ul class="clearfix">
							<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: 100%;"></div>
								</div>
								<div v-if="panelSettings.deviceRanking" class="boxall device-duration-container" :style="{ height: !panelSettings.borrowTrend ? '700px' : '340px' }">
									<div class="alltitle">单台设备累计借用时长排名</div>
									<div class="navboxall">
										<div class="wraptit">
											<span style="flex: 0 0 50px;text-align: center;">排名</span>
											<span  style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">设备名称</span>
											<span  style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">设备编号</span>
											<span style="flex: 0 0 80px;text-align: center;">借用时长</span>
										</div>
										<div class="wrap device-duration-list">
											<ul>
												<li v-for="(hero, index) in heroData" :key="index" style="width: 100%;padding:5px 0 ;border-bottom: 1px solid #232e63 ;">
													<div
														style="display: flex;justify-content: space-between; width: 100%;">
														<span style="flex: 0 0 50px;text-align: center;">{{ index + 1 }}</span>
														<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">{{ hero.device_name }}</span>
														<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">{{ hero.device_code }}</span>
														<span style="flex: 0 0 80px;text-align: center;">{{ hero.total_duration }}</span>
													</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<!-- <div class="boxall" style="height:260px; overflow: hidden;">
									<div class="alltitle">设备故障统计</div>
									<div class="navboxall" id="echart1" style="height: 95%;"></div>
								</div> -->
							</li>

							<li>
								<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">
											<div class="data-card total-devices">
												<div class="card-content">
													<div class="card-title">设备总库存数</div>
													<div class="card-value">{{ devicedata?.total_devices ?? 0 }}<span
															class="card-unit"></span></div>
												</div>
											</div>
											<div class="data-card borrowed">
												<div class="card-content">
													<div class="card-title">在借数</div>
													<div class="card-value">{{ devicedata?.borrowed_devices ?? 0 }}<span
															class="card-unit"></span></div>
												</div>
											</div>
											<div class="data-card available">
												<div class="card-content">
													<div class="card-title">在库数</div>
													<div class="card-value">{{ devicedata?.available_devices ?? 0 }}<span
															class="card-unit"></span></div>
												</div>
											</div>
											<div class="data-card today-borrowed">
												<div class="card-content">
													<div class="card-title">今日归还</div>
													<div class="card-value">{{ devicedata?.today_returned ?? 0 }}<span
															class="card-unit"></span></div>
												</div>
											</div>
											<div class="data-card today-returned">
												<div class="card-content">
													<div class="card-title">今日借出</div>
													<div class="card-value">{{ devicedata?.today_borrowed ?? 0 }}</div>
												</div>
											</div>
											<div class="data-card total-borrows">
												<div class="card-content">
													<div class="card-title">累计借用次数</div>
													<div class="card-value">{{ devicedata?.total_borrows ?? 0 }}<span
															class="card-unit"></span></div>
													<!-- <div class="card-subtitle">bobel (借出总数)</div> -->
												</div>
											</div>
										</div>
									</div>
								</div>
								<div v-if="panelSettings.borrowTrend" class="boxall borrow-trend-container" :style="getBorrowTrendHeight()">
									<div class="alltitle">整体设备借用次数趋势</div><!-- getBorrowTrendChartStyle() -->
									<div class="navboxall" id="echart3" style="width:100%;"></div>
								</div>

								<!-- <div class="boxall" style="height:350px">
									<div class="alltitle">设备实时执行情况</div>
									<div class="navboxall" id="echart4" style="height: 95%;"></div>
								</div> -->

							</li>

							<li>

								<!-- <div class="timeselect" style="height:30px">
									
									<el-radio-group class="transparent-radio" v-model="quickRange"
										@change="handleQuickRange">
										<el-radio-button label="day">今日</el-radio-button>
										<el-radio-button label="month">本月</el-radio-button>
										<el-radio-button label="year">今年</el-radio-button>
									</el-radio-group>
								</div> -->
								<div v-if="panelSettings.deviceBorrowRanking" class="boxall device-count-container">
									<div class="alltitle">单台设备累计借用次数排名</div>
									<div class="navboxall">
										<div class="wraptit">
											<span style="flex: 0 0 50px;text-align: center;">排名</span>
											<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">设备名称</span>
											<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">设备编号</span>
											<span style="flex: 0 0 80px;text-align: center;">借用次数</span>
										</div>
										<div class="wrap device-count-list">
											<ul>
												<li v-for="(hero, index) in teamRankings" :key="index" style="width: 100%;padding:5px 0 ;border-bottom: 1px solid #232e63 ;">
													<div
														style="display: flex;justify-content: space-between; width: 100%;">
														<span style="flex: 0 0 50px;text-align: center;">{{ index + 1 }}</span>
														<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">{{ hero.device_name }}</span>
														<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">{{ hero.device_code }}</span>
														<span style="flex: 0 0 80px;text-align: center;">{{ hero.borrow_count }}</span>
													</div>
												</li>
											</ul>
										</div>
										<!-- <el-table :data="teamRankings" style="width: 100%;height: 95%;">
											<el-table-column type="index" label="排名" width="80" />
											<el-table-column prop="device_name" label="设备名称" />
											 <el-table-column prop="device_name" label="标签名">
												<template #default="scope">
													<span v-for="tag in scope.row.device_tags" :key="tag" :type="tag.type">{{' '+tag.name }}</span>
												</template>
											</el-table-column>
											<el-table-column prop="borrow_count" label="借用次数" />
										</el-table> -->

									</div>


								</div>


								<div v-if="panelSettings.activeUsers" class="boxall active-users-container">
									<div class="alltitle">活跃用户排名</div>
									<div class="navboxall">
										<div class="wraptit">
											<span style="flex: 0 0 50px;text-align: center;">排名</span>
											<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">用户名</span>
											<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">学号/工号</span>
											<span style="flex: 0 0 80px;text-align: center;">总借用次数</span>
										</div>
										<div class="wrap active-users-list">
											<ul>
												<li v-for="(hero, index) in userList" :key="index" style="width: 100%;padding:5px 0 ;border-bottom: 1px solid #232e63 ;">
													<div
														style="display: flex;justify-content: space-between; width: 100%;">
														<span style="flex: 0 0 50px;text-align: center;">{{ index + 1 }}</span>
														<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">{{ hero.user_name }}</span>
														<span style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 5px;">{{ hero.user_code }}</span>
														<span style="flex: 0 0 80px;text-align: center;">{{ hero.borrow_count }}</span>
													</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<!-- <div class="boxall" style="height:300px">
									<div class="alltitle">设备维修时间统计</div>
								</div> -->
							</li>
						</ul>
					</div>
				</div>
			</el-col>
		</el-row>
		<!-- 设置弹窗 -->
		<el-dialog
			v-model="settingsDialogVisible"
			title="面板设置"
			width="500px"
			:close-on-click-modal="false"
			destroy-on-close
			:before-close="handleClose"
		>
			<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="handleClose">取消</el-button>
					<el-button type="primary" @click="saveSettings">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, onUnmounted, ref, watch, nextTick, onActivated, computed } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import * as api from './api';
import { useRouter } from 'vue-router';
import { request } from '/@/utils/service';
import dayjs from 'dayjs';
import { GetList } from '../devicelabel/api'
import { FullScreen, Aim, Setting, Refresh } from '@element-plus/icons-vue'
import { Session, Local } from '/@/utils/storage';
import { ElMessage } from 'element-plus';



// 定义API数据接口
interface ApiData {
	total_applications: number;
	total_positions: number;
	total_questions: number;
	total_reports: number;
	application_trend: Array<{
		date: string;
		count: number;
	}>;
}

let global: any = {
	homeChartOne: null,
	homeChartTwo: null,
	homeCharThree: null,
	dispose: [null, '', undefined],
};

export default defineComponent({
	name: 'home',
	components: {
		FullScreen,
		Aim,
		Refresh
	},
	setup() {

		const scrollOffset = ref(0)
		const isFullscreen = ref(false)
		const isRefreshing = ref(false)

		// 切换全屏
		const toggleFullScreen = () => {
			const element = document.querySelector('.home-container') as HTMLElement;
			if (!element) return;

			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}`);
				});
			}
		};
		let intervalId: number | null = null
		const rowHeight = 50
		const visibleRows = 6



		const selectedType = ref('all');
		const dateRange = ref<[string, string] | null>(null);
		const deviceTagId=ref('')
		const quickRange = ref('');
		const labelType=ref([])

		const homeLineRef = ref();
		const homePieRef = ref();
		const homeBarRef = ref();
		const storesTagsViewRoutes = useTagsViewRoutes();
		const storesThemeConfig = useThemeConfig();
		const { themeConfig } = storeToRefs(storesThemeConfig);
		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
		const state = reactive({
			devicedata: {
				total_devices: 0,
				borrowed_devices: 0,
				available_devices: 0,
				today_borrowed: 0,
				today_returned: 0,
				total_borrows: 0
			},
			panelSettings: {
				deviceUtilization: true, // 设备利用率趋势
				deviceRanking: true,    // 单台设备累计借用时长排名
				coreMetrics: true,      // 核心概览指标
				borrowTrend: true,      // 整体设备借用次数趋势
				deviceBorrowRanking: true, // 单台设备累计借用次数排名
				activeUsers: true,      // 活跃用户
			},
			settingsDialogVisible: false,
			homeOne: [] as Array<{ num1: string }>,
			homeThree: [],
			myCharts: [],
			charts: {
				theme: '',
				bgColor: '',
				color: '#303133',
			},
			apiData: null as ApiData | null,

			heroData: [] as any[],
			userList: [] as any[],/* 用户统计列表 */
			teamRankings: [] as any[],
			utilizationData: [] as any[], // 利用率趋势数据
			borrowTrendData: [] as any[]  // 借用趋势数据
		});
		const router = useRouter();



		const handleClose=()=>{
			state.settingsDialogVisible = false;
		}


		// 折线图
		const initLineChart = () => {
			if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
			global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
			const option = {
				backgroundColor: state.charts.bgColor,
				title: {
					text: '申请趋势',
					x: 'left',
					textStyle: { fontSize: '15', color: state.charts.color },
				},
				grid: { top: 70, right: 20, bottom: 30, left: 30 },
				tooltip: { trigger: 'axis' },
				legend: { data: ['申请数量'], right: 0 },
				xAxis: {
					data: state.apiData?.application_trend?.map((item: { date: string; count: number }) => item.date.substring(5)) ||
						['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				},
				yAxis: [
					{
						type: 'value',
						name: '数量',
						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
					},
				],
				series: [
					{
						name: '申请数量',
						type: 'line',
						symbolSize: 6,
						symbol: 'circle',
						smooth: true,
						data: state.apiData?.application_trend?.map((item: { date: string; count: number }) => item.count) ||
							[0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
						lineStyle: { color: '#fe9a8b' },
						itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#fe9a8bb3' },
								{ offset: 1, color: '#fe9a8b03' },
							]),
						},
					}
				],
			};
			(<any>global.homeChartOne).setOption(option);
			(<any>state.myCharts).push(global.homeChartOne);
		};
		// 饼图
		const initPieChart = () => {
			if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
			global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
			var getname = ['申请总数', '职位总数', '问题总数', '报告总数'];
			var getvalue = [];

			if (state.apiData) {
				getvalue = [
					state.apiData.total_applications,
					state.apiData.total_positions,
					state.apiData.total_questions,
					state.apiData.total_reports
				];
			} else {
				getvalue = [34.2, 38.87, 17.88, 9.05];
			}

			var data = [];
			for (var i = 0; i < getname.length; i++) {
				data.push({ name: getname[i], value: getvalue[i] });
			}
			const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
			const option = {
				backgroundColor: state.charts.bgColor,
				title: {
					text: '数据统计',
					x: 'left',
					textStyle: { fontSize: '15', color: state.charts.color },
				},
				tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
				graphic: {
					elements: [
						{
							type: 'image',
							z: -1,
							style: {
								image: themeConfig.value.isIsDark
									? ''
									: 'data:image/png;base64, ',
								width: 230,
								height: 230,
							},
							left: '16.5%',
							top: 'center',
						},
					],
				},
				legend: {
					type: 'scroll',
					orient: 'vertical',
					right: '0%',
					left: '65%',
					top: 'center',
					itemWidth: 14,
					itemHeight: 14,
					data: getname,
					textStyle: {
						rich: {
							name: {
								fontSize: 14,
								fontWeight: 400,
								width: 200,
								height: 35,
								padding: [0, 0, 0, 60],
								color: state.charts.color,
							},
							rate: {
								fontSize: 15,
								fontWeight: 500,
								height: 35,
								width: 40,
								padding: [0, 0, 0, 30],
								color: state.charts.color,
							},
						},
					},
				},
				series: [
					{
						type: 'pie',
						radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
						center: ['32%', '50%'],
						itemStyle: {
							color: function (params: any) {
								return colorList[params.dataIndex];
							},
						},
						label: { show: false },
						labelLine: { show: false },
						data: data,
					},
				],
			};
			(<any>global.homeChartTwo).setOption(option);
			(<any>state.myCharts).push(global.homeChartTwo);
		};
		// 柱状图
		const initBarChart = () => {
			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
			global.homeCharThree = <any>echarts.init(homeBarRef.value, state.charts.theme);
			const option = {
				backgroundColor: state.charts.bgColor,
				title: {
					text: '设备使用趋势',
					x: 'left',
					textStyle: { fontSize: '15', color: state.charts.color },
				},
				tooltip: { trigger: 'axis' },
				legend: { data: ['使用率'], right: 0 },
				grid: { top: 70, right: 80, bottom: 30, left: 80 },
				xAxis: [
					{
						type: 'category',
						data: [],
						boundaryGap: true,
						axisTick: { show: false },
					},
				],
				yAxis: [
					{
						name: '使用率(%)',
						nameLocation: 'middle',
						nameTextStyle: { padding: [3, 4, 50, 6] },
						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
						axisLine: { show: false },
						axisTick: { show: false },
						axisLabel: { color: state.charts.color, formatter: '{value}' },
					}
				],
				series: [
					{
						name: '使用率',
						type: 'line',
						smooth: true,
						showSymbol: true,
						data: [],
						itemStyle: { color: '#91cc75' }
					}
				],
			};
			(<any>global.homeCharThree).setOption(option);
			(<any>state.myCharts).push(global.homeCharThree);
		};
		// 批量设置 echarts resize
		const initEchartsResizeFun = () => {
			nextTick(() => {
				for (let i = 0; i < state.myCharts.length; i++) {
					setTimeout(() => {
						(<any>state.myCharts[i]).resize();
					}, i * 1000);
				}
			});
		};
		// 批量设置 echarts resize
		const initEchartsResize = () => {
			window.addEventListener('resize', initEchartsResizeFun);
		};


		let scrollTimer: number | null = null
		const scrollSpeed = 1 // px per frame
		const scrollStep = () => {
			scrollOffset.value += scrollSpeed
			const scrollInner = document.querySelector('.scroll-inner')
			const scrollBody = document.querySelector('.scroll-body')

			if (scrollInner && scrollBody) {
				const maxScroll = scrollInner.scrollHeight - scrollBody.clientHeight
				if (scrollOffset.value >= maxScroll) {
					scrollOffset.value = 0 // 重置回顶部
				}
			}
		}

		const startScroll = () => {
			if (!scrollTimer) {
				scrollTimer = window.setInterval(scrollStep, 20) // 控制速度
			}
		}

		const stopScroll = () => {
			if (scrollTimer) {
				clearInterval(scrollTimer)
				scrollTimer = null
			}
		}
			const getList = async () => {
			const res = await GetList({
				page: 1,
				page_size: 20,
			})
			if (res.code === 2000) {
				labelType.value = res.data
			}
			}
		// 页面加载时
		onMounted(() => {
			fetchApiData();
			initEchartsResize();
			initTime(); // 初始化时间显示
			// initHeroScroll(); // 添加英雄数据轮播初始化
			getList();
			// 从本地存储加载面板设置
			const savedSettings = localStorage.getItem('dashboardPanelSettings');
			if (savedSettings) {
				state.panelSettings = JSON.parse(savedSettings);
			}
		/* 	fetchRankings(); */
		});
		// 由于页面缓存原因，keep-alive
		onActivated(() => {
			initEchartsResizeFun();
		});
		onUnmounted(() => {
			// if (intervalId) clearInterval(intervalId)
			// stopScroll();
		});
		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
		watch(
			() => isTagsViewCurrenFull.value,
			() => {
				initEchartsResizeFun();
			}
		);
		// 监听 vuex 中是否开启深色主题
		watch(
			() => themeConfig.value.isIsDark,
			(isIsDark) => {
				nextTick(() => {
					state.charts.theme = isIsDark ? 'dark' : '';
					state.charts.bgColor = isIsDark ? 'transparent' : '';
					state.charts.color = isIsDark ? '#dadada' : '#303133';
					setTimeout(() => {
						initLineChart();
					}, 500);
					setTimeout(() => {
						initPieChart();
					}, 700);
					setTimeout(() => {
						initBarChart();
					}, 1000);
				});
			},
			{
				deep: true,
				immediate: true,
			}
		);

		// 监听窗口大小变化和全屏状态变化
		const handleResize = () => {
			// 触发响应式更新
			nextTick(() => {
				// 重新初始化图表以适应新的尺寸
				const echart3 = document.getElementById('echart3');
				if (echart3 && window.echarts) {
					const chartInstance = window.echarts.getInstanceByDom(echart3);
					if (chartInstance) {
						chartInstance.resize();
					}
				}
				
				// 处理echart5
				const echart5 = document.getElementById('echart5');
				if (echart5 && window.echarts) {
					const chartInstance = window.echarts.getInstanceByDom(echart5);
					if (chartInstance) {
						chartInstance.resize();
					}
				}
			});
		};

		// 监听全屏状态变化
		watch(isFullscreen, (newValue) => {
			console.log("Fullscreen status changed to:", newValue);
			handleResize();
			// 全屏状态变化时重新初始化图表
			nextTick(() => {
				setTimeout(() => {
					console.log("Calling reinitializeCharts after fullscreen change");
					reinitializeCharts();
				}, 300); // 增加延迟时间，确保DOM更新完成
			});
		});

		// 添加窗口大小变化监听器
		onMounted(() => {
			window.addEventListener('resize', handleResize);
		});

		onUnmounted(() => {
			window.removeEventListener('resize', handleResize);
		});

		/* const userList = ref([]) */
		// 获取API数据
		const fetchApiData = async () => {
			try {
				const res = await api.GetOverviewList();
				if (res.code === 2000) {
					// state.apiData = res.data;
					// updateHomeData(res.data);
					state.devicedata = res.data;
					updateZbCharts(res.data);
				}
				const borrow_rank = Local.get(`borrow_ranking_filters_${Session.get('userInfo').username}`)
				const borrow_trend = Local.get(`borrow_trends_filters_${Session.get('userInfo').username}`)
				const params = {
					type: borrow_rank.borrowType,//selectedType.value,
					start_date: borrow_rank.dateRange?.[0],
					end_date: borrow_rank.dateRange?.[1],
					tag_id:borrow_rank.deviceTagIds,
					period:borrow_trend.selectedRange
				};
				console.log(borrow_rank);
				const drres = await api.GetBorrowRankingComposite(params);
				if (res.code === 2000) {
					state.teamRankings = [...drres.data.device_rankings.borrow_count_ranking].sort(
						(a, b) => b.borrow_count - a.borrow_count
					);
					state.heroData = [...drres.data.device_rankings.borrow_duration_ranking].sort((a, b) => Number(b.total_duration) - Number(a.total_duration))

					console.log("state.heroData:::", state.heroData)

				}
				const ulres = await api.GetUtilizationList();
				if (ulres.code === 2000) {
					//clos
					console.log("ulres:::", ulres)
					state.utilizationData = ulres.data.trends
					updateMonthlyUtilizationChart(ulres.data.trends)
				}
				const btres = await api.GetBorrowRankingComposite(params);
				if (btres.code === 2000) {
					//clos
					state.borrowTrendData = btres.data.borrow_trends.trends
					updateBorrowTrendChart(btres.data.borrow_trends.trends)
				}
				const acres = await api.GetActiveUsers();
				if (acres.code === 2000) {
					//clos
					/* updateActiveUserChart(acres.data.active_users) */
					state.userList = acres.data.active_users
				}



			} catch (error) {
				console.error('获取统计数据失败:', error);
			}





		};

		// 刷新页面数据
		const refreshPageData = async () => {
			if (isRefreshing.value) return; // 防止重复点击
			
			isRefreshing.value = true;
			try {
				// 重新获取所有数据
				await fetchApiData();
				
				// 重新初始化图表
				setTimeout(() => {
					initLineChart();
					initPieChart();
					initBarChart();
					// 重新获取并更新图表数据
					reinitializeCharts();
				}, 100);
				
				// 显示成功提示
				ElMessage.success('数据刷新成功');
			} catch (error) {
				console.error('刷新数据失败:', error);
				ElMessage.error('数据刷新失败，请重试');
			} finally {
				isRefreshing.value = false;
			}
		};

		const handleQuickRange = (range: string) => {
			const today = dayjs();
			if (range === 'day') {
				dateRange.value = [today.format('YYYY-MM-DD'), today.format('YYYY-MM-DD')];
			} else if (range === 'month') {
				dateRange.value = [today.startOf('month').format('YYYY-MM-DD'), today.endOf('month').format('YYYY-MM-DD')];
			} else if (range === 'year') {
				dateRange.value = [today.startOf('year').format('YYYY-MM-DD'), today.endOf('year').format('YYYY-MM-DD')];
			}
			fetchRankings();
		};

		const fetchRankings = async () => {
			const borrow_rank = Local.get(`borrow_ranking_filters_${Session.get('userInfo').username}`)
			try {
				const params = {
					type: borrow_rank.borrowType,//selectedType.value,
					start_date: borrow_rank.dateRange.value?.[0],
					end_date: borrow_rank.dateRange.value?.[1],
					tag_id:borrow_rank.deviceTagIds
				};
				const res = await api.GetBorrowRankingComposite(params);
				console.log("res:::", res)
				if (res.code === 2000) {
					state.teamRankings = [...res.data.device_rankings.borrow_count_ranking].sort((a, b) => b.borrow_count - a.borrow_count);
				}
			} catch (err) {
				console.error('获取设备排名失败:', err);
			}
		};


		//更新活跃用户数据
		const updateActiveUserChart = (userData: Array<{ user_name: string; total_quantity: number }>) => {
			const echart2 = echarts.init(document.getElementById('echart2'));
			if (!echart2) return;

			const option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '5%',
					left: 'center',
					textStyle: {
						color: '#fff'
					}
				},
				series: [
					{
						name: '借用总量',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: true,
							formatter: '{b}: {c}件'
						},
						data: userData.map(user => ({
							value: user.total_quantity,
							name: user.user_name
						}))
					}
				]
			};

			echart2.setOption(option);
		};



		const groupByMonth = (data: Array<{ date: string; borrow_count: number; total_duration: number }>) => {
				const map = new Map<string, { borrow_count: number; total_duration: number }>()
				console.log('map::',data)
				data.forEach(item => {
					const month = dayjs(item.date).format('YYYY-MM')
					if (!map.has(month)) {
					map.set(month, { borrow_count: 0, total_duration: 0 })
					}
					const current = map.get(month)!
					current.borrow_count += item.borrow_count
					current.total_duration += item.total_duration
				})

				return Array.from(map.entries()).map(([month, values]) => ({
					date: month, // 保持字段名为 date，兼容原图表逻辑
					borrow_count: values.borrow_count,
					total_duration: values.total_duration
				}))
		}




		// 更新首页数据
		const updateHomeData = (data: ApiData) => {
			// 更新顶部卡片数据
			state.homeOne[0].num1 = data.total_applications.toString();
			state.homeOne[1].num1 = data.total_positions.toString();
			state.homeOne[2].num1 = data.total_questions.toString();
			state.homeOne[3].num1 = data.total_reports.toString();

			// 更新折线图数据
			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;

			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						// lineStyle: { color: '#57617B' }
						type: 'shadow', 
        				shadowStyle: { color: 'rgba(0,0,0,0.1)' }
					}
				},
				/* legend: {
					z: 4,
					data: ['借用次数', '借用时长'],
					show: true,
					orient: 'horizontal',
					left: 'center',
					bottom: '0',
					textStyle: { color: '#fff' },
					itemGap: 20
				}, */
				grid: {
					left: '40',
					right: '40',
					top: '20',
					bottom: '40',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: true,
					axisLabel: {
						show: true,
						textStyle: {
							color: 'rgba(255,255,255,1)',
							fontSize: 11
						}
					},
					axisLine: {
						lineStyle: { color: 'rgba(255,255,255,.1)' }
					},
					axisTick: { alignWithLabel: true },
					// boundaryGap: true,
					// data: trendData.map(item => item.date.substring(5))
					data: monthlyData.map(item => item.date)
				}],
				yAxis: [{
					axisLabel: {
						show: true,
						textStyle: { color: 'rgba(255,255,255,.6)' }
					},
					axisLine: {
						lineStyle: { color: 'rgba(255,255,255,.1)' }
					},
					splitLine: {
						lineStyle: { color: 'rgba(255,255,255,.1)' }
					}
				}],
				series: [
					{
						name: '借用次数',
						type: 'bar',
						barWidth: 12, 
						itemStyle: {
						color: '#409EFF' 
						},
						barCategoryGap: '30%',
						// smooth: true,
						// data: trendData.map(item => item.borrow_count)
						data: monthlyData.map(item => item.borrow_count)
					}/* ,
					{
						name: '借用时长',
						type: 'bar',
						barWidth: 12, 
						itemStyle: {
						color: '#67C23A'
						},
						barCategoryGap: '30%',
						// smooth: true,
						// data: trendData.map(item => item.total_duration)
						data: monthlyData.map(item => item.total_duration)
					} */
				]
			};

			echart3.setOption(option);
			
			// 强制重新渲染
			setTimeout(() => {
				echart3.resize();
			}, 100);
		};

		const formatRange = (s: string) => {
			const m = String(s).match(/^(\d{1,2})-(\d{1,2})至(\d{1,2})-(\d{1,2})$/);
			if (!m) return s;
			const [, m1, d1, m2, d2] = m;
			return m1 === m2 ? `${m1}-${d1}至${d2}` : `${m1}-${d1}至${m2}-${d2}`;
			};

		//更新利用趋势图
		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;
			

			const option = {
				xAxis: {
					type: 'category',
					data:  monthlyData.map(item => formatRange(item.date)),
					axisLabel: { 
						color: '#fff',
						rotate: 20, // 旋转45度，避免标签重叠
						interval: 0, // 显示所有标签
						fontSize: 12, // 调整字体大小
						margin: 15 // 增加标签与轴的距离
					},
					axisTick: {
						alignWithLabel: true // 刻度线与标签对齐
					}
				},
				yAxis: {
					type: 'value',
					axisLabel: { color: '#fff' }
				},
				series: [
					{
						name: '利用率',
						type: 'line', // 或 'bar'，看你想要什么样的图
						data: monthlyData.map(item => item.utilization_rate),
						smooth: true,
						itemStyle: { color: '#91cc75' }
					}
				],
				tooltip: {
					trigger: 'axis',
					axisPointer: { type: 'line' }
				},
				legend: {
					data: ['月度利用率'],
					textStyle: { color: '#fff' }
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '15%', // 增加底部空间，为旋转后的标签预留空间
					top: '10%', // 适当增加顶部空间
					containLabel: true
				}
			};

			echart5.setOption(option);
			
			// 强制重新渲染
			setTimeout(() => {
				echart5.resize();
			}, 100);
		};

		//更新设备信息
		const updateZbCharts = (devicedata: {
			total_devices: number;
			borrowed_devices: number;
			available_devices: number;
			today_borrowed: number;
			today_returned: number;
			total_borrows: number;
		}) => {
			// 移除图表初始化代码

			// 不再需要图表相关代码

		};

		// 更新折线图数据
		const updateLineChart = (trendData: Array<{ date: string; count: number }>) => {
			if (!global.homeChartOne) return;

			const option = {
				xAxis: {
					data: trendData.map((item: { date: string; count: number }) => item.date.substring(5)), // 只显示月-日
				},
				series: [
					{
						name: '申请数量',
						data: trendData.map((item: { date: string; count: number }) => item.count),
					}
				]
			};

			(<any>global.homeChartOne).setOption(option);
		};
		// 添加卡片点击跳转功能
		const handleCardClick = (index: number) => {
			const routes = [
				'/JobApplication/list/index', // 申请总数
				'/position/list',    // 职位总数
				'/questionBank/list',    // 问题总数
				'/JobApplication/list/index'       // 报告总数
			];

			if (index >= 0 && index < routes.length) {
				router.push(routes[index]);
			}
		};

		// 初始化时间显示
		const initTime = () => {
			const showTime = () => {
				const timeElement = document.getElementById("showTime");
				if (!timeElement) {
					console.warn('时间显示元素未找到');
					return;
				}
				
				const dt = new Date();
				const y = dt.getFullYear();
				const mt = dt.getMonth() + 1;
				const day = dt.getDate();
				const h = dt.getHours();
				const m = dt.getMinutes();
				const s = dt.getSeconds();
				timeElement.innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
			};
			
			// 延迟执行，确保DOM已渲染
			nextTick(() => {
				showTime();
				setInterval(showTime, 1000);
			});
		};
		//
		/* function echarts_3() {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('echart3'));

		option3 

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		window.addEventListener("resize", function() {
			myChart.resize();
		});
	} */

		// 初始化英雄数据轮播
		const initHeroScroll = () => {
			const wrap = document.querySelector('.wrap') as HTMLElement;
			if (!wrap) return;

			const ul = wrap.querySelector('ul') as HTMLElement;
			if (!ul) return;

			// 克隆列表项用于无缝滚动
			const cloneItems = ul.innerHTML;
			ul.innerHTML = cloneItems + cloneItems;

			let scrollHeight = 0;
			const itemHeight = 32; // 每个列表项的高度
			const totalItems = state.heroData.length;

			const scroll = () => {
				scrollHeight++;
				if (scrollHeight >= totalItems * itemHeight) {
					scrollHeight = 0;
					ul.style.transition = 'none';
					ul.style.transform = `translateY(0)`;
					// 强制回流
					ul.offsetHeight;
					ul.style.transition = 'transform 0.5s linear';
				} else {
					ul.style.transform = `translateY(-${scrollHeight}px)`;
				}
			};

			// 每3秒滚动一次
			setInterval(() => {
				scroll();
			}, 3000);
		};



		const settingsDialogVisible = computed(() => state.settingsDialogVisible);
		const panelSettings = computed(() => state.panelSettings);

		// 计算借用趋势面板高度
		const getBorrowTrendHeight = () => {
			const isFullscreen = document.fullscreenElement !== null;
			const windowHeight = window.innerHeight;
			const windowWidth = window.innerWidth;
			
			// 基础高度计算
			let baseHeight = 380; // 默认高度
			
			if (!panelSettings.value.coreMetrics) {
				// 如果没有核心概览指标，借用趋势面板可以占用更多空间
				baseHeight = 700;
			}
			
			// 全屏状态下的高度调整
			if (isFullscreen) {
				baseHeight = Math.max(baseHeight, windowHeight * 0.4); // 全屏时至少占40%高度
			}
			
			// 根据屏幕尺寸调整
			if (windowWidth < 1200) {
				// 小屏幕时减少高度
				baseHeight = Math.min(baseHeight, 300);
			} else if (windowWidth > 1600) {
				// 大屏幕时可以增加高度
				baseHeight = Math.min(baseHeight + 100, 800);
			}
			
			// 全屏模式下移除高度限制
			if (isFullscreen) {
				return {
					height: `${baseHeight}px`,
					minHeight: '300px',
					maxHeight: 'none'
				};
			}
			
			return {
				height: `${baseHeight}px`,
				minHeight: '300px',
				maxHeight: '800px'
			};
		};

		// 计算借用趋势图表样式
		const getBorrowTrendChartStyle = () => {
			const isFullscreen = document.fullscreenElement !== null;
			const windowHeight = window.innerHeight;
			
			let chartHeight = '400px';
			let marginTop = '30px';
			
			// 全屏状态下调整图表样式
			if (isFullscreen) {
				chartHeight = '95%';
				marginTop = '15px';
			}
			
			// 小屏幕时调整
			if (window.innerWidth < 1200) {
				chartHeight = '90%';
				marginTop = '15px';
			}
			
			return {
				height: chartHeight,
				marginTop: marginTop
			};
		};

		return {
			homeLineRef,
			homePieRef,
			homeBarRef,
			selectedType,
			dateRange,
			labelType,
			deviceTagId,
			quickRange,
			handleCardClick,
			handleQuickRange,
			fetchRankings,
			scrollOffset,
			devicedata: computed(() => state.devicedata),
			heroData: computed(() => state.heroData),
			userList: computed(() => state.userList),
			teamRankings: computed(() => state.teamRankings),
			settingsDialogVisible,
			panelSettings,
			isFullscreen,
			isRefreshing,
			toggleFullScreen,
			refreshPageData,
			handleClose,
			// 打开设置弹窗
			openSettings: () => {
				state.settingsDialogVisible = true;
			},
			// 保存设置
			saveSettings: () => {
				state.settingsDialogVisible = false;
				// 可以在这里添加保存到本地存储的逻辑
				localStorage.setItem('dashboardPanelSettings', JSON.stringify(state.panelSettings));
			},
			// 借用趋势面板高度计算方法
			getBorrowTrendHeight,
			// 借用趋势图表样式计算方法
			getBorrowTrendChartStyle,
		};
	},
});








</script>


<style scoped lang="scss">
.scroll-body {
	height: 300px;
	overflow: hidden;
	position: relative;
}

.scroll-inner {
	transition: transform 0.2s linear;
}



.scroll-table-wrapper {
	height: 300px;
	overflow: hidden;
	position: relative;
}

.scroll-table {
	transition: transform 0.5s linear;
}


.transparent-radio ::v-deep(.el-radio-button__inner) {
	background-color: transparent;
	border-color: transparent;
	color: #ede6e6;
	box-shadow: none;
}

.transparent-radio ::v-deep(.el-radio-button.is-active .el-radio-button__inner) {
	background-color: rgba(64, 158, 255, 0.1);
	border-color: #409EFF;
	color: #409EFF;
}

/* Select组件样式 */
:deep(.el-select__wrapper) {
	color: #fff !important;
	background-color: transparent !important;
	border-color: transparent !important;
	.el-input__wrapper {
		background-color: transparent !important;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
		
		&:hover {
			box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
		}
		
		&.is-focus {
			box-shadow: 0 0 0 1px #409EFF !important;
		}
	}
	
	.el-input__inner {
		color: #fff !important;
		
		&::placeholder {
			color: rgba(255, 255, 255, 0.5) !important;
		}
	}
}

/* Select下拉框样式 */
:deep(.el-select__popper) {
	background-color: #001d6e !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	
	.el-select-dropdown__item {
		color: #fff !important;
		
		&.hover, &:hover {
			background-color: rgba(64, 158, 255, 0.1) !important;
		}
		
		&.selected {
			background-color: rgba(64, 158, 255, 0.2) !important;
			color: #409EFF !important;
		}
	}
}
:deep(.el-date-editor) {
	color: #fff !important;
	background-color: transparent !important;
	border-color: transparent !important;
}

$homeNavLengh: 8;

.home-container {
	overflow: hidden;
	height: 100%;
	
	&:fullscreen {
		background: #000d4a;
		height: 100vh;
		width: 100vw;
		
		.lol-data-section {
			height: 100vh;
			margin: 0;
			
			.el-col {
				padding: 0 !important;
			}
			
			.lol-container {
				height: 100vh;
				border-radius: 0;
				
				.mainbox {
					height: calc(100vh - 105px);
					
					.borrow-trend-container {
						height: calc(100vh - 200px) !important;
						max-height: none !important;
						flex: 1;
					}
				}
			}
		}
	}

	.home-card-one,
	.home-card-two,
	.home-card-three {
		.home-card-one-title {
			padding: 20px 0px;
			color: #808080;
			font-size: 14px;
			letter-spacing: 3px;
		}

		.home-card-item {
			width: 100%;
			height: 130px;
			border-radius: 16px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);

			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}

			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;

				i {
					color: var(--el-text-color-placeholder);
				}
			}

			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}

	.home-card-one {
		@for $i from 0 through 3 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/10) + s;
			}
		}
	}

	.home-card-two,
	.home-card-three {
		.home-card-item {
			height: 400px;
			width: 100%;
			overflow: hidden;

			.home-monitor {
				height: 100%;

				.flex-warp-item {
					width: 25%;
					height: 111px;
					display: flex;

					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;

						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}

					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}

	.home-right {
		.home-card-item {
			height: 500px;
			border-radius: 16px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);

			.home-card-item-content {
				display: flex;
			}

			::v-deep(.el-collapse-item__header) {
				border: none;
			}

			::v-deep(.el-collapse-item__wrap) {
				border: none;
			}

			::v-deep(.el-collapse-item__content) {
				padding: 0;
			}

			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
				border-bottom: 1px solid var(--next-border-color-light);
				padding-bottom: 10px;
				margin-bottom: 10px;
			}

			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}
		}
	}

	// 响应式处理
	@media screen and (max-width: 1200px) {
		.el-col-18 {
			width: 100%;
		}

		.el-col-6 {
			width: 100%;
			margin-top: 15px;
		}

		.home-right .home-card-item {
			height: auto;
			min-height: 300px;
		}
	}

	// 排名列表响应式优化
	@media screen and (max-width: 1600px) {
		.active-users-container,
		.device-duration-container,
		.device-count-container {
			.navboxall {
				.wraptit {
					span {
						font-size: 12px;
						
						&:nth-child(1) {
							flex: 0 0 40px;
						}
						
						&:nth-child(4) {
							flex: 0 0 70px;
						}
					}
				}
				
				.active-users-list,
				.device-duration-list,
				.device-count-list {
					ul li div {
						span {
							font-size: 12px;
							
							&:nth-child(1) {
								flex: 0 0 40px;
							}
							
							&:nth-child(4) {
								flex: 0 0 70px;
							}
						}
					}
				}
			}
		}
	}

	// 1024px宽度优化
	@media screen and (max-width: 1024px) {
		.lol-data-section {
			.lol-container {
				.head {
					height: 90px;
					
					h1 {
						font-size: 20px;
						line-height: 75px;
					}
					
					.weather {
						right: 15px;
						line-height: 70px;
						gap: 10px;
						
						.fullscreen-btn {
							font-size: 24px;
						}
						
						.fullscreen-btn svg {
							width: 24px;
							height: 24px;
						}
					}
				}
				
				.mainbox {
					height: calc(100vh - 90px);
					padding: 8px 12px;
					
					.boxall {
						padding: 12px;
						margin-bottom: 12px;
						
						.alltitle {
							font-size: 14px;
							padding-left: 10px;
							margin-bottom: 8px;
						}
					}
					
					ul.clearfix {
						gap: 10px;
						
						li {
							width: 32%;
							min-width: 0; // 允许收缩
							
							.boxall {
								min-height: 300px;
							}
						}
					}
					
					// 核心概览指标优化（在1024px下已由内部媒体查询处理）
					
					// 排名列表优化
					.active-users-container,
					.device-duration-container,
					.device-count-container {
						.navboxall {
							.wraptit {
								padding: 0 8px;
								margin-bottom: 8px;
								
								span {
									font-size: 11px;
									padding: 0 3px;
									
									&:nth-child(1) {
										flex: 0 0 35px;
									}
									
									&:nth-child(4) {
										flex: 0 0 60px;
									}
								}
							}
							
							.active-users-list,
							.device-duration-list,
							.device-count-list {
								ul li {
									font-size: 12px;
									line-height: 28px;
									padding: 4px 0;
									
									div {
										padding: 0 5px;
										
										span {
											font-size: 11px;
											padding: 0 3px;
											
											&:nth-child(1) {
												flex: 0 0 35px;
											}
											
											&:nth-child(4) {
												flex: 0 0 60px;
											}
										}
									}
								}
							}
						}
					}
					
					// 借用趋势容器优化
					.borrow-trend-container {
						.alltitle {
							font-size: 14px;
							margin-bottom: 8px;
						}
						
						.navboxall {
							#echart3 {
								margin-top: 8px !important;
							}
						}
					}
					
					// 图表容器优化
					#echart3,
					#echart5 {
						min-height: 200px;
					}
				}
			}
		}
	}

	@media screen and (max-width: 1200px) {
		.active-users-container,
		.device-duration-container,
		.device-count-container {
			.navboxall {
				.wraptit {
					span {
						font-size: 11px;
						
						&:nth-child(1) {
							flex: 0 0 35px;
						}
						
						&:nth-child(4) {
							flex: 0 0 60px;
						}
					}
				}
				
				.active-users-list,
				.device-duration-list,
				.device-count-list {
					ul li div {
						span {
							font-size: 11px;
							
							&:nth-child(1) {
								flex: 0 0 35px;
							}
							
							&:nth-child(4) {
								flex: 0 0 60px;
							}
						}
					}
				}
			}
		}

		// 借用趋势容器在小屏幕下的优化
		.borrow-trend-container {
			.alltitle {
				font-size: 14px;
				margin-bottom: 8px;
			}
			
			.navboxall {
				#echart3 {
					margin-top: 10px !important;
				}
			}
		}
	}

	// 借用趋势容器响应式优化
	@media screen and (max-width: 1600px) {
		.borrow-trend-container {
			.alltitle {
				font-size: 15px;
			}
		}
	}

	@media screen and (min-width: 1600px) {
		.borrow-trend-container {
			.alltitle {
				font-size: 17px;
			}
		}
	}

	.todo-list {
		padding: 10px 20px;
		margin-top: 15px;
		margin-left: 50px;

		.todo-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 0;
			border-bottom: 1px solid var(--next-border-color-light);

			.todo-item-left {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.todo-tag {
					margin-right: 10px;
				}
			}

			&:last-child {
				border-bottom: none;
			}

			.todo-date {
				color: var(--el-text-color-secondary);
				font-size: 13px;
			}

			:deep(.el-checkbox__label) {
				color: var(--el-text-color-primary);
			}
		}
	}

	.score-list {
		padding: 10px 0;

		.score-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 8px 15px;
			margin: 5px 0;
			background: var(--el-fill-color-light);
			border-radius: 4px;

			.score-name {
				font-size: 14px;
				color: var(--el-text-color-primary);
			}

			.score-value {
				font-size: 14px;
				color: var(--el-color-primary);
				font-weight: 500;
			}
		}
	}

	// 添加英雄联盟数据可视化样式
	.lol-data-section {


		.lol-container {
			border-radius: 32px;

			color: #fff;
			background: #000d4a; // url(/@/assets/img/bg.png) center top

			.head {
				height: 105px;
				background: url(/@/assets/img/head_bg.png) no-repeat center center;
				text-align: center;
				position: relative;

				h1 {
					font-size: 24px;
					color: #fff;
					line-height: 90px;
					text-align: center;
				}

				.weather {
					position: absolute;
					right: 20px;
					top: 0;
					line-height: 85px;
					display: flex;
					align-items: center;
					gap: 15px;

					.fullscreen-btn {
						color: #fff;
						font-size: 32px;
						padding: 0;
						margin-left: 10px;

						&:hover {
							color: #409EFF;
						}
					}
					.fullscreen-btn i {
						font-size: 28px !important; 
						line-height: 1;
						}
					.fullscreen-btn svg {
						width: 28px;
						height: 28px;
						transition: transform 0.2s ease;
						}
					
					// 刷新图标转动动画
					.refresh-rotating {
						animation: rotate 1s linear infinite;
					}
					
					@keyframes rotate {
						from {
							transform: rotate(0deg);
						}
						to {
							transform: rotate(360deg);
						}
					}
				}
			}

			.mainbox {
				height: calc(100vh - 105px);
				padding: 10px 20px;
				display: flex;
				flex-direction: column;

				.boxall {
					border: 1px solid rgba(25, 186, 139, 0.17);
					padding: 15px;
					background: rgba(255, 255, 255, 0.04);
					margin-bottom: 15px;
					border-radius: 8px;

					// 添加表格透明样式
					:deep(.el-table) {
						background-color: transparent;

						&::before {
							display: none;
						}

						tr {
							background-color: transparent;
						}

						th {
							background-color: transparent;
							border-bottom-color: rgba(255, 255, 255, 0.1);
							color: #fff;
						}

						td {
							background-color: transparent;
							border-bottom-color: rgba(255, 255, 255, 0.1);
							color: #fff;
						}

						.el-table__cell {
							background-color: transparent;
						}

						// 添加表头背景透明
						.el-table__header {
							background-color: transparent;

							tr {
								background-color: transparent;
							}

							th.el-table__cell {
								background-color: transparent !important;
							}
						}

						// 添加表体背景透明
						.el-table__body {
							background-color: transparent;

							tr {
								background-color: transparent !important;

								&:hover>td.el-table__cell {
									background-color: rgba(255, 255, 255, 0.1) !important;
								}
							}
						}
					}

					.alltitle {
						font-size: 16px;
						color: #fff;
						padding-left: 12px;
						margin-bottom: 10px;
						position: relative;
					}

					.alltitle:before {
						width: 5px;
						height: 20px;
						top: 2px;
						position: absolute;
						content: "";
						background: #49bcf7;
						border-radius: 20px;
						left: 0;
					}
				}

				ul.clearfix {
					display: flex;
					justify-content: space-between;
					margin: 0;
					padding: 0;
					list-style: none;
					height: 100%;
					gap: 10px; // 添加列间距

					li {
						width: 32%;
						display: flex;
						flex-direction: column;
						min-width: 0; // 允许收缩，防止溢出
						
						.boxall {
							flex: 1;
							display: flex;
							flex-direction: column;
							min-width: 0; // 防止内容溢出
							
							.navboxall {
								flex: 1;
								display: flex;
								flex-direction: column;
								min-width: 0; // 防止内容溢出
							}
						}
				}

				.wrap {
					height: 200px;
					overflow: auto;

					ul {
						list-style: none;
						padding: 0;
						margin: 0;
						transition: transform 0.5s linear;

						li {
							line-height: 32px;
							font-size: 14px;

							p {
								display: flex;
								justify-content: space-between;
								margin: 0;
								padding: 0 10px;
								color: #fff;

								span {
									flex: 1;
									text-align: center;

									&:first-child {
										text-align: left;
									}
								}
							}

							&:hover {
								background: rgba(255, 255, 255, 0.1);
							}
						}
					}
				}

				// 活跃用户排名容器优化
				.active-users-container {
					display: flex;
					flex-direction: column;
					min-height: 0; // 允许flex子元素收缩
					
					.navboxall {
						flex: 1;
						display: flex;
						flex-direction: column;
						min-height: 0;
						
						.wraptit {
							flex-shrink: 0; // 标题行不收缩
						}
						
						.active-users-list {
							flex: 1;
							min-height: 0;
							overflow-y: auto;
							overflow-x: hidden;
							
							// 自定义滚动条样式
							&::-webkit-scrollbar {
								width: 6px;
							}
							
							&::-webkit-scrollbar-track {
								background: rgba(255, 255, 255, 0.1);
								border-radius: 3px;
							}
							
							&::-webkit-scrollbar-thumb {
								background: rgba(255, 255, 255, 0.3);
								border-radius: 3px;
								
								&:hover {
									background: rgba(255, 255, 255, 0.5);
								}
							}
						}
					}
				}

				// 设备借用时长排名容器优化
				.device-duration-container {
					display: flex;
					flex-direction: column;
					min-height: 0;
					
					.navboxall {
						flex: 1;
						display: flex;
						flex-direction: column;
						min-height: 0;
						
						.wraptit {
							flex-shrink: 0;
						}
						
						.device-duration-list {
							flex: 1;
							min-height: 0;
							overflow-y: auto;
							overflow-x: hidden;
							
							// 自定义滚动条样式
							&::-webkit-scrollbar {
								width: 6px;
							}
							
							&::-webkit-scrollbar-track {
								background: rgba(255, 255, 255, 0.1);
								border-radius: 3px;
							}
							
							&::-webkit-scrollbar-thumb {
								background: rgba(255, 255, 255, 0.3);
								border-radius: 3px;
								
								&:hover {
									background: rgba(255, 255, 255, 0.5);
								}
							}
						}
					}
				}

				// 设备借用次数排名容器优化
				.device-count-container {
					display: flex;
					flex-direction: column;
					min-height: 0;
					
					.navboxall {
						flex: 1;
						display: flex;
						flex-direction: column;
						min-height: 0;
						
						.wraptit {
							flex-shrink: 0;
						}
						
						.device-count-list {
							flex: 1;
							min-height: 0;
							overflow-y: auto;
							overflow-x: hidden;
							
							// 自定义滚动条样式
							&::-webkit-scrollbar {
								width: 6px;
							}
							
							&::-webkit-scrollbar-track {
								background: rgba(255, 255, 255, 0.1);
								border-radius: 3px;
							}
							
							&::-webkit-scrollbar-thumb {
								background: rgba(255, 255, 255, 0.3);
								border-radius: 3px;
								
								&:hover {
									background: rgba(255, 255, 255, 0.5);
								}
							}
						}
					}
				}

				// 借用趋势容器优化
				.borrow-trend-container {
					display: flex;
					flex-direction: column;
					min-height: 0;
					transition: height 0.3s ease;
					
					.navboxall {
						flex: 1;
						display: flex;
						flex-direction: column;
						min-height: 0;
						position: relative;
						
						// 确保图表容器能够正确填充
						#echart3 {
							width: 100% !important;
							height: 100% !important;
						}
					}
				}

				.wrap::-webkit-scrollbar {
					display: none;
					/* 隐藏滚动条 */
				}

				.wraptit {
					display: flex;
					justify-content: space-between;
					padding: 0 10px;
					margin-bottom: 10px;
					color: #fff;
					font-weight: bold;
					min-width: 0; // 允许收缩

					span {
						flex: 1;
						text-align: center;
						min-width: 0; // 允许收缩
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						&:first-child {
							text-align: center;
						}
					}
				}

				.wrap {
					span {
						flex: 1;
						text-align: center;

						&:first-child {
							text-align: center;
						}
					}
				}

				.data-overview {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 15px;
					padding: 10px;
					height: 100%;
					min-height: fit-content; // 确保容器至少适应内容
					overflow: visible; // 允许内容溢出可见
					align-content: start; // 网格内容从顶部开始对齐

					.data-card {
						background: rgba(255, 255, 255, 0.1);
						border-radius: 8px;
						position: relative;
						overflow: visible; // 改为 visible 确保内容不被截断
						transition: all 0.3s ease;
						min-height: 120px; // 使用 min-height 而不是固定 height
						height: auto; // 允许高度自适应
						border: none;

						&:hover {
							transform: translateY(-5px);
							box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
							background: rgba(255, 255, 255, 0.15);
						}

						.card-content {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: space-between; // 确保内容分布合理
							position: relative;
							z-index: 1;
							height: 100%;
							min-height: 100%; // 确保内容区域填满
							padding: 15px;
							box-sizing: border-box; // 确保 padding 包含在高度内

							.card-title {
								font-size: 16px;
								color: rgba(255, 255, 255, 0.9);
								margin-bottom: 12px; // 减少底部间距
								flex-shrink: 0; // 防止标题被压缩
								line-height: 1.2;
							}

							.card-value {
								font-size: 48px;
								font-weight: bold;
								color: #fff;
								line-height: 1.1; // 调整行高，确保数字完全显示
								margin-bottom: 0; // 移除底部间距
								flex: 1; // 允许数字区域占据剩余空间
								display: flex;
								align-items: center; // 垂直居中
								word-break: break-all; // 防止长数字溢出
								overflow-wrap: break-word; // 允许换行
								white-space: normal; // 允许换行
								overflow: visible; // 确保内容可见
								min-height: 0; // 允许收缩
								width: 100%; // 确保宽度填满
								box-sizing: border-box; // 包含 padding
							}

							.card-unit {
								font-size: 16px;
								color: rgba(255, 255, 255, 0.7);
								margin-left: 5px;
								display: inline-block; // 确保单位正确显示
							}

							.card-subtitle {
								font-size: 14px;
								color: rgba(255, 255, 255, 0.6);
								margin-top: 5px;
							}
						}

						.chart-container {
							height: 60px;
							margin-top: 10px;
						}

						// 为不同卡片设置不同的背景色
						&.total-devices {
							background: #1e3799;
						}

						&.borrowed {
							background: #ff7f50;
						}

						&.available {
							background: #2ecc71;
						}

						&.today-borrowed {
							background: #0984e3;
						}

						&.today-returned {
							background: #9b59b6;
						}

						&.total-borrows {
							background: #8e44ad;
						}
					}
					
					// 超大屏幕优化（1920px及以上）
					@media screen and (min-width: 1920px) {
						gap: 20px;
						padding: 15px;
						
						.data-card {
							min-height: 140px;
							height: auto;
							
							.card-content {
								padding: 16px;
								
								.card-title {
									font-size: 18px;
									margin-bottom: 15px;
								}
								
								.card-value {
									font-size: 56px;
									line-height: 1.1;
								}
								
								.card-unit {
									font-size: 18px;
								}
							}
						}
					}
					
					// 大屏幕优化（1600px-1919px）
					@media screen and (min-width: 1600px) and (max-width: 1919px) {
						gap: 15px;
						padding: 12px;
						
						.data-card {
							min-height: 130px;
							height: auto;
							
							.card-content {
								padding: 18px;
								
								.card-title {
									font-size: 17px;
									margin-bottom: 15px;
								}
								
								.card-value {
									font-size: 52px;
									line-height: 1.1;
								}
								
								.card-unit {
									font-size: 17px;
								}
							}
						}
					}
					
					// 中等屏幕优化（1366px-1599px）
					@media screen and (min-width: 1366px) and (max-width: 1599px) {
						gap: 12px;
						padding: 10px;
						
						.data-card {
							min-height: 115px;
							height: auto;
							
							.card-content {
								padding: 12px;
								
								.card-title {
									font-size: 15px;
									margin-bottom: 12px;
								}
								
								.card-value {
									font-size: 42px;
									line-height: 1.1;
								}
								
								.card-unit {
									font-size: 15px;
								}
							}
						}
					}
					
					// 小屏幕优化（1024px-1365px）
					@media screen and (min-width: 1024px) and (max-width: 1365px) {
						grid-template-columns: repeat(3, 1fr);
						gap: 10px;
						padding: 8px;
						
						.data-card {
							min-height: 110px; // 增加最小高度确保数字完整显示
							height: auto;
							
							.card-content {
								padding: 10px;
								
								.card-title {
									font-size: 13px;
									margin-bottom: 10px;
								}
								
								.card-value {
									font-size: 18px;
									line-height: 1.1;
								}
								
								.card-unit {
									font-size: 14px;
								}
							}
						}
					}
					
					// 平板横屏优化（768px-1023px）
					@media screen and (min-width: 768px) and (max-width: 1023px) {
						grid-template-columns: repeat(2, 1fr);
						gap: 12px;
						padding: 10px;
						
						.data-card {
							min-height: 110px;
							height: auto;
							
							.card-content {
								padding: 12px;
								
								.card-title {
									font-size: 14px;
									margin-bottom: 12px;
								}
								
								.card-value {
									font-size: 20px;
									line-height: 1.1;
								}
								
								.card-unit {
									font-size: 15px;
								}
							}
						}
					}
					
					// 平板竖屏/手机横屏优化（480px-767px）
					@media screen and (min-width: 480px) and (max-width: 767px) {
						grid-template-columns: repeat(2, 1fr);
						gap: 10px;
						padding: 8px;
						
						.data-card {
							min-height: 100px;
							height: auto;
							
							.card-content {
								padding: 10px;
								
								.card-title {
									font-size: 13px;
									margin-bottom: 10px;
								}
								
								.card-value {
									font-size: 32px;
									line-height: 1.1;
								}
								
								.card-unit {
									font-size: 13px;
								}
							}
						}
					}
					
					// 手机竖屏优化（小于480px）
					@media screen and (max-width: 479px) {
						grid-template-columns: 1fr;
						gap: 10px;
						padding: 8px;
						
						.data-card {
							min-height: 90px;
							height: auto;
							
							.card-content {
								padding: 10px;
								
								.card-title {
									font-size: 12px;
									margin-bottom: 8px;
								}
								
								.card-value {
									font-size: 18px;
									line-height: 1.1;
								}
								
								.card-unit {
									font-size: 12px;
								}
							}
						}
					}
				}

				// .zhibiao > div {
				// 	width: 32%;
				// 	margin-bottom: 10px;
				// }
			}
		}
	}
	}
}

.panel-settings {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	padding: 20px;

	.el-checkbox {
		margin-right: 0;
		color: #606266;
	}
}
</style>
