255 lines
8.1 KiB
HTML
255 lines
8.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>vaeThink</title>
|
||
|
|
<meta name="renderer" content="webkit">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<link rel="stylesheet" href="__AVIEW__/lib/layui/css/layui.css" media="all">
|
||
|
|
<style type="text/css">
|
||
|
|
html,body {
|
||
|
|
width:100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
*{
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.vaeyo-main-header{
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
.console-md{
|
||
|
|
/*background-color: #009688;*/
|
||
|
|
height:100px;
|
||
|
|
/*border:1px solid #f2f2f2;*/
|
||
|
|
}
|
||
|
|
.borders{
|
||
|
|
border:1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
.layui-table, .layui-table-view{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="layui-row layui-col-space15">
|
||
|
|
<div class="layui-col-md3 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md borders">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md3 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md borders">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md3 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md borders">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md3 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md borders">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-col-md8 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md borders" style="height: 298px;">
|
||
|
|
<div class="vaeyo-main-header" id="vaeyo-main-header"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md4 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md borders" style="height: 300px;">
|
||
|
|
<!-- <div class="layui-carousel" id="test2">
|
||
|
|
<div carousel-item="">
|
||
|
|
<div class="layui-bg-green"></div>
|
||
|
|
<div class="layui-bg-blue"></div>
|
||
|
|
</div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="layui-col-md4 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md" style="height: 300px;">
|
||
|
|
<div class="layui-progress">
|
||
|
|
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress">
|
||
|
|
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress">
|
||
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress">
|
||
|
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress">
|
||
|
|
<div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress layui-progress-big">
|
||
|
|
<div class="layui-progress-bar" lay-percent="20%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
<div class="layui-progress layui-progress-big">
|
||
|
|
<div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
|
||
|
|
</div>
|
||
|
|
<br>
|
||
|
|
<div class="layui-progress layui-progress-big">
|
||
|
|
<div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress" lay-showpercent="true">
|
||
|
|
<div class="layui-progress-bar" lay-percent="20%"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress" lay-showpercent="true">
|
||
|
|
<div class="layui-progress-bar" lay-percent="5 / 10"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<div class="layui-progress layui-progress-big" lay-showpercent="true">
|
||
|
|
<div class="layui-progress-bar" lay-percent="70%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-md8 layui-anim layui-anim-scale">
|
||
|
|
<div class="console-md" style="height: 300px;padding-top: -15px">
|
||
|
|
<table class="layui-hide" id="test" lay-filter="test"></table>
|
||
|
|
<script type="text/html" id="thumb">
|
||
|
|
<img src='{{d.thumb}}' height="20" style="border-radius: 50%;" />
|
||
|
|
</script>
|
||
|
|
<script type="text/html" id="status">
|
||
|
|
<i class="layui-icon {{# if(d.status == 1){ }}layui-icon-ok{{# } else { }}layui-icon-close{{# } }}"></i>
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="__AVIEW__/lib/layui/layui.js" charset="utf-8"></script>
|
||
|
|
<script>
|
||
|
|
layui.config({
|
||
|
|
base: '__AVIEW__/module/'
|
||
|
|
}).define(['table','echarts','layer','element','carousel'], function(exports){
|
||
|
|
var $ = layui.jquery,layer = layui.layer,element = layui.element,table = layui.table,carousel = layui.carousel;
|
||
|
|
|
||
|
|
var myChart = echarts.init(document.getElementById('vaeyo-main-header'));
|
||
|
|
var pv = [];
|
||
|
|
var uv = [];
|
||
|
|
for (var i = 23; i >= 0; i--) {
|
||
|
|
pv[i] = Math.floor(Math.random()*i*50);
|
||
|
|
uv[i] = Math.floor(Math.random()*i*100);
|
||
|
|
}
|
||
|
|
var data = {
|
||
|
|
"time":['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
|
||
|
|
"pv":pv,
|
||
|
|
"uv":uv
|
||
|
|
}
|
||
|
|
option = {
|
||
|
|
tooltip : {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data:['','']
|
||
|
|
},
|
||
|
|
tooltip : {
|
||
|
|
trigger: 'axis'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data:['UV','PV']
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top:'10%',
|
||
|
|
left: '1%',
|
||
|
|
right: '2%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis : [{
|
||
|
|
type : 'category',
|
||
|
|
boundaryGap : false,
|
||
|
|
data: data.time
|
||
|
|
}],
|
||
|
|
yAxis : [{
|
||
|
|
type : 'value',
|
||
|
|
splitLine: {show: false}
|
||
|
|
}],
|
||
|
|
series : [{
|
||
|
|
name:'UV',
|
||
|
|
type:'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {normal: {color:'#009688'}},
|
||
|
|
lineStyle:{normal:{color:'#009688',width:1}},
|
||
|
|
areaStyle: {normal:{color:'#009688'}},
|
||
|
|
data: data.uv
|
||
|
|
},{
|
||
|
|
name:'PV',
|
||
|
|
type:'line',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {normal: {color:'#01AAED'}},
|
||
|
|
lineStyle:{normal:{color:'#01AAED',width:1}},
|
||
|
|
areaStyle: {normal:{color:'#01AAED'}},
|
||
|
|
data: data.pv
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
$(window).on('resize', function () {
|
||
|
|
myChart.resize();
|
||
|
|
});
|
||
|
|
|
||
|
|
var tableIns = table.render({
|
||
|
|
elem: '#test'
|
||
|
|
,url: "{:url('admin/admin/index')}" //数据接口
|
||
|
|
,page: true //开启分页
|
||
|
|
,cols: [[ //表头
|
||
|
|
{field: 'id', title: 'ID', sort: true, fixed: 'left', align:'center', width:80}
|
||
|
|
,{field: 'groupName', title: '管理组', align:'center'}
|
||
|
|
,{field: 'thumb', title:'头像', toolbar: '#thumb', align:'center', width:80}
|
||
|
|
,{field: 'username', title: '用户名', align:'center'}
|
||
|
|
,{field: 'nickname', title: '昵称', align:'center'}
|
||
|
|
,{field: 'last_login_time', title: '最后登录时间', sort: true, align:'center', sort: true}
|
||
|
|
,{field: 'last_login_ip', title: '最后登录IP', align:'center'}
|
||
|
|
,{field: 'status', title:'状态', toolbar: '#status', align:'center', width:100}
|
||
|
|
]]
|
||
|
|
,size: "sm"
|
||
|
|
});
|
||
|
|
|
||
|
|
carousel.render({
|
||
|
|
elem: '#test2'
|
||
|
|
,interval: 1800
|
||
|
|
,anim: 'fade'
|
||
|
|
,height: '300px'
|
||
|
|
});
|
||
|
|
|
||
|
|
exports('main', {});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|