Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop

src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx

@@ -114,13 +114,13 @@ function BillingRule() {
       name: "rule_name",
       type: "Input",
       label: "规则名称",
-      placeholder: "请输入出场收费员",
+      placeholder: "请输入规则名称",
     },
     {
       name: "timePeriod",
       type: "RangePicker",
       label: "时间段",
-      defaultValue: [moment().subtract(1,"months"), moment()]
+      defaultValue: [moment().subtract(1,"months").startOf("day"), moment().endOf("day")]
     },
   ];
     // 获取运营商名字
@@ -139,7 +139,6 @@ function BillingRule() {
 
   // 检索
   const search = (params) => {
-    console.log("params",params);
     let data = {
       ...params,
       type:1
@@ -168,6 +167,7 @@ function BillingRule() {
 
 // 处理弹框ok按钮
   const handleConfirm = () => {
+    setDetailVisible(true)
     if(!modalData?.operator_id){
       message.warning("运营商名称不能为空")
       return
@@ -229,7 +229,6 @@ function BillingRule() {
         }}
         onOk={() => {
           handleConfirm()
-          setDetailVisible(false);
         }}
         okText="保存"
         destroyOnClose

src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/index.jsx

@@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const IllegalRuleConfigMgm = loadable(() => import("./loadable"))
+export default (pros) => <IllegalRuleConfigMgm {...pros} fallback={<LoadingImg />} />

src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/index.scss

@@ -0,0 +1,280 @@
+@import "@/assets/css/mixin.scss";
+$color-container-bg: var(--color-container-bg);
+$color-user-list-bg: var(--color-user-list-bg);
+$color-text: var(--color-text);
+$color-primary: var(--color-primary);
+
+.ant-tabs {
+  margin-bottom: 16px;
+
+  .ant-tabs-nav {
+    margin-bottom: 0 !important;
+
+    &::before {
+      border-bottom: 1px solid var(--color-card-line) !important;
+    }
+  }
+
+  .ant-tabs-nav-wrap {
+    width: 100%;
+    box-sizing: content-box;
+
+    .ant-tabs-nav-list {
+      width: 340px;
+
+      .ant-tabs-ink-bar {
+        height: 3px;
+        background-color: #00ccff;
+      }
+
+      .ant-tabs-tab {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        padding-bottom: 10px;
+        text-align: center;
+        cursor: pointer;
+        font-size: 14px !important;
+        font-family: MicrosoftYaHei;
+        text-align: center;
+        letter-spacing: 0.7px;
+      }
+
+      .ant-tabs-tab-active {
+        div {
+          color: #00ccff;
+        }
+      }
+    }
+  }
+}
+
+.ant-input::-webkit-input-placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-input::-moz-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list  .ant-btn-primary {
+  width: 68px;
+  height: 30px;
+  background: linear-gradient(180deg, #3aa9ff, #59b7ff);
+  border-radius: 4px;
+}
+.ant-input:-ms-input-placeholder {
+  color: var(--color-placeholder);
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-thead th {
+  background-color: #616b83 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody td {
+  background-color: #3e4557 !important;
+}
+.right-list .cc-result-flow .table-wrap .yisa-table .ant-table-tbody tr:nth-child(even) td {
+  background-color: #3e4557 !important;
+}
+.ant-input::placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-select-selection-placeholder {
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+  background: var(--color-input-disabled-bg);
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled .ant-select-arrow {
+  color: var(--color-placeholder);
+}
+
+.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  background-color: var(--color-input-disabled-bg);
+  color: var(--color-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ant-select-multiple {
+  .ant-select-selector {
+    .ant-select-selection-item {
+      background-color: var(--color-bg-body);
+      border-color: var(--color-border);
+
+      .ant-select-selection-item-remove {
+        color: var(--color-text);
+      }
+    }
+  }
+}
+
+.ant-select-arrow {
+  color: var(--color-text);
+}
+
+.ant-select-clear {
+  border-radius: 50%;
+}
+
+.ant-select-dropdown-menu {
+  background-color: var(--color-input-bg);
+
+  .ant-select-dropdown-menu-item {
+    color: var(--color-text);
+
+    &.ant-select-dropdown-menu-item-active {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &.ant-select-dropdown-menu-item-selected {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+
+    &:hover {
+      color: #fff;
+      // background-color: var(--radio-button-bg-checked);
+    }
+  }
+}
+
+.ant-select-selector {
+  background-color: var(--color-search-list-item-bg) !important;
+  box-shadow: none !important;
+  border-radius: 4px;
+  color: var(--color-search-list-item-value);
+  border-color: var(--color-search-list-item-bd) !important;
+}
+
+.ant-select-selection {
+  background-color: var(--color-input-bg);
+  box-shadow: none;
+  color: var(--color-text);
+  // border-color:var(--checkable-tag-border);
+}
+
+.ant-form-horizontal .ant-form-item-label {
+  label {
+    display: inline-block;
+    word-wrap: break-word;
+    white-space: normal;
+  }
+}
+
+.ant-picker {
+  width: 100%;
+  background-color: var(--color-search-list-item-bg);
+  border-color: var(--color-border);
+}
+
+
+.totalModal {
+  .ruleTitle {
+    font-size: 16px;
+    font-weight: 700;
+    color: #ffffff;
+  }
+  .ant-modal-content{
+    width: 796px;
+  }
+  .modal-form{
+    margin: 20px 0 0 0;
+    .yisa-search{
+      margin-bottom: 20px;
+      label{
+        color: #eeeff1;
+      }
+      .ant-input-textarea-show-count:after{
+          position: absolute;
+          bottom: 19%;
+          right: 7%;
+      }
+      textarea{
+        position: relative;
+      }
+    }
+  }
+  
+ 
+  .ant-modal-footer{
+    display: flex;
+    justify-content: center;
+    .ant-btn{
+      width: 88px;
+      height: 35px;
+      color: #fff;
+      border: none;
+      border-radius: 4px;
+    }
+    .ant-btn:last-child{
+      background: #409eff;
+    }
+  }
+}
+.detail-Modal{
+  .ruleTitle {
+    font-size: 16px;
+    font-weight: 700;
+    color: #ffffff;
+  }
+  .ltc-content {
+    display: flex;
+    flex-wrap: wrap;
+    margin: auto;
+    padding: 20px;
+    color: #ffffff;
+    .ltc-item {
+      font-size: 14px;
+      margin: 6px 12px 6px 0;
+      display: inline-flex;
+      flex: 1;
+      //width: 470px;
+      .new-item {
+        display: inline-block;
+        width: 120px;
+        height: 32px;
+        line-height: 32px;
+        background: rgba(150, 161, 192, 0.24);
+        text-align: center;
+      }
+
+      .new-value {
+        display: inline-block;
+        width: 320px;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        background: #3E4557;
+        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
+      }
+
+      .ltc-item-input {
+        display: inline-block;
+        width: 200px;
+      }
+
+      div {
+        width: 150px;
+      }
+    }
+      .rule-description{
+        .new-item{
+          line-height: 96px;
+          height: 96px;
+        }
+        .new-value{
+          width: 780px;
+          line-height: 96px;
+          height: 96px;
+          word-wrap:break-word
+        }
+      }
+    
+    
+  }
+  
+}

src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/loadable.jsx

@@ -0,0 +1,396 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  message,
+  Pagination,
+  Table,
+  Space,
+  Modal,
+  Button,
+  Tabs,
+  Descriptions,
+  Input,
+  Steps,
+  Select,
+  Image,
+  Timeline,
+  Popover,
+  Popconfirm
+} from "antd";
+import { dictionary } from "@/config/common";
+import ajax from "@/services";
+import { TableModule } from "@/components";
+import moment from 'moment'
+import "./index.scss";
+
+const { TextArea } = Input;
+function IllegalRuleConfigMgm() {
+  // 初始搜索条件
+const initFormData = {
+    operator_id: "0",
+    rule_name: "",
+  };
+const params ={
+  operator_id:'',
+  rule_name:'',
+  rule_code:'',
+  time:moment().format("YYYY-MM-DD HH:mm:ss"),
+  username:'',
+  status:1,
+  effective_place:''
+}
+// 新增or详细弹框
+const [modalData, setModalData] = useState(params)
+// 详情弹窗
+const [detailVisible, setDetailVisible] = useState(false);
+// 列表数据
+const [tableData, setTableData] = useState([]);
+// 数据总数
+const [total, setTotal] = useState(0);
+// 运营商
+const [operatorOption, setOperatorOption] = useState([])
+// 场站
+const [stationOption, setStationOption] = useState([])
+
+const tableRef = useRef(null)
+const columns = [
+  {
+    title: "运营商名称",
+    dataIndex: "operator_name",
+    key: "operator_name",
+    align: "center",
+  },
+  {
+    title: "规则名称",
+    dataIndex: "rule_name",
+    key: "rule_name",
+    align: "center",
+  },
+  {
+    title: "规则编码",
+    dataIndex: "rule_code",
+    key: "rule_code",
+    align: "center",
+  },
+  {
+    title: "生效场站",
+    dataIndex: "effective_place",
+    key: "effective_place",
+    align: "center",
+  },
+  {
+    title: "创建人",
+    dataIndex: "creator",
+    key: "creator",
+    width: 100,
+    align: "center",
+  },
+  {
+    title: "规则状态",
+    dataIndex: "status",
+    key: "status",
+    width: 100,
+    align: "center",
+    render:(_,record) => {
+      return(
+        <span style={
+          {
+            color:record ?.status ? "#2ADC41" : "#EC5761"}
+          }
+            >
+          {record?.status ? "正常" : "停用"}</span>
+      )
+    }
+  },
+  {
+    title: "创建时间",
+    dataIndex: "create_time",
+    key: "create_time",
+    align: "center",
+  },
+  {
+    title: "操作",
+    dataIndex: "operation",
+    key: "operation",
+    align: "center",
+    fixed: "right",
+    width: 100,
+    render: (text, record, index) => {
+      return (
+        <>
+          <div 
+            style={{cursor:"pointer", color:record ?.status ? "#EC5761" : "#2ADC41"}} 
+          >
+             <Popconfirm 
+                placement="left" 
+                title={record?.status ? "是否停用该规则" : "是否启动该规则"} 
+                onConfirm={() => { handleRuleStatus(record?.id,record?.status ? 0 : 1) }}
+                okText="是" 
+                cancelText="否">
+                  {record?.status ? "停用" : "启动"}
+              </Popconfirm>
+            
+          </div>
+        </>
+      )
+
+    },
+  },
+];
+
+const formSearch = [
+  {
+    name: "operator_id",
+    type: "Select",
+    label: "运营商名称",
+    defaultValue: "0",
+    placeholder: "请选择运营商名称",
+    options:operatorOption.length ? operatorOption : [{value:"0",label:'全部'}]
+  },
+  {
+    name: "rule_name",
+    type: "Input",
+    label: "规则名称",
+    placeholder: "请输入规则名称",
+  },
+  {
+    name: "timePeriod",
+    type: "RangePicker",
+    label: "时间段",
+    defaultValue: [moment().subtract(1,"months").startOf("day"), moment().endOf("day")]
+  },
+];
+  // 更新规则状态
+  const handleRuleStatus = (id,status) => {
+    ajax.updataRule({id,status}).then((res) => {
+      if (res.status == 20000) {
+        message.success(res.message)
+        tableRef.current.fetch()
+      }else{
+        message.success(res.message)
+      }
+    }).catch(e => {
+      console.log(e);
+    });
+  } 
+
+  // 获取运营商名字
+  const getAllOperator =() => {
+    ajax.getOperatorList().then((res) => {
+      if (res.status === 20000) {
+        setOperatorOption(res.data);
+      }else{
+        setOperatorOption([])
+      }
+    }).catch(e => {
+      console.log(e);
+    });
+  } 
+
+// 获取场站
+const getAllStation =() => {
+  ajax.getStation().then((res) => {
+    if (res.status === 20000) {
+      setStationOption(res.data);
+    }else{
+      setStationOption([])
+    }
+  }).catch(e => {
+    console.log(e);
+  });
+}
+// 检索
+const search = (params) => {
+  let data = {
+    ...params,
+    type:3
+  }
+  ajax.getRegularList(data).then((res) => {
+    if (res.status === 20000) {
+      setTableData(res.data.list);
+      setTotal(res.data.total);
+      setModalData({
+        ...modalData,
+        username:res.data.username,
+      })
+    } else {
+      message.error(res.message)
+    }
+  });
+}
+
+const handelAdd = () => {
+  setModalData({
+    ...params,
+    username:modalData?.username
+  })
+  setDetailVisible(true)
+}
+
+// 处理弹框ok按钮
+const handleConfirm = () => {
+  setDetailVisible(true)
+  if(!modalData?.operator_id){
+    message.warning("运营商名称不能为空")
+    return 
+  }else if(!modalData?.rule_name){
+    message.warning("规则名称不能为空")
+    return
+  }else if(!modalData?.rule_code){
+    message.warning("规则编码不能为空")
+    return
+  }else if(!modalData?.effective_place){
+    message.warning("生效场站不能为空")
+    return
+  }else if(!modalData?.status){
+    message.warning("规则状态不能为空")
+    return
+  }
+  // 发保存请求
+  ajax.addRule({...modalData,type:3}).then(res => {
+    if (res.status === 20000) {
+      message.success(res.message)
+      tableRef.current.fetch()
+      setModalData({
+        ...params,
+        username:modalData?.username
+      })
+      setDetailVisible(false)
+    }
+  }).catch(err => {
+    console.log(err);
+  })
+}
+useEffect(() => {
+  getAllStation()
+  getAllOperator()
+},[])
+return (
+  <>
+    <TableModule
+      showSerial={true}
+      isExport={false}
+      diyButton={
+        <Button
+          type="primary"
+          onClick={handelAdd}
+        >
+          新增
+        </Button>
+      }
+      columns={columns}
+      ref={tableRef}
+      tableData={tableData}
+      formSearch={formSearch}
+      pagename="停车记录查询"
+      initFormData={initFormData}
+      total={total}
+      search={search}
+      exportUrl="/api/bpm/record/get_record_export"
+    />
+    <Modal
+      open={detailVisible}
+      width={650}
+      className="totalModal"
+      onCancel={() => {
+        setModalData({...params,username:modalData?.username})
+        setDetailVisible(false);
+      }}
+      onOk={() => {
+        handleConfirm()
+      }}
+      okText="保存"
+      destroyOnClose
+    >
+      <div className="ruleTitle">
+        <span className="font">新增规则</span>
+      </div>
+      <div className="modal-form">
+        <div className="yisa-search">
+            <em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em>
+            <label>运营商名称</label>
+            <Select
+                value={modalData.operator_id}
+                style={{ width: 660, marginLeft: 10 }}
+                options={operatorOption}
+                onChange={(v) => {setModalData({...modalData,operator_id:v})}}
+            />
+        </div>
+        <div className="yisa-search" style={{marginLeft:13}}>
+            <em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em>
+            <label>规则名称</label>
+            <Input
+                placeholder="请输入名称"
+                value={modalData.rule_name}
+                style={{ width: 660, marginLeft: 10 }}
+                maxLength={30}
+                onChange={(v) => {setModalData({...modalData,rule_name:v.target.value})}}
+            />
+        </div>
+        <div className="yisa-search" style={{marginLeft:13}}>
+            <em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em>
+            <label>规则编码</label>
+            <Input
+                placeholder="请输入编码"
+                value={modalData.rule_code}
+                style={{ width: 660, marginLeft: 10 }}
+                maxLength={30}
+                onChange={(v) => {setModalData({...modalData,rule_code:v.target.value})}}
+            />
+        </div>  <div className="yisa-search" style={{marginLeft:13}}>
+            <em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em>
+            <label>生效场站</label>
+            <Select
+                value={modalData.effective_place}
+                style={{ width: 660, marginLeft: 10 }}
+                options={stationOption}
+                onChange={(v) => {setModalData({...modalData,effective_place:v})}}
+            />
+        </div>
+        <div className="yisa-search" style={{marginLeft:26}}>
+            <label>创建人</label>
+            <Input
+                placeholder="请输入创建人"
+                value={modalData.username}
+                style={{ width: 660, marginLeft: 10 }}
+                maxLength={30}
+                disabled
+                // onChange={(v) => {setModalData({...modalData,creator:v.target.value})}}
+            />
+        </div>
+        <div className="yisa-search" style={{marginLeft:12}}>
+            <label>创建时间</label>
+            <Input
+                placeholder="请输入创建时间"
+                value={modalData.time}
+                style={{ width: 660, marginLeft: 10 }}
+                maxLength={30}
+                disabled
+                // onChange={(v) => {setModalData({...modalData,creat_time:v.target.value})}}
+            />
+        </div>
+        <div className="yisa-search" style={{marginLeft:12}}>
+            <em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em>
+            <label>规则状态</label>
+            <Select
+                value={modalData.status}
+                style={{ width: 660, marginLeft: 10 }}
+                options={[
+                  {
+                    value:1,
+                    label:'正常'
+                  },
+                  {
+                    value:0,
+                    label:'停用'
+                  }
+              ]}
+                onChange={(v) => {setModalData({...modalData,status:v})}}
+            />
+        </div>
+      </div>
+    </Modal>
+  </>
+);
+}
+
+export default IllegalRuleConfigMgm;

src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/loadable.jsx

@@ -145,13 +145,13 @@ const formSearch = [
     name: "rule_name",
     type: "Input",
     label: "规则名称",
-    placeholder: "请输入出场收费员",
+    placeholder: "请输入规则名称",
   },
   {
     name: "timePeriod",
     type: "RangePicker",
     label: "时间段",
-    defaultValue: [moment().subtract(1,"months"), moment()]
+    defaultValue: [moment().subtract(1,"months").startOf("day"), moment().endOf("day")]
   },
 ];
   // 更新规则状态
@@ -216,6 +216,7 @@ const handelAdd = () => {
 
 // 处理弹框ok按钮
 const handleConfirm = () => {
+  setDetailVisible(true)
   if(!modalData?.operator_id){
     message.warning("运营商名称不能为空")
     return
@@ -225,6 +226,9 @@ const handleConfirm = () => {
   }else if(!modalData?.rule_code){
     message.warning("规则编码不能为空")
     return
+  }else if(!modalData?.status){
+    message.warning("规则状态不能为空")
+    return
   }
   // 发保存请求
   ajax.addRule({...modalData,type:2}).then(res => {
@@ -277,7 +281,6 @@ return (
       }}
       onOk={() => {
         handleConfirm()
-        setDetailVisible(false);
       }}
       okText="保存"
       destroyOnClose
@@ -319,7 +322,6 @@ return (
             />
         </div>
         <div className="yisa-search" style={{marginLeft:26}}>
-            <em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em>
             <label>创建人</label>
             <Input
                 placeholder="请输入创建人"
@@ -331,7 +333,6 @@ return (
             />
         </div>
         <div className="yisa-search" style={{marginLeft:12}}>
-            <em style={{marginRight:'5px',marginLeft:'-13px',color:'red'}}>*</em>
             <label>创建时间</label>
             <Input
                 placeholder="请输入创建时间"
@@ -358,7 +359,7 @@ return (
                     label:'停用'
                   }
               ]}
-                // onChange={(v) => {setModalData({...modalData,creat_time:v.target.value})}}
+                onChange={(v) => {setModalData({...modalData,status:v})}}
             />
         </div>
         <div className="yisa-search" style={{display:"flex",marginLeft:13}}>
@@ -421,7 +422,7 @@ return (
           <div className="ltc-item">
             <div className="new-item">规则状态</div>
             <div className="new-value">
-              {detailsData?.status || "--"}
+              {detailsData?.status ? "正常" : "停用"}
             </div>
           </div>
           <div className="ltc-item rule-description" >

src/pages/NewEnergy/ChargingMgm/index.jsx

@@ -1,8 +1,9 @@
 import BillingRule from './BillingRule'
 import OrderRuleMgm from './OrderRuleMgm'
-
+import IllegalRuleConfigMgm from "./IllegalRuleConfigMgm"
 
 export default {
   BillingRule,
-  OrderRuleMgm
+  OrderRuleMgm,
+  IllegalRuleConfigMgm
 }

src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss

@@ -27,3 +27,11 @@
     }
   }
 }
+
+.custom-modal__charger-monitor{
+  .content{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx

@@ -1,52 +1,29 @@
 import React, { useState, useRef, useEffect } from "react";
-import {
-  message,
-  Pagination,
-  Table,
-  Space,
-  Modal,
-  Button,
-  Tabs,
-  Descriptions,
-  Input,
-  Steps,
-  Select,
-  Image,
-  Timeline,
-  Popover,
-} from "antd";
+import { message, Modal, Image } from "antd";
 import { dictionary, utils } from "@/config/common";
-// import moment from 'moment'
-// import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajax from "@/services";
-import errorImg from "@/assets/images/error-img-new.png";
-import { QuestionCircleOutlined } from "@ant-design/icons";
 import { TableModule } from "@/components";
 import "./index.scss";
-import {
-  payRecordColumns,
-  refundRecordColumns,
-  operatorRecordColumns,
-} from "./dataSource";
-// import errorImg from "@/assets/images/layout/error.png"
+import moment from "moment";
 
 function ChargerMonitor() {
   const [tableData, setTableData] = useState([]); // 列表数据
   const [total, setTotal] = useState(0); // 数据总数
 
   const initFormData = {
-    status: "", // 充电状态
-    plate: "", // 车牌号
+    station_name: "", // 充电桩
     phone: "", // 手机号
-    station_name: "", // 充电站
-    start_time: "", // 开始时间
-    end_time: "", // 结束时间
+    plate: "", // 车牌号
+    status: sysConfig?.energyChargingStatus[0]?.value ?? 0, // 充电状态
+    timePeriod: moment().format("YYYY-MM-DD HH:mm:ss"),
+    // start_time: "", // 开始时间
+    // end_time: "", // 结束时间
   }; // 初始数据
 
   const formSearch = [
     {
       label: "充电桩",
-      name: "charging_pile",
+      name: "station_name",
       type: "Input",
       placeholder: "请输入",
     },
@@ -64,17 +41,19 @@ function ChargerMonitor() {
     },
     {
       label: "充电状态",
-      name: "charging_status",
+      name: "status",
       type: "Select",
       placeholder: "请选择充电状态",
-      defaultValue: 0,
-      options: sysConfig.energyChargingStatus,
+      defaultValue: initFormData.status,
+      options: sysConfig.energyChargingStatus ?? [],
     },
     {
-      name: "time",
+      name: "timePeriod",
       type: "RangePicker",
       label: "充电开始时间",
+      // defaultTitle: ["充电开始时间", "充电结束时间"],
       defaultTitle: ["充电开始时间", " "],
+      defaultValue: [moment().subtract(1, "months"), moment()],
     },
   ]; // 检索栏
 
@@ -198,6 +177,9 @@ function ChargerMonitor() {
       })
       .catch((err) => {
         console.error(err);
+      })
+      .finally(() => {
+        utils.tableScrollTop("parent-table-scroll");
       });
   }
 
@@ -233,17 +215,17 @@ function ChargerMonitor() {
       />
       <Modal
         title={"查看详情"}
-        className={"custom-modal "}
-        width={1200}
+        className={"custom-modal__charger-monitor "}
+        width={1000}
         open={ImgRecordShow}
         footer={null}
         onCancel={() => {
           closeImgRecordModal();
         }}
       >
-        <div className="content">
+        <div className="content" style={{ minHeight: 500 }}>
           <Image
-            width={1000}
+            width={800}
             height={600}
             url={ImgRecordData?.pic_url}
             preview={false}

src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx

@@ -1,46 +1,26 @@
-import React, { useState, useRef, useEffect, useMemo } from "react";
-import {
-  message,
-  Pagination,
-  Table,
-  Space,
-  Modal,
-  Button,
-  Tabs,
-  Descriptions,
-  Input,
-  Steps,
-  Select,
-  Image,
-  Timeline,
-  Popover,
-} from "antd";
-
-import { dictionary, utils } from "@/config/common";
-import { ResultFlow, ExportBtnNew, QuickMenu } from "@/components";
+import React, { useState, useEffect, useMemo } from "react";
+import { message } from "antd";
+import { utils } from "@/config/common";
 import ajax from "@/services";
-import errorImg from "@/assets/images/error-img-new.png";
-import { QuestionCircleOutlined } from "@ant-design/icons";
 import { TableModule } from "@/components";
 import "./index.scss";
-import { functions } from "lodash";
-
 
 function PileMonitor() {
-  // const [pageData,setPageData] = useState({
-  //   pn:1,
-  //   page_size:15
-  // })
-  // const [loading,setLoading] = useState(false);
   const [tableData, setTableData] = useState([]); // 列表数据
   const [total, setTotal] = useState(0); // 数据总数
-  const [statsData, setStatsData] = useState({}); // 统计数据
+  const [statsData, setStatsData] = useState({
+    all_count: 0,
+    kx_count: 0,
+    zy_count: 0,
+    gz_count: 0,
+    lx_count: 0,
+  }); // 统计数据
 
   const initFormData = {
     station_name: "", // 充电桩
     muzzle_text: "", // 枪名称
-    pile_type: "", // 充电类型
-    charge_status: "", // 枪状态
+    pile_type: sysConfig?.energyChargingType[0]?.value ?? 0, // 充电类型
+    charge_status: sysConfig?.energyChargingGunStatus[0]?.value ?? 0, // 枪状态
   }; // 初始数据
 
   const formSearch = [
@@ -60,15 +40,15 @@ function PileMonitor() {
       label: "充电类型",
       name: "pile_type",
       type: "Select",
-      defaultValue: 0,
-      options: sysConfig.energyChargingType,
+      defaultValue: initFormData.pile_type,
+      options: sysConfig.energyChargingType ?? [],
     },
     {
       label: "枪状态",
       name: "charge_status",
       type: "Select",
-      defaultValue: 0,
-      options: sysConfig.energyChargingGunStatus,
+      defaultValue: initFormData.charge_status,
+      options: sysConfig.energyChargingGunStatus ?? [],
     },
   ]; // 搜索栏配置
 
@@ -148,7 +128,6 @@ function PileMonitor() {
   //获取函数
   function search(params) {
     utils.tableScrollTop("parent-table-scroll");
-    // setLoading(true);
     ajax
       .getPileMonitorList(params)
       .then((res) => {
@@ -163,7 +142,6 @@ function PileMonitor() {
         console.error(err);
       })
       .finally(() => {
-        // setLoading(false);
       });
   }
 
@@ -196,12 +174,11 @@ function PileMonitor() {
       return (
         <div className="item">
           <div className="item-left">
-            {/* <img src="" alt="" /> */}
             <div className={`img img-${type}`}></div>
           </div>
           <div className="item-right">
             <span className="num">{num ?? 0}</span>
-            <span className="label">{label }</span>
+            <span className="label">{label}</span>
           </div>
         </div>
       );
@@ -220,105 +197,19 @@ function PileMonitor() {
   return (
     <>
       <TableModule
+        className={"real-time-monitor_pile-monitor"}
         showSerial={true}
+        isExport={false}
         columns={columns}
+        pageName={"pileMonitor"}
+        pagename="电桩监控"
         tableData={tableData}
         formSearch={formSearch}
-        className={"real-time-monitor_pile-monitor"}
-        pagename="电桩监控"
-        pageName={"pileMonitor"}
         initFormData={initFormData}
         total={total}
         search={search}
-        rightHeaderCompSlot={renderRightListHeader}
-        isExport={false}
+        rightHeaderCompSlot={renderRightListHeader} // 插入
       />
-      {/* <div className="pile-monitor" >
-        <div className="left-search">
-        <div className="title">{"查询条件"}</div>
-        <div className="searchWrap">
-          {renderSearch()}
-          <div className="bottomBox">
-            <Button className="reset" onClick={reset}>
-              重置
-            </Button>
-            <Button type="primary" className="submit"
-              onClick={() => { 
-                if(pageData.pn == 1){
-                  fetch(1) 
-                }else{
-                  setPageData({ ...pageData, pn: 1 }) 
-                  fetch({ ...pageData, pn: 1 })
-                }
-              }}>
-              查询
-            </Button>
-            {renderAdd()}
-          </div>
-        </div>
-        </div>
-        <div className="right-list">
-        <div className="total-row-wrapper">
-          <span className="number-wrapper">
-            <span className="letter">共查询到</span>
-            <span className="total-number"> {total}</span>
-            <span className="letter">条结果</span>
-          </span>
-          <div className="right-button-group">
-       
-            {true && (
-         
-              total ? (
-                <ExportBtnNew
-                  children={<Button className="export-btn" size='medium' type="primary">导出</Button>}
-                  modalType="noImg"
-                  ref={exportRef}
-                  totalRecords={total}
-                  exportUrl={exportUrl}
-                  imgno={false}
-                  postdata={{
-                    formData: pageData
-                  }}
-                  isTableModule={true}
-                  onOk={handleExport}
-                />
-              ) : <></>
-            )}
-          </div>
-        </div>
-        <ResultFlow
-          hasLoad={true}
-          loading={loading}
-          resultData={tableData}
-          message={"暂无数据"}
-        >
-          <div className="table-wrap parent-table-scroll">
-            <Table
-              rowSelection={rowSelection}
-              rowKey={rowKey}
-              columns={getNewColumns()}
-              dataSource={tableData}
-              pagination={false}
-              locale={locale}
-            />
-          </div>
-          <div>
-            <Pagination
-              className="pagination-common"
-              showSizeChanger={true}
-              showQuickJumper={true}
-              // showTotal={() => `共 ${total_records} 条`}
-              total={total}
-              current={pageData.pn}
-              pageSize={pageData.page_size}
-              pageSizeOptions={dictionary?.pageSizeOptions}
-              onChange={onChange}
-              // onShowSizeChange={onShowSizeChange}
-            />
-          </div>
-        </ResultFlow>
-        </div>
-      </div> */}
     </>
   );
 }

src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx

@@ -1,39 +1,24 @@
 import React, { useState, useRef, useEffect } from "react";
-import {
-  message,
-  Pagination,
-  Table,
-  Space,
-  Modal,
-  Button,
-  Tabs,
-  Descriptions,
-  Input,
-  Steps,
-  Select,
-  Image,
-  Timeline,
-  Popover
-} from "antd";
-import { dictionary } from "@/config/common";
+import { message as Message } from "antd";
+import { dictionary, utils } from "@/config/common";
 import ajax from "@/services";
 import { TableModule } from "@/components";
 import "./index.scss";
 import moment from "moment";
-const { TextArea } = Input;
 
 // 开锁记录
 function Unlocking() {
-
   const [tableData, setTableData] = useState([]); // 列表数据
   const [total, setTotal] = useState(0); // 数据总数
 
   // 初始搜索条件
   const initFormData = {
-    tel: "",
-    charging_station: "",
-    ground_lock_name: "",
-    unlocking_timerange:[moment().subtract(1,"weeks"),moment()]
+    tel: "", // 手机号
+    charging_station: "", // 充电站
+    ground_lock_name: "", // 地锁名称
+    start_time: "", // 开始时间
+    end_time: "", // 结束时间
+    unlocking_timerange: [moment().subtract(1, "months"), moment()], // 解锁时间范围 最后返回 start_time, end_time 查看search 函数
   };
 
   const formSearch = [
@@ -58,7 +43,8 @@ function Unlocking() {
     {
       name: "unlocking_timerange",
       type: "DateRangePicker",
-      label: "降锁时间",
+      label: "降锁时间范围",
+      defaultValue: initFormData.unlocking_timerange,
     },
   ]; // 搜索栏
 
@@ -114,45 +100,42 @@ function Unlocking() {
 
   // 检索
   const search = (params) => {
-    let temp_obj = {...params}
-    if(temp_obj.unlocking_timerange?.length){
-      temp_obj.unlocking_timerange = temp_obj.unlocking_timerange[0].format('YYYY-MM-DD') + ',' + temp_obj.unlocking_timerange[1].format('YYYY-MM-DD')
-    }else{
-      temp_obj.unlocking_timerange = ''
+    let temp_obj = { ...params };
+    if (temp_obj.unlocking_timerange?.length) {
+      temp_obj.start_time =
+        temp_obj.unlocking_timerange[0].format("YYYY-MM-DD");
+      temp_obj.end_time = temp_obj.unlocking_timerange[1].format("YYYY-MM-DD");
+    } else {
+      temp_obj.start_time = "";
+      temp_obj.end_time = "";
     }
-    ajax.recordsInquiry.getUnlockingList(params).then((res) => {
+    temp_obj.unlocking_timerange = undefined;
+    ajax.recordsInquiry.getUnlockingList(temp_obj).then((res) => {
       if (res.status === 20000) {
         setTableData(res.data.list);
         setTotal(res.data.total);
       } else {
-        message.error(res.message)
+        Message.error(res?.message);
       }
-    });
-  }
-
+    }).finally(()=>{
+      utils.tableScrollTop("parent-table-scroll");
+    })
+  };
 
   return (
     <>
       <TableModule
-        showSerial={true}
-        isExport={false}
-        diyButton={
-          <Button
-            type="primary"
-            onClick={()=>{}}
-          >
-            新增
-          </Button>
-        }
-        columns={columns}
-        tableData={tableData}
-        formSearch={formSearch}
-        pagename="开锁记录"
-        pageName={'unlockingRecord'}
-        initFormData={initFormData}
-        total={total}
-        search={search}
-        exportUrl="/api/new_power/records/unlocking"
+        showSerial={true} // 显示序号
+        isExport={false} // 显示导出按钮
+        pagename="开锁记录" // 页面名称 
+        pageName={"unlockingRecord"} // 页面名称 用户 useSessionStorage 存储记录表单数据
+        exportUrl="/api/new_power/records/unlocking" // 导出url
+        formSearch={formSearch} // 左侧搜索栏
+        columns={columns} // 表头
+        initFormData={initFormData} // 初始表单数据
+        search={search} // 请求函数
+        total={total} // 数据总数
+        tableData={tableData} // 表格数据
       />
       {/* <Modal
         open={detailVisible}

src/router/router.config.js

@@ -1344,6 +1344,12 @@ let routes = [
         component: pages.BillingRule,
       },
       {
+        path: "/newEnergy/illegalRuleConfigMgm",
+        text: "违法规则配置管理",
+        name: "illegalRuleConfigMgm",
+        component: pages.IllegalRuleConfigMgm,
+      },
+      {
         path: "/newEnergy/orderRuleMgm",
         text: "预约规则管理",
         name: "orderRuleMgm",

src/services/NewEnergy/chargingMgm.js

@@ -44,10 +44,20 @@ const updataRule = (params) => {
     data: params,
   });
 };
+
+// 更新规则状态
+const getStation = (params) => {
+  return ajax({
+    url: "/api/nes/rule/station",
+    type: "get",
+    data: params,
+  });
+};
 export default{
   getWechatMenuList,
   getOperatorList,
   getRegularList,
   addRule,
-  updataRule
+  updataRule,
+  getStation
 }