<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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 href="/images/pdd_icon.png" rel="icon">
<title>首页</title>
<link rel="stylesheet" href="/css/layui.css"/>
<link rel="stylesheet" href="/css/admin_style.css"/>
<link rel="stylesheet" href="/css/common.css"/>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{literal}
<style>
</style>
{/literal}
</head>
<body>
<div class="layui-layout layui-layout-admin admin-container-outer">
{include file="include/admin_header.html"}
{include file="include/admin_leftmenu.html"}
<div class="layui-body admin-layui-body layui-anim layui-anim-fadein">
<div class="layui-row layui-col-space12">
<div class="layui-col-lg4 admin-layui-col-top-left">
<div class="admin-index-top-item">
<div class="admin-index-top-item-title">今日动态</div>
<div class="admin-index-top-item-title-line"></div>
<div class="admin-index-top-item-list-title">发货动态</div>
<img class="admin-dashed-line" src="/images/admin_index_dashed_line.png">
<div class="admin-index-top-item-list-item">
<div class="admin-index-top-item-list-item-child">
<div class="fl"><i class="admin-index-top-item-list-item-child-dot-{if $today_data.urge_order_count}red{else}grey{/if} admin-index-top-item-list-item-child-dot1"></i> <span class="icon-- admin-index-top-item-list-item-child-icon1"></span>催发订单：</div>
<div class="fr">{$today_data.urge_order_count}</div>
<div class="clear"></div>
</div>
<img class="admin-dashed-line" src="/images/admin_index_dashed_line.png">
<div class="admin-index-top-item-list-item-child">
<div class="fl"><i class="admin-index-top-item-list-item-child-dot-{if $today_data.countdown_order_count}red{else}grey{/if}"></i><span class="icon-uniE900 admin-index-top-item-list-item-child-icon2"></span>倒计时订单：</div>
<div class="fr">{$today_data.countdown_order_count}</div>
<div class="clear"></div>
</div>
<img class="admin-dashed-line" src="/images/admin_index_dashed_line.png">
<div class="admin-index-top-item-list-item-child">
<div class="fl"><i class="admin-index-top-item-list-item-child-dot-{if $today_data.wait_deliver_goods_count}red{else}grey{/if}"></i><span class="icon--1 admin-index-top-item-list-item-child-icon3"></span>待发货订单：</div>
<div class="fr">{$today_data.wait_deliver_goods_count}</div>
<div class="clear"></div>
</div>
<img class="admin-dashed-line" src="/images/admin_index_dashed_line.png">
</div>
<div class="admin-index-top-item-list-title">售后动态</div>
<img class="admin-dashed-line" src="/images/admin_index_dashed_line.png">
<div class="admin-index-top-item-list-item">
<div class="admin-index-top-item-list-item-child">
<div class="fl"><i class="admin-index-top-item-list-item-child-dot-{if $today_data.platform_processing_count}red{else}grey{/if}"></i><span class="icon-uniE9001 admin-index-top-item-list-item-child-icon4"></span>平台介入中：</div>
<div class="fr">{$today_data.platform_processing_count}</div>
<div class="clear"></div>
</div>
<img class="admin-dashed-line" src="/images/admin_index_dashed_line.png">
<div class="admin-index-top-item-list-item-child">
<div class="fl"><i class="admin-index-top-item-list-item-child-dot-{if $today_data.wait_after_sale_count}red{else}grey{/if}"></i><span class="icon-11 admin-index-top-item-list-item-child-icon4"></span>待售后订单：</div>
<div class="fr">{$today_data.wait_after_sale_count}</div>
<div class="clear"></div>
</div>
<img class="admin-dashed-line" src="/images/admin_index_dashed_line.png">
</div>
</div>
</div>
<div class="layui-col-lg8 admin-layui-col-top-right">
<div class="admin-index-top-item">
<div class="admin-index-top-item-header">
<ul class="admin-index-top-item-header-left">
<li class="active" onclick="getChartsData3('sales_volume', '365', this);">销售额</li>
<li onclick="getChartsData3('refund', '365', this);">退款订单数</li>
</ul>
<input id="hidden_params" type="hidden" flag="sales_volume">
<ul class="admin-index-top-item-header-right">
<li onclick="getChartsData2(7, this);">7天</li>
<li onclick="getChartsData2(30, this);">30天</li>
<li class="active" onclick="getChartsData2(365, this);">全年</li>
</ul>
</div>
<div class="admin-index-top-item-header-line"></div>
<div id="admin-map-container"></div>
</div>
</div>
</div>
<div class="layui-row layui-col-space20 bottom-layui-row">
<div class="layui-col-lg2dot4 admin-layui-col-bottom-list">
<div class="admin-index-bottom-item">
<div class="admin-card-text-1"><a href="/index/wait_deliver_list">催发货订单(总) <span class="icon-1-2 admin-right-arrow"></span></a></div>
<div class="admin-card-text-2">{$total_data.total_urge_order_count}<span> 单</span></div>
<!-- <div class="admin-card-text-3">日增长：+0.61%<span class="icon--2"></span></div>
<div class="admin-card-text-4">周减少：-0.61%<span class="icon-21"></span></div> -->
<div class="admin-card-text-3 progress-icon-img-bar">
<div class="fl progress-icon-img-bar-inner"></div>
<div class="fl progress-icon-img-bar-inner"><span class="icon--4"></span></div>
</div>
<div class="admin-card-text-5 {if $total_data.total_urge_order_count==0}primary-msg{/if}"><i class="admin-index-top-item-list-item-child-dot-{if $total_data.total_urge_order_count}red2{else}grey2{/if}"></i>这些顾客在催促发货咯</div>
</div>
</div>
<div class="layui-col-lg2dot4 admin-layui-col-bottom-list">
<div class="admin-index-bottom-item">
<div class="admin-card-text-1"><a href="/index/wait_deliver_list">倒计时订单(总) <span class="icon-1-2 admin-right-arrow"></span></a></div>
<div class="admin-card-text-2">{$total_data.total_countdown_order_count}<span> 单</span></div>
<!-- <div class="admin-card-text-3">日增长：+0.61%<span class="icon--2"></span></div>
<div class="admin-card-text-4">周减少：-0.61%<span class="icon-21"></span></div> -->
<div class="admin-card-text-3 progress-icon-img-bar">
<div class="fl progress-icon-img-bar-inner"></div>
<div class="fl progress-icon-img-bar-inner"><span class="icon-4"></span></div>
</div>
<div class="admin-card-text-5 {if $total_data.total_countdown_order_count==0}primary-msg{/if}"><i class="admin-index-top-item-list-item-child-dot-{if $total_data.total_countdown_order_count}red2{else}grey2{/if}"></i>这些订单还有12h超时！</div>
</div>
</div>
<div class="layui-col-lg2dot4 admin-layui-col-bottom-list">
<div class="admin-index-bottom-item">
<div class="admin-card-text-1"><a href="/index/wait_deliver_list">待发货订单(总) <span class="icon-1-2 admin-right-arrow"></span></a></div>
<div class="admin-card-text-2">{$total_data.total_wait_deliver_goods_count}<span> 单</span></div>
<!-- <div class="admin-card-text-3">日增长：+0.61%<span class="icon--2"></span></div>
<div class="admin-card-text-4">周减少：-0.61%<span class="icon-21"></span></div> -->
<div class="admin-card-text-3 admin-card-text-3-2 progress-icon-img-bar">
<div class="fl progress-icon-img-bar-inner"></div>
<div class="fl progress-icon-img-bar-inner"><span class="icon-uniE916"></span></div>
</div>
<div class="admin-card-text-5 {if $total_data.total_wait_deliver_goods_count==0}primary-msg{/if}"><i class="admin-index-top-item-list-item-child-dot-{if $total_data.total_wait_deliver_goods_count}red2{else}grey2{/if}"></i>有新增的订单啦</div>
</div>
</div>
<div class="layui-col-lg2dot4 admin-layui-col-bottom-list">
<div class="admin-index-bottom-item">
<div class="admin-card-text-1"><a href="/index/after_sale_list">平台介入中订单(总) <span class="icon-1-2 admin-right-arrow"></span></a></div>
<div class="admin-card-text-2">{$total_data.total_platform_processing_count}<span> 单</span></div>
<!-- <div class="admin-card-text-3">日增长：+0.61%<span class="icon--2"></span></div>
<div class="admin-card-text-4">周减少：-0.61%<span class="icon-21"></span></div> -->
<div class="admin-card-text-3 progress-icon-img-bar">
<div class="fl progress-icon-img-bar-inner"></div>
<div class="fl progress-icon-img-bar-inner"><span class="icon-1-" style="font-size: 16px;"></span></div>
</div>
<div class="admin-card-text-5 {if $total_data.total_platform_processing_count==0}primary-msg{/if}"><i class="admin-index-top-item-list-item-child-dot-{if $total_data.total_platform_processing_count}red2{else}grey2{/if}"></i>这些订单官方客服已介入</div>
</div>
</div>
<div class="layui-col-lg2dot4 admin-layui-col-bottom-list admin-layui-col-bottom-list-last">
<div class="admin-index-bottom-item">
<div class="admin-card-text-1"><a href="/index/after_sale_list">待售后订单(总) <span class="icon-1-2 admin-right-arrow"></span></a></div>
<div class="admin-card-text-2">{$total_data.total_wait_after_sale_count}<span> 单</span></div>
<!-- <div class="admin-card-text-3">日增长：+0.61%<span class="icon--2"></span></div>
<div class="admin-card-text-4">周减少：-0.61%<span class="icon-21"></span></div> -->
<div class="admin-card-text-3 admin-card-text-3-2 progress-icon-img-bar">
<div class="fl progress-icon-img-bar-inner"></div>
<div class="fl progress-icon-img-bar-inner"><span class="icon-5" style="font-size:15px;"></span></div>
</div>
<div class="admin-card-text-5 {if $total_data.total_wait_after_sale_count == 0}primary-msg{/if}"><i class="admin-index-top-item-list-item-child-dot-{if $total_data.total_wait_after_sale_count}red2{else}grey2{/if}"></i>这些顾客想要退款</div>
</div>
</div>
</div>
</div>
<!-- <div class="layui-footer">
底部固定区域
</div> -->
</div>
<script src="/js/layui.js"></script>
<script src="/js/echarts_5.5.3.min.js"></script>
<script src="/js/jquery-1.8.1.min.js"></script>
{literal}
<script>
$(function(){
getChartsData('sales_volume', '365');
})
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
util.event('lay-header-event', {
menuLeft: function(othis){
var btn = $("#leftEnumIcon");
if (btn.hasClass('layui-icon-spread-left')) {
menuShow(btn);
} else if (btn.has('layui-icon-shrink-right')) {
menuHide(btn);
}
function menuShow(btn) {
btn.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
$('.layui-layout-admin').find('.layui-side').animate({left: '0'});
btn.parent().next().css('opacity', 1);
}
function menuHide(btn) {
btn.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
$('.layui-layout-admin').find('.layui-side').animate({left: '-300'});
btn.parent().next().css('opacity', 0);
}
}
,menuRight: function(){
layer.open({
type: 1
,title: '更多'
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt'
,anim: 5
,shadeClose: true
,scrollbar: false
});
}
});
});
function getChartsData(type, day) {
$('#hidden_params').attr('flag', type);
$.ajax({
url:"/index/ajax_get_charts_data",
type:'post',
data:{type:type, day:day},
dataType:"json",
success:function(data){
var charts_dates = [];
var charts_values = [];
$.each(data.data,function(d, v){
charts_dates.push(d);
charts_values.push(v);
});
value_name = '';
if (type == 'sales_volume') value_name = '销售额';
if (type == 'refund') value_name = '退款订单数';
createCharts(charts_dates, charts_values, value_name);
},
error:function(){
alert("请求失败");
}
});
}
function getChartsData2(day, obj) {
$('.admin-index-top-item-header-right').find('li').removeClass('active');
$(obj).addClass('active');
getChartsData($('#hidden_params').attr('flag'), day);
}
function getChartsData3(type, day, obj) {
$('.admin-index-top-item-header-left').find('li').removeClass('active');
$(obj).addClass('active');
getChartsData(type, day);
}
function createCharts(charts_dates, charts_values, value_name) {
var myChart = echarts.init(document.getElementById('admin-map-container'));
// var monthList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var option = {
title: {
text: '销售额趋势',
textStyle:{
color: 'rgba(0,0,0,0.85)',
fontFamily:'PingFangSC-Medium',
fontSize: 14,
lineHeight:55,
},
},
grid:{
left:55,
top:74,
width:'90%',
height:226,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
data: charts_dates,
axisLabel:{
show:true,
color:'rgba(0,0,0,0.65)',
fontSize:12,
fontFamily: 'HelveticaNeue'
},
axisLine:{
show:true,
lineStyle:{
color:'#D9D9D9',
}
},
axisTick:{
show:true,
alignWithLabel:true,
length:5,
}
},
yAxis: {
splitLine:{
show:true,
lineStyle:{
color:['rgba(232, 232, 232, 1)'],
type:'dashed'
}
}
},
series: [
{
name: value_name,
type: 'bar',
data: charts_values,
//data: [100, 1000, 256, 488, 588, 189, 110, 100, 556, 188, 888, 289],
itemStyle:{
color:'rgba(24, 144, 255)',
opacity:0.85
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
if($(document).width()<=750) {
option.grid.left = 0;
option.grid.width = '100%';
}
myChart.setOption(option);
}
</script>
{/literal}
</body>
</html>