mp-ui-pc/src/views/index.vue

<template>
  <div ref="workbench" class="index-workbench">
    <div >
      <div class="brief-box-top">
        <div class="brief-title">
          <span class="icon wk wk-briefing" />
          <span class="text">数据驾驶舱(今日实时数据)</span>
        </div>
        <div class="brief">
          <el-row >
             <el-col :span="6">
               <div class="brief-item">
                 <div class="info">
                   <div class="m-title">
                    实时交易金额
                   </div>
                   <div
                     class="number">
                     ￥ {{ accDiv((daily.payAmt && daily.payAmt.today || 0), 100)}}
                   </div>
                  <div class="brief-item__others">
                    <div class="text">
                      昨日同期
                    </div>
                    <div class="rate text-one-line">
                      <span class="rate__num">
                         <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) > 0 ">
                             <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
                             <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
                              <span v-if="(daily.payAmt && daily.payAmt.today || 0) >0">
                                 {{ getRate((daily.payAmt && daily.payAmt.today || 0) , daily.payAmt.yesterday) }}
                              </span>
                              <span v-else>100</span>
                         </span>
                         <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) == 0">
                             <span v-if="(daily.payAmt && daily.payAmt.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
                              {{(daily.payAmt && daily.payAmt.today || 0) > 0 ? 100 : 0 }}
                         </span>
                         %
                       </span>
                    </div>
                  </div>
                 </div>
               </div>
             </el-col>
             <el-col :span="6">
               <div class="brief-item">
                 <div class="info">
                   <div class="m-title">
                    交易用户
                   </div>
                   <div
                     class="number">
                     {{daily.payUser && daily.payUser.today || 0}}
                   </div>
                  <div class="brief-item__others">
                    <div class="text">
                      昨日同期
                    </div>
                    <div class="rate text-one-line">
                      <span class="rate__num">
                        <span v-if="(daily.payUser && daily.payUser.yesterday || 0) > 0 ">
                             <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
                             <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
                             <span v-if="(daily.payUser && daily.payUser.today || 0) >0">
                                {{ getRate((daily.payUser && daily.payUser.today || 0) , daily.payUser.yesterday) }}
                             </span>
                             <span v-else>100</span>
                        </span>
                        <span v-if="(daily.payUser && daily.payUser.yesterday || 0) == 0">
                             <span v-if="(daily.payUser && daily.payUser.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
                             {{(daily.payUser && daily.payUser.today || 0) > 0 ? 100 : 0 }}
                        </span>
                        %
                      </span>
                    </div>
                  </div>
                 </div>
                </div>
             </el-col>
             <el-col :span="6">
               <div class="brief-item">
                  <div class="info">
                    <div class="m-title">
                     盲票销售张数
                    </div>
                    <div
                      class="number">
                      {{daily.ticketNum && daily.ticketNum.today || 0}}
                    </div>
                   <div class="brief-item__others">
                     <div class="text">
                       昨日同期
                     </div>
                     <div class="rate text-one-line">
                       <span class="rate__num">
                         <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) > 0 ">
                              <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
                              <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
                              <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) >0">
                                {{ getRate((daily.ticketNum && daily.ticketNum.today || 0) , daily.ticketNum.yesterday) }}
                              </span>
                              <span v-else>100</span>
                         </span>
                         <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) == 0">
                             <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
                              {{(daily.ticketNum && daily.ticketNum.today || 0) > 0 ? 100 : 0 }}
                         </span>
                         %
                       </span>
                     </div>
                   </div>
                  </div>
                </div>
             </el-col>
             <el-col :span="6">
               <div class="brief-item">
                 <div class="info">
                   <div class="m-title">
                    新增经销商
                   </div>
                   <div
                     class="number">
                     {{daily.newSite && daily.newSite.today || 0}}
                   </div>
                  <div class="brief-item__others">
                    <div class="text">
                      昨日同期
                    </div>
                    <div class="rate text-one-line">
                      <span class="rate__num">
                        <span v-if="(daily.newSite && daily.newSite.yesterday || 0) > 0 ">
                             <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
                             <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
                             <span v-if="(daily.newSite && daily.newSite.today || 0) >0">
                               {{ getRate((daily.newSite && daily.newSite.today || 0) , daily.newSite.yesterday) }}
                             </span>
                             <span v-else>100</span>
                        </span>
                        <span v-if="(daily.newSite && daily.newSite.yesterday || 0) == 0">
                             <span v-if="(daily.newSite && daily.newSite.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
                             {{(daily.newSite && daily.newSite.today || 0) > 0 ? 100 : 0 }}
                        </span>
                        %
                      </span>
                    </div>
                  </div>
                 </div>
                </div>
             </el-col>
          </el-row>
        </div>
        <!-- 交易金额 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">交易金额</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr1"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect1"
              >
              </el-date-picker>
            </span>
            <el-select
              v-model="queryParams1.level"
              placeholder="请选择统计粒度"
              style="width: 160px;height: 30px;line-height: 30px;float: right;"
              filterable
              @change="getPayAmtList()">
               <el-option value="day" label="日粒度">日粒度</el-option>
               <el-option value="week" label="周粒度">周粒度</el-option>
               <el-option value="month" label="月粒度">月粒度</el-option>
            </el-select>
          </div>
          <div class="brief">
             <div ref="echart1" style="width: 100%;height: 250px;"></div>
          </div>
        </div>
        <!-- 交易用户 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">交易用户</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr2"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect2"
              >
              </el-date-picker>
            </span>

            <el-select
              v-model="queryParams2.level"
              placeholder="请选择统计粒度"
              style="width: 160px;height: 30px;line-height: 30px;float: right;"
              filterable
              @change="getPayUserCntList()">
               <el-option value="day" label="日粒度">日粒度</el-option>
               <el-option value="week" label="周粒度">周粒度</el-option>
               <el-option value="month" label="月粒度">月粒度</el-option>
            </el-select>
          </div>
          <div class="brief">
             <div ref="echart2" style="width: 100%;height: 250px;"></div>
          </div>
        </div>
        <!-- 票组销售Top10 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">票组销售Top10</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr3"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect3"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="brief">
             <div ref="echart3" style="width: 100%;height: 250px;"></div>
          </div>
        </div>
        <!-- 经销商销售Top10 -->
        <div class="brief-box">
          <div class="brief-title">
            <span class="icon wk wk-briefing" />
            <span class="text">经销商交易额Top10</span>
            <span style="margin-left: 15px;">
              <el-date-picker
                v-model="timeArr4"
                style="line-height: 30px;width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
                @change="dateSelect4"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="brief">
             <div ref="echart4" style="width: 100%;height: 250px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDailyData,getPayAmtList, getPayUserCntList, getTicketBoxTop, getTicketSiteTop} from "@/api/admin/index";
import echarts from "echarts"
import moment from 'moment'
import { mapGetters } from 'vuex'
import { numberFormat, getTimeResult } from "@/utils/util";
import { accDiv, accMul } from '@/utils/util'
export default {
  data() {
    return {
      daily:{},
      chartObj1:null,
      chartObj2:null,
      chartObj3:null,
      chartObj4:null,
      axisOption1: null,
      axisOption2: null,
      axisOption3: null,
      axisOption4: null,
      queryParams1:{
        days:7,
        level:"day"
      },
      queryParams2:{
        days:7,
        level:"day"
      },
      queryParams3:{
        days:7
      },
      queryParams4:{
        days:7
      },
      pickerOptions: {
         shortcuts: [{
          text: '最近7天',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (7-1));
          picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近30天',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (30-1));
          picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近三个月',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (90-1));
          picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近六个月',
          onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * (180-1));
          picker.$emit('pick', [start, end]);
          }
        }]
      },
      timeArr1: [],
      timeArr2: [],
      timeArr3: [],
      timeArr4: []
    };
  },
  mounted: function () {
    this.initDefaultTime()
    this.initChart()
    // this.$nextTick(function () {

    // });
  },

  computed: {
    ...mapGetters(['userInfo']),
  },

  created() {
    this.getDailyData()
  },
  methods: {

    initDefaultTime(){
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * (7-1));
      this.timeArr1 = [start,end]
      this.timeArr2 = [start,end]
      this.timeArr3 = [start,end]
      this.timeArr4 = [start,end]
    },

    initChart(){
      // 初始化echarts实例
      this.chartObj1 = echarts.init(this.$refs.echart1);
      // 绘制图表
      this.axisOption1 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '交易金额',
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
                normal: {
                    color: '#F00', //改变折线点的颜色
                    lineStyle: {
                        color: '#508FDE' //改变折线颜色
                    }
                }
            }
          }
        ]
      }
      this.chartObj1.setOption(this.axisOption1, true)

      this.chartObj2 = echarts.init(this.$refs.echart2);
      // 绘制图表
      this.axisOption2 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: '交易用户',
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
                normal: {
                    color: '#F00', //改变折线点的颜色
                    lineStyle: {
                        color: '#508FDE' //改变折线颜色
                    }
                }
            }
          }
        ]
      }
      this.chartObj2.setOption(this.axisOption2, true)

      this.chartObj3 = echarts.init(this.$refs.echart3);
      // 绘制图表
      this.axisOption3 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          data: [],
          axisLabel: {
              interval: 0,
              rotate: 0,
              formatter:function(value){
                  if(value.length > 6){
                    return value.substring(0,4) +"..."
                  }else{
                    return value
                  }
              }
          },
        },
        yAxis: {},
        series: [
          {
            name: '销售金额',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
    　　　　　　　　//这里是重点
                    color: function(params) {

                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = ['#409EFF','#67C23A', '#E6A23C', '#F56C6C', '#909399','#bae7ff', '#b7eb8f'];
                        if (params.dataIndex >= colorList.length) {
                            let index = params.dataIndex / colorList.length;
                            return colorList[index]
                        }
                        return colorList[params.dataIndex]
                    }
                }
            }
          }
        ]
      }
      this.chartObj3.setOption(this.axisOption3, true)


      this.chartObj4 = echarts.init(this.$refs.echart4);
      // 绘制图表
      this.axisOption4 = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          data: [],
          axisLabel: {
              interval: 0,
              rotate: 0,
              formatter:function(value){
                  if(value.length > 6){
                    return value.substring(0,4) +"..."
                  }else{
                    return value
                  }
              }
          },
        },
        yAxis: {},
        series: [
          {
            name: '销售金额',
            type: 'bar',
            data: [],
            itemStyle: {
                normal: {
    　　　　　　　　//这里是重点
                    color: function(params) {
                      //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = ['#bae7ff', '#b7eb8f', '#409EFF','#67C23A', '#E6A23C', '#F56C6C', '#909399'];
                        if (params.dataIndex >= colorList.length) {
                            let index = params.dataIndex / colorList.length;
                            return colorList[index]
                        }
                        return colorList[params.dataIndex]
                    }
                }
            }
          }
        ]
      }
      this.chartObj4.setOption(this.axisOption4, true)

      this.getPayAmtList()
      this.getPayUserCntList()
      this.getTicketBoxTop()
      this.getTicketSiteTop()
    },

    getRate(today, yesterday){
      if(today > yesterday){
         return (((today - yesterday) / yesterday )*100).toFixed(0)
      }else{
         return (((yesterday - today) / yesterday )*100).toFixed(0)
      }
    },

    // 统计今日实时交易金额、交易用户、盲票销售张数、新增经销商数量
    getDailyData() {
      getDailyData({}).then(res => {
          // console.log("getDailyData == "+JSON.stringify(res));
          this.daily = res.data
      }).catch(() => {
        this.loading = false
      })
    },

    accDiv(data){
      return accDiv(data, 100)
    },

    // 统计交易金额（带粒度）
    getPayAmtList() {
      getPayAmtList(this.queryParams1).then(res => {
          // console.log("getPayAmtList == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(accDiv(element.y, 100))
          }
          this.axisOption1.xAxis.data = xAxisData
          this.axisOption1.series[0].data = yAxisData
          this.chartObj1.setOption(this.axisOption1, true)
      }).catch(() => {
        this.loading = false
      })
    },

    //统计交易用户数（带粒度）
    getPayUserCntList() {
      getPayUserCntList(this.queryParams2).then(res => {
          // console.log("getPayUserCntList == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(element.y)
          }
          this.axisOption2.xAxis.data = xAxisData
          this.axisOption2.series[0].data = yAxisData
          this.chartObj2.setOption(this.axisOption2, true)
      }).catch(() => {
        this.loading = false
      })
    },

    // 统计票组销售TOP10
    getTicketBoxTop() {
      getTicketBoxTop(this.queryParams3).then(res => {
          // console.log("getTicketBoxTop == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(accDiv(element.y, 100))
          }
          this.axisOption3.xAxis.data = xAxisData
          this.axisOption3.series[0].data = yAxisData
          this.chartObj3.setOption(this.axisOption3, true)
      }).catch(() => {
        this.loading = false
      })
    },

    // 统计经销商交易额TOP10
    getTicketSiteTop() {
      getTicketSiteTop(this.queryParams4).then(res => {
          // console.log("getTicketSiteTop == "+JSON.stringify(res));
          let list = res.data || []
          const xAxisData = []
          const yAxisData = []
          for (let index = 0; index < list.length; index++) {
            const element = list[index]
            xAxisData.push(element.x)
            yAxisData.push(accDiv(element.y, 100))
          }
          this.axisOption4.xAxis.data = xAxisData
          this.axisOption4.series[0].data = yAxisData
          this.chartObj4.setOption(this.axisOption4, true)
      }).catch(() => {
        this.loading = false
      })
    },

    // 选择时间
    dateSelect1(e) {
      if (e) {
        this.queryParams1.startTime = e[0];
        this.queryParams1.endTime = e[1];
        this.queryParams1.days = 0;
        this.getPayAmtList();
      } else {
        this.queryParams1.startTime = "";
        this.queryParams1.endTime = "";
        this.queryParams1.days = 7;
        this.getPayAmtList();
      }
    },

    // 选择时间
    dateSelect2(e) {
      if (e) {
        this.queryParams2.startTime = e[0];
        this.queryParams2.endTime = e[1];
        this.queryParams2.days = 0;
        this.getPayUserCntList();
      } else {
        this.queryParams2.startTime = "";
        this.queryParams2.endTime = "";
        this.queryParams2.days = 7;
        this.getPayUserCntList();
      }
    },

    // 选择时间
    dateSelect3(e) {
      if (e) {
        this.queryParams3.startTime = e[0];
        this.queryParams3.endTime = e[1];
        this.queryParams3.days = 0;
        this.getTicketBoxTop();
      } else {
        this.queryParams3.startTime = "";
        this.queryParams3.endTime = "";
        this.queryParams3.days = 7;
        this.getTicketBoxTop();
      }
    },

    // 选择时间
    dateSelect4(e) {
      if (e) {
        this.queryParams4.startTime = e[0];
        this.queryParams4.endTime = e[1];
        this.queryParams4.days = 0;
        this.getTicketSiteTop();
      } else {
        this.queryParams4.startTime = "";
        this.queryParams4.endTime = "";
        this.queryParams4.days = 7;
        this.getTicketSiteTop();
      }
    },

  },
};
</script>
<style lang="scss" scoped>

</style>

<style rel="stylesheet/scss" scoped lang="scss">
  .index-workbench {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    padding: 15px 20px 20px;
    position: relative;
    background-color: #f0f2f5;

    &__body {
      height: 100%;
      overflow: auto;
      padding-top: 55px;
    }


    .brief-box-top {
      width: 100%;
      border-radius: 3px;
      margin-top: 10px;
    }

    .brief-box {
      width: 100%;
      background-color: white;
      border-radius: 3px;
    }

    .brief-title {
      background-color: white;
      padding: 16px 24px;
      border-bottom: 1px solid rgba(0,0,0,.06);
      border-radius: 3px 3px 0 0;
      .icon {
        color: #50CF9E;
        font-size: 18px;
      }
      .text {
        color: #333;
        font-size: 16px;
        margin-left: 5px;
      }
    }

    .brief {
      width: 100%;
      padding: 20px 10px;
      background-color: #fff;
      // display: flex;
      align-items: center;
      //justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 24px;
      border-radius: 0 0 3px 3px;
      .brief-item {
        cursor: pointer;
        // width: calc(25% - 20px);
        // height: 125px;
        box-shadow: 0 0 16px 0 rgba(0,0,0,0.08);
        border-radius: 3px;
        padding: 15px 0px;
        margin: 10px;
        .icon-box {
          width: 36px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          border-radius: 50%;
          margin-right: 10px;
          margin-left: 15px;
          flex-shrink: 0;
          .icon {
            color: white;
            font-size: 19px;
          }
        }
        .info {
          // overflow: hidden;
          padding-left: 10px;
          .m-title {
            font-size: 13px;
            text-align: left;
            margin: 0px;
          }
          .number {
            font-size: 23px;
            font-weight: bold;
            line-height: 1;
            // margin-top: 8px;
            margin-right: 5px;
            padding-top:8px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .brief-item__others {
          // position: relative;
          margin-top: 15px;
          width: 100px;
          // text-align: center;
          padding: 0 3px;
          overflow: hidden;

          .text {
            font-size: 12px;
            // margin-left: -5px;
          }
          .rate {
            font-size: 14px;
            color: #000;
            margin-top: 8px;

            .rate__icon {
              font-size: 14px;
              font-weight: bold;
            }
            &.bottom {
              color: #2BBF24;
            }
            &.top {
              color: #F24B4B;
            }
          }
        }
        &:hover {
          box-shadow: 0 0 16px 0 rgba(0,0,0,0.2);
        }
      }
    }

    .section {
      margin-top: 18px;
      .left {
        width: calc(60.5% - 20px);
        margin-right: 20px;
        &-content {
          height: 400px;
        }
      }
      .right {
        width: 39.5%;
        &-content {
          height: 400px;
        }
      }

      .left-content + .left-content,
      .right-content + .right-content {
        margin-top: 18px;
      }
    }
  }
</style>