tire-platform-ui/src/views/wel/components/charge-today.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div class="title">
        <span>
          今日收款
        </span>
        <span>
          <i
              class="el-icon-refresh-right"
              style="cursor: pointer;font-size:20px"
              @click="refresh"
          ></i>
        </span>
      </div>
      <div v-loading="loading">
        <div class="content">
          <div class="content_item divider">
            <div>
              <div class="content_item_num">{{ data.received }}</div>
              <div class="content_item_text">已收金额</div>
            </div>
          </div>
          <div class="content_item divider">
            <div>
              <div class="content_item_num">{{ data.toBeReceived }}</div>
              <div class="content_item_text">待收金额</div>
            </div>
          </div>
          <div class="content_item">
            <div>
              <div class="content_item_num">{{data.unsettledDocuments}}</div>
              <div class="content_item_text">未结单据</div>
            </div>
          </div>
        </div>
        <div id="chargeData" ref="chargeData" style="width:45vw;height:30vh"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import {monthSalesTwo} from "@/api/wel";

export default {
  name: "basicContainer",
  data() {
    return {
      loading: false,
      data:{}
    };
  },
  mounted() {
    this.getmonthSales()
  },
  methods: {
    refresh() {
      this.getmonthSales()
    },
    getmonthSales() {
      this.loading = true;
      monthSalesTwo({billType: '收费'}).then(res => {
        this.data = res.data.data;
        this.loading = false;
      })
    },
    chargeData() {
      let chargeData = this.$echarts.init(
          document.getElementById("chargeData")
      );
      chargeData.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line"
          }
        },
        xAxis: {
          type: "category",
          data: []
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [0.1, 0.4, 0.6, 0.7, 0.8, 0.9, 1],
            type: "line",
            smooth: true
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;

  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }

  &__card {
    width: 100%;
    height: 100%;
  }

  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
}

.content {
  display: flex;
  background-color: #fafafa;
  justify-content: space-around;

  .divider {
    border-right: 1px dashed #dcdfe6;
  }

  &_item {
    margin: 20px 0px 20px 20px;
    height: 5vh;
    width: 33.3%;
    display: flex;
    align-items: center;

    &_num {
      font-size: 18px;
      font-weight: 600;
    }

    &_text {
      color: #909399;
    }
  }
}
</style>