From 19fa6ce2f0fd6648a7cd83d65ddde9f59be3394a Mon Sep 17 00:00:00 2001 From: JINGYJ <1458671527@qq.com> Date: Wed, 8 May 2024 17:35:37 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9B=91=E8=A7=86=E7=AB=AF=E5=BC=80?= =?UTF-8?q?=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/routes.ts | 30 +- mock/pools/menuData.ts | 74 ++--- src/app.less | 3 + src/components/MenuBar/index.tsx | 40 ++- src/locales/zh-CN/device.ts | 3 + src/pages/Offline/OfflineAlarmList/index.tsx | 8 +- .../AlarmList/components/AlarmDetails.less | 5 + .../AlarmList/components/AlarmDetails.tsx | 93 +++--- src/pages/RealTime/AlarmList/index.tsx | 139 ++++---- .../DeviceList/components/CaptureButton.tsx | 48 ++- .../DeviceList/components/CaptureForm.less | 6 + .../DeviceList/components/UpdateForm.tsx | 64 ++-- src/pages/RealTime/DeviceList/index.tsx | 312 +++++++++++------- .../components/ImageWithPopover.tsx | 2 +- .../components/InvolvedDetails.less | 5 + src/pages/RealTime/InvolvedList/index.tsx | 82 +++-- src/services/realTime/alarmlist.ts | 15 + src/services/realTime/interfaces.ts | 47 +++ src/services/realTime/typings.d.ts | 1 + testData/menuData.ts | 74 ++--- 20 files changed, 667 insertions(+), 384 deletions(-) diff --git a/config/routes.ts b/config/routes.ts index 79e693d..582a4b3 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -76,21 +76,21 @@ export default [ path: '/offline/alarm-list', component: './Offline/OfflineAlarmList', }, - { - name: 'offline-alarm-rules', - path: '/offline/alarm-rules', - component: './Offline/OfflineAlarmRules', - }, - { - name: 'offline-device-list', - path: '/offline/device-list', - component: './Offline/OfflineDeviceList', - }, - { - name: 'offline-video-file', - path: '/offline/video-file', - component: './Offline/VideoFile', - }, + // { + // name: 'offline-alarm-rules', + // path: '/offline/alarm-rules', + // component: './Offline/OfflineAlarmRules', + // }, + // { + // name: 'offline-device-list', + // path: '/offline/device-list', + // component: './Offline/OfflineDeviceList', + // }, + // { + // name: 'offline-video-file', + // path: '/offline/video-file', + // component: './Offline/VideoFile', + // }, ], }, { diff --git a/mock/pools/menuData.ts b/mock/pools/menuData.ts index c3750e6..818946b 100644 --- a/mock/pools/menuData.ts +++ b/mock/pools/menuData.ts @@ -48,15 +48,15 @@ export const mockGetMenuData = { routes: [], title: '告警列表', }, - { - component: 'RealTime/AlarmRules', - icon: '', - key: '103', - name: 'realTime-alarm-rules', - path: '/realTime/alarm-rules', - routes: [], - title: '告警规则', - }, + // { + // component: 'RealTime/AlarmRules', + // icon: '', + // key: '103', + // name: 'realTime-alarm-rules', + // path: '/realTime/alarm-rules', + // routes: [], + // title: '告警规则', + // }, { component: 'RealTime/DeviceList', icon: '', @@ -64,7 +64,7 @@ export const mockGetMenuData = { name: 'realTime-device-list', path: '/realTime/device-list', routes: [], - title: '设备管理', + title: '设备状态', }, ], }, @@ -94,33 +94,33 @@ export const mockGetMenuData = { routes: [], title: '告警列表', }, - { - component: 'Offline/OfflineAlarmRules', - icon: '', - key: '203', - name: 'offline-alarm-rules', - path: '/offline/alarm-rules', - routes: [], - title: '告警规则', - }, - { - component: 'Offline/OfflineDeviceList', - icon: '', - key: '204', - name: 'offline-device-list', - path: '/offline/device-list', - routes: [], - title: '设备管理', - }, - { - component: 'Offline/VideoFile', - icon: '', - key: '205', - name: 'offline-video-file', - path: '/offline/video-file', - routes: [], - title: '视频文件', - }, + // { + // component: 'Offline/OfflineAlarmRules', + // icon: '', + // key: '203', + // name: 'offline-alarm-rules', + // path: '/offline/alarm-rules', + // routes: [], + // title: '告警规则', + // }, + // { + // component: 'Offline/OfflineDeviceList', + // icon: '', + // key: '204', + // name: 'offline-device-list', + // path: '/offline/device-list', + // routes: [], + // title: '设备管理', + // }, + // { + // component: 'Offline/VideoFile', + // icon: '', + // key: '205', + // name: 'offline-video-file', + // path: '/offline/video-file', + // routes: [], + // title: '视频文件', + // }, ], }, ], diff --git a/src/app.less b/src/app.less index a1ca12b..36da431 100644 --- a/src/app.less +++ b/src/app.less @@ -46,3 +46,6 @@ padding-block: 0; padding-inline: 0; } +.ant-pro-setting-drawer-handle { + z-index: 10; +} diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx index c11125a..242b20d 100644 --- a/src/components/MenuBar/index.tsx +++ b/src/components/MenuBar/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ /* * @Author: donghao donghao@supervision.ltd * @Date: 2024-03-27 16:03:20 @@ -12,11 +13,11 @@ import type { MenuProps } from 'antd'; import { Menu } from 'antd'; import React, { useEffect, useState } from 'react'; +import { postWarningStatistics } from '../../../src/services/realTime/alarmlist'; +import './index.less'; import menuFooter from '/public/menuFooter.svg'; import menuLogo from '/public/menuLogo.svg'; -import './index.less'; - export type MenuBarProps = { menuData: any[]; }; @@ -76,6 +77,27 @@ const MenuBar: React.FC = ({ menuData }) => { } return null; }; + // 轮询告警信息 + const [isHaveWarning, setIsHaveWarning] = useState(false); + const [totalResults, setTotalResults] = useState([]); + const pollServer = () => { + postWarningStatistics({}) + .then((res) => { + let have_warning = res.data.have_warning; + console.log(res.data.have_warning, 'pollServer'); + let totalResults = res.data.total_results; + setTotalResults(totalResults); + setIsHaveWarning(() => have_warning); + // setTimeout(pollServer, 5000); + }) + .catch(() => {}); + }; + useEffect(() => { + pollServer(); + }, []); + // useEffect(() => { + // console.log(isHaveWarning,'isHaveWarning'); + // },[isHaveWarning]) // 当路由变化时更新当前选中菜单项 useEffect(() => { const pathname = history.location.pathname; @@ -91,6 +113,9 @@ const MenuBar: React.FC = ({ menuData }) => { // Check if menuItem has route defined if (menuItem && menuItem.path) { history.push(menuItem.path); + // history.push( + // menuItem.path, + // {totalResults}); } // console.log('menuClick ', e.item.props.path); // const currRouteItem = e.item.props; @@ -193,6 +218,17 @@ const MenuBar: React.FC = ({ menuData }) => { onClick={() => menuClick(childItem)} > {childItem.title} + {childItem.key === '102' && isHaveWarning && ( + + )} ))} diff --git a/src/locales/zh-CN/device.ts b/src/locales/zh-CN/device.ts index 5e05ddd..50430ef 100644 --- a/src/locales/zh-CN/device.ts +++ b/src/locales/zh-CN/device.ts @@ -73,6 +73,9 @@ export const device_relation: { [key: string]: string } = { 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.platform_name': '设备名称', + 'device.interface_manage.table.list.statusUpdate': '最近一次状态查询', + 'device.interface_manage.table.list.rename': '重命名', 'device.interface_manage.table.list.address': '接口地址', 'device.interface_manage.table.list.ip': 'IP地址', 'device.interface_manage.table.list.createTime': '创建时间', diff --git a/src/pages/Offline/OfflineAlarmList/index.tsx b/src/pages/Offline/OfflineAlarmList/index.tsx index eaa99c8..ecf75e2 100644 --- a/src/pages/Offline/OfflineAlarmList/index.tsx +++ b/src/pages/Offline/OfflineAlarmList/index.tsx @@ -283,7 +283,13 @@ const OfflineAlarmList: React.FC = () => {
选择导入时间： - + , - props.values?.person_list ? null : ( - - ), - props.values?.person_list ? null : ( - - ), - ]; - }, - }} + // submitter={{ + // render: (prop) => { + // return [ + // , + // props.values?.person_list ? null : ( + // + // ), + // props.values?.person_list ? null : ( + // + // ), + // ]; + // }, + // }} + submitter={false} submitTimeout={2000} onFinish={async (values) => { values.is_ignore = true; diff --git a/src/pages/RealTime/AlarmList/index.tsx b/src/pages/RealTime/AlarmList/index.tsx index fe272ff..81bc32a 100644 --- a/src/pages/RealTime/AlarmList/index.tsx +++ b/src/pages/RealTime/AlarmList/index.tsx @@ -1,15 +1,17 @@ import { alarmRulesEnums } from '@/enums/status'; import { PageContainer, ProCard, ProList } from '@ant-design/pro-components'; -import { Button, Image } from 'antd'; +import { Button, Image, Select } from 'antd'; import React, { useEffect, useState } from 'react'; import { proTablePaginationOptions } from '../../../../config/defaultTable'; // import DeviceStatusCard from './components/DeviceStatusCard'; // import CreateForm from './components/CreateForm'; import { useMoment } from '@/hooks/useMoment'; -import { postAlarmList } from '@/services/realTime/alarmlist'; +import { postAlarmList, postWarningStatistics } from '@/services/realTime/alarmlist'; import Alarm_list_bg from '../../../../public/Alarm_list_bg.png'; import { ReactComponent as NoData } from '../../../../public/images/no_data.svg'; import AlarmDetails from './components/AlarmDetails'; +// import { useLocation } from '@umijs/max'; +import './components/AlarmDetails.less'; /** * @交互说明 @@ -66,6 +68,46 @@ const AlarmList: React.FC = () => { const [dataTestList, setdataTestList] = useState([]); const [tab, setTab] = useState(alarmRulesEnums[0].key); + // const location = useLocation(); + // const { state } = location; + const [selectOptions, setSelectOptions] = useState([]); + const [selectValue, setSelectValue] = useState(); + const pollServer = () => { + postWarningStatistics({}) + .then((res) => { + if (res && res.data.total_results) { + // 使用 state.totalResults 来设置 selectOptions + const newOptions = res.data.total_results.map((record: any) => ({ + value: record.id, + label: ( + + {record.platform_name} + {record.have_warning && ( + + )} + + ), + })); + setSelectValue(res.data.total_results[0].id); + setSelectOptions(newOptions); + } + console.log(selectValue, 'selectValue'); + // setTimeout(pollServer, 5000); + }) + .catch(() => {}); + }; + useEffect(() => { + pollServer(); + console.log(selectOptions); + }, []); // const [tabs, setTabs] = useState([]); const changeProjectTab = (key: string) => { setTab(key); @@ -73,23 +115,6 @@ const AlarmList: React.FC = () => { // eslint-disable-next-line @typescript-eslint/no-use-before-define initList(key); }; - // const getTabs = () => { - // // if (alarmRulesEnums.length) { - // // setTab(alarmRulesEnums[0].key); - // // } - // setTabs(alarmRulesEnums); - // }; - // useEffect(() => { - // getTabs(); - // }, []); - // const handleCreateModal = () => { - // if (createModalOpen) { - // setCreateModalOpen(false); - // setCurrentRow(undefined); - // } else { - // setCreateModalOpen(true); - // } - // }; const handleUpdateModal = () => { if (updateModalOpen) { @@ -100,41 +125,6 @@ const AlarmList: React.FC = () => { } }; - // const handleDestroy = async () => { - // if (modalOpen) { - // setModalOpen(false); - // setCurrentRow(undefined); - // } else { - // setModalOpen(true); - // } - // // deleteBusinessImageDeleteBusinessImage({ id: selectedRow.id }) - // // .then(() => { - // // message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); - // // actionRef.current?.reload(); - // // }) - // // .catch(() => { - // // message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); - // // }); - // }; - - // const { confirm } = Modal; - // const showConfirm = (record: any) => { - // confirm({ - // title: `确定删除${record.name}吗`, - // icon: , - // content: '确定删除服务器1吗？删除后将找不到此服务器，请谨慎操作.', - // okText: '确认', - // cancelText: '取消', - // width: 560, - // onOk() { - // console.log('OK'); - // }, - // onCancel() { - // console.log('Cancel'); - // }, - // }); - // }; - // 处理初始值 function initDataTestList(dataList: Record[]) { console.log(dataList, 'initDataTestList'); @@ -228,13 +218,17 @@ const AlarmList: React.FC = () => { setdataTestList(() => [...finalList]); } - + const handleChange = (value: any) => { + console.log(`selected ${value}`); + setSelectValue(value); + }; // 初始化加载 - async function initList(tabId: string = tab) { + async function initList(tabId: string = tab, selectValues: any = selectValue) { const reqParams = { page: currentPage, pageSize: currentPageSize, // desc: false, + platform_id: selectValues, warning_type: tabId, // ...rest, }; @@ -313,6 +307,39 @@ const AlarmList: React.FC = () => { changeProjectTab(key); }} > */} +
+ ( + `/api/poll_warning_statistics/`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + data: body, + ...(options || {}), + }, + ); +} diff --git a/src/services/realTime/interfaces.ts b/src/services/realTime/interfaces.ts index b3acfc4..b672c7d 100644 --- a/src/services/realTime/interfaces.ts +++ b/src/services/realTime/interfaces.ts @@ -122,3 +122,50 @@ export async function postAlgorithm(body: any, options?: { [key: string]: any }) }, ); } + +/** 获取平台信息及接口信息 */ +export async function getPlatform( + params: API.SearchAlarmRulesParams | any, + options?: { [key: string]: any }, +) { + return request(`/api/platform/`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + params: { + ...params, + }, + ...(options || {}), + }); +} + +/** 更新平台信息及接口信息 */ +export async function postPlatform( + body: API.UpdateInterfacesParams | any, + options?: { [key: string]: any }, +) { + return request(`/api/platform/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + data: body, + ...(options || {}), + }); +} + +/** 测试平台连通 */ +export async function postTestlPatform( + body: API.UpdateInterfacesParams | any, + options?: { [key: string]: any }, +) { + return request(`/api/test_platform/`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + data: body, + ...(options || {}), + }); +} diff --git a/src/services/realTime/typings.d.ts b/src/services/realTime/typings.d.ts index 850c078..8c44466 100644 --- a/src/services/realTime/typings.d.ts +++ b/src/services/realTime/typings.d.ts @@ -90,6 +90,7 @@ declare namespace API { destination_directory?: string; operate_mode?: string; source_directory?: string; + platform_name?: string; }; type UpdateVideoParams = { create_time?: string; // 设备名称 diff --git a/testData/menuData.ts b/testData/menuData.ts index c3750e6..818946b 100644 --- a/testData/menuData.ts +++ b/testData/menuData.ts @@ -48,15 +48,15 @@ export const mockGetMenuData = { routes: [], title: '告警列表', }, - { - component: 'RealTime/AlarmRules', - icon: '', - key: '103', - name: 'realTime-alarm-rules', - path: '/realTime/alarm-rules', - routes: [], - title: '告警规则', - }, + // { + // component: 'RealTime/AlarmRules', + // icon: '', + // key: '103', + // name: 'realTime-alarm-rules', + // path: '/realTime/alarm-rules', + // routes: [], + // title: '告警规则', + // }, { component: 'RealTime/DeviceList', icon: '', @@ -64,7 +64,7 @@ export const mockGetMenuData = { name: 'realTime-device-list', path: '/realTime/device-list', routes: [], - title: '设备管理', + title: '设备状态', }, ], }, @@ -94,33 +94,33 @@ export const mockGetMenuData = { routes: [], title: '告警列表', }, - { - component: 'Offline/OfflineAlarmRules', - icon: '', - key: '203', - name: 'offline-alarm-rules', - path: '/offline/alarm-rules', - routes: [], - title: '告警规则', - }, - { - component: 'Offline/OfflineDeviceList', - icon: '', - key: '204', - name: 'offline-device-list', - path: '/offline/device-list', - routes: [], - title: '设备管理', - }, - { - component: 'Offline/VideoFile', - icon: '', - key: '205', - name: 'offline-video-file', - path: '/offline/video-file', - routes: [], - title: '视频文件', - }, + // { + // component: 'Offline/OfflineAlarmRules', + // icon: '', + // key: '203', + // name: 'offline-alarm-rules', + // path: '/offline/alarm-rules', + // routes: [], + // title: '告警规则', + // }, + // { + // component: 'Offline/OfflineDeviceList', + // icon: '', + // key: '204', + // name: 'offline-device-list', + // path: '/offline/device-list', + // routes: [], + // title: '设备管理', + // }, + // { + // component: 'Offline/VideoFile', + // icon: '', + // key: '205', + // name: 'offline-video-file', + // path: '/offline/video-file', + // routes: [], + // title: '视频文件', + // }, ], }, ],