|
@@ -8,6 +8,9 @@
|
|
|
<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>
|
|
@@ -21,11 +24,11 @@
|
|
|
<div class="mainbox">
|
|
|
<ul class="clearfix">
|
|
|
<li>
|
|
|
- <div v-if="panelSettings.deviceUtilization" class="boxall" :style="{ flex: !panelSettings.deviceRanking ? 3.5 : 2 }">
|
|
|
+ <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>
|
|
|
- <div v-if="panelSettings.deviceRanking" class="boxall" :style="{ flex: !panelSettings.deviceUtilization ? 3.5 : 1.5, overflow: 'hidden' }">
|
|
|
+ <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">
|
|
@@ -34,7 +37,7 @@
|
|
|
<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" :style="isFullscreen?'height: 85%':'height: 70%'">
|
|
|
+ <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
|
|
@@ -105,9 +108,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="panelSettings.borrowTrend" class="boxall" :style="{ height: !panelSettings.coreMetrics ? '700px' : '340px' }">
|
|
|
+ <div v-if="panelSettings.borrowTrend" class="boxall borrow-trend-container" :style="getBorrowTrendHeight()">
|
|
|
<div class="alltitle">整体设备借用次数趋势</div>
|
|
|
- <div class="navboxall" id="echart3" style="height: 95%;"></div>
|
|
|
+ <div class="navboxall" id="echart3" :style="getBorrowTrendChartStyle()"></div>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="boxall" style="height:350px">
|
|
@@ -128,7 +131,7 @@
|
|
|
<el-radio-button label="year">今年</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div> -->
|
|
|
- <div v-if="panelSettings.deviceBorrowRanking" class="boxall" :style="{ height: !panelSettings.activeUsers ? '670px' : '400px', overflow: 'hidden' }">
|
|
|
+ <div v-if="panelSettings.deviceBorrowRanking" class="boxall device-count-container">
|
|
|
<div class="alltitle">单台设备累计借用次数排名</div>
|
|
|
<div class="navboxall">
|
|
|
<div class="wraptit">
|
|
@@ -137,7 +140,7 @@
|
|
|
<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" :style="isFullscreen?'height: 85%':'height: 60%'">
|
|
|
+ <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
|
|
@@ -167,7 +170,7 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div v-if="panelSettings.activeUsers" class="boxall" :style="{ height: !panelSettings.deviceBorrowRanking ? '670px' : '310px', overflow: 'hidden' }">
|
|
|
+ <div v-if="panelSettings.activeUsers" class="boxall active-users-container">
|
|
|
<div class="alltitle">活跃用户排名</div>
|
|
|
<div class="navboxall">
|
|
|
<div class="wraptit">
|
|
@@ -176,7 +179,7 @@
|
|
|
<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" :style="isFullscreen?'height: 85%':'height: 60%'">
|
|
|
+ <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
|
|
@@ -238,8 +241,9 @@ import { useRouter } from 'vue-router';
|
|
|
import { request } from '/@/utils/service';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { GetList } from '../devicelabel/api'
|
|
|
-import { FullScreen, Aim, Setting } from '@element-plus/icons-vue'
|
|
|
+import { FullScreen, Aim, Setting, Refresh } from '@element-plus/icons-vue'
|
|
|
import { Session, Local } from '/@/utils/storage';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
|
|
|
|
|
|
|
|
@@ -266,12 +270,14 @@ export default defineComponent({
|
|
|
name: 'home',
|
|
|
components: {
|
|
|
FullScreen,
|
|
|
- Aim
|
|
|
+ Aim,
|
|
|
+ Refresh
|
|
|
},
|
|
|
setup() {
|
|
|
|
|
|
const scrollOffset = ref(0)
|
|
|
const isFullscreen = ref(false)
|
|
|
+ const isRefreshing = ref(false)
|
|
|
|
|
|
// 切换全屏
|
|
|
const toggleFullScreen = () => {
|
|
@@ -329,7 +335,7 @@ export default defineComponent({
|
|
|
activeUsers: true, // 活跃用户
|
|
|
},
|
|
|
settingsDialogVisible: false,
|
|
|
- homeOne: [],
|
|
|
+ homeOne: [] as Array<{ num1: string }>,
|
|
|
homeThree: [],
|
|
|
myCharts: [],
|
|
|
charts: {
|
|
@@ -339,9 +345,11 @@ export default defineComponent({
|
|
|
},
|
|
|
apiData: null as ApiData | null,
|
|
|
|
|
|
- heroData: [],
|
|
|
- userList: [],/* 用户统计列表 */
|
|
|
- teamRankings: []
|
|
|
+ heroData: [] as any[],
|
|
|
+ userList: [] as any[],/* 用户统计列表 */
|
|
|
+ teamRankings: [] as any[],
|
|
|
+ utilizationData: [] as any[], // 利用率趋势数据
|
|
|
+ borrowTrendData: [] as any[] // 借用趋势数据
|
|
|
});
|
|
|
const router = useRouter();
|
|
|
|
|
@@ -650,6 +658,35 @@ export default defineComponent({
|
|
|
}
|
|
|
);
|
|
|
|
|
|
+ // 监听窗口大小变化和全屏状态变化
|
|
|
+ const handleResize = () => {
|
|
|
+ // 触发响应式更新
|
|
|
+ nextTick(() => {
|
|
|
+ // 重新初始化图表以适应新的尺寸
|
|
|
+ const echart3 = document.getElementById('echart3');
|
|
|
+ if (echart3 && window.echarts) {
|
|
|
+ const chartInstance = window.echarts.getInstanceByDom(echart3);
|
|
|
+ if (chartInstance) {
|
|
|
+ chartInstance.resize();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 监听全屏状态变化
|
|
|
+ watch(isFullscreen, () => {
|
|
|
+ handleResize();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加窗口大小变化监听器
|
|
|
+ onMounted(() => {
|
|
|
+ window.addEventListener('resize', handleResize);
|
|
|
+ });
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ window.removeEventListener('resize', handleResize);
|
|
|
+ });
|
|
|
+
|
|
|
/* const userList = ref([]) */
|
|
|
// 获取API数据
|
|
|
const fetchApiData = async () => {
|
|
@@ -662,11 +699,13 @@ export default defineComponent({
|
|
|
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
|
|
|
+ tag_id:borrow_rank.deviceTagIds,
|
|
|
+ period:borrow_trend.selectedRange
|
|
|
};
|
|
|
console.log(borrow_rank);
|
|
|
const drres = await api.GetBorrowRankingComposite(params);
|
|
@@ -683,11 +722,13 @@ export default defineComponent({
|
|
|
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();
|
|
@@ -709,6 +750,34 @@ export default defineComponent({
|
|
|
|
|
|
};
|
|
|
|
|
|
+ // 刷新页面数据
|
|
|
+ const refreshPageData = async () => {
|
|
|
+ if (isRefreshing.value) return; // 防止重复点击
|
|
|
+
|
|
|
+ isRefreshing.value = true;
|
|
|
+ try {
|
|
|
+ // 重新获取所有数据
|
|
|
+ await fetchApiData();
|
|
|
+
|
|
|
+ // 重新初始化图表
|
|
|
+ setTimeout(() => {
|
|
|
+ initLineChart();
|
|
|
+ initPieChart();
|
|
|
+ initBarChart();
|
|
|
+ // 重新获取并更新图表数据
|
|
|
+ updateMonthlyUtilizationChart(state.utilizationData || []);
|
|
|
+ updateBorrowTrendChart(state.borrowTrendData || []);
|
|
|
+ }, 100);
|
|
|
+
|
|
|
+ // 显示成功提示
|
|
|
+ ElMessage.success('数据刷新成功');
|
|
|
+ } catch (error) {
|
|
|
+ console.error('刷新数据失败:', error);
|
|
|
+ ElMessage.error('数据刷新失败,请重试');
|
|
|
+ } finally {
|
|
|
+ isRefreshing.value = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
const handleQuickRange = (range: string) => {
|
|
|
const today = dayjs();
|
|
@@ -910,7 +979,7 @@ export default defineComponent({
|
|
|
echart3.setOption(option);
|
|
|
};
|
|
|
|
|
|
- const formatRange = (s) => {
|
|
|
+ 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;
|
|
@@ -1099,6 +1168,76 @@ export default defineComponent({
|
|
|
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 = '100%';
|
|
|
+ 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,
|
|
@@ -1119,7 +1258,9 @@ export default defineComponent({
|
|
|
settingsDialogVisible,
|
|
|
panelSettings,
|
|
|
isFullscreen,
|
|
|
+ isRefreshing,
|
|
|
toggleFullScreen,
|
|
|
+ refreshPageData,
|
|
|
handleClose,
|
|
|
// 打开设置弹窗
|
|
|
openSettings: () => {
|
|
@@ -1131,6 +1272,10 @@ export default defineComponent({
|
|
|
// 可以在这里添加保存到本地存储的逻辑
|
|
|
localStorage.setItem('dashboardPanelSettings', JSON.stringify(state.panelSettings));
|
|
|
},
|
|
|
+ // 借用趋势面板高度计算方法
|
|
|
+ getBorrowTrendHeight,
|
|
|
+ // 借用趋势图表样式计算方法
|
|
|
+ getBorrowTrendChartStyle,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
@@ -1255,6 +1400,16 @@ $homeNavLengh: 8;
|
|
|
.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -1421,6 +1576,118 @@ $homeNavLengh: 8;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 排名列表响应式优化
|
|
|
+ @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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @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;
|
|
@@ -1534,6 +1801,20 @@ $homeNavLengh: 8;
|
|
|
height: 28px;
|
|
|
transition: transform 0.2s ease;
|
|
|
}
|
|
|
+
|
|
|
+ // 刷新图标转动动画
|
|
|
+ .refresh-rotating {
|
|
|
+ animation: rotate 1s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -1689,6 +1970,160 @@ $homeNavLengh: 8;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 活跃用户排名容器优化
|
|
|
+ .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;
|
|
|
/* 隐藏滚动条 */
|