639 lines
18 KiB
HTML
639 lines
18 KiB
HTML
{layout name="layout1" /}
|
|
<style>
|
|
.flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.flexc{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.t1{
|
|
background: #4A70F4;
|
|
}
|
|
.t2{
|
|
background: #F6A23F;
|
|
}
|
|
.t3{
|
|
background: #6DD047;
|
|
}
|
|
.t4{
|
|
background: #F07AAF;
|
|
}
|
|
.t-i{
|
|
background: #fff;
|
|
padding:20px 15px;
|
|
}
|
|
.t-i-img{
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
margin-right: 20px;
|
|
}
|
|
.t-i-img img{
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.h2{
|
|
font-weight: bold;
|
|
font-size: 28px;
|
|
color: #000;
|
|
}
|
|
.span{
|
|
color: #666;
|
|
font-size: 12px;
|
|
}
|
|
.c-i{
|
|
background: #fff;
|
|
padding: 15px;
|
|
height: 500px;
|
|
}
|
|
|
|
</style>
|
|
<div class="layui-fluid" style="">
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
|
|
<div class="layui-col-sm12">
|
|
<div class="flex" style="background:#fff;width:100%;padding:15px">
|
|
<div class="w-i" style="padding:15px 0;display:flex">
|
|
<div class="layui-input-inline">
|
|
<input type="text" value="{$st}" class="layui-input" id="test3" placeholder="yyyy">
|
|
</div>
|
|
-
|
|
<div class="layui-input-inline">
|
|
<input type="text" value="{$et}" class="layui-input" id="test4" placeholder="yyyy">
|
|
</div>
|
|
|
|
|
|
|
|
<button type="button" class="layui-btn" id="chaxun">查询</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="layui-col-sm3">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t1">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="fwzl">0</div>
|
|
<span class="span">服务总量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm3 ">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t2">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="yfwl">0</div>
|
|
<span class="span">已服务量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm3 ">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t3">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="wpdl">0</div>
|
|
<span class="span">未派单量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm3 ">
|
|
<div class="t-i flex">
|
|
<div class="t-i-img flexc t4">
|
|
<img src="/img/chart/t1.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<div class="h2" id="sycs">0</div>
|
|
<span class="span">剩余次数</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layui-col-sm12">
|
|
<div class="layui-col-sm6">
|
|
<div class="c-i" style="margin-right:7px">
|
|
<div id="b1" style="height:100%"> </div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6">
|
|
<div class="c-i" style="margin-right:7px">
|
|
<div id="b2" style="height:100%"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-sm12">
|
|
<div class="layui-col-sm6">
|
|
<div class="c-i" style="margin-right:7px">
|
|
<div id="b3" style="height:100%"> </div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm6">
|
|
<div class="c-i" style="margin-right:7px">
|
|
<div id="b4" style="height:100%"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="layui-col-sm12">
|
|
<!--<div class="layui-col-sm6">-->
|
|
<!-- <div class="c-i" style="margin-right:7px">-->
|
|
<!-- <div id="c1" style="height:100%"> </div> -->
|
|
<!-- </div>-->
|
|
<!--</div> -->
|
|
<div class="layui-col-sm6">
|
|
<div class="c-i" style="margin-left:7px">
|
|
<div id="c2" style="height:100%"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" charset="utf-8" src="/static/webjs/echarts.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="/static/webjs/jquery.min.js"></script>
|
|
<script>
|
|
var b1_option = {
|
|
title: {
|
|
text: '服务总订单',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
var b2_option = {
|
|
title: {
|
|
text: '已服务完成订单',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' }
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
|
|
|
|
var b3_option = {
|
|
title: {
|
|
text: '保洁师服务质量',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
padAngle: 5,
|
|
itemStyle: {
|
|
borderRadius: 10
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 40,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 1048, name: '服务非常好' },
|
|
{ value: 735, name: '服务一般' },
|
|
{ value: 580, name: '服务较差' },
|
|
{ value: 484, name: '非常差' },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
var b3_charts= echarts.init(document.getElementById('b3'));
|
|
b3_charts.setOption(b3_option, true);
|
|
|
|
var b4_option = {
|
|
title: {
|
|
text: '未消耗订单量',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: [20, 140],
|
|
center: ['50%', '50%'],
|
|
roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: 5
|
|
},
|
|
data: [
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
{ value: 0, name: '' },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
|
|
var sale_option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10','11月','12月']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: [0,0,0,0,0,0,0,0,0,0,0,0],
|
|
type: 'bar'
|
|
}
|
|
]
|
|
};
|
|
|
|
// var c1_option = {
|
|
// title: {
|
|
// text: '未消耗订单',
|
|
// left: 'center'
|
|
// },
|
|
// tooltip: {
|
|
// trigger: 'item'
|
|
// },
|
|
// legend: {
|
|
// orient: 'vertical',
|
|
// left: 'left'
|
|
// },
|
|
// series: [
|
|
// {
|
|
// type: 'pie',
|
|
// radius: '50%',
|
|
// data: [
|
|
// { value: 0, name: '' },
|
|
// { value: 0, name: '' },
|
|
// { value: 0, name: '' },
|
|
// { value: 0, name: '' },
|
|
// { value: 0, name: '' }
|
|
// ],
|
|
// emphasis: {
|
|
// itemStyle: {
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
// }
|
|
// }
|
|
// }
|
|
// ]
|
|
// };
|
|
|
|
// var c1_charts= echarts.init(document.getElementById('c1'));
|
|
// c1_charts.setOption(c1_option, true);
|
|
|
|
|
|
var c2_option = {
|
|
title: {
|
|
text: '年卡低于3次/次卡低于2次',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
center: ['50%', '70%'],
|
|
// adjust the start and end angle
|
|
startAngle: 180,
|
|
endAngle: 360,
|
|
data: [
|
|
{ value: 0, name: '年卡低于3次' },
|
|
{ value: 0, name: '次卡低于2次' },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
$('#chaxun').click(function(){
|
|
var st = $('#test3').val()
|
|
var et = $('#test4').val()
|
|
|
|
getyear(st,et);
|
|
|
|
})
|
|
|
|
|
|
function getyear(st,et){
|
|
$.post('orderexe_chart',{st:st,et:et},function(e){
|
|
var d = e.data
|
|
$('#fwzl').html(d.fwzl)
|
|
$('#yfwl').html(d.yfwl)
|
|
$('#wpdl').html(d.wpdl)
|
|
$('#sycs').html(d.sycs)
|
|
|
|
b1_option.series[0].data = d.fwqd
|
|
var b1_charts= echarts.init(document.getElementById('b1'));
|
|
b1_charts.setOption(b1_option, true);
|
|
|
|
b2_option.series[0].data = d.yfw
|
|
var b2_charts= echarts.init(document.getElementById('b2'));
|
|
b2_charts.setOption(b2_option, true);
|
|
|
|
b4_option.series[0].data = d.wxh
|
|
var b4_charts= echarts.init(document.getElementById('b4'));
|
|
b4_charts.setOption(b4_option, true);
|
|
|
|
|
|
c2_option.series[0].data = d.cn
|
|
var c2_charts= echarts.init(document.getElementById('c2'));
|
|
c2_charts.setOption(c2_option, true);
|
|
|
|
|
|
})
|
|
}
|
|
getyear()
|
|
|
|
layui.config({
|
|
version:"{$front_version}",
|
|
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
|
|
}).extend({
|
|
index: 'lib/index' //主入口模块
|
|
}).use(['index', 'like','form','element','laydate'], function () {
|
|
var $ = layui.$
|
|
,like = layui.like
|
|
var laydate = layui.laydate;
|
|
|
|
//年选择器
|
|
laydate.render({
|
|
elem: '#test3'
|
|
,done: function(value, date){
|
|
|
|
}
|
|
});
|
|
//年选择器
|
|
laydate.render({
|
|
elem: '#test4'
|
|
,done: function(value, date){
|
|
|
|
}
|
|
});
|
|
|
|
|
|
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 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
|
|
}]
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
</script>
|