Browse Source
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop
tags/PMS_V1.0.0_Alpha5
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop
tags/PMS_V1.0.0_Alpha5
陈宇航
1 year ago
12 changed files with 801 additions and 238 deletions
-
7src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx
-
6src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/index.jsx
-
280src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/index.scss
-
396src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/loadable.jsx
-
15src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/loadable.jsx
-
5src/pages/NewEnergy/ChargingMgm/index.jsx
-
8src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss
-
62src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx
-
151src/pages/NewEnergy/RealtimeMonitor/PileMonitor/loadable.jsx
-
85src/pages/NewEnergy/RecordsInquiry/Unlocking/loadable.jsx
-
6src/router/router.config.js
-
12src/services/NewEnergy/chargingMgm.js
@ -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 />} /> |
|||
@ -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 |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
} |
|||
@ -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; |
|||
@ -1,8 +1,9 @@ |
|||
import BillingRule from './BillingRule' |
|||
import OrderRuleMgm from './OrderRuleMgm' |
|||
|
|||
import IllegalRuleConfigMgm from "./IllegalRuleConfigMgm" |
|||
|
|||
export default { |
|||
BillingRule, |
|||
OrderRuleMgm |
|||
OrderRuleMgm, |
|||
IllegalRuleConfigMgm |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue