|
@@ -7,10 +7,11 @@ import styles from './index.less';
|
|
|
import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
|
|
import type { SceneItem } from '@/pages/rule-engine/Scene/typings';
|
|
|
import { CheckOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
|
|
import { CheckOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
|
|
|
import classNames from 'classnames';
|
|
import classNames from 'classnames';
|
|
|
-import { ActionsType, BranchesThen } from '@/pages/rule-engine/Scene/typings';
|
|
|
|
|
|
|
+import { ActionsType, BranchesThen, Executor } from '@/pages/rule-engine/Scene/typings';
|
|
|
import MyTooltip from './MyTooltip';
|
|
import MyTooltip from './MyTooltip';
|
|
|
import { handleOptionsLabel } from '@/pages/rule-engine/Scene/Save/terms/paramsItem';
|
|
import { handleOptionsLabel } from '@/pages/rule-engine/Scene/Save/terms/paramsItem';
|
|
|
import { isArray } from 'lodash';
|
|
import { isArray } from 'lodash';
|
|
|
|
|
+import TriggerAlarm from '@/pages/rule-engine/Scene/Save/action/TriggerAlarm';
|
|
|
|
|
|
|
|
const imageMap = new Map();
|
|
const imageMap = new Map();
|
|
|
imageMap.set('timer', require('/public/images/scene/scene-timer.png'));
|
|
imageMap.set('timer', require('/public/images/scene/scene-timer.png'));
|
|
@@ -51,29 +52,99 @@ const notifyRender = (data: ActionsType | undefined) => {
|
|
|
switch (data?.notify?.notifyType) {
|
|
switch (data?.notify?.notifyType) {
|
|
|
case 'dingTalk':
|
|
case 'dingTalk':
|
|
|
if (data?.options?.provider === 'dingTalkRobotWebHook') {
|
|
if (data?.options?.provider === 'dingTalkRobotWebHook') {
|
|
|
- return `通过群机器人消息发送${data?.options?.templateName || data?.notify?.templateId}`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>通过群机器人消息发送{data?.options?.templateName || data?.notify?.templateId}</span>
|
|
|
|
|
+ );
|
|
|
}
|
|
}
|
|
|
- return `通过钉钉向${data?.options?.notifierName || data?.notify?.notifierId}发送${
|
|
|
|
|
- data?.options?.templateName || data?.notify?.templateId
|
|
|
|
|
- }`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过钉钉向{data?.options?.notifierName || data?.notify?.notifierId}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
case 'weixin':
|
|
case 'weixin':
|
|
|
- return `通过微信向${data?.options?.sendTo || ''}${data?.options?.orgName || ''}${
|
|
|
|
|
- data?.options?.tagName || ''
|
|
|
|
|
- }发送${data?.options?.templateName || data?.notify?.templateId}`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过微信向{data?.options?.sendTo || ''}
|
|
|
|
|
+ {data?.options?.orgName || ''}
|
|
|
|
|
+ {data?.options?.tagName || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
case 'email':
|
|
case 'email':
|
|
|
- return `通过邮件向${data?.options?.sendTo || ''}发送${
|
|
|
|
|
- data?.options?.templateName || data?.notify?.templateId
|
|
|
|
|
- }`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过邮件向{data?.options?.sendTo || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
case 'voice':
|
|
case 'voice':
|
|
|
- return `通过语音向${data?.options?.sendTo || ''}发送 ${
|
|
|
|
|
- data?.options?.templateName || data?.notify?.templateId
|
|
|
|
|
- }`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过语音向{data?.options?.sendTo || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
case 'sms':
|
|
case 'sms':
|
|
|
- return `通过短信向${data?.options?.sendTo || ''}发送${
|
|
|
|
|
- data?.options?.templateName || data?.notify?.templateId
|
|
|
|
|
- }`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过短信向{data?.options?.sendTo || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
case 'webhook':
|
|
case 'webhook':
|
|
|
- return `通过webhook发送${data?.options?.templateName || data?.notify?.templateId}`;
|
|
|
|
|
|
|
+ return <span>通过webhook发送{data?.options?.templateName || data?.notify?.templateId}</span>;
|
|
|
|
|
+ default:
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const notifyTextRender = (data: ActionsType | undefined) => {
|
|
|
|
|
+ switch (data?.notify?.notifyType) {
|
|
|
|
|
+ case 'dingTalk':
|
|
|
|
|
+ if (data?.options?.provider === 'dingTalkRobotWebHook') {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>通过群机器人消息发送{data?.options?.templateName || data?.notify?.templateId}</span>
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过钉钉向{data?.options?.notifierName || data?.notify?.notifierId}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'weixin':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过微信向{data?.options?.sendTo || ''}
|
|
|
|
|
+ {data?.options?.orgName || ''}
|
|
|
|
|
+ {data?.options?.tagName || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'email':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过邮件向{data?.options?.sendTo || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'voice':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过语音向{data?.options?.sendTo || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'sms':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ 通过短信向{data?.options?.sendTo || ''}发送
|
|
|
|
|
+ {data?.options?.templateName || data?.notify?.templateId}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'webhook':
|
|
|
|
|
+ return <span>通过webhook发送{data?.options?.templateName || data?.notify?.templateId}</span>;
|
|
|
default:
|
|
default:
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
@@ -82,30 +153,107 @@ const notifyRender = (data: ActionsType | undefined) => {
|
|
|
const deviceRender = (data: ActionsType | undefined) => {
|
|
const deviceRender = (data: ActionsType | undefined) => {
|
|
|
switch (data?.device?.selector) {
|
|
switch (data?.device?.selector) {
|
|
|
case 'fixed':
|
|
case 'fixed':
|
|
|
- return `${data?.options?.type}${data?.options?.name}${data?.options?.properties}`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {data?.options?.type}
|
|
|
|
|
+ <a
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {data?.options?.name}
|
|
|
|
|
+ </a>
|
|
|
|
|
+ {data?.options?.properties}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'tag':
|
|
|
|
|
+ let tags: string = '';
|
|
|
|
|
+ data.options?.taglist?.map((item: any) => {
|
|
|
|
|
+ tags += item.type || '' + item.name || '' + item.value || '';
|
|
|
|
|
+ });
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {data?.options?.type}
|
|
|
|
|
+ {tags}
|
|
|
|
|
+ <a
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {data?.options?.productName}
|
|
|
|
|
+ </a>
|
|
|
|
|
+ {data?.options?.properties}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'relation':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {data?.options?.type}与
|
|
|
|
|
+ <a
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {data?.options?.triggerName}
|
|
|
|
|
+ </a>
|
|
|
|
|
+ 具有相同{data?.options?.relationName}的
|
|
|
|
|
+ <a
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {data?.options?.productName}
|
|
|
|
|
+ </a>
|
|
|
|
|
+ 设备的{data?.options?.properties}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ default:
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+const deviceTextRender = (data: ActionsType | undefined) => {
|
|
|
|
|
+ switch (data?.device?.selector) {
|
|
|
|
|
+ case 'fixed':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {data?.options?.type}
|
|
|
|
|
+ {data?.options?.name}
|
|
|
|
|
+ {data?.options?.properties}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
case 'tag':
|
|
case 'tag':
|
|
|
let tags: string = '';
|
|
let tags: string = '';
|
|
|
data.options?.taglist?.map((item: any) => {
|
|
data.options?.taglist?.map((item: any) => {
|
|
|
tags += item.type || '' + item.name || '' + item.value || '';
|
|
tags += item.type || '' + item.name || '' + item.value || '';
|
|
|
});
|
|
});
|
|
|
- return `${
|
|
|
|
|
- data?.options?.type + tags + data?.options?.productName + data?.options?.properties
|
|
|
|
|
- }`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {data?.options?.type}
|
|
|
|
|
+ {tags}
|
|
|
|
|
+ {data?.options?.productName}
|
|
|
|
|
+ {data?.options?.properties}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
case 'relation':
|
|
case 'relation':
|
|
|
- return `${data?.options?.type}与${data?.options?.triggerName}具有相同${data?.options?.relationName}的${data?.options?.productName}设备的${data?.options?.properties}`;
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {data?.options?.type}与{data?.options?.triggerName}具有相同{data?.options?.relationName}的
|
|
|
|
|
+ {data?.options?.productName}设备的{data?.options?.properties}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
default:
|
|
default:
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const actionRender = (action: ActionsType) => {
|
|
|
|
|
|
|
+const actionTextRender = (action: ActionsType) => {
|
|
|
switch (action?.executor) {
|
|
switch (action?.executor) {
|
|
|
case 'notify':
|
|
case 'notify':
|
|
|
- return notifyRender(action);
|
|
|
|
|
|
|
+ return notifyTextRender(action);
|
|
|
case 'delay':
|
|
case 'delay':
|
|
|
return `${action?.delay?.time}${UnitEnum[action?.delay?.unit || '']}后执行后续动作`;
|
|
return `${action?.delay?.time}${UnitEnum[action?.delay?.unit || '']}后执行后续动作`;
|
|
|
case 'device':
|
|
case 'device':
|
|
|
- return deviceRender(action);
|
|
|
|
|
|
|
+ return deviceTextRender(action);
|
|
|
case 'alarm':
|
|
case 'alarm':
|
|
|
if (action?.alarm?.mode === 'relieve') {
|
|
if (action?.alarm?.mode === 'relieve') {
|
|
|
return '满足条件后将解除关联此场景的告警';
|
|
return '满足条件后将解除关联此场景的告警';
|
|
@@ -115,6 +263,58 @@ const actionRender = (action: ActionsType) => {
|
|
|
return null;
|
|
return null;
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
|
|
+interface ActionComponentProps {
|
|
|
|
|
+ action: ActionsType;
|
|
|
|
|
+ triggerChange: (type: keyof typeof Executor) => void;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const ActionComponentRender = (props: ActionComponentProps) => {
|
|
|
|
|
+ const { action, triggerChange } = props;
|
|
|
|
|
+ // TODO 执行动作跳转
|
|
|
|
|
+ switch (action?.executor) {
|
|
|
|
|
+ case 'notify':
|
|
|
|
|
+ return notifyRender(action);
|
|
|
|
|
+ case 'delay':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>{`${action?.delay?.time}${UnitEnum[action?.delay?.unit || '']}后执行后续动作`}</span>
|
|
|
|
|
+ );
|
|
|
|
|
+ case 'device':
|
|
|
|
|
+ return deviceRender(action);
|
|
|
|
|
+ case 'alarm':
|
|
|
|
|
+ return (
|
|
|
|
|
+ <span>
|
|
|
|
|
+ {action?.alarm?.mode === 'relieve' ? (
|
|
|
|
|
+ <>
|
|
|
|
|
+ 满足条件后将解除
|
|
|
|
|
+ <a
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ triggerChange(action?.executor);
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ 关联此场景的告警
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </>
|
|
|
|
|
+ ) : (
|
|
|
|
|
+ <>
|
|
|
|
|
+ 满足条件后将触发
|
|
|
|
|
+ <a
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ triggerChange(action?.executor);
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ 关联此场景的告警
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </>
|
|
|
|
|
+ )}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ );
|
|
|
|
|
+ default:
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
// 过滤器
|
|
// 过滤器
|
|
|
const actionFilter = (terms: any, isLast: boolean, index: number) => {
|
|
const actionFilter = (terms: any, isLast: boolean, index: number) => {
|
|
|
if (!Array.isArray(terms)) return '';
|
|
if (!Array.isArray(terms)) return '';
|
|
@@ -162,223 +362,259 @@ const conditionsRender = (when: any[], index: number) => {
|
|
|
return whenStr;
|
|
return whenStr;
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const branchesActionRender = (actions: any[]) => {
|
|
|
|
|
|
|
+interface BranchesActionProps {
|
|
|
|
|
+ actions: any[];
|
|
|
|
|
+ triggerChange: (type: keyof typeof Executor) => void;
|
|
|
|
|
+}
|
|
|
|
|
+const BranchesActionRender = (props: BranchesActionProps) => {
|
|
|
|
|
+ const { actions, triggerChange } = props;
|
|
|
if (actions && actions?.length) {
|
|
if (actions && actions?.length) {
|
|
|
const list = actions.slice(0, 3);
|
|
const list = actions.slice(0, 3);
|
|
|
- return list.map((item, index) => {
|
|
|
|
|
- const isLast = index < actions.length - 1;
|
|
|
|
|
- return (
|
|
|
|
|
- <div
|
|
|
|
|
- className={styles['right-item-right-item-contents-item']}
|
|
|
|
|
- style={{ maxWidth: `(${100 / list.length})%` }}
|
|
|
|
|
- >
|
|
|
|
|
- <MyTooltip placement={'topLeft'} title={actionRender(item)}>
|
|
|
|
|
- <div
|
|
|
|
|
- className={classNames(
|
|
|
|
|
- styles['right-item-right-item-contents-item-action'],
|
|
|
|
|
- styles['item-ellipsis'],
|
|
|
|
|
- )}
|
|
|
|
|
- >
|
|
|
|
|
- {actionRender(item)}
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className={classNames(styles['right-item-right-item-contents-text'])}>
|
|
|
|
|
+ {list.map((item, index) => {
|
|
|
|
|
+ const isLast = index < actions.length - 1;
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className={styles['right-item-right-item-contents-item']}>
|
|
|
|
|
+ <MyTooltip placement={'topLeft'} title={actionTextRender(item)}>
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={classNames(
|
|
|
|
|
+ styles['right-item-right-item-contents-item-action'],
|
|
|
|
|
+ styles['item-ellipsis'],
|
|
|
|
|
+ )}
|
|
|
|
|
+ >
|
|
|
|
|
+ <ActionComponentRender action={item} triggerChange={triggerChange} />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
|
|
+ <MyTooltip
|
|
|
|
|
+ placement={'topLeft'}
|
|
|
|
|
+ title={actionFilter(actions[index]?.options?.terms, isLast, index)}
|
|
|
|
|
+ >
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={classNames(
|
|
|
|
|
+ styles['right-item-right-item-contents-item-filter'],
|
|
|
|
|
+ styles['item-ellipsis'],
|
|
|
|
|
+ )}
|
|
|
|
|
+ >
|
|
|
|
|
+ {actionFilter(actions[index]?.options?.terms, isLast, index)}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
</div>
|
|
</div>
|
|
|
- </MyTooltip>
|
|
|
|
|
- <MyTooltip
|
|
|
|
|
- placement={'topLeft'}
|
|
|
|
|
- title={actionFilter(actions[index]?.options?.terms, isLast, index)}
|
|
|
|
|
|
|
+ );
|
|
|
|
|
+ })}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const TriggerRender = (data: SceneCardProps) => {
|
|
|
|
|
+ const trigger = data?.options?.trigger;
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className={classNames(styles['card-item-content-trigger'])}>
|
|
|
|
|
+ {trigger?.name && (
|
|
|
|
|
+ <MyTooltip placement="topLeft" title={trigger?.name || ''}>
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
+ style={{ maxWidth: '15%', color: 'rgba(47, 84, 235)', cursor: 'pointer' }}
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ // TODO 触发条件跳转
|
|
|
|
|
+ if (data.triggerType === 'device') {
|
|
|
|
|
+ if (data.trigger?.device?.selector === 'fixed') {
|
|
|
|
|
+ // 自定义
|
|
|
|
|
+ //selectorValues
|
|
|
|
|
+ } else if (data.trigger?.device?.selector === 'org') {
|
|
|
|
|
+ // 组织
|
|
|
|
|
+ } else if (data.trigger?.device?.selector === 'all') {
|
|
|
|
|
+ // 产品
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }}
|
|
|
>
|
|
>
|
|
|
- <div
|
|
|
|
|
- className={classNames(
|
|
|
|
|
- styles['right-item-right-item-contents-item-filter'],
|
|
|
|
|
- styles['item-ellipsis'],
|
|
|
|
|
- )}
|
|
|
|
|
- >
|
|
|
|
|
- {actionFilter(actions[index]?.options?.terms, isLast, index)}
|
|
|
|
|
- </div>
|
|
|
|
|
- </MyTooltip>
|
|
|
|
|
|
|
+ {trigger?.name || ''}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
|
|
+ )}
|
|
|
|
|
+ {trigger?.productName && (
|
|
|
|
|
+ <MyTooltip placement="topLeft" title={trigger?.productName || ''}>
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
+ style={{ maxWidth: '15%', color: 'rgba(47, 84, 235)' }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {trigger?.productName || ''}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
|
|
+ )}
|
|
|
|
|
+ {trigger?.when && (
|
|
|
|
|
+ <MyTooltip placement="topLeft" title={trigger?.when || ''}>
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
+ style={{ maxWidth: '30%' }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {trigger?.when || ''}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
|
|
+ )}
|
|
|
|
|
+ {trigger?.time && (
|
|
|
|
|
+ <div className={classNames(styles['card-item-content-trigger-item'])}>
|
|
|
|
|
+ {trigger?.time || ''}
|
|
|
</div>
|
|
</div>
|
|
|
- );
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- return '';
|
|
|
|
|
|
|
+ )}
|
|
|
|
|
+ {trigger?.extraTime && (
|
|
|
|
|
+ <div className={classNames(styles['card-item-content-trigger-item'])}>
|
|
|
|
|
+ {trigger?.extraTime || ''}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )}
|
|
|
|
|
+ {trigger?.action && (
|
|
|
|
|
+ <MyTooltip placement="topLeft" title={trigger?.action || ''}>
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
+ style={{ maxWidth: '20%' }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {trigger?.action || ''}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
|
|
+ )}
|
|
|
|
|
+ {trigger?.type && (
|
|
|
|
|
+ <div className={classNames(styles['card-item-content-trigger-item'])}>
|
|
|
|
|
+ {trigger?.type || ''}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const ContentRender = (data: SceneCardProps) => {
|
|
|
|
|
|
|
+export interface ActionRenderProps extends SceneCardProps {
|
|
|
|
|
+ triggerChange: (type: keyof typeof Executor) => void;
|
|
|
|
|
+}
|
|
|
|
|
+const ActionRender = (data: ActionRenderProps) => {
|
|
|
const [visible, setVisible] = useState<boolean>(false);
|
|
const [visible, setVisible] = useState<boolean>(false);
|
|
|
const type = data.triggerType;
|
|
const type = data.triggerType;
|
|
|
|
|
|
|
|
- if (!!type && (data.branches || [])?.length) {
|
|
|
|
|
- const trigger = data?.options?.trigger;
|
|
|
|
|
- return (
|
|
|
|
|
- <div className={styles['card-item-content-box']}>
|
|
|
|
|
- <div className={classNames(styles['card-item-content-trigger'])}>
|
|
|
|
|
- {trigger?.name && (
|
|
|
|
|
- <MyTooltip placement="topLeft" title={trigger?.name || ''}>
|
|
|
|
|
- <div
|
|
|
|
|
- className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
- style={{ maxWidth: '15%', color: 'rgba(47, 84, 235)' }}
|
|
|
|
|
- >
|
|
|
|
|
- {trigger?.name || ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- </MyTooltip>
|
|
|
|
|
- )}
|
|
|
|
|
- {trigger?.productName && (
|
|
|
|
|
- <MyTooltip placement="topLeft" title={trigger?.productName || ''}>
|
|
|
|
|
- <div
|
|
|
|
|
- className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
- style={{ maxWidth: '15%', color: 'rgba(47, 84, 235)' }}
|
|
|
|
|
- >
|
|
|
|
|
- {trigger?.productName || ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- </MyTooltip>
|
|
|
|
|
- )}
|
|
|
|
|
- {trigger?.when && (
|
|
|
|
|
- <MyTooltip placement="topLeft" title={trigger?.when || ''}>
|
|
|
|
|
- <div
|
|
|
|
|
- className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
- style={{ maxWidth: '16%' }}
|
|
|
|
|
- >
|
|
|
|
|
- {trigger?.when || ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- </MyTooltip>
|
|
|
|
|
- )}
|
|
|
|
|
- {trigger?.time && (
|
|
|
|
|
- <div className={classNames(styles['card-item-content-trigger-item'])}>
|
|
|
|
|
- {trigger?.time || ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- {trigger?.extraTime && (
|
|
|
|
|
- <div className={classNames(styles['card-item-content-trigger-item'])}>
|
|
|
|
|
- {trigger?.extraTime || ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- {trigger?.action && (
|
|
|
|
|
- <MyTooltip placement="topLeft" title={trigger?.action || ''}>
|
|
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className={styles['card-item-content-action']}>
|
|
|
|
|
+ {(visible ? data.branches || [] : (data?.branches || []).slice(0, 2)).map(
|
|
|
|
|
+ (item: any, index) => {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className={styles['card-item-content-action-item']} key={item?.key || index}>
|
|
|
|
|
+ {type === 'device' && (
|
|
|
|
|
+ <div className={styles['card-item-content-action-item-left']}>
|
|
|
|
|
+ {index === 0 ? '当' : '否则'}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ )}
|
|
|
<div
|
|
<div
|
|
|
- className={classNames(styles['card-item-content-trigger-item'], 'ellipsis')}
|
|
|
|
|
- style={{ maxWidth: '15%' }}
|
|
|
|
|
|
|
+ style={{ width: type === 'device' ? 'calc(100% - 48px)' : '100%' }}
|
|
|
|
|
+ className={styles['card-item-content-action-item-right']}
|
|
|
>
|
|
>
|
|
|
- {trigger?.action || ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- </MyTooltip>
|
|
|
|
|
- )}
|
|
|
|
|
- {trigger?.type && (
|
|
|
|
|
- <div className={classNames(styles['card-item-content-trigger-item'])}>
|
|
|
|
|
- {trigger?.type || ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className={styles['card-item-content-action']}>
|
|
|
|
|
- {(visible ? data.branches || [] : (data?.branches || []).slice(0, 2)).map(
|
|
|
|
|
- (item: any, index) => {
|
|
|
|
|
- return (
|
|
|
|
|
- <div className={styles['card-item-content-action-item']} key={item?.key || index}>
|
|
|
|
|
- {type === 'device' && (
|
|
|
|
|
- <div className={styles['card-item-content-action-item-left']}>
|
|
|
|
|
- {index === 0 ? '当' : '否则'}
|
|
|
|
|
|
|
+ <div className={styles['card-item-content-action-item-right-item']}>
|
|
|
|
|
+ {/*触发条件*/}
|
|
|
|
|
+ {type === 'device' && (item.shakeLimit?.enabled || data.options?.when?.[index]) && (
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={styles['right-item-left']}
|
|
|
|
|
+ style={{
|
|
|
|
|
+ maxWidth: Array.isArray(item.then) && item?.then.length ? '15%' : '100%',
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ <MyTooltip
|
|
|
|
|
+ placement={'topLeft'}
|
|
|
|
|
+ title={conditionsRender(data.options?.when || [], index)}
|
|
|
|
|
+ >
|
|
|
|
|
+ <div className={classNames(styles['trigger-conditions'], 'ellipsis')}>
|
|
|
|
|
+ {conditionsRender(data.options?.when || [], index)}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
|
|
+ {item.shakeLimit?.enabled && (
|
|
|
|
|
+ <MyTooltip
|
|
|
|
|
+ title={`(${item.shakeLimit?.time}秒内发生${item.shakeLimit?.threshold}
|
|
|
|
|
+ 次以上时执行一次)`}
|
|
|
|
|
+ >
|
|
|
|
|
+ <div className={classNames(styles['trigger-shake'], 'ellipsis')}>
|
|
|
|
|
+ ({item.shakeLimit?.time}秒内发生{item.shakeLimit?.threshold}
|
|
|
|
|
+ 次以上时执行一次)
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </MyTooltip>
|
|
|
|
|
+ )}
|
|
|
</div>
|
|
</div>
|
|
|
)}
|
|
)}
|
|
|
- <div
|
|
|
|
|
- style={{ width: type === 'device' ? 'calc(100% - 48px)' : '100%' }}
|
|
|
|
|
- className={styles['card-item-content-action-item-right']}
|
|
|
|
|
- >
|
|
|
|
|
- <div className={styles['card-item-content-action-item-right-item']}>
|
|
|
|
|
- {type === 'device' &&
|
|
|
|
|
- (item.shakeLimit?.enabled || data.options?.when?.[index]) && (
|
|
|
|
|
- <div
|
|
|
|
|
- className={styles['right-item-left']}
|
|
|
|
|
- style={{
|
|
|
|
|
- width: Array.isArray(item.then) && item?.then.length ? '15%' : '100%',
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- <MyTooltip
|
|
|
|
|
- placement={'topLeft'}
|
|
|
|
|
- title={conditionsRender(data.options?.when || [], index)}
|
|
|
|
|
- >
|
|
|
|
|
- <div className={classNames(styles['trigger-conditions'], 'ellipsis')}>
|
|
|
|
|
- {conditionsRender(data.options?.when || [], index)}
|
|
|
|
|
- </div>
|
|
|
|
|
- </MyTooltip>
|
|
|
|
|
- {item.shakeLimit?.enabled && (
|
|
|
|
|
- <MyTooltip
|
|
|
|
|
- title={`(${item.shakeLimit?.time}秒内发生${item.shakeLimit?.threshold}
|
|
|
|
|
- 次以上时执行一次)`}
|
|
|
|
|
- >
|
|
|
|
|
- <div className={classNames(styles['trigger-shake'], 'ellipsis')}>
|
|
|
|
|
- ({item.shakeLimit?.time}秒内发生{item.shakeLimit?.threshold}
|
|
|
|
|
- 次以上时执行一次)
|
|
|
|
|
|
|
+ {/*执行动作*/}
|
|
|
|
|
+ {Array.isArray(item.then) && item?.then.length ? (
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={styles['right-item-right']}
|
|
|
|
|
+ style={{ maxWidth: type === 'device' ? '85%' : '100%' }}
|
|
|
|
|
+ >
|
|
|
|
|
+ {(item?.then || []).map((i: BranchesThen, _index: number) => {
|
|
|
|
|
+ if (Array.isArray(i?.actions) && i?.actions.length) {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div key={i?.key || _index} className={styles['right-item-right-item']}>
|
|
|
|
|
+ {item?.then?.length > 1 && (
|
|
|
|
|
+ <div className={styles['trigger-ways']}>
|
|
|
|
|
+ {i ? (i.parallel ? '并行执行' : '串行执行') : ''}
|
|
|
</div>
|
|
</div>
|
|
|
- </MyTooltip>
|
|
|
|
|
- )}
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- {Array.isArray(item.then) && item?.then.length ? (
|
|
|
|
|
- <div
|
|
|
|
|
- className={styles['right-item-right']}
|
|
|
|
|
- style={{ width: type === 'device' ? '85%' : '100%' }}
|
|
|
|
|
- >
|
|
|
|
|
- {(item?.then || []).map((i: BranchesThen, _index: number) => {
|
|
|
|
|
- if (Array.isArray(i?.actions) && i?.actions.length) {
|
|
|
|
|
- return (
|
|
|
|
|
|
|
+ )}
|
|
|
|
|
+ {Array.isArray(i?.actions) && (
|
|
|
<div
|
|
<div
|
|
|
- key={i?.key || _index}
|
|
|
|
|
- className={styles['right-item-right-item']}
|
|
|
|
|
|
|
+ className={classNames(styles['right-item-right-item-contents'])}
|
|
|
>
|
|
>
|
|
|
- {item?.then?.length > 1 && (
|
|
|
|
|
- <div className={styles['trigger-ways']}>
|
|
|
|
|
- {i ? (i.parallel ? '并行执行' : '串行执行') : ''}
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
- {Array.isArray(i?.actions) && (
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={classNames(
|
|
|
|
|
+ styles['right-item-right-item-contents-text'],
|
|
|
|
|
+ )}
|
|
|
|
|
+ >
|
|
|
|
|
+ <BranchesActionRender
|
|
|
|
|
+ actions={i?.actions}
|
|
|
|
|
+ triggerChange={data.triggerChange}
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ {i?.actions.length > 3 && (
|
|
|
<div
|
|
<div
|
|
|
className={classNames(
|
|
className={classNames(
|
|
|
- styles['right-item-right-item-contents'],
|
|
|
|
|
|
|
+ styles['right-item-right-item-contents-extra'],
|
|
|
)}
|
|
)}
|
|
|
>
|
|
>
|
|
|
- <div
|
|
|
|
|
- className={classNames(
|
|
|
|
|
- styles['right-item-right-item-contents-text'],
|
|
|
|
|
- )}
|
|
|
|
|
- >
|
|
|
|
|
- {branchesActionRender(i?.actions)}
|
|
|
|
|
- </div>
|
|
|
|
|
- {i?.actions.length > 3 && (
|
|
|
|
|
- <div
|
|
|
|
|
- className={classNames(
|
|
|
|
|
- styles['right-item-right-item-contents-extra'],
|
|
|
|
|
- )}
|
|
|
|
|
- >
|
|
|
|
|
- 等{i?.actions.length}个执行动作
|
|
|
|
|
- </div>
|
|
|
|
|
- )}
|
|
|
|
|
|
|
+ 等{i?.actions.length}个执行动作
|
|
|
</div>
|
|
</div>
|
|
|
)}
|
|
)}
|
|
|
</div>
|
|
</div>
|
|
|
- );
|
|
|
|
|
- }
|
|
|
|
|
- return null;
|
|
|
|
|
- })}
|
|
|
|
|
- </div>
|
|
|
|
|
- ) : (
|
|
|
|
|
- ''
|
|
|
|
|
- )}
|
|
|
|
|
|
|
+ )}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+ return null;
|
|
|
|
|
+ })}
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
|
+ ) : (
|
|
|
|
|
+ ''
|
|
|
|
|
+ )}
|
|
|
</div>
|
|
</div>
|
|
|
- );
|
|
|
|
|
- },
|
|
|
|
|
- )}
|
|
|
|
|
- {(data?.branches || []).length > 2 && (
|
|
|
|
|
- <div
|
|
|
|
|
- className={styles['trigger-actions-more']}
|
|
|
|
|
- onClick={(e) => {
|
|
|
|
|
- e.stopPropagation();
|
|
|
|
|
- setVisible(!visible);
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- 展开更多{!visible ? <DownOutlined /> : <UpOutlined />}
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- )}
|
|
|
|
|
|
|
+ );
|
|
|
|
|
+ },
|
|
|
|
|
+ )}
|
|
|
|
|
+ {(data?.branches || []).length > 2 && (
|
|
|
|
|
+ <div
|
|
|
|
|
+ className={styles['trigger-actions-more']}
|
|
|
|
|
+ onClick={(e) => {
|
|
|
|
|
+ e.stopPropagation();
|
|
|
|
|
+ setVisible(!visible);
|
|
|
|
|
+ }}
|
|
|
|
|
+ >
|
|
|
|
|
+ 展开更多{!visible ? <DownOutlined /> : <UpOutlined />}
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ )}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ );
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const ContentRender = (data: ActionRenderProps) => {
|
|
|
|
|
+ const type = data.triggerType;
|
|
|
|
|
+ if (!!type && (data.branches || [])?.length) {
|
|
|
|
|
+ return (
|
|
|
|
|
+ <div className={styles['card-item-content-box']}>
|
|
|
|
|
+ <TriggerRender {...data} />
|
|
|
|
|
+ <ActionRender {...data} triggerChange={data.triggerChange} />
|
|
|
</div>
|
|
</div>
|
|
|
);
|
|
);
|
|
|
} else {
|
|
} else {
|
|
@@ -387,6 +623,7 @@ const ContentRender = (data: SceneCardProps) => {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
export const ExtraSceneCard = (props: SceneCardProps) => {
|
|
export const ExtraSceneCard = (props: SceneCardProps) => {
|
|
|
|
|
+ const [triggerVisible, setTriggerVisible] = useState<boolean>(false);
|
|
|
return (
|
|
return (
|
|
|
<TableCard
|
|
<TableCard
|
|
|
status={props.state.value}
|
|
status={props.state.value}
|
|
@@ -422,7 +659,12 @@ export const ExtraSceneCard = (props: SceneCardProps) => {
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <ContentRender {...props} />
|
|
|
|
|
|
|
+ <ContentRender
|
|
|
|
|
+ {...props}
|
|
|
|
|
+ triggerChange={() => {
|
|
|
|
|
+ setTriggerVisible(true);
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className={styles['card-item-trigger-type']}>
|
|
<div className={styles['card-item-trigger-type']}>
|
|
@@ -436,11 +678,20 @@ export const ExtraSceneCard = (props: SceneCardProps) => {
|
|
|
<CheckOutlined />
|
|
<CheckOutlined />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ {triggerVisible && (
|
|
|
|
|
+ <TriggerAlarm
|
|
|
|
|
+ id={props.id}
|
|
|
|
|
+ close={() => {
|
|
|
|
|
+ setTriggerVisible(false);
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
|
|
+ )}
|
|
|
</TableCard>
|
|
</TableCard>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
export default (props: SceneCardProps) => {
|
|
export default (props: SceneCardProps) => {
|
|
|
|
|
+ const [triggerVisible, setTriggerVisible] = useState<boolean>(false);
|
|
|
return (
|
|
return (
|
|
|
<TableCard
|
|
<TableCard
|
|
|
showMask={false}
|
|
showMask={false}
|
|
@@ -475,7 +726,12 @@ export default (props: SceneCardProps) => {
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <ContentRender {...props} />
|
|
|
|
|
|
|
+ <ContentRender
|
|
|
|
|
+ {...props}
|
|
|
|
|
+ triggerChange={() => {
|
|
|
|
|
+ setTriggerVisible(true);
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className={styles['card-item-trigger-type']}>
|
|
<div className={styles['card-item-trigger-type']}>
|
|
@@ -484,6 +740,14 @@ export default (props: SceneCardProps) => {
|
|
|
{TriggerWayType[props.triggerType]}
|
|
{TriggerWayType[props.triggerType]}
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ {triggerVisible && (
|
|
|
|
|
+ <TriggerAlarm
|
|
|
|
|
+ id={props.id}
|
|
|
|
|
+ close={() => {
|
|
|
|
|
+ setTriggerVisible(false);
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
|
|
+ )}
|
|
|
</TableCard>
|
|
</TableCard>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|