Files
duolamaojiazhen/application/admin/view/chart/finance_chart.html
2025-12-22 13:59:40 +08:00

841 lines
26 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{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="margin-bottom: 100px">
<div class="layui-row layui-col-space15">
<div class="layui-col-sm12 flex">
<div class="flex" style="background:#fff;width:100%;padding:15px">
<div class="w-i" style="padding:15px 0;">
<label class="layui-form-label" style="width:auto">年统计</label>
<div class="layui-input-inline">
<input type="text" value="2025" class="layui-input" id="test2" placeholder="yyyy">
</div>
</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="zdd">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="xse">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="ys">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="ys2">0</div>
<span class="span">应收账款</span>
</div>
</div>
</div>
<!--表格-->
<div class="layui-col-sm12">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-row">
每月销售趋势
<div class="layadmin-dataview">
<div id="sale-charts" style="width: 100%;height: 100%">
<div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-sm12">
<div class="layui-col-sm7">
<div class="layui-card" style="margin-right:7px">
<div class="layui-card-body">
<div class="layui-row" style="height:510px;overflow:hidden">
<p style="margin-bottom:20px">当月目标完成率</p>
<table class="layui-hide" id="table_test"></table>
</div>
</div>
</div>
</div>
<div class="layui-col-sm5">
<div class="c-i" style="margin-left:7px;">
<div class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px">
<div style="margin-right:10px;white-space: nowrap;">用户</div>
<select name="search_key" lay-filter="namechange2">
<option value="">所有</option>
{volist name="admin" id="vo"}
<option value="{$vo.id}">{$vo.name}</option>
{/volist}
</select>
</div>
<div id="c2" 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 class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px">
<div style="margin-right:10px;white-space: nowrap;">用户</div>
<select name="search_key" lay-filter="namechange">
<option value="">所有</option>
{volist name="admin" id="vo"}
<option value="{$vo.id}">{$vo.name}</option>
{/volist}
</select>
</div>
<div id="c1" style="height:100%"> </div>
</div>
</div>
<div class="layui-col-sm6" style="overflow:hidden">
<div class="c-i" style="margin-left:7px">
<div class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px">
<div style="margin-right:10px;white-space: nowrap;">用户</div>
<select name="search_key" lay-filter="namechange4">
<option value="">所有</option>
{volist name="admin" id="vo"}
<option value="{$vo.id}">{$vo.name}</option>
{/volist}
</select>
</div>
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-row" style="height:510px;overflow:hidden">
<div id="c22" style="height:100%;width:100%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<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>
<div class="layui-form" style="width:200px;display:flex;align-items:center;margin-bottom:20px;margin:0 10px">
<div style="margin-right:10px;white-space: nowrap;">用户</div>
<select name="search_key" lay-filter="namechange3">
<option value="">所有</option>
{volist name="admin" id="vo"}
<option value="{$vo.id}">{$vo.name}</option>
{/volist}
</select>
</div>
<button type="button" class="layui-btn" id="chaxun">查询</button>
</div>
</div>
<div class="flex" style="width:100%;background:#fff">
<div class="layui-card" style="width:55%;padding:15px">
<div class="layui-row" style="height:510px;overflow:hidden">
<p style="margin-bottom:20px">统计产能服务</p>
<table class="layui-hide" id="table_test3"></table>
</div>
</div>
<!--t2-->
<div style="width:50%;height:510px">
<div id="t2" style="height:100%">
</div>
</div>
<!--t2 end-->
</div>
</div>
<div class="layui-col-sm12">
<div class="layui-col-sm6">
<div class="c-i" style="margin-right:7px">
<div id="c5" style="height:100%"> </div>
</div>
</div>
<div class="layui-col-sm6">
<div class="c-i" style="margin-left:7px">
<div id="c6" 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 cyear = null
var table = null
var admin_id = null
var admin_id2 = null
var admin_id3 = null
var admin_id4 = null
function getrangetime(st =null,et = null){
$.post('date_range',{st:st,et:et,admin_id:admin_id3},function(e){
var d = e.data
t2_option.series[0].data = d.yq
var t2_charts= echarts.init(document.getElementById('t2'));
t2_charts.setOption(t2_option, true);
c5_option.series[0].data = d.ka
var c5_charts= echarts.init(document.getElementById('c5'));
c5_charts.setOption(c5_option, true);
c6_option.yAxis.data = d.ph.name.reverse()
c6_option.series[0].data = d.ph.value.reverse()
var c6_charts= echarts.init(document.getElementById('c6'));
c6_charts.setOption(c6_option, true);
//展示已知数据
table.render({
elem: '#table_test3'
,cols: [[ //标题栏
{field: 'index', title: 'ID'}
,{field: 'name', title: '姓名'}
,{field: 'value', title: '新增产能'}
,{field: 'fw', title: '服务产能'}
,{field: 'sy', title: '剩余产能'}
,{field: 'value', title: '总产能'}
,{field: 'yc', title: '异常'}
,{field: 'js', title: '加时'}
,{field: 'bx', title: '报销'}
]]
,data: d.cn
//,skin: 'line' //表格风格
,even: true
});
})
}
$('#chaxun').click(function(){
var st = $('#test3').val()
var et = $('#test4').val()
getrangetime(st,et);
})
var c5_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 c6_option = {
title: {
text: '销量排行'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
show:true,
type: 'category',
data: ['', '', '', '', '', '']
},
series: [
{
type: 'bar',
data: [0, 0, 0, 0, 0, 0]
}
]
};
var t2_option = {
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: '总订单量' },
{ value: 0, name: '服务量' },
{ value: 0, name: '剩余量' },
{ value: 0, name: '报销数量' },
{ value: 0, name: '加时数量' }
]
}
]
};
var c1_option = {
title: {
text: '年销量情况',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '年卡销量' },
{ value: 735, name: '次卡销量' },
{ value: 580, name: '单次服务' },
{ value: 484, name: '其它服务' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var c2_option = {
title: {
text: '客户渠道分析',
left: 'center'
},
tooltip: {
trigger: 'item'
},
// legend: {
// top: '5%',
// left: 'center'
// },
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside'
},
labelLine: {
show: true
},
data: [
{ value: 0, name: '' },
{ value: 0, name: '' },
{ value: 0, name: '' },
{ value: 0, name: '' },
]
}
]
};
var c22_option = {
title: {
text: '客户渠道分析',
left: 'center'
},
tooltip: {
trigger: 'item'
},
// legend: {
// top: '5%',
// left: 'center'
// },
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside'
},
labelLine: {
show: true
},
data: [
{ value: 0, name: '' },
{ value: 0, name: '' },
{ value: 0, name: '' },
{ value: 0, name: '' },
]
}
]
};
layui.config({
version:"{$front_version}",
base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'like','form','element','laydate','table'], function () {
var $ = layui.$
,like = layui.like
var laydate = layui.laydate;
var dropdown = layui.dropdown
var form = layui.form
table = layui.table;
getyear()
getrangetime()
form.on('select(namechange)', function(data){
admin_id = data.value
getyear(cyear)
});
form.on('select(namechange2)', function(data){
admin_id2 = data.value
getyear(cyear)
});
form.on('select(namechange3)', function(data){
admin_id3 = data.value
});
form.on('select(namechange4)', function(data){
admin_id4 = data.value
getyear(cyear)
});
var sale_option = {
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10','11月','12月']
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['销售额', '应收', '已收',]
},
series: [
{
name: '销售额',
data: [ 0, 0,0, 0,0, 0,0, 0,0, 0,0, 0 ],
type: 'line',
},
{
name: '应收',
data:[ 0, 0,0, 0,0, 0,0, 0,0, 0,0, 0 ],
type: 'line',
},
{
name: '已收',
data: [ 0, 0,0, 0,0, 0,0, 0,0, 0,0, 0 ],
type: 'line',
}
]
};
function getyear(year = null){
$.post('finance_chart',{date:year,admin_id:admin_id,admin_id2:admin_id2,admin_id4:admin_id4},function(e){
var d = e.data
$('#zdd').html(d.zdd)
$('#xse').html(d.xse)
$('#ys').html(d.ys)
$('#ys2').html(d.ys2)
sale_option.series[0].data = d.xse_ys.xse
sale_option.series[1].data = d.xse_ys.ys
sale_option.series[2].data = d.xse_ys.ys2
var sale_charts= echarts.init(document.getElementById('sale-charts'));
sale_charts.setOption(sale_option, true);
c2_option.series[0].data = d.qd
var c2_charts= echarts.init(document.getElementById('c2'));
c2_charts.setOption(c2_option, true);
c22_option.series[0].data = d.qd2
var c22_charts= echarts.init(document.getElementById('c22'));
c22_charts.setOption(c22_option, true);
console.log(c22_option,document.getElementById('c22'))
c1_option.series[0].data = d.ka
var c1_charts= echarts.init(document.getElementById('c1'));
c1_charts.setOption(c1_option, true);
//当月目标完成率
//展示已知数据
table.render({
elem: '#table_test'
,cols: [[ //标题栏
{field: 'index', title: '排行', width: 80, sort: true}
,{field: 'name', title: '业务员'}
,{field: 'mb', title: '月目标(元)'}
,{field: 'price', title: '已成交(元)'}
,{field: 'lv', title: '完成率(%'}
,{field: 'num', title: '已成交(单)'}
]]
,data: d.ymb
,even: true
});
//end
})
}
//年选择器
laydate.render({
elem: '#test2'
,type: 'year'
,done: function(value, date){
cyear = value
getyear(value)
}
});
//年选择器
laydate.render({
elem: '#test3'
});
laydate.render({
elem: '#test4'
});
//初演示
form.render('select');
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>