完成统计页，待后端上线

src/models/Stat.ts

@@ -1,22 +1,13 @@
 export interface StatResponse {
-    /**
-     * 当yearly=true时，此处会返回12项，对应12个月；否则按日返回
-     */
-    departmentStats: Array<DepartmentStat[]>;
     invoiceKindsStats: InvoiceKindsStat[];
     invoiceLaunchCount: number;
     lastAdditionalTotalAmount: number;
     lastAllTotalAmount: number;
     reimbursementAdditionalTotalAmount: number;
     reimbursementAllTotalAmount: number;
-    reimbursementDepartureStats: ReimbursementDepartureStat[];
-    reimbursementDestinationStats: ReimbursementDestinationStat[];
     reimbursementLaunchCount: number;
-}
+    reimbursementPlaceStats: ReimbursementPlaceStat[];
-
+    temporalDepartmentStats: TemporalDepartmentStat[];
-export interface DepartmentStat {
-    departmentName: string;
-    reimbursementAmount: string;
 }
 
 export interface InvoiceKindsStat {
@@ -24,12 +15,21 @@ export interface InvoiceKindsStat {
     invoiceLaunchCount: number;
 }
 
-export interface ReimbursementDepartureStat {
+export interface ReimbursementPlaceStat {
-    placeName: string;
+    departureName: string;
+    destinationName: string;
     reimbursementLaunchCount: number;
 }
 
-export interface ReimbursementDestinationStat {
+export interface TemporalDepartmentStat {
-    placeName: string;
+    departmentStats: DepartmentStat[];
-    reimbursementLaunchCount: number;
+    /**
+     * 月份值或日期值
+     */
+    value: number;
+}
+
+export interface DepartmentStat {
+    departmentId: number;
+    reimbursementAmount: number;
 }

src/pages/stat/StatView.tsx

@@ -1,22 +1,45 @@
 import type {DatePickerProps, TimePickerProps} from 'antd';
-import {theme, DatePicker, Select, Space, Card, Statistic, Spin} from 'antd';
+import {theme, DatePicker, Select, Space, Card, Statistic, Spin, Radio} from 'antd';
 import {ArrowDownOutlined, ArrowUpOutlined, createFromIconfontCN} from '@ant-design/icons'
-import {useEffect, useRef, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import ReactECharts from 'echarts-for-react';
 import * as Echarts from 'echarts'
 import china from '../../assets/mapjson/china.json'
 import dayjs, {Dayjs} from "dayjs";
+import {DepartmentStat, ReimbursementPlaceStat, StatResponse} from "../../models/Stat";
+import {invoiceTypeNameMap} from "../../models/Invoice";
+import GeoCoordMap from "../../assets/GeoCoordMap";
+import axiosInstance from "../../utils/axiosInstance";
+import {Department, Staff} from "../../models/Staff";
+import {setStaff} from "../../models/store";
 // @ts-ignore
 Echarts.registerMap('china', china);
 
 const {Option} = Select;
 
-type PickerType = 'month' | 'year';
+type StatType = 'month' | 'year';
 
 const IconFont = createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/c/font_3830502_eyfw75skyu.js',
 });
 
+
+function TrendStatistic(props: { value: number, type: StatType }) {
+    const {
+        token: {colorSuccess, colorError},
+    } = theme.useToken();
+    return (
+        <Statistic
+            title={props.type === 'month' ? "较上个月" : '较去年'}
+            value={Math.abs(props.value)}
+            precision={2}
+            valueStyle={{color: props.value >= 0 ? colorSuccess : colorError}}
+            prefix={props.value >= 0 ? <ArrowUpOutlined/> : <ArrowDownOutlined/>}
+            suffix="%"
+        />
+    )
+}
+
 function HorizontalBarChart(props: { title: string, values: number[], labels: string[] }) {
     return <ReactECharts option={{
         color: [
@@ -73,20 +96,64 @@ function HorizontalBarChart(props: { title: string, values: number[], labels: st
     }} notMerge={true} lazyUpdate={true}/>
 }
 
+var mMapData =
+    [
+        {from: '青海省', to: '青海省', value: 90},
+        {from: '青海省', to: '安徽省', value: 80},
+        {from: '青海省', to: '甘肃省', value: 70},
+        {from: '青海省', to: '宁夏省', value: 60},
+        {from: '青海省', to: '山西省', value: 50},
+        {from: '青海省', to: '陕西省', value: 40},
+        {from: '青海省', to: '广东省', value: 30},
+        {from: '青海省', to: '重庆省', value: 20},
+        {from: '青海省', to: '西藏省', value: 10}
+    ];
+
+var convertLineData = function (data: { from: string, to: string, value: number }[]) {
+    var res = [];
+
+    for (var i = 0; i < data.length; i++) {
+        var dataItem = data[i];
+        // @ts-ignore
+        var fromCoord = GeoCoordMap[dataItem.from];
+        // @ts-ignore
+        var toCoord = GeoCoordMap[dataItem.to];
+
+        if (fromCoord && toCoord) {
+            res.push(
+                {
+                    fromName: dataItem.from,
+                    toName: dataItem.to,
+                    coords: [fromCoord, toCoord],
+                    value: dataItem.value,
+                });
+        }
+    }
+
+    return res;
+};
+
 function StatView() {
     const {
         token: {colorBgContainer, colorPrimary, colorSuccess},
     } = theme.useToken();
 
-    const [type, setType] = useState<PickerType>('month');
+    const [type, setType] = useState<StatType>('month');
     const [loading, setLoading] = useState(true)
+    const [reimbursementAmount, setReimbursementAmount] = useState(0)
+    const [reimbursementAmountTrend, setReimbursementAmountTrend] = useState(0)
+    const [reimbursementAdditionalAmount, setReimbursementAdditionalAmount] = useState(0)
+    const [reimbursementAdditionalAmountTrend, setReimbursementAdditionalAmountTrend] = useState(0)
     const [amounts, setAmounts] = useState([0, 0])
     const [invoiceKinds, setInvoiceKinds] = useState<any>([])
     const [departmentPieData, setDepartmentPieData] = useState<any>([])
+    const [mapData, setMapData] = useState<any>([])
     const [departureNames, setDepartureNames] = useState<any>([])
     const [departureValues, setDepartureValues] = useState<any>([])
     const [destinationNames, setDestinationNames] = useState<any>([])
     const [destinationValues, setDestinationValues] = useState<any>([])
+    const [dates, setDates] = useState<any>([])
+    const [departmentSeries, setDepartmentSeries] = useState<any>([])
 
     useEffect(() => {
         getStatData(dayjs())
@@ -95,24 +162,302 @@ function StatView() {
     const getStatData = (time: Dayjs | null) => {
         console.log(time)
         setLoading(true)
-        setTimeout(() => {
+
-            setAmounts([120, 43])
+        axiosInstance({
-            setInvoiceKinds([{value: 1048, name: '增值税发票'},
+            url: 'common/department',
-                {value: 735, name: '火车票'},
+            method: 'get'
-                {value: 580, name: '机票行程单'},
+        }).then(response => {
-                {value: 484, name: '通用机打发票'},
+            const departments: Department[] = response.data
-                {value: 300, name: '过路过桥费发票'}])
+            let departmentMap = new Map<number, string>()
-            setDepartmentPieData([{value: 1048, name: '钝角部'},
+            for (const department of departments)
-                {value: 735, name: '投影立体角部'},
+                departmentMap.set(department.departmentId, department.departmentName)
-                {value: 580, name: '财务部'},
+
-                {value: 484, name: '采购部'},
+            if (time === null)
-                {value: 300, name: '销售部'}])
+                time = dayjs()
-            setDepartureNames(['北京', '上海', '广州', '深圳', '成都'])
+            let dates: string[] = []
-            setDepartureValues([100, 80, 70, 60, 50])
+            if (type === 'month')
-            setDestinationNames(['北京', '上海', '广州', '深圳', '成都'])
+                for (let i = 1; i <= time.daysInMonth(); i++) {
-            setDestinationValues([100, 80, 70, 60, 50])
+                    dates.push(time.date(i).format('M月D日'))
-            setLoading(false)
+                }
-        }, 1000);
+            else
+                for (let i = 1; i <= 12; i++) {
+                    dates.push(i + '月')
+                }
+            setDates(dates)
+            setTimeout(() => {
+                let statResponse: StatResponse = {
+                    "temporalDepartmentStats": [
+                        {
+                            "value": 4,
+                            "departmentStats": [
+                                {
+                                    "departmentId": 1,
+                                    "reimbursementAmount": 79
+                                },
+                                {
+                                    "departmentId": 2,
+                                    "reimbursementAmount": 9
+                                },
+                                {
+                                    "departmentId": 3,
+                                    "reimbursementAmount": 29
+                                },
+                                {
+                                    "departmentId": 4,
+                                    "reimbursementAmount": 46
+                                },
+                                {
+                                    "departmentId": 5,
+                                    "reimbursementAmount": 66
+                                }
+                            ]
+                        },
+                        {
+                            "value": 3,
+                            "departmentStats": [
+                                {
+                                    "departmentId": 1,
+                                    "reimbursementAmount": 79
+                                },
+                                {
+                                    "departmentId": 2,
+                                    "reimbursementAmount": 9
+                                },
+                                {
+                                    "departmentId": 3,
+                                    "reimbursementAmount": 29
+                                },
+                                {
+                                    "departmentId": 4,
+                                    "reimbursementAmount": 46
+                                },
+                                {
+                                    "departmentId": 5,
+                                    "reimbursementAmount": 66
+                                }
+                            ]
+                        },
+                        {
+                            "value": 6,
+                            "departmentStats": [
+                                {
+                                    "departmentId": 1,
+                                    "reimbursementAmount": 79
+                                },
+                                {
+                                    "departmentId": 2,
+                                    "reimbursementAmount": 9
+                                },
+                                {
+                                    "departmentId": 3,
+                                    "reimbursementAmount": 29
+                                },
+                                {
+                                    "departmentId": 4,
+                                    "reimbursementAmount": 46
+                                },
+                                {
+                                    "departmentId": 5,
+                                    "reimbursementAmount": 66
+                                }
+                            ]
+                        },
+                        {
+                            "value": 13,
+                            "departmentStats": [
+                                {
+                                    "departmentId": 1,
+                                    "reimbursementAmount": 79
+                                },
+                                {
+                                    "departmentId": 2,
+                                    "reimbursementAmount": 9
+                                },
+                                {
+                                    "departmentId": 3,
+                                    "reimbursementAmount": 29
+                                },
+                                {
+                                    "departmentId": 4,
+                                    "reimbursementAmount": 46
+                                },
+                                {
+                                    "departmentId": 5,
+                                    "reimbursementAmount": 66
+                                }
+                            ]
+                        }
+                    ],
+                    "reimbursementAllTotalAmount": 79,
+                    "reimbursementAdditionalTotalAmount": 25,
+                    "lastAllTotalAmount": 7,
+                    "lastAdditionalTotalAmount": 19,
+                    "reimbursementLaunchCount": 86,
+                    "invoiceLaunchCount": 26,
+                    "invoiceKindsStats": [
+                        {
+                            "invoiceKind": 1,
+                            "invoiceLaunchCount": 39
+                        },
+                        {
+                            "invoiceKind": 2,
+                            "invoiceLaunchCount": 39
+                        },
+                        {
+                            "invoiceKind": 3,
+                            "invoiceLaunchCount": 39
+                        },
+                        {
+                            "invoiceKind": 5,
+                            "invoiceLaunchCount": 39
+                        },
+                        {
+                            "invoiceKind": 6,
+                            "invoiceLaunchCount": 39
+                        },
+                        {
+                            "invoiceKind": 7,
+                            "invoiceLaunchCount": 39
+                        },
+
+                    ],
+                    "reimbursementPlaceStats": [
+                        {
+                            "departureName": "青海",
+                            "reimbursementLaunchCount": 80,
+                            "destinationName": "安徽"
+                        },
+                        {
+                            "departureName": "青海",
+                            "reimbursementLaunchCount": 70,
+                            "destinationName": "甘肃"
+                        }
+                    ]
+                }
+                setReimbursementAmount(statResponse.reimbursementAllTotalAmount)
+                setReimbursementAmountTrend(
+                    (statResponse.reimbursementAllTotalAmount - statResponse.lastAllTotalAmount) / statResponse.lastAllTotalAmount)
+                setReimbursementAdditionalAmount(statResponse.reimbursementAdditionalTotalAmount)
+                setReimbursementAdditionalAmountTrend(
+                    (statResponse.reimbursementAdditionalTotalAmount - statResponse.lastAdditionalTotalAmount) / statResponse.lastAdditionalTotalAmount)
+
+                setAmounts([statResponse.invoiceLaunchCount, statResponse.reimbursementLaunchCount])
+                setInvoiceKinds(statResponse.invoiceKindsStats.map((item) => {
+                    return {value: item.invoiceLaunchCount, name: invoiceTypeNameMap.get(item.invoiceKind)}
+                }))
+
+
+                let departmentAmountMap = new Map<number, Map<number, number>>()
+                departmentMap.forEach(function (value, key, map) {
+                    departmentAmountMap.set(key, new Map<number, number>())
+                })
+
+                for (const temporalDepartmentStat of statResponse.temporalDepartmentStats) {
+                    for (const departmentStat of temporalDepartmentStat.departmentStats) {
+                        let valueMap = departmentAmountMap.get(departmentStat.departmentId)
+                        if (valueMap) {
+                            valueMap.set(temporalDepartmentStat.value, departmentStat.reimbursementAmount)
+                            departmentAmountMap.set(departmentStat.departmentId, valueMap)
+                        }
+                    }
+                }
+                let data: { value: number, name: string }[] = []
+                let series: any = []
+
+                departmentAmountMap.forEach(function (valueMap, key, map) {
+                    let departmentName = departmentMap.get(key)
+                    if (!departmentName) return
+                    let total = 0
+                    valueMap.forEach(function (value, key) {
+                        total += value
+                    })
+                    data.push({value: total, name: departmentName})
+
+                    let valueMapArray = Array.from(valueMap);
+                    valueMapArray.sort(function (a, b) {
+                        return a[0] - b[0]
+                    })
+
+                    series.push({
+                        name: departmentName,
+                        type: 'line',
+                        stack: 'Total',
+                        areaStyle: {},
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: valueMapArray.map(function ([key, value]) {
+                            return value
+                        })
+                    })
+                })
+                setDepartmentPieData(data)
+                setDepartmentSeries(series)
+
+
+                const geoCoordMap = Object.entries(GeoCoordMap)
+                const getCoords = (placeName: string) => {
+                    return geoCoordMap.find(([name,]) => name.includes(placeName))
+                }
+
+                let mapDataTemp: { fromName: string, toName: string, coords: any[], value: number }[] = []
+                let departures = new Map<string, number>()
+                let destinations = new Map<string, number>()
+                for (const item of statResponse.reimbursementPlaceStats) {
+                    let departureValue = departures.get(item.departureName)
+                    if (departureValue)
+                        departures.set(item.departureName, departureValue + item.reimbursementLaunchCount)
+                    else
+                        departures.set(item.departureName, item.reimbursementLaunchCount)
+
+                    let destinationValue = departures.get(item.destinationName)
+                    if (destinationValue)
+                        destinations.set(item.destinationName, destinationValue + item.reimbursementLaunchCount)
+                    else
+                        destinations.set(item.destinationName, item.reimbursementLaunchCount)
+
+                    const fromCoords = getCoords(item.departureName)
+                    const toCoords = getCoords(item.destinationName)
+
+                    if (fromCoords && toCoords) {
+                        mapDataTemp.push({
+                            "fromName": fromCoords[0],
+                            "toName": toCoords[0],
+                            "coords": [fromCoords[1], toCoords[1]],
+                            "value": item.reimbursementLaunchCount,
+                        })
+                    }
+                }
+                setMapData(mapDataTemp)
+
+                {
+                    let placeNames: string[] = []
+                    let reimbursementCounts: number[] = []
+                    departures.forEach(function (val, key, map) {
+                        placeNames.push(key)
+                        reimbursementCounts.push(val)
+                    })
+                    setDepartureNames(placeNames)
+                    setDepartureValues(reimbursementCounts)
+                }
+                {
+                    let placeNames: string[] = []
+                    let reimbursementCounts: number[] = []
+                    destinations.forEach(function (val, key, map) {
+                        placeNames.push(key)
+                        reimbursementCounts.push(val)
+                    })
+                    setDestinationNames(placeNames)
+                    setDestinationValues(reimbursementCounts)
+                }
+                setLoading(false)
+            }, 1000);
+
+        }).catch(function (error) {
+            console.log(error)
+        })
+
+
     }
 
     return (
@@ -138,53 +483,39 @@ function StatView() {
                 </Space>
             </div>
             {loading ?
-                <div style={{flex: 1,display: "flex",  alignItems: "center", justifyContent: "center"}}>
+                <div style={{flex: 1, display: "flex", alignItems: "center", justifyContent: "center"}}>
                     <Spin size="large"/>
                 </div> :
                 <div>
                     <div style={{
                         width: '100%',
-                        padding: '30px 30px 0px 30px',
+                        padding: '20px 20px 0px 20px',
                         display: "flex",
                         flexDirection: "row",
                         flexWrap: "wrap"
                     }}>
                         <div style={{flex: 1, flexBasis: 400, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
                             <Card style={{flex: 1, flexBasis: 200, margin: 10}}>
-                                <Statistic title="报销金额" value={1128.45} precision={2}
+                                <Statistic title="报销金额" value={reimbursementAmount} precision={2}
                                            prefix={<IconFont type={'icon-renminbi'}/>}/>
                             </Card>
                             <Card style={{flex: 1, flexBasis: 200, margin: 10}}>
-                                <Statistic
+                                <TrendStatistic type={type} value={reimbursementAmountTrend}/>
-                                    title={type === 'month' ? "较上个月" : '较去年'}
-                                    value={11.28}
-                                    precision={2}
-                                    valueStyle={{color: '#3f8600'}}
-                                    prefix={<ArrowUpOutlined/>}
-                                    suffix="%"
-                                />
                             </Card>
                         </div>
                         <div style={{flex: 1, flexBasis: 400, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
                             <Card style={{flex: 1, flexBasis: 200, margin: 10}}>
-                                <Statistic title="补贴金额" value={1128.45} precision={2}
+                                <Statistic title="补贴金额" value={reimbursementAdditionalAmount} precision={2}
                                            prefix={<IconFont type={'icon-renminbi'}/>}/>
                             </Card>
                             <Card style={{flex: 1, flexBasis: 200, margin: 10}}>
-                                <Statistic
+                                <TrendStatistic type={type} value={reimbursementAdditionalAmountTrend}/>
-                                    title={type === 'month' ? "较上个月" : '较去年'}
-                                    value={11.28}
-                                    precision={2}
-                                    valueStyle={{color: '#3f8600'}}
-                                    prefix={<ArrowUpOutlined/>}
-                                    suffix="%"
-                                />
                             </Card>
                         </div>
                     </div>
                     <div style={{
                         width: '100%',
-                        padding: '0 30px 0 30px',
+                        padding: '0 20px 0 20px',
                         display: "flex",
                         flexDirection: "row",
                         flexWrap: "wrap"
@@ -333,7 +664,7 @@ function StatView() {
 
                     <div style={{
                         width: '100%',
-                        padding: '0px 30px 0px 30px',
+                        padding: '0px 20px 0px 20px',
                         display: "flex",
                         flexDirection: "row",
                         flexWrap: "wrap"
@@ -342,23 +673,38 @@ function StatView() {
                             <Card style={{flex: 1, flexBasis: 600, margin: 10, minWidth: 0, minHeight: 0}}>
                                 <ReactECharts style={{height: 600}} option={{
                                     title: {
-                                        text: '差旅流向图',
+                                        text: '差旅去向',
                                         left: 'center',
                                     },
+                                    geo: {
+                                        map: 'china',
+                                        emphasis: {
+                                            disabled: true
+                                        },
+                                        select: {
+                                            disabled: true
+                                        },
+                                        itemStyle: {
+                                            areaColor: '#d4e2fd',
+                                            borderColor: '#8c8c8c'
+                                        }
+                                    },
                                     series: [
                                         {
-                                            type: 'map',
+                                            type: 'lines',
-                                            map: 'china',
+                                            zlevel: 2,
-                                            emphasis: {
+                                            lineStyle: {
-                                                disabled: true
+                                                normal: {
+                                                    color: '#',
+                                                    width: 3,
+                                                    opacity: 0.2,
+                                                    curveness: .3
+                                                }
                                             },
-                                            select: {
+                                            data: mapData
-                                                disabled: true
+                                        },
-                                            }
-                                        }
                                     ]
-                                }} notMerge={true}
+                                }} notMerge={true} lazyUpdate={true}/>
-                                              lazyUpdate={true}/>
                             </Card>
                         </div>
                         <div style={{flex: 1, flexBasis: 300, display: "flex", flexDirection: "row", flexWrap: "wrap"}}>
@@ -371,8 +717,20 @@ function StatView() {
                             </Card>
                         </div>
                     </div>
-                    <Card style={{margin: '10px 40px 40px 40px', minWidth: 0, minHeight: 0}}>
+                    <Card style={{margin: '10px 30px 30px 30px', minWidth: 0, minHeight: 0}}>
                         <ReactECharts option={{
+                            color: [
+                                '#6395f9',
+                                '#d4e2fd',
+                                '#73deb3',
+                                '#d4f5e8',
+                                '#657798',
+                                '#d0d6e0',
+                                '#7666f9',
+                                '#d5d0fd',
+                                '#f6c022',
+                                '#fcecbd',
+                            ],
                             title: {
                                 text: '各部门报销金额',
                                 left: 'center'
@@ -388,7 +746,6 @@ function StatView() {
                             },
                             legend: {
                                 type: 'scroll',
-                                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
                                 top: 40
                             },
                             grid: {
@@ -402,7 +759,7 @@ function StatView() {
                                 {
                                     type: 'category',
                                     boundaryGap: false,
-                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                                    data: dates
                                 }
                             ],
                             yAxis: [
@@ -410,65 +767,8 @@ function StatView() {
                                     type: 'value'
                                 }
                             ],
-                            series: [
+                            series: departmentSeries
-                                {
+                        }} notMerge={true} lazyUpdate={true}/>
-                                    name: 'Email',
-                                    type: 'line',
-                                    stack: 'Total',
-                                    areaStyle: {},
-                                    emphasis: {
-                                        focus: 'series'
-                                    },
-                                    data: [120, 132, 101, 134, 90, 230, 210]
-                                },
-                                {
-                                    name: 'Union Ads',
-                                    type: 'line',
-                                    stack: 'Total',
-                                    areaStyle: {},
-                                    emphasis: {
-                                        focus: 'series'
-                                    },
-                                    data: [220, 182, 191, 234, 290, 330, 310]
-                                },
-                                {
-                                    name: 'Video Ads',
-                                    type: 'line',
-                                    stack: 'Total',
-                                    areaStyle: {},
-                                    emphasis: {
-                                        focus: 'series'
-                                    },
-                                    data: [150, 232, 201, 154, 190, 330, 410]
-                                },
-                                {
-                                    name: 'Direct',
-                                    type: 'line',
-                                    stack: 'Total',
-                                    areaStyle: {},
-                                    emphasis: {
-                                        focus: 'series'
-                                    },
-                                    data: [320, 332, 301, 334, 390, 330, 320]
-                                },
-                                {
-                                    name: 'Search Engine',
-                                    type: 'line',
-                                    stack: 'Total',
-                                    label: {
-                                        show: true,
-                                        position: 'top'
-                                    },
-                                    areaStyle: {},
-                                    emphasis: {
-                                        focus: 'series'
-                                    },
-                                    data: [820, 932, 901, 934, 1290, 1330, 1320]
-                                }
-                            ]
-                        }}
-                                      notMerge={true}
-                                      lazyUpdate={true}/>
                     </Card>
                 </div>
             }