sczx_group/sczx_web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页静态

Browse Source
This commit is contained in:
19173159168
2025-07-14 23:24:30 +08:00
parent e81e401407
commit 1b4d44a729
2 changed files with 235 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ruoyi-admin/src/main/resources/static/ruoyi/chart.js Normal file
View File

File diff suppressed because one or more lines are too long

244
ruoyi-admin/src/main/resources/templates/main.html
View File

@ -220,6 +220,55 @@
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
/* 新增样式 */
.box.box-success.box-widget {
margin-bottom: 20px;
}
.box-header p.box-title {
font-weight: bold;
margin: 0;
}
.box-header p {
margin: 5px 0;
}
#salesTrendChart {
width: 100%;
height: auto;
}
.list-unstyled {
list-style: none;
padding: 0;
}
.list-unstyled li {
padding: 5px 0;
border-bottom: 1px dashed #ddd;
}
.list-unstyled li:last-child {
border-bottom: none;
}
.badge {
background-color: #337ab7;
color: #fff;
padding: 5px 10px;
margin-right: 10px;
}
.pull-right {
float: right;
}
.dashboard-header {
border-top: 0;
padding: 10px 10px 10px 10px;
}
</style>
</head>
@ -230,50 +279,111 @@
<div class="row" style="font-size: 22px;font-weight: bold;padding: 20px">
您好，欢迎进入闪充智行。
</div>
</div>
</div>
</div>
<div class="row">
<section class="col-md-6 ui-sortable">
<!-- Chat box -->
<!-- 平台订单金额 -->
<div class="col-md-3">
<div class="box box-success box-widget" style="border: 1px solid #e5e5e5">
<div class="box-header" style="border-bottom: 1px dashed #797979">
<i class="fa fa-comments-o"></i>
<h3 class="box-title" style="font-weight: bold">工作信息</h3>
<div class="box-header" style="border-bottom: none;">
<p class="box-title">平台订单金额</p>
<p style="font-size: 18px; margin: 10px;">12,560元</p>
<p style="font-size: 12px; color: #999;">比上月 ▲ 12% &nbsp; 比上周 ▲ 11%</p>
<p style="font-size: 12px; color: #999;">本月日均销售额 ￥12,423</p>
</div>
</div>
</div>
<div class="box-body chat" >
<div class="layui-tab-content">
</div>
</div>
<!-- /.box (chat box) -->
</section>
<section class="col-md-6 ui-sortable">
<!-- Chat box -->
<!-- 租车订单 -->
<div class="col-md-3">
<div class="box box-success box-widget" style="border: 1px solid #e5e5e5">
<div class="box-header" style="border-bottom: 1px dashed #797979">
<i class="fa fa-book"></i>
<h3 class="box-title" style="font-weight: bold">公示公告</h3>
<a href="#" onclick="noticeList()" title="公示公告" class="addTabPage" style="float: right;color: #797979">查看更多</a>
<div class="box-header" style="border-bottom: none;">
<p class="box-title">租车订单</p>
<p style="font-size: 18px; margin: 10px;">7,000元</p>
<p style="font-size: 12px; color: #999;">比上月 ▲ 12% &nbsp; 比上周 ▲ 11%</p>
<p style="font-size: 12px; color: #999;">本月日均销售额 ￥12,423</p>
</div>
</div>
<div class="box-body chat" >
<div th:each="notice : ${sysNotices}">
<p class="" style="margin-top: 10px; margin-left: 30px">
<a href="#" th:onclick="noticeDetail([[${notice.noticeId}]])" class="name addTabPage" style="color: black;font-size: 16px;">
<small class="text-muted pull-right" th:text="${#dates.format(notice.createTime, 'yyyy-MM-dd HH:mm:ss')}"></small>
<span th:text="${notice.noticeTitle}"></span>
</a>
</p>
</div>
<!-- 租车订单数 -->
<div class="col-md-3">
<div class="box box-success box-widget" style="border: 1px solid #e5e5e5">
<div class="box-header" style="border-bottom: none;">
<p class="box-title">租车订单数</p>
<p style="font-size: 18px; margin: 10px;">560</p>
<p style="font-size: 12px; color: #999;">比上月 ▲ 30 &nbsp; 比上周 ▲ 20</p>
<p style="font-size: 12px; color: #999;">上月订单数 423</p>
</div>
</div>
</div>
<!-- 租车平台新增用户数 -->
<div class="col-md-3">
<div class="box box-success box-widget" style="border: 1px solid #e5e5e5">
<div class="box-header" style="border-bottom: none;">
<p class="box-title">租车平台新增用户数</p>
<p style="font-size: 18px; margin: 10px;">560</p>
<p style="font-size: 12px; color: #999;">本月新增 ▲ 100 &nbsp; 七天新增 ▲ 80</p>
<p style="font-size: 12px; color: #999;">租车+电池租车总用户 62,423</p>
</div>
</div>
</div>
<!-- /.box (chat box) -->
</section>
</div>
<div class="row">
<!-- 销售额趋势图表 -->
<div class="col-md-9">
<div class="box box-success box-widget" style="border: 1px solid #e5e5e5">
<div class="box-header" style="border-bottom: 1px dashed #797979;">
<h3 class="box-title" style="font-weight: bold">销售额趋势</h3>
</div>
<div class="box-body chat">
<canvas id="salesTrendChart" width="400" height="120"></canvas>
</div>
</div>
</div>
<!-- 门店订单额排名列表 -->
<div class="col-md-3">
<div class="box box-success box-widget" style="border: 1px solid #e5e5e5">
<div class="box-header" style="border-bottom: 1px dashed #797979;">
<h3 class="box-title" style="font-weight: bold">门店订单额排名</h3>
</div>
<div class="box-body chat" style="height: 100%">
<ul class="list-unstyled">
<li><span class="badge">1</span> 工专路一号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">2</span> 工专路二号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">3</span> 工专路三号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">4</span> 工专路四号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">5</span> 工专路五号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">6</span> 工专路六号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">7</span> 工专路七号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">8</span> 工专路八号店 <span class="pull-right">323,234</span></li>
<li><span class="badge">9</span> 工专路九号店 <span class="pull-right">323,234</span></li>
</ul>
</div>
</div>
</div>
<!-- 平台订单量折线图 -->
<div class="col-md-12">
<div class="box box-success box-widget" style="border: 1px solid #e5e5e5; margin-top: 20px;">
<div class="box-header" style="border-bottom: 1px dashed #797979;">
<h3 class="box-title" style="font-weight: bold">平台订单量</h3>
</div>
<div class="box-body chat">
<canvas id="orderVolumeChart" width="500" height="120"></canvas>
</div>
</div>
</div>
</div>
<th:block th:include="include :: footer" />
@ -282,6 +392,7 @@
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.4}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.7.4}"></script>
<script th:src="@{/ruoyi/chart.js?v=4.7.4}"></script>
<script th:inline="javascript">
$('#pay-qrcode').click(function(){
var html=$(this).html();
@ -309,6 +420,81 @@
var url = ctx + "/system/notice/detail/"+noticeId;
$.modal.openTab("通知公告",url);
}
// 销售额趋势图表数据
var salesData = {
labels: ['10月', '11月', '12月', '01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月'],
datasets: [{
label: '销售额',
data: [300, 750, 1000, 450, 150, 480, 250, 300, 650, 500, 200, 350],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
};
// 创建销售额趋势图表
var ctxSales = document.getElementById('salesTrendChart').getContext('2d');
var salesChart = new Chart(ctxSales, {
type: 'bar',
data: salesData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
// 租车订单百分比圆环图数据
var rentCarData = {
labels: ['租车订单'],
datasets: [{
data: [56],
backgroundColor: ['#36A2EB'],
hoverBackgroundColor: ['#FF6384']
}]
};
// 平台订单量折线图数据
var orderVolumeData = {
labels: ['10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'],
datasets: [
{
label: '租车',
data: [10, 15, 5, 30, 45, 45, 45, 45, 65, 45, 10, 30, 30, 60, 45],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 2,
fill: false // 不填充区域
},
{
label: '租电',
data: [30, 15, 15, 30, 45, 60, 60, 45, 45, 45, 45, 45, 45, 75, 50],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 2,
fill: false // 不填充区域
}
]
};
// 创建平台订单量折线图
var ctxOrderVolume = document.getElementById('orderVolumeChart').getContext('2d');
var orderVolumeChart = new Chart(ctxOrderVolume, {
type: 'line',
data: orderVolumeData,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>