|
@@ -1,101 +1,205 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
- <title>Sa-Admin 控制台</title>
|
|
|
+ <title>车辆备案-列表</title>
|
|
|
<meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
|
|
|
- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
|
|
|
+ <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
|
|
|
<link rel="stylesheet" href="../../static/sa.css">
|
|
|
- <style type="text/css">
|
|
|
- .vue-box{margin: 0; padding: 0; height: 100%;}
|
|
|
- .el-card{border-radius: 0px; border: 1px #ddd solid ; margin-bottom: 14px;}
|
|
|
- .s-row{/* background-color: antiquewhite; */ padding: 0 14px; padding-bottom: 0px;}
|
|
|
- .s-row-1{padding-top: 14px;}
|
|
|
- .s-row-2{/* margin-top: -10px; */}
|
|
|
- .s-row-2 .el-card .el-card__body{height: 250px;}
|
|
|
- .s-row-3 .el-card{/* height: 100%; */}
|
|
|
-
|
|
|
- .echarts-div{height: 100%;}
|
|
|
- .s-row-3 .el-alert{margin-bottom: 14px;}
|
|
|
-
|
|
|
- .vue-box .el-alert{padding: 1em 0.5em; }
|
|
|
+ <script src="../../static/kj/vue.min.js"></script>
|
|
|
+ <script src="../../static/kj/element-ui/index.js"></script>
|
|
|
+ <script src="../../static/kj/httpVueLoader.js"></script>
|
|
|
+ <script src="../../static/kj/jquery.min.js"></script>
|
|
|
+ <script src="../../static/kj/layer/layer.js"></script>
|
|
|
+ <script src="../../static/sa.js"></script>
|
|
|
+ <style>
|
|
|
+ /* 第一行 */
|
|
|
+ .sa-wnk {
|
|
|
+ background-color: #FFF;
|
|
|
+ border: 1px #ddd solid;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ min-height: 100px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sa-wnk:hover {
|
|
|
+ box-shadow: 0 0 20px #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sa-wnk img {
|
|
|
+ float: left;
|
|
|
+ line-height: 100px;
|
|
|
+ margin: 25px 0px 0 20px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sa-wnk .sa-wnk-tv {
|
|
|
+ float: left;
|
|
|
+ margin-left: 10px;
|
|
|
+ max-width: calc(100% - 100px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sa-wnk-title {
|
|
|
+ margin-top: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sa-wnk-value {
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 24px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="vue-box" style="display: none;" :style="'display: block;'">
|
|
|
-
|
|
|
-
|
|
|
- <div class="s-row s-row-1">
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="s-row s-row-2">
|
|
|
-
|
|
|
- <el-col :lg="8" :xs="24">
|
|
|
- <el-card shadow="never" header="柱状图">
|
|
|
- <com-chart-1></com-chart-1>
|
|
|
- </el-card>
|
|
|
+ <el-card>
|
|
|
+ <div slot="header">
|
|
|
+ <h2>进出记录监控</h2>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-user.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">今日进出人数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.todayCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-user.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">最近一周进出人数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.weekCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-user.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">最近一个月进出人数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.monthCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-user.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">最近一年进出人数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.yearCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
- <el-col :lg="8" :xs="24">
|
|
|
- <el-card shadow="never" header="饼图">
|
|
|
- <com-chart-2></com-chart-2>
|
|
|
- </el-card>
|
|
|
+ <el-col :lg="4" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-user.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">平均每天进出人数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.avg}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
- <el-col :lg="8" :xs="24">
|
|
|
- <el-card shadow="never" header="折线图">
|
|
|
- <com-chart-3></com-chart-3>
|
|
|
- </el-card>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <el-card>
|
|
|
+ <div slot="header">
|
|
|
+ <h2>健康码监控</h2>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-error.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">今日健康码异常数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.todayHealthErrorCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
- </el-row> -->
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div class="s-row s-row-3">
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-error.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">最近一周健康码异常数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.weekHealthErrorCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-error.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">最近一个月健康码异常数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.monthHealthErrorCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="5" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-error.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">最近一年健康码异常数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.yearHealthErrorCount}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="4" :sm="8" :xs="24">
|
|
|
+ <div class="sa-wnk">
|
|
|
+ <img src="../../static/icon/icon-error.png">
|
|
|
+ <div class="sa-wnk-tv">
|
|
|
+ <p class="sa-wnk-title">平均每天健康码异常数</p>
|
|
|
+ <p class="sa-wnk-value">{{sta.avgError}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
- <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
|
|
|
- <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
|
|
|
- <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
|
|
|
- <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
|
|
|
- <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
|
|
|
- <script src="https://unpkg.com/echarts@4.6.0/dist/echarts-en.min.js"></script>
|
|
|
- <script src="../../static/sa.js"></script>
|
|
|
- <script type="text/javascript">
|
|
|
+ <script>
|
|
|
var app = new Vue({
|
|
|
- components: {
|
|
|
- 'com-sta-data': httpVueLoader('com-sta-data.vue'),
|
|
|
- 'com-chart-1': httpVueLoader('com-chart-1.vue'),
|
|
|
- 'com-chart-2': httpVueLoader('com-chart-2.vue'),
|
|
|
- 'com-chart-3': httpVueLoader('com-chart-3.vue'),
|
|
|
- 'com-stack': httpVueLoader('com-stack.vue'),
|
|
|
- 'com-update-log': httpVueLoader('com-update-log.vue'),
|
|
|
- 'com-origin': httpVueLoader('com-origin.vue'),
|
|
|
- // 'com-intro': httpVueLoader('com-intro.vue'),
|
|
|
- },
|
|
|
+
|
|
|
el: '.vue-box',
|
|
|
data: {
|
|
|
+ timmer:null,
|
|
|
+ sta: {
|
|
|
+ todayCount: 0,
|
|
|
+ todayHealthErrorCount: 0,
|
|
|
+ weekCount: 0,
|
|
|
+ weekHealthErrorCount: 0,
|
|
|
+ monthCount: 0,
|
|
|
+ monthHealthErrorCount: 0,
|
|
|
+ yearCount: 0,
|
|
|
+ yearHealthErrorCount: 0,
|
|
|
+ avg: 0,
|
|
|
+ avgError: 0
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
+ getMonitor() {
|
|
|
+ sa.ajax('/monitor/watch', function(res) {
|
|
|
+ this.sta = res.data;
|
|
|
+ }.bind(this));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function() {
|
|
|
+ this.getMonitor();
|
|
|
+ this.timmer=setInterval(()=>{
|
|
|
+ this.getMonitor()
|
|
|
+ },30000)
|
|
|
},
|
|
|
- mounted: function() {
|
|
|
+ onbeforeunload() {
|
|
|
+ clearInterval(this.timmer)
|
|
|
}
|
|
|
})
|
|
|
-
|
|
|
- // 设置监听,改变窗口大小时重绘图表
|
|
|
- window.myChartList = [];
|
|
|
- window.onresize = function() {
|
|
|
- myChartList.forEach(function(myChart) {
|
|
|
- myChart.resize();
|
|
|
- })
|
|
|
- }
|
|
|
</script>
|
|
|
-
|
|
|
- <div style="height: 0px; overflow: hidden;">
|
|
|
- <script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1279021391&web_id=1279021391"></script>
|
|
|
- </div>
|
|
|
</body>
|
|
|
</html>
|