liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交设备管理部分代码

Browse Source
This commit is contained in:
袁帅
2022-09-27 10:54:00 +08:00
parent 6b3c05532b
commit 8337eae99a
4 changed files with 426 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
src/pages/ElecEvaluation/DeviceManage/DeviceForm.tsx
View File

@ -1,6 +1,9 @@
import { Form, Input, Modal, Select, Spin } from "antd"
import { Button, Form, Input, message, Modal, Select, Spin, Row, Col } from "antd"
import Password from "antd/lib/input/Password";
import { fromPairs, values } from "lodash";
import React, { useEffect, useState } from "react"
import { getDeviceById } from "./service";
import SelectDeviceModal from "./SelectDeviceModal";
import { getDeviceById, saveDevice } from "./service";
interface DeviceFormProps {
@ -11,143 +14,276 @@ interface DeviceFormProps {
type: string;
tpId: string;
deviceId: string;
deviceRel: DeviceRel;
reload: () => void;
}
interface DeviceRel {
placeId: string,
placeName: string,
areaId: string,
areaName: string,
platformId: string,
platformName: string,
}
const deviceTypeEnum = {
'resource_door': { text: '门禁点' },
'resource_camera': { text: '监控点' },
'resource_nvr': { text: 'nvr' },
'resource_encodeDevice': { text: '编码设备' },
'resource_oneMachine': { text: '门禁一体机' },
}
const deviceTypeOptions = [
{ label: '门禁点', value: 'resource_door'},
{ label: '监控点', value: 'resource_camera' },
{ label: 'nvr', value: 'resource_nvr' },
{ label: '编码设备', value: 'resource_encodeDevice' },
{ label: '人脸一体机', value: 'resource_oneMachine_face' },
{ label: '人证一体机', value: 'resource_oneMachine_card' },
];
const deviceVender = [
{ label: '海康平台', value: 'hik'},
{ label: '大华平台', value: 'icc' },
{ label: '山分平台', value: 'sd_access' },
];
const statusOptions = [
{ label: '在用', value: 1},
{ label: '禁用', value: 0 },
];
const layout = {
labelCol: { span: 7 },
wrapperCol: { span: 10 },
labelCol: { span: 8 },
wrapperCol: { span: 12 },
};
const DeviceForm: React.FC<DeviceFormProps> = (props) => {
const { titleName, modalVisible, onCancel, type, tpId, deviceId } = props;
const { titleName, modalVisible, onCancel, type, tpId, deviceId, deviceRel, reload } = 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);
//
const [deviceList, setDeviceList] = useState<any[]>([]);
const {Option} = Select;
const [selectDeviceStatus, setSelectDeviceStatus] = useState<boolean>(false);
useEffect(() => {
Int();
form.resetFields();//清除form中数据
}, [type, deviceId]);
const Int = () => {
setSping(true);
if (type == "new") {//==========================================================新建
setSping(false);
form.setFieldsValue({
"devicePlatform" : deviceRel.platformId,
"platformName" : deviceRel.platformName,
"placeId" : deviceRel.placeId,
"placeName" : deviceRel.placeName,
"areaId" : deviceRel.areaId,
"areaName" : deviceRel.areaName,
})
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);//可编辑
}
});
setFilesData(res.data);
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,
})
setFilesData(res.data);
setSping(false);
setEditInformation(true)
}
});
}
}
const setFilesData = (data:any) => {
form.setFieldsValue({
"id": data.id,
"devicePlatform" : data.platform.id,
"platformName" : data.platform.platformName,
"placeId" : data.placeId,
"placeName" : data.placeName,
"areaId" : data.areaId,
"areaName" : data.areaName,
"deviceName": data.deviceName,
"deviceCode": data.deviceCode,
"deviceType" : data.deviceType,
"deviceVender": data.deviceVender,
"deviceAbility": data.deviceAbility,
"deviceProtocol": data.deviceProtocol,
"deviceManagementIp": data.deviceManagementIp,
"deviceManagementPort": data.deviceManagementPort,
// "deviceManagementLogin": data.deviceManagementLogin,
// "deviceManagementPassword": data.deviceManagementPassword,
// "deviceMac": data.deviceMac,
// "deviceSn": data.deviceSn,
// "deviceModel": data.deviceModel,
"status": data.status
});
}
const handleDeviceChange = (value:any) => {
for (const item of deviceList) {
if(item.deviceCode === value){
form.setFieldsValue({
deviceVender: item['deviceVender'],
deviceType: item['deviceType'],
deviceCode: item['deviceCode'],
deviceAbility: item['deviceAbility']
})
break;
}
}
}
/**
* 提交
* @param values
*/
const onFinish = async (values: any) => {
setSping(true);
await saveDevice({ ...values }).then((res) => {
if (res?.success) {
message.success('保存成功');
onCancel();
form.resetFields();
reload();
}
})
.finally(()=>{
setSping(false);
});
}
const selectDevice = () => {
setSelectDeviceStatus(true);
}
const returnEvalData = (value:any) => {
}
// @ts-ignore
return (
<div>
<Modal
mask={true}
destroyOnClose
title={titleName}
visible={modalVisible}
onCancel={() => onCancel()}
onOk={() => form.submit()}
className="返回"
width={"40%"}
/*style={{top: "2%", height: "96%", overflowY: "auto"}}
bodyStyle={{paddingTop: "16px"}}*/
centered
>
<Spin spinning={spinning}>
<Form
{...layout}
name="basic"
form={form}
onFinish={onFinish}
>
<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.Item name="id" label="设备id" hidden>
<Input />
</Form.Item>
<Form.Item name="devicePlatform" label="管理平台id" hidden>
<Input />
</Form.Item>
<Form.Item name="placeId" label="评标场所id" hidden>
<Input />
</Form.Item>
<Form.Item name="areadId" label="评标区域id" hidden>
<Input />
</Form.Item>
<Form.Item name="placeName" label="评标场所" rules={[{ required: true }]}>
<Input placeholder="评标场所" disabled={true} maxLength={50} />
</Form.Item>
<Form.Item name="areaName" label="评标区域" rules={[{ required: true }]}>
<Input placeholder="评标区域" disabled={true} maxLength={50} />
</Form.Item>
<Form.Item name="platformName" label="管理平台" rules={[{ required: true }]}>
<Input placeholder="管理平台" disabled={true} maxLength={50} />
</Form.Item>
<Form.Item name="deviceType" label="设备类型" rules={[{ required: true }]}>
<Select
placeholder="请选择设备类型"
allowClear
options={deviceTypeOptions}
>
</Select>
</Form.Item>
<Form.Item label="设备名称">
<Form.Item name="deviceName" noStyle rules={[{ required: true }]}>
<Input style={{ width: 'calc(85% - 8px)' }} placeholder="设备名称" maxLength={50} />
</Form.Item>
<Button style= {{width: 'calc(15%)', margin: '0 0 0 8px'}} type='primary' onClick={() => selectDevice()}>选择</Button>
</Form.Item>
{/* <Form.Item name="device" label="设备" rules={[{ required: true }]}>
<Select
placeholder="请选择设备"
allowClear
onChange = {handleDeviceChange}
>
{deviceList.map(item => (<Option value={item.deviceCode} key={item.deviceCode} >{item.deviceName}</Option>))}
</Select>
</Form.Item> */}
<Form.Item name="deviceCode" label="设备标识">
<Input placeholder="请填写设备标识" maxLength={50} />
</Form.Item>
<Form.Item name="deviceAbility" label="设备能力">
<Input placeholder="请填写设备能力" maxLength={50} />
</Form.Item>
<Form.Item name="deviceVender" label="设备厂家">
<Select
placeholder="请选择设备厂家"
allowClear
options={deviceVender}
>
</Select>
</Form.Item>
<Form.Item name="deviceProtocol" label="设备接入协议">
<Input placeholder="请填写设备接入协议" maxLength={50} />
</Form.Item>
<Form.Item name="deviceManagementIp" label="网络IP">
<Input placeholder="请填写网络IP" maxLength={50} />
</Form.Item>
<Form.Item name="deviceManagementPort" label="端口">
<Input placeholder="请填写端口" maxLength={50} />
</Form.Item>
{/* <Form.Item name="deviceManagementLogin" label="管理平台登录账号" >
<Input placeholder="管理平台登录账号" maxLength={50} />
</Form.Item>
<Form.Item name="deviceManagementPassword" label="管理平台登录密码" >
<Password placeholder="管理平台登录密码" maxLength={50} />
</Form.Item>
<Form.Item name="deviceMac" label="设备mac地址" >
<Input placeholder="设备mac地址" maxLength={50} />
</Form.Item>
<Form.Item name="deviceSn" label="设备S/N码" >
<Input placeholder="设备S/N码" maxLength={50} />
</Form.Item>
<Form.Item name="deviceModel" label="设备型号" >
<Input placeholder="设备型号" maxLength={50} />
</Form.Item> */}
<Form.Item name="status" label="状态">
<Select
placeholder="请选择状态"
allowClear
options={statusOptions}
>
</Select>
</Form.Item>
</Form>
</Spin>
</Modal>
<SelectDeviceModal modalVisible={selectDeviceStatus} onCancel={() => setSelectDeviceStatus(false)} onSubmit = {(value: any) => returnEvalData(value)} values ={{deviceId}}> </SelectDeviceModal>
</div>
)
}
export default DeviceForm

156
src/pages/ElecEvaluation/DeviceManage/SelectDeviceModal.tsx Normal file
View File

@ -0,0 +1,156 @@
import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, message, Modal, Spin } from 'antd';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { getExternDevicesAboveArea } from './service';
interface SelectDeviceProps {
modalVisible: boolean;
onCancel: () => void;
onSubmit: (value: any) => void;
values: any;
}
const SelectDevice: React.FC<SelectDeviceProps> = (props) => {
const { modalVisible, onCancel, onSubmit, values } = props;
const actionRef = useRef<ActionType>();
const [form] = Form.useForm();
//当前选择行areaId
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
//当前选择行数据
const [selectedRecord, setSelectedRecord] = useState<any>();
//loading
const [loading, setLoading] = useState<boolean>(false);
const columns: ProColumns<any>[] = [
{
valueType: 'index',
width: 48,
},
{
title: '设备编码',
dataIndex: 'deviceCode',
ellipsis: true,
},
{
title: '设备名称',
dataIndex: 'deviceName',
ellipsis: true,
hideInSearch: true,
},
];
const onOk = () => {
if (selectedRowKeys.length == 0) {
message.info("请选择设备");
return;
}
form.validateFields().then(value => {
value["areaId"] = selectedRecord.id;
value["placeId"] = selectedRecord.placeId;
value["areaAddress"] = selectedRecord.areaAddress;
value["areaName"] = selectedRecord.areaName;
value["contactName"] = selectedRecord.contactName;
value["contactTel"] = selectedRecord.contactTel;
value["areaNumber"] = selectedRecord.areaNumber;
onSubmit(value);
})
}
useEffect(() => {
setSelectedRowKeys([]);
setSelectedRecord(null);
}, [values])
useEffect(() => {
}, [selectedRowKeys])
return (
<Modal
destroyOnClose
title={"选择设备"}
visible={modalVisible}
maskClosable={false}
onCancel={() => onCancel()}
onOk={() => onOk()}
okText={"确认"}
okButtonProps={{ loading: loading }}
width={"40%"}
bodyStyle={{ overflowY: 'auto', }}
className="confirm table-no-alert"
centered
>
<Spin spinning={loading}>
<ProTable<any>
columns={columns}
actionRef={actionRef}
bordered={false}
request={async (params) => {
setLoading(true);
return await getExternDevicesAboveArea(params).then(res => {
if (res?.code == 200) {
return {
data: res?.data.records,
success: res?.success,
total: res?.data.total,
}
} else {
return {
data: [],
success: false,
total: 0,
}
}
}).finally(()=>{
setLoading(false);
})
}}
rowKey="id"
search={{
labelWidth: 'auto',
}}
options={false}
pagination={{
size: "small",
defaultPageSize: 5,
showSizeChanger: false,
}}
rowSelection={{
type: "radio",
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
setSelectedRecord(selectedRows[0]);
},
}}
dateFormatter="string"
toolBarRender={false}
/>
<Form
name="basic"
form={form}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
preserve={false}
>
<Form.Item
label="设备编码"
name="deviceCode"
hidden
>
<Input />
</Form.Item>
<Form.Item
label="设备名称"
name="deviceName"
hidden
>
<Input />
</Form.Item>
</Form>
</Spin>
</Modal>
);
};
export default SelectDevice;

46
src/pages/ElecEvaluation/DeviceManage/index.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from 'react';
import { Button, Spin, Tabs, Tree} from 'antd';
import { Button, message, Spin, Tabs, Tree} from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { deviceList, getplaceareaList, roomList } from './service';
import '@/assets/ld_style.less';
@ -38,15 +38,23 @@ const DeviceManage: React.FC<{}> = () => {
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;
res.data.map((item1: any, index: any) => {
const title1 = item1.placeName;
const key1 = item1.id;
let children1: any = [];
if (item.roomList != undefined) {
const children = item.roomList.map((item: any, index: any) => {
if (item1.roomList != undefined) {
const children = item1.roomList.map((item: any, index: any) => {
const title2 = item.areaName;
const key2 = item.id;
return { title: title2, key: key2}
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;
}
@ -61,10 +69,13 @@ const DeviceManage: React.FC<{}> = () => {
const toAdd = async (props?: any) => {
// spinSet(true);
setUpdateChange('新增设备');
setType("new");
setUpdateVisible(true);
if(currentNodeRef?.current){
setUpdateChange('新增设备');
setType("new");
setUpdateVisible(true);
}else{
message.error('请在评标区域下新增设备');
}
}
const toEdit = (dId: String) => {
setUpdateChange('修改设备');
@ -89,10 +100,13 @@ const DeviceManage: React.FC<{}> = () => {
//列表页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])
console.log(selectedKeys)
if(info.node?.obj){
currentNodeRef.current = info.node?.obj;
}
}
const columns: any[] = [
//设备管理
@ -231,14 +245,14 @@ const DeviceManage: React.FC<{}> = () => {
</Button>,
<Button
key="searchText"
type="primary"
onClick={() => {
form?.submit();
}}
>
{searchConfig?.searchText}
</Button>,
<Button key="toCreate" onClick={() => toAdd()}>
<Button key="toCreate"
type="primary" onClick={() => toAdd()}>
新建
</Button>,
];
@ -255,7 +269,7 @@ const DeviceManage: React.FC<{}> = () => {
</ProCard>
{updateVisible ? (
<DeviceForm key={Math.random()} titleName={updateChange}
type={type} deviceId={deviceId} status={'2'} onCancel={() => setUpdateVisible(false)}
type={type} deviceId={deviceId} deviceRel={currentNodeRef?.current} reload={()=>{checkRelationRef?.current?.reload();}} status={'2'} onCancel={() => setUpdateVisible(false)}
modalVisible={updateVisible} tpId={''} />
) : null}
</Spin>

24
src/pages/ElecEvaluation/DeviceManage/service.ts
View File

@ -39,3 +39,27 @@ export async function getDeviceById(id: any) {
params: {}
});
}
/**
* 保存/更新设备
* @param params
* @returns
*/
export async function saveDevice(params: any) {
return request('/api/biz-service-ebtp-evaluation/v1/eval/device/create', {
method: 'POST',
data: params
});
}
/**
* 查询区域下的设备列表
* @param params
* @returns
*/
export async function getExternDevicesAboveArea(params: any) {
return request('/api/biz-service-ebtp-evaluation/v1/eval/device/queryByParam', {
method: 'POST',
data: params
});
}