看板
This commit is contained in:
parent
d64fea7ac2
commit
33ca7a52a7
|
|
@ -1,21 +1,21 @@
|
|||
<div class="mycontainer">
|
||||
|
||||
<!-- 时间筛选 -->
|
||||
<!-- <div class="row">-->
|
||||
<!-- <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('order/addAbnormal')}">-->
|
||||
<!-- <div class="col-md-12">-->
|
||||
<!-- <div class="form-group">-->
|
||||
<!-- <label for="startDate" class="col-md-2 control-label">选择时间范围：</label>-->
|
||||
<!-- <div class="col-md-5">-->
|
||||
<!-- <input type="text" class="form-control datetimepicker" id="startDate" placeholder="开始时间" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-md-5">-->
|
||||
<!-- <input type="text" class="form-control datetimepicker" id="endDate" placeholder="结束时间" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="row">-->
|
||||
<!-- <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('order/addAbnormal')}">-->
|
||||
<!-- <div class="col-md-12">-->
|
||||
<!-- <div class="form-group">-->
|
||||
<!-- <label for="startDate" class="col-md-2 control-label">选择时间范围：</label>-->
|
||||
<!-- <div class="col-md-5">-->
|
||||
<!-- <input type="text" class="form-control datetimepicker" id="startDate" placeholder="开始时间" />-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="col-md-5">-->
|
||||
<!-- <input type="text" class="form-control datetimepicker" id="endDate" placeholder="结束时间" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </form>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="row" style="margin-bottom: 10px">
|
||||
<!-- 卡片 1: 总用户数 -->
|
||||
|
|
@ -58,7 +58,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-8">
|
||||
<div id="money_line" style="height: 600px;width: 100%">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="col-md-6">
|
||||
<div class="todo-plan" style="color: #55d2fe">
|
||||
<div class="todo-plan-title">
|
||||
|
|
@ -167,61 +172,162 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6">
|
||||
|
||||
<div id="cancel_order_pie" style="width: 100%;height:400px">
|
||||
|
||||
|
||||
<div class="row">
|
||||
<!-- 额外的内容行可以继续添加 -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<div id="item_pie" style="width: 100%;height:400px">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<div id="area_pie" style="width: 100%;height:400px">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<div id="source_pie" style="width: 100%;height:400px">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-md-6">
|
||||
<div class="order-count-plan" style="color: #55d2fe">
|
||||
<div class="order-count-title">
|
||||
<div class="todo-plan-title-text text-left" style="flex: 1">
|
||||
<span class="fa fa-clock-o"></span> 进行中的订单
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-count-num text-left">
|
||||
1240 / 231 / 23123 / 222
|
||||
</div>
|
||||
<div class="order-count-num-sub text-left">
|
||||
待派单 / 待接单 / 待上门 / 服务中
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="order-count-plan" style="color: #55d2fe">
|
||||
<div class="order-count-title" style="background-color: #f5f6ff;color: #6b6e73">
|
||||
<div class="todo-plan-title-text text-left" style="flex: 1">
|
||||
<span class="fa fa-phone-square"></span> 售后申请
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-count-num text-left">
|
||||
1240
|
||||
</div>
|
||||
<div class="order-count-num-sub text-left">
|
||||
待处理
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.mycontainer{
|
||||
min-height: 100vh;
|
||||
.mycontainer {
|
||||
background-color: white;
|
||||
padding-top: 10px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
.myplan{
|
||||
box-shadow: 0 2px 6px rgba(12,72,128,.1);
|
||||
|
||||
.myplan {
|
||||
box-shadow: 0 2px 6px rgba(12, 72, 128, .1);
|
||||
height: 90px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.myplan-title{
|
||||
|
||||
.myplan-title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.myplan-num{
|
||||
|
||||
.myplan-num {
|
||||
color: #434343;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
font-style: normal;
|
||||
line-height: 38px;
|
||||
}
|
||||
.row{
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
}
|
||||
.todo-plan{
|
||||
|
||||
.todo-plan {
|
||||
padding: 15px;
|
||||
/*height: 100px;*/
|
||||
box-shadow: 0 2px 6px rgba(12,72,128,.1);
|
||||
box-shadow: 0 2px 6px rgba(12, 72, 128, .1);
|
||||
border-radius: 4px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.todo-plan-num {
|
||||
line-height: 40px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.todo-plan-title{
|
||||
|
||||
.todo-plan-title {
|
||||
display: flex;
|
||||
}
|
||||
.todo-plan-title-text{
|
||||
|
||||
.todo-plan-title-text {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.todo-plan-title-text > p{
|
||||
|
||||
.todo-plan-title-text > p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.todo-plan a{
|
||||
|
||||
.todo-plan a {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.order-count-title {
|
||||
background-color: #c389f6;
|
||||
color: #7b38b7;
|
||||
padding: 5px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.order-count-plan {
|
||||
padding: 15px;
|
||||
/*height: 100px;*/
|
||||
box-shadow: 0 0 6px rgba(12, 72, 128, .1);
|
||||
border-radius: 4px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.order-count-num {
|
||||
font-size: 20px;
|
||||
margin: 10px 0;
|
||||
color: #292e39;
|
||||
}
|
||||
|
||||
.order-count-num-sub {
|
||||
font-size: 12px;
|
||||
color: #C9C5C5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
|
||||
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme'], function ($, undefined, Backend, Table, Form,echarts) {
|
||||
|
||||
var Controller = {
|
||||
dashboard: function () {
|
||||
|
||||
Controller.api.bindevent();
|
||||
Controller.echarts.item_pie();
|
||||
Controller.echarts.area_pie();
|
||||
Controller.echarts.source_pie();
|
||||
Controller.echarts.cancel_order_pie();
|
||||
Controller.echarts.money_line();
|
||||
console.log(123);
|
||||
|
||||
},
|
||||
|
|
@ -17,6 +22,308 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
|
|||
bindevent: function () {
|
||||
Form.api.bindevent($("form[role=form]"));
|
||||
}
|
||||
},
|
||||
echarts: {
|
||||
item_pie: function(){
|
||||
// 基本的饼图配置
|
||||
var myChart = echarts.init(document.getElementById('item_pie'));
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: '取消订单类型',
|
||||
subtext: '',
|
||||
left: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
color: [
|
||||
"#18d1b1",
|
||||
"#3fb1e3",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '服务项目',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
area_pie: function(){
|
||||
// 基本的饼图配置
|
||||
var myChart = echarts.init(document.getElementById('area_pie'));
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: '取消订单类型',
|
||||
subtext: '',
|
||||
left: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
color: [
|
||||
"#18d1b1",
|
||||
"#3fb1e3",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
source_pie: function(){
|
||||
// 基本的饼图配置
|
||||
var myChart = echarts.init(document.getElementById('source_pie'));
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: '订单地区',
|
||||
subtext: '',
|
||||
left: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
color: [
|
||||
"#18d1b1",
|
||||
"#3fb1e3",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
cancel_order_pie: function(){
|
||||
// 基本的饼图配置
|
||||
var myChart = echarts.init(document.getElementById('cancel_order_pie'));
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: '订单来源',
|
||||
subtext: '',
|
||||
left: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||
},
|
||||
color: [
|
||||
"#18d1b1",
|
||||
"#3fb1e3",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 234, name: '联盟广告' },
|
||||
{ value: 135, name: '视频广告' },
|
||||
{ value: 1548, name: '搜索引擎' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
},
|
||||
money_line: function (){
|
||||
var myChart = echarts.init(document.getElementById('money_line'));
|
||||
|
||||
var option = {
|
||||
title: {
|
||||
text: '总业绩',
|
||||
subtext: '数据',
|
||||
left: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
color: [
|
||||
"#18d1b1",
|
||||
"#3fb1e3",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
legend: {
|
||||
data: ['柱状图1', '柱状图2', '折线图'],
|
||||
left: 'left'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '柱状图数值',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '折线图数值',
|
||||
position: 'right',
|
||||
min: 0, // 设置右侧y轴的最小值
|
||||
max: 1 // 设置右侧y轴的最大值
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '柱状图1',
|
||||
type: 'bar',
|
||||
data: [120, 132, 101, 134, 90, 230],
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
||||
},
|
||||
{
|
||||
name: '柱状图2',
|
||||
type: 'bar',
|
||||
data: [220, 182, 191, 234, 290, 330],
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
||||
},
|
||||
{
|
||||
name: '折线图',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [0.2, 0.3, 0.4, 0.6, 0.5, 0.8],
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#ff6600'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
return Controller;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user