687 lines
25 KiB
HTML
687 lines
25 KiB
HTML
{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;
|
|
|
|
// 统计数据（从后端传递）
|
|
var statisticsData = {
|
|
monthlySales: parseFloat('{$monthlySales|default=0}') || 0,
|
|
monthlyOrders: parseInt('{$monthlyOrders|default=0}') || 0,
|
|
monthlyCustomers: parseInt('{$monthlyCustomers|default=0}') || 0,
|
|
salesCompare: parseFloat('{$salesCompare|default=0}') || 0,
|
|
ordersCompare: parseFloat('{$ordersCompare|default=0}') || 0,
|
|
customersCompare: parseFloat('{$customersCompare|default=0}') || 0,
|
|
oldCustomers: parseInt('{$oldCustomers|default=0}') || 0,
|
|
newCustomers: parseInt('{$newCustomers|default=0}') || 0
|
|
};
|
|
|
|
// 渲染统计数据
|
|
renderStatistics();
|
|
|
|
// 日期选择器
|
|
laydate.render({
|
|
elem: '#date-filter',
|
|
type: 'date',
|
|
format: 'yyyy-MM-dd'
|
|
});
|
|
|
|
// 初始化所有图表（仅样式，不填充数据）
|
|
initCharts();
|
|
|
|
// 渲染统计数据
|
|
function renderStatistics() {
|
|
// 格式化金额（保留两位小数，添加千分位）
|
|
function formatMoney(amount) {
|
|
if (!amount) return '0.00';
|
|
return parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
|
}
|
|
|
|
// 格式化同比显示
|
|
function formatCompare(compare) {
|
|
if (compare > 0) {
|
|
return '<span style="color: #52c41a;">↑ ' + Math.abs(compare).toFixed(2) + '%</span>';
|
|
} else if (compare < 0) {
|
|
return '<span style="color: #ff4d4f;">↓ ' + Math.abs(compare).toFixed(2) + '%</span>';
|
|
} else {
|
|
return '<span style="color: #999;">持平</span>';
|
|
}
|
|
}
|
|
|
|
// 渲染月销售总额
|
|
$('#monthly-sales').text('¥' + formatMoney(statisticsData.monthlySales));
|
|
$('#sales-compare').html(formatCompare(statisticsData.salesCompare));
|
|
|
|
// 渲染月订单量
|
|
$('#monthly-orders').text(statisticsData.monthlyOrders);
|
|
$('#orders-compare').html(formatCompare(statisticsData.ordersCompare));
|
|
|
|
// 渲染月客户数
|
|
$('#monthly-customers').text(statisticsData.monthlyCustomers);
|
|
$('#customers-compare').html(formatCompare(statisticsData.customersCompare));
|
|
}
|
|
|
|
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: statisticsData.oldCustomers, name: '老客', itemStyle: {color: '#FFB6C1'}},
|
|
{value: statisticsData.newCustomers, 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>
|
|
|