feat(): 总体欠费分析页

src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/echarts.config.js

@@ -0,0 +1,76 @@
+const colorList = ['#3AA9FF', '#F997DF']
+import utils from "@/config/utils"
+
+export default {
+    pieChartOption: {
+        title: {
+            show: true,
+            text: '',
+            bottom: 0,
+            x: 'center',
+            textStyle: {
+                color: '#fff'
+            },
+            textAlign: 'left'
+        },
+        color: colorList,
+        tooltip: {
+            trigger: 'item',
+            formatter: (params) => {
+                return `
+                    <div>
+                        ${params.marker}
+                        ${params.name}:
+                        &nbsp;&nbsp;
+                        ${utils.parseFormatNum(params?.value || 0)}
+                    </div>
+                `
+            }
+        },
+        legend: {
+            top: '5%',
+            left: 'center',
+            itemHeight: 6,
+            itemGap: 20,
+            textStyle: {
+                color: '#fff'
+            }
+        },
+        series: [
+            {
+                name: '',
+                type: 'pie',
+                center: ["50%", "52%"],
+                radius: ['60%', '70%'],
+                avoidLabelOverlap: true,
+                label: {
+                    normal: {
+                        show: false,
+                        position: 'center',
+                        formatter: '{title|{b}}\n\r\n\r{percent|{d}}%',
+                        textStyle: {
+                            color: '#fff'
+                        },
+                        rich: {
+                            title: {
+                                fontSize: 18
+                            },
+                            percent: {
+                                fontSize: 20,
+                                fontWeight: 700
+                            }
+                        }
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                ]
+            }
+        ]
+    },
+}

src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.jsx

@@ -1,30 +1,161 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
+import ajax from "@/services"
+import { Tabs } from 'antd'
+import ReactEcharts from "echarts-for-react";
+import EchartsConfig from './echarts.config'
+import utils from "@/config/utils"
 import './index.scss'
 
 const Overview = function(props) {
     const {
-        yisaData
+        formData
     } = props
 
+    const [yisaData, setYisaData] = useState({})
+    const [activeTab, setActiveTab] = useState('parkRank')
+    const [moneyPieChartOption, setMoneyPieChartOption] = useState({...EchartsConfig.pieChartOption})
+    const [itemPieChartOption, setItemPieChartOption] = useState({...EchartsConfig.pieChartOption})
+
+    const ajaxGetData = () => {
+        ajax.getIncomeOverviewData({...formData}).then(res => {
+            if (res.status == 20000) {
+                setYisaData({...res.data})
+            }
+        })
+    }
+
+    const initMoneyPieChart = (data, unit) => {
+        let total = 0
+        data.map((item) => {
+            total += item.value
+        })
+        setMoneyPieChartOption({
+            ...moneyPieChartOption,
+            title: {
+                ...moneyPieChartOption.title,
+                text: `总金额：${utils.parseFormatNum(total)}（${unit}）`
+            },
+            tooltip: {
+                ...moneyPieChartOption.tooltip,
+                formatter: (params) => {
+                    return `
+                        <div>
+                            ${params.marker}
+                            ${params.name}:
+                            &nbsp;&nbsp;
+                            ${utils.parseFormatNum(params?.value || 0)}
+                            ${unit}
+                        </div>
+                    `
+                }
+            },
+            series: [
+                {
+                    ...moneyPieChartOption.series[0],
+                    data: data
+                }
+            ]
+        })
+    }
+
+    const initItemPieChart = (data, unit) => {
+        let total = 0
+        data.map((item) => {
+            total += item.value
+        })
+        setItemPieChartOption({
+            ...itemPieChartOption,
+            title: {
+                ...itemPieChartOption.title,
+                text: `总订单数：${utils.parseFormatNum(total)}（${unit}）`
+            },
+            tooltip: {
+                ...itemPieChartOption.tooltip,
+                formatter: (params) => {
+                    return `
+                        <div>
+                            ${params.marker}
+                            ${params.name}:
+                            &nbsp;&nbsp;
+                            ${utils.parseFormatNum(params?.value || 0)}
+                            ${unit}
+                        </div>
+                    `
+                }
+            },
+            series: [
+                {
+                    ...itemPieChartOption.series[0],
+                    data: data
+                }
+            ]
+        })
+    }
+
     useEffect(() => {
-        console.log(yisaData)
+        ajaxGetData()
     }, [])
 
+    useEffect(() => {
+        if (yisaData.amount) {
+            initMoneyPieChart(yisaData.amount, '元')
+        }
+        if (yisaData.items) {
+            initItemPieChart(yisaData.items, '个')
+        }
+    }, [yisaData])
+
     return (
         <div className="overview-container">
             <div className="overview-top">
                 <div className="overview-item">
                     <div className="overview-item-title">欠费金额占比图</div>
-                    <div className="overview-item-content" id="moneyPieChart"></div>
+                    <div className="overview-item-content" id="moneyPieChart">
+                        <ReactEcharts
+                            option={moneyPieChartOption}
+                            style={{ overflow: "hidden" }}
+                        />
+                    </div>
                 </div>
                 <div className="overview-item">
                     <div className="overview-item-title">欠费条数占比图</div>
-                    <div className="overview-item-content" id="itemPieChart"></div>
+                    <div className="overview-item-content" id="itemPieChart">
+                        <ReactEcharts
+                            option={itemPieChartOption}
+                            style={{ overflow: "hidden" }}
+                        />
+                    </div>
                 </div>
 
                 <div className="overview-item">
                     <div className="overview-item-title">排行榜</div>
-                    <div className="overview-item-content"></div>
+                    <div className="overview-item-content">
+                        <div className="item-tabs-container">
+                            <Tabs
+                                defaultActiveKey={activeTab}
+                                onChange={(v) => setActiveTab(v)}
+                                items={[
+                                    { label: '欠费车场', key: 'parkRank' },
+                                    { label: '欠费车牌', key: 'plateRank' }
+                                ]}
+                            />
+                        </div>
+                        <div className="item-tab-content">
+                            {
+                                yisaData[activeTab] && yisaData[activeTab].map((item, index) => (
+                                    <div className="rank-item" key={index}>
+                                        <div className="rank-left">
+                                            <div className="rank-no">{index+1 > 3 ? (index+1) : ''}</div>
+                                            <div className="rank-label">{item.name}</div>
+                                        </div>
+                                        <div className="rank-right">
+                                            <div className="rank-value">{utils.parseFormatNum(item.value || 0)}</div>
+                                        </div>
+                                    </div>
+                                ))
+                            }
+                        </div>
+                    </div>
                 </div>
             </div>
             <div className="overview-bottom">

src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/Overview/index.scss

@@ -1,3 +1,5 @@
+@import "@/assets/css/mixin.scss";
+
 .overview-container {
     display: flex;
     flex-direction: column;
@@ -39,6 +41,67 @@
             &:last-child {
                 margin-right: 0;
             }
+            .overview-item-content {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                .item-tab-content {
+                    flex: 1;
+                    margin-top: 10px;
+                    display: flex;
+                    flex-direction: column;
+                    user-select: none;
+                    padding-right: 10px;
+                    overflow-y: hidden;
+                    &:hover {
+                        overflow-y: auto;
+                        @include scrollBar(var(--color-user-list-bg), #3B97FF);
+                    }
+                    .rank-item {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        height: 30px;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        .rank-left {
+                            display: flex;
+                            font-weight: 700;
+                            .rank-no {
+                                width: 25px;
+                                height: 25px;
+                                margin: 0 5px;
+                                margin-right: 10px;
+                                text-align: center;
+                            }
+                        }
+                        &:nth-child(1) {
+                            .rank-no {
+                                background: url('@/assets/images/icon-rank-1.png') no-repeat 100% 100%;
+                                background-size: 100% 100%;
+                            }
+                        }
+                        &:nth-child(2) {
+                            .rank-no {
+                                background: url('@/assets/images/icon-rank-2.png') no-repeat 100% 100%;
+                                background-size: 100% 100%;
+                            }
+                        }
+                        &:nth-child(3) {
+                            .rank-no {
+                                background: url('@/assets/images/icon-rank-3.png') no-repeat 100% 100%;
+                                background-size: 100% 100%;
+                            }
+                        }
+                    }
+                }
+            }
+            .item-tabs-container {
+                margin-top: 10px;
+                .ant-tabs-tab {
+                    padding-bottom: 5px;
+                }
+            }
         }
     }
     .overview-bottom {

src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/loadable.jsx

@@ -132,13 +132,13 @@ function ArrearageAly(props) {
                     </div>
                     <div className="parking-wrapper">
                         {
-                            activeTab == 1 ? <Overview yisaData={formData}/> : null
+                            activeTab == 1 ? <Overview formData={formData}/> : null
                         }
                         {
-                            activeTab == 2 ? <ParkArrear yisaData={formData}/> : null
+                            activeTab == 2 ? <ParkArrear formData={formData}/> : null
                         }
                         {
-                            activeTab == 3 ? <PlateArrear yisaData={formData}/> : null
+                            activeTab == 3 ? <PlateArrear formData={formData}/> : null
                         }
                     </div>
                 </div>

src/services/DataAnalysisPrediction/ParkingIncomeAly/index.js

@@ -0,0 +1,11 @@
+import ajax from "@/config/ajax"
+
+export default {
+    getIncomeOverviewData: function(data) {
+        return ajax({
+            url: '/api/dataAnalysis/overview',
+            type: 'post',
+            data
+        })
+    }
+}

src/services/DataAnalysisPrediction/index.js

@@ -1,4 +1,6 @@
 import ParkingBusinessAly from "./ParkingBusinessAly";
+import ParkingIncomeAly from "./ParkingIncomeAly";
 export default {
-  ...ParkingBusinessAly
+  ...ParkingBusinessAly,
+  ...ParkingIncomeAly
 };