304 lines
13 KiB
HTML
304 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>首页</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
|
||
<meta content="Coderthemes" name="author"/>
|
||
|
||
<!-- App favicon -->
|
||
<link rel="shortcut icon" href="../static/assets/images/favicon.ico">
|
||
|
||
<!-- Daterangepicker css -->
|
||
<link rel="stylesheet" href="../static/assets/vendor/daterangepicker/daterangepicker.css">
|
||
|
||
<!-- Vector Map css -->
|
||
<link rel="stylesheet" href="../static/assets/vendor/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css">
|
||
|
||
<!-- Theme Config Js -->
|
||
<script src="../static/assets/js/config.js"></script>
|
||
|
||
<!-- App css -->
|
||
<link href="../static/assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-style"/>
|
||
|
||
<!-- Icons css -->
|
||
<link href="../static/assets/css/icons.min.css" rel="stylesheet" type="text/css"/>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Begin page -->
|
||
<div class="wrapper">
|
||
|
||
|
||
<!-- ========== 头部信息 Start ========== -->
|
||
<div class="navbar-custom">
|
||
<div class="topbar container-fluid">
|
||
<div class="d-flex align-items-center gap-lg-2 gap-1">
|
||
<!-- Sidebar Menu Toggle Button -->
|
||
<button class="button-toggle-menu">
|
||
<i class="ri-menu-2-fill"></i>
|
||
</button>
|
||
</div>
|
||
<div><span><h1>智慧交通后台管理系统</h1></span></div>
|
||
<!-- ========== 头像信息开始 ========== -->
|
||
<ul class="topbar-menu d-flex align-items-center gap-3">
|
||
<li class="d-none d-md-inline-block">
|
||
<a class="nav-link" href="" data-toggle="fullscreen">
|
||
<i class="ri-fullscreen-line fs-22"></i>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a class="nav-link dropdown-toggle arrow-none nav-user px-2" data-bs-toggle="dropdown" href="#"
|
||
role="button" aria-haspopup="false" aria-expanded="false">
|
||
<span class="account-user-avatar">
|
||
<img src="../static/assets/images/users/avatar-1.jpg" alt="user-image" width="32"
|
||
class="rounded-circle">
|
||
</span>
|
||
<span class="d-lg-flex flex-column gap-1 d-none">
|
||
<h5 class="my-0">管理员</h5>
|
||
</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated profile-dropdown">
|
||
<!-- item-->
|
||
<div class=" dropdown-header noti-title">
|
||
<h6 class="text-overflow m-0">欢迎 !</h6>
|
||
</div>
|
||
<!-- item-->
|
||
<a href="/auth-login" class="dropdown-item">
|
||
<i class="ri-logout-box-line fs-18 align-middle me-1"></i>
|
||
<span>退出</span>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- ========== 头像信息结束 ========== -->
|
||
</div>
|
||
</div>
|
||
<!-- ========== 头部信息 End ========== -->
|
||
|
||
|
||
<!-- ==========左侧菜单 Start ========== -->
|
||
<div class="leftside-menu">
|
||
|
||
<!-- Full Sidebar Menu Close Button -->
|
||
<div class="button-close-fullsidebar">
|
||
<i class="ri-close-fill align-middle"></i>
|
||
</div>
|
||
|
||
<!-- Sidebar -left -->
|
||
<div class="h-100" id="leftside-menu-container" data-simplebar>
|
||
<!-- Leftbar User -->
|
||
<div class="leftbar-user">
|
||
<a href="pages-profile.html">
|
||
<img src="../static/assets/images/users/avatar-1.jpg" alt="user-image" height="42"
|
||
class="rounded-circle shadow-sm">
|
||
<span class="leftbar-user-name mt-2">Michael Berndt</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!--- 菜单 Start -->
|
||
<ul class="side-nav">
|
||
<li class="side-nav-item">
|
||
<a href="/auth-index" class="side-nav-link">
|
||
<i class="ri-dashboard-2-fill"></i>
|
||
<span> 首页 </span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="side-nav-item">
|
||
<a href="/map-beijing" class="side-nav-link">
|
||
<i class="ri-calendar-event-fill"></i>
|
||
<span> 公交行驶路线规划 </span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="side-nav-item">
|
||
<a href="/auth-map-road" class="side-nav-link">
|
||
<i class="ri-message-3-fill"></i>
|
||
<span> 智慧交通道路事件情况 </span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="side-nav-item">
|
||
<a href="/view" class="side-nav-link">
|
||
<i class="ri-mail-fill"></i>
|
||
<span> 数据可视化展示 </span>
|
||
</a>
|
||
</li>
|
||
|
||
<li class="side-nav-title">数据管理</li>
|
||
<li class="side-nav-item">
|
||
|
||
<a href="/auth-road-heath" class="side-nav-link">
|
||
<i class="ri-bar-chart-fill"></i>
|
||
<span> 延时数据管理 </span>
|
||
</a>
|
||
<a href="/auth-login" class="side-nav-link">
|
||
<i class="ri-briefcase-fill"></i>
|
||
<span> 城市字典管理 </span>
|
||
</a>
|
||
<a href="/auth-user" class="side-nav-link">
|
||
<i class="ri-stack-fill"></i>
|
||
<span> 用户管理 </span>
|
||
</a>
|
||
</li>
|
||
<li class="side-nav-title">账号操作</li>
|
||
<li class="side-nav-item">
|
||
<a href="/auth-login" class="side-nav-link">
|
||
<i class="ri-service-fill"></i>
|
||
<span> 退出登录 </span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!--- 菜单 End -->
|
||
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
</div>
|
||
<!-- ========== 左侧菜单 End ========== -->
|
||
|
||
<!-- ============================================================== -->
|
||
<!-- Start Page Content here -->
|
||
<!-- ============================================================== -->
|
||
|
||
<div class="content-page">
|
||
<div class="content">
|
||
|
||
<!-- Start Content-->
|
||
<div class="container-fluid">
|
||
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="bg-flower">
|
||
<img src="../static/assets/images/flowers/img-3.png">
|
||
</div>
|
||
|
||
<div class="bg-flower-2">
|
||
<img src="../static/assets/images/flowers/img-1.png">
|
||
</div>
|
||
|
||
<div class="page-title-box">
|
||
|
||
<h4 class="page-title">首页</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
|
||
<div class="col-sm-6 col-xxl-3">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row align-items-center">
|
||
<div class="col-6">
|
||
<h5 class="text-muted fw-normal mt-0 text-truncate" title="Campaign Sent">
|
||
未来拥堵情况</h5>
|
||
<h3 class="my-1 py-1">上升</h3>
|
||
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="text-end">
|
||
<div id="campaign-sent-chart" data-colors="#6da09c"></div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end row-->
|
||
</div> <!-- end card-body -->
|
||
</div> <!-- end card -->
|
||
</div> <!-- end col -->
|
||
|
||
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="d-flex card-header border-bottom-0 justify-content-between align-items-center">
|
||
<h4 class="header-title">未来一周速度预测</h4>
|
||
|
||
</div>
|
||
<div class="card-body pt-0">
|
||
<div dir="ltr">
|
||
<div id="main" style="height: 400px" class="apex-charts mt-3"
|
||
data-colors="#6da09c,#47ad77"></div>
|
||
</div>
|
||
<script type="text/javascript">
|
||
axios.get("/forecast").then(res =>{
|
||
let name =[]
|
||
let value =[]
|
||
for (let i = 0; i < res.data.length; i++) {
|
||
name.push(res.data[i][0])
|
||
value.push(res.data[i][1])
|
||
}
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
tooltip: {},
|
||
legend: {
|
||
data: ['指数']
|
||
},
|
||
xAxis: {
|
||
data: name
|
||
},
|
||
yAxis: {},
|
||
series: [
|
||
{
|
||
name: 'km/h',
|
||
type: 'line',
|
||
data: value
|
||
}
|
||
]
|
||
};
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
})
|
||
|
||
</script>
|
||
</div> <!-- end card-body-->
|
||
</div> <!-- end card-->
|
||
</div> <!-- end col-->
|
||
</div>
|
||
<!-- end row -->
|
||
</div>
|
||
<!-- container -->
|
||
|
||
</div>
|
||
<!-- content -->
|
||
|
||
</div>
|
||
|
||
<!-- ============================================================== -->
|
||
<!-- End Page content -->
|
||
<!-- ============================================================== -->
|
||
|
||
</div>
|
||
<!-- END wrapper -->
|
||
|
||
<!-- Vendor js -->
|
||
<script src="../static/assets/js/vendor.min.js"></script>
|
||
|
||
<!-- Daterangepicker js -->
|
||
<script src="../static/assets/vendor/daterangepicker/moment.min.js"></script>
|
||
<script src="../static/assets/vendor/daterangepicker/daterangepicker.js"></script>
|
||
|
||
<!-- Apex Charts js -->
|
||
<script src="../static/assets/vendor/apexcharts/apexcharts.min.js"></script>
|
||
|
||
<!-- Vector Map js -->
|
||
<script src="../static/assets/vendor/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
|
||
<script src="../static/assets/vendor/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js"></script>
|
||
|
||
<!-- Dashboard App js -->
|
||
<script src="../static/assets/js/pages/demo.dashboard.js"></script>
|
||
|
||
<!-- App js -->
|
||
<script src="../static/assets/js/app.min.js"></script>
|
||
|
||
</body>
|
||
</html> |