diff --git a/src/components/TableModule/index.jsx b/src/components/TableModule/index.jsx
index 7bf076f..478752e 100644
--- a/src/components/TableModule/index.jsx
+++ b/src/components/TableModule/index.jsx
@@ -565,9 +565,9 @@ const TableModule = forwardRef((props, ref) => {
                     key={item.name}
                   >
                     {item.hiddenCount ? (
-                      <Input placeholder={item.placeholder} />
+                      <Input placeholder={item.placeholder} autoComplete={item.autoComplete?item.autoComplete:null} />//autoComplete输入框是否显示自动填充
                     ) : (
-                      <Input {...inputParams} placeholder={item.placeholder} />
+                      <Input {...inputParams} placeholder={item.placeholder} autoComplete={item.autoComplete?item.autoComplete:null}/>
                     )}
                   </Form.Item>
                 );
diff --git a/src/components/layout/Tabs/index.jsx b/src/components/layout/Tabs/index.jsx
index 22cd89b..db7c0b9 100644
--- a/src/components/layout/Tabs/index.jsx
+++ b/src/components/layout/Tabs/index.jsx
@@ -144,7 +144,7 @@ export default function Tabs() {
                                 provided.draggableProps.style
                               )}
                             >
-                              <div className={`tab ${selectedKey == item.path ? 'active' : ''}`}>
+                              <div className={`tab ${item.path.indexOf(selectedKey)>-1 ? 'active' : ''}`}>
                                 <span className="tab-text" onClick={() => { handleClick(item) }}>{item.text}</span>
                                 <span className="close" onClick={() => { handleClose(item, index) }}> <Icon type={"guanbi2"} /></span>
                               </div>
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx
new file mode 100644
index 0000000..c45021e
--- /dev/null
+++ b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.jsx
@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const TimeRuleLoadable = loadable(() => import("./loadable"))
+export default (pros) => <TimeRuleLoadable {...pros} fallback={<LoadingImg />} />
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss
new file mode 100644
index 0000000..12494ce
--- /dev/null
+++ b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/index.scss
@@ -0,0 +1,15 @@
+.ant-table-selection-col {
+    width: 50px;
+}
+.modal-rule-detail{
+    .ant-modal-body{
+        display: flex;
+        justify-content: center;
+    }
+    .form-container{
+        width: 400px;
+        .cc-form-input,.cc-form-select{
+            margin-bottom: 10px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx
new file mode 100644
index 0000000..c0510ea
--- /dev/null
+++ b/src/pages/OffPeak/OffPeakTimeMgm/ManagementTime/loadable.jsx
@@ -0,0 +1,262 @@
+import React, { useState, useRef, useEffect } from "react";
+import { message, Pagination, Table, Space, Modal, Button ,Popover,Input,TimePicker} from "antd";
+import ajax from "@/services";
+import { TableModule ,FormInput,FormSelect,FormDatePicker} from "@/components";
+import { useSelector, useDispatch } from "react-redux"
+import "./index.scss";
+// import errorImg from "@/assets/images/layout/error.png"
+import {  useParams  } from "react-router-dom";
+const { TextArea } = Input;
+function ManagementTime(props) {
+  const id = new URLSearchParams(location.href).get("id");
+  const columns = [
+    {
+      title: "名称",
+      dataIndex: "name",
+      align: "center",
+      key:"name",
+    },
+    {
+      title: "日期类型",
+      dataIndex: "date_type",
+      key: "date_type",
+      align: "center",
+    },
+    {
+      title: "开始时间",
+      dataIndex: "start_time",
+      align: "center",
+      key:"start_time",
+    },
+    {
+      title: "结束时间",
+      dataIndex: "end_time",
+      key: "end_time",
+      align: "center",
+    },
+    {
+      title: "是否可进场",
+      dataIndex: "is_in",
+      key: "is_in",
+      align: "center",
+      render: (text, record, index) => (
+        <div >{record.is_in==1?"是":"否"}</div>
+      )
+    },
+    {
+      title: "是否可出场",
+      dataIndex: "is_out",
+      align: "center",
+      key: "is_out",
+      render: (text, record, index) => (
+        <div >{record.is_out==1?"是":"否"}</div>
+      )
+    },
+    {
+      title: "备注",
+      dataIndex: "remarks",
+      align: "center",
+      key:"remarks",
+    },
+    {
+      title: "操作",
+      align: "center",
+      render: (text, record) => {
+        return (
+          <>
+              <Button type="primary"
+              onClick={()=>{
+                Modal.confirm({
+                title: `提示`,
+                content: `是否确认删除选中的数据项？`,
+                onOk: () => {
+                  ajax.getDelRuleLink({ids:[record.id]}).then((res) => {
+                  if (res.status === 20000) {
+                    message.success('删除成功')
+                    tableRef.current.fetch(1,{})
+                  }else {
+                    message.error(res?.message);
+                  }
+                });
+                }
+            })}}>删除</Button>
+            {/* </Popover> */}
+          </>
+        );
+      },
+    },
+  ];
+  const formSearch = [
+    {
+      type: "Select",
+      label: "日期类型",
+      name: "date_type",
+      placeholder:"请选择日期类型",
+      options: [
+        {
+          label: "全部",
+          value: "0",
+        },
+        {
+          label: "公休日",//1公休日、2工作日、3节假日
+          value: "1",
+        },
+        {
+          label: "工作日",
+          value: "2",
+        },
+        {
+          label: "节假日",
+          value: "3",
+        },
+      ],
+    },
+    
+    // {
+    //   type: "RangePicker",
+    //   label: "操作时间",
+    //   name: "operationTime",
+    // },
+  ];
+  //搜索参数初始化
+  const initFormData = {
+    date_type:"0",
+  };
+  const tableRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  // 新增数据
+  const [rowData, setRowData] = useState({
+    ids: [],
+  });
+  //规则下拉
+  const [ruleLinkList, setRuleLinkList] = useState([]);
+  //搜索的结果
+  const [tableData, setTableData] = useState([]);
+  //搜索的总结果数
+  const [total, setTotal] = useState(10);
+  const [tableSelectCheck, setTableSelectCheck] = useState([]); // 列表选中的id
+  function search(params) {
+    ajax.getRuleLinkList({...params,rule_id:id}).then((res) => {
+      if (res.status === 20000) {
+        let data=res.data.list
+        data.map((item,index)=>{
+          item.key=item.id
+        })
+        setTableData(data);
+        setTotal(res.data.total);
+      }
+    });
+  }
+  function addButton() {
+    return ([<Button
+      type="primary"
+      onClick={() => {
+        setVisible(true);
+        ajax.getRuleDetailsSelect({rule_id:id}).then((res) => {
+          if (res.status === 20000) {
+            setRuleLinkList(res.data.list)
+          }
+        });
+      }}
+    >
+      添加
+    </Button>,<Button
+        type="primary"
+        onClick={() => {
+          Modal.confirm({
+            title: `提示`,
+            content: `是否确认删除选中的数据项？`,
+            onOk: () => {
+              ajax.getDelRuleLink({ids:tableSelectCheck}).then((res) => {
+              if (res.status === 20000) {
+                message.success('删除成功')
+                tableRef.current.fetch(1,{})
+              }else {
+                message.error(res?.message);
+              }
+            });
+            }
+        })
+        }}
+      >
+        删除
+      </Button>]
+      
+    );
+  }
+  // 确定
+  const handleOk = () => {
+    if(rowData.ids.length==0){
+      message.destroy();
+      message.warning(`时间规则不可为空`);
+      return
+    }
+    ajax.getRuleLinkAdd(rowData).then((res) => {
+      if (res.status === 20000) {
+        setVisible(false);
+        message.success("新增成功")
+        setRowData({ids:[]})
+        tableRef.current.fetch(1,{})
+      }else {
+        message.error(res?.message);
+      }
+    });
+  }
+  // 取消
+  const onCancel = () => {
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <TableModule
+        ref={tableRef}
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        search={search}
+        total={total}
+        initFormData={initFormData}
+        rightButtonGroup={addButton()}
+        rowSelection={{
+          selectedRowKeys: tableSelectCheck,
+          onChange: (selectedRowKeys, selectedRows) => {
+            console.log(selectedRowKeys, selectedRows);
+            setTableSelectCheck(selectedRowKeys)
+          },
+          type: "checkbox"
+        }}
+        isExport={false}
+      />
+      <Modal
+        open={visible}
+        width={720}
+        onCancel={onCancel}
+        onOk={handleOk}
+        className="modal-rule-detail"
+        title={"添加时间规则关联"}
+        afterClose={()=>{
+          setRowData({
+            ids: []
+          })
+        }}
+      >
+        <div className="form-container">
+          <FormSelect
+            yisaLabel="时间规则"
+            mode="multiple"
+            yisaData={ruleLinkList}
+            defaultValue={rowData.ids || 0}
+            placeholder="请选择时间规则"
+            hasUnlimited={false}
+            required={true}
+            showClose={false}
+            onChange={e => { setRowData({ ids: e }) }}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default ManagementTime;
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
index e69de29..da7212c 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
+++ b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/index.scss
@@ -0,0 +1,58 @@
+.modal-rule-detail{
+    .ant-modal-body{
+        display: flex;
+        justify-content: center;
+    }
+
+    .form-container{
+        width: 400px;
+        .cc-form-input,.cc-form-select{
+            margin-bottom: 10px;
+        }
+
+        .yisa-search{
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+            .modal-start-time{
+                display: flex;
+                justify-content: right;
+                margin-right: 10px;
+                text-align: right;
+                width: calc(100% - 274px - 10px);
+
+            }
+            .ant-picker{
+                width: 274px;
+            }
+            label{
+                color: var(--color-search-list-item-text);
+            }
+            .redLogo{
+                margin-right:0px;
+                color: #ef5454;  
+            }
+            .line{
+                width: calc(100% - 249px - 10px);
+                margin-right: 10px;
+                text-align: right;
+                color: var(--color-search-list-item-text);
+            }
+            .ant-input{
+                width: 274px;
+            }
+        }
+        .form-select-single-name{
+            em{
+                margin-right:0px;
+                color: #ef5454;
+            }
+        }
+    }
+}
+.operateBtn {
+    div {
+      cursor: pointer;
+      margin-top: 5px;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
index f2a3d5f..860785b 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
+++ b/src/pages/OffPeak/OffPeakTimeMgm/RuleDetail/loadable.jsx
@@ -1,161 +1,401 @@
 import React, { useState, useRef, useEffect } from "react";
-import { message, Pagination, Table, Space, Modal, Button } from "antd";
+import { message, Pagination, Table, Space, Modal, Button ,Popover,Input,TimePicker} from "antd";
 // import { dictionary, utils } from "@/config/common";
 // import moment from 'moment'
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajax from "@/services";
-import { TableModule } from "@/components";
-// import "./index.scss";
+import { TableModule ,FormInput,FormSelect} from "@/components";
+import "./index.scss";
+import moment from "moment";
 // import errorImg from "@/assets/images/layout/error.png"
 // import {  useLocation } from "react-router-dom";
-
+const { TextArea } = Input;
 function RuleDetail() {
+  const selectData= [
+    {
+      label: "全部",
+      value: "0",
+    },
+    {
+      label: "公休日",//1公休日、2工作日、3节假日
+      value: "1",
+    },
+    {
+      label: "工作日",
+      value: "2",
+    },
+    {
+      label: "节假日",
+      value: "3",
+    },
+   
+  ]
+  const modalSelectData= [
+    {
+      label: "否",
+      value: 0,
+    },
+    {
+      label: "是",
+      value: 1,
+    },
+  ]
+  const listData={
+    name: "",
+    date_type:"",
+    start_time: '00:00:00',
+    end_time: '23:59:59',
+    is_in: "",
+    is_out: "",
+    remarks: "",
+  }
   const columns = [
-    // {
-    //   title: "序号",
-    //   dataIndex: "index",
-    //   key: "index",
-    //   align:"center",
-    //   render: (_, record, index) => {
-    //     return index + 1;
-    //   },
-    // },
-    // {
-    //   title: "商户名称",
-    //   dataIndex: "merchantName",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "100px", wordBreak: "break-all" }}>{record.merchantName}</div>
-    //   )
-    // },
-    // {
-    //   title: "操作人",
-    //   dataIndex: "operator",
-    //   key: "operator",
-    //   align: "center",
-    // },
-    // {
-    //   title: "车牌号",
-    //   dataIndex: "licensePlateNumber",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "100px", wordBreak: "break-all" }}>{record.licensePlateNumber}</div>
-    //   )
-    // },
-    // {
-    //   title: "路段",
-    //   dataIndex: "section",
-    //   key: "section",
-    //   align: "center",
-    // },
-    // {
-    //   title: "泊位号",
-    //   dataIndex: "parkingSpotNumber",
-    //   key: "parkingSpotNumber",
-    //   align: "center",
-    // },
-    // {
-    //   title: "出入场类型",
-    //   dataIndex: "entryExitType",
-    //   align: "center",
-    //   key: "entryExitType",
-    // },
-    // {
-    //   title: "出入场时间",
-    //   dataIndex: "entryExitTime",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "130px", wordBreak: "break-all" }}>{record.entryExitTime}</div>
-    //   )
-    // },
-    // {
-    //   title: "操作时间",
-    //   dataIndex: "operationTime",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "130px", wordBreak: "break-all" }}>{record.operationTime}</div>
-    //   )
-    // },
-    // {
-    //   title: "间隔时长",
-    //   dataIndex: "intervalDuration",
-    //   key: "intervalDuration",
-    //   align: "center",
-    // },
+    {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      align:"center",
+      render: (_, record, index) => {
+        return index + 1;
+      },
+    },
+    {
+      title: "名称",
+      dataIndex: "name",
+      align: "center",
+    },
+    {
+      title: "日期类型",
+      dataIndex: "date_type",
+      key: "date_type",
+      align: "center",
+    },
+    {
+      title: "开始时间",
+      dataIndex: "start_time",
+      align: "center",
+    },
+    {
+      title: "结束时间",
+      dataIndex: "end_time",
+      key: "end_time",
+      align: "center",
+    },
+    {
+      title: "是否可进场",
+      dataIndex: "is_in",
+      key: "is_in",
+      align: "center",
+      render: (text, record, index) => (
+        <div >{record.is_in==1?"是":"否"}</div>
+      )
+    },
+    {
+      title: "是否可出场",
+      dataIndex: "is_out",
+      align: "center",
+      key: "is_out",
+      render: (text, record, index) => (
+        <div >{record.is_out==1?"是":"否"}</div>
+      )
+    },
+    {
+      title: "备注",
+      dataIndex: "remarks",
+      align: "center",
+    },
+    {
+      title: "操作",
+      align: "center",
+      render: (text, record) => {
+        return (
+          <>
+            <Popover
+              content={
+                <div className="operateBtn">
+                  <div
+                    onClick={() => {
+                      setActionState("edit");
+                      setVisible(true);
+                      setEditId(record.id)
+                      setRowData({
+                        ...rowData,    
+                        name: record.name,
+                        date_type:record.date_type,
+                        start_time: record.start_time,
+                        end_time: record.end_time,
+                        is_in: record.is_in,
+                        is_out: record.is_out,
+                        remarks: record.remarks,
+                      })
+                    }}
+                  >
+                    编辑
+                  </div>
+                  <div
+                    onClick={() => {
+                      handleDel(record);
+                    }}
+                  >
+                    删除
+                  </div>
+                </div>
+              }
+            >
+              <Button type="primary">操作</Button>
+            </Popover>
+          </>
+        );
+      },
+    },
   ];
-
   const formSearch = [
-    // {
-    //   type: "Select",
-    //   label: "商户名称",
-    //   name: "merchantName",
-    //   placeholder:"请选择商户名称"
-    // },
-    // {
-    //   type: "Input",
-    //   label: "路段",
-    //   placeholder: "请输入路段",
-    //   name: "road_name",
-    // },
-    // {
-    //   type: "Input",
-    //   label: "泊位号",
-    //   placeholder: "请输入泊位号",
-    //   name: "parking_num",
-    // },
-    // {
-    //   type: "Input",
-    //   label: "操作人",
-    //   placeholder: "请输入操作人",
-    //   name: "operator",
-    // },
-    // {
-    //   type: "Input",
-    //   label: "间隔时长大于分钟数",
-    //   placeholder: "请输入内容",
-    //   name: "exceedTime",
-    // },
-    // {
-    //   type: "RangePicker",
-    //   label: "操作时间",
-    //   name: "operationTime",
-    // },
+    {
+      type: "Input",
+      label: "名称",
+      placeholder: "请输入名称",
+      autoComplete:"off", 
+      name: "name",
+    },
+    {
+      type: "Select",
+      label: "日期类型",
+      name: "date_type",
+      placeholder:"请选择日期类型",
+      options:selectData
+    },
   ];
+  const tableRef = useRef(null);
   //搜索参数初始化
   const initFormData = {
-    merchantName: "0",
-    road_name: "",
-    parking_num: "",
-    operator: "",
-    exceedTime: "",
+    name: "",
+    date_type: "0",
   };
+  const [visible, setVisible] = useState(false);
+  const [actionState, setActionState] = useState(null); //操作状态
+  // 新增数据
+  const [rowData, setRowData] = useState(listData);
   //搜索的结果
   const [tableData, setTableData] = useState([]);
   //搜索的总结果数
-  const [total, setTotal] = useState(0);
+  const [total, setTotal] = useState(10);
+  //储存编辑的id
+  const [editId,setEditId] = useState("");
   function search(params) {
-    // ajax.getPDAList(params).then((res) => {
-    //   if (res.status === 20000) {
-    //     setTableData(res.data.list);
-    //     setTotal(res.data.total);
-    //   }
-    // });
+    ajax.getTimeRuleDetailsList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
   }
-
+  function addButton() {
+    return (
+      <Button
+        type="primary"
+        onClick={() => {
+          setActionState("add");
+          setVisible(true);
+        }}
+      >
+        添加
+      </Button>
+    );
+  }
+  // 确定
+  const handleOk = () => {
+    if(!rowData.name){
+      message.destroy();
+      message.warning(`名称不可为空`);
+      return
+    }else if(!rowData.date_type){
+      message.destroy();
+      message.warning(`日期类型不可为空`);
+      return
+    }
+    else if(rowData.start_time==rowData.end_time){
+      message.destroy();
+      message.warning(`开始时间不能与结束时间相同！`);
+      return
+    }
+    else if(rowData.is_in===""){
+      message.destroy();
+      message.warning(`是否可进入不可为空`);
+      return
+    }
+    else if(rowData.is_out===""){
+      message.destroy();
+      message.warning(`是否可出场不可为空`);
+      return
+    }
+    let data = rowData
+    if(actionState=="edit"){
+      data={...rowData,id:editId}
+      Modal.confirm({
+          title: `提示`,
+          content: `修改的数据可能导致已绑定的数据出错，是否修改？`,
+          onOk: () => {addAjax(data,'修改成功')}
+      })
+    }else{
+      addAjax(data,'新增成功')
+    }
+  }
+  //新增修改函数
+  const addAjax = (data,messageDate) => {
+    ajax.getTimeRuleDetailsAdd(data).then((res) => {
+      if (res.status === 20000) {
+        setVisible(false);
+        message.success(messageDate)
+        setRowData(listData)
+        tableRef.current.fetch(1,{})
+      }else {
+        message.error(res?.message);
+      }
+    });
+  }
+  const handleDel = (record) => {
+    Modal.confirm({
+        title: `提示`,
+        content: `是否确认删除选中的数据项？`,
+        onOk: () => {
+                ajax.delTimeRuleDetails({id:record.id}).then((res) => {
+                  if (res.status === 20000) {
+                    message.success('删除成功')
+                    tableRef.current.fetch(1,{})
+                  }else {
+                    message.error(res?.message);
+                  }
+                });
+        }
+    })
+  }
+  // 取消
+  const onCancel = () => {
+    setActionState(null);
+    setVisible(false);
+  };
+  // 弹窗标题
+  const getModalTitle = (key) => {
+    switch (key) {
+      case "edit":
+        return "修改时间详情";
+      case "add":
+        return "添加时间详情";
+      default:
+        break;
+    }
+  };
   return (
-    <TableModule
-    //   columns={columns}
-    //   tableData={tableData}
-    //   formSearch={formSearch}
-    //   search={search}
-    //   total={total}
-    //   mandatory={'parking_num'}
-    //   mandatory_name={'泊位号'}
-    //   pagename="PDA操作记录"
-    //   pageName={'entryExitOptPDA'}
-    //   initFormData={initFormData}
-    //   exportUrl="/api/bpm/record/get_pda_export"
-    />
+    <>
+      <TableModule
+        ref={tableRef}
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        search={search}
+        total={total}
+        mandatory={'parking_num'}
+        initFormData={initFormData}
+        rightButtonGroup={[addButton()]}
+        isExport={false}
+      />
+      <Modal
+        open={visible}
+        width={720}
+        onCancel={onCancel}
+        onOk={handleOk}
+        className="modal-rule-detail"
+        destroyOnClose
+        title={getModalTitle(actionState)}
+        afterClose={()=>{
+          setRowData({
+            name: "",
+            date_type:"",
+            start_time: '00:00:00',
+            end_time: '23:59:59',
+            is_in: "",
+            is_out: "",
+            remarks: "",
+          })
+        }}
+      >
+        <div className="form-container">
+          <FormInput
+            isRequired={true}
+            yisaLabel="名称"
+            placeholder="请输入规则名称"
+            value={rowData.name}
+            showClose={true}
+
+            onChange={e => { setRowData({ ...rowData, name: e.target.value }) }}
+          />
+          <FormSelect
+            yisaLabel="日期类型"
+            yisaData={selectData}
+            defaultValue={rowData.date_type || null}
+            placeholder="请选择日期类型"
+            hasUnlimited={false}
+            required={true}
+            showClose={false}
+            onChange={e => { setRowData({ ...rowData,date_type: e }) }}
+          />
+          <div className="yisa-search">
+            <div className="modal-start-time">
+              <div className="redLogo">*</div>
+              <label>开始时间</label>
+            </div>
+            <TimePicker
+              allowClear={false}
+              value={moment(rowData.start_time, 'HH:mm:ss')}
+              onChange={(time, timeString) => {setRowData({ ...rowData,start_time: timeString })}}
+            />
+          </div>
+          <div className="yisa-search">
+            <div className="modal-start-time">
+              <div className="redLogo">*</div>
+              <label>结束时间</label>
+            </div>
+            <TimePicker
+              // format={format}
+              allowClear={false}
+              value={moment(rowData.end_time, 'HH:mm:ss')}
+              onChange={(time, timeString) => {setRowData({ ...rowData,end_time: timeString })}}
+            />
+          </div>
+          <FormSelect
+            yisaLabel="是否可以进入"
+            yisaData={modalSelectData}
+            defaultValue={rowData.is_in || null}
+            placeholder="请选择是否可以进入"
+            hasUnlimited={false}
+            required={true}
+            showClose={false}
+            onChange={e => { setRowData({  ...rowData,is_in: e }) }}
+          />
+          <FormSelect
+            yisaLabel="是否可以出场"
+            yisaData={modalSelectData}
+            defaultValue={rowData.is_out || null}
+            placeholder="请选择是否可以出场"
+            hasUnlimited={false}
+            required={true}
+            showClose={false}
+            onChange={e => { setRowData({ ...rowData, is_out: e }) }}
+          />
+          <div className="yisa-search">
+              <label className="line">备注</label>
+              <TextArea
+                  showCount
+                  placeholder="请输入"
+                  maxLength={150}
+                  value={rowData.remarks || ""}
+                  style={{ height: 120}}
+                  onChange={e => { setRowData({ ...rowData, remarks: e.target.value }) }}
+              />
+          </div>
+        </div>
+      </Modal>
+    </>
   );
 }
 
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
index e69de29..68769c5 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
+++ b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/index.scss
@@ -0,0 +1,33 @@
+.modal-rule-detail{
+    .ant-modal-body{
+        display: flex;
+        justify-content: center;
+    }
+
+    .form-container{
+        width: 400px;
+        .cc-form-input{
+            margin-bottom: 10px;
+        }
+        .yisa-search{
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+            .line{
+                width: calc(100% - 249px - 10px);
+                margin-right: 10px;
+                text-align: right;
+                color: var(--color-search-list-item-text);
+            }
+            .ant-input{
+                width: 274px;
+            }
+        }
+    }
+}
+.operateBtn {
+    div {
+      cursor: pointer;
+      margin-top: 5px;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
index 4e9f808..9287f59 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
+++ b/src/pages/OffPeak/OffPeakTimeMgm/TimeRule/loadable.jsx
@@ -1,161 +1,250 @@
 import React, { useState, useRef, useEffect } from "react";
-import { message, Pagination, Table, Space, Modal, Button } from "antd";
+import { message, Pagination, Table, Space, Modal, Button,Popover ,Input} from "antd";
 // import { dictionary, utils } from "@/config/common";
 // import moment from 'moment'
 // import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajax from "@/services";
-import { TableModule } from "@/components";
-// import "./index.scss";
+import { TableModule ,FormInput} from "@/components";
+import { useNavigate, useLocation } from "react-router-dom"
+import { useSelector, useDispatch } from "react-redux"
+import { setTabList} from "@/store/common.js"
+import "./index.scss";
 // import errorImg from "@/assets/images/layout/error.png"
 // import {  useLocation } from "react-router-dom";
-
+const { TextArea } = Input;
 function TimeRule() {
+  const navigate = useNavigate()
+  const dispatch = useDispatch()
   const columns = [
-    // {
-    //   title: "序号",
-    //   dataIndex: "index",
-    //   key: "index",
-    //   align:"center",
-    //   render: (_, record, index) => {
-    //     return index + 1;
-    //   },
-    // },
-    // {
-    //   title: "商户名称",
-    //   dataIndex: "merchantName",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "100px", wordBreak: "break-all" }}>{record.merchantName}</div>
-    //   )
-    // },
-    // {
-    //   title: "操作人",
-    //   dataIndex: "operator",
-    //   key: "operator",
-    //   align: "center",
-    // },
-    // {
-    //   title: "车牌号",
-    //   dataIndex: "licensePlateNumber",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "100px", wordBreak: "break-all" }}>{record.licensePlateNumber}</div>
-    //   )
-    // },
-    // {
-    //   title: "路段",
-    //   dataIndex: "section",
-    //   key: "section",
-    //   align: "center",
-    // },
-    // {
-    //   title: "泊位号",
-    //   dataIndex: "parkingSpotNumber",
-    //   key: "parkingSpotNumber",
-    //   align: "center",
-    // },
-    // {
-    //   title: "出入场类型",
-    //   dataIndex: "entryExitType",
-    //   align: "center",
-    //   key: "entryExitType",
-    // },
-    // {
-    //   title: "出入场时间",
-    //   dataIndex: "entryExitTime",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "130px", wordBreak: "break-all" }}>{record.entryExitTime}</div>
-    //   )
-    // },
-    // {
-    //   title: "操作时间",
-    //   dataIndex: "operationTime",
-    //   align: "center",
-    //   render: (text, record, index) => (
-    //     <div style={{ width: "130px", wordBreak: "break-all" }}>{record.operationTime}</div>
-    //   )
-    // },
-    // {
-    //   title: "间隔时长",
-    //   dataIndex: "intervalDuration",
-    //   key: "intervalDuration",
-    //   align: "center",
-    // },
-  ];
+    {
+      title: "名称",
+      dataIndex: "name",
+      align: "center",
+    },
+    {
+      title: "备注",
+      dataIndex: "remarks",
+      align: "center",
+    },
+    {
+      title: "操作",
+      align: "center",
+      render: (text, record) => {
+        return (
+          <>
+            <Popover
+              content={
+                <div className="operateBtn">
+                  <div
+                    onClick={() => {
+                      let sessionStorageData= JSON.parse(sessionStorage.getItem('tabList'))
+                      let sameMenu = sessionStorageData.filter(item => { return item.path.indexOf("/offPeak/managementTime")>-1})
+                      if(sameMenu.length==0){
+                        sessionStorageData.push({text: "管理时间", name: "managementTime", icon: "", path: `/offPeak/managementTime?&id=${record.id}`})
+                        sessionStorage.setItem("tabList",JSON.stringify(sessionStorageData))
+                        dispatch(setTabList(sessionStorageData))
+                        navigate(`/offPeak/managementTime?&id=${record.id}`)
+                      }else{
+                        navigate(`/offPeak/managementTime?&id=${record.id}`)
+                      }
+                    }}
+                  >
+                    管理时间
+                  </div>
+                  <div
+                    onClick={() => {
+                      setActionState("edit");
+                      setVisible(true);
+                      setEditId(record.id)
+                      setRowData({
+                        ...rowData,    
+                        name: record.name,
+                        remarks: record.remarks,
+                      })
+                    }}
+                  >
+                    编辑
+                  </div>
+                  <div
+                    onClick={() => {
+                      handleDel(record);
+                    }}
+                  >
+                    删除
+                  </div>
+                </div>
+              }
+            >
+              <Button type="primary">操作</Button>
+            </Popover>
+          </>
+        );
+      },
+    },
 
+  ];
+  const listData={
+    name: "",
+    remarks: ""
+  }
   const formSearch = [
-    // {
-    //   type: "Select",
-    //   label: "商户名称",
-    //   name: "merchantName",
-    //   placeholder:"请选择商户名称"
-    // },
-    // {
-    //   type: "Input",
-    //   label: "路段",
-    //   placeholder: "请输入路段",
-    //   name: "road_name",
-    // },
-    // {
-    //   type: "Input",
-    //   label: "泊位号",
-    //   placeholder: "请输入泊位号",
-    //   name: "parking_num",
-    // },
-    // {
-    //   type: "Input",
-    //   label: "操作人",
-    //   placeholder: "请输入操作人",
-    //   name: "operator",
-    // },
-    // {
-    //   type: "Input",
-    //   label: "间隔时长大于分钟数",
-    //   placeholder: "请输入内容",
-    //   name: "exceedTime",
-    // },
-    // {
-    //   type: "RangePicker",
-    //   label: "操作时间",
-    //   name: "operationTime",
-    // },
+    {
+      type: "Input",
+      label: "规则名称",
+      autoComplete:"off", 
+      placeholder: "请输入规则名称",
+      name: "name",
+    },
   ];
+  // 弹窗标题
+  const getModalTitle = (key) => {
+    switch (key) {
+      case "edit":
+        return "修改时间详情";
+      case "add":
+        return "添加时间详情";
+      default:
+        break;
+    }
+  };
   //搜索参数初始化
   const initFormData = {
-    merchantName: "0",
-    road_name: "",
-    parking_num: "",
-    operator: "",
-    exceedTime: "",
+    name: "",
   };
+  const tableRef = useRef(null);
+  const [actionState, setActionState] = useState(null); //操作状态
   //搜索的结果
   const [tableData, setTableData] = useState([]);
   //搜索的总结果数
   const [total, setTotal] = useState(0);
+  const [visible, setVisible] = useState(false);
+  // 新增数据
+  const [rowData, setRowData] = useState(listData);
+  //储存编辑的id
+  const [editId,setEditId] = useState("");
   function search(params) {
-    // ajax.getPDAList(params).then((res) => {
-    //   if (res.status === 20000) {
-    //     setTableData(res.data.list);
-    //     setTotal(res.data.total);
-    //   }
-    // });
+    ajax.getTimeRuleList(params).then((res) => {
+      if (res.status === 20000) {
+        setTableData(res.data.list);
+        setTotal(res.data.total);
+      }
+    });
+  }
+  function addButton() {
+    return (
+      <Button
+        type="primary"
+        onClick={() => {
+          setActionState("add");
+          setVisible(true);
+        }}
+      >
+        添加
+      </Button>
+    );
+  }
+  //删除
+  const handleDel = (record) => {
+    Modal.confirm({
+        title: `提示`,
+        content: `是否确认删除选中的数据项？`,
+        onOk: () => {
+                ajax.delTimeRule({id:record.id}).then((res) => {
+                  if (res.status === 20000) {
+                    message.success('删除成功')
+                    tableRef.current.fetch(1,{})
+                  }else {
+                    message.error(res?.message);
+                  }
+                });
+        }
+    })
+  }
+  // 取消
+  const onCancel = () => {
+    setActionState(null);
+    setVisible(false);
+  };
+  // 确定
+  const handleOk = () => {
+    if(!rowData.name){
+      message.destroy();
+      message.warning(`名称不可为空`);
+      return
+    }
+    let data = rowData
+    if(actionState=="edit"){
+      data={...rowData,id:editId}
+      addAjax(data,'修改成功')
+    }else{
+      addAjax(data,'新增成功')
+    }
+  }
+  //新增修改函数
+  const addAjax = (data,messageDate) => {
+    ajax.getTimeRuleAdd(data).then((res) => {
+      if (res.status === 20000) {
+        setVisible(false);
+        message.success(messageDate)
+        setRowData(listData)
+        tableRef.current.fetch(1,{})
+      }else {
+        message.error(res?.message);
+      }
+    });
   }
-
   return (
-    <TableModule
-    //   columns={columns}
-    //   tableData={tableData}
-    //   formSearch={formSearch}
-    //   search={search}
-    //   total={total}
-    //   mandatory={'parking_num'}
-    //   mandatory_name={'泊位号'}
-    //   pagename="PDA操作记录"
-    //   pageName={'entryExitOptPDA'}
-    //   initFormData={initFormData}
-    //   exportUrl="/api/bpm/record/get_pda_export"
-    />
+    <>
+      <TableModule
+        ref={tableRef}
+        columns={columns}
+        tableData={tableData}
+        formSearch={formSearch}
+        search={search}
+        total={total}
+        initFormData={initFormData}
+        rightButtonGroup={[addButton()]}
+        isExport={false}
+      />
+      <Modal
+        open={visible}
+        width={720}
+        onCancel={onCancel}
+        onOk={handleOk}
+        className="modal-rule-detail"
+        destroyOnClose
+        title={getModalTitle(actionState)}
+        afterClose={()=>{
+          setRowData({
+            name: "",
+            remarks: ""
+          })
+        }}
+      >
+        <div className="form-container">
+          <FormInput
+            isRequired={true}
+            yisaLabel="名称"
+            placeholder="请输入规则名称"
+            value={rowData.name}
+            showClose={true}
+
+            onChange={e => { setRowData({ ...rowData, name: e.target.value }) }}
+          />
+          <div className="yisa-search">
+              <label className="line">备注</label>
+              <TextArea
+                  showCount
+                  placeholder="请输入"
+                  maxLength={150}
+                  value={rowData.remarks || ""}
+                  style={{ height: 120}}
+                  onChange={e => { setRowData({ ...rowData, remarks: e.target.value }) }}
+              />
+          </div>
+        </div>
+      </Modal>
+    </>
   );
 }
 
diff --git a/src/pages/OffPeak/OffPeakTimeMgm/index.jsx b/src/pages/OffPeak/OffPeakTimeMgm/index.jsx
index 08d94ea..ddfc8ca 100644
--- a/src/pages/OffPeak/OffPeakTimeMgm/index.jsx
+++ b/src/pages/OffPeak/OffPeakTimeMgm/index.jsx
@@ -1,6 +1,8 @@
 import RuleDetail from "./RuleDetail"
 import TimeRule from "./TimeRule"
+import ManagementTime from "./ManagementTime"
 export default {
     RuleDetail,
-    TimeRule
+    TimeRule,
+    ManagementTime
 }
\ No newline at end of file
diff --git a/src/router/router.config.js b/src/router/router.config.js
index 1c5c6fe..89c54a9 100644
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@@ -1316,6 +1316,12 @@ let routes = [
         name: "timeRule",
         component: pages.TimeRule,
       },
+      {
+        path: "/offPeak/managementTime",
+        text: "时间规则",
+        name: "timeRule",
+        component: pages.ManagementTime,
+      },
        // -------------------------------新能源充电系统
       {
         path: "/newEnergy/newEnergyOverview",
@@ -1377,7 +1383,7 @@ let routes = [
         text: "电桩监控",
         name: "pileMonitor",
         component: pages.PileMonitor,
-      },
+      }
     ],
   },
 ];
diff --git a/src/services/OffPeak/index.js b/src/services/OffPeak/index.js
index abb481d..9efd468 100644
--- a/src/services/OffPeak/index.js
+++ b/src/services/OffPeak/index.js
@@ -69,7 +69,86 @@ const getParkList = () => {
     type: 'get'
   })
 }
-
+//时间规则详情列表
+const getTimeRuleDetailsList =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/time_rule_details_list",
+    type: "get",
+    data: params,
+  });
+}
+//添加时间规则详情
+const getTimeRuleDetailsAdd =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/save_time_rule_details",
+    type: "post",
+    data: params,
+  });
+}
+//删除时间规则详情
+const delTimeRuleDetails =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/del_time_rule_details",
+    type: "get",
+    data: params,
+  });
+}
+//时间规则列表
+const getTimeRuleList =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/time_rule_list",
+    type: "get",
+    data: params,
+  });
+}
+//添加时间规则详情
+const getTimeRuleAdd =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/save_time_rule",
+    type: "post",
+    data: params,
+  });
+}
+//删除时间规则详情
+const delTimeRule =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/del_time_rule",
+    type: "get",
+    data: params,
+  });
+}
+//获取规则关联列表
+const getRuleLinkList =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/get_rule_link_list",
+    type: "get",
+    data: params,
+  });
+}
+//获取时间规则详情下拉
+const getRuleDetailsSelect =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/get_rule_details_select",
+    type: "get",
+    data: params,
+  });
+}
+//获取时间规则详情下拉
+const getRuleLinkAdd =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/add_rule_link",
+    type: "POST",
+    data: params,
+  });
+}
+//删除规则关联
+const getDelRuleLink =  (params) => {
+  return ajax({
+    url: "/api/off_peak/rule_manage/del_rule_link",
+    type: "POST",
+    data: params,
+  });
+}
 export default {
     getBookInfoList,
     getStallCountData,
@@ -80,5 +159,16 @@ export default {
     getBookInfoList,
     getBreakInfoList,
     getOffPeakRecords,
-    getParkList
-}
\ No newline at end of file
+    getParkList,
+    getTimeRuleDetailsList,
+    getTimeRuleDetailsAdd,
+    delTimeRuleDetails,
+    getTimeRuleAdd,
+    delTimeRule,
+    getTimeRuleList,
+    getRuleLinkList,
+    getRuleDetailsSelect,
+    getRuleLinkAdd,
+    getDelRuleLink
+
+}