|
|
|
@ -1,10 +1,9 @@
|
|
|
|
import TableActionCard from '@/components/TableActionCard';
|
|
|
|
import TableActionCard from '@/components/TableActionCard';
|
|
|
|
import IsDelete from '@/components/TableActionCard/isDelete';
|
|
|
|
import { getPlatform } from '@/services/realTime/interfaces';
|
|
|
|
import { getInterfaces, postInterfaces } from '@/services/realTime/interfaces';
|
|
|
|
|
|
|
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
|
|
|
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
|
|
|
import { PageContainer, ProCard, ProTable } from '@ant-design/pro-components';
|
|
|
|
import { PageContainer, ProCard, ProTable } from '@ant-design/pro-components';
|
|
|
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
|
|
|
import { FormattedMessage } from '@umijs/max';
|
|
|
|
import { Button, message } from 'antd';
|
|
|
|
import { Button } from 'antd';
|
|
|
|
import React, { useRef, useState } from 'react';
|
|
|
|
import React, { useRef, useState } from 'react';
|
|
|
|
import { proTablePaginationOptions } from '../../../../config/defaultTable';
|
|
|
|
import { proTablePaginationOptions } from '../../../../config/defaultTable';
|
|
|
|
import CaptureButton from './components/CaptureButton';
|
|
|
|
import CaptureButton from './components/CaptureButton';
|
|
|
|
@ -13,29 +12,30 @@ import './components/CaptureForm.less';
|
|
|
|
import CreateForm from './components/CreateForm';
|
|
|
|
import CreateForm from './components/CreateForm';
|
|
|
|
import UpdateForm from './components/UpdateForm';
|
|
|
|
import UpdateForm from './components/UpdateForm';
|
|
|
|
// svg 转组件
|
|
|
|
// svg 转组件
|
|
|
|
import { ReactComponent as Details } from '../../../../public/images/icons/details.svg';
|
|
|
|
// import { ReactComponent as Details } from '../../../../public/images/icons/details.svg';
|
|
|
|
// import { ReactComponent as Delete } from '../../../../public/images/icons/delete.svg';
|
|
|
|
// import { ReactComponent as Delete } from '../../../../public/images/icons/delete.svg';
|
|
|
|
|
|
|
|
import { EditOutlined } from '@ant-design/icons';
|
|
|
|
import { ReactComponent as Capture } from '../../../../public/images/icons/capture.svg';
|
|
|
|
import { ReactComponent as Capture } from '../../../../public/images/icons/capture.svg';
|
|
|
|
const DeviceList: React.FC = () => {
|
|
|
|
const DeviceList: React.FC = () => {
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* @en-US International configuration
|
|
|
|
* @en-US International configuration
|
|
|
|
* @zh-CN 国际化配置
|
|
|
|
* @zh-CN 国际化配置
|
|
|
|
* */
|
|
|
|
* */
|
|
|
|
const intl = useIntl();
|
|
|
|
// const intl = useIntl();
|
|
|
|
const actionRef = useRef<ActionType>();
|
|
|
|
const actionRef = useRef<ActionType>();
|
|
|
|
// 动态设置每页数量
|
|
|
|
// 动态设置每页数量
|
|
|
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
|
|
|
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
|
|
|
|
|
|
|
|
|
|
|
const handleDestroy = async (selectedRow: API.UpdateInterfacesParams) => {
|
|
|
|
// const handleDestroy = async (selectedRow: API.UpdateInterfacesParams) => {
|
|
|
|
postInterfaces({ id: selectedRow.id, device_status: '3' })
|
|
|
|
// postInterfaces({ id: selectedRow.id, device_status: '3' })
|
|
|
|
.then(() => {
|
|
|
|
// .then(() => {
|
|
|
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
|
|
|
// message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '成功' }));
|
|
|
|
actionRef.current?.reload();
|
|
|
|
// actionRef.current?.reload();
|
|
|
|
})
|
|
|
|
// })
|
|
|
|
.catch(() => {
|
|
|
|
// .catch(() => {
|
|
|
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
|
|
|
// message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '失败' }));
|
|
|
|
});
|
|
|
|
// });
|
|
|
|
};
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
|
|
const [currentRow, setCurrentRow] = useState<API.UpdateInterfacesParams>();
|
|
|
|
const [currentRow, setCurrentRow] = useState<API.UpdateInterfacesParams>();
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
@ -75,34 +75,40 @@ const DeviceList: React.FC = () => {
|
|
|
|
setCaptureModalOpen(true);
|
|
|
|
setCaptureModalOpen(true);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
const columns: ProColumns<API.UpdateInterfacesParams>[] = [
|
|
|
|
const expandedRowRender = (record: any) => {
|
|
|
|
|
|
|
|
console.log(record, 'record');
|
|
|
|
|
|
|
|
const data = record.devices;
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<ProTable
|
|
|
|
|
|
|
|
className="table_body_bg"
|
|
|
|
|
|
|
|
cardProps={{
|
|
|
|
|
|
|
|
bodyStyle: {
|
|
|
|
|
|
|
|
margin: 0,
|
|
|
|
|
|
|
|
padding: 0,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
rowKey={(record) => record.id}
|
|
|
|
|
|
|
|
columns={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: (
|
|
|
|
title: (
|
|
|
|
<FormattedMessage id="device.interface_manage.table.list.name" defaultMessage="接口名称" />
|
|
|
|
<FormattedMessage
|
|
|
|
|
|
|
|
id="device.interface_manage.table.list.name"
|
|
|
|
|
|
|
|
defaultMessage="接口名称"
|
|
|
|
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
),
|
|
|
|
dataIndex: 'device_name',
|
|
|
|
dataIndex: 'device_name',
|
|
|
|
hideInSearch: true,
|
|
|
|
hideInSearch: true,
|
|
|
|
|
|
|
|
// width: 150,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: <FormattedMessage id="alarm_rules.page.status" defaultMessage="设备状态" />,
|
|
|
|
title: <FormattedMessage id="alarm_rules.page.status" defaultMessage="设备状态" />,
|
|
|
|
dataIndex: 'test_result',
|
|
|
|
dataIndex: 'test_result',
|
|
|
|
hideInSearch: true,
|
|
|
|
hideInSearch: true,
|
|
|
|
|
|
|
|
// width: 280,
|
|
|
|
render: (dom, entity) => {
|
|
|
|
render: (dom, entity) => {
|
|
|
|
return <CaptureButton values={entity || {}} reload={actionRef.current?.reload} />;
|
|
|
|
return <CaptureButton values={entity || {}} reload={actionRef.current?.reload} />;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// {
|
|
|
|
|
|
|
|
// title: <FormattedMessage id="device.interface_manage.table.list.address" defaultMessage="接口地址" />,
|
|
|
|
|
|
|
|
// dataIndex: 'device_api',
|
|
|
|
|
|
|
|
// hideInSearch: true,
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// title: <FormattedMessage id="device.interface_manage.table.list.testTime" defaultMessage="状态查询时间" />,
|
|
|
|
|
|
|
|
// dataIndex: 'test_time',
|
|
|
|
|
|
|
|
// sorter: true,
|
|
|
|
|
|
|
|
// hideInSearch: true,
|
|
|
|
|
|
|
|
// valueType: 'dateTime',
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: (
|
|
|
|
title: (
|
|
|
|
<FormattedMessage
|
|
|
|
<FormattedMessage
|
|
|
|
@ -110,6 +116,7 @@ const DeviceList: React.FC = () => {
|
|
|
|
defaultMessage="创建时间"
|
|
|
|
defaultMessage="创建时间"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
),
|
|
|
|
|
|
|
|
// width: 200,
|
|
|
|
dataIndex: 'create_time',
|
|
|
|
dataIndex: 'create_time',
|
|
|
|
sorter: true,
|
|
|
|
sorter: true,
|
|
|
|
hideInSearch: true,
|
|
|
|
hideInSearch: true,
|
|
|
|
@ -120,7 +127,7 @@ const DeviceList: React.FC = () => {
|
|
|
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
|
|
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
|
|
|
dataIndex: 'option',
|
|
|
|
dataIndex: 'option',
|
|
|
|
valueType: 'option',
|
|
|
|
valueType: 'option',
|
|
|
|
width: '260px',
|
|
|
|
// width: 100,
|
|
|
|
fixed: 'right',
|
|
|
|
fixed: 'right',
|
|
|
|
render: (_, record) => [
|
|
|
|
render: (_, record) => [
|
|
|
|
<TableActionCard
|
|
|
|
<TableActionCard
|
|
|
|
@ -166,31 +173,116 @@ const DeviceList: React.FC = () => {
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
),
|
|
|
|
),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
></TableActionCard>,
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
headerTitle={false}
|
|
|
|
|
|
|
|
search={false}
|
|
|
|
|
|
|
|
options={false}
|
|
|
|
|
|
|
|
dataSource={data}
|
|
|
|
|
|
|
|
pagination={false}
|
|
|
|
|
|
|
|
showHeader={false}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const columns: ProColumns<API.UpdateInterfacesParams>[] = [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: (
|
|
|
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
|
|
|
id="device.interface_manage.table.list.platform_name"
|
|
|
|
|
|
|
|
defaultMessage="设备名称"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
dataIndex: 'platform_name',
|
|
|
|
|
|
|
|
hideInSearch: true,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: (
|
|
|
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
|
|
|
id="device.interface_manage.table.list.statusUpdate"
|
|
|
|
|
|
|
|
defaultMessage="最近一次状态查询"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
dataIndex: 'test_result',
|
|
|
|
|
|
|
|
hideInSearch: true,
|
|
|
|
|
|
|
|
render: (dom, entity) => {
|
|
|
|
|
|
|
|
return <CaptureButton values={entity || {}} reload={actionRef.current?.reload} />;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: (
|
|
|
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
|
|
|
id="device.interface_manage.table.list.createTime"
|
|
|
|
|
|
|
|
defaultMessage="创建时间"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
dataIndex: 'create_time',
|
|
|
|
|
|
|
|
sorter: true,
|
|
|
|
|
|
|
|
hideInSearch: true,
|
|
|
|
|
|
|
|
valueType: 'dateTime',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
{
|
|
|
|
key: 'update',
|
|
|
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
|
|
|
|
|
|
|
|
dataIndex: 'option',
|
|
|
|
|
|
|
|
valueType: 'option',
|
|
|
|
|
|
|
|
width: '300px',
|
|
|
|
|
|
|
|
fixed: 'right',
|
|
|
|
|
|
|
|
render: (_, record) => [
|
|
|
|
|
|
|
|
<TableActionCard
|
|
|
|
|
|
|
|
key="TableActionCardRef"
|
|
|
|
|
|
|
|
renderActions={[
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'capture',
|
|
|
|
renderDom: (
|
|
|
|
renderDom: (
|
|
|
|
|
|
|
|
// <Button
|
|
|
|
|
|
|
|
// key="capture"
|
|
|
|
|
|
|
|
// type="link"
|
|
|
|
|
|
|
|
// size="small"
|
|
|
|
|
|
|
|
// style={{
|
|
|
|
|
|
|
|
// color: '#004FB2',
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
// icon={
|
|
|
|
|
|
|
|
// <Capture
|
|
|
|
|
|
|
|
// style={{
|
|
|
|
|
|
|
|
// marginRight: 3,
|
|
|
|
|
|
|
|
// display: 'inline-flex',
|
|
|
|
|
|
|
|
// alignItems: 'center',
|
|
|
|
|
|
|
|
// color: 'inherit',
|
|
|
|
|
|
|
|
// fontStyle: 'normal',
|
|
|
|
|
|
|
|
// lineHeight: 0,
|
|
|
|
|
|
|
|
// textAlign: 'center',
|
|
|
|
|
|
|
|
// textTransform: 'none',
|
|
|
|
|
|
|
|
// verticalAlign: '-0.2em',
|
|
|
|
|
|
|
|
// textRendering: 'optimizeLegibility',
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
// />
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// onClick={() => {
|
|
|
|
|
|
|
|
// console.log('11');
|
|
|
|
|
|
|
|
// setCaptureModalOpen(true);
|
|
|
|
|
|
|
|
// setCurrentRow(record);
|
|
|
|
|
|
|
|
// }}
|
|
|
|
|
|
|
|
// >
|
|
|
|
|
|
|
|
// {/* 最近拍摄 */}
|
|
|
|
|
|
|
|
// <FormattedMessage
|
|
|
|
|
|
|
|
// id="device.interface_manage.table.list.capture"
|
|
|
|
|
|
|
|
// defaultMessage="最近拍摄"
|
|
|
|
|
|
|
|
// />
|
|
|
|
|
|
|
|
// </Button>
|
|
|
|
<Button
|
|
|
|
<Button
|
|
|
|
key="update"
|
|
|
|
key="update"
|
|
|
|
type="link"
|
|
|
|
type="link"
|
|
|
|
size="small"
|
|
|
|
size="small"
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
color: '#004FB2',
|
|
|
|
color: '#004FB2',
|
|
|
|
// display: 'flex',
|
|
|
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
icon={
|
|
|
|
icon={
|
|
|
|
<Details
|
|
|
|
<EditOutlined
|
|
|
|
style={{
|
|
|
|
style={{
|
|
|
|
marginRight: 3,
|
|
|
|
marginRight: 3,
|
|
|
|
display: 'inline-flex',
|
|
|
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
|
|
|
color: 'inherit',
|
|
|
|
|
|
|
|
fontStyle: 'normal',
|
|
|
|
|
|
|
|
lineHeight: 0,
|
|
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
|
|
textTransform: 'none',
|
|
|
|
|
|
|
|
verticalAlign: '-0.2em',
|
|
|
|
|
|
|
|
textRendering: 'optimizeLegibility',
|
|
|
|
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -199,20 +291,13 @@ const DeviceList: React.FC = () => {
|
|
|
|
setCurrentRow(record);
|
|
|
|
setCurrentRow(record);
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<FormattedMessage id="common.details" defaultMessage="详情" />
|
|
|
|
<FormattedMessage
|
|
|
|
|
|
|
|
id="device.interface_manage.table.list.rename"
|
|
|
|
|
|
|
|
defaultMessage="重命名"
|
|
|
|
|
|
|
|
/>
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
),
|
|
|
|
),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
|
|
|
|
key: 'destroy',
|
|
|
|
|
|
|
|
renderDom: (
|
|
|
|
|
|
|
|
<IsDelete
|
|
|
|
|
|
|
|
deleteApi={() => {
|
|
|
|
|
|
|
|
handleDestroy(record).then(() => {});
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
></IsDelete>
|
|
|
|
|
|
|
|
),
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
></TableActionCard>,
|
|
|
|
></TableActionCard>,
|
|
|
|
],
|
|
|
|
],
|
|
|
|
@ -301,23 +386,23 @@ const DeviceList: React.FC = () => {
|
|
|
|
style={{ margin: 0, padding: 0, boxShadow: '0px 4px 8px 0px rgba(0,79,178,0.15)' }}
|
|
|
|
style={{ margin: 0, padding: 0, boxShadow: '0px 4px 8px 0px rgba(0,79,178,0.15)' }}
|
|
|
|
bodyStyle={{ margin: 0, padding: 0 }}
|
|
|
|
bodyStyle={{ margin: 0, padding: 0 }}
|
|
|
|
headerBordered
|
|
|
|
headerBordered
|
|
|
|
title="设备列表"
|
|
|
|
title="设备状态"
|
|
|
|
extra={
|
|
|
|
// extra={
|
|
|
|
<Button
|
|
|
|
// <Button
|
|
|
|
type="primary"
|
|
|
|
// type="primary"
|
|
|
|
style={{
|
|
|
|
// style={{
|
|
|
|
boxShadow: 'none',
|
|
|
|
// boxShadow: 'none',
|
|
|
|
}}
|
|
|
|
// }}
|
|
|
|
onClick={() => {
|
|
|
|
// onClick={() => {
|
|
|
|
setCreateModalOpen(true);
|
|
|
|
// setCreateModalOpen(true);
|
|
|
|
}}
|
|
|
|
// }}
|
|
|
|
>
|
|
|
|
// >
|
|
|
|
<FormattedMessage
|
|
|
|
// <FormattedMessage
|
|
|
|
id="device.interface_manage.table.list.add"
|
|
|
|
// id="device.interface_manage.table.list.add"
|
|
|
|
defaultMessage="新建设备/输入源"
|
|
|
|
// defaultMessage="新建设备/输入源"
|
|
|
|
/>
|
|
|
|
// />
|
|
|
|
</Button>
|
|
|
|
// </Button>
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<ProTable<API.DeviceCategory>
|
|
|
|
<ProTable<API.DeviceCategory>
|
|
|
|
cardProps={{
|
|
|
|
cardProps={{
|
|
|
|
@ -353,7 +438,7 @@ const DeviceList: React.FC = () => {
|
|
|
|
let sort_select = sort[reqParams.orderKey];
|
|
|
|
let sort_select = sort[reqParams.orderKey];
|
|
|
|
reqParams.desc = sort_select === 'descend';
|
|
|
|
reqParams.desc = sort_select === 'descend';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let resp = await getInterfaces({ ...reqParams });
|
|
|
|
let resp = await getPlatform({ ...reqParams });
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
data: resp.data.results.map((v: API.DeviceCategory) => {
|
|
|
|
data: resp.data.results.map((v: API.DeviceCategory) => {
|
|
|
|
return { ...v, key: v.id };
|
|
|
|
return { ...v, key: v.id };
|
|
|
|
@ -365,6 +450,7 @@ const DeviceList: React.FC = () => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
columns={columns}
|
|
|
|
columns={columns}
|
|
|
|
|
|
|
|
expandable={{ expandedRowRender }}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</ProCard>
|
|
|
|
</ProCard>
|
|
|
|
<CreateForm
|
|
|
|
<CreateForm
|
|
|
|
|
JINGYJ
12 months ago