fect: 离线告警规则接口联调
JINGYJ
1 year ago
parent
66bf130b49
commit
61aceb63c5
@ -0,0 +1,58 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Button, Tag, message } from 'antd';
|
||||
import { RedoOutlined } from '@ant-design/icons';
|
||||
import { postTestDevice } from '@/services/alarm/Interfaces'
|
||||
import moment from 'moment';
|
||||
import { useIntl } from '@umijs/max';
|
||||
|
||||
|
||||
interface ImageSinglePopoverProps {
|
||||
values: any;
|
||||
reload: any;
|
||||
}
|
||||
|
||||
const CaptureButton: React.FC<ImageSinglePopoverProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const connection = () => {
|
||||
setLoading(true);
|
||||
postTestDevice({
|
||||
device_ip: props.values.device_ip,
|
||||
id: props.values.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.success) {
|
||||
message.success(res.msg);
|
||||
}
|
||||
props.reload();
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Tag bordered={false} color={props.values.test_result === 1? "success": ""} style={{
|
||||
// fontSize:14,
|
||||
color: props.values.test_result === 1? '#52C41A': "#999"
|
||||
}}>
|
||||
{props.values.test_result === 1 ? '在线' : '离线'}
|
||||
</Tag>
|
||||
<span>{moment(props.values.test_time).format('YYYY-MM-DD hh:mm:ss')}</span>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<RedoOutlined />}
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
connection()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CaptureButton;
|
||||
@ -0,0 +1,80 @@
|
||||
import { postInterfaces, postTestDevice } from '@/services/alarm/Interfaces';
|
||||
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Image, Form, message } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
proFormSmallItemStyleProps,
|
||||
proFormSmallModelWidth,
|
||||
} from '../../../../../config/defaultForm';
|
||||
import moment from 'moment';
|
||||
import styles from './CaptureForm.less'
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.UpdateInterfacesParams>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
captureModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.UpdateInterfacesParams>;
|
||||
reload: any;
|
||||
};
|
||||
const CaptureForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.UpdateInterfacesParams>();
|
||||
|
||||
return (
|
||||
<ModalForm<any>
|
||||
width={proFormSmallModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.capture',
|
||||
defaultMessage: `最近拍摄`,
|
||||
})}
|
||||
open={props.captureModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => {
|
||||
props.handleModal()
|
||||
},
|
||||
// okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
|
||||
// cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
submitter={false}
|
||||
onFinish={async (values) => {
|
||||
console.log(values);
|
||||
values.id = props.values.id
|
||||
postInterfaces(values)
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
||||
props.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
});
|
||||
|
||||
props.handleModal();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<div className={styles.captureImgBox}>
|
||||
<div className={styles.captureImgDescribe}>来源: <span>{props.values.device_name}</span></div>
|
||||
<div className={styles.captureImgDescribe}>触发时间: <span>{moment(props.values.appear_time).format('YYYY-MM-DD hh:mm:ss')}</span></div>
|
||||
<div className={styles.captureImgContent}>
|
||||
<Image
|
||||
width={100}
|
||||
preview={false}
|
||||
src={props.values.picture_path}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default CaptureForm;
|
||||
@ -0,0 +1,675 @@
|
||||
/**
|
||||
* 接口管理新建弹框
|
||||
*
|
||||
*/
|
||||
import { postInterfaces, postTestDevice } from '@/services/alarm/Interfaces';
|
||||
import {
|
||||
ModalForm,
|
||||
ProForm,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Form, message } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
proFormSmallItemStyleProps,
|
||||
proFormSmallModelWidth,
|
||||
} from '../../../../../config/defaultForm';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.UpdateInterfacesParams>;
|
||||
|
||||
export type CreateFormProps = {
|
||||
createModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.UpdateInterfacesParams>;
|
||||
reload: any;
|
||||
};
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.UpdateInterfacesParams>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [fileType, setFileType] = useState<string>('1');
|
||||
const [fileMethod, setFileMethod] = useState<string>('pull');
|
||||
const [methodName, setMethodName] = useState<string>('0');
|
||||
const connection = async () => {
|
||||
setLoading(true);
|
||||
console.log(form.getFieldsValue());
|
||||
postTestDevice({
|
||||
device_ip: form.getFieldsValue().device_ip,
|
||||
})
|
||||
.then((res) => {
|
||||
// message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
||||
// props.reload();
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
message.success(res.msg);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
});
|
||||
// setTimeout(() => {
|
||||
// setLoading(false);
|
||||
// }, 6000);
|
||||
};
|
||||
const handleChangeFileType = (value: string) => {
|
||||
setFileMethod(value);
|
||||
};
|
||||
const handleChangeFile = (value: string) => {
|
||||
setMethodName(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (fileMethod === 'upload' && methodName === '2') {
|
||||
setFileType(() => {
|
||||
return '3';
|
||||
});
|
||||
} else if (fileMethod === 'pull' && methodName === '1') {
|
||||
setFileType(() => {
|
||||
return '2';
|
||||
});
|
||||
} else {
|
||||
setFileType(() => {
|
||||
return '1';
|
||||
});
|
||||
}
|
||||
}, [methodName, fileMethod]);
|
||||
|
||||
return (
|
||||
<ModalForm<API.UpdateInterfacesParams>
|
||||
width={proFormSmallModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.addVideoSource',
|
||||
defaultMessage: '新建视频源',
|
||||
})}
|
||||
open={props.createModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => {
|
||||
setLoading(false);
|
||||
setFileMethod('pull');
|
||||
setMethodName('0');
|
||||
props.handleModal();
|
||||
},
|
||||
okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
|
||||
cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
console.log(values);
|
||||
postInterfaces(values)
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
||||
props.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
});
|
||||
props.handleModal();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_name"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.name"
|
||||
defaultMessage="接口名称"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.name',
|
||||
defaultMessage: '接口名称',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.name"
|
||||
defaultMessage="接口名称为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div style={{ width: proFormSmallItemStyleProps.width }}>
|
||||
<div style={{ marginBottom: 8 }}>获取方式</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<ProFormSelect
|
||||
width={250}
|
||||
options={[
|
||||
{
|
||||
value: 'pull',
|
||||
label: '文件拉取',
|
||||
},
|
||||
{
|
||||
value: 'upload',
|
||||
label: '文件上传',
|
||||
},
|
||||
]}
|
||||
onChange={handleChangeFileType}
|
||||
initialValue={fileMethod}
|
||||
name="fileType"
|
||||
// label="获取方式"
|
||||
/>
|
||||
<ProFormSelect
|
||||
width={250}
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: 'FTP',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '文件系统',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: 'FTP上传',
|
||||
},
|
||||
]}
|
||||
initialValue={methodName}
|
||||
onChange={handleChangeFile}
|
||||
name="file"
|
||||
// label="获取方式"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <ProFormText
|
||||
width={proFormSmallItemStyleProps.width - 96}
|
||||
name="device_ip"
|
||||
label={
|
||||
<FormattedMessage id="device.interface_manage.table.list.ip" defaultMessage="IP地址" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.ip',
|
||||
defaultMessage: 'IP地址',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.ip"
|
||||
defaultMessage="IP地址为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
addonAfter={
|
||||
<Button
|
||||
style={{ width:86,height:32,border:'1px solid #081FA8',borderRadius:4,fontSize: 14,color:'#081FA8' }}
|
||||
loading={loading}
|
||||
onClick={() => connection()}>
|
||||
{ loading ? '' : '连接测试'}
|
||||
</Button>
|
||||
}
|
||||
/> */}
|
||||
{fileType === '1' && (
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.ip"
|
||||
defaultMessage="IP地址"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.ip',
|
||||
defaultMessage: '接口地址',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.ip"
|
||||
defaultMessage="接口地址为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.port"
|
||||
defaultMessage="端口"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.port',
|
||||
defaultMessage: '端口',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.port"
|
||||
defaultMessage="端口为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.loginName"
|
||||
defaultMessage="登录名"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.loginName',
|
||||
defaultMessage: '登录名',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.loginName"
|
||||
defaultMessage="登录名为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.password"
|
||||
defaultMessage="密码"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.password',
|
||||
defaultMessage: '密码',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.password"
|
||||
defaultMessage="密码为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.fileDirectory"
|
||||
defaultMessage="文件目录"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.fileDirectory',
|
||||
defaultMessage: '文件目录',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.fileDirectory"
|
||||
defaultMessage="文件目录为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
)}
|
||||
{fileType === '2' && (
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.requestAddress"
|
||||
defaultMessage="请求地址"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.requestAddress',
|
||||
defaultMessage: '请求地址',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.requestAddress"
|
||||
defaultMessage="请求地址为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.requestKey"
|
||||
defaultMessage="请求Key"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.requestKey',
|
||||
defaultMessage: '请求Key',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.requestKey"
|
||||
defaultMessage="请求Key为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.secretKey"
|
||||
defaultMessage="秘钥"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.secretKey',
|
||||
defaultMessage: '秘钥',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.secretKey"
|
||||
defaultMessage="秘钥为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.bucket"
|
||||
defaultMessage="Bucket"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.bucket',
|
||||
defaultMessage: 'Bucket',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.bucket"
|
||||
defaultMessage="Bucket为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
)}
|
||||
{fileType === '3' && (
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.Code"
|
||||
defaultMessage="Code"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.Code',
|
||||
defaultMessage: 'Code',
|
||||
})}`}
|
||||
disabled
|
||||
required={true}
|
||||
initialValue={'123'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.Code"
|
||||
defaultMessage="Code为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.port"
|
||||
defaultMessage="端口"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.port',
|
||||
defaultMessage: '端口',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.port"
|
||||
defaultMessage="端口为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.loginName"
|
||||
defaultMessage="登录名"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.loginName',
|
||||
defaultMessage: '登录名',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.loginName"
|
||||
defaultMessage="登录名为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.password"
|
||||
defaultMessage="密码"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.password',
|
||||
defaultMessage: '密码',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.password"
|
||||
defaultMessage="密码为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.fileDirectory"
|
||||
defaultMessage="文件目录"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.fileDirectory',
|
||||
defaultMessage: '文件目录',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.fileDirectory"
|
||||
defaultMessage="文件目录为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
)}
|
||||
<ProFormTextArea
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="note"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.remark"
|
||||
defaultMessage="备注"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.remark',
|
||||
defaultMessage: '备注',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default CreateForm;
|
||||
@ -0,0 +1,674 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-11-01 13:56:33
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-26 15:01:08
|
||||
* @FilePath: \general-ai-platform-web\src\pages\Device\DeviceCategoryList\components\UpdateForm.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
|
||||
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
|
||||
import { postInterfaces, postTestDevice } from '@/services/alarm/Interfaces';
|
||||
import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Button, Form, message } from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
proFormSmallItemStyleProps,
|
||||
proFormSmallModelWidth,
|
||||
} from '../../../../../config/defaultForm';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.UpdateInterfacesParams>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
updateModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.UpdateInterfacesParams>;
|
||||
reload: any;
|
||||
};
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.UpdateInterfacesParams>();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [fileType, setFileType] = useState<string>('1');
|
||||
const [fileMethod, setFileMethod] = useState<string>('pull');
|
||||
const [methodName, setMethodName] = useState<string>('0');
|
||||
const connection = () => {
|
||||
setLoading(true);
|
||||
console.log(props.values);
|
||||
postTestDevice({
|
||||
device_ip: form.getFieldsValue().device_ip,
|
||||
id: props.values.id,
|
||||
})
|
||||
.then((res) => {
|
||||
// message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
||||
// props.reload();
|
||||
console.log(res);
|
||||
if(res.success) {
|
||||
message.success(res.msg);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
const handleChangeFileType = (value: string) => {
|
||||
setFileMethod(value);
|
||||
};
|
||||
const handleChangeFile = (value: string) => {
|
||||
setMethodName(value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (fileMethod === 'upload' && methodName === '2') {
|
||||
setFileType(() => {
|
||||
return '3';
|
||||
});
|
||||
} else if (fileMethod === 'pull' && methodName === '1') {
|
||||
setFileType(() => {
|
||||
return '2';
|
||||
});
|
||||
} else {
|
||||
setFileType(() => {
|
||||
return '1';
|
||||
});
|
||||
}
|
||||
}, [methodName, fileMethod]);
|
||||
return (
|
||||
<ModalForm<any>
|
||||
width={proFormSmallModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.updatVideoSource',
|
||||
defaultMessage: `编辑${props.values.device_name}`,
|
||||
})}
|
||||
open={props.updateModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => {
|
||||
setLoading(false)
|
||||
props.handleModal()
|
||||
},
|
||||
okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
|
||||
cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
console.log(values);
|
||||
values.id = props.values.id
|
||||
postInterfaces(values)
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
||||
props.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
});
|
||||
|
||||
props.handleModal();
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_name"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.name"
|
||||
defaultMessage="接口名称"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.name',
|
||||
defaultMessage: '接口名称',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.name"
|
||||
defaultMessage="接口名称为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div style={{ width: proFormSmallItemStyleProps.width }}>
|
||||
<div style={{ marginBottom: 8 }}>获取方式</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<ProFormSelect
|
||||
width={250}
|
||||
options={[
|
||||
{
|
||||
value: 'pull',
|
||||
label: '文件拉取',
|
||||
},
|
||||
{
|
||||
value: 'upload',
|
||||
label: '文件上传',
|
||||
},
|
||||
]}
|
||||
onChange={handleChangeFileType}
|
||||
initialValue={fileMethod}
|
||||
name="fileType"
|
||||
// label="获取方式"
|
||||
/>
|
||||
<ProFormSelect
|
||||
width={250}
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: 'FTP',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '文件系统',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: 'FTP上传',
|
||||
},
|
||||
]}
|
||||
initialValue={methodName}
|
||||
onChange={handleChangeFile}
|
||||
name="file"
|
||||
// label="获取方式"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <ProFormText
|
||||
width={proFormSmallItemStyleProps.width - 96}
|
||||
name="device_ip"
|
||||
label={
|
||||
<FormattedMessage id="device.interface_manage.table.list.ip" defaultMessage="IP地址" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.ip',
|
||||
defaultMessage: 'IP地址',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.ip"
|
||||
defaultMessage="IP地址为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
addonAfter={
|
||||
<Button
|
||||
style={{ width:86,height:32,border:'1px solid #081FA8',borderRadius:4,fontSize: 14,color:'#081FA8' }}
|
||||
loading={loading}
|
||||
onClick={() => connection()}>
|
||||
{ loading ? '' : '连接测试'}
|
||||
</Button>
|
||||
}
|
||||
/> */}
|
||||
{fileType === '1' && (
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.ip"
|
||||
defaultMessage="IP地址"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.ip',
|
||||
defaultMessage: '接口地址',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.ip"
|
||||
defaultMessage="接口地址为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.port"
|
||||
defaultMessage="端口"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.port',
|
||||
defaultMessage: '端口',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.port"
|
||||
defaultMessage="端口为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.loginName"
|
||||
defaultMessage="登录名"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.loginName',
|
||||
defaultMessage: '登录名',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.loginName"
|
||||
defaultMessage="登录名为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.password"
|
||||
defaultMessage="密码"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.password',
|
||||
defaultMessage: '密码',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.password"
|
||||
defaultMessage="密码为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.fileDirectory"
|
||||
defaultMessage="文件目录"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.fileDirectory',
|
||||
defaultMessage: '文件目录',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.fileDirectory"
|
||||
defaultMessage="文件目录为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
)}
|
||||
{fileType === '2' && (
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.requestAddress"
|
||||
defaultMessage="请求地址"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.requestAddress',
|
||||
defaultMessage: '请求地址',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.requestAddress"
|
||||
defaultMessage="请求地址为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.requestKey"
|
||||
defaultMessage="请求Key"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.requestKey',
|
||||
defaultMessage: '请求Key',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.requestKey"
|
||||
defaultMessage="请求Key为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.secretKey"
|
||||
defaultMessage="秘钥"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.secretKey',
|
||||
defaultMessage: '秘钥',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.secretKey"
|
||||
defaultMessage="秘钥为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.bucket"
|
||||
defaultMessage="Bucket"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.bucket',
|
||||
defaultMessage: 'Bucket',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.bucket"
|
||||
defaultMessage="Bucket为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
)}
|
||||
{fileType === '3' && (
|
||||
<ProForm.Group>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.Code"
|
||||
defaultMessage="Code"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.Code',
|
||||
defaultMessage: 'Code',
|
||||
})}`}
|
||||
disabled
|
||||
required={true}
|
||||
initialValue={'123'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.Code"
|
||||
defaultMessage="Code为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.port"
|
||||
defaultMessage="端口"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.port',
|
||||
defaultMessage: '端口',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.port"
|
||||
defaultMessage="端口为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.loginName"
|
||||
defaultMessage="登录名"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.loginName',
|
||||
defaultMessage: '登录名',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.loginName"
|
||||
defaultMessage="登录名为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.password"
|
||||
defaultMessage="密码"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.password',
|
||||
defaultMessage: '密码',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.password"
|
||||
defaultMessage="密码为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="device_api"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.fileDirectory"
|
||||
defaultMessage="文件目录"
|
||||
/>
|
||||
}
|
||||
disabled
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.fileDirectory',
|
||||
defaultMessage: '文件目录',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.rule.required.fileDirectory"
|
||||
defaultMessage="文件目录为必填项"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
)}
|
||||
<ProFormTextArea
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="note"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="device.interface_manage.table.list.remark"
|
||||
defaultMessage="备注"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '请输入',
|
||||
})}${intl.formatMessage({
|
||||
id: 'device.interface_manage.table.list.remark',
|
||||
defaultMessage: '备注',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default UpdateForm;
|
||||
@ -0,0 +1,327 @@
|
||||
import AlarmLevelBox from '@/components/DictionaryBox/alarmLevel';
|
||||
import TableActionCard from '@/components/TableActionCard';
|
||||
import IsDelete from '@/components/TableActionCard/isDelete';
|
||||
import { alarmLevelStatusEnum } from '@/enums/status';
|
||||
import {
|
||||
deleteDeviceCategoryDeleteDeviceCategory,
|
||||
postDeviceCategoryGetDeviceCategoryList,
|
||||
} from '@/services/device/DeviceCategory';
|
||||
import { getInterfaces, postInterfaces, postTestDevice } from '@/services/alarm/Interfaces'
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { PageContainer, ProTable } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Button, Space, Tag, message } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { proTablePaginationOptions } from '../../../../config/defaultTable';
|
||||
import { proIconForTableActionStyle } from '../../../../config/defaultIcon';
|
||||
import { EditOutlined, InstagramOutlined, RedoOutlined } from '@ant-design/icons';
|
||||
import CreateForm from './components/CreateForm';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
import CaptureForm from './components/CaptureForm';
|
||||
import CaptureButton from './components/CaptureButton';
|
||||
import moment from 'moment';
|
||||
const RealTimeInterfaceManageList: React.FC = () => {
|
||||
/**
|
||||
* @en-US International configuration
|
||||
* @zh-CN 国际化配置
|
||||
* */
|
||||
const intl = useIntl();
|
||||
const actionRef = useRef<ActionType>();
|
||||
// 动态设置每页数量
|
||||
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||
|
||||
const handleDestroy = async (selectedRow: API.UpdateInterfacesParams) => {
|
||||
postInterfaces({ id: selectedRow.id, device_status: '3' } )
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
||||
actionRef.current?.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
});
|
||||
};
|
||||
|
||||
const [currentRow, setCurrentRow] = useState<API.UpdateInterfacesParams>();
|
||||
/**
|
||||
* @en-US Pop-up window of new window
|
||||
* @zh-CN 新建窗口的弹窗
|
||||
* */
|
||||
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||
const handleCreateModal = () => {
|
||||
if (createModalOpen) {
|
||||
setCreateModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setCreateModalOpen(true);
|
||||
}
|
||||
};
|
||||
// 编辑弹框
|
||||
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||
|
||||
const handleUpdateModal = () => {
|
||||
if (updateModalOpen) {
|
||||
setUpdateModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setUpdateModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 最近拍摄
|
||||
const [captureModalOpen, setCaptureModalOpen] = useState<boolean>(false);
|
||||
|
||||
const handleCaptureModal = () => {
|
||||
console.log(captureModalOpen);
|
||||
if (captureModalOpen) {
|
||||
setCaptureModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setCaptureModalOpen(true);
|
||||
}
|
||||
};
|
||||
// 测试连接
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const connection = (value: any) => {
|
||||
setLoading(true);
|
||||
postTestDevice({
|
||||
device_ip: value.device_ip,
|
||||
id: value.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if(res.success) {
|
||||
message.success(res.msg);
|
||||
}
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const columns: ProColumns<API.UpdateInterfacesParams>[] = [
|
||||
{
|
||||
title: <FormattedMessage id="device.interface_manage.table.list.videoName" defaultMessage="接口名称" />,
|
||||
dataIndex: 'device_name',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="device.interface_manage.table.list.obtainMode" defaultMessage="获取方式" />,
|
||||
dataIndex: 'device_ip',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: <FormattedMessage id="device.interface_manage.table.list.obtainStatus" defaultMessage="设备状态" />,
|
||||
dataIndex: 'test_result',
|
||||
hideInSearch: true,
|
||||
render: (dom,entity) => {
|
||||
return (
|
||||
<div>
|
||||
<Tag bordered={false} color={dom === 1? "success": ""} style={{
|
||||
// fontSize:14,
|
||||
color: dom === 1? '#52C41A': "#999"
|
||||
}}>
|
||||
{dom === 1 ? '获取成功' : '获取失败'}
|
||||
</Tag>
|
||||
<span>{moment(entity.appear_time).format('YYYY-MM-DD hh:mm:ss')}</span>
|
||||
{/* <Button
|
||||
type="link"
|
||||
icon={<RedoOutlined />}
|
||||
loading={loading}
|
||||
onClick={() => {
|
||||
connection(entity)
|
||||
}}
|
||||
/> */}
|
||||
</div>
|
||||
// <CaptureButton
|
||||
// values={entity || {}}
|
||||
// reload={actionRef.current?.reload}
|
||||
// />
|
||||
);
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: <FormattedMessage id="device.interface_manage.table.list.address" defaultMessage="接口地址" />,
|
||||
// dataIndex: 'device_api',
|
||||
// hideInSearch: true,
|
||||
// },
|
||||
// {
|
||||
// title: <FormattedMessage id="device.interface_manage.table.list.testTime" defaultMessage="状态查询时间" />,
|
||||
// dataIndex: 'test_time',
|
||||
// sorter: true,
|
||||
// hideInSearch: true,
|
||||
// valueType: 'dateTime',
|
||||
// },
|
||||
{
|
||||
title: <FormattedMessage id="device.interface_manage.table.list.createTime" defaultMessage="创建时间" />,
|
||||
dataIndex: 'create_time',
|
||||
sorter: true,
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
width: '260px',
|
||||
fixed: 'right',
|
||||
render: (_, record) => [
|
||||
<TableActionCard
|
||||
key="TableActionCardRef"
|
||||
renderActions={[
|
||||
// {
|
||||
// key: 'capture',
|
||||
// renderDom: (
|
||||
// <Button
|
||||
// key="capture"
|
||||
// type="link"
|
||||
// size="small"
|
||||
// style={{
|
||||
// color:"#081FA8",
|
||||
// }}
|
||||
// icon={<InstagramOutlined style={{
|
||||
// marginRight: 3
|
||||
// }} />}
|
||||
// onClick={() => {
|
||||
// console.log('11');
|
||||
// setCaptureModalOpen(true);
|
||||
// setCurrentRow(record);
|
||||
// }}
|
||||
// >
|
||||
// {/* 最近拍摄 */}
|
||||
// <FormattedMessage id="device.interface_manage.table.list.capture" defaultMessage="最近拍摄" />
|
||||
// </Button>
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
key: 'update',
|
||||
renderDom: (
|
||||
<Button
|
||||
key="update"
|
||||
type="link"
|
||||
size="small"
|
||||
style={{
|
||||
color:"#081FA8",
|
||||
}}
|
||||
icon={<EditOutlined style={{
|
||||
marginRight: 3
|
||||
}} />}
|
||||
onClick={() => {
|
||||
setUpdateModalOpen(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="common.edit" defaultMessage="编辑" />
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'destroy',
|
||||
renderDom: (
|
||||
<IsDelete
|
||||
deleteApi={() => {
|
||||
handleDestroy(record).then(() => {});
|
||||
}}
|
||||
></IsDelete>
|
||||
),
|
||||
},
|
||||
]}
|
||||
></TableActionCard>,
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<PageContainer
|
||||
title={false}
|
||||
content={
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<div style={{
|
||||
fontWeight: 600,
|
||||
fontSize: 20,
|
||||
color: '#333'
|
||||
}}>离线设备管理</div>
|
||||
<Button type="primary"
|
||||
onClick={() => {
|
||||
setCreateModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="device.interface_manage.table.list.addVideoSource" defaultMessage="新建视频源" />
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ProTable<API.DeviceCategory>
|
||||
cardProps={{
|
||||
bodyStyle: {
|
||||
padding: 20
|
||||
}
|
||||
}}
|
||||
options={{ fullScreen: false, setting: false, density: false, reload: false }}
|
||||
actionRef={actionRef}
|
||||
rowKey="key"
|
||||
search={false}
|
||||
showSorterTooltip={false}
|
||||
pagination={{
|
||||
...proTablePaginationOptions,
|
||||
pageSize: currentPageSize,
|
||||
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
|
||||
}}
|
||||
columnsState={{
|
||||
persistenceKey: 'device_category_list',
|
||||
persistenceType: 'localStorage',
|
||||
}}
|
||||
request={async (params = {}, sort) => {
|
||||
const { current, ...rest } = params;
|
||||
const reqParams = {
|
||||
page: current,
|
||||
desc: false,
|
||||
orderKey: '',
|
||||
...rest,
|
||||
};
|
||||
if (sort && Object.keys(sort).length) {
|
||||
reqParams.orderKey = Object.keys(sort)[0];
|
||||
let sort_select = sort[reqParams.orderKey];
|
||||
reqParams.desc = sort_select === 'descend';
|
||||
}
|
||||
// let resp = await postDeviceCategoryGetDeviceCategoryList({ ...reqParams });
|
||||
let resp = await getInterfaces({ ...reqParams });
|
||||
return {
|
||||
data: resp.data.results.map((v: API.DeviceCategory) => {
|
||||
return { ...v, key: v.id };
|
||||
}),
|
||||
success: resp.success,
|
||||
total: resp.data.count,
|
||||
current: resp.data.page,
|
||||
pageSize: resp.data.pageSize,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
<CreateForm
|
||||
createModalOpen={createModalOpen}
|
||||
values={currentRow || {}}
|
||||
handleModal={handleCreateModal}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
<UpdateForm
|
||||
updateModalOpen={updateModalOpen}
|
||||
values={currentRow || {}}
|
||||
handleModal={handleUpdateModal}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
<CaptureForm
|
||||
captureModalOpen={captureModalOpen}
|
||||
values={currentRow || {}}
|
||||
handleModal={handleCaptureModal}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default RealTimeInterfaceManageList;
|
||||
Loading…
Reference in New Issue