|
|
|
@ -9,33 +9,20 @@ 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 [selectData, setSelectData] = useState({ |
|
|
|
supplier:[], //供应商下拉 |
|
|
|
model:[], //类型下拉 |
|
|
|
status:[], //状态下拉 |
|
|
|
pile_id:[], //物理桩下拉 |
|
|
|
}); |
|
|
|
const listData={ |
|
|
|
name: "", |
|
|
|
code:"", |
|
|
|
start_time: '00:00:00', |
|
|
|
model: '', |
|
|
|
muzzle_num: "", |
|
|
|
supplier: "", |
|
|
|
status: "", |
|
|
|
pile_id: "", |
|
|
|
} |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
@ -53,27 +40,82 @@ function GroundLockManagement() { |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "硬件编码", |
|
|
|
title: "设备编码", |
|
|
|
dataIndex: "code", |
|
|
|
key: "code", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "所在充电站", |
|
|
|
dataIndex: "start_time", |
|
|
|
title: "设备类型", |
|
|
|
dataIndex: "model", |
|
|
|
key: "model", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "设备型号", |
|
|
|
dataIndex: "model", |
|
|
|
key: "model", |
|
|
|
title: "设备供应商", |
|
|
|
dataIndex: "supplier", |
|
|
|
key: "supplier", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "所属物理桩", |
|
|
|
dataIndex: "pile_name", |
|
|
|
key: "pile_name", |
|
|
|
align: "center", |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "设备状态", |
|
|
|
dataIndex: "status", |
|
|
|
key: "status", |
|
|
|
align: "center", |
|
|
|
render: (text, record) => { |
|
|
|
return ( |
|
|
|
<> |
|
|
|
{record.status=="1"?<Button type="primary" style={{ "background":"#4b7902"}}>正常</Button>:<Button type="primary" style={{"background":"#bfbf00"}}>停用</Button>} |
|
|
|
</> |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "枪口数量", |
|
|
|
dataIndex: "muzzle_num", |
|
|
|
key: "muzzle_num", |
|
|
|
title: "操作", |
|
|
|
align: "center", |
|
|
|
render: (text, record) => { |
|
|
|
return ( |
|
|
|
<> |
|
|
|
{record.status=="1"?<span className="button-red" onClick={()=>{ |
|
|
|
Modal.confirm({ |
|
|
|
title: `提示`, |
|
|
|
content: `是否需要停用该地锁？`, |
|
|
|
onOk: () => { |
|
|
|
ajax.getDeviceLockEdit({id:record.id,status:"2"}).then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
message.success('停用成功') |
|
|
|
tableRef.current.fetch(1,{}) |
|
|
|
}else { |
|
|
|
message.error(res?.message); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
}}>停用</span>:<span className="button-green" onClick={()=>{ |
|
|
|
Modal.confirm({ |
|
|
|
title: `提示`, |
|
|
|
content: `是否需要启动该地锁？`, |
|
|
|
onOk: () => { |
|
|
|
ajax.getDeviceLockEdit({id:record.id,status:"1"}).then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
message.success('启动成功') |
|
|
|
tableRef.current.fetch(1,{}) |
|
|
|
}else { |
|
|
|
message.error(res?.message); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
}}>启用</span>} |
|
|
|
</> |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
]; |
|
|
|
const formSearch = [ |
|
|
|
@ -86,10 +128,17 @@ function GroundLockManagement() { |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "Select", |
|
|
|
label: "充电站名称", |
|
|
|
name: "date_type", |
|
|
|
placeholder:"请选择日期类型", |
|
|
|
options:selectData |
|
|
|
label: "设备类型", |
|
|
|
name: "model", |
|
|
|
placeholder:"请选择设备类型", |
|
|
|
options:selectData.model |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "Select", |
|
|
|
label: "设备状态", |
|
|
|
name: "status", |
|
|
|
placeholder:"请选择设备状态", |
|
|
|
options:selectData.status |
|
|
|
}, |
|
|
|
]; |
|
|
|
const tableRef = useRef(null); |
|
|
|
@ -99,17 +148,14 @@ function GroundLockManagement() { |
|
|
|
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) => { |
|
|
|
ajax.getDeviceLockList(params).then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
setTableData(res.data.list); |
|
|
|
setTotal(res.data.total); |
|
|
|
@ -121,7 +167,6 @@ function GroundLockManagement() { |
|
|
|
<Button |
|
|
|
type="primary" |
|
|
|
onClick={() => { |
|
|
|
setActionState("add"); |
|
|
|
setVisible(true); |
|
|
|
}} |
|
|
|
> |
|
|
|
@ -133,43 +178,39 @@ function GroundLockManagement() { |
|
|
|
const handleOk = () => { |
|
|
|
if(!rowData.name){ |
|
|
|
message.destroy(); |
|
|
|
message.warning(`名称不可为空`); |
|
|
|
message.warning(`设备名称不可为空`); |
|
|
|
return |
|
|
|
}else if(!rowData.date_type){ |
|
|
|
}else if(!rowData.code){ |
|
|
|
message.destroy(); |
|
|
|
message.warning(`日期类型不可为空`); |
|
|
|
message.warning(`设备编码不可为空`); |
|
|
|
return |
|
|
|
} |
|
|
|
else if(rowData.start_time==rowData.end_time){ |
|
|
|
else if(!rowData.model){ |
|
|
|
message.destroy(); |
|
|
|
message.warning(`开始时间不能与结束时间相同！`); |
|
|
|
message.warning(`设备类型不可为空`); |
|
|
|
return |
|
|
|
} |
|
|
|
else if(rowData.is_in===""){ |
|
|
|
else if(!rowData.supplier){ |
|
|
|
message.destroy(); |
|
|
|
message.warning(`是否可进入不可为空`); |
|
|
|
message.warning(`设备供应商不可为空`); |
|
|
|
return |
|
|
|
} |
|
|
|
else if(rowData.is_out===""){ |
|
|
|
else if(!rowData.status){ |
|
|
|
message.destroy(); |
|
|
|
message.warning(`是否可出场不可为空`); |
|
|
|
message.warning(`设备状态不可为空`); |
|
|
|
return |
|
|
|
} |
|
|
|
let data = rowData |
|
|
|
if(actionState=="edit"){ |
|
|
|
data={...rowData,id:editId} |
|
|
|
Modal.confirm({ |
|
|
|
title: `提示`, |
|
|
|
content: `修改的数据可能导致已绑定的数据出错，是否修改？`, |
|
|
|
onOk: () => {addAjax(data,'修改成功')} |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
addAjax(data,'新增成功') |
|
|
|
else if(!rowData.pile_id){ |
|
|
|
message.destroy(); |
|
|
|
message.warning(`所属物理桩不可为空`); |
|
|
|
return |
|
|
|
} |
|
|
|
addAjax(rowData,'新增成功') |
|
|
|
|
|
|
|
} |
|
|
|
//新增修改函数 |
|
|
|
const addAjax = (data,messageDate) => { |
|
|
|
ajax.getTimeRuleDetailsAdd(data).then((res) => { |
|
|
|
ajax.getDeviceLockAdd(data).then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
setVisible(false); |
|
|
|
message.success(messageDate) |
|
|
|
@ -180,38 +221,19 @@ function GroundLockManagement() { |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
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; |
|
|
|
} |
|
|
|
}; |
|
|
|
useEffect(()=>{ |
|
|
|
ajax.getDeviceLockDown().then((res) => { |
|
|
|
if (res.status === 20000) { |
|
|
|
setSelectData(res.data) |
|
|
|
}else { |
|
|
|
message.error(res?.message); |
|
|
|
} |
|
|
|
}); |
|
|
|
},[]) |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<TableModule |
|
|
|
@ -233,17 +255,9 @@ function GroundLockManagement() { |
|
|
|
onOk={handleOk} |
|
|
|
className="modal-rule-detail" |
|
|
|
destroyOnClose |
|
|
|
title={getModalTitle(actionState)} |
|
|
|
title={"新增地锁设备"} |
|
|
|
afterClose={()=>{ |
|
|
|
setRowData({ |
|
|
|
name: "", |
|
|
|
date_type:"", |
|
|
|
start_time: '00:00:00', |
|
|
|
end_time: '23:59:59', |
|
|
|
is_in: "", |
|
|
|
is_out: "", |
|
|
|
remarks: "", |
|
|
|
}) |
|
|
|
setRowData(listData) |
|
|
|
}} |
|
|
|
> |
|
|
|
<div className="form-container"> |
|
|
|
@ -253,59 +267,59 @@ function GroundLockManagement() { |
|
|
|
placeholder="请输入设备名称" |
|
|
|
value={rowData.name} |
|
|
|
showClose={true} |
|
|
|
|
|
|
|
isShowAfterIcon={false} |
|
|
|
onChange={e => { setRowData({ ...rowData, name: e.target.value }) }} |
|
|
|
/> |
|
|
|
<FormInput |
|
|
|
isRequired={true} |
|
|
|
yisaLabel="硬件编码" |
|
|
|
yisaLabel="设备编码" |
|
|
|
placeholder="请输入硬件编码" |
|
|
|
value={rowData.code} |
|
|
|
showClose={true} |
|
|
|
|
|
|
|
isShowAfterIcon={false} |
|
|
|
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 }) }} |
|
|
|
<FormSelect |
|
|
|
yisaLabel="设备类型" |
|
|
|
yisaData={selectData.model} |
|
|
|
defaultValue={rowData.model || null} |
|
|
|
placeholder="请选择设备类型" |
|
|
|
hasUnlimited={false} |
|
|
|
required={true} |
|
|
|
showClose={false} |
|
|
|
onChange={e => { setRowData({ ...rowData,model: e }) }} |
|
|
|
/> |
|
|
|
<FormSelect |
|
|
|
yisaLabel="设备供应商" |
|
|
|
yisaData={selectData.supplier} |
|
|
|
defaultValue={rowData.supplier || null} |
|
|
|
placeholder="请选择设备供应商" |
|
|
|
hasUnlimited={false} |
|
|
|
required={true} |
|
|
|
showClose={false} |
|
|
|
onChange={e => { setRowData({ ...rowData,supplier: e }) }} |
|
|
|
/> |
|
|
|
<FormSelect |
|
|
|
yisaLabel="设备状态" |
|
|
|
yisaData={selectData.status} |
|
|
|
defaultValue={rowData.status || null} |
|
|
|
placeholder="请选择设备状态" |
|
|
|
hasUnlimited={false} |
|
|
|
required={true} |
|
|
|
showClose={false} |
|
|
|
onChange={e => { setRowData({ ...rowData,status: e }) }} |
|
|
|
/> |
|
|
|
<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="请选择日期类型" |
|
|
|
yisaLabel="所属物理桩" |
|
|
|
yisaData={selectData.pile_id} |
|
|
|
defaultValue={rowData.pile_id || null} |
|
|
|
placeholder="请选择所属物理桩" |
|
|
|
hasUnlimited={false} |
|
|
|
required={true} |
|
|
|
showClose={false} |
|
|
|
onChange={e => { setRowData({ ...rowData,date_type: e }) }} |
|
|
|
onChange={e => { setRowData({ ...rowData,pile_id: e }) }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</Modal> |
|
|
|
|
