From c9bcbceb7112358c780688ffbd0ebb3ef528e65e Mon Sep 17 00:00:00 2001
From: xuhy <3313886187@qq.com>
Date: 星期五, 07 四月 2023 18:40:06 +0800
Subject: [PATCH] 首页管理
---
management/guns-admin/src/main/webapp/WEB-INF/view/system/tHomePage/tHomePageStatistics.html | 471 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 467 insertions(+), 4 deletions(-)
diff --git a/management/guns-admin/src/main/webapp/WEB-INF/view/system/tHomePage/tHomePageStatistics.html b/management/guns-admin/src/main/webapp/WEB-INF/view/system/tHomePage/tHomePageStatistics.html
index b3abc02..449042c 100644
--- a/management/guns-admin/src/main/webapp/WEB-INF/view/system/tHomePage/tHomePageStatistics.html
+++ b/management/guns-admin/src/main/webapp/WEB-INF/view/system/tHomePage/tHomePageStatistics.html
@@ -14,19 +14,482 @@
<span class="control-label" style="font-size: 30px">今天</span>
</div>
</div>
- <div class="initialLevel col-sm-12 control-label form-group" style="cursor: pointer;text-align: left;">
- <div class="initialLevel col-sm-3 control-label form-group" >
+ <div class="initialLevel col-sm-12 control-label form-group" >
+ <div class="initialLevel col-sm-8 control-label form-group" style="cursor: pointer;text-align: left;" >
<label>${txt}</label>
</div>
+ <div class="initialLevel col-sm-4 form-group" style="cursor: pointer;text-align: right;" >
+ <label class="col-sm-2">代理商</label>
+ <select class="col-sm-2 " id="agentName" style="width: 200px;height: 33px" name="agentName">
+ <option value="">请选择</option>
+ @for(i in agentList){
+ <option value="${i.id}">${i.principal}</option>
+ @}
+ </select>
+ </div>
</div>
+
+ <div class="initialLevel col-sm-12 control-label form-group" >
+ <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 130px">
+ <br/>
+ <div class="ibox float-e-margins">
+ <div class="col-sm-3" ><br/>
+ <label style="font-size: 16px">代理商</label><br/>
+ <img src="https://newok.oss-cn-shenzhen.aliyuncs.com/img/0e257d6fe5af4275919d039b40e30e19.png">
+ </div>
+ <div class="initialLevel col-sm-9 control-label form-group" >
+ <div>
+ <div class="col-sm-8" style="font-size: 16px">总数</div>
+ <div class="col-sm-1" id="agentTotal">${agentTotal}</div>
+ </div><br/>
+ <div id="pro1" style="height: 20px"></div><br/>
+ <div>
+ <div class="col-sm-8" style="font-size: 16px">近一月新增</div>
+ <div class="col-sm-1" id="agentMonthTotal">${agentMonthTotal}</div>
+ </div><br/>
+ <div id="pro2" style="height: 20px"></div>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-1"></div>
+ <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 130px">
+ <br/>
+ <div class="ibox float-e-margins">
+ <div class="col-sm-3" ><br/>
+ <label style="font-size: 16px">司机</label><br/>
+ <img src="https://newok.oss-cn-shenzhen.aliyuncs.com/img/0e257d6fe5af4275919d039b40e30e19.png" >
+ </div>
+ <div class="initialLevel col-sm-9 control-label form-group" >
+ <div>
+ <div class="col-sm-8" style="font-size: 16px">总数</div>
+ <div class="col-sm-1" id="driverTotal">${driverTotal}</div>
+ </div><br/>
+ <div id="pro3" style="height: 20px"></div><br/>
+ <div>
+ <div class="col-sm-8" style="font-size: 16px">近一月新增</div>
+ <div class="col-sm-1" id="driverMonthTotal">${driverMonthTotal}</div>
+ </div><br/>
+ <div id="pro4" style="height: 20px"></div>
+ </div>
+ </div>
+ </div>
+ <div class="col-sm-1"></div>
+ <div class="initialLevel col-sm-4 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;height: 600px"><br/>
+ <div>
+ <div class="initialLevel col-sm-4 control-label form-group" >
+ <label style="font-size: 20px">业绩排名</label>
+ </div>
+ <div class="col-sm-2"></div>
+ <div class="initialLevel col-sm-6 control-label form-group" >
+ <div style="font-size: 0px;width: 100%">
+ <button id="btn1" onclick="queryOrderCount()">单量</button>
+ <button id="btn2" onclick="queryIncome()">收入</button>
+ <button id="btn3" onclick="queryCommission()">佣金</button>
+ </div>
+ <div>
+ <select class="col-lg-8" style="height: 25px">
+ <option value="">请选择</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ <div id="performanceResp">
+ </div>
+ </div>
+ </div>
+
+ <div class="initialLevel col-sm-12 control-label form-group" ><br/><br/>
+ <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;margin-top: -400px;height: 300px">
+ <br/>
+ <div class="col-sm-5" >
+ <label style="font-size: 16px">订单统计(本月)</label>
+ </div>
+ <div class="col-sm-3"></div>
+ <div class="initialLevel col-sm-4 control-label form-group" style="text-align: right" >
+ </div>
+ <div id="chart2" style="height: 90%;width: 100%"></div>
+ </div>
+ <div class="col-sm-1"></div>
+ <div class="initialLevel col-sm-3 control-label form-group" style="border: 1px solid;border-color: #c2ccd1;margin-top: -400px;margin-left: 25%;height: 300px">
+ <br/>
+ <div>
+ <div class="col-sm-5" >
+ <label style="font-size: 16px">订单统计(年份)</label>
+ </div>
+ <div class="col-sm-3"></div>
+ <div class="initialLevel col-sm-4 control-label form-group" style="text-align: right">
+ <select class="col-lg-12" id="year" style="height: 25px;border-radius: 5px">
+ <option value="">请选择</option>
+ </select>
+ </div>
+ </div><br/>
+ <div id="chart1" style="height: 90%;width: 100%"></div>
+ </div>
+
+ <div class="initialLevel col-sm-4 control-label form-group" >
+ </div>
+
+ </div>
+
</div>
</div>
</div>
</div>
</div>
</div>
-<script src="${ctxPath}/static/modular/system/tCoupon/tCoupon_info.js"></script>
-<script src="${ctxPath}/static/modular/system/tCoupon/tCoupon.js"></script>
+<script src="${ctxPath}/static/modular/system/tCoupon/tAgent_info.js"></script>
+<script src="${ctxPath}/static/modular/system/tCoupon/tAgent.js"></script>
+
+<link rel="stylesheet" href="${ctxPath}/static/css/plugins/lineProgressbar/jquery.lineProgressbar.css">
+<script src="${ctxPath}/static/js/plugins/lineProgressbar/jquery.lineProgressbar.js"></script>
+
+<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
+<style>
+ img{
+ height: 30px;
+ width: 30px;
+ }
+ #chart1 {
+ position: relative;
+ height: 100vh;
+ overflow: hidden;
+ }
+ button{
+ width: 70px;
+ height: 25px;
+ margin-bottom: 5px;
+ }
+ #btn1{
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ font-size: 1px;
+ }
+ #btn2{
+ font-size: 1px;
+ }
+ #btn3{
+ border-top-right-radius: 5px;
+ border-bottom-right-radius: 5px;
+ font-size: 1px;
+ }
+ table{
+ table-layout:fixed;
+ word-break:break-all;
+ }
+ th{
+ text-align: center;
+ }
+ td{
+ width:100px;
+ height:40px
+ }
+ .pro {
+ width: 200px;
+ margin: 100px auto;
+
+ }
+ .result {
+ width: 200px;
+ margin: 100px auto;
+
+ }
+ .result{
+ text-align: center;
+ text-shadow: 0 0 5px #333333;
+ color:#FFFFFF;
+ }
+</style>
<script type="text/javascript">
+
+ $(function (){
+ loading()
+ orderByMonth()
+ orderByYear()
+ queryOrderCount()
+
+ })
+
+ // 进度条加载
+ function loading(){
+ var options = $.extend({
+ percentage : $('#agentTotal').text(),
+ ShowProgressCount: false,
+ duration: 10,
+
+ // Styling Options
+ fillBackgroundColor: '#3498db',
+ backgroundColor: '#EEEEEE',
+ radius: '10px',
+ height: '20px',
+ width: '80%'
+ });
+ $('#pro1').LineProgressbar(options);
+ var options = $.extend({
+ percentage : $('#agentMonthTotal').text(),
+ ShowProgressCount: false,
+ duration: 10,
+
+ // Styling Options
+ fillBackgroundColor: '#3498db',
+ backgroundColor: '#EEEEEE',
+ radius: '10px',
+ height: '20px',
+ width: '80%'
+ });
+ $('#pro2').LineProgressbar(options);
+ var options = $.extend({
+ percentage : $('#driverTotal').text(),
+ ShowProgressCount: false,
+ duration: 10,
+
+ // Styling Options
+ fillBackgroundColor: '#3498db',
+ backgroundColor: '#EEEEEE',
+ radius: '10px',
+ height: '20px',
+ width: '80%'
+ });
+ $('#pro3').LineProgressbar(options);
+ var options = $.extend({
+ percentage : $('#driverMonthTotal').text(),
+ ShowProgressCount: false,
+ duration: 10,
+
+ // Styling Options
+ fillBackgroundColor: '#3498db',
+ backgroundColor: '#EEEEEE',
+ radius: '10px',
+ height: '20px',
+ width: '80%'
+ });
+ $('#pro4').LineProgressbar(options);
+ }
+
+ // 单量
+ function queryOrderCount(){
+ $('#btn1').css("backgroundColor","dodgerblue")
+ $('#btn1').css("borderColor","dodgerblue")
+ $('#btn1').css("color","#FFFFFF")
+ $('#btn2').css("backgroundColor","#FFFFFF")
+ $('#btn2').css("borderColor","dodgerblue")
+ $('#btn2').css("color","black")
+ $('#btn3').css("backgroundColor","#FFFFFF")
+ $('#btn3').css("borderColor","dodgerblue")
+ $('#btn3').css("color","black")
+ $('#btn1').val(1)
+ $('#btn2').val('')
+ $('#btn3').val('')
+ getOrder($('#btn1').val())
+ }
+ // 收入
+ function queryIncome(){
+ $('#btn1').css("backgroundColor","#FFFFFF")
+ $('#btn1').css("borderColor","dodgerblue")
+ $('#btn1').css("color","black")
+ $('#btn2').css("backgroundColor","dodgerblue")
+ $('#btn2').css("borderColor","dodgerblue")
+ $('#btn2').css("color","#FFFFFF")
+ $('#btn3').css("backgroundColor","#FFFFFF")
+ $('#btn3').css("borderColor","dodgerblue")
+ $('#btn3').css("color","black")
+ $('#btn1').val('')
+ $('#btn2').val(2)
+ $('#btn3').val('')
+ getOrder($('#btn2').val())
+ }
+ // 佣金
+ function queryCommission(){
+ $('#btn1').css("backgroundColor","#FFFFFF")
+ $('#btn1').css("borderColor","dodgerblue")
+ $('#btn1').css("color","black")
+ $('#btn2').css("backgroundColor","#FFFFFF")
+ $('#btn2').css("borderColor","dodgerblue")
+ $('#btn2').css("color","black")
+ $('#btn3').css("backgroundColor","dodgerblue")
+ $('#btn3').css("borderColor","dodgerblue")
+ $('#btn3').css("color","#FFFFFF")
+ $('#btn1').val('')
+ $('#btn2').val('')
+ $('#btn3').val(3)
+ getOrder($('#btn3').val())
+ }
+
+ // 通过年查询订单数量（查询每月）
+ function orderByYear(){
+ var dom = document.getElementById('chart1');
+ var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsYearByAgentId",function(data){
+ data = data.yearResp
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+ var option;
+ option = {
+ tooltip: {
+ trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
+ axisPointer: {// 坐标轴指示器，坐标轴触发有效
+ type: 'line' // 默认为直线，可选为：'line' | 'shadow'
+ },
+ formatter: '日期: {b} <br/>订单数量 : {c}'
+ },
+ xAxis: {
+ type: 'category',
+ data: [data[0].month+'月',data[1].month+'月', data[2].month+'月', data[3].month+'月',data[4].month+'月',data[5].month+'月',data[6].month+'月',data[7].month+'月',data[8].month+'月',data[9].month+'月',data[10].month+'月',data[11].month+'月']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [data[0].orderCount,data[1].orderCount, data[2].orderCount, data[3].orderCount,data[4].orderCount,data[5].orderCount,data[6].orderCount,data[7].orderCount,data[8].orderCount,data[9].orderCount,data[10].orderCount,data[11].orderCount],
+ type: 'line',
+ color: '#00b7ee'
+ }
+ ]
+ };
+ option && myChart.setOption(option);
+ }, function (data) {
+ });
+ ajax.set("agentId",$("#agentName").val());
+ ajax.set("yearDate",$("#year").val());
+ ajax.start();
+ }
+
+ // 通过本月查询订单数量（查询本月每天）
+ function orderByMonth(){
+ var dom = document.getElementById('chart2');
+ var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsMonthByAgentId",function(data){
+ data = data.monthResp
+ var mon = new Date().getMonth()+1;
+ if(mon < 10){
+ mon = '0'+mon;
+ }
+ var yResp = [];
+ var xResp = [];
+ for (var i =0;i<data.length;i++){
+ yResp.push({
+ value:data[i].orderCount,
+ })
+ xResp.push({
+ value:mon+'-'+data[i].month,
+ })
+ }
+ var myChart = echarts.init(dom, null, {
+ renderer: 'canvas',
+ useDirtyRect: false
+ });
+ var option;
+ option = {
+ tooltip: {
+ trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
+ axisPointer: {// 坐标轴指示器，坐标轴触发有效
+ type: 'line' // 默认为直线，可选为：'line' | 'shadow'
+ },
+ formatter: '日期: {b} <br/>订单数量 : {c}'
+ },
+
+ xAxis: {
+ type: 'category',
+ data: xResp
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: yResp,
+ type: 'line',
+ color: '#00b7ee'
+ }
+ ]
+ };
+ option && myChart.setOption(option);
+ }, function (data) {
+ });
+ ajax.set("agentId",$("#agentName").val());
+ ajax.start();
+ }
+
+ function getOrder(type){
+ $.ajax({
+ url: Feng.ctxPath + '/tHomePage/statisticsOrderByAgentId',
+ type: 'POST',
+ data: {
+ agentId: $("#agentName").val(),
+ monthDate: $("#monthDate").val(),
+ type: type
+ },
+ success: function (res) {
+ var str = '<table border="1" style="border: #c2ccd1;border-radius: 1px;height: 90%;width: 100%;text-align:center;">\n' +
+ ' <tr>\n' +
+ ' <th>排名</th>\n' +
+ ' <th>时间</th>\n' +
+ ' <th>姓名</th>\n';
+ if(type == 1){
+ str += ' <th>单量</th>\n' +
+ ' </tr>';
+ }
+ if(type == 2){
+ str += ' <th>收入</th>\n' +
+ ' </tr>';
+ }
+ if(type == 3){
+ str += ' <th>佣金</th>\n' +
+ ' </tr>';
+ }
+ if(!$.isEmptyObject(res)){
+ var order = res.performanceResp
+ if(order.length > 0){
+ for(var i in order){
+ var a=parseInt(i)+1
+ str +=
+ '<tr><td>' + a + '</td><td>' + order[i].monthTime + '</td><td>' + order[i].userName + '</td><td>' + order[i].amount + '</td></tr>';
+ }
+ }
+ }
+ str += '</table>';
+ $('#performanceResp').html('');
+ $('#performanceResp').html(str);
+ }
+ });
+ }
+
+ // 动态查询代理商司机数量
+ function getInfo(){
+ var ajax = new $ax(Feng.ctxPath+"/tHomePage/statisticsDriverByAgentId",function(data){
+ $("#agentTotal").text(data.agentTotal)
+ $("#agentMonthTotal").text(data.agentMonthTotal)
+ $("#driverTotal").text(data.driverTotal)
+ $("#driverMonthTotal").text(data.driverMonthTotal)
+ loading()
+ }, function (data) {
+ });
+ ajax.set("agentId",$("#agentName").val());
+ ajax.start();
+ }
+
+ // 代理商选择事件
+ $('#agentName').change(function(){
+ // 查询代理商 查询司机
+ getInfo()
+ // 查询月度报表
+ orderByMonth()
+ // 通过年查询订单报表
+ orderByYear()
+ // 查询排行榜
+ if($('#btn1').val() != null && $('#btn1').val() != ''){
+ console.log(111)
+ getOrder($('#btn1').val())
+ }
+ if($('#btn2').val() != null && $('#btn2').val() != ''){
+ console.log(222)
+ getOrder($('#btn2').val())
+ }
+ if($('#btn3').val() != null && $('#btn3').val() != ''){
+ console.log(333)
+ getOrder($('#btn3').val())
+ }
+ })
+
</script>
@}
--
Gitblit v1.7.1