fix: 对接首页接口

src/api/index.ts

@@ -22,6 +22,7 @@ import representativeApi from "@/api/modules/representative.ts";
 import contentApi from "@/api/modules/content.ts";
 import agreementApi  from "@/api/modules/agreement";
 import companySortApi from "@/api/modules/companySort.ts"
+import homeApi from "@/api/modules/home.ts";
 
 import financeApi from '@/api/modules/finance.ts'
 import invoiceRecordApi from '@/api/modules/invoiceRecord.ts'
@@ -150,5 +151,6 @@ const api = {
   saleApi: saleApi(axiosInstance),
   dispatchApi: dispatchApi(axiosInstance),
   companySortApi: companySortApi(axiosInstance),
+  homeApi: homeApi(axiosInstance)
 }
 export default api

src/api/modules/home.ts

@@ -0,0 +1,11 @@
+import { ApiInstance } from '../type'
+
+const homeApi = (axiosInstance: ApiInstance) => ({
+    dailyData: () => axiosInstance.get('/homepage/daily/data'), // 今日数据
+    orderTrend: () => axiosInstance.get('/homepage/order/trend'), // 出单趋势
+    businessFunnel: () => axiosInstance.get('/homepage/business/funnel'), // 业务漏斗
+    distribution: () => axiosInstance.get('/homepage/business-type/distribution'), // 业务类型分布
+    businessDistribution: (data: string) => axiosInstance.get(`/homepage/business/distribution?province=${data}`), // 业务员分布
+})
+
+export default homeApi

src/views/index.vue

@@ -7,6 +7,7 @@ meta:
 
 <script setup lang="ts">
 import * as echarts from 'echarts'
+import api from '@/api'
 
 import up from '@/assets/images/home/up.png'
 import down from '@/assets/images/home/down.png'
@@ -141,226 +142,14 @@ let functionList = ref([
 let ChinaMap = ref()
 const initChinaMap = () => {
     const myChart = echarts.init(ChinaMap.value)
-    let dataList = [
-        {
-            name: "南海诸岛",
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '北京市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '天津市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '上海市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '重庆市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '河北省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '河南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '云南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '辽宁省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '黑龙江省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '湖南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '安徽省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '山东省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '新疆维吾尔自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '江苏省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '浙江省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '江西省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '湖北省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '广西壮族自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '甘肃省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '山西省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '内蒙古自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '陕西省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '吉林省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '福建省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '贵州省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '广东省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '青海省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '西藏自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '四川省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '宁夏回族自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '海南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '台湾省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '香港特别行政区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '澳门特别行政区',
-            value: 3,
-            b: 2,
-            c: 1
-        }
-    ];
     let option = {
         tooltip: {
             formatter: function(e, t, n) {
                 // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                 return e.name + "<br />" +
                     "业务员数量：" + e.value + "<br />" +
-                    "个代业务员数量：" + e.data.b + "<br />" +
-                    "渠道业务员数量：" + e.data.c
+                    "个代业务员数量：" + e.data.personalAgentCount + "<br />" +
+                    "渠道业务员数量：" + e.data.channelSalesmanCount
             }
         },
         visualMap: {
@@ -371,23 +160,23 @@ const initChinaMap = () => {
             showLabel: !0,
             text: ["高", "低"],
             pieces: [{
-                gt: 24.97,
-                label: ">24.97",
+                gt: 150,
+                label: ">150",
                 color: "#0485FF"
             }, {
-                gte: 22.51,
-                lte: 24.96,
-                label: "22.51-24.97",
+                gte: 100,
+                lte: 150,
+                label: "100-150",
                 color: "#2E9AFF"
             }, {
-                gte: 19.02,
-                lt: 22.50,
-                label: "19.02-22.51",
+                gte: 50,
+                lt: 100,
+                label: "50-100",
                 color: "#81C2FF"
             }, {
                 gt: 0,
-                lt: 19.01,
-                label: "<19.02",
+                lt: 50,
+                label: "<50",
                 color: "#BCDFFF"
             }, {
                 value: 0,
@@ -429,13 +218,14 @@ const initChinaMap = () => {
             name: "",
             type: "map",
             geoIndex: 0,
-            data: dataList
+            data: chinaMapData.value
         }]
     };
     myChart.setOption(option)
     myChart.on('click', function (a) {
-        console.log(a)
-        initCityMap(a.name)
+        provinceStr.value = a.data.code
+        provinceName.value = a.name
+        initBusinessDistribution()
     })
     window.addEventListener('resize', () => {
         myChart.resize()
@@ -460,260 +250,16 @@ const initCityMap = (name) => {
 
 const initMap = (str) => {
     const myChart = echarts.init(CityMap.value)
-    let dataList = [
-        {
-            name: "南海诸岛",
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '北京市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '天津市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '上海市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '重庆市',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '河北省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '河南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '云南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '辽宁省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '黑龙江省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '湖南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '安徽省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '山东省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '新疆维吾尔自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '江苏省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '浙江省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '江西省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '湖北省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '广西壮族自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '甘肃省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '山西省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '内蒙古自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '陕西省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '吉林省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '福建省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '贵州省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '广东省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '青海省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '西藏自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '四川省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '宁夏回族自治区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '海南省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '台湾省',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '香港特别行政区',
-            value: 3,
-            b: 2,
-            c: 1
-        },
-        {
-            name: '澳门特别行政区',
-            value: 3,
-            b: 2,
-            c: 1
-        }
-    ];
     let option = {
         tooltip: {
             formatter: function(e, t, n) {
                 // return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                 return e.name + "<br />" +
                     "业务员数量：" + e.value + "<br />" +
-                    "个代业务员数量：" + e.data.b + "<br />" +
-                    "渠道业务员数量：" + e.data.c
+                    "个代业务员数量：" + e.data.personalAgentCount + "<br />" +
+                    "渠道业务员数量：" + e.data.channelSalesmanCount
             }
         },
-        // visualMap: {
-        //     min: 0,
-        //     max: 1000,
-        //     left: 26,
-        //     bottom: 40,
-        //     showLabel: !0,
-        //     text: ["高", "低"],
-        //     pieces: [{
-        //         gt: 24.97,
-        //         label: ">24.97",
-        //         color: "#0485FF"
-        //     }, {
-        //         gte: 22.51,
-        //         lte: 24.96,
-        //         label: "22.51-24.97",
-        //         color: "#2E9AFF"
-        //     }, {
-        //         gte: 19.02,
-        //         lt: 22.50,
-        //         label: "19.02-22.51",
-        //         color: "#81C2FF"
-        //     }, {
-        //         gt: 0,
-        //         lt: 19.01,
-        //         label: "<19.02",
-        //         color: "#BCDFFF"
-        //     }, {
-        //         value: 0,
-        //         color: "#DCEEFF"
-        //     }],
-        //     show: !0
-        // },
         geo: {
             map: str,
             roam: !1,
@@ -748,7 +294,7 @@ const initMap = (str) => {
             name: "",
             type: "map",
             geoIndex: 0,
-            data: dataList
+            data: subMapData.value
         }]
     };
     myChart.setOption(option)
@@ -788,7 +334,7 @@ const initTrend = () => {
             textStyle:{
                 color:'#333333'
             },
-            data:['一组','二组','三组']
+            data:['订单数','保费']
         },
         xAxis : [
             {
@@ -806,7 +352,7 @@ const initTrend = () => {
                 axisTick:{
                     show:false,
                 },
-                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
+                data : orderTrend.value.xAxis
             }
         ],
         yAxis : [
@@ -828,7 +374,7 @@ const initTrend = () => {
         ],
         series : [
             {
-                name:'一组',
+                name:'订单数',
                 type:'line',
                 stack: '总量',
                 symbol:'circle',
@@ -859,10 +405,10 @@ const initTrend = () => {
                         }
                     }
                 },
-                data:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
+                data:orderTrend.value.orderCount
             },
             {
-                name:'二组',
+                name:'保费',
                 type:'line',
                 stack: '总量',
                 symbol:'circle',
@@ -886,34 +432,7 @@ const initTrend = () => {
                         }
                     }
                 },
-                data:[220, 182, 191, 234, 290, 330, 310,201, 154, 190, 330, 410]
-            },
-            {
-                name:'三组',
-                type:'line',
-                stack: '总量',
-                symbol:'circle',
-                symbolSize: 8,
-                itemStyle: {
-                    normal: {
-                        color: '#2F9AFF',
-                        lineStyle: {
-                            color: "#2F9AFF",
-                            width:1
-                        },
-                        areaStyle: {
-                            //color: '#94C9EC'
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
-                                color: 'rgba(47,154,255,0.3)'
-                            }, {
-                                offset: 1,
-                                color: 'rgba(47,154,255,0.1)'
-                            }]),
-                        }
-                    }
-                },
-                data:[150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190]
+                data:orderTrend.value.premium
             }
         ]
     };
@@ -952,7 +471,7 @@ const initFunnel = () => {
                 color: "#000"
             },
             itemHeight: 2,
-            data:  ['标签1','标签2','标签3']
+            data:  ['报价订单','核保订单','承保订单']
         },
         grid: {
             top: 24,
@@ -978,11 +497,7 @@ const initFunnel = () => {
                     position: 'inside',
                     formatter: '{c}%'
                 },
-                data: [
-                    {value: 50, name: '标签1'},
-                    {value: 30, name: '标签2'},
-                    {value: 20, name: '标签3'},
-                ]
+                data: businessFunnelRadio.value
             },
             {
                 top:40,
@@ -998,7 +513,8 @@ const initFunnel = () => {
                     normal: {
                         color: '#333333',
                         position: 'right',
-                    }
+                        formatter: '{b}{c}'
+                    },
                 },
                 //右侧的百分比显示的地方
                 labelLine: {
@@ -1021,12 +537,7 @@ const initFunnel = () => {
                         opacity: 1
                     }
                 },
-                data: [
-                    {value: 50, name: '标签1'},
-                    {value: 30, name: '标签2'},
-                    {value: 20, name: '标签3'},
-
-                ]
+                data: businessFunnel.value
             }
         ]
     };
@@ -1044,15 +555,6 @@ const initPie = () => {
         legend: {
             top: 'bottom'
         },
-        toolbox: {
-            show: true,
-            feature: {
-                mark: { show: true },
-                dataView: { show: true, readOnly: false },
-                restore: { show: true },
-                saveAsImage: { show: true }
-            }
-        },
         series: [
             {
                 name: 'Nightingale Chart',
@@ -1061,11 +563,11 @@ const initPie = () => {
                 center: ['50%', '50%'],
                 roseType: 'area',
                 color: ["#3BD5DC", "#26A8FF", "#FFC61B"],
-                data: [
-                    { value: 40, name: '商业险' },
-                    { value: 38, name: '驾意险' },
-                    { value: 32, name: '交强险' },
-                ]
+                data: distributionData.value,
+                label: {
+                    show: true,
+                    formatter: '{b}{c}%'
+                }
             }
         ]
     };
@@ -1075,15 +577,175 @@ const initPie = () => {
     })
 }
 
+// 今日数据
+let dailyData = ref({
+    insuranceIssuersCount: '',
+    insuranceIssuersCountChange: '',
+    orderQuantity: '',
+    orderQuantityChange: '',
+    premium: '',
+    premiumChange: '',
+    quoteCount: '',
+    quoteCountChange: ''
+})
+const initDailyData = () => {
+    api.homeApi.dailyData().then((res: any) => {
+        if(res.code == 200) {
+            dailyData.value = res.data
+        } else {
+            dailyData.value = {
+                insuranceIssuersCount: '',
+                insuranceIssuersCountChange: '',
+                orderQuantity: '',
+                orderQuantityChange: '',
+                premium: '',
+                premiumChange: '',
+                quoteCount: '',
+                quoteCountChange: ''
+            }
+        }
+    })
+}
+
+
+let orderTrend = ref({
+    xAxis: [],
+    orderCount: [],
+    premium: []
+})
+const initOrderTrend = () => {
+    api.homeApi.orderTrend().then((res: any) => {
+        if(res.code == 200) {
+            res.data?.forEach(item => {
+                orderTrend.value.xAxis.push(`${item.month}月`)
+                orderTrend.value.orderCount.push(item.orderCount)
+                orderTrend.value.premium.push(item.premium)
+            })
+        } else {
+            orderTrend.value = {
+                xAxis: [],
+                orderCount: [],
+                premium: []
+            }
+        }
+        initTrend()
+    })
+}
+
+let businessFunnel = ref([])
+let businessFunnelRadio = ref([])
+const initBusinessFunnel = () => {
+    api.homeApi.businessFunnel().then((res: any) => {
+        if(res.code == 200) {
+            businessFunnel.value = [
+                {
+                    value: res.data.quoteCount,
+                    name: '报价订单'
+                },{
+                    value: res.data.underwriteCount,
+                    name: '核保订单'
+                },{
+                    value: res.data.orderCount,
+                    name: '承保订单'
+                },
+            ]
+            businessFunnelRadio.value = [
+                {
+                    value: res.data.quoteToUnderwriteRatio,
+                    name: '报价订单'
+                },{
+                    value: res.data.underwriteToOrderRatio,
+                    name: '核保订单'
+                },{
+                    value: res.data.quoteToOrderRatio,
+                    name: '承保订单'
+                },
+            ]
+        } else {
+            businessFunnel.value = []
+            businessFunnelRadio.value = []
+        }
+        initFunnel();
+    })
+}
+
+let distributionData = ref([])
+const initDistribution = () => {
+    api.homeApi.distribution().then((res: any) => {
+        if(res.code == 200) {
+            distributionData.value = [
+                {
+                    name: '交强险',
+                    value: res.data.ciProportion || 0
+                },{
+                    name: '商业险',
+                    value: res.data.biProportion || 0
+                },{
+                    name: '驾意险',
+                    value: res.data.niProportion || 0
+                },
+            ]
+        } else {
+            distributionData.value = []
+        }
+        initPie()
+    })
+}
+
+let chinaMapData = ref([])
+let subMapData = ref([])
+let provinceStr = ref('')
+let provinceName = ref('')
+const initBusinessDistribution = () => {
+    api.homeApi.businessDistribution(provinceStr.value).then((res: any) => {
+        if(!provinceStr.value) {
+            if(res.code == 200) {
+                chinaMapData.value = res.data?.map(item => {
+                    return {
+                        name: item.areaCname,
+                        code: item.areaCode,
+                        value: item.totalSalesmanCount,
+                        personalAgentCount: item.personalAgentCount,
+                        channelSalesmanCount: item.channelSalesmanCount
+                    }
+                })
+            } else {
+                chinaMapData.value = []
+            }
+            initChinaMap()
+        } else {
+            if(res.code == 200) {
+                subMapData.value = res.data?.map(item => {
+                    return {
+                        name: item.areaCname,
+                        code: item.areaCode,
+                        value: item.totalSalesmanCount,
+                        personalAgentCount: item.personalAgentCount,
+                        channelSalesmanCount: item.channelSalesmanCount
+                    }
+                })
+            } else {
+                subMapData.value = []
+            }
+            initCityMap(provinceName.value)
+        }
+    })
+}
+
 onMounted(() => {
     let userInfo = JSON.parse(localStorage.getItem('userInfo'))
     if(userInfo?.province) {
         initCityMap(userInfo?.province);
     }
-    initChinaMap();
-    initTrend();
-    initFunnel();
-    initPie();
+    initDailyData();
+    initOrderTrend();
+    initBusinessFunnel();
+    initDistribution();
+    initBusinessDistribution();
+    // initChinaMap();
+    // initTrend();
+    // initFunnel();
+    // initPie();
 })
 
 </script>
@@ -1135,49 +797,49 @@ onMounted(() => {
                     </div>
                     <div class="data">
                       <span class="number">
-                        108.26
+                        {{ dailyData.premium }}
                       </span>
                         <span class="line">
-                          较昨日<img :src="up" />25.4%
+                          较昨日<img :src="dailyData.premiumChange > 0?up: down" />{{ dailyData.premiumChange || 0 }}%
                       </span>
                     </div>
                 </div>
                 <div class="item">
                     <div class="name">
-                        今日保费(万元)
+                        今日承保订单数(笔)
                     </div>
                     <div class="data">
                       <span class="number">
-                        108.26
+                        {{ dailyData.orderQuantity }}
                       </span>
                         <span class="line">
-                          较昨日<img :src="down" />25.4%
+                          较昨日<img :src="dailyData.orderQuantityChange > 0?up: down" />{{ dailyData.orderQuantityChange || 0 }}%
                       </span>
                     </div>
                 </div>
                 <div class="item">
                     <div class="name">
-                        今日保费(万元)
+                        今日出单业务员(人)
                     </div>
                     <div class="data">
                       <span class="number">
-                        108.26
+                        {{ dailyData.insuranceIssuersCount }}
                       </span>
                         <span class="line">
-                          较昨日<img :src="up" />25.4%
+                          较昨日<img :src="dailyData.insuranceIssuersCountChange > 0?up: down" />{{ dailyData.insuranceIssuersCountChange || 0 }}%
                       </span>
                     </div>
                 </div>
                 <div class="item">
                     <div class="name">
-                        今日保费(万元)
+                        今日报价次数(次)
                     </div>
                     <div class="data">
                       <span class="number">
-                        108.26
+                        {{ dailyData.quoteCount }}
                       </span>
                         <span class="line">
-                          较昨日<img :src="up" />25.4%
+                          较昨日<img :src="dailyData.quoteCountChange > 0?up: down" />{{ dailyData.quoteCountChange || 0 }}%
                       </span>
                     </div>
                 </div>