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