From ce1eddad6866b02310fdfe7d88d076eb8862639d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Mon, 22 Sep 2025 10:49:21 +0800 Subject: [PATCH] =?UTF-8?q?FEAT=20=3D>=20=E6=9C=AC=E6=AC=A1=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E9=A1=B9=E7=9B=AE=E4=B8=BA=EF=BC=9A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mine/traffic-pool/list/BatchAddModal.tsx | 67 +++++-- .../traffic-pool/list/DataAnalysisPanel.tsx | 149 +++++++++----- .../mine/traffic-pool/list/FilterModal.tsx | 18 +- .../mine/traffic-pool/list/dataAnyx.tsx | 183 ------------------ .../mobile/mine/traffic-pool/list/index.tsx | 152 +++++++++++---- 5 files changed, 279 insertions(+), 290 deletions(-) delete mode 100644 Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx index 19ffcae4..5feee159 100644 --- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx +++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx @@ -1,28 +1,54 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Popup, Selector, Button } from "antd-mobile"; +import { fetchPackageOptions } from "./api"; import type { PackageOption } from "./data"; interface BatchAddModalProps { visible: boolean; onClose: () => void; - packageOptions: PackageOption[]; - batchTarget: string; - setBatchTarget: (v: string) => void; selectedCount: number; - onConfirm: (options) => void; + onConfirm: (data: { + packageOptions: PackageOption[]; + selectedPackageId: string; + }) => void; } const BatchAddModal: React.FC = ({ visible, onClose, - packageOptions = [], - batchTarget, - setBatchTarget, selectedCount, onConfirm, }) => { - const handSubmit = () => { - onConfirm(packageOptions); + const [packageOptions, setPackageOptions] = useState([]); + const [selectedPackageId, setSelectedPackageId] = useState(""); + const [loading, setLoading] = useState(false); + + // 获取分组选项 + useEffect(() => { + if (visible) { + setLoading(true); + fetchPackageOptions() + .then(res => { + setPackageOptions(res.list || []); + }) + .catch(error => { + console.error("获取分组选项失败:", error); + }) + .finally(() => { + setLoading(false); + }); + } + }, [visible]); + + const handleSubmit = () => { + if (!selectedPackageId) { + // 可以添加提示 + return; + } + onConfirm({ + packageOptions, + selectedPackageId, + }); }; return ( = ({ >
选择目标分组
- ({ label: p.name, value: p.id }))} - value={[batchTarget]} - onChange={v => setBatchTarget(v[0])} - /> + {loading ? ( +
加载中...
+ ) : ( + ({ label: p.name, value: p.id }))} + value={[selectedPackageId]} + onChange={v => setSelectedPackageId(v[0])} + /> + )}
= ({ > 将选中的{selectedCount}个用户加入所选分组
-
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/DataAnalysisPanel.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/DataAnalysisPanel.tsx index 395d7b51..5256de31 100644 --- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/DataAnalysisPanel.tsx +++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/DataAnalysisPanel.tsx @@ -1,24 +1,77 @@ -import React from "react"; +import React, { useState, useEffect, useMemo } from "react"; import { Card, Button } from "antd-mobile"; +import { fetchTrafficPoolList } from "./api"; +import type { TrafficPoolUser } from "./data"; interface DataAnalysisPanelProps { - stats: { + showStats: boolean; + setShowStats: (v: boolean) => void; + onConfirm: (stats: { total: number; highValue: number; added: number; pending: number; failed: number; addSuccessRate: number; - }; - showStats: boolean; - setShowStats: (v: boolean) => void; + }) => void; } const DataAnalysisPanel: React.FC = ({ - stats, showStats, setShowStats, + onConfirm, }) => { + const [list, setList] = useState([]); + const [loading, setLoading] = useState(false); + + // 计算统计数据 + const stats = useMemo(() => { + const total = list.length; + const highValue = list.filter( + u => u.tags && u.tags.includes("高价值客户池"), + ).length; + const added = list.filter(u => u.status === 1).length; + const pending = list.filter(u => u.status === 0).length; + const failed = list.filter(u => u.status === -1).length; + const addSuccessRate = total ? Math.round((added / total) * 100) : 0; + return { total, highValue, added, pending, failed, addSuccessRate }; + }, [list]); + + // 获取数据 + useEffect(() => { + if (showStats) { + setLoading(true); + fetchTrafficPoolList({ page: 1, pageSize: 1000 }) // 获取所有数据进行统计 + .then(res => { + setList(res.list || []); + // 通过 onConfirm 抛出统计数据 + const total = res.list?.length || 0; + const highValue = + res.list?.filter(u => u.tags && u.tags.includes("高价值客户池")) + .length || 0; + const added = res.list?.filter(u => u.status === 1).length || 0; + const pending = res.list?.filter(u => u.status === 0).length || 0; + const failed = res.list?.filter(u => u.status === -1).length || 0; + const addSuccessRate = total ? Math.round((added / total) * 100) : 0; + + onConfirm({ + total, + highValue, + added, + pending, + failed, + addSuccessRate, + }); + }) + .catch(error => { + console.error("获取统计数据失败:", error); + }) + .finally(() => { + setLoading(false); + }); + } + }, [showStats, onConfirm]); + if (!showStats) return null; return (
= ({ boxShadow: "0 2px 8px rgba(0,0,0,0.04)", }} > -
- -
- {stats.total} + {loading ? ( +
+ 加载统计数据中... +
+ ) : ( + <> +
+ +
+ {stats.total} +
+
总用户数
+ + +
+ {stats.highValue} +
+
高价值用户
+
-
总用户数
- - -
- {stats.highValue} +
+ +
+ {stats.addSuccessRate}% +
+
添加成功率
+ + +
+ {stats.added} +
+
已添加
+ + +
+ {stats.pending} +
+
待添加
+ + +
+ {stats.failed} +
+
添加失败
+
-
高价值用户
- -
-
- -
- {stats.addSuccessRate}% -
-
添加成功率
- - -
- {stats.added} -
-
已添加
- - -
- {stats.pending} -
-
待添加
- - -
- {stats.failed} -
-
添加失败
- -
+ + )}
{/* 数据分析面板 */} { + // 可以在这里处理统计数据，比如更新本地状态或发送到父组件 + console.log("收到统计数据:", statsData); + }} /> {/* 批量操作栏 */} @@ -167,11 +242,12 @@ const TrafficPoolList: React.FC = () => { setBatchModal(false)} - packageOptions={packageOptions} - batchTarget={batchTarget} - setBatchTarget={setBatchTarget} selectedCount={selectedIds.length} - onConfirm={handleBatchAdd} + onConfirm={data => { + console.log("收到批量操作数据:", data); + // 处理批量加入逻辑 + handleBatchAdd(data); + }} /> {/* 筛选弹窗 */} { onConfirm={filters => { // 更新筛选条件 setSelectedDevices( - filters.deviceIds.map(id => ({ + filters.deviceld.map(id => ({ id: parseInt(id), memo: "", imei: "", @@ -188,10 +264,10 @@ const TrafficPoolList: React.FC = () => { status: "offline" as const, })), ); - setPackageId(filters.packageId ? parseInt(filters.packageId) : 0); - setScenarioId(filters.scenarioId ? parseInt(filters.scenarioId) : 0); + setPackageId(filters.packageld ? parseInt(filters.packageld) : 0); + setScenarioId(filters.taskId ? parseInt(filters.taskId) : 0); setUserValue(filters.userValue); - setUserStatus(filters.userStatus); + setUserStatus(filters.addStatus); // 重新获取列表 getList(); }}