首页静态

ruoyi-admin/src/main/resources/templates/main.html

@@ -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">
+            <div class="box-header" style="border-bottom: none;">
-				<i class="fa fa-comments-o"></i>
+                <p class="box-title">平台订单金额</p>
-				<h3 class="box-title" style="font-weight: bold">工作信息</h3>
+                <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>
+    <div class="col-md-3">
-		<!-- /.box (chat box) -->
-	</section>
-	<section class="col-md-6 ui-sortable">
-		<!-- Chat box -->
         <div class="box box-success box-widget" style="border: 1px solid #e5e5e5">
-			<div class="box-header" style="border-bottom: 1px dashed #797979">
+            <div class="box-header" style="border-bottom: none;">
-				<i class="fa fa-book"></i>
+                <p class="box-title">租车订单</p>
-				<h3 class="box-title" style="font-weight: bold">公示公告</h3>
+                <p style="font-size: 18px; margin: 10px;">7,000元</p>
-				<a href="#" onclick="noticeList()" title="公示公告" class="addTabPage" style="float: right;color: #797979">查看更多</a>
+                <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>