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