From 61aceb63c53053c649a8ffa117bf238f824f238a Mon Sep 17 00:00:00 2001 From: JINGYJ <1458671527@qq.com> Date: Mon, 1 Apr 2024 20:25:07 +0800 Subject: [PATCH] =?UTF-8?q?fect:=20=E7=A6=BB=E7=BA=BF=E5=91=8A=E8=AD=A6?= =?UTF-8?q?=E8=A7=84=E5=88=99=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.ts | 20 +- src/app.tsx | 40 +- src/locales/zh-CN/device.ts | 22 + .../AlarmList/components/AlarmDetails.less | 3 +- .../components/ImageSinglePopover.tsx | 2 +- .../AlarmList/components/ImageWithPopover.tsx | 4 +- src/pages/Alarm/InvolvedList/index.tsx | 52 +- src/pages/Alarm/InvolvedUploadList/index.tsx | 53 +- .../components/UpdateForm.tsx | 4 +- .../components/UpdateMultiForm.tsx | 4 +- .../components/UpdateTimeForm.tsx | 4 +- src/pages/Alarm/OfflineAlarmRules/index.tsx | 4 +- .../components/CaptureButton.tsx | 58 ++ .../components/CaptureForm.less | 0 .../components/CaptureForm.tsx | 80 +++ .../components/CreateForm.tsx | 675 ++++++++++++++++++ .../components/UpdateForm.tsx | 674 +++++++++++++++++ .../Setting/RealTimeInterfaceManage/index.tsx | 327 +++++++++ src/pages/Setting/interfaceManage/index.tsx | 3 +- src/pages/User/Login/index1.tsx | 40 +- .../components/AlarmDetails.less | 5 +- .../components/ImageSinglePopover.tsx | 2 +- .../components/ImageWithPopover.tsx | 4 +- src/services/alarm/AlarmRules.ts | 42 +- 24 files changed, 2055 insertions(+), 67 deletions(-) create mode 100644 src/pages/Setting/RealTimeInterfaceManage/components/CaptureButton.tsx create mode 100644 src/pages/Setting/RealTimeInterfaceManage/components/CaptureForm.less create mode 100644 src/pages/Setting/RealTimeInterfaceManage/components/CaptureForm.tsx create mode 100644 src/pages/Setting/RealTimeInterfaceManage/components/CreateForm.tsx create mode 100644 src/pages/Setting/RealTimeInterfaceManage/components/UpdateForm.tsx create mode 100644 src/pages/Setting/RealTimeInterfaceManage/index.tsx diff --git a/config/routes.ts b/config/routes.ts index c751f1a..25ec690 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -355,11 +355,11 @@ export default [ // path: '/alarm_rules', // component: 'Alarm/alarmRules', // }, - { - name: 'interfaceManage', - path: '/interfaceManage', - component: 'Setting/interfaceManage', - }, + // { + // name: 'interfaceManage', + // path: '/interfaceManage', + // component: 'Setting/interfaceManage', + // }, // { // name: 'userList', // path: '/userList', @@ -401,6 +401,11 @@ export default [ path: '/realTime/involved-list', component: 'Alarm/InvolvedList', }, + { + name: 'interfaceManage', + path: '/realTime/interfaceManage', + component: 'Setting/interfaceManage', + }, ], }, { @@ -423,6 +428,11 @@ export default [ path: '/offline/involved-list-upload', component: 'Alarm/InvolvedUploadList', }, + { + name: 'RealTimeInterfaceManage', + path: '/offline/RealTimeInterfaceManage', + component: 'Setting/RealTimeInterfaceManage', + }, ], }, ]; diff --git a/src/app.tsx b/src/app.tsx index f9afe31..18228fe 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -99,6 +99,16 @@ export async function getInitialState(): Promise<{ "path": "/realTime/involved-list", "routes": [], "title": "告警汇总", + }, + { + "access": "", + "component": "Setting/interfaceManage", + "icon": "", + "key": "", + "name": "interfaceManage", + "path": "/realTime/interfaceManage", + "routes": [], + "title": "接口管理", } ] }, @@ -170,19 +180,29 @@ export async function getInitialState(): Promise<{ "path": "/offline/involved-list-upload", "routes": [], "title": "告警汇总", + }, + { + "access": "", + "component": "Setting/RealTimeInterfaceManage", + "icon": "", + "key": "", + "name": "RealTimeInterfaceManage", + "path": "/offline/RealTimeInterfaceManage", + "routes": [], + "title": "设备管理", } ] }, - { - "path": "interfaceManage", - "key": "", - "name": "interfaceManage", - "icon": "BranchesOutlined", - "access": "", - "component": "Hidden", - "title": "接口管理", - "routes": [] - }, + // { + // "path": "interfaceManage", + // "key": "", + // "name": "interfaceManage", + // "icon": "BranchesOutlined", + // "access": "", + // "component": "Hidden", + // "title": "接口管理", + // "routes": [] + // }, // { // "path": "userList", // "key": "", diff --git a/src/locales/zh-CN/device.ts b/src/locales/zh-CN/device.ts index 52e1108..533a8af 100644 --- a/src/locales/zh-CN/device.ts +++ b/src/locales/zh-CN/device.ts @@ -82,7 +82,29 @@ export const interface_manage: { [key: string]: string } = { 'device.interface_manage.table.list.addPic': '新建图像获取接口', 'device.interface_manage.table.list.updatePic': '编辑图像获取接口', 'device.interface_manage.table.list.capture': '最近拍摄', + 'device.interface_manage.table.list.port': '端口', + 'device.interface_manage.table.list.loginName': '登录名', + 'device.interface_manage.table.list.password': '密码', + 'device.interface_manage.table.list.fileDirectory': '文件目录', + 'device.interface_manage.table.list.requestAddress': '请求地址', + 'device.interface_manage.table.list.requestKey': '请求Key', + 'device.interface_manage.table.list.secretKey': '秘钥', + 'device.interface_manage.table.list.bucket': 'Bucket', + 'device.interface_manage.table.list.Code': 'Code', + 'device.interface_manage.table.list.addVideoSource': '新建视频源', + 'device.interface_manage.table.list.updatVideoSource': '编辑视频源', + 'device.interface_manage.table.list.videoName': '视频源名称', + 'device.interface_manage.table.list.obtainMode': '获取方式', + 'device.interface_manage.table.list.obtainStatus': '获取状态', 'device.interface_manage.table.rule.required.name': '接口名称为必填项', 'device.interface_manage.table.rule.required.address': '接口地址为必填项', 'device.interface_manage.table.rule.required.ip': 'IP地址为必填项', + 'device.interface_manage.table.rule.required.loginName': '登录名为必填项', + 'device.interface_manage.table.rule.required.password': '密码为必填项', + 'device.interface_manage.table.rule.required.fileDirectory': '文件目录为必填项', + 'device.interface_manage.table.rule.required.requestAddress': '请求地址为必填项', + 'device.interface_manage.table.rule.required.requestKey': '请求Key为必填项', + 'device.interface_manage.table.rule.required.secretKey': '请求Key为必填项', + 'device.interface_manage.table.rule.required.bucket': 'Bucket为必填项', + 'device.interface_manage.table.rule.required.Code': 'Code为必填项', }; diff --git a/src/pages/Alarm/AlarmList/components/AlarmDetails.less b/src/pages/Alarm/AlarmList/components/AlarmDetails.less index c1b3705..0cae56c 100644 --- a/src/pages/Alarm/AlarmList/components/AlarmDetails.less +++ b/src/pages/Alarm/AlarmList/components/AlarmDetails.less @@ -69,7 +69,7 @@ .alarmImgContent { box-sizing: border-box; margin-bottom: 24px; - padding: 16px; + padding: 16px 0 16px 16px; width: 784px; // height: 172px; background: #F7F7F7; @@ -77,6 +77,7 @@ border: 1px dashed #DCDCDC; display: flex; justify-content: center; + flex-wrap: wrap; } } .myButtonDisabled{ diff --git a/src/pages/Alarm/AlarmList/components/ImageSinglePopover.tsx b/src/pages/Alarm/AlarmList/components/ImageSinglePopover.tsx index 8937657..3b365ac 100644 --- a/src/pages/Alarm/AlarmList/components/ImageSinglePopover.tsx +++ b/src/pages/Alarm/AlarmList/components/ImageSinglePopover.tsx @@ -62,7 +62,7 @@ const ImageSinglePopover: React.FC = ({ src, involved, // }; return ( -
+
= ({ src, involved, inde }; return ( -
+
= ({ src, involved, inde onOpenChange={handleOpenChange} > + - + 确定 + +
+ 仅显示重点关注
className="gn" diff --git a/src/pages/Alarm/InvolvedUploadList/index.tsx b/src/pages/Alarm/InvolvedUploadList/index.tsx index 2e228c3..e17b3a2 100644 --- a/src/pages/Alarm/InvolvedUploadList/index.tsx +++ b/src/pages/Alarm/InvolvedUploadList/index.tsx @@ -1,6 +1,6 @@ import { alarmRulesEnums } from '@/enums/status'; import { ActionType, PageContainer, ProCard, ProList, useIntl } from '@ant-design/pro-components'; -import { Image, Modal, Tabs } from 'antd'; +import { Button, Checkbox, DatePicker, Image, Modal, Tabs } from 'antd'; import React, { useEffect, useRef, useState } from 'react'; import { proTablePaginationOptions } from '../../../../config/defaultTable'; // import DeviceStatusCard from './components/DeviceStatusCard'; @@ -10,6 +10,9 @@ import { QuestionCircleFilled } from '@ant-design/icons'; import InvolvedDetails from './components/InvolvedDetails'; import moment from 'moment'; import ImageWithPopover from './components/ImageWithPopover'; +import { DatePickerProps } from 'antd/lib/date-picker'; +import locale from 'antd/es/date-picker/locale/zh_CN'; +import { CheckboxProps } from 'antd/lib/checkbox'; /** * @交互说明 @@ -65,6 +68,9 @@ const InvolvedUploadList: React.FC = () => { const [tab, setTab] = useState(alarmRulesEnums[0].key); const [tabs, setTabs] = useState([]); + const [importDate, setImportDate] = useState(null); + const [innerDate, setInnerDate] = useState(null); + const [classify, setClassify] = useState('all'); // const changeProjectTab = (key: string) => { // setTab(key); // console.log(key); @@ -151,7 +157,7 @@ const InvolvedUploadList: React.FC = () => { display: 'flex', alignItems: 'center', padding: 20, - justifyContent: 'flex-start', + justifyContent: 'flex-start' }} onClick={() => { console.log(index, 'index'); @@ -224,12 +230,13 @@ const InvolvedUploadList: React.FC = () => { } // 初始化加载 - async function initList(tabId:string = '1') { + async function initList(tabId:string = 'all',date: any = null) { const reqParams = { page: currentPage, pageSize: currentPageSize, // desc: false, classify: tabId, + analyse_time: date // ...rest, }; const resp = await getUploadInvolvedList({ ...reqParams }); @@ -265,6 +272,22 @@ const InvolvedUploadList: React.FC = () => { // // }; // }} } + const onChange: DatePickerProps['onChange'] = (date, dateString) => { + console.log(dateString); + setImportDate(date) + setInnerDate(dateString) + console.log(importDate,'importDate'); + }; + const onChangeCheckbox: CheckboxProps['onChange'] = (e) => { + console.log(`checked = ${e.target.checked}`); + if(e.target.checked) { + setClassify('1') + initList('1', innerDate) + }else { + setClassify('all') + initList('all', innerDate) + } + }; useEffect(() => { getTabs(); initList(); @@ -301,6 +324,30 @@ const InvolvedUploadList: React.FC = () => { changeProjectTab(key); }} > */} +
+
+ + + +
+ 仅显示重点关注 +
className="gn" ghost={true} diff --git a/src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx b/src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx index 1417e52..9d3d5c3 100644 --- a/src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx +++ b/src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx @@ -1,6 +1,6 @@ import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory'; import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup'; -import { postAlarmRules } from '@/services/alarm/AlarmRules'; +import { postOfflineAlarmRules } from '@/services/alarm/AlarmRules'; import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText } from '@ant-design/pro-components'; import { FormattedMessage, useIntl } from '@umijs/max'; import { Form, message } from 'antd'; @@ -49,7 +49,7 @@ const UpdateForm: React.FC = (props) => { values.id = props.values.id values.is_use = values.is_use ? 1 : 0 // console.log(values); - await postAlarmRules(values) + await postOfflineAlarmRules(values) .then(() => { message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' })); props.reload(); diff --git a/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx b/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx index 7bcc5d8..7dc382b 100644 --- a/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx +++ b/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx @@ -1,6 +1,6 @@ import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory'; import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup'; -import { postAlarmRules } from '@/services/alarm/AlarmRules'; +import { postOfflineAlarmRules } from '@/services/alarm/AlarmRules'; import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText } from '@ant-design/pro-components'; import { FormattedMessage, useIntl } from '@umijs/max'; import { Form, message } from 'antd'; @@ -49,7 +49,7 @@ const UpdateMultiForm: React.FC = (props) => { values.id = props.values.id values.is_use = values.is_use ? 1 : 0 // console.log(values); - await postAlarmRules(values) + await postOfflineAlarmRules(values) .then(() => { message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' })); props.reload(); diff --git a/src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx b/src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx index d719e68..638c219 100644 --- a/src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx +++ b/src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx @@ -1,6 +1,6 @@ import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory'; import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup'; -import { postAlarmRules } from '@/services/alarm/AlarmRules'; +import { postOfflineAlarmRules } from '@/services/alarm/AlarmRules'; import { ModalForm, ProForm, ProFormFieldSet, ProFormSelect, ProFormSwitch, ProFormText, ProFormTimePicker } from '@ant-design/pro-components'; import { FormattedMessage, useIntl } from '@umijs/max'; import { Form, message } from 'antd'; @@ -49,7 +49,7 @@ const UpdateTimeForm: React.FC = (props) => { values.id = props.values.id values.is_use = values.is_use ? 1 : 0 // console.log(values); - await postAlarmRules(values) + await postOfflineAlarmRules(values) .then(() => { message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' })); props.reload(); diff --git a/src/pages/Alarm/OfflineAlarmRules/index.tsx b/src/pages/Alarm/OfflineAlarmRules/index.tsx index 2620e48..d008718 100644 --- a/src/pages/Alarm/OfflineAlarmRules/index.tsx +++ b/src/pages/Alarm/OfflineAlarmRules/index.tsx @@ -6,7 +6,7 @@ import { deleteDeviceCategoryDeleteDeviceCategory, postDeviceCategoryGetDeviceCategoryList, } from '@/services/device/DeviceCategory'; -import {getAlarmRules} from '@/services/alarm/AlarmRules' +import {getOfflineAlarmRules} from '@/services/alarm/AlarmRules' import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { PageContainer, ProTable } from '@ant-design/pro-components'; import { FormattedMessage, useIntl } from '@umijs/max'; @@ -238,7 +238,7 @@ const OfflineAlarmRulesList: React.FC = () => { reqParams.desc = sort_select === 'descend'; } // let resp = await postDeviceCategoryGetDeviceCategoryList({ ...reqParams }); - let resp = await getAlarmRules(reqParams); + let resp = await getOfflineAlarmRules(reqParams); console.log(resp); return { data: resp.data.results.map((v: API.DeviceCategory) => { diff --git a/src/pages/Setting/RealTimeInterfaceManage/components/CaptureButton.tsx b/src/pages/Setting/RealTimeInterfaceManage/components/CaptureButton.tsx new file mode 100644 index 0000000..0451ccc --- /dev/null +++ b/src/pages/Setting/RealTimeInterfaceManage/components/CaptureButton.tsx @@ -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 = (props) => { + const intl = useIntl(); + const [loading, setLoading] = useState(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 ( +
+ + {props.values.test_result === 1 ? '在线' : '离线'} + + {moment(props.values.test_time).format('YYYY-MM-DD hh:mm:ss')} +
+ ); +}; + +export default CaptureButton; \ No newline at end of file diff --git a/src/pages/Setting/RealTimeInterfaceManage/components/CaptureForm.less b/src/pages/Setting/RealTimeInterfaceManage/components/CaptureForm.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Setting/RealTimeInterfaceManage/components/CaptureForm.tsx b/src/pages/Setting/RealTimeInterfaceManage/components/CaptureForm.tsx new file mode 100644 index 0000000..75a86c9 --- /dev/null +++ b/src/pages/Setting/RealTimeInterfaceManage/components/CaptureForm.tsx @@ -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; + +export type UpdateFormProps = { + captureModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; +const CaptureForm: React.FC = (props) => { + const intl = useIntl(); + const [form] = Form.useForm(); + + return ( + + 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; + }} + > +
+
来源: {props.values.device_name}
+
触发时间: {moment(props.values.appear_time).format('YYYY-MM-DD hh:mm:ss')}
+
+ +
+
+ + ); +}; +export default CaptureForm; diff --git a/src/pages/Setting/RealTimeInterfaceManage/components/CreateForm.tsx b/src/pages/Setting/RealTimeInterfaceManage/components/CreateForm.tsx new file mode 100644 index 0000000..2ba603d --- /dev/null +++ b/src/pages/Setting/RealTimeInterfaceManage/components/CreateForm.tsx @@ -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; + +export type CreateFormProps = { + createModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; +const CreateForm: React.FC = (props) => { + const intl = useIntl(); + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); + const [fileType, setFileType] = useState('1'); + const [fileMethod, setFileMethod] = useState('pull'); + const [methodName, setMethodName] = useState('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 ( + + 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; + }} + > + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.name', + defaultMessage: '接口名称', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> +
+
获取方式
+
+ + +
+
+ {/* + } + 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: ( + + ), + }, + ]} + addonAfter={ + + } + /> */} + {fileType === '1' && ( + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.ip', + defaultMessage: '接口地址', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.port', + defaultMessage: '端口', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.loginName', + defaultMessage: '登录名', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.password', + defaultMessage: '密码', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.fileDirectory', + defaultMessage: '文件目录', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + )} + {fileType === '2' && ( + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.requestAddress', + defaultMessage: '请求地址', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.secretKey', + defaultMessage: '秘钥', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + )} + {fileType === '3' && ( + + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + )} + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.remark', + defaultMessage: '备注', + })}`} + required={false} + /> + + + ); +}; +export default CreateForm; diff --git a/src/pages/Setting/RealTimeInterfaceManage/components/UpdateForm.tsx b/src/pages/Setting/RealTimeInterfaceManage/components/UpdateForm.tsx new file mode 100644 index 0000000..61e19b5 --- /dev/null +++ b/src/pages/Setting/RealTimeInterfaceManage/components/UpdateForm.tsx @@ -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; + +export type UpdateFormProps = { + updateModalOpen: boolean; + handleModal: () => void; + values: Partial; + reload: any; +}; +const UpdateForm: React.FC = (props) => { + const intl = useIntl(); + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); + const [fileType, setFileType] = useState('1'); + const [fileMethod, setFileMethod] = useState('pull'); + const [methodName, setMethodName] = useState('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 ( + + 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; + }} + > + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.name', + defaultMessage: '接口名称', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> +
+
获取方式
+
+ + +
+
+ {/* + } + 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: ( + + ), + }, + ]} + addonAfter={ + + } + /> */} + {fileType === '1' && ( + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.ip', + defaultMessage: '接口地址', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.port', + defaultMessage: '端口', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.loginName', + defaultMessage: '登录名', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.password', + defaultMessage: '密码', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.fileDirectory', + defaultMessage: '文件目录', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + )} + {fileType === '2' && ( + + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.requestAddress', + defaultMessage: '请求地址', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.secretKey', + defaultMessage: '秘钥', + })}`} + required={true} + rules={[ + { + required: true, + message: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + )} + {fileType === '3' && ( + + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + } + 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: ( + + ), + }, + ]} + /> + + )} + + } + placeholder={`${intl.formatMessage({ + id: 'common.please_input', + defaultMessage: '请输入', + })}${intl.formatMessage({ + id: 'device.interface_manage.table.list.remark', + defaultMessage: '备注', + })}`} + required={false} + /> + + + ); +}; +export default UpdateForm; diff --git a/src/pages/Setting/RealTimeInterfaceManage/index.tsx b/src/pages/Setting/RealTimeInterfaceManage/index.tsx new file mode 100644 index 0000000..425b855 --- /dev/null +++ b/src/pages/Setting/RealTimeInterfaceManage/index.tsx @@ -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(); + // 动态设置每页数量 + const [currentPageSize, setCurrentPageSize] = useState(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(); + /** + * @en-US Pop-up window of new window + * @zh-CN 新建窗口的弹窗 + * */ + const [createModalOpen, setCreateModalOpen] = useState(false); + const handleCreateModal = () => { + if (createModalOpen) { + setCreateModalOpen(false); + setCurrentRow(undefined); + } else { + setCreateModalOpen(true); + } + }; + // 编辑弹框 + const [updateModalOpen, setUpdateModalOpen] = useState(false); + + const handleUpdateModal = () => { + if (updateModalOpen) { + setUpdateModalOpen(false); + setCurrentRow(undefined); + } else { + setUpdateModalOpen(true); + } + }; + + // 最近拍摄 + const [captureModalOpen, setCaptureModalOpen] = useState(false); + + const handleCaptureModal = () => { + console.log(captureModalOpen); + if (captureModalOpen) { + setCaptureModalOpen(false); + setCurrentRow(undefined); + } else { + setCaptureModalOpen(true); + } + }; + // 测试连接 + const [loading, setLoading] = useState(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[] = [ + { + title: , + dataIndex: 'device_name', + hideInSearch: true, + }, + { + title: , + dataIndex: 'device_ip', + hideInSearch: true, + }, + { + title: , + dataIndex: 'test_result', + hideInSearch: true, + render: (dom,entity) => { + return ( +
+ + {dom === 1 ? '获取成功' : '获取失败'} + + {moment(entity.appear_time).format('YYYY-MM-DD hh:mm:ss')} + {/*
+ // + ); + }, + }, + // { + // title: , + // dataIndex: 'device_api', + // hideInSearch: true, + // }, + // { + // title: , + // dataIndex: 'test_time', + // sorter: true, + // hideInSearch: true, + // valueType: 'dateTime', + // }, + { + title: , + dataIndex: 'create_time', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', + }, + + { + title: , + dataIndex: 'option', + valueType: 'option', + width: '260px', + fixed: 'right', + render: (_, record) => [ + } + // onClick={() => { + // console.log('11'); + // setCaptureModalOpen(true); + // setCurrentRow(record); + // }} + // > + // {/* 最近拍摄 */} + // + // + // ), + // }, + { + key: 'update', + renderDom: ( + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + ), + }, + ]} + >, + ], + }, + ]; + return ( + +
离线设备管理
+ +
+ } + > + + 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} + /> + + + + + ); +}; + +export default RealTimeInterfaceManageList; diff --git a/src/pages/Setting/interfaceManage/index.tsx b/src/pages/Setting/interfaceManage/index.tsx index 479ff93..b7f1d2c 100644 --- a/src/pages/Setting/interfaceManage/index.tsx +++ b/src/pages/Setting/interfaceManage/index.tsx @@ -19,7 +19,6 @@ 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 InterfaceManageList: React.FC = () => { /** * @en-US International configuration @@ -239,7 +238,7 @@ const InterfaceManageList: React.FC = () => { fontWeight: 600, fontSize: 20, color: '#333' - }}>接口管理
+ }}>设备管理