feat: 告警设置完善，告警列表完成

src/global.css

@@ -365,3 +365,6 @@ a.ant-dropdown-trigger {
 .rectProgress_box .ant-progress .ant-progress-bg {
   border-radius: 2px;
 }
+.innerFormList_box .ant-form-item {
+  margin-bottom: 12px;
+}

src/global.less

@@ -483,9 +483,12 @@ a.ant-dropdown-trigger{
 }
 
 
-// .p1{
+// 内部表单样式
-
+.innerFormList_box{
-// }
+  .ant-form-item {
+    margin-bottom: 12px;
+  }
+}
 
 
 

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-19 13:48:54
+ * @LastEditTime: 2023-12-22 13:38:41
  * @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
  */
@@ -17,7 +17,7 @@ export const alarm_setting: { [key: string]: string } = {
     'alarm.setting.table.list.name': '告警名称',
     'alarm.setting.table.list.code': '告警代码',
     'alarm.setting.table.list.category': '告警分类',
-    'alarm.setting.table.list.level': '告警级别',
+    'alarm.setting.table.list.level': '告警等级',
     'alarm.setting.table.list.createTime': '创建时间',
     'alarm.setting.table.list.remark': '备注',
     'alarm.setting.table.list.setting': '告警等级设置',
@@ -25,5 +25,7 @@ export const alarm_setting: { [key: string]: string } = {
     'alarm.setting.table.model.title': '告警等级',
     'alarm.setting.table.list.update': '编辑告警项',
     'alarm.setting.table.rule.required.code': '类别代码为必填项',
-    'alarm.setting.table.model.alarmStatusSetting': '告警等级'
+    'alarm.setting.table.model.alarmStatusSetting': '告警等级',
+    'alarm.list.table.list.alarmTime': '告警时间',
+
 }  

src/pages/Alarm/AlarmList/index.tsx

@@ -1,69 +1,27 @@
-import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
+import AlarmLevelBox from '@/components/DictionaryBox/alarmLevel';
 import TableActionCard from '@/components/TableActionCard';
 import IsDelete from '@/components/TableActionCard/isDelete';
+import { alarmLevelStatusEnum } from '@/enums/status';
 import {
   deleteDeviceCategoryDeleteDeviceCategory,
-  deleteDeviceCategoryDeleteDeviceCategoryByIds,
   postDeviceCategoryGetDeviceCategoryList,
 } from '@/services/device/DeviceCategory';
-import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { PageContainer, ProTable } from '@ant-design/pro-components';
-import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
+import { FormattedMessage, useIntl } from '@umijs/max';
-import { Button, message } from 'antd';
+import { Space, message } from 'antd';
 import React, { useRef, useState } from 'react';
-import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
+import { proTablePaginationOptions } from '../../../../config/defaultTable';
-import { ColumnDrawer } from './components/ColumnDrawer';
-import CreateForm from './components/CreateForm';
-import UpdateForm from './components/UpdateForm';
 const DeviceCategoryList: React.FC = () => {
-  /**
-   * @en-US Pop-up window of new window
-   * @zh-CN 新建窗口的弹窗
-   *  */
-  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
-  /**
-   * @en-US The pop-up window of the distribution update window
-   * @zh-CN 分布更新窗口的弹窗
-   * */
-  const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
-  const [showDetail, setShowDetail] = useState<boolean>(false);
   /**
    * @en-US International configuration
    * @zh-CN 国际化配置
    * */
-  const access = useAccess();
   const intl = useIntl();
   const actionRef = useRef<ActionType>();
   //  动态设置每页数量
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
-  const [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
-  const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
 
-  const handleUpdateModal = () => {
-    if (updateModalOpen) {
-      setUpdateModalOpen(false);
-      setCurrentRow(undefined);
-    } else {
-      setUpdateModalOpen(true);
-    }
-  };
-  const handleCreateModal = () => {
-    if (createModalOpen) {
-      setCreateModalOpen(false);
-      setCurrentRow(undefined);
-    } else {
-      setCreateModalOpen(true);
-    }
-  };
-  const handleColumnDrawer = () => {
-    if (showDetail) {
-      setShowDetail(false);
-      setCurrentRow(undefined);
-    } else {
-      setShowDetail(true);
-    }
-  };
   const handleDestroy = async (selectedRow: API.DeviceCategory) => {
     deleteDeviceCategoryDeleteDeviceCategory({ id: selectedRow.id })
       .then(() => {
@@ -76,64 +34,40 @@ const DeviceCategoryList: React.FC = () => {
   };
 
   const columns: ProColumns<API.DeviceCategory>[] = [
-    // {
-    //   title: <FormattedMessage id="DCSDeviceList.device_category.table.list.id" defaultMessage="id" />,
-    //   dataIndex: 'id',
-    //   sorter: true,
-    //   render: (dom, entity) => {
-    //     return (
-    //       <a
-    //         onClick={() => {
-    //           setCurrentRow(entity);
-    //           setShowDetail(true);
-    //         }}
-    //       >
-    //         {dom}
-    //       </a>
-    //     );
-    //   },
-    // },
-
     {
-      title: <FormattedMessage id="DCSDeviceList.device_category.table.list.name" defaultMessage="$$$" />,
+      title: <FormattedMessage id="alarm.setting.table.list.name" defaultMessage="$$$" />,
       dataIndex: 'name',
-      hideInSearch: false,
+      hideInSearch: true,
     },
 
     {
-      title: <FormattedMessage id="DCSDeviceList.device_category.table.list.code" defaultMessage="$$$" />,
+      title: <FormattedMessage id="alarm.setting.table.list.code" defaultMessage="$$$" />,
       dataIndex: 'code',
       hideInSearch: true,
     },
-
     {
-      title: (
+      title: <FormattedMessage id="alarm.setting.table.list.level" defaultMessage="$$$" />,
-        <FormattedMessage id="DCSDeviceList.device_category.table.list.remark" defaultMessage="$$$" />
+      dataIndex: 'level',
-      ),
-      dataIndex: 'remark',
       hideInSearch: true,
+      render: (text, record, index) => {
+        console.log(text, record, index, 'level_record');
+        const currVal = index % 6;
+        const currLevel = alarmLevelStatusEnum[currVal];
+        return (
+          <Space>
+            <AlarmLevelBox {...currLevel}></AlarmLevelBox>
+            <span style={{ color: currLevel.color }}>{currLevel.defaultLabel}</span>
+          </Space>
+        );
+      },
     },
-
     {
-      title: (
+      title: <FormattedMessage id="alarm.list.table.list.alarmTime" defaultMessage="$$$" />,
-        <FormattedMessage id="DCSDeviceList.device_category.table.list.createTime" defaultMessage="$$$" />
-      ),
       dataIndex: 'createTime',
       sorter: true,
       hideInSearch: true,
       valueType: 'dateTime',
     },
-
-    {
-      title: (
-        <FormattedMessage id="DCSDeviceList.device_category.table.list.updateTime" defaultMessage="$$$" />
-      ),
-      dataIndex: 'updateTime',
-      sorter: true,
-      hideInSearch: true,
-      valueType: 'dateTime',
-    },
-
     {
       title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
       dataIndex: 'option',
@@ -143,26 +77,11 @@ const DeviceCategoryList: React.FC = () => {
         <TableActionCard
           key="TableActionCardRef"
           renderActions={[
-            {
-              key: 'update',
-              renderDom: (
-                <Button
-                  key="update"
-                  type="link"
-                  size="small"
-                  onClick={() => {
-                    setUpdateModalOpen(true);
-                    setCurrentRow(record);
-                  }}
-                >
-                  <FormattedMessage id="DCSDeviceList.device_category.table.list.editor" defaultMessage="Update" />
-                </Button>
-              ),
-            },
             {
               key: 'destroy',
               renderDom: (
                 <IsDelete
+                  buttonType="deleteIcon"
                   deleteApi={() => {
                     handleDestroy(record).then(() => {});
                   }}
@@ -184,10 +103,7 @@ const DeviceCategoryList: React.FC = () => {
         options={{ fullScreen: true, setting: true, density: true, reload: true }}
         actionRef={actionRef}
         rowKey="key"
-        search={{
+        search={false}
-          labelWidth: proTableCommonOptions.searchLabelWidth,
-        }}
-        onDataSourceChange={(data) => {}}
         pagination={{
           ...proTablePaginationOptions,
           pageSize: currentPageSize,
@@ -197,42 +113,6 @@ const DeviceCategoryList: React.FC = () => {
           persistenceKey: 'device_category_list',
           persistenceType: 'localStorage',
         }}
-        tableAlertOptionRender={() => {
-          return (
-            <>
-              {selectedRowsState?.length > 0 && (
-                <IsBatchDelete
-                  deleteApi={() => {
-                    // TODO 需要；联调删除接口
-                    deleteDeviceCategoryDeleteDeviceCategoryByIds({
-                      ids: selectedRowsState.map((v: API.DeviceCategory) => {
-                        return v.id as number;
-                      }),
-                    }).then(() => {
-                      actionRef.current?.reloadAndRest?.();
-                    });
-                  }}
-                />
-              )}
-            </>
-          );
-        }}
-        toolBarRender={() => [
-          <Access
-            accessible={access.canUpdate(history.location.pathname)}
-            key={`${history.location.pathname}-add`}
-          >
-            <Button
-              type="primary"
-              key="primary"
-              onClick={() => {
-                setCreateModalOpen(true);
-              }}
-            >
-              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
-            </Button>
-          </Access>,
-        ]}
         request={async (params = {}, sort) => {
           const { current, ...rest } = params;
           const reqParams = {
@@ -258,31 +138,6 @@ const DeviceCategoryList: React.FC = () => {
           };
         }}
         columns={columns}
-        rowSelection={{
-          onChange: (_, selectedRows) => {
-            setSelectedRows(selectedRows);
-          },
-        }}
-      />
-
-      <CreateForm
-        createModalOpen={createModalOpen}
-        values={currentRow || {}}
-        handleModal={handleCreateModal}
-        reload={actionRef.current?.reload}
-      />
-      <UpdateForm
-        updateModalOpen={updateModalOpen}
-        values={currentRow || {}}
-        handleModal={handleUpdateModal}
-        reload={actionRef.current?.reload}
-      />
-
-      <ColumnDrawer
-        handleDrawer={handleColumnDrawer}
-        isShowDetail={showDetail}
-        columns={columns}
-        currentRow={currentRow}
       />
     </PageContainer>
   );

src/pages/Alarm/AlarmSetting/components/alarmStatusForm.tsx

@@ -4,7 +4,7 @@ import { localStorageKeyEnums } from '@/enums/storage';
 import { DeleteOutlined, ExclamationCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { ModalForm, ProFormText } from '@ant-design/pro-components';
 import { useIntl } from '@umijs/max';
-import { Form } from 'antd';
+import { Form, message } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { proFormSmallModelWidth } from '../../../../../config/defaultForm';
 // TODO 需要根据接口替换API.DeviceCategory
@@ -57,12 +57,19 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
       localStorageKeyEnums.alarmSetting_model_alarmStatusSetting,
     );
     if (currData) {
-      const finalData = alarmLevelStatusEnum.filter((item) =>
+      const currFormData = JSON.parse(currData);
-        Object.keys(JSON.parse(currData)).includes(item.id),
+      // eslint-disable-next-line array-callback-return
-      );
+      const finalData = alarmLevelStatusEnum.filter((item) => {
+        if (Object.keys(currFormData).includes(item.id)) {
+          item.defaultLabel = currFormData[item.id];
+          return item;
+        }
+      });
       setAlarmDict(finalData);
+      form.setFieldsValue(currFormData);
+      console.log(currFormData, 'falarmStatusModalOpen_inalData', finalData);
     }
-  }, []);
+  }, [props.alarmStatusModalOpen]);
 
   return (
     <ModalForm<API.DeviceCategory>
@@ -80,8 +87,20 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
         onCancel: () => props.handleModal(),
       }}
       submitTimeout={2000}
-      onFinish={async (values) => {
+      onFinish={async (values: Record<string, any>) => {
         console.log(values, 'values');
+        let isFlag = true;
+        for (let key in values) {
+          if (!values[key]) {
+            isFlag = false;
+            break;
+          }
+        }
+        if (!isFlag) {
+          message.warning('请将告警等级信息完善');
+          return false;
+        }
+
         localStorage.setItem(
           localStorageKeyEnums.alarmSetting_model_alarmStatusSetting,
           JSON.stringify(values),

src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx

@@ -226,9 +226,9 @@ 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} style={{ border: '1px dashed red' }}></canvas>
 
-        <ul
+        {/* <ul
           className="occupy_progress"
           style={{
             width: '100%',
@@ -284,7 +284,7 @@ const OccupyProportion: React.FC<{
               preview={false}
             ></Image>
           </li>
-        </ul>
+        </ul> */}
       </div>
 
       <div className="occupy_des">

src/pages/Setting/AlgorithmSetting.tsx

@@ -284,6 +284,7 @@ const AlgorithmSetting: React.FC = () => {
                   activeKey={tab}
                   items={tabs}
                   onChange={(key) => {
+                    setActiveMode('1'); // 重置到项目详情
                     changeProjectTab(key);
                   }}
                 ></Tabs>
@@ -361,8 +362,23 @@ const AlgorithmSetting: React.FC = () => {
                     </>
                   ) : (
                     <div style={{ padding: 16 }}>
-                      {' '}
+                      <AlarmSetForm
-                      <AlarmSetForm></AlarmSetForm>
+                        currentRow={{
+                          type: '2',
+                          ways: [
+                            {
+                              label: '短信',
+                              value: [],
+                              isChecked: [],
+                            },
+                            {
+                              label: '邮件',
+                              value: [],
+                              isChecked: [],
+                            },
+                          ],
+                        }}
+                      ></AlarmSetForm>
                     </div>
                   )}
                 </ProCard>

src/pages/Setting/components/AlarmSetForm.tsx

@@ -6,68 +6,96 @@ import {
   ProFormList,
   ProFormRadio,
   ProFormSelect,
-  ProFormSwitch,
 } from '@ant-design/pro-components';
 import { Form } from 'antd';
-import type { NamePath } from 'antd/lib/form/interface';
+import { useEffect, useState } from 'react';
-import { useEffect } from 'react';
 type AlarmSetFormProps = {
-  values?: Record<string, any>;
+  currentRow: Record<string, any>;
 };
 const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
   const [form] = Form.useForm<API.DeviceCategory>();
 
-  const initialValues = {
+  // const [initialValues, setInitialValues] = useState<Record<string, any>>({});
-    label: 1,
-    value: 2,
-  };
-  const depName1: NamePath[] = [['ways']];
 
+
+  function fetchInitialValues() {
+    // setInitialValues({
+    //   type: '2',
+    //   ways: [
+    //     {
+    //       label: '短信',
+    //       value: [],
+    //       isChecked: [],
+    //     },
+    //     {
+    //       label: '邮件',
+    //       value: [],
+    //       isChecked: [],
+    //     },
+    //   ]
+    // });
+  }
   useEffect(() => {
-    form.setFieldValue('ways', [
+    fetchInitialValues()
-      {
-        label: '短信',
-        value: [],
-        isChecked: true,
-      },
-      {
-        label: '邮件',
-        value: [],
-        isChecked: false,
-      },
-    ]);
   }, []);
   return (
     // TODO 模拟提交告警设置
-    <ProForm form={form} initialValues={initialValues} >
+    <ProForm
+      style={{paddingBottom: 70}}
+      submitter={{
+        searchConfig: {
+          submitText: '保存', // 在这里设置提交按钮文案
+        },
+      }}
+      form={form}
+      initialValues={props.currentRow}
+      onFinish={async (values) => {
+        console.log('onFinish_values', values);
+        // postProjectCreateProject(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;
+      }}
+    >
       <ProFormGroup>
-        <ProFormGroup title="通知方式">
+        <ProFormGroup title="通知方式" titleStyle={{margin: "0 0 8px"}}>
           <ProFormList
+            className='innerFormList_box'
             name={['ways']}
             creatorButtonProps={false}
             copyIconProps={false}
             deleteIconProps={false}
+            style={{padding: 0, margin: 0}}
           >
             {(f, index, action) => {
               console.log('isChecked_value', f, index, action);
               return (
                 <ProFormGroup key="group">
-                  {/* <Checkbox checked={false}>
+                  <ProFormCheckbox.Group
-                    {form.getFieldValue('ways')[index].label}{' '}
+                    name="isChecked"
-                  </Checkbox> */}
+                    options={[
-
+                      {
-                  <ProFormSwitch name="isChecked"></ProFormSwitch>
+                        label: form.getFieldValue('ways')[index].label,
-                  <ProFormCheckbox.Group name="isChecked">
+                        value: '1',
-                    {form.getFieldValue('ways')[index].label}
+                      },
-                  </ProFormCheckbox.Group>
+                    ]}
+                  ></ProFormCheckbox.Group>
                   <ProFormDependency name={['isChecked']}>
                     {({ isChecked }) => {
+                      console.log(isChecked, 'isChecked');
                       return (
                         <ProFormSelect
+                        width={'lg'}
                           mode="multiple"
                           name="value"
                           debounceTime={1000}
-                          disabled={!isChecked}
+                          disabled={!isChecked?.length}
                           request={async () => {
                             //   const resp = await postCurrentIP();
                             const resp = ['test001', 'test002', 'test003'];
@@ -82,27 +110,13 @@ const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
                       );
                     }}
                   </ProFormDependency>
-                  {/* <ProFormText
-                    name="value"
-                  /> */}
                 </ProFormGroup>
               );
             }}
           </ProFormList>
         </ProFormGroup>
       </ProFormGroup>
-      {/* <ProFormGroup
+      <ProFormGroup title="通知频次" titleStyle={{margin: "0 0 8px"}}>
-        title={`收集依赖值（情形1) <ProFormDependency name={${JSON.stringify(depName1)}}>`}
-      >
-        <ProFormDependency name={depName1}>
-          {(depValues) => (
-            <pre>
-              <code>{JSON.stringify(depValues)}</code>
-            </pre>
-          )}
-        </ProFormDependency>
-      </ProFormGroup> */}
-      <ProFormGroup title="通知频次">
         <ProFormRadio.Group
           name="type"
           initialValue={props.values?.type || '0'}