From 66bf130b492a4d19f01eac6bd5cd601031cad66e Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Mon, 1 Apr 2024 10:39:33 +0800
Subject: [PATCH] =?UTF-8?q?fect:=20=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 | 12 +-
src/app.tsx | 24 +-
src/pages/Alarm/InvolvedList/index.tsx | 36 ++-
.../components/UpdateForm.tsx | 200 +++++++++++++
.../components/UpdateMultiForm.tsx | 234 +++++++++++++++
.../components/UpdateTimeForm.tsx | 223 ++++++++++++++
.../components/updateForm.less | 8 +
src/pages/Alarm/OfflineAlarmRules/index.tsx | 277 ++++++++++++++++++
src/pages/User/Login/index1.tsx | 24 +-
9 files changed, 1006 insertions(+), 32 deletions(-)
create mode 100644 src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx
create mode 100644 src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx
create mode 100644 src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx
create mode 100644 src/pages/Alarm/OfflineAlarmRules/components/updateForm.less
create mode 100644 src/pages/Alarm/OfflineAlarmRules/index.tsx
diff --git a/config/routes.ts b/config/routes.ts
index a7aa996..c751f1a 100644
--- a/config/routes.ts
+++ b/config/routes.ts
@@ -412,12 +412,12 @@ export default [
path: '/offline/videoAnalysis',
component: 'VideoAnalysis',
},
- // {
- // name: 'alarm-list',
- // path: '/offline/alarm-list',
- // component: 'Alarm/AlarmList',
- // access: 'canReadMenu',
- // },
+ {
+ name: 'OfflineAlarmRules',
+ path: '/offline/OfflineAlarmRules',
+ component: 'Alarm/OfflineAlarmRules',
+ access: 'canReadMenu',
+ },
{
name: 'involved-list-upload',
path: '/offline/involved-list-upload',
diff --git a/src/app.tsx b/src/app.tsx
index b3092b7..f9afe31 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -98,7 +98,7 @@ export async function getInitialState(): Promise<{
"name": "involved-list",
"path": "/realTime/involved-list",
"routes": [],
- "title": "重点关注",
+ "title": "告警汇总",
}
]
},
@@ -151,16 +151,16 @@ export async function getInitialState(): Promise<{
"routes": [],
"title": "视频分析",
},
- // {
- // "access": "",
- // "component": "Alarm/AlarmRules",
- // "icon": "",
- // "key": "",
- // "name": "alarm_rules",
- // "path": "/offline/alarm_rules",
- // "routes": [],
- // "title": "告警规则",
- // },
+ {
+ "access": "",
+ "component": "Alarm/OfflineAlarmRules",
+ "icon": "",
+ "key": "",
+ "name": "OfflineAlarmRules",
+ "path": "/offline/OfflineAlarmRules",
+ "routes": [],
+ "title": "告警规则",
+ },
{
"access": "",
"component": "Alarm/InvolvedListUpload",
@@ -169,7 +169,7 @@ export async function getInitialState(): Promise<{
"name": "involved-list-upload",
"path": "/offline/involved-list-upload",
"routes": [],
- "title": "重点关注(上传)",
+ "title": "告警汇总",
}
]
},
diff --git a/src/pages/Alarm/InvolvedList/index.tsx b/src/pages/Alarm/InvolvedList/index.tsx
index 1491163..47a7295 100644
--- a/src/pages/Alarm/InvolvedList/index.tsx
+++ b/src/pages/Alarm/InvolvedList/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, 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,7 @@ import { QuestionCircleFilled } from '@ant-design/icons';
import InvolvedDetails from './components/InvolvedDetails';
import moment from 'moment';
import ImageWithPopover from './components/ImageWithPopover';
+import locale from 'antd/es/date-picker/locale/zh_CN';
/**
* @交互说明
@@ -65,6 +66,9 @@ const InvolvedList: React.FC = () => {
const [tab, setTab] = useState<string>(alarmRulesEnums[0].key);
const [tabs, setTabs] = useState<any>([]);
+
+ const [importDate, setImportDate] = useState<any>(null);
+ const [innerDate, setInnerDate] = useState<any>(null);
// const changeProjectTab = (key: string) => {
// setTab(key);
// console.log(key);
@@ -223,12 +227,13 @@ const InvolvedList: React.FC = () => {
}
// 初始化加载
- async function initList(tabId:string = '1') {
+ async function initList(tabId:string = '1',date: any = null) {
const reqParams = {
page: currentPage,
pageSize: currentPageSize,
// desc: false,
classify: tabId,
+ analyse_time: date
// ...rest,
};
const resp = await getInvolvedList({ ...reqParams });
@@ -264,6 +269,12 @@ const InvolvedList: React.FC = () => {
// // };
// }}
}
+ const onChange: DatePickerProps['onChange'] = (date, dateString) => {
+ console.log(dateString);
+ setImportDate(date)
+ setInnerDate(dateString)
+ console.log(importDate,'importDate');
+ };
useEffect(() => {
getTabs();
initList();
@@ -300,6 +311,27 @@ const InvolvedList: React.FC = () => {
changeProjectTab(key);
}}
></Tabs> */}
+ <div style={{ padding: '16px 16px 0'}}>
+ 选择导入时间：<DatePicker locale={locale} value={importDate} onChange={onChange} allowClear />
+ <Button type="primary"
+ style={{ margin: '0 16px' }}
+ onClick={() => {
+ // setCreateModalOpen(true);
+ setImportDate(null);
+ initList(tab, null)
+ }}
+ >
+ 重置
+ </Button>
+ <Button type="primary"
+ onClick={() => {
+ // setCreateModalOpen(true);
+ initList(tab, innerDate)
+ }}
+ >
+ 确定
+ </Button>
+ </div>
<ProList<any>
className="gn"
ghost={true}
diff --git a/src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx b/src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx
new file mode 100644
index 0000000..1417e52
--- /dev/null
+++ b/src/pages/Alarm/OfflineAlarmRules/components/UpdateForm.tsx
@@ -0,0 +1,200 @@
+import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
+import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
+import { postAlarmRules } 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';
+import React, { useState } from 'react';
+import {
+ proFormSmallItemStyleProps,
+ proFormSmallModelWidth,
+} from '../../../../../config/defaultForm';
+import styles from './updateForm.less'
+export type FormValueType = {
+ target?: string;
+ template?: string;
+ type?: string;
+ time?: string;
+ frequency?: string;
+} & Partial<API.UpdateAlarmRulesForm>;
+
+export type UpdateFormProps = {
+ updateModalOpen: boolean;
+ handleModal: () => void;
+ values: Partial<API.UpdateAlarmRulesForm>;
+ reload: any;
+};
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+ const intl = useIntl();
+ const [form] = Form.useForm<API.UpdateAlarmRulesForm>();
+
+ return (
+ <ModalForm<any>
+ width={proFormSmallModelWidth}
+ title={intl.formatMessage({
+ id: 'alarm_rules.page.form.title',
+ defaultMessage: `编辑单人徘徊告警`,
+ })}
+ open={props.updateModalOpen}
+ form={form}
+ autoFocusFirstInput
+ modalProps={{
+ destroyOnClose: true,
+ onCancel: () => props.handleModal(),
+ okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
+ cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
+ }}
+ submitTimeout={2000}
+ onFinish={async (values) => {
+ values.id = props.values.id
+ values.is_use = values.is_use ? 1 : 0
+ // console.log(values);
+ await postAlarmRules(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>
+ <ProFormSwitch
+ width={proFormSmallItemStyleProps.column2Width}
+ name="is_use"
+ label={
+ <FormattedMessage
+ id="alarm_rules.page.form.isEnabled"
+ defaultMessage="启用告警"
+ />
+ }
+ checkedChildren="启用"
+ unCheckedChildren="关闭"
+ initialValue={props.values.is_use}
+ disabled={false}
+ />
+ <ProFormText
+ width={proFormSmallItemStyleProps.width}
+ name="warning_name"
+ label={<FormattedMessage id="alarm_rules.page.form.name" defaultMessage="告警名称" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.name',
+ defaultMessage: '告警名称',
+ })}`}
+ required={true}
+ initialValue={props.values.warning_name}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.name"
+ defaultMessage="请填写告警名称"
+ />
+ ),
+ },
+ ]}
+ />
+ <div>触发条件</div>
+ <div style={{
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'flex-start',
+ alignItems: 'baseline'
+ }}>
+ <span style={{ marginRight: 6 }}>当检测到风险人员单人，于</span>
+ <ProFormText
+ width={100}
+ name="time_period"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '触发条件',
+ })}`}
+ required={true}
+ initialValue={props.values.time_period}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.time_interval"
+ defaultMessage="请填写时间"
+ />
+ ),
+ },
+ ]}
+ />
+ <span style={{ margin: '0 6px' }}>小时内，间隔</span>
+ <ProFormText
+ width={100}
+ name="time_interval"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '触发条件',
+ })}`}
+ required={true}
+ initialValue={props.values.time_interval}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.time_interval"
+ defaultMessage="请填写时间"
+ />
+ ),
+ },
+ ]}
+ />
+ <span style={{ marginRight: 6 }}>小时，重复出现</span>
+ <ProFormText
+ width={100}
+ name="appear_number"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '触发条件',
+ })}`}
+ required={true}
+ initialValue={props.values.appear_number}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.appear_number"
+ defaultMessage="请填写次数"
+ />
+ ),
+ },
+ ]}
+ />
+ <span style={{ marginLeft: 6 }}>次，则触发警告。</span>
+ </div>
+ </ProForm.Group>
+ </ModalForm>
+ );
+};
+export default UpdateForm;
diff --git a/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx b/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx
new file mode 100644
index 0000000..7bcc5d8
--- /dev/null
+++ b/src/pages/Alarm/OfflineAlarmRules/components/UpdateMultiForm.tsx
@@ -0,0 +1,234 @@
+import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
+import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
+import { postAlarmRules } 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';
+import React, { useState } from 'react';
+import {
+ proFormSmallItemStyleProps,
+ proFormSmallModelWidth,
+} from '../../../../../config/defaultForm';
+import styles from './updateForm.less'
+export type FormValueType = {
+ target?: string;
+ template?: string;
+ type?: string;
+ time?: string;
+ frequency?: string;
+} & Partial<API.UpdateAlarmRulesForm>;
+
+export type UpdateFormProps = {
+ updateModalOpen: boolean;
+ handleModal: () => void;
+ values: Partial<API.UpdateAlarmRulesForm>;
+ reload: any;
+};
+const UpdateMultiForm: React.FC<UpdateFormProps> = (props) => {
+ const intl = useIntl();
+ const [form] = Form.useForm<API.UpdateAlarmRulesForm>();
+
+ return (
+ <ModalForm<any>
+ width={proFormSmallModelWidth}
+ title={intl.formatMessage({
+ id: 'alarm_rules.page.form.multiTitle',
+ defaultMessage: `编辑${props.values.warning_name}`,
+ })}
+ open={props.updateModalOpen}
+ form={form}
+ autoFocusFirstInput
+ modalProps={{
+ destroyOnClose: true,
+ onCancel: () => props.handleModal(),
+ okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
+ cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
+ }}
+ submitTimeout={2000}
+ onFinish={async (values) => {
+ values.id = props.values.id
+ values.is_use = values.is_use ? 1 : 0
+ // console.log(values);
+ await postAlarmRules(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="name"
+ label={<FormattedMessage id="alarm_rules.page.form.enabled" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '$$$',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.enabled',
+ defaultMessage: '$$$',
+ })}`}
+ required={false}
+ initialValue={props.values.enabled}
+ disabled={false}
+ /> */}
+ <ProFormSwitch
+ width={proFormSmallItemStyleProps.column2Width}
+ name="is_use"
+ label={
+ <FormattedMessage
+ id="alarm_rules.page.form.isEnabled"
+ defaultMessage="启用告警"
+ />
+ }
+ checkedChildren="启用"
+ unCheckedChildren="关闭"
+ initialValue={props.values.is_use}
+ disabled={false}
+ />
+ <ProFormText
+ width={proFormSmallItemStyleProps.width}
+ name="warning_name"
+ label={<FormattedMessage id="alarm_rules.page.form.name" defaultMessage="告警名称" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.name',
+ defaultMessage: '告警名称',
+ })}`}
+ required={true}
+ initialValue={props.values.warning_name}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.name"
+ defaultMessage="请填写告警名称"
+ />
+ ),
+ },
+ ]}
+ />
+ <div>触发条件</div>
+ <div style={{
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'flex-start',
+ alignItems: 'baseline'
+ }}>
+ <span style={{ marginRight: 6 }}>当检测到风险人员人数大于</span>
+ <ProFormText
+ width={100}
+ name="person_number"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '触发条件',
+ })}`}
+ required={true}
+ initialValue={props.values.person_number}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.person_number"
+ defaultMessage="请填写人数"
+ />
+ ),
+ },
+ ]}
+ />
+ <span style={{ margin: '0 6px' }}>人时，则触发告警，触发间隔</span>
+ <ProFormText
+ width={100}
+ name="time_interval"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.time_interval',
+ defaultMessage: '时间',
+ })}`}
+ required={true}
+ initialValue={props.values.time_interval}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.time_interval"
+ defaultMessage="请填写时间"
+ />
+ ),
+ },
+ ]}
+ />
+ <span style={{ marginLeft: 6 }}>分钟。</span>
+ </div>
+ {/* { timeStatus &&
+ <ProFormFieldSet
+ name="list"
+ label="触发条件"
+ type='space'
+ transform={(value: any) => ({
+ // list: value,
+ // startTime: value[0],
+ // endTime: value[1],
+ time_period: value[0],
+ time_interval: value[1],
+ appear_number: value[2],
+ })}
+ className={styles}
+ >
+ 当处于<ProFormText
+ width={100}
+ name="trigger_start_time"
+ label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '$$$',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '$$$',
+ })}`}
+ required={false}
+ initialValue={props.values.trigger_start_time}
+ disabled={false}
+ />至
+ <ProFormText
+ width={100}
+ name="trigger_end_time"
+ label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '$$$',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '$$$',
+ })}`}
+ required={false}
+ initialValue={props.values.trigger_end_time}
+ disabled={false}
+ />时间内，发现风险人员立即告警。
+ </ProFormFieldSet>} */}
+ </ProForm.Group>
+ </ModalForm>
+ );
+};
+export default UpdateMultiForm;
diff --git a/src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx b/src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx
new file mode 100644
index 0000000..d719e68
--- /dev/null
+++ b/src/pages/Alarm/OfflineAlarmRules/components/UpdateTimeForm.tsx
@@ -0,0 +1,223 @@
+import { putDeviceCategoryUpdateDeviceCategory } from '@/services/device/DeviceCategory';
+import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
+import { postAlarmRules } 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';
+import React, { useState } from 'react';
+import {
+ proFormSmallItemStyleProps,
+ proFormSmallModelWidth,
+} from '../../../../../config/defaultForm';
+import styles from './updateForm.less'
+export type FormValueType = {
+ target?: string;
+ template?: string;
+ type?: string;
+ time?: string;
+ frequency?: string;
+} & Partial<API.UpdateAlarmRulesForm>;
+
+export type UpdateFormProps = {
+ updateModalOpen: boolean;
+ handleModal: () => void;
+ values: Partial<API.UpdateAlarmRulesForm>;
+ reload: any;
+};
+const UpdateTimeForm: React.FC<UpdateFormProps> = (props) => {
+ const intl = useIntl();
+ const [form] = Form.useForm<API.UpdateAlarmRulesForm>();
+
+ return (
+ <ModalForm<any>
+ width={proFormSmallModelWidth}
+ title={intl.formatMessage({
+ id: 'alarm_rules.page.form.timeTitle',
+ defaultMessage: `编辑${props.values.warning_name}`,
+ })}
+ open={props.updateModalOpen}
+ form={form}
+ autoFocusFirstInput
+ modalProps={{
+ destroyOnClose: true,
+ onCancel: () => props.handleModal(),
+ okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '确认' }),
+ cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '取消' }),
+ }}
+ submitTimeout={2000}
+ onFinish={async (values) => {
+ values.id = props.values.id
+ values.is_use = values.is_use ? 1 : 0
+ // console.log(values);
+ await postAlarmRules(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="name"
+ label={<FormattedMessage id="alarm_rules.page.form.enabled" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '$$$',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.enabled',
+ defaultMessage: '$$$',
+ })}`}
+ required={false}
+ initialValue={props.values.enabled}
+ disabled={false}
+ /> */}
+ <ProFormSwitch
+ width={proFormSmallItemStyleProps.column2Width}
+ name="is_use"
+ label={
+ <FormattedMessage
+ id="alarm_rules.page.form.isEnabled"
+ defaultMessage="启用告警"
+ />
+ }
+ checkedChildren="启用"
+ unCheckedChildren="关闭"
+ initialValue={props.values.is_use}
+ disabled={false}
+ />
+ <ProFormText
+ width={proFormSmallItemStyleProps.width}
+ name="warning_name"
+ label={<FormattedMessage id="alarm_rules.page.form.name" defaultMessage="告警名称" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.name',
+ defaultMessage: '告警名称',
+ })}`}
+ required={true}
+ initialValue={props.values.warning_name}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.name"
+ defaultMessage="请填写告警名称"
+ />
+ ),
+ },
+ ]}
+ />
+ <div style={{
+ marginBottom: 6
+ }}>触发条件</div>
+ <div style={{
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'flex-start',
+ alignItems: 'baseline'
+ }}>
+ <span style={{marginRight: 6}}>当处于</span>
+ <ProFormTimePicker
+ style={{
+ padding: '0 6px'
+ }}
+ width={100}
+ name="trigger_start_time"
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.trigger_start_time',
+ defaultMessage: '敏感开始时间',
+ })}`}
+ required={true}
+ initialValue={props.values.trigger_start_time}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.trigger_start_time"
+ defaultMessage="请填写时间"
+ />
+ ),
+ },
+ ]}
+ />
+ {/* <ProFormText
+ width={100}
+ name="trigger_start_time"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '$$$',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '$$$',
+ })}`}
+ required={false}
+ initialValue={props.values.trigger_start_time}
+ disabled={false}
+ /> */}
+ <span style={{ margin: '0 6px' }}>至</span>
+ <ProFormTimePicker
+ width={100}
+ name="trigger_end_time"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '请输入',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '触发条件',
+ })}`}
+ required={true}
+ initialValue={props.values.trigger_end_time}
+ disabled={false}
+ rules={[
+ {
+ required: true,
+ message: (
+ <FormattedMessage
+ id="alarm_rules.page.rule.required.trigger_start_time"
+ defaultMessage="请填写时间"
+ />
+ ),
+ },
+ ]}
+ />
+ {/* <ProFormText
+ width={100}
+ name="trigger_end_time"
+ // label={<FormattedMessage id="alarm_rules.page.form.triggerConditions" defaultMessage="$$$" />}
+ placeholder={`${intl.formatMessage({
+ id: 'common.please_input',
+ defaultMessage: '$$$',
+ })}${intl.formatMessage({
+ id: 'alarm_rules.page.form.triggerConditions',
+ defaultMessage: '$$$',
+ })}`}
+ required={false}
+ initialValue={props.values.trigger_end_time}
+ disabled={false}
+ /> */}
+ <span style={{marginLeft: 6}}>时间内，发现风险人员立即告警。</span>
+ {/* <span style={{ marginLeft: 6 }}></span> */}
+ </div>
+ </ProForm.Group>
+ </ModalForm>
+ );
+};
+export default UpdateTimeForm;
diff --git a/src/pages/Alarm/OfflineAlarmRules/components/updateForm.less b/src/pages/Alarm/OfflineAlarmRules/components/updateForm.less
new file mode 100644
index 0000000..8152d29
--- /dev/null
+++ b/src/pages/Alarm/OfflineAlarmRules/components/updateForm.less
@@ -0,0 +1,8 @@
+:global {
+ .ant-form-item-control-input-content {
+ .ant-space-gap-col-small {
+ align-items: center;
+ }
+
+ }
+}
diff --git a/src/pages/Alarm/OfflineAlarmRules/index.tsx b/src/pages/Alarm/OfflineAlarmRules/index.tsx
new file mode 100644
index 0000000..2620e48
--- /dev/null
+++ b/src/pages/Alarm/OfflineAlarmRules/index.tsx
@@ -0,0 +1,277 @@
+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 {getAlarmRules} 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';
+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 } from '@ant-design/icons';
+import UpdateForm from './components/UpdateForm';
+import UpdateMultiForm from './components/UpdateMultiForm';
+import UpdateTimeForm from './components/UpdateTimeForm';
+const OfflineAlarmRulesList: 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.DeviceCategory) => {
+ deleteDeviceCategoryDeleteDeviceCategory({ 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 [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
+ // 编辑弹框
+ const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
+ const [updateMultiModalOpen, setUpdateMultiModalOpen] = useState<boolean>(false);
+ const [updateTimeModalOpen, setUpdateTimeModalOpen] = useState<boolean>(false);
+
+ const handleUpdateModal = () => {
+ if (updateModalOpen) {
+ setUpdateModalOpen(false);
+ setCurrentRow(undefined);
+ } else {
+ setUpdateModalOpen(true);
+ }
+ };
+ const handleUpdateMultiModal = () => {
+ if (updateMultiModalOpen) {
+ setUpdateMultiModalOpen(false);
+ setCurrentRow(undefined);
+ } else {
+ setUpdateMultiModalOpen(true);
+ }
+ };
+ const handleUpdateTimeModal = () => {
+ setCurrentRow(undefined);
+
+ if (updateTimeModalOpen) {
+ setUpdateTimeModalOpen(false);
+ } else {
+ setUpdateTimeModalOpen(true);
+ }
+ };
+
+ const getAlarmRulesList = async () => {
+ return {
+ code: 0,
+ success: true,
+ data: {
+ "list": [
+ {
+ "id": 1,
+ "createTime": "2023-10-17T02:35:41.14308Z",
+ "updateTime": "2023-10-17T02:35:41.14308Z",
+ "name": "单人徘徊告警",
+ "status": "已启用",
+ "isEnabled": true,
+ "remark": ""
+ },
+ {
+ "id": 2,
+ "createTime": "2023-10-17T02:40:28.292883Z",
+ "updateTime": "2023-10-26T03:02:51.356036Z",
+ "name": "多人聚集告警",
+ "status": "未启用",
+ "isEnabled": false,
+ "remark": ""
+ },
+ {
+ "id": 4,
+ "createTime": "2023-12-12T02:54:52.204957Z",
+ "updateTime": "2023-12-12T02:54:52.204957Z",
+ "name": "敏感时间段告警",
+ "status": "未启用",
+ "isEnabled": false,
+ "remark": ""
+ }
+ ],
+ "total": 3,
+ "page": 1,
+ "pageSize": 10
+ },
+ msg: "获取成功"
+ }
+ }
+
+ const columns: ProColumns<API.DeviceCategory>[] = [
+ {
+ title: <FormattedMessage id="alarm_rules.page.name" defaultMessage="告警规则" />,
+ dataIndex: 'warning_name',
+ hideInSearch: true,
+ },
+
+ {
+ title: <FormattedMessage id="alarm_rules.page.id" defaultMessage="规则ID" />,
+ dataIndex: 'id',
+ hideInSearch: true,
+ },
+ {
+ title: <FormattedMessage id="alarm_rules.page.status" defaultMessage="规则状态" />,
+ dataIndex: 'is_use',
+ hideInSearch: true,
+ render: (dom) => {
+ return (
+ <Tag bordered={false} color={dom === 1? "success": ""} style={{
+ // fontSize:14,
+ color: dom === 1? '#52C41A': "#999"
+ }}>
+ {dom === 1 ? '已启用' : '未启用'}
+ </Tag>
+ );
+ },
+ },
+ {
+ title: <FormattedMessage id="alarm_rules.page.updateTime" defaultMessage="修改时间" />,
+ dataIndex: 'update_time',
+ sorter: true,
+ hideInSearch: true,
+ valueType: 'dateTime',
+ },
+
+ {
+ title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
+ dataIndex: 'option',
+ valueType: 'option',
+ fixed: 'right',
+ render: (_, record) => [
+ <TableActionCard
+ key="TableActionCardRef"
+ renderActions={[
+ {
+ key: 'update',
+ renderDom: (
+ <Button
+ key="update"
+ type="link"
+ size="small"
+ style={{
+ color:"#081FA8",
+
+ }}
+ icon={<EditOutlined style={{
+ marginRight: 3
+ }} />}
+ onClick={() => {
+ console.log(record);
+ if(record.id === 1) {
+ setUpdateModalOpen(true);
+ }else if(record.id === 2) {
+ setUpdateMultiModalOpen(true);
+ }else {
+ setUpdateTimeModalOpen(true);
+ }
+ setCurrentRow(record);
+ }}
+ >
+ <FormattedMessage id="common.edit" defaultMessage="编辑" />
+ </Button>
+ ),
+ },
+ // {
+ // key: 'destroy',
+ // renderDom: (
+ // <IsDelete
+ // deleteApi={() => {
+ // handleDestroy(record).then(() => {});
+ // }}
+ // ></IsDelete>
+ // ),
+ // },
+ ]}
+ ></TableActionCard>,
+ ],
+ },
+ ];
+ return (
+ <PageContainer>
+ <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 getAlarmRules(reqParams);
+ console.log(resp);
+ 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}
+ />
+ <UpdateForm
+ updateModalOpen={updateModalOpen}
+ values={currentRow || {}}
+ handleModal={handleUpdateModal}
+ reload={actionRef.current?.reload}
+ />
+ <UpdateMultiForm
+ updateModalOpen={updateMultiModalOpen}
+ values={currentRow || {}}
+ handleModal={handleUpdateMultiModal}
+ reload={actionRef.current?.reload}
+ />
+ <UpdateTimeForm
+ updateModalOpen={updateTimeModalOpen}
+ values={currentRow || {}}
+ handleModal={handleUpdateTimeModal}
+ reload={actionRef.current?.reload}
+ />
+ </PageContainer>
+ );
+};
+
+export default OfflineAlarmRulesList;
diff --git a/src/pages/User/Login/index1.tsx b/src/pages/User/Login/index1.tsx
index 9459eba..6a9329c 100644
--- a/src/pages/User/Login/index1.tsx
+++ b/src/pages/User/Login/index1.tsx
@@ -182,7 +182,7 @@ const Login: React.FC = () => {
"name": "involved-list",
"path": "/realTime/involved-list",
"routes": [],
- "title": "重点关注",
+ "title": "告警汇总",
}
]
},
@@ -235,16 +235,16 @@ const Login: React.FC = () => {
"routes": [],
"title": "视频分析",
},
- // {
- // "access": "",
- // "component": "Alarm/AlarmRules",
- // "icon": "",
- // "key": "",
- // "name": "alarm_rules",
- // "path": "/offline/alarm_rules",
- // "routes": [],
- // "title": "告警规则",
- // },
+ {
+ "access": "",
+ "component": "Alarm/OfflineAlarmRules",
+ "icon": "",
+ "key": "",
+ "name": "OfflineAlarmRules",
+ "path": "/offline/OfflineAlarmRules",
+ "routes": [],
+ "title": "告警规则",
+ },
{
"access": "",
"component": "Alarm/InvolvedListUpload",
@@ -253,7 +253,7 @@ const Login: React.FC = () => {
"name": "involved-list-upload",
"path": "/offline/involved-list-upload",
"routes": [],
- "title": "重点关注(上传)",
+ "title": "告警汇总",
}
]
},