+
+ ) : (
+ <>
+ );
+};
+
+export default LoadingSpin;
diff --git a/src/components/TableActionCard/isModalDelete.tsx b/src/components/TableActionCard/isModalDelete.tsx
new file mode 100644
index 0000000..0b43c15
--- /dev/null
+++ b/src/components/TableActionCard/isModalDelete.tsx
@@ -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
+ {props.indicator ? (
+ props.indicator
+ ) : (
+ 
+ )}
+
+
+
+ )}
+
+ {props.tip || '请稍候...'}
+
+ {
+ // 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;
+ }}
+ >
+
+
+ );
+});
+export default UpdateForm;
diff --git a/src/pages/Alarm/AlarmWays/index.tsx b/src/pages/Alarm/AlarmWays/index.tsx
new file mode 100644
index 0000000..97f18d9
--- /dev/null
+++ b/src/pages/Alarm/AlarmWays/index.tsx
@@ -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
+
+ );
+ }}
+
+
+ ) : (
+
+ {waysList.map((item, index) => {
+ // eslint-disable-next-line react/jsx-key
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+ [] = [
+ {
+ 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[];
+ changeStatusSelected: (arr: string[]) => void
+};
+
+const ModelTipBox: React.FC = (props) => {
+ const [selected, setSelected] = useState([]);
+ function doSelected(options: Record) {
+ 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 (
+ >({});
const [category_fk_id_open, set_category_fk_id_open] = useState(false);
const [currentModelUserProperty, setCurrentModelUserProperty] = useState>({});
+ const [isLoading, setisLoading] = useState(true);
const [changeId, setChangeId] = useState([]);
const [currentTargetObject, setCurrentTargetObject] = useState(null);
@@ -68,12 +71,15 @@ const FabricViewRoom: React.FC = () => {
height: 900, // 高
});
const [jsonData, setJsonData] = useState>({});
-
/*test */
// const { fetchUuid } = useUuid();
- function changeModelStatus() {
- setChangeId(['2', '3']);
+ function changeZoom(isPlus: boolean) {
+ const rate = isPlus ? 1.1 : 0.9;
+ // plus minus
+ const currentZoom = cvs.getZoom();
+ const newZoom = currentZoom * rate; // 缩小 10%
+ cvs.setZoom(newZoom);
}
const handle_category_fk_id = () => {
@@ -100,13 +106,33 @@ const FabricViewRoom: React.FC = () => {
});
groupObject.item(1).set({
fill: 'rgb(0,0,0)',
- })
+ });
finalCvs.renderAll();
// 遍历子对象找到要修改的子对象
// }
});
}
+ // 筛选显示告警状态
+ function changeStatusSelected(selecteds: string[]) {
+ console.log(cvs.getObjects(), 'changeStatusSelected_selected', selecteds);
+ if(selecteds.length){
+ cvs.getObjects().map((element) => {
+ element.set({
+ visible: selecteds.includes(element?.userProperty?.status),
+ });
+ });
+ } else {
+ cvs.getObjects().map((element) => {
+ element.set({
+ visible: true,
+ });
+ });
+ }
+
+ cvs.renderAll();
+ }
+
// 初始化加载画布&渲染模型
useEffect(() => {
const canvasObject = new fabric.Canvas(canvasRef.current);
@@ -129,7 +155,6 @@ const FabricViewRoom: React.FC = () => {
// 获取事件的目标对象
const targetObject = event.target;
// set_category_fk_id_open(false);
-
// 检查目标对象是否为组合对象
if (targetObject && targetObject?.userProperty) {
// canvasObject.setActiveObject(targetObject);
@@ -142,6 +167,7 @@ const FabricViewRoom: React.FC = () => {
if (targetObject) {
setCurrentTargetObject(targetObject);
closeSelectedModel(canvasObject);
+ canvasObject.bringToFront(targetObject);
// console.log('mouse:down:', );
targetObject.item(0).item(1).set({
@@ -149,19 +175,21 @@ const FabricViewRoom: React.FC = () => {
});
targetObject.item(1).set({
fill: 'blue',
- })
+ });
}
canvasObject.renderAll();
});
});
setCanvas(canvasObject);
+ // setTimeout(()=>{
+ setisLoading(false)
+ // },1000)
return () => {
canvasObject.dispose();
};
}, []);
useEffect(() => {
- // TODO_3 需要加个loading效果
// import('./Descriptors.json').then((descriptors) => {
// setDescriptors(descriptors);
// });
@@ -172,32 +200,44 @@ const FabricViewRoom: React.FC = () => {
}, [changeId, category_fk_id_open]);
return (
-
-
-
- }
- >
- {/*
- */}
-
-
-
- = {
],
};
+// 生成100到1100之间的随机整数
+function generateRandomNumber(minNum, maxNum) {
+ // 生成0到1之间的随机小数
+ const randomFraction = Math.random();
+
+ // 将随机小数映射到100到1100之间的范围
+ const randomNumber = Math.floor(randomFraction * (maxNum - minNum + 1) + minNum);
+
+ return randomNumber;
+}
+
+function initFabricRoomData() {
+ for (let i = 0; i < 5; i++) {
+ let currObjects = JSON.parse(JSON.stringify(startData.modelsList));
+ currObjects = currObjects.map((item) => {
+ item.baseInfo = {
+ left: generateRandomNumber(100, 1100),
+ top: generateRandomNumber(100, 800),
+ };
+ return item;
+ });
+ startData.modelsList = startData.modelsList.concat(currObjects);
+ }
+
+
+}
+initFabricRoomData();
+
const fabricRoomListData: Record[] = [];
startData.modelsList.forEach((item: Record) => {
const { baseInfo, ...restInfo } = item;
@@ -104,6 +132,7 @@ startData.modelsList.forEach((item: Record) => {
);
});
+
export const currJson = {
version: '5.3.0',
objects: fabricRoomListData,
diff --git a/src/utils/FixMenuItemIcon.tsx b/src/utils/FixMenuItemIcon.tsx
index 1cadf80..44e1fa0 100644
--- a/src/utils/FixMenuItemIcon.tsx
+++ b/src/utils/FixMenuItemIcon.tsx
@@ -1,3 +1,8 @@
+/**
+ * @FixMenuItemIcon 菜单图标手动导入
+ *
+ *
+ */
import React from 'react';
import { MenuDataItem } from '@ant-design/pro-layout';
import {CarOutlined, UserOutlined, TableOutlined,
@@ -5,7 +10,7 @@ import {CarOutlined, UserOutlined, TableOutlined,
HomeOutlined, SettingOutlined, TeamOutlined, DotChartOutlined,
BlockOutlined, DesktopOutlined, DatabaseOutlined,
WarningOutlined, CalendarOutlined, ExperimentOutlined,
- ThunderboltOutlined, BugOutlined, AreaChartOutlined,
+ ThunderboltOutlined, BugOutlined, AreaChartOutlined,ContactsOutlined, GatewayOutlined, BellOutlined
} from '@ant-design/icons';
const iconMap:any = {
@@ -28,6 +33,9 @@ const iconMap:any = {
'ThunderboltOutlined':
-
+ {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 (
+
- doSelected(item)} + > + + {item.label} + + ); + })} +
+
+
+
+
+ }
+ >
+
+
+
+
-
- // 属性预览
+
);
};
diff --git a/src/pages/Setting/AlgorithmSetting.tsx b/src/pages/Setting/AlgorithmSetting.tsx
index deec20c..e723bf6 100644
--- a/src/pages/Setting/AlgorithmSetting.tsx
+++ b/src/pages/Setting/AlgorithmSetting.tsx
@@ -294,6 +294,7 @@ const AlgorithmSetting: React.FC = () => {
style={{ display: 'flex', padding: '0 16px', margin: 0 }}
>
{tabModeList.map((item) => {
+ // TODO 统一使用button默认效果 'primary' : 'default'
return (
+ changeStatusSelected(selected)}
+ >
+
+