feat: 增加计费规则管理、路段管理、僵尸车管理页面

src/components/TableModule/index.jsx

@@ -12,7 +12,7 @@ import {
   DatePicker,
   Cascader,
   message,
-  Modal
+  Modal,
 } from "antd";
 import { dictionary } from "@/config/common";
 import ajax from "@/services";
@@ -29,15 +29,18 @@ function TableModule(props) {
     columns = [], //表头
     tableData = [], //table的数据
     formSearch = [], //左侧数据搜索项
-    search = () => { }, //搜索按钮的回调函数
+    search = () => {}, //搜索按钮的回调函数
     total = 0, //总数据量
     initFormData = {}, //初始化的表格搜索项
     exportUrl = "", //导出的接口
+    rowSelection = false, //自定义选择项
     isExport = true, //是否显示导出按钮
+    rightButtonGroup = [], //右侧按钮额外的展示，需要传入数组
     otherData = {}, //额外需要携带的参数，传入对象
+    rowKey, //table的key值
   } = props;
   const [searchForm] = Form.useForm();
-  const [tipForm] = Form.useForm()
+  const [tipForm] = Form.useForm();
   const timeFlag =
     formSearch.filter((item) => {
       return item.type === "FormSliderPicker";
@@ -70,8 +73,11 @@ function TableModule(props) {
   //tip导出弹窗
   const [tipModal, setTipModal] = useState({
     visible: false,
-    filename: pagename + (new Date().getMonth() + 1).toString().padStart(2, '0') + new Date().getDate()
-  })
+    filename:
+      pagename +
+      (new Date().getMonth() + 1).toString().padStart(2, "0") +
+      new Date().getDate(),
+  });
   const [pageData, setPageData] = useSetState({
     // 分页参数
     pn: 1,
@@ -97,17 +103,17 @@ function TableModule(props) {
         ...form,
         timeType: timeGroup.timeType,
         start_time: moment(timeGroup.timeRanges.start_time).format(
-          "YYYY-MM-DD hh:mm:ss"
+          "YYYY-MM-DD kk:mm:ss"
         ),
         end_time: moment(timeGroup.timeRanges.end_time).format(
-          "YYYY-MM-DD hh:mm:ss"
+          "YYYY-MM-DD kk:mm:ss"
         ),
       };
     }
     if (areaName !== null) form[areaName] = areaSelectedList;
     if (form.start_time !== void 0 && form.end_time !== void 0) {
-      form.start_time = moment(form.start_time).format("YYYY-MM-DD hh:mm:ss");
-      form.end_time = moment(form.end_time).format("YYYY-MM-DD hh:mm:ss");
+      form.start_time = moment(form.start_time).format("YYYY-MM-DD kk:mm:ss");
+      form.end_time = moment(form.end_time).format("YYYY-MM-DD kk:mm:ss");
     }
     search(form);
   }
@@ -204,24 +210,31 @@ function TableModule(props) {
                 children = (
                   <>
                     <Form.Item
-                      label={(item.defaultTitle && item.defaultTitle[0]) || "开始时间"}
+                      label={
+                        (item.defaultTitle && item.defaultTitle[0]) ||
+                        "开始时间"
+                      }
                       name={"start_time"}
                       key={"start_time"}
                       initialValue={
-                        (item.defaultValue && item.defaultValue[0]) || moment().startOf('day')
+                        (item.defaultValue && item.defaultValue[0]) ||
+                        moment().startOf("day")
                       }
                     >
-                      <DatePicker showTime format={"YYYY-MM-DD HH:mm:ss"} />
+                      <DatePicker showTime format={"YYYY-MM-DD kk:mm:ss"} />
                     </Form.Item>
                     <Form.Item
                       name="end_time"
-                      label={(item.defaultTitle && item.defaultTitle[1]) ||"结束时间"}
+                      label={
+                        (item.defaultTitle && item.defaultTitle[1]) ||
+                        "结束时间"
+                      }
                       key={"end_time"}
                       initialValue={
                         (item.defaultValue && item.defaultValue[1]) || moment()
                       }
                     >
-                      <DatePicker showTime format={"YYYY-MM-DD HH:mm:ss"} />
+                      <DatePicker showTime format={"YYYY-MM-DD kk:mm:ss"} />
                     </Form.Item>
                   </>
                 );
@@ -241,6 +254,17 @@ function TableModule(props) {
                     <Input addonBefore="大于等于" addonAfter="分钟" />
                   </Form.Item>
                 );
+                break;
+              case "__react_node":
+                children = (
+                  <Form.Item
+                    label={item.label}
+                    name={item.name}
+                    key={item.name}
+                  >
+                    {item.component()}
+                  </Form.Item>
+                );
             }
             return (
               <Col span={24} key={item.label}>
@@ -262,50 +286,58 @@ function TableModule(props) {
   }
 
   const exportBtn = (filename) => {
-    let form = { ...searchForm.getFieldsValue(), ...pageData, ...otherData, export: filename };
+    let form = {
+      ...searchForm.getFieldsValue(),
+      ...pageData,
+      ...otherData,
+      export: filename,
+    };
     if (timeFlag) {
       form = {
         ...form,
         timeType: timeGroup.timeType,
         start_time: moment(timeGroup.timeRanges.start_time).format(
-          "YYYY-MM-DD hh:mm:ss"
+          "YYYY-MM-DD kk:mm:ss"
         ),
         end_time: moment(timeGroup.timeRanges.end_time).format(
-          "YYYY-MM-DD hh:mm:ss"
+          "YYYY-MM-DD kk:mm:ss"
         ),
       };
     }
     if (areaName !== null) form[areaName] = areaSelectedList;
     if (form.start_time !== void 0 && form.end_time !== void 0) {
-      form.start_time = moment(form.start_time).format("YYYY-MM-DD hh:mm:ss");
-      form.end_time = moment(form.end_time).format("YYYY-MM-DD hh:mm:ss");
+      form.start_time = moment(form.start_time).format("YYYY-MM-DD kk:mm:ss");
+      form.end_time = moment(form.end_time).format("YYYY-MM-DD kk:mm:ss");
     }
     exportAjax({
       url: exportUrl,
       type: "post",
-      data: form
-    }).then(res => {
-      if (res.status === 20000) {
-        const link = document.createElement("a");
-        link.href = res.data.export_url;
-        link.target = "_blank"; // 打开新页面
-        link.click();
-        setTipModal({ ...tipModal, visible: false })
-      }
-      else {
-        message.error(res.message)
-      }
-    }).catch(err => {
-      console.error(err)
+      data: form,
     })
-  }
+      .then((res) => {
+        if (res.status === 20000) {
+          const link = document.createElement("a");
+          link.href = res.data.export_url;
+          link.target = "_blank"; // 打开新页面
+          link.click();
+          setTipModal({ ...tipModal, visible: false });
+        } else {
+          message.error(res.message);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
   function handleOk() {
-    tipForm.validateFields().then(res => {
-      exportBtn(res.filename)
-    }).catch(err => console.error(err))
+    tipForm
+      .validateFields()
+      .then((res) => {
+        exportBtn(res.filename);
+      })
+      .catch((err) => console.error(err));
   }
 
-
   useEffect(() => {
     getAllOperator();
   }, []);
@@ -350,8 +382,14 @@ function TableModule(props) {
             <span className="total-number"> {total}</span>
             <span className="letter">条结果</span>
           </span>
-          <div>
-            <Button type="primary" onClick={() => setTipModal({ ...tipModal, visible: true })}>导出</Button>
+          <div className="right-button-group">
+            {rightButtonGroup.map((item) => item)}
+            <Button
+              type="primary"
+              onClick={() => setTipModal({ ...tipModal, visible: true })}
+            >
+              导出
+            </Button>
           </div>
         </div>
         <ResultFlow
@@ -362,7 +400,9 @@ function TableModule(props) {
         >
           <div className="table-wrap">
             <Table
+              rowSelection={rowSelection}
               className="yisa-table"
+              rowKey={rowKey}
               columns={columns}
               dataSource={tableData}
               pagination={false}
@@ -384,15 +424,28 @@ function TableModule(props) {
           </div>
         </ResultFlow>
       </div>
-      <Modal open={tipModal.visible} onCancel={() => setTipModal({ ...tipModal, visible: false })} title="提示" onOk={handleOk}>
+      <Modal
+        open={tipModal.visible}
+        onCancel={() => setTipModal({ ...tipModal, visible: false })}
+        title="提示"
+        onOk={handleOk}
+      >
         <Form form={tipForm}>
-          <Form.Item label="文件名" name="filename" initialValue={tipModal.filename} rules={[{ required: true }]}><Input defaultValue={tipModal.filename} /></Form.Item>
-        </Form> </Modal>
+          <Form.Item
+            label="文件名"
+            name="filename"
+            initialValue={tipModal.filename}
+            rules={[{ required: true }]}
+          >
+            <Input defaultValue={tipModal.filename} />
+          </Form.Item>
+        </Form>{" "}
+      </Modal>
     </div>
   );
 }
 function InputSelectGroup(params) {
-  const { onChange = () => { } } = params;
+  const { onChange = () => {} } = params;
   const [timeType, setTimeType] = useState(1);
   const [timeGroup, setTimeGroup] = useState({
     start_time: moment().subtract(1, "day").format(),
@@ -446,7 +499,6 @@ function InputSelectGroup(params) {
           />
         </Col>
       </Row>
-
     </>
   );
 }

src/components/TableModule/index.scss

@@ -21,6 +21,12 @@ $color-primary: var(--color-primary);
     .table-wrap {
       height: calc(100% - 32px - 65px);
     }
+    .right-button-group {
+      display: flex;
+      button {
+        margin: 0 5px;
+      }
+    }
     .ant-tabs {
       margin-bottom: 16px;
       .ant-tabs-nav {
@@ -91,16 +97,14 @@ $color-primary: var(--color-primary);
   .ant-select-selection-placeholder {
     color: var(--color-placeholder);
   }
-  .ant-select-disabled.ant-select-single:not(.ant-select-customize-input)
-    .ant-select-selector {
+  .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 {
+  .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;

src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RecordList.jsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { Table } from "antd";
+import ajax from "@/services";
+function RecordList({ id }) {
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "id",
+      key: "id",
+      render: (text, record, index) => index + 1,
+    },
+    {
+      title: "订单ID",
+      dataIndex: "order_id",
+      key: "order_id",
+    },
+    {
+      title: "入场时间",
+      dataIndex: "in_time",
+      key: "in_time",
+    },
+    {
+      title: "出场时间",
+      dataIndex: "out_time",
+      key: "out_time",
+    },
+    {
+      title: "应收金额",
+      dataIndex: "ys_money",
+      key: "ys_money",
+    },
+    {
+      title: "优惠金额",
+      dataIndex: "yh_money",
+      key: "yh_money",
+    },
+    {
+      title: "实收金额",
+      dataIndex: "sf_money",
+      key: "sf_money",
+    },
+    {
+      title: "支付类型",
+      dataIndex: "pay_type_name",
+      key: "pay_type_name",
+    },
+    {
+      title: "支付渠道",
+      dataIndex: "payment_type_name",
+      key: "payment_type_name",
+    },
+    {
+      title: "支付设备",
+      dataIndex: "payment_device_name",
+      key: "payment_device_name",
+    },
+    {
+      title: "支付人",
+      dataIndex: "car_owner_name",
+      key: "car_owner_name",
+    },
+    {
+      title: "付款车场",
+      dataIndex: "park_name",
+      key: "park_name",
+    },
+    {
+      title: "第三方流水ID",
+      dataIndex: "third_party_flow_id",
+      key: "third_party_flow_id",
+    },
+  ];
+  const [dataSource, setDataSource] = useState([]);
+  function getList() {
+    ajax.showPayList({ id }).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+      }
+    });
+  }
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <Table
+      dataSource={dataSource}
+      columns={columns}
+      className="yisa-table"
+    ></Table>
+  );
+}
+
+export default RecordList;

src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/RefundList.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+import { Table } from "antd";
+import ajax from "@/services";
+function RefundList({ id }) {
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "id",
+      key: "id",
+      render: (text, record, index) => index + 1,
+    },
+    {
+      title: "退款方式",
+      dataIndex: "refund_type",
+      key: "refund_type",
+    },
+    {
+      title: "支付渠道",
+      dataIndex: "payment_type_name",
+      key: "payment_type_name",
+    },
+
+    {
+      title: "支付设备",
+      dataIndex: "payment_device_name",
+      key: "payment_device_name",
+    },
+    {
+      title: "退款原因",
+      dataIndex: "reason",
+      key: "reason",
+    },
+    {
+      title: "退款金额",
+      dataIndex: "refund_amount",
+      key: "refund_amount",
+    },
+    {
+      title: "申请人",
+      dataIndex: "application_person",
+      key: "application_person",
+    },
+
+    {
+      title: "申请时间",
+      dataIndex: "application_time",
+      key: "application_time",
+    },
+    {
+      title: "退款时间",
+      dataIndex: "refund_time",
+      key: "refund_time",
+    },
+  ];
+  const [dataSource, setDataSource] = useState([]);
+  function getList() {
+    ajax.showRefoundList({ id }).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+      }
+    });
+  }
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <Table
+      dataSource={dataSource}
+      columns={columns}
+      className="yisa-table"
+    ></Table>
+  );
+}
+
+export default RefundList;

src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/StopList.jsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import ajax from "@/services";
+import { message, Descriptions, Image } from "antd";
+function StopList({ id }) {
+  //获取停车记录
+  const [recordData, setRecordData] = useState({});
+
+  function getRecord() {
+    ajax.showStopList({ id }).then((res) => {
+      if (res.status === 20000) {
+        setRecordData(res.data.list[0]);
+      } else {
+        message.error(res.message);
+      }
+    });
+  }
+
+  useEffect(() => {
+    getRecord();
+  }, []);
+  return (
+    <div>
+      <Descriptions title="停车场信息">
+        <Descriptions.Item label="停车场名称">
+          {recordData.park_name}
+        </Descriptions.Item>
+        <Descriptions.Item label="区域">
+          {recordData.area_name}
+        </Descriptions.Item>
+        <Descriptions.Item label="商户">
+          {recordData.shop_name}
+        </Descriptions.Item>
+        <Descriptions.Item label="车场类型">
+          {recordData.road_type_name}
+        </Descriptions.Item>
+      </Descriptions>
+      <Descriptions title="停车信息">
+        <Descriptions.Item label="车牌号">
+          {recordData.plate_num}
+        </Descriptions.Item>
+        <Descriptions.Item label="会员手机号">
+          {recordData.phone}
+        </Descriptions.Item>
+        <Descriptions.Item label="入场时间">
+          {recordData.in_time}
+        </Descriptions.Item>
+        <Descriptions.Item label="出场时间">
+          {recordData.out_time}
+        </Descriptions.Item>
+        <Descriptions.Item label="停车时长">
+          {recordData.parking_time}
+        </Descriptions.Item>
+        <Descriptions.Item label="应收金额">
+          {recordData.ys_money}
+        </Descriptions.Item>
+        <Descriptions.Item label="优惠金额">
+          {recordData.yh_money}
+        </Descriptions.Item>
+        <Descriptions.Item label="实付金额">
+          {recordData.sf_money}
+        </Descriptions.Item>
+      </Descriptions>
+      <Descriptions title="入场照片">
+        <Descriptions.Item label="入场车辆照片">
+          <Image src={recordData.in_veh_pic} />
+        </Descriptions.Item>
+        <Descriptions.Item label="入场车牌照片">
+          <Image src={recordData.in_plate_pic} />
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+}
+
+export default StopList;

src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import { Modal, message, Tabs } from "antd";
+import ajax from "@/services";
+import StopList from "./StopList";
+import RecordList from "./RecordList";
+import RefundList from "./RefundList";
+import "./index.scss";
+function Detail(props) {
+  const { visible = false, close = () => {}, onOk = () => {}, id } = props;
+  //tabs数据
+  const tabsItems = [
+    {
+      label: "停车记录",
+      key: "1",
+      children: <StopList id={id} />,
+    },
+    {
+      label: "支付记录",
+      key: "2",
+      children: <RecordList id={id} />,
+    },
+    {
+      label: "退款订单",
+      key: "3",
+      children: <RefundList id={id} />,
+    },
+  ];
+  //tabs的key
+  const [tabsKey, setTabsKey] = useState("1");
+  function tabsChange(value) {
+    setTabsKey(value);
+  }
+  useEffect(() => {}, []);
+  return (
+    <Modal
+      open={visible}
+      onCancel={close}
+      onOk={onOk}
+      destroyOnClose
+      title="详情"
+      width={1200}
+    >
+      <Tabs items={tabsItems} activeKey={tabsKey} onChange={tabsChange} />
+    </Modal>
+  );
+}
+
+export default Detail;

src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/Detail/index.scss

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

src/pages/OutRoadMgm/OutBusinessRecord/OutParkingRecordInquiry/loadable.jsx

@@ -1,15 +1,184 @@
 import React, { useState, useRef, useEffect } from "react";
-// import {  message, Pagination, Table, Space, Modal, } from "antd";
+import { message, Pagination, Table, Space, Modal, Button } from "antd";
 // import { dictionary, utils } from "@/config/common";
 // import moment from 'moment'
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
-// import ajax from "@/services"
-// import {  FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
-// import "./index.scss";
-// import errorImg from "@/assets/images/layout/error.png"
-// import {  useLocation } from "react-router-dom";
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import "./index.scss";
+import Detail from "./Detail";
 function OutParkingRecordInquiry() {
-    return <div>OutParkingRecordInquiry</div>
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "id",
+      key: "id",
+    },
+    {
+      title: "区域",
+      dataIndex: "area",
+      key: "area",
+    },
+    {
+      title: "商户名称",
+      dataIndex: "merchantName",
+      key: "merchantName",
+    },
+    {
+      title: "停车场名称",
+      dataIndex: "parkingLotName",
+      key: "parkingLotName",
+    },
+    {
+      title: "车场类型",
+      dataIndex: "parkingLotType",
+      key: "parkingLotType",
+    },
+    {
+      title: "车牌号",
+      dataIndex: "licensePlate",
+      key: "licensePlate",
+    },
+    {
+      title: "泊位号",
+      dataIndex: "berthNumber",
+      key: "berthNumber",
+    },
+    {
+      title: "入场时间",
+      dataIndex: "entryTime",
+      key: "entryTime",
+    },
+    {
+      title: "离场时间",
+      dataIndex: "exitTime",
+      key: "exitTime",
+    },
+    {
+      title: "停车时长",
+      dataIndex: "parkingDuration",
+      key: "parkingDuration",
+    },
+    {
+      title: "应收金额",
+      dataIndex: "receivableAmount",
+      key: "receivableAmount",
+    },
+    {
+      title: "实收金额",
+      dataIndex: "actualAmount",
+      key: "actualAmount",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      render: (_, record) => (
+        <Button
+          onClick={() => {
+            setDetailModal({
+              ...detailModal,
+              visible: true,
+              id: record.id,
+            });
+          }}
+        >
+          操作
+        </Button>
+      ),
+    },
+  ];
+  const formSearch = [
+    {
+      name: "region",
+      type: "TreeSelect",
+      label: "区域",
+    },
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      placeholder: "请选择商户名称",
+    },
+    {
+      name: "parking_lot",
+      type: "Input",
+      label: "停车场名称",
+      placeholder: "请选择停车场名称",
+    },
+    {
+      name: "plate",
+      type: "Input",
+      label: "车牌号",
+      placeholder: "请输入车牌号",
+    },
+    {
+      name: "type",
+      type: "Select",
+      label: "出入场类型",
+      options: [
+        {
+          label: "出场",
+          value: 1,
+        },
+        {
+          label: "入场",
+          value: 2,
+        },
+      ],
+      defaultValue: 2,
+    },
+    {
+      name: "time",
+      type: "RangePicker",
+      label: "时间段",
+    },
+  ];
+  //搜索参数初始化
+  const initFormData = {};
+
+  //搜索的结果
+  const [tableData, setTableData] = useState([]);
+  //搜索的总结果数
+  const [total, setTotal] = useState(0);
+  const [detailModal, setDetailModal] = useState({
+    id: "",
+    visible: false,
+    close: () => setDetailModal({ ...detailModal, visible: false }),
+    onOk: () => {
+      detailModal.close();
+    },
+  });
+
+  function fetch(params) {
+    ajax.getRecordList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
+  }
+
+  return (
+    <>
+      <TableModule
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        total={total}
+        pagename=""
+        search={fetch}
+        initFormData={initFormData}
+        exportUrl=""
+      />
+      <Detail
+        visible={detailModal.visible}
+        close={detailModal.close}
+        onOk={detailModal.onOk}
+        id={detailModal.id}
+      />
+    </>
+  );
 }
 
-export default OutParkingRecordInquiry;
+export default OutParkingRecordInquiry;

src/pages/OutRoadMgm/OutSegmentMgm/ChargeRulesMgm/loadable.jsx

@@ -1,15 +1,106 @@
 import React, { useState, useRef, useEffect } from "react";
-// import {  message, Pagination, Table, Space, Modal, } from "antd";
+import { message, Pagination, Table, Space, Modal, Button } from "antd";
 // import { dictionary, utils } from "@/config/common";
 // import moment from 'moment'
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
-// import ajax from "@/services"
-// import {  FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
-// import "./index.scss";
-// import errorImg from "@/assets/images/layout/error.png"
-// import {  useLocation } from "react-router-dom";
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import "./index.scss";
 function ChargeRulesMgm() {
-    return <div>ChargeRulesMgm</div>
+  const columns = [
+    {
+      title: "商户名称",
+      dataIndex: "merchantName",
+      key: "merchantName",
+    },
+    {
+      title: "规则名称",
+      dataIndex: "ruleName",
+      key: "ruleName",
+    },
+    {
+      title: "规则编码",
+      dataIndex: "ruleCode",
+      key: "ruleCode",
+    },
+    {
+      title: "创建人",
+      dataIndex: "creator",
+      key: "creator",
+    },
+    {
+      title: "更新时间",
+      dataIndex: "updateTime",
+      key: "updateTime",
+    },
+    {
+      title: "描述",
+      dataIndex: "description",
+      key: "description",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      render: () => <a>Edit</a>,
+    },
+  ];
+  const formSearch = [
+    {
+      name: "rule_name",
+      type: "Input",
+      label: "规则名称",
+      placeholder: "请输入规则名称",
+    },
+    {
+      name: "rule_code",
+      type: "Input",
+      label: "规则编码",
+      placeholder: "请输入规则编码",
+    },
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      placeholder: "请选择商户名称",
+    },
+  ];
+  //搜索参数初始化
+  const initFormData = {
+    region: null,
+    type: 2,
+    operator: null,
+    road: "",
+    road_type: 0,
+    plate: "",
+  };
+
+  //搜索的结果
+  const [tableData, setTableData] = useState([]);
+  //搜索的总结果数
+  const [total, setTotal] = useState(0);
+
+  function fetch(params) {
+    ajax.getParkingArrearsList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
+  }
+
+  return (
+    <TableModule
+      columns={columns}
+      tableData={tableData}
+      formSearch={formSearch}
+      total={total}
+      pagename="停车欠费订单"
+      search={fetch}
+      initFormData={initFormData}
+      exportUrl="/api/bpm/record/get_parking_arrears_export"
+    />
+  );
 }
 
-export default ChargeRulesMgm;
+export default ChargeRulesMgm;

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.jsx

@@ -1,106 +1,147 @@
-import React from 'react'
-import { Button, Form, Radio, Input, Select, Row, Col } from 'antd'
-import './BusinessParameterConfig.scss'
-function BusinessParameterConfig() {
-    return (
-        <div style={{ width: "60%" }}>
-            <header style={{ margin: "10px 0" }}>
-                <h3>出入场配置</h3>
-            </header>
-            <main>
-                <Form>
-                    <Row gutter={[30]}>
-                        <Col span={12}>
-                            <Form.Item label="无牌车是否允许入场">
-                                <Radio.Group options={[
-                                    {
-                                        label: "是",
-                                        value: 1
-                                    },
-                                    {
-                                        label: "否",
-                                        value: 0
-                                    }
-                                ]} />
-                            </Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item label="支持相似车牌出入场匹配">
-                                <Radio.Group options={[
-                                    {
-                                        label: "是",
-                                        value: 1
-                                    },
-                                    {
-                                        label: "否",
-                                        value: 0
-                                    }
-                                ]} />
-                            </Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item label="车位满时是否允许月租车入场">
-                                <Radio.Group options={[
-                                    {
-                                        label: "是",
-                                        value: 1
-                                    },
-                                    {
-                                        label: "否",
-                                        value: 0
-                                    }
-                                ]} /></Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item label="军警车是否计费">
-                                <Radio.Group options={[
-                                    {
-                                        label: "是",
-                                        value: 1
-                                    },
-                                    {
-                                        label: "否",
-                                        value: 0
-                                    }
-                                ]} /></Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item label="场内缴费后免费离场时间">
-                                <Input></Input>
-                            </Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item label="断网时是否允许车辆欠费离场">
-                                <Radio.Group options={[
-                                    {
-                                        label: "是",
-                                        value: 1
-                                    },
-                                    {
-                                        label: "否",
-                                        value: 0
-                                    }
-                                ]} />
-                            </Form.Item>
-                        </Col>
-                        <Col span={12}>
-                            <Form.Item label="记录缺失收费区域偏向">
-                                <Select />
-                            </Form.Item>
-                        </Col>
-                        <Col span={24}>
-                            <Form.Item>
-                                <div className='bottom-button'>
-                                    <Button type="primary">同步失败</Button>
-                                    <Button type="primary" htmlType='submit'>保存并同步</Button>
-                                </div>
-                            </Form.Item>
-                        </Col>
-                    </Row>
-                </Form>
-            </main>
-        </div>
-    )
+import React, { useEffect, useState } from "react";
+import { Button, Form, Radio, Input, Select, Row, Col, message } from "antd";
+import ajax from "@/services";
+import "./BusinessParameterConfig.scss";
+function BusinessParameterConfig(props) {
+  const { id } = props;
+  const [form] = Form.useForm();
+
+  const [childList, setChildList] = useState([]);
+
+  function submit() {
+    console.log(form.getFieldsValue());
+    const params = form.getFieldsValue();
+    params.road_id = id;
+
+    ajax.getRoadServiceParameters(params).then((res) => {
+      if (res.status === 20000) {
+        message.success(res.message);
+      }
+    });
+  }
+  useEffect(() => {
+    ajax.getRoadAllChild().then((res) => {
+      if (res.status === 20000) {
+        setChildList(res.data);
+      }
+    });
+  }, []);
+  return (
+    <div style={{ width: "100%" }} className="Bussiness">
+      <header style={{ margin: "10px 0" }}>
+        <h3>出入场配置</h3>
+      </header>
+      <main>
+        <Form form={form} labelCol={{ span: 9 }} onFinish={submit}>
+          <Row gutter={[30]}>
+            <Col span={12}>
+              <Form.Item label="无牌车是否允许入场" name="unlicensed_vehicle">
+                <Radio.Group
+                  options={[
+                    {
+                      label: "是",
+                      value: 1,
+                    },
+                    {
+                      label: "否",
+                      value: 0,
+                    },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="支持相似车牌出入场匹配" name="similar_plates">
+                <Radio.Group
+                  options={[
+                    {
+                      label: "是",
+                      value: 1,
+                    },
+                    {
+                      label: "否",
+                      value: 0,
+                    },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车位满时是否允许月租车入场"
+                name="monthly_rental_car"
+              >
+                <Radio.Group
+                  options={[
+                    {
+                      label: "是",
+                      value: 1,
+                    },
+                    {
+                      label: "否",
+                      value: 0,
+                    },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="军警车是否计费" name="military_police_vehicles">
+                <Radio.Group
+                  options={[
+                    {
+                      label: "是",
+                      value: 1,
+                    },
+                    {
+                      label: "否",
+                      value: 0,
+                    },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="场内缴费后免费离场时间" name="free_time">
+                <Input></Input>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="断网时是否允许车辆欠费离场" name="arrearage">
+                <Radio.Group
+                  options={[
+                    {
+                      label: "是",
+                      value: 1,
+                    },
+                    {
+                      label: "否",
+                      value: 0,
+                    },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="记录缺失收费区域偏向" name="road_bias">
+                <Select options={childList} />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item>
+                <div className="bottom-button">
+                  <Button type="primary">同步失败</Button>
+                  <Button type="primary" htmlType="submit">
+                    保存并同步
+                  </Button>
+                </div>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </main>
+    </div>
+  );
 }
 
-export default BusinessParameterConfig
+export default BusinessParameterConfig;

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/BusinessParameterConfig.scss

@@ -1,6 +1,15 @@
-.bottom-button{
+.bottom-button {
     display: flex;
-    button{
-        margin:0 10px;
+    button {
+        margin: 0 10px;
     }
-}
+}
+
+.Bussiness {
+    .ant-modal-body input {
+        width: 183px;
+    }
+    .ant-select.ant-select-in-form-item {
+        width: 183px;
+    }
+}

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/BlacklistManagement.jsx

@@ -1,6 +1,25 @@
-import React from "react";
-import { Form, Select, Row, Col, Table, Button, Input } from "antd";
+import React, { useState, useEffect } from "react";
+import {
+  Form,
+  Select,
+  Row,
+  Col,
+  Table,
+  Button,
+  message,
+  Input,
+  Modal,
+  Popover,
+  DatePicker,
+} from "antd";
+import { dictionary, utils } from "@/config/common";
+import moment from "moment";
+import ajax from "@/services";
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
 function BlacklistManagement() {
+  const [searchForm] = Form.useForm();
+  const [editForm] = Form.useForm();
   const columns = [
     {
       title: "序号",
@@ -11,32 +30,50 @@ function BlacklistManagement() {
     },
     {
       title: "车牌号",
-      dataIndex: "licensePlate",
-      key: "licensePlate",
+      dataIndex: "plate",
+      key: "plate",
+      align: "center",
+    },
+    {
+      title: "车主姓名",
+      dataIndex: "car_owner_name",
+      key: "car_owner_name",
       align: "center",
     },
     {
       title: "手机号",
-      dataIndex: "phoneNumber",
-      key: "phoneNumber",
+      dataIndex: "phone",
+      key: "phone",
+      align: "center",
+    },
+    {
+      title: "开始日期",
+      dataIndex: "effective_begin_date",
+      key: "effective_begin_date",
       align: "center",
     },
     {
-      title: "订单金额",
-      dataIndex: "orderAmount",
-      key: "orderAmount",
+      title: "结束日期",
+      dataIndex: "effective_end_date",
+      key: "effective_end_date",
       align: "center",
     },
+    //  {
+    //   title: "同步状态",
+    //   dataIndex: "",
+    //   key: "orderTime",
+    //   align: "center",
+    // },
     {
-      title: "同步MS状态",
-      dataIndex: "msSyncStatus",
-      key: "msSyncStatus",
+      title: "生效状态",
+      dataIndex: "effective_status",
+      key: "effective_status",
       align: "center",
     },
     {
-      title: "订购时间",
-      dataIndex: "orderTime",
-      key: "orderTime",
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
       align: "center",
     },
     {
@@ -44,41 +81,209 @@ function BlacklistManagement() {
       dataIndex: "operation",
       key: "operation",
       align: "center",
-      render: () => {
-        return <Button type="primary">编辑</Button>;
+      render: (_, record) => {
+        return (
+          <Popover
+            trigger="hover"
+            content={
+              <>
+                <div>
+                  <a
+                    onClick={() => {
+                      setEditModal({ visible: true, status: "edit", record });
+                      setCurrentId(record.id);
+                      editForm.setFieldsValue({
+                        plate: record.plate,
+                        plate_color: record.plate_color,
+                        status: record.status,
+                        phone: record.phone,
+                        car_owner_name: record.car_owner_name,
+                        effective_date: [
+                          moment(record.effective_begin_date),
+                          moment(record.effective_end_date),
+                        ],
+                        note: record.note,
+                      });
+                    }}
+                  >
+                    编辑
+                  </a>
+                </div>
+                <div>
+                  <a
+                    onClick={() => {
+                      deleteBlackVehicle(record.id);
+                    }}
+                  >
+                    删除
+                  </a>
+                </div>
+
+                <div>
+                  <a
+                    onClick={() => {
+                      if (record.status === 1) {
+                        enableBlackVehicle(record.id);
+                      } else {
+                        disableBlackVehicle(record.id);
+                      }
+                    }}
+                  >
+                    {record.status === 1 ? "启用" : "禁用"}
+                  </a>
+                </div>
+              </>
+            }
+          >
+            <Button type="primary">编辑</Button>
+          </Popover>
+        );
       },
     },
   ];
+  const [pageData, setPageData] = useState({
+    pn: 1,
+    page_size: 10,
+  });
+  const [currentId, setCurrentId] = useState("");
+  const [dataSource, setDataSource] = useState([]);
+  const [total, setTotal] = useState(0);
+  const submit = () => {
+    setPageData({
+      pn: 1,
+      page_size: 10,
+    });
+  };
+  //搜索接口
+  const search = () => {
+    let params = { ...searchForm.getFieldsValue(), ...pageData };
+    ajax.getBlackList(params).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
+  };
+  const [editModal, setEditModal] = useState({
+    visible: false,
+    record: {},
+    status: "edit",
+  });
+  //删除接口
+  const deleteBlackVehicle = (id) => {
+    ajax.deleteBlackVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success("删除成功");
+        submit();
+      } else {
+        message.error(res.message);
+      }
+    });
+  };
+
+  //启用接口
+  const enableBlackVehicle = (id) => {
+    ajax.enableBlackVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success("启用成功");
+      } else {
+        message.error(res.message);
+      }
+    });
+  };
+  //禁用接口
+  const disableBlackVehicle = (id) => {
+    ajax.disableBlackVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success("禁用成功");
+      } else {
+        message.error(res.message);
+      }
+    });
+  };
+  //添加黑名单或编辑黑名单
+  const addBlackItem = () => {
+    editForm
+      .validateFields()
+      .then((res) => {
+        if (editModal.status === "add") {
+          ajax.addRoadBlackVehicle(res).then((res) => {
+            if (res.status === 20000) {
+              message.success("添加成功");
+              setEditModal({ visible: false });
+              editForm.resetFields();
+              submit();
+            } else {
+              message.error(res.message);
+            }
+          });
+        } else if (editModal.status === "edit") {
+          res.id = currentId;
+          ajax.editBlackVehicle(res).then((res) => {
+            if (res.status === 20000) {
+              message.success("编辑成功");
+              setEditModal({ visible: false });
+              editForm.resetFields();
+              submit();
+            } else {
+              message.error(res.message);
+            }
+          });
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+  useEffect(() => {
+    search();
+  }, [pageData]);
   return (
     <div style={{ margin: "20px 0 0" }}>
       <header>
-        <Form colon={false} labelCol={{ span: 6 }}>
+        <Form
+          form={searchForm}
+          colon={false}
+          labelCol={{ span: 6 }}
+          onFinish={submit}
+        >
           <Row>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车牌号">
+              <Form.Item label="车牌号" name="plate">
                 <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车主姓名">
+              <Form.Item label="车主姓名" name="car_owner_name">
                 <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="手机号">
+              <Form.Item label="手机号" name="phone">
                 <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="状态">
+              <Form.Item label="状态" name="status">
                 <Select />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
               <Form.Item>
                 <div className="CGM-button">
-                  <Button type="primary">查询</Button>
-                  <Button type="primary">添加</Button>
+                  <Button type="primary" htmlType="submit">
+                    查询
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setEditModal({
+                        visible: true,
+                        record: {},
+                        status: "add",
+                      });
+                    }}
+                  >
+                    添加
+                  </Button>
                   <Button type="primary">批量导入</Button>
                 </div>
               </Form.Item>
@@ -87,8 +292,98 @@ function BlacklistManagement() {
         </Form>
       </header>
       <main>
-        <Table columns={columns} className="yisa-table" />
+        <Table
+          columns={columns}
+          dataSource={dataSource}
+          className="yisa-table"
+          pagination={{
+            position: ["bottomCenter"],
+            total: total,
+            current: pageData.pn,
+            pageSize: pageData.page_size,
+            onChange: (page, pageSize) => {
+              setPageData({ pn: page, page_size: pageSize });
+            },
+            onShowSizeChange: (current, size) => {
+              setPageData({ pn: current, page_size: size });
+            },
+          }}
+        />
       </main>
+      <Modal
+        title="添加黑名单"
+        open={editModal.visible}
+        onCancel={() => {
+          setEditModal({ visible: false });
+          editForm.resetFields();
+        }}
+        onOk={addBlackItem}
+        width={900}
+      >
+        <Form form={editForm} colon={false} labelCol={{ span: 6 }} name="plate">
+          <Row gutter={[30]}>
+            <Col span={12}>
+              <Form.Item
+                label="车牌号"
+                name="plate"
+                rules={[{ required: true }]}
+              >
+                <Input disabled={editModal.status === "edit"} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车牌颜色"
+                rules={[{ required: true }]}
+                name="plate_color"
+              >
+                <Select disabled={editModal.status === "edit"} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="状态"
+                rules={[{ required: true }]}
+                name="status"
+              >
+                <Select />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="手机号"
+                rules={[{ required: true }]}
+                name="phone"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车主姓名"
+                rules={[{ required: true }]}
+                name="car_owner_name"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="生效时间"
+                rules={[{ required: true }]}
+                name="effective_date"
+              >
+                <RangePicker />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="备注" name="note">
+                <TextArea></TextArea>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
     </div>
   );
 }

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarGroupMgm.jsx

@@ -1,6 +1,21 @@
-import React from "react";
-import { Form, Select, Row, Col, Table, Button } from "antd";
-function CarGroupMgm() {
+import React, { useEffect, useState } from "react";
+import {
+  Form,
+  Select,
+  Row,
+  Col,
+  Table,
+  Button,
+  message,
+  Modal,
+  Input,
+} from "antd";
+import ajax from "@/services";
+import { dictionary, utils } from "@/config/common";
+const { TextArea } = Input;
+function CarGroupMgm({ id }) {
+  const [searchForm] = Form.useForm();
+  const [editForm] = Form.useForm();
   const columns = [
     {
       title: "车辆组名称",
@@ -10,26 +25,26 @@ function CarGroupMgm() {
     },
     {
       title: "车辆类型",
-      dataIndex: "type",
-      key: "type",
-      align: "center",
-    },
-    {
-      title: "同步状态",
-      dataIndex: "tb_status",
-      key: "tb_status",
+      dataIndex: "vehicle_type",
+      key: "vehicle_type",
       align: "center",
     },
+    // [
+    //   title: "同步状态",
+    //   dataIndex: "status_name",
+    //   key: "status_name",
+    //   align: "center",
+    //  ],
     {
       title: "状态",
-      dataIndex: "status",
-      key: "status",
+      dataIndex: "status_name",
+      key: "status_name",
       align: "center",
     },
     {
       title: "描述",
-      dataIndex: "description",
-      key: "description",
+      dataIndex: "note",
+      key: "note",
       align: "center",
     },
     {
@@ -37,31 +52,149 @@ function CarGroupMgm() {
       dataIndex: "operation",
       key: "operation",
       align: "center",
-      render: () => {
-        return <Button type="primary">编辑</Button>;
+      render: (_, record) => {
+        return (
+          <Button
+            type="primary"
+            onClick={() => {
+              setEditModal({
+                visible: true,
+                data: record,
+              });
+              editForm.setFieldsValue({
+                name: record.name,
+                vehicle_type: record.vehicle_type,
+                status: record.status,
+                note: record.note,
+              });
+            }}
+          >
+            编辑
+          </Button>
+        );
       },
     },
   ];
+  const [carGroup, setCarGroup] = useState([]);
+  const [carList, setCarList] = useState([]);
+  const [editModal, setEditModal] = useState({
+    visible: false,
+    data: {},
+  });
+  const [pageData, setPageData] = useState({
+    pn: 1,
+    page_size: 10,
+    total: 0,
+  });
+  const getVehicleGroup = () => {
+    const params = { ...searchForm.getFieldsValue(), ...pageData };
+    ajax
+      .getRoadVehicleGroup(params)
+      .then((res) => {
+        if (res.status === 20000) {
+          setCarList(res.data.list);
+        } else {
+          message.error(res.message);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
+
+  function changePage(pn, page_size) {
+    setPageData({
+      pn,
+      page_size,
+    });
+  }
+
+  useEffect(() => {
+    ajax
+      .getAllCarGroup({ road_id: id })
+      .then((res) => {
+        if (res.status === 20000) {
+          setCarGroup(res.data);
+        } else {
+          message.error(res.message);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  useEffect(() => {
+    getVehicleGroup();
+  }, [pageData]);
   return (
     <div style={{ margin: "20px 0 0" }}>
       <header>
-        <Form colon={false} labelCol={{ span: 6 }}>
+        <Form
+          colon={false}
+          labelCol={{ span: 6 }}
+          form={searchForm}
+          initialValues={{
+            group_id: 0,
+            vehicle_type: null,
+          }}
+        >
           <Row>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车辆组">
-                <Select />
+              <Form.Item label="车辆组" name="group_id">
+                <Select options={carGroup} />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车辆类型">
-                <Select />
+              <Form.Item label="车辆类型" name="vehicle_type">
+                <Select
+                  options={[
+                    {
+                      label: "免费车",
+                      value: "1",
+                    },
+                    {
+                      label: "临时车",
+                      value: "2",
+                    },
+                    {
+                      label: "军警车",
+                      value: "3",
+                    },
+                    {
+                      label: "月租车",
+                      value: "4",
+                    },
+                  ]}
+                />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
               <Form.Item>
                 <div className="CGM-button">
-                  <Button type="primary">查询</Button>
-                  <Button type="primary">添加</Button>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setPageData({
+                        pn: 1,
+                        page_size: 15,
+                      });
+                    }}
+                  >
+                    查询
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setEditModal({
+                        visible: true,
+                        data: {},
+                      });
+                      editForm.resetFields();
+                    }}
+                  >
+                    添加
+                  </Button>
                 </div>
               </Form.Item>
             </Col>
@@ -69,8 +202,58 @@ function CarGroupMgm() {
         </Form>
       </header>
       <main>
-        <Table columns={columns} className="yisa-table" />
+        <Table
+          columns={columns}
+          className="yisa-table"
+          dataSource={carList}
+          pagination={{
+            position: ["bottomCenter"],
+            current: pageData.pn,
+            pageSize: pageData.page_size,
+            total: pageData.total,
+            pageSizeOptions: dictionary?.pageSizeOptions,
+            onChange: changePage,
+            onShowSizeChange: changePage,
+          }}
+        />
       </main>
+      {/* 编辑和新增弹窗 */}
+      <Modal
+        title="编辑车辆组"
+        open={editModal.visible}
+        onCancel={() => setEditModal({ visible: false })}
+        width={1000}
+      >
+        <Form colon={false} labelCol={{ span: 6 }} form={editForm}>
+          <Row>
+            <Col span="4_8" style={{ width: "30%" }}>
+              <Form.Item label="车辆组名称" name="name">
+                <Input max />
+              </Form.Item>
+            </Col>
+            <Col span="4_8" style={{ width: "30%" }}>
+              <Form.Item label="车辆类型" name="vehicle_type">
+                <Select />
+              </Form.Item>
+            </Col>
+            <Col span="4_8" style={{ width: "30%" }}>
+              <Form.Item label="状态" name="status">
+                <Select
+                  options={[
+                    { label: "启用", value: 2 },
+                    { label: "禁用", value: 1 },
+                  ]}
+                />
+              </Form.Item>
+            </Col>
+            <Col style={{ width: "30%" }}>
+              <Form.Item label="备注" name="note">
+                <TextArea />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
     </div>
   );
 }

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/CarManagement.jsx

@@ -1,6 +1,24 @@
-import React from "react";
-import { Form, Select, Row, Col, Table, Button } from "antd";
-function CarManagement() {
+import React, { useEffect, useState } from "react";
+import ajax from "@/services";
+import { dictionary, utils } from "@/config/common";
+import {
+  Form,
+  Select,
+  Row,
+  Col,
+  Table,
+  Button,
+  Input,
+  Modal,
+  message,
+  DatePicker,
+  Popover,
+} from "antd";
+const { TextArea } = Input;
+const { RangePicker } = DatePicker;
+function CarManagement({ id: road_id }) {
+  const [form] = Form.useForm();
+  const [editForm] = Form.useForm();
   const columns = [
     {
       title: "序号",
@@ -11,108 +29,243 @@ function CarManagement() {
     },
     {
       title: "车牌号",
-      dataIndex: "licensePlate",
-      key: "licensePlate",
+      dataIndex: "plate",
+      key: "plate",
       align: "center",
     },
     {
       title: "车辆组",
-      dataIndex: "vehicleGroup",
-      key: "vehicleGroup",
+      dataIndex: "group_id",
+      key: "group_id",
       align: "center",
     },
     {
       title: "车主姓名",
-      dataIndex: "ownerName",
-      key: "ownerName",
+      dataIndex: "car_owner_name",
+      key: "car_owner_name",
       align: "center",
     },
     {
       title: "手机号",
-      dataIndex: "phoneNumber",
-      key: "phoneNumber",
+      dataIndex: "phone",
+      key: "phone",
       align: "center",
     },
     {
       title: "开始日期",
-      dataIndex: "startDate",
-      key: "startDate",
+      dataIndex: "effective_begin_date",
+      key: "effective_begin_date",
       align: "center",
     },
     {
       title: "结束日期",
-      dataIndex: "endDate",
-      key: "endDate",
+      dataIndex: "effective_end_date",
+      key: "effective_end_date",
       align: "center",
     },
     {
       title: "生效状态",
-      dataIndex: "effectiveStatus",
-      key: "effectiveStatus",
+      dataIndex: "effective_status",
+      key: "effective_status",
       align: "center",
     },
     {
       title: "状态",
-      dataIndex: "status",
-      key: "status",
-      align: "center",
-    },
-    {
-      title: "同步状态",
-      dataIndex: "syncStatus",
-      key: "syncStatus",
+      dataIndex: "status_name",
+      key: "status_name",
       align: "center",
     },
+    // {
+    //   title: "同步状态",
+    //   dataIndex: "syncStatus",
+    //   key: "syncStatus",
+    //   align: "center",
+    // },
     {
       title: "操作",
       dataIndex: "action",
       key: "action",
       align: "center",
-      render: () => {
-        return <Button type="primary">编辑</Button>;
+      render: (_, record) => {
+        return (
+          <Popover
+            trigger={"hover"}
+            content={
+              <>
+                <div>
+                  <a
+                    onClick={() => {
+                      setEditModal({ visible: true, record, status: "edit" });
+                      editForm.setFieldsValue({
+                        plate: record.plate,
+                        plate_color: record.plate_color,
+                        phone: record.phone,
+                        status: record.status,
+                        car_owner_name: record.car_owner_name,
+                        group_id: record.group_id,
+                        note: record.note,
+                      });
+                    }}
+                  >
+                    编辑
+                  </a>
+                </div>
+                <div>
+                  <a
+                    onClick={() => {
+                      deleteCar(record.id);
+                    }}
+                  >
+                    删除
+                  </a>
+                </div>
+                <div>
+                  <a
+                    onClick={() => {
+                      if (record.status === 1) {
+                        disableVehicle(record.id);
+                        return;
+                      }
+                      enableVehicle(record.id);
+                    }}
+                  >
+                    {record.status === 1 ? "禁用" : "启用"}
+                  </a>
+                </div>
+              </>
+            }
+          >
+            <Button type="primary">编辑</Button>
+          </Popover>
+        );
       },
     },
   ];
+  const [dataSource, setDataSource] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [pageData, setPageData] = useState({
+    pn: 1,
+    page_size: 10,
+  });
+  //添加的弹窗
+  const [editModal, setEditModal] = useState({
+    visible: false,
+    record: {},
+    status: "edit",
+  });
+  //查询方法
+  const submit = (values) => {
+    console.log(values);
+    values = { ...values, ...pageData };
+    ajax.getVehicleList(values).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
+  };
+  const addCar = () => {
+    editForm
+      .validateFields()
+      .then((res) => {
+        res = { ...res, road_id };
+        console.log(res);
+        ajax.addVehicle(res).then((res) => {
+          if (res.status === 20000) {
+            message.success(res.message);
+            setEditModal({ visible: false });
+          }
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+  //删除方法
+  const deleteCar = (id) => {
+    ajax.deleteVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success(res.message);
+      }
+    });
+  };
+  //启用车辆
+  const enableVehicle = (id) => {
+    ajax.enableVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success(res.message);
+      }
+    });
+  };
+  //禁用车辆
+  const disableVehicle = (id) => {
+    ajax.disableVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success(res.message);
+      }
+    });
+  };
+  useEffect(() => {
+    submit();
+  }, [pageData]);
   return (
     <div style={{ margin: "20px 0 0" }}>
       <header>
-        <Form colon={false} labelCol={{ span: 6 }}>
+        <Form
+          form={form}
+          colon={false}
+          labelCol={{ span: 6 }}
+          onFinish={submit}
+        >
           <Row>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车辆组">
+              <Form.Item label="车辆组" name="group_id">
                 <Select />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车牌号">
-                <Select />
+              <Form.Item label="车牌号" name="plate">
+                <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车主姓名">
-                <Select />
+              <Form.Item label="车主姓名" name="car_owner_name">
+                <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="手机号">
-                <Select />
+              <Form.Item label="手机号" name="phone">
+                <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="生效状态">
+              <Form.Item label="生效状态" name="effective_status">
                 <Select />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="状态">
+              <Form.Item label="状态" name="status">
                 <Select />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
               <Form.Item>
                 <div className="CGM-button">
-                  <Button type="primary">查询</Button>
-                  <Button type="primary">添加</Button>
+                  <Button type="primary" htmlType="submit">
+                    查询
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setEditModal({
+                        visible: true,
+                        record: {},
+                        status: "add",
+                      });
+                    }}
+                  >
+                    添加
+                  </Button>
                   <Button type="primary">批量导入</Button>
                 </div>
               </Form.Item>
@@ -121,8 +274,107 @@ function CarManagement() {
         </Form>
       </header>
       <main>
-        <Table columns={columns} className="yisa-table" />
+        <Table
+          columns={columns}
+          className="yisa-table"
+          dataSource={dataSource}
+          pagination={{
+            position: ["bottomCenter"],
+            total: total,
+            current: pageData.pn,
+            pageSize: pageData.page_size,
+            onChange: (page, pageSize) => {
+              setPageData({ pn: page, page_size: pageSize });
+            },
+            onShowSizeChange: (current, size) => {
+              setPageData({ pn: current, page_size: size });
+            },
+          }}
+        />
       </main>
+      <Modal
+        title="添加车辆"
+        open={editModal.visible}
+        onCancel={() => {
+          setEditModal({ visible: false });
+          editForm.resetFields();
+        }}
+        onOk={addCar}
+        width={900}
+      >
+        <Form form={editForm} colon={false} labelCol={{ span: 6 }} name="plate">
+          <Row gutter={[30]}>
+            <Col span={12}>
+              <Form.Item
+                label="车牌号"
+                name="plate"
+                rules={[{ required: true }]}
+              >
+                <Input disabled={editModal.status === "edit"} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车牌颜色"
+                rules={[{ required: true }]}
+                name="plate_color"
+              >
+                <Select disabled={editModal.status === "edit"} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车辆组"
+                rules={[{ required: true }]}
+                name="group_id"
+              >
+                <Select disabled={editModal.status === "edit"} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="状态"
+                rules={[{ required: true }]}
+                name="status"
+              >
+                <Select />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="手机号"
+                rules={[{ required: true }]}
+                name="phone"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车主姓名"
+                rules={[{ required: true }]}
+                name="car_owner_name"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="生效时间"
+                rules={[{ required: true }]}
+                name="effective_date"
+              >
+                <RangePicker />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="备注" name="note">
+                <TextArea></TextArea>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
     </div>
   );
 }

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/CarMgm/WhitelistManagement.jsx

@@ -1,6 +1,25 @@
-import React from "react";
-import { Form, Select, Row, Col, Table, Button, Input } from "antd";
+import React, { useState, useEffect } from "react";
+import {
+  Form,
+  Select,
+  Row,
+  Col,
+  Table,
+  Button,
+  message,
+  Input,
+  Modal,
+  Popover,
+  DatePicker,
+} from "antd";
+import { dictionary, utils } from "@/config/common";
+import moment from "moment";
+import ajax from "@/services";
+const { RangePicker } = DatePicker;
+const { TextArea } = Input;
 function WhitelistManagement() {
+  const [searchForm] = Form.useForm();
+  const [editForm] = Form.useForm();
   const columns = [
     {
       title: "序号",
@@ -11,32 +30,50 @@ function WhitelistManagement() {
     },
     {
       title: "车牌号",
-      dataIndex: "licensePlate",
-      key: "licensePlate",
+      dataIndex: "plate",
+      key: "plate",
+      align: "center",
+    },
+    {
+      title: "车主姓名",
+      dataIndex: "car_owner_name",
+      key: "car_owner_name",
       align: "center",
     },
     {
       title: "手机号",
-      dataIndex: "phoneNumber",
-      key: "phoneNumber",
+      dataIndex: "phone",
+      key: "phone",
       align: "center",
     },
     {
-      title: "订单金额",
-      dataIndex: "orderAmount",
-      key: "orderAmount",
+      title: "开始日期",
+      dataIndex: "effective_begin_date",
+      key: "effective_begin_date",
       align: "center",
     },
     {
-      title: "同步MS状态",
-      dataIndex: "msSyncStatus",
-      key: "msSyncStatus",
+      title: "结束日期",
+      dataIndex: "effective_end_date",
+      key: "effective_end_date",
       align: "center",
     },
+    //  {
+    //   title: "同步状态",
+    //   dataIndex: "",
+    //   key: "orderTime",
+    //   align: "center",
+    // },
     {
-      title: "订购时间",
-      dataIndex: "orderTime",
-      key: "orderTime",
+      title: "生效状态",
+      dataIndex: "effective_status",
+      key: "effective_status",
+      align: "center",
+    },
+    {
+      title: "状态",
+      dataIndex: "status",
+      key: "status",
       align: "center",
     },
     {
@@ -44,41 +81,209 @@ function WhitelistManagement() {
       dataIndex: "operation",
       key: "operation",
       align: "center",
-      render: () => {
-        return <Button type="primary">编辑</Button>;
+      render: (_, record) => {
+        return (
+          <Popover
+            trigger="hover"
+            content={
+              <>
+                <div>
+                  <a
+                    onClick={() => {
+                      setEditModal({ visible: true, status: "edit", record });
+                      setCurrentId(record.id);
+                      editForm.setFieldsValue({
+                        plate: record.plate,
+                        plate_color: record.plate_color,
+                        status: record.status,
+                        phone: record.phone,
+                        car_owner_name: record.car_owner_name,
+                        effective_date: [
+                          moment(record.effective_begin_date),
+                          moment(record.effective_end_date),
+                        ],
+                        note: record.note,
+                      });
+                    }}
+                  >
+                    编辑
+                  </a>
+                </div>
+                <div>
+                  <a
+                    onClick={() => {
+                      deleteWhiteVehicle(record.id);
+                    }}
+                  >
+                    删除
+                  </a>
+                </div>
+
+                <div>
+                  <a
+                    onClick={() => {
+                      if (record.status === 1) {
+                        enableWhiteVehicle(record.id);
+                      } else {
+                        disableWhiteVehicle(record.id);
+                      }
+                    }}
+                  >
+                    {record.status === 1 ? "启用" : "禁用"}
+                  </a>
+                </div>
+              </>
+            }
+          >
+            <Button type="primary">编辑</Button>
+          </Popover>
+        );
       },
     },
   ];
+  const [pageData, setPageData] = useState({
+    pn: 1,
+    page_size: 10,
+  });
+  const [currentId, setCurrentId] = useState("");
+  const [dataSource, setDataSource] = useState([]);
+  const [total, setTotal] = useState(0);
+  const submit = () => {
+    setPageData({
+      pn: 1,
+      page_size: 10,
+    });
+  };
+  //搜索接口
+  const search = () => {
+    let params = { ...searchForm.getFieldsValue(), ...pageData };
+    ajax.getWhiteList(params).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
+  };
+  const [editModal, setEditModal] = useState({
+    visible: false,
+    record: {},
+    status: "edit",
+  });
+  //删除接口
+  const deleteWhiteVehicle = (id) => {
+    ajax.deleteWhiteVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success("删除成功");
+        submit();
+      } else {
+        message.error(res.message);
+      }
+    });
+  };
+
+  //启用接口
+  const enableWhiteVehicle = (id) => {
+    ajax.enableWhiteVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success("启用成功");
+      } else {
+        message.error(res.message);
+      }
+    });
+  };
+  //禁用接口
+  const disableWhiteVehicle = (id) => {
+    ajax.disableWhiteVehicle({ id }).then((res) => {
+      if (res.status === 20000) {
+        message.success("禁用成功");
+      } else {
+        message.error(res.message);
+      }
+    });
+  };
+  //添加黑名单或编辑黑名单
+  const addBlackItem = () => {
+    editForm
+      .validateFields()
+      .then((res) => {
+        if (editModal.status === "add") {
+          ajax.addWhiteList(res).then((res) => {
+            if (res.status === 20000) {
+              message.success("添加成功");
+              setEditModal({ visible: false });
+              editForm.resetFields();
+              submit();
+            } else {
+              message.error(res.message);
+            }
+          });
+        } else if (editModal.status === "edit") {
+          res.id = currentId;
+          ajax.editWhiteVehicle(res).then((res) => {
+            if (res.status === 20000) {
+              message.success("编辑成功");
+              setEditModal({ visible: false });
+              editForm.resetFields();
+              submit();
+            } else {
+              message.error(res.message);
+            }
+          });
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+  useEffect(() => {
+    search();
+  }, [pageData]);
   return (
     <div style={{ margin: "20px 0 0" }}>
       <header>
-        <Form colon={false} labelCol={{ span: 6 }}>
+        <Form
+          form={searchForm}
+          colon={false}
+          labelCol={{ span: 6 }}
+          onFinish={submit}
+        >
           <Row>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车牌号">
+              <Form.Item label="车牌号" name="plate">
                 <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="车主姓名">
+              <Form.Item label="车主姓名" name="car_owner_name">
                 <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="手机号">
+              <Form.Item label="手机号" name="phone">
                 <Input />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="状态">
+              <Form.Item label="状态" name="status">
                 <Select />
               </Form.Item>
             </Col>
             <Col span="4_8" style={{ width: "30%" }}>
               <Form.Item>
                 <div className="CGM-button">
-                  <Button type="primary">查询</Button>
-                  <Button type="primary">添加</Button>
+                  <Button type="primary" htmlType="submit">
+                    查询
+                  </Button>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setEditModal({
+                        visible: true,
+                        record: {},
+                        status: "add",
+                      });
+                    }}
+                  >
+                    添加
+                  </Button>
                   <Button type="primary">批量导入</Button>
                 </div>
               </Form.Item>
@@ -87,9 +292,100 @@ function WhitelistManagement() {
         </Form>
       </header>
       <main>
-        <Table columns={columns} className="yisa-table" />
+        <Table
+          columns={columns}
+          dataSource={dataSource}
+          className="yisa-table"
+          pagination={{
+            position: ["bottomCenter"],
+            total: total,
+            current: pageData.pn,
+            pageSize: pageData.page_size,
+            onChange: (page, pageSize) => {
+              setPageData({ pn: page, page_size: pageSize });
+            },
+            onShowSizeChange: (current, size) => {
+              setPageData({ pn: current, page_size: size });
+            },
+          }}
+        />
       </main>
+      <Modal
+        title="添加黑名单"
+        open={editModal.visible}
+        onCancel={() => {
+          setEditModal({ visible: false });
+          editForm.resetFields();
+        }}
+        onOk={addBlackItem}
+        width={900}
+      >
+        <Form form={editForm} colon={false} labelCol={{ span: 6 }} name="plate">
+          <Row gutter={[30]}>
+            <Col span={12}>
+              <Form.Item
+                label="车牌号"
+                name="plate"
+                rules={[{ required: true }]}
+              >
+                <Input disabled={editModal.status === "edit"} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车牌颜色"
+                rules={[{ required: true }]}
+                name="plate_color"
+              >
+                <Select disabled={editModal.status === "edit"} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="状态"
+                rules={[{ required: true }]}
+                name="status"
+              >
+                <Select />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="手机号"
+                rules={[{ required: true }]}
+                name="phone"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="车主姓名"
+                rules={[{ required: true }]}
+                name="car_owner_name"
+              >
+                <Input />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="生效时间"
+                rules={[{ required: true }]}
+                name="effective_date"
+              >
+                <RangePicker />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item label="备注" name="note">
+                <TextArea></TextArea>
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
     </div>
   );
 }
-export default WhitelistManagement;
+
+export default WhitelistManagement;

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/LEDConfiguration.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Input,
   Form,
@@ -9,31 +9,34 @@ import {
   Modal,
   Select,
   Popover,
+  message,
 } from "antd";
-function GateControlManagement() {
+const { TextArea } = Input;
+import ajax from "@/services";
+function GateControlManagement({ id: road_id }) {
   const columns = [
     {
       title: "业务场景",
-      dataIndex: "businessScene",
-      key: "businessScene",
+      dataIndex: "business_type_name",
+      key: "business_type_name",
       align: "center",
     },
     {
       title: "LED显示文案",
-      dataIndex: "ledDisplayText",
-      key: "ledDisplayText",
-      align: "center",
-    },
-    {
-      title: "同步状态",
-      dataIndex: "syncStatus",
-      key: "syncStatus",
+      dataIndex: "show_copywriting",
+      key: "show_copywriting",
       align: "center",
     },
+    // {
+    //   title: "同步状态",
+    //   dataIndex: "syncStatus",
+    //   key: "syncStatus",
+    //   align: "center",
+    // },
     {
       title: "更新时间",
-      dataIndex: "updateTime",
-      key: "updateTime",
+      dataIndex: "update_time",
+      key: "update_time",
       align: "center",
     },
     {
@@ -42,15 +45,37 @@ function GateControlManagement() {
       key: "action",
       align: "center",
 
-      render: () => {
+      render: (_, record) => {
         return (
           <Popover
             trigger="hover"
             content={
-              <div>
-                <p>编辑</p>
-                <p>删除</p>
-              </div>
+              <>
+                <div>
+                  <a
+                    onClick={() => {
+                      setModalData({ visible: true, status: "edit" });
+                      addForm.setFieldsValue({
+                        business_type: record.business_type,
+                      });
+                    }}
+                  >
+                    编辑
+                  </a>
+                </div>
+                <div>
+                  <a
+                    onClick={() =>
+                      setDelModal({
+                        visible: true,
+                        id: record.id,
+                      })
+                    }
+                  >
+                    删除
+                  </a>
+                </div>
+              </>
             }
           >
             <Button type="primary">操作</Button>
@@ -59,25 +84,104 @@ function GateControlManagement() {
       },
     },
   ];
+  const [form] = Form.useForm();
+  const [addForm] = Form.useForm();
   const [modalData, setModalData] = useState({
     visible: false,
+    status: "add",
   });
+  const [delModal, setDelModal] = useState({
+    visible: false,
+    id: null,
+  });
+  const [dataSource, setDataSource] = useState([]); // 表格数据
+  const [total, setTotal] = useState(0);
   const addLEDText = () => {
-    setModalData({ ...modalData, visible: true });
+    setModalData({ ...modalData, visible: true, status: "add" });
+  };
+  const [pageData, setPageData] = useState({
+    pn: 1,
+    page_size: 10,
+  });
+  const search = () => {
+    const params = { ...form.getFieldsValue(), ...pageData, road_id };
+    ajax.getLEDList(params).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
+  };
+  const submit = () => {
+    setPageData({ ...pageData, pn: 1 });
   };
+
+  //编辑或添加LED
+  function addLED(params) {
+    ajax.addLED(params).then((res) => {
+      if (res.status === 20000) {
+        setModalData({ ...modalData, visible: false });
+        message.success("添加成功");
+        search();
+      } else {
+        message.error(res.message);
+      }
+    });
+  }
+  function editLED(params) {
+    ajax.editLED(params).then((res) => {
+      if (res.status === 20000) {
+        setModalData({ ...modalData, visible: false });
+        message.success("编辑成功");
+        search();
+      } else {
+        message.error(res.message);
+      }
+    });
+  }
+  const addOrEditLED = () => {
+    addForm
+      .validateFields()
+      .then((res) => {
+        if (modalData.status === "add") {
+          res.road_id = road_id;
+          addLED(res);
+        } else {
+          res.road_id = road_id;
+          editLED(res);
+        }
+      })
+      .catch((err) => console.error(err));
+    addForm.resetFields();
+  };
+  function delLED() {
+    ajax.delLED({ id: delModal.id }).then((res) => {
+      if (res.status === 20000) {
+        message.success("删除成功");
+      } else {
+        message.error("删除失败");
+      }
+    });
+    setDelModal({ visible: false, id: null });
+  }
+  useEffect(() => {
+    search();
+  }, [pageData]);
   return (
     <div>
       <header style={{ margin: "10px 0" }}>
-        <Form>
+        <Form onFinish={submit} form={form}>
           <Row>
             <Col span="4_8" style={{ width: "30%" }}>
-              <Form.Item label="业务场景">
+              <Form.Item label="业务场景" name="business_type">
                 <Select />
               </Form.Item>
             </Col>
             <Form.Item>
               <div className="bottom-button">
-                <Button type="primary">查询</Button>
+                <Button type="primary" htmlType="submit">
+                  查询
+                </Button>
                 <Button type="primary" onClick={addLEDText}>
                   添加
                 </Button>
@@ -87,22 +191,51 @@ function GateControlManagement() {
         </Form>
       </header>
       <main>
-        <Table columns={columns} className="yisa-table"></Table>
+        <Table
+          dataSource={dataSource}
+          columns={columns}
+          className="yisa-table"
+        />
       </main>
       <Modal
         title="添加LED显示文案"
         open={modalData.visible}
-        onCancel={() => setModalData({ ...modalData, visible: false })}
+        onCancel={() => {
+          setModalData({ ...modalData, visible: false });
+          addForm.resetFields();
+        }}
+        onOk={addOrEditLED}
       >
-        <Form labelCol={{ span: 6 }}>
-          <Form.Item label="业务场景">
-            <Select />
+        <Form form={addForm} labelCol={{ span: 6 }}>
+          <Form.Item
+            label="业务场景"
+            rules={[{ required: true }]}
+            name="business_type"
+          >
+            <Select disabled={modalData.status === "edit"} />
           </Form.Item>
-          <Form.Item label="LED显示文案">
-            <Input />
+          <Form.Item
+            label="LED显示文案"
+            rules={[{ required: true }]}
+            name="show_copywriting"
+          >
+            <TextArea />
           </Form.Item>
         </Form>
       </Modal>
+      <Modal
+        title="提示"
+        open={delModal.visible}
+        onCancel={() =>
+          setDelModal({
+            visible: false,
+            id: null,
+          })
+        }
+        onOk={delLED}
+      >
+        <p>是否删除？</p>
+      </Modal>
     </div>
   );
 }

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/MSPages.jsx

@@ -1,65 +1,148 @@
-import React, { useState } from 'react'
-import { Button, Table, Modal, Form, Input } from 'antd'
-function MSPages() {
-    const columns = [
-        {
-            title: "MS通信账号",
-            dataIndex: "MS_user",
-            key: "MS_user",
-            align: "center",
-        },
-        {
-            title: "创建时间",
-            dataIndex: "time",
-            key: "time",
-            align: "center",
-        },
-        {
-            title: "操作",
-            dataIndex: "operat",
-            key: "operat",
-            align: "center",
-            render: () => {
-                return <Button type="primary" onClick={() => setEditModal(true)}>编辑</Button>
+import React, { useEffect, useState } from "react";
+import { Button, Table, Modal, Form, Input, message } from "antd";
+import ajax from "@/services";
+function MSPages(props) {
+  const { itemData = {} } = props;
+  const columns = [
+    {
+      title: "MS通信账号",
+      dataIndex: "account",
+      key: "account",
+      align: "center",
+    },
+    {
+      title: "创建时间",
+      dataIndex: "create_time",
+      key: "create_time",
+      align: "center",
+    },
+    {
+      title: "操作",
+      dataIndex: "operat",
+      key: "operat",
+      align: "center",
+      render: (_, record) => {
+        return (
+          <Button
+            type="primary"
+            onClick={() => {
+              setEditModal({
+                visible: true,
+                record,
+              });
+              form.setFieldsValue({
+                account: record.account,
+                pwd: record.pwd,
+              });
+            }}
+          >
+            编辑
+          </Button>
+        );
+      },
+    },
+  ];
+  const [form] = Form.useForm();
+  const [dataSource, setDataSource] = useState([]);
+  //编辑
+  const [editModal, setEditModal] = useState({
+    visible: false,
+    record: {},
+  });
+  //提交编辑接口
+  const commitMS = () => {
+    form
+      .validateFields()
+      .then((res) => {
+        console.log(res);
+        ajax
+          .editRoadMs({
+            ...res,
+            id: editModal.record.id,
+          })
+          .then((res) => {
+            if (res.status === 20000) {
+              message.success(res.message);
+              setEditModal({
+                visible: false,
+                record: {},
+              });
             }
-        },
-    ]
-    const [form] = Form.useForm()
-    const [dataSource, setDataSource] = useState([
-        {
-            MS_user: 123,
-            time: "2020-01-03",
+          });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
 
-        }
-    ])
-    //编辑
-    const [editModal, setEditModal] = useState(false)
-    //提交编辑接口
-    const commitMS = () => {
-        form.validateFields().then(res => {
-            console.log(res);
-        }).catch(err => { console.error(err) })
-    }
-    return (
-        <div>
-            <header style={{ margin: "10px 0" }}>
-                <Button type='primary'>添加</Button>
-            </header>
-            <main>
-                <Table className='yisa-table' columns={columns} dataSource={dataSource} />
-            </main>
-            <Modal open={editModal} onCancel={() => setEditModal(false)} title="编辑" onOk={commitMS}>
-                <Form form={form} labelCol={{ span: 6 }}>
-                    <Form.Item label="MS账号" name="MS_user" rules={[{ required: true, message: "此为必填字段" }]}>
-                        <Input />
-                    </Form.Item>
-                    <Form.Item label="密码" name="password" rules={[{ required: true, message: "此为必填字段" }]}>
-                        <Input />
-                    </Form.Item>
-                </Form>
-            </Modal>
-        </div>
-    )
+  useEffect(() => {
+    ajax.getRoadMs().then((res) => {
+      if (res.status === 20000) {
+        console.log(res.data);
+        setDataSource([res.data]);
+      }
+    });
+  }, []);
+
+  return (
+    <div>
+      <header style={{ margin: "10px 0" }}>
+        <Button
+          type="primary"
+          disabled={dataSource.length >= 1}
+          onClick={() => {
+            setEditModal({
+              visible: true,
+              record: {},
+            });
+            form.setFieldsValue({
+              account: "",
+              pwd: "",
+            });
+          }}
+        >
+          添加
+        </Button>
+      </header>
+      <main>
+        <Table
+          className="yisa-table"
+          columns={columns}
+          dataSource={dataSource}
+        />
+      </main>
+      <Modal
+        open={editModal.visible}
+        onCancel={() => setEditModal({ visible: false, record: {} })}
+        title="编辑"
+        onOk={commitMS}
+      >
+        <Form
+          form={form}
+          labelCol={{ span: 6 }}
+          initialValues={{
+            account: editModal.record.account,
+            pwd: editModal.record.pwd,
+          }}
+        >
+          <Form.Item
+            label="MS账号"
+            name="account"
+            rules={[{ required: true, message: "此为必填字段" }]}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label="密码"
+            name="pwd"
+            rules={[{ required: true, message: "此为必填字段" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
 }
 
-export default MSPages
+export default MSPages;

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/ConfigParking/index.jsx

@@ -1,27 +1,27 @@
-import React, { useState } from "react";
+import React, { useState, lazy, Suspense } from "react";
 import { Modal, Tabs } from "antd";
 import MSPages from "./MSPages";
 import BusinessParameterConfig from "./BusinessParameterConfig";
 import CarMgm from "./CarMgm";
 import ChannelManagement from "./ChannelManagement";
 import GateControlManagement from "./GateControlManagement";
-import LEDConfiguration from "./LEDConfiguration";
+const LEDConfiguration = lazy(() => import("./LEDConfiguration"));
 import PositionGroupManagement from "./PositionGroupManagement";
 import BillingRules from "./BillingRules";
 import TollCollectorManagement from "./TollCollectorManagement";
 import ArrearsExitManagement from "./ArrearsExitManagement";
 function ConfigParking(props) {
-  const { visible = false, close = () => {} } = props;
+  const { visible = false, close = () => {}, itemData = {} } = props;
   const tabsItems = [
     {
       label: "MS通信账号",
       key: "1",
-      children: <MSPages />,
+      children: <MSPages itemData={itemData} />,
     },
     {
       label: "业务参数配置",
       key: "2",
-      children: <BusinessParameterConfig />,
+      children: <BusinessParameterConfig id={itemData.id} />,
     },
     {
       label: "车辆管理",
@@ -41,7 +41,11 @@ function ConfigParking(props) {
     {
       label: "LED配置",
       key: "6",
-      children: <LEDConfiguration />,
+      children: (
+        <Suspense fallback={<div>Loading!</div>}>
+          <LEDConfiguration id={itemData.id} />
+        </Suspense>
+      ),
     },
     {
       label: "岗亭组",
@@ -70,6 +74,7 @@ function ConfigParking(props) {
     <Modal
       width={1500}
       style={{ top: "5px" }}
+      destroyOnClose
       bodyStyle={{ height: "800px", overflow: "auto" }}
       open={visible}
       onCancel={close}

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/Detail.jsx

@@ -1,22 +1,28 @@
-import React, { useEffect, useState } from 'react'
-import { Descriptions, Modal, Popover, Table, Tabs } from 'antd'
-import ajax from '@/services'
+import React, { useEffect, useState } from "react";
+import {
+  Descriptions,
+  Modal,
+  Popover,
+  Table,
+  Tabs,
+  Rate,
+  Tag,
+  Button,
+} from "antd";
+import ajax from "@/services";
 function Detail(props) {
   const {
     detailData = {},
     visible = false,
     close = () => {},
-    itemData = {}
-  } = props
+    itemData = {},
+  } = props;
 
-  const [type, setType] = useState('1')
+  const [type, setType] = useState("1");
   const onChange = (key) => {
-    console.log(key)
-    setType(key)
-  }
-  const renderParkingDetail = () => {
-    return <ParkingDetail />
-  }
+    console.log(key);
+    setType(key);
+  };
   const renderTabs = () => {
     return (
       <Tabs
@@ -24,24 +30,24 @@ function Detail(props) {
         onChange={onChange}
         items={[
           {
-            label: '停车场详情',
-            key: '1',
-            children: <ParkingDetail itemData={itemData} />
+            label: "停车场详情",
+            key: "1",
+            children: <ParkingDetail itemData={itemData} />,
           },
           {
-            label: '车场评价详情',
-            key: '2',
-            children: <ParkingEvaluate />
+            label: "车场评价详情",
+            key: "2",
+            children: <ParkingEvaluate />,
           },
           {
-            label: '车主评价详情',
-            key: '3',
-            children: <PersonEvaluate />
-          }
+            label: "车主评价详情",
+            key: "3",
+            children: <PersonEvaluate />,
+          },
         ]}
       ></Tabs>
-    )
-  }
+    );
+  };
   return (
     visible && (
       <Modal
@@ -54,45 +60,45 @@ function Detail(props) {
         {renderTabs()}
       </Modal>
     )
-  )
+  );
 }
 
 function ParkingDetail(props) {
-  const { itemData } = props
+  const { itemData } = props;
   return (
     <Tabs
       items={[
         {
-          label: '停车场信息',
-          key: '1',
-          children: <ParkingContent content={itemData} />
+          label: "停车场信息",
+          key: "1",
+          children: <ParkingContent content={itemData} />,
         },
         {
-          label: '子车场信息',
-          key: '2',
-          children: <ChildParkingContent />
-        }
+          label: "子车场信息",
+          key: "2",
+          children: <ChildParkingContent id={itemData.id} />,
+        },
       ]}
     ></Tabs>
-  )
+  );
 }
 //停车场信息
 function ParkingContent(props) {
-  const { content } = props
-  const id = content.id
+  const { content } = props;
+  const id = content.id;
 
-  const [roadInfo, setRoadInfo] = useState({})
+  const [roadInfo, setRoadInfo] = useState({});
 
   const getRoadInfo = () => {
     ajax.getOrpRoadInfo({ id }).then((res) => {
       if (res.status == 20000) {
-        setRoadInfo(res.data)
+        setRoadInfo(res.data);
       }
-    })
-  }
+    });
+  };
   useEffect(() => {
-    getRoadInfo()
-  }, [])
+    getRoadInfo();
+  }, []);
   return (
     <>
       <Descriptions>
@@ -153,68 +159,68 @@ function ParkingContent(props) {
         </Descriptions.Item>
       </Descriptions>
     </>
-  )
+  );
 }
 //子车场信息
 function ChildParkingContent(props) {
   const columns = [
     {
-      title: '序号',
-      dataIndex: 'index',
-      key: 'index',
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
       width: 100,
-      align: 'center',
+      align: "center",
       render: (_, record, index) => {
-        return index + 1
-      }
-    },
-    {
-      title: '停车场名称',
-      dataIndex: 'index',
-      key: 'index',
-      align: 'center'
+        return index + 1;
+      },
     },
     {
-      title: '系统编码',
-      dataIndex: 'index',
-      key: 'index',
-      align: 'center'
+      title: "停车场名称",
+      dataIndex: "road_name",
+      key: "road_name",
+      align: "center",
     },
     {
-      title: '泊位数',
-      dataIndex: 'index',
-      key: 'index',
-      align: 'center'
+      title: "系统编码",
+      dataIndex: "road_code",
+      key: "road_code",
+      align: "center",
     },
     {
-      title: '停车场类型',
-      dataIndex: 'index',
-      key: 'index',
-      align: 'center'
+      title: "泊位数",
+      dataIndex: "berth_number",
+      key: "berth_number",
+      align: "center",
     },
     {
-      title: '上级停车场',
-      dataIndex: 'index',
-      key: 'index',
-      align: 'center'
+      title: "停车场类型",
+      dataIndex: "road_type_name",
+      key: "road_type_name",
+      align: "center",
     },
     {
-      title: '商用状态',
-      dataIndex: 'index',
-      key: 'index',
-      align: 'center'
+      title: "上级停车场",
+      dataIndex: "superior_parking_lot",
+      key: "superior_parking_lot",
+      align: "center",
     },
     {
-      title: '同步状态',
-      dataIndex: 'index',
-      key: 'index',
-      align: 'center'
+      title: "商用状态",
+      dataIndex: "operator_status_name",
+      key: "operator_status_name",
+      align: "center",
     },
+    // {
+    //   title: "同步状态",
+    //   dataIndex: "index",
+    //   key: "index",
+    //   align: "center",
+    // },
     {
-      title: '操作',
-      dataIndex: 'operate',
-      key: 'operate',
-      align: 'center',
+      title: "操作",
+      dataIndex: "operate",
+      key: "operate",
+      align: "center",
       render: (_, record) => {
         return (
           <Popover
@@ -231,22 +237,99 @@ function ChildParkingContent(props) {
           >
             <Button type="primary">操作</Button>
           </Popover>
-        )
-      }
-    }
-  ]
+        );
+      },
+    },
+  ];
+  const [resultData, setResultData] = useState([]);
+  useEffect(() => {
+    ajax
+      .getSubParkingLot({ id: props.id })
+      .then((res) => {
+        if (res.status === 20000) {
+          setResultData(res.data);
+        } else {
+          console.log(res.msg);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
   return (
     <>
-      <Table className="yisa-table" columns={columns} />
+      <Table className="yisa-table" dataSource={resultData} columns={columns} />
     </>
-  )
+  );
 }
 
 function ParkingEvaluate(props) {
-  return `车场评价详情`
+  const [resultData, setResultData] = useState({
+    expensive_number: 0,
+    score: 0,
+    entrance_number: 0,
+    inconvenient_number: 0,
+    service_number: 0,
+    environment_number: 0,
+    parking_space_number: 0,
+  });
+  const tagItems = [
+    {
+      label: "停车不方便",
+      count: resultData.inconvenient_number,
+    },
+    {
+      label: "停车费用高",
+      count: resultData.expensive_number,
+    },
+    {
+      label: "服务态度差",
+      count: resultData.service_number,
+    },
+    {
+      label: "环境差",
+      count: resultData.environment_number,
+    },
+    {
+      label: "入口不明显",
+      count: resultData.entrance_number,
+    },
+    {
+      label: "车位紧张",
+      count: resultData.parking_space_number,
+    },
+  ];
+  useEffect(() => {
+    ajax.getParkingCommentInfo().then((res) => {
+      if (res.status === 20000) {
+        setResultData(res.data);
+      }
+    });
+  }, []);
+  return (
+    <>
+      <div>
+        <label>车场评分：</label>
+        <Rate disabled value={resultData.score} />
+      </div>
+      <div
+        style={{
+          margin: "10px 0",
+        }}
+      >
+        {tagItems.map((item) => {
+          return (
+            <Tag color="warning">
+              {item.label}({item.count})
+            </Tag>
+          );
+        })}
+      </div>
+    </>
+  );
 }
 function PersonEvaluate(props) {
-  return `车主评价详情`
+  return `车主评价详情`;
 }
 
-export default Detail
+export default Detail;

src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx

@@ -138,7 +138,7 @@ function OutSegment() {
                 <div>
                   <a
                     onClick={() => {
-                      setConfigModal({ ...configModal, visible: true });
+                      setConfigModal({ ...configModal, visible: true, record });
                     }}
                   >
                     停车场配置
@@ -199,6 +199,7 @@ function OutSegment() {
     close: () => {
       setConfigModal({ ...configModal, visible: false });
     },
+    record: {},
   });
   //编辑弹窗数据
   const [editModal, setEditModal] = useState({
@@ -262,7 +263,6 @@ function OutSegment() {
     });
   }
 
-
   //查询接口
   const search = () => {
     setPageData({
@@ -475,6 +475,7 @@ function OutSegment() {
       <ConfigParking
         visible={configModal.visible}
         close={configModal.close}
+        itemData={configModal.record}
         bodyStyle="modal-style"
       />
       <Modal

src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/RecordList.jsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import { Table } from "antd";
+import ajax from "@/services";
+function RecordList({ id }) {
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "id",
+      key: "id",
+      render: (text, record, index) => index + 1,
+    },
+    {
+      title: "订单ID",
+      dataIndex: "order_id",
+      key: "order_id",
+    },
+    {
+      title: "入场时间",
+      dataIndex: "in_time",
+      key: "in_time",
+    },
+    {
+      title: "出场时间",
+      dataIndex: "out_time",
+      key: "out_time",
+    },
+    {
+      title: "应收金额",
+      dataIndex: "ys_money",
+      key: "ys_money",
+    },
+    {
+      title: "优惠金额",
+      dataIndex: "yh_money",
+      key: "yh_money",
+    },
+    {
+      title: "实收金额",
+      dataIndex: "sf_money",
+      key: "sf_money",
+    },
+    {
+      title: "支付类型",
+      dataIndex: "pay_type_name",
+      key: "pay_type_name",
+    },
+    {
+      title: "支付渠道",
+      dataIndex: "payment_type_name",
+      key: "payment_type_name",
+    },
+    {
+      title: "支付设备",
+      dataIndex: "payment_device_name",
+      key: "payment_device_name",
+    },
+    {
+      title: "支付人",
+      dataIndex: "car_owner_name",
+      key: "car_owner_name",
+    },
+    {
+      title: "付款车场",
+      dataIndex: "park_name",
+      key: "park_name",
+    },
+    {
+      title: "第三方流水ID",
+      dataIndex: "third_party_flow_id",
+      key: "third_party_flow_id",
+    },
+  ];
+  const [dataSource, setDataSource] = useState([]);
+  function getList() {
+    ajax.showPayList({ id }).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+      }
+    });
+  }
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <Table
+      dataSource={dataSource}
+      columns={columns}
+      className="yisa-table"
+    ></Table>
+  );
+}
+
+export default RecordList;

src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/RefundList.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+import { Table } from "antd";
+import ajax from "@/services";
+function RefundList({ id }) {
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "id",
+      key: "id",
+      render: (text, record, index) => index + 1,
+    },
+    {
+      title: "退款方式",
+      dataIndex: "refund_type",
+      key: "refund_type",
+    },
+    {
+      title: "支付渠道",
+      dataIndex: "payment_type_name",
+      key: "payment_type_name",
+    },
+
+    {
+      title: "支付设备",
+      dataIndex: "payment_device_name",
+      key: "payment_device_name",
+    },
+    {
+      title: "退款原因",
+      dataIndex: "reason",
+      key: "reason",
+    },
+    {
+      title: "退款金额",
+      dataIndex: "refund_amount",
+      key: "refund_amount",
+    },
+    {
+      title: "申请人",
+      dataIndex: "application_person",
+      key: "application_person",
+    },
+
+    {
+      title: "申请时间",
+      dataIndex: "application_time",
+      key: "application_time",
+    },
+    {
+      title: "退款时间",
+      dataIndex: "refund_time",
+      key: "refund_time",
+    },
+  ];
+  const [dataSource, setDataSource] = useState([]);
+  function getList() {
+    ajax.showRefoundList({ id }).then((res) => {
+      if (res.status === 20000) {
+        setDataSource(res.data.list);
+      }
+    });
+  }
+  useEffect(() => {
+    getList();
+  }, []);
+  return (
+    <Table
+      dataSource={dataSource}
+      columns={columns}
+      className="yisa-table"
+    ></Table>
+  );
+}
+
+export default RefundList;

src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/StopList.jsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import ajax from "@/services";
+import { message, Descriptions, Image } from "antd";
+function StopList({ id }) {
+  //获取停车记录
+  const [recordData, setRecordData] = useState({});
+
+  function getRecord() {
+    ajax.showStopList({ id }).then((res) => {
+      if (res.status === 20000) {
+        setRecordData(res.data.list[0]);
+      } else {
+        message.error(res.message);
+      }
+    });
+  }
+
+  useEffect(() => {
+    getRecord();
+  }, []);
+  return (
+    <div>
+      <Descriptions title="停车场信息">
+        <Descriptions.Item label="停车场名称">
+          {recordData.park_name}
+        </Descriptions.Item>
+        <Descriptions.Item label="区域">
+          {recordData.area_name}
+        </Descriptions.Item>
+        <Descriptions.Item label="商户">
+          {recordData.shop_name}
+        </Descriptions.Item>
+        <Descriptions.Item label="车场类型">
+          {recordData.road_type_name}
+        </Descriptions.Item>
+      </Descriptions>
+      <Descriptions title="停车信息">
+        <Descriptions.Item label="车牌号">
+          {recordData.plate_num}
+        </Descriptions.Item>
+        <Descriptions.Item label="会员手机号">
+          {recordData.phone}
+        </Descriptions.Item>
+        <Descriptions.Item label="入场时间">
+          {recordData.in_time}
+        </Descriptions.Item>
+        <Descriptions.Item label="出场时间">
+          {recordData.out_time}
+        </Descriptions.Item>
+        <Descriptions.Item label="停车时长">
+          {recordData.parking_time}
+        </Descriptions.Item>
+        <Descriptions.Item label="应收金额">
+          {recordData.ys_money}
+        </Descriptions.Item>
+        <Descriptions.Item label="优惠金额">
+          {recordData.yh_money}
+        </Descriptions.Item>
+        <Descriptions.Item label="实付金额">
+          {recordData.sf_money}
+        </Descriptions.Item>
+      </Descriptions>
+      <Descriptions title="入场照片">
+        <Descriptions.Item label="入场车辆照片">
+          <Image src={recordData.in_veh_pic} />
+        </Descriptions.Item>
+        <Descriptions.Item label="入场车牌照片">
+          <Image src={recordData.in_plate_pic} />
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+}
+
+export default StopList;

src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/index.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from "react";
+import { Modal, message, Tabs } from "antd";
+import ajax from "@/services";
+import StopList from "./StopList";
+import RecordList from "./RecordList";
+import RefundList from "./RefundList";
+import "./index.scss";
+function Detail(props) {
+  const { visible = false, close = () => {}, onOk = () => {}, id } = props;
+  //tabs数据
+  const tabsItems = [
+    {
+      label: "停车记录",
+      key: "1",
+      children: <StopList id={id} />,
+    },
+    {
+      label: "收费记录",
+      key: "2",
+      children: <RecordList id={id} />,
+    },
+    {
+      label: "退款记录",
+      key: "3",
+      children: <RefundList id={id} />,
+    },
+  ];
+  //tabs的key
+  const [tabsKey, setTabsKey] = useState("1");
+  function tabsChange(value) {
+    setTabsKey(value);
+  }
+  useEffect(() => {}, []);
+  return (
+    <Modal
+      open={visible}
+      onCancel={close}
+      onOk={onOk}
+      destroyOnClose
+      title="详情"
+      width={1200}
+    >
+      <Tabs items={tabsItems} activeKey={tabsKey} onChange={tabsChange} />
+    </Modal>
+  );
+}
+
+export default Detail;

src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/Detail/index.scss

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

src/pages/OutRoadMgm/OutSegmentMgm/ZombieCarMgm/loadable.jsx

@@ -1,15 +1,213 @@
 import React, { useState, useRef, useEffect } from "react";
-// import {  message, Pagination, Table, Space, Modal, } from "antd";
+import {
+  message,
+  Pagination,
+  Table,
+  Space,
+  Modal,
+  Button,
+  Popover,
+  DatePicker,
+  InputNumber,
+} from "antd";
 // import { dictionary, utils } from "@/config/common";
 // import moment from 'moment'
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
-// import ajax from "@/services"
-// import {  FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import Detail from "./Detail";
 // import "./index.scss";
 // import errorImg from "@/assets/images/layout/error.png"
 // import {  useLocation } from "react-router-dom";
+
 function ZombieCarMgm() {
-    return <div>ZombieCarMgm</div>
+  const columns = [
+    {
+      title: "城市",
+      dataIndex: "city_name",
+      key: "city_name",
+    },
+    {
+      title: "商户名称",
+      dataIndex: "shop_name",
+      key: "shop_name",
+    },
+    {
+      title: "停车场名称",
+      dataIndex: "park_name",
+      key: "park_name",
+    },
+    {
+      title: "区域",
+      dataIndex: "area_name",
+      key: "area_name",
+    },
+    {
+      title: "车厂管理模式",
+      dataIndex: "road_type_name",
+      key: "road_type_name",
+    },
+    {
+      title: "车牌号",
+      dataIndex: "plate_name",
+      key: "plate_name",
+    },
+    {
+      title: "泊位号",
+      dataIndex: "bowei_name",
+      key: "bowei_name",
+    },
+    {
+      title: "入场时间",
+      dataIndex: "in_time",
+      key: "in_time",
+    },
+    {
+      title: "停车时长",
+      dataIndex: "parking_time",
+      key: "parking_time",
+    },
+    {
+      title: "操作",
+      dataIndex: "operation",
+      key: "operation",
+      render: (_, record) => {
+        return (
+          <Button
+            type="primary"
+            onClick={() => {
+              setDetailModal({ ...detailModal, visible: true, id: record.id });
+            }}
+          >
+            详情
+          </Button>
+        );
+      },
+    },
+  ];
+  const formSearch = [
+    {
+      name: "region",
+      type: "TreeSelect",
+      label: "区域",
+    },
+    {
+      name: "operator",
+      type: "Select",
+      label: "商户名称",
+      placeholder: "请选择商户名称",
+    },
+    {
+      name: "road",
+      type: "Input",
+      label: "停车场名称",
+      placeholder: "请输入停车场名称",
+    },
+    {
+      name: "plate",
+      type: "Input",
+      label: "车牌号",
+      placeholder: "请输入车牌号",
+    },
+    {
+      type: "__react_node",
+      name: "in_time",
+      label: "入场时间",
+      component: () => {
+        return <DatePicker />;
+      },
+    },
+    {
+      type: "__react_node",
+      name: "parking_time",
+      label: "停车时长",
+      component: () => {
+        return <InputNumber addonAfter="天" />;
+      },
+    },
+  ];
+  //搜索参数初始化
+  const initFormData = {};
+
+  //搜索的结果
+  const [tableData, setTableData] = useState([]);
+  //搜索的总结果数
+  const [total, setTotal] = useState(0);
+  //清理僵尸车弹窗
+  const [zomCarModal, setZomCarModal] = useState(false);
+  //详情弹窗
+  const [detailModal, setDetailModal] = useState({
+    id: "",
+    visible: false,
+    close: () => setDetailModal({ ...detailModal, visible: false }),
+    onOk: () => {
+      detailModal.close();
+    },
+  });
+  const [selectRowKeys, setSelectRowKeys] = useState([]);
+  function onSelectChange(newSelectRowKeys) {
+    setSelectRowKeys(newSelectRowKeys);
+  }
+  function fetch(params) {
+    ajax.getAllZomcar(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total_records);
+      }
+    });
+  }
+  function cleanZomCar() {
+    ajax.cleanZomCar({ id: selectRowKeys.join(",") }).then((res) => {
+      if (res.status === 20000) {
+        message.success("清理成功");
+      } else {
+        message.error(res.message);
+      }
+      setZomCarModal(false);
+    });
+  }
+  function cleanZomCarComponent() {
+    return (
+      <Button type="primary" onClick={() => setZomCarModal(true)}>
+        清理僵尸车
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <TableModule
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        total={total}
+        rowKey={"id"}
+        rowSelection={{
+          selectRowKeys,
+          onChange: onSelectChange,
+        }}
+        pagename="僵尸车管理"
+        search={fetch}
+        rightButtonGroup={[cleanZomCarComponent()]}
+        initFormData={initFormData}
+        exportUrl="/PMS/api/bpm/offroad/export_zomcar"
+      />
+      <Modal
+        open={zomCarModal}
+        title="提示"
+        onOk={cleanZomCar}
+        onCancel={() => setZomCarModal(false)}
+      >
+        <p>{selectRowKeys.length}条记录即将被清理</p>
+      </Modal>
+      <Detail
+        visible={detailModal.visible}
+        close={detailModal.close}
+        onOk={detailModal.onOk}
+        id={detailModal.id}
+      />
+    </>
+  );
 }
 
-export default ZombieCarMgm;
+export default ZombieCarMgm;

src/services/OutRoadMgm/OutParkingRecordInquiry.js

@@ -0,0 +1,11 @@
+import ajax from "@/config/ajax";
+///api/orp/business/get_record_list    停车记录查询/欠费订单-列表
+const getRecordList = (params) => {
+  return ajax({
+    url: "/api/orp/business/get_record_list ",
+    type: "post",
+    data: params,
+  });
+};
+
+export default { getRecordList };

src/services/OutRoadMgm/OutSegment.js

@@ -27,8 +27,276 @@ const commentSetting = (params) => {
     data: params,
   });
 };
+// /api/orp/road/parking_comment_info    获取车场评价详情
+const getParkingCommentInfo = (params) => {
+  return ajax({
+    url: "/api/orp/road/parking_comment_info",
+    type: "post",
+    data: params,
+  });
+};
+// /api/orp/road/sub_parking_lot   获取子车场信息
+const getSubParkingLot = (params) => {
+  return ajax({
+    url: "/api/orp/road/sub_parking_lot",
+    type: "post",
+    data: params,
+  });
+};
+
+///api/orp/road/get_road_ms   获取路段MS账号
+const getRoadMs = (params) => {
+  return ajax({
+    url: "/api/orp/road/get_road_ms",
+    type: "post",
+    data: params,
+  });
+};
+
+///api/orp/road/edit_road_ms     编辑路段MS通信账号
+const editRoadMs = (params) => {
+  return ajax({
+    url: "/api/orp/road/edit_road_ms",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/get_road_service_parameters      获取路段业务参数配置
+const getRoadServiceParameters = (params) => {
+  return ajax({
+    url: "/api/orp/road/get_road_service_parameters",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/get_road_all_child   获取路段及其子级下拉筛选
+const getRoadAllChild = (params) => {
+  return ajax({
+    url: "/api/orp/road/get_road_all_child",
+    type: "post",
+    data: params,
+  });
+};
+
+///api/orp/road/get_all_group    获取路段所有车辆组 下拉筛选
+const getAllCarGroup = (params) => {
+  return ajax({
+    url: "/api/orp/road/get_all_group",
+    type: "post",
+    data: params,
+  });
+};
+
+///api/orp/road/get_road_vehicle_group    获取路段车辆组列表
+
+const getRoadVehicleGroup = (params) => {
+  return ajax({
+    url: "/api/orp/road/get_road_vehicle_group",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/vehicle_list  获取车辆列表
+const getVehicleList = (params) => {
+  return ajax({
+    url: "/api/orp/road/vehicle_list",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/add_vehicle 添加车辆
+
+const addVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/add_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/del_vehicle    删除车辆
+const deleteVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/del_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/enable_vehicle   启用车辆
+const enableVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/enable_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/disable_vehicle  禁用车辆
+const disableVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/disable_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/black_list  获取黑名单列表
+const getBlackList = (params) => {
+  return ajax({
+    url: "/api/orp/road/black_list",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/del_black_vehicle   删除黑名单
+const deleteBlackVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/del_black_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/enable_black_vehicle   启用黑名单
+
+const enableBlackVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/enable_black_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+// /api/orp/road/disable_black_vehicle 禁用黑名单
+const disableBlackVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/disable_black_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/add_road_black_vehicle   添加黑名单
+const addRoadBlackVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/add_road_black_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/edit_black_vehicle  编辑黑名单
+const editBlackVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/edit_black_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/white_list          白名单列表
+const getWhiteList = (params) => {
+  return ajax({
+    url: "/api/orp/road/white_list",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/edit_white_vehicle   编辑白名单
+const editWhiteVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/edit_white_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/add_white_list  添加白名单
+const addWhiteList = (params) => {
+  return ajax({
+    url: "/api/orp/road/add_white_list",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/enable_white_vehicle   启用白名单
+const enableWhiteVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/enable_white_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/disable_white_vehicle  禁用白名单
+const disableWhiteVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/disable_white_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/del_white_vehicle  删除白名单
+const deleteWhiteVehicle = (params) => {
+  return ajax({
+    url: "/api/orp/road/del_white_vehicle",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/led_list   led配置列表
+const getLEDList = (params) => {
+  return ajax({
+    url: "/api/orp/road/led_list",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/edit_led   编辑led配置
+const editLED = (params) => {
+  return ajax({
+    url: "/api/orp/road/edit_led",
+    type: "post",
+    data: params,
+  });
+};
+//api/orp/road/add_led    添加led配置
+const addLED = (params) => {
+  return ajax({
+    url: "/api/orp/road/add_led",
+    type: "post",
+    data: params,
+  });
+};
+///api/orp/road/del_led   删除LED
+const delLED = (params) => {
+  return ajax({
+    url: "/api/orp/road/del_led",
+    type: "post",
+    data: params,
+  });
+};
 export default {
   getOrpRoadList,
   getOrpRoadInfo,
   commentSetting,
+  getParkingCommentInfo,
+  getSubParkingLot,
+  getRoadMs,
+  editRoadMs,
+  getRoadServiceParameters,
+  getRoadAllChild,
+  getAllCarGroup,
+  getRoadVehicleGroup,
+  getVehicleList,
+  addVehicle,
+  deleteVehicle,
+  enableVehicle,
+  disableVehicle,
+  getBlackList,
+  deleteBlackVehicle,
+  enableBlackVehicle,
+  disableBlackVehicle,
+  editBlackVehicle,
+  addRoadBlackVehicle,
+  getWhiteList,
+  editWhiteVehicle,
+  addWhiteList,
+  enableWhiteVehicle,
+  disableWhiteVehicle,
+  deleteWhiteVehicle,
+  getLEDList,
+  editLED,
+  addLED,
+  delLED,
 };

src/services/OutRoadMgm/ZombieCarMgm.js

@@ -0,0 +1,57 @@
+import ajax from "@/config/ajax";
+///PMS/api/bpm/offroad/get_all_zomcar   查看列表数据
+const getAllZomcar = (params) => {
+  return ajax({
+    url: "/PMS/api/bpm/offroad/get_all_zomcar",
+    type: "post",
+    data: params,
+  });
+};
+///PMS/api/bpm/offroad/clear_zomcar   清理僵尸车
+const cleanZomCar = (params) => {
+  return ajax({
+    url: "/PMS/api/bpm/offroad/clear_zomcar",
+    type: "post",
+    data: params,
+  });
+};
+///PMS/api/bpm/offroad/show_stop_list  查看停车列表
+const showStopList = (params) => {
+  return ajax({
+    url: "/PMS/api/bpm/offroad/show_stop_list",
+    type: "post",
+    data: params,
+  });
+};
+///PMS/api/bpm/offroad/show_pay_list  查看支付记录
+const showPayList = (params) => {
+  return ajax({
+    url: "/PMS/api/bpm/offroad/show_pay_list ",
+    type: "post",
+    data: params,
+  });
+};
+///PMS/api/bpm/offroad/show_refound_list  退款订单
+const showRefoundList = (params) => {
+  return ajax({
+    url: "/PMS/api/bpm/offroad/show_refound_list",
+    type: "post",
+    data: params,
+  });
+};
+///PMS/api/bpm/offroad/export_zomcar  导出接口
+const exportZomCar = (params) => {
+  return ajax({
+    url: "/PMS/api/bpm/offroad/export_zomcar",
+    type: "post",
+    data: params,
+  });
+};
+export default {
+  getAllZomcar,
+  cleanZomCar,
+  showStopList,
+  showPayList,
+  showRefoundList,
+  exportZomCar,
+};

src/services/OutRoadMgm/index.js

@@ -1,5 +1,8 @@
 import OutSegment from "./OutSegment";
-
+import ZombieCarMgm from "./ZombieCarMgm";
+import OutParkingRecordInquiry from "./OutParkingRecordInquiry";
 export default {
   ...OutSegment,
+  ...ZombieCarMgm,
+  ...OutParkingRecordInquiry,
 };