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

src/components/WebRtcPlayer/index.tsx

@@ -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(() => {

src/locales/zh-CN/device.ts

@@ -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地址为必填项',
 };

src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx

@@ -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)

src/pages/Resource/ModelVersionList/components/UpdateForm.tsx

@@ -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)

src/pages/Setting/interfaceManage/components/CreateForm.tsx

@@ -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(),
+        onCancel: () => {
-        okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
+          setLoading(false)
-        cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
+          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"

src/pages/Setting/interfaceManage/components/UpdateForm.tsx

@@ -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 { Button, Form, message } from 'antd';
-import React from 'react';
+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(),
+        onCancel: () => {
-        okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
+          setLoading(false)
-        cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
+          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"

src/pages/System/UserList/components/VideoModal.tsx

@@ -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;

src/pages/System/UserList/index.tsx

@@ -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>
   );
 };

src/services/alarm/Interfaces.ts

@@ -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 || {}),
+    },
+  );
+}

src/services/alarm/typings.d.ts

@@ -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;