From 52c3301571cbecc3cc3662ceb7a9ae8ce60665fe Mon Sep 17 00:00:00 2001
From: zhoux <zhouxia@supervision.ltd>
Date: Fri, 22 Dec 2023 17:32:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=8A=E8=AD=A6=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E3=80=81=E5=91=8A=E8=AD=A6=E8=AE=BE=E7=BD=AE=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E9=9D=99=E6=80=81=E4=BA=A4=E4=BA=92=E5=AE=8C=E5=96=84=EF=BC=8C?=
 =?UTF-8?q?=E7=AE=97=E5=8A=9B=E5=88=86=E9=85=8D=E4=BA=A4=E4=BA=92=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/defaultIcon.ts                         |  8 +-
 src/components/RightContent/index.tsx         |  2 +-
 src/components/TableActionCard/isDelete.tsx   |  6 +-
 src/enums/status.ts                           | 26 +++---
 src/global.css                                | 10 ++-
 src/global.less                               | 15 +++-
 src/hooks/useAlarmSettingLevel.ts             | 52 +++++++++++
 src/layouts/context.tsx                       |  4 +-
 src/locales/zh-CN/alarm.ts                    |  5 +-
 src/pages/Alarm/AlarmList/index.tsx           | 21 +++--
 .../components/alarmStatusForm.tsx            |  6 +-
 src/pages/Alarm/AlarmSetting/index.tsx        | 32 +++++--
 .../ComputePowerAllocation.tsx                | 63 ++++++++++----
 src/pages/Setting/AlgorithmSetting.tsx        |  2 +-
 src/pages/Setting/components/AlarmSetForm.tsx | 87 ++++++++++---------
 src/pages/Setting/components/ProjectCard.tsx  |  6 +-
 src/utils/options.ts                          |  4 +-
 17 files changed, 245 insertions(+), 104 deletions(-)
 create mode 100644 src/hooks/useAlarmSettingLevel.ts

diff --git a/config/defaultIcon.ts b/config/defaultIcon.ts
index 42ee906..b9fc3ae 100644
--- a/config/defaultIcon.ts
+++ b/config/defaultIcon.ts
@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-11-28 14:13:05
  * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-11-28 14:16:48
+ * @LastEditTime: 2023-12-22 16:17:35
  * @FilePath: \general-ai-platform-web\config\defaultIcon.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
  */
@@ -30,3 +30,9 @@ export const proIconSelectStyle: React.CSSProperties = {
   borderRadius: 4,
   overflowY: 'scroll',
 };
+
+// 列表图标统一样式
+
+export const proIconForTableActionStyle : React.CSSProperties = {
+  fontSize: 16,
+}
\ No newline at end of file
diff --git a/src/components/RightContent/index.tsx b/src/components/RightContent/index.tsx
index 4418bb9..90191d5 100644
--- a/src/components/RightContent/index.tsx
+++ b/src/components/RightContent/index.tsx
@@ -50,7 +50,7 @@ export const SelectRole = () => {
       {
         currentUser && (
           <Select
-            defaultValue={currentUser.roleId}
+            value={currentUser.roleId}
             options={currentUser?.roles || []}
             onSelect={value => {
               postUserSetUserRole({roleId: value}).then((resp) => {
diff --git a/src/components/TableActionCard/isDelete.tsx b/src/components/TableActionCard/isDelete.tsx
index b6bde41..b200168 100644
--- a/src/components/TableActionCard/isDelete.tsx
+++ b/src/components/TableActionCard/isDelete.tsx
@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-11-16 14:30:15
  * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-12-19 16:30:51
+ * @LastEditTime: 2023-12-22 16:17:17
  * @FilePath: \general-ai-platform-web\src\components\BatchOperation\isBatchDelete.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,6 +10,7 @@
 import { DeleteOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Popconfirm } from 'antd';
+import { proIconForTableActionStyle } from '../../../config/defaultIcon';
 import { FormattedMessage } from 'react-intl';
 
 type IsDeleteProps = {
@@ -39,7 +40,8 @@ const IsDelete: React.FC<IsDeleteProps> = (props) => {
       {props.buttonType === 'deleteIcon' ? (
         <>
           <DeleteOutlined style={{
-            color: "rgba(232, 13, 13, 1)"
+            color: "rgba(232, 13, 13, 1)",
+          ...proIconForTableActionStyle
           }} />
         </>
       ) : (
diff --git a/src/enums/status.ts b/src/enums/status.ts
index d803349..ace5bad 100644
--- a/src/enums/status.ts
+++ b/src/enums/status.ts
@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-12-08 14:50:08
  * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-12-20 13:25:59
+ * @LastEditTime: 2023-12-22 16:45:22
  * @FilePath: \general-ai-platform-web\src\enums\status.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -86,44 +86,44 @@ export const resourceDeviceStatusEnums: Record<string, any> = {
 export const alarmLevelStatusEnum: Record<string, any>[] = [
   {
     color: 'rgba(232, 13, 13, 1)',
-    defaultValue: '1',
-    defaultLabel: '紧急',
+    value: '1',
+    label: '紧急',
     isDelete: false,
     icon: 'ArrowUpOutlined',
     id: '1',
   },
   {
     color: 'rgba(255, 136, 0, 1)',
-    defaultValue: '2',
-    defaultLabel: '较高',
+    value: '2',
+    label: '较高',
     isDelete: false,
     id: '2',
   },
   {
     color: 'rgba(68, 139, 245, 1)',
-    defaultValue: '3',
-    defaultLabel: '一般',
+    value: '3',
+    label: '一般',
     isDelete: false,
     id: '3',
   },
   {
     color: 'rgba(179, 214, 0, 1)',
-    defaultValue: '4',
-    defaultLabel: '低',
+    value: '4',
+    label: '低',
     isDelete: true,
     id: '4',
   },
   {
     color: 'rgba(81, 177, 6, 1)',
-    defaultValue: '5',
-    defaultLabel: '较低',
+    value: '5',
+    label: '较低',
     isDelete: true,
     id: '5',
   },
   {
     color: 'rgba(43, 183, 136, 1)',
-    defaultValue: '6',
-    defaultLabel: '非常低',
+    value: '6',
+    label: '非常低',
     isDelete: true,
     id: '6',
   },
diff --git a/src/global.css b/src/global.css
index 8d12fbc..9c37e64 100644
--- a/src/global.css
+++ b/src/global.css
@@ -268,12 +268,17 @@ a.ant-dropdown-trigger {
   padding-left: 12px;
 }
 .gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
-  padding: 0 16px;
   margin-block-start: 0;
 }
+.gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab-btn {
+  padding: 0 16px;
+}
 .gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab-active {
   font-weight: 400;
 }
+.gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab + .ant-tabs-tab {
+  margin: 0 0 0 12px;
+}
 .gn .ant-tabs .ant-tabs-tab .anticon {
   margin-right: 4px;
 }
@@ -368,3 +373,6 @@ a.ant-dropdown-trigger {
 .innerFormList_box .ant-form-item {
   margin-bottom: 12px;
 }
+.form_checkBox_wrap .ant-pro-form-group-container {
+  gap: 0 4px !important;
+}
diff --git a/src/global.less b/src/global.less
index cf7cc7a..7f48f2b 100644
--- a/src/global.less
+++ b/src/global.less
@@ -330,12 +330,19 @@ a.ant-dropdown-trigger{
 
   .ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap{
     .ant-tabs-nav-list{
-      padding: 0 16px;
+      .ant-tabs-tab-btn{
+        padding: 0 16px;
+
+      }
       margin-block-start: 0;
       .ant-tabs-tab-active{
         font-weight: 400
       }
     }
+    .ant-tabs-tab+.ant-tabs-tab {
+      margin: 0 0 0 12px; 
+    }
+    
   }
 
   .ant-tabs .ant-tabs-tab .anticon {
@@ -490,6 +497,12 @@ a.ant-dropdown-trigger{
   }
 }
 
+.form_checkBox_wrap{
+  .ant-pro-form-group-container{
+    gap: 0 4px !important;
+  }
+}
+
 
 
 
diff --git a/src/hooks/useAlarmSettingLevel.ts b/src/hooks/useAlarmSettingLevel.ts
new file mode 100644
index 0000000..2e83ed0
--- /dev/null
+++ b/src/hooks/useAlarmSettingLevel.ts
@@ -0,0 +1,52 @@
+import { alarmLevelStatusEnum } from '@/enums/status';
+import { localStorageKeyEnums } from '@/enums/storage';
+
+/*
+ * @Author: zhoux zhouxia@supervision.ltd
+ * @Date: 2023-12-22 16:39:33
+ * @LastEditors: zhoux zhouxia@supervision.ltd
+ * @LastEditTime: 2023-12-22 16:49:36
+ * @FilePath: \general-ai-platform-web\src\hooks\useAlarmSettingLevel.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+type selectAlarmLevel = {
+  label: string;
+  value: string;
+};
+
+interface useAlarmSettingLevelProps {
+  fetchAlarmSettingLevel: () => selectAlarmLevel[];
+}
+
+export const useAlarmSettingLevel = (): useAlarmSettingLevelProps => {
+  function fetchAlarmSettingLevel() {
+    const finalArr: selectAlarmLevel[] = [];
+    const currData = localStorage.getItem(
+      localStorageKeyEnums.alarmSetting_model_alarmStatusSetting,
+    );
+    if (currData) {
+      const currFormData = JSON.parse(currData) as Record<string, any>;
+      // eslint-disable-next-line guard-for-in
+      for (let key in currFormData) {
+        finalArr.push({
+          label: currFormData[key],
+          value: key,
+        });
+      }
+    } else {
+      // eslint-disable-next-line array-callback-return
+      alarmLevelStatusEnum.map((item) => {
+        if (['1', '2', '3'].includes(item.value)) {
+          finalArr.push({
+            label: item.label,
+            value: item.value,
+          });
+        }
+      });
+    }
+    return finalArr;
+  }
+  return {
+    fetchAlarmSettingLevel,
+  };
+};
diff --git a/src/layouts/context.tsx b/src/layouts/context.tsx
index 68754a7..8b2a0f8 100644
--- a/src/layouts/context.tsx
+++ b/src/layouts/context.tsx
@@ -8,7 +8,7 @@ interface KeepAliveTabContextType {
   onHidden: (cb: () => void) => void;
 }
 
-const defaultValue = {
+const value = {
   refreshTab: () => { },
   closeTab: () => { },
   closeOtherTab: () => { },
@@ -17,4 +17,4 @@ const defaultValue = {
 }
 
 
-export const KeepAliveTabContext = createContext<KeepAliveTabContextType>(defaultValue);
+export const KeepAliveTabContext = createContext<KeepAliveTabContextType>(value);
diff --git a/src/locales/zh-CN/alarm.ts b/src/locales/zh-CN/alarm.ts
index e2d0711..ba17d53 100644
--- a/src/locales/zh-CN/alarm.ts
+++ b/src/locales/zh-CN/alarm.ts
@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-12-18 16:36:36
  * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-12-22 13:38:41
+ * @LastEditTime: 2023-12-22 16:58:28
  * @FilePath: \general-ai-platform-web\src\locales\zh-CN\alarm.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -14,6 +14,7 @@ export const alarm_list: { [key: string]: string } = {
 
 // 设备状态
 export const alarm_setting: { [key: string]: string } = {
+    'alarm.setting.table.title': '告警项',
     'alarm.setting.table.list.name': '告警名称',
     'alarm.setting.table.list.code': '告警代码',
     'alarm.setting.table.list.category': '告警分类',
@@ -26,6 +27,8 @@ export const alarm_setting: { [key: string]: string } = {
     'alarm.setting.table.list.update': '编辑告警项',
     'alarm.setting.table.rule.required.code': '类别代码为必填项',
     'alarm.setting.table.model.alarmStatusSetting': '告警等级',
+    'alarm.list.table.list.deviceGroup': '设备组',
     'alarm.list.table.list.alarmTime': '告警时间',
 
+
 }  
\ No newline at end of file
diff --git a/src/pages/Alarm/AlarmList/index.tsx b/src/pages/Alarm/AlarmList/index.tsx
index 1721dc4..e48fa0d 100644
--- a/src/pages/Alarm/AlarmList/index.tsx
+++ b/src/pages/Alarm/AlarmList/index.tsx
@@ -56,11 +56,18 @@ const DeviceCategoryList: React.FC = () => {
         return (
           <Space>
             <AlarmLevelBox {...currLevel}></AlarmLevelBox>
-            <span style={{ color: currLevel.color }}>{currLevel.defaultLabel}</span>
+            <span style={{ color: currLevel.color }}>{currLevel.label}</span>
           </Space>
         );
       },
     },
+    {
+      title: <FormattedMessage id="alarm.list.table.list.deviceGroup" defaultMessage="$$$" />,
+      dataIndex: 'deviceGroup',
+      sorter: true,
+      hideInSearch: true,
+      valueType: 'dateTime',
+    },
     {
       title: <FormattedMessage id="alarm.list.table.list.alarmTime" defaultMessage="$$$" />,
       dataIndex: 'createTime',
@@ -68,6 +75,7 @@ const DeviceCategoryList: React.FC = () => {
       hideInSearch: true,
       valueType: 'dateTime',
     },
+
     {
       title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
       dataIndex: 'option',
@@ -96,11 +104,12 @@ const DeviceCategoryList: React.FC = () => {
   return (
     <PageContainer>
       <ProTable<API.DeviceCategory>
-        headerTitle={intl.formatMessage({
-          id: 'pages.searchTable.title',
-          defaultMessage: '$$$',
-        })}
-        options={{ fullScreen: true, setting: true, density: true, reload: true }}
+        cardProps={{
+          bodyStyle: {
+            padding: 20
+          }
+        }}
+        options={{ fullScreen: false, setting: false, density: false, reload: false }}
         actionRef={actionRef}
         rowKey="key"
         search={false}
diff --git a/src/pages/Alarm/AlarmSetting/components/alarmStatusForm.tsx b/src/pages/Alarm/AlarmSetting/components/alarmStatusForm.tsx
index 4559f98..0cf347c 100644
--- a/src/pages/Alarm/AlarmSetting/components/alarmStatusForm.tsx
+++ b/src/pages/Alarm/AlarmSetting/components/alarmStatusForm.tsx
@@ -61,7 +61,7 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
       // eslint-disable-next-line array-callback-return
       const finalData = alarmLevelStatusEnum.filter((item) => {
         if (Object.keys(currFormData).includes(item.id)) {
-          item.defaultLabel = currFormData[item.id];
+          item.label = currFormData[item.id];
           return item;
         }
       });
@@ -129,7 +129,7 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
                 <AlarmLevelBox size={20} {...currLevel}></AlarmLevelBox>
               </div>
               <div style={{ width: '100%', flex: 1 }}>
-                <ProFormText name={item.id} initialValue={item.defaultLabel}></ProFormText>
+                <ProFormText name={item.id} initialValue={item.label}></ProFormText>
               </div>
               {index === alarmDict.length - 1 && index > 2 ? (
                 <div
@@ -173,7 +173,7 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
             <div style={{ paddingRight: 12, color: '#FAAD14' }}>
               <ExclamationCircleOutlined />
             </div>
-            <span>
+            <span style={{color: '#666666'}}>
               {intl.formatMessage({
                 id: 'alarm.setting.table.model.alarmStatusSetting',
                 defaultMessage: '$$$',
diff --git a/src/pages/Alarm/AlarmSetting/index.tsx b/src/pages/Alarm/AlarmSetting/index.tsx
index a544313..50eca73 100644
--- a/src/pages/Alarm/AlarmSetting/index.tsx
+++ b/src/pages/Alarm/AlarmSetting/index.tsx
@@ -3,6 +3,7 @@ import AlarmLevelBox from '@/components/DictionaryBox/alarmLevel';
 import TableActionCard from '@/components/TableActionCard';
 import IsDelete from '@/components/TableActionCard/isDelete';
 import { alarmLevelStatusEnum } from '@/enums/status';
+import { useAlarmSettingLevel } from '@/hooks/useAlarmSettingLevel';
 import {
   deleteDeviceCategoryDeleteDeviceCategory,
   deleteDeviceCategoryDeleteDeviceCategoryByIds,
@@ -10,10 +11,11 @@ import {
 } from '@/services/device/DeviceCategory';
 import { EditOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
-import { PageContainer, ProTable } from '@ant-design/pro-components';
+import { PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
 import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
 import { Button, Space, message } from 'antd';
 import React, { useRef, useState } from 'react';
+import { proIconForTableActionStyle } from '../../../../config/defaultIcon';
 import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
 import CreateForm from './components/CreateForm';
 import UpdateForm from './components/UpdateForm';
@@ -43,6 +45,7 @@ const DeviceCategoryList: React.FC = () => {
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
   const [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
   const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
+  const { fetchAlarmSettingLevel } = useAlarmSettingLevel();
 
   /**
     1. 告警状态设置
@@ -103,7 +106,8 @@ const DeviceCategoryList: React.FC = () => {
     {
       title: <FormattedMessage id="alarm.setting.table.list.level" defaultMessage="$$$" />,
       dataIndex: 'level',
-      hideInSearch: true,
+      hideInSearch: false,
+
       render: (text, record, index) => {
         console.log(text, record, index, 'level_record');
         const currVal = index % 6;
@@ -111,17 +115,34 @@ const DeviceCategoryList: React.FC = () => {
         return (
           <Space>
             <AlarmLevelBox {...currLevel}></AlarmLevelBox>
-            <span style={{ color: currLevel.color }}>{currLevel.defaultLabel}</span>
+            <span style={{ color: currLevel.color }}>{currLevel.label}</span>
           </Space>
         );
       },
+      renderFormItem: () => {
+        return (
+          // TODO 需要在告警设置完成后实时改变
+          <ProFormSelect
+            placeholder={`${intl.formatMessage({
+              id: 'alarm.setting.table.list.level',
+              defaultMessage: '$$$',
+            })}`}
+            required={false}
+            showSearch
+            debounceTime={1000}
+            request={async () => {
+              return fetchAlarmSettingLevel();
+            }}
+          />
+        );
+      },
     },
     {
       title: <FormattedMessage id="alarm.setting.table.list.createTime" defaultMessage="$$$" />,
       dataIndex: 'createTime',
       sorter: true,
       hideInSearch: true,
-      // valueType: 'ProFormDateRangePicker',
+      valueType: 'dateTime',
     },
     {
       title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
@@ -150,6 +171,7 @@ const DeviceCategoryList: React.FC = () => {
                   key="update"
                   style={{
                     color: 'rgba(21, 77, 221, 1)',
+                    ...proIconForTableActionStyle,
                   }}
                   onClick={() => {
                     setUpdateModalOpen(true);
@@ -178,7 +200,7 @@ const DeviceCategoryList: React.FC = () => {
     <PageContainer>
       <ProTable<API.DeviceCategory>
         headerTitle={intl.formatMessage({
-          id: 'pages.searchTable.title',
+          id: 'alarm.setting.table.title',
           defaultMessage: '$$$',
         })}
         options={{ fullScreen: true, setting: true, density: true, reload: true }}
diff --git a/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx b/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx
index 6c526f0..1e25ece 100644
--- a/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx
+++ b/src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx
@@ -8,10 +8,9 @@ import React, { useEffect, useRef, useState } from 'react';
 // type
 import { ComputePowerPoolItem } from './typing';
 
-// TODO 整个页面的字体、颜色、间距处理
+// TODO bug左侧
 
 // state
-
 const poolsData: ComputePowerPoolItem[] = [
   {
     name: '玩手机监控',
@@ -23,7 +22,7 @@ const poolsData: ComputePowerPoolItem[] = [
   {
     name: '离岗监控',
     type: 1,
-    proportion: 60,
+    proportion: 30,
     PretreatmentEfficiency: 20,
     color: '#3879FE',
   },
@@ -140,7 +139,6 @@ const OccupyProportion: React.FC<{
           ...poolDefault.buttonGroupOptions,
           buttonId: '1',
           left: rect1Witdh - 10,
-          selectable: false,
         }),
       );
       // 更新Canvas以应用更改
@@ -154,8 +152,8 @@ const OccupyProportion: React.FC<{
       canvasObject.add(
         new fabric.Group([bgRect2, img], {
           ...poolDefault.buttonGroupOptions,
-          left: rect1Witdh + 10,
           buttonId: '2',
+          left: rect1Witdh + rect2Witdh - 10,
         }),
       );
       // 更新Canvas以应用更改
@@ -167,14 +165,14 @@ const OccupyProportion: React.FC<{
     canvasObject.on('object:moving', (event) => {
       // 获取事件的目标对象
       const targetObject = event.target;
-      console.log(targetObject, 'targetObject', canvasObject.item(0));
-      // 算力按钮1
+      console.log(targetObject.buttonId, 'targetObject', canvasObject.item(3));
+      // 算力按钮
       switch (targetObject.buttonId) {
         case '1':
-          // 算力按钮2
-          if (targetObject?.left >= 960) {
+          // 算力按钮1
+          if (targetObject?.left >= clipPathData.width - 20) {
             targetObject?.set({
-              left: 960,
+              left: clipPathData.width - 20,
             });
           }
           if (targetObject?.left <= 0) {
@@ -182,28 +180,55 @@ const OccupyProportion: React.FC<{
               left: 0,
             });
           }
+          const currObject1Width = targetObject?.left + 10;
           canvasObject.item(1).set({
-            width: targetObject?.left + 10,
+            width: currObject1Width,
           });
           canvasObject.item(2).set({
-            left: targetObject?.left + 10 ,
+            left: targetObject?.left + 10,
           });
+          canvasObject.item(4).set({
+            left: canvasObject.item(2).left - 10 + canvasObject.item(2).width,
+          });
+          if (currObject1Width + canvasObject.item(2).width >= clipPathData.width) {
+            canvasObject.item(2).set({
+              width: clipPathData.width - currObject1Width,
+            });
+            canvasObject.item(4).set({
+              left: clipPathData.width - 20,
+            });
+          }
           break;
-          case '2':
+        case '2':
           // 算力按钮2
-          if (targetObject?.left >= 980) {
+          if (targetObject?.left >= clipPathData.width - 20) {
             targetObject?.set({
-              left: 980,
+              left: clipPathData.width - 20,
             });
           }
-          if (targetObject?.left <= rect1Witdh) {
+          const currObject11Width = canvasObject.item(1).width;
+          const currObject22Width = canvasObject.item(2).width;
+          if(targetObject?.left <= currObject11Width+ 10){
             targetObject?.set({
-              left: rect1Witdh + 10,
+              left: currObject11Width + 10,
             });
           }
+
+          // if (targetObject?.left <= rect1Witdh) {
+          //   targetObject?.set({
+          //     left: currObject11Width + currObject22Width,
+          //   });
+          // }
+          console.log(currObject11Width, 'button2', currObject22Width)
           canvasObject.item(2).set({
-            width: targetObject?.left -rect1Witdh  + 10,
+            width: targetObject?.left - currObject11Width + 10,
           });
+          // canvasObject.item(2).set({
+          //   left: targetObject?.left + 10,
+          // });
+          // canvasObject.item(2).set({
+          //   width: targetObject?.left -rect1Witdh  + 10,
+          // });
           break;
       }
       // set_category_fk_id_open(false);
@@ -226,7 +251,7 @@ const OccupyProportion: React.FC<{
         className="occupy_up"
         style={{ marginTop: 24, marginBottom: 20, padding: 0, position: 'relative', width: '100%' }}
       >
-        <canvas ref={canvasRef} {...clipPathData} style={{ border: '1px dashed red' }}></canvas>
+        <canvas ref={canvasRef} {...clipPathData} ></canvas>
 
         {/* <ul
           className="occupy_progress"
diff --git a/src/pages/Setting/AlgorithmSetting.tsx b/src/pages/Setting/AlgorithmSetting.tsx
index 7da1eb4..deec20c 100644
--- a/src/pages/Setting/AlgorithmSetting.tsx
+++ b/src/pages/Setting/AlgorithmSetting.tsx
@@ -195,7 +195,7 @@ const AlgorithmSetting: React.FC = () => {
               >
                 <div>
                   <div>{JSON.stringify(item.configId)}</div>
-                  <img src="/images/model.png" alt="" style={{ width: '50px' }} />
+                  <img src="/images/model.png" alt="" style={{ width: '64px' }} />
                 </div>
                 <Button
                   type="link"
diff --git a/src/pages/Setting/components/AlarmSetForm.tsx b/src/pages/Setting/components/AlarmSetForm.tsx
index 6a91477..f61a27a 100644
--- a/src/pages/Setting/components/AlarmSetForm.tsx
+++ b/src/pages/Setting/components/AlarmSetForm.tsx
@@ -8,7 +8,7 @@ import {
   ProFormSelect,
 } from '@ant-design/pro-components';
 import { Form } from 'antd';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 type AlarmSetFormProps = {
   currentRow: Record<string, any>;
 };
@@ -17,7 +17,6 @@ const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
 
   // const [initialValues, setInitialValues] = useState<Record<string, any>>({});
 
-
   function fetchInitialValues() {
     // setInitialValues({
     //   type: '2',
@@ -36,12 +35,12 @@ const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
     // });
   }
   useEffect(() => {
-    fetchInitialValues()
+    fetchInitialValues();
   }, []);
   return (
     // TODO 模拟提交告警设置
     <ProForm
-      style={{paddingBottom: 70}}
+      style={{ paddingBottom: 70 }}
       submitter={{
         searchConfig: {
           submitText: '保存', // 在这里设置提交按钮文案
@@ -64,59 +63,61 @@ const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
       }}
     >
       <ProFormGroup>
-        <ProFormGroup title="通知方式" titleStyle={{margin: "0 0 8px"}}>
+        <ProFormGroup title="通知方式" titleStyle={{ margin: '0 0 8px' }}>
           <ProFormList
-            className='innerFormList_box'
+            className="innerFormList_box"
             name={['ways']}
             creatorButtonProps={false}
             copyIconProps={false}
             deleteIconProps={false}
-            style={{padding: 0, margin: 0}}
+            style={{ padding: 0, margin: 0 }}
           >
             {(f, index, action) => {
               console.log('isChecked_value', f, index, action);
               return (
-                <ProFormGroup key="group">
-                  <ProFormCheckbox.Group
-                    name="isChecked"
-                    options={[
-                      {
-                        label: form.getFieldValue('ways')[index].label,
-                        value: '1',
-                      },
-                    ]}
-                  ></ProFormCheckbox.Group>
-                  <ProFormDependency name={['isChecked']}>
-                    {({ isChecked }) => {
-                      console.log(isChecked, 'isChecked');
-                      return (
-                        <ProFormSelect
-                        width={'lg'}
-                          mode="multiple"
-                          name="value"
-                          debounceTime={1000}
-                          disabled={!isChecked?.length}
-                          request={async () => {
-                            //   const resp = await postCurrentIP();
-                            const resp = ['test001', 'test002', 'test003'];
-                            return resp?.map((v: any) => {
-                              return {
-                                label: v,
-                                value: v,
-                              };
-                            });
-                          }}
-                        />
-                      );
-                    }}
-                  </ProFormDependency>
-                </ProFormGroup>
+                <div className="form_checkBox_wrap">
+                  <ProFormGroup key="group">
+                    <ProFormCheckbox.Group
+                      name="isChecked"
+                      options={[
+                        {
+                          label: form.getFieldValue('ways')[index].label,
+                          value: '1',
+                        },
+                      ]}
+                    ></ProFormCheckbox.Group>
+                    <ProFormDependency name={['isChecked']}>
+                      {({ isChecked }) => {
+                        console.log(isChecked, 'isChecked');
+                        return (
+                          <ProFormSelect
+                            width={'lg'}
+                            mode="multiple"
+                            name="value"
+                            debounceTime={1000}
+                            disabled={!isChecked?.length}
+                            request={async () => {
+                              //   const resp = await postCurrentIP();
+                              const resp = ['test001', 'test002', 'test003'];
+                              return resp?.map((v: any) => {
+                                return {
+                                  label: v,
+                                  value: v,
+                                };
+                              });
+                            }}
+                          />
+                        );
+                      }}
+                    </ProFormDependency>
+                  </ProFormGroup>
+                </div>
               );
             }}
           </ProFormList>
         </ProFormGroup>
       </ProFormGroup>
-      <ProFormGroup title="通知频次" titleStyle={{margin: "0 0 8px"}}>
+      <ProFormGroup title="通知频次" titleStyle={{ margin: '0 0 8px' }}>
         <ProFormRadio.Group
           name="type"
           initialValue={props.values?.type || '0'}
diff --git a/src/pages/Setting/components/ProjectCard.tsx b/src/pages/Setting/components/ProjectCard.tsx
index 52ee2e4..f41ee91 100644
--- a/src/pages/Setting/components/ProjectCard.tsx
+++ b/src/pages/Setting/components/ProjectCard.tsx
@@ -2,7 +2,7 @@
  * @Author: zhoux zhouxia@supervision.ltd
  * @Date: 2023-11-06 16:12:17
  * @LastEditors: zhoux zhouxia@supervision.ltd
- * @LastEditTime: 2023-11-09 17:29:04
+ * @LastEditTime: 2023-12-22 16:04:44
  * @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -24,7 +24,7 @@ const listItemStyle = {
   color: "#333333",
   maxWidth: '22vh',
   alignItems: 'center',
-  padding: '5px 0',
+  padding: '6px 0',
 }
 
 const listItemLabelStyle = {
@@ -57,7 +57,7 @@ const ProjectCard: React.FC<UpdateProjectProps> = ({ info }: { info: Record<stri
     >
       <div style={{display: 'flex', alignItems: 'center', paddingBottom: 10}}>
         <span style={{fontWeight: 700, fontSize: 14,  paddingRight: 10}}>苏胜天算法模型</span>
-        <Tag color="#44AEF5">经典算法</Tag>
+        <Tag color="#155BD4">经典算法</Tag>
       </div>
       <ul>
         <li style={listItemStyle}>
diff --git a/src/utils/options.ts b/src/utils/options.ts
index 79ee803..b65663f 100644
--- a/src/utils/options.ts
+++ b/src/utils/options.ts
@@ -1,12 +1,12 @@
 import { DictValueEnumObj } from "@/components/DictTag";
 import { ProSchemaValueEnumObj, ProSchemaValueEnumType } from "@ant-design/pro-components";
 
-export function getValueEnumLabel(options: DictValueEnumObj | ProSchemaValueEnumObj, val: string | number | undefined, defaultValue?: string) {
+export function getValueEnumLabel(options: DictValueEnumObj | ProSchemaValueEnumObj, val: string | number | undefined, value?: string) {
     if (val !== undefined) {
        const data = options[val] as ProSchemaValueEnumType;
        if(data) {
         return data.text;
        }
     }
-    return defaultValue?defaultValue:val;
+    return value?value:val;
 }