diff --git a/src/pages/NewEnergy/ChargingMgm/BillingRule/dataSource.js b/src/pages/NewEnergy/ChargingMgm/BillingRule/dataSource.js
new file mode 100644
index 0000000..99b73a3
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/BillingRule/dataSource.js
@@ -0,0 +1,183 @@
+//用来存储表头的js文件
+import React from "react";
+import { Button } from "antd";
+//支付记录的表头
+export const payRecordColumns = [
+  {
+    title: "序号",
+    dataIndex: "id",
+    key: "id",
+    align: "center",
+    render: (text, record, index) => index + 1,
+  },
+  {
+    title: "订单ID",
+    dataIndex: "order_id",
+    key: "order_id",
+    align: "center",
+  },
+  {
+    title: "入场时间",
+    dataIndex: "admission_time",
+    key: "admission_time",
+    align: "center",
+  },
+  {
+    title: "计费时间",
+    dataIndex: "charging_time",
+    key: "charging_time",
+    align: "center",
+  },
+  {
+    title: "支付时间",
+    dataIndex: "pay_time",
+    key: "pay_time",
+    align: "center",
+  },
+  {
+    title: "应收金额",
+    dataIndex: "receivable_amount",
+    key: "receivable_amount",
+    align: "center",
+  },
+  {
+    title: "优惠金额",
+    dataIndex: "discount_amount",
+    key: "discount_amount",
+    align: "center",
+  },
+  {
+    title: "实付金额",
+    dataIndex: "paid_in_money",
+    key: "paid_in_money",
+    align: "center",
+  },
+  {
+    title: "支付类型",
+    dataIndex: "pay_type_name",
+    key: "pay_type_name",
+    align: "center",
+  },
+  {
+    title: "支付渠道",
+    dataIndex: "payment_channels",
+    key: "payment_channels",
+    align: "center",
+  },
+  {
+    title: "支付设备",
+    dataIndex: "payment_equipment",
+    key: "payment_equipment",
+    align: "center",
+  },
+  {
+    title: "支付人",
+    dataIndex: "pay_person",
+    key: "pay_person",
+    align: "center",
+  },
+  {
+    title: "付款路段",
+    dataIndex: "pay_road",
+    key: "pay_road",
+    align: "center",
+  },
+  {
+    title: "第三方流水ID",
+    dataIndex: "third_party_flow_id",
+    key: "third_party_flow_id",
+    align: "center",
+  },
+];
+//退款订单的表头
+export const refundRecordColumns = [
+  {
+    title: "序号",
+    dataIndex: "id",
+    key: "id",
+    align: "center",
+    render: (text, record, index) => index + 1,
+  },
+  {
+    title: "退款方式",
+    dataIndex: "refund_type",
+    key: "refund_type",
+    align: "center",
+  },
+  {
+    title: "支付渠道",
+    dataIndex: "pay_road",
+    key: "pay_road",
+    align: "center",
+  },
+  {
+    title: "支付设备",
+    dataIndex: "paymentDevice",
+    key: "paymentDevice",
+    align: "center",
+  },
+  {
+    title: "退款原因",
+    dataIndex: "reason",
+    key: "reason",
+    align: "center",
+  },
+  {
+    title: "退款金额",
+    dataIndex: "refund_amount",
+    key: "refund_amount",
+    align: "center",
+  },
+  {
+    title: "申请人",
+    dataIndex: "application_person",
+    key: "application_person",
+    align: "center",
+  },
+  {
+    title: "申请时间",
+    dataIndex: "application_time",
+    key: "application_time",
+    align: "center",
+  },
+  {
+    title: "退款时间",
+    dataIndex: "refund_time",
+    key: "refund_time",
+    align: "center",
+  },
+];
+//操作记录
+export const operatorRecordColumns = [
+  {
+    title: "序号",
+    dataIndex: "id",
+    key: "id",
+    align: "center",
+    render: (text, record, index) => index + 1,
+  },
+  {
+    title: "操作类型",
+    dataIndex: "type",
+    key: "type",
+    align: "center",
+  },
+  {
+    title: "操作来源",
+    dataIndex: "source",
+    key: "source",
+    align: "center",
+  },
+  {
+    title: "操作人/设备",
+    dataIndex: "object",
+    key: "object",
+    align: "center",
+  },
+  {
+    title: "操作时间",
+    dataIndex: "time",
+    key: "time",
+    align: "center",
+  },
+];
diff --git a/src/pages/NewEnergy/ChargingMgm/BillingRule/index.jsx b/src/pages/NewEnergy/ChargingMgm/BillingRule/index.jsx
new file mode 100644
index 0000000..7fbec04
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/BillingRule/index.jsx
@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const BillingRule = loadable(() => import("./loadable"))
+export default (pros) => <BillingRule {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss b/src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss
new file mode 100644
index 0000000..9a8202a
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss
@@ -0,0 +1,238 @@
+@import "@/assets/css/mixin.scss";
+$color-container-bg: var(--color-container-bg);
+$color-user-list-bg: var(--color-user-list-bg);
+$color-text: var(--color-text);
+$color-primary: var(--color-primary);
+
+.ant-tabs {
+  margin-bottom: 16px;
+
+  .ant-tabs-nav {
+    margin-bottom: 0 !important;
+
+    &::before {
+      border-bottom: 1px solid var(--color-card-line) !important;
+    }
+  }
+
+  .ant-tabs-nav-wrap {
+    width: 100%;
+    box-sizing: content-box;
+
+    .ant-tabs-nav-list {
+      width: 340px;
+
+      .ant-tabs-ink-bar {
+        height: 3px;
+        background-color: #00ccff;
+      }
+
+      .ant-tabs-tab {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        padding-bottom: 10px;
+        text-align: center;
+        cursor: pointer;
+        font-size: 14px !important;
+        font-family: MicrosoftYaHei;
+        text-align: center;
+        letter-spacing: 0.7px;
+      }
+
+      .ant-tabs-tab-active {
+        div {
+          color: #00ccff;
+        }
+      }
+    }
+  }
+}
+
+.ant-input::-webkit-input-placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-input::-moz-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list  .ant-btn-primary {
+  width: 68px;
+  height: 30px;
+  background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+  border-radius: 4px;
+}
+.ant-input:-ms-input-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th {
+  background-color: #616b83 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td {
+  background-color: #3e4557 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td {
+  background-color: #3e4557 !important;
+}
+.ant-input::placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-select-selection-placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+  background: var(--color-input-disabled-bg);
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled .ant-select-arrow {
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background-color: var(--color-input-disabled-bg);
+  color: var(--color-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ant-select-multiple {
+  .ant-select-selector {
+    .ant-select-selection-item {
+      background-color: var(--color-bg-body);
+      border-color: var(--color-border);
+
+      .ant-select-selection-item-remove {
+        color: var(--color-text);
+      }
+    }
+  }
+}
+
+.ant-select-arrow {
+  color: var(--color-text);
+}
+
+.ant-select-clear {
+  border-radius: 50%;
+}
+
+.ant-select-dropdown-menu {
+  background-color: var(--color-input-bg);
+
+  .ant-select-dropdown-menu-item {
+    color: var(--color-text);
+
+    &.ant-select-dropdown-menu-item-active {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &.ant-select-dropdown-menu-item-selected {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &:hover {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+  }
+}
+
+.ant-select-selector {
+  background-color: var(--color-search-list-item-bg) !important;
+  box-shadow: none !important;
+  border-radius: 4px;
+  color: var(--color-search-list-item-value);
+  border-color: var(--color-search-list-item-bd) !important;
+}
+
+.ant-select-selection {
+  background-color: var(--color-input-bg);
+  box-shadow: none;
+  color: var(--color-text);
+  // border-color:var(--checkable-tag-border);
+}
+
+.ant-form-horizontal .ant-form-item-label {
+  label {
+    display: inline-block;
+    word-wrap: break-word;
+    white-space: normal;
+  }
+}
+
+.ant-picker {
+  width: 100%;
+  background-color: var(--color-search-list-item-bg);
+  border-color: var(--color-border);
+}
+
+// .yisa-table {
+//   width: 100%;
+
+//   .ant-table-thead {
+//     th {
+//       background: var(--color-table-header-bg) !important;
+//     }
+//   }
+
+//   .ant-table-tbody {
+//     td {
+//       background: var(--color-table-body-bg) !important;
+//       border-bottom-color: var(--color-table-border-bottom-color);
+//     }
+
+//     tr:nth-child(even) {
+//       td {
+//         background: var(--color-table-body-bg-nth-child-even) !important;
+//       }
+//     }
+
+//     tr:nth-child(odd) {
+//       td {
+//         background: var(--color-table-body-bg-nth-child-even) !important;
+//       }
+//     }
+//   }
+// }
+.totalModal{
+  .ant-modal-footer{
+    display: none;
+  }
+  position: absolute;
+  top: 40px;
+  right: 174px;
+}
+.ltc-item-img {
+  width: 390px;
+  height: 300px;
+  border: 1px solid;
+  background: #6565656b;
+  margin-right: 20px !important;
+  img  {
+    height: 295px;
+    width: 387px;
+    // object-fit: contain;
+  }
+}
+.hanleHistoyModal{
+  max-height: 700px;
+  overflow: auto;
+}
+.hanleHistoyModal::-webkit-scrollbar {
+  width: 5px;
+}
+.hanleHistoyModal::-webkit-scrollbar-thumb {
+  background-color: #9da2ab;
+  border-radius: 10px;
+}
+.modal-img{
+  img{
+    width: 200px;
+    height: 200px;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx b/src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx
new file mode 100644
index 0000000..cecb221
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx
@@ -0,0 +1,1126 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  message,
+  Pagination,
+  Table,
+  Space,
+  Modal,
+  Button,
+  Tabs,
+  Descriptions,
+  Input,
+  Steps,
+  Select,
+  Image,
+  Timeline,
+  Popover
+} from "antd";
+import { dictionary, utils } from "@/config/common";
+// import moment from 'moment'
+// import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
+import ajax from "@/services";
+import errorImg from '@/assets/images/error-img-new.png'
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { TableModule } from "@/components";
+import "./index.scss";
+import {
+  payRecordColumns,
+  refundRecordColumns,
+  operatorRecordColumns,
+} from "./dataSource";
+// import errorImg from "@/assets/images/layout/error.png"
+// import {  useLocation } from "react-router-dom";
+const { TextArea } = Input;
+
+let array = [];
+
+function BillingRule() {
+  const roadContent = (
+    <div>
+      <p>出场时间-入场时间的计算金额</p>
+    </div>
+  )
+  const receivableContent = (
+    <div>
+      <p>订单金额-折扣金额</p>
+    </div>
+  )
+  const discountContent = (
+    <div>
+      <p>折扣金额=停车卡抵扣+路段折扣</p>
+    </div>
+  )
+  const preferentialContent = (
+    <div>
+      <p>优惠券支付金额</p>
+    </div>
+  )
+  const refundContent = (
+    <div>
+      <p>退款总计=退实付+退优惠</p>
+    </div>
+  )
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      align: "center",
+      fixed: "left",
+      render: (text, record, index) => index + 1,
+      width: 100,
+    },
+ 
+    {
+      title: "路段名称",
+      dataIndex: "road",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "100px", wordBreak: "break-all" }}>{record.road}</div>
+      )
+    },
+    {
+      title: "车牌号",
+      dataIndex: "plate",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "100px", wordBreak: "break-all" }}>{record.plate}</div>
+      )
+    },
+    {
+      title: "车牌颜色",
+      dataIndex: "plate_color",
+      key: "plate_color",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "泊位号",
+      dataIndex: "berth_id",
+      key: "berth_id",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "入场时间",
+      dataIndex: "in_time",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "130px", wordBreak: "break-all" }}>{record.in_time}</div>
+      )
+    },
+    {
+      title: "离场时间",
+      dataIndex: "out_time",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "130px", wordBreak: "break-all" }}>{record.out_time}</div>
+      )
+    },
+    {
+      title: "停车时长",
+      dataIndex: "admission_time",
+      key: "admission_time",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "入场收费员",
+      dataIndex: "in_person",
+      key: "in_person",
+      width: 100,
+      align: "center",
+
+    },
+    {
+      title: "出场收费员",
+      dataIndex: "out_person",
+      key: "out_person",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: <Popover content={roadContent} >
+        订单金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "order_amount",
+      key: "order_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={roadContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title: <Popover content={receivableContent} >
+        应收金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "receivable_amount",
+      key: "receivable_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={receivableContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title:  <Popover content={discountContent} >
+        折扣金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "discount_amount",
+      key: "discount_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={discountContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title:    <Popover content={preferentialContent} >
+        优惠金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "preferential_amount",
+      key: "preferential_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={preferentialContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title: "实付金额",
+      dataIndex: "actual_amount",
+      key: "actual_amount",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: <Popover content={refundContent} >
+        退款总计
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "refund_total",
+      key: "refund_total",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={refundContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title: "停车记录ID",
+      dataIndex: "park_id",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "130px", wordBreak: "break-all" }}>
+          <a onClick={() => {
+            navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") });
+          }}>{record.park_id}</a>
+        </div>
+      ),
+    },
+    {
+      title: "区域",
+      dataIndex: "region",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "120px", wordBreak: "break-all" }}>{record.region}</div>
+      )
+    },
+    {
+      title: "商户名称",
+      dataIndex: "operator",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "150px", wordBreak: "break-all" }}>{record.operator}</div>
+      )
+    },
+    {
+      title: "路段类型",
+      dataIndex: "road_type",
+      key: "road_type",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      align: "center",
+      fixed: "right",
+      width: 100,
+      render: (text, record, index) => {
+        setDataDetail(record)
+        return (
+          <>
+            <Button type="primary" onClick={() => openModal(index, record)}>
+              详情
+            </Button>
+          </>
+        )
+
+      },
+    },
+  ];
+
+  const formSearch = [
+    {
+      name: "region",
+      type: "TreeSelect",
+      label: "区域",
+    },
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      defaultValue: "0",
+      placeholder: "请选择商户名称",
+    },
+    {
+      name: "road",
+      type: "SearchSelect",
+      label: "路段名称",
+      placeholder: "请输入路段名称",
+    },
+    {
+      name: "road_type",
+      type: "Select",
+      label: "路段类型",
+      defaultValue: 0,
+      options: sysConfig.roadType,
+    },
+    {
+      name: "phone",
+      type: "Input",
+      label: "手机号",
+      placeholder: "请输入手机号",
+    },
+    {
+      name: "plate",
+      type: "Input",
+      label: "车牌号",
+      placeholder: "请输入车牌号",
+    },
+    {
+      name: "berth_id",
+      type: "Input",
+      label: "泊位号",
+      placeholder: "请输入泊位号",
+    },
+    {
+      name: "type",
+      type: "Select",
+      label: "出入场类型",
+      defaultValue: 1,
+      options: [
+        {
+          label: "入场",
+          value: 1,
+        },
+        {
+          label: "出场",
+          value: 2,
+        },
+      ],
+    },
+    {
+      name: "park_id",
+      type: "Input",
+      label: "停车记录ID",
+      placeholder: "请输入停车记录ID",
+    },
+    {
+      name: "plate_color",
+      type: "Select",
+      label: "车牌颜色",
+      placeholder: "请输入车牌颜色",
+      options: sysConfig.plateColor,
+    },
+    {
+      name: "order_type",
+      type: "Select",
+      label: "订单类型",
+      defaultValue: 0,
+      options: [
+        {
+          label: "全部",
+          value: 0,
+        },
+        {
+          label: "进行中",
+          value: 1,
+        },
+        {
+          label: "待支付",
+          value: 2,
+        },
+        {
+          label: "已支付",
+          value: 3,
+        }
+      ],
+    },
+    {
+      name: "in_person",
+      type: "Input",
+      label: "入场收费员",
+      placeholder: "请输入入场收费员",
+    },
+    {
+      name: "out_person",
+      type: "Input",
+      label: "出场收费员",
+      placeholder: "请输入出场收费员",
+    },
+    {
+      name: "timePeriod",
+      type: "RangePicker",
+      label: "时间段",
+    },
+  ];
+  const initFormData = {
+    region: ["0"],
+    operator: "0",
+    road: "0",
+    road_type: 0,
+    phone: "",
+    plate: "",
+    berth_id: "",
+    type: 1,
+    park_id: "",
+    order_type: 0,
+    plate_color: -1,
+    in_person: "",
+    out_person: "",
+  };
+  //历史处理的表头
+  const historyProgressColumns = [
+    {
+      title: "序号",
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+      render: (text, record, index) => index + 1,
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      align: "center",
+    },
+    {
+      title: "处理记录ID",
+      dataIndex: "deal_record_id",
+      key: "deal_record_id",
+      align: "center",
+    },
+    {
+      title: "处理时间",
+      dataIndex: "deal_time",
+      key: "deal_time",
+      align: "center",
+    },
+    {
+      title: "处理人",
+      dataIndex: "dealer",
+      key: "dealer",
+      align: "center",
+    },
+    {
+      title: "业务订单类型",
+      dataIndex: "business_type",
+      key: "business_type",
+      align: "center",
+    },
+    {
+      title: "更改项",
+      dataIndex: "change_content",
+      key: "change_content",
+      align: "center",
+      render: (text) => {
+        return text == 1
+          ? "调整出场时间"
+          : text == 2
+            ? "变更车牌号"
+            : text == 3
+              ? "更改订单金额"
+              : text == 4
+                ? "免费该订单"
+                : "作废该订单"
+      }
+    },
+    {
+      title: "更改初始值",
+      dataIndex: "initial_value",
+      key: "initial_value",
+      align: "center",
+    },
+    {
+      title: "更改更新值",
+      dataIndex: "update_value",
+      key: "update_value",
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      align: "center",
+      fixed: "right",
+      render: (_, record) => {
+        return (
+          <Button
+            type="primary"
+            onClick={() => {
+              checkHistoryDetail(record);
+            }}
+          >
+            操作
+          </Button>
+        );
+      },
+    },
+  ];
+
+
+  const h_columns = [
+    {
+      title: "停车订单ID",
+      dataIndex: "park_id",
+      key: "park_id",
+      width: 200,
+      align: "center",
+      render: (text) => (
+        <>
+          <a
+            onClick={() => {
+              navigator.clipboard.writeText(`${text}`).then(() => {
+                message.success("已复制到剪切板");
+              });
+            }}
+          >
+            {text}
+          </a>
+        </>
+      ),
+    },
+    {
+      title: "车牌号",
+      dataIndex: "plate",
+      key: "plate",
+      align: "center",
+    },
+    {
+      title: "停车场名称",
+      dataIndex: "park_name",
+      key: "park_name",
+      align: "center",
+      width: 200,
+    },
+    {
+      title: "入场时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "计费时间",
+      dataIndex: "admission_time",
+      key: "admission_time",
+      align: "center",
+    },
+  ];
+
+
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [tableData, setTableData] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [tabKey, setTabKey] = useState("1");
+  // 车场id
+  const [parkId, setParkId] = useState("");
+  //支付记录数据
+  const [payRecord, setPayRecord] = useState([]);
+  //退款订单数据
+  const [refundRecord, setRefundRecord] = useState([]);
+  //操作记录数据
+  const [operationRecord, setOperatorRecord] = useState([]);
+  //历史处理数据
+  const [historyProgressRecord, setHistoryProgressRecord] = useState([]);
+  //停车记录信息数据
+  const [parkingRecordDetail, setParkingRecordDetail] = useState({});
+  //当前的所选择的停车信息索引
+  const [recordIndex, setRecordIndex] = useState(-1);
+  //当前所选择的订单ID
+  const [currentRecordID, setCurrentRecordID] = useState("");
+  //历史记录详情Modal
+  const [historyVisible, setHistoryVisible] = useState(false);
+  //历史记录详情的弹窗查看全部
+  const [isShowAll, setIsShowAll] = useState(false);
+  //历史记录车辆图片弹窗
+  const [platePhototModal, setPlatePhotoModal] = useState(false);
+  //历史记录详情数据
+  const [historyDataDetail, setHistoryDataDetail] = useState({});
+  const [DataDetail, setDataDetail] = useState({});
+  function openModal(index, record) {
+    setDetailVisible(true);
+    setParkingRecordDetail(record);
+    setHistoryDataDetail(record)
+    setRecordIndex(index);
+  }
+
+  const handleImgError = (e) => {
+    let evn = e || event
+    let img = evn.srcElement ? evn.srcElement : evn.target
+    img.src = errorImg
+  }
+
+  function changeKey(key) {
+    setTabKey(key);
+    switch (key) {
+      case "2":
+        getPaymentRecord(currentRecordID);
+        break;
+      case "3":
+        getRefundRecord(currentRecordID);
+        break;
+      case "4":
+        getOperateRecord(currentRecordID);
+        break;
+      case "5":
+        getHistoryRecord(currentRecordID);
+        break;
+      default:
+        break;
+    }
+  }
+  function renderParkRecord(item) {
+    return (
+      item && (
+        <div>
+          <Descriptions title="停车场名称">
+            <Descriptions.Item label="停车场名称">{item.road}</Descriptions.Item>
+            <Descriptions.Item label="泊位号">{item.berth_id}</Descriptions.Item>
+            <Descriptions.Item label="区域">{item.region}</Descriptions.Item>
+            <Descriptions.Item label="商户">{item.operator}</Descriptions.Item>
+            <Descriptions.Item label="车场类型">{item.road_type}</Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="停车信息">
+            <Descriptions.Item label="车牌号">{item.plate}</Descriptions.Item>
+            <Descriptions.Item label="会员手机号">{item.phone}</Descriptions.Item>
+            <Descriptions.Item label="入场时间"> {item.in_time} </Descriptions.Item>
+            <Descriptions.Item label="出场时间">{item.out_time}</Descriptions.Item>
+            <Descriptions.Item label="停车时长">{item.admission_time}</Descriptions.Item>
+            <Descriptions.Item label="订单金额"> {item.order_amount}</Descriptions.Item>
+            <Descriptions.Item label="停车卡折扣">{item.parking_card_discount} </Descriptions.Item>
+            <Descriptions.Item label="车场折扣">
+              {item.road_discount}
+            </Descriptions.Item>
+            <Descriptions.Item label="应收金额">
+              {item.receivable_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="优惠券">{item.coupon }</Descriptions.Item>
+            <Descriptions.Item label="优惠总额">
+              {item.preferential_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="实付金额">
+              {item.actual_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="优惠退款">
+              {item.refund_discount}
+            </Descriptions.Item>
+            <Descriptions.Item label="实付退款">
+              {item.actual_refund}
+            </Descriptions.Item>
+            <Descriptions.Item label="退款总计">
+              {item.refund_total}
+            </Descriptions.Item>
+            <Descriptions.Item label="入场收费员">
+              {item.in_person}
+            </Descriptions.Item>
+            <Descriptions.Item label="出场收费员">
+              {item.out_person}
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="入场照片">
+            <Descriptions.Item label="车辆照片">
+              <div className="ltc-item ltc-item-img ">
+                <Image src={item.in_veh_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
+              </div>
+            </Descriptions.Item>
+            <Descriptions.Item label="车牌照片">
+              <div className="ltc-item ltc-item-img ">
+                <Image src={item.in_plate_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
+              </div>
+            </Descriptions.Item>
+            <Descriptions.Item label=" 残疾人证件">
+              <div className="ltc-item ltc-item-img ">
+                <Image src={item.cj_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
+              </div>
+            </Descriptions.Item>
+          </Descriptions>
+        </div>
+      )
+    );
+  }
+  //查看历史详情
+  const [getHistoryData,setGetHistoryData]=useState({})
+  function checkHistoryDetail(record) {
+    setGetHistoryData(record);
+    setHistoryVisible(true);
+  }
+  function renderModalTable(columns, dataSource) {
+    return (
+      <Table
+        columns={columns}
+        dataSource={dataSource}
+        scroll={{ x: 1000 }}
+      // className="yisa-table"
+      />
+    );
+  }
+  //获取订单的支付记录
+  function getPaymentRecord(park_id) {
+    ajax.getPaymentRecord({ park_record_id: park_id }).then((res) => {
+      if (res.status === 20000) {
+        setPayRecord(res.data.list);
+      }
+    });
+  }
+  //获取退款订单的接口
+  function getRefundRecord(park_id) {
+    ajax.getRefundRecord({ park_id }).then((res) => {
+      if (res.status === 20000) {
+        setRefundRecord(res.data.list);
+      }
+    });
+  }
+  //获取操作处理的接口
+  function getOperateRecord(park_id) {
+    ajax.getOperateRecord({ park_record_id: park_id }).then((res) => {
+      if (res.status === 20000) {
+        setOperatorRecord(res.data.list);
+      }
+    });
+  }
+  //获取历史处理记录的接口
+  function getHistoryRecord(park_id) {
+    ajax.getHistoryRecord({ park_record_id: park_id }).then((res) => {
+      if (res.status === 20000) {
+        // res.data.list.map(res=>{
+          setHistoryProgressRecord(res.data.list);
+        // })
+      }
+    });
+  }
+
+  //获取函数
+  function search(params) {
+    utils.tableScrollTop("parent-table-scroll")
+    ajax.getParkingList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      }else{
+        message.error(res.message)
+      }
+    });
+  }
+  useEffect(() => {
+    // setParkingRecordDetail(tableData[recordIndex]);
+    setCurrentRecordID(tableData[recordIndex]?.park_id || "");
+  }, [recordIndex]);
+
+  return (
+    <>
+      <TableModule
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        pagename="停车记录查询"
+        mandatory={['plate','berth_id']}
+        mandatory_name={['车牌号或泊位号']}
+        pageName={'parkRecordTotal'}
+        initFormData={initFormData}
+        total={total}
+        search={search}
+        exportUrl="/api/bpm/record/get_record_export"
+      />
+      <Modal
+        open={detailVisible}
+        width={1500}
+        className="totalModal"
+        onCancel={() => {
+          setDetailVisible(false);
+          setTabKey("1");
+        }}
+        destroyOnClose
+      >
+        <Tabs activeKey={tabKey} onChange={changeKey}>
+          <Tabs.TabPane tab="停车记录信息" key="1">
+            {renderParkRecord(parkingRecordDetail)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="支付记录" key="2">
+            {renderModalTable(payRecordColumns, payRecord)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="退款订单" key="3">
+            {renderModalTable(refundRecordColumns, refundRecord)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="操作记录" key="4">
+            {renderModalTable(operatorRecordColumns, operationRecord)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="历史处理" key="5">
+            {renderModalTable(historyProgressColumns, historyProgressRecord)}
+          </Tabs.TabPane>
+        </Tabs>
+        <Modal
+          title="异常订单处理记录审核"
+          visible={historyVisible}
+          onCancel={() => {
+            setHistoryVisible(false);
+          }}
+          className="hanleHistoyModal"
+          footer={null}
+          width={1000}
+        >
+          <Table
+            columns={h_columns}
+            dataSource={[
+              {
+                park_id: historyDataDetail.park_id,
+                plate: historyDataDetail.plate,
+                park_name: historyDataDetail?.road,
+                in_time: historyDataDetail.in_time,
+                admission_time: historyDataDetail?.out_time,
+              },
+            ]}
+            pagination={false}
+          // className="yisa-table"
+          />
+          <Descriptions title="车场详情">
+            <Descriptions.Item label="停车场名称">
+              {historyDataDetail?.road}
+            </Descriptions.Item>
+            <Descriptions.Item label="区域">
+              {historyDataDetail.region}
+            </Descriptions.Item>
+            <Descriptions.Item label="商户名称">
+              {historyDataDetail.operator}
+            </Descriptions.Item>
+            <Descriptions.Item label="泊位号">
+              {historyDataDetail.berth_id}
+            </Descriptions.Item>
+            <Descriptions.Item label="车场类型">
+              {historyDataDetail.road_type}
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="车辆详情">
+            <Descriptions.Item label="车牌号">
+              {historyDataDetail.plate}
+            </Descriptions.Item>
+            <Descriptions.Item label="停车时长">
+              {historyDataDetail.admission_time}
+            </Descriptions.Item>
+            <Descriptions.Item label="入场时间">
+              {historyDataDetail.in_time}
+            </Descriptions.Item>
+            <Descriptions.Item label="出场时间">
+              {historyDataDetail.out_time}
+            </Descriptions.Item>
+            <Descriptions.Item label="入场记录来源">
+              {historyDataDetail.in_source}
+            </Descriptions.Item>
+            <Descriptions.Item label="出场记录来源">
+              {historyDataDetail.out_source}
+            </Descriptions.Item>
+            <Descriptions.Item label="出入场图像">
+              <a
+                onClick={() => {
+                  setPlatePhotoModal(true);
+                }}
+              >
+                查看
+              </a>
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="订单详情">
+            <Descriptions.Item label="订单金额">
+              {historyDataDetail.order_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="优惠总计">
+              {historyDataDetail.preferential_total}
+            </Descriptions.Item>
+            <Descriptions.Item label="实付总计">
+              {historyDataDetail.actual_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="欠费总计">
+              {historyDataDetail.arrears_mount}
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions
+            title="流程查看"
+            extra={
+              isShowAll ? (
+                <a
+                  onClick={() => {
+                    setIsShowAll(false);
+                  }}
+                >
+                  返回
+                </a>
+              ) : (
+                <a
+                  onClick={() => {
+                    setIsShowAll(true);
+                  }}
+                >
+                  查看全部
+                </a>
+              )
+            }
+          >
+            <Descriptions.Item>
+              <Steps
+                size="small"
+                current={2}
+                items={[
+                  {
+                    title: "发起处理",
+                  },
+                  {
+                    title: "申诉审核",
+                  },
+                ]}
+              />
+            </Descriptions.Item>
+          </Descriptions>
+          {isShowAll ? (
+            <Descriptions title="流程记录">
+              <Descriptions.Item>
+                <div className="ltc-box-title">
+                  <div className="ltc-icon"></div>流程记录
+                </div>
+                <div style={{ width: "450px" }}>
+                  <Timeline mode={"left"}>
+                    <Timeline.Item
+                      label={getHistoryData.examine_time?.split(" ")[0]}
+                    >
+                      <div>
+                        <div>申诉处理审核: 已完成</div>
+                        <div
+                          style={{
+                            display: "flex",
+                            width: "450px",
+                            justifyContent: "space-between",
+                          }}
+                        >
+                          <div>{getHistoryData.examine_time}</div>
+                          <div>来源:平台</div>
+                          <div>操作人:{getHistoryData.dealer}</div>
+                        </div>
+                      </div>
+                    </Timeline.Item>
+                    <Timeline.Item
+                      label={getHistoryData.deal_time?.split(" ")[0]}
+                    >
+                      <div>
+                        <div>申诉处理提审</div>
+                        <div
+                          style={{
+                            display: "flex",
+                            width: "450px",
+                            justifyContent: "space-between",
+                          }}
+                        >
+                          <div>
+                            <div>操作项</div>
+                            <div>
+                              {getHistoryData?.change_content == 1
+                                ? "调整出场时间"
+                                : getHistoryData?.change_content == 2
+                                  ? "变更车牌号"
+                                  : getHistoryData?.change_content == 3
+                                    ? "更改订单金额"
+                                    : getHistoryData?.change_content == 4
+                                      ? "免费该订单"
+                                      : "作废该订单"}
+                            </div>
+                            <div>{getHistoryData.deal_time}</div>
+                          </div>
+                          <div>
+                            <div>初始值</div>
+                            <div>{getHistoryData.initial_value || "--"}</div>
+                            <div>来源:平台</div>
+                          </div>
+                          <div>
+                            <div>变更值</div>
+                            <div>{getHistoryData.update_value || "--"}</div>
+                            <div>{getHistoryData.dealer}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </Timeline.Item>
+                  </Timeline>
+                </div>
+              </Descriptions.Item>
+            </Descriptions>
+          ) : (
+            <Descriptions title="异常订单处理">
+              <Descriptions.Item span={3}>
+                <Descriptions title="处理理由">
+                  <Descriptions.Item>
+                    <TextArea disabled value={getHistoryData?.deal_reason} />
+                  </Descriptions.Item>
+                </Descriptions>
+              </Descriptions.Item>
+              <Descriptions.Item>
+                <Descriptions title="处理方式">
+                  <Descriptions.Item label="更改项">
+                    <div style={{ width: "200px" }}>
+                      <Input
+                        disabled
+                        value={
+                          getHistoryData?.change_content == 1
+                            ? "调整出场时间"
+                            : getHistoryData?.change_content == 2
+                              ? "变更车牌号"
+                              : getHistoryData?.change_content == 3
+                                ? "更改订单金额"
+                                : getHistoryData?.change_content == 4
+                                  ? "免费该订单"
+                                  : "作废该订单"
+                        }
+                      ></Input>
+                    </div>
+                  </Descriptions.Item>
+                  {getHistoryData.change_content == 1 ? (
+                    <>
+                      <Descriptions.Item label="调整基于">
+                        <div style={{ width: "240px" }}>
+                          <Select
+                            disabled
+                            style={{
+                              width: 140,
+                            }}
+                            defaultValue={
+                              getHistoryData?.update_value.indexOf(" ") > -1
+                                ? "1"
+                                : "2"
+                            }
+                            options={[
+                              {
+                                value: "1",
+                                label: "具体时间日期",
+                              },
+                              {
+                                value: "2",
+                                label: "记录入场时间",
+                              },
+                            ]}
+                          />
+                        </div>
+                      </Descriptions.Item>
+                      <Descriptions.Item label="时间">
+                        <div style={{ width: "240px" }}>
+                          <Input
+                            disabled
+                            placeholder={getHistoryData.update_value}
+                          ></Input>
+                        </div>
+                      </Descriptions.Item>
+                    </>
+                  ) : getHistoryData.change_content == 2 ? (
+                    <Descriptions.Item label="车牌号">
+                      <div style={{ width: "40px", display: "inline-block" }}>
+                        <Input
+                          disabled
+                          placeholder={getHistoryData.plate_type}
+                        ></Input>
+                      </div>
+                      <div style={{ width: "150px", display: "inline-block" }}>
+                        <Input
+                          disabled
+                          placeholder={getHistoryData.update_value}
+                        ></Input>
+                      </div>
+                    </Descriptions.Item>
+                  ) : getHistoryData.change_content == 3 ? (
+                    <>
+                      <Descriptions.Item label="增/减">
+                        <div style={{ width: "200px" }}>
+                          <Select
+                            disabled
+                            defaultValue={
+                              getHistoryData.update_value > 0 ? "1" : "2"
+                            }
+                            options={[
+                              {
+                                value: "1",
+                                label: "增",
+                              },
+                              {
+                                value: "2",
+                                label: "减",
+                              },
+                            ]}
+                          />
+                        </div>
+                      </Descriptions.Item>
+                      <Descriptions.Item label="金额">
+                        <div style={{ width: "200px" }}>
+                          <Input
+                            disabled
+                            placeholder={Math.abs(
+                              getHistoryData.update_value
+                            )}
+                          ></Input>
+                        </div>
+                      </Descriptions.Item>
+                    </>
+                  ) : null}
+                </Descriptions>
+              </Descriptions.Item>
+            </Descriptions>
+          )}
+          <Modal
+            visible={platePhototModal}
+            onCancel={() => {
+              setPlatePhotoModal(false);
+            }}
+            footer={false}
+            className="modal-img"
+          >
+            <div>
+              <div className="eae-modal-title">
+                <div className="ltc-icon"></div>入场图片
+              </div>
+              <div className="eae-modal-item">
+                <div>车辆照片</div>
+                <Image src={historyDataDetail.in_veh_pic} onError={handleImgError}/>
+              </div>
+              <div className="eae-modal-item">
+                <div>车牌照片</div>
+                <Image src={historyDataDetail.in_plate_pic} onError={handleImgError}/>
+              </div>
+            </div>
+          </Modal>
+        </Modal>
+      </Modal>
+    </>
+  );
+}
+
+export default BillingRule;
diff --git a/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/dataSource.js b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/dataSource.js
new file mode 100644
index 0000000..99b73a3
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/dataSource.js
@@ -0,0 +1,183 @@
+//用来存储表头的js文件
+import React from "react";
+import { Button } from "antd";
+//支付记录的表头
+export const payRecordColumns = [
+  {
+    title: "序号",
+    dataIndex: "id",
+    key: "id",
+    align: "center",
+    render: (text, record, index) => index + 1,
+  },
+  {
+    title: "订单ID",
+    dataIndex: "order_id",
+    key: "order_id",
+    align: "center",
+  },
+  {
+    title: "入场时间",
+    dataIndex: "admission_time",
+    key: "admission_time",
+    align: "center",
+  },
+  {
+    title: "计费时间",
+    dataIndex: "charging_time",
+    key: "charging_time",
+    align: "center",
+  },
+  {
+    title: "支付时间",
+    dataIndex: "pay_time",
+    key: "pay_time",
+    align: "center",
+  },
+  {
+    title: "应收金额",
+    dataIndex: "receivable_amount",
+    key: "receivable_amount",
+    align: "center",
+  },
+  {
+    title: "优惠金额",
+    dataIndex: "discount_amount",
+    key: "discount_amount",
+    align: "center",
+  },
+  {
+    title: "实付金额",
+    dataIndex: "paid_in_money",
+    key: "paid_in_money",
+    align: "center",
+  },
+  {
+    title: "支付类型",
+    dataIndex: "pay_type_name",
+    key: "pay_type_name",
+    align: "center",
+  },
+  {
+    title: "支付渠道",
+    dataIndex: "payment_channels",
+    key: "payment_channels",
+    align: "center",
+  },
+  {
+    title: "支付设备",
+    dataIndex: "payment_equipment",
+    key: "payment_equipment",
+    align: "center",
+  },
+  {
+    title: "支付人",
+    dataIndex: "pay_person",
+    key: "pay_person",
+    align: "center",
+  },
+  {
+    title: "付款路段",
+    dataIndex: "pay_road",
+    key: "pay_road",
+    align: "center",
+  },
+  {
+    title: "第三方流水ID",
+    dataIndex: "third_party_flow_id",
+    key: "third_party_flow_id",
+    align: "center",
+  },
+];
+//退款订单的表头
+export const refundRecordColumns = [
+  {
+    title: "序号",
+    dataIndex: "id",
+    key: "id",
+    align: "center",
+    render: (text, record, index) => index + 1,
+  },
+  {
+    title: "退款方式",
+    dataIndex: "refund_type",
+    key: "refund_type",
+    align: "center",
+  },
+  {
+    title: "支付渠道",
+    dataIndex: "pay_road",
+    key: "pay_road",
+    align: "center",
+  },
+  {
+    title: "支付设备",
+    dataIndex: "paymentDevice",
+    key: "paymentDevice",
+    align: "center",
+  },
+  {
+    title: "退款原因",
+    dataIndex: "reason",
+    key: "reason",
+    align: "center",
+  },
+  {
+    title: "退款金额",
+    dataIndex: "refund_amount",
+    key: "refund_amount",
+    align: "center",
+  },
+  {
+    title: "申请人",
+    dataIndex: "application_person",
+    key: "application_person",
+    align: "center",
+  },
+  {
+    title: "申请时间",
+    dataIndex: "application_time",
+    key: "application_time",
+    align: "center",
+  },
+  {
+    title: "退款时间",
+    dataIndex: "refund_time",
+    key: "refund_time",
+    align: "center",
+  },
+];
+//操作记录
+export const operatorRecordColumns = [
+  {
+    title: "序号",
+    dataIndex: "id",
+    key: "id",
+    align: "center",
+    render: (text, record, index) => index + 1,
+  },
+  {
+    title: "操作类型",
+    dataIndex: "type",
+    key: "type",
+    align: "center",
+  },
+  {
+    title: "操作来源",
+    dataIndex: "source",
+    key: "source",
+    align: "center",
+  },
+  {
+    title: "操作人/设备",
+    dataIndex: "object",
+    key: "object",
+    align: "center",
+  },
+  {
+    title: "操作时间",
+    dataIndex: "time",
+    key: "time",
+    align: "center",
+  },
+];
diff --git a/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/index.jsx b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/index.jsx
new file mode 100644
index 0000000..3109bde
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/index.jsx
@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const OrderRuleMgm = loadable(() => import("./loadable"))
+export default (pros) => <OrderRuleMgm {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/index.scss b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/index.scss
new file mode 100644
index 0000000..9a8202a
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/index.scss
@@ -0,0 +1,238 @@
+@import "@/assets/css/mixin.scss";
+$color-container-bg: var(--color-container-bg);
+$color-user-list-bg: var(--color-user-list-bg);
+$color-text: var(--color-text);
+$color-primary: var(--color-primary);
+
+.ant-tabs {
+  margin-bottom: 16px;
+
+  .ant-tabs-nav {
+    margin-bottom: 0 !important;
+
+    &::before {
+      border-bottom: 1px solid var(--color-card-line) !important;
+    }
+  }
+
+  .ant-tabs-nav-wrap {
+    width: 100%;
+    box-sizing: content-box;
+
+    .ant-tabs-nav-list {
+      width: 340px;
+
+      .ant-tabs-ink-bar {
+        height: 3px;
+        background-color: #00ccff;
+      }
+
+      .ant-tabs-tab {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        padding-bottom: 10px;
+        text-align: center;
+        cursor: pointer;
+        font-size: 14px !important;
+        font-family: MicrosoftYaHei;
+        text-align: center;
+        letter-spacing: 0.7px;
+      }
+
+      .ant-tabs-tab-active {
+        div {
+          color: #00ccff;
+        }
+      }
+    }
+  }
+}
+
+.ant-input::-webkit-input-placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-input::-moz-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list  .ant-btn-primary {
+  width: 68px;
+  height: 30px;
+  background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+  border-radius: 4px;
+}
+.ant-input:-ms-input-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th {
+  background-color: #616b83 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td {
+  background-color: #3e4557 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td {
+  background-color: #3e4557 !important;
+}
+.ant-input::placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-select-selection-placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+  background: var(--color-input-disabled-bg);
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled .ant-select-arrow {
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background-color: var(--color-input-disabled-bg);
+  color: var(--color-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ant-select-multiple {
+  .ant-select-selector {
+    .ant-select-selection-item {
+      background-color: var(--color-bg-body);
+      border-color: var(--color-border);
+
+      .ant-select-selection-item-remove {
+        color: var(--color-text);
+      }
+    }
+  }
+}
+
+.ant-select-arrow {
+  color: var(--color-text);
+}
+
+.ant-select-clear {
+  border-radius: 50%;
+}
+
+.ant-select-dropdown-menu {
+  background-color: var(--color-input-bg);
+
+  .ant-select-dropdown-menu-item {
+    color: var(--color-text);
+
+    &.ant-select-dropdown-menu-item-active {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &.ant-select-dropdown-menu-item-selected {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &:hover {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+  }
+}
+
+.ant-select-selector {
+  background-color: var(--color-search-list-item-bg) !important;
+  box-shadow: none !important;
+  border-radius: 4px;
+  color: var(--color-search-list-item-value);
+  border-color: var(--color-search-list-item-bd) !important;
+}
+
+.ant-select-selection {
+  background-color: var(--color-input-bg);
+  box-shadow: none;
+  color: var(--color-text);
+  // border-color:var(--checkable-tag-border);
+}
+
+.ant-form-horizontal .ant-form-item-label {
+  label {
+    display: inline-block;
+    word-wrap: break-word;
+    white-space: normal;
+  }
+}
+
+.ant-picker {
+  width: 100%;
+  background-color: var(--color-search-list-item-bg);
+  border-color: var(--color-border);
+}
+
+// .yisa-table {
+//   width: 100%;
+
+//   .ant-table-thead {
+//     th {
+//       background: var(--color-table-header-bg) !important;
+//     }
+//   }
+
+//   .ant-table-tbody {
+//     td {
+//       background: var(--color-table-body-bg) !important;
+//       border-bottom-color: var(--color-table-border-bottom-color);
+//     }
+
+//     tr:nth-child(even) {
+//       td {
+//         background: var(--color-table-body-bg-nth-child-even) !important;
+//       }
+//     }
+
+//     tr:nth-child(odd) {
+//       td {
+//         background: var(--color-table-body-bg-nth-child-even) !important;
+//       }
+//     }
+//   }
+// }
+.totalModal{
+  .ant-modal-footer{
+    display: none;
+  }
+  position: absolute;
+  top: 40px;
+  right: 174px;
+}
+.ltc-item-img {
+  width: 390px;
+  height: 300px;
+  border: 1px solid;
+  background: #6565656b;
+  margin-right: 20px !important;
+  img  {
+    height: 295px;
+    width: 387px;
+    // object-fit: contain;
+  }
+}
+.hanleHistoyModal{
+  max-height: 700px;
+  overflow: auto;
+}
+.hanleHistoyModal::-webkit-scrollbar {
+  width: 5px;
+}
+.hanleHistoyModal::-webkit-scrollbar-thumb {
+  background-color: #9da2ab;
+  border-radius: 10px;
+}
+.modal-img{
+  img{
+    width: 200px;
+    height: 200px;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/loadable.jsx b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/loadable.jsx
new file mode 100644
index 0000000..dceeb12
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/loadable.jsx
@@ -0,0 +1,1126 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  message,
+  Pagination,
+  Table,
+  Space,
+  Modal,
+  Button,
+  Tabs,
+  Descriptions,
+  Input,
+  Steps,
+  Select,
+  Image,
+  Timeline,
+  Popover
+} from "antd";
+import { dictionary, utils } from "@/config/common";
+// import moment from 'moment'
+// import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
+import ajax from "@/services";
+import errorImg from '@/assets/images/error-img-new.png'
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { TableModule } from "@/components";
+import "./index.scss";
+import {
+  payRecordColumns,
+  refundRecordColumns,
+  operatorRecordColumns,
+} from "./dataSource";
+// import errorImg from "@/assets/images/layout/error.png"
+// import {  useLocation } from "react-router-dom";
+const { TextArea } = Input;
+
+let array = [];
+
+function OrderRuleMgm() {
+  const roadContent = (
+    <div>
+      <p>出场时间-入场时间的计算金额</p>
+    </div>
+  )
+  const receivableContent = (
+    <div>
+      <p>订单金额-折扣金额</p>
+    </div>
+  )
+  const discountContent = (
+    <div>
+      <p>折扣金额=停车卡抵扣+路段折扣</p>
+    </div>
+  )
+  const preferentialContent = (
+    <div>
+      <p>优惠券支付金额</p>
+    </div>
+  )
+  const refundContent = (
+    <div>
+      <p>退款总计=退实付+退优惠</p>
+    </div>
+  )
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      align: "center",
+      fixed: "left",
+      render: (text, record, index) => index + 1,
+      width: 100,
+    },
+ 
+    {
+      title: "路段名称",
+      dataIndex: "road",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "100px", wordBreak: "break-all" }}>{record.road}</div>
+      )
+    },
+    {
+      title: "车牌号",
+      dataIndex: "plate",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "100px", wordBreak: "break-all" }}>{record.plate}</div>
+      )
+    },
+    {
+      title: "车牌颜色",
+      dataIndex: "plate_color",
+      key: "plate_color",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "泊位号",
+      dataIndex: "berth_id",
+      key: "berth_id",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "入场时间",
+      dataIndex: "in_time",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "130px", wordBreak: "break-all" }}>{record.in_time}</div>
+      )
+    },
+    {
+      title: "离场时间",
+      dataIndex: "out_time",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "130px", wordBreak: "break-all" }}>{record.out_time}</div>
+      )
+    },
+    {
+      title: "停车时长",
+      dataIndex: "admission_time",
+      key: "admission_time",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "入场收费员",
+      dataIndex: "in_person",
+      key: "in_person",
+      width: 100,
+      align: "center",
+
+    },
+    {
+      title: "出场收费员",
+      dataIndex: "out_person",
+      key: "out_person",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: <Popover content={roadContent} >
+        订单金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "order_amount",
+      key: "order_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={roadContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title: <Popover content={receivableContent} >
+        应收金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "receivable_amount",
+      key: "receivable_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={receivableContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title:  <Popover content={discountContent} >
+        折扣金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "discount_amount",
+      key: "discount_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={discountContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title:    <Popover content={preferentialContent} >
+        优惠金额
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "preferential_amount",
+      key: "preferential_amount",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={preferentialContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title: "实付金额",
+      dataIndex: "actual_amount",
+      key: "actual_amount",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: <Popover content={refundContent} >
+        退款总计
+      <QuestionCircleOutlined />
+    </Popover>,
+      dataIndex: "refund_total",
+      key: "refund_total",
+      width: 100,
+      align: "center",
+      // filterDropdown: true,
+      // filterIcon:
+      //   <Popover content={refundContent} >
+      //     <QuestionCircleOutlined />
+      //   </Popover>
+    },
+    {
+      title: "停车记录ID",
+      dataIndex: "park_id",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "130px", wordBreak: "break-all" }}>
+          <a onClick={() => {
+            navigator.clipboard.writeText(`${text}`).then(() => { message.success("已复制到剪切板") });
+          }}>{record.park_id}</a>
+        </div>
+      ),
+    },
+    {
+      title: "区域",
+      dataIndex: "region",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "120px", wordBreak: "break-all" }}>{record.region}</div>
+      )
+    },
+    {
+      title: "商户名称",
+      dataIndex: "operator",
+      align: "center",
+      render: (text, record, index) => (
+        <div style={{ width: "150px", wordBreak: "break-all" }}>{record.operator}</div>
+      )
+    },
+    {
+      title: "路段类型",
+      dataIndex: "road_type",
+      key: "road_type",
+      width: 100,
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      align: "center",
+      fixed: "right",
+      width: 100,
+      render: (text, record, index) => {
+        setDataDetail(record)
+        return (
+          <>
+            <Button type="primary" onClick={() => openModal(index, record)}>
+              详情
+            </Button>
+          </>
+        )
+
+      },
+    },
+  ];
+
+  const formSearch = [
+    {
+      name: "region",
+      type: "TreeSelect",
+      label: "区域",
+    },
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      defaultValue: "0",
+      placeholder: "请选择商户名称",
+    },
+    {
+      name: "road",
+      type: "SearchSelect",
+      label: "路段名称",
+      placeholder: "请输入路段名称",
+    },
+    {
+      name: "road_type",
+      type: "Select",
+      label: "路段类型",
+      defaultValue: 0,
+      options: sysConfig.roadType,
+    },
+    {
+      name: "phone",
+      type: "Input",
+      label: "手机号",
+      placeholder: "请输入手机号",
+    },
+    {
+      name: "plate",
+      type: "Input",
+      label: "车牌号",
+      placeholder: "请输入车牌号",
+    },
+    {
+      name: "berth_id",
+      type: "Input",
+      label: "泊位号",
+      placeholder: "请输入泊位号",
+    },
+    {
+      name: "type",
+      type: "Select",
+      label: "出入场类型",
+      defaultValue: 1,
+      options: [
+        {
+          label: "入场",
+          value: 1,
+        },
+        {
+          label: "出场",
+          value: 2,
+        },
+      ],
+    },
+    {
+      name: "park_id",
+      type: "Input",
+      label: "停车记录ID",
+      placeholder: "请输入停车记录ID",
+    },
+    {
+      name: "plate_color",
+      type: "Select",
+      label: "车牌颜色",
+      placeholder: "请输入车牌颜色",
+      options: sysConfig.plateColor,
+    },
+    {
+      name: "order_type",
+      type: "Select",
+      label: "订单类型",
+      defaultValue: 0,
+      options: [
+        {
+          label: "全部",
+          value: 0,
+        },
+        {
+          label: "进行中",
+          value: 1,
+        },
+        {
+          label: "待支付",
+          value: 2,
+        },
+        {
+          label: "已支付",
+          value: 3,
+        }
+      ],
+    },
+    {
+      name: "in_person",
+      type: "Input",
+      label: "入场收费员",
+      placeholder: "请输入入场收费员",
+    },
+    {
+      name: "out_person",
+      type: "Input",
+      label: "出场收费员",
+      placeholder: "请输入出场收费员",
+    },
+    {
+      name: "timePeriod",
+      type: "RangePicker",
+      label: "时间段",
+    },
+  ];
+  const initFormData = {
+    region: ["0"],
+    operator: "0",
+    road: "0",
+    road_type: 0,
+    phone: "",
+    plate: "",
+    berth_id: "",
+    type: 1,
+    park_id: "",
+    order_type: 0,
+    plate_color: -1,
+    in_person: "",
+    out_person: "",
+  };
+  //历史处理的表头
+  const historyProgressColumns = [
+    {
+      title: "序号",
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+      render: (text, record, index) => index + 1,
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
+      align: "center",
+    },
+    {
+      title: "处理记录ID",
+      dataIndex: "deal_record_id",
+      key: "deal_record_id",
+      align: "center",
+    },
+    {
+      title: "处理时间",
+      dataIndex: "deal_time",
+      key: "deal_time",
+      align: "center",
+    },
+    {
+      title: "处理人",
+      dataIndex: "dealer",
+      key: "dealer",
+      align: "center",
+    },
+    {
+      title: "业务订单类型",
+      dataIndex: "business_type",
+      key: "business_type",
+      align: "center",
+    },
+    {
+      title: "更改项",
+      dataIndex: "change_content",
+      key: "change_content",
+      align: "center",
+      render: (text) => {
+        return text == 1
+          ? "调整出场时间"
+          : text == 2
+            ? "变更车牌号"
+            : text == 3
+              ? "更改订单金额"
+              : text == 4
+                ? "免费该订单"
+                : "作废该订单"
+      }
+    },
+    {
+      title: "更改初始值",
+      dataIndex: "initial_value",
+      key: "initial_value",
+      align: "center",
+    },
+    {
+      title: "更改更新值",
+      dataIndex: "update_value",
+      key: "update_value",
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      align: "center",
+      fixed: "right",
+      render: (_, record) => {
+        return (
+          <Button
+            type="primary"
+            onClick={() => {
+              checkHistoryDetail(record);
+            }}
+          >
+            操作
+          </Button>
+        );
+      },
+    },
+  ];
+
+
+  const h_columns = [
+    {
+      title: "停车订单ID",
+      dataIndex: "park_id",
+      key: "park_id",
+      width: 200,
+      align: "center",
+      render: (text) => (
+        <>
+          <a
+            onClick={() => {
+              navigator.clipboard.writeText(`${text}`).then(() => {
+                message.success("已复制到剪切板");
+              });
+            }}
+          >
+            {text}
+          </a>
+        </>
+      ),
+    },
+    {
+      title: "车牌号",
+      dataIndex: "plate",
+      key: "plate",
+      align: "center",
+    },
+    {
+      title: "停车场名称",
+      dataIndex: "park_name",
+      key: "park_name",
+      align: "center",
+      width: 200,
+    },
+    {
+      title: "入场时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "计费时间",
+      dataIndex: "admission_time",
+      key: "admission_time",
+      align: "center",
+    },
+  ];
+
+
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [tableData, setTableData] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [tabKey, setTabKey] = useState("1");
+  // 车场id
+  const [parkId, setParkId] = useState("");
+  //支付记录数据
+  const [payRecord, setPayRecord] = useState([]);
+  //退款订单数据
+  const [refundRecord, setRefundRecord] = useState([]);
+  //操作记录数据
+  const [operationRecord, setOperatorRecord] = useState([]);
+  //历史处理数据
+  const [historyProgressRecord, setHistoryProgressRecord] = useState([]);
+  //停车记录信息数据
+  const [parkingRecordDetail, setParkingRecordDetail] = useState({});
+  //当前的所选择的停车信息索引
+  const [recordIndex, setRecordIndex] = useState(-1);
+  //当前所选择的订单ID
+  const [currentRecordID, setCurrentRecordID] = useState("");
+  //历史记录详情Modal
+  const [historyVisible, setHistoryVisible] = useState(false);
+  //历史记录详情的弹窗查看全部
+  const [isShowAll, setIsShowAll] = useState(false);
+  //历史记录车辆图片弹窗
+  const [platePhototModal, setPlatePhotoModal] = useState(false);
+  //历史记录详情数据
+  const [historyDataDetail, setHistoryDataDetail] = useState({});
+  const [DataDetail, setDataDetail] = useState({});
+  function openModal(index, record) {
+    setDetailVisible(true);
+    setParkingRecordDetail(record);
+    setHistoryDataDetail(record)
+    setRecordIndex(index);
+  }
+
+  const handleImgError = (e) => {
+    let evn = e || event
+    let img = evn.srcElement ? evn.srcElement : evn.target
+    img.src = errorImg
+  }
+
+  function changeKey(key) {
+    setTabKey(key);
+    switch (key) {
+      case "2":
+        getPaymentRecord(currentRecordID);
+        break;
+      case "3":
+        getRefundRecord(currentRecordID);
+        break;
+      case "4":
+        getOperateRecord(currentRecordID);
+        break;
+      case "5":
+        getHistoryRecord(currentRecordID);
+        break;
+      default:
+        break;
+    }
+  }
+  function renderParkRecord(item) {
+    return (
+      item && (
+        <div>
+          <Descriptions title="停车场名称">
+            <Descriptions.Item label="停车场名称">{item.road}</Descriptions.Item>
+            <Descriptions.Item label="泊位号">{item.berth_id}</Descriptions.Item>
+            <Descriptions.Item label="区域">{item.region}</Descriptions.Item>
+            <Descriptions.Item label="商户">{item.operator}</Descriptions.Item>
+            <Descriptions.Item label="车场类型">{item.road_type}</Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="停车信息">
+            <Descriptions.Item label="车牌号">{item.plate}</Descriptions.Item>
+            <Descriptions.Item label="会员手机号">{item.phone}</Descriptions.Item>
+            <Descriptions.Item label="入场时间"> {item.in_time} </Descriptions.Item>
+            <Descriptions.Item label="出场时间">{item.out_time}</Descriptions.Item>
+            <Descriptions.Item label="停车时长">{item.admission_time}</Descriptions.Item>
+            <Descriptions.Item label="订单金额"> {item.order_amount}</Descriptions.Item>
+            <Descriptions.Item label="停车卡折扣">{item.parking_card_discount} </Descriptions.Item>
+            <Descriptions.Item label="车场折扣">
+              {item.road_discount}
+            </Descriptions.Item>
+            <Descriptions.Item label="应收金额">
+              {item.receivable_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="优惠券">{item.coupon }</Descriptions.Item>
+            <Descriptions.Item label="优惠总额">
+              {item.preferential_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="实付金额">
+              {item.actual_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="优惠退款">
+              {item.refund_discount}
+            </Descriptions.Item>
+            <Descriptions.Item label="实付退款">
+              {item.actual_refund}
+            </Descriptions.Item>
+            <Descriptions.Item label="退款总计">
+              {item.refund_total}
+            </Descriptions.Item>
+            <Descriptions.Item label="入场收费员">
+              {item.in_person}
+            </Descriptions.Item>
+            <Descriptions.Item label="出场收费员">
+              {item.out_person}
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="入场照片">
+            <Descriptions.Item label="车辆照片">
+              <div className="ltc-item ltc-item-img ">
+                <Image src={item.in_veh_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
+              </div>
+            </Descriptions.Item>
+            <Descriptions.Item label="车牌照片">
+              <div className="ltc-item ltc-item-img ">
+                <Image src={item.in_plate_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
+              </div>
+            </Descriptions.Item>
+            <Descriptions.Item label=" 残疾人证件">
+              <div className="ltc-item ltc-item-img ">
+                <Image src={item.cj_pic || require("../../../../../src/assets/images/error-img-new.png")} onError={handleImgError}/>
+              </div>
+            </Descriptions.Item>
+          </Descriptions>
+        </div>
+      )
+    );
+  }
+  //查看历史详情
+  const [getHistoryData,setGetHistoryData]=useState({})
+  function checkHistoryDetail(record) {
+    setGetHistoryData(record);
+    setHistoryVisible(true);
+  }
+  function renderModalTable(columns, dataSource) {
+    return (
+      <Table
+        columns={columns}
+        dataSource={dataSource}
+        scroll={{ x: 1000 }}
+      // className="yisa-table"
+      />
+    );
+  }
+  //获取订单的支付记录
+  function getPaymentRecord(park_id) {
+    ajax.getPaymentRecord({ park_record_id: park_id }).then((res) => {
+      if (res.status === 20000) {
+        setPayRecord(res.data.list);
+      }
+    });
+  }
+  //获取退款订单的接口
+  function getRefundRecord(park_id) {
+    ajax.getRefundRecord({ park_id }).then((res) => {
+      if (res.status === 20000) {
+        setRefundRecord(res.data.list);
+      }
+    });
+  }
+  //获取操作处理的接口
+  function getOperateRecord(park_id) {
+    ajax.getOperateRecord({ park_record_id: park_id }).then((res) => {
+      if (res.status === 20000) {
+        setOperatorRecord(res.data.list);
+      }
+    });
+  }
+  //获取历史处理记录的接口
+  function getHistoryRecord(park_id) {
+    ajax.getHistoryRecord({ park_record_id: park_id }).then((res) => {
+      if (res.status === 20000) {
+        // res.data.list.map(res=>{
+          setHistoryProgressRecord(res.data.list);
+        // })
+      }
+    });
+  }
+
+  //获取函数
+  function search(params) {
+    utils.tableScrollTop("parent-table-scroll")
+    ajax.getParkingList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      }else{
+        message.error(res.message)
+      }
+    });
+  }
+  useEffect(() => {
+    // setParkingRecordDetail(tableData[recordIndex]);
+    setCurrentRecordID(tableData[recordIndex]?.park_id || "");
+  }, [recordIndex]);
+
+  return (
+    <>
+      <TableModule
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        pagename="停车记录查询"
+        mandatory={['plate','berth_id']}
+        mandatory_name={['车牌号或泊位号']}
+        pageName={'parkRecordTotal'}
+        initFormData={initFormData}
+        total={total}
+        search={search}
+        exportUrl="/api/bpm/record/get_record_export"
+      />
+      <Modal
+        open={detailVisible}
+        width={1500}
+        className="totalModal"
+        onCancel={() => {
+          setDetailVisible(false);
+          setTabKey("1");
+        }}
+        destroyOnClose
+      >
+        <Tabs activeKey={tabKey} onChange={changeKey}>
+          <Tabs.TabPane tab="停车记录信息" key="1">
+            {renderParkRecord(parkingRecordDetail)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="支付记录" key="2">
+            {renderModalTable(payRecordColumns, payRecord)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="退款订单" key="3">
+            {renderModalTable(refundRecordColumns, refundRecord)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="操作记录" key="4">
+            {renderModalTable(operatorRecordColumns, operationRecord)}
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="历史处理" key="5">
+            {renderModalTable(historyProgressColumns, historyProgressRecord)}
+          </Tabs.TabPane>
+        </Tabs>
+        <Modal
+          title="异常订单处理记录审核"
+          visible={historyVisible}
+          onCancel={() => {
+            setHistoryVisible(false);
+          }}
+          className="hanleHistoyModal"
+          footer={null}
+          width={1000}
+        >
+          <Table
+            columns={h_columns}
+            dataSource={[
+              {
+                park_id: historyDataDetail.park_id,
+                plate: historyDataDetail.plate,
+                park_name: historyDataDetail?.road,
+                in_time: historyDataDetail.in_time,
+                admission_time: historyDataDetail?.out_time,
+              },
+            ]}
+            pagination={false}
+          // className="yisa-table"
+          />
+          <Descriptions title="车场详情">
+            <Descriptions.Item label="停车场名称">
+              {historyDataDetail?.road}
+            </Descriptions.Item>
+            <Descriptions.Item label="区域">
+              {historyDataDetail.region}
+            </Descriptions.Item>
+            <Descriptions.Item label="商户名称">
+              {historyDataDetail.operator}
+            </Descriptions.Item>
+            <Descriptions.Item label="泊位号">
+              {historyDataDetail.berth_id}
+            </Descriptions.Item>
+            <Descriptions.Item label="车场类型">
+              {historyDataDetail.road_type}
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="车辆详情">
+            <Descriptions.Item label="车牌号">
+              {historyDataDetail.plate}
+            </Descriptions.Item>
+            <Descriptions.Item label="停车时长">
+              {historyDataDetail.admission_time}
+            </Descriptions.Item>
+            <Descriptions.Item label="入场时间">
+              {historyDataDetail.in_time}
+            </Descriptions.Item>
+            <Descriptions.Item label="出场时间">
+              {historyDataDetail.out_time}
+            </Descriptions.Item>
+            <Descriptions.Item label="入场记录来源">
+              {historyDataDetail.in_source}
+            </Descriptions.Item>
+            <Descriptions.Item label="出场记录来源">
+              {historyDataDetail.out_source}
+            </Descriptions.Item>
+            <Descriptions.Item label="出入场图像">
+              <a
+                onClick={() => {
+                  setPlatePhotoModal(true);
+                }}
+              >
+                查看
+              </a>
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions title="订单详情">
+            <Descriptions.Item label="订单金额">
+              {historyDataDetail.order_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="优惠总计">
+              {historyDataDetail.preferential_total}
+            </Descriptions.Item>
+            <Descriptions.Item label="实付总计">
+              {historyDataDetail.actual_amount}
+            </Descriptions.Item>
+            <Descriptions.Item label="欠费总计">
+              {historyDataDetail.arrears_mount}
+            </Descriptions.Item>
+          </Descriptions>
+          <Descriptions
+            title="流程查看"
+            extra={
+              isShowAll ? (
+                <a
+                  onClick={() => {
+                    setIsShowAll(false);
+                  }}
+                >
+                  返回
+                </a>
+              ) : (
+                <a
+                  onClick={() => {
+                    setIsShowAll(true);
+                  }}
+                >
+                  查看全部
+                </a>
+              )
+            }
+          >
+            <Descriptions.Item>
+              <Steps
+                size="small"
+                current={2}
+                items={[
+                  {
+                    title: "发起处理",
+                  },
+                  {
+                    title: "申诉审核",
+                  },
+                ]}
+              />
+            </Descriptions.Item>
+          </Descriptions>
+          {isShowAll ? (
+            <Descriptions title="流程记录">
+              <Descriptions.Item>
+                <div className="ltc-box-title">
+                  <div className="ltc-icon"></div>流程记录
+                </div>
+                <div style={{ width: "450px" }}>
+                  <Timeline mode={"left"}>
+                    <Timeline.Item
+                      label={getHistoryData.examine_time?.split(" ")[0]}
+                    >
+                      <div>
+                        <div>申诉处理审核: 已完成</div>
+                        <div
+                          style={{
+                            display: "flex",
+                            width: "450px",
+                            justifyContent: "space-between",
+                          }}
+                        >
+                          <div>{getHistoryData.examine_time}</div>
+                          <div>来源:平台</div>
+                          <div>操作人:{getHistoryData.dealer}</div>
+                        </div>
+                      </div>
+                    </Timeline.Item>
+                    <Timeline.Item
+                      label={getHistoryData.deal_time?.split(" ")[0]}
+                    >
+                      <div>
+                        <div>申诉处理提审</div>
+                        <div
+                          style={{
+                            display: "flex",
+                            width: "450px",
+                            justifyContent: "space-between",
+                          }}
+                        >
+                          <div>
+                            <div>操作项</div>
+                            <div>
+                              {getHistoryData?.change_content == 1
+                                ? "调整出场时间"
+                                : getHistoryData?.change_content == 2
+                                  ? "变更车牌号"
+                                  : getHistoryData?.change_content == 3
+                                    ? "更改订单金额"
+                                    : getHistoryData?.change_content == 4
+                                      ? "免费该订单"
+                                      : "作废该订单"}
+                            </div>
+                            <div>{getHistoryData.deal_time}</div>
+                          </div>
+                          <div>
+                            <div>初始值</div>
+                            <div>{getHistoryData.initial_value || "--"}</div>
+                            <div>来源:平台</div>
+                          </div>
+                          <div>
+                            <div>变更值</div>
+                            <div>{getHistoryData.update_value || "--"}</div>
+                            <div>{getHistoryData.dealer}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </Timeline.Item>
+                  </Timeline>
+                </div>
+              </Descriptions.Item>
+            </Descriptions>
+          ) : (
+            <Descriptions title="异常订单处理">
+              <Descriptions.Item span={3}>
+                <Descriptions title="处理理由">
+                  <Descriptions.Item>
+                    <TextArea disabled value={getHistoryData?.deal_reason} />
+                  </Descriptions.Item>
+                </Descriptions>
+              </Descriptions.Item>
+              <Descriptions.Item>
+                <Descriptions title="处理方式">
+                  <Descriptions.Item label="更改项">
+                    <div style={{ width: "200px" }}>
+                      <Input
+                        disabled
+                        value={
+                          getHistoryData?.change_content == 1
+                            ? "调整出场时间"
+                            : getHistoryData?.change_content == 2
+                              ? "变更车牌号"
+                              : getHistoryData?.change_content == 3
+                                ? "更改订单金额"
+                                : getHistoryData?.change_content == 4
+                                  ? "免费该订单"
+                                  : "作废该订单"
+                        }
+                      ></Input>
+                    </div>
+                  </Descriptions.Item>
+                  {getHistoryData.change_content == 1 ? (
+                    <>
+                      <Descriptions.Item label="调整基于">
+                        <div style={{ width: "240px" }}>
+                          <Select
+                            disabled
+                            style={{
+                              width: 140,
+                            }}
+                            defaultValue={
+                              getHistoryData?.update_value.indexOf(" ") > -1
+                                ? "1"
+                                : "2"
+                            }
+                            options={[
+                              {
+                                value: "1",
+                                label: "具体时间日期",
+                              },
+                              {
+                                value: "2",
+                                label: "记录入场时间",
+                              },
+                            ]}
+                          />
+                        </div>
+                      </Descriptions.Item>
+                      <Descriptions.Item label="时间">
+                        <div style={{ width: "240px" }}>
+                          <Input
+                            disabled
+                            placeholder={getHistoryData.update_value}
+                          ></Input>
+                        </div>
+                      </Descriptions.Item>
+                    </>
+                  ) : getHistoryData.change_content == 2 ? (
+                    <Descriptions.Item label="车牌号">
+                      <div style={{ width: "40px", display: "inline-block" }}>
+                        <Input
+                          disabled
+                          placeholder={getHistoryData.plate_type}
+                        ></Input>
+                      </div>
+                      <div style={{ width: "150px", display: "inline-block" }}>
+                        <Input
+                          disabled
+                          placeholder={getHistoryData.update_value}
+                        ></Input>
+                      </div>
+                    </Descriptions.Item>
+                  ) : getHistoryData.change_content == 3 ? (
+                    <>
+                      <Descriptions.Item label="增/减">
+                        <div style={{ width: "200px" }}>
+                          <Select
+                            disabled
+                            defaultValue={
+                              getHistoryData.update_value > 0 ? "1" : "2"
+                            }
+                            options={[
+                              {
+                                value: "1",
+                                label: "增",
+                              },
+                              {
+                                value: "2",
+                                label: "减",
+                              },
+                            ]}
+                          />
+                        </div>
+                      </Descriptions.Item>
+                      <Descriptions.Item label="金额">
+                        <div style={{ width: "200px" }}>
+                          <Input
+                            disabled
+                            placeholder={Math.abs(
+                              getHistoryData.update_value
+                            )}
+                          ></Input>
+                        </div>
+                      </Descriptions.Item>
+                    </>
+                  ) : null}
+                </Descriptions>
+              </Descriptions.Item>
+            </Descriptions>
+          )}
+          <Modal
+            visible={platePhototModal}
+            onCancel={() => {
+              setPlatePhotoModal(false);
+            }}
+            footer={false}
+            className="modal-img"
+          >
+            <div>
+              <div className="eae-modal-title">
+                <div className="ltc-icon"></div>入场图片
+              </div>
+              <div className="eae-modal-item">
+                <div>车辆照片</div>
+                <Image src={historyDataDetail.in_veh_pic} onError={handleImgError}/>
+              </div>
+              <div className="eae-modal-item">
+                <div>车牌照片</div>
+                <Image src={historyDataDetail.in_plate_pic} onError={handleImgError}/>
+              </div>
+            </div>
+          </Modal>
+        </Modal>
+      </Modal>
+    </>
+  );
+}
+
+export default OrderRuleMgm;
diff --git a/src/pages/NewEnergy/ChargingMgm/index.jsx b/src/pages/NewEnergy/ChargingMgm/index.jsx
new file mode 100644
index 0000000..67bddb3
--- /dev/null
+++ b/src/pages/NewEnergy/ChargingMgm/index.jsx
@@ -0,0 +1,8 @@
+import BillingRule from './BillingRule'
+import OrderRuleMgm from './OrderRuleMgm'
+
+
+export default {
+  BillingRule,
+  OrderRuleMgm
+}
\ No newline at end of file
diff --git a/src/pages/NewEnergy/index.jsx b/src/pages/NewEnergy/index.jsx
new file mode 100644
index 0000000..b3d4da8
--- /dev/null
+++ b/src/pages/NewEnergy/index.jsx
@@ -0,0 +1,5 @@
+import ChargingMgm from './ChargingMgm'
+
+export default {
+  ...ChargingMgm
+}
\ No newline at end of file
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 9cb2a03..0912411 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -14,6 +14,7 @@ import OperationCenter  from "./OperationCenter"
 import FinancialMgm  from "./FinancialMgm"
 import SystemMgm  from "./SystemMgm"
 import OffPeak  from "./OffPeak"
+import NewEnergy  from "./NewEnergy"
 export default {
   _404,
   _403,
@@ -26,5 +27,6 @@ export default {
   ...OperationCenter,
   ...FinancialMgm,
   ...SystemMgm,
-  ...OffPeak
+  ...OffPeak,
+  ...NewEnergy
 }
diff --git a/src/router/router.config.js b/src/router/router.config.js
index 3b78b32..fd69ada 100644
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@@ -1296,7 +1296,20 @@ let routes = [
         text: "时间规则",
         name: "timeRule",
         component: pages.TimeRule,
-      }
+      },
+       // -------------------------------新能源充电系统
+       {
+        path: "/newEnergy/billingRule",
+        text: "计费规则",
+        name: "billingRule",
+        component: pages.BillingRule,
+      },
+      {
+        path: "/newEnergy/orderRuleMgm",
+        text: "预约规则管理",
+        name: "orderRuleMgm",
+        component: pages.OrderRuleMgm,
+      },
     ],
   },
 ];