feat():新增物理桩管理和地锁管理页面

1 year ago · d34c0c868f
11 changed files with 797 additions and 1 deletions
--- a/src/pages/NewEnergy/ChargeDeviceMgm/GroundLockManagement/index.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/GroundLockManagement/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 />} />
--- a/src/pages/NewEnergy/ChargeDeviceMgm/GroundLockManagement/index.scss
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/GroundLockManagement/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;
+    }
+}
--- a/src/pages/NewEnergy/ChargeDeviceMgm/GroundLockManagement/loadable.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/GroundLockManagement/loadable.jsx
@ -0,0 +1,316 @@
+import React, { useState, useRef, useEffect } from "react";
+import { message, Pagination, Table, Space, Modal, Button ,Popover,Input,TimePicker,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 { 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 GroundLockManagement() {
+  const selectData= [
+    {
+      label: "全部",
+      value: "0",
+    },
+    {
+      label: "公休日",//1公休日、2工作日、3节假日
+      value: "1",
+    },
+    {
+      label: "工作日",
+      value: "2",
+    },
+    {
+      label: "节假日",
+      value: "3",
+    },
+   
+  ]
+  const listData={
+    name: "",
+    code:"",
+    start_time: '00:00:00',
+    model: '',
+    muzzle_num: "",
+  }
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      align:"center",
+      render: (_, record, index) => {
+        return index + 1;
+      },
+    },
+    {
+      title: "设备名称",
+      dataIndex: "name",
+      align: "center",
+    },
+    {
+      title: "硬件编码",
+      dataIndex: "code",
+      key: "code",
+      align: "center",
+    },
+    {
+      title: "所在充电站",
+      dataIndex: "start_time",
+      align: "center",
+    },
+    {
+      title: "设备型号",
+      dataIndex: "model",
+      key: "model",
+      align: "center",
+    },
+    {
+      title: "枪口数量",
+      dataIndex: "muzzle_num",
+      key: "muzzle_num",
+      align: "center",
+    },
+  ];
+  const formSearch = [
+    {
+      type: "Input",
+      label: "设备名称",
+      placeholder: "请输入名称",
+      autoComplete:"off", 
+      name: "name",
+    },
+    {
+      type: "Select",
+      label: "充电站名称",
+      name: "date_type",
+      placeholder:"请选择日期类型",
+      options:selectData
+    },
+  ];
+  const tableRef = useRef(null);
+  //搜索参数初始化
+  const initFormData = {
+    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(10);
+  //储存编辑的id
+  const [editId,setEditId] = useState("");
+  function search(params) {
+    ajax.getList(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
+        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 }) }}
+          />
+          <FormInput
+            isRequired={true}
+            yisaLabel="硬件编码"
+            placeholder="请输入硬件编码"
+            value={rowData.code}
+            showClose={true}
+
+            onChange={e => { setRowData({ ...rowData, code: e.target.value }) }}
+          />
+          <FormInput
+            isRequired={true}
+            yisaLabel="设备型号"
+            placeholder="请输入设备型号"
+            value={rowData.model}
+            showClose={true}
+
+            onChange={e => { setRowData({ ...rowData, model: e.target.value }) }}
+          />
+          <div className="yisa-search">
+            <div className="modal-start-time">
+              <div className="redLogo">*</div>
+              <label>枪口数量</label>
+            </div>
+            <Input 
+              type='number'
+              value={rowData.muzzle_num} 
+              placeholder="请输入枪口数量"
+            ></Input>
+            {/* <InputNumber  
+            min={0} 
+            max={1440} 
+            // value={item.long} 
+            style={{width: '100px'}} 
+            onChange={(e)=>{
+              // handleInputChange('long', e, idx)
+              console.log(e)
+            }
+              }>
+          </InputNumber> */}
+          </div>
+
+          <FormSelect
+            yisaLabel="日期类型"
+            yisaData={selectData}
+            defaultValue={rowData.date_type || null}
+            placeholder="请选择日期类型"
+            hasUnlimited={false}
+            required={true}
+            showClose={false}
+            onChange={e => { setRowData({ ...rowData,date_type: e }) }}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default GroundLockManagement;
--- a/src/pages/NewEnergy/ChargeDeviceMgm/PhysicalPileManagement/index.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/PhysicalPileManagement/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 />} />
--- a/src/pages/NewEnergy/ChargeDeviceMgm/PhysicalPileManagement/index.scss
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/PhysicalPileManagement/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;
+    }
+}
--- a/src/pages/NewEnergy/ChargeDeviceMgm/PhysicalPileManagement/loadable.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/PhysicalPileManagement/loadable.jsx
@ -0,0 +1,316 @@
+import React, { useState, useRef, useEffect } from "react";
+import { message, Pagination, Table, Space, Modal, Button ,Popover,Input,TimePicker,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 { 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 PhysicalPileManagement() {
+  const selectData= [
+    {
+      label: "全部",
+      value: "0",
+    },
+    {
+      label: "公休日",//1公休日、2工作日、3节假日
+      value: "1",
+    },
+    {
+      label: "工作日",
+      value: "2",
+    },
+    {
+      label: "节假日",
+      value: "3",
+    },
+   
+  ]
+  const listData={
+    name: "",
+    code:"",
+    start_time: '00:00:00',
+    model: '',
+    muzzle_num: "",
+  }
+  const columns = [
+    {
+      title: "序号",
+      dataIndex: "index",
+      key: "index",
+      align:"center",
+      render: (_, record, index) => {
+        return index + 1;
+      },
+    },
+    {
+      title: "设备名称",
+      dataIndex: "name",
+      align: "center",
+    },
+    {
+      title: "硬件编码",
+      dataIndex: "code",
+      key: "code",
+      align: "center",
+    },
+    {
+      title: "所在充电站",
+      dataIndex: "start_time",
+      align: "center",
+    },
+    {
+      title: "设备型号",
+      dataIndex: "model",
+      key: "model",
+      align: "center",
+    },
+    {
+      title: "枪口数量",
+      dataIndex: "muzzle_num",
+      key: "muzzle_num",
+      align: "center",
+    },
+  ];
+  const formSearch = [
+    {
+      type: "Input",
+      label: "设备名称",
+      placeholder: "请输入名称",
+      autoComplete:"off", 
+      name: "name",
+    },
+    {
+      type: "Select",
+      label: "充电站名称",
+      name: "date_type",
+      placeholder:"请选择日期类型",
+      options:selectData
+    },
+  ];
+  const tableRef = useRef(null);
+  //搜索参数初始化
+  const initFormData = {
+    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(10);
+  //储存编辑的id
+  const [editId,setEditId] = useState("");
+  function search(params) {
+    ajax.getList(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
+        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 }) }}
+          />
+          <FormInput
+            isRequired={true}
+            yisaLabel="硬件编码"
+            placeholder="请输入硬件编码"
+            value={rowData.code}
+            showClose={true}
+
+            onChange={e => { setRowData({ ...rowData, code: e.target.value }) }}
+          />
+          <FormInput
+            isRequired={true}
+            yisaLabel="设备型号"
+            placeholder="请输入设备型号"
+            value={rowData.model}
+            showClose={true}
+
+            onChange={e => { setRowData({ ...rowData, model: e.target.value }) }}
+          />
+          <div className="yisa-search">
+            <div className="modal-start-time">
+              <div className="redLogo">*</div>
+              <label>枪口数量</label>
+            </div>
+            <Input 
+              type='number'
+              value={rowData.muzzle_num} 
+              placeholder="请输入枪口数量"
+            ></Input>
+            {/* <InputNumber  
+            min={0} 
+            max={1440} 
+            // value={item.long} 
+            style={{width: '100px'}} 
+            onChange={(e)=>{
+              // handleInputChange('long', e, idx)
+              console.log(e)
+            }
+              }>
+          </InputNumber> */}
+          </div>
+
+          <FormSelect
+            yisaLabel="日期类型"
+            yisaData={selectData}
+            defaultValue={rowData.date_type || null}
+            placeholder="请选择日期类型"
+            hasUnlimited={false}
+            required={true}
+            showClose={false}
+            onChange={e => { setRowData({ ...rowData,date_type: e }) }}
+          />
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default PhysicalPileManagement;
--- a/src/pages/NewEnergy/ChargeDeviceMgm/index.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/index.jsx
@ -0,0 +1,6 @@
+import PhysicalPileManagement from './PhysicalPileManagement'
+import GroundLockManagement from './GroundLockManagement'
+export default {
+    PhysicalPileManagement,
+    GroundLockManagement
+  }
--- a/src/pages/NewEnergy/index.jsx
+++ b/src/pages/NewEnergy/index.jsx
@ -3,6 +3,7 @@ import NewEnergyOverview from './NewEnergyOverview'
 import ChargeStationMgm from './ChargeStationMgm'
 import RecordsInquiry from './RecordsInquiry'
 import RealtimeMonitor from './RealtimeMonitor'
+import ChargeDeviceMgm from './ChargeDeviceMgm'

 export default {
  NewEnergyOverview,
@ -10,4 +11,5 @@ export default {
  ...RealtimeMonitor,
  ...ChargingMgm,
  ...RecordsInquiry,
+  ...ChargeDeviceMgm,
 }
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@ -1389,6 +1389,18 @@ let routes = [
        text: "电桩监控",
        name: "pileMonitor",
        component: pages.PileMonitor,
+      },
+      {
+        path: "/newEnergy/physicalPileManagement",
+        text: "物理桩管理",
+        name: "physicalPileManagement",
+        component: pages.PhysicalPileManagement,
+      },
+      {
+        path: "/newEnergy/groundLockManagement",
+        text: "地锁管理",
+        name: "groundLockManagement",
+        component: pages.GroundLockManagement,
      }
    ],
  },
--- a/src/services/NewEnergy/ChargeDeviceMgm.js
+++ b/src/services/NewEnergy/ChargeDeviceMgm.js
@ -0,0 +1,14 @@
+import ajax from "@/config/ajax"
+
+//获取物理桩管理-列表
+const getList = (params) => {
+  return ajax({
+    url: "/api/nes/device/list",
+    type: "post",
+    data: params,
+  });
+};
+
+export default{
+    getList,
+}
--- a/src/services/NewEnergy/index.js
+++ b/src/services/NewEnergy/index.js
@ -1,9 +1,11 @@
 import chargingMgm from './chargingMgm'
 import chargeStationMgm from './ChargeStationMgm'
 import realtimeMonitor from './realtimeMonitor'
+import ChargeDeviceMgm from './ChargeDeviceMgm'

 export default {
  ...chargingMgm,
  ...chargeStationMgm,
-  ...realtimeMonitor
+  ...realtimeMonitor,
+  ...ChargeDeviceMgm
 }