报表开发中

src/api/report.js

@@ -0,0 +1,17 @@
+import { request } from '@/utils/request.js';
+
+//客户类型分布
+export const customTypeAnalysis = (params) =>
+  request({
+    url: '/api/admin/tb/crm/analyse/custom/type',
+    method: 'post',
+    params,
+  });
+
+//月度派单分布及对比接口
+export const monthDispatchAnalysis = (params) =>
+  request({
+    url: '/api/admin/tb/crm/analyse/monthly',
+    method: 'post',
+    params,
+  });

src/views/report/dispatch-analysis/index.vue

@@ -8,7 +8,7 @@
       <div class="scroll-content">
         <div class="row1 flex">
           <div class="col1">
-            <div class="card chart1-box">
+            <div class="card chart1-box" v-loading="loading1">
               <div class="title">客户类型</div>
               <div class="chart-wrap"
                 ><my-chart :options="options1"></my-chart
@@ -151,24 +151,48 @@
 </template>
 
 <script setup name="DispatchAnalysis">
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import ChinaPointChart from '@/components/common/china-point-chart/index.vue';
 import TableLoop from '@/components/common/table-loop/index.vue';
+import { CUSTOMER_TYPE } from '@/config/constants';
+import { useRequest } from 'vue-request';
 import {
   createBarOption,
   createRingPieOption,
   createCakePieOption,
 } from '@/utils/chart';
+import { customTypeAnalysis, monthDispatchAnalysis } from '@/api/report';
 const curTimeRange = ref([]);
-
-const options1 = createRingPieOption({
-  data: [
-    { name: '教务处', value: 230 },
-    { name: '研究生', value: 120 },
-  ],
-  title: '总数',
-  center: ['30%', '50%'],
-  seriesName: '客户类型',
+const {
+  data: result1,
+  loading: loading1,
+  run: run1,
+} = useRequest(customTypeAnalysis);
+const {
+  data: result2,
+  loading: loading2,
+  run: run2,
+} = useRequest(monthDispatchAnalysis);
+const {
+  data: result3,
+  loading: loading3,
+  run: run3,
+} = useRequest(monthDispatchAnalysis);
+onMounted(() => {
+  run1({ year: '2023' });
+  run2({ year: '2023', type: 'CLOUD_MARK' });
+  run2({ year: '2023', type: 'OFFICE' });
+});
+const options1 = computed(() => {
+  return createRingPieOption({
+    data: Object.entries(result1.value || {}).map((item) => ({
+      name: CUSTOMER_TYPE[item[0]],
+      value: item[1],
+    })),
+    title: '总数',
+    center: ['30%', '50%'],
+    seriesName: '客户类型',
+  });
 });
 
 const options2 = createBarOption({