添加网站文件
This commit is contained in:
359
application/admin/view/index/index.html
Normal file
359
application/admin/view/index/index.html
Normal file
@@ -0,0 +1,359 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{$view_env_name}{$config.name}</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="shortcut icon" href="{$storageUrl}{$config.web_favicon}" />
|
||||
<link rel="stylesheet" href="__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/style/admin.css" media="all">
|
||||
{$js_code|raw}
|
||||
<style>
|
||||
.layui-layout .first-nav {
|
||||
width: 110px;
|
||||
box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1003;
|
||||
}
|
||||
.layui-layout .layui-side,
|
||||
.layui-layout .first-nav .layui-logo {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-layout .second-nav {
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
left: 110px;
|
||||
top: 92px;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-logo {
|
||||
width: 110px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-layout-left,
|
||||
.layui-layout-body .layadmin-pagetabs {
|
||||
left: 110px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layui-body {
|
||||
left: 230px;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.first-nav .layui-nav {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.second-nav .layui-nav {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.layui-side-menu .layui-nav .layui-nav-item a {
|
||||
color: #666;
|
||||
padding-left: 37px;
|
||||
padding-right: 10px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.layui-side-menu.second-nav .layui-nav * {
|
||||
font-size: 13px;
|
||||
}
|
||||
.layui-side-menu .layui-nav .layui-nav-item.layui-this >a,
|
||||
.layui-nav .layui-nav-itemed .layui-nav-child .layui-this a,
|
||||
.layui-nav .layui-nav-item:hover>a,
|
||||
.layui-nav .layui-nav-itemed .layui-nav-child dd:hover a {
|
||||
color: #3A91FB;
|
||||
/*color: #666;*/
|
||||
|
||||
}
|
||||
|
||||
.layui-side-menu .layui-nav .layui-nav-item.layui-this a,
|
||||
.layui-nav .layui-nav-itemed .layui-nav-child .layui-this a {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-side-menu .layui-nav .layui-nav-item.layui-this,
|
||||
.layui-nav .layui-nav-itemed .layui-nav-child .layui-this {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-side-menu .layui-nav .layui-nav-item .layui-icon {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.second-nav .layui-nav .layui-nav-item a {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.second-nav .layui-nav .layui-nav-item dd a {
|
||||
padding: 0 20px 0 20px;
|
||||
}
|
||||
.layui-side-menu .layui-nav-tree .layui-nav-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-nav-itemed>a {
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.layui-side-menu .layui-nav-tree .layui-nav-item .layui-icon.second-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
font-size: 11px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: auto;
|
||||
transform: rotateZ(180deg);
|
||||
margin-top: 3px;
|
||||
}
|
||||
.layui-side-menu .layui-nav-tree .layui-nav-item .layui-icon.second-icon.up {
|
||||
transform: rotateZ(0deg);
|
||||
margin-top: -19px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.layui-side-menu .layui-nav-tree .layui-nav-item .layui-nav-more.down {
|
||||
border-color: transparent transparent #666;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-itemed>.layui-nav-child {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.layui-side .second-title {
|
||||
color: #333;
|
||||
position: absolute;
|
||||
line-height: 48px;
|
||||
padding-left: 20px;
|
||||
font-weight: bold;
|
||||
width: 140px;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.layui-layout-body .layui-body.hide-second-nav {
|
||||
left: 110px;
|
||||
}
|
||||
|
||||
.layui-side.layui-side-menu .activate a {
|
||||
color: #3A91FB;
|
||||
}
|
||||
.layui-side-menu .layui-nav .layui-nav-item.activate {
|
||||
background-color: #EBF4FF !important;
|
||||
}
|
||||
@media screen and (max-width: 992px) {
|
||||
.layui-layout-admin .layui-side {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="layui-layout-body">
|
||||
<div id="LAY_app">
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<div class="layui-header">
|
||||
<!-- 头部区域 -->
|
||||
<ul class="layui-nav layui-layout-left">
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="javascript:" layadmin-event="refresh" title="刷新">
|
||||
<i class="layui-icon layui-icon-refresh-3"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
|
||||
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
||||
<a href="javascript:" layadmin-event="note">
|
||||
<i class="layui-icon layui-icon-note"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-hide-xs" lay-unselect>
|
||||
<a href="javascript:" layadmin-event="fullscreen">
|
||||
<i class="layui-icon layui-icon-screen-full"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="javascript:">
|
||||
<cite>{$admin_name}（{$role_name}）</cite>
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
<dd><a lay-href="{:url('my/password')}">修改密码</a></dd>
|
||||
<hr>
|
||||
<dd style="text-align: center;"><a href="{:url('account/logout')}">退出</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
|
||||
<a href="javascript:" layadmin-event="more">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 侧边菜单 (一级)-->
|
||||
<div class="layui-side layui-side-menu first-nav">
|
||||
<div class="layui-side-scroll">
|
||||
<div class="layui-logo">
|
||||
<img style="height:20px;width: 77px" src="{$storageUrl}{$config.backstage_logo}">
|
||||
</div>
|
||||
<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
|
||||
{volist name="menu" id="vo"}
|
||||
<li data-id="{$vo.id}" class="layui-nav-item">
|
||||
<a href="javascript:" lay-tips="{$vo.name}">
|
||||
<i class="layui-icon {$vo.icon}"></i>
|
||||
<cite>{$vo.name}</cite>
|
||||
</a>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 子级菜单 -->
|
||||
<script id="subMenu" type="text/html">
|
||||
{{# if(d) { }}
|
||||
<div class="layui-side layui-side-menu second-nav ">
|
||||
<div class="layui-side-scroll">
|
||||
<div class="second-title">
|
||||
<div>{{d.name}}</div>
|
||||
</div>
|
||||
<ul class="layui-nav layui-nav-tree">
|
||||
{{# layui.each(d.sub, function(index, item){ }}
|
||||
{{# if(item.sub.length <= 0) { }}
|
||||
<li class="layui-nav-item {{# if(index == 0) { }}layui-this{{# } }}">
|
||||
<a href="javascript:" lay-href='{{item.uri}}' lay-tips="{{ item.name }}">
|
||||
<cite>{{ item.name }}</cite>
|
||||
</a>
|
||||
</li>
|
||||
{{# } else { }}
|
||||
<li class="layui-nav-item layui-nav-itemed">
|
||||
<a href="javascript:" lay-tips="{{ item.name }}">
|
||||
<cite>{{ item.name }}</cite>
|
||||
<i class="layui-icon second-icon layui-icon-triangle-d"></i>
|
||||
</a>
|
||||
<dl class="layui-nav-child">
|
||||
{{# layui.each(item.sub, function(i, itemSub){ }}
|
||||
<dd class="{{# if(index == 0 && i==0) { }}layui-this{{# } }}">
|
||||
<a href="javascript:" lay-href="{{itemSub.uri}}">{{itemSub.name}}</a>
|
||||
</dd>
|
||||
{{# }); }}
|
||||
</dl>
|
||||
</li>
|
||||
{{# } }}
|
||||
{{# }); }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{# } }}
|
||||
</script>
|
||||
<div id="view"></div>
|
||||
</div>
|
||||
|
||||
<!-- 页面标签 -->
|
||||
<div class="layadmin-pagetabs" id="LAY_app_tabs">
|
||||
<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
|
||||
<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
|
||||
<div class="layui-icon layadmin-tabs-control layui-icon-down">
|
||||
<ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
|
||||
<li class="layui-nav-item" lay-unselect>
|
||||
<a href="javascript:;"></a>
|
||||
<dl class="layui-nav-child layui-anim-fadein">
|
||||
<dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
|
||||
<dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
|
||||
<dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
|
||||
<ul class="layui-tab-title" id="LAY_app_tabsheader">
|
||||
<li lay-id="" lay-attr="{:url('index/stat')}" class="layui-this">工作台</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="layui-body hide-second-nav" id="LAY_app_body">
|
||||
<div class="layadmin-tabsbody-item layui-show">
|
||||
<iframe src="{:url('index/stat')}" frameborder="0" class="layadmin-iframe"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 辅助元素 -->
|
||||
<div class="layadmin-body-shade" layadmin-event="shade"></div>
|
||||
</div>
|
||||
|
||||
<script src="__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
version:"{$front_version}",
|
||||
base: '__PUBLIC__/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'element', 'laytpl'], function () {
|
||||
var element = layui.element;
|
||||
var $ = layui.$;
|
||||
var laytpl = layui.laytpl;
|
||||
element.init();
|
||||
element.render('nav');
|
||||
$('#think_page_trace_open').remove();
|
||||
|
||||
// 展示二级菜单 fzr
|
||||
localStorage.setItem("menus", '{$menu|json_encode|raw}');
|
||||
$('.layui-nav-tree .layui-nav-item').click(function () {
|
||||
// 一级菜单的样式切换
|
||||
$(this).siblings().removeClass('activate');
|
||||
$(this).addClass('activate');
|
||||
// 获取一级菜单ID, 找出二级三级菜单那数据
|
||||
var id = parseInt($(this).attr('data-id'));
|
||||
var menus = JSON.parse('{$menu|json_encode|raw}');
|
||||
var data = [];
|
||||
menus.forEach(function (item) {
|
||||
if (id === item['id']) {
|
||||
data = item;
|
||||
}
|
||||
});
|
||||
// 是否存在二级菜单,不存在则隐藏
|
||||
if (data) {
|
||||
$("#LAY_app_body").removeClass('hide-second-nav');
|
||||
} else {
|
||||
$("#LAY_app_body").addClass('hide-second-nav');
|
||||
}
|
||||
// 使用模板引擎, 渲染二三级菜单
|
||||
var getTpl = document.getElementById('subMenu').innerHTML;
|
||||
var view = document.getElementById('view');
|
||||
laytpl(getTpl).render(data, function(html){
|
||||
view.innerHTML = html;
|
||||
});
|
||||
|
||||
// 触发点击事件
|
||||
$('.second-nav .layui-this a').trigger("click");
|
||||
|
||||
// 二级菜单切换
|
||||
$(".second-nav .layui-nav-tree .layui-nav-item").click(function () {
|
||||
if (!$(this).hasClass("layui-nav-itemed")) {
|
||||
$(".second-nav .layui-nav .layui-nav-itemed dl dd").removeClass('layui-this');
|
||||
$(this).siblings().removeClass('layui-this');
|
||||
$(this).addClass('layui-this');
|
||||
}
|
||||
});
|
||||
|
||||
// 三级菜单样式切换
|
||||
$(".second-nav .layui-nav-tree .layui-nav-itemed dd").click(function () {
|
||||
$(".second-nav .layui-nav .layui-nav-item").removeClass('layui-this');
|
||||
$(".second-nav .layui-nav .layui-nav-item dl dd").removeClass('layui-this');
|
||||
$(this).siblings().removeClass('layui-this');
|
||||
$(this).addClass('layui-this');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
500
application/admin/view/index/stat.html
Normal file
500
application/admin/view/index/stat.html
Normal file
@@ -0,0 +1,500 @@
|
||||
{layout name="layout1" /}
|
||||
<style>
|
||||
.header-font{
|
||||
font-size: 20px
|
||||
}
|
||||
.layui-card .data-all {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.layui-card .text-style {
|
||||
font-size: 16px;
|
||||
}
|
||||
.header-time{
|
||||
margin-left: 20px
|
||||
}
|
||||
.layadmin-shortcut .shortcut-list {
|
||||
padding: 30px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.layadmin-shortcut .shortcut-list li {
|
||||
min-width: 100px;
|
||||
margin-bottom: 20px;
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.layadmin-shortcut .shortcut-list .icon{
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
float: right;
|
||||
padding: 0 10px;
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
color: #3A91FB;
|
||||
border-radius: 30px;
|
||||
border: 1px #3A91FB solid;
|
||||
background: #eaf3ff;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="layui-fluid" style="margin-bottom: 100px">
|
||||
<div class="layui-card" >
|
||||
<div class="layui-card-header">
|
||||
<span class="header-font">运营数据</span>
|
||||
<span class="header-time">更新时间：{$res.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-sm3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
销售订单（笔）
|
||||
<span class="tips">今日</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font">{$res.order_num_today}</p>
|
||||
<p>昨日：<span class="text-style">{$res.order_num_yesterday}</span>
|
||||
<span class="text-style" {if condition="$res.order_num_change lt 0" } style="color: #009688" {elseif condition="$res.order_num_change egt 0" } style="color: #FA2828" {/if}>{$res.order_num_change}</span></p>
|
||||
|
||||
<div class="data-all">销售订单总量（笔）<div class="text-style">{$res.order_num_all}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3 ">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
订单金额（元）
|
||||
<span class="tips">今日</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font">{$res.order_amount_today}</p>
|
||||
|
||||
<p>昨日：<span class="text-style">{$res.order_amount_yesterday}</span>
|
||||
<span class="text-style" {if condition="$res.order_amount_change lt 0" } style="color: #009688" {elseif condition="$res.order_amount_change egt 0" } style="color: #FA2828" {/if}>{$res.order_amount_change}</span></p>
|
||||
<div class="data-all">订单总额（元）<div class="text-style">{$res.order_amount_all}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3 ">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
新增客户（人）
|
||||
<span class="tips">今日</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font">{$res.add_user_today}</p>
|
||||
<p >昨日：<span class="text-style">{$res.add_user_yesterday}</span>
|
||||
<span class="text-style" {if condition="$res.add_user_change lt 0" } style="color: #009688" {elseif condition="$res.add_user_change egt 0" } style="color: #FA2828" {/if}>{$res.add_user_change}</span></p>
|
||||
<div class="data-all">客户总量（人）<div class="text-style">{$res.user_all}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-sm3 ">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
用户访问量（人）
|
||||
<span class="tips">今日</span>
|
||||
</div>
|
||||
<div class="layui-card-body layuiadmin-card-list">
|
||||
<p class="layuiadmin-big-font">{$res.today_user_ip}</p>
|
||||
<p>昨日：<span class="text-style">{$res.yesterday_user_ip}</span>
|
||||
<span class="text-style" {if condition="$res.ip_change lt 0" } style="color: #009688" {elseif condition="$res.ip_change egt 0" } style="color: #FA2828" {/if}>{$res.ip_change}</span></p>
|
||||
<div class="data-all">总用户访问量（人）<div class="text-style">{$res.total_user_ip}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--快捷功能-->
|
||||
<div class="layui-col-sm12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">快捷功能</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layadmin-shortcut">
|
||||
<ul class="shortcut-list">
|
||||
<li class="shop-item" >
|
||||
<a lay-href="{:url('goods/lists')}" data-id="29">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/goods.png" alt="">
|
||||
<cite>套餐管理</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="shop-item">
|
||||
<a lay-href="{:url('user/lists')}" data-id="33">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/user.png" alt="">
|
||||
<cite>会员管理</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="shop-item">
|
||||
<a lay-href="{:url('order/lists')}" data-id="37">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/order.png" alt="">
|
||||
<cite>订单管理</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="shop-item">
|
||||
<a lay-href="{:url('coupon/lists')}" data-id="39">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/coupon.png" alt="">
|
||||
<cite>员工管理</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="shop-item">
|
||||
<a lay-href="{:url('seckill/lists')}" data-id="39">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/seckill.png" alt="">
|
||||
<cite>派单管理</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="shop-item">
|
||||
<a lay-href="{:url('distributionMember/index')}" data-id="85">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/distribution.png" alt="">
|
||||
<cite>分销管理</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="shop-item">
|
||||
<a lay-href="{:url('article/lists')}" data-id="65">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/content.png" alt="">
|
||||
<cite>新闻资讯</cite>
|
||||
</a>
|
||||
</li>
|
||||
<li class="shop-item">
|
||||
<a lay-href="{:url('recharge_log/lists')}" data-id="81">
|
||||
<img class="icon" src="__PUBLIC__/static/common/image/workbench/finance.png" alt="">
|
||||
<cite>交易数据</cite>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--表格-->
|
||||
<div class="layui-col-sm12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row">
|
||||
近15天销售金额（元）
|
||||
<div class="layadmin-dataview">
|
||||
<div id="sale-charts" style="width: 100%;height: 100%">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-col-sm12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row">
|
||||
近15天用户访问量UV（人）
|
||||
<div class="layadmin-dataview">
|
||||
<div id="user-charts" style="width: 100%;height: 100%;">
|
||||
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<footer class="info_footer">
|
||||
{$company_name} | 版本号：{$version}
|
||||
<br><br>
|
||||
</footer>
|
||||
<script>
|
||||
layui.config({
|
||||
version:"{$front_version}",
|
||||
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
||||
}).extend({
|
||||
index: 'lib/index' //主入口模块
|
||||
}).use(['index', 'like','echarts','form','element'], function () {
|
||||
var $ = layui.$
|
||||
,like = layui.like
|
||||
,echarts = layui.echarts;
|
||||
|
||||
let bgColor = "#fff";
|
||||
let color = [
|
||||
"#0090FF",
|
||||
"#36CE9E",
|
||||
"#FFC005",
|
||||
"#FF515A",
|
||||
"#8B5CFF",
|
||||
"#00CA69"
|
||||
];
|
||||
const hexToRgba = (hex, opacity) => {
|
||||
let rgbaColor = "";
|
||||
let reg = /^#[\da-f]{6}$/i;
|
||||
if (reg.test(hex)) {
|
||||
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||||
"0x" + hex.slice(3, 5)
|
||||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||||
}
|
||||
return rgbaColor;
|
||||
}
|
||||
|
||||
|
||||
|
||||
like.ajax({
|
||||
url: '{:url("index/stat")}',
|
||||
type: "get",
|
||||
success: function (res) {
|
||||
var dates = res.data.dates,
|
||||
echarts_order_amount = res.data.echarts_order_amount,
|
||||
echarts_user_visit = res.data.echarts_user_visit;
|
||||
|
||||
var sale_option = {
|
||||
backgroundColor: bgColor,
|
||||
color: color,
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 10
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: function(params) {
|
||||
let html = '';
|
||||
params.forEach(v => {
|
||||
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
||||
${v.name}
|
||||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
|
||||
元`;
|
||||
})
|
||||
return html
|
||||
},
|
||||
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: '#ffffff',
|
||||
shadowColor: 'rgba(225,225,225,1)',
|
||||
shadowBlur: 5
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9"
|
||||
}
|
||||
},
|
||||
data: dates
|
||||
}],
|
||||
yAxis: [{
|
||||
type: "value",
|
||||
name: '销售金额',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#666"
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#666",
|
||||
fontSize: 12,
|
||||
lineHeight: 40
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#E9E9E9"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: echarts_order_amount
|
||||
}]
|
||||
};
|
||||
|
||||
var user_option = {
|
||||
backgroundColor: bgColor,
|
||||
color: color,
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 10
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: function(params) {
|
||||
let html = '';
|
||||
params.forEach(v => {
|
||||
html += `<div style="color: #666;font-size: 14px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
||||
${v.name}
|
||||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
|
||||
人`;
|
||||
})
|
||||
return html
|
||||
},
|
||||
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: '#ffffff',
|
||||
shadowColor: 'rgba(225,225,225,1)',
|
||||
shadowBlur: 5
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 100,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: "#333"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D9D9D9"
|
||||
}
|
||||
},
|
||||
data: dates
|
||||
}],
|
||||
yAxis: [{
|
||||
type: "value",
|
||||
name: '用户访问量',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#666"
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#666",
|
||||
fontSize: 12,
|
||||
lineHeight: 40
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#E9E9E9"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: "line",
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: echarts_user_visit
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
var sale_charts= echarts.init(document.getElementById('sale-charts'));
|
||||
sale_charts.setOption(sale_option, true);
|
||||
|
||||
var user_charts = echarts.init(document.getElementById('user-charts'));
|
||||
user_charts.setOption(user_option, true);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user