huayuanxi-admin/src/view/Index.vue

<template>
  <div class="main-container" v-loading="isLoading">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <div class="top">
          <div class="left">
            <div class="left-top">
              <div class="item">
                <img :src="staticImg + 'index-01.png'" alt="" />
                <div class="num">
                  <span>{{ sumData.yesterdayEarnings }}</span>
                  昨日收入
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-02.png'" alt="" />
                <div class="num">
                  <span>{{ sumData.yesterdayOrdersNum }}</span>
                  昨日新增订单
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-03.png'" alt="" />
                <div class="num">
                  <span>{{ sumData.waitDeliveryOrdersNum }}</span>
                  待发货订单数
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-04.png'" alt="" />
                <div class="num">
                  <span>{{ sumData.integral }}</span>
                  商城已释放积分
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-05.png'" alt="" />
                <div class="num">
                  <span>{{ sumData.freezeIntegral }}</span>
                  冻结中积分总量
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-06.png'" alt="" />
                <div class="num">
                  <span>{{ sumData.green }}</span>
                  全网绿色积分总量池
                </div>
              </div>
            </div>
            <div class="left-bottom">
              <div class="item" style="color: #F75D59;">
                商品主推区利润
                <span>{{ sumData.part1 }}</span>
              </div>
              <div class="item" style="color: #1CB9FA;">
                优选区利润
                <span>{{ sumData.part2 }}</span>
              </div>
              <div class="item" style="color: #49AE4F;">
                福利区利润
                <span>{{ sumData.part3 }}</span>
              </div>
              <div class="item" style="margin-right: 0;color: #2587FB;">
                直播区利润
                <span>{{ sumData.part5 }}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="title">
              公司总营业额/元
              <span>{{ sumData.turnover }}</span>
            </div>
            <div class="list">
              <div class="item" v-for="item in monthData" :key="item.id">
                <span>{{ item.day }}</span>
                {{ item.amount }}
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="echart" id="echart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../components/common/header';
import { staticImg } from '@/config'; // oss 图片地址
export default {
  components: {
    Header
  },
  name: 'Index',
  data() {
    return {
      isLoading: 0,
      title: {
        // 页面标题
        firstTitile: '首页'
      },
      staticImg: staticImg,
      sumData: {},
      sumData2: {},
      monthData: {},
      option: {
        // echarts配置
        title: {
          text: '商城微信收入动态',
          textStyle: {
            fontSize: 18,
            fontWeight: '600'
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: '#FF8703',
          fontSize: 14,
          formatter: (params) => {
            console.log(params.data);
            return `<span style="padding: 6px 8px;display: flex;align-items:center">当日微信收入 <span style="font-size: 22px;margin-left: 3px">${params.data}</span></span>`;
          }
        },
        grid: {
          left: 60,
          right: 35,
          bottom: 30
        },
        xAxis: {
          type: 'category',
          data: [],
          // boundaryGap: false, // 坐标轴两边留白
          axisLine: {
            lineStyle: {
              color: '#916096',
              width: 3
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.06)'
            },
            interval: (index, value) => {
              return index !== 0;
            }
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            fontSize: 15,
            color: '#333333',
            margin: 15 // 刻度标签与轴线之间的距离
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.06)'
            }
          },
          axisLabel: {
            color: '#B494C5',
            fontWeight: 600,
            fontSize: 14,
            // 坐标轴刻度标签的相关设置
            margin: 15 // 刻度标签与轴线之间的距离
          }
        },
        series: [
          {
            data: [],
            type: 'line',
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: '#704C99',
                lineStyle: {
                  color: '#B494C5'
                }
              }
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.getDataSum();
    this.getFundPayDaySum();
    this.getFundPayMonthSum();
    // this.getDataSum2();
    this.$nextTick(() => {
      this.initEcharts();
    });
  },
  methods: {
    initEcharts() {
      this.myChart = this.$echarts.init(document.getElementById('echart'));
      this.myChart.setOption(this.option);
    },
    getDataSum() {
      this.loading++;
      this.httpGet(this.$root.getFundTotalSum, {}).then(
        (res) => {
          this.loading--;
          this.sumData = res;
        },
        () => {
          this.loading--;
        }
      );
    },
    getFundPayDaySum(){
      this.loading++;
      this.httpGet(this.$root.getFundPayDaySum, {
        page: 1,
        size: 9999
      }).then(
        (res) => {
          this.loading--;
          this.option.series[0].data = res.list.map(item => {
            return item.amount
          });
          this.option.xAxis.data = res.list.map(item => {
            return item.day
          });
          this.myChart.setOption(this.option);
        },
        () => {
          this.loading--;
        }
      );
    },
    getFundPayMonthSum() {
      this.loading++;
      this.httpGet(this.$root.getFundPayMonthSum, {
        page: 1,
        size: 9999
      }).then(
        (res) => {
          this.loading--;
          this.monthData = res.list;
        },
        () => {
          this.loading--;
        }
      );
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';
@import '~assets/public.styl';

.container {
  padding: 0 !important;
}

.content {
  background: #F6F6F6 !important;
  padding: 24px !important;
  flex-y();
}

.top {
  height: 500px;
  width: 100%;
  flex-x(flex-start, flex-start);

  .left {
    flex:1;
    height: 500px;
    // background: #fff;
    flex-y(flex-start, flex-start);
    box-sizing: border-box;

    .left-top{
      width: 100%;
      background: #fff;
      border-radius: 10px;
      flex-x(flex-start, center);
      flex-wrap: wrap;
      height: 330px;
      padding: 0 36px;
      box-sizing: border-box;
      .item{
        height: 70px;
        width: 320px;
        flex-x(flex-start);
        img{
          width: 60px;
          height: 60px;
          margin-right: 12px;
        }
        .num{
          flex-y();
          word(16px, #999);
          span{
            word(30px, #333);
            margin-bottom: 12px;
          }
        }
      }
    }
    .left-bottom{
      width: 100%;
      flex-x(flex-start);
      flex: 1;
      margin-top: 10px;
      .item{
        background: #fff;
        height: 100%;
        border-radius: 10px;
        flex: 1;
        flex-y(flex-start, flex-start);
        margin-right: 10px;
        font-size: 20px;
        padding-left: 30px;
        padding-top: 20px;
        box-sizing: border-box;
        span{
          word(36px, #333);
          margin-top: 24px;
        }
      }
    }
  }
}

.right{
  width: 450px;
  height: 500px;
  background: #fff;
  margin-left: 10px;
  border-radius: 10px;
  padding: 0 30px;
  box-sizing: border-box;
  flex-y(flex-start);
  .title{
    height: 110px;
    width: 100%;
    word(20px, #FF8703);
    flex-y(center, flex-start);
    border-bottom: 1px solid #E8E8E8;
    span{
      word(36px, #333);
      margin-top: 10px;
    }
  }
  .list{
    padding: 12px 0;
    width: 100%;
    flex: 1;
    overflow: auto;
    .item{
      height: 46px;
      flex-x();
      color: #666;
      padding-right: 24px;
      span{
        color: #999;
      }
    }
  }
}

.bottom {
  flex: 1;
  width: 100%;
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-sizing: border-box;
  flex-shrink: 0;

  .echart {
    width: 100%;
    height: 100%;
  }
}
</style>