hant/allocatr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

看板

Browse Source
This commit is contained in:
hant 2025-04-23 22:55:41 +08:00
parent d64fea7ac2
commit 33ca7a52a7
2 changed files with 451 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
application/admin/view/orderplan/index.html
View File

@ -1,21 +1,21 @@
<div class="mycontainer"> <div class="mycontainer">
<!-- 时间筛选 --> <!-- 时间筛选 -->
<!-- <div class="row">--> <!-- <div class="row">-->
<!-- <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('order/addAbnormal')}">--> <!-- <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="col-md-12">-->
<!-- <div class="form-group">--> <!-- <div class="form-group">-->
<!-- <label for="startDate" class="col-md-2 control-label">选择时间范围：</label>--> <!-- <label for="startDate" class="col-md-2 control-label">选择时间范围：</label>-->
<!-- <div class="col-md-5">--> <!-- <div class="col-md-5">-->
<!-- <input type="text" class="form-control datetimepicker" id="startDate" placeholder="开始时间" />--> <!-- <input type="text" class="form-control datetimepicker" id="startDate" placeholder="开始时间" />-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="col-md-5">--> <!-- <div class="col-md-5">-->
<!-- <input type="text" class="form-control datetimepicker" id="endDate" placeholder="结束时间" />--> <!-- <input type="text" class="form-control datetimepicker" id="endDate" placeholder="结束时间" />-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<!-- </form>--> <!-- </form>-->
<!-- </div>--> <!-- </div>-->
<div class="row" style="margin-bottom: 10px"> <div class="row" style="margin-bottom: 10px">
<!-- 卡片 1: 总用户数 --> <!-- 卡片 1: 总用户数 -->
@ -58,10 +58,15 @@
</div> </div>
</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="col-md-6">
<div class="todo-plan" style="color: #55d2fe"> <div class="todo-plan" style="color: #55d2fe">
<div class="todo-plan-title"> <div class="todo-plan-title">
<div style="font-size: 32px" class="fa fa-warning"></div> <div style="font-size: 32px" class="fa fa-warning"></div>
<div class="todo-plan-title-text" style="flex: 1"> <div class="todo-plan-title-text" style="flex: 1">
<p>报错</p> <p>报错</p>
@ -79,7 +84,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="todo-plan" style="color: #86a7ff"> <div class="todo-plan" style="color: #86a7ff">
<div class="todo-plan-title"> <div class="todo-plan-title">
<div style="font-size: 32px" class="fa fa-gear"></div> <div style="font-size: 32px" class="fa fa-gear"></div>
<div class="todo-plan-title-text" style="flex: 1"> <div class="todo-plan-title-text" style="flex: 1">
<p>待配置</p> <p>待配置</p>
@ -97,7 +102,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="todo-plan" style="color: #4de171"> <div class="todo-plan" style="color: #4de171">
<div class="todo-plan-title"> <div class="todo-plan-title">
<div style="font-size: 32px" class="fa fa-envelope-open"></div> <div style="font-size: 32px" class="fa fa-envelope-open"></div>
<div class="todo-plan-title-text" style="flex: 1"> <div class="todo-plan-title-text" style="flex: 1">
<p>待审核</p> <p>待审核</p>
@ -115,7 +120,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="todo-plan" style="color: #b896ff"> <div class="todo-plan" style="color: #b896ff">
<div class="todo-plan-title"> <div class="todo-plan-title">
<div style="font-size: 32px" class="fa fa-pencil"></div> <div style="font-size: 32px" class="fa fa-pencil"></div>
<div class="todo-plan-title-text" style="flex: 1"> <div class="todo-plan-title-text" style="flex: 1">
<p>待回访</p> <p>待回访</p>
@ -133,7 +138,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="todo-plan" style="color: #f8bf18"> <div class="todo-plan" style="color: #f8bf18">
<div class="todo-plan-title"> <div class="todo-plan-title">
<div style="font-size: 32px" class="fa fa-leaf"></div> <div style="font-size: 32px" class="fa fa-leaf"></div>
<div class="todo-plan-title-text" style="flex: 1"> <div class="todo-plan-title-text" style="flex: 1">
<p>待售后</p> <p>待售后</p>
@ -151,7 +156,7 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="todo-plan" style="color: #f58164"> <div class="todo-plan" style="color: #f58164">
<div class="todo-plan-title"> <div class="todo-plan-title">
<div style="font-size: 32px" class="fa fa-file-text-o"></div> <div style="font-size: 32px" class="fa fa-file-text-o"></div>
<div class="todo-plan-title-text" style="flex: 1"> <div class="todo-plan-title-text" style="flex: 1">
<p>开票</p> <p>开票</p>
@ -167,61 +172,162 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6">
<div class="col-md-6">
<div id="cancel_order_pie" style="width: 100%;height:400px">
</div>
</div>
<div class="col-md-6">
<div class="row"> <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>
<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> </div>
<style> <style>
.mycontainer{ .mycontainer {
min-height: 100vh;
background-color: white; background-color: white;
padding-top: 10px; 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; height: 90px;
padding: 12px 16px; padding: 12px 16px;
border-radius: 4px; border-radius: 4px;
} }
.myplan-title{
.myplan-title {
margin-bottom: 8px; margin-bottom: 8px;
} }
.myplan-num{
.myplan-num {
color: #434343; color: #434343;
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
font-style: normal; font-style: normal;
line-height: 38px; line-height: 38px;
} }
.row{
.row {
margin: 0; margin: 0;
} }
.todo-plan{
.todo-plan {
padding: 15px; padding: 15px;
/*height: 100px;*/ /*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; border-radius: 4px;
margin: 10px; margin: 10px;
} }
.todo-plan-num { .todo-plan-num {
line-height: 40px; line-height: 40px;
font-size: 24px; font-size: 24px;
} }
.todo-plan-title{
.todo-plan-title {
display: flex; display: flex;
} }
.todo-plan-title-text{
.todo-plan-title-text {
margin-left: 5px; margin-left: 5px;
} }
.todo-plan-title-text > p{
.todo-plan-title-text > p {
margin: 0; margin: 0;
font-size: 12px; font-size: 12px;
} }
.todo-plan a{
.todo-plan a {
font-size: 12px; 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> </style>

309
public/assets/js/backend/orderplan.js
View File

@ -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 = { var Controller = {
dashboard: function () { dashboard: function () {
Controller.api.bindevent(); 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); console.log(123);
}, },
@ -17,6 +22,308 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
bindevent: function () { bindevent: function () {
Form.api.bindevent($("form[role=form]")); 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; return Controller;