首页统计

src/api/guosen/ordercommission.js

@@ -2,7 +2,7 @@ import request from '@/router/axios';
 
 export const getList = (current, size, params) => {
   return request({
-    url: '/api/cyzh-guosen/ordercommission/list',
+    url: '/api/cyzh-guosen/ordercommission/page',
     method: 'get',
     params: {
       ...params,

src/views/guosen/agenter.vue

@@ -40,7 +40,7 @@
                   size="mini"
                    icon="el-icon-s-promotion"
                    plain
-                 
+
                    @click="viewUserAgenter(scope.row)">推广用户
         </el-button>
         <el-button
@@ -210,6 +210,20 @@
                 trigger: "blur"
               }]
             },
+            {
+              label: "实收金额",
+              prop: "price",
+              type: "number",
+              row: true,
+              labelWidth: 150,
+              span: 22,
+              precision:3,
+              rules: [{
+                required: true,
+                message: "请输入实收金额",
+                trigger: "blur"
+              }]
+            },
           ]
         },
         data: []

src/views/wel/index.vue

@@ -3,13 +3,31 @@
     <el-card>
       <el-row :gutter="50">
         <el-col :span="24">
-          <el-card header="音乐之声">
+          <el-card>
+            {{userInfo.userName}} 欢迎回来
+          </el-card>
+          <el-card header="音乐之声-基础数据统计" v-if="permission.basic_static">
             <avue-data-rotate :option="optionMusic"></avue-data-rotate>
           </el-card>
           <br>
-          <el-card header="结算统计">
-
-
+          <el-card header="音乐之声-财务账本" v-if="permission.account_static">
+            <avue-data-display :option="option"></avue-data-display>
+            <el-row>
+              <el-col :span="6">
+                <div align="center" id="todayOut" style="width: 100%;height: 300px;"></div>
+              </el-col>
+              <el-col :span="6">
+                <div align="center" id="historyOut" style="width: 100%;height: 300px;"></div>
+              </el-col>
+              <el-col :span="6">
+                <div align="center"  id="todayIn" style="width: 100%;height: 300px;"></div>
+              </el-col>
+              <el-col :span="6">
+                <div align="center"  id="historyIn" style="width: 100%;height: 300px;"></div>
+              </el-col>
+            </el-row>
+          </el-card>
+          <el-card header="音乐之声-佣金结算统计" v-if="permission.ordercommission_static">
 
             <el-button-group>
               <el-col :span="12">
@@ -30,9 +48,15 @@
                 <el-button size="small" :type="buttonChart" icon="el-icon-data-line" @click="handleStatic">统计
                 </el-button>
               </el-col>
-
             </el-button-group>
+            <el-row>
 
+              <el-col :span="24">
+                <div id="orderStatistics" style="width: 100%;height: 600px;">
+                </div>
+              </el-col>
+            </el-row>
+            <!-- 图形 -->
 
           </el-card>
 
@@ -45,17 +69,60 @@
 </template>
 <script>
   import request from '@/router/axios';
-
+  import echarts from "echarts";
+  import {
+    mapGetters
+  } from "vuex";
   export default {
 
     data() {
       return {
+        buttonDay: "primary",
+        buttonMonth: "",
         selectDate: [],
         dateType: "daterange",
         dataPlace: "选择日期",
         query: {
           staticType: 1
         },
+        option: {
+          span: 6,
+          data: [{
+              click: function(item) {
+
+              },
+              count: 100,
+              decimals: 2,
+              title: '今日提现',
+
+            },
+            {
+              click: function(item) {
+
+              },
+              count: 100,
+              decimals: 2,
+              title: '历史提现',
+
+            },
+            {
+              click: function(item) {
+
+              },
+              count: 100,
+              decimals: 2,
+              title: '今日收入',
+
+            },
+            {
+              click: function(item) {},
+              count: 100,
+              decimals: 2,
+              title: '历史收入',
+
+            }
+          ]
+        },
         optionMusic: {
           span: 6,
           data: [{
@@ -64,12 +131,12 @@
               icon: 'el-icon-user',
               color: 'rgb(56, 161, 242)',
               click: () => {
-                this.$router.push("/broadcast/teacher");
+                this.$router.push("/loginuser/loginuser");
               },
             },
             {
               click: () => {
-                this.$router.push("/yjhutong/annualactivity");
+                this.$router.push("/guosen/agenter");
               },
               title: '代理总数',
               count: 0,
@@ -82,7 +149,7 @@
               icon: 'el-icon-s-flag',
               color: 'rgb(105,184,242)',
               click: () => {
-                this.$router.push("/yjhutong/developprocess");
+                this.$router.push("/activity/activity");
               },
             },
             {
@@ -91,18 +158,184 @@
               icon: 'el-icon-shopping-cart-full',
               color: 'rgb(49, 180, 141)',
               click: () => {
-                this.$router.push("/pay/payrecord");
+                this.$router.push("/userpointsgoods/userpointsgoods");
               },
             },
 
           ]
         },
 
+        optionTodayOut: {
+          title: {
+            text: '今日提现去向',
 
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
 
+          series: [{
+            name: '今日提现去向',
+            type: 'pie',
+            radius: '70%',
+            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)'
+              }
+            }
+          }]
+        },
+        optionHistoryOut: {
+          title: {
+            text: '历史提现去向',
+
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+
+          series: [{
+            name: '历史提现去向',
+            type: 'pie',
+            radius: '70%',
+            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)'
+              }
+            }
+          }]
+        },
+        optionTodayIn: {
+          title: {
+            text: '今日收入来源',
+
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+
+          series: [{
+            name: '今日收入来源',
+            type: 'pie',
+            radius: '70%',
+            data: [{
+                value: 0,
+                name: '用户'
+              },
+              {
+                value: 0,
+                name: '代理'
+              },
+              {
+                value: 0,
+                name: '广告商'
+              },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }]
+        },
+optionHistoryIn: {
+          title: {
+            text: '历史收入来源',
+
+            left: 'center'
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+
+          series: [{
+            name: '历史收入来源',
+            type: 'pie',
+            radius: '70%',
+            data: [{
+                value: 40.06,
+                name: '用户'
+              },
+              {
+                value: 0,
+                name: '代理'
+              },
+              {
+                value: 0,
+                name: '广告商'
+              },
+
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }]
+        },
 
       }
     },
+    computed: {
+      ...mapGetters(["permission", "userInfo"])
+
+    },
     mounted() {
       // this.type = this.tabsOption.column[0];
       let befDate = new Date();
@@ -111,8 +344,10 @@
       let bday = befDate.getDate();
       let startTime = `${byear}-${bmonth}-${bday}`;
       this.selectDate = [startTime, startTime];
-      this.query.status = 0;
       this.getData();
+      this.getOrderCommissionData();
+      this.getAccoutStatic()
+
     },
     methods: {
       //按日
@@ -132,7 +367,35 @@
         this.dateType = "monthrange";
         this.dataPlace = "选择月份";
       },
+      getAccoutStatic() {
+        request({
+          url: '/api/cyzh-static/staticAccountStatic',
+          method: "get",
+        }).then(res => {
+          this.option.data[0].count = res.data.data.todayOut;
+          this.option.data[1].count = res.data.data.totalOut;
+          this.option.data[2].count = res.data.data.todayIn;
+          this.option.data[3].count = res.data.data.totalIn;
+          this.drawPie();
+        })
+      },
+      getOrderCommissionData() {
+        this.query.beginDate = this.selectDate[0];
+        this.query.endDate = this.selectDate[1];
+        request({
+          url: '/api/cyzh-static/staticOrderCommission',
+          method: "post",
+          data: this.query
+        }).then(res => {
+
+          this.drawRealDemandLine(res.data.data.dateList, res.data.data.unClearList, res.data.data.clearedList)
+
+
+
+        })
+      },
       getData() {
+
         request({
           url: '/api/cyzh-static/static',
           method: "get"
@@ -141,57 +404,82 @@
           this.optionMusic.data[0].count = resData.userCount;
           this.optionMusic.data[1].count = resData.agenterCount;
           this.optionMusic.data[2].count = resData.activityCount;
-           this.optionMusic.data[3].count = resData.shopCount;
-          // if (resData.broadcastPayCount != null) {
-          //   var broadcastPayCountTem = resData.broadcastPayCount.toString();
-          //   var array = broadcastPayCountTem.split(".");
-          //   if (array.length == 2) {
-
-          //     this.optionHyl.data[3].count = array[0] + " ." + array[1];
-          //   } else {
-          //     this.optionHyl.data[3].count = broadcastPayCountTem;
-          //   }
-          // }else{
-          //    this.optionHyl.data[3].count = 0;
-          // }
-
-
-          // // console.log(this.optionHyl.data[3].count)
-          // // console.log(resData.broadcastPayCount.toFixed(2))
-          // this.toolData = resData.toolData;
-          // this.echartUser.series[0].data = resData.userDistributionData;
-          // this.optionUser.data[0].count = resData.userCount;
-          // this.optionCourse.data[0].count = resData.broadcastCount;
-          // this.optionCourse.data[1].count = resData.chaptersCount;
-          // this.optionCourse.data[2].count = resData.videoCount;
-          // this.optionCourse.data[3].count = resData.videoCount_display;
-          // this.optionCourse.data[4].count = resData.videoCount_playing;
-          // this.optionCourse.data[5].count = resData.videoCount_played;
-          // this.echartCourse.xAxis.data = resData.dayOfServen;
-          // this.echartCMS.xAxis.data = resData.dayOfServen;
-          // this.echartCoursePay.xAxis.data = resData.dayOfServen;
-          // this.echartCoursePay.series[0].data = resData.broadcastAllPayCountDayOfServen;
-          // this.echartCourse.series[0].data = resData.broadcastCountDayOfServen;
-          // this.echartCourse.series[1].data = resData.chaptersCountDayOfServen;
-          // this.echartCourse.series[2].data = resData.videoCountDayOfServen;
-          // this.echartCMS.series[0].data = resData.articleCountDayOfServen;
-          // this.echartCMS.series[1].data = resData.articleReadCountDayOfServen;
-          // this.echartCMS.series[2].data = resData.articleRelayCountDayOfServen;
-          // this.echartCMS.series[3].data = resData.articleCollectCountDayOfServen;
-          // this.optionCMS.data[0].count = resData.articleCount;
-          // this.optionCMS.data[1].count = resData.articleReadCount;
-          // this.optionCMS.data[2].count = resData.articleRelayCount;
-          // this.optionCMS.data[3].count = resData.articleCollectCount;
-
-
+          this.optionMusic.data[3].count = resData.shopCount;
         })
       },
-      pushToTool() {
-        console.log("totOol")
-        this.$router.push("/tool/tool");
+      handleStatic() {
+        this.getOrderCommissionData();
+      },
+
+      drawPie() {
+        let todayOutChart = echarts.init(document.getElementById('todayOut'));
+        todayOutChart.setOption(this.optionTodayOut);
+
+        let histroyOuntChart = echarts.init(document.getElementById('historyOut'));
+        histroyOuntChart.setOption(this.optionHistoryOut);
+
+        let todayInChart = echarts.init(document.getElementById('todayIn'));
+        todayInChart.setOption(this.optionTodayIn);
+
+        let historyInChart = echarts.init(document.getElementById('historyIn'));
+        historyInChart.setOption(this.optionHistoryIn);
       },
-      pushToToolUse() {
-        this.$router.push("/tool/tooluse");
+      //柱形图
+      drawRealDemandLine(dateList, unclearDataList, clearedDataList) {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = echarts.init(document.getElementById('orderStatistics'))
+        // 基于准备好的dom，初始化echarts实例
+        // 绘制图表
+        myChart.setOption({
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: { //直角坐标系内绘图网格
+            show: true, //是否显示直角坐标系网格。[ default: false ]
+            left: "10%", //grid 组件离容器左侧的距离。
+            right: "30px",
+            borderColor: "#c45455", //网格的边框颜色
+            bottom: "20%" //
+          },
+          legend: {
+            data: ['待结算', '已结算'],
+            show: true,
+          },
+          // x轴拖动
+          dataZoom: [{
+            type: "slider",
+            realtime: true, //拖动滚动条时是否动态的更新图表数据
+            height: 25, //滚动条高度
+            start: 0, //滚动条开始位置（共100等份）
+            end: 100 //结束位置（共100等份）
+          }],
+
+          xAxis: {
+            data: dateList,
+            axisLabel: { //坐标轴刻度标签的相关设置。
+              interval: 0,
+              rotate: "45"
+            }
+          },
+          yAxis: {},
+          series: [{
+            name: '待结算',
+            type: 'bar',
+            stack: '佣金',
+            data: unclearDataList
+          }, {
+            name: '已结算',
+            type: 'bar',
+            stack: '佣金',
+            data: clearedDataList
+          }]
+        });
       }
     }