提交修改

src/App.css

@@ -1,41 +1,52 @@
 #root {
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
 }
 
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
 }
+
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+    filter: drop-shadow(0 0 2em #646cffaa);
 }
+
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+    filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+    a:nth-of-type(2) .logo {
+        animation: logo-spin infinite 20s linear;
+    }
 }
 
+
 .card {
-  padding: 2em;
+    padding: 2em;
 }
 
 .read-the-docs {
-  color: #888;
+    color: #888;
 }
+
+* {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}

src/assets/css/clear.css

@@ -23,6 +23,7 @@ td {
     margin: 0;
     padding: 0;
 }
+
 /* 设置页面的统一的样式 */
 body {
     /* font: 12px "宋体", "Arial Narrow", HELVETICA; */
@@ -30,45 +31,55 @@ body {
     /* background-color: #081b3e; */
     word-wrap: break-word;
 }
+
 /* 去除a标签默认样式 */
 a {
     text-decoration: none;
 }
+
 /* i使斜体的文字正常 em使强调的内容正常 */
 em,
 i {
     font-style: normal;
 }
+
 strong,
 b {
     font-weight: 100;
 }
+
 /* 去除li元素默认的小圆点 */
 li {
     list-style: none;
 }
+
 /* 去除图片的margin和padding */
 img {
     display: block;
 }
+
 /* 设置单元格为单线样式 */
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
+
 /* 首行缩进连两个单位 */
 .indent {
     text-indent: 2em;
 }
+
 .noborder {
     border: 0;
 }
+
 /* 省略号 */
 .ellipsis {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
 /* 清除浮动 */
 .clear::after {
     content: ".";
@@ -78,3 +89,14 @@ table {
     overflow: hidden;
     visibility: hidden;
 }
+
+
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+    width: 0; /* Chrome/Safari/Opera */
+}
+
+/* Firefox */
+body {
+    scrollbar-width: none; /* Firefox */
+}

src/index.css

@@ -1,69 +1,79 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
 }
+
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  width: 100vw;
-  height: 100vh;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    width: 100vw;
+    height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+    font-size: 3.2em;
+    line-height: 1.1;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
 }
+
 button:hover {
-  border-color: #646cff;
+    border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
+
+* {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
 }

src/index.jsx

@@ -58,6 +58,15 @@ import InformationOfFacilities
 import ElectronicLicensePlate from "@/pages/facilityManagementChild/electronicLicensePlate/electronicLicensePlate.jsx";
 import VehiclesModelDisplay from "@/pages/facilityManagementChild/vehiclesModelDisplay/vehiclesModelDisplay.jsx";
 import CarWasher from "@/pages/facilityManagementChild/carWasher/carWasher.jsx";
+import StationBasicInformation
+    from "@/pages/stationManagementInformation/stationBasicInformation/stationBasicInformation.jsx";
+import AreaDistrbution from "@/pages/stationManagementInformation/areaDistrbution/areaDistrbution.jsx";
+import SiteConstructionTime from "@/pages/stationManagementInformation/siteConstructionTime/siteConstructionTime.jsx";
+import SiteOwnership from "@/pages/stationManagementInformation/siteOwnership/siteOwnership.jsx";
+import RegionalDistribution from "@/pages/stationManagementInformation/regionalDistribution/regionalDistribution.jsx";
+import TypeDistribution from "@/pages/stationManagementInformation/typeDistribution/typeDistribution.jsx";
+import Usage from "@/pages/stationManagementInformation/usage/usage.jsx";
+import MaintenanceDetails from "@/pages/MaintenanceStatisticsChild/maintenanceDetails/maintenanceDetails.jsx";
 
 
 ReactDOM.createRoot(document.getElementById("root")).render(
@@ -117,6 +126,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
                             <Route path='statusClassification' element={<StatusClassification/>}></Route>
                             <Route path='maintenanceStatus' element={<MaintenanceStatus/>}></Route>
                             <Route path='mainConsumPtionType' element={<MainConsumPtionType/>}></Route>
+                            <Route path='maintenanceDetails' element={<MaintenanceDetails/>}></Route>
                             {/*  设施管理  */}
                             <Route path='vehiclesComponents' element={<VehiclesComponents/>}></Route>
                             <Route path='chargingStation' element={<ChargingStation/>}></Route>
@@ -124,6 +134,14 @@ ReactDOM.createRoot(document.getElementById("root")).render(
                             <Route path='electronicLicensePlate' element={<ElectronicLicensePlate/>}></Route>
                             <Route path='vehiclesModelDisplay' element={<VehiclesModelDisplay/>}></Route>
                             <Route path='carWasher' element={<CarWasher/>}></Route>
+                            {/*    站场管理*/}
+                            <Route path='stationBasicInformation' element={<StationBasicInformation/>}></Route>
+                            <Route path='areaDistrbution' element={<AreaDistrbution/>}></Route>
+                            <Route path='siteConstructionTime' element={<SiteConstructionTime/>}></Route>
+                            <Route path='siteOwnership' element={<SiteOwnership/>}></Route>
+                            <Route path='regionalDistribution' element={<RegionalDistribution/>}></Route>
+                            <Route path='typeDistribution' element={<TypeDistribution/>}></Route>
+                            <Route path='usage' element={<Usage/>}></Route>
                         </Route>
                         {/**这里重定向到home页面 */}
                         <Route path="*" element={<Navigate to="/statisticsData" replace/>}></Route>

src/pages/MaintenanceStatisticsChild/maintenanceDetails/components/modal.jsx

@@ -0,0 +1,206 @@
+import {DatePicker, Form, Input, message, Modal, Select,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+import dayjs from "dayjs";
+
+
+export default function ModalHooks({isModalOpen, closeModal, row, option}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: '三电故障', label: '三电故障'},
+        {value: '地盘故障', label: '地盘故障'},
+        {value: '车容车貌', label: '车容车貌'},
+        {value: '车载设备', label: '车载设备'},
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            formData.time = dayjs(formData.time).format('YYYY-MM-DD HH:mm:ss')
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/maintenanceEdit/editMaintenanceDetail', [formData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    useEffect(() => {
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+            formData.time = dayjs(formData.time)
+            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="time"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                                type: 'object'
+                            },
+                        ]}
+
+                    >
+                        <DatePicker showTime style={{width: '100%'}}/>
+                    </Form.Item>
+                    <Form.Item
+                        label="故障类型"
+                        name="faultReason"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+
+                    >
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item
+                        label="维保结果"
+                        name="result"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+
+                    >
+                        <Input/>
+                    </Form.Item>
+                    <Form.Item
+                        label="车队"
+                        name="fleet"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="维修点位"
+                        name="maintenanceLocation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="车辆编号"
+                        name="code"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="车牌号"
+                        name="licensePlate"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="维修类型"
+                        name="maintenanceType"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/MaintenanceStatisticsChild/maintenanceDetails/components/modal.scss

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

src/pages/MaintenanceStatisticsChild/maintenanceDetails/maintenanceDetails.jsx

@@ -0,0 +1,185 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./maintenanceDetails.scss";
+import axios from "@/utils/axios.js";
+import DeleteButton from "@/components/delete.jsx";
+
+const {Column} = Table;
+
+export default function MaintenanceDetails() {
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    // 一行的数据
+
+    const [row, setRow] = useState({});
+    // 设置下拉框绑定的值
+    const [val, setVal] = useState('')
+
+    // 切换页数
+    function changeSize(e) {
+
+        setCurrent(e)
+
+    }
+
+    // 当前页数
+    const [current, setCurrent] = useState(1)
+    // 每页条数
+    const pageSize = 10
+    // 总条数
+    let [total, setTotal] = useState(0)
+
+    // 新增用户页面
+    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", {params: {hasModel: 1}})
+        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() {
+
+        let {data} = await axios.get("/maintenance/getMaintenanceDetail", {
+            params: {
+                pageNum: current,
+                startTime: '1999-01-22 17:06:00',
+                endTime: '2030-01-23 17:06:00'
+            }
+        });
+        setData(data.list);
+        setTotal(data.total)
+        await getLineData()
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+                
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    // 设置线路名称
+    function setText(text) {
+        let it = option.find((item) => item.value === text)?.label
+        return it
+    }
+
+    useEffect(() => {
+        getData()
+
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增维保明细
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+
+                pagination={{
+                    total: total, // 数据的总数
+                    current: current, // 当前页数
+                    pageSize: pageSize, // 每页显示的数量
+                    onChange: changeSize
+                }}
+            >
+                <Column title="时间" dataIndex="time" key="id"></Column>
+                <Column title="线路名称" dataIndex="lineId" key="id" render={(text) => (
+                    setText(text)
+                )
+                }></Column>
+                <Column title="车牌号" dataIndex="licensePlate" key="id"></Column>
+                <Column title="故障原因" dataIndex="faultReason" key="id"></Column>
+                <Column title="维修类型" dataIndex="maintenanceType" key="id"></Column>
+                <Column title="维修点位" dataIndex="maintenanceLocation" key="id"></Column>
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <DeleteButton url='/maintenanceEdit/delMaintenanceDetail' id={text}
+                                          getData={getData}></DeleteButton>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+                option={option}
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/MaintenanceStatisticsChild/maintenanceDetails/maintenanceDetails.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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/home/home.jsx

@@ -90,6 +90,8 @@ export default function Home() {
             label: '车辆维保状态', key: 'maintenanceStatus', icon: <FileDoneOutlined/>,
         }, {
             label: '消费类型', key: 'mainConsumPtionType', icon: <FileDoneOutlined/>,
+        }, {
+            label: '维保明细', key: 'maintenanceDetails', icon: <FileDoneOutlined/>,
         },]
     }, {
         label: '设施管理', key: 'facilityManagementChild', icon: <DesktopOutlined/>, children: [{
@@ -105,13 +107,30 @@ export default function Home() {
         }, {
             label: '洗车机', key: 'carWasher', icon: <AreaChartOutlined/>,
         },]
-    }, {
-        label: '基础信息配置', key: 'setting', icon: <SettingOutlined/>, children: [{
-            label: '用户管理', key: 'user', icon: <UserOutlined/>,
-        }, {
-            label: '字典管理', key: 'dict', icon: <FileDoneOutlined/>,
+    },
+        {
+            label: '站场管理信息', key: 'stationManagementInformation', icon: <DesktopOutlined/>, children: [{
+                label: '站场基本信息', key: 'stationBasicInformation', icon: <AreaChartOutlined/>,
+            }, {
+                label: '面积分布', key: 'areaDistrbution', icon: <AreaChartOutlined/>,
+            }, {
+                label: '场地建设时间', key: 'siteConstructionTime', icon: <AreaChartOutlined/>,
+            }, {
+                label: '场地权属情况', key: 'siteOwnership', icon: <AreaChartOutlined/>,
+            }, {
+                label: '区域分布', key: 'regionalDistribution', icon: <AreaChartOutlined/>,
+            }, {
+                label: '类型分布', key: 'typeDistribution', icon: <AreaChartOutlined/>,
+            }, {
+                label: '使用情况', key: 'usage', icon: <AreaChartOutlined/>,
+            },]
+        }, {
+            label: '基础信息配置', key: 'setting', icon: <SettingOutlined/>, children: [{
+                label: '用户管理', key: 'user', icon: <UserOutlined/>,
+            }, {
+                label: '字典管理', key: 'dict', icon: <FileDoneOutlined/>,
+            }]
         }]
-    }]
     /**
      * 电机左边弹框跳转页面
      * @param e 电机的数据

src/pages/home/home.scss

@@ -1,12 +1,14 @@
 .home {
   width: 100vw;
   height: 100vh;
-  .head{
+
+  .head {
     text-align: center;
     border-bottom: 1px solid #ccc;
     line-height: 50px;
     position: relative;
-    .ava{
+
+    .ava {
       position: absolute;
       right: 2%;
       top: 0px;
@@ -14,7 +16,8 @@
       justify-content: center;
       align-items: center;
       cursor: pointer;
-      p{
+
+      p {
         font-size: 18px;
         margin-left: 10px;
       }
@@ -22,11 +25,21 @@
     }
 
   }
+
   .body {
     display: flex;
+    height: calc(100% - 51px);
+    overflow: hidden;
+
     .menu {
       width: 200px;
       height: 100%;
+      overflow: auto;
+
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+
+
     }
 
     .contetn {

src/pages/linePageChild/basicInfomationOfTheLine/basicInfomationOfTheLine.jsx

@@ -48,7 +48,7 @@ export default function BasicInfomationOfTheLine() {
      */
     async function getLineData() {
 
-        let {data} = await await axios.get("/busLine/getList", { params: { hasModel :1}})
+        let {data} = await axios.get("/busLine/getList", {params: {hasModel: 1}})
         setLineList(data)
         let option = data.map(item => {
             return {

src/pages/linePageChild/lineDispatch/lineDispatch.jsx

@@ -82,7 +82,9 @@ export default function LineDispatch() {
     // 获取数据
     async function getData() {
         if (!val) return
-        let {data} = await axios.get("/lineOperate/getBusLineOperate", {params: {lineId: val}});
+        let { data } = await axios.get("/lineOperate/getBusLineOperate", {
+          params: { lineId: val, pageNum: current },
+        });
         if (!data) {
             setData([]);
             return

src/pages/stationManagementInformation/areaDistrbution/areaDistrbution.jsx

@@ -0,0 +1,118 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./areaDistrbution.scss";
+import axios from "@/utils/axios.js";
+import DeleteButton from "@/components/delete.jsx";
+
+const {Column} = Table;
+
+export default function AreaDistrbution() {
+    // 页面数据
+    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);
+
+    }
+
+
+    // 获取数据
+    async function getData() {
+
+        let {data} = await axios.get("/getStationArea");
+
+        setData(data);
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增面积分布
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={false}
+            >
+                <Column title="面积类型" dataIndex="areaType" key="id"></Column>
+                <Column title="人次（万人)" dataIndex="number" key="id"></Column>
+
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <DeleteButton url='/delStationArea' id={text}
+                                          getData={getData}></DeleteButton>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationManagementInformation/areaDistrbution/areaDistrbution.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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/stationManagementInformation/areaDistrbution/components/modal.jsx

@@ -0,0 +1,118 @@
+import {Form, Input, InputNumber, message, Modal,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: 1, label: '行驶中'},
+        {value: 2, label: '维保'},
+        {value: 3, label: '固定包车'},
+        {value: 4, label: '临时包车'},
+        {value: 5, label: '充电'},
+        {value: 6, label: '公务'},
+
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/editStationArea', [formData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    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="areaType"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="数量"
+                        name="number"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationManagementInformation/areaDistrbution/components/modal.scss

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

src/pages/stationManagementInformation/regionalDistribution/components/modal.jsx

@@ -0,0 +1,118 @@
+import {Form, Input, InputNumber, message, Modal,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: 1, label: '行驶中'},
+        {value: 2, label: '维保'},
+        {value: 3, label: '固定包车'},
+        {value: 4, label: '临时包车'},
+        {value: 5, label: '充电'},
+        {value: 6, label: '公务'},
+
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/editStationRegion', [formData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    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="region"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="客流量"
+                        name="passengerFlow"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationManagementInformation/regionalDistribution/components/modal.scss

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

src/pages/stationManagementInformation/regionalDistribution/regionalDistribution.jsx

@@ -0,0 +1,118 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./regionalDistribution.scss";
+import axios from "@/utils/axios.js";
+import DeleteButton from "@/components/delete.jsx";
+
+const {Column} = Table;
+
+export default function RegionalDistribution() {
+    // 页面数据
+    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);
+
+    }
+
+
+    // 获取数据
+    async function getData() {
+
+        let {data} = await axios.get("/getStationRegion");
+
+        setData(data);
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增区域分布
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={false}
+            >
+                <Column title="区域" dataIndex="region" key="id"></Column>
+                <Column title="客流量" dataIndex="passengerFlow" key="id"></Column>
+
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <DeleteButton url='/delStationRegion' id={text}
+                                          getData={getData}></DeleteButton>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationManagementInformation/regionalDistribution/regionalDistribution.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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/stationManagementInformation/siteConstructionTime/components/modal.jsx

@@ -0,0 +1,118 @@
+import {Form, Input, InputNumber, message, Modal,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: 1, label: '行驶中'},
+        {value: 2, label: '维保'},
+        {value: 3, label: '固定包车'},
+        {value: 4, label: '临时包车'},
+        {value: 5, label: '充电'},
+        {value: 6, label: '公务'},
+
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/editStationConstruct', [formData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    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="constructSituation"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="数量"
+                        name="number"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationManagementInformation/siteConstructionTime/components/modal.scss

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

src/pages/stationManagementInformation/siteConstructionTime/siteConstructionTime.jsx

@@ -0,0 +1,118 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./siteConstructionTime.scss";
+import axios from "@/utils/axios.js";
+import DeleteButton from "@/components/delete.jsx";
+
+const {Column} = Table;
+
+export default function SiteConstructionTime() {
+    // 页面数据
+    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);
+
+    }
+
+
+    // 获取数据
+    async function getData() {
+
+        let {data} = await axios.get("/getStationConstruct");
+
+        setData(data);
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增场地建设时间
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={false}
+            >
+                <Column title="建设情况" dataIndex="constructSituation" key="id"></Column>
+                <Column title="人次（万人)" dataIndex="number" key="id"></Column>
+
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <DeleteButton url='/delStationConstruct' id={text}
+                                          getData={getData}></DeleteButton>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationManagementInformation/siteConstructionTime/siteConstructionTime.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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/stationManagementInformation/siteOwnership/components/modal.jsx

@@ -0,0 +1,118 @@
+import {Form, Input, InputNumber, message, Modal,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: 1, label: '行驶中'},
+        {value: 2, label: '维保'},
+        {value: 3, label: '固定包车'},
+        {value: 4, label: '临时包车'},
+        {value: 5, label: '充电'},
+        {value: 6, label: '公务'},
+
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/editStationOwnership', [formData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    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="ownership"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="数量"
+                        name="number"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationManagementInformation/siteOwnership/components/modal.scss

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

src/pages/stationManagementInformation/siteOwnership/siteOwnership.jsx

@@ -0,0 +1,118 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./siteOwnership.scss";
+import axios from "@/utils/axios.js";
+import DeleteButton from "@/components/delete.jsx";
+
+const {Column} = Table;
+
+export default function SiteOwnership() {
+    // 页面数据
+    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);
+
+    }
+
+
+    // 获取数据
+    async function getData() {
+
+        let {data} = await axios.get("/getStationOwnership");
+
+        setData(data);
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增场地权属情况
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={false}
+            >
+                <Column title="权属情况" dataIndex="ownership" key="id"></Column>
+                <Column title="人次（万人)" dataIndex="number" key="id"></Column>
+
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <DeleteButton url='/delStationOwnership' id={text}
+                                          getData={getData}></DeleteButton>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationManagementInformation/siteOwnership/siteOwnership.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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/stationManagementInformation/stationBasicInformation/components/modal.jsx

@@ -0,0 +1,192 @@
+import {Form, InputNumber, message, Modal,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: '保养', label: '保养'},
+        {value: '维修', label: '维修'}
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/editStationStatistics', formData)
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    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="maintenanceNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}/>
+                    </Form.Item>
+                    <Form.Item
+                        label="充电站（个）"
+                        name="chargingNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="场站数量"
+                        name="stationNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="静态停车（辆）"
+                        name="parkNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="充电（辆）"
+                        name="chargeVehicle"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="发车线路（条）"
+                        name="lineNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="入场车辆（辆）"
+                        name="vehicleNum"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                    <Form.Item
+                        label="总面积（万m²）"
+                        name="totalArea"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationManagementInformation/stationBasicInformation/components/modal.scss

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

src/pages/stationManagementInformation/stationBasicInformation/stationBasicInformation.jsx

@@ -0,0 +1,123 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./stationBasicInformation.scss";
+import axios from "@/utils/axios.js";
+
+const {Column} = Table;
+
+export default function StationBasicInformation() {
+    // 页面数据
+    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);
+
+    }
+
+
+    // 获取数据
+    async function getData() {
+
+        let {data} = await axios.get("/getStationStatistics");
+        if (!data) {
+            setData(null)
+            return
+        }
+        setData([data]);
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                {/*<div className="button">*/}
+                {/*    <Button type="primary" onClick={addUser}>*/}
+                {/*        新增客流分布*/}
+                {/*    </Button>*/}
+                {/*</div>*/}
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={false}
+            >
+                <Column title="维保(辆)" dataIndex="maintenanceNum" key="id"></Column>
+                <Column title="充电站（个）" dataIndex="chargingNum" key="id"></Column>
+                <Column title="场站数量" dataIndex="stationNum" key="id"></Column>
+                <Column title="静态停车（辆）" dataIndex="parkNum" key="id"></Column>
+                <Column title="充电（辆））" dataIndex="chargeVehicle" key="id"></Column>
+                <Column title="发车线路（条）" dataIndex="lineNum" key="id"></Column>
+                <Column title="入场车辆（辆）" dataIndex="vehicleNum" key="id"></Column>
+                <Column title="总面积（万m²）" dataIndex="totalArea" key="id"></Column>
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            {/*<DeleteButton url='/maintenanceEdit/delMaintenanceLocationNum' id={text}*/}
+                            {/*              getData={getData}></DeleteButton>*/}
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationManagementInformation/stationBasicInformation/stationBasicInformation.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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/stationManagementInformation/typeDistribution/components/modal.jsx

@@ -0,0 +1,118 @@
+import {Form, Input, InputNumber, message, Modal,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: 1, label: '行驶中'},
+        {value: 2, label: '维保'},
+        {value: 3, label: '固定包车'},
+        {value: 4, label: '临时包车'},
+        {value: 5, label: '充电'},
+        {value: 6, label: '公务'},
+
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/editStationTypes', [formData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    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="type"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="数量"
+                        name="number"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationManagementInformation/typeDistribution/components/modal.scss

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

src/pages/stationManagementInformation/typeDistribution/typeDistribution.jsx

@@ -0,0 +1,118 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./typeDistribution.scss";
+import axios from "@/utils/axios.js";
+import DeleteButton from "@/components/delete.jsx";
+
+const {Column} = Table;
+
+export default function TypeDistribution() {
+    // 页面数据
+    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);
+
+    }
+
+
+    // 获取数据
+    async function getData() {
+
+        let {data} = await axios.get("/getStationTypes");
+
+        setData(data);
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增类型分布
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={false}
+            >
+                <Column title="类型" dataIndex="type" key="id"></Column>
+                <Column title="数量" dataIndex="number" key="id"></Column>
+
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <DeleteButton url='/delStationTypes' id={text}
+                                          getData={getData}></DeleteButton>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationManagementInformation/typeDistribution/typeDistribution.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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/stationManagementInformation/usage/components/modal.jsx

@@ -0,0 +1,117 @@
+import {Form, Input, InputNumber, message, Modal,} from 'antd';
+import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
+import './modal.scss'
+
+
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 下拉框数值
+    let passengerOption = [
+        {value: 1, label: '行驶中'},
+        {value: 2, label: '维保'},
+        {value: 3, label: '固定包车'},
+        {value: 4, label: '临时包车'},
+        {value: 5, label: '充电'},
+        {value: 6, label: '公务'},
+
+    ]
+    //状态下拉框
+    const status = [
+        {value: 1, label: '运营'},
+        {value: 2, label: '非运营'},
+    ]
+
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                formData.id = row.id
+            }
+            let {code, message} = await axios.post('/editStationUse', [formData])
+            if (code === 200) {
+                messageApi.success(message)
+                handleCancel()
+            } else {
+                messageApi.error(message)
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    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="useType"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+                    >
+                        <Input style={{width: '100%'}}></Input>
+                    </Form.Item>
+                    <Form.Item
+                        label="数量"
+                        name="number"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入',
+                            },
+                        ]}
+
+                    >
+                        <InputNumber style={{width: '100%'}}></InputNumber>
+                    </Form.Item>
+
+
+                </Form>
+
+            </Modal>
+        </div>
+    )
+
+
+}

src/pages/stationManagementInformation/usage/components/modal.scss

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

src/pages/stationManagementInformation/usage/usage.jsx

@@ -0,0 +1,118 @@
+import {Button, Table} from "antd";
+import {useEffect, useState} from "react";
+import ModalHooks from "./components/modal.jsx";
+import "./usage.scss";
+import axios from "@/utils/axios.js";
+import DeleteButton from "@/components/delete.jsx";
+
+const {Column} = Table;
+
+export default function Usage() {
+    // 页面数据
+    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);
+
+    }
+
+
+    // 获取数据
+    async function getData() {
+
+        let {data} = await axios.get("/getStationUse");
+
+        setData(data);
+
+    }
+
+    // 设置类型文字
+    function setType(text) {
+        switch (text) {
+            case 1:
+                return "行驶中";
+            case 2:
+                return "维保";
+            case 3:
+                return "固定包车";
+            case 4:
+                return "临时包车";
+            case 5:
+                return "充电";
+            case 6:
+                return "公务";
+
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="passenger">
+            <div className="top">
+
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>
+                        新增使用情况
+                    </Button>
+                </div>
+            </div>
+            <Table
+                dataSource={data}
+                bordered={true}
+                rowKey="id"
+                pagination={false}
+            >
+                <Column title="使用情况" dataIndex="useType" key="id"></Column>
+                <Column title="数量" dataIndex="number" key="id"></Column>
+
+
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <DeleteButton url='/delStationUse' id={text}
+                                          getData={getData}></DeleteButton>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+
+                val={val}
+            ></ModalHooks>
+        </div>
+    );
+}

src/pages/stationManagementInformation/usage/usage.scss

@@ -0,0 +1,26 @@
+.passenger{
+  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;
+}
+}