|
@@ -12,7 +12,7 @@
|
|
:key="k"
|
|
:key="k"
|
|
:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
|
|
:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
|
|
>
|
|
>
|
|
- <div class="home-card-item flex">
|
|
|
|
|
|
+ <div class="home-card-item flex" @click="handleCardClick(k)" style="cursor: pointer;">
|
|
<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
|
<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
|
|
<div class="flex-auto">
|
|
<div class="flex-auto">
|
|
<span class="font30">{{ v.num1 }}</span>
|
|
<span class="font30">{{ v.num1 }}</span>
|
|
@@ -73,6 +73,20 @@ import { storeToRefs } from 'pinia';
|
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
|
import { GetList } from './api';
|
|
import { GetList } from './api';
|
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
|
+
|
|
|
|
+// 定义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 = {
|
|
let global: any = {
|
|
homeChartOne: null,
|
|
homeChartOne: null,
|
|
homeChartTwo: null,
|
|
homeChartTwo: null,
|
|
@@ -191,8 +205,9 @@ export default defineComponent({
|
|
bgColor: '',
|
|
bgColor: '',
|
|
color: '#303133',
|
|
color: '#303133',
|
|
},
|
|
},
|
|
- apiData: null,
|
|
|
|
|
|
+ apiData: null as ApiData | null,
|
|
});
|
|
});
|
|
|
|
+ const router = useRouter();
|
|
// 折线图
|
|
// 折线图
|
|
const initLineChart = () => {
|
|
const initLineChart = () => {
|
|
if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
|
|
if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
|
|
@@ -208,7 +223,7 @@ export default defineComponent({
|
|
tooltip: { trigger: 'axis' },
|
|
tooltip: { trigger: 'axis' },
|
|
legend: { data: ['申请数量'], right: 0 },
|
|
legend: { data: ['申请数量'], right: 0 },
|
|
xAxis: {
|
|
xAxis: {
|
|
- data: state.apiData?.application_trend?.map(item => item.date.substring(5)) ||
|
|
|
|
|
|
+ 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月'],
|
|
['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
},
|
|
},
|
|
yAxis: [
|
|
yAxis: [
|
|
@@ -225,7 +240,7 @@ export default defineComponent({
|
|
symbolSize: 6,
|
|
symbolSize: 6,
|
|
symbol: 'circle',
|
|
symbol: 'circle',
|
|
smooth: true,
|
|
smooth: true,
|
|
- data: state.apiData?.application_trend?.map(item => item.count) ||
|
|
|
|
|
|
+ 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],
|
|
[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' },
|
|
lineStyle: { color: '#fe9a8b' },
|
|
itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
|
@@ -526,7 +541,7 @@ export default defineComponent({
|
|
// 获取API数据
|
|
// 获取API数据
|
|
const fetchApiData = async () => {
|
|
const fetchApiData = async () => {
|
|
try {
|
|
try {
|
|
- const res = await GetList();
|
|
|
|
|
|
+ const res = await GetList({});
|
|
if (res.code === 2000) {
|
|
if (res.code === 2000) {
|
|
state.apiData = res.data;
|
|
state.apiData = res.data;
|
|
updateHomeData(res.data);
|
|
updateHomeData(res.data);
|
|
@@ -536,7 +551,7 @@ export default defineComponent({
|
|
}
|
|
}
|
|
};
|
|
};
|
|
// 更新首页数据
|
|
// 更新首页数据
|
|
- const updateHomeData = (data) => {
|
|
|
|
|
|
+ const updateHomeData = (data: ApiData) => {
|
|
// 更新顶部卡片数据
|
|
// 更新顶部卡片数据
|
|
state.homeOne[0].num1 = data.total_applications.toString();
|
|
state.homeOne[0].num1 = data.total_applications.toString();
|
|
state.homeOne[1].num1 = data.total_positions.toString();
|
|
state.homeOne[1].num1 = data.total_positions.toString();
|
|
@@ -547,27 +562,41 @@ export default defineComponent({
|
|
updateLineChart(data.application_trend);
|
|
updateLineChart(data.application_trend);
|
|
};
|
|
};
|
|
// 更新折线图数据
|
|
// 更新折线图数据
|
|
- const updateLineChart = (trendData) => {
|
|
|
|
|
|
+ const updateLineChart = (trendData: Array<{date: string; count: number}>) => {
|
|
if (!global.homeChartOne) return;
|
|
if (!global.homeChartOne) return;
|
|
|
|
|
|
const option = {
|
|
const option = {
|
|
xAxis: {
|
|
xAxis: {
|
|
- data: trendData.map(item => item.date.substring(5)), // 只显示月-日
|
|
|
|
|
|
+ data: trendData.map((item: {date: string; count: number}) => item.date.substring(5)), // 只显示月-日
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
name: '申请数量',
|
|
name: '申请数量',
|
|
- data: trendData.map(item => item.count),
|
|
|
|
|
|
+ data: trendData.map((item: {date: string; count: number}) => item.count),
|
|
}
|
|
}
|
|
]
|
|
]
|
|
};
|
|
};
|
|
|
|
|
|
(<any>global.homeChartOne).setOption(option);
|
|
(<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]);
|
|
|
|
+ }
|
|
|
|
+ };
|
|
return {
|
|
return {
|
|
homeLineRef,
|
|
homeLineRef,
|
|
homePieRef,
|
|
homePieRef,
|
|
homeBarRef,
|
|
homeBarRef,
|
|
|
|
+ handleCardClick,
|
|
...toRefs(state),
|
|
...toRefs(state),
|
|
};
|
|
};
|
|
},
|
|
},
|