songxiangjie
/
visualization_center
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初步完成可视化页面

master
songxiangjie 2025-12-13 18:05:02 +08:00
parent 919dcabafa
commit 050d4f9fcf
1 changed files with 280 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

329
cs_chart.html
View File

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