guosen-activity-web/src/views/wel/index.vue

<template>
  <basic-container>
    <el-dialog :modal-append-to-body="false" :visible.sync="editBussinessVisible" title="编辑资料" width="80%">
      <avue-form v-if="editBussinessVisible" :table-loading="loading" v-model="bussiness" :option="bussinessOption"
        @reset-change="emptytChange" @submit="submitBussiness()">

      </avue-form>
    </el-dialog>
    <el-dialog :modal-append-to-body="false" :visible.sync="chongzhiVisible" title="网银支付" width="30%">
      ，<div align="center" style="font-size: 20px;color: #0099FF;margin-bottom: 20px;">充值金额</div>
      <div align="center">
        <span>
          <!-- <el-input-number  size="large" placeholder="请输入充值金额" v-model="money" min="1">
          </el-input-number> -->
          <el-input placeholder="请输入内容" v-model="money" type="number" :min="1">
            <template slot="prepend">RMB</template>
          </el-input>
        </span>
        <div align="left" style="margin: 10px;">充值金额(大写)：{{moneyChina}}</div>
        <div align="center" style="margin: 20px;">
          <el-button type="success" size="mini" @click="chongzhiConfirm"> 去充值</el-button>
        </div>
        <el-divider></el-divider>
        <div>说明：充值后账户余额 = 本次充值金额 - 技术服务费 - 手续费
          <div>
            <table style="width: 100%;" border="1" class="myTable">
              <tr v-for="(item,i) in statDatas" :key="i">
                <td class="column">{{ item.key }}</td>
                <td class="column">{{ item.value }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>


    </el-dialog>

    <el-card>
      <el-row :gutter="50">
        <el-col :span="24">
          <!--  <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="用户数增长曲线" v-if="permission.user_increase">
            <div id="userStatistics" :style="{ width: '100%', height: '450px' }"></div>
          </el-card>-->
<!--          <accountstatic head="用户财务账本" :data="useraccountData" v-if="permission.account_static"></accountstatic>-->
          <accountstatic head="广告商财务账本" :statData="bussinessaccountData" v-if="permission.account_static"></accountstatic>
<!--          <accountstatic head="代理商财务账本" :data="agenteraccountData" v-if="permission.account_static"></accountstatic>-->
          <!--<el-card header="音乐之声-佣金结算统计" v-if="permission.ordercommission_static">

            <el-button-group>
              <el-col :span="12">
                <el-button size="small" :type="buttonDay" icon="el-icon-document" @click="handleDay">按日
                </el-button>
              </el-col>
              <el-col :span="12">
                <el-button size="small" :type="buttonMonth" icon="el-icon-data-line" @click="handleMonth">按月
                </el-button>
              </el-col>
            </el-button-group>

            <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="selectDate" :type="dateType" :placeholder="dataPlace">
            </el-date-picker>
            <el-button-group>

              <el-col :span="12">
                <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>
            &lt;!&ndash; 图形 &ndash;&gt;

          </el-card>-->


        </el-col>

      </el-row>

    </el-card>

    <el-card v-if="permission.bussiness_screen" :span="24">

      <el-row>
        <div>
          <el-row :gutter="50">
            <el-col span="12">
              <div style="background-color: #4d4dff;border-radius: 30px;">
                <avue-avatar style="margin:20px;" :size="128" :src="bussiness.icon"></avue-avatar>
                <span style="color: white;">{{bussiness.name}}</span>
                <span style="color: white;margin-left: 40px;">API密钥:</span> <span style="color: white;margin-left:10px">******</span>
                <span style="margin-left: 10px;">
                  <el-tooltip content="API密钥用于接口对接,请谨慎保存" placement="bottom" effect="dark">
                    <el-button type="primary" size="mini" @click="doCopy()">
                      复制
                    </el-button>
                  </el-tooltip>
                </span>
                <span style="margin-left: 30px;background-color: #4d4dff;">
                  <el-link target="_blank" type="success" :href="bussiness.apiFilePath">Api文档下载(打开需输入密钥)</el-link>
                </span>
                <div>
                  <el-button style="margin-left:50px;" type="primary" class="button" @click="editBussiness">商户配置（可设置回调地址）</el-button>
                  <span style="color: white;margin-left: 40px;">服务费率(千分比)：{{bussiness.serviceRate}}</span>
                  <span style="color: white;margin-left: 40px;">每日限额(元)：{{bussiness.maxLimit}}</span>
                </div>
                <div style="color: white;margin-left: 40px;">
                  <br/>
                  <span style="color: white;margin-left: 40px;">商户回调地址：{{bussiness.recallUrl}}</span>
                </div>
                <div style="margin-left: 20px;margin-top:30px;">
                  <span style="color: white;">账户余额</span>
                </div>
                <div style="margin-left: 20px;margin-top:10px;padding-bottom: 20px;">
                  <span>
                    <avue-avatar style="margin-bottom: 30px;" src="/img/bg/rmb.png"></avue-avatar>
                  </span>
                  <span style="font-size:60px;margin-left:20px;margin-bottom: 20px;color:white;">
                    {{bussiness.remain}}
                  </span>
                </div>

                <div style="margin-left: 20px;margin-top:30px;">
                  <span style="color: white;">在途金额</span>
                </div>
                <div style="margin-left: 20px;margin-top:10px;padding-bottom: 20px;">
                  <span>
                    <avue-avatar style="margin-bottom: 30px;" src="/img/bg/rmb.png"></avue-avatar>
                  </span>
                  <span style="font-size:60px;margin-left:20px;margin-bottom: 20px;color:white;">
                    {{bussiness.freeze}}
                  </span>
                </div>

              </div>
            </el-col>
            <el-col span="12" height="400px">
              <el-row :gutter="50">
                <el-col span="12">
                  <div style="background-color: #4d4dff;border-radius: 30px;" align="center" @click="chongzhi">
                    <img style="margin:10px;" float="center" :size="30" src="/img/bg/qb.png" />
                    <div style="color: white;padding-bottom: 10px;">
                      账户充值
                    </div>
                  </div>
                </el-col>
                <el-col span="12">
                  <div style="background-color: #ff5050;border-radius: 30px;" align="center" @click="toMyOrder">
                    <img style="margin:10px;" float="center" :size="30" src="/img/bg/zd.png" />
                    <div style="color: white;padding-bottom: 10px;">
                      我的账单
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="50">
                <el-col span="12">
                  <div style="background-color:  #d633ff;border-radius: 30px;" align="center" @click="toMyDebit">
                    <img style="margin:10px;" float="center" :size="30" src="/img/bg/fxfr.png" />
                    <div style="color: white;padding-bottom: 10px;">
                      分销分润
                    </div>
                  </div>
                </el-col>
                <el-col span="12">
                  <div style="background-color: #8080ff;border-radius: 30px;" align="center" @click="toBin">
                    <img style="margin:10px;" float="center" :size="30" src="/img/bg/sm.png" />
                    <div style="color: white;padding-bottom: 10px;">
                      卡bin查询
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-row>

      <!--<el-row :gutter="50">
        <el-col span="12">
          <el-card style="background-color: #f2f2f2;border-radius: 30px;">
            <div slot="header">
              <span>推广数据</span>
            </div>
            <avue-data-display :option="tgOption"></avue-data-display>
          </el-card>
        </el-col>
        <el-col span="12">
          <el-card style="background-color: #f2f2f2;border-radius: 30px;">
            <div slot="header">
              <span>产品销量</span>
            </div>
            <avue-data-display :option="tgOption"></avue-data-display>
          </el-card>
        </el-col>
      </el-row>-->
    </el-card>

  </basic-container>
</template>
<script>
  import request from '@/router/axios';
  import echarts from "echarts";
  import accountstatic from "@/components/index/accountstatic.vue"
  import {
    getList as getParams
  } from "@/api/system/param";
  import {
    add as addBillrecord,
    chongzhi,

  } from "@/api/billrecord/billrecord";
  import {
    getByAccount,
    update
  } from "@/api/guosen/bussiness"
  import {
    mapGetters
  } from "vuex";
  export default {
    components: {
      accountstatic
    },

    data() {
      return {
        agenteraccountData:{},
        useraccountData: {},
        bussinessaccountData: {
          todayIn: null,
          todayOut:null,
          historyIn:null,
          historyOut:null
        },
        loading: true,
        editBussinessVisible: false,
        moneyChina: "壹拾万元整",
        bussiness: {},
        statDatas: [{
            key: "技术服务费率",
            value: 0
          },
          {
            key: "技术服务费",
            value: 0
          },
          {
            key: "充值金额",
            value: 0
          },
          {
            key: "可用余额",
            value: 0
          }

        ],
        yibaoOrder: {

        },
        billrecord: {
          payStatus: 0,
          type: 5
        },
        money: 100000,
        serviceRate: 0.005,
        chongzhiVisible: false,
        buttonDay: "primary",
        buttonMonth: "",
        selectDate: [],
        dateType: "daterange",
        dataPlace: "选择日期",
        query: {
          staticType: 1
        },
        tgOption: {
          span: 8,
          data: [{
              count: "66.6万",
              title: '总曝光量',
            },
            {
              count: '88.8万',
              title: '总点击率',

            },
            {
              count: '688万',
              title: '总访问量',

            },
            {
              count: '6666',
              title: '今日曝光量',

            },
            {
              count: '6666',
              title: '今日点击率',

            },
            {
              count: '6666',
              title: '今日访问量',

            }
          ]
        },

        bussiness_option2: {
          span: 12,
          data: [{
            click: function(item) {
              alert(JSON.stringify(item));
            },
            count: '150',
            title: '充值',
            icon: 'el-icon-warning',
            color: 'rgb(49, 180, 141)'
          }, {
            click: function(item) {
              alert(JSON.stringify(item));
            },
            count: '53%',
            title: '跳出率',
            icon: 'el-icon-view',
            color: '#00a65a'
          }, {
            click: function(item) {
              alert(JSON.stringify(item));
            },
            count: '44',
            title: '用户注册数',
            icon: 'el-icon-setting',
            color: '#f39c12'
          }]
        },
        bussinessOption: {
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          dialogWidth: "30%",
          column: [{
              label: "商户号名称",
              labelWidth: 130,
              prop: "name",
              span: 24,
              rules: [{
                required: true,
                message: "请输入商户号名称",
                trigger: "blur"
              }]
            },



            {
              label: "api回调地址",
              prop: "recallUrl",
              labelWidth: 130,
              span: 24,
              hide: true,
              placeholder: "请输入回调地址,比如：http://xxx.xxx.xxx.xxx/xxx",
              rules: [{
                required: false,
                message: "请输入回调地址,比如：http://xxx.xxx.xxx.xxx/xxx",
                trigger: "blur"
              }]
            },
            {
              label: "广告图",
              prop: "icon",
              labelWidth: 130,
              span: 12,
              type: "upload",
              listType: "picture-img",
              action: '/api/putObject',
              propsHttp: {
                url: 'data'
              },
              rules: [{
                required: false,
                message: "请输入营业执照",
                trigger: "blur"
              }]
            },
            {
              label: "营业执照",
              prop: "businessLicense",
              labelWidth: 130,
              span: 12,
              type: "upload",
              listType: "picture-img",
              action: '/api/putObject',
              propsHttp: {
                url: 'data'
              },
              rules: [{
                required: false,
                message: "请输入营业执照",
                trigger: "blur"
              }]
            },
            {
              label: "税务登记证",
              prop: "taxAffairsLicense",
              labelWidth: 130,
              type: "upload",
              listType: "picture-img",
              action: '/api/putObject',
              propsHttp: {
                url: 'data'
              },
              span: 12,
              rules: [{
                required: false,
                message: "请输入税务登记证",
                trigger: "blur"
              }]
            },
            {
              label: "组织机构代码证",
              prop: "organizationCodeLicense",
              labelWidth: 130,
              span: 12,
              type: "upload",
              listType: "picture-img",
              action: '/api/putObject',
              propsHttp: {
                url: 'data'
              },
              rules: [{
                required: false,
                message: "请输入关联账号的密码",
                trigger: "blur"
              }]
            },
            {
              label: "关联账号的id",
              prop: "accountId",
              hide: true,
              display: false,
              rules: [{
                required: true,
                message: "请输入关联账号的id",
                trigger: "blur"
              }]
            },
          ]
        },
        bussiness_option1: {
          height: "500px",
          span: 24,
          data: [{
              click: function(item) {
                alert(JSON.stringify(item));
              },

              title: '分类统计',
              subtitle: '实时',
              count: 7993,
              allcount: 10222,
              text: '当前分类总记录数',
              color: 'rgb(27, 201, 142)',
              key: '类'
            },

          ]
        },

        /*optionMusic: {
          span: 6,
          data: [{
              title: '用户总数',
              count: 0,
              icon: 'el-icon-user',
              color: 'rgb(56, 161, 242)',
              click: () => {
                this.$router.push("/loginuser/loginuser");
              },
            },
            {
              click: () => {
                this.$router.push("/guosen/agenter");
              },
              title: '代理总数',
              count: 0,
              icon: 'el-icon-s-custom',
              color: 'rgb(3,180,144)',
            },
            {
              title: '活动总数',
              count: 0,
              icon: 'el-icon-s-flag',
              color: 'rgb(105,184,242)',
              click: () => {
                this.$router.push("/activity/activity");
              },
            },
            {
              title: '商品总数',
              count: 0,
              icon: 'el-icon-shopping-cart-full',
              color: 'rgb(49, 180, 141)',
              click: () => {
                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"])

    },
    watch: {
      "money"() {

        if (this.money < 0) {
          this.money = 1;
        }
        this.moneyChina = this.convertCurrency(this.money)
        this.statDatas[0].value = this.bussiness.serviceRate / 1000
        this.statDatas[1].value = this.money * this.bussiness.serviceRate / 1000
        this.statDatas[2].value = parseFloat(this.money)
        this.statDatas[3].value = parseFloat(this.statDatas[2].value) - parseFloat(this.statDatas[1].value)
      },
    },
    mounted() {
      var _that = this;

      // this.type = this.tabsOption.column[0];
      let befDate = new Date();
      let byear = befDate.getFullYear();
      let bmonth = befDate.getMonth() + 1;
      let bday = befDate.getDate();
      let startTime = `${byear}-${bmonth}-${bday}`;
      this.selectDate = [startTime, startTime];

      this.getData();
      this.getOrderCommissionData();
      this.getAccoutStatic()



      getByAccount().then(res => {
        if(res.data.data){
          _that.bussiness = res.data.data
          _that.statDatas[0].value = res.data.data.serviceRate / 1000
          _that.statDatas[1].value = _that.money * _that.statDatas[0].value
          _that.statDatas[2].value = _that.money
          _that.statDatas[3].value = _that.statDatas[2].value - _that.statDatas[1].value
          console.log("buss" + JSON.stringify(_that.bussiness))
        }
      })

    },
    methods: {
      submitBussiness() {
        this.bussiness.userPassword = null;
        this.bussiness.leastPrice = null;
        update(this.bussiness).then(res => {
          this.$message({
            type: "success",
            message: res.data.msg
          });
          this.editBussinessVisible = false;
        })

      },
      convertCurrency(money) {
        //汉字的数字
        var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
        //基本单位
        var cnIntRadice = new Array('', '拾', '佰', '仟');
        //对应整数部分扩展单位
        var cnIntUnits = new Array('', '万', '亿', '兆');
        //对应小数部分单位
        var cnDecUnits = new Array('角', '分', '毫', '厘');
        //整数金额时后面跟的字符
        var cnInteger = '整';
        //整型完以后的单位
        var cnIntLast = '元';
        //最大处理的数字
        var maxNum = 999999999999999.9999;
        //金额整数部分
        var integerNum;
        //金额小数部分
        var decimalNum;
        //输出的中文金额字符串
        var chineseStr = '';
        //分离金额后用的数组，预定义
        var parts;
        if (money == '') {
          return '';
        }
        money = parseFloat(money);
        if (money >= maxNum) {
          //超出最大处理数字
          return '';
        }
        if (money == 0) {
          chineseStr = cnNums[0] + cnIntLast + cnInteger;
          return chineseStr;
        }
        //转换为字符串
        money = money.toString();
        if (money.indexOf('.') == -1) {
          integerNum = money;
          decimalNum = '';
        } else {
          parts = money.split('.');
          integerNum = parts[0];
          decimalNum = parts[1].substr(0, 4);
        }
        //获取整型部分转换
        if (parseInt(integerNum, 10) > 0) {
          var zeroCount = 0;
          var IntLen = integerNum.length;
          for (var i = 0; i < IntLen; i++) {
            var n = integerNum.substr(i, 1);
            var p = IntLen - i - 1;
            var q = p / 4;
            var m = p % 4;
            if (n == '0') {
              zeroCount++;
            } else {
              if (zeroCount > 0) {
                chineseStr += cnNums[0];
              }
              //归零
              zeroCount = 0;
              chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
            }
            if (m == 0 && zeroCount < 4) {
              chineseStr += cnIntUnits[q];
            }
          }
          chineseStr += cnIntLast;
        }
        //小数部分
        if (decimalNum != '') {
          var decLen = decimalNum.length;
          for (var i = 0; i < decLen; i++) {
            var n = decimalNum.substr(i, 1);
            if (n != '0') {
              chineseStr += cnNums[Number(n)] + cnDecUnits[i];
            }
          }
        }
        if (chineseStr == '') {
          chineseStr += cnNums[0] + cnIntLast + cnInteger;
        } else if (decimalNum == '') {
          chineseStr += cnInteger;
        }
        return chineseStr;
      },

      editBussiness() {
        this.editBussinessVisible = true;

      },
      doCopy() {
        this.$copyText(this.bussiness.secret)
        this.$message.success("复制成功")
      },
      toMyDebit() {
        this.$router.push('/guosen/bussinessdebitrequest');
      },
      toBin() {
        this.$router.push('/guosen/bankcode');
      },
      toMyOrder() {
        this.$router.push('/bussiness/order');
      },
      guid() {
        var str = "abcdefghijklmnopqrstuvwxyz0123456789"; // 可以作为常量放到random外面
        var result = "";
        for (var i = 0; i < 32; i++) {
          result += str[parseInt(Math.random() * str.length)];
        }
        return result;

      },
      chongzhi() {
        this.chongzhiVisible = true;
      },
      chongzhiConfirm() {

        this.billrecord.price = this.money;
        this.billrecord.orderId = this.guid();
        this.billrecord.bussinessFee = this.statDatas[1].value
        //易宝订单
        this.yibaoOrder.orderId = this.billrecord.orderId; //商户请求号
        this.yibaoOrder.orderAmount = this.money; //充值金额
        // this.yibaoOrder.payType = "B2B"; //"B2C:个人网银" "B2B:企业网银
        this.yibaoOrder.goodsName = "充值"
        this.yibaoOrder.notifyUrl = ",,,"
        // this.yibaoOrder.bankCode = "ABC,ICBC,BOC,CMBCHINA,SZPA,CCB"; //银行编码
        this.yibaoOrder.redirectUrl = "https://music.nanyue6688.com/cyzhtest/#/wel/index";
        addBillrecord(this.billrecord).then(res => {
          console.log(JSON.stringify(res))
          chongzhi(this.yibaoOrder).then(res => {
            location.href = res.data.data.payUrl;
            console.log(JSON.stringify(res))
          })
        })
      },
      //按日
      handleDay() {
        this.buttonDay = "primary";
        this.buttonMonth = "";
        this.query.staticType = 1;
        this.dateType = "daterange";
        this.dataPlace = "选择日期";
      },

      //按月
      handleMonth() {
        this.buttonDay = "";
        this.buttonMonth = "primary";
        this.query.staticType = 2;
        this.dateType = "monthrange";
        this.dataPlace = "选择月份";
      },
      getAccoutStatic() {
        let that = this;
        request({
          url: '/api/cyzh-static/adStaticAccountStatic',
          method: "get",
        }).then(res => {
          //今日分润
          let todayOut = res.data.data.todayOut;
          that.useraccountData.todayOut = todayOut.userOut;
          that.agenteraccountData.todayOut = todayOut.proxyOut;
          that.bussinessaccountData.todayOut = todayOut.adsOut;
          // this.optionTodayOut.series[0].data[0].value = todayOut.userOut;
          // this.optionTodayOut.series[0].data[1].value = todayOut.proxyOut;
          // this.optionTodayOut.series[0].data[2].value = todayOut.adsOut;
          // this.optionTodayOut.series[0].data[3].value = todayOut.operationOut;
          // this.optionTodayOut.series[0].data[4].value = todayOut.sponsorOut;
          // this.option.data[0].count = todayOut.total;
          //历史提现
          let historyOut = res.data.data.totalOut;
          that.useraccountData.historyOut = historyOut.userOut;
          that.agenteraccountData.historyOut = historyOut.proxyOut;
          that.bussinessaccountData.historyOut = historyOut.adsOut;
          // this.optionHistoryOut.series[0].data[0].value = historyOut.userOut;
          // this.optionHistoryOut.series[0].data[1].value = historyOut.proxyOut;
          // this.optionHistoryOut.series[0].data[2].value = historyOut.adsOut;
          // this.optionHistoryOut.series[0].data[3].value = historyOut.operationOut;
          // this.optionHistoryOut.series[0].data[4].value = historyOut.sponsorOut;
          // this.option.data[1].count = historyOut.total;

          //今日充值
          let todayIn = res.data.data.todayIn;
          that.useraccountData.todayIn = todayIn.userIn;
          that.agenteraccountData.todayIn = todayIn.proxyIn;
          that.bussinessaccountData.todayIn = todayIn.adsIn;
          // this.optionTodayIn.series[0].data[0].value = todayIn.userIn;
          // this.optionTodayIn.series[0].data[1].value = todayIn.proxyIn;
          // this.optionTodayIn.series[0].data[2].value = todayIn.adsIn;

          // this.option.data[2].count = todayIn.total;
          //历史收入
          let historyIn = res.data.data.totalIn;
          that.useraccountData.historyIn = historyIn.userIn;
          that.agenteraccountData.historyIn = historyIn.proxyIn;
          that.bussinessaccountData.historyIn = historyIn.adsIn;
          // this.optionHistoryIn.series[0].data[0].value = historyIn.userIn;
          // this.optionHistoryIn.series[0].data[1].value = historyIn.proxyIn;
          // this.optionHistoryIn.series[0].data[2].value = historyIn.adsIn;
          that.$forceUpdate()
          // this.option.data[3].count = historyIn.total;


          that.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"
        }).then(res => {
          const resData = res.data.data;
          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;
        })
      },
      handleStatic() {
        this.getOrderCommissionData();
      },

      drawPie() {
        let $todayOut = document.getElementById('todayOut');
        if(!$todayOut){
          return ;
        }
        let todayOutChart = echarts.init($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);
      },
      //柱形图
      drawRealDemandLine(dateList, unclearDataList, clearedDataList) {
        // 基于准备好的dom，初始化echarts实例
        let $orderStatistics = document.getElementById('orderStatistics');
        if (!$orderStatistics) return;
        let myChart = echarts.init($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
          }]
        });
      }
    }

  }
</script>

<style>
  .button {
    padding: 10;
    float: center;
  }

  .image {
    width: 35%;
    display: block;
    border-radius: 65px;
  }

  .myTable {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
</style>