修改新页面

package.json

@@ -14,6 +14,7 @@
     "@reduxjs/toolkit": "^2.0.1",
     "antd": "^5.7.0",
     "axios": "^1.4.0",
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.4",

src/App.jsx

@@ -1,11 +1,16 @@
-import  Router from './index.jsx'
+import Router from './index.jsx'
+import zhCN from 'antd/locale/zh_CN';
+import {ConfigProvider} from 'antd';
+
 function App() {
- 
+
 
     return (
-        <div id='app'>
-          <Router></Router>
-        </div>
+        <ConfigProvider locale={zhCN}>
+            <div id='app'>
+                <Router></Router>
+            </div>
+        </ConfigProvider>
     )
 }
 

src/index.jsx

@@ -12,9 +12,18 @@ 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';
+
 ReactDOM.createRoot(document.getElementById("root")).render(
     <Provider store={store}>
+
         <React.StrictMode>
+            <ConfigProvider locale={zhCN}>
             <BrowserRouter>
                 <Routes>
                     <Route path="/login" element={<Login></Login>}></Route>
@@ -25,11 +34,15 @@ ReactDOM.createRoot(document.getElementById("root")).render(
                         <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="/home" replace/>}></Route>
+                    <Route path="*" element={<Navigate to="/statisticsData" replace/>}></Route>
                 </Routes>
             </BrowserRouter>
+            </ConfigProvider>
         </React.StrictMode>
     </Provider>
 );

src/pages/home/home.jsx

@@ -36,6 +36,21 @@ export default function Home() {
                     label: '线路客流排名',
                     key: 'lineFlowRanking',
                     icon: <AreaChartOutlined />,
+                },
+                {
+                    label: '舆情统计数据',
+                    key: 'publicOpinion',
+                    icon: <AreaChartOutlined />,
+                },
+                {
+                    label: '站场设备统计',
+                    key: 'stationEquipment',
+                    icon: <AreaChartOutlined />,
+                },
+                {
+                    label: '客运量数据',
+                    key: 'passengerVolumeData',
+                    icon: <AreaChartOutlined />,
                 }
             ]
         },

src/pages/passengerVolumeData/components/copy.jsx

@@ -0,0 +1,136 @@
+import './passengerVolumeDataModal.scss'
+import {Modal, Form, Input, Table, message, DatePicker} from 'antd';
+import axios from '@/utils/axios.js'
+import {useState, useEffect} from 'react'
+import dayjs from 'dayjs'
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+
+    const [data, setData] = useState([])
+
+
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row.id) {
+                newData.id = row.id
+            }
+            let {code} = await axios.post('/homePageEdit/editBusTrafficVolume', [newData])
+            if (code === 200) {
+                handleCancel()
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+        setData([])
+    };
+    const columns = [
+        {
+            title: '时间',
+            dataIndex: 'time',
+
+        },
+        {
+            title: '客运量',
+            dataIndex: 'trafficVolume',
+
+        },
+        {
+            title: '增长率',
+            dataIndex: 'growthRate',
+
+        },
+
+    ];
+    // 循环item的dom
+    let formItem = columns.map((item) => {
+        if (item.title === '客运量') {
+            return (
+                <Form.Item
+                    key={item.title}
+                    label={item.title}
+                    name={item.dataIndex}
+                    rules={[
+                        {
+                            required: true,
+                            type: 'object',
+                            message: `请输入${item.title}`,
+                        },
+                    ]}
+                >
+                    <DatePicker picker="month"/>
+                </Form.Item>
+            )
+        } else {
+            return (
+                <Form.Item
+                    key={item.title}
+                    label={item.title}
+                    name={item.dataIndex}
+                    rules={[
+                        {
+                            required: true,
+                            message: `请输入${item.title}`,
+                        },
+                    ]}
+
+                >
+                    <Input/>
+                </Form.Item>
+            )
+        }
+
+    })
+    // 表单
+    useEffect(() => {
+
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+            formData.time =dayjs(formData.time)
+            console.log(dayjs(formData.time))
+            setData(formData.valueList)
+            form.setFieldsValue(formData)
+
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id ? '修改数据' : '新增字典'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+                   width={900}
+                   cancelText="取消" okText="确定" wrapClassName="dict-modal">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+                    {formItem}
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/passengerVolumeData/components/passengerVolumeDataModal.jsx

@@ -0,0 +1,138 @@
+import './passengerVolumeDataModal.scss'
+import {Modal, Form, Input, Table, message, DatePicker} from 'antd';
+import axios from '@/utils/axios.js'
+import {useState, useEffect} from 'react'
+import dayjs from 'dayjs'
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+
+    const [data, setData] = useState([])
+
+
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row.id) {
+                newData.id = row.id
+            }
+            newData.time=  dayjs(newData.time).format('YYYY-MM')
+
+            let {code} = await axios.post('/homePageEdit/editBusTrafficVolume', [newData])
+            if (code === 200) {
+                handleCancel()
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+        setData([])
+    };
+    const columns = [
+        {
+            title: '时间',
+            dataIndex: 'time',
+
+        },
+        {
+            title: '客运量',
+            dataIndex: 'trafficVolume',
+
+        },
+        {
+            title: '增长率',
+            dataIndex: 'growthRate',
+
+        },
+
+    ];
+    // 循环item的dom
+    let formItem = columns.map((item) => {
+        if (item.title === '时间') {
+            return (
+                <Form.Item
+                    key={item.title}
+                    label={item.title}
+                    name={item.dataIndex}
+                    rules={[
+                        {
+                            required: true,
+                            type: 'object',
+                            message: `请输入${item.title}`,
+                        },
+                    ]}
+                >
+                    <DatePicker picker="month" style={{width:'100%'}} />
+                </Form.Item>
+            )
+        } else {
+            return (
+                <Form.Item
+                    key={item.title}
+                    label={item.title}
+                    name={item.dataIndex}
+                    rules={[
+                        {
+                            required: true,
+                            message: `请输入${item.title}`,
+                        },
+                    ]}
+
+                >
+                    <Input/>
+                </Form.Item>
+            )
+        }
+
+    })
+    // 表单
+    useEffect(() => {
+
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+            formData.time =dayjs(formData.time)
+            console.log(dayjs(formData.time))
+            setData(formData.valueList)
+            form.setFieldsValue(formData)
+
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id ? '修改数据' : '新增字典'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+                   width={900}
+                   cancelText="取消" okText="确定" wrapClassName="dict-modal">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+                    {formItem}
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/passengerVolumeData/components/passengerVolumeDataModal.scss

@@ -0,0 +1,5 @@
+.dict-modal{
+  .addrow{
+    margin-bottom: 10px;
+  }
+}

src/pages/passengerVolumeData/passengerVolumeData.jsx

@@ -0,0 +1,133 @@
+import {Table, Button, Select} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/passengerVolumeDataModal.jsx";
+import "./passengerVolumeData.scss";
+import axios from "@/utils/axios.js";
+import {useDispatch} from 'react-redux';
+import {setDictData} from '@/store/reducer.js';
+
+export default function PassengerVolumeData() {
+
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
+    const [selectData, setSelectData] = useState('1')
+
+    // 设置下拉框选项
+    function handleChange(v) {
+        setSelectData(v)
+
+    }
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+
+        getData()
+        dispatch(setDictData(data))
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+
+    // reduce状态
+    const dispatch = useDispatch();
+
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/homePage/getBusTrafficVolume",{params:{type:selectData}});
+        setData(data);
+
+    }
+
+
+    const columns = [
+        {
+            title: '时间',
+            dataIndex: 'time',
+
+        },
+        {
+            title: '客运量',
+            dataIndex: 'trafficVolume',
+
+        },
+        {
+            title: '增长率',
+            dataIndex: 'growthRate',
+
+        },
+
+        {
+            title: '操作',
+            render: (text, record) => (
+                <div className="btn">
+                    <Button type="primary" onClick={() => modify(record)}>
+                        修改
+                    </Button>
+
+                </div>
+            )
+        },
+
+    ];
+    useEffect(() => {
+        getData();
+    }, []);
+    // useEffect(()=>{
+    //     getData();
+    // },[selectData])
+    return (
+        <div className="passenger">
+            <div className="top">
+                {/*<div className="input">*/}
+
+                {/*    <Select*/}
+                {/*        value={selectData}*/}
+                {/*        style={{width: 120}}*/}
+                {/*        onChange={handleChange}*/}
+                {/*        options={[*/}
+                {/*            {value: '1', label: '月'},*/}
+                {/*            {value: '2', label: '年'},*/}
+
+                {/*        ]}*/}
+                {/*    />*/}
+
+
+                {/*</div>*/}
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        添加数据
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                pagination={{position: ["bottomRight"]}}
+                bordered={true}
+                rowKey="id"
+                columns={columns}
+
+            >
+
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/passengerVolumeData/passengerVolumeData.scss

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

src/pages/publicOpinion/components/publicOpinionModal.jsx

@@ -0,0 +1,169 @@
+import './publicOpinionModal.scss'
+import {Modal, Form, Input, Table, message, Button} from 'antd';
+import axios from '@/utils/axios.js'
+import {useState, useEffect} from 'react'
+import {snowflakeGenerator} from 'snowflake-id-js';
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+
+    const [data, setData] = useState([])
+
+
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            let arr = []
+            for (const newDataKey in newData) {
+                if (newDataKey !== 'companyNum' && newDataKey !== 'secureNum' && newDataKey !== 'feedbackNum' && newDataKey !== 'warningNum' && newDataKey !== 'warningSummary') {
+                    arr.push({[newDataKey]: newData[newDataKey]})
+                }
+            }
+
+            newData.warningSummary = JSON.stringify(arr)
+            newData.id = row.id
+            let {code} = await axios.post('/homePageEdit/editBusWarning', newData)
+            if (code === 200) {
+                handleCancel()
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+        setData([])
+    };
+    const columns = [
+        {
+            title: '报警总数',
+            dataIndex: 'warningNum',
+            key: 'id',
+        },
+        {
+            title: '报警企业总数',
+            dataIndex: 'companyNum',
+            key: 'id',
+        },
+        {
+            title: '待反馈数量',
+            dataIndex: 'feedbackNum',
+            key: 'id',
+        },
+        {
+            title: '待解除数量',
+            dataIndex: 'secureNum',
+            key: 'id',
+        },
+        {
+            title: '事故',
+            dataIndex: 'accident',
+            key: 'id',
+        },
+        {
+            title: '舆情',
+            dataIndex: 'sentiment',
+            key: 'id',
+        },
+        {
+            title: '高风险',
+            dataIndex: 'risk',
+            key: 'id',
+        },
+        {
+            title: '汛情',
+            dataIndex: 'flood',
+            key: 'id',
+        },
+        {
+            title: '网络检查',
+            dataIndex: 'network',
+            key: 'id',
+        },
+        {
+            title: '火险',
+            dataIndex: 'fire',
+            key: 'id',
+        },
+        {
+            title: '驾驶员报警',
+            dataIndex: 'warning',
+            key: 'id',
+        },
+        {
+            title: '充电',
+            dataIndex: 'charge',
+            key: 'id',
+        },
+        {
+            title: '电池高温',
+            dataIndex: 'battery',
+            key: 'id',
+        },
+
+    ];
+    // 循环item的dom
+    let formItem = columns.map((item) => {
+        return (
+            <Form.Item
+                key={item.title}
+                label={item.title}
+                name={item.dataIndex}
+                rules={[
+                    {
+                        required: true,
+                        message: `请输入${item.title}`,
+                    },
+                ]}
+
+            >
+                <Input/>
+            </Form.Item>
+        )
+    })
+    // 表单
+    useEffect(() => {
+
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+            setData(formData.valueList)
+            form.setFieldsValue(formData)
+
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id ? '修改数据' : '新增字典'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+                   width={900}
+                   cancelText="取消" okText="确定" wrapClassName="dict-modal">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+                    {formItem}
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/publicOpinion/components/publicOpinionModal.scss

@@ -0,0 +1,5 @@
+.dict-modal{
+  .addrow{
+    margin-bottom: 10px;
+  }
+}

src/pages/publicOpinion/publicOpinion.jsx

@@ -0,0 +1,188 @@
+import {Table, Button, Input, Popconfirm} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/publicOpinionModal.jsx";
+import "./publicOpinion.scss";
+import axios from "@/utils/axios.js";
+import {  useDispatch } from 'react-redux';
+import {  setDictData } from '@/store/reducer.js';
+const {Column} = Table;
+
+export default function PublicOpinion() {
+    // 顶部两个搜索
+    const [inputVal, setInputVal] = useState("");
+    const [keyVal, setKeyVal] = useState("");
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        // 置空input，然后存reduce
+        setInputVal('')
+        setKeyVal('')
+        getData()
+        dispatch(setDictData(data))
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+    // reduce状态
+    const dispatch = useDispatch();
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/homePage/getBusWarning",{params:{type:inputVal,name:keyVal}});
+        data.warningSummary= JSON.parse(data.warningSummary)
+
+        for (const item of data.warningSummary ) {
+
+            data[Object.keys(item)[0]]=item[Object.keys(item)[0]]
+        }
+        console.log(data)
+        setData([data]);
+
+    }
+
+    /**
+     * 删除页面
+     * @param data 删除每一条数据
+     * @returns {Promise<void>}
+     */
+    async function deleteRow(data) {
+        let {code} = await axios.get('/dict/deleteKey', {params: {id: data.id}})
+        if (code === 200) {
+            await getData()
+        }
+    }
+
+    const columns = [
+        {
+            title: '报警总数',
+            dataIndex: 'warningNum',
+            key: 'id',
+        },
+        {
+            title: '报警企业总数',
+            dataIndex: 'companyNum',
+            key: 'id',
+        },
+        {
+            title: '待反馈数量',
+            dataIndex: 'feedbackNum',
+            key: 'id',
+        },
+        {
+            title: '待解除数量',
+            dataIndex: 'secureNum',
+            key: 'id',
+        },
+        {
+            title: '事故',
+            dataIndex: 'accident',
+            key: 'id',
+        },
+        {
+            title: '舆情',
+            dataIndex: 'sentiment',
+            key: 'id',
+        },
+        {
+            title: '高风险',
+            dataIndex: 'risk',
+            key: 'id',
+        },
+        {
+            title: '汛情',
+            dataIndex: 'flood',
+            key: 'id',
+        },
+        {
+            title: '网络检查',
+            dataIndex: 'network',
+            key: 'id',
+        },
+        {
+            title: '火险',
+            dataIndex: 'fire',
+            key: 'id',
+        },
+        {
+            title: '驾驶员报警',
+            dataIndex: 'warning',
+            key: 'id',
+        },
+        {
+            title: '充电',
+            dataIndex: 'charge',
+            key: 'id',
+        },
+        {
+            title: '电池高温',
+            dataIndex: 'battery',
+            key: 'id',
+        },
+        {
+            title: '操作',
+           render:(text, record)=>(
+               <div className="btn">
+                   <Button type="primary" onClick={() => modify(record)}>
+                       修改
+                   </Button>
+
+               </div>
+           )
+        },
+
+    ];
+    useEffect(() => {
+        getData();
+    }, []);
+    return (
+        <div className="user">
+
+            <Table
+                dataSource={data}
+                pagination={{position: ["bottomRight"]}}
+                bordered={true}
+                rowKey="id"
+                columns={columns}
+                // expandable={{
+                //     expandedRowRender,
+                //
+                // }}
+            >
+                <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}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/publicOpinion/publicOpinion.scss

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

src/pages/stationEquipment/components/stationEquipmentModal.jsx

@@ -0,0 +1,130 @@
+import './stationEquipmentModal.scss'
+import {Modal, Form, Input, Table, message, Button} from 'antd';
+import axios from '@/utils/axios.js'
+import {useState, useEffect} from 'react'
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+
+    const [data, setData] = useState([])
+
+
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            newData.id = row.id
+            let {code} = await axios.post('/homePageEdit/editBusTotal', newData)
+            if (code === 200) {
+                handleCancel()
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+        setData([])
+    };
+    const columns = [
+        {
+            title: '设备车辆数量',
+            dataIndex: 'busNum',
+            key: 'id',
+        },
+        {
+            title: '线路数量',
+            dataIndex: 'lineNum',
+            key: 'id',
+        },
+        {
+            title: '场站数量',
+            dataIndex: 'stationNum',
+            key: 'id',
+        },
+        {
+            title: '中途站数量',
+            dataIndex: 'midwayStationNum',
+            key: 'id',
+        },
+        {
+            title: '班次数量',
+            dataIndex: 'classesNum',
+            key: 'id',
+        },
+        {
+            title: '总里程',
+            dataIndex: 'totalMileage',
+            key: 'id',
+        },
+        {
+            title: '入场率',
+            dataIndex: 'admissionRate',
+            key: 'id',
+        },
+
+    ];
+    // 循环item的dom
+    let formItem = columns.map((item) => {
+        return (
+            <Form.Item
+                key={item.title}
+                label={item.title}
+                name={item.dataIndex}
+                rules={[
+                    {
+                        required: true,
+                        message: `请输入${item.title}`,
+                    },
+                ]}
+
+            >
+                <Input/>
+            </Form.Item>
+        )
+    })
+    // 表单
+    useEffect(() => {
+
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+            setData(formData.valueList)
+            form.setFieldsValue(formData)
+
+
+        }
+    }, [row])
+
+    return (
+        <div className="form">
+
+            {contextHolder}
+            <Modal title={row?.id ? '修改数据' : '新增字典'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
+                   width={900}
+                   cancelText="取消" okText="确定" wrapClassName="dict-modal">
+                <Form
+                    name="statics"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+                    {formItem}
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationEquipment/components/stationEquipmentModal.scss

@@ -0,0 +1,5 @@
+.dict-modal{
+  .addrow{
+    margin-bottom: 10px;
+  }
+}

src/pages/stationEquipment/stationEquipment.jsx

@@ -0,0 +1,121 @@
+import {Table, Button, Input, Popconfirm} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/stationEquipmentModal.jsx";
+import "./stationEquipment.scss";
+import axios from "@/utils/axios.js";
+import {  useDispatch } from 'react-redux';
+import {  setDictData } from '@/store/reducer.js';
+const {Column} = Table;
+
+export default function StationEquipment() {
+
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+
+        getData()
+        dispatch(setDictData(data))
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+    // reduce状态
+    const dispatch = useDispatch();
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/homePage/getBusTotal");
+        setData([data]);
+
+    }
+
+
+    const columns = [
+        {
+            title: '设备车辆数量',
+            dataIndex: 'busNum',
+            key: 'id',
+        },
+        {
+            title: '线路数量',
+            dataIndex: 'lineNum',
+            key: 'id',
+        },
+        {
+            title: '场站数量',
+            dataIndex: 'stationNum',
+            key: 'id',
+        },
+        {
+            title: '中途站数量',
+            dataIndex: 'midwayStationNum',
+            key: 'id',
+        },
+        {
+            title: '班次数量',
+            dataIndex: 'classesNum',
+            key: 'id',
+        },
+        {
+            title: '总里程',
+            dataIndex: 'totalMileage',
+            key: 'id',
+        },
+        {
+            title: '入场率',
+            dataIndex: 'admissionRate',
+            key: 'id',
+        },
+
+        {
+            title: '操作',
+           render:(text, record)=>(
+               <div className="btn">
+                   <Button type="primary" onClick={() => modify(record)}>
+                       修改
+                   </Button>
+
+               </div>
+           )
+        },
+
+    ];
+    useEffect(() => {
+        getData();
+    }, []);
+    return (
+        <div className="user">
+
+            <Table
+                dataSource={data}
+                pagination={{position: ["bottomRight"]}}
+                bordered={true}
+                rowKey="id"
+                columns={columns}
+
+            >
+
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationEquipment/stationEquipment.scss

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

src/pages/user/user.jsx

@@ -13,7 +13,12 @@ export default function User() {
     // 是否展示弹框
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [row, setRow] = useState({});
-
+    // 当前页数
+    const [current,setCurrent] =useState(1)
+    // 每页条数
+    const pageSize=15
+    // 总条数
+    let [total,setTotal] = useState(0)
     // 新增用户页面
     function addUser() {
         setRow([]);
@@ -30,13 +35,13 @@ export default function User() {
     function modify(data) {
         setRow(data);
         setIsModalOpen(true);
-
     }
 
     // 获取数据
     async function getData() {
-        let {data} = await axios.get("/sys/select");
-        setData(data);
+        let {data} = await axios.get("/sys/select",{params:{pageSize,pageNum:current}});
+        setData(data.list);
+        setTotal(data.total)
     }
 
     /**
@@ -51,9 +56,15 @@ export default function User() {
         }
     }
 
+    function changeSize(e){
+
+        setCurrent(e)
+
+    }
+
     useEffect(() => {
         getData();
-    }, []);
+    }, [current]);
     return (
         <div className="user">
             <div className="top">
@@ -72,7 +83,12 @@ export default function User() {
             </div>
             <Table
                 dataSource={data}
-                pagination={{position: ["bottomRight"]}}
+                pagination={{
+                    total:total , // 数据的总数
+                    current: current, // 当前页数
+                    pageSize: pageSize, // 每页显示的数量
+                    onChange:changeSize
+                }}
                 bordered={true}
                 rowKey="id"
             >