统计

src/components/pages/StatisticsPage.tsx

@@ -39,8 +39,26 @@ interface StatisticsData {
   totalMerchants: number
 }
 
+// 定义经销商分布数据接口
+interface DealerDistribution {
+  equipmentCount: number
+  dealerName: string
+  province: string
+  merchantCount: number
+  dealerId: string
+  workOrderCount: number
+  provinceName: string
+  contactPhone: string
+}
+
+interface DealerDistributionData {
+  distributionList: DealerDistribution[]
+  totalCount: number
+}
+
 export default function StatisticsPage() {
   const [statisticsData, setStatisticsData] = useState<StatisticsData | null>(null)
+  const [dealerDistributionData, setDealerDistributionData] = useState<DealerDistribution[]>([])
   const [loading, setLoading] = useState(true)
   const userData = getUserData()
 
@@ -49,6 +67,7 @@ export default function StatisticsPage() {
 
   useEffect(() => {
     fetchStatistics()
+    fetchDealerDistribution()
   }, [])
 
   const fetchStatistics = async () => {
@@ -65,6 +84,17 @@ export default function StatisticsPage() {
     }
   }
 
+  const fetchDealerDistribution = async () => {
+    try {
+      const response = await apiGet<{ code: number; msg: string; data: DealerDistributionData }>('/back/statistics/dealerDistribution')
+      if (response.code === 200) {
+        setDealerDistributionData(response.data.distributionList)
+      }
+    } catch (error) {
+      console.error('获取经销商分布数据失败:', error)
+    }
+  }
+
   const stats = {
     totalEquipment: statisticsData?.equipmentTotal || 0,
     activeWorkOrders: statisticsData?.completedWorkOrders || 0,
@@ -140,72 +170,7 @@ export default function StatisticsPage() {
     { month: "6月", completed: 158, pending: 27, total: 185 },
   ]
 
-  const provinceData = [
+  // provinceData 已从接口获取，存储在 dealerDistributionData 中
-    {
-      province: "河北",
-      merchants: 156,
-      equipment: 234,
-      workOrders: 45,
-      dealers: "华北消防设备公司",
-      phone: "138****1234",
-    },
-    {
-      province: "河南",
-      merchants: 142,
-      equipment: 198,
-      workOrders: 38,
-      dealers: "中原消防设备公司",
-      phone: "139****5678",
-    },
-    {
-      province: "北京",
-      merchants: 89,
-      equipment: 167,
-      workOrders: 32,
-      dealers: "京城消防设备公司",
-      phone: "137****9012",
-    },
-    {
-      province: "上海",
-      merchants: 134,
-      equipment: 201,
-      workOrders: 41,
-      dealers: "沪东消防设备公司",
-      phone: "136****3456",
-    },
-    {
-      province: "广东",
-      merchants: 178,
-      equipment: 289,
-      workOrders: 56,
-      dealers: "粤南消防设备公司",
-      phone: "135****7890",
-    },
-    {
-      province: "江苏",
-      merchants: 123,
-      equipment: 187,
-      workOrders: 35,
-      dealers: "苏南消防设备公司",
-      phone: "134****2345",
-    },
-    {
-      province: "浙江",
-      merchants: 98,
-      equipment: 145,
-      workOrders: 28,
-      dealers: "浙东消防设备公司",
-      phone: "133****6789",
-    },
-    {
-      province: "山东",
-      merchants: 167,
-      equipment: 245,
-      workOrders: 48,
-      dealers: "鲁东消防设备公司",
-      phone: "132****0123",
-    },
-  ]
 
   // 区域设备分布（暂未使用）
   // const regionEquipmentData = [
@@ -369,28 +334,28 @@ export default function StatisticsPage() {
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {provinceData.map((province, index) => (
+            {dealerDistributionData.map((dealer) => (
-              <div key={index} className="p-4 border rounded-lg hover:shadow-md transition-shadow cursor-pointer">
+              <div key={dealer.dealerId} className="p-4 border rounded-lg hover:shadow-md transition-shadow cursor-pointer">
                 <div className="flex items-center justify-between mb-3">
-                  <h4 className="font-semibold text-lg">{province.province}</h4>
+                  <h4 className="font-semibold text-lg">{dealer.provinceName}</h4>
-                  <Badge variant="outline">{province.dealers}</Badge>
+                  <Badge variant="outline">{dealer.dealerName}</Badge>
                 </div>
                 <div className="space-y-2 text-sm">
                   <div className="flex justify-between">
                     <span className="text-gray-600">商户数量</span>
-                    <span className="font-medium">{province.merchants}</span>
+                    <span className="font-medium">{dealer.merchantCount}</span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-gray-600">设备数量</span>
-                    <span className="font-medium">{province.equipment}</span>
+                    <span className="font-medium">{dealer.equipmentCount}</span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-gray-600">工单数量</span>
-                    <span className="font-medium">{province.workOrders}</span>
+                    <span className="font-medium">{dealer.workOrderCount}</span>
                   </div>
                   <div className="flex justify-between">
                     <span className="text-gray-600">联系电话</span>
-                    <span className="font-medium text-blue-600">{province.phone}</span>
+                    <span className="font-medium text-blue-600">{dealer.contactPhone}</span>
                   </div>
                 </div>
               </div>