修改整个架构

src/index.jsx

@@ -1,47 +1,64 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import Login from "./pages/login/login";
-import Home from "./pages/home/home";
-import User from './pages/user/user.jsx'
+import Login from "./pages/login/login.jsx";
+import Home from "./pages/home/home.jsx";
 import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
 import {Provider} from 'react-redux'
 import '../src/assets/css/clear.css'
 import store from './store/index.js'
-import Dict from "@/pages/dict/dict.jsx";
-import StatisticsData from "@/pages/statisticsData/statisticsData.jsx";
-import ConsumptionProportion from "@/pages/consumptionProportion/consumptionProportion.jsx";
-import FlowRanking from "@/pages/flowRanking/flowRanking.jsx";
-import LineFlowRanking from "@/pages/lineFlowRanking/lineFlowRanking.jsx";
-import PublicOpinion from "@/pages/publicOpinion/publicOpinion.jsx";
-import StationEquipment from "@/pages/stationEquipment/stationEquipment.jsx";
-import PassengerVolumeData from "@/pages/passengerVolumeData/passengerVolumeData.jsx";
 import zhCN from 'antd/locale/zh_CN';
 import {ConfigProvider} from 'antd';
 import 'dayjs/locale/zh-cn';
+import User from "@/pages/settingPageChild/user/user.jsx";
+import Dict from "@/pages/settingPageChild/dict/dict.jsx";
+import StatisticsData from "@/pages/homePageChild/statisticsData/statisticsData.jsx";
+import ConsumptionProportion from "@/pages/homePageChild/consumptionProportion/consumptionProportion.jsx";
+import FlowRanking from "@/pages/homePageChild/flowRanking/flowRanking.jsx";
+import LineFlowRanking from "@/pages/homePageChild/lineFlowRanking/lineFlowRanking.jsx";
+import PublicOpinion from "@/pages/homePageChild/publicOpinion/publicOpinion.jsx";
+import StationEquipment from "@/pages/homePageChild/stationEquipment/stationEquipment.jsx";
+import PassengerVolumeData from "@/pages/homePageChild/passengerVolumeData/passengerVolumeData.jsx";
+import ClassCompletionRate from "@/pages/homePageChild/classCompletionRate/classCompletionRate.jsx";
+import ClassPunctualitRate from "@/pages/homePageChild/classPunctualitRate/classPunctualitRate.jsx";
+import CarCompletionRate from "@/pages/homePageChild/carCompletionRate/carCompletionRate.jsx";
+import BasicInfomationOfTheLine from "@/pages/linePageChild/basicInfomationOfTheLine/basicInfomationOfTheLine.jsx";
+import LineDispatch from "@/pages/linePageChild/lineDispatch/lineDispatch.jsx";
+
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <Provider store={store}>
 
         <React.StrictMode>
             <ConfigProvider locale={zhCN}>
-            <BrowserRouter>
-                <Routes>
-                    <Route path="/login" element={<Login></Login>}></Route>
-                    <Route path="/" element={<Home></Home>}>
-                        <Route path="user" element={<User></User>}></Route>
-                        <Route path="dict" element={<Dict></Dict>}></Route>
-                        <Route path="statisticsData" element={<StatisticsData></StatisticsData>}></Route>
-                        <Route path="consumptionProportion" element={<ConsumptionProportion></ConsumptionProportion>}></Route>
-                        <Route path="flowRanking" element={<FlowRanking></FlowRanking>}></Route>
-                        <Route path="lineFlowRanking" element={<LineFlowRanking></LineFlowRanking>}></Route>
-                        <Route path="publicOpinion" element={<PublicOpinion></PublicOpinion>}></Route>
-                        <Route path="stationEquipment" element={<StationEquipment></StationEquipment>}></Route>
-                        <Route path="passengerVolumeData" element={<PassengerVolumeData></PassengerVolumeData>}></Route>
-                    </Route>
-                    {/**这里重定向到home页面 */}
-                    <Route path="*" element={<Navigate to="/statisticsData" replace/>}></Route>
-                </Routes>
-            </BrowserRouter>
+                <BrowserRouter>
+                    <Routes>
+                        <Route path="/login" element={<Login></Login>}></Route>
+                        <Route path="/" element={<Home></Home>}>
+                            {/*首页路由*/}
+                            <Route path="user" element={<User></User>}></Route>
+                            <Route path="dict" element={<Dict></Dict>}></Route>
+                            <Route path="statisticsData" element={<StatisticsData></StatisticsData>}></Route>
+                            <Route path="consumptionProportion"
+                                   element={<ConsumptionProportion></ConsumptionProportion>}></Route>
+                            <Route path="flowRanking" element={<FlowRanking></FlowRanking>}></Route>
+                            <Route path="lineFlowRanking" element={<LineFlowRanking></LineFlowRanking>}></Route>
+                            <Route path="publicOpinion" element={<PublicOpinion></PublicOpinion>}></Route>
+                            <Route path="stationEquipment" element={<StationEquipment></StationEquipment>}></Route>
+                            <Route path="passengerVolumeData"
+                                   element={<PassengerVolumeData></PassengerVolumeData>}></Route>
+                            <Route path="classCompletionRate"
+                                   element={<ClassCompletionRate></ClassCompletionRate>}></Route>
+                            <Route path="classPunctualitRate"
+                                   element={<ClassPunctualitRate></ClassPunctualitRate>}></Route>
+                            <Route path="carCompletionRate" element={<CarCompletionRate></CarCompletionRate>}></Route>
+                            {/*    线路运营路由*/}
+                            <Route path="basicInfomationOfTheLine" element={<BasicInfomationOfTheLine></BasicInfomationOfTheLine>}></Route>
+                            <Route path="lineDispatch" element={<LineDispatch></LineDispatch>}></Route>
+                        </Route>
+                        {/**这里重定向到home页面 */}
+                        <Route path="*" element={<Navigate to="/statisticsData" replace/>}></Route>
+                    </Routes>
+                </BrowserRouter>
             </ConfigProvider>
         </React.StrictMode>
     </Provider>

src/pages/home/home.jsx

@@ -2,7 +2,7 @@ import "./home.scss";
 import {Menu, Avatar, Popconfirm} from 'antd';
 import {useState,useEffect} from "react";
 import {DesktopOutlined, SettingOutlined, UserOutlined,FileDoneOutlined,AreaChartOutlined} from '@ant-design/icons';
-import {Outlet, useNavigate} from 'react-router-dom';
+import {Outlet, useNavigate,useLocation} from 'react-router-dom';
 import axios from "@/utils/axios.js";
 import {  useDispatch } from 'react-redux';
 import {  setDictData } from '@/store/reducer.js';
@@ -10,10 +10,12 @@ export default function Home() {
     const navagate = useNavigate()
     const [current, setCurrent] = useState('mail')
 
+
+
     // 菜单数据
     const items = [
         {
-            label: '基础信息配置',
+            label: '首页配置',
             key: 'basicInfomation',
             icon: <DesktopOutlined />,
             children:[
@@ -51,10 +53,41 @@ export default function Home() {
                     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: 'setting',
@@ -92,7 +125,6 @@ export default function Home() {
     }
     // reduce状态
     const dispatch = useDispatch();
-
     /**
      * 全局存储字典
      * @returns {Promise<void>}
@@ -102,8 +134,16 @@ export default function Home() {
          dispatch(setDictData(data))
 
 
+    }
+    const location = useLocation();
+    // 让页面无法跳转
+    function jumpToPage(){
+        if(location.pathname==='/'){
+            navagate('/statisticsData')
+        }
     }
     useEffect(()=>{
+        jumpToPage()
         getDict()
     },[])
     return (
@@ -121,7 +161,7 @@ export default function Home() {
                     <div className="ava">
 
                         <Avatar size={30} icon={<UserOutlined/>}></Avatar>
-                        <p>{JSON.parse(localStorage.getItem('user')).name}</p>
+                        <p>{JSON.parse(localStorage.getItem('user'))?.name}</p>
                     </div>
                 </Popconfirm>
             </div>

src/pages/homePageChild/carCompletionRate/carCompletionRate.jsx

@@ -0,0 +1,123 @@
+import {Table, Button, Input, Popconfirm} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./carCompletionRate.scss";
+import axios from "@/utils/axios.js";
+
+const {Column} = Table;
+
+export default function CarCompletionRate() {
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        getData()
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+    // 线路下拉框
+    const [option,setOption] = useState([])
+    // 线路数据
+    const [lineList, setLineList] = useState([])
+    /**
+     * 线路数据请求
+     * @returns {Promise<void>}
+     */
+    async function getLineData() {
+        let {data} = await axios.get('/busLine/getList')
+        setLineList(data)
+        let option = data.map(item => {
+            return {
+                label: item.lineName,
+                value: item.lineId,
+            }
+        })
+        setOption(option)
+
+    }
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/homePage/getDepartPunctualityRateList");
+        setData(data);
+    }
+    // 设置线路名称
+    function setText(text){
+       let it= option.find((item)=>item.value===text)?.label
+        return it
+    }
+    useEffect(() => {
+        getLineData()
+        getData();
+    }, []);
+    return (
+        <div className="completion">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        添加准点率
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={{
+                    current: 1, // 当前页数
+                    pageSize: 12, // 每页显示的数量
+                }}
+            >
+                <Column title="线路名称" dataIndex="lineId" key="id"  render={(text)=>(
+                setText(text)
+                )
+                }></Column>
+                <Column title="跑法" dataIndex="modelId" key="id" render={(text)=>
+                    !text?'上行':'下行'
+                }/>
+                <Column title="发车总数" dataIndex="total" key="id" />
+                <Column title="准点数" dataIndex="onTime" key="id"/>
+                <Column title="开始站点" dataIndex="startStation" key="id"/>
+                <Column title="结束站点" dataIndex="endStation" key="id"/>
+                <Column title="车牌" dataIndex="licensePlate" key="id"/>
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+                option={option}
+                lineList={lineList}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/homePageChild/carCompletionRate/carCompletionRate.scss

@@ -0,0 +1,26 @@
+.completion{
+  width: 100%;
+  height: 100%;
+  .top{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 5px;
+    .input{
+      display: flex;
+      button{
+        margin-left: 10px;
+      }
+    }
+  }
+  .btn{
+    display: flex;
+    justify-content: space-between;
+  }
+
+}
+#basic{
+
+.ant-form-item{
+  margin-bottom: 20px;
+}
+}

src/pages/homePageChild/carCompletionRate/components/modal.jsx

@@ -0,0 +1,192 @@
+import {Modal, Form, Input, Select, message, InputNumber} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect, useState} from 'react'
+import './modal.scss'
+
+export default function ModalHooks({isModalOpen, closeModal, row, lineList, option}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉选项
+    const modelOption = [
+        {value: 0, label: '上行'},
+        {value: 1, label: '下行'}
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                newData.id = row.id
+            }
+            let {code, message} = await axios.post('/homePageEdit/editDepartPunctualityRate', [newData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+
+    /**
+     * 线路名称下拉列表
+     * @param id 数据
+     */
+    function setSelectedItems(id) {
+        //  找到当条值
+        let i = lineList.find(item => item.lineId === id)
+        // 站点数据
+        let stationList = i.lineModeList[0].modeStationsList
+        form.setFieldValue('startStation', stationList[0].stationName)
+        form.setFieldValue('endStation', stationList[stationList.length - 1].stationName)
+    }
+
+
+    // 表单
+    useEffect(() => {
+
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+            form.setFieldsValue(formData)
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id?'修改数据':'新增数据'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={900}
+                   cancelText="取消" okText="确定">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+
+
+                    <Form.Item
+                        label="线路名称"
+                        name="lineId"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择线路名称',
+
+                            },
+                        ]}
+
+                    >
+                        <Select options={option} onChange={setSelectedItems}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="跑法"
+                        name="modelId"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择跑法',
+
+                            },
+                        ]}
+                    >
+                        <Select options={modelOption}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="发车总数"
+                        name="total"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入发车总数',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="准点数"
+                        name="onTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入准点数',
+
+
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+
+
+                    <Form.Item
+                        label="开始站点"
+                        name="startStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择站点',
+
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}} disabled/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="结束站点"
+                        name="endStation"
+                        rules={[
+                            {
+
+                                message: '请输入满意度',
+
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}} disabled/>
+                    </Form.Item>
+                    <Form.Item
+                        label="车牌"
+                        name="licensePlate"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input ></Input>
+                    </Form.Item>
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/homePageChild/classCompletionRate/classCompletionRate.jsx

@@ -0,0 +1,126 @@
+import {Table, Button, Input, Popconfirm} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./classCompletionRate.scss";
+import axios from "@/utils/axios.js";
+
+const {Column} = Table;
+
+export default function ClassCompletionRate() {
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        getData()
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+    // 线路下拉框
+    const [option,setOption] = useState([])
+    // 线路数据
+    const [lineList, setLineList] = useState([])
+    /**
+     * 线路数据请求
+     * @returns {Promise<void>}
+     */
+    async function getLineData() {
+        let {data} = await axios.get('/busLine/getList')
+        setLineList(data)
+        let option = data.map(item => {
+            return {
+                label: item.lineName,
+                value: item.lineId,
+            }
+
+        })
+        setOption(option)
+
+    }
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/homePage/getClassesCompletionRate");
+        setData(data);
+    }
+    // 设置线路名称
+    function setText(text){
+       let it= option.find((item)=>item.value===text)?.label
+        return it
+    }
+    useEffect(() => {
+        getLineData()
+        getData();
+    }, []);
+    return (
+        <div className="completion">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        添加完成率
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={{
+
+                    current: 1, // 当前页数
+                    pageSize: 12, // 每页显示的数量
+
+                }}
+            >
+                <Column title="线路名称" dataIndex="lineId" key="id"  render={(text)=>(
+                setText(text)
+                )
+                }></Column>
+                <Column title="跑法" dataIndex="modelId" key="id" render={(text)=>
+                    !text?'正跑':'反跑'
+                }/>
+                <Column title="计划" dataIndex="planClasses" key="id" />
+                <Column title="实际" dataIndex="realityClasses" key="id"/>
+                <Column title="开始站点" dataIndex="startStation" key="id"/>
+                <Column title="结束站点" dataIndex="endStation" key="id"/>
+                <Column title="车牌" dataIndex="licensePlate" key="id"/>
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+                option={option}
+                lineList={lineList}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/homePageChild/classCompletionRate/classCompletionRate.scss

@@ -0,0 +1,26 @@
+.completion{
+  width: 100%;
+  height: 100%;
+  .top{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 5px;
+    .input{
+      display: flex;
+      button{
+        margin-left: 10px;
+      }
+    }
+  }
+  .btn{
+    display: flex;
+    justify-content: space-between;
+  }
+
+}
+#basic{
+
+.ant-form-item{
+  margin-bottom: 20px;
+}
+}

src/pages/homePageChild/classCompletionRate/components/modal.jsx

@@ -0,0 +1,198 @@
+import {Modal, Form, Input, Select, message, InputNumber,TimePicker } from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect, useState} from 'react'
+import './modal.scss'
+import dayjs from "dayjs";
+
+export default function ModalHooks({isModalOpen, closeModal, row, lineList, option}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉选项
+    const modelOption = [
+        {value: 0, label: '上行'},
+        {value: 1, label: '下行'}
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+
+            if (row?.id) {
+                // 修改数据
+                newData.id = row.id
+            }
+            let {code, message} = await axios.post('/homePageEdit/editClassesCompletionRate', [newData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+
+    /**
+     * 线路名称下拉列表
+     * @param id 数据
+     */
+    function setSelectedItems(id) {
+        //  找到当条值
+        let i = lineList.find(item => item.lineId === id)
+        // 站点数据
+        let stationList = i.lineModeList[0].modeStationsList
+        form.setFieldValue('startStation', stationList[0].stationName)
+        form.setFieldValue('endStation', stationList[stationList.length - 1].stationName)
+    }
+
+
+    // 表单
+    useEffect(() => {
+
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+
+            form.setFieldsValue(formData)
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id?'修改数据':'新增数据'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={900}
+                   cancelText="取消" okText="确定">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+
+
+                    <Form.Item
+                        label="线路名称"
+                        name="lineId"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择线路名称',
+
+                            },
+                        ]}
+
+                    >
+                        <Select options={option} onChange={setSelectedItems}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="跑法"
+                        name="modelId"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择跑法',
+
+                            },
+                        ]}
+                    >
+                        <Select options={modelOption}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="计划"
+                        name="planClasses"
+                        rules={[
+                            {
+
+                                required: true,
+                                message: '请输入计划班次',
+                            },
+                        ]}
+                    >
+                        <InputNumber  style={{width: '100%'}}/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="实际"
+                        name="realityClasses"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入实际班次',
+
+
+                            },
+                        ]}
+                    >
+                        <InputNumber  style={{width: '100%'}}/>
+                    </Form.Item>
+
+
+                    <Form.Item
+                        label="开始站点"
+                        name="startStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择开始站点',
+
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}} disabled/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="结束站点"
+                        name="endStation"
+                        rules={[
+                            {
+
+                                message: '请输入结束站点',
+
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}} disabled/>
+                    </Form.Item>
+                    <Form.Item
+                        label="车牌"
+                        name="licensePlate"
+                        rules={[
+                            {
+
+                                message: '请输入车牌',
+
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}} />
+                    </Form.Item>
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/homePageChild/classPunctualitRate/classPunctualitRate.jsx

@@ -0,0 +1,129 @@
+import {Table, Button, Input, Popconfirm} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./classPunctualitRate.scss";
+import axios from "@/utils/axios.js";
+
+const {Column} = Table;
+
+export default function ClassPunctualitRate() {
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        getData()
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+    // 线路下拉框
+    const [option,setOption] = useState([])
+    // 线路数据
+    const [lineList, setLineList] = useState([])
+    /**
+     * 线路数据请求
+     * @returns {Promise<void>}
+     */
+    async function getLineData() {
+        let {data} = await axios.get('/busLine/getList')
+        setLineList(data)
+        let option = data.map(item => {
+            return {
+                label: item.lineName,
+                value: item.lineId,
+            }
+
+        })
+        setOption(option)
+
+    }
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/homePage/getClassesPunctualityRate");
+        setData(data);
+    }
+    // 设置线路名称
+    function setText(text){
+       let it= option.find((item)=>item.value===text)?.label
+        return it
+    }
+    useEffect(() => {
+        getLineData()
+        getData();
+    }, []);
+    return (
+        <div className="completion">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        添加准点率
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+
+                bordered={true}
+                rowKey="id"
+                pagination={{
+                    current: 1, // 当前页数
+                    pageSize: 12, // 每页显示的数量
+                }}
+            >
+                <Column title="线路名称" dataIndex="lineId" key="id"  render={(text)=>(
+                setText(text)
+                )
+                }></Column>
+                <Column title="跑法" dataIndex="modelId" key="id" render={(text)=>
+                    !text?'上行':'下行'
+                }/>
+                <Column title="计划班次" dataIndex="planTime" key="id" />
+                <Column title="实际班次" dataIndex="realityTime" key="id"/>
+                <Column title="状态" dataIndex="status" key="id" render={(text)=>(
+                       text===0?'正常':text===1?"超出":'异常'
+                    )}/>
+                <Column title="是否今日" dataIndex="type" key="id" render={(text)=>(
+                    text===1?'今日':'昨日'
+                )}/>
+                <Column title="车牌" dataIndex="licensePlate" key="id"/>
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+                option={option}
+                lineList={lineList}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/homePageChild/classPunctualitRate/classPunctualitRate.scss

@@ -0,0 +1,26 @@
+.completion{
+  width: 100%;
+  height: 100%;
+  .top{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 5px;
+    .input{
+      display: flex;
+      button{
+        margin-left: 10px;
+      }
+    }
+  }
+  .btn{
+    display: flex;
+    justify-content: space-between;
+  }
+
+}
+#basic{
+
+.ant-form-item{
+  margin-bottom: 20px;
+}
+}

src/pages/homePageChild/classPunctualitRate/components/modal.jsx

@@ -0,0 +1,207 @@
+import {Modal, Form, Input, Select, message, InputNumber, TimePicker} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect, useState} from 'react'
+import './modal.scss'
+import dayjs from "dayjs";
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+export default function ModalHooks({isModalOpen, closeModal, row, lineList, option}) {
+    const [messageApi, contextHolder] = message.useMessage();
+
+    // 表单
+    const [form] = Form.useForm();
+    const typeOption = [
+        {value: 0, label: '昨日'},
+        {value: 1, label: '今日'}
+    ]
+    // 下拉选项
+    const modelOption = [
+        {value: 0, label: '上行'},
+        {value: 1, label: '下行'}
+    ]
+    const statusOption = [{value: 0, label: '正常'}, {value: 1, label: '超出'}, {value: 2, label: '异常'},]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            newData.planTime = dayjs(newData.planTime).format('HH:mm')
+            newData.realityTime = dayjs(newData.realityTime).format('HH:mm')
+            if (row?.id) {
+                // 修改数据
+                newData.id = row.id
+            }
+            let {code, message} = await axios.post('/homePageEdit/editClassesPunctualityRate', [newData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+
+    /**
+     * 线路名称下拉列表
+     * @param id 数据
+     */
+    function setSelectedItems(id) {
+        //  找到当条值
+        let i = lineList.find(item => item.lineId === id)
+        // 站点数据
+        let stationList = i.lineModeList[0].modeStationsList
+        form.setFieldValue('startStation', stationList[0].stationName)
+        form.setFieldValue('endStation', stationList[stationList.length - 1].stationName)
+    }
+
+
+    // 表单
+    useEffect(() => {
+
+        if (row.id) {
+            dayjs.extend(customParseFormat)
+            let formData = JSON.parse(JSON.stringify(row))
+            formData.planTime = dayjs(formData.planTime, 'HH:mm')
+            formData.realityTime = dayjs(formData.realityTime, 'HH:mm')
+            form.setFieldsValue(formData)
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id ? '修改数据' : '新增数据'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+                   width={900}
+                   cancelText="取消" okText="确定">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+
+
+                    <Form.Item
+                        label="线路名称"
+                        name="lineId"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择线路名称',
+
+                            },
+                        ]}
+
+                    >
+                        <Select options={option}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="跑法"
+                        name="direction"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择跑法',
+
+                            },
+                        ]}
+                    >
+                        <Select options={modelOption}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="计划时间"
+                        name="planTime"
+                        rules={[
+                            {
+                                type: 'object',
+                                required: true,
+                                message: '请输入计划班次',
+                            },
+                        ]}
+                    >
+                        <TimePicker format='HH:mm' style={{width: '100%'}}/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="实际时间"
+                        name="realityTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入实际班次',
+                                type: 'object'
+
+                            },
+                        ]}
+                    >
+                        <TimePicker format='HH:mm' style={{width: '100%'}}/>
+                    </Form.Item>
+
+
+                    <Form.Item
+                        label="状态"
+                        name="status"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+                    >
+                        <Select options={statusOption}></Select>
+                    </Form.Item>
+                    <Form.Item
+                        label="是否今日"
+                        name="type"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+                    >
+                        <Select options={typeOption}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="车牌"
+                        name="licensePlate"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input></Input>
+                    </Form.Item>
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/consumptionProportion/components/modal.jsx → src/pages/homePageChild/consumptionProportion/components/modal.jsx

@@ -52,6 +52,7 @@ export default function ModalHooks({isModalOpen, closeModal, row,submitValue}) {
                 value={text}
                 onChange={(val)=>setValue(val,index,'name')}
                 options={options}
+                style={{width:'80px'}}
                 fieldNames={{
                     label:'name',
                     value:'name'

src/pages/flowRanking/components/modal.jsx → src/pages/homePageChild/flowRanking/components/modal.jsx

@@ -52,6 +52,7 @@ export default function ModalHooks({isModalOpen, closeModal, row,submitValue}) {
                 value={text}
                 onChange={(val)=>setValue(val,index,'name')}
                 options={options}
+                style={{width:'120px'}}
                 fieldNames={{
                     label:'name',
                     value:'name'

src/pages/homePageChild/flowRanking/components/modal.scss

@@ -0,0 +1,9 @@
+#statics {
+  .ant-form-item{
+    width: 45%;
+    margin-bottom: 10px;
+    .ant-form-item-label{
+      width: 120px;
+    }
+  }
+}

src/pages/lineFlowRanking/components/modal.jsx → src/pages/homePageChild/lineFlowRanking/components/modal.jsx

@@ -49,6 +49,7 @@ export default function ModalHooks({isModalOpen, closeModal, row,submitValue}) {
         render: (text, record, index) => (
             <Select
                 value={text}
+                style={{width:'80px'}}
                 onChange={(val)=>setValue(val,index,'name')}
                 options={options}
                 fieldNames={{

src/pages/homePageChild/lineFlowRanking/components/modal.scss

@@ -0,0 +1,9 @@
+#statics {
+  .ant-form-item{
+    width: 45%;
+    margin-bottom: 10px;
+    .ant-form-item-label{
+      width: 120px;
+    }
+  }
+}

src/pages/homePageChild/statisticsData/components/modal.scss

@@ -0,0 +1,9 @@
+#statics {
+  .ant-form-item{
+    width: 45%;
+    margin-bottom: 10px;
+    .ant-form-item-label{
+      width: 120px;
+    }
+  }
+}

src/pages/linePageChild/basicInfomationOfTheLine/basicInfomationOfTheLine.jsx

@@ -0,0 +1,163 @@
+import {Table, Button, Select} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./basicInfomationOfTheLine.scss";
+import axios from "@/utils/axios.js";
+import dayjs from "dayjs";
+
+const {Column} = Table;
+
+export default function BasicInfomationOfTheLine() {
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    // 一行的数据
+    const [row, setRow] = useState({});
+    // 设置下拉框绑定的值
+    const [val, setVal] = useState('')
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        getData()
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+
+        setIsModalOpen(true);
+
+    }
+
+    // 线路下拉框
+    const [option, setOption] = useState([])
+    // 线路数据
+    const [lineList, setLineList] = useState([])
+
+    /**
+     * 线路数据请求
+     * @returns {Promise<void>}
+     */
+    async function getLineData() {
+
+        let {data} = await axios.get('/busLine/getList')
+        setLineList(data)
+        let option = data.map(item => {
+            return {
+                label: item.lineName,
+                value: item.lineId,
+            }
+
+        })
+        // 默认查询第一个
+        if (!val) {
+            setVal(option[0].value)
+            // console.log(option[0])
+        }
+        setOption(option)
+
+    }
+
+    // 获取数据
+    async function getData() {
+        if(!val)return
+        let {data} = await axios.get("/lineOperate/getBusLineDetail", {params: {lineId: val}});
+        if(!data){
+            setData([]);
+            return
+        }
+        setData([data]);
+    }
+
+    // 设置线路名称
+    function setText(text) {
+        let it = option.find((item) => item.value === text)?.label
+        return it
+    }
+
+    /**
+     * 设置下拉框值并重新搜索
+     * @param value 数据值
+     */
+    function changeSelect(value) {
+
+        setVal(value)
+
+    }
+
+    useEffect(() => {
+        //   这里有点坑，useEffect必须是普通函数，不可以是闭包函数
+             getLineData()
+
+
+    }, []);
+    useEffect(()=>{
+        getData()
+    },[val])
+    return (
+        <div className="basicin">
+            <div className="top">
+                <div className="slect">
+                    <Select options={option} style={{width: '100px'}} value={val} onChange={changeSelect}></Select>
+                </div>
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增线路基本情况
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={{
+                    current: 1, // 当前页数
+                    pageSize: 12, // 每页显示的数量
+                }}
+            >
+                <Column title="线路名称" dataIndex="lineId" key="id" render={(text) => (
+                    setText(text)
+                )
+                }></Column>
+                <Column title="线路类型" dataIndex="type" key="id" render={(text) =>
+                    text === 1 ? '主线公交' : '干线公交'
+                }/>
+                <Column title="上行起点站" dataIndex="upStartStation" key="id"/>
+                <Column title="上行终点站" dataIndex="upEndStation" key="id"/>
+                <Column title="下行起点站" dataIndex="downStartStation" key="id"/>
+                <Column title="下行终点站" dataIndex="downEndStation" key="id"/>
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+                option={option}
+                lineList={lineList}
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/linePageChild/basicInfomationOfTheLine/basicInfomationOfTheLine.scss

@@ -0,0 +1,26 @@
+.basicin{
+  width: 100%;
+  height: 100%;
+  .top{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    .input{
+      display: flex;
+      button{
+        margin-left: 10px;
+      }
+    }
+  }
+  .btn{
+    display: flex;
+    justify-content: space-between;
+  }
+
+}
+#basic{
+
+.ant-form-item{
+  margin-bottom: 20px;
+}
+}

src/pages/linePageChild/basicInfomationOfTheLine/components/modal.jsx

@@ -0,0 +1,296 @@
+import {Modal, Form, Select, message, InputNumber, TimePicker, Input} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect, useState} from 'react'
+import './modal.scss'
+import dayjs from "dayjs";
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+export default function ModalHooks({isModalOpen, closeModal, row, lineList, option, val}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    const typeOption = [
+        {value: 0, label: '干线公交'},
+        {value: 1, label: '主线公交'}
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            formData.upStartTime = dayjs(formData.upStartTime).format('HH:mm')
+            formData.upEndTime = dayjs(formData.upEndTime).format('HH:mm')
+            formData.downStartTime = dayjs(formData.downStartTime).format('HH:mm')
+            formData.downEndTime = dayjs(formData.downEndTime).format('HH:mm')
+
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/lineOperateEdit/editBusLineDetail', formData)
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    useEffect(() => {
+        form.setFieldValue('lineId', val)
+        if (row.id) {
+            dayjs.extend(customParseFormat)
+            let formData = JSON.parse(JSON.stringify(row))
+            formData.upStartTime = dayjs(formData.upStartTime, 'HH:mm')
+            formData.upEndTime = dayjs(formData.upEndTime, 'HH:mm')
+            formData.downStartTime = dayjs(formData.downStartTime, 'HH:mm')
+            formData.downEndTime = dayjs(formData.downEndTime, 'HH:mm')
+            form.setFieldsValue(formData)
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id ? '修改数据' : '新增数据'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+                   width={900}
+                   cancelText="取消" okText="确定">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+                    <Form.Item
+                        label="线路"
+                        name="lineId"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+
+                    >
+                        <Select options={option} style={{width: '100%'}} disabled></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="票价"
+                        name="fare"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="线路类型"
+                        name="type"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择',
+                            },
+                        ]}
+                    >
+                        <Select options={typeOption}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="车辆总数"
+                        name="totalCar"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入计划班次',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="运营车辆数量"
+                        name="operateNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+
+
+                    <Form.Item
+                        label="非运营车辆数量"
+                        name="nonOperateNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行里程"
+                        name="upMileage"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行起点时间"
+                        name="upStartTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行结束时间"
+                        name="upEndTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行起点站"
+                        name="upStartStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行终点站"
+                        name="upEndStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行里程"
+                        name="downMileage"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行起点时间"
+                        name="downStartTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行结束时间"
+                        name="downEndTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行起点站"
+                        name="downStartStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行终点站"
+                        name="downEndStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/linePageChild/basicInfomationOfTheLine/components/modal.scss

@@ -0,0 +1,9 @@
+#statics {
+  .ant-form-item{
+    width: 45%;
+    margin-bottom: 10px;
+    .ant-form-item-label{
+      width: 120px;
+    }
+  }
+}

src/pages/linePageChild/lineDispatch/components/modal.jsx

@@ -0,0 +1,297 @@
+import {Modal, Form, Select, message, InputNumber, TimePicker, Input} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect, useState} from 'react'
+import './modal.scss'
+import dayjs from "dayjs";
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+export default function ModalHooks({isModalOpen, closeModal, row, lineList, option, val}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    const typeOption = [
+        {value: 0, label: '干线公交'},
+        {value: 1, label: '主线公交'}
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            formData.upStartTime = dayjs(formData.upStartTime).format('HH:mm')
+            formData.upEndTime = dayjs(formData.upEndTime).format('HH:mm')
+            formData.downStartTime = dayjs(formData.downStartTime).format('HH:mm')
+            formData.downEndTime = dayjs(formData.downEndTime).format('HH:mm')
+
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/lineOperateEdit/editBusLineDetail', formData)
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    useEffect(() => {
+        form.setFieldValue('lineId', val)
+        if (row.id) {
+            dayjs.extend(customParseFormat)
+            let formData = JSON.parse(JSON.stringify(row))
+            formData.upStartTime = dayjs(formData.upStartTime, 'HH:mm')
+            formData.upEndTime = dayjs(formData.upEndTime, 'HH:mm')
+            formData.downStartTime = dayjs(formData.downStartTime, 'HH:mm')
+            formData.downEndTime = dayjs(formData.downEndTime, 'HH:mm')
+            form.setFieldsValue(formData)
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id ? '修改数据' : '新增数据'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+                   width={900}
+                   cancelText="取消" okText="确定">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+                    <Form.Item
+                        label="线路"
+                        name="lineId"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+
+                    >
+                        <Select options={option} style={{width: '100%'}} disabled></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="票价"
+                        name="fare"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="线路类型"
+                        name="type"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请选择',
+                            },
+                        ]}
+                    >
+                        <Select options={typeOption}></Select>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="车辆总数"
+                        name="totalCar"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入计划班次',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="运营车辆数量"
+                        name="operateNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+
+
+                    <Form.Item
+                        label="非运营车辆数量"
+                        name="nonOperateNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行里程"
+                        name="upMileage"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行起点时间"
+                        name="upStartTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行结束时间"
+                        name="upEndTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行起点站"
+                        name="upStartStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="上行终点站"
+                        name="upEndStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行里程"
+                        name="downMileage"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行起点时间"
+                        name="downStartTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行结束时间"
+                        name="downEndTime"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: "object"
+                            },
+                        ]}
+                    >
+                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行起点站"
+                        name="downStartStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="下行终点站"
+                        name="downEndStation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/linePageChild/lineDispatch/components/modal.scss

@@ -0,0 +1,9 @@
+#statics {
+  .ant-form-item{
+    width: 45%;
+    margin-bottom: 10px;
+    .ant-form-item-label{
+      width: 120px;
+    }
+  }
+}

src/pages/linePageChild/lineDispatch/lineDispatch.jsx

@@ -0,0 +1,163 @@
+import {Table, Button, Select} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./lineDispatch.scss";
+import axios from "@/utils/axios.js";
+import dayjs from "dayjs";
+
+const {Column} = Table;
+
+export default function LineDispatch() {
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    // 一行的数据
+    const [row, setRow] = useState({});
+    // 设置下拉框绑定的值
+    const [val, setVal] = useState('')
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        getData()
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+
+        setIsModalOpen(true);
+
+    }
+
+    // 线路下拉框
+    const [option, setOption] = useState([])
+    // 线路数据
+    const [lineList, setLineList] = useState([])
+
+    /**
+     * 线路数据请求
+     * @returns {Promise<void>}
+     */
+    async function getLineData() {
+
+        let {data} = await axios.get('/busLine/getList')
+        setLineList(data)
+        let option = data.map(item => {
+            return {
+                label: item.lineName,
+                value: item.lineId,
+            }
+
+        })
+        // 默认查询第一个
+        if (!val) {
+            setVal(option[0].value)
+            // console.log(option[0])
+        }
+        setOption(option)
+
+    }
+
+    // 获取数据
+    async function getData() {
+        if(!val)return
+        let {data} = await axios.get("/lineOperate/getBusLineDetail", {params: {lineId: val}});
+        if(!data){
+            setData([]);
+            return
+        }
+        setData([data]);
+    }
+
+    // 设置线路名称
+    function setText(text) {
+        let it = option.find((item) => item.value === text)?.label
+        return it
+    }
+
+    /**
+     * 设置下拉框值并重新搜索
+     * @param value 数据值
+     */
+    function changeSelect(value) {
+
+        setVal(value)
+
+    }
+
+    useEffect(() => {
+        //   这里有点坑，useEffect必须是普通函数，不可以是闭包函数
+             getLineData()
+
+
+    }, []);
+    useEffect(()=>{
+        getData()
+    },[val])
+    return (
+        <div className="basicin">
+            <div className="top">
+                <div className="slect">
+                    <Select options={option} style={{width: '100px'}} value={val} onChange={changeSelect}></Select>
+                </div>
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增线路基本情况
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={{
+                    current: 1, // 当前页数
+                    pageSize: 12, // 每页显示的数量
+                }}
+            >
+                <Column title="线路名称" dataIndex="lineId" key="id" render={(text) => (
+                    setText(text)
+                )
+                }></Column>
+                <Column title="线路类型" dataIndex="type" key="id" render={(text) =>
+                    text === 1 ? '主线公交' : '干线公交'
+                }/>
+                <Column title="上行起点站" dataIndex="upStartStation" key="id"/>
+                <Column title="上行终点站" dataIndex="upEndStation" key="id"/>
+                <Column title="下行起点站" dataIndex="downStartStation" key="id"/>
+                <Column title="下行终点站" dataIndex="downEndStation" key="id"/>
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+                option={option}
+                lineList={lineList}
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/linePageChild/lineDispatch/lineDispatch.scss

@@ -0,0 +1,26 @@
+.basicin{
+  width: 100%;
+  height: 100%;
+  .top{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    .input{
+      display: flex;
+      button{
+        margin-left: 10px;
+      }
+    }
+  }
+  .btn{
+    display: flex;
+    justify-content: space-between;
+  }
+
+}
+#basic{
+
+.ant-form-item{
+  margin-bottom: 20px;
+}
+}

src/pages/login/login.jsx

@@ -17,7 +17,7 @@ export default function Login() {
         if (code===200) {
             localStorage.setItem('user',JSON.stringify(data))
             messageApi.success("登陆成功");
-            navagite("/")
+            navagite("/statisticsData")
         } else {
             messageApi.error(message);
         }

src/pages/test/test.jsx

@@ -1,17 +0,0 @@
-import { useSelector, useDispatch } from 'react-redux';
-import {  incrementByAmount } from '../../store/reducer.js';
-export default function Test() {
-    const count = useSelector((state) => state.counter.value);
-    const dispatch = useDispatch();
-  return (
-    <div className="home">
-        <span>{count}</span>
-        <button
-            aria-label="Increment value"
-            onClick={() => dispatch(incrementByAmount(1100))}
-        >
-            Increment
-        </button>
-    </div>
-  );
-}