tire-platform-ui/src/views/wel/home/noctite/components/sales-reached.vue

<template>
  <div>
    <div class="home-container" v-if="sysType != 2">
      <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 class="content" v-loading="loading">
          <div style="display:flex">
            <div id="ringData" ref="ringData" style="width:20vw;height:33vh" />
            <div>
              <div class="content_item">
                <div class="content_item_num">{{ data.grossAmount || 0 }}</div>
                <div class="content_item_text">已审核数量</div>
              </div>
              <div class="content_item">
                <div class="content_item_num">{{ data.reachAmount || 0 }}</div>
                <div class="content_item_text">未审核数量</div>
              </div>
              <div class="content_item">
                <div class="divider" />
              </div>
              <div class="content_item">
                <div class="content_item_num">{{ data.notReachAmount || 0}}</div>
                <div class="content_item_text">合计</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
<!--    <domSales v-if="sysType == 2"/>-->
  </div>
</template>

<script>
import { monthSales } from "@/api/wel";
// import domSales from "/home/domesticTrade/domSales";
export default {
  name: "basicContainer",
  props: {
    sysType: Number
  },
  components: {
    // domSales
  },
  data() {
    return {
      loading: false,
      tradeType: null,
      data: {}
    };
  },
  created() {
    this.getSysType();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getmonthSales();
    },
    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";
      }
    },
    getmonthSales() {
      this.loading = true;
      monthSales({ tradeType: this.tradeType, billType: "BJ" })
        .then(res => {
          this.data = res.data.data;
        })
        .finally(() => {
          this.loading = false;
          this.ringData();
        });
    },
    refresh() {
      this.init();
    },
    ringData() {
      let ringData = this.$echarts.init(document.getElementById("ringData"));
      ringData.setOption({
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "3%",
          left: "center"
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "43%",
            style: {
              text: this.data.yieldRate + "%",
              textAlign: "center",
              fill: "#000",
              fontSize: 24
            }
          },
          {
            type: "text",
            left: "center",
            top: "53%",
            style: {
              text: "报价达成率",
              textAlign: "center",
              fill: "#999999",
              fontSize: 16
            }
          }
        ],
        color: ["#F6695E", "#E3E3E3"],
        series: [
          {
            name: "当月报价",
            type: "pie",
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            data: [
              { value: Number(this.data.grossAmount), name: "已审核数量" },
              { value: Number(this.data.reachAmount), name: "未审核数量" }
            ]
          }
        ]
      });
    }
  }
};
</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;
  }
}
.content {
  display: flex;
  &_item {
    margin-top: 20px;
    .divider {
      display: block;
      height: 0px;
      width: 12vw;
      border-top: 1px dashed #dcdfe6;
    }
    &_num {
      font-size: 18px;
      font-weight: 600;
    }
    &_text {
      color: #909399;
    }
  }
}
</style>