314 lines
9.3 KiB
TypeScript
314 lines
9.3 KiB
TypeScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { Button, message, Popconfirm, Spin, Tabs, Tree} from 'antd';
|
|
import ProTable, { ActionType } from '@ant-design/pro-table';
|
|
import { deviceList, getplaceareaList, deleteDevice } from './service';
|
|
import '@/assets/ld_style.less';
|
|
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
|
|
import ProCard from "@ant-design/pro-card";
|
|
import DeviceForm from './DeviceForm';
|
|
|
|
|
|
const deviceTypeEnum = {
|
|
'resource_door': { text: '门禁设备' },
|
|
'resource_camera': { text: '监控设备' },
|
|
'resource_nvr': { text: 'nvr' },
|
|
'resource_encodeDevice': { text: '编码设备' },
|
|
'resource_oneMachine_face': { text: '人脸一体机' },
|
|
'resource_oneMachine_card': { text: '人证一体机' },
|
|
|
|
}
|
|
const deviceStatusEnum = {
|
|
'online_0': { text: '离线' },
|
|
'online_1': { text: '在线' },
|
|
'online_9': { text: '无此设备' },
|
|
}
|
|
const DeviceManage: React.FC<{}> = () => {
|
|
const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
|
|
const [treeData, setTreeData] = useState<any>();
|
|
const [treeId, setTreeId] = useState<any>();
|
|
const [updateVisible, setUpdateVisible] = useState<boolean>(false)
|
|
const [type, setType] = useState<any>();// 状态 编辑or 查看
|
|
const [deviceId, setDeviceId] = useState<any>("");//设备id
|
|
const [spin, spinSet] = useState<boolean>(false);//加载遮罩
|
|
const [updateChange, setUpdateChange] = useState<string>('')
|
|
|
|
/*拉取数据*/
|
|
useEffect(() => {
|
|
getplaceareaList().then((res: { code: number; data: any[] | undefined; }) => {
|
|
if (res.code == 200) {
|
|
let data: any = [];
|
|
if (res.data != undefined) {
|
|
res.data.map((item1: any, index: any) => {
|
|
const title1 = item1.placeName;
|
|
const key1 = item1.id;
|
|
let children1: any = [];
|
|
if (item1.roomList != undefined) {
|
|
const children = item1.roomList.map((item: any, index: any) => {
|
|
const title2 = item.areaName;
|
|
const key2 = item.id;
|
|
const obj = {
|
|
placeId:item1.platformList[0].placeId,
|
|
placeName: item1.placeName,
|
|
areaId: item.id,
|
|
areaName: item.areaName,
|
|
platformId: item1.platformList[0].platformId,
|
|
platformName: item1.platformList[0].platformName,
|
|
};
|
|
return { title: title2, key: key2, obj: obj}
|
|
});
|
|
children1 = children;
|
|
}
|
|
const first = { title: title1, key: key1, children: children1 }
|
|
data.push(first);
|
|
});
|
|
}
|
|
setTreeData(data);
|
|
}
|
|
})
|
|
}, []);
|
|
|
|
const toAdd = async (props?: any) => {
|
|
// spinSet(true);
|
|
if(currentNodeRef?.current){
|
|
setUpdateChange('新增设备');
|
|
setType("new");
|
|
setUpdateVisible(true);
|
|
}else{
|
|
message.error('请在评标区域下新增设备');
|
|
}
|
|
}
|
|
const toEdit = (dId: String) => {
|
|
setUpdateChange('修改设备');
|
|
console.log(dId)
|
|
setDeviceId(dId)
|
|
setType("edit");
|
|
setUpdateVisible(true);
|
|
}
|
|
|
|
const toRead = (props: any) => {
|
|
setUpdateChange('查看设备');
|
|
setDeviceId(props.id)
|
|
setType("read");
|
|
setUpdateVisible(true);
|
|
}
|
|
|
|
const toDelete = async (id: string) => {
|
|
const hide = message.loading('正在删除');
|
|
try {
|
|
const success = await deleteDevice(id).then((res) => {
|
|
return res.success
|
|
});
|
|
hide();
|
|
if (success) {
|
|
message.success('删除成功');
|
|
}
|
|
} catch (error) {
|
|
hide();
|
|
message.error('删除失败请重试！');
|
|
checkRelationRef.current?.reload();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 设备管理
|
|
* @param record
|
|
*/
|
|
|
|
const current = getURLInformation('current');
|
|
//列表页loading
|
|
const [spinLoading, setSpinLoading] = useState<boolean>(false);
|
|
|
|
const currentNodeRef = useRef<any>();
|
|
|
|
const onSelect = (selectedKeys: any, info: any) => {
|
|
selectedKeys.length == 0 ? setTreeId(null) : setTreeId(selectedKeys[0])
|
|
if(info.node?.obj){
|
|
currentNodeRef.current = info.node?.obj;
|
|
}
|
|
}
|
|
const columns: any[] = [
|
|
//设备管理
|
|
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
valueType: 'index',
|
|
search: false,
|
|
width: '3%',
|
|
},
|
|
{
|
|
title: '评标场所名称',
|
|
dataIndex: 'placeName',
|
|
width: '10%',
|
|
search: false,
|
|
},
|
|
{
|
|
title: '评标区域名称',
|
|
dataIndex: 'areaName',
|
|
width: '10%',
|
|
search: false,
|
|
},
|
|
{
|
|
title: '设备类型',
|
|
dataIndex: 'deviceType',
|
|
width: '10%',
|
|
valueType: 'select',
|
|
valueEnum: deviceTypeEnum,
|
|
search: false,
|
|
},
|
|
{
|
|
title: '设备名称',
|
|
dataIndex: 'deviceName',
|
|
search: true,
|
|
width: '10%',
|
|
},
|
|
{
|
|
title: '设备标识',
|
|
dataIndex: 'deviceCode',
|
|
search: true,
|
|
width: '10%',
|
|
},
|
|
|
|
{
|
|
title: '网络IP',
|
|
dataIndex: 'deviceManagementIp',
|
|
search: true,
|
|
width: '10%',
|
|
},
|
|
{
|
|
title: '设备状态',
|
|
dataIndex: 'deviceStatus',
|
|
width: '10%',
|
|
valueType: 'select',
|
|
valueEnum: deviceStatusEnum,
|
|
search: true,
|
|
},
|
|
|
|
{
|
|
title: '操作',
|
|
width: '7%',
|
|
search: false,
|
|
render: (text: any, record: any) => {
|
|
return (
|
|
<>
|
|
<Button type="text" onClick={() => {toEdit(record.id)}} danger>
|
|
编辑
|
|
</Button>
|
|
<Popconfirm
|
|
placement="topRight"
|
|
title={"确定删除么？"}
|
|
onConfirm={async () => {
|
|
spinSet(true)
|
|
await toDelete(record.id);
|
|
checkRelationRef.current?.reload();
|
|
spinSet(false)
|
|
}}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
>
|
|
<Button type='text' >删除</Button>
|
|
</Popconfirm>
|
|
</>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div style={{ padding: '0px 24px' }}>
|
|
<Spin spinning={spin}>
|
|
<ProCard split="vertical" bordered headerBordered>
|
|
<ProCard colSpan="300px">
|
|
<h3 style={{fontSize: 'large', fontWeight: 'bold'}}>评标场所设备管理</h3>
|
|
{treeData == undefined ? null : (
|
|
<Tree
|
|
defaultExpandAll
|
|
onSelect={onSelect}
|
|
treeData={treeData}
|
|
/>
|
|
)}
|
|
</ProCard>
|
|
|
|
|
|
<ProCard bodyStyle={{ width: "100%" }} >
|
|
<ProTable
|
|
actionRef={checkRelationRef}
|
|
className="proSearch"
|
|
columns={columns}
|
|
params={{ treeId: treeId }}
|
|
size="small"
|
|
|
|
request={async (params) =>
|
|
await deviceList(params).then((res) => {
|
|
if (res.code == 200) {
|
|
let data = res.data;
|
|
return Promise.resolve({
|
|
data: data.records,
|
|
success: res.success,
|
|
total: res.data.total,
|
|
current: res.data.current,
|
|
});
|
|
}
|
|
return Promise.resolve({
|
|
data: [],
|
|
success: false,
|
|
total: 0,
|
|
current: 1,
|
|
});
|
|
})
|
|
}
|
|
search={{
|
|
filterType: 'query',
|
|
optionRender: (searchConfig: any, { form }) => {
|
|
return [
|
|
<Button
|
|
key="searchText"
|
|
type="primary"
|
|
onClick={() => {
|
|
form?.submit();
|
|
}}
|
|
>
|
|
{searchConfig?.searchText}
|
|
</Button>,
|
|
<Button
|
|
key="resetText"
|
|
onClick={() => {
|
|
form?.resetFields();
|
|
form?.setFieldsValue({
|
|
current: 1,
|
|
});
|
|
form?.submit();
|
|
}}
|
|
>
|
|
{searchConfig?.resetText}
|
|
</Button>,
|
|
<Button key="toCreate"
|
|
type="primary" onClick={() => toAdd()}>
|
|
新建
|
|
</Button>,
|
|
];
|
|
},
|
|
}}
|
|
pagination={{
|
|
defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
|
|
defaultPageSize: 10,
|
|
showSizeChanger: false,
|
|
}} //默认显示条数
|
|
toolBarRender={false}
|
|
/>
|
|
</ProCard>
|
|
</ProCard>
|
|
{updateVisible ? (
|
|
<DeviceForm key={Math.random()} titleName={updateChange}
|
|
type={type} deviceId={deviceId} deviceRel={currentNodeRef?.current} reload={()=>{checkRelationRef?.current?.reload();}} status={'2'} onCancel={() => setUpdateVisible(false)}
|
|
modalVisible={updateVisible} tpId={''} />
|
|
) : null}
|
|
</Spin>
|
|
</div>
|
|
|
|
);
|
|
};
|
|
export default DeviceManage
|
|
|
|
|