|
@@ -192,7 +192,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
|
|
|
|
|
{/* 残疾类型分布 */}
|
|
{/* 残疾类型分布 */}
|
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
|
- <Text className="font-semibold text-gray-700 mb-3">残疾类型分布</Text>
|
|
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">残疾类型分布</Text>
|
|
|
{isLoadingDisability ? (
|
|
{isLoadingDisability ? (
|
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
|
) : (
|
|
) : (
|
|
@@ -201,7 +201,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
if (stats.length > 0) {
|
|
if (stats.length > 0) {
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
- <View className="chart-container mb-2 h-40 relative">
|
|
|
|
|
|
|
+ <View className="chart-container mb-2 mt-3 h-40 relative">
|
|
|
{stats.map((item: any, index: number) => {
|
|
{stats.map((item: any, index: number) => {
|
|
|
const maxValue = Math.max(...stats.map((s: any) => s.value || 0))
|
|
const maxValue = Math.max(...stats.map((s: any) => s.value || 0))
|
|
|
const height = maxValue > 0 ? ((item.value || 0) / maxValue) * 160 : 0
|
|
const height = maxValue > 0 ? ((item.value || 0) / maxValue) * 160 : 0
|
|
@@ -226,7 +226,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
</>
|
|
</>
|
|
|
)
|
|
)
|
|
|
} else {
|
|
} else {
|
|
|
- return <Text className="text-gray-500 text-center py-4">暂无数据</Text>
|
|
|
|
|
|
|
+ return <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
|
|
|
}
|
|
}
|
|
|
})()
|
|
})()
|
|
|
)}
|
|
)}
|
|
@@ -234,13 +234,13 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
|
|
|
|
|
{/* 性别分布 */}
|
|
{/* 性别分布 */}
|
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
|
- <Text className="font-semibold text-gray-700 mb-3">性别分布</Text>
|
|
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">性别分布</Text>
|
|
|
{isLoadingGender ? (
|
|
{isLoadingGender ? (
|
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
|
) : (() => {
|
|
) : (() => {
|
|
|
const genderStats = getStats(genderData)
|
|
const genderStats = getStats(genderData)
|
|
|
return genderStats.length > 0 ? (
|
|
return genderStats.length > 0 ? (
|
|
|
- <View className="bar-chart flex items-end justify-center gap-10 h-32">
|
|
|
|
|
|
|
+ <View className="bar-chart flex items-end justify-center gap-10 h-32 mt-3">
|
|
|
{genderStats.map((item: any, index: number) => {
|
|
{genderStats.map((item: any, index: number) => {
|
|
|
const maxValue = Math.max(...genderStats.map((s: any) => s.value || 0))
|
|
const maxValue = Math.max(...genderStats.map((s: any) => s.value || 0))
|
|
|
const height = maxValue > 0 ? ((item.value || 0) / maxValue) * 100 : 0
|
|
const height = maxValue > 0 ? ((item.value || 0) / maxValue) * 100 : 0
|
|
@@ -267,14 +267,14 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
|
|
|
|
|
{/* 年龄分布 */}
|
|
{/* 年龄分布 */}
|
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
|
- <Text className="font-semibold text-gray-700 mb-3">年龄分布</Text>
|
|
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">年龄分布</Text>
|
|
|
{isLoadingAge ? (
|
|
{isLoadingAge ? (
|
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
|
) : (() => {
|
|
) : (() => {
|
|
|
const ageStats = getStats(ageData)
|
|
const ageStats = getStats(ageData)
|
|
|
return ageStats.length > 0 ? (
|
|
return ageStats.length > 0 ? (
|
|
|
<>
|
|
<>
|
|
|
- <View className="pie-chart-container flex justify-center mb-4">
|
|
|
|
|
|
|
+ <View className="pie-chart-container flex justify-center mb-4 mt-3">
|
|
|
{/* 简单的饼图表示 - 使用conic-gradient模拟饼图 */}
|
|
{/* 简单的饼图表示 - 使用conic-gradient模拟饼图 */}
|
|
|
<View
|
|
<View
|
|
|
className="w-32 h-32 rounded-full"
|
|
className="w-32 h-32 rounded-full"
|
|
@@ -316,14 +316,14 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
|
|
|
|
|
{/* 户籍省份分布 */}
|
|
{/* 户籍省份分布 */}
|
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
|
- <Text className="font-semibold text-gray-700 mb-3">户籍省份分布</Text>
|
|
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">户籍省份分布</Text>
|
|
|
{isLoadingHousehold ? (
|
|
{isLoadingHousehold ? (
|
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
|
) : (() => {
|
|
) : (() => {
|
|
|
const stats = getStats(householdData)
|
|
const stats = getStats(householdData)
|
|
|
if (stats.length > 0) {
|
|
if (stats.length > 0) {
|
|
|
return (
|
|
return (
|
|
|
- <View className="space-y-3">
|
|
|
|
|
|
|
+ <View className="space-y-3 mt-3">
|
|
|
{stats.slice(0, 6).map((item: HouseholdDistributionResponse['stats'][0], index: number) => {
|
|
{stats.slice(0, 6).map((item: HouseholdDistributionResponse['stats'][0], index: number) => {
|
|
|
const maxValue = Math.max(...stats.map((s: HouseholdDistributionResponse['stats'][0]) => s.value || 0))
|
|
const maxValue = Math.max(...stats.map((s: HouseholdDistributionResponse['stats'][0]) => s.value || 0))
|
|
|
const width = maxValue > 0 ? ((item.value || 0) / maxValue) * 100 : 0
|
|
const width = maxValue > 0 ? ((item.value || 0) / maxValue) * 100 : 0
|
|
@@ -347,21 +347,21 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
</View>
|
|
</View>
|
|
|
)
|
|
)
|
|
|
} else {
|
|
} else {
|
|
|
- return <Text className="text-gray-500 text-center py-4">暂无数据</Text>
|
|
|
|
|
|
|
+ return <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
|
|
|
}
|
|
}
|
|
|
})()}
|
|
})()}
|
|
|
</View>
|
|
</View>
|
|
|
|
|
|
|
|
{/* 在职状态统计 */}
|
|
{/* 在职状态统计 */}
|
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
<View className="card bg-white p-4 mb-4 rounded-lg shadow-sm flex flex-col">
|
|
|
- <Text className="font-semibold text-gray-700 mb-3">在职状态统计</Text>
|
|
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">在职状态统计</Text>
|
|
|
{isLoadingJobStatus ? (
|
|
{isLoadingJobStatus ? (
|
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
|
) : (() => {
|
|
) : (() => {
|
|
|
const stats = getStats(jobStatusData)
|
|
const stats = getStats(jobStatusData)
|
|
|
if (stats.length > 0) {
|
|
if (stats.length > 0) {
|
|
|
return (
|
|
return (
|
|
|
- <View className="flex items-center justify-center">
|
|
|
|
|
|
|
+ <View className="flex items-center justify-center mt-3">
|
|
|
{/* 环形图占位 */}
|
|
{/* 环形图占位 */}
|
|
|
<View className="w-32 h-32 rounded-full border-8 border-blue-500 border-t-transparent transform -rotate-45" />
|
|
<View className="w-32 h-32 rounded-full border-8 border-blue-500 border-t-transparent transform -rotate-45" />
|
|
|
<View className="ml-6 flex flex-col">
|
|
<View className="ml-6 flex flex-col">
|
|
@@ -384,21 +384,21 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
</View>
|
|
</View>
|
|
|
)
|
|
)
|
|
|
} else {
|
|
} else {
|
|
|
- return <Text className="text-gray-500 text-center py-4">暂无数据</Text>
|
|
|
|
|
|
|
+ return <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
|
|
|
}
|
|
}
|
|
|
})()}
|
|
})()}
|
|
|
</View>
|
|
</View>
|
|
|
|
|
|
|
|
{/* 薪资分布 */}
|
|
{/* 薪资分布 */}
|
|
|
<View className="card bg-white p-4 rounded-lg shadow-sm flex flex-col">
|
|
<View className="card bg-white p-4 rounded-lg shadow-sm flex flex-col">
|
|
|
- <Text className="font-semibold text-gray-700 mb-3">薪资分布</Text>
|
|
|
|
|
|
|
+ <Text className="font-semibold text-gray-700">薪资分布</Text>
|
|
|
{isLoadingSalary ? (
|
|
{isLoadingSalary ? (
|
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
<Text className="text-gray-500 text-center py-4">加载中...</Text>
|
|
|
) : (() => {
|
|
) : (() => {
|
|
|
const stats = getStats(salaryData)
|
|
const stats = getStats(salaryData)
|
|
|
if (stats.length > 0) {
|
|
if (stats.length > 0) {
|
|
|
return (
|
|
return (
|
|
|
- <View className="space-y-3">
|
|
|
|
|
|
|
+ <View className="space-y-3 mt-3">
|
|
|
{stats.map((item: SalaryDistributionResponse['stats'][0], index: number) => {
|
|
{stats.map((item: SalaryDistributionResponse['stats'][0], index: number) => {
|
|
|
const maxValue = Math.max(...stats.map((s: SalaryDistributionResponse['stats'][0]) => s.value || 0))
|
|
const maxValue = Math.max(...stats.map((s: SalaryDistributionResponse['stats'][0]) => s.value || 0))
|
|
|
const width = maxValue > 0 ? ((item.value || 0) / maxValue) * 100 : 0
|
|
const width = maxValue > 0 ? ((item.value || 0) / maxValue) * 100 : 0
|
|
@@ -422,7 +422,7 @@ const Statistics: React.FC<StatisticsProps> = () => {
|
|
|
</View>
|
|
</View>
|
|
|
)
|
|
)
|
|
|
} else {
|
|
} else {
|
|
|
- return <Text className="text-gray-500 text-center py-4">暂无数据</Text>
|
|
|
|
|
|
|
+ return <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
|
|
|
}
|
|
}
|
|
|
})()}
|
|
})()}
|
|
|
</View>
|
|
</View>
|