客户分析

src/api/reportManagement/customerAnalysis.js

@@ -0,0 +1,28 @@
+import request from '@/utils/request'
+
+// 饼状图查询
+export function corpAnalysis(query) {
+  return request({
+    url: '/warehouseBusiness/inStock/corpAnalysis',
+    method: 'get',
+    params: query
+  })
+}
+
+//列表查询
+export function inactiveCorpList(query) {
+  return request({
+    url: '/warehouseBusiness/inStock/inactiveCorpList',
+    method: 'get',
+    params: query
+  })
+}
+
+//导出
+export function corpAnalysisExport(query) {
+  return request({
+    url: '/warehouseBusiness/inStock/corpAnalysisExport',
+    method: 'get',
+    params: query
+  })
+}

src/views/reportManagement/customerAnalysis/index.vue

@@ -0,0 +1,162 @@
+<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>