feat: 完善告警模块完成，告警图文展示功能优化完成
parent
e3307046be
commit
367df37cda
@ -0,0 +1,16 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-12-26 15:51:09
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-26 15:51:18
|
||||
* @FilePath: \general-ai-platform-web\config\defaultStyle.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
export const flex: React.CSSProperties = {
|
||||
display: 'flex'
|
||||
}
|
||||
|
||||
export const flexRA: React.CSSProperties = {
|
||||
...flex,
|
||||
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
@ -0,0 +1,65 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-12-29 14:19:46
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-29 15:31:14
|
||||
* @FilePath: \general-ai-platform-web\src\components\Loading\loadingSpin.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
||||
type LoadingSpinProps = {
|
||||
spinning: boolean;
|
||||
tip?: string | React.ReactNode;
|
||||
indicator?: React.ReactNode;
|
||||
};
|
||||
/**
|
||||
* @加载控件
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
const LoadingSpin: React.FC<LoadingSpinProps> = (props) => {
|
||||
return props.spinning ? (
|
||||
<div
|
||||
style={{
|
||||
background: 'transparent',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 999,
|
||||
backgroundColor: 'rgba(0,0,0, 0.3)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 12,
|
||||
width: 361,
|
||||
height: 216,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
color: '#154DDD'
|
||||
}}
|
||||
>
|
||||
{props.indicator ? (
|
||||
props.indicator
|
||||
) : (
|
||||
<img style={{ width: 120 }} src="/loading1.gif" alt="" />
|
||||
)}
|
||||
|
||||
<p style={{padding: 8, margin: 0}}>{props.tip || '请稍候...'}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoadingSpin;
|
||||
@ -0,0 +1,45 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-12-27 10:30:10
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-27 11:06:00
|
||||
* @FilePath: \general-ai-platform-web\src\components\TableActionCard\isModalDelete.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import modal from 'antd/es/modal';
|
||||
|
||||
type IsModalDeleteProps = {
|
||||
deleteButton: React.ReactNode;
|
||||
deleteApi: () => void;
|
||||
titleText?: string;
|
||||
contentText?: string;
|
||||
};
|
||||
|
||||
const IsModalDelete: React.FC<IsModalDeleteProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const confirm = () => {
|
||||
modal.confirm({
|
||||
title: props.titleText || `确认删除吗？`,
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
content: props.contentText || '确认删除吗？删除后将无法找回，请谨慎操作。',
|
||||
okText: intl.formatMessage({ id: 'common.okText', defaultMessage: '$$$' }),
|
||||
cancelText: intl.formatMessage({ id: 'common.cancelText', defaultMessage: '$$$' }),
|
||||
onOk() {
|
||||
props.deleteApi();
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<span onClick={() => confirm()}>{props.deleteButton}</span>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IsModalDelete;
|
||||
@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
import {Drawer} from "antd";
|
||||
import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
|
||||
|
||||
export type ColumnDrawProps = {
|
||||
handleDrawer: (id?: any)=>void;
|
||||
isShowDetail: boolean;
|
||||
columns: ProColumns<API.DeviceCategory>[];
|
||||
currentRow: API.DeviceCategory | undefined;
|
||||
};
|
||||
|
||||
|
||||
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
width={500}
|
||||
open={props.isShowDetail}
|
||||
onClose={() => {
|
||||
props.handleDrawer();
|
||||
}}
|
||||
closable={true}
|
||||
>
|
||||
{props.currentRow?.id && (
|
||||
<ProDescriptions<API.DeviceCategory>
|
||||
column={2}
|
||||
title={props.currentRow?.id}
|
||||
request={async () => ({
|
||||
data: props.currentRow || {},
|
||||
})}
|
||||
params={{
|
||||
id: props.currentRow?.id,
|
||||
}}
|
||||
columns={props.columns as ProDescriptionsItemProps<API.DeviceCategory>[]}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
export {ColumnDrawer}
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
import { FormattedMessage} from '@umijs/max';
|
||||
export const DeviceCategoryColumns = [{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.id"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "id",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.name"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "name",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.code"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "code",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.remark"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "remark",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.createTime"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "create_time",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.updateTime"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "update_time",
|
||||
},]
|
||||
@ -1,143 +0,0 @@
|
||||
import { postDeviceCategoryCreateDeviceCategory } from '@/services/device/DeviceCategory';
|
||||
import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Form, Switch, message } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
proFormSmallItemStyleProps,
|
||||
proFormSmallModelWidth,
|
||||
} from '../../../../../config/defaultForm';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.DeviceCategory>;
|
||||
|
||||
export type CreateFormProps = {
|
||||
createModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.DeviceCategory>;
|
||||
reload: any;
|
||||
};
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [isAuto, setIsAuto] = useState(true);
|
||||
const [form] = Form.useForm<API.DeviceCategory>();
|
||||
|
||||
return (
|
||||
<ModalForm<API.DeviceCategory>
|
||||
width={proFormSmallModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.add',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.createModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
postDeviceCategoryCreateDeviceCategory(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="DCSDeviceList.device_category.table.list.name" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.name',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.rule.required.name"
|
||||
defaultMessage="name is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width="lg"
|
||||
name="code"
|
||||
label={
|
||||
<FormattedMessage id="DCSDeviceList.device_category.table.list.code" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.code',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={!isAuto}
|
||||
initialValue=""
|
||||
disabled={isAuto}
|
||||
rules={
|
||||
isAuto
|
||||
? []
|
||||
: [
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.rule.required.code"
|
||||
defaultMessage="code is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]
|
||||
}
|
||||
addonAfter={
|
||||
<Switch
|
||||
checked={isAuto}
|
||||
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
|
||||
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
|
||||
onChange={setIsAuto}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="remark"
|
||||
label={
|
||||
<FormattedMessage id="DCSDeviceList.device_category.table.list.remark" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.remark',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default CreateForm;
|
||||
@ -1,187 +0,0 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-11-01 13:56:33
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-11-17 10:12:53
|
||||
* @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 { ModalForm, ProForm, ProFormDateTimePicker, ProFormText } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Form, message } from 'antd';
|
||||
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
||||
import React from 'react';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.DeviceCategory>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
updateModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
values: Partial<API.DeviceCategory>;
|
||||
reload: any;
|
||||
};
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.DeviceCategory>();
|
||||
|
||||
return (
|
||||
<ModalForm<API.DeviceCategory>
|
||||
width={proFormModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.update',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.updateModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
putDeviceCategoryUpdateDeviceCategory(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={proFormItemStyleProps.column2Width}
|
||||
name="id"
|
||||
label="id"
|
||||
disabled={true}
|
||||
initialValue={props.values.id}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="name"
|
||||
label={
|
||||
<FormattedMessage id="DCSDeviceList.device_category.table.list.name" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.name',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={true}
|
||||
initialValue={props.values.name}
|
||||
disabled={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.rule.required.name"
|
||||
defaultMessage="name is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="code"
|
||||
label={
|
||||
<FormattedMessage id="DCSDeviceList.device_category.table.list.code" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.code',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={true}
|
||||
initialValue={props.values.code}
|
||||
disabled={false}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.rule.required.code"
|
||||
defaultMessage="code is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="remark"
|
||||
label={
|
||||
<FormattedMessage id="DCSDeviceList.device_category.table.list.remark" defaultMessage="$$$" />
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.remark',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
initialValue={props.values.remark}
|
||||
disabled={false}
|
||||
/>
|
||||
<ProFormDateTimePicker
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="createTime"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.createTime"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.createTime',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
initialValue={props.values.createTime}
|
||||
disabled={true}
|
||||
/>
|
||||
<ProFormDateTimePicker
|
||||
width={proFormItemStyleProps.column2Width}
|
||||
name="updateTime"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.updateTime"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'DCSDeviceList.device_category.table.list.updateTime',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
initialValue={props.values.updateTime}
|
||||
disabled={true}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default UpdateForm;
|
||||
@ -1,32 +0,0 @@
|
||||
import { FormattedMessage} from '@umijs/max';
|
||||
export const DeviceCategoryColumns = [{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.id"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "id",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.name"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "name",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.code"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "code",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.remark"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "remark",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.createTime"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "create_time",
|
||||
},{
|
||||
title: (<FormattedMessage
|
||||
id="DCSDeviceList.device_category.table.list.updateTime"
|
||||
defaultMessage="$$$"/>),
|
||||
dataIndex: "update_time",
|
||||
},]
|
||||
@ -0,0 +1,95 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-12-26 14:46:35
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-26 14:58:36
|
||||
* @FilePath: \general-ai-platform-web\src\pages\Alarm\AlarmWays\components\CreateForm.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { ModalForm, ProForm, ProFormText } from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import React from 'react';
|
||||
import {
|
||||
proFormSmallItemStyleProps,
|
||||
proFormSmallModelWidth,
|
||||
} from '../../../../../config/defaultForm';
|
||||
// TODO 需要根据接口替换API.DeviceCategory
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.DeviceCategory>;
|
||||
|
||||
export type CreateFormProps = {
|
||||
createModalOpen: boolean;
|
||||
handleModal: () => void;
|
||||
reload: any;
|
||||
};
|
||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
||||
const intl = useIntl();
|
||||
// const [isAuto, setIsAuto] = useState(true);
|
||||
const [form] = Form.useForm<API.DeviceCategory>();
|
||||
|
||||
return (
|
||||
<ModalForm<API.DeviceCategory>
|
||||
width={proFormSmallModelWidth}
|
||||
title={intl.formatMessage({
|
||||
id: 'alarm.ways.page.add',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
open={props.createModalOpen}
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
modalProps={{
|
||||
destroyOnClose: true,
|
||||
onCancel: () => props.handleModal(),
|
||||
}}
|
||||
submitTimeout={2000}
|
||||
onFinish={async (values) => {
|
||||
// TODO 需要对接新增告警方式接口
|
||||
console.log('onFinish_values', values);
|
||||
// postDeviceCategoryCreateDeviceCategory(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.ways.page.model.name" defaultMessage="$$$" />}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'alarm.ways.page.model.name',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={true}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<FormattedMessage
|
||||
id="alarm.ways.page.model.rule.required.name"
|
||||
defaultMessage="name is required"
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ProForm.Group>
|
||||
</ModalForm>
|
||||
);
|
||||
};
|
||||
export default CreateForm;
|
||||
@ -0,0 +1,169 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-11-01 13:56:33
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-28 14:38:52
|
||||
* @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 { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
|
||||
import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
ProForm,
|
||||
ProFormList,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
} from '@ant-design/pro-components';
|
||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||
import { Form } from 'antd';
|
||||
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
|
||||
import {
|
||||
proFormListActionButtonProps,
|
||||
proFormListCreatorButtonProps,
|
||||
proFormSmallItemStyleProps,
|
||||
} from '../../../../../config/defaultForm';
|
||||
export type FormValueType = {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
} & Partial<API.DeviceCategory>;
|
||||
|
||||
export type UpdateFormProps = {
|
||||
ref: any;
|
||||
values: Record<string, any>;
|
||||
reload: any;
|
||||
};
|
||||
const UpdateForm = forwardRef((props: UpdateFormProps, ref: React.Ref<any> | undefined) => {
|
||||
const intl = useIntl();
|
||||
const [form] = Form.useForm<API.DeviceCategory>();
|
||||
// modalProps={{
|
||||
// destroyOnClose: true,
|
||||
// onCancel: () => props.handleModal(),
|
||||
// }}
|
||||
// submitTimeout={2000}
|
||||
|
||||
// 最关键的代码: 第二个参数返回一个对象 —— 定义 父组件可以调用这个组件 的方法
|
||||
const initSubmitForm = () => {
|
||||
console.log('调用子组件方法', form);
|
||||
form.submit();
|
||||
};
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
initSubmitForm,
|
||||
}),
|
||||
[],
|
||||
);
|
||||
// 数据变更给表单设置初始值
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
...props.values,
|
||||
});
|
||||
}, [props.values]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProForm
|
||||
form={form}
|
||||
autoFocusFirstInput
|
||||
submitter={{
|
||||
render: false, // 隐藏提交按钮
|
||||
}}
|
||||
onFinish={async (values) => {
|
||||
// TODO 需要对接更新告警方式接口
|
||||
console.log('onFinish_values', values);
|
||||
// putDeviceCategoryUpdateDeviceCategory(values)
|
||||
// .then(() => {
|
||||
// message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||
// props.reload();
|
||||
// })
|
||||
// .catch(() => {
|
||||
// message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||
// });
|
||||
return true;
|
||||
}}
|
||||
>
|
||||
<ProFormSelect
|
||||
width={proFormSmallItemStyleProps.width}
|
||||
name="serviceName"
|
||||
label={<FormattedMessage id="alarm.ways.page.form.serviceName" defaultMessage="$$$" />}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_select',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'alarm.ways.page.form.serviceName',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
// TODO 在types中增加类型注释
|
||||
initialValue={props.values?.serviceName}
|
||||
debounceTime={1000}
|
||||
request={async () => {
|
||||
// TODO 此处需要使用告警级别接口联调
|
||||
const resp = await postDeviceGroupGetDeviceGroupFkSelect({});
|
||||
return resp.data.list.map((v: any) => {
|
||||
return {
|
||||
label: v.name,
|
||||
value: v.id,
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<ProFormList
|
||||
style={{
|
||||
width: proFormSmallItemStyleProps.width,
|
||||
}}
|
||||
copyIconProps={{
|
||||
Icon: SnippetsOutlined,
|
||||
}}
|
||||
deleteIconProps={{
|
||||
Icon: CloseOutlined,
|
||||
}}
|
||||
initialValue={props.values?.params}
|
||||
name="params"
|
||||
label= {<span className='h3 gn'><FormattedMessage id="alarm.ways.page.form.params" defaultMessage="$$$" /></span>}
|
||||
|
||||
creatorButtonProps={proFormListCreatorButtonProps}
|
||||
{
|
||||
...proFormListActionButtonProps
|
||||
}
|
||||
>
|
||||
{(f, index, action) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: proFormSmallItemStyleProps.width - 44,
|
||||
}}
|
||||
>
|
||||
<ProFormText width={229} key="name" name="name" label="键名" />
|
||||
<ProFormText width={229} key="default" name="default" label="默认值" />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</ProFormList>
|
||||
<ProFormTextArea
|
||||
name="template"
|
||||
label={<FormattedMessage id="alarm.ways.page.form.template" defaultMessage="$$$" />}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}${intl.formatMessage({
|
||||
id: 'alarm.ways.page.form.template',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
initialValue={props.values?.template}
|
||||
disabled={false}
|
||||
/>
|
||||
</ProForm>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
export default UpdateForm;
|
||||
@ -0,0 +1,222 @@
|
||||
import { FormattedMessage } from '@/.umi/plugin-locale';
|
||||
import IsModalDelete from '@/components/TableActionCard/isModalDelete';
|
||||
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
||||
import { Button, Empty } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import CreateForm from './components/CreateForm';
|
||||
import UpdateForm from './components/UpdateForm';
|
||||
|
||||
/**
|
||||
* @交互说明
|
||||
* 1.告警方式初始状态
|
||||
* 2.新建告警方式
|
||||
* 3.选择告警方式、更新内容
|
||||
* 4.删除告警方式
|
||||
*
|
||||
* 【*是否需要新增通知按钮】缺少新建操作
|
||||
* 【*是否需要展示告警方式列表】展示&编辑混合
|
||||
*/
|
||||
|
||||
const pageStyle: React.CSSProperties = {
|
||||
minHeight: '50vh',
|
||||
};
|
||||
|
||||
const AlarmWays: React.FC = () => {
|
||||
const updateFormRef = useRef(null);
|
||||
|
||||
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||
// const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||
const [activeTabId, setActiveTabId] = useState<string>('0');
|
||||
const [waysList, setWaysList] = useState<Record<string, any>[]>([
|
||||
{
|
||||
name: '短信通知',
|
||||
id: '0',
|
||||
serviceName: 4,
|
||||
params: [
|
||||
{
|
||||
name: 'name1',
|
||||
default: 'default1',
|
||||
},
|
||||
],
|
||||
template: '123',
|
||||
},
|
||||
{
|
||||
name: '电话通知',
|
||||
id: '1',
|
||||
serviceName: 2,
|
||||
params: [
|
||||
{
|
||||
name: 'name11',
|
||||
default: 'default11',
|
||||
},
|
||||
{
|
||||
name: 'name12',
|
||||
default: 'default12',
|
||||
},
|
||||
],
|
||||
template: '456',
|
||||
},
|
||||
{
|
||||
name: '邮件通知',
|
||||
id: '2',
|
||||
serviceName: '',
|
||||
params: [],
|
||||
template: '',
|
||||
},
|
||||
{
|
||||
name: '微信通知',
|
||||
id: '3',
|
||||
serviceName: '',
|
||||
params: [],
|
||||
template: '',
|
||||
},
|
||||
]);
|
||||
const [currentRow, setCurrentRow] = useState<Record<string, any> | undefined>({});
|
||||
|
||||
// const handleUpdateModal = () => {
|
||||
// if (updateModalOpen) {
|
||||
// setUpdateModalOpen(false);
|
||||
// setCurrentRow(undefined);
|
||||
// } else {
|
||||
// setUpdateModalOpen(true);
|
||||
// }
|
||||
// };
|
||||
const handleCreateModal = () => {
|
||||
if (createModalOpen) {
|
||||
setCreateModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setCreateModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 加载告警方式详情
|
||||
function loadDetail() {
|
||||
const currRow = waysList.find((item) => item.id === activeTabId);
|
||||
setCurrentRow(() => currRow);
|
||||
console.log(currRow, 'loadDetail', currentRow);
|
||||
}
|
||||
|
||||
// 更新告警方式
|
||||
function handleUpdate() {
|
||||
updateFormRef.current.initSubmitForm();
|
||||
console.log(updateFormRef.current, 'updateFormRef');
|
||||
}
|
||||
|
||||
// 删除告警方式
|
||||
function handleDelete() {
|
||||
const waysData = waysList.filter((item) => item.id !== activeTabId);
|
||||
setWaysList(waysData);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
||||
waysData.length && setActiveTabId(waysData[0].id);
|
||||
}
|
||||
|
||||
function handleReload() {
|
||||
// TODO 需要调用刷新告警方式列表接口
|
||||
// loadDetail();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadDetail();
|
||||
}, [activeTabId]);
|
||||
|
||||
useEffect(() => {
|
||||
handleReload();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PageContainer>
|
||||
<ProCard
|
||||
title={<FormattedMessage id="alarm.ways.page.title" defaultMessage="$$$" />}
|
||||
extra={
|
||||
<Button type="primary" onClick={handleCreateModal}>
|
||||
<FormattedMessage id="alarm.ways.page.add" defaultMessage="$$$" />
|
||||
</Button>
|
||||
}
|
||||
headStyle={{
|
||||
padding: '16px',
|
||||
borderBottom: '1px solid #E0E0E0',
|
||||
}}
|
||||
bodyStyle={{
|
||||
...pageStyle,
|
||||
padding: '16px',
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
{waysList?.length ? (
|
||||
<div>
|
||||
<div className="gn tabAction_box_wrap" style={{ paddingTop: 4, marginBottom: 16 }}>
|
||||
{waysList.map((item, index) => {
|
||||
// eslint-disable-next-line react/jsx-key
|
||||
return (
|
||||
<Button
|
||||
style={{ marginRight: 12 }}
|
||||
type={activeTabId === item.id ? 'primary' : 'default'}
|
||||
key={index}
|
||||
onClick={() => {
|
||||
setActiveTabId(item.id);
|
||||
}}
|
||||
>
|
||||
{item.name || ''}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<UpdateForm ref={updateFormRef} values={currentRow || {}} reload={handleReload} />
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
paddingTop: 8,
|
||||
paddingBottom: 8,
|
||||
}}
|
||||
>
|
||||
<Button type="primary" onClick={handleUpdate}>
|
||||
<FormattedMessage id="common.save" defaultMessage="$$$" />
|
||||
</Button>
|
||||
<IsModalDelete
|
||||
titleText={`确认删除${currentRow?.name}吗？`}
|
||||
contentText={`确认删除${currentRow?.name}吗？删除后将无法通过${currentRow?.name}发送告警，请谨慎操作。`}
|
||||
deleteButton={
|
||||
<Button type="default" danger>
|
||||
<FormattedMessage id="common.delete" defaultMessage="$$$" />
|
||||
</Button>
|
||||
}
|
||||
deleteApi={handleDelete}
|
||||
></IsModalDelete>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Empty
|
||||
style={{
|
||||
minHeight: pageStyle.minHeight,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
|
||||
imageStyle={{ height: 160 }}
|
||||
description={
|
||||
<span>
|
||||
<FormattedMessage id="alarm.ways.page.empty.des" defaultMessage="$$$" />
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Button type="primary" onClick={handleCreateModal}>
|
||||
<FormattedMessage id="alarm.ways.page.add" defaultMessage="$$$" />
|
||||
</Button>
|
||||
</Empty>
|
||||
)}
|
||||
</ProCard>
|
||||
|
||||
<CreateForm
|
||||
createModalOpen={createModalOpen}
|
||||
handleModal={handleCreateModal}
|
||||
reload={handleReload}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlarmWays;
|
||||
@ -0,0 +1,112 @@
|
||||
/*
|
||||
* @Author: zhoux zhouxia@supervision.ltd
|
||||
* @Date: 2023-12-25 16:14:04
|
||||
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||
* @LastEditTime: 2023-12-29 15:36:39
|
||||
* @FilePath: \general-ai-platform-web\src\pages\FabricView\Room\components\ModelTipBox.tsx
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import { useState } from 'react';
|
||||
|
||||
const modelOptionList: Record<string, any>[] = [
|
||||
{
|
||||
id: '0',
|
||||
label: '在线',
|
||||
status: 'watchOnline',
|
||||
color: '#52C41A',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
label: '离线',
|
||||
status: 'watchOutline',
|
||||
color: '#CCCCCC',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: '故障',
|
||||
status: 'watchWarn',
|
||||
color: '#FAAD14',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
label: '告警',
|
||||
status: 'watchError',
|
||||
color: '#E80D0D',
|
||||
},
|
||||
];
|
||||
|
||||
type ModelTipBoxProps = {
|
||||
options?: Record<string, any>[];
|
||||
changeStatusSelected: (arr: string[]) => void
|
||||
};
|
||||
|
||||
const ModelTipBox: React.FC<ModelTipBoxProps> = (props) => {
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
function doSelected(options: Record<string, any>) {
|
||||
let currSelectedArr: string[] = []
|
||||
if (selected.includes(options.status)) {
|
||||
currSelectedArr = selected.filter((item) => options.status != item)
|
||||
} else {
|
||||
currSelectedArr = [...selected, options.status]
|
||||
}
|
||||
setSelected(currSelectedArr);
|
||||
props.changeStatusSelected(currSelectedArr)
|
||||
}
|
||||
return (
|
||||
<ul
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: 100,
|
||||
height: 200,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
background: 'white'
|
||||
}}
|
||||
>
|
||||
{modelOptionList.map((item) => {
|
||||
const activeStyle: React.CSSProperties = selected.includes(item.status)
|
||||
? {
|
||||
border: '1px solid #154DDD',
|
||||
background: '#154DDD',
|
||||
color: 'white',
|
||||
}
|
||||
: {
|
||||
border: '1px solid #DCDCDC',
|
||||
color: '#333',
|
||||
};
|
||||
return (
|
||||
<li
|
||||
key={item.id}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 2,
|
||||
|
||||
padding: '4px 6px',
|
||||
marginBottom: 12,
|
||||
width: 50,
|
||||
cursor: 'pointer',
|
||||
...activeStyle,
|
||||
|
||||
}}
|
||||
onClick={() => doSelected(item)}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: '50%',
|
||||
background: item.color,
|
||||
}}
|
||||
></span>
|
||||
<span style={{ paddingLeft: 2 }}>{item.label}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelTipBox;
|
||||
Loading…
Reference in New Issue