lemonBeans_ui/src/views/reportManagement/customerAnalysis/index.vue

<template>
  <div class="app-container">

    <div style="width: 60%;margin: 0 auto;display: flex;justify-content: space-around;color: #0685c0">
      <div><span>客户总数:</span><countTo :startVal='0' :endVal='all' :duration='2500'/></div>
      <div><span>活跃客户:</span><countTo :startVal='0' :endVal='active' :duration='2500'/></div>
    </div>
    <div style="width: 100%;margin-top: 30px">
      <div id="getData" style="width: 100%;height: 400px;"></div>
    </div>
    <div style="width: 100%;margin-top: 30px;position:relative;">
      <el-button
        type="warning"
        size="mini"
        style="position: absolute;right: 30px"
        @click="handleExport"
        :disabled="!type"
      >导出</el-button>
      <el-table
        ref="table"
        v-loading="loading"
        :data="dataList"
        stripe
        style="width: 50%;margin: 0 auto"
      >
        <el-table-column
          label="客户名称"
          prop="fName"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="最后收费日期"
          prop="fBsdate"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { corpAnalysis, inactiveCorpList, corpAnalysisExport } from "@/api/reportManagement/customerAnalysis";
import countTo from 'vue-count-to';

export default {
  name: "index",
  data() {
    return {
      loading:false,
      dataList: [],
      pieList: [],
      all: 0,
      active: 0,
      type: null,
    }
  },
  components: {
    countTo
  },
  created() {
  },
  activated() {
    corpAnalysis().then(res => {
      console.log(res)
      this.all = res.data.all;
      this.active = res.data.active;
      this.pieList = res.data.series[0].data;
      this.$nextTick(() => {
        this.getEcharts();
      })
    })
  },
  methods:{
    getEcharts() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("getData"));
      // 绘制图表
      myChart.setOption({
        legend: {
          top: 'bottom',
        },
        title: {
          text: '未活跃分析',
          textStyle:{
            color: "#9a9494",
            fontSize: 15,
            fontWeight: 'normal'
          },
          top: "37.5%",
          textAlign: "center",
          left: "49.9%"
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '未活跃分析',
            type: 'pie',
            radius: [50, 180],
            center: ['50%', '40%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            data: this.pieList
          }
        ]
      })
      myChart.on('click', this.handleClick)
    },
    handleClick(param) {
      this.loading = true;
      if (param.data.name == '1-3个月') {
        this.type = 1
      } else if (param.data.name == '3-6个月') {
        this.type = 2
      } else if (param.data.name == '6-12个月') {
        this.type = 3
      } else if (param.data.name == '12-24个月') {
        this.type = 4
      } else if (param.data.name == '24个月以上') {
        this.type = 5
      }
      inactiveCorpList({type: this.type}).then(res => {
        this.dataList = res.data
      }).finally(() => {
        this.loading = false;
      })
    },
    handleExport() {
      this.$confirm('是否确认导出', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        corpAnalysisExport({type: this.type}).then(res => {
          this.download(res.msg);
        })
      }).catch(() => {
      })
    },
  }
}
</script>

<style scoped>

</style>