publictransportation/src/pages/home/home.jsx

import "./home.scss";
import {Avatar, Menu, Popconfirm} from 'antd';
import {useEffect, useState} from "react";
import {AreaChartOutlined, DesktopOutlined, FileDoneOutlined, SettingOutlined, UserOutlined} from '@ant-design/icons';
import {Outlet, useLocation, useNavigate} from 'react-router-dom';
import axios from "@/utils/axios.js";
import {useDispatch} from 'react-redux';
import {setDictData} from '@/store/reducer.js';

export default function Home() {
    const navagate = useNavigate()
    const [current, setCurrent] = useState('mail')


    // 菜单数据
    const items = [{
        label: '首页配置', key: 'basicInfomation', icon: <DesktopOutlined/>, children: [{
            label: '汇总统计数据', key: 'statisticsData', icon: <AreaChartOutlined/>,
        }, {
            label: '消费占比', key: 'consumptionProportion', icon: <AreaChartOutlined/>,
        }, {
            label: '客流排名', key: 'flowRanking', icon: <AreaChartOutlined/>,
        }, {
            label: '线路客流排名', key: 'lineFlowRanking', icon: <AreaChartOutlined/>,
        }, {
            label: '舆情统计数据', key: 'publicOpinion', icon: <AreaChartOutlined/>,
        }, {
            label: '站场设备统计', key: 'stationEquipment', icon: <AreaChartOutlined/>,
        }, {
            label: '客运量数据', key: 'passengerVolumeData', icon: <AreaChartOutlined/>,
        }, {
            label: '班次完成率', key: 'classCompletionRate', icon: <AreaChartOutlined/>,
        }, {
            label: '班次准点率', key: 'classPunctualitRate', icon: <AreaChartOutlined/>,
        }, {
            label: '发车准点率', key: 'carCompletionRate', icon: <AreaChartOutlined/>,
        }]
    }, {
        label: '线路运营配置', key: 'lineConfiguration', icon: <SettingOutlined/>, children: [{
            label: '线路基本情况', key: 'basicInfomationOfTheLine', icon: <AreaChartOutlined/>,
        }, {
            label: '线路发班情况', key: 'lineDispatch', icon: <AreaChartOutlined/>,
        }, {
            label: '乘客类型', key: 'passengerType', icon: <AreaChartOutlined/>,
        }, {
            label: '汇总数据', key: 'summaryData', icon: <AreaChartOutlined/>,
        }, {
            label: '驾驶员数量', key: 'numberOfDrivers', icon: <AreaChartOutlined/>,
        }, {
            label: '车辆数量占比', key: 'numberOfTransit', icon: <AreaChartOutlined/>,
        }, {
            label: '车辆监控', key: 'vehicleMonitoring', icon: <AreaChartOutlined/>,
        }, {
            label: '车辆状态', key: 'vehicleStatus', icon: <AreaChartOutlined/>,
        }]
    }, {
        label: '客流分析', key: 'passengerFlowAnalysis', icon: <SettingOutlined/>, children: [{
            label: '底部信息', key: 'passengerInfomation', icon: <FileDoneOutlined/>,
        }, {
            label: '区域客流', key: 'regionalPassengerFlow', icon: <FileDoneOutlined/>,
        }, {
            label: '通勤时间', key: 'commutingTime', icon: <FileDoneOutlined/>,
        }, {
            label: '消费类型', key: 'consumptionType', icon: <FileDoneOutlined/>,
        }, {
            label: '乘距分布', key: 'distribution', icon: <FileDoneOutlined/>,
        }, {
            label: '换乘次数', key: 'replacementFrequency', icon: <FileDoneOutlined/>,
        }, {
            label: '客流线路分布', key: 'passengerFlowRoutes', icon: <FileDoneOutlined/>,
        }, {
            label: '客运量排名', key: 'rankingOfPassengerVolume', icon: <FileDoneOutlined/>,
        }]
    }, {
        label: '维保动态', key: 'maintenanceDynamics', icon: <SettingOutlined/>, children: [{
            label: '体检问题情况', key: 'physicalExaminationIssues', icon: <FileDoneOutlined/>,
        }, {
            label: '维修保养统计', key: 'maintenanceStatistics', icon: <FileDoneOutlined/>,
        }, {
            label: '乘距分布', key: 'distance', icon: <FileDoneOutlined/>,
        }, {
            label: '客流线路分布', key: 'distributionOfPassengerFlowRoutes', icon: <FileDoneOutlined/>,
        }, {
            label: '维保基本信息', key: 'basicMaintenanceInfomation', icon: <FileDoneOutlined/>,
        }, {
            label: '维保执行占比', key: 'maintenanceExecution', icon: <FileDoneOutlined/>,
        }, {
            label: '车辆运营状态', key: 'statusClassification', icon: <FileDoneOutlined/>,
        }, {
            label: '车辆维保状态', key: 'maintenanceStatus', icon: <FileDoneOutlined/>,
        }, {
            label: '消费类型', key: 'mainConsumPtionType', icon: <FileDoneOutlined/>,
        }, {
            label: '维保明细', key: 'maintenanceDetails', icon: <FileDoneOutlined/>,
        },]
    }, {
        label: '设施管理', key: 'facilityManagementChild', icon: <DesktopOutlined/>, children: [{
            label: '车载部件', key: 'vehiclesComponents', icon: <AreaChartOutlined/>,
        }, {
            label: '充电站', key: 'chargingStation', icon: <AreaChartOutlined/>,
        }, {
            label: '区域设施统计', key: 'informationOfFacilities', icon: <AreaChartOutlined/>,
        }, {
            label: '电子站牌', key: 'electronicLicensePlate', icon: <AreaChartOutlined/>,
        }, {
            label: '车型展示', key: 'vehiclesModelDisplay', icon: <AreaChartOutlined/>,
        }, {
            label: '洗车机', key: 'carWasher', icon: <AreaChartOutlined/>,
        },]
    },
        {
            label: '站场管理信息', key: 'stationManagementInformation', icon: <DesktopOutlined/>, children: [{
                label: '站场基本信息', key: 'stationBasicInformation', icon: <AreaChartOutlined/>,
            }, {
                label: '面积分布', key: 'areaDistrbution', icon: <AreaChartOutlined/>,
            }, {
                label: '场地建设时间', key: 'siteConstructionTime', icon: <AreaChartOutlined/>,
            }, {
                label: '场地权属情况', key: 'siteOwnership', icon: <AreaChartOutlined/>,
            }, {
                label: '区域分布', key: 'regionalDistribution', icon: <AreaChartOutlined/>,
            }, {
                label: '类型分布', key: 'typeDistribution', icon: <AreaChartOutlined/>,
            }, {
                label: '使用情况', key: 'usage', icon: <AreaChartOutlined/>,
            }, {
                label: '站场装机容量', key: 'installedCapacity', icon: <AreaChartOutlined/>,
            }, {
                label: '运营保障', key: 'stationOperate', icon: <AreaChartOutlined/>,
            }, {
                label: '充电趋势', key: 'chageTrends', icon: <AreaChartOutlined/>,
            }, {
                label: '充电桩服务情况', key: 'chageService', icon: <AreaChartOutlined/>,
            }, {
                label: '今日充电统计', key: 'nowChargeStatistics', icon: <AreaChartOutlined/>,
            }, {
                label: '资源使用率', key: 'resourceUsage', icon: <AreaChartOutlined/>,
            },]
        }, {
            label: '线路分析', key: 'lineAnalysis', icon: <SettingOutlined/>, children: [{
                label: '区域里程', key: 'regionalMileage', icon: <UserOutlined/>,
            }, {
                label: '线路运行速度', key: 'lineSpeed', icon: <UserOutlined/>,
            }, {
                label: '站点客流排名', key: 'stationPassengerFlow', icon: <UserOutlined/>,
            }, {
                label: '近期线路调整', key: 'lineAdjustment', icon: <UserOutlined/>,
            }, {
                label: '线路长度分布', key: 'lineLength', icon: <UserOutlined/>,
            }, {
                label: '线路站距分布', key: 'stationSpacingDistribution', icon: <UserOutlined/>,
            }, {
                label: '线路类型', key: 'lineType', icon: <UserOutlined/>,
            }, {
                label: '线路基本信息', key: 'lineAnalysisDetails', icon: <UserOutlined/>,
            },]
        }, {
            label: '基础信息配置', key: 'setting', icon: <SettingOutlined/>, children: [{
                label: '用户管理', key: 'user', icon: <UserOutlined/>,
            }, {
                label: '字典管理', key: 'dict', icon: <FileDoneOutlined/>,
            }]
        }]
    /**
     * 电机左边弹框跳转页面
     * @param e 电机的数据
     */
    const onClick = (e) => {
        setCurrent(e.key);
        navagate("/" + e.key)
    };

    /**
     * 退出登录
     * @returns {Promise<void>}
     */
    async function logOut() {
        let {code} = await axios.post('/sys/logout')
        if (code === 200) {
            localStorage.removeItem('user')
            navagate('/login')
        }
    }

    // reduce状态
    const dispatch = useDispatch();

    /**
     * 全局存储字典
     * @returns {Promise<void>}
     */
    async function getDict() {
        let {data} = await axios.get("/dict/selectKey");
        dispatch(setDictData(data))


    }

    const location = useLocation();

    // 让页面无法跳转
    function jumpToPage() {
        if (location.pathname === '/') {
            navagate('/statisticsData')
        }
    }

    useEffect(() => {
        jumpToPage()
        getDict()
    }, [])
    return (<div className="home">
        <div className="head">
            <h2>车站管理系统</h2>

            <Popconfirm
                title="登出"
                description="是否登出此账号"
                onConfirm={logOut}
                okText="确认"
                cancelText="取消"
            >
                <div className="ava">

                    <Avatar size={30} icon={<UserOutlined/>}></Avatar>
                    <p>{JSON.parse(localStorage.getItem('user'))?.name}</p>
                </div>
            </Popconfirm>
        </div>
        <div className="body">
            <div className="menu">

                <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={items}/>
            </div>
            <div className="contetn">
                <Outlet></Outlet>
            </div>
        </div>
    </div>);
}