Yaxin
/
General-AI-Platform-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 项目设置新增告警设置，算力配置模块初始化完成

Browse Source
develop
zhoux 1 year ago
parent d7646773b6
commit 1ed2ce6800
7 changed files with 419 additions and 284 deletions
Show Stats Download Patch File Download Diff File

18
src/global.css
Unescape Escape View File

@ -350,23 +350,7 @@ a.ant-dropdown-trigger {
.gn.themeBgHover:hover { .gn.themeBgHover:hover {
background-color: #155BD4; background-color: #155BD4;
} }
.gn.algorithmSetting_project_box.ant-tabs-top > .ant-tabs-nav::before { .gn.algorithmSetting_project_box .algorithmSetting_mode_box .active .ant-btn-default {
position: absolute;
right: 0;
left: 0;
border-bottom: 1px solid transparent;
content: '';
}
.gn.algorithmSetting_project_box.ant-tabs .ant-tabs-ink-bar {
background: transparent;
}
.gn.algorithmSetting_project_box.ant-tabs .ant-tabs-tab {
padding: 16px 0 0px;
}
.gn.algorithmSetting_project_box.ant-tabs .ant-tabs-tab + .ant-tabs-tab {
margin: 0 0 0 12px;
}
.gn.algorithmSetting_project_box .ant-tabs-tab-active .ant-btn-default {
border: 1px solid #154DDD; border: 1px solid #154DDD;
background: rgba(21, 77, 221, 0.1); background: rgba(21, 77, 221, 0.1);
color: #154DDD; color: #154DDD;

48
src/global.less
Unescape Escape View File

@ -439,30 +439,34 @@ a.ant-dropdown-trigger{
// 项目部署模块 // 项目部署模块
&.algorithmSetting_project_box{ &.algorithmSetting_project_box{
&.ant-tabs-top >.ant-tabs-nav::before {
position: absolute; .algorithmSetting_mode_box{
right: 0; .active {
left: 0; .ant-btn-default{
border-bottom: 1px solid transparent; border: 1px solid #154DDD;
content: ''; background: rgba(21, 77, 221, 0.10);
} color: #154DDD;
&.ant-tabs .ant-tabs-ink-bar{ }
background: transparent;
}
&.ant-tabs .ant-tabs-tab{
padding: 16px 0 0px;
}
&.ant-tabs .ant-tabs-tab+.ant-tabs-tab{
// margin: 0;
margin:0 0 0 12px;
}
& .ant-tabs-tab-active{
.ant-btn-default{
border: 1px solid #154DDD;
background: rgba(21, 77, 221, 0.10);
color: #154DDD;
} }
} }
// &.ant-tabs .ant-tabs-ink-bar{
// background: transparent;
// }
// &.ant-tabs .ant-tabs-tab{
// padding: 16px 0 0px;
// }
// &.ant-tabs .ant-tabs-tab+.ant-tabs-tab{
// // margin: 0;
// margin:0 0 0 12px;
// }
// & .ant-tabs-tab-active{
// .ant-btn-default{
// border: 1px solid #154DDD;
// background: rgba(21, 77, 221, 0.10);
// color: #154DDD;
// }
// }
} }
} }
.ant-pro-global-header-logo img { .ant-pro-global-header-logo img {

7
src/pages/Alarm/AlarmSetting/index.tsx
Unescape Escape View File

@ -25,7 +25,7 @@ const DeviceCategoryList: React.FC = () => {
* */ * */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false); const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
// 告警状态设置 // 告警状态设置
const [alarmStatusModalOpen, setAlarmStatusModalOpen] = useState<boolean>(true); const [alarmStatusModalOpen, setAlarmStatusModalOpen] = useState<boolean>(false);
/** /**
* @en-US The pop-up window of the distribution update window * @en-US The pop-up window of the distribution update window
@ -45,9 +45,6 @@ const DeviceCategoryList: React.FC = () => {
const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]); const [selectedRowsState, setSelectedRows] = useState<API.DeviceCategory[]>([]);
/** /**
// TODO
1. 告警列表-告警级别渲染-操作按钮 2h
// TODO 讨论
1. 告警状态设置 1. 告警状态设置
2. 项目部署告警添加 2. 项目部署告警添加
*/ */
@ -124,7 +121,7 @@ const DeviceCategoryList: React.FC = () => {
dataIndex: 'createTime', dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', // valueType: 'ProFormDateRangePicker',
}, },
{ {
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />, title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,

144
src/pages/ComputePowerAllocation/ComputePowerAllocation.tsx
Unescape Escape View File

@ -62,10 +62,18 @@ const InfoPreview: React.FC<{
const OccupyProportion: React.FC<{ const OccupyProportion: React.FC<{
pools: ComputePowerPoolItem[]; pools: ComputePowerPoolItem[];
}> = ({ pools }) => { }> = ({ pools }) => {
const poolDefault = { const poolDefault = {
processBarOptions: {
buttonOptions: { top: 3, // 矩形左上角在y轴的位置
left: 0, // 矩形左上角在x轴的位置
height: 32, // 矩形的高
stroke: 'transparent', // 边框颜色
strokeWidth: 2, // 边框宽度
rx: 15, // 圆角的横向半径
ry: 15, // 圆角的纵向半径
selectable: false,
},
buttonBgOptions: {
width: 20, width: 20,
height: 40, height: 40,
fill: 'white', // 填充颜色 fill: 'white', // 填充颜色
@ -73,74 +81,135 @@ const OccupyProportion: React.FC<{
left: 0, left: 0,
top: 0, top: 0,
selectable: false, selectable: false,
} hasControls: false,
} },
buttonImageOptions: {
selectable: false,
hasControls: false,
},
buttonGroupOptions: {
width: 20,
height: 40,
top: 0,
lockMovementY: true,
hasControls: false,
// selectable: false,
},
};
const [clipPathData, setClipPathData] = useState({ const [clipPathData, setClipPathData] = useState({
width: 1000, // 宽 width: 1000, // 宽
height: 80, // 高 height: 80, // 高
}); });
const canvasRef = useRef(null); const canvasRef = useRef(null);
const [cvs, setCanvas] = useState(null); const [cvs, setCanvas] = useState(null);
const [rect1Witdh, setRect1Witdh] = useState(pools[0].proportion/100 * clipPathData.width); const [rect1Witdh, setRect1Witdh] = useState((pools[0].proportion / 100) * clipPathData.width);
const [rect2Witdh, setRect2Witdh] = useState((pools[1].proportion / 100) * clipPathData.width);
useEffect(() => { useEffect(() => {
const canvasObject = new fabric.Canvas(canvasRef.current); const canvasObject = new fabric.Canvas(canvasRef.current);
// 整个进度条 底色块
const rect0 = new fabric.Rect({
...poolDefault.processBarOptions,
width: clipPathData.width, // 矩形的宽
fill: '#E5E5E5', // 填充色
});
// 玩手机监控
const rect1 = new fabric.Rect({ const rect1 = new fabric.Rect({
top: 3, // 矩形左上角在y轴的位置 ...poolDefault.processBarOptions,
left: 0, // 矩形左上角在x轴的位置
width: rect1Witdh, // 矩形的宽 width: rect1Witdh, // 矩形的宽
height: 32, // 矩形的高
fill: '#FAA90B', // 填充色 fill: '#FAA90B', // 填充色
stroke: 'transparent', // 边框颜色
strokeWidth: 2, // 边框宽度
rx: 15, // 圆角的横向半径
ry: 15, // 圆角的纵向半径
selectable: false,
}); });
// 创建矩形对象 // 离岗监控
const bgRect1 = new fabric.Rect({ const rect2 = new fabric.Rect({
width: 20, ...poolDefault.processBarOptions,
height: 40, left: rect1Witdh,
fill: 'white', // 填充颜色 width: rect2Witdh, // 矩形的宽
strokeWidth: 2, // 边框宽度 fill: '#3879FE', // 填充色
left: 0,
top: 0,
selectable: false,
hasControls: false,
}); });
// 创建矩形对象
const bgRect1 = new fabric.Rect(poolDefault.buttonBgOptions);
const bgRect2 = new fabric.Rect(poolDefault.buttonBgOptions);
// 添加背景图片到矩形 // 添加背景图片到矩形
fabric.Image.fromURL('/images/computePowerAllocation/slideBtn1.png', function (img) { fabric.Image.fromURL('/images/computePowerAllocation/slideBtn1.png', function (img) {
// 设置图片的宽度和高度为矩形的宽度和高度 // 设置图片的宽度和高度为矩形的宽度和高度
img.set({ width: bgRect1.width, height: bgRect1.height, selectable: false ,hasControls: false}); img.set({ width: bgRect1.width, height: bgRect1.height, ...poolDefault.buttonImageOptions });
// 将图片置于矩形的底部 // 将图片置于矩形的底部
// bgRect1.set({ originX: 'center', originY: 'center' }); // bgRect1.set({ originX: 'center', originY: 'center' });
canvasObject.add( canvasObject.add(
new fabric.Group([bgRect1, img], { new fabric.Group([bgRect1, img], {
width: 20, ...poolDefault.buttonGroupOptions,
height: 40, buttonId: '1',
left: rect1Witdh - 10, left: rect1Witdh - 10,
top: 0, selectable: false,
lockMovementY: true,
hasControls: false,
// selectable: false,
}), }),
); );
// 更新Canvas以应用更改 // 更新Canvas以应用更改
canvasObject.renderAll(); canvasObject.renderAll();
}); });
fabric.Image.fromURL('/images/computePowerAllocation/slideBtn2.png', function (img) {
// 设置图片的宽度和高度为矩形的宽度和高度
img.set({ width: bgRect2.width, height: bgRect2.height, ...poolDefault.buttonImageOptions });
// 将图片置于矩形的底部
// bgRect1.set({ originX: 'center', originY: 'center' });
canvasObject.add(
new fabric.Group([bgRect2, img], {
...poolDefault.buttonGroupOptions,
left: rect1Witdh + 10,
buttonId: '2',
}),
);
// 更新Canvas以应用更改
canvasObject.renderAll();
});
canvasObject.add(rect0);
canvasObject.add(rect1); canvasObject.add(rect1);
canvasObject.add(rect2);
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, 'targetObject', canvasObject.item(0));
canvasObject.item(0).set({ // 算力按钮1
width: targetObject?.left + 10 switch (targetObject.buttonId) {
}) case '1':
// 算力按钮2
if (targetObject?.left >= 960) {
targetObject?.set({
left: 960,
});
}
if (targetObject?.left <= 0) {
targetObject?.set({
left: 0,
});
}
canvasObject.item(1).set({
width: targetObject?.left + 10,
});
canvasObject.item(2).set({
left: targetObject?.left + 10 ,
});
break;
case '2':
// 算力按钮2
if (targetObject?.left >= 980) {
targetObject?.set({
left: 980,
});
}
if (targetObject?.left <= rect1Witdh) {
targetObject?.set({
left: rect1Witdh + 10,
});
}
canvasObject.item(2).set({
width: targetObject?.left -rect1Witdh + 10,
});
break;
}
// set_category_fk_id_open(false); // set_category_fk_id_open(false);
// 检查目标对象是否为组合对象 // 检查目标对象是否为组合对象
setRect1Witdh(targetObject?.left) setRect1Witdh(targetObject?.left);
canvasObject.renderAll(); canvasObject.renderAll();
}); });
canvasObject.renderAll(); canvasObject.renderAll();
@ -159,7 +228,6 @@ const OccupyProportion: React.FC<{
> >
{/* <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" className="occupy_progress"
style={{ style={{

303
src/pages/Setting/AlgorithmSetting.tsx
Unescape Escape View File

@ -7,48 +7,49 @@ import TreeAndTableList, { ProCardTypeProps } from '@/layouts/treeAndTableList';
import { postProjectGetProjectByGroupId } from '@/services/project/Project'; import { postProjectGetProjectByGroupId } from '@/services/project/Project';
import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion'; import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion';
import { FormattedMessage } from '@@/exports'; import { FormattedMessage } from '@@/exports';
import { import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons';
CaretRightOutlined,
DatabaseOutlined,
PauseOutlined,
WarningOutlined,
} from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components'; import type { ActionType } from '@ant-design/pro-components';
import { PageContainer, ProCard, ProDescriptions, ProList } from '@ant-design/pro-components'; import { PageContainer, ProCard, ProDescriptions, ProList } from '@ant-design/pro-components';
import { useAccess, useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Button, Tabs, Tag, message } from 'antd'; import { Button, Empty, Tabs, Tag, message } from 'antd';
import Tree, { DataNode } from 'antd/es/tree'; import Tree, { DataNode } from 'antd/es/tree';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import AlarmSetForm from './components/AlarmSetForm';
import ProjectCard from './components/ProjectCard'; import ProjectCard from './components/ProjectCard';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
const AlgorithmSetting: React.FC = () => { /**默认数据 */
/** type tabModeListProps = {
* @en-US Pop-up window of new window label: string;
* @zh-CN 新建窗口的弹窗 value: string;
* */ };
const tabModeList: tabModeListProps[] = [
{
label: '项目详情',
value: '1',
},
{
label: '告警设置',
value: '2',
},
];
const AlgorithmSetting: React.FC = () => {
/** /**
* @en-US International configuration * @en-US International configuration
* @zh-CN 国际化配置 * @zh-CN 国际化配置
* */ * */
const access = useAccess();
const intl = useIntl(); const intl = useIntl();
const projectCardListRef = useRef<any>(null);
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false); const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [hasInit, setHasInit] = useState<boolean>(false); const [hasInit, setHasInit] = useState<boolean>(false);
const [nodeTreeData, setNodeTreeData] = React.useState<DataNode[]>([]); const [nodeTreeData, setNodeTreeData] = React.useState<DataNode[]>([]);
const [selectNodes, setSelectNodes] = React.useState<any[]>([]); const [selectNodes, setSelectNodes] = React.useState<any[]>([]);
const [currentRow, setCurrentRow] = useState<API.DeviceGroup>(); const [currentRow, setCurrentRow] = useState<API.DeviceGroup>();
const [currentCard, setCurrentCard] = useState();
const [selectedRowsState, setSelectedRows] = useState<API.DeviceGroup[]>([]);
const [tabs, setTabs] = useState([]); const [tabs, setTabs] = useState([]);
const [cardActionProps, setCardActionProps] = useState<'actions' | 'extra'>('extra');
const [modelVersionData, setModelVersionData] = useState<any[]>([]); const [modelVersionData, setModelVersionData] = useState<any[]>([]);
const [projectData, setProjectData] = useState<Record<string, any>>({}); const [projectData, setProjectData] = useState<Record<string, any>>({});
const [targetKeys, setTargetKeys] = useState<string[]>([]);
const [projectConfigId, setProjectConfigId] = useState<number>(0); const [projectConfigId, setProjectConfigId] = useState<number>(0);
const handleUpdateModal = () => { const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
@ -58,23 +59,10 @@ const AlgorithmSetting: React.FC = () => {
setUpdateModalOpen(true); setUpdateModalOpen(true);
} }
}; };
const [modelData, setModelData] = useState<Record<string, any>[]>([]);
const [tab, setTab] = useState<string>(''); const [tab, setTab] = useState<string>('');
// const columns1: ProColumns<API.DeviceGroup>[] = [ const [activeMode, setActiveMode] = useState<string>('1'); // 项目 | 告警
// {
// title: '全选',
// dataIndex: 'name',
// hideInSearch: true,
// },
// ];
const columns = [ const columns = [
// {
// title: <FormattedMessage id="device.device_group.table.list.id" defaultMessage="id" />,
// dataIndex: 'id',
// sorter: true,
// },
{ {
title: <FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />, title: <FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />,
dataIndex: 'name', dataIndex: 'name',
@ -121,48 +109,6 @@ const AlgorithmSetting: React.FC = () => {
dataIndex: 'address', dataIndex: 'address',
hideInSearch: true, hideInSearch: true,
}, },
// {
// title: (
// <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
// ),
// dataIndex: 'telephone',
// hideInSearch: true,
// },
// {
// title: <FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />,
// dataIndex: 'lon',
// hideInSearch: true,
// },
// {
// title: <FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />,
// dataIndex: 'lat',
// hideInSearch: true,
// },
// {
// title: (
// <FormattedMessage id="device.device_group.table.list.managerName" defaultMessage="$$$" />
// ),
// dataIndex: 'managerName',
// hideInSearch: true,
// },
// {
// title: (
// <FormattedMessage id="device.device_group.table.list.managerPhone" defaultMessage="$$$" />
// ),
// dataIndex: 'managerPhone',
// hideInSearch: true,
// },
// {
// title: <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />,
// dataIndex: 'remark',
// hideInSearch: true,
// },
]; ];
// 项目信息展示 // 项目信息展示
@ -175,7 +121,6 @@ const AlgorithmSetting: React.FC = () => {
// TODO 左侧图标目前写死，需替换 // TODO 左侧图标目前写死，需替换
// 操作左侧网点数据节点， 项目列表数据变更 // 操作左侧网点数据节点， 项目列表数据变更
function fetchProjectByGroupId(record: Record<string, any>) { function fetchProjectByGroupId(record: Record<string, any>) {
// console.log('clickTreeNode', projectCardListRef.current)
postProjectGetProjectByGroupId({ id: record.key }).then((resp) => { postProjectGetProjectByGroupId({ id: record.key }).then((resp) => {
let tab_data = (resp?.data?.list || []).map((v: any) => { let tab_data = (resp?.data?.list || []).map((v: any) => {
console.log(resp.data.list); console.log(resp.data.list);
@ -215,56 +160,10 @@ const AlgorithmSetting: React.FC = () => {
</ProCard> </ProCard>
), ),
})); }));
// console.log(88, model_data); setModelData(model_data);
// setProjectData({...projectData, [v.id]: v})
return { return {
label: <Button type="default">{v.name}</Button>, label: v.name,
key: v.id, key: v.id,
children: (
<ProList<any>
style={{
padding: '0px 16px 16px'
}}
className="gn"
ghost={true}
itemCardProps={{
ghost: true,
bodyStyle: { padding: 0, margin: 0 },
}}
pagination={{
defaultPageSize: 6,
showSizeChanger: false,
}}
showActions="hover"
grid={{ gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4 }}
metas={{
type: {},
content: {},
actions: {
cardActionProps,
},
}}
headerTitle="项目模型列表"
toolBarRender={(action, rows) => {
console.log(action, rows, 'toolBarRender');
// TODO 需要对接接口
const isProcess: boolean = false;
const currNode = isProcess ? (
<Button type="primary" danger>
<PauseOutlined style={{ fontSize: 14, lineHeight: 1.5 }} />
结束运行
</Button>
) : (
<Button type="primary">
<CaretRightOutlined style={{ fontSize: 14, lineHeight: 1.5 }} />
开始运行
</Button>
);
return [currNode];
}}
dataSource={model_data}
/>
),
}; };
}); });
if (tab_data.length) { if (tab_data.length) {
@ -277,7 +176,8 @@ const AlgorithmSetting: React.FC = () => {
// TODO 需联调 // TODO 需联调
// 操作项目列表数据类别切换， 项目列表数据变更 // 操作项目列表数据类别切换， 项目列表数据变更
function changeProjectTab(key: React.SetStateAction<string>) { function changeProjectTab(key: React.SetStateAction<string>) {
let model_ids = projectData[key]?.inferConfig?.models || []; console.log('changeProjectTab_key', key);
let model_ids: number[] = projectData[key as string]?.inferConfig?.models || [];
postModelVersionGetModelVersionListByIds({ ids: model_ids }).then((resp) => { postModelVersionGetModelVersionListByIds({ ids: model_ids }).then((resp) => {
let version_model_data = (resp?.data?.list || []).map((item: Record<string, any>) => { let version_model_data = (resp?.data?.list || []).map((item: Record<string, any>) => {
return { return {
@ -316,11 +216,15 @@ const AlgorithmSetting: React.FC = () => {
}; };
}); });
setModelVersionData(version_model_data); setModelVersionData(version_model_data);
console.log(99, modelVersionData); console.log(modelVersionData);
}); });
setTab(key); setTab(key);
} }
// 切换展示 项目|告警
function changeMode(info: tabModeListProps) {
console.log(info, 'changeMode_info');
setActiveMode(info.value);
}
useEffect(() => { useEffect(() => {
postDeviceGroupGetDeviceGroupTree() postDeviceGroupGetDeviceGroupTree()
.then((resp) => { .then((resp) => {
@ -333,7 +237,7 @@ const AlgorithmSetting: React.FC = () => {
}, []); }, []);
return ( return (
<PageContainer> <PageContainer className="algorithmSetting_project_box gn">
<TreeAndTableList <TreeAndTableList
leftCard={ leftCard={
{ {
@ -360,12 +264,12 @@ const AlgorithmSetting: React.FC = () => {
) )
} }
rightDom={ rightDom={
<div className="gn"> <>
<ProCard <ProCard
title="网点详细信息" title="网点详细信息"
headStyle={{ borderBottom: '1px solid #E0E0E0', padding: '0px 16px 16px'}} headStyle={{ borderBottom: '1px solid #E0E0E0', padding: '0px 16px 16px' }}
style={{ background: 'transparent', paddingTop: 16 }} style={{ background: 'transparent', paddingTop: 16 }}
bodyStyle={{ padding: '16px 16px 0px' }} bodyStyle={{ padding: '16px 16px 0px' }}
colSpan="80%" colSpan="80%"
> >
<ProDescriptions <ProDescriptions
@ -374,54 +278,103 @@ const AlgorithmSetting: React.FC = () => {
columns={columns} columns={columns}
></ProDescriptions> ></ProDescriptions>
</ProCard> </ProCard>
{/* tabs={{ {tabs?.length ? (
activeKey: tab, <>
items: tabs, <Tabs
onChange: (key) => { activeKey={tab}
changeProjectTab(key); items={tabs}
}, onChange={(key) => {
}} */} changeProjectTab(key);
}}
></Tabs>
<ProCard bodyStyle={{ padding: 0, margin: 0 }} style={{ padding: 0, margin: 0 }}>
<ul
className="algorithmSetting_mode_box"
style={{ display: 'flex', padding: '0 16px', margin: 0 }}
>
{tabModeList.map((item) => {
return (
<li
key={item.value}
className={item.value === activeMode ? 'active' : ''}
onClick={() => changeMode(item)}
style={{
padding: '16px 12px 0 0',
}}
>
<Button type="default">{item.label}</Button>
</li>
);
})}
</ul>
<Tabs {/* 项目 */}
items={[ {activeMode === '1' ? (
{
key: '1',
label: (
<> <>
<DatabaseOutlined></DatabaseOutlined> <span>项目</span> <div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '16px 16px 3px',
}}
>
<span style={{ fontSize: 16, fontWeight: 700 }}>模型列表</span>
{/* // TODO 需要对接接口 */}
{false ? (
<Button type="primary" danger>
<PauseOutlined style={{ fontSize: 14, lineHeight: 1.5 }} />
结束运行
</Button>
) : (
<Button type="primary">
<CaretRightOutlined style={{ fontSize: 14, lineHeight: 1.5 }} />
开始运行
</Button>
)}
</div>
<ProList<any>
style={{
padding: '0px 16px 16px',
}}
className="gn"
ghost={true}
itemCardProps={{
ghost: true,
bodyStyle: { padding: 0, margin: 0 },
}}
pagination={{
defaultPageSize: 6,
showSizeChanger: false,
}}
showActions="hover"
grid={{ gutter: 8, xs: 1, md: 2, xl: 3, xxl: 4 }}
metas={{
type: {},
content: {},
actions: {
cardActionProps: 'extra',
},
}}
dataSource={modelData}
/>
</> </>
), ) : (
children: ( <div style={{ padding: 16 }}>
<Tabs {' '}
className='gn algorithmSetting_project_box' <AlarmSetForm></AlarmSetForm>
type={'line'} </div>
activeKey={tab} )}
items={tabs} </ProCard>
onChange={(key) => { </>
changeProjectTab(key); ) : (
}} <>
></Tabs> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
), </>
}, )}
{ </>
key: '2',
label: (
<>
<WarningOutlined></WarningOutlined>
<span>告警</span>
</>
),
children: (<ProCard style={{padding: 0, margin: 0}} bodyStyle={{padding: 16}}>告警部分</ProCard>),
},
]}
/>
</div>
} }
></TreeAndTableList> ></TreeAndTableList>
{/* <ProCard split="vertical">
<ProCard title="网点选择" colSpan="24%" bodyStyle={{ padding: 0, margin: 0 }}></ProCard>
<ProCard title="" headerBordered split={'horizontal'}></ProCard>
</ProCard> */}
<UpdateForm <UpdateForm
projectData={projectData as Record<string, any>} projectData={projectData as Record<string, any>}
updateModalOpen={updateModalOpen} updateModalOpen={updateModalOpen}

133
src/pages/Setting/components/AlarmSetForm.tsx
Unescape Escape View File

@ -0,0 +1,133 @@
import {
ProForm,
ProFormCheckbox,
ProFormDependency,
ProFormGroup,
ProFormList,
ProFormRadio,
ProFormSelect,
ProFormSwitch,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import type { NamePath } from 'antd/lib/form/interface';
import { useEffect } from 'react';
type AlarmSetFormProps = {
values?: Record<string, any>;
};
const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
const [form] = Form.useForm<API.DeviceCategory>();
const initialValues = {
label: 1,
value: 2,
};
const depName1: NamePath[] = [['ways']];
useEffect(() => {
form.setFieldValue('ways', [
{
label: '短信',
value: [],
isChecked: true,
},
{
label: '邮件',
value: [],
isChecked: false,
},
]);
}, []);
return (
// TODO 模拟提交告警设置
<ProForm form={form} initialValues={initialValues} >
<ProFormGroup>
<ProFormGroup title="通知方式">
<ProFormList
name={['ways']}
creatorButtonProps={false}
copyIconProps={false}
deleteIconProps={false}
>
{(f, index, action) => {
console.log('isChecked_value', f, index, action);
return (
<ProFormGroup key="group">
{/* <Checkbox checked={false}>
{form.getFieldValue('ways')[index].label}{' '}
</Checkbox> */}
<ProFormSwitch name="isChecked"></ProFormSwitch>
<ProFormCheckbox.Group name="isChecked">
{form.getFieldValue('ways')[index].label}
</ProFormCheckbox.Group>
<ProFormDependency name={['isChecked']}>
{({ isChecked }) => {
return (
<ProFormSelect
mode="multiple"
name="value"
debounceTime={1000}
disabled={!isChecked}
request={async () => {
// const resp = await postCurrentIP();
const resp = ['test001', 'test002', 'test003'];
return resp?.map((v: any) => {
return {
label: v,
value: v,
};
});
}}
/>
);
}}
</ProFormDependency>
{/* <ProFormText
name="value"
/> */}
</ProFormGroup>
);
}}
</ProFormList>
</ProFormGroup>
</ProFormGroup>
{/* <ProFormGroup
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'}
options={[
{
label: '每次',
value: '0',
},
{
label: '每天',
value: '1',
},
{
label: '每周',
value: '2',
},
{
label: '每月',
value: '3',
},
]}
></ProFormRadio.Group>
</ProFormGroup>
</ProForm>
);
};
export default AlarmSetForm;

50
src/pages/Setting/components/UpdateForm.tsx
Unescape Escape View File

@ -14,12 +14,9 @@ import {
ProFormText, ProFormText,
StepsForm, StepsForm,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { FormListActionType } from '@ant-design/pro-form/lib';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Modal, message } from 'antd'; import { Modal, message } from 'antd';
import type { ColumnsType } from 'antd/es/table/interface'; import React, { useEffect, useState } from 'react';
import type { TransferItem, TransferProps } from 'antd/es/transfer';
import React, { useEffect, useRef, useState } from 'react';
import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../config/defaultForm'; import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../config/defaultForm';
/**styles */ /**styles */
@ -37,23 +34,22 @@ const modelFormAreaStyles: React.CSSProperties | undefined = {
padding: 15, padding: 15,
marginBottom: 12, marginBottom: 12,
border: '1px solid', border: '1px solid',
borderColor: 'rgba(219, 219, 219,0.4)' borderColor: 'rgba(219, 219, 219,0.4)',
}; };
interface DataType extends API.Device { interface DataType extends API.Device {
key: string; key: string;
} }
interface ProjectModelConfigById { // interface ProjectModelConfigById {
configId: number; // configId: number;
} // }
interface TableTransferProps extends TransferProps<TransferItem> { // interface TableTransferProps extends TransferProps<TransferItem> {
dataSource: DataType[]; // dataSource: DataType[];
leftColumns: ColumnsType<DataType>; // leftColumns: ColumnsType<DataType>;
rightColumns: ColumnsType<DataType>; // rightColumns: ColumnsType<DataType>;
} // }
export type UpdateFormProps = { export type UpdateFormProps = {
updateModalOpen: boolean; updateModalOpen: boolean;
@ -73,7 +69,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const [configData, setConfigData] = useState<any>([]); const [configData, setConfigData] = useState<any>([]);
const [addrValue, setAddr] = useState(''); // const [addrValue, setAddr] = useState('');
const [projectModelConfig, setProjectModelConfig] = useState<API.ProjectModelConfig>({}); const [projectModelConfig, setProjectModelConfig] = useState<API.ProjectModelConfig>({});
const [configResult, setConfigResult] = useState<API.ProjectModelConfig>({}); const [configResult, setConfigResult] = useState<API.ProjectModelConfig>({});
const [deviceData, setDeviceData] = useState<DataType[]>([]); const [deviceData, setDeviceData] = useState<DataType[]>([]);
@ -98,11 +94,11 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
// } // }
// }, [selectValue]); // }, [selectValue]);
const actionFormListRef = useRef< // const actionFormListRef = useRef<
FormListActionType<{ // FormListActionType<{
name: string; // name: string;
}> // }>
>(); // >();
// 获取默认渲染项 // 获取默认渲染项
@ -139,9 +135,9 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
} else { } else {
} }
}, [props.updateModalOpen]); }, [props.updateModalOpen]);
const handleChange = (newTargetKeys: string[]) => { // const handleChange = (newTargetKeys: string[]) => {
setTargetKeys(newTargetKeys); // setTargetKeys(newTargetKeys);
}; // };
return ( return (
<StepsForm<{ <StepsForm<{
name: string; name: string;
@ -152,7 +148,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
current={current} current={current}
onCurrentChange={(value) => { onCurrentChange={(value) => {
setCurrent(value); setCurrent(value);
if (value == 1) { if (value === 1) {
postDeviceGetAllDeviceByGroup({ id: props.groupId }).then((resp) => { postDeviceGetAllDeviceByGroup({ id: props.groupId }).then((resp) => {
setDeviceData( setDeviceData(
(resp.data?.list || []).map((v: API.Device) => { (resp.data?.list || []).map((v: API.Device) => {
@ -162,7 +158,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}); });
} }
}} }}
onFinish={async (values) => { onFinish={async () => {
setCurrent(0); setCurrent(0);
return true; return true;
}} }}
@ -418,11 +414,11 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
stepProps={{ stepProps={{
description: '设备关联配置', description: '设备关联配置',
}} }}
onFinish={async (values: any) => { onFinish={async () => {
configResult.devices = targetKeys.join(','); configResult.devices = targetKeys.join(',');
configResult.id = props.projectModelConfigId; configResult.id = props.projectModelConfigId;
putProjectModelConfigUpdateProjectModelConfig(configResult) putProjectModelConfigUpdateProjectModelConfig(configResult)
.then((resp) => { .then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
props.handleModal(); props.handleModal();
props.reload(); props.reload();

Write Preview
Loading…
Cancel
Save