fix: 修改后台面板
This commit is contained in:
shuguang
parent
47c7f8b916
commit
d9da8e981c
@ -3,149 +3,516 @@
|
||||
<head>
|
||||
<:include file="../common/css.html" title="网站设置管理"/>
|
||||
<link rel="stylesheet" href="${ctxPath}/assets/css/workplace.css"/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||
<!-- 添加自定义CSS样式 -->
|
||||
<style>
|
||||
/* 主题色定义 */
|
||||
:root {
|
||||
--primary-color: #1E9FFF;
|
||||
--secondary-color: #5FB878;
|
||||
--danger-color: #FF5722;
|
||||
--warning-color: #FFB800;
|
||||
--dark-color: #393D49;
|
||||
--light-color: #F2F2F2;
|
||||
}
|
||||
|
||||
/* 仪表盘容器样式 */
|
||||
#dashboard-container {
|
||||
padding: 20px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* 卡片样式美化 */
|
||||
.layui-card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layui-card:hover {
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.layui-card-header {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: var(--dark-color);
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 15px 20px;
|
||||
background-color: white;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.layui-card-body {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
/* 数据卡片样式 */
|
||||
.data-card h2 {
|
||||
font-size: 28px;
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.data-card p {
|
||||
margin: 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 图表容器样式 */
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 表格样式美化 */
|
||||
.layui-table {
|
||||
margin-top: 0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-table thead tr {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.layui-table tbody tr:hover {
|
||||
background-color: rgba(30, 159, 255, 0.05);
|
||||
}
|
||||
|
||||
/* 蓝色主题按钮 */
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0e8ae5;
|
||||
}
|
||||
|
||||
/* 进度条样式 */
|
||||
.progress-bar {
|
||||
height: 6px;
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-inner {
|
||||
height: 100%;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.layui-col-md3, .layui-col-md6 {
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保行正确显示 */
|
||||
.layui-row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* 确保列正确浮动 */
|
||||
.layui-col-md6 {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
width: 100%; /* 修改为100%宽度 */
|
||||
}
|
||||
|
||||
/* 添加额外的样式确保卡片占满整行 */
|
||||
@media screen and (min-width: 769px) {
|
||||
.dashboard-full-width .layui-col-md6 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 热销商品表格美化 */
|
||||
.hot-products-table {
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hot-products-table thead th {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
padding: 12px 15px;
|
||||
background-color: rgba(30, 159, 255, 0.08);
|
||||
color: var(--dark-color);
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.hot-products-table tbody tr {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.hot-products-table tbody tr:hover {
|
||||
background-color: rgba(30, 159, 255, 0.05);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.hot-products-table td {
|
||||
padding: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
color: var(--dark-color);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sales-count, .sales-amount {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.growth-rate {
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.growth-rate.positive {
|
||||
color: var(--secondary-color);
|
||||
background-color: rgba(95, 184, 120, 0.1);
|
||||
}
|
||||
|
||||
.growth-rate.negative {
|
||||
color: var(--danger-color);
|
||||
background-color: rgba(255, 87, 34, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 正文开始 -->
|
||||
<div class="layui-fluid ew-console-wrapper">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-xs12 layui-col-sm12 layui-col-md9">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-header">
|
||||
今日成交<span class="layui-badge layui-badge-green pull-right">今日</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span> ${money!}</p>
|
||||
<p>今日成交订单<span class="pull-right">${count!} 笔</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-header">
|
||||
昨日成交<span class="layui-badge layui-badge-blue pull-right">昨日</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span>
|
||||
${YesterDayMoney!}
|
||||
</p>
|
||||
<p>昨日成交订单<span class="pull-right">${YesterDayCount!} 笔</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-header">
|
||||
近七天成交<span class="layui-badge layui-badge-red pull-right">七天</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span>
|
||||
${SevenDaysMoney!}
|
||||
</p>
|
||||
<p>近七天成交订单<span class="pull-right">${SevenDaysCount!} 笔</span></p>
|
||||
<div class="layui-fluid" id="dashboard-container" class="dashboard-full-width">
|
||||
<!-- 数据卡片第一行 -->
|
||||
<div class="layui-row layui-col-space20">
|
||||
<!-- 成交金额卡片 -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<i class="layui-icon layui-icon-rmb" style="margin-right: 8px; color: var(--primary-color);"></i>成交金额
|
||||
</div>
|
||||
<div class="layui-card-body data-card">
|
||||
<h2 style="color: var(--primary-color);">¥ 128,560</h2>
|
||||
<p>较上月 <span style="color: var(--secondary-color);">+12.5%</span></p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-inner" style="width: 75%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs12 layui-col-sm6">
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-body">
|
||||
<div id="hdqkyc1" style="height: 250px;"></div>
|
||||
<div class="layui-row layui-col-space20" style="margin-top: 20px;">
|
||||
<!-- 未成交金额卡片 -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<i class="layui-icon layui-icon-cart-simple" style="margin-right: 8px; color: var(--danger-color);"></i>未成交金额
|
||||
</div>
|
||||
<div class="layui-card-body data-card">
|
||||
<h2 style="color: var(--danger-color);">¥ 45,320</h2>
|
||||
<p>较上月 <span style="color: var(--danger-color);">+5.2%</span></p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-inner" style="width: 35%; background-color: var(--danger-color);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs12 layui-col-sm6">
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-body">
|
||||
<div id="consoleChartsMonth" style="height: 250px;"></div>
|
||||
<!-- 数据卡片第二行 -->
|
||||
<div class="layui-row layui-col-space20" style="margin-top: 20px;">
|
||||
<!-- 当前品类数卡片 -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<i class="layui-icon layui-icon-app" style="margin-right: 8px; color: var(--primary-color);"></i>当前品类数
|
||||
</div>
|
||||
<div class="layui-card-body data-card">
|
||||
<h2 style="color: var(--primary-color);">24</h2>
|
||||
<p>较上月 <span style="color: var(--secondary-color);">+2</span></p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-inner" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs12 layui-col-md12">
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-header">最新订单</div>
|
||||
<div class="layui-card-body dynamic-card-body mini-bar">
|
||||
<!-- 数据表格 -->
|
||||
<table id="ordersTable" lay-filter="ordersTable"></table>
|
||||
<div class="layui-row layui-col-space20" style="margin-top: 20px;">
|
||||
<!-- 当前商品数卡片 -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<i class="layui-icon layui-icon-template-1" style="margin-right: 8px; color: var(--primary-color);"></i>当前商品数
|
||||
</div>
|
||||
<div class="layui-card-body data-card">
|
||||
<h2 style="color: var(--primary-color);">358</h2>
|
||||
<p>较上月 <span style="color: var(--secondary-color);">+28</span></p>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-bar-inner" style="width: 85%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表行 -->
|
||||
<div class="layui-row layui-col-space20" style="margin-top: 20px;">
|
||||
<!-- 销售趋势图 -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<i class="layui-icon layui-icon-chart" style="margin-right: 8px; color: var(--primary-color);"></i>销售趋势
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="sales-trend-chart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space20" style="margin-top: 20px;">
|
||||
<!-- 品类销售占比图 -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<i class="layui-icon layui-icon-chart-screen" style="margin-right: 8px; color: var(--primary-color);"></i>品类销售占比
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="category-pie-chart" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space20" style="margin-top: 20px;">
|
||||
<!-- 热销商品表格 -->
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<i class="layui-icon layui-icon-star" style="margin-right: 8px; color: var(--primary-color);"></i>热销商品TOP5
|
||||
<button class="btn-primary" style="float: right; font-size: 12px;">查看全部</button>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table hot-products-table" lay-skin="line">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品名称</th>
|
||||
<th>品类</th>
|
||||
<th>销售量</th>
|
||||
<th>销售额</th>
|
||||
<th>同比增长</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong class="product-name">时尚连衣裙</strong></td>
|
||||
<td><span class="category-badge">女装</span></td>
|
||||
<td class="sales-count">256</td>
|
||||
<td class="sales-amount">¥25,600</td>
|
||||
<td><span class="growth-rate positive">+15%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong class="product-name">休闲西装</strong></td>
|
||||
<td><span class="category-badge">男装</span></td>
|
||||
<td class="sales-count">198</td>
|
||||
<td class="sales-amount">¥23,760</td>
|
||||
<td><span class="growth-rate positive">+8%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong class="product-name">运动鞋</strong></td>
|
||||
<td><span class="category-badge">鞋类</span></td>
|
||||
<td class="sales-count">187</td>
|
||||
<td class="sales-amount">¥18,700</td>
|
||||
<td><span class="growth-rate positive">+12%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong class="product-name">牛仔裤</strong></td>
|
||||
<td><span class="category-badge">裤装</span></td>
|
||||
<td class="sales-count">165</td>
|
||||
<td class="sales-amount">¥16,500</td>
|
||||
<td><span class="growth-rate negative">-3%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong class="product-name">时尚手提包</strong></td>
|
||||
<td><span class="category-badge">配饰</span></td>
|
||||
<td class="sales-count">142</td>
|
||||
<td class="sales-amount">¥14,200</td>
|
||||
<td><span class="growth-rate positive">+20%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-xs12 layui-col-sm12 layui-col-md3">
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-header">
|
||||
总交易金额<span class="layui-badge layui-badge-red pull-right">总</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<p class="lay-big-font"><span style="font-size: 26px;line-height: 1;">¥</span>
|
||||
${total_amount!}
|
||||
</p>
|
||||
<p>总成交订单<span class="pull-right">${total_number!} 笔</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-body" style="padding: 25px; font-size: 18px">
|
||||
Hi ${user.nickName}, 欢迎来到后台管理系统！
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-header">版本信息</div>
|
||||
<div class="layui-card-body">
|
||||
<table class="layui-table layui-text">
|
||||
<colgroup>
|
||||
<col width="100">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<script type="text/html" ew-tpl>
|
||||
<tr>
|
||||
<td>当前版本</td>
|
||||
<td>v2.0.4 免费版</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>开发语言</td>
|
||||
<td>Java</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>基于框架</td>
|
||||
<td>Spring Boot</td>
|
||||
</tr>
|
||||
</script>
|
||||
<tr>
|
||||
<td>主要特色</td>
|
||||
<td>界面美观、多种支付</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>获取渠道</td>
|
||||
<td>
|
||||
<a href="https://zdins.cn"
|
||||
class="layui-btn layui-btn-sm layui-btn-danger" target="_blank">获取最新</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
||||
<div class="layui-card-header">友情链接</div>
|
||||
<div class="layui-card-body">
|
||||
<a class="ew-adv-item sm" href="https://zdins.cn" target="_blank">
|
||||
波猫商店专业版
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<:include file="../common/js.html"/>
|
||||
<script type="text/javascript" src="https://lib.baomitu.com/echarts/5.1.0/echarts.min.js"></script>
|
||||
<script>
|
||||
|
||||
initCharts();
|
||||
// 初始化所有图表
|
||||
function initCharts() {
|
||||
console.log('初始化所有图表');
|
||||
// 确保容器存在
|
||||
if (!document.getElementById('sales-trend-chart') || !document.getElementById('category-pie-chart')) {
|
||||
console.error('图表容器不存在');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 销售趋势图
|
||||
var salesTrendChart = echarts.init(document.getElementById('sales-trend-chart'));
|
||||
var salesTrendOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['成交金额', '未成交金额']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '成交金额',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [12000, 13200, 10100, 13400, 19000, 23000, 21000, 19200, 17000, 15800, 18600, 23400],
|
||||
itemStyle: {
|
||||
color: '#1E9FFF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '未成交金额',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [2200, 1820, 1910, 2340, 2900, 3300, 3100, 2290, 2000, 2400, 2700, 3400],
|
||||
itemStyle: {
|
||||
color: '#FF5722'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
salesTrendChart.setOption(salesTrendOption);
|
||||
|
||||
// 品类占比图
|
||||
var categoryPieChart = echarts.init(document.getElementById('category-pie-chart'));
|
||||
var categoryPieOption = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 10,
|
||||
data: ['女装', '男装', '童装', '鞋类', '配饰']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售占比',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '18',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: 35, name: '女装'},
|
||||
{value: 25, name: '男装'},
|
||||
{value: 15, name: '童装'},
|
||||
{value: 15, name: '鞋类'},
|
||||
{value: 10, name: '配饰'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
categoryPieChart.setOption(categoryPieOption);
|
||||
|
||||
// 窗口大小变化时，重新调整图表大小
|
||||
window.addEventListener('resize', function() {
|
||||
salesTrendChart.resize();
|
||||
categoryPieChart.resize();
|
||||
});
|
||||
|
||||
// 手动触发一次 resize 以确保图表正确渲染
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
|
||||
console.log('图表初始化完成');
|
||||
} catch (e) {
|
||||
console.error('图表初始化失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
layui.use(['layer', 'carousel', 'element', 'notice', 'form', 'table', 'tableX'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
@ -419,6 +786,25 @@
|
||||
option1 && myChart1.setOption(option1);
|
||||
|
||||
});
|
||||
layui.use(['index'], function () {
|
||||
var $ = layui.jquery;
|
||||
var index = layui.index;
|
||||
|
||||
// 默认加载主页
|
||||
index.loadHome({
|
||||
menuPath: '${ctxPath}/dashboard/workplace',
|
||||
menuName: '<i class="layui-icon layui-icon-home"></i>',
|
||||
onlyLast: true
|
||||
});
|
||||
|
||||
// 切换table 刷新页面
|
||||
if (layui.admin.setter.pageTabs && layui.admin.setter.tabAutoRefresh == true)
|
||||
$('.layui-layout-admin>.layui-body>.layui-tab').attr('lay-autoRefresh', 'true');
|
||||
|
||||
// 初始化图表 - 修改为在页面加载完成后执行
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user