feat: 告警列表、告警设置模块静态交互完善,算力分配交互完成

develop
zhoux 1 year ago
parent 5aae5031cc
commit 52c3301571

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-28 14:13:05 * @Date: 2023-11-28 14:13:05
* @LastEditors: zhoux zhouxia@supervision.ltd * @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 * @FilePath: \general-ai-platform-web\config\defaultIcon.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A * @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, borderRadius: 4,
overflowY: 'scroll', overflowY: 'scroll',
}; };
// 列表图标统一样式
export const proIconForTableActionStyle : React.CSSProperties = {
fontSize: 16,
}

@ -50,7 +50,7 @@ export const SelectRole = () => {
{ {
currentUser && ( currentUser && (
<Select <Select
defaultValue={currentUser.roleId} value={currentUser.roleId}
options={currentUser?.roles || []} options={currentUser?.roles || []}
onSelect={value => { onSelect={value => {
postUserSetUserRole({roleId: value}).then((resp) => { postUserSetUserRole({roleId: value}).then((resp) => {

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-16 14:30:15 * @Date: 2023-11-16 14:30:15
* @LastEditors: zhoux zhouxia@supervision.ltd * @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 * @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 * @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 { DeleteOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Popconfirm } from 'antd'; import { Button, Popconfirm } from 'antd';
import { proIconForTableActionStyle } from '../../../config/defaultIcon';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
type IsDeleteProps = { type IsDeleteProps = {
@ -39,7 +40,8 @@ const IsDelete: React.FC<IsDeleteProps> = (props) => {
{props.buttonType === 'deleteIcon' ? ( {props.buttonType === 'deleteIcon' ? (
<> <>
<DeleteOutlined style={{ <DeleteOutlined style={{
color: "rgba(232, 13, 13, 1)" color: "rgba(232, 13, 13, 1)",
...proIconForTableActionStyle
}} /> }} />
</> </>
) : ( ) : (

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-12-08 14:50:08 * @Date: 2023-12-08 14:50:08
* @LastEditors: zhoux zhouxia@supervision.ltd * @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 * @FilePath: \general-ai-platform-web\src\enums\status.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @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>[] = [ export const alarmLevelStatusEnum: Record<string, any>[] = [
{ {
color: 'rgba(232, 13, 13, 1)', color: 'rgba(232, 13, 13, 1)',
defaultValue: '1', value: '1',
defaultLabel: '紧急', label: '紧急',
isDelete: false, isDelete: false,
icon: 'ArrowUpOutlined', icon: 'ArrowUpOutlined',
id: '1', id: '1',
}, },
{ {
color: 'rgba(255, 136, 0, 1)', color: 'rgba(255, 136, 0, 1)',
defaultValue: '2', value: '2',
defaultLabel: '较高', label: '较高',
isDelete: false, isDelete: false,
id: '2', id: '2',
}, },
{ {
color: 'rgba(68, 139, 245, 1)', color: 'rgba(68, 139, 245, 1)',
defaultValue: '3', value: '3',
defaultLabel: '一般', label: '一般',
isDelete: false, isDelete: false,
id: '3', id: '3',
}, },
{ {
color: 'rgba(179, 214, 0, 1)', color: 'rgba(179, 214, 0, 1)',
defaultValue: '4', value: '4',
defaultLabel: '低', label: '低',
isDelete: true, isDelete: true,
id: '4', id: '4',
}, },
{ {
color: 'rgba(81, 177, 6, 1)', color: 'rgba(81, 177, 6, 1)',
defaultValue: '5', value: '5',
defaultLabel: '较低', label: '较低',
isDelete: true, isDelete: true,
id: '5', id: '5',
}, },
{ {
color: 'rgba(43, 183, 136, 1)', color: 'rgba(43, 183, 136, 1)',
defaultValue: '6', value: '6',
defaultLabel: '非常低', label: '非常低',
isDelete: true, isDelete: true,
id: '6', id: '6',
}, },

@ -268,12 +268,17 @@ a.ant-dropdown-trigger {
padding-left: 12px; padding-left: 12px;
} }
.gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list { .gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
padding: 0 16px;
margin-block-start: 0; 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 { .gn .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list .ant-tabs-tab-active {
font-weight: 400; 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 { .gn .ant-tabs .ant-tabs-tab .anticon {
margin-right: 4px; margin-right: 4px;
} }
@ -368,3 +373,6 @@ a.ant-dropdown-trigger {
.innerFormList_box .ant-form-item { .innerFormList_box .ant-form-item {
margin-bottom: 12px; margin-bottom: 12px;
} }
.form_checkBox_wrap .ant-pro-form-group-container {
gap: 0 4px !important;
}

@ -330,12 +330,19 @@ a.ant-dropdown-trigger{
.ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap{ .ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap{
.ant-tabs-nav-list{ .ant-tabs-nav-list{
padding: 0 16px; .ant-tabs-tab-btn{
padding: 0 16px;
}
margin-block-start: 0; margin-block-start: 0;
.ant-tabs-tab-active{ .ant-tabs-tab-active{
font-weight: 400 font-weight: 400
} }
} }
.ant-tabs-tab+.ant-tabs-tab {
margin: 0 0 0 12px;
}
} }
.ant-tabs .ant-tabs-tab .anticon { .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;
}
}

@ -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,
};
};

@ -8,7 +8,7 @@ interface KeepAliveTabContextType {
onHidden: (cb: () => void) => void; onHidden: (cb: () => void) => void;
} }
const defaultValue = { const value = {
refreshTab: () => { }, refreshTab: () => { },
closeTab: () => { }, closeTab: () => { },
closeOtherTab: () => { }, closeOtherTab: () => { },
@ -17,4 +17,4 @@ const defaultValue = {
} }
export const KeepAliveTabContext = createContext<KeepAliveTabContextType>(defaultValue); export const KeepAliveTabContext = createContext<KeepAliveTabContextType>(value);

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-12-18 16:36:36 * @Date: 2023-12-18 16:36:36
* @LastEditors: zhoux zhouxia@supervision.ltd * @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 * @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 * @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 } = { export const alarm_setting: { [key: string]: string } = {
'alarm.setting.table.title': '告警项',
'alarm.setting.table.list.name': '告警名称', 'alarm.setting.table.list.name': '告警名称',
'alarm.setting.table.list.code': '告警代码', 'alarm.setting.table.list.code': '告警代码',
'alarm.setting.table.list.category': '告警分类', 'alarm.setting.table.list.category': '告警分类',
@ -26,6 +27,8 @@ export const alarm_setting: { [key: string]: string } = {
'alarm.setting.table.list.update': '编辑告警项', 'alarm.setting.table.list.update': '编辑告警项',
'alarm.setting.table.rule.required.code': '类别代码为必填项', 'alarm.setting.table.rule.required.code': '类别代码为必填项',
'alarm.setting.table.model.alarmStatusSetting': '告警等级', 'alarm.setting.table.model.alarmStatusSetting': '告警等级',
'alarm.list.table.list.deviceGroup': '设备组',
'alarm.list.table.list.alarmTime': '告警时间', 'alarm.list.table.list.alarmTime': '告警时间',
} }

@ -56,11 +56,18 @@ const DeviceCategoryList: React.FC = () => {
return ( return (
<Space> <Space>
<AlarmLevelBox {...currLevel}></AlarmLevelBox> <AlarmLevelBox {...currLevel}></AlarmLevelBox>
<span style={{ color: currLevel.color }}>{currLevel.defaultLabel}</span> <span style={{ color: currLevel.color }}>{currLevel.label}</span>
</Space> </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="$$$" />, title: <FormattedMessage id="alarm.list.table.list.alarmTime" defaultMessage="$$$" />,
dataIndex: 'createTime', dataIndex: 'createTime',
@ -68,6 +75,7 @@ const DeviceCategoryList: React.FC = () => {
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />, title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option', dataIndex: 'option',
@ -96,11 +104,12 @@ const DeviceCategoryList: React.FC = () => {
return ( return (
<PageContainer> <PageContainer>
<ProTable<API.DeviceCategory> <ProTable<API.DeviceCategory>
headerTitle={intl.formatMessage({ cardProps={{
id: 'pages.searchTable.title', bodyStyle: {
defaultMessage: '$$$', padding: 20
})} }
options={{ fullScreen: true, setting: true, density: true, reload: true }} }}
options={{ fullScreen: false, setting: false, density: false, reload: false }}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
search={false} search={false}

@ -61,7 +61,7 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
// eslint-disable-next-line array-callback-return // eslint-disable-next-line array-callback-return
const finalData = alarmLevelStatusEnum.filter((item) => { const finalData = alarmLevelStatusEnum.filter((item) => {
if (Object.keys(currFormData).includes(item.id)) { if (Object.keys(currFormData).includes(item.id)) {
item.defaultLabel = currFormData[item.id]; item.label = currFormData[item.id];
return item; return item;
} }
}); });
@ -129,7 +129,7 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
<AlarmLevelBox size={20} {...currLevel}></AlarmLevelBox> <AlarmLevelBox size={20} {...currLevel}></AlarmLevelBox>
</div> </div>
<div style={{ width: '100%', flex: 1 }}> <div style={{ width: '100%', flex: 1 }}>
<ProFormText name={item.id} initialValue={item.defaultLabel}></ProFormText> <ProFormText name={item.id} initialValue={item.label}></ProFormText>
</div> </div>
{index === alarmDict.length - 1 && index > 2 ? ( {index === alarmDict.length - 1 && index > 2 ? (
<div <div
@ -173,7 +173,7 @@ const AlarmStatusForm: React.FC<CreateFormProps> = (props) => {
<div style={{ paddingRight: 12, color: '#FAAD14' }}> <div style={{ paddingRight: 12, color: '#FAAD14' }}>
<ExclamationCircleOutlined /> <ExclamationCircleOutlined />
</div> </div>
<span> <span style={{color: '#666666'}}>
{intl.formatMessage({ {intl.formatMessage({
id: 'alarm.setting.table.model.alarmStatusSetting', id: 'alarm.setting.table.model.alarmStatusSetting',
defaultMessage: '$$$', defaultMessage: '$$$',

@ -3,6 +3,7 @@ import AlarmLevelBox from '@/components/DictionaryBox/alarmLevel';
import TableActionCard from '@/components/TableActionCard'; import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete'; import IsDelete from '@/components/TableActionCard/isDelete';
import { alarmLevelStatusEnum } from '@/enums/status'; import { alarmLevelStatusEnum } from '@/enums/status';
import { useAlarmSettingLevel } from '@/hooks/useAlarmSettingLevel';
import { import {
deleteDeviceCategoryDeleteDeviceCategory, deleteDeviceCategoryDeleteDeviceCategory,
deleteDeviceCategoryDeleteDeviceCategoryByIds, deleteDeviceCategoryDeleteDeviceCategoryByIds,
@ -10,10 +11,11 @@ import {
} from '@/services/device/DeviceCategory'; } from '@/services/device/DeviceCategory';
import { EditOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'; import { EditOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components'; 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 { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Space, message } from 'antd'; import { Button, Space, message } from 'antd';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { proIconForTableActionStyle } from '../../../../config/defaultIcon';
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable'; import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
import CreateForm from './components/CreateForm'; import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
@ -43,6 +45,7 @@ const DeviceCategoryList: React.FC = () => {
const [currentPageSize, setCurrentPageSize] = useState<number>(10); const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const [currentRow, setCurrentRow] = useState<API.DeviceCategory>(); const [currentRow, setCurrentRow] = useState<API.DeviceCategory>();
const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]); const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
const { fetchAlarmSettingLevel } = useAlarmSettingLevel();
/** /**
1. 1.
@ -103,7 +106,8 @@ const DeviceCategoryList: React.FC = () => {
{ {
title: <FormattedMessage id="alarm.setting.table.list.level" defaultMessage="$$$" />, title: <FormattedMessage id="alarm.setting.table.list.level" defaultMessage="$$$" />,
dataIndex: 'level', dataIndex: 'level',
hideInSearch: true, hideInSearch: false,
render: (text, record, index) => { render: (text, record, index) => {
console.log(text, record, index, 'level_record'); console.log(text, record, index, 'level_record');
const currVal = index % 6; const currVal = index % 6;
@ -111,17 +115,34 @@ const DeviceCategoryList: React.FC = () => {
return ( return (
<Space> <Space>
<AlarmLevelBox {...currLevel}></AlarmLevelBox> <AlarmLevelBox {...currLevel}></AlarmLevelBox>
<span style={{ color: currLevel.color }}>{currLevel.defaultLabel}</span> <span style={{ color: currLevel.color }}>{currLevel.label}</span>
</Space> </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="$$$" />, title: <FormattedMessage id="alarm.setting.table.list.createTime" defaultMessage="$$$" />,
dataIndex: 'createTime', dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
// valueType: 'ProFormDateRangePicker', valueType: 'dateTime',
}, },
{ {
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />, title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
@ -150,6 +171,7 @@ const DeviceCategoryList: React.FC = () => {
key="update" key="update"
style={{ style={{
color: 'rgba(21, 77, 221, 1)', color: 'rgba(21, 77, 221, 1)',
...proIconForTableActionStyle,
}} }}
onClick={() => { onClick={() => {
setUpdateModalOpen(true); setUpdateModalOpen(true);
@ -178,7 +200,7 @@ const DeviceCategoryList: React.FC = () => {
<PageContainer> <PageContainer>
<ProTable<API.DeviceCategory> <ProTable<API.DeviceCategory>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
id: 'pages.searchTable.title', id: 'alarm.setting.table.title',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
options={{ fullScreen: true, setting: true, density: true, reload: true }} options={{ fullScreen: true, setting: true, density: true, reload: true }}

@ -8,10 +8,9 @@ import React, { useEffect, useRef, useState } from 'react';
// type // type
import { ComputePowerPoolItem } from './typing'; import { ComputePowerPoolItem } from './typing';
// TODO 整个页面的字体、颜色、间距处理 // TODO bug左侧
// state // state
const poolsData: ComputePowerPoolItem[] = [ const poolsData: ComputePowerPoolItem[] = [
{ {
name: '玩手机监控', name: '玩手机监控',
@ -23,7 +22,7 @@ const poolsData: ComputePowerPoolItem[] = [
{ {
name: '离岗监控', name: '离岗监控',
type: 1, type: 1,
proportion: 60, proportion: 30,
PretreatmentEfficiency: 20, PretreatmentEfficiency: 20,
color: '#3879FE', color: '#3879FE',
}, },
@ -140,7 +139,6 @@ const OccupyProportion: React.FC<{
...poolDefault.buttonGroupOptions, ...poolDefault.buttonGroupOptions,
buttonId: '1', buttonId: '1',
left: rect1Witdh - 10, left: rect1Witdh - 10,
selectable: false,
}), }),
); );
// 更新Canvas以应用更改 // 更新Canvas以应用更改
@ -154,8 +152,8 @@ const OccupyProportion: React.FC<{
canvasObject.add( canvasObject.add(
new fabric.Group([bgRect2, img], { new fabric.Group([bgRect2, img], {
...poolDefault.buttonGroupOptions, ...poolDefault.buttonGroupOptions,
left: rect1Witdh + 10,
buttonId: '2', buttonId: '2',
left: rect1Witdh + rect2Witdh - 10,
}), }),
); );
// 更新Canvas以应用更改 // 更新Canvas以应用更改
@ -167,14 +165,14 @@ const OccupyProportion: React.FC<{
canvasObject.on('object:moving', (event) => { canvasObject.on('object:moving', (event) => {
// 获取事件的目标对象 // 获取事件的目标对象
const targetObject = event.target; const targetObject = event.target;
console.log(targetObject, 'targetObject', canvasObject.item(0)); console.log(targetObject.buttonId, 'targetObject', canvasObject.item(3));
// 算力按钮1 // 算力按钮
switch (targetObject.buttonId) { switch (targetObject.buttonId) {
case '1': case '1':
// 算力按钮2 // 算力按钮1
if (targetObject?.left >= 960) { if (targetObject?.left >= clipPathData.width - 20) {
targetObject?.set({ targetObject?.set({
left: 960, left: clipPathData.width - 20,
}); });
} }
if (targetObject?.left <= 0) { if (targetObject?.left <= 0) {
@ -182,28 +180,55 @@ const OccupyProportion: React.FC<{
left: 0, left: 0,
}); });
} }
const currObject1Width = targetObject?.left + 10;
canvasObject.item(1).set({ canvasObject.item(1).set({
width: targetObject?.left + 10, width: currObject1Width,
}); });
canvasObject.item(2).set({ 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; break;
case '2': case '2':
// 算力按钮2 // 算力按钮2
if (targetObject?.left >= 980) { if (targetObject?.left >= clipPathData.width - 20) {
targetObject?.set({ 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({ 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({ 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; break;
} }
// set_category_fk_id_open(false); // set_category_fk_id_open(false);
@ -226,7 +251,7 @@ const OccupyProportion: React.FC<{
className="occupy_up" className="occupy_up"
style={{ marginTop: 24, marginBottom: 20, padding: 0, position: 'relative', width: '100%' }} 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 {/* <ul
className="occupy_progress" className="occupy_progress"

@ -195,7 +195,7 @@ const AlgorithmSetting: React.FC = () => {
> >
<div> <div>
<div>{JSON.stringify(item.configId)}</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> </div>
<Button <Button
type="link" type="link"

@ -8,7 +8,7 @@ import {
ProFormSelect, ProFormSelect,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { Form } from 'antd'; import { Form } from 'antd';
import { useEffect, useState } from 'react'; import { useEffect } from 'react';
type AlarmSetFormProps = { type AlarmSetFormProps = {
currentRow: Record<string, any>; currentRow: Record<string, any>;
}; };
@ -17,7 +17,6 @@ const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
// const [initialValues, setInitialValues] = useState<Record<string, any>>({}); // const [initialValues, setInitialValues] = useState<Record<string, any>>({});
function fetchInitialValues() { function fetchInitialValues() {
// setInitialValues({ // setInitialValues({
// type: '2', // type: '2',
@ -36,12 +35,12 @@ const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
// }); // });
} }
useEffect(() => { useEffect(() => {
fetchInitialValues() fetchInitialValues();
}, []); }, []);
return ( return (
// TODO 模拟提交告警设置 // TODO 模拟提交告警设置
<ProForm <ProForm
style={{paddingBottom: 70}} style={{ paddingBottom: 70 }}
submitter={{ submitter={{
searchConfig: { searchConfig: {
submitText: '保存', // 在这里设置提交按钮文案 submitText: '保存', // 在这里设置提交按钮文案
@ -64,59 +63,61 @@ const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
}} }}
> >
<ProFormGroup> <ProFormGroup>
<ProFormGroup title="通知方式" titleStyle={{margin: "0 0 8px"}}> <ProFormGroup title="通知方式" titleStyle={{ margin: '0 0 8px' }}>
<ProFormList <ProFormList
className='innerFormList_box' className="innerFormList_box"
name={['ways']} name={['ways']}
creatorButtonProps={false} creatorButtonProps={false}
copyIconProps={false} copyIconProps={false}
deleteIconProps={false} deleteIconProps={false}
style={{padding: 0, margin: 0}} style={{ padding: 0, margin: 0 }}
> >
{(f, index, action) => { {(f, index, action) => {
console.log('isChecked_value', f, index, action); console.log('isChecked_value', f, index, action);
return ( return (
<ProFormGroup key="group"> <div className="form_checkBox_wrap">
<ProFormCheckbox.Group <ProFormGroup key="group">
name="isChecked" <ProFormCheckbox.Group
options={[ name="isChecked"
{ options={[
label: form.getFieldValue('ways')[index].label, {
value: '1', label: form.getFieldValue('ways')[index].label,
}, value: '1',
]} },
></ProFormCheckbox.Group> ]}
<ProFormDependency name={['isChecked']}> ></ProFormCheckbox.Group>
{({ isChecked }) => { <ProFormDependency name={['isChecked']}>
console.log(isChecked, 'isChecked'); {({ isChecked }) => {
return ( console.log(isChecked, 'isChecked');
<ProFormSelect return (
width={'lg'} <ProFormSelect
mode="multiple" width={'lg'}
name="value" mode="multiple"
debounceTime={1000} name="value"
disabled={!isChecked?.length} debounceTime={1000}
request={async () => { disabled={!isChecked?.length}
// const resp = await postCurrentIP(); request={async () => {
const resp = ['test001', 'test002', 'test003']; // const resp = await postCurrentIP();
return resp?.map((v: any) => { const resp = ['test001', 'test002', 'test003'];
return { return resp?.map((v: any) => {
label: v, return {
value: v, label: v,
}; value: v,
}); };
}} });
/> }}
); />
}} );
</ProFormDependency> }}
</ProFormGroup> </ProFormDependency>
</ProFormGroup>
</div>
); );
}} }}
</ProFormList> </ProFormList>
</ProFormGroup> </ProFormGroup>
</ProFormGroup> </ProFormGroup>
<ProFormGroup title="通知频次" titleStyle={{margin: "0 0 8px"}}> <ProFormGroup title="通知频次" titleStyle={{ margin: '0 0 8px' }}>
<ProFormRadio.Group <ProFormRadio.Group
name="type" name="type"
initialValue={props.values?.type || '0'} initialValue={props.values?.type || '0'}

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-06 16:12:17 * @Date: 2023-11-06 16:12:17
* @LastEditors: zhoux zhouxia@supervision.ltd * @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 * @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 * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -24,7 +24,7 @@ const listItemStyle = {
color: "#333333", color: "#333333",
maxWidth: '22vh', maxWidth: '22vh',
alignItems: 'center', alignItems: 'center',
padding: '5px 0', padding: '6px 0',
} }
const listItemLabelStyle = { const listItemLabelStyle = {
@ -57,7 +57,7 @@ const ProjectCard: React.FC<UpdateProjectProps> = ({ info }: { info: Record<stri
> >
<div style={{display: 'flex', alignItems: 'center', paddingBottom: 10}}> <div style={{display: 'flex', alignItems: 'center', paddingBottom: 10}}>
<span style={{fontWeight: 700, fontSize: 14, paddingRight: 10}}></span> <span style={{fontWeight: 700, fontSize: 14, paddingRight: 10}}></span>
<Tag color="#44AEF5"></Tag> <Tag color="#155BD4"></Tag>
</div> </div>
<ul> <ul>
<li style={listItemStyle}> <li style={listItemStyle}>

@ -1,12 +1,12 @@
import { DictValueEnumObj } from "@/components/DictTag"; import { DictValueEnumObj } from "@/components/DictTag";
import { ProSchemaValueEnumObj, ProSchemaValueEnumType } from "@ant-design/pro-components"; 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) { if (val !== undefined) {
const data = options[val] as ProSchemaValueEnumType; const data = options[val] as ProSchemaValueEnumType;
if(data) { if(data) {
return data.text; return data.text;
} }
} }
return defaultValue?defaultValue:val; return value?value:val;
} }

Loading…
Cancel
Save