gitfjn/duolamaojiazhen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加网站文件

Browse Source
This commit is contained in:
gitfjn
2025-12-22 13:59:40 +08:00
commit 117aaf83d1
19468 changed files with 2111999 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

840
application/admin/view/chart/finance_chart.html Normal file
View File

@@ -0,0 +1,840 @@
{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>