feat():增加新能源新页面

1 year ago · f0f83c3fe6
13 changed files with 524 additions and 2 deletions
--- a/demin.json
+++ b/demin.json
--- a/src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx
+++ b/src/pages/InRoadMgm/RecordInquiry/DisabledCarParkRecordTotal/loadable.jsx
@ -606,6 +606,7 @@ function DisabledCarParkRecordTotal() {
    })
  }
  const [getPartId, setGetPartId] = useState({})
+  const [getPartData, setGetPartData] = useState({})
  function conversion(record) {
    setGetPartId(record.park_id)
    ajax({
@ -624,6 +625,7 @@ function DisabledCarParkRecordTotal() {
      let { status, data, total_records, total } = res
      if (status == 20000) {
        setLtcVisible(true)
+        setGetPartData(data)
        setLtcData({
          plate: record.plate,
          change_monet: data.change_monet,
@ -639,7 +641,7 @@ function DisabledCarParkRecordTotal() {

  function handleSearch(e){
    let data = {
-      ...ltcData,
+      ...getPartData,
      park_id: getPartId
    }
    ajax({ 
--- a/src/pages/NewEnergy/ChargeDeviceMgm/ElectricModal/index.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/ElectricModal/index.jsx
@ -0,0 +1,6 @@
+import React from "react"
+import loadable from "@loadable/component"
+import { LoadingImg } from "@/components"
+
+const ElectricModal = loadable(() => import("./loadable"))
+export default (pros) => <ElectricModal {...pros} fallback={<LoadingImg />} />
--- a/src/pages/NewEnergy/ChargeDeviceMgm/ElectricModal/index.scss
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/ElectricModal/index.scss
@ -0,0 +1,231 @@
+@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{
+  .ant-modal-footer{
+    display: none;
+  }
+  position: absolute;
+  top: 40px;
+  right: 174px;
+}
+.ltc-item-img {
+  width: 390px;
+  height: 300px;
+  border: 1px solid;
+  background: #6565656b;
+  margin-right: 20px !important;
+  img  {
+    height: 295px;
+    width: 387px;
+    // object-fit: contain;
+  }
+}
+.hanleHistoyModal{
+  max-height: 700px;
+  overflow: auto;
+}
+.hanleHistoyModal::-webkit-scrollbar {
+  width: 5px;
+}
+.hanleHistoyModal::-webkit-scrollbar-thumb {
+  background-color: #9da2ab;
+  border-radius: 10px;
+}
+.modal-img{
+  img{
+    width: 200px;
+    height: 200px;
+  }
+}
+.electric-station-modal {
+    .add-station-body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .row {
+        width: 100%;
+        margin: 10px 0;
+      }
+      .cc-form-tree {
+        margin-bottom: 0;
+      }
+      .cc-form-content,.form-select-single-content {
+        flex: auto;
+      }
+      .cc-form-name,.form-select-single-name {
+        width: 100px;
+      }
+    }
+  }
--- a/src/pages/NewEnergy/ChargeDeviceMgm/ElectricModal/loadable.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/ElectricModal/loadable.jsx
@ -0,0 +1,221 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+    message,
+    Pagination,
+    Table,
+    Space,
+    Modal,
+    Button,
+    Tabs,
+    Descriptions,
+    Input,
+    Steps,
+    Select,
+    Image,
+    Timeline,
+    Popover
+} from "antd";
+import { dictionary } from "@/config/common";
+import ajax from "@/services";
+import { useSetState } from "ahooks"
+import { TableModule, FormInput, FormSelect, FormTreeSelectNew } from "@/components";
+import "./index.scss";
+
+const { TextArea } = Input;
+
+function BillingRule() {
+    // 详情弹窗
+    const [detailVisible, setDetailVisible] = useState(false);
+    // 列表数据
+    const [tableData, setTableData] = useState([]);
+    // 数据总数
+    const [total, setTotal] = useState(0);
+    // 详情数据
+    const [detailData, setDetailData] = useState({});
+    const initAdd = {
+        name: "",
+        code: "",
+        address: "",
+        site_type: "",
+        area: "",
+        operator: ""
+    }
+    const [addFormData, setAddFormData] = useSetState(initAdd);
+    // 初始搜索条件
+    const initFormData = {
+        operator: "0",
+        rule_name: "",
+    };
+
+    const columns = [
+        {
+            title: "序号",
+            dataIndex: "index",
+            key: "index",
+            align: "center",
+            render: (text, record, index) => index + 1,
+            width: 100,
+        },
+        {
+            title: "设备生产商",
+            dataIndex: "producer_name",
+            key: "producer_name",
+            align: "center",
+        },
+        {
+            title: "设备型号",
+            dataIndex: "model",
+            key: "model",
+            align: "center",
+        },
+        {
+            title: "设备类型",
+            dataIndex: "type",
+            key: "type",
+            align: "center",
+        },
+        {
+            title: "总桩功率（KW）",
+            dataIndex: "power",
+            key: "power",
+            width: 100,
+            align: "center",
+        },
+        {
+            title: "枪口数量",
+            dataIndex: "muzzle_num",
+            key: "muzzle_num",
+            align: "center",
+        },
+        {
+            title: "枪口类型",
+            dataIndex: "muzzle_type",
+            key: "muzzle_type",
+            align: "center",
+        },
+    ];
+
+    const formSearch = [
+        {
+            name: "operator",
+            type: "Select",
+            label: "商户名称",
+            defaultValue: "0",
+            placeholder: "请选择商户名称",
+        },
+        {
+            name: "rule_name",
+            type: "Input",
+            label: "规则名称",
+            placeholder: "请输入出场收费员",
+        },
+        {
+            name: "timePeriod",
+            type: "RangePicker",
+            label: "时间段",
+        },
+    ];
+
+    // 打开弹窗
+    const openModal = (index, record) => {
+        setDetailData(record)
+        setDetailVisible(true);
+    }
+
+    // 检索
+    const search = (params) => {
+        ajax.getElecList(params).then((res) => {
+            if (res.status === 20000) {
+                setTableData(res.data.list);
+                setTotal(res.data.total);
+            } else {
+                message.error(res.message)
+            }
+        });
+    }
+
+    const handelAdd = () => {
+        setDetailVisible(true)
+        setAddFormData(initAdd)
+    }
+    const handelOk = () => {
+        ajax.addStation(addFormData).then((res) => {
+            if (res.status === 20000) {
+                message.success("新增成功")
+                setDetailVisible(false);
+                setAddFormData(initAdd)
+                search(formData)
+            } else {
+                message.error(res.message)
+            }
+        });
+    }
+    return (
+        <>
+            <TableModule
+                showSerial={true}
+                isExport={false}
+                diyButton={
+                    <Button
+                        type="primary"
+                        onClick={handelAdd}
+                    >
+                        新增
+                    </Button>
+                }
+                columns={columns}
+                tableData={tableData}
+                formSearch={formSearch}
+                pagename="电桩型号"
+                pageName={'billingRule'}
+                initFormData={initFormData}
+                total={total}
+                search={search}
+                exportUrl="/api/bpm/record/get_record_export"
+            />
+            <Modal
+                title="添加充电站"
+                open={detailVisible}
+                width={500}
+                className="electric-station-modal"
+                onCancel={() => {
+                    setDetailVisible(false);
+                }}
+                onOk={handelOk}
+                destroyOnClose
+            >
+                <div className="add-station-body">
+                    <div className="row">
+                        <FormInput
+                            yisaLabel="充电站名称"
+                            placeholder="请输入充电站名称"
+                            isShowAfterIcon={false}
+                            value={addFormData.name}
+                            onChange={e => { setAddFormData({ name: e.target.value }) }}
+                        />
+                    </div>
+                    <div className="row">
+                        <FormInput
+                            yisaLabel="充电站编码"
+                            placeholder="请输入充电站编码"
+                            isShowAfterIcon={false}
+                            value={addFormData.code}
+                            onChange={e => { setAddFormData({ code: e.target.value }) }}
+                        />
+                    </div>
+                    <div className="row">
+                        <FormInput
+                            yisaLabel="详细地址"
+                            placeholder="请输入详细地址"
+                            isShowAfterIcon={false}
+                            value={addFormData.address}
+                            onChange={e => { setAddFormData({ address: e.target.value }) }}
+                        />
+                    </div>
+                </div>
+            </Modal>
+        </>
+    );
+}
+
+export default BillingRule;
--- a/src/pages/NewEnergy/ChargeDeviceMgm/EquipmentSupplier/index.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/EquipmentSupplier/index.jsx
--- a/src/pages/NewEnergy/ChargeDeviceMgm/EquipmentSupplier/index.scss
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/EquipmentSupplier/index.scss
--- a/src/pages/NewEnergy/ChargeDeviceMgm/EquipmentSupplier/loadable.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/EquipmentSupplier/loadable.jsx
--- a/src/pages/NewEnergy/ChargeDeviceMgm/index.jsx
+++ b/src/pages/NewEnergy/ChargeDeviceMgm/index.jsx
@ -0,0 +1,8 @@
+import ElectricModal from "./ElectricModal"
+import EquipmentSupplier from "./EquipmentSupplier"
+
+
+export default {
+    ElectricModal,
+    EquipmentSupplier
+}
--- 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
@ -1349,6 +1349,12 @@ let routes = [
        component: pages.ChargeStationMgm,
      },
      {
+        path: "/newEnergy/chargeDeviceMgm",
+        text: "设备管理",
+        name: "chargeDeviceMgm",
+        component: pages.ChargeDeviceMgm,
+      },
+      {
        path: "/newEnergy/charge",
        text: "充电订单",
        name: "charge",
@ -1389,7 +1395,19 @@ let routes = [
        text: "电桩监控",
        name: "pileMonitor",
        component: pages.PileMonitor,
-      }
+      },
+      {
+        path: "/newEnergy/ElectricModal",
+        text: "电桩型号",
+        name: "ElectricModal",
+        component: pages.ElectricModal,
+      },
+      {
+        path: "/newEnergy/EquipmentSupplier",
+        text: "设备供应商",
+        name: "EquipmentSupplier",
+        component: pages.EquipmentSupplier,
+      },
    ],
  },
 ];
--- a/src/services/NewEnergy/ChargeDeviceMgm.js
+++ b/src/services/NewEnergy/ChargeDeviceMgm.js
@ -0,0 +1,32 @@
+import ajax from "@/config/ajax"
+// 充电站管理
+// 获取列表数据
+const getElecList = (params) => {
+  return ajax({
+    url: "/api/nes/device/elec_list",
+    type: "post",
+    data: params,
+  });
+};
+// 获取站点状态
+const getSiteStatus = (params) => {
+  return ajax({
+    url: "/api/fin/charge_station/site_status",
+    type: "get",
+    data: params,
+  });
+};
+// 新增充电站
+const addStation = (params) => {
+  return ajax({
+    url: "/api/fin/charge_station/add_station",
+    type: "post",
+    data: params,
+  });
+};
+
+export default{
+  getSiteStatus,
+  getElecList,
+  addStation
+}
--- a/src/services/NewEnergy/index.js
+++ b/src/services/NewEnergy/index.js
@ -2,9 +2,11 @@ import chargingMgm from './chargingMgm'
 import chargeStationMgm from './ChargeStationMgm'
 import realtimeMonitor from './realtimeMonitor'
 import recordsInquiry from './recordsInquiry'
+import ChargeDeviceMgm from './ChargeDeviceMgm'

 export default {
  ...chargingMgm,
+  ...ChargeDeviceMgm,
  ...realtimeMonitor,
  ...chargeStationMgm,
  recordsInquiry,