gitfjn/duolamaojiazhen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复内容

Browse Source
This commit is contained in:
gitfjn
2026-01-30 18:48:13 +08:00
parent 5fe5289e26
commit 76cfa6b278
25 changed files with 943 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
application/admin/view/bulletin_board/index.html
View File

@@ -200,57 +200,24 @@
<div class="chart-card">
<div class="chart-title">当月目标完成率</div>
<div style="margin-bottom: 20px;">
<div style="font-size: 14px; color: #666; margin-bottom: 10px;">本月销售目标: <span style="color: #4A70F4; font-weight: bold;">10万</span></div>
<div style="font-size: 14px; color: #666; margin-bottom: 10px;">
本月销售目标:
<span style="color: #4A70F4; font-weight: bold;" id="monthly-target-text">--</span>
</div>
<div class="progress-item">
<div class="progress-label">
<span>总体完成率</span>
<span style="color: #4A70F4; font-weight: bold;">84%</span>
<span style="color: #4A70F4; font-weight: bold;" id="overall-completion-text">--</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 84%;"></div>
<div class="progress-bar" id="overall-completion-bar" style="width: 0%;"></div>
</div>
</div>
</div>
<div style="margin-top: 30px;">
<div class="chart-title" style="font-size: 14px; margin-bottom: 15px;">客服目标完成率(N个客服的目标陈列)</div>
<div id="staff-progress-list">
<!-- 客服进度条列表 -->
<div class="progress-item">
<div class="progress-label">
<span>啦啦</span>
<span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item">
<div class="progress-label">
<span>小喵</span>
<span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item">
<div class="progress-label">
<span>哆哆</span>
<span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 0%;"></div>
</div>
</div>
<div class="progress-item">
<div class="progress-label">
<span>大猫</span>
<span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 0%;"></div>
</div>
</div>
<!-- 客服进度条列表（JS 根据数据库数据渲染） -->
</div>
</div>
</div>
@@ -263,8 +230,8 @@
<div class="layui-col-md6">
<div class="chart-card">
<div class="chart-title">每日销售趋势</div>
<div style="text-align: right; margin-bottom: 10px; color: #f56c6c; font-size: 14px;">
▼ 29.23% 上月同比
<div id="trend-compare-text" style="text-align: right; margin-bottom: 10px; color: #f56c6c; font-size: 14px;">
--
</div>
<div class="chart-container-large" id="daily-sales-trend-chart"></div>
</div>
@@ -296,52 +263,8 @@
<th>渠道</th>
</tr>
</thead>
<tbody>
<tr>
<td>总额</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>年卡</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>次卡</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>单次服务</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>其他服务</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tbody id="channel-month-table-body">
<!-- JS 动态渲染渠道月销售详情 -->
</tbody>
</table>
</div>
@@ -365,52 +288,8 @@
<th>龙里</th>
</tr>
</thead>
<tbody>
<tr>
<td>总额</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>年卡</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>次卡</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>单次服务</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tr>
<td>其他服务</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
<td class="empty-data">-</td>
</tr>
<tbody id="region-month-table-body">
<!-- JS 动态渲染区域月销售详情 -->
</tbody>
</table>
</div>
@@ -441,6 +320,10 @@ layui.config({
newCustomers: parseInt('{$newCustomers|default=0}') || 0
};
// 仪表盘其它统计数据（目标、客服进度、渠道、趋势、区域等）
// 这里直接输出后端已经 json_encode 好的字符串，避免模板语法冲突
var dashboardData = {$dashboardData|raw} || {};
// 渲染统计数据
renderStatistics();
@@ -451,8 +334,13 @@ layui.config({
format: 'yyyy-MM-dd'
});
// 初始化所有图表（仅样式，不填充数据）
// 初始化所有图表（使用数据库数据渲染）
initCharts();
// 渲染目标完成率和客服进度条
renderTargetsAndStaff();
// 渲染渠道与区域明细表格
renderChannelAndRegionTables();
// 渲染统计数据
function renderStatistics() {
@@ -486,6 +374,99 @@ layui.config({
$('#customers-compare').html(formatCompare(statisticsData.customersCompare));
}
// 渲染销售目标、总体完成率和客服进度条
function renderTargetsAndStaff() {
if (!dashboardData) {
return;
}
// 销售目标与总体完成率
var target = dashboardData.monthlyTarget || 0;
var completion = dashboardData.overallCompletion || 0;
$('#monthly-target-text').text(target > 0 ? (target / 10000).toFixed(2) + ' 万' : '--');
$('#overall-completion-text').text(completion.toFixed ? completion.toFixed(2) + '%' : (completion + '%'));
$('#overall-completion-bar').css('width', (completion > 100 ? 100 : completion) + '%');
// 客服进度条
var list = $('#staff-progress-list');
list.empty();
if (dashboardData.staffProgress && dashboardData.staffProgress.length) {
dashboardData.staffProgress.forEach(function (item) {
var percentText = (item.percent || 0).toFixed(2) + '%';
var yoy = item.yoy || 0;
var yoyHtml;
if (yoy > 0) {
yoyHtml = '同比: <span style="color:#52c41a;">↑ ' + yoy.toFixed(2) + '%</span>';
} else if (yoy < 0) {
yoyHtml = '同比: <span style="color:#ff4d4f;">↓ ' + Math.abs(yoy).toFixed(2) + '%</span>';
} else {
yoyHtml = '同比: <span style="color:#999;">持平</span>';
}
var html = ''
+ '<div class="progress-item">'
+ ' <div class="progress-label">'
+ ' <span>' + (item.name || '未分配') + '</span>'
+ ' <span>销售额: ' + (item.sales || 0) + ' | 百分比: ' + percentText + ' | ' + yoyHtml + '</span>'
+ ' </div>'
+ ' <div class="progress-bar-container">'
+ ' <div class="progress-bar" style="width:' + (item.percent || 0) + '%;"></div>'
+ ' </div>'
+ '</div>';
list.append(html);
});
} else {
list.append('<div style="color:#999;font-size:12px;">暂无客服统计数据</div>');
}
}
// 渠道&区域月销售明细表格渲染（只处理“总额”这一行）
function renderChannelAndRegionTables() {
if (!dashboardData) {
return;
}
// ===== 渠道月销售详情（总额 / 年卡 / 次卡 / 单次 / 其它） =====
var channelBody = $('#channel-month-table-body');
channelBody.empty();
var channelHeaders = ['美团','公众号','抖音','员工','异业','渠道'];
var rowLabels = [
{key: 'total', text: '总额'},
{key: 'year', text: '年卡'},
{key: 'times', text: '次卡'},
{key: 'single',text: '单次服务'},
{key: 'other', text: '其他服务'}
];
var keyToCol = ['meituan','gzh','douyin','staff','yeye','other'];
rowLabels.forEach(function (row) {
var data = (dashboardData.channelDetail && dashboardData.channelDetail[row.key]) || {};
var tr = '<tr><td>' + row.text + '</td>';
keyToCol.forEach(function (colKey) {
var v = parseFloat(data[colKey] || 0).toFixed(2);
tr += '<td>' + v + '</td>';
});
tr += '</tr>';
channelBody.append(tr);
});
// ===== 区域月销售详情（总额 / 年卡 / 次卡 / 单次 / 其它） =====
var regionBody = $('#region-month-table-body');
regionBody.empty();
if (dashboardData.regions && dashboardData.regions.length) {
var regionNames = dashboardData.regions;
rowLabels.forEach(function (row) {
var rowData = (dashboardData.regionDetail && dashboardData.regionDetail[row.key]) || {};
var tr2 = '<tr><td>' + row.text + '</td>';
regionNames.forEach(function (rName) {
var val = parseFloat(rowData[rName] || 0).toFixed(2);
tr2 += '<td>' + val + '</td>';
});
tr2 += '</tr>';
regionBody.append(tr2);
});
}
}
function initCharts() {
// 月客户分析 - 饼图
var customerChart = echarts.init(document.getElementById('customer-analysis-chart'));
@@ -519,7 +500,7 @@ layui.config({
}]
});
// 月销售情况 - 饼图
// 月销售情况 - 饼图（使用数据库汇总结果）
var salesChart = echarts.init(document.getElementById('sales-situation-chart'));
salesChart.setOption({
tooltip: {
@@ -544,16 +525,18 @@ layui.config({
show: true,
formatter: '{b}: {c}'
},
data: [
{value: 8.2, name: '年卡销售', itemStyle: {color: '#4A70F4'}},
{value: 3.2, name: '次卡销售', itemStyle: {color: '#6DD047'}},
{value: 1.4, name: '单次服务', itemStyle: {color: '#F6A23F'}},
{value: 1.2, name: '其他服务', itemStyle: {color: '#87CEEB'}}
]
data: (dashboardData.salesSituation && dashboardData.salesSituation.length)
? dashboardData.salesSituation
: [
{value: 0, name: '单次服务', itemStyle: {color: '#F6A23F'}},
{value: 0, name: '年卡销量', itemStyle: {color: '#4A70F4'}},
{value: 0, name: '次卡销量', itemStyle: {color: '#6DD047'}},
{value: 0, name: '其它服务', itemStyle: {color: '#87CEEB'}}
]
}]
});
// 当月客户渠道分析 - 环形图
// 当月客户渠道分析 - 环形图（使用数据库统计的渠道订单数）
var channelChart = echarts.init(document.getElementById('channel-analysis-chart'));
channelChart.setOption({
tooltip: {
@@ -578,19 +561,13 @@ layui.config({
show: true,
formatter: '{b}: {d}%'
},
data: [
{value: 0, name: '美团'},
{value: 24, name: '公众号-企业客户'},
{value: 0, name: '抖音'},
{value: 0, name: '渠道'},
{value: 0, name: '员工'},
{value: 0, name: '异业'},
{value: 0, name: '普通客户'}
]
data: (dashboardData.channelPie && dashboardData.channelPie.length)
? dashboardData.channelPie
: []
}]
});
// 每日销售趋势 - 折线图
// 每日销售趋势 - 折线图（使用数据库按天汇总的数据）
var trendChart = echarts.init(document.getElementById('daily-sales-trend-chart'));
trendChart.setOption({
tooltip: {
@@ -605,7 +582,7 @@ layui.config({
xAxis: {
type: 'category',
boundaryGap: false,
data: []
data: dashboardData.trendDates || []
},
yAxis: {
type: 'value',
@@ -635,11 +612,21 @@ layui.config({
itemStyle: {
color: '#4A70F4'
},
data: []
data: dashboardData.trendValues || []
}]
});
// 渲染“上月同比”文字
var trendCompare = dashboardData.trendCompare || 0;
var trendTextDom = $('#trend-compare-text');
if (trendCompare > 0) {
trendTextDom.css('color', '#52c41a').html('▲ ' + trendCompare.toFixed(2) + '% 上月同比');
} else if (trendCompare < 0) {
trendTextDom.css('color', '#f56c6c').html('▼ ' + Math.abs(trendCompare).toFixed(2) + '% 上月同比');
} else {
trendTextDom.css('color', '#999').html('持平 上月同比');
}
// 区域月销售额 - 柱状图
// 区域月销售额 - 柱状图（根据地址简单按区域统计）
var regionalChart = echarts.init(document.getElementById('regional-sales-chart'));
regionalChart.setOption({
tooltip: {
@@ -656,7 +643,7 @@ layui.config({
},
xAxis: {
type: 'category',
data: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7', '区域8']
data: dashboardData.regions || []
},
yAxis: {
type: 'value',
@@ -668,7 +655,7 @@ layui.config({
itemStyle: {
color: '#4A70F4'
},
data: [4668, 3775, 2912, 2200, 1259, 700, 403, 0]
data: dashboardData.regionTotals || []
}]
});