diff --git a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.jsx b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.jsx
index 7fbec04..e9321ff 100644
--- a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.jsx
+++ b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.jsx
@@ -2,5 +2,5 @@ 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
+const ChargerMonitor = loadable(() => import("./loadable"))
+export default (pros) => <ChargerMonitor {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx
index cecb221..f960e2f 100644
--- a/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx
+++ b/src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx
@@ -34,7 +34,7 @@ const { TextArea } = Input;
 
 let array = [];
 
-function BillingRule() {
+function ChargerMonitor() {
   const roadContent = (
     <div>
       <p>出场时间-入场时间的计算金额</p>
@@ -1123,4 +1123,4 @@ function BillingRule() {
   );
 }
 
-export default BillingRule;
+export default ChargerMonitor;
diff --git a/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.jsx b/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.jsx
index 7fbec04..d155dc7 100644
--- a/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.jsx
+++ b/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/index.jsx
@@ -2,5 +2,5 @@ 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
+const LockMonitor = loadable(() => import("./loadable"))
+export default (pros) => <LockMonitor {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx b/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx
index cecb221..b2afd6b 100644
--- a/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx
+++ b/src/pages/NewEnergy/RealtimeMonitor/LockMonitor/loadable.jsx
@@ -34,7 +34,7 @@ const { TextArea } = Input;
 
 let array = [];
 
-function BillingRule() {
+function LockMonitor() {
   const roadContent = (
     <div>
       <p>出场时间-入场时间的计算金额</p>
@@ -1123,4 +1123,4 @@ function BillingRule() {
   );
 }
 
-export default BillingRule;
+export default LockMonitor;
diff --git a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.jsx b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.jsx
index 7fbec04..d6150c1 100644
--- a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.jsx
+++ b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/index.jsx
@@ -2,5 +2,5 @@ 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
+const PileMonitor = loadable(() => import("./loadable"))
+export default (pros) => <PileMonitor {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx
index cecb221..6d6811a 100644
--- a/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx
+++ b/src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx
@@ -23,43 +23,15 @@ 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>
-  )
+function PileMonitor() {
+
   const columns = [
     {
       title: "序号",
@@ -139,88 +111,8 @@ function BillingRule() {
       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",
@@ -759,368 +651,8 @@ function BillingRule() {
         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;
+export default PileMonitor;
diff --git a/src/pages/NewEnergy/RecordsInquiry/Appointment/index.jsx b/src/pages/NewEnergy/RecordsInquiry/Appointment/index.jsx
new file mode 100644
index 0000000..d1dc1c2
--- /dev/null
+++ b/src/pages/NewEnergy/RecordsInquiry/Appointment/index.jsx
@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const Appointment = loadable(() => import("./loadable"))
+export default (pros) => <Appointment {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.scss b/src/pages/NewEnergy/RecordsInquiry/Appointment/index.scss
similarity index 100%
rename from src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.scss
rename to src/pages/NewEnergy/RecordsInquiry/Appointment/index.scss
diff --git a/src/pages/NewEnergy/RecordsInquiry/Appointment/loadable.jsx b/src/pages/NewEnergy/RecordsInquiry/Appointment/loadable.jsx
new file mode 100644
index 0000000..febe305
--- /dev/null
+++ b/src/pages/NewEnergy/RecordsInquiry/Appointment/loadable.jsx
@@ -0,0 +1,231 @@
+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 } from "@/config/common";
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import "./index.scss";
+
+const { TextArea } = Input;
+
+function Appointment() {
+  // 详情弹窗
+  const [detailVisible, setDetailVisible] = useState(false);
+  // 列表数据
+  const [tableData, setTableData] = useState([]);
+  // 数据总数
+  const [total, setTotal] = useState(0);
+  // 详情数据
+  const [detailData, setDetailData] = useState({});
+  // 初始搜索条件
+  const initFormData = {
+    operator: "0",
+    rule_name: "",
+  };
+
+  const columns = [
+    {
+      title: "用户手机号",
+      dataIndex: "operator",
+      key: "operator",
+      align: "center",
+    },
+    {
+      title: "车牌号",
+      dataIndex: "plate",
+      key: "plate",
+      align: "center",
+    },
+    {
+      title: "充电站",
+      dataIndex: "plate_color",
+      key: "plate_color",
+      align: "center",
+    },
+    {
+      title: "商户名称",
+      dataIndex: "berth_id",
+      key: "berth_id",
+      align: "center",
+    },
+    {
+      title: "降预约开始时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "预约截至时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "缴纳预约费用金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "缴费时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "订单状态",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "订单完结时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "预约费用退款金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "顶动感实收金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      align: "center",
+      fixed: "right",
+      width: 100,
+      render: (text, record, index) => {
+        return (
+          <>
+            <Button type="primary" onClick={() => openModal(index, record)}>
+              详情
+            </Button>
+          </>
+        )
+
+      },
+    },
+  ];
+
+  const formSearch = [
+    {
+      name: "phone",
+      type: "Input",
+      label: "用户手机号",
+      placeholder: "请输入用户手机号",
+    },
+    {
+      name: "plate",
+      type: "Input",
+      label: "车牌号",
+      placeholder: "请输入车牌号",
+    },
+    {
+      name: "charging",
+      type: "Input",
+      label: "充电站",
+      placeholder: "请输入充电站",
+    },
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      defaultValue: "0",
+      placeholder: "请选择商户名称",
+    },
+    {
+      name: "timeStart",
+      type: "DateRangePicker",
+      label: "预约开始时间",
+    },
+    {
+      name: "timeEnd",
+      type: "DateRangePicker",
+      label: "订单完结时间",
+    },
+  ];
+
+  // 打开弹窗
+  const openModal = (index, record) => {
+    setDetailData(record)
+    setDetailVisible(true);
+  }
+
+  // 检索
+  const search = (params) => {
+    ajax.getParkingList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      } else {
+        message.error(res.message)
+      }
+    });
+  }
+
+  const handelAdd = () => {
+    setDetailVisible(true)
+  }
+
+  return (
+    <>
+      <TableModule
+        showSerial={true}
+        isExport={false}
+        diyButton={
+          <Button
+            type="primary"
+            onClick={handelAdd}
+          >
+            新增
+          </Button>
+        }
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        pagename="预约订单"
+        pageName={'Appointment'}
+        initFormData={initFormData}
+        total={total}
+        search={search}
+        exportUrl="/api/bpm/record/get_record_export"
+      />
+      <Modal
+        open={detailVisible}
+        width={800}
+        className="totalModal"
+        onCancel={() => {
+          setDetailVisible(false);
+        }}
+        destroyOnClose
+      >
+
+      </Modal>
+    </>
+  );
+}
+
+export default Appointment;
diff --git a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.jsx b/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.jsx
deleted file mode 100644
index d0d293b..0000000
--- a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.jsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from "react"
-import loadable from "@loadable/component"
-import { LoadingImg } from "@/components"
-
-const AppointmentRecord = loadable(() => import("./loadable"))
-export default (pros) => <AppointmentRecord {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/RecordsInquiry/Charge/index.jsx b/src/pages/NewEnergy/RecordsInquiry/Charge/index.jsx
new file mode 100644
index 0000000..fe31772
--- /dev/null
+++ b/src/pages/NewEnergy/RecordsInquiry/Charge/index.jsx
@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const Charge = loadable(() => import("./loadable"))
+export default (pros) => <Charge {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.scss b/src/pages/NewEnergy/RecordsInquiry/Charge/index.scss
similarity index 100%
rename from src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.scss
rename to src/pages/NewEnergy/RecordsInquiry/Charge/index.scss
diff --git a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/loadable.jsx b/src/pages/NewEnergy/RecordsInquiry/Charge/loadable.jsx
similarity index 64%
rename from src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/loadable.jsx
rename to src/pages/NewEnergy/RecordsInquiry/Charge/loadable.jsx
index f26357d..50650f2 100644
--- a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/loadable.jsx
+++ b/src/pages/NewEnergy/RecordsInquiry/Charge/loadable.jsx
@@ -22,7 +22,7 @@ import "./index.scss";
 
 const { TextArea } = Input;
 
-function AppointmentRecord() {
+function Charge() {
   // 详情弹窗
   const [detailVisible, setDetailVisible] = useState(false);
   // 列表数据
@@ -39,32 +39,73 @@ function AppointmentRecord() {
 
   const columns = [
     {
-      title: "运营商名称",
+      title: "用户手机号",
       dataIndex: "operator",
       key: "operator",
       align: "center",
     },
     {
-      title: "规则名称",
+      title: "车牌号",
       dataIndex: "plate",
       key: "plate",
       align: "center",
     },
     {
-      title: "规则编码",
+      title: "充电站",
       dataIndex: "plate_color",
       key: "plate_color",
       align: "center",
     },
     {
-      title: "创建人",
+      title: "商户名称",
       dataIndex: "berth_id",
       key: "berth_id",
-      width: 100,
       align: "center",
     },
     {
-      title: "创建时间",
+      title: "降预约开始时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "预约截至时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "缴纳预约费用金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "缴费时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "订单状态",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "订单完结时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "预约费用退款金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "顶动感实收金额",
       dataIndex: "in_time",
       key: "in_time",
       align: "center",
@@ -91,6 +132,24 @@ function AppointmentRecord() {
 
   const formSearch = [
     {
+      name: "phone",
+      type: "Input",
+      label: "用户手机号",
+      placeholder: "请输入用户手机号",
+    },
+    {
+      name: "plate",
+      type: "Input",
+      label: "车牌号",
+      placeholder: "请输入车牌号",
+    },
+    {
+      name: "charging",
+      type: "Input",
+      label: "充电站",
+      placeholder: "请输入充电站",
+    },
+    {
       name: "operator",
       type: "Select",
       label: "商户名称",
@@ -98,15 +157,14 @@ function AppointmentRecord() {
       placeholder: "请选择商户名称",
     },
     {
-      name: "rule_name",
-      type: "Input",
-      label: "规则名称",
-      placeholder: "请输入出场收费员",
+      name: "timeStart",
+      type: "DateRangePicker",
+      label: "预约开始时间",
     },
     {
-      name: "timePeriod",
-      type: "RangePicker",
-      label: "时间段",
+      name: "timeEnd",
+      type: "DateRangePicker",
+      label: "订单完结时间",
     },
   ];
 
@@ -148,8 +206,8 @@ function AppointmentRecord() {
         columns={columns}
         tableData={tableData}
         formSearch={formSearch}
-        pagename="停车记录查询"
-        pageName={'AppointmentRecord'}
+        pagename="预约订单"
+        pageName={'Appointment'}
         initFormData={initFormData}
         total={total}
         search={search}
@@ -157,7 +215,7 @@ function AppointmentRecord() {
       />
       <Modal
         open={detailVisible}
-        width={1500}
+        width={800}
         className="totalModal"
         onCancel={() => {
           setDetailVisible(false);
@@ -170,4 +228,4 @@ function AppointmentRecord() {
   );
 }
 
-export default AppointmentRecord;
+export default Charge;
diff --git a/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.jsx b/src/pages/NewEnergy/RecordsInquiry/Unlocking/index.jsx
similarity index 100%
rename from src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.jsx
rename to src/pages/NewEnergy/RecordsInquiry/Unlocking/index.jsx
diff --git a/src/pages/NewEnergy/RecordsInquiry/Unlocking/index.scss b/src/pages/NewEnergy/RecordsInquiry/Unlocking/index.scss
new file mode 100644
index 0000000..9a8202a
--- /dev/null
+++ b/src/pages/NewEnergy/RecordsInquiry/Unlocking/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/RecordsInquiry/UnlockingRecord/loadable.jsx b/src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx
similarity index 100%
rename from src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/loadable.jsx
rename to src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx
diff --git a/src/pages/NewEnergy/RecordsInquiry/Violation/index.jsx b/src/pages/NewEnergy/RecordsInquiry/Violation/index.jsx
new file mode 100644
index 0000000..729bec2
--- /dev/null
+++ b/src/pages/NewEnergy/RecordsInquiry/Violation/index.jsx
@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const Violation = loadable(() => import("./loadable"))
+export default (pros) => <Violation {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/NewEnergy/RecordsInquiry/Violation/index.scss b/src/pages/NewEnergy/RecordsInquiry/Violation/index.scss
new file mode 100644
index 0000000..9a8202a
--- /dev/null
+++ b/src/pages/NewEnergy/RecordsInquiry/Violation/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/RecordsInquiry/Violation/loadable.jsx b/src/pages/NewEnergy/RecordsInquiry/Violation/loadable.jsx
new file mode 100644
index 0000000..1e7a33b
--- /dev/null
+++ b/src/pages/NewEnergy/RecordsInquiry/Violation/loadable.jsx
@@ -0,0 +1,231 @@
+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 } from "@/config/common";
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import "./index.scss";
+
+const { TextArea } = Input;
+
+function Violation() {
+  // 详情弹窗
+  const [detailVisible, setDetailVisible] = useState(false);
+  // 列表数据
+  const [tableData, setTableData] = useState([]);
+  // 数据总数
+  const [total, setTotal] = useState(0);
+  // 详情数据
+  const [detailData, setDetailData] = useState({});
+  // 初始搜索条件
+  const initFormData = {
+    operator: "0",
+    rule_name: "",
+  };
+
+  const columns = [
+    {
+      title: "用户手机号",
+      dataIndex: "operator",
+      key: "operator",
+      align: "center",
+    },
+    {
+      title: "车牌号",
+      dataIndex: "plate",
+      key: "plate",
+      align: "center",
+    },
+    {
+      title: "充电站",
+      dataIndex: "plate_color",
+      key: "plate_color",
+      align: "center",
+    },
+    {
+      title: "商户名称",
+      dataIndex: "berth_id",
+      key: "berth_id",
+      align: "center",
+    },
+    {
+      title: "降预约开始时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "预约截至时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "缴纳预约费用金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "缴费时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "订单状态",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "订单完结时间",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "预约费用退款金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "顶动感实收金额",
+      dataIndex: "in_time",
+      key: "in_time",
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      align: "center",
+      fixed: "right",
+      width: 100,
+      render: (text, record, index) => {
+        return (
+          <>
+            <Button type="primary" onClick={() => openModal(index, record)}>
+              详情
+            </Button>
+          </>
+        )
+
+      },
+    },
+  ];
+
+  const formSearch = [
+    {
+      name: "phone",
+      type: "Input",
+      label: "用户手机号",
+      placeholder: "请输入用户手机号",
+    },
+    {
+      name: "plate",
+      type: "Input",
+      label: "车牌号",
+      placeholder: "请输入车牌号",
+    },
+    {
+      name: "charging",
+      type: "Input",
+      label: "充电站",
+      placeholder: "请输入充电站",
+    },
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      defaultValue: "0",
+      placeholder: "请选择商户名称",
+    },
+    {
+      name: "timeStart",
+      type: "DateRangePicker",
+      label: "预约开始时间",
+    },
+    {
+      name: "timeEnd",
+      type: "DateRangePicker",
+      label: "订单完结时间",
+    },
+  ];
+
+  // 打开弹窗
+  const openModal = (index, record) => {
+    setDetailData(record)
+    setDetailVisible(true);
+  }
+
+  // 检索
+  const search = (params) => {
+    ajax.getParkingList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      } else {
+        message.error(res.message)
+      }
+    });
+  }
+
+  const handelAdd = () => {
+    setDetailVisible(true)
+  }
+
+  return (
+    <>
+      <TableModule
+        showSerial={true}
+        isExport={false}
+        diyButton={
+          <Button
+            type="primary"
+            onClick={handelAdd}
+          >
+            新增
+          </Button>
+        }
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        pagename="预约订单"
+        pageName={'Appointment'}
+        initFormData={initFormData}
+        total={total}
+        search={search}
+        exportUrl="/api/bpm/record/get_record_export"
+      />
+      <Modal
+        open={detailVisible}
+        width={800}
+        className="totalModal"
+        onCancel={() => {
+          setDetailVisible(false);
+        }}
+        destroyOnClose
+      >
+
+      </Modal>
+    </>
+  );
+}
+
+export default Violation;
diff --git a/src/pages/NewEnergy/RecordsInquiry/index.jsx b/src/pages/NewEnergy/RecordsInquiry/index.jsx
index 73ad564..cefbc71 100644
--- a/src/pages/NewEnergy/RecordsInquiry/index.jsx
+++ b/src/pages/NewEnergy/RecordsInquiry/index.jsx
@@ -1,7 +1,13 @@
-import AppointmentRecord from './AppointmentRecord'
-import UnlockingRecord from './UnlockingRecord'
+import Appointment from './Appointment'
+import Charge from './Charge'
+import Violation from './Violation'
+import Unlocking from './Unlocking'
 
+
+  
 export default {
-  AppointmentRecord,
-  UnlockingRecord
+  Appointment,
+  Charge,
+  Violation,
+  Unlocking
 }
\ No newline at end of file
diff --git a/src/pages/NewEnergy/index.jsx b/src/pages/NewEnergy/index.jsx
index 7036634..7d43cfc 100644
--- a/src/pages/NewEnergy/index.jsx
+++ b/src/pages/NewEnergy/index.jsx
@@ -5,7 +5,7 @@ import RealtimeMonitor from './RealtimeMonitor'
 
 export default {
   NewEnergyOverview,
+  ...RealtimeMonitor,
   ...ChargingMgm,
   ...RecordsInquiry,
-  RealtimeMonitor
 }
\ No newline at end of file
diff --git a/src/router/router.config.js b/src/router/router.config.js
index c5656f0..1c5c6fe 100644
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@@ -1337,16 +1337,28 @@ let routes = [
         component: pages.OrderRuleMgm,
       },
       {
-        path: "/newEnergy/appointmentRecord",
+        path: "/newEnergy/charge",
+        text: "充电订单",
+        name: "charge",
+        component: pages.Charge,
+      },
+      {
+        path: "/newEnergy/appointment",
         text: "预约记录",
-        name: "appointmentRecord",
-        component: pages.AppointmentRecord,
+        name: "appointment",
+        component: pages.Appointment,
       },
       {
-        path: "/newEnergy/unlockingRecord",
+        path: "/newEnergy/violation",
+        text: "违规记录",
+        name: "violation",
+        component: pages.Violation,
+      },
+      {
+        path: "/newEnergy/unlocking",
         text: "开锁记录",
-        name: "unlockingRecord",
-        component: pages.UnlockingRecord,
+        name: "unlocking",
+        component: pages.Unlocking,
       },
       {
         path: "/newEnergy/chargerMonitor",
@@ -1358,7 +1370,7 @@ let routes = [
         path: "/newEnergy/lockMonitor",
         text: "地锁监控",
         name: "lockMonitor",
-        component: pages.OrderRuleMgm,
+        component: pages.LockMonitor,
       },
       {
         path: "/newEnergy/pileMonitor",