feat():查询记录模块新增页面

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 />} />

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;

src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.jsx

@@ -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 />} />

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 />} />

src/pages/NewEnergy/RecordsInquiry/Charge/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;
+  }
+}

src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/loadable.jsx → 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;

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 />} />

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;
+  }
+}

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;

src/pages/NewEnergy/RecordsInquiry/index.jsx

@@ -1,5 +1,9 @@
-import AppointmentRecord from './AppointmentRecord'
+import Appointment from './Appointment'
+import Charge from './Charge'
+import Violation from './Violation'
 
 export default {
-  AppointmentRecord
+  Appointment,
+  Charge,
+  Violation
 }

src/router/router.config.js

@@ -1337,10 +1337,22 @@ 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/violation",
+        text: "违规记录",
+        name: "violation",
+        component: pages.Violation,
       },
       {
         path: "/newEnergy/chargerMonitor",