|
@@ -2,19 +2,19 @@
|
|
|
<div class="home-container">
|
|
<div class="home-container">
|
|
|
<!-- 第一行 -->
|
|
<!-- 第一行 -->
|
|
|
<el-row :gutter="15" class="home-row">
|
|
<el-row :gutter="15" class="home-row">
|
|
|
- <el-col :span="6">
|
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="6" style="margin-bottom: 10px;">
|
|
|
<StatusCards :statusData="pendingItems" />
|
|
<StatusCards :statusData="pendingItems" />
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="18">
|
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="18">
|
|
|
<InfoCards :summaryData="dataSummary" />
|
|
<InfoCards :summaryData="dataSummary" />
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
|
|
|
|
|
<el-row :gutter="15" class="home-row">
|
|
<el-row :gutter="15" class="home-row">
|
|
|
- <el-col :span="12">
|
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" style="margin-bottom: 10px;">
|
|
|
<BorrowRankingList/>
|
|
<BorrowRankingList/>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
- <el-col :span="12">
|
|
|
|
|
|
|
+ <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
|
|
<BorrowTrendsChart />
|
|
<BorrowTrendsChart />
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
@@ -538,116 +538,153 @@ const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
|
|
// (<any>state.myCharts).push(global.homeCharThree);
|
|
// (<any>state.myCharts).push(global.homeCharThree);
|
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
|
|
+// 以下代码为已注释的图表相关功能,如需使用请取消注释并确保相关依赖存在
|
|
|
// 批量设置 echarts resize
|
|
// 批量设置 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);
|
|
|
|
|
-}
|
|
|
|
|
-// 页面加载时
|
|
|
|
|
-onMounted(() => {
|
|
|
|
|
- fetchApiData();
|
|
|
|
|
- initEchartsResize();
|
|
|
|
|
-});
|
|
|
|
|
-// 由于页面缓存原因,keep-alive
|
|
|
|
|
-onActivated(() => {
|
|
|
|
|
- initEchartsResizeFun();
|
|
|
|
|
-});
|
|
|
|
|
-// 监听 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,
|
|
|
|
|
- }
|
|
|
|
|
-);
|
|
|
|
|
-// 获取API数据
|
|
|
|
|
-const fetchApiData = async () => {
|
|
|
|
|
- /* try {
|
|
|
|
|
- const res = await GetList({});
|
|
|
|
|
- if (res.code === 2000) {
|
|
|
|
|
- state.apiData = res.data;
|
|
|
|
|
- updateHomeData(res.data);
|
|
|
|
|
- }
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('获取统计数据失败:', error);
|
|
|
|
|
- } */
|
|
|
|
|
-}
|
|
|
|
|
-// 更新首页数据
|
|
|
|
|
-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);
|
|
|
|
|
-}
|
|
|
|
|
-// 更新折线图数据
|
|
|
|
|
-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 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);
|
|
|
|
|
+// }
|
|
|
|
|
+// // 页面加载时
|
|
|
|
|
+// onMounted(() => {
|
|
|
|
|
+// fetchApiData();
|
|
|
|
|
+// initEchartsResize();
|
|
|
|
|
+// });
|
|
|
|
|
+// // 由于页面缓存原因,keep-alive
|
|
|
|
|
+// onActivated(() => {
|
|
|
|
|
+// initEchartsResizeFun();
|
|
|
|
|
+// });
|
|
|
|
|
+// // 监听 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,
|
|
|
|
|
+// }
|
|
|
|
|
+// );
|
|
|
|
|
+// // 获取API数据
|
|
|
|
|
+// const fetchApiData = async () => {
|
|
|
|
|
+// /* try {
|
|
|
|
|
+// const res = await GetList({});
|
|
|
|
|
+// if (res.code === 2000) {
|
|
|
|
|
+// state.apiData = res.data;
|
|
|
|
|
+// updateHomeData(res.data);
|
|
|
|
|
+// }
|
|
|
|
|
+// } catch (error) {
|
|
|
|
|
+// console.error('获取统计数据失败:', error);
|
|
|
|
|
+// } */
|
|
|
|
|
+// }
|
|
|
|
|
+// // 更新首页数据
|
|
|
|
|
+// 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);
|
|
|
|
|
+// }
|
|
|
|
|
+// // 更新折线图数据
|
|
|
|
|
+// 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);
|
|
|
|
|
+// }
|
|
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.home-container {
|
|
.home-container {
|
|
|
padding: 20px;
|
|
padding: 20px;
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.home-row {
|
|
.home-row {
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ // 小屏幕时减少间距
|
|
|
|
|
+ @media (max-width: 768px) {
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+
|
|
|
|
|
+ :deep(.el-col) {
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.home-col-table {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 15px;
|
|
|
}
|
|
}
|
|
|
-.home-col-table{
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- gap:15px;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
|
|
+
|
|
|
|
|
+// 响应式断点
|
|
|
|
|
+@media (max-width: 576px) {
|
|
|
|
|
+ .home-container {
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .home-row {
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@media (min-width: 577px) and (max-width: 768px) {
|
|
|
|
|
+ .home-container {
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@media (min-width: 1920px) {
|
|
|
|
|
+ .home-container {
|
|
|
|
|
+ max-width: 1920px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
</style>
|