From 050d4f9fcfdc26da1e95cb54fb21fd9c78914482 Mon Sep 17 00:00:00 2001
From: songxiangjie <1329159231@qq.com>
Date: Sat, 13 Dec 2025 18:05:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E5=8F=AF?=
 =?UTF-8?q?=E8=A7=86=E5=8C=96=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cs_chart.html | 331 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 280 insertions(+), 51 deletions(-)

diff --git a/cs_chart.html b/cs_chart.html
index e3e3ddf..51e8b92 100644
--- a/cs_chart.html
+++ b/cs_chart.html
@@ -150,6 +150,12 @@
         .btn-primary:hover {
             background-color: var(--dark-green);
         }
+        
+        .btn-primary:disabled {
+            background-color: #9e9e9e;
+            cursor: not-allowed;
+            opacity: 0.6;
+        }
 
         .btn-secondary {
             background-color: var(--light-green);
@@ -397,6 +403,20 @@
             transform: translateY(-2px);
             box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
         }
+        
+        .task-item.active {
+            background-color: var(--secondary-green);
+            border-color: var(--primary-green);
+            box-shadow: 0 3px 8px rgba(46, 125, 50, 0.3);
+        }
+        
+        .task-item.active span {
+            color: white;
+        }
+        
+        .task-item.active i {
+            color: white;
+        }
 
         .task-item i {
             font-size: 1.2rem;
@@ -762,8 +782,9 @@
             </div>
 
             <div class="search-actions" style="display: flex; gap: 8px; margin-left: auto;">
-                <button class="btn btn-primary" @click="handleSearch" title="搜索">
-                    <i class="fas fa-search"></i> 搜索
+                <button class="btn btn-primary" @click="handleSearch" :disabled="uiState.isLoading" title="搜索">
+                    <i :class="uiState.isLoading ? 'fas fa-spinner fa-spin' : 'fas fa-search'"></i> 
+                    {{ uiState.isLoading ? '加载中...' : '搜索' }}
                 </button>
                 <button class="btn btn-kpi" @click="toggleKpiBar" :title="uiState.showKpiBar ? '收起KPI数据' : '查看KPI数据'">
                     <i :class="uiState.showKpiBar ? 'fas fa-minus' : 'fas fa-chart-bar'"></i> {{ uiState.showKpiBar ? '收起KPI' : 'KPI' }}
@@ -794,7 +815,7 @@
     <section class="query-bar" :class="{ show: uiState.showQueryBar }">
         <h3><i class="fas fa-filter"></i> 高级查询条件</h3>
         <div class="query-items">
-            <div class="query-btn" style="background-color: var(--primary-green); color: white; border-color: var(--dark-green);" @click="navigateTo('driver_list.html')">
+            <div class="query-btn" style="background-color: var(--primary-green); color: white; border-color: var(--dark-green);" @click="navigateTo('http://homenew.auto-sos.net/saler/driver-list')">
                 <i class="fas fa-users"></i>
                 <span>司机列表</span>
             </div>
@@ -824,7 +845,9 @@
     <!-- 任务栏 -->
     <section class="task-bar">
         <div class="task-items">
-            <div v-for="(task, index) in taskList" :key="index" class="task-item" @click="navigateTo(task.page)">
+            <div v-for="(task, index) in taskList" :key="index" class="task-item" 
+                 :class="{ 'active': task.type === activeTaskType }"
+                 @click="handleTaskClick(task)">
                 <i :class="task.icon"></i>
                 <span>{{ task.label }}</span>
                 <small>({{ task.count }})</small>
@@ -846,7 +869,14 @@
 
         <table>
             <thead>
-            <tr>
+            <tr v-if="activeTaskType === 'online'">
+                <th style="width: 120px;">司机编号</th>
+                <th style="width: 120px;">司机姓名</th>
+                <th style="width: 130px;">司机手机号</th>
+                <th style="width: 120px;">未读消息数</th>
+                <th style="width: 150px;">操作</th>
+            </tr>
+            <tr v-else>
                 <th style="width: 100px;">订单号</th>
                 <th style="width: 80px;">服务项目</th>
                 <th style="width: 80px;">业务来源</th>
@@ -863,7 +893,20 @@
             </tr>
             </thead>
             <tbody>
-            <tr v-for="item in caseList" :key="item.orderNo">
+            <tr v-if="activeTaskType === 'online'" v-for="item in caseList" :key="item.driverId">
+                <td>{{ item.orderNo }}</td>
+                <td>{{ item.driverName }}</td>
+                <td>{{ item.driverPhone }}</td>
+                <td>{{ item.unreadCount }}</td>
+                <td>
+                    <div class="action-buttons">
+                        <button class="action-btn chat-btn" @click="openChatWindow(item.driverId)" title="聊天">
+                            <i class="fas fa-comment-dots"></i> 聊天
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            <tr v-else v-for="item in caseList" :key="item.orderNo">
                 <td>{{ item.orderNo }}</td>
                 <td>{{ item.service }}</td>
                 <td>{{ item.source }}</td>
@@ -1022,6 +1065,7 @@
             const uiState = reactive({
                 showQueryBar: false,
                 showKpiBar: false,
+                isLoading: false,
                 modals: {
                     chat: false,
                     review: false,
@@ -1055,42 +1099,33 @@
 
             // 任务数据
             const taskList = ref([
-                { icon: 'fas fa-phone-alt', label: '待回访', count: 12, page: 'pending_review.html' },
-                { icon: 'fas fa-comments', label: '在线沟通', count: 8, page: 'online_chat.html' },
-                { icon: 'fas fa-exclamation-triangle', label: '不符跟进', count: 5, page: 'non_compliance.html' },
-                { icon: 'fas fa-clock', label: '到勘超时', count: 3, page: 'arrival_timeout.html' },
-                { icon: 'fas fa-gavel', label: '投诉处理', count: 7, page: 'complaint_handling.html' },
-                { icon: 'fas fa-ban', label: '虚假案件', count: 2, page: 'false_case.html' },
-                { icon: 'fas fa-times-circle', label: '拒单案件', count: 4, page: 'reject_case.html' },
-                { icon: 'fas fa-chart-line', label: '溢价案件', count: 1, page: 'premium_case.html' }
+                { icon: 'fas fa-phone-alt', label: '待回访', count: 0, type: 'revisit', listData: [] },
+                { icon: 'fas fa-comments', label: '在线沟通', count: 0, type: 'online', listData: [] },
+                { icon: 'fas fa-exclamation-triangle', label: '不符跟进', count: 0, type: 'reconsider', listData: [] },
+                { icon: 'fas fa-clock', label: '到勘超时', count: 0, type: 'over', listData: [] },
+                { icon: 'fas fa-gavel', label: '投诉处理', count: 0, type: 'complain', listData: [] },
+                { icon: 'fas fa-ban', label: '虚假案件', count: 0, type: 'false', listData: [] },
+                { icon: 'fas fa-times-circle', label: '拒单案件', count: 0, type: 'reject', listData: [] },
+                { icon: 'fas fa-chart-line', label: '溢价案件', count: 0, type: 'premium', listData: [] }
             ]);
 
             // 高级查询按钮
             const advancedQueries = ref([
-                { icon: 'fas fa-star', label: '服务分', link: 'service_score.html' },
-                { icon: 'fas fa-tasks', label: '派单记录', link: 'dispatch_record.html' },
-                { icon: 'fas fa-clock', label: '在线时长', link: 'online_time.html' },
-                { icon: 'fas fa-times-circle', label: '拒单记录', link: 'reject_record.html' },
-                { icon: 'fas fa-gavel', label: '投诉记录', link: 'complaint_record.html' },
-                { icon: 'fas fa-hourglass-end', label: '超时记录', link: 'timeout_record.html' },
-                { icon: 'fas fa-ban', label: '虚假记录', link: 'false_record.html' },
-                { icon: 'fas fa-chart-line', label: '溢价记录', link: 'premium_record.html' }
+                { icon: 'fas fa-star', label: '服务分', link: 'http://homenew.auto-sos.net/rorder/rf-list-average-log' },
+                { icon: 'fas fa-tasks', label: '派单记录', link: 'http://homenew.auto-sos.net/saler/push-order-list' },
+                { icon: 'fas fa-clock', label: '在线时长', link: 'http://homenew.auto-sos.net/saler/online-time-list' },
+                { icon: 'fas fa-times-circle', label: '拒单记录', link: 'http://homenew.auto-sos.net/rorder/rf-list-new?order_id=&company_name=&driver_name=&uid=&create_time_start=&create_time_end=&review_type=4&reason=2' },
+                { icon: 'fas fa-gavel', label: '投诉记录', link: 'http://homenew.auto-sos.net/appeal/list-new' },
+                { icon: 'fas fa-hourglass-end', label: '超时记录', link: 'http://homenew.auto-sos.net/rorder/rf-list-subsidy' },
+                { icon: 'fas fa-ban', label: '虚假记录', link: 'http://homenew.auto-sos.net/rorder/rf-list-average?order_id=&company_name=&driver_name=&uid=&create_time_start=&create_time_end=&review_type=4&reason=9' },
+                { icon: 'fas fa-chart-line', label: '溢价记录', link: 'http://homenew.auto-sos.net/rorder/rf-list-final?order_id=&create_time_start=2025-12-01&create_time_end=2025-12-12&throw_uid=&OrderType=0&review=0&r_status=0&premium=1&page=1&pre-page=25' }
             ]);
 
-            // 案件列表数据 (Mock)
-            const caseList = ref([
-                { orderNo: '10109089', service: '拖车', source: '壹账通', ownerName: '张山', ownerPhone: '13456788990', driverName: '李四', driverPhone: '13567877890', location: '宁波南站', distance: '3km', duration: '12分', score: 3, satisfaction: '满意' },
-                { orderNo: '10109090', service: '搭电', source: '平安保险', ownerName: '王五', ownerPhone: '13856783210', driverName: '赵六', driverPhone: '13987654321', location: '杭州东站', distance: '5km', duration: '20分', score: 4, satisfaction: '非常满意' },
-                { orderNo: '10109091', service: '换胎', source: '太平洋保险', ownerName: '孙七', ownerPhone: '13765439876', driverName: '周八', driverPhone: '13678901234', location: '上海虹桥', distance: '2km', duration: '15分', score: 5, satisfaction: '满意' },
-                { orderNo: '10109092', service: '拖车', source: '壹账通', ownerName: '刘九', ownerPhone: '13543218765', driverName: '郑十', driverPhone: '13456789012', location: '南京南站', distance: '8km', duration: '25分', score: 3, satisfaction: '一般' },
-                { orderNo: '10109093', service: '送油', source: '人保', ownerName: '钱一', ownerPhone: '13987651234', driverName: '吴二', driverPhone: '13876543210', location: '苏州站', distance: '4km', duration: '18分', score: 4, satisfaction: '非常满意' },
-                { orderNo: '10109094', service: '拖车', source: '平安保险', ownerName: '陈三', ownerPhone: '13678904321', driverName: '林四', driverPhone: '13567894321', location: '无锡站', distance: '6km', duration: '22分', score: 2, satisfaction: '不满意' },
-                { orderNo: '10109095', service: '搭电', source: '太平洋保险', ownerName: '杨五', ownerPhone: '13456781234', driverName: '黄六', driverPhone: '13765432109', location: '常州站', distance: '3km', duration: '14分', score: 5, satisfaction: '非常满意' },
-                { orderNo: '10109096', service: '换胎', source: '壹账通', ownerName: '朱七', ownerPhone: '13876549876', driverName: '秦八', driverPhone: '13678905432', location: '镇江站', distance: '7km', duration: '30分', score: 3, satisfaction: '一般' },
-                { orderNo: '10109097', service: '拖车', source: '人保', ownerName: '何九', ownerPhone: '13567894321', driverName: '许十', driverPhone: '13456789098', location: '嘉兴南站', distance: '5km', duration: '19分', score: 4, satisfaction: '满意' },
-                { orderNo: '10109098', service: '送油', source: '平安保险', ownerName: '吕一', ownerPhone: '13987655678', driverName: '施二', driverPhone: '13876546789', location: '绍兴站', distance: '4km', duration: '17分', score: 5, satisfaction: '非常满意' },
-                { orderNo: '10109099', service: '搭电', source: '太平洋保险', ownerName: '孔三', ownerPhone: '13678906543', driverName: '曹四', driverPhone: '13567897654', location: '金华站', distance: '6km', duration: '23分', score: 3, satisfaction: '一般' }
-            ]);
+            // 案件列表数据 - 初始为空，将从任务按钮点击后填充
+            const caseList = ref([]);
+            
+            // 当前激活的任务类型
+            const activeTaskType = ref('');
 
             // 交互相关
             const currentOrder = ref({});
@@ -1156,16 +1191,66 @@
                 }));
             };
 
+            const formatPercent = (value) => {
+                if (value === null || value === undefined || value === '') return '-';
+                const num = Number(value);
+                if (Number.isNaN(num)) return String(value);
+                return `${num}%`;
+            };
+
+            const fetchFollowUpCount = async (driverTotal) => {
+                try {
+                    const res = await axios.get('http://sos.chat.cn/src/getChatDriverCount.php');
+                    let count = null;
+                    if (Array.isArray(res.data) && res.data.length > 0 && res.data[0].driver_count !== undefined) {
+                        count = Number(res.data[0].driver_count);
+                    } else if (res.data && res.data.driver_count !== undefined) {
+                        count = Number(res.data.driver_count);
+                    }
+                    if (count !== null && !Number.isNaN(count) && kpiList.value.length > 7) {
+                        kpiList.value[7].value = String(count);
+                        const total = Number(driverTotal);
+                        if (!Number.isNaN(total) && total > 0) {
+                            const rate = Math.round((count / total) * 1000) / 10;
+                            kpiList.value[7].subValue = formatPercent(rate);
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error fetching follow-up count:', error);
+                }
+            };
+
+            // 获取在线沟通数据
+            const fetchOnlineChatData = async () => {
+                try {
+                    const res = await axios.get('https://sos-chat.jjsos.cn/src/getUnChatCount.php');
+                    
+                    if (res.data) {
+                        const onlineTask = taskList.value.find(task => task.type === 'online');
+                        if (onlineTask) {
+                            // 更新在线沟通的案件数
+                            onlineTask.count = res.data.total_drivers || 0;
+                            // 更新在线沟通的列表数据
+                            onlineTask.listData = res.data.drivers || [];
+                        }
+                        console.log('在线沟通数据:', res.data.total_drivers, '条');
+                    }
+                } catch (error) {
+                    console.error('Error fetching online chat data:', error);
+                }
+            };
+
             // 方法定义
             const fetchInitialData = async () => {
                 try {
+                    // 构建请求参数 - 只传时间参数
                     const params = {
                         time_start: searchParams.startDate,
                         time_end: searchParams.endDate
                     };
-                    if (searchParams.timeType) {
-                        params.apptimes = searchParams.timeType;
-                    }
+                    
+                    console.log('请求参数:', params);
+                    console.log('完整URL:', `${BASE_URL}third-api/cs-chart-info?time_start=${params.time_start}&time_end=${params.time_end}`);
 
                     const res = await axios.get(BASE_URL + 'third-api/cs-chart-info', {
                         params
@@ -1176,16 +1261,76 @@
                         if (Array.isArray(d.province)) {
                             areaList.provinces = normalizeProvinces(d.province);
                         }
-                        if (d.customers) {
-                            staffOptions.customers = normalizeStaffMap(d.customers);
+                        if (d.salerss) {
+                            staffOptions.customers = normalizeStaffMap(d.salerss);
                         }
                         if (d.salers) {
                             staffOptions.salesmen = normalizeStaffMap(d.salers);
                         }
-                        if (typeof d.driverNum !== 'undefined' && kpiList.value.length > 0) {
+                        if (kpiList.value.length > 0 && typeof d.driverNum !== 'undefined') {
                             kpiList.value[0].value = String(d.driverNum);
+                            fetchFollowUpCount(d.driverNum);
                         }
+                        if (kpiList.value.length > 1 && typeof d.subscribeNum !== 'undefined') {
+                            kpiList.value[1].value = String(d.subscribeNum);
+                        }
+                        if (kpiList.value.length > 2 && typeof d.lostNum !== 'undefined') {
+                            kpiList.value[2].value = String(d.lostNum);
+                        }
+                        if (kpiList.value.length > 4 && typeof d.orderNum !== 'undefined') {
+                            kpiList.value[4].value = String(d.orderNum);
+                        }
+                        if (kpiList.value.length > 4 && typeof d.orderPer !== 'undefined') {
+                            kpiList.value[4].subValue = formatPercent(d.orderPer);
+                        }
+                        if (kpiList.value.length > 5 && typeof d.reconsiderNum !== 'undefined') {
+                            kpiList.value[5].value = String(d.reconsiderNum);
+                        }
+                        if (kpiList.value.length > 5 && typeof d.reconsiderPer !== 'undefined') {
+                            kpiList.value[5].subValue = formatPercent(d.reconsiderPer);
+                        }
+                        if (kpiList.value.length > 6 && typeof d.overNum !== 'undefined') {
+                            kpiList.value[6].value = String(d.overNum);
+                        }
+                        if (kpiList.value.length > 6 && typeof d.overPer !== 'undefined') {
+                            kpiList.value[6].subValue = formatPercent(d.overPer);
+                        }
+                        if (kpiList.value.length > 8 && typeof d.satisfiedNum !== 'undefined') {
+                            kpiList.value[8].value = String(d.satisfiedNum);
+                        }
+                        if (kpiList.value.length > 8 && typeof d.satisfiedPer !== 'undefined') {
+                            kpiList.value[8].subValue = formatPercent(d.satisfiedPer);
+                        }
+                        if (kpiList.value.length > 9 && typeof d.complainNum !== 'undefined') {
+                            kpiList.value[9].value = String(d.complainNum);
+                        }
+                        if (kpiList.value.length > 9 && typeof d.complainPer !== 'undefined') {
+                            kpiList.value[9].subValue = formatPercent(d.complainPer);
+                        }
+                        
+                        // 更新任务栏数据
+                        const taskMap = {
+                            'revisit': { numKey: 'revisitNum', listKey: 'revisitList' },
+                            'reconsider': { numKey: 'reconsiderNum', listKey: 'reconsiderList' },
+                            'over': { numKey: 'overNum', listKey: 'overList' },
+                            'complain': { numKey: 'complainNum', listKey: 'complainList' }
+                        };
+                        
+                        taskList.value.forEach(task => {
+                            if (taskMap[task.type]) {
+                                const { numKey, listKey } = taskMap[task.type];
+                                if (typeof d[numKey] !== 'undefined') {
+                                    task.count = d[numKey];
+                                }
+                                if (Array.isArray(d[listKey])) {
+                                    task.listData = d[listKey];
+                                }
+                            }
+                        });
                     }
+                    
+                    // 获取在线沟通数据
+                    await fetchOnlineChatData();
                 } catch (error) {
                     console.error('Error fetching initial data:', error);
                 }
@@ -1225,13 +1370,37 @@
                 fetchAreas('county', searchParams.city);
             };
 
-            const handleSearch = () => {
-                let timeTypeName = "未选择";
-                if (searchParams.timeType === "1") timeTypeName = "创建时间";
-                else if (searchParams.timeType === "2") timeTypeName = "到期时间";
-                else if (searchParams.timeType === "4") timeTypeName = "保险时间";
-
-                alert(`搜索条件:\n省份ID: ${searchParams.province || '未选择'}\n城市ID: ${searchParams.city || '未选择'}\n区域ID: ${searchParams.district || '未选择'}\n订单号: ${searchParams.orderNumber || '未输入'}\n模糊查询: ${searchParams.fuzzySearch || '未输入'}\n时间类型: ${timeTypeName}\n时间范围: ${searchParams.startDate || '未选择'} 至 ${searchParams.endDate || '未选择'}`);
+            const handleSearch = async () => {
+                // 验证时间范围
+                if (!searchParams.startDate || !searchParams.endDate) {
+                    alert('请选择时间范围');
+                    return;
+                }
+                
+                if (searchParams.startDate > searchParams.endDate) {
+                    alert('开始时间不能晚于结束时间');
+                    return;
+                }
+                
+                try {
+                    // 显示加载状态
+                    uiState.isLoading = true;
+                    console.log('正在搜索数据...');
+                    
+                    // 重新请求接口数据
+                    await fetchInitialData();
+                    
+                    // 清空当前选中的任务类型和案件列表
+                    activeTaskType.value = '';
+                    caseList.value = [];
+                    
+                    console.log('数据刷新成功');
+                } catch (error) {
+                    console.error('搜索失败:', error);
+                    alert('搜索失败，请稍后重试');
+                } finally {
+                    uiState.isLoading = false;
+                }
             };
 
             const toggleKpiBar = () => {
@@ -1245,14 +1414,71 @@
             };
 
             const navigateTo = (url) => {
-                alert(`正在跳转到页面...\nURL: ${url}\n(实际应用中会跳转)`);
-                // window.location.href = url;
+                if (!url) return;
+                window.open(url, '_blank');
+            };
+            
+            // 处理任务按钮点击，加载对应的案件列表
+            const handleTaskClick = (task) => {
+                activeTaskType.value = task.type;
+                
+                // 将列表数据映射到案件列表格式
+                if (Array.isArray(task.listData)) {
+                    // 在线沟通使用不同的数据映射
+                    if (task.type === 'online') {
+                        caseList.value = task.listData.map(item => ({
+                            driverId: item.driver_id || '-',
+                            orderNo: item.driver_id || '-', // 司机编号
+                            driverName: item.user_name || '-', // 司机姓名
+                            driverPhone: item.mobile || '-', // 司机手机号
+                            unreadCount: item.unread_count || 0, // 未读消息数
+                            // 其他字段设为空，因为在线沟通不需要这些字段
+                            service: '-',
+                            source: '-',
+                            ownerName: '-',
+                            ownerPhone: '-',
+                            location: '-',
+                            distance: '-',
+                            duration: '-',
+                            score: '-',
+                            satisfaction: '-'
+                        }));
+                    } else {
+                        // 其他任务类型使用原有的映射
+                        caseList.value = task.listData.map(item => ({
+                            orderNo: item.order_id || item.orderId || '-',
+                            service: item.service_type || item.serviceType || '-',
+                            source: item.source || item.company_name || '-',
+                            ownerName: item.owner_name || item.ownerName || '-',
+                            ownerPhone: item.owner_phone || item.ownerPhone || '-',
+                            driverName: item.driver_name || item.driverName || '-',
+                            driverPhone: item.driver_phone || item.driverPhone || '-',
+                            location: item.location || item.rescue_point || '-',
+                            distance: item.distance || item.arrival_distance || '-',
+                            duration: item.duration || item.arrival_time || '-',
+                            score: item.score || item.service_score || '-',
+                            satisfaction: item.satisfaction || item.satisfy_level || '-'
+                        }));
+                    }
+                } else {
+                    caseList.value = [];
+                }
             };
 
             const exportData = () => {
                 alert('数据导出功能已触发，正在生成Excel文件...');
             };
 
+            const openChatWindow = (driverId) => {
+                if (!driverId || driverId === '-') {
+                    alert('司机ID无效');
+                    return;
+                }
+                // 打开聊天窗口，固定参数
+                const chatUrl = `https://sos-chat.jjsos.cn/chatByKefu.php?from_user_id=22635&to_user_id=65031&from_role=3&to_role=2&driver_id=${driverId}`;
+                window.open(chatUrl, '_blank');
+            };
+
             const openModal = (type, item) => {
                 currentOrder.value = item;
                 uiState.modals[type] = true;
@@ -1302,6 +1528,7 @@
                 taskList,
                 advancedQueries,
                 caseList,
+                activeTaskType,
                 currentOrder,
                 currentInput,
                 chatMessages,
@@ -1312,6 +1539,8 @@
                 toggleKpiBar,
                 toggleQueryBar,
                 navigateTo,
+                handleTaskClick,
+                openChatWindow,
                 exportData,
                 openModal,
                 closeModal,