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

添加根据经纬度获取城市

Browse Source 
添加后台统计看板
This commit is contained in:
gitfjn
2025-12-26 16:26:15 +08:00
parent 028886c1fe
commit 6963216a85
9 changed files with 1668 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

639
application/admin/view/bulletin_board/index.html Normal file
View File

@@ -0,0 +1,639 @@
{layout name="layout1" /}
<style>
.dashboard-container {
padding: 15px;
}
.kpi-card {
background: #fff;
padding: 20px;
border-radius: 4px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.kpi-title {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.kpi-value {
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.kpi-compare {
font-size: 12px;
color: #999;
}
.chart-card {
background: #fff;
padding: 20px;
border-radius: 4px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.chart-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
}
.chart-container {
height: 300px;
}
.chart-container-large {
height: 400px;
}
.progress-item {
margin-bottom: 15px;
}
.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-size: 14px;
}
.progress-bar-container {
height: 20px;
background: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #4A70F4 0%, #6DD047 100%);
transition: width 0.3s;
}
.table-card {
background: #fff;
padding: 20px;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
overflow: hidden;
}
.date-filter {
display: flex;
align-items: center;
gap: 10px;
}
/* 优化表格样式 */
.table-card .layui-table {
margin-top: 0;
border: none;
}
.table-card .layui-table thead tr {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.table-card .layui-table thead th {
color: #fff;
font-weight: 600;
text-align: center;
padding: 15px 10px;
border: none;
font-size: 14px;
}
.table-card .layui-table tbody tr {
transition: all 0.3s ease;
border-bottom: 1px solid #f0f0f0;
}
.table-card .layui-table tbody tr:hover {
background-color: #f8f9ff;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.table-card .layui-table tbody td {
text-align: center;
padding: 12px 10px;
border: none;
color: #333;
font-size: 13px;
}
.table-card .layui-table tbody td:first-child {
font-weight: 600;
color: #4A70F4;
background-color: #f8f9ff;
}
.table-card .layui-table tbody td.empty-data {
color: #999;
font-style: italic;
}
.table-card .chart-title {
display: flex;
align-items: center;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
margin-bottom: 20px;
}
.table-card .chart-title::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin-right: 10px;
border-radius: 2px;
}
</style>
<div class="layui-fluid dashboard-container">
<!-- 顶部KPI指标 -->
<div class="layui-row layui-col-space15">
<div class="layui-col-md3">
<div class="kpi-card">
<div class="kpi-title">月销售总额</div>
<div class="kpi-value" id="monthly-sales">--</div>
<div class="kpi-compare">同比: <span id="sales-compare">--</span></div>
</div>
</div>
<div class="layui-col-md3">
<div class="kpi-card">
<div class="kpi-title">月订单量</div>
<div class="kpi-value" id="monthly-orders">--</div>
<div class="kpi-compare">同比: <span id="orders-compare">--</span></div>
</div>
</div>
<div class="layui-col-md3">
<div class="kpi-card">
<div class="kpi-title">月客户数</div>
<div class="kpi-value" id="monthly-customers">--</div>
<div class="kpi-compare">同比: <span id="customers-compare">--</span></div>
</div>
</div>
<div class="layui-col-md3">
<div class="kpi-card">
<div class="kpi-title">日期筛选</div>
<div class="date-filter">
<input type="text" class="layui-input" id="date-filter" placeholder="年月日(可筛选)">
</div>
</div>
</div>
</div>
<!-- 第一行图表 -->
<div class="layui-row layui-col-space15">
<!-- 月客户分析 -->
<div class="layui-col-md4">
<div class="chart-card">
<div class="chart-title">月客户分析</div>
<div class="chart-container" id="customer-analysis-chart"></div>
</div>
</div>
<!-- 月销售情况 -->
<div class="layui-col-md4">
<div class="chart-card">
<div class="chart-title">月销售情况</div>
<div class="chart-container" id="sales-situation-chart"></div>
</div>
</div>
<!-- 当月客户渠道分析 -->
<div class="layui-col-md4">
<div class="chart-card">
<div class="chart-title">当月客户渠道分析</div>
<div class="chart-container" id="channel-analysis-chart"></div>
</div>
</div>
</div>
<!-- 第二行：目标完成率 -->
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<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 class="progress-item">
<div class="progress-label">
<span>总体完成率</span>
<span style="color: #4A70F4; font-weight: bold;">84%</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar" style="width: 84%;"></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>
</div>
</div>
</div>
</div>
</div>
<!-- 第三行：趋势图和区域图 -->
<div class="layui-row layui-col-space15">
<!-- 每日销售趋势 -->
<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>
<div class="chart-container-large" id="daily-sales-trend-chart"></div>
</div>
</div>
<!-- 区域月销售额 -->
<div class="layui-col-md6">
<div class="chart-card">
<div class="chart-title">区域月销售额</div>
<div class="chart-container-large" id="regional-sales-chart"></div>
</div>
</div>
</div>
<!-- 第四行：数据表格 -->
<div class="layui-row layui-col-space15">
<!-- 渠道月销售详情 -->
<div class="layui-col-md12">
<div class="table-card">
<div class="chart-title">渠道月销售详情</div>
<table class="layui-table" lay-size="sm">
<thead>
<tr>
<th>渠道</th>
<th>美团</th>
<th>公众号</th>
<th>抖音</th>
<th>员工</th>
<th>异业</th>
<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>
</table>
</div>
</div>
</div>
<!-- 第五行：区域月销售详情 -->
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="table-card">
<div class="chart-title">区域月销售详情</div>
<table class="layui-table" lay-size="sm">
<thead>
<tr>
<th>服务类型</th>
<th>南明区</th>
<th>云岩区</th>
<th>白云区</th>
<th>乌当区</th>
<th>花溪区</th>
<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>
</table>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
layui.config({
version:"{$front_version}",
base: '/static/plug/layui-admin/dist/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'laydate'], function(){
var $ = layui.$
,laydate = layui.laydate;
// 日期选择器
laydate.render({
elem: '#date-filter',
type: 'date',
format: 'yyyy-MM-dd'
});
// 初始化所有图表（仅样式，不填充数据）
initCharts();
function initCharts() {
// 月客户分析 - 饼图
var customerChart = echarts.init(document.getElementById('customer-analysis-chart'));
customerChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '客户分析',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: true,
formatter: '{b}: {d}%'
},
data: [
{value: 28, name: '老客', itemStyle: {color: '#FFB6C1'}},
{value: 72, name: '新客', itemStyle: {color: '#FF69B4'}}
]
}]
});
// 月销售情况 - 饼图
var salesChart = echarts.init(document.getElementById('sales-situation-chart'));
salesChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
bottom: '5%',
left: 'center'
},
series: [{
name: '销售情况',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
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'}}
]
}]
});
// 当月客户渠道分析 - 环形图
var channelChart = echarts.init(document.getElementById('channel-analysis-chart'));
channelChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '客户渠道',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
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: '普通客户'}
]
}]
});
// 每日销售趋势 - 折线图
var trendChart = echarts.init(document.getElementById('daily-sales-trend-chart'));
trendChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
name: '销售额',
axisLabel: {
formatter: '{value}K'
}
},
series: [{
name: '销售额',
type: 'line',
smooth: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(74, 112, 244, 0.3)'
}, {
offset: 1, color: 'rgba(74, 112, 244, 0.1)'
}]
}
},
itemStyle: {
color: '#4A70F4'
},
data: []
}]
});
// 区域月销售额 - 柱状图
var regionalChart = echarts.init(document.getElementById('regional-sales-chart'));
regionalChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7', '区域8']
},
yAxis: {
type: 'value',
name: '销量'
},
series: [{
name: '销量',
type: 'bar',
itemStyle: {
color: '#4A70F4'
},
data: [4668, 3775, 2912, 2200, 1259, 700, 403, 0]
}]
});
// 响应式调整
window.addEventListener('resize', function() {
customerChart.resize();
salesChart.resize();
channelChart.resize();
trendChart.resize();
regionalChart.resize();
});
}
});
</script>