设备管理页面初步搭建
This commit is contained in:
袁帅
@ -41,10 +41,14 @@ export const elecBidEvaluation = [
|
||||
path: '/ElecEvaluation/AbnormalAlarm',
|
||||
component: './ElecEvaluation/AbnormalAlarm'
|
||||
},
|
||||
{//设备管理
|
||||
{//设备查看
|
||||
path: '/ElecEvaluation/Device',
|
||||
component: './ElecEvaluation/Device',
|
||||
},
|
||||
{//设备管理
|
||||
path: '/ElecEvaluation/DeviceManage',
|
||||
component: './ElecEvaluation/DeviceManage',
|
||||
},
|
||||
{//评标现场管理
|
||||
path: '/ElecEvaluation/EvalSiteManage',
|
||||
routes: [
|
||||
|
||||
153
src/pages/ElecEvaluation/DeviceManage/DeviceForm.tsx
Normal file
153
src/pages/ElecEvaluation/DeviceManage/DeviceForm.tsx
Normal file
@ -0,0 +1,153 @@
|
||||
import { Form, Input, Modal, Select, Spin } from "antd"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { getDeviceById } from "./service";
|
||||
|
||||
|
||||
interface DeviceFormProps {
|
||||
modalVisible: boolean;
|
||||
titleName: string;
|
||||
onCancel: () => void;
|
||||
status: string;//状态 0-新建 1-编辑 2-查看
|
||||
type: string;
|
||||
tpId: string;
|
||||
deviceId: string;
|
||||
|
||||
}
|
||||
const deviceTypeEnum = {
|
||||
'resource_door': { text: '门禁点' },
|
||||
'resource_camera': { text: '监控点' },
|
||||
'resource_nvr': { text: 'nvr' },
|
||||
'resource_encodeDevice': { text: '编码设备' },
|
||||
'resource_oneMachine': { text: '门禁一体机' },
|
||||
}
|
||||
const layout = {
|
||||
labelCol: { span: 7 },
|
||||
wrapperCol: { span: 10 },
|
||||
};
|
||||
const DeviceForm: React.FC<DeviceFormProps> = (props) => {
|
||||
|
||||
const { titleName, modalVisible, onCancel, type, tpId, deviceId } = props;
|
||||
const [spinning, setSping] = useState<boolean>();//加载遮罩
|
||||
const [editInformation, setEditInformation] = useState<boolean>(false);//是否可编
|
||||
const [form] = Form.useForm();
|
||||
//窗口状态 0-新建 1-编辑 2-查看
|
||||
const [modalStatus, setModalStatus] = useState<string | undefined>(status);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
Int();
|
||||
form.resetFields();//清除form中数据
|
||||
}, [type, deviceId]);
|
||||
const Int = () => {
|
||||
|
||||
setSping(true);
|
||||
if (type == "new") {//==========================================================新建
|
||||
|
||||
setSping(false);
|
||||
setEditInformation(false);//可编辑
|
||||
|
||||
} else if (type == "edit") {//=========================================================修改
|
||||
console.log(deviceId);
|
||||
getDeviceById(deviceId).then(res => {
|
||||
if (res.code == 200) {
|
||||
const data = res.data;
|
||||
|
||||
form.setFieldsValue({
|
||||
"id": data.id,
|
||||
"deviceName": data.deviceName,
|
||||
"deviceManagementIp": data.deviceManagementIp,
|
||||
"deviceCode": data.deviceCode,
|
||||
"devicePlatform": data.devicePlatform,
|
||||
"placeId": data.placeId,
|
||||
"areaId": data.areaId,
|
||||
});
|
||||
setSping(false);
|
||||
setEditInformation(false);//可编辑
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
} else if (type == "read") {//=========================================================查看
|
||||
getDeviceById(deviceId).then(res => {
|
||||
if (res.code == 200) {
|
||||
const data = res.data;
|
||||
|
||||
form.setFieldsValue({
|
||||
"id": data.id,
|
||||
"deviceName": data.deviceName,
|
||||
"deviceManagementIp": data.deviceManagementIp,
|
||||
"deviceCode": data.deviceCode,
|
||||
"devicePlatform": data.devicePlatform,
|
||||
"placeId": data.placeId,
|
||||
"areaId": data.areaId,
|
||||
})
|
||||
|
||||
setSping(false);
|
||||
setEditInformation(true)
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// @ts-ignore
|
||||
return (
|
||||
<Modal
|
||||
mask={true}
|
||||
destroyOnClose
|
||||
title={titleName}
|
||||
visible={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
className="返回"
|
||||
width={"40%"}
|
||||
/*style={{top: "2%", height: "96%", overflowY: "auto"}}
|
||||
bodyStyle={{paddingTop: "16px"}}*/
|
||||
centered
|
||||
|
||||
>
|
||||
<Spin spinning={spinning}>
|
||||
<Form
|
||||
{...layout}
|
||||
name="basic"
|
||||
form={form}
|
||||
>
|
||||
<Form.Item name="id" label="设备id" hidden>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="devicePlatform" label="管理平台" rules={[{ required: !(modalStatus == "2") }]}>
|
||||
<Input placeholder="管理平台" disabled={modalStatus == "2"} maxLength={50} />
|
||||
</Form.Item>
|
||||
<Form.Item name="placeId" label="评标场所" rules={[{ required: !(modalStatus == "2") }]}>
|
||||
<Input placeholder="评标场所" disabled={modalStatus == "2"} maxLength={50} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name="areaId" label="评标区域" rules={[{ required: !(modalStatus == "2") }]}>
|
||||
<Input placeholder="评标区域" disabled={modalStatus == "2"} maxLength={50} />
|
||||
</Form.Item>
|
||||
<Form.Item name="deviceCode" label="设备标识" rules={[{ required: !(modalStatus == "2") }]}>
|
||||
<Input placeholder="设备标识" disabled={modalStatus == "2"} maxLength={50} />
|
||||
</Form.Item>
|
||||
<Form.Item name="deviceManagementIp" label="网络IP" rules={[{ required: !(modalStatus == "2") }]}>
|
||||
<Input placeholder="网络IP" disabled={modalStatus == "2"} maxLength={50} />
|
||||
</Form.Item>
|
||||
<Form.Item name="deviceType" label="设备类型" rules={[{ required: !(modalStatus == "2") }]}>
|
||||
<Select
|
||||
placeholder="选择设备类型"
|
||||
allowClear
|
||||
disabled={modalStatus == "2"}
|
||||
>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item name="deviceName" label="设备名称" rules={[{ required: !(modalStatus == "2") }]}>
|
||||
<Input placeholder="设备名称" disabled={modalStatus == "2"} maxLength={50} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Spin>
|
||||
</Modal>
|
||||
|
||||
)
|
||||
}
|
||||
export default DeviceForm
|
||||
268
src/pages/ElecEvaluation/DeviceManage/index.tsx
Normal file
268
src/pages/ElecEvaluation/DeviceManage/index.tsx
Normal file
@ -0,0 +1,268 @@
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Button, Spin, Tabs, Tree} from 'antd';
|
||||
import ProTable, { ActionType } from '@ant-design/pro-table';
|
||||
import { deviceList, getplaceareaList, roomList } 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((item: any, index: any) => {
|
||||
const title1 = item.placeName;
|
||||
const key1 = item.id;
|
||||
let children1: any = [];
|
||||
if (item.roomList != undefined) {
|
||||
const children = item.roomList.map((item: any, index: any) => {
|
||||
const title2 = item.areaName;
|
||||
const key2 = item.id;
|
||||
return { title: title2, key: key2}
|
||||
});
|
||||
children1 = children;
|
||||
}
|
||||
const first = { title: title1, key: key1, children: children1 }
|
||||
data.push(first);
|
||||
});
|
||||
}
|
||||
setTreeData(data);
|
||||
}
|
||||
})
|
||||
}, []);
|
||||
|
||||
const toAdd = async (props?: any) => {
|
||||
// spinSet(true);
|
||||
setUpdateChange('新增设备');
|
||||
setType("new");
|
||||
setUpdateVisible(true);
|
||||
|
||||
}
|
||||
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);
|
||||
}
|
||||
/**
|
||||
* 设备管理
|
||||
* @param record
|
||||
*/
|
||||
|
||||
const current = getURLInformation('current');
|
||||
//列表页loading
|
||||
const [spinLoading, setSpinLoading] = useState<boolean>(false);
|
||||
|
||||
const onSelect = (selectedKeys: any, info: any) => {
|
||||
selectedKeys.length == 0 ? setTreeId(null) : setTreeId(selectedKeys[0])
|
||||
|
||||
console.log(selectedKeys)
|
||||
}
|
||||
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>
|
||||
<Button type="text" onClick={() => {}} danger>
|
||||
删除
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
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="resetText"
|
||||
onClick={() => {
|
||||
form?.setFieldsValue({
|
||||
current: 1,
|
||||
});
|
||||
form?.submit();
|
||||
}}
|
||||
>
|
||||
{searchConfig?.resetText}
|
||||
</Button>,
|
||||
<Button
|
||||
key="searchText"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
form?.submit();
|
||||
}}
|
||||
>
|
||||
{searchConfig?.searchText}
|
||||
</Button>,
|
||||
<Button key="toCreate" 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} status={'2'} onCancel={() => setUpdateVisible(false)}
|
||||
modalVisible={updateVisible} tpId={''} />
|
||||
) : null}
|
||||
</Spin>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
export default DeviceManage
|
||||
|
||||
|
||||
41
src/pages/ElecEvaluation/DeviceManage/service.ts
Normal file
41
src/pages/ElecEvaluation/DeviceManage/service.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
export async function reserveList(data: any) { // 查询会议室/评标室预约情况
|
||||
return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/list', {
|
||||
method: 'post',
|
||||
data: { ...data, pageNo: data.current }
|
||||
});
|
||||
}
|
||||
|
||||
export async function roomList() { // 查询评标室列表
|
||||
///api/biz-service-ebtp-evaluation
|
||||
return request('/api/biz-service-ebtp-evaluation/v1/elec/eval/room/list', {
|
||||
method: 'get',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export async function deviceList(data: any) {
|
||||
// 查询设备列表
|
||||
return request('/api/biz-service-ebtp-evaluation/v1/eval/device/queryPageByParam', {
|
||||
method: 'post',
|
||||
data: { ...data, pageNo: data.current },
|
||||
});
|
||||
}
|
||||
|
||||
export async function getplaceareaList() {
|
||||
// 查询场所、区域列表
|
||||
/// /v1/elec/eval/placearea/uset/list
|
||||
return request('/api/biz-service-ebtp-evaluation/v1/elec/eval/placearea/user/list', {
|
||||
method: 'get',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
|
||||
export async function getDeviceById(id: any) {
|
||||
return request('/api/biz-service-ebtp-evaluation/v1/eval/device/query/' + `${id}`, {
|
||||
method: 'get',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
@ -418,12 +418,12 @@ interface PlaceInfo {
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="平台"
|
||||
label="管理平台"
|
||||
name="platformId"
|
||||
rules={[{ required: true, message: '请选择平台' }]}
|
||||
rules={[{ required: true, message: '请选择管理平台' }]}
|
||||
initialValue={placeInfo?.platformList ? placeInfo?.platformList[0]?.platformId : null}
|
||||
>
|
||||
<Select labelInValue options={platforms} placeholder="请选择平台" onChange={handlePlatformChange}>
|
||||
<Select labelInValue options={platforms} placeholder="请选择管理平台" onChange={handlePlatformChange}>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
|
||||
Reference in New Issue
Block a user