Yaxin
/
Uighur-Recognition-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 接口管理模块连接测试

Browse Source
develop
JINGYJ 1 year ago
parent 87f6b46a40
commit cd4590525c
10 changed files with 240 additions and 14 deletions
Show Stats Download Patch File Download Diff File

1
src/components/WebRtcPlayer/index.tsx
Unescape Escape View File

@ -7,6 +7,7 @@ export type Props = {
is_open: boolean;
};
const WebRTCStreamer : React.FC<Props> = (props) =>{
console.log(props);
let webRtcServer: { connect: (arg0: string) => void; disconnect: () => void; } | null = null;
useEffect(() => {

2
src/locales/zh-CN/device.ts
Unescape Escape View File

@ -74,6 +74,7 @@ export const interface_manage: { [key: string]: string } = {
'device.interface_manage.table.list.id': 'ID',
'device.interface_manage.table.list.name': '接口名称',
'device.interface_manage.table.list.address': '接口地址',
'device.interface_manage.table.list.ip': 'IP地址',
'device.interface_manage.table.list.createTime': '创建时间',
'device.interface_manage.table.list.remark': '备注',
'device.interface_manage.table.list.add': '新建设备/输入源',
@ -81,4 +82,5 @@ export const interface_manage: { [key: string]: string } = {
'device.interface_manage.table.list.updatePic': '编辑图像获取接口',
'device.interface_manage.table.rule.required.name': '接口名称为必填项',
'device.interface_manage.table.rule.required.address': '接口地址为必填项',
'device.interface_manage.table.rule.required.ip': 'IP地址为必填项',
};

2
src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx
Unescape Escape View File

@ -95,7 +95,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
useEffect(()=>{
if(props.currentDefaultFieldsData){
// 如果是在模型详情新增版本，ModelFkId不可编辑
console.log(props.values,'currentDefaultFieldsData')
// console.log(props.values,'currentDefaultFieldsData')
setIsHasModelFkId(true)
} else {
setIsHasModelFkId(false)

2
src/pages/Resource/ModelVersionList/components/UpdateForm.tsx
Unescape Escape View File

@ -35,7 +35,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
useEffect(()=>{
if(props.currentDefaultFieldsData){
// 如果是在模型详情新增版本，ModelFkId不可编辑
console.log(props.values,'currentDefaultFieldsData')
// console.log(props.values,'currentDefaultFieldsData')
setIsHasModelFkId(true)
} else {
setIsHasModelFkId(false)

70
src/pages/Setting/interfaceManage/components/CreateForm.tsx
Unescape Escape View File

@ -6,9 +6,9 @@ import { postBusinessImageCreateBusinessImage } from '@/services/resource/Busine
import { ModalForm, ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Button, Form, message } from 'antd';
import { postInterfaces } from '@/services/alarm/Interfaces';
import { postInterfaces, postTestDevice } from '@/services/alarm/Interfaces';
import { proFormSmallItemStyleProps, proFormSmallModelWidth } from '../../../../../config/defaultForm';
import React from 'react';
import React, { useState } from 'react';
export type FormValueType = {
target?: string;
template?: string;
@ -26,6 +26,29 @@ export type CreateFormProps = {
const CreateForm: React.FC<CreateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.UpdateInterfacesParams>();
const [loading, setLoading] = useState<boolean>(false);
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);
};
return (
<ModalForm<API.UpdateInterfacesParams>
@ -39,9 +62,12 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
onCancel: () => {
setLoading(false)
props.handleModal()
},
okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
}}
submitTimeout={2000}
onFinish={async (values) => {
@ -111,6 +137,40 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
},
]}
/>
<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>
}
/>
<ProFormTextArea
width={proFormSmallItemStyleProps.width}
name="note"

72
src/pages/Setting/interfaceManage/components/UpdateForm.tsx
Unescape Escape View File

@ -8,11 +8,11 @@
*/
import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
import { postInterfaces } from '@/services/alarm/Interfaces';
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 { Form, message } from 'antd';
import React from 'react';
import { Button, Form, message } from 'antd';
import React, { useState } from 'react';
import {
proFormSmallItemStyleProps,
proFormSmallModelWidth,
@ -34,6 +34,28 @@ export type UpdateFormProps = {
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.UpdateInterfacesParams>();
const [loading, setLoading] = useState<boolean>(false);
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);
});
};
return (
<ModalForm<any>
@ -47,9 +69,12 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
onCancel: () => {
setLoading(false)
props.handleModal()
},
okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '确认' }),
cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '取消' }),
}}
submitTimeout={2000}
onFinish={async (values) => {
@ -122,6 +147,41 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
},
]}
/>
<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}
initialValue={props.values.device_ip}
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>
}
/>
<ProFormTextArea
width={proFormSmallItemStyleProps.width}
name="note"

43
src/pages/System/UserList/components/VideoModal.tsx
Unescape Escape View File

@ -0,0 +1,43 @@
import React, { useState, useEffect } from 'react';
import ReactPlayer from 'react-player';
//样式文件注意要加上
import 'video.js/dist/video-js.css';
import { Modal } from 'antd';
export type FormValueType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Device>;
export type VideoModalProps = {
modalOpen: boolean;
handleModal: () => void;
values: Partial<API.Device>;
reload: any;
videoServerParam: API.RtspRes;
};
const VideoModal: React.FC<VideoModalProps> = (props) => {
const videoUrl = 'rtsp://admin:@192.168.10.11';
return (
<Modal title="播放视频" open={props.modalOpen}
width={1280}
onOk={props.handleModal} onCancel={props.handleModal}
footer={null}>
<ReactPlayer
url={videoUrl}
controls={true}
width="100%"
type ='audio/rtsp'
height="auto"
/>
</Modal>
)
}
export default VideoModal;

42
src/pages/System/UserList/index.tsx
Unescape Escape View File

@ -16,6 +16,7 @@ import { proIconForTableActionStyle } from '../../../../config/defaultIcon';
import { EditOutlined } from '@ant-design/icons';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
// import VideoModal from './components/VideoModal';
const UserList: React.FC = () => {
/**
* @en-US International configuration
@ -62,6 +63,17 @@ const UserList: React.FC = () => {
setUpdateModalOpen(true);
}
};
// const [videoModalOpen, setVideoModalOpen] = useState<boolean>(false);
// const [videoServerParam, setVideoServerParam] = useState<API.RtspRes>({});
// const handleVideoModal = () => {
// if (videoModalOpen) {
// setVideoModalOpen(false);
// setCurrentRow(undefined);
// setVideoServerParam({});
// } else {
// setVideoModalOpen(true);
// }
// };
const columns: ProColumns<API.UserList>[] = [
{
@ -125,6 +137,29 @@ const UserList: React.FC = () => {
></IsDelete>
),
},
// {
// key: 'video',
// renderDom: (
// <Button
// key="video"
// type="link"
// size="small"
// style={{
// color:"#081FA8",
// }}
// icon={<EditOutlined style={{
// marginRight: 3
// }} />}
// onClick={() => {
// setVideoModalOpen(true);
// setCurrentRow(record);
// }}
// >
// <FormattedMessage id="common.video" defaultMessage="视频" />
// </Button>
// ),
// }
]}
></TableActionCard>,
],
@ -212,6 +247,13 @@ const UserList: React.FC = () => {
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
{/* <VideoModal
modalOpen={videoModalOpen}
handleModal={handleVideoModal}
values={currentRow || {}}
videoServerParam={videoServerParam}
reload={actionRef.current?.reload}
/> */}
</PageContainer>
);
};

19
src/services/alarm/Interfaces.ts
Unescape Escape View File

@ -24,7 +24,7 @@ export async function getInterfaces(
/** 更新接口列表 */
export async function postInterfaces(
body: API.UpdateInterfacesParams,
body: API.UpdateInterfacesParams | any,
options?: { [key: string]: any },
) {
return request<API.Response & { data?: API.PageResult; msg?: string }>(
@ -39,3 +39,20 @@ export async function postInterfaces(
},
);
}
/** 测试接口 */
export async function postTestDevice(
body: API.UpdateInterfacesParams | any,
options?: { [key: string]: any },
) {
return request<API.Response & { data?: API.PageResult; msg?: string }>(
`/api/test_device/`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || {}),
},
);
}

1
src/services/alarm/typings.d.ts vendored
Unescape Escape View File

@ -77,6 +77,7 @@ declare namespace API {
device_code?: string; // 设备代码
is_use?: number; // 是否启用
device_api?: string; // 设备地址
device_ip?: string; // IP地址
note?: string; // 备注
device_status?: string; // 设备状态
id?: string;

Write Preview
Loading…
Cancel
Save