1607 lines
61 KiB
HTML
1607 lines
61 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-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">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
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;
|
||
--secondary-green: #4caf50;
|
||
--light-green: #e8f5e9;
|
||
--medium-green: #81c784;
|
||
--dark-green: #1b5e20;
|
||
--text-color: #333;
|
||
--border-color: #c8e6c9;
|
||
}
|
||
|
||
/* 头部样式 */
|
||
header {
|
||
background-color: var(--primary-green);
|
||
color: white;
|
||
padding: 12px 15px;
|
||
border-radius: 6px 6px 0 0;
|
||
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;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
|
||
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;
|
||
color: var(--dark-green);
|
||
font-size: 0.85rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.search-field input, .search-field select {
|
||
padding: 7px 9px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 3px;
|
||
font-size: 0.85rem;
|
||
transition: border-color 0.3s;
|
||
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;
|
||
border: none;
|
||
border-radius: 3px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
transition: all 0.3s;
|
||
font-size: 0.85rem;
|
||
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;
|
||
padding: 0;
|
||
border-radius: 6px;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
|
||
margin-bottom: 15px;
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
transition: all 0.5s ease;
|
||
border-left: 4px solid var(--medium-green);
|
||
}
|
||
|
||
.query-bar.show {
|
||
padding: 15px;
|
||
max-height: 180px;
|
||
opacity: 1;
|
||
margin-bottom: 15px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.query-bar h3 {
|
||
color: var(--dark-green);
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
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);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
color: var(--dark-green);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 120px;
|
||
text-align: center;
|
||
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;
|
||
padding: 0;
|
||
border-radius: 6px;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
|
||
margin-bottom: 15px;
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
transition: all 0.5s ease;
|
||
border-left: 4px solid #1565c0;
|
||
}
|
||
|
||
.kpi-bar.show {
|
||
padding: 15px;
|
||
max-height: 140px;
|
||
opacity: 1;
|
||
margin-bottom: 15px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.kpi-bar h3 {
|
||
color: #1565c0;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #bbdefb;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 1rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.kpi-items {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 15px;
|
||
min-width: 1800px;
|
||
}
|
||
|
||
.kpi-item {
|
||
padding: 10px;
|
||
background-color: #e3f2fd;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
border: 1px solid #bbdefb;
|
||
min-width: 150px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.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-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;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
|
||
margin-bottom: 15px;
|
||
border-left: 4px solid var(--secondary-green);
|
||
}
|
||
|
||
.task-bar h3 {
|
||
color: var(--dark-green);
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.task-items {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
gap: 10px;
|
||
overflow-x: auto;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.task-item {
|
||
padding: 10px 12px;
|
||
background-color: var(--light-green);
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border: 1px solid var(--border-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
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;
|
||
color: var(--dark-green);
|
||
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;
|
||
border-radius: 6px;
|
||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-header {
|
||
background-color: var(--primary-green);
|
||
color: white;
|
||
padding: 12px 15px;
|
||
display: flex;
|
||
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;
|
||
font-weight: 600;
|
||
color: var(--dark-green);
|
||
border-bottom: 2px solid var(--border-color);
|
||
font-size: 0.85rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
td {
|
||
padding: 8px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
font-size: 0.85rem;
|
||
overflow: hidden;
|
||
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;
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
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;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: white;
|
||
border-radius: 6px;
|
||
width: 90%;
|
||
max-width: 450px;
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-header {
|
||
background-color: var(--primary-green);
|
||
color: white;
|
||
padding: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 1.3rem;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
|
||
.chat-box {
|
||
height: 250px;
|
||
overflow-y: auto;
|
||
border: 1px solid #ddd;
|
||
border-radius: 3px;
|
||
padding: 12px;
|
||
margin-bottom: 12px;
|
||
background-color: #fafafa;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.message {
|
||
margin-bottom: 10px;
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
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 {
|
||
flex-wrap: wrap;
|
||
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>
|
||
</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>
|
||
</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>
|
||
|
||
<div class="query-btn" data-link="service_score.html">
|
||
<i class="fas fa-star"></i>
|
||
<span>服务分</span>
|
||
</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>
|
||
</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>
|
||
</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>
|
||
</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 class="modal" id="chat-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-comments"></i> 在线聊天</h3>
|
||
<button class="close-btn" id="close-chat">×</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>
|
||
</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%;">
|
||
<i class="fas fa-paper-plane"></i> 发送消息
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 回访模态框 -->
|
||
<div class="modal" id="review-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">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p><strong>订单号:</strong> <span id="review-order">10109089</span></p>
|
||
<p><strong>客户姓名:</strong> 张山</p>
|
||
<p><strong>服务项目:</strong> 拖车</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;">
|
||
<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>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" id="submit-review" style="margin-top: 15px; width: 100%;">
|
||
<i class="fas fa-check"></i> 提交回访结果
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 投诉处理模态框 -->
|
||
<div class="modal" id="complaint-modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3><i class="fas fa-gavel"></i> 投诉处理</h3>
|
||
<button class="close-btn" id="close-complaint">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p><strong>订单号:</strong> <span id="complaint-order">10109089</span></p>
|
||
<p><strong>投诉人:</strong> 张山</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;">
|
||
<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>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" id="submit-complaint" style="margin-top: 15px; width: 100%;">
|
||
<i class="fas fa-check"></i> 提交处理结果
|
||
</button>
|
||
</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;
|
||
});
|
||
});
|
||
|
||
// 高级查询栏按钮点击事件 - 跳转到外部查询数据页面
|
||
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(实际应用中会跳转到外部数据查询页面)`);
|
||
|
||
// 在实际应用中，这里应该使用：
|
||
// window.location.href = linkUrl;
|
||
});
|
||
});
|
||
|
||
// 聊天按钮点击事件
|
||
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>
|
||
</body>
|
||
</html> |