|
|
import {
|
|
|
postDeviceGroupGetDeviceGroupList,
|
|
|
postDeviceGroupGetDeviceGroupTree
|
|
|
} from '@/services/device/DeviceGroup';
|
|
|
|
|
|
import {PlusOutlined, RedoOutlined} from '@ant-design/icons';
|
|
|
import type {ActionType} from '@ant-design/pro-components';
|
|
|
import {
|
|
|
PageContainer, ProCard, ProColumns, ProDescriptions, ProList, ProTable
|
|
|
} from '@ant-design/pro-components';
|
|
|
import {useIntl, useAccess} from '@umijs/max';
|
|
|
import {Button, message, Tag, Tree} from 'antd';
|
|
|
import React, {useEffect, useRef, useState} from 'react';
|
|
|
import {DataNode} from "antd/es/tree";
|
|
|
import {Access, FormattedMessage, history} from "@@/exports";
|
|
|
import {postGetProjectByGroupId} from "@/services/project/Project";
|
|
|
import {postModelVersionGetModelVersionListByIds} from "@/services/resource/ModelVersion";
|
|
|
import {dateFormat} from "@/utils/common";
|
|
|
import UpdateForm from "./components/UpdateForm";
|
|
|
|
|
|
|
|
|
const AlgorithmSetting: React.FC = () => {
|
|
|
/**
|
|
|
* @en-US Pop-up window of new window
|
|
|
* @zh-CN 新建窗口的弹窗
|
|
|
* */
|
|
|
|
|
|
/**
|
|
|
* @en-US International configuration
|
|
|
* @zh-CN 国际化配置
|
|
|
* */
|
|
|
const access = useAccess();
|
|
|
const intl = useIntl();
|
|
|
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<API.DeviceModelInGroup>();
|
|
|
|
|
|
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<any>({});
|
|
|
|
|
|
const handleUpdateModal = ()=>{
|
|
|
if (updateModalOpen) {
|
|
|
setUpdateModalOpen(false)
|
|
|
setCurrentCard(undefined)
|
|
|
} else {
|
|
|
setUpdateModalOpen(true)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const data = [
|
|
|
'苏胜天人物识别算法',
|
|
|
'苏胜天交警识别识别',
|
|
|
'苏胜天车牌识别算法',
|
|
|
'苏胜天语音识别算法',
|
|
|
'苏胜天轨迹识别算法',
|
|
|
].map((item) => ({
|
|
|
title: '苏胜天算法模型',
|
|
|
subTitle: <Tag color="#5BD8A6">经典算法</Tag>,
|
|
|
actions: [<a key="run">模型版本选择</a>],
|
|
|
avatar:
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
|
|
|
content: (
|
|
|
<div
|
|
|
style={{
|
|
|
display: "flex",
|
|
|
flexDirection: "column",
|
|
|
alignItems: 'center',
|
|
|
width: '100%'
|
|
|
}}
|
|
|
>
|
|
|
<div style={{fontSize: '24px', fontWeight: 'bold'}}>{item}</div>
|
|
|
<div><img src="/images/model.png" alt="" style={{width: '160px'}}/></div>
|
|
|
<div>版本：<span style={{fontSize: 18, fontWeight: "bold"}}>V1.2.4</span></div>
|
|
|
<div>更新时间：<span style={{fontSize: 18, fontWeight: "bold"}}>2022-12-12</span></div>
|
|
|
</div>
|
|
|
),
|
|
|
}));
|
|
|
|
|
|
const [tab, setTab] = useState('');
|
|
|
const columns1: ProColumns<API.DeviceGroup>[] = [
|
|
|
{
|
|
|
title: (<FormattedMessage
|
|
|
id="device.device_group.table.list.name"
|
|
|
defaultMessage="$$$"/>),
|
|
|
dataIndex: "name",
|
|
|
hideInSearch: true,
|
|
|
},
|
|
|
|
|
|
];
|
|
|
|
|
|
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",
|
|
|
hideInSearch: true,
|
|
|
},
|
|
|
|
|
|
|
|
|
{
|
|
|
title: (<FormattedMessage
|
|
|
id="device.device_group.table.list.code"
|
|
|
defaultMessage="$$$"/>),
|
|
|
dataIndex: "code",
|
|
|
hideInSearch: true,
|
|
|
},
|
|
|
|
|
|
|
|
|
{
|
|
|
title: (<FormattedMessage
|
|
|
id="device.device_group.table.list.address"
|
|
|
defaultMessage="$$$"/>),
|
|
|
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.isEnable"
|
|
|
defaultMessage="$$$"/>),
|
|
|
dataIndex: "isEnable",
|
|
|
filters: true, onFilter: true,
|
|
|
hideInSearch: true,
|
|
|
valueType: 'switch',
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: (<FormattedMessage
|
|
|
id="device.device_group.table.list.remark"
|
|
|
defaultMessage="$$$"/>),
|
|
|
dataIndex: "remark",
|
|
|
hideInSearch: true,
|
|
|
},
|
|
|
|
|
|
|
|
|
{
|
|
|
title: (<FormattedMessage
|
|
|
id="device.device_group.table.list.createTime"
|
|
|
defaultMessage="$$$"/>),
|
|
|
dataIndex: "createTime",
|
|
|
sorter: true,
|
|
|
hideInSearch: true,
|
|
|
valueType: 'dateTime',
|
|
|
},
|
|
|
|
|
|
|
|
|
{
|
|
|
title: (<FormattedMessage
|
|
|
id="device.device_group.table.list.updateTime"
|
|
|
defaultMessage="$$$"/>),
|
|
|
dataIndex: "updateTime",
|
|
|
sorter: true,
|
|
|
hideInSearch: true,
|
|
|
valueType: 'dateTime',
|
|
|
},
|
|
|
];
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
|
|
|
|
postDeviceGroupGetDeviceGroupTree().then((resp) => {
|
|
|
setNodeTreeData(resp.data.tree)
|
|
|
setHasInit(true)
|
|
|
}).catch(() => {
|
|
|
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
|
|
})
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
<PageContainer>
|
|
|
<ProCard split="vertical">
|
|
|
<ProCard title="网点选择" colSpan="30%" extra={<Button icon={<RedoOutlined/>} onClick={() => {
|
|
|
setSelectNodes([]);
|
|
|
actionRef.current?.reload()
|
|
|
}}>重置</Button>}>
|
|
|
<ProTable<API.DeviceGroup>
|
|
|
headerTitle={intl.formatMessage({
|
|
|
id: 'pages.searchTable.title',
|
|
|
defaultMessage: '$$$',
|
|
|
})}
|
|
|
options={{search: true, fullScreen: false, setting: false, density: false, reload: false}}
|
|
|
actionRef={actionRef}
|
|
|
search={false}
|
|
|
rowKey="key"
|
|
|
onRow={(record) => {
|
|
|
return {
|
|
|
onClick: () => {
|
|
|
if (record.id) {
|
|
|
setCurrentRow(record);
|
|
|
|
|
|
postGetProjectByGroupId({id: record.id}).then((resp) => {
|
|
|
let tab_data = (resp?.data?.list || []).map((v: any) => {
|
|
|
let model_data = (v?.models || []).map((item: any) => ({
|
|
|
title: '苏胜天算法模型',
|
|
|
subTitle: <Tag color="#5BD8A6">经典算法</Tag>,
|
|
|
actions: [<a key={item.id} onClick={()=>{
|
|
|
setCurrentCard({groupFkId: record.id, modelFkId: item.id})
|
|
|
handleUpdateModal()
|
|
|
}}>绑定设备</a>],
|
|
|
avatar:
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
|
|
|
|
|
|
content: (
|
|
|
<div
|
|
|
style={{
|
|
|
display: "flex",
|
|
|
flexDirection: "column",
|
|
|
alignItems: 'center',
|
|
|
width: '100%'
|
|
|
}}
|
|
|
>
|
|
|
<div style={{fontSize: '24px', fontWeight: 'bold'}}>{item.name}</div>
|
|
|
<div><img src="/images/model.png" alt="" style={{width: '160px'}}/></div>
|
|
|
<div>版本：<span style={{fontSize: 18, fontWeight: "bold"}}>{item.remark}</span></div>
|
|
|
<div>更新时间：<span style={{fontSize: 18, fontWeight: "bold"}}>{dateFormat(item.updateTime)}</span></div>
|
|
|
</div>
|
|
|
)
|
|
|
}));
|
|
|
console.log(88, model_data, data)
|
|
|
// setProjectData({...projectData, [v.id]: v})
|
|
|
return {
|
|
|
label: `项目：${v.name}`,
|
|
|
key: v.id,
|
|
|
children: (<ProList<any>
|
|
|
ghost={true}
|
|
|
itemCardProps={{
|
|
|
ghost: true,
|
|
|
}}
|
|
|
pagination={{
|
|
|
defaultPageSize: 8,
|
|
|
showSizeChanger: false,
|
|
|
}}
|
|
|
showActions="hover"
|
|
|
grid={{ gutter: 8, column: 4 }}
|
|
|
metas={{
|
|
|
title: {},
|
|
|
subTitle: {},
|
|
|
type: {},
|
|
|
avatar: {},
|
|
|
content: {},
|
|
|
actions: {
|
|
|
cardActionProps,
|
|
|
},
|
|
|
}}
|
|
|
headerTitle="项目模型列表"
|
|
|
dataSource={model_data}
|
|
|
/>),
|
|
|
|
|
|
|
|
|
}
|
|
|
})
|
|
|
if (tab_data.length) {
|
|
|
setTab(tab_data[0].key)
|
|
|
}
|
|
|
setTabs(tab_data)
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
}}
|
|
|
pagination={{
|
|
|
showSizeChanger: false,
|
|
|
pageSize: 10,
|
|
|
}}
|
|
|
columnsState={{
|
|
|
persistenceKey: 'device_group_list',
|
|
|
persistenceType: 'localStorage'
|
|
|
}}
|
|
|
request={async (params = {}, sort) => {
|
|
|
const {current, ...rest} = params
|
|
|
const reqParams = {
|
|
|
page: current,
|
|
|
desc: false,
|
|
|
orderKey: "",
|
|
|
...rest,
|
|
|
}
|
|
|
if (sort && Object.keys(sort).length) {
|
|
|
reqParams.orderKey = Object.keys(sort)[0]
|
|
|
let sort_select = sort[reqParams.orderKey]
|
|
|
reqParams.desc = sort_select === 'descend';
|
|
|
}
|
|
|
let resp = await postDeviceGroupGetDeviceGroupList({...reqParams, name: params?.keyword || ''})
|
|
|
return {
|
|
|
data: resp.data.list.map((v: API.DeviceGroup)=>{
|
|
|
return {...v, key: v.id}
|
|
|
}),
|
|
|
success: resp.success,
|
|
|
total: resp.data.total,
|
|
|
current: resp.data.page,
|
|
|
pageSize: resp.data.pageSize
|
|
|
};
|
|
|
|
|
|
}}
|
|
|
columns={columns1}
|
|
|
rowSelection={{
|
|
|
onChange: (_, selectedRows) => {
|
|
|
// setSelectedRows(selectedRows);
|
|
|
},
|
|
|
}}
|
|
|
/>
|
|
|
</ProCard>
|
|
|
<ProCard title="" colSpan="70%" headerBordered split={'horizontal'}>
|
|
|
<ProCard>
|
|
|
<ProDescriptions
|
|
|
column={2}
|
|
|
dataSource={currentRow}
|
|
|
title="网点详细信息"
|
|
|
tooltip="包含了从服务器请求，columns等功能"
|
|
|
columns={columns}
|
|
|
>
|
|
|
</ProDescriptions>
|
|
|
</ProCard>
|
|
|
|
|
|
<ProCard
|
|
|
tabs={{
|
|
|
activeKey: tab,
|
|
|
items: tabs,
|
|
|
onChange: (key) => {
|
|
|
let model_ids = projectData[key]?.inferConfig?.models || []
|
|
|
postModelVersionGetModelVersionListByIds({ids: model_ids}).then((resp)=>{
|
|
|
let version_model_data = (resp?.data?.list || []).map((item) => {
|
|
|
return {
|
|
|
title: '苏胜天算法模型',
|
|
|
subTitle: <Tag color="#5BD8A6">经典算法</Tag>,
|
|
|
actions: [<a key="run" onClick={()=>{handleUpdateModal()}}>模型版本选择</a>],
|
|
|
avatar:
|
|
|
'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
|
|
|
content: (
|
|
|
<div
|
|
|
style={{
|
|
|
display: "flex",
|
|
|
flexDirection: "column",
|
|
|
alignItems: 'center',
|
|
|
width: '100%'
|
|
|
}}
|
|
|
>
|
|
|
<div style={{fontSize: '24px', fontWeight: 'bold'}}>{item}</div>
|
|
|
<div><img src="/images/model.png" alt="" style={{width: '160px'}}/></div>
|
|
|
<div>版本：<span style={{fontSize: 18, fontWeight: "bold"}}>V1.2.4</span></div>
|
|
|
<div>更新时间：<span style={{fontSize: 18, fontWeight: "bold"}}>2022-12-12</span></div>
|
|
|
</div>
|
|
|
),
|
|
|
}
|
|
|
});
|
|
|
setModelVersionData(version_model_data)
|
|
|
console.log(99, modelVersionData)
|
|
|
})
|
|
|
setTab(key);
|
|
|
},
|
|
|
}}
|
|
|
></ProCard>
|
|
|
|
|
|
</ProCard>
|
|
|
</ProCard>
|
|
|
<UpdateForm
|
|
|
updateModalOpen={updateModalOpen}
|
|
|
values={currentCard || {}}
|
|
|
handleModal={handleUpdateModal}
|
|
|
reload={actionRef.current?.reload}
|
|
|
/>
|
|
|
</PageContainer>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default AlgorithmSetting;
|