merge(): 查询记录模块代码合并

1 year ago · 8e8987f724
27 changed files with 1896 additions and 1338 deletions
--- 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 />} />
 const ChargerMonitor = loadable(() => import("./loadable"))
 export default (pros) => <ChargerMonitor {...pros} fallback={<LoadingImg />} />
--- 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;
--- 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 />} />
 const LockMonitor = loadable(() => import("./loadable"))
 export default (pros) => <LockMonitor {...pros} fallback={<LoadingImg />} />
--- 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;
--- 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 />} />
 const PileMonitor = loadable(() => import("./loadable"))
 export default (pros) => <PileMonitor {...pros} fallback={<LoadingImg />} />
--- 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;
--- a/src/pages/NewEnergy/RecordsInquiry/Appointment/index.jsx
+++ 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 />} />
--- a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.scss
+++ b/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.scss
--- a/src/pages/NewEnergy/RecordsInquiry/Appointment/loadable.jsx
+++ 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;
--- a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/index.jsx
+++ b/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 />} />
--- a/src/pages/NewEnergy/RecordsInquiry/Charge/index.jsx
+++ 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 />} />
--- a/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.scss
+++ b/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.scss
--- a/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/loadable.jsx
+++ b/src/pages/NewEnergy/RecordsInquiry/AppointmentRecord/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;
--- a/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.jsx
+++ b/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/index.jsx
--- a/src/pages/NewEnergy/RecordsInquiry/Unlocking/index.scss
+++ 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;
  }
 }
--- a/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/loadable.jsx
+++ b/src/pages/NewEnergy/RecordsInquiry/UnlockingRecord/loadable.jsx
--- a/src/pages/NewEnergy/RecordsInquiry/Violation/index.jsx
+++ 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 />} />
--- a/src/pages/NewEnergy/RecordsInquiry/Violation/index.scss
+++ 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;
  }
 }
--- a/src/pages/NewEnergy/RecordsInquiry/Violation/loadable.jsx
+++ 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;
--- 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
 }
--- 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
 }
--- 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",