添加网站文件
This commit is contained in:
638
application/admin/view/chart/orderexe_chart.html
Normal file
638
application/admin/view/chart/orderexe_chart.html
Normal file
@@ -0,0 +1,638 @@
|
||||
{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>
|
||||
Reference in New Issue
Block a user