|
|
@@ -1,5 +1,5 @@
|
|
|
-import React, { useState, useEffect, memo, useMemo } from 'react'
|
|
|
-import { View, Text, ScrollView, Picker } from '@tarojs/components'
|
|
|
+import React, { useState, useEffect, memo } from 'react'
|
|
|
+import { View, Text, ScrollView } from '@tarojs/components'
|
|
|
import { useQuery } from '@tanstack/react-query'
|
|
|
import { YongrenTabBarLayout } from '@d8d/yongren-shared-ui/components/YongrenTabBarLayout'
|
|
|
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
|
|
|
@@ -7,21 +7,12 @@ import { ColumnChart } from '@d8d/mini-charts/components/ColumnChart'
|
|
|
import { BarChart } from '@d8d/mini-charts/components/BarChart'
|
|
|
import { PieChart } from '@d8d/mini-charts/components/PieChart'
|
|
|
import { RingChart } from '@d8d/mini-charts/components/RingChart'
|
|
|
-import { PieChartFCExample } from '@d8d/mini-charts/components/PieChartFCExample'
|
|
|
-import { RingChartFCExample } from '@d8d/mini-charts/components/RingChartFCExample'
|
|
|
import { enterpriseStatisticsClient } from '../../api/enterpriseStatisticsClient'
|
|
|
import type {
|
|
|
- DisabilityTypeDistributionResponse,
|
|
|
- GenderDistributionResponse,
|
|
|
- AgeDistributionResponse,
|
|
|
- HouseholdDistributionResponse,
|
|
|
- JobStatusDistributionResponse,
|
|
|
- SalaryDistributionResponse,
|
|
|
EmploymentCountResponse,
|
|
|
AverageSalaryResponse,
|
|
|
EmploymentRateResponse,
|
|
|
- NewCountResponse,
|
|
|
- ApiErrorResponse
|
|
|
+ NewCountResponse
|
|
|
} from '../../api/types'
|
|
|
|
|
|
/**
|
|
|
@@ -67,21 +58,6 @@ export interface StatisticsProps {
|
|
|
}
|
|
|
|
|
|
const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
- // 状态：时间筛选（年-月）- 默认为当前年月
|
|
|
- const now = new Date()
|
|
|
- const [timeFilter, setTimeFilter] = useState({
|
|
|
- year: now.getFullYear(),
|
|
|
- month: now.getMonth() + 1
|
|
|
- })
|
|
|
- const [showDatePicker, setShowDatePicker] = useState(false)
|
|
|
-
|
|
|
- // 生成年份选项（最近5年）
|
|
|
- const currentYear = new Date().getFullYear()
|
|
|
- const years = Array.from({ length: 5 }, (_, i) => currentYear - 4 + i)
|
|
|
-
|
|
|
- // 月份选项
|
|
|
- const months = Array.from({ length: 12 }, (_, i) => i + 1)
|
|
|
-
|
|
|
// 状态：图表懒加载控制 - 哪些图表已经加载
|
|
|
const [loadedCharts, setLoadedCharts] = useState<Set<string>>(new Set(['disability', 'gender'])) // 默认加载前两个关键图表
|
|
|
|
|
|
@@ -111,81 +87,55 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
}
|
|
|
}, [])
|
|
|
|
|
|
- // 处理年份选择
|
|
|
- const onYearChange = (e: any) => {
|
|
|
- const selectedYear = years[e.detail.value]
|
|
|
- setTimeFilter(prev => ({ ...prev, year: selectedYear }))
|
|
|
- }
|
|
|
-
|
|
|
- // 处理月份选择
|
|
|
- const onMonthChange = (e: any) => {
|
|
|
- const selectedMonth = months[e.detail.value]
|
|
|
- setTimeFilter(prev => ({ ...prev, month: selectedMonth }))
|
|
|
- }
|
|
|
-
|
|
|
- // 构建查询参数（用于筛选特定年月的数据）
|
|
|
- const queryFilters = useMemo(() => ({
|
|
|
- year: timeFilter.year,
|
|
|
- month: timeFilter.month
|
|
|
- }), [timeFilter.year, timeFilter.month])
|
|
|
-
|
|
|
- // 获取在职人数统计
|
|
|
+ // 获取在职人数统计（简化版：无查询参数）
|
|
|
const { data: employmentCountData, isLoading: isLoadingEmploymentCount } = useQuery({
|
|
|
- queryKey: ['statistics', 'employment-count', queryFilters],
|
|
|
+ queryKey: ['statistics', 'employment-count'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['employment-count'].$get({
|
|
|
- query: queryFilters
|
|
|
- })
|
|
|
+ const response = await enterpriseStatisticsClient['employment-count'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
staleTime: 5 * 60 * 1000, // 数据过期时间5分钟
|
|
|
gcTime: 10 * 60 * 1000 // 缓存时间10分钟
|
|
|
})
|
|
|
|
|
|
- // 获取平均薪资统计
|
|
|
+ // 获取平均薪资统计（简化版：无查询参数）
|
|
|
const { data: averageSalaryData, isLoading: isLoadingAverageSalary } = useQuery({
|
|
|
- queryKey: ['statistics', 'average-salary', queryFilters],
|
|
|
+ queryKey: ['statistics', 'average-salary'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['average-salary'].$get({
|
|
|
- query: queryFilters
|
|
|
- })
|
|
|
+ const response = await enterpriseStatisticsClient['average-salary'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
staleTime: 5 * 60 * 1000,
|
|
|
gcTime: 10 * 60 * 1000
|
|
|
})
|
|
|
|
|
|
- // 获取在职率统计
|
|
|
+ // 获取在职率统计（简化版：无查询参数）
|
|
|
const { data: employmentRateData, isLoading: isLoadingEmploymentRate } = useQuery({
|
|
|
- queryKey: ['statistics', 'employment-rate', queryFilters],
|
|
|
+ queryKey: ['statistics', 'employment-rate'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['employment-rate'].$get({
|
|
|
- query: queryFilters
|
|
|
- })
|
|
|
+ const response = await enterpriseStatisticsClient['employment-rate'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
staleTime: 5 * 60 * 1000,
|
|
|
gcTime: 10 * 60 * 1000
|
|
|
})
|
|
|
|
|
|
- // 获取新增人数统计
|
|
|
+ // 获取新增人数统计（简化版：无查询参数）
|
|
|
const { data: newCountData, isLoading: isLoadingNewCount } = useQuery({
|
|
|
- queryKey: ['statistics', 'new-count', queryFilters],
|
|
|
+ queryKey: ['statistics', 'new-count'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['new-count'].$get({
|
|
|
- query: queryFilters
|
|
|
- })
|
|
|
+ const response = await enterpriseStatisticsClient['new-count'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
staleTime: 5 * 60 * 1000,
|
|
|
gcTime: 10 * 60 * 1000
|
|
|
})
|
|
|
|
|
|
- // 获取残疾类型分布数据
|
|
|
+ // 获取残疾类型分布数据（无查询参数）
|
|
|
const { data: disabilityData, isLoading: isLoadingDisability } = useQuery({
|
|
|
- queryKey: ['statistics', 'disability-type-distribution', queryFilters],
|
|
|
+ queryKey: ['statistics', 'disability-type-distribution'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['disability-type-distribution'].$get({ query: queryFilters })
|
|
|
+ const response = await enterpriseStatisticsClient['disability-type-distribution'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
enabled: loadedCharts.has('disability'),
|
|
|
@@ -193,11 +143,11 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
gcTime: 10 * 60 * 1000 // 缓存时间10分钟
|
|
|
})
|
|
|
|
|
|
- // 获取性别分布数据
|
|
|
+ // 获取性别分布数据（无查询参数）
|
|
|
const { data: genderData, isLoading: isLoadingGender } = useQuery({
|
|
|
- queryKey: ['statistics', 'gender-distribution', queryFilters],
|
|
|
+ queryKey: ['statistics', 'gender-distribution'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['gender-distribution'].$get({ query: queryFilters })
|
|
|
+ const response = await enterpriseStatisticsClient['gender-distribution'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
enabled: loadedCharts.has('gender'),
|
|
|
@@ -205,11 +155,11 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
gcTime: 10 * 60 * 1000 // 缓存时间10分钟
|
|
|
})
|
|
|
|
|
|
- // 获取年龄分布数据
|
|
|
+ // 获取年龄分布数据（无查询参数）
|
|
|
const { data: ageData, isLoading: isLoadingAge } = useQuery({
|
|
|
- queryKey: ['statistics', 'age-distribution', queryFilters],
|
|
|
+ queryKey: ['statistics', 'age-distribution'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['age-distribution'].$get({ query: queryFilters })
|
|
|
+ const response = await enterpriseStatisticsClient['age-distribution'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
enabled: loadedCharts.has('age'),
|
|
|
@@ -217,11 +167,11 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
gcTime: 10 * 60 * 1000 // 缓存时间10分钟
|
|
|
})
|
|
|
|
|
|
- // 获取户籍分布数据
|
|
|
+ // 获取户籍分布数据（无查询参数）
|
|
|
const { data: householdData, isLoading: isLoadingHousehold } = useQuery({
|
|
|
- queryKey: ['statistics', 'household-distribution', queryFilters],
|
|
|
+ queryKey: ['statistics', 'household-distribution'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['household-distribution'].$get({ query: queryFilters })
|
|
|
+ const response = await enterpriseStatisticsClient['household-distribution'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
enabled: loadedCharts.has('household'),
|
|
|
@@ -229,11 +179,11 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
gcTime: 10 * 60 * 1000 // 缓存时间10分钟
|
|
|
})
|
|
|
|
|
|
- // 获取在职状态分布数据
|
|
|
+ // 获取在职状态分布数据（无查询参数）
|
|
|
const { data: jobStatusData, isLoading: isLoadingJobStatus } = useQuery({
|
|
|
- queryKey: ['statistics', 'job-status-distribution', queryFilters],
|
|
|
+ queryKey: ['statistics', 'job-status-distribution'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['job-status-distribution'].$get({ query: queryFilters })
|
|
|
+ const response = await enterpriseStatisticsClient['job-status-distribution'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
enabled: loadedCharts.has('jobStatus'),
|
|
|
@@ -241,11 +191,11 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
gcTime: 10 * 60 * 1000 // 缓存时间10分钟
|
|
|
})
|
|
|
|
|
|
- // 获取薪资分布数据
|
|
|
+ // 获取薪资分布数据（无查询参数）
|
|
|
const { data: salaryData, isLoading: isLoadingSalary } = useQuery({
|
|
|
- queryKey: ['statistics', 'salary-distribution', queryFilters],
|
|
|
+ queryKey: ['statistics', 'salary-distribution'],
|
|
|
queryFn: async () => {
|
|
|
- const response = await enterpriseStatisticsClient['salary-distribution'].$get({ query: queryFilters })
|
|
|
+ const response = await enterpriseStatisticsClient['salary-distribution'].$get()
|
|
|
return await response.json()
|
|
|
},
|
|
|
enabled: loadedCharts.has('salary'),
|
|
|
@@ -253,9 +203,6 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
gcTime: 10 * 60 * 1000 // 缓存时间10分钟
|
|
|
})
|
|
|
|
|
|
- const isLoading = isLoadingDisability || isLoadingGender || isLoadingAge ||
|
|
|
- isLoadingHousehold || isLoadingJobStatus || isLoadingSalary
|
|
|
-
|
|
|
return (
|
|
|
<YongrenTabBarLayout activeKey="statistics">
|
|
|
<ScrollView
|
|
|
@@ -274,40 +221,15 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
placeholder={true}
|
|
|
/>
|
|
|
|
|
|
- {/* 数据筛选区域 - 对应原型第880-886行 */}
|
|
|
+ {/* 数据筛选区域 - 简化版：只保留标题 */}
|
|
|
<View className="mb-4 pt-4">
|
|
|
<View className="flex justify-between items-center mb-3">
|
|
|
<Text className="font-semibold text-gray-700">数据统计</Text>
|
|
|
- <View className="flex items-center bg-gray-100 rounded-lg">
|
|
|
- {/* 年份选择器 */}
|
|
|
- <Picker
|
|
|
- mode="selector"
|
|
|
- range={years}
|
|
|
- value={years.indexOf(timeFilter.year)}
|
|
|
- onChange={onYearChange}
|
|
|
- >
|
|
|
- <View className="flex items-center px-3 py-1">
|
|
|
- <Text className="text-sm text-gray-700">{timeFilter.year}年</Text>
|
|
|
- </View>
|
|
|
- </Picker>
|
|
|
- {/* 月份选择器 */}
|
|
|
- <Picker
|
|
|
- mode="selector"
|
|
|
- range={months}
|
|
|
- value={timeFilter.month - 1}
|
|
|
- onChange={onMonthChange}
|
|
|
- >
|
|
|
- <View className="flex items-center px-2 py-1">
|
|
|
- <Text className="text-sm text-gray-700">{timeFilter.month}月</Text>
|
|
|
- <Text className="fas fa-chevron-down text-gray-500 ml-1"></Text>
|
|
|
- </View>
|
|
|
- </Picker>
|
|
|
- </View>
|
|
|
</View>
|
|
|
</View>
|
|
|
|
|
|
|
|
|
- {/* 统计卡片 */}
|
|
|
+ {/* 统计卡片 - 简化版：只显示当前数值，无对比数据 */}
|
|
|
<View className="grid grid-cols-2 gap-3 mb-4">
|
|
|
{/* 在职人数卡片 */}
|
|
|
<View className="stat-card bg-white rounded-lg p-3 shadow-sm flex flex-col">
|
|
|
@@ -317,12 +239,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
) : !isEmploymentCountSuccess(employmentCountData) ? (
|
|
|
<Text className="text-2xl font-bold text-gray-400">--</Text>
|
|
|
) : (
|
|
|
- <>
|
|
|
- <Text className="text-2xl font-bold text-gray-800">{employmentCountData.count ?? 0}</Text>
|
|
|
- <Text className={`text-xs mt-1 ${(employmentCountData.change ?? 0) >= 0 ? 'text-green-500' : 'text-red-500'}`}>
|
|
|
- {(employmentCountData.change ?? 0) >= 0 ? '↑' : '↓'} 比上月{Math.abs(employmentCountData.change ?? 0) > 0 ? (employmentCountData.change ?? 0) > 0 ? '增加' : '减少' : '持平'}{Math.abs(employmentCountData.change ?? 0)}人
|
|
|
- </Text>
|
|
|
- </>
|
|
|
+ <Text className="text-2xl font-bold text-gray-800">{employmentCountData.count ?? 0}</Text>
|
|
|
)}
|
|
|
</View>
|
|
|
|
|
|
@@ -334,12 +251,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
) : !isAverageSalarySuccess(averageSalaryData) ? (
|
|
|
<Text className="text-2xl font-bold text-gray-400">--</Text>
|
|
|
) : (
|
|
|
- <>
|
|
|
- <Text className="text-2xl font-bold text-gray-800">¥{(averageSalaryData.average ?? 0).toLocaleString()}</Text>
|
|
|
- <Text className={`text-xs mt-1 ${(averageSalaryData.change ?? 0) >= 0 ? 'text-green-500' : 'text-red-500'}`}>
|
|
|
- {(averageSalaryData.change ?? 0) >= 0 ? '↑' : '↓'} 比上月{Math.abs(averageSalaryData.change ?? 0) > 0 ? (averageSalaryData.change ?? 0) > 0 ? '增加' : '减少' : '持平'}¥{Math.abs(averageSalaryData.change ?? 0).toLocaleString()}
|
|
|
- </Text>
|
|
|
- </>
|
|
|
+ <Text className="text-2xl font-bold text-gray-800">¥{(averageSalaryData.average ?? 0).toLocaleString()}</Text>
|
|
|
)}
|
|
|
</View>
|
|
|
|
|
|
@@ -351,12 +263,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
) : !isEmploymentRateSuccess(employmentRateData) ? (
|
|
|
<Text className="text-2xl font-bold text-gray-400">--</Text>
|
|
|
) : (
|
|
|
- <>
|
|
|
- <Text className="text-2xl font-bold text-gray-800">{employmentRateData.rate ?? 0}%</Text>
|
|
|
- <Text className={`text-xs mt-1 ${(employmentRateData.change ?? 0) >= 0 ? 'text-green-500' : 'text-red-500'}`}>
|
|
|
- {(employmentRateData.change ?? 0) >= 0 ? '↑' : '↓'} 比上月{Math.abs(employmentRateData.change ?? 0) > 0 ? (employmentRateData.change ?? 0) > 0 ? '提升' : '下降' : '持平'}{Math.abs(employmentRateData.change ?? 0)}%
|
|
|
- </Text>
|
|
|
- </>
|
|
|
+ <Text className="text-2xl font-bold text-gray-800">{employmentRateData.rate ?? 0}%</Text>
|
|
|
)}
|
|
|
</View>
|
|
|
|
|
|
@@ -368,12 +275,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
) : !isNewCountSuccess(newCountData) ? (
|
|
|
<Text className="text-2xl font-bold text-gray-400">--</Text>
|
|
|
) : (
|
|
|
- <>
|
|
|
- <Text className="text-2xl font-bold text-gray-800">{newCountData.count ?? 0}</Text>
|
|
|
- <Text className={`text-xs mt-1 ${(newCountData.change ?? 0) >= 0 ? 'text-green-500' : 'text-red-500'}`}>
|
|
|
- {(newCountData.change ?? 0) >= 0 ? '↑' : '↓'} 比上月{Math.abs(newCountData.change ?? 0) > 0 ? (newCountData.change ?? 0) > 0 ? '增加' : '减少' : '持平'}{Math.abs(newCountData.change ?? 0)}人
|
|
|
- </Text>
|
|
|
- </>
|
|
|
+ <Text className="text-2xl font-bold text-gray-800">{newCountData.count ?? 0}</Text>
|
|
|
)}
|
|
|
</View>
|
|
|
</View>
|
|
|
@@ -515,7 +417,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
</View>
|
|
|
)
|
|
|
} else {
|
|
|
- return <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
|
|
|
+ return <Text className="text-gray-500 text-center py-4">暂无数据</Text>
|
|
|
}
|
|
|
})()}
|
|
|
</View>
|
|
|
@@ -544,7 +446,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
</View>
|
|
|
)
|
|
|
} else {
|
|
|
- return <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
|
|
|
+ return <Text className="text-gray-500 text-center py-4">暂无数据</Text>
|
|
|
}
|
|
|
})()}
|
|
|
</View>
|
|
|
@@ -578,4 +480,4 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
)
|
|
|
}
|
|
|
|
|
|
-export default memo(Statistics)
|
|
|
+export default memo(Statistics)
|
yourname