From 919dcabafa4ed27f4b183932e5f3dc27b58dcb82 Mon Sep 17 00:00:00 2001
From: songxiangjie <1329159231@qq.com>
Date: Fri, 12 Dec 2025 16:17:42 +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 | 1593 ++++++++++++++++++++-----------------------------
 index.html    |  276 ++++++---
 2 files changed, 843 insertions(+), 1026 deletions(-)

diff --git a/cs_chart.html b/cs_chart.html
index 973d8bb..e3e3ddf 100644
--- a/cs_chart.html
+++ b/cs_chart.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>客服工作台 - 优化版</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="./node_modules/axios/dist/axios.min.js"></script>
+    <script src="./node_modules/vue/dist/vue.global.js"></script>
     <style>
         * {
             margin: 0;
@@ -12,20 +14,20 @@
             box-sizing: border-box;
             font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
         }
-        
+
         body {
             background-color: #f5f9f5;
             color: #333;
             line-height: 1.5;
             font-size: 13px;
         }
-        
+
         .container {
             max-width: 1800px;
             margin: 0 auto;
             padding: 15px;
         }
-        
+
         /* 绿色主题颜色定义 */
         :root {
             --primary-green: #2e7d32;
@@ -36,7 +38,7 @@
             --text-color: #333;
             --border-color: #c8e6c9;
         }
-        
+
         /* 头部样式 */
         header {
             background-color: var(--primary-green);
@@ -46,18 +48,18 @@
             box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
             margin-bottom: 15px;
         }
-        
+
         header h1 {
             display: flex;
             align-items: center;
             gap: 10px;
             font-size: 1.5rem;
         }
-        
+
         header h1 i {
             color: #e8f5e9;
         }
-        
+
         /* 搜索栏紧凑样式 */
         .search-bar {
             background-color: white;
@@ -67,24 +69,24 @@
             margin-bottom: 15px;
             border-left: 4px solid var(--secondary-green);
         }
-        
+
         .search-row {
             display: flex;
             flex-wrap: nowrap;
             align-items: center;
             gap: 12px;
         }
-        
+
         .search-field {
             display: flex;
             flex-direction: column;
             flex-shrink: 0;
         }
-        
+
         .search-field.compact {
             min-width: 0;
         }
-        
+
         .search-field label {
             font-weight: 600;
             margin-bottom: 5px;
@@ -92,7 +94,7 @@
             font-size: 0.85rem;
             white-space: nowrap;
         }
-        
+
         .search-field input, .search-field select {
             padding: 7px 9px;
             border: 1px solid var(--border-color);
@@ -102,27 +104,27 @@
             min-width: 120px;
             height: 32px;
         }
-        
+
         .search-field.compact input, .search-field.compact select {
             min-width: 100px;
         }
-        
+
         .search-field input:focus, .search-field select:focus {
             outline: none;
             border-color: var(--secondary-green);
             box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
         }
-        
+
         .date-range {
             display: flex;
             align-items: flex-end;
             gap: 5px;
         }
-        
+
         .date-range .search-field {
             min-width: 140px;
         }
-        
+
         /* 按钮样式 */
         .btn {
             padding: 7px 12px;
@@ -139,45 +141,45 @@
             height: 32px;
             white-space: nowrap;
         }
-        
+
         .btn-primary {
             background-color: var(--primary-green);
             color: white;
         }
-        
+
         .btn-primary:hover {
             background-color: var(--dark-green);
         }
-        
+
         .btn-secondary {
             background-color: var(--light-green);
             color: var(--dark-green);
             border: 1px solid var(--border-color);
         }
-        
+
         .btn-secondary:hover {
             background-color: var(--medium-green);
         }
-        
+
         .btn-more {
             background-color: #f1f8e9;
             color: var(--dark-green);
         }
-        
+
         .btn-kpi {
             background-color: #e3f2fd;
             color: #1565c0;
         }
-        
+
         .btn-kpi:hover {
             background-color: #bbdefb;
         }
-        
+
         .btn-icon {
             padding: 7px;
             min-width: 32px;
         }
-        
+
         /* 高级查询栏 - 默认隐藏 */
         .query-bar {
             background-color: white;
@@ -191,7 +193,7 @@
             transition: all 0.5s ease;
             border-left: 4px solid var(--medium-green);
         }
-        
+
         .query-bar.show {
             padding: 15px;
             max-height: 180px;
@@ -199,7 +201,7 @@
             margin-bottom: 15px;
             overflow-x: auto;
         }
-        
+
         .query-bar h3 {
             color: var(--dark-green);
             margin-bottom: 12px;
@@ -211,14 +213,14 @@
             font-size: 1rem;
             white-space: nowrap;
         }
-        
+
         .query-items {
             display: flex;
             flex-wrap: nowrap;
             gap: 10px;
             min-width: 1500px;
         }
-        
+
         .query-btn {
             padding: 8px 15px;
             background-color: var(--light-green);
@@ -237,23 +239,23 @@
             flex-shrink: 0;
             white-space: nowrap;
         }
-        
+
         .query-btn:hover {
             background-color: var(--medium-green);
             transform: translateY(-2px);
             box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
         }
-        
+
         .query-btn i {
             font-size: 1.2rem;
             margin-bottom: 5px;
             color: var(--primary-green);
         }
-        
+
         .query-btn span {
             font-size: 0.9rem;
         }
-        
+
         /* KPI数据栏 - 默认隐藏 */
         .kpi-bar {
             background-color: white;
@@ -267,15 +269,16 @@
             transition: all 0.5s ease;
             border-left: 4px solid #1565c0;
         }
-        
+
         .kpi-bar.show {
             padding: 15px;
-            max-height: 140px;
+            max-height: 500px;
             opacity: 1;
             margin-bottom: 15px;
-            overflow-x: auto;
+            overflow-y: auto;
+            overflow-x: hidden;
         }
-        
+
         .kpi-bar h3 {
             color: #1565c0;
             margin-bottom: 12px;
@@ -287,14 +290,13 @@
             font-size: 1rem;
             white-space: nowrap;
         }
-        
+
         .kpi-items {
             display: flex;
-            flex-wrap: nowrap;
+            flex-wrap: wrap;
             gap: 15px;
-            min-width: 1800px;
         }
-        
+
         .kpi-item {
             padding: 10px;
             background-color: #e3f2fd;
@@ -303,41 +305,50 @@
             border: 1px solid #bbdefb;
             min-width: 150px;
             flex-shrink: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
         }
-        
+
         .kpi-item.driver {
             background-color: #e8f5e9;
             border-color: #c8e6c9;
         }
-        
+
         .kpi-item.driver .value {
             color: var(--primary-green);
         }
-        
+
         .kpi-item.driver .label {
             color: var(--dark-green);
         }
-        
+
+        .kpi-value-wrapper {
+            display: flex;
+            align-items: baseline;
+            gap: 5px;
+            margin-bottom: 5px;
+        }
+
         .kpi-item .value {
             font-size: 1.4rem;
             font-weight: 700;
             color: #1565c0;
-            margin-bottom: 2px;
         }
-        
+
         .kpi-item .sub-value {
             font-size: 0.9rem;
             color: #2196f3;
             font-weight: 500;
-            margin-bottom: 5px;
         }
-        
+
         .kpi-item .label {
             font-size: 0.85rem;
             color: #0d47a1;
             font-weight: 600;
         }
-        
+
         /* 任务栏样式 */
         .task-bar {
             background-color: white;
@@ -347,7 +358,7 @@
             margin-bottom: 15px;
             border-left: 4px solid var(--secondary-green);
         }
-        
+
         .task-bar h3 {
             color: var(--dark-green);
             margin-bottom: 12px;
@@ -356,7 +367,7 @@
             gap: 8px;
             font-size: 1rem;
         }
-        
+
         .task-items {
             display: flex;
             flex-wrap: nowrap;
@@ -364,7 +375,7 @@
             overflow-x: auto;
             padding-bottom: 5px;
         }
-        
+
         .task-item {
             padding: 10px 12px;
             background-color: var(--light-green);
@@ -380,19 +391,19 @@
             min-width: 110px;
             flex-shrink: 0;
         }
-        
+
         .task-item:hover {
             background-color: var(--medium-green);
             transform: translateY(-2px);
             box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
         }
-        
+
         .task-item i {
             font-size: 1.2rem;
             color: var(--primary-green);
             margin-bottom: 5px;
         }
-        
+
         .task-item span {
             display: block;
             font-weight: 600;
@@ -400,13 +411,13 @@
             font-size: 0.9rem;
             white-space: nowrap;
         }
-        
+
         .task-item small {
             font-size: 0.75rem;
             color: #666;
             margin-top: 2px;
         }
-        
+
         /* 案件信息表格 */
         .case-table-container {
             background-color: white;
@@ -414,7 +425,7 @@
             box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
             overflow: hidden;
         }
-        
+
         .table-header {
             background-color: var(--primary-green);
             color: white;
@@ -423,30 +434,30 @@
             justify-content: space-between;
             align-items: center;
         }
-        
+
         .table-header h3 {
             display: flex;
             align-items: center;
             gap: 8px;
             font-size: 1rem;
         }
-        
+
         .table-header-actions {
             display: flex;
             align-items: center;
             gap: 10px;
         }
-        
+
         table {
             width: 100%;
             border-collapse: collapse;
             table-layout: fixed;
         }
-        
+
         thead {
             background-color: var(--light-green);
         }
-        
+
         th {
             padding: 10px 8px;
             text-align: left;
@@ -458,7 +469,7 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
-        
+
         td {
             padding: 8px;
             border-bottom: 1px solid var(--border-color);
@@ -467,16 +478,16 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
-        
+
         tbody tr:hover {
             background-color: #f9fdf9;
         }
-        
+
         .action-buttons {
             display: flex;
             gap: 6px;
         }
-        
+
         .action-btn {
             padding: 4px 8px;
             border-radius: 3px;
@@ -489,37 +500,37 @@
             transition: all 0.3s;
             white-space: nowrap;
         }
-        
+
         .chat-btn {
             background-color: #e8f5e9;
             color: var(--dark-green);
         }
-        
+
         .chat-btn:hover {
             background-color: var(--medium-green);
         }
-        
+
         .review-btn {
             background-color: #e3f2fd;
             color: #1565c0;
         }
-        
+
         .review-btn:hover {
             background-color: #bbdefb;
         }
-        
+
         .complaint-btn {
             background-color: #ffebee;
             color: #c62828;
         }
-        
+
         .complaint-btn:hover {
             background-color: #ffcdd2;
         }
-        
+
         /* 模态框样式 */
         .modal {
-            display: none;
+            display: flex;
             position: fixed;
             top: 0;
             left: 0;
@@ -530,7 +541,7 @@
             justify-content: center;
             align-items: center;
         }
-        
+
         .modal-content {
             background-color: white;
             border-radius: 6px;
@@ -539,7 +550,7 @@
             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
             overflow: hidden;
         }
-        
+
         .modal-header {
             background-color: var(--primary-green);
             color: white;
@@ -548,11 +559,11 @@
             justify-content: space-between;
             align-items: center;
         }
-        
+
         .modal-body {
             padding: 20px;
         }
-        
+
         .close-btn {
             background: none;
             border: none;
@@ -561,7 +572,7 @@
             cursor: pointer;
             line-height: 1;
         }
-        
+
         .chat-box {
             height: 250px;
             overflow-y: auto;
@@ -572,7 +583,7 @@
             background-color: #fafafa;
             font-size: 0.85rem;
         }
-        
+
         .message {
             margin-bottom: 10px;
             padding: 8px;
@@ -580,18 +591,18 @@
             max-width: 80%;
             font-size: 0.85rem;
         }
-        
+
         .message.received {
             background-color: #e8f5e9;
             align-self: flex-start;
         }
-        
+
         .message.sent {
             background-color: #f1f8e9;
             align-self: flex-end;
             margin-left: auto;
         }
-        
+
         /* 响应式设计 */
         @media (max-width: 1600px) {
             .search-row {
@@ -599,1009 +610,717 @@
                 row-gap: 10px;
             }
         }
-        
+
         @media (max-width: 1200px) {
             .container {
                 padding: 10px;
             }
-            
+
             .query-bar.show {
                 max-height: 200px;
             }
-            
+
             .query-items {
                 flex-wrap: wrap;
                 min-width: auto;
             }
         }
-        
+
         @media (max-width: 992px) {
             .search-row {
                 gap: 10px;
             }
-            
+
             table {
                 display: block;
                 overflow-x: auto;
             }
         }
-        
+
         @media (max-width: 768px) {
             .container {
                 padding: 8px;
             }
-            
+
             .search-field {
                 min-width: 120px !important;
             }
-            
+
             .btn {
                 padding: 6px 10px;
                 font-size: 0.8rem;
             }
-            
+
             .action-buttons {
                 flex-direction: column;
             }
-            
+
             .task-items {
                 overflow-x: auto;
                 padding-bottom: 10px;
             }
-            
+
             .table-header {
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 10px;
             }
-            
+
             .table-header-actions {
                 align-self: flex-end;
             }
         }
-        
+
         @media (max-width: 576px) {
             .search-actions {
                 flex-direction: column;
             }
-            
+
             .btn {
                 width: 100%;
             }
         }
-        
+
         /* 自定义滚动条 */
         ::-webkit-scrollbar {
             width: 6px;
             height: 6px;
         }
-        
+
         ::-webkit-scrollbar-track {
             background: #f1f1f1;
             border-radius: 3px;
         }
-        
+
         ::-webkit-scrollbar-thumb {
             background: #bdbdbd;
             border-radius: 3px;
         }
-        
+
         ::-webkit-scrollbar-thumb:hover {
             background: #9e9e9e;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1><i class="fas fa-headset"></i> 客服工作台管理系统</h1>
-        </header>
-        
-        <!-- 搜索栏 - 紧凑设计 -->
-        <section class="search-bar">
-            <div class="search-row">
-                <div class="search-field compact">
-                    <select id="province">
-                        <option value="">选择省份</option>
-                        <option value="zj">浙江省</option>
-                        <option value="js">江苏省</option>
-                        <option value="sh">上海市</option>
-                    </select>
-                </div>
-                
-                <div class="search-field compact">
-                    <select id="city">
-                        <option value="">选择城市</option>
-                        <option value="nb">宁波市</option>
-                        <option value="hz">杭州市</option>
-                        <option value="sh">上海市</option>
-                    </select>
-                </div>
-                
-                <div class="search-field compact">
-                    <select id="district">
-                        <option value="">选择区域</option>
-                        <option value="nbsouth">宁波南站</option>
-                        <option value="north">江北区</option>
-                        <option value="west">海曙区</option>
-                    </select>
-                </div>
-                
-                <div class="search-field compact">
-                    <input type="text" id="order-number" placeholder="订单号">
-                </div>
-                
-                <div class="search-field" style="min-width: 180px;">
-                    <input type="text" id="fuzzy-search" placeholder="关键词模糊查询">
-                </div>
-                
-                <div class="date-range">
-                    <div class="search-field" style="min-width: 130px;">
-                        <select id="time-type">
-                            <option value="create">创建时间</option>
-                            <option value="expire">到期时间</option>
-                            <option value="insurance">保险时间</option>
-                        </select>
-                    </div>
-                    
-                    <div class="search-field" style="min-width: 130px;">
-                        <input type="date" id="start-date">
-                    </div>
-                    
-                    <span style="margin-bottom: 5px;">至</span>
-                    
-                    <div class="search-field" style="min-width: 130px;">
-                        <input type="date" id="end-date">
-                    </div>
-                </div>
-                
-                <div class="search-actions" style="display: flex; gap: 8px; margin-left: auto;">
-                    <button class="btn btn-primary" id="search-btn" title="搜索">
-                        <i class="fas fa-search"></i> 搜索
-                    </button>
-                    <button class="btn btn-kpi" id="kpi-btn" title="查看KPI数据">
-                        <i class="fas fa-chart-bar"></i> KPI
-                    </button>
-                    <button class="btn btn-more" id="more-btn" title="更多筛选">
-                        <i class="fas fa-ellipsis-h"></i> 更多
-                    </button>
-                </div>
+<div id="app" class="container">
+    <header>
+        <h1><i class="fas fa-headset"></i> 客服工作台管理系统</h1>
+    </header>
+
+    <!-- 搜索栏 - 紧凑设计 -->
+    <section class="search-bar">
+        <div class="search-row">
+            <div class="search-field compact">
+                <select id="province" v-model="searchParams.province" @change="handleProvinceChange">
+                    <option value="">选择省份</option>
+                    <option v-for="item in areaList.provinces" :key="item.id" :value="item.id">{{ item.name }}</option>
+                </select>
             </div>
-        </section>
-        
-        <!-- KPI数据栏 - 默认隐藏，按新顺序排列 -->
-        <section class="kpi-bar" id="kpi-bar">
-            <h3><i class="fas fa-chart-line"></i> KPI数据概览</h3>
-            <div class="kpi-items">
-                <div class="kpi-item driver">
-                    <div class="value">245</div>
-                    <div class="label">司机数</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">156</div>
-                    <div class="label">续费数</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">45</div>
-                    <div class="label">流失数</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">987</div>
-                    <div class="sub-value">98.7%</div>
-                    <div class="label">接单数/率</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">2,541</div>
-                    <div class="sub-value">95.2%</div>
-                    <div class="label">订单数/率</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">56</div>
-                    <div class="sub-value">2.2%</div>
-                    <div class="label">不符数/率</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">78</div>
-                    <div class="sub-value">3.1%</div>
-                    <div class="label">超时数/率</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">342</div>
-                    <div class="sub-value">13.4%</div>
-                    <div class="label">跟进数/率</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">2,123</div>
-                    <div class="sub-value">83.5%</div>
-                    <div class="label">好评数/率</div>
-                </div>
-                <div class="kpi-item">
-                    <div class="value">34</div>
-                    <div class="sub-value">1.3%</div>
-                    <div class="label">投诉数/率</div>
-                </div>
+
+            <div class="search-field compact">
+                <select id="city" v-model="searchParams.city" @change="handleCityChange">
+                    <option value="">选择城市</option>
+                    <option v-for="item in areaList.cities" :key="item.id" :value="item.id">{{ item.name }}</option>
+                </select>
             </div>
-        </section>
-        
-        <!-- 高级查询栏 - 默认隐藏，增加司机列表按钮 -->
-        <section class="query-bar" id="query-bar">
-            <h3><i class="fas fa-filter"></i> 高级查询条件</h3>
-            <div class="query-items">
-                <!-- 司机列表按钮 -->
-                <div class="query-btn" data-link="driver_list.html" style="background-color: var(--primary-green); color: white; border-color: var(--dark-green);">
-                    <i class="fas fa-users"></i>
-                    <span>司机列表</span>
+
+            <div class="search-field compact">
+                <select id="district" v-model="searchParams.district">
+                    <option value="">选择区域</option>
+                    <option v-for="item in areaList.districts" :key="item.id" :value="item.id">{{ item.name }}</option>
+                </select>
+            </div>
+
+            <div class="search-field compact">
+                <input type="text" id="order-number" v-model="searchParams.orderNumber" placeholder="订单号">
+            </div>
+
+            <div class="search-field" style="min-width: 180px;">
+                <input type="text" id="fuzzy-search" v-model="searchParams.fuzzySearch" placeholder="输入司机姓名">
+            </div>
+
+            <div class="date-range">
+                <div class="search-field" style="min-width: 130px;">
+                    <select id="time-type" v-model="searchParams.timeType">
+                        <option value="">选择时间类型</option>
+                        <option value="1">创建时间</option>
+                        <option value="2">到期时间</option>
+                        <option value="4">保险时间</option>
+                    </select>
                 </div>
 
-                <div class="query-btn" data-link="service_score.html">
-                    <i class="fas fa-star"></i>
-                    <span>服务分</span>
+                <div class="search-field" style="min-width: 130px;">
+                    <input type="date" id="start-date" v-model="searchParams.startDate">
                 </div>
-                
-                <div class="query-btn" data-link="dispatch_record.html">
-                    <i class="fas fa-tasks"></i>
-                    <span>派单记录</span>
-                </div>
-                
-                <div class="query-btn" data-link="online_time.html">
-                    <i class="fas fa-clock"></i>
-                    <span>在线时长</span>
-                </div>
-                
-                <div class="query-btn" data-link="reject_record.html">
-                    <i class="fas fa-times-circle"></i>
-                    <span>拒单记录</span>
-                </div>
-                
-                <div class="query-btn" data-link="complaint_record.html">
-                    <i class="fas fa-gavel"></i>
-                    <span>投诉记录</span>
-                </div>
-                
-                <div class="query-btn" data-link="timeout_record.html">
-                    <i class="fas fa-hourglass-end"></i>
-                    <span>超时记录</span>
-                </div>
-                
-                <div class="query-btn" data-link="false_record.html">
-                    <i class="fas fa-ban"></i>
-                    <span>虚假记录</span>
-                </div>
-                
-                <div class="query-btn" data-link="premium_record.html">
-                    <i class="fas fa-chart-line"></i>
-                    <span>溢价记录</span>
-                </div>
-                
-                <!-- 归属客服下拉框 -->
-                <div style="display: flex; flex-direction: column; min-width: 140px; flex-shrink: 0;">
-                    <select style="padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 3px; font-size: 0.85rem; height: 32px;">
-                        <option value="">全部客服</option>
-                        <option value="kf1">张三客服</option>
-                        <option value="kf2">李四客服</option>
-                        <option value="kf3">王五客服</option>
-                        <option value="kf4">赵六客服</option>
-                    </select>
-                    <!--业务员下拉框-->
-                    <select style="padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 3px; font-size: 0.85rem; height: 32px;">
-                        <option value="">全部业务员</option>
-                        <option value="kf1">张三业务员</option>
-                        <option value="kf2">李四业务员</option>
-                        <option value="kf3">王五业务员</option>
-                        <option value="kf3">王五业务员</option>
-                        <option value="kf4">赵六业务员</option>
-                    </select>
+
+                <span style="margin-bottom: 5px;">至</span>
+
+                <div class="search-field" style="min-width: 130px;">
+                    <input type="date" id="end-date" v-model="searchParams.endDate">
                 </div>
             </div>
-        </section>
-        
-        <!-- 任务栏 - 恢复为8个项目 -->
-        <section class="task-bar">
-            <div class="task-items">
-                <div class="task-item" id="pending-review" data-page="pending_review.html">
-                    <i class="fas fa-phone-alt"></i>
-                    <span>待回访</span>
-                    <small>(12)</small>
-                </div>
-                
-                <div class="task-item" id="online-chat" data-page="online_chat.html">
-                    <i class="fas fa-comments"></i>
-                    <span>在线沟通</span>
-                    <small>(8)</small>
-                </div>
-                
-                <div class="task-item" id="non-compliance" data-page="non_compliance.html">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    <span>不符跟进</span>
-                    <small>(5)</small>
-                </div>
-                
-                <div class="task-item" id="arrival-timeout" data-page="arrival_timeout.html">
-                    <i class="fas fa-clock"></i>
-                    <span>到勘超时</span>
-                    <small>(3)</small>
-                </div>
-                
-                <div class="task-item" id="complaint-handling" data-page="complaint_handling.html">
-                    <i class="fas fa-gavel"></i>
-                    <span>投诉处理</span>
-                    <small>(7)</small>
-                </div>
-                
-                <div class="task-item" id="false-case" data-page="false_case.html">
-                    <i class="fas fa-ban"></i>
-                    <span>虚假案件</span>
-                    <small>(2)</small>
-                </div>
-                
-                <div class="task-item" id="reject-case" data-page="reject_case.html">
-                    <i class="fas fa-times-circle"></i>
-                    <span>拒单案件</span>
-                    <small>(4)</small>
-                </div>
-                
-                <div class="task-item" id="premium-case" data-page="premium_case.html">
-                    <i class="fas fa-chart-line"></i>
-                    <span>溢价案件</span>
-                    <small>(1)</small>
-                </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>
+                <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' }}
+                </button>
+                <button class="btn btn-more" @click="toggleQueryBar" :title="uiState.showQueryBar ? '收起高级筛选' : '更多筛选'">
+                    <i :class="uiState.showQueryBar ? 'fas fa-minus' : 'fas fa-ellipsis-h'"></i> {{ uiState.showQueryBar ? '收起' : '更多' }}
+                </button>
             </div>
-        </section>
-        
-        <!-- 案件信息处理列表 -->
-        <section class="case-table-container">
-            <div class="table-header">
-                <h3><i class="fas fa-list"></i> 案件信息处理列表</h3>
-                <div class="table-header-actions">
-                    <span>共 <strong>11</strong> 条记录</span>
-                    <button class="btn btn-secondary" id="export-btn-table" title="导出">
-                        <i class="fas fa-file-export"></i> 导出数据
-                    </button>
+        </div>
+    </section>
+
+    <!-- KPI数据栏 -->
+    <section class="kpi-bar" :class="{ show: uiState.showKpiBar }">
+        <h3><i class="fas fa-chart-line"></i> KPI数据概览</h3>
+        <div class="kpi-items">
+            <div v-for="(item, index) in kpiList" :key="index" class="kpi-item" :class="{ driver: item.isDriver }">
+                <div v-if="item.subValue" class="kpi-value-wrapper">
+                    <div class="value">{{ item.value }}</div>
+                    <div class="sub-value">{{ item.subValue }}</div>
                 </div>
+                <div v-else class="value">{{ item.value }}</div>
+                <div class="label">{{ item.label }}</div>
             </div>
-            
-            <table>
-                <thead>
-                    <tr>
-                        <th style="width: 100px;">订单号</th>
-                        <th style="width: 80px;">服务项目</th>
-                        <th style="width: 80px;">业务来源</th>
-                        <th style="width: 80px;">车主姓名</th>
-                        <th style="width: 110px;">车主号码</th>
-                        <th style="width: 80px;">司机姓名</th>
-                        <th style="width: 110px;">司机号码</th>
-                        <th style="width: 100px;">救援点</th>
-                        <th style="width: 70px;">到勘</th>
-                        <th style="width: 70px;">时效</th>
-                        <th style="width: 70px;">服务分</th>
-                        <th style="width: 70px;">满意度</th>
-                        <th style="width: 180px;">操作</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>10109089</td>
-                        <td>拖车</td>
-                        <td>壹账通</td>
-                        <td>张山</td>
-                        <td>13456788990</td>
-                        <td>李四</td>
-                        <td>13567877890</td>
-                        <td>宁波南站</td>
-                        <td>3km</td>
-                        <td>12分</td>
-                        <td>3</td>
-                        <td>满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109089" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109089" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109089" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109090</td>
-                        <td>搭电</td>
-                        <td>平安保险</td>
-                        <td>王五</td>
-                        <td>13856783210</td>
-                        <td>赵六</td>
-                        <td>13987654321</td>
-                        <td>杭州东站</td>
-                        <td>5km</td>
-                        <td>20分</td>
-                        <td>4</td>
-                        <td>非常满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109090" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109090" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109090" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109091</td>
-                        <td>换胎</td>
-                        <td>太平洋保险</td>
-                        <td>孙七</td>
-                        <td>13765439876</td>
-                        <td>周八</td>
-                        <td>13678901234</td>
-                        <td>上海虹桥</td>
-                        <td>2km</td>
-                        <td>15分</td>
-                        <td>5</td>
-                        <td>满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109091" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109091" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109091" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109092</td>
-                        <td>拖车</td>
-                        <td>壹账通</td>
-                        <td>刘九</td>
-                        <td>13543218765</td>
-                        <td>郑十</td>
-                        <td>13456789012</td>
-                        <td>南京南站</td>
-                        <td>8km</td>
-                        <td>25分</td>
-                        <td>3</td>
-                        <td>一般</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109092" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109092" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109092" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109093</td>
-                        <td>送油</td>
-                        <td>人保</td>
-                        <td>钱一</td>
-                        <td>13987651234</td>
-                        <td>吴二</td>
-                        <td>13876543210</td>
-                        <td>苏州站</td>
-                        <td>4km</td>
-                        <td>18分</td>
-                        <td>4</td>
-                        <td>非常满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109093" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109093" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109093" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109094</td>
-                        <td>拖车</td>
-                        <td>平安保险</td>
-                        <td>陈三</td>
-                        <td>13678904321</td>
-                        <td>林四</td>
-                        <td>13567894321</td>
-                        <td>无锡站</td>
-                        <td>6km</td>
-                        <td>22分</td>
-                        <td>2</td>
-                        <td>不满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109094" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109094" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109094" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109095</td>
-                        <td>搭电</td>
-                        <td>太平洋保险</td>
-                        <td>杨五</td>
-                        <td>13456781234</td>
-                        <td>黄六</td>
-                        <td>13765432109</td>
-                        <td>常州站</td>
-                        <td>3km</td>
-                        <td>14分</td>
-                        <td>5</td>
-                        <td>非常满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109095" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109095" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109095" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109096</td>
-                        <td>换胎</td>
-                        <td>壹账通</td>
-                        <td>朱七</td>
-                        <td>13876549876</td>
-                        <td>秦八</td>
-                        <td>13678905432</td>
-                        <td>镇江站</td>
-                        <td>7km</td>
-                        <td>30分</td>
-                        <td>3</td>
-                        <td>一般</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109096" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109096" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109096" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109097</td>
-                        <td>拖车</td>
-                        <td>人保</td>
-                        <td>何九</td>
-                        <td>13567894321</td>
-                        <td>许十</td>
-                        <td>13456789098</td>
-                        <td>嘉兴南站</td>
-                        <td>5km</td>
-                        <td>19分</td>
-                        <td>4</td>
-                        <td>满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109097" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109097" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109097" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109098</td>
-                        <td>送油</td>
-                        <td>平安保险</td>
-                        <td>吕一</td>
-                        <td>13987655678</td>
-                        <td>施二</td>
-                        <td>13876546789</td>
-                        <td>绍兴站</td>
-                        <td>4km</td>
-                        <td>17分</td>
-                        <td>5</td>
-                        <td>非常满意</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109098" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109098" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109098" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>10109099</td>
-                        <td>搭电</td>
-                        <td>太平洋保险</td>
-                        <td>孔三</td>
-                        <td>13678906543</td>
-                        <td>曹四</td>
-                        <td>13567897654</td>
-                        <td>金华站</td>
-                        <td>6km</td>
-                        <td>23分</td>
-                        <td>3</td>
-                        <td>一般</td>
-                        <td>
-                            <div class="action-buttons">
-                                <button class="action-btn review-btn" data-order="10109099" title="回访">
-                                    <i class="fas fa-phone-alt"></i> 回访
-                                </button>
-                                <button class="action-btn chat-btn" data-order="10109099" title="聊天">
-                                    <i class="fas fa-comment-dots"></i> 聊天
-                                </button>
-                                <button class="action-btn complaint-btn" data-order="10109099" title="投诉">
-                                    <i class="fas fa-gavel"></i> 投诉
-                                </button>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </section>
-    </div>
-    
+        </div>
+    </section>
+
+    <!-- 高级查询栏 -->
+    <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')">
+                <i class="fas fa-users"></i>
+                <span>司机列表</span>
+            </div>
+            <div v-for="(btn, idx) in advancedQueries" :key="idx" class="query-btn" @click="navigateTo(btn.link)">
+                <i :class="btn.icon"></i>
+                <span>{{ btn.label }}</span>
+            </div>
+
+            <!-- 归属客服下拉框 -->
+            <div style="display: flex; flex-direction: column; min-width: 220px; flex-shrink: 0;">
+                <select style="padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 3px; font-size: 0.85rem; height: 32px; margin-bottom: 6px;" v-model="searchParams.customerService">
+                    <option value="">全部客服</option>
+                    <option v-for="item in staffOptions.customers" :key="item.id" :value="item.id">
+                        {{ item.name }}
+                    </option>
+                </select>
+                <select style="padding: 7px 9px; border: 1px solid var(--border-color); border-radius: 3px; font-size: 0.85rem; height: 32px;" v-model="searchParams.salesman">
+                    <option value="">全部业务员</option>
+                    <option v-for="item in staffOptions.salesmen" :key="item.id" :value="item.id">
+                        {{ item.name }}
+                    </option>
+                </select>
+            </div>
+        </div>
+    </section>
+
+    <!-- 任务栏 -->
+    <section class="task-bar">
+        <div class="task-items">
+            <div v-for="(task, index) in taskList" :key="index" class="task-item" @click="navigateTo(task.page)">
+                <i :class="task.icon"></i>
+                <span>{{ task.label }}</span>
+                <small>({{ task.count }})</small>
+            </div>
+        </div>
+    </section>
+
+    <!-- 案件信息表格 -->
+    <section class="case-table-container">
+        <div class="table-header">
+            <h3><i class="fas fa-list"></i> 案件信息处理列表</h3>
+            <div class="table-header-actions">
+                <span>共 <strong>{{ caseList.length }}</strong> 条记录</span>
+                <button class="btn btn-secondary" @click="exportData" title="导出">
+                    <i class="fas fa-file-export"></i> 导出数据
+                </button>
+            </div>
+        </div>
+
+        <table>
+            <thead>
+            <tr>
+                <th style="width: 100px;">订单号</th>
+                <th style="width: 80px;">服务项目</th>
+                <th style="width: 80px;">业务来源</th>
+                <th style="width: 80px;">车主姓名</th>
+                <th style="width: 110px;">车主号码</th>
+                <th style="width: 80px;">司机姓名</th>
+                <th style="width: 110px;">司机号码</th>
+                <th style="width: 100px;">救援点</th>
+                <th style="width: 70px;">到勘</th>
+                <th style="width: 70px;">时效</th>
+                <th style="width: 70px;">服务分</th>
+                <th style="width: 70px;">满意度</th>
+                <th style="width: 180px;">操作</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="item in caseList" :key="item.orderNo">
+                <td>{{ item.orderNo }}</td>
+                <td>{{ item.service }}</td>
+                <td>{{ item.source }}</td>
+                <td>{{ item.ownerName }}</td>
+                <td>{{ item.ownerPhone }}</td>
+                <td>{{ item.driverName }}</td>
+                <td>{{ item.driverPhone }}</td>
+                <td>{{ item.location }}</td>
+                <td>{{ item.distance }}</td>
+                <td>{{ item.duration }}</td>
+                <td>{{ item.score }}</td>
+                <td>{{ item.satisfaction }}</td>
+                <td>
+                    <div class="action-buttons">
+                        <button class="action-btn review-btn" @click="openModal('review', item)" title="回访">
+                            <i class="fas fa-phone-alt"></i> 回访
+                        </button>
+                        <button class="action-btn chat-btn" @click="openModal('chat', item)" title="聊天">
+                            <i class="fas fa-comment-dots"></i> 聊天
+                        </button>
+                        <button class="action-btn complaint-btn" @click="openModal('complaint', item)" title="投诉">
+                            <i class="fas fa-gavel"></i> 投诉
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </section>
+
     <!-- 聊天模态框 -->
-    <div class="modal" id="chat-modal">
+    <div v-if="uiState.modals.chat" class="modal">
         <div class="modal-content">
             <div class="modal-header">
                 <h3><i class="fas fa-comments"></i> 在线聊天</h3>
-                <button class="close-btn" id="close-chat">&times;</button>
+                <button class="close-btn" @click="closeModal('chat')">&times;</button>
             </div>
             <div class="modal-body">
-                <div class="chat-box" id="chat-box">
-                    <div class="message received">
-                        <strong>客服:</strong> 您好，请问有什么可以帮助您的？
-                    </div>
-                    <div class="message sent">
-                        <strong>用户:</strong> 我的拖车服务什么时候能到？
-                    </div>
-                    <div class="message received">
-                        <strong>客服:</strong> 根据系统显示，司机李四预计在12分钟内到达您的位置。
+                <div class="chat-box" ref="chatBoxRef">
+                    <div v-for="(msg, idx) in chatMessages" :key="idx" class="message" :class="msg.type">
+                        <strong>{{ msg.sender }}:</strong> {{ msg.content }}
                     </div>
                 </div>
                 <div class="input-group">
-                    <textarea id="message-input" placeholder="请输入消息..." rows="3" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;"></textarea>
-                    <button class="btn btn-primary" id="send-message" style="margin-top: 8px; width: 100%;">
+                    <textarea v-model="currentInput.message" placeholder="请输入消息..." rows="3"
+                              style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;"></textarea>
+                    <button class="btn btn-primary" @click="sendMessage" style="margin-top: 8px; width: 100%;">
                         <i class="fas fa-paper-plane"></i> 发送消息
                     </button>
                 </div>
             </div>
         </div>
     </div>
-    
+
     <!-- 回访模态框 -->
-    <div class="modal" id="review-modal">
+    <div v-if="uiState.modals.review" class="modal">
         <div class="modal-content">
             <div class="modal-header">
                 <h3><i class="fas fa-phone-alt"></i> 客户回访</h3>
-                <button class="close-btn" id="close-review">&times;</button>
+                <button class="close-btn" @click="closeModal('review')">&times;</button>
             </div>
             <div class="modal-body">
-                <p><strong>订单号:</strong> <span id="review-order">10109089</span></p>
-                <p><strong>客户姓名:</strong> 张山</p>
-                <p><strong>服务项目:</strong> 拖车</p>
-                
+                <p><strong>订单号:</strong> <span>{{ currentOrder.orderNo }}</span></p>
+                <p><strong>客户姓名:</strong> {{ currentOrder.ownerName }}</p>
+                <p><strong>服务项目:</strong> {{ currentOrder.service }}</p>
+
                 <div style="margin-top: 15px;">
                     <label><strong>回访结果:</strong></label>
-                    <select id="review-result" style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;">
+                    <select v-model="currentInput.reviewResult"
+                            style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;">
                         <option value="满意">满意</option>
                         <option value="一般">一般</option>
                         <option value="不满意">不满意</option>
                     </select>
                 </div>
-                
+
                 <div style="margin-top: 12px;">
                     <label><strong>回访备注:</strong></label>
-                    <textarea id="review-notes" rows="3" style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;"></textarea>
+                    <textarea v-model="currentInput.reviewNotes" rows="3"
+                              style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;"></textarea>
                 </div>
-                
-                <button class="btn btn-primary" id="submit-review" style="margin-top: 15px; width: 100%;">
+
+                <button class="btn btn-primary" @click="submitReview" style="margin-top: 15px; width: 100%;">
                     <i class="fas fa-check"></i> 提交回访结果
                 </button>
             </div>
         </div>
     </div>
-    
+
     <!-- 投诉处理模态框 -->
-    <div class="modal" id="complaint-modal">
+    <div v-if="uiState.modals.complaint" class="modal">
         <div class="modal-content">
             <div class="modal-header">
                 <h3><i class="fas fa-gavel"></i> 投诉处理</h3>
-                <button class="close-btn" id="close-complaint">&times;</button>
+                <button class="close-btn" @click="closeModal('complaint')">&times;</button>
             </div>
             <div class="modal-body">
-                <p><strong>订单号:</strong> <span id="complaint-order">10109089</span></p>
-                <p><strong>投诉人:</strong> 张山</p>
+                <p><strong>订单号:</strong> <span>{{ currentOrder.orderNo }}</span></p>
+                <p><strong>投诉人:</strong> {{ currentOrder.ownerName }}</p>
                 <p><strong>投诉类型:</strong> 服务延迟</p>
-                
+
                 <div style="margin-top: 15px;">
                     <label><strong>投诉详情:</strong></label>
                     <div style="padding: 10px; background-color: #f5f5f5; border-radius: 3px; margin-top: 5px; font-size: 0.85rem;">
                         司机到达时间比预期晚了20分钟，导致我错过了重要会议。
                     </div>
                 </div>
-                
+
                 <div style="margin-top: 12px;">
                     <label><strong>处理方案:</strong></label>
-                    <select id="complaint-solution" style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;">
+                    <select v-model="currentInput.complaintSolution"
+                            style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;">
                         <option value="退款">部分退款</option>
                         <option value="补偿">服务补偿</option>
                         <option value="道歉">正式道歉</option>
                         <option value="其他">其他方案</option>
                     </select>
                 </div>
-                
+
                 <div style="margin-top: 12px;">
                     <label><strong>处理备注:</strong></label>
-                    <textarea id="complaint-notes" rows="3" style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;"></textarea>
+                    <textarea v-model="currentInput.complaintNotes" rows="3"
+                              style="width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 0.85rem;"></textarea>
                 </div>
-                
-                <button class="btn btn-primary" id="submit-complaint" style="margin-top: 15px; width: 100%;">
+
+                <button class="btn btn-primary" @click="submitComplaint" style="margin-top: 15px; width: 100%;">
                     <i class="fas fa-check"></i> 提交处理结果
                 </button>
             </div>
         </div>
     </div>
+</div>
 
-    <script>
-        // 更多按钮点击事件 - 显示/隐藏高级查询栏
-        document.getElementById('more-btn').addEventListener('click', function() {
-            const queryBar = document.getElementById('query-bar');
-            queryBar.classList.toggle('show');
-            
-            // 更改按钮文本
-            if (queryBar.classList.contains('show')) {
-                this.innerHTML = '<i class="fas fa-minus"></i> 收起';
-                this.title = "收起高级筛选";
-            } else {
-                this.innerHTML = '<i class="fas fa-ellipsis-h"></i> 更多';
-                this.title = "更多筛选";
-            }
-            
-            // 如果KPI栏显示，则隐藏KPI栏
-            const kpiBar = document.getElementById('kpi-bar');
-            if (kpiBar.classList.contains('show')) {
-                kpiBar.classList.remove('show');
-                document.getElementById('kpi-btn').innerHTML = '<i class="fas fa-chart-bar"></i> KPI';
-                document.getElementById('kpi-btn').title = "查看KPI数据";
-            }
-        });
-        
-        // KPI按钮点击事件 - 显示/隐藏KPI数据栏
-        document.getElementById('kpi-btn').addEventListener('click', function() {
-            const kpiBar = document.getElementById('kpi-bar');
-            kpiBar.classList.toggle('show');
-            
-            // 更改按钮文本
-            if (kpiBar.classList.contains('show')) {
-                this.innerHTML = '<i class="fas fa-minus"></i> 收起KPI';
-                this.title = "收起KPI数据";
-            } else {
-                this.innerHTML = '<i class="fas fa-chart-bar"></i> KPI';
-                this.title = "查看KPI数据";
-            }
-            
-            // 如果高级查询栏显示，则隐藏高级查询栏
-            const queryBar = document.getElementById('query-bar');
-            if (queryBar.classList.contains('show')) {
-                queryBar.classList.remove('show');
-                document.getElementById('more-btn').innerHTML = '<i class="fas fa-ellipsis-h"></i> 更多';
-                document.getElementById('more-btn').title = "更多筛选";
-            }
-        });
-        
-        // 搜索按钮点击事件
-        document.getElementById('search-btn').addEventListener('click', function() {
-            const province = document.getElementById('province').value;
-            const city = document.getElementById('city').value;
-            const district = document.getElementById('district').value;
-            const orderNumber = document.getElementById('order-number').value;
-            const fuzzySearch = document.getElementById('fuzzy-search').value;
-            const timeType = document.getElementById('time-type').value;
-            const startDate = document.getElementById('start-date').value;
-            const endDate = document.getElementById('end-date').value;
-            
-            // 获取时间类型的中文名称
-            let timeTypeName = "创建时间";
-            if (timeType === "expire") {
-                timeTypeName = "到期时间";
-            } else if (timeType === "insurance") {
-                timeTypeName = "保险时间";
-            }
-            
-            // 模拟搜索，实际应用中这里应该发送请求到服务器
-            alert(`搜索条件:\n省份: ${province || '未选择'}\n城市: ${city || '未选择'}\n区域: ${district || '未选择'}\n订单号: ${orderNumber || '未输入'}\n模糊查询: ${fuzzySearch || '未输入'}\n时间类型: ${timeTypeName}\n时间范围: ${startDate || '未选择'} 至 ${endDate || '未选择'}`);
-        });
-        
-        // 导出按钮点击事件 - 表格头部
-        document.getElementById('export-btn-table').addEventListener('click', function() {
-            alert('数据导出功能已触发，正在生成Excel文件...');
-        });
-        
-        // 任务栏项目点击事件 - 跳转到不同的查询数据页面
-        document.querySelectorAll('.task-item').forEach(item => {
-            item.addEventListener('click', function() {
-                const taskName = this.querySelector('span').textContent;
-                const pageUrl = this.getAttribute('data-page');
-                const count = this.querySelector('small').textContent;
-                
-                // 模拟跳转到不同查询数据页面
-                alert(`正在跳转到${taskName}查询数据页面...\n页面URL: ${pageUrl}\n待处理数量: ${count}\n(实际应用中会跳转到对应的数据查询页面)`);
-                
-                // 在实际应用中，这里应该使用：
-                // window.location.href = pageUrl;
+<script>
+    const { createApp, ref, reactive, onMounted, nextTick } = Vue;
+
+    createApp({
+        setup() {
+            // 基础URL配置
+            const BASE_URL = 'http://backend.jjdev.cn/';
+
+            const searchParams = reactive({
+                province: '',
+                city: '',
+                district: '',
+                orderNumber: '',
+                fuzzySearch: '',
+                timeType: '',
+                startDate: '',
+                endDate: '',
+                customerService: '',
+                salesman: ''
             });
-        });
-        
-        // 高级查询栏按钮点击事件 - 跳转到外部查询数据页面
-        document.querySelectorAll('.query-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                // 模拟跳转到外部查询页面
-                const fieldName = this.querySelector('span').textContent;
-                const linkUrl = this.getAttribute('data-link');
-                alert(`正在跳转到${fieldName}页面...\n链接: ${linkUrl}\n(实际应用中会跳转到外部数据查询页面)`);
+
+            // 界面状态
+            const uiState = reactive({
+                showQueryBar: false,
+                showKpiBar: false,
+                modals: {
+                    chat: false,
+                    review: false,
+                    complaint: false
+                }
+            });
+
+            const areaList = reactive({
+                provinces: [],
+                cities: [],
+                districts: []
+            });
+
+            const staffOptions = reactive({
+                customers: [],
+                salesmen: []
+            });
+
+            const kpiList = ref([
+                { value: '-', label: '司机数', isDriver: true },
+                { value: '156', label: '续费数' },
+                { value: '45', label: '流失数' },
+                { value: '987', subValue: '98.7%', label: '接单数/率' },
+                { value: '2,541', subValue: '95.2%', label: '订单数/率' },
+                { value: '56', subValue: '2.2%', label: '不符数/率' },
+                { value: '78', subValue: '3.1%', label: '超时数/率' },
+                { value: '342', subValue: '13.4%', label: '跟进数/率' },
+                { value: '2,123', subValue: '83.5%', label: '好评数/率' },
+                { value: '34', subValue: '1.3%', label: '投诉数/率' }
+            ]);
+
+            // 任务数据
+            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' }
+            ]);
+
+            // 高级查询按钮
+            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' }
+            ]);
+
+            // 案件列表数据 (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 currentOrder = ref({});
+            const currentInput = reactive({
+                message: '',
+                reviewResult: '满意',
+                reviewNotes: '',
+                complaintSolution: '退款',
+                complaintNotes: ''
+            });
+            const chatMessages = ref([
+                { sender: '客服', content: '您好，请问有什么可以帮助您的？', type: 'received' },
+                { sender: '用户', content: '我的拖车服务什么时候能到？', type: 'sent' },
+                { sender: '客服', content: '根据系统显示，司机李四预计在12分钟内到达您的位置。', type: 'received' }
+            ]);
+            const chatBoxRef = ref(null);
+
+            // 生命周期钩子
+            onMounted(() => {
+                // 初始化日期
+                const today = new Date();
+                const year = today.getFullYear();
+                const month = String(today.getMonth() + 1).padStart(2, '0');
+                const day = String(today.getDate()).padStart(2, '0');
                 
-                // 在实际应用中，这里应该使用：
-                // window.location.href = linkUrl;
+                searchParams.endDate = `${year}-${month}-${day}`;
+                searchParams.startDate = `${year}-${month}-01`;
+
+                // 获取初始数据
+                fetchInitialData();
             });
-        });
-        
-        // 聊天按钮点击事件
-        document.querySelectorAll('.chat-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                const orderId = this.getAttribute('data-order');
-                document.getElementById('chat-modal').style.display = 'flex';
-            });
-        });
-        
-        // 回访按钮点击事件
-        document.querySelectorAll('.review-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                const orderId = this.getAttribute('data-order');
-                document.getElementById('review-order').textContent = orderId;
-                document.getElementById('review-modal').style.display = 'flex';
-            });
-        });
-        
-        // 投诉按钮点击事件
-        document.querySelectorAll('.complaint-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                const orderId = this.getAttribute('data-order');
-                document.getElementById('complaint-order').textContent = orderId;
-                document.getElementById('complaint-modal').style.display = 'flex';
-            });
-        });
-        
-        // 关闭模态框
-        document.getElementById('close-chat').addEventListener('click', function() {
-            document.getElementById('chat-modal').style.display = 'none';
-        });
-        
-        document.getElementById('close-review').addEventListener('click', function() {
-            document.getElementById('review-modal').style.display = 'none';
-        });
-        
-        document.getElementById('close-complaint').addEventListener('click', function() {
-            document.getElementById('complaint-modal').style.display = 'none';
-        });
-        
-        // 点击模态框外部关闭
-        window.addEventListener('click', function(event) {
-            const chatModal = document.getElementById('chat-modal');
-            const reviewModal = document.getElementById('review-modal');
-            const complaintModal = document.getElementById('complaint-modal');
-            
-            if (event.target === chatModal) {
-                chatModal.style.display = 'none';
-            }
-            if (event.target === reviewModal) {
-                reviewModal.style.display = 'none';
-            }
-            if (event.target === complaintModal) {
-                complaintModal.style.display = 'none';
-            }
-        });
-        
-        // 发送消息
-        document.getElementById('send-message').addEventListener('click', function() {
-            const messageInput = document.getElementById('message-input');
-            const message = messageInput.value.trim();
-            
-            if (message) {
-                const chatBox = document.getElementById('chat-box');
-                const newMessage = document.createElement('div');
-                newMessage.className = 'message sent';
-                newMessage.innerHTML = `<strong>客服:</strong> ${message}`;
-                chatBox.appendChild(newMessage);
-                messageInput.value = '';
-                
-                // 滚动到底部
-                chatBox.scrollTop = chatBox.scrollHeight;
-                
-                // 模拟回复
-                setTimeout(() => {
-                    const replyMessage = document.createElement('div');
-                    replyMessage.className = 'message received';
-                    replyMessage.innerHTML = `<strong>用户:</strong> 收到，谢谢您的帮助！`;
-                    chatBox.appendChild(replyMessage);
-                    chatBox.scrollTop = chatBox.scrollHeight;
-                }, 1000);
-            }
-        });
-        
-        // 提交回访
-        document.getElementById('submit-review').addEventListener('click', function() {
-            const result = document.getElementById('review-result').value;
-            const notes = document.getElementById('review-notes').value;
-            
-            alert(`回访结果已提交:\n结果: ${result}\n备注: ${notes || '无'}`);
-            document.getElementById('review-modal').style.display = 'none';
-            
-            // 重置表单
-            document.getElementById('review-notes').value = '';
-        });
-        
-        // 提交投诉处理
-        document.getElementById('submit-complaint').addEventListener('click', function() {
-            const solution = document.getElementById('complaint-solution').value;
-            const notes = document.getElementById('complaint-notes').value;
-            
-            alert(`投诉处理结果已提交:\n处理方案: ${solution}\n备注: ${notes || '无'}`);
-            document.getElementById('complaint-modal').style.display = 'none';
-            
-            // 重置表单
-            document.getElementById('complaint-notes').value = '';
-        });
-        
-        // 初始化日期为今天和一周后
-        const today = new Date().toISOString().split('T')[0];
-        const nextWeek = new Date();
-        nextWeek.setDate(nextWeek.getDate() + 7);
-        const nextWeekStr = nextWeek.toISOString().split('T')[0];
-        
-        document.getElementById('start-date').value = today;
-        document.getElementById('end-date').value = nextWeekStr;
-    </script>
+
+            const normalizeProvinces = (list) => {
+                if (!Array.isArray(list)) return [];
+                return list.map(item => ({
+                    id: item.province_id || item.id || item.areaid,
+                    name: item.province_name || item.name || item.areaname
+                })).filter(item => item.id && item.name);
+            };
+
+            const normalizeAreas = (type, list) => {
+                if (!Array.isArray(list)) return [];
+                if (type === 'city') {
+                    return list.map(item => ({
+                        id: item.city_id || item.id || item.areaid,
+                        name: item.city_name || item.name || item.areaname
+                    })).filter(item => item.id && item.name);
+                }
+                if (type === 'county') {
+                    return list.map(item => ({
+                        id: item.county_id || item.id || item.areaid,
+                        name: item.county_name || item.name || item.areaname
+                    })).filter(item => item.id && item.name);
+                }
+                return list;
+            };
+
+            const normalizeStaffMap = (obj) => {
+                if (!obj || typeof obj !== 'object') return [];
+                return Object.keys(obj).map(key => ({
+                    id: key,
+                    name: obj[key]
+                }));
+            };
+
+            // 方法定义
+            const fetchInitialData = async () => {
+                try {
+                    const params = {
+                        time_start: searchParams.startDate,
+                        time_end: searchParams.endDate
+                    };
+                    if (searchParams.timeType) {
+                        params.apptimes = searchParams.timeType;
+                    }
+
+                    const res = await axios.get(BASE_URL + 'third-api/cs-chart-info', {
+                        params
+                    });
+
+                    if (res.data && res.data.code === 200 && res.data.data) {
+                        const d = res.data.data;
+                        if (Array.isArray(d.province)) {
+                            areaList.provinces = normalizeProvinces(d.province);
+                        }
+                        if (d.customers) {
+                            staffOptions.customers = normalizeStaffMap(d.customers);
+                        }
+                        if (d.salers) {
+                            staffOptions.salesmen = normalizeStaffMap(d.salers);
+                        }
+                        if (typeof d.driverNum !== 'undefined' && kpiList.value.length > 0) {
+                            kpiList.value[0].value = String(d.driverNum);
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error fetching initial data:', error);
+                }
+            };
+
+            const fetchAreas = async (type, areaId) => {
+                if (!areaId) return;
+                try {
+                    const res = await axios.get(BASE_URL + 'ajax/get-areas', {
+                        params: { type, areaid: areaId }
+                    });
+                    if (res.data) {
+                        const list = Array.isArray(res.data) ? res.data : (res.data.data || []);
+                        const normalized = normalizeAreas(type, list);
+                        if (type === 'city') {
+                            areaList.cities = normalized;
+                        } else if (type === 'county') {
+                            areaList.districts = normalized;
+                        }
+                    }
+                } catch (error) {
+                    console.error(`Error fetching ${type}:`, error);
+                }
+            };
+
+            const handleProvinceChange = () => {
+                searchParams.city = '';
+                searchParams.district = '';
+                areaList.cities = [];
+                areaList.districts = [];
+                fetchAreas('city', searchParams.province);
+            };
+
+            const handleCityChange = () => {
+                searchParams.district = '';
+                areaList.districts = [];
+                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 toggleKpiBar = () => {
+                uiState.showKpiBar = !uiState.showKpiBar;
+                if (uiState.showKpiBar) uiState.showQueryBar = false;
+            };
+
+            const toggleQueryBar = () => {
+                uiState.showQueryBar = !uiState.showQueryBar;
+                if (uiState.showQueryBar) uiState.showKpiBar = false;
+            };
+
+            const navigateTo = (url) => {
+                alert(`正在跳转到页面...\nURL: ${url}\n(实际应用中会跳转)`);
+                // window.location.href = url;
+            };
+
+            const exportData = () => {
+                alert('数据导出功能已触发，正在生成Excel文件...');
+            };
+
+            const openModal = (type, item) => {
+                currentOrder.value = item;
+                uiState.modals[type] = true;
+            };
+
+            const closeModal = (type) => {
+                uiState.modals[type] = false;
+            };
+
+            const sendMessage = () => {
+                const msg = currentInput.message.trim();
+                if (msg) {
+                    chatMessages.value.push({ sender: '客服', content: msg, type: 'sent' });
+                    currentInput.message = '';
+                    
+                    nextTick(() => {
+                        if (chatBoxRef.value) chatBoxRef.value.scrollTop = chatBoxRef.value.scrollHeight;
+                    });
+
+                    setTimeout(() => {
+                        chatMessages.value.push({ sender: '用户', content: '收到，谢谢您的帮助！', type: 'received' });
+                        nextTick(() => {
+                            if (chatBoxRef.value) chatBoxRef.value.scrollTop = chatBoxRef.value.scrollHeight;
+                        });
+                    }, 1000);
+                }
+            };
+
+            const submitReview = () => {
+                alert(`回访结果已提交:\n订单: ${currentOrder.value.orderNo}\n结果: ${currentInput.reviewResult}\n备注: ${currentInput.reviewNotes || '无'}`);
+                closeModal('review');
+                currentInput.reviewNotes = '';
+            };
+
+            const submitComplaint = () => {
+                alert(`投诉处理结果已提交:\n订单: ${currentOrder.value.orderNo}\n处理方案: ${currentInput.complaintSolution}\n备注: ${currentInput.complaintNotes || '无'}`);
+                closeModal('complaint');
+                currentInput.complaintNotes = '';
+            };
+
+            return {
+                searchParams,
+                uiState,
+                areaList,
+                staffOptions,
+                kpiList,
+                taskList,
+                advancedQueries,
+                caseList,
+                currentOrder,
+                currentInput,
+                chatMessages,
+                chatBoxRef,
+                handleProvinceChange,
+                handleCityChange,
+                handleSearch,
+                toggleKpiBar,
+                toggleQueryBar,
+                navigateTo,
+                exportData,
+                openModal,
+                closeModal,
+                sendMessage,
+                submitReview,
+                submitComplaint
+            };
+        }
+    }).mount('#app');
+</script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index 60d7ccd..436a5c1 100644
--- a/index.html
+++ b/index.html
@@ -3,31 +3,109 @@
 <head>
     <meta charset="UTF-8">
     <title>客服数据可视化中心</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
     <!-- 依赖 -->
     <script src="./js/echarts.min.js"></script>
     <script src="./js/dayjs.min.js"></script>
     <script src="./js/isoWeek.js"></script>
     <script src="./node_modules/axios/dist/axios.min.js"></script>
     <style>
-        :root{--primary:#3388ff;}
-        * {box-sizing:border-box;}
-        body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial;font-size:14px;background:#f5f7fa;color:#333;}
-        .header{position:sticky;top:0;z-index:9;background:#fff;padding:12px 16px;box-shadow:0 2px 4px rgba(0,0,0,.08);}
-        .header h2{margin:0 0 8px;font-size:18px;}
-        .ctrl{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
-        .ctrl select,.ctrl input{padding:6px 10px;border:1px solid #ddd;border-radius:4px;background:#fff;}
-        .grid{display:grid;grid-template-columns:1fr;gap:12px;padding:12px;}
-        .card{background:#fff;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;}
-        .card-title{font-weight:700;padding:12px 16px 0;font-size:15px;margin:0;}
-        .chart{height:400px;width:100%;min-height:350px;}
-        .chart-container{position:relative;width:100%;height:100%;}
-        /* 移动端 */
-        @media(max-width:600px){
-            .grid{grid-template-columns:1fr;}
-            .ctrl{flex-direction:column;align-items:stretch;}
+        :root {
+            --primary: #3388ff;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial;
+            font-size: 14px;
+            background: #f5f7fa;
+            color: #333;
+        }
+
+        .header {
+            position: sticky;
+            top: 0;
+            z-index: 9;
+            background: #fff;
+            padding: 12px 16px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
+        }
+
+        .header h2 {
+            margin: 0 0 8px;
+            font-size: 18px;
+        }
+
+        .ctrl {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .ctrl select, .ctrl input {
+            padding: 6px 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #fff;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns:1fr;
+            gap: 12px;
+            padding: 12px;
+        }
+
+        .card {
+            background: #fff;
+            border-radius: 6px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
+            overflow: hidden;
+        }
+
+        .card-title {
+            font-weight: 700;
+            padding: 12px 16px 0;
+            font-size: 15px;
+            margin: 0;
+        }
+
+        .chart {
+            height: 400px;
+            width: 100%;
+            min-height: 350px;
+        }
+
+        .chart-container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* 移动端 */
+        @media (max-width: 600px) {
+            .grid {
+                grid-template-columns:1fr;
+            }
+
+            .ctrl {
+                flex-direction: column;
+                align-items: stretch;
+            }
+        }
+
+        .loading {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            color: #999;
         }
-        .loading{display:flex;justify-content:center;align-items:center;height:100%;color:#999;}
     </style>
 </head>
 <body>
@@ -36,10 +114,10 @@
     <a href="index_company.html" target="_blank">公司数据可视化中心</a>
     <div class="ctrl">
         <label>开始月份
-            <input type="month" id="startMonth" value="2025-01">
+            <input id="startMonth" type="month" value="2025-01">
         </label>
         <label>结束月份
-            <input type="month" id="endMonth" value="2025-11">
+            <input id="endMonth" type="month" value="2025-11">
         </label>
         <button id="searchBtn">搜索</button>
         <label>客服
@@ -62,35 +140,51 @@
 <div class="grid">
     <div class="card">
         <div class="card-title">订单数量（多指标对比）</div>
-        <div class="chart-container"><div id="chart1" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="chart1" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">完成率</div>
-        <div class="chart-container"><div id="chart2" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="chart2" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">溢价金额</div>
-        <div class="chart-container"><div id="chart3" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="chart3" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">投诉率</div>
-        <div class="chart-container"><div id="chart4" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="chart4" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">空驶率</div>
-        <div class="chart-container"><div id="chart5" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="chart5" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">关闭率</div>
-        <div class="chart-container"><div id="chart6" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="chart6" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">客服完成率分布</div>
-        <div class="chart-container"><div id="pie" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="pie" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">月度趋势</div>
-        <div class="chart-container"><div id="line" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="line" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
@@ -104,11 +198,15 @@
                 <option value="关闭率">关闭率</option>
             </select>
         </div>
-        <div class="chart-container"><div id="bar" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="bar" class="chart"></div>
+        </div>
     </div>
     <div class="card">
         <div class="card-title">单个客服历史表现</div>
-        <div class="chart-container"><div id="hist" class="chart"></div></div>
+        <div class="chart-container">
+            <div id="hist" class="chart"></div>
+        </div>
     </div>
 </div>
 <script>
@@ -153,11 +251,11 @@
         }
 
         const processedData = [];
-        
+
         // 遍历每个客服
         Object.keys(apiData.data).forEach(staffName => {
             const staffMonthData = apiData.data[staffName];
-            
+
             // 遍历该客服的每个月份数据
             staffMonthData.forEach(monthData => {
                 const row = {
@@ -206,42 +304,42 @@
     /*****************************************************************
      * 1. 初始化空数据
      *****************************************************************/
-    // 初始化为空数组，等待接口数据
+        // 初始化为空数组，等待接口数据
     let novData = [];
 
     /* 生成趋势数据（基于真实月度数据模拟日度数据） */
-    function genTrend(base){
-        const arr=[];
+    function genTrend(base) {
+        const arr = [];
         // 如果没有数据，返回空数组
         if (!base || base.length === 0) return arr;
-        
+
         // 获取最新月份
         const months = [...new Set(base.map(b => b.月份))].sort();
         const latestMonth = months[months.length - 1];
-        
+
         if (!latestMonth) return arr;
-        
+
         // 使用最新月份的数据生成30天趋势
         const latestData = base.filter(b => b.月份 === latestMonth);
-        
-        for(let d=1;d<=30;d++){
-            const date=dayjs(latestMonth + '-01').add(d-1,'day');
-            latestData.forEach(b=>{
+
+        for (let d = 1; d <= 30; d++) {
+            const date = dayjs(latestMonth + '-01').add(d - 1, 'day');
+            latestData.forEach(b => {
                 arr.push({
-                    日期:date.format('YYYY-MM-DD'),
-                    客服:b.调度,
-                    完成率:b.完成率+(Math.random()-0.5)*4,
-                    订单总数:b.订单总数+Math.floor((Math.random()-0.5)*100),
-                    溢价金额:b.溢价金额+(Math.random()-0.5)*500,
-                    投诉率:b.投诉率+(Math.random()-0.5)*0.5,
-                    空驶率:b.空驶率+(Math.random()-0.5)*1,
-                    关闭率:b.关闭率+(Math.random()-0.5)*1
+                    日期: date.format('YYYY-MM-DD'),
+                    客服: b.调度,
+                    完成率: b.完成率 + (Math.random() - 0.5) * 4,
+                    订单总数: b.订单总数 + Math.floor((Math.random() - 0.5) * 100),
+                    溢价金额: b.溢价金额 + (Math.random() - 0.5) * 500,
+                    投诉率: b.投诉率 + (Math.random() - 0.5) * 0.5,
+                    空驶率: b.空驶率 + (Math.random() - 0.5) * 1,
+                    关闭率: b.关闭率 + (Math.random() - 0.5) * 1
                 });
             });
         }
         return arr;
     }
-    
+
     // 初始化为空数组
     let trendData = [];
 
@@ -263,7 +361,7 @@
     let chart1, chart2, chart3, chart4, chart5, chart6; // 时间序列图表
 
     /* 通用配色 */
-    const colors = ['#3388ff','#00c362','#ff9f00','#ff4d4f','#9a6bfd','#36cfc9','#ff7ec2','#ffda5d'];
+    const colors = ['#3388ff', '#00c362', '#ff9f00', '#ff4d4f', '#9a6bfd', '#36cfc9', '#ff7ec2', '#ffda5d'];
 
     /* 初始化图表 */
     function initCharts() {
@@ -331,7 +429,7 @@
             monthData[month].关闭数 += d.关闭数 || 0;
             monthData[month].投诉数 += d.投诉数 || 0;
             monthData[month].溢价金额 += d.溢价金额 || 0;
-            
+
             // 如果是单个客服，直接使用百分比；如果是多个客服，稍后计算
             if (staffs.length === 1) {
                 monthData[month].完成率 = d.完成率 || 0;
@@ -339,7 +437,7 @@
                 monthData[month].空驶率 = d.空驶率 || 0;
                 monthData[month].关闭率 = d.关闭率 || 0;
             }
-            
+
             monthData[month].count += 1;
         });
 
@@ -383,7 +481,7 @@
             color: colors,
             tooltip: {
                 trigger: 'axis',
-                axisPointer: { type: 'shadow' }
+                axisPointer: {type: 'shadow'}
             },
             legend: {
                 data: ['订单总数', '完成率', '溢价金额', '投诉率', '空驶率', '关闭率'],
@@ -399,7 +497,7 @@
             xAxis: {
                 type: 'category',
                 data: months,
-                axisLabel: { rotate: 45 }
+                axisLabel: {rotate: 45}
             },
             yAxis: [
                 {
@@ -467,7 +565,7 @@
             color: colors[0],
             tooltip: {
                 trigger: 'axis',
-                axisPointer: { type: 'shadow' }
+                axisPointer: {type: 'shadow'}
             },
             grid: {
                 left: '3%',
@@ -479,7 +577,7 @@
             xAxis: {
                 type: 'category',
                 data: months,
-                axisLabel: { rotate: 45 }
+                axisLabel: {rotate: 45}
             },
             yAxis: {
                 type: 'value',
@@ -508,7 +606,7 @@
             color: colors[2],
             tooltip: {
                 trigger: 'axis',
-                axisPointer: { type: 'shadow' }
+                axisPointer: {type: 'shadow'}
             },
             grid: {
                 left: '3%',
@@ -520,7 +618,7 @@
             xAxis: {
                 type: 'category',
                 data: months,
-                axisLabel: { rotate: 45 }
+                axisLabel: {rotate: 45}
             },
             yAxis: {
                 type: 'value',
@@ -549,7 +647,7 @@
             color: colors[3],
             tooltip: {
                 trigger: 'axis',
-                axisPointer: { type: 'shadow' }
+                axisPointer: {type: 'shadow'}
             },
             grid: {
                 left: '3%',
@@ -561,7 +659,7 @@
             xAxis: {
                 type: 'category',
                 data: months,
-                axisLabel: { rotate: 45 }
+                axisLabel: {rotate: 45}
             },
             yAxis: {
                 type: 'value',
@@ -590,7 +688,7 @@
             color: colors[4],
             tooltip: {
                 trigger: 'axis',
-                axisPointer: { type: 'shadow' }
+                axisPointer: {type: 'shadow'}
             },
             grid: {
                 left: '3%',
@@ -602,7 +700,7 @@
             xAxis: {
                 type: 'category',
                 data: months,
-                axisLabel: { rotate: 45 }
+                axisLabel: {rotate: 45}
             },
             yAxis: {
                 type: 'value',
@@ -631,7 +729,7 @@
             color: colors[5],
             tooltip: {
                 trigger: 'axis',
-                axisPointer: { type: 'shadow' }
+                axisPointer: {type: 'shadow'}
             },
             grid: {
                 left: '3%',
@@ -643,7 +741,7 @@
             xAxis: {
                 type: 'category',
                 data: months,
-                axisLabel: { rotate: 45 }
+                axisLabel: {rotate: 45}
             },
             yAxis: {
                 type: 'value',
@@ -660,7 +758,7 @@
     }
 
     /* 1. 饼图 - 客服完成率分布（支持切换指标） */
-    function updatePie(){
+    function updatePie() {
         if (!pie) {
             console.warn('饼图实例未初始化');
             return;
@@ -763,7 +861,7 @@
                 color: colors[0],
                 tooltip: {
                     trigger: 'axis',
-                    axisPointer: { type: 'shadow' },
+                    axisPointer: {type: 'shadow'},
                     formatter: '{b}: {c}' + (isRate ? '%' : '')
                 },
                 grid: {
@@ -801,14 +899,14 @@
     }
 
     /* 2. 折线 - 月度趋势（使用真实月度数据） */
-    function updateLine(){
+    function updateLine() {
         if (!line) {
             console.warn('折线图实例未初始化');
             return;
         }
 
         const {novData, staff, index} = state;
-        
+
         // 过滤掉 '全部' 和 '测试' 账号
         const validData = novData.filter(d => !d.调度.includes('全部') && !d.调度.includes('测试'));
 
@@ -828,7 +926,7 @@
             smooth: true,
             symbol: 'circle',
             symbolSize: 6,
-            lineStyle: { width: 3 },
+            lineStyle: {width: 3},
             data: months.map(month => {
                 const item = validData.find(d => d.月份 === month && d.调度 === s);
                 return item ? Math.max(0, item[index]) : 0;
@@ -871,7 +969,7 @@
     }
 
     /* 3. 柱状 - 客服多指标对比 */
-    function updateBar(){
+    function updateBar() {
         if (!bar) {
             console.warn('柱状图实例未初始化');
             return;
@@ -965,7 +1063,7 @@
     }
 
     /* 4. 历史 - 单个或多个客服趋势（使用真实月度数据） */
-    function updateHist(){
+    function updateHist() {
         if (!hist) {
             console.warn('历史图表实例未初始化');
             return;
@@ -1012,7 +1110,7 @@
                 smooth: true,
                 symbol: 'circle',
                 symbolSize: 6,
-                lineStyle: { width: 3 },
+                lineStyle: {width: 3},
                 data: months.map(month => {
                     const item = staffData.find(d => d.月份 === month);
                     return item ? Math.max(0, item[state.index]) : null;
@@ -1032,7 +1130,7 @@
             title: {
                 text: titleText,
                 left: 'center',
-                textStyle: { fontSize: 14 }
+                textStyle: {fontSize: 14}
             },
             color: colors,
             tooltip: {
@@ -1073,7 +1171,7 @@
     }
 
     /* 5. 控件事件 */
-    function bindCtrl(){
+    function bindCtrl() {
         const startMonthInp = document.getElementById('startMonth');
         const endMonthInp = document.getElementById('endMonth');
         const staffSel = document.getElementById('staff');
@@ -1090,24 +1188,24 @@
         searchBtn.addEventListener('click', async () => {
             state.startMonth = startMonthInp.value;
             state.endMonth = endMonthInp.value;
-            
+
             // 确保月份范围有效
             if (dayjs(state.endMonth).isBefore(dayjs(state.startMonth))) {
                 alert('结束月份不能早于开始月份');
                 return;
             }
-            
+
             // 请求数据
             const apiData = await fetchData(state.startMonth, state.endMonth);
             if (apiData && apiData.code === 200 && apiData.data) {
                 novData = processApiData(apiData);
                 state.novData = novData;
-                
+
                 // 重新生成趋势数据
                 const trendBase = novData.filter(b => b.调度 !== '全部' && b.调度 !== '技术部测试');
                 trendData = genTrend(trendBase);
                 state.trendData = trendData;
-                
+
                 // 重新初始化客服列表
                 initCtrl();
                 renderAll();
@@ -1190,7 +1288,7 @@
     }
 
     /* 6. 渲染全部 */
-    function renderAll(){
+    function renderAll() {
         updateChart1();
         updateChart2();
         updateChart3();
@@ -1204,12 +1302,12 @@
     }
 
     /* 7. 初始化控件选项 */
-    function initCtrl(){
+    function initCtrl() {
         const staffSel = document.getElementById('staff');
-        
+
         // 清空现有选项
         staffSel.innerHTML = '';
-        
+
         const staffs = [...new Set(novData.map(d => d.调度))].filter(s => s !== '全部' && s !== '技术部测试');
 
         // 添加"全部"选项
@@ -1249,29 +1347,29 @@
     async function init() {
         try {
             console.log('开始初始化页面...');
-            
+
             // 先请求接口数据
             const startMonthInp = document.getElementById('startMonth');
             const endMonthInp = document.getElementById('endMonth');
             const apiData = await fetchData(startMonthInp.value, endMonthInp.value);
-            
+
             // 如果接口返回数据，替换 novData
             if (apiData && apiData.code === 200 && apiData.data) {
                 novData = processApiData(apiData);
                 state.novData = novData;
-                
+
                 // 重新生成趋势数据
                 const trendBase = novData.filter(b => b.调度 !== '全部' && b.调度 !== '技术部测试');
                 trendData = genTrend(trendBase);
                 state.trendData = trendData;
-                
+
                 console.log('使用接口数据，共', novData.length, '条记录');
             } else {
                 console.warn('接口数据获取失败，请检查接口配置');
                 // 显示友好提示
                 alert('数据加载失败，请检查网络连接或联系管理员');
             }
-            
+
             initCtrl();
             initCharts();
             bindCtrl();