347 lines
15 KiB
HTML
347 lines
15 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="../static/js/vue.js"></script>
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 引入组件库 -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Begin page -->
|
||
<div id="wrapper" 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.html" 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>
|
||
|
||
<!-- 侧边栏 -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>
|
||
</li>
|
||
<li class="side-nav-item">
|
||
<a href="/auth-city-code" class="side-nav-link">
|
||
<i class="ri-briefcase-fill"></i>
|
||
<span>城市字典管理 </span>
|
||
</a></li>
|
||
<li class="side-nav-item">
|
||
<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">
|
||
|
||
<!-- 开始 内容-->
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="page-title-box">
|
||
<h4 class="page-title">道路健康管理</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<el-button @click="acquisition" type="primary">在线采集数据</el-button>
|
||
</div>
|
||
<div class="row">
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
style="width: 100%">
|
||
<el-table-column
|
||
prop="id"
|
||
label="编号">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="freeFlowSpeed"
|
||
label="畅通速度">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="realSpeed"
|
||
label="平均速度">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="idxRatio"
|
||
label="idx比率">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="idxRatioState"
|
||
label="状态">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="idx"
|
||
label="拥堵延时指数">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="label"
|
||
label="城市">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="create_time"
|
||
label="采集时间">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<el-pagination
|
||
@current-change="handleCurrentChange"
|
||
layout="prev, pager, next"
|
||
:total="1000">
|
||
</el-pagination>
|
||
</div>
|
||
<!-- end row -->
|
||
</div>
|
||
<!-- 内容 -->
|
||
</div>
|
||
<!-- content -->
|
||
</div>
|
||
|
||
<!-- ============================================================== -->
|
||
<!-- End Page content -->
|
||
<!-- ============================================================== -->
|
||
|
||
</div>
|
||
<!-- END wrapper -->
|
||
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
|
||
<script type="text/javascript">
|
||
// 将vue挂载到id为home的根元素上
|
||
var vm = new Vue({
|
||
delimiters: ["<<", ">>"],
|
||
el: "#wrapper",
|
||
data() {
|
||
return {
|
||
page:{'pagesize':10,
|
||
'page':1},
|
||
tableData: []
|
||
};
|
||
},
|
||
methods: {
|
||
init() {
|
||
axios.post("/jamApi",this.page).then(res =>{
|
||
this.tableData = res.data
|
||
})
|
||
},
|
||
acquisition(){
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: '数据爬取中，请耐心等候，日志可以通过控制台查看',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
setTimeout(() => {
|
||
axios.get("/acquisitionApi").then(res =>{
|
||
console.log(res.data)
|
||
this.$message({
|
||
showClose: true,
|
||
message: "爬取数据完毕，数据已更新",
|
||
type: 'success'
|
||
});
|
||
this.init()
|
||
})
|
||
loading.close();
|
||
}, 2000);
|
||
|
||
|
||
},
|
||
// 分页自带函数，当currentPage变化时会触发此函数
|
||
handleCurrentChange(val) {
|
||
this.page.page = val
|
||
this.init()
|
||
},
|
||
del(row) {
|
||
|
||
|
||
axios.post("/user-del",{"id":row.id}).then(res =>{
|
||
if (res.data.code ===200){
|
||
this.$message({
|
||
showClose: true,
|
||
message: res.data.msg,
|
||
type: 'success'
|
||
});
|
||
this.init()
|
||
}else {
|
||
this.$message({
|
||
showClose: true,
|
||
message: res.data.msg,
|
||
type: 'error'
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted() {},
|
||
created() {
|
||
this.init()
|
||
},
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<!-- 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> |