tire-platform-ui/src/views/wel/components/sales-trend.vue

<template>
  <div class="home-container">
    <el-card class="home-container__card">
      <div v-if="sysType !== 5">
        <div class="title">
          <span>
            销售趋势
          </span>
          <span>
            <i
              class="el-icon-refresh-right"
              style="cursor: pointer;font-size:20px"
              @click="refresh"
            ></i>
          </span>
        </div>

        <div class="content" v-loading="loading">
          <div class="content-year">
            <el-date-picker
              v-model="annual"
              type="year"
              size="mini"
              placeholder="选择年"
              value-format="yyyy"
              style="margin-right:10px"
              @change="getsalesTrend"
            />
          </div>

          <div
            id="polylineData"
            ref="polylineData"
            style="width:55vw;height:33vh"
          />
        </div>
      </div>
      <div v-if="sysType === 5">
        <div class="title">
          <span>
            业绩趋势
          </span>
          <span>
            <i
              class="el-icon-refresh-right"
              style="cursor: pointer;font-size:20px"
              @click="refresh"
            ></i>
          </span>
        </div>
        <div class="content" v-loading="loading">
          <div
            id="polylineDatas"
            ref="polylineData"
            style="width:60vw;height:33vh"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getYearDate } from "@/util/date";
import { salesTrend } from "@/api/wel";
export default {
  name: "basicContainer",
  props: {
    sysType: Number
  },
  data() {
    return {
      loading: false,
      annual:"",
      tradeType: null,
      moneyList: []
    };
  },
  created() {
    this.annual=getYearDate().toString()
    this.getSysType();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getsalesTrend();
    },
    getSysType() {
      const sysType = localStorage.getItem("sysitemType");
      if (sysType == 6) {
        this.tradeType = "JXS";
      } else if (sysType == 5) {
        this.tradeType = "SW";
      } else if (sysType == 4) {
        this.tradeType = "CK";
      } else if (sysType == 3) {
        this.tradeType = "JK";
      } else if (sysType == 2) {
        this.tradeType = "GN";
      } else if (sysType == 1) {
        this.tradeType = "XX";
      } else if (sysType == 999) {
        this.tradeType = "ADMIN";
      }
    },
    getsalesTrend() {
      this.loading = true;
      this.moneyList = [];
      salesTrend({
        tradeType: this.tradeType,
        billType: "XS",
        annual: this.annual
      })
        .then(res => {
          res.data.data.forEach(e => {
            this.moneyList.push(Number(e.money));
          });
        })
        .finally(() => {
          this.loading = false;
          this.polylineData();
        });
    },
    refresh() {
      this.init();
    },
    polylineData() {
      let polylineData = this.$echarts.init(
        document.getElementById("polylineData")
      );
      polylineData.setOption({
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.moneyList,
            type: "line",
            smooth: true
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 0px;
  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;
  }
}
.content {
  display: flex;
  flex-direction: column;
  &-year {
    display: flex;
    justify-content: right;
  }
}
</style>