guosen-activity-web/src/components/ordercommission/ordercommissionComp.vue

<template>
  <basicContainer :visible="visible">

    <avue-tabs :option="tabsOption" @change="changeTab" :visible="visible"></avue-tabs>

    <el-form :visible="visible">

      <el-form-item>
        <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="buttonList" icon="el-icon-document" @click="handleList">列表
            </el-button>
          </el-col> -->
          <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-button-group>
          <el-col :span="12">
            <el-button size="small" icon="el-icon-wallet" v-if="type.prop === 'paying'">结算
            </el-button>
          </el-col>
        </el-button-group>
      </el-form-item>
    </el-form>
    <!-- 图形 -->
    <div v-if="buttonChart == 'primary'" id="orderStatistics" :style="{ width: '100%', height: '450px' }">
    </div>


    <!--   <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :before-open="beforeOpen"
      @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
      @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad" v-if="buttonList == 'primary'">

    </avue-crud> -->
  </basicContainer>

</template>

<script>
  import echarts from "echarts";
  import {
    getList,
    getDetail,
    add,
    update,
    remove,
    getByAgenterAndTime
  } from "@/api/guosen/ordercommission";
  export default {
    props: {
      agenterId: {

      },
      visible:{

      }
    },
    data() {
      return {
        type: {},
        query: {
          status: 0,
          staticType: 1
        },
        chart: null,
        selectDate: [],
        dateType: "daterange",
        dataPlace: "选择日期",
        buttonList: "", //默认显示表格
        buttonChart: "primary", //默认图形不显示
        buttonDay: "primary", //默认显示按日
        buttonMonth: "", //默认图形不显示
        legendData: ['正向有功实时需量', '反向有功实时需量', '正向无功实时需量', '反向无功实时需量'],
        tableData: [],
        tabsOption: {
          column: [{
            icon: 'el-icon-warning',
            label: '待结算',
            prop: 'paying',

          }, {
            icon: 'el-icon-info',
            label: '已结算',
            prop: 'payed',
          }]
        },
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {

          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          addBtn: false,
          menu: false,
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [{
              label: "佣金金额",
              prop: "amt",
              rules: [{
                required: true,
                message: "请输入佣金金额",
                trigger: "blur"
              }]
            },
            {
              label: "佣金比例",
              prop: "rate",
              rules: [{
                required: true,
                message: "请输入佣金比例",
                trigger: "blur"
              }]
            },
            {
              label: "佣金类型",
              prop: "type",
              type: "select",
              dataType: "number",
              dicData: [{
                  label: "城市分红",
                  value: 1
                },
                {
                  label: "推广分红",
                  value: 2
                },
              ],
              rules: [{
                required: true,
                message: "请输入佣金类型：1-城市分红 2-推广分红",
                trigger: "blur"
              }]
            },

            {
              //-1: 取消  0：待结算 1：已结算
              label: "创建时间",
              prop: "createTime",

            }
          ]
        },
      }
    },

    mounted() {
      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.query.status = 0;
    },

    methods: {
      changeTab(column) {
        this.type = column;
        if (this.type.prop === "paying") {
          this.query.status = 0;
        } else if (this.type.prop === "payed") {
          this.query.status = 1;
        }
      },
      init() {
        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.query.agenterId = this.agenterId;
        this.query.status = 1; //默认已结算

      },
      //按日
      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 = "选择月份";
      },
      //图表
      handleList() {
        this.buttonList = "primary";
        this.buttonChart = "";
      },

      //柱状图
      handleStatic() {
        this.buttonList = "";
        this.buttonChart = "primary";

        this.$nextTick(() => {
          this.loadData();
        })

      },
      loadData() {
        this.query.agenterId = this.agenterId;
        this.query.beginDate = this.selectDate[0];
        this.query.endDate = this.selectDate[1];

        getByAgenterAndTime(this.query).then(res => {
          this.drawRealDemandLine(res.data.data.dateList, res.data.data.dataList);
          console.log("dddd" + JSON.stringify(res.data))
        })
      },
      //柱形图
      drawRealDemandLine(dateList, dataList) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('orderStatistics'))
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表
        myChart.setOption({
          title: {
            text: ''
          },
          tooltip: {},
          grid: { //直角坐标系内绘图网格
            show: true, //是否显示直角坐标系网格。[ default: false ]
            left: "20%", //grid 组件离容器左侧的距离。
            right: "30px",
            borderColor: "#c45455", //网格的边框颜色
            bottom: "20%" //
          },
          // x轴拖动
          dataZoom: [{
            type: "slider",
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            height: 25, //滚动条高度
            start: 40, //滚动条开始位置（共100等份）
            end: 65 //结束位置（共100等份）
          }],

          xAxis: {
            data: dateList,
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45"
            }
          },
          yAxis: {},
          series: [{
            name: '佣金（元）',
            type: 'bar',
            data: dataList
          }]
        });
      }
    },


  }
</script>

<style>
</style>