yuezhilian-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="amount">
            <div class="item item1">
              <img :src="staticImg + 'index-01.png'" alt="" />
              <div class="num">
                <span>{{
                  sumData.yesterdayEarnings
                    ? sumData.yesterdayEarnings.toFixed(2)
                    : "0.00"
                }}</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>
          <div class="amount amount2">
            <div class="amount-left">
              <div class="item">
                <img :src="staticImg + 'index-01.png'" alt="" />
                <div class="num">
                  <span>{{ sumData2.totalIntegral }}</span>
                  全网积分总量池
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-02.png'" alt="" />
                <div class="num">
                  <span>{{ sumData2.releasedIntegral }}</span>
                  全网已释放积分数
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-03.png'" alt="" />
                <div class="num">
                  <span>{{ sumData2.freezeIntegral }}</span>
                  全网冻结中积分数
                </div>
              </div>
            </div>
            <!-- <div class="amount-right">
              <div class="item">
                <img :src="staticImg + 'index-01.png'" alt="" />
                <div class="num">
                  <span>{{ sumData2.totalGold }}</span>
                  绿通总量池
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-02.png'" alt="" />
                <div class="num">
                  <span>{{ sumData2.releasedGold }}</span>
                  绿通释放池
                </div>
              </div>
              <div class="item">
                <img :src="staticImg + 'index-03.png'" alt="" />
                <div class="num">
                  <span>{{ sumData2.remainGold }}</span>
                  绿通剩余释放池
                </div>
              </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: {},
      option: {
        // echarts配置
        title: {
          text: '近30日每日平台订单收入',
          textStyle: {
            fontSize: 18,
            fontWeight: '600'
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: '#FF8703',
          fontSize: 14,
          // formatter: (params) => {
          //   console.log(params.data);
          //   return `{b0}<span style="padding: 6px 8px;display: flex;align-items:center">当日订单收入 <span style="font-size: 22px;margin-left: 3px">${params.data}</span></span>`;
          // }
          formatter: `<span style="padding: 6px 8px;display: flex;align-items:center">{b0}<br/>当日订单收入 {c0}<span style="font-size: 22px;margin-left: 3px"></span></span>`
        },
        grid: {
          left: 80,
          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.getDataSum2();
    this.getPayDaySum().then(() => {
      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.getDataSum, {}).then(
        (res) => {
          this.loading--;
          this.sumData = res;
        },
        () => {
          this.loading--;
        }
      );
    },
    getDataSum2() {
      this.loading++;
      this.httpGet(this.$root.getDataSum2, {}).then(
        (res) => {
          this.loading--;
          this.sumData2 = res;
        },
        () => {
          this.loading--;
        }
      );
    },
    getPayDaySum() {
      this.loading++;
      return this.httpGet(this.$root.getPayDaySum, {
        page: 1,
        size: 30
      }).then(
        (res) => {
          this.loading--;
          this.option.xAxis.data = res.list.map((item) => {
            return item.day;
          })
          this.option.series[0].data = res.list.map((item) => {
            return item.amount;
          })
        },
        () => {
          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 {
  width: 100%;
  height: 260px;
  flex-x(flex-start);

  .amount {
    width: 530px;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    flex-x();
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 36px;

    .item {
      width: 50%;
      flex-x(flex-start);

      img {
        width: 36px;
        height: auto;
      }

      .num {
        flex-y(center, flex-start);
        word(14px, #999);
        margin-left: 15px;

        span {
          word(28px, #333);
          font-weight: bold;
          margin-bottom: 8px;
        }
      }
    }

    .item1 {
      width: 100%;

      .num {
        span {
          font-size: 36px;
        }
      }
    }
  }

  .amount2 {
    margin-left: 16px;
    padding: 0;
    background: transparent;
    flex: 1;
    flex-x();
    .amount-left, .amount-right{
      flex: 1;
      height: 100%;
      background: #fff;
      border-radius: 10px;
      flex-y(center, flex-start);
      .item{
        padding: 0 50px;
        flex: 1;
      }
    }
    .amount-left{
      margin-right: 15px;
    }
  }
}

// }
.right {
  width: 600px;
  background: #fff;
  height: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px 30px;
  word(18px, #333);
  overflow: hidden;
  font-weight: 550;
  flex-shrink: 1;

  .user-info {
    word(14px, #333);
    flex-x(flex-start);

    img {
      height: 28px;
      height: 28px;
      margin-right: 12px;
      border-radius: 14px;
    }
  }
}

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

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