feat: 初始化分布式设备状态模块
parent
5524a6aaec
commit
628daf4cd1
@ -0,0 +1,111 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { parse } from 'url';
|
||||||
|
|
||||||
|
// mock tableListDataSource
|
||||||
|
const genList = (current: number, pageSize: number) => {
|
||||||
|
const tableListDataSource: API.RuleListItem[] = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < pageSize; i += 1) {
|
||||||
|
const index = (current - 1) * 10 + i;
|
||||||
|
tableListDataSource.push({
|
||||||
|
key: index,
|
||||||
|
disabled: i % 6 === 0,
|
||||||
|
href: 'https://ant.design',
|
||||||
|
avatar: [
|
||||||
|
'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
|
||||||
|
'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
|
||||||
|
][i % 2],
|
||||||
|
name: `TradeCode ${index}`,
|
||||||
|
owner: '曲丽丽',
|
||||||
|
desc: '这是一段描述',
|
||||||
|
callNo: Math.floor(Math.random() * 1000),
|
||||||
|
status: Math.floor(Math.random() * 10) % 4,
|
||||||
|
updatedAt: moment().format('YYYY-MM-DD'),
|
||||||
|
createdAt: moment().format('YYYY-MM-DD'),
|
||||||
|
progress: Math.ceil(Math.random() * 100),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
tableListDataSource.reverse();
|
||||||
|
return tableListDataSource;
|
||||||
|
};
|
||||||
|
|
||||||
|
let tableListDataSource = genList(1, 100);
|
||||||
|
|
||||||
|
function getDCSDeviceStatusList(req: Request, res: Response, u: string) {
|
||||||
|
let realUrl = u;
|
||||||
|
if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
|
||||||
|
realUrl = req.url;
|
||||||
|
}
|
||||||
|
const { current = 1, pageSize = 10 } = req.query;
|
||||||
|
const params = parse(realUrl, true).query as unknown as API.PageParams &
|
||||||
|
API.RuleListItem & {
|
||||||
|
sorter: any;
|
||||||
|
filter: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
let dataSource = [...tableListDataSource].slice(
|
||||||
|
((current as number) - 1) * (pageSize as number),
|
||||||
|
(current as number) * (pageSize as number),
|
||||||
|
);
|
||||||
|
if (params.sorter) {
|
||||||
|
const sorter = JSON.parse(params.sorter);
|
||||||
|
dataSource = dataSource.sort((prev, next) => {
|
||||||
|
let sortNumber = 0;
|
||||||
|
(Object.keys(sorter) as Array<keyof API.RuleListItem>).forEach((key) => {
|
||||||
|
let nextSort = next?.[key] as number;
|
||||||
|
let preSort = prev?.[key] as number;
|
||||||
|
if (sorter[key] === 'descend') {
|
||||||
|
if (preSort - nextSort > 0) {
|
||||||
|
sortNumber += -1;
|
||||||
|
} else {
|
||||||
|
sortNumber += 1;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (preSort - nextSort > 0) {
|
||||||
|
sortNumber += 1;
|
||||||
|
} else {
|
||||||
|
sortNumber += -1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return sortNumber;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (params.filter) {
|
||||||
|
const filter = JSON.parse(params.filter as any) as {
|
||||||
|
[key: string]: string[];
|
||||||
|
};
|
||||||
|
if (Object.keys(filter).length > 0) {
|
||||||
|
dataSource = dataSource.filter((item) => {
|
||||||
|
return (Object.keys(filter) as Array<keyof API.RuleListItem>).some((key) => {
|
||||||
|
if (!filter[key]) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (filter[key].includes(`${item[key]}`)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (params.name) {
|
||||||
|
dataSource = dataSource.filter((data) => data?.name?.includes(params.name || ''));
|
||||||
|
}
|
||||||
|
const result = {
|
||||||
|
data: dataSource,
|
||||||
|
total: tableListDataSource.length,
|
||||||
|
success: true,
|
||||||
|
pageSize,
|
||||||
|
current: parseInt(`${params.current}`, 10) || 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
return res.json(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
'GET /api/mock/getDCSDeviceStatusList': getDCSDeviceStatusList,
|
||||||
|
};
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const deviceStatusEnums : Record<string,any> = {
|
||||||
|
'allStatus': {
|
||||||
|
miniName: '全部',
|
||||||
|
value: '',
|
||||||
|
color: ''
|
||||||
|
},
|
||||||
|
'onlineStatus': {
|
||||||
|
miniName: '在线',
|
||||||
|
value: '',
|
||||||
|
color: 'success'
|
||||||
|
},
|
||||||
|
'outlineStatus': {
|
||||||
|
miniName: '离线',
|
||||||
|
value: '',
|
||||||
|
color: 'default'
|
||||||
|
},
|
||||||
|
'processingStatus': {
|
||||||
|
miniName: '运行中',
|
||||||
|
value: '',
|
||||||
|
color: 'warning'
|
||||||
|
},
|
||||||
|
'errorStatus': {
|
||||||
|
miniName: '故障',
|
||||||
|
value: '',
|
||||||
|
color: 'error'
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,41 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import {Drawer} from "antd";
|
|
||||||
import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
|
|
||||||
|
|
||||||
export type ColumnDrawProps = {
|
|
||||||
handleDrawer: (id?: any)=>void;
|
|
||||||
isShowDetail: boolean;
|
|
||||||
columns: ProColumns<API.Device>[];
|
|
||||||
currentRow: API.Device | undefined;
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Drawer
|
|
||||||
width={500}
|
|
||||||
open={props.isShowDetail}
|
|
||||||
onClose={() => {
|
|
||||||
props.handleDrawer();
|
|
||||||
}}
|
|
||||||
closable={true}
|
|
||||||
>
|
|
||||||
{props.currentRow?.id && (
|
|
||||||
<ProDescriptions<API.Device>
|
|
||||||
column={2}
|
|
||||||
title={props.currentRow?.id}
|
|
||||||
request={async () => ({
|
|
||||||
data: props.currentRow || {},
|
|
||||||
})}
|
|
||||||
params={{
|
|
||||||
id: props.currentRow?.id,
|
|
||||||
}}
|
|
||||||
columns={props.columns as ProDescriptionsItemProps<API.Device>[]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Drawer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export {ColumnDrawer}
|
|
||||||
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
import { FormattedMessage} from '@umijs/max';
|
|
||||||
export const DeviceColumns = [{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.id"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "id",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.name"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "name",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.code"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "code",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.position"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "position",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.param"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "param",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.spec"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "spec",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.categoryFkId"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "category_fk_id",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.groupFkId"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "group_fk_id",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.isEnable"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "is_enable",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.remark"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "remark",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.createTime"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "create_time",
|
|
||||||
},{
|
|
||||||
title: (<FormattedMessage
|
|
||||||
id="device.device.table.list.updateTime"
|
|
||||||
defaultMessage="$$$"/>),
|
|
||||||
dataIndex: "update_time",
|
|
||||||
},]
|
|
||||||
@ -1,233 +0,0 @@
|
|||||||
import { postDeviceCreateDevice } from '@/services/device/Device';
|
|
||||||
import { postDeviceCategoryGetDeviceCategoryFkSelect } from '@/services/device/DeviceCategory';
|
|
||||||
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
|
|
||||||
import {
|
|
||||||
ModalForm,
|
|
||||||
ProForm,
|
|
||||||
ProFormSelect,
|
|
||||||
ProFormSwitch,
|
|
||||||
ProFormText,
|
|
||||||
} from '@ant-design/pro-components';
|
|
||||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
|
||||||
import { Form, Switch, message } from 'antd';
|
|
||||||
import React, { useState } from 'react';
|
|
||||||
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
|
||||||
export type FormValueType = {
|
|
||||||
target?: string;
|
|
||||||
template?: string;
|
|
||||||
type?: string;
|
|
||||||
time?: string;
|
|
||||||
frequency?: string;
|
|
||||||
} & Partial<API.Device>;
|
|
||||||
|
|
||||||
export type CreateFormProps = {
|
|
||||||
createModalOpen: boolean;
|
|
||||||
handleModal: () => void;
|
|
||||||
values: Partial<API.Device>;
|
|
||||||
reload: any;
|
|
||||||
};
|
|
||||||
const CreateForm: React.FC<CreateFormProps> = (props) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const [isAuto, setIsAuto] = useState(true);
|
|
||||||
const [form] = Form.useForm<API.Device>();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ModalForm<API.Device>
|
|
||||||
width={proFormModelWidth}
|
|
||||||
title={intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.add',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}
|
|
||||||
open={props.createModalOpen}
|
|
||||||
form={form}
|
|
||||||
autoFocusFirstInput
|
|
||||||
modalProps={{
|
|
||||||
destroyOnClose: true,
|
|
||||||
onCancel: () => props.handleModal(),
|
|
||||||
}}
|
|
||||||
submitTimeout={2000}
|
|
||||||
onFinish={async (values) => {
|
|
||||||
postDeviceCreateDevice(values)
|
|
||||||
.then(() => {
|
|
||||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
|
||||||
props.reload();
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
|
||||||
});
|
|
||||||
props.handleModal();
|
|
||||||
return true;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ProForm.Group>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="name"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({ id: 'device.device.table.list.name', defaultMessage: '$$$' })}`}
|
|
||||||
required={true}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: (
|
|
||||||
<FormattedMessage
|
|
||||||
id="device.device.table.rule.required.name"
|
|
||||||
defaultMessage="name is required"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<ProFormSelect
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="groupFkId"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_select',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.groupFkId',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
showSearch
|
|
||||||
debounceTime={1000}
|
|
||||||
request={async (keyWord) => {
|
|
||||||
const resp = await postDeviceGroupGetDeviceGroupFkSelect({
|
|
||||||
keyword: keyWord?.keyWords || '',
|
|
||||||
});
|
|
||||||
return resp.data.list.map((v: any) => {
|
|
||||||
return {
|
|
||||||
label: v.name,
|
|
||||||
value: v.id,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.width - 80}
|
|
||||||
name="code"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.code" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({ id: 'device.device.table.list.code', defaultMessage: '$$$' })}`}
|
|
||||||
required={!isAuto}
|
|
||||||
initialValue=""
|
|
||||||
disabled={isAuto}
|
|
||||||
rules={
|
|
||||||
isAuto
|
|
||||||
? []
|
|
||||||
: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: (
|
|
||||||
<FormattedMessage
|
|
||||||
id="device.device.table.rule.required.code"
|
|
||||||
defaultMessage="code is required"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
addonAfter={
|
|
||||||
<Switch
|
|
||||||
checked={isAuto}
|
|
||||||
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
|
|
||||||
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
|
|
||||||
onChange={setIsAuto}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="position"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.position" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.position',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="param"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.param" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.param',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="spec"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({ id: 'device.device.table.list.spec', defaultMessage: '$$$' })}`}
|
|
||||||
required={false}
|
|
||||||
/>
|
|
||||||
<ProFormSelect
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="categoryFkId"
|
|
||||||
label={
|
|
||||||
<FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$" />
|
|
||||||
}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_select',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.categoryFkId',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
showSearch
|
|
||||||
debounceTime={1000}
|
|
||||||
request={async (keyWord) => {
|
|
||||||
const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({
|
|
||||||
keyword: keyWord?.keyWords || '',
|
|
||||||
});
|
|
||||||
return resp.data.list.map((v: any) => {
|
|
||||||
return {
|
|
||||||
label: v.name,
|
|
||||||
value: v.id,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="remark"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.remark',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
/>
|
|
||||||
<ProFormSwitch
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="isEnable"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$" />}
|
|
||||||
initialValue={true}
|
|
||||||
/>
|
|
||||||
</ProForm.Group>
|
|
||||||
</ModalForm>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default CreateForm;
|
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
import { Modal, Tabs } from 'antd';
|
||||||
|
import { proFormMaxModelWidth } from '../../../../../config/defaultForm';
|
||||||
|
|
||||||
|
import { ProColumns, ProTable } from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
|
||||||
|
// 设备信息
|
||||||
|
|
||||||
|
const DeviceBaseInfo: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<ul>
|
||||||
|
<li>基础信息</li>
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设备信息
|
||||||
|
|
||||||
|
const DeviceLogInfo: React.FC = () => {
|
||||||
|
const columns: ProColumns<Record<string, any>[]> = [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="DCSDeviceList.deviceStatus.detailModel.logTable.deviceName"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
// width: 120,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="DCSDeviceList.deviceStatus.detailModel.logTable.deviceID"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
dataIndex: 'deviceID',
|
||||||
|
// width: 120,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="DCSDeviceList.deviceStatus.detailModel.logTable.deviceCat"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
dataIndex: 'deviceCat',
|
||||||
|
// width: 120,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="DCSDeviceList.deviceStatus.detailModel.logTable.deviceIP"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
dataIndex: 'deviceIP',
|
||||||
|
// width: 120,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="DCSDeviceList.deviceStatus.detailModel.logTable.deviceTime"
|
||||||
|
defaultMessage="$$$"
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
dataIndex: 'deviceTime',
|
||||||
|
// width: 120,
|
||||||
|
hideInSearch: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
let testData: Record<string, any>[] = [];
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
testData.push({
|
||||||
|
deviceName: '设备' + (i + 1),
|
||||||
|
deviceID: '123456',
|
||||||
|
deviceCat: '外围监控',
|
||||||
|
deviceIP: '192.168.1.10',
|
||||||
|
deviceTime: '22:00:00',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<ProTable
|
||||||
|
cardProps={{
|
||||||
|
bodyStyle: { padding: 0, margin: 0 },
|
||||||
|
}}
|
||||||
|
search={false}
|
||||||
|
options={{ fullScreen: false, setting: false, density: false, reload: false }}
|
||||||
|
rowKey="key"
|
||||||
|
request={async () => {
|
||||||
|
// 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 getSysOperationRecordGetOperationRecordList({...reqParams})
|
||||||
|
let resp = {
|
||||||
|
success: true,
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
data: testData,
|
||||||
|
success: resp.success,
|
||||||
|
// total: resp.data.total,
|
||||||
|
// current: resp.data.page,
|
||||||
|
// pageSize: resp.data.pageSize
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
pagination={false}
|
||||||
|
columns={columns}
|
||||||
|
></ProTable>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export type DetailInfoCardProps = {
|
||||||
|
detailModalOpen: boolean;
|
||||||
|
handleDetailModal: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const DetailInfoCard: React.FC<DetailInfoCardProps> = (props) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const [type, setType] = useState<string>('deviceInfo');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
width={proFormMaxModelWidth}
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'DCSDeviceList.deviceStatus.detailModel.name',
|
||||||
|
defaultMessage: '$$$',
|
||||||
|
})}
|
||||||
|
open={props.detailModalOpen}
|
||||||
|
footer={null}
|
||||||
|
onCancel={props.handleDetailModal}
|
||||||
|
destroyOnClose
|
||||||
|
>
|
||||||
|
<Tabs
|
||||||
|
activeKey={type}
|
||||||
|
onChange={(activeKey: string) => setType(activeKey)}
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: 'deviceInfo',
|
||||||
|
label: intl.formatMessage({
|
||||||
|
id: 'pages.login.accountLogin.tab',
|
||||||
|
defaultMessage: '设备信息',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'deviceLog',
|
||||||
|
label: intl.formatMessage({
|
||||||
|
id: 'DCSDeviceList.deviceStatus.detailModel.log',
|
||||||
|
defaultMessage: '设备日志',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
></Tabs>
|
||||||
|
{type === 'deviceInfo' && <DeviceBaseInfo></DeviceBaseInfo>}
|
||||||
|
{type === 'deviceLog' && <DeviceLogInfo></DeviceLogInfo>}
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DetailInfoCard;
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
/*
|
||||||
|
* @Author: zhoux zhouxia@supervision.ltd
|
||||||
|
* @Date: 2023-11-06 16:12:17
|
||||||
|
* @LastEditors: zhoux zhouxia@supervision.ltd
|
||||||
|
* @LastEditTime: 2023-12-08 14:05:45
|
||||||
|
* @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
|
||||||
|
*/
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { Progress } from 'antd';
|
||||||
|
// import { postModelVersionGetModelVersionListByIds } from '@/services/resource/ModelVersion';
|
||||||
|
|
||||||
|
// const [tabs, setTabs] = useState([]);
|
||||||
|
// const [projectData, setProjectData] = useState<any>({});
|
||||||
|
// const [tab, setTab] = useState('');
|
||||||
|
// const [modelVersionData, setModelVersionData] = useState<any[]>([]);
|
||||||
|
|
||||||
|
/**styles */
|
||||||
|
const listItemStyle = {
|
||||||
|
display: 'flex',
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#333333',
|
||||||
|
maxWidth: '22vh',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '5px 0',
|
||||||
|
};
|
||||||
|
|
||||||
|
const listItemLabelStyle = {
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#666666',
|
||||||
|
minWidth: 40,
|
||||||
|
};
|
||||||
|
|
||||||
|
const listItemTextStyle = {
|
||||||
|
fontSize: 14,
|
||||||
|
margin: 0,
|
||||||
|
};
|
||||||
|
// 卡片
|
||||||
|
export type UpdateProjectProps = {
|
||||||
|
info: Record<string, any>;
|
||||||
|
// reload: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
type DeviceItemProgress = {
|
||||||
|
label: string;
|
||||||
|
percent: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 进度条
|
||||||
|
|
||||||
|
const DeviceItemProgress: React.FC<DeviceItemProgress> = (props) => {
|
||||||
|
let strokeColor = 'rgb(243,48,5)';
|
||||||
|
switch (props.label) {
|
||||||
|
case 'CPU':
|
||||||
|
strokeColor = 'rgb(243,48,5)';
|
||||||
|
break;
|
||||||
|
case '内存':
|
||||||
|
strokeColor = 'rgb(33,169,122)';
|
||||||
|
break;
|
||||||
|
case '存储':
|
||||||
|
strokeColor = 'rgb(33,169,122)';
|
||||||
|
break;
|
||||||
|
case 'NPU':
|
||||||
|
strokeColor = 'rgb(250,173,20)';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ width: '100%', display: 'flex' }}>
|
||||||
|
<span style={listItemLabelStyle}>{props.label}</span>
|
||||||
|
<Progress height={46} percent={props.percent * 100} strokeColor={strokeColor} showInfo={false} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const DeviceStatusCard: React.FC<UpdateProjectProps> = ({
|
||||||
|
info,
|
||||||
|
}: {
|
||||||
|
info: Record<string, any>;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'left',
|
||||||
|
paddingLeft: 15,
|
||||||
|
paddingRight: 15,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 10 }}>
|
||||||
|
<span style={{ fontWeight: 700, fontSize: 14, paddingRight: 10 }}>苏胜天算法模型</span>
|
||||||
|
<Tag color="#44AEF5">经典算法</Tag>
|
||||||
|
</div> */}
|
||||||
|
<ul>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="CPU" percent={0.79}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="内存" percent={0.18}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="存储" percent={0.16}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
<li style={listItemStyle}>
|
||||||
|
<DeviceItemProgress label="NPU" percent={0.58}></DeviceItemProgress>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DeviceStatusCard;
|
||||||
@ -1,272 +0,0 @@
|
|||||||
import { putDeviceUpdateDevice } from '@/services/device/Device';
|
|
||||||
import { postDeviceCategoryGetDeviceCategoryFkSelect } from '@/services/device/DeviceCategory';
|
|
||||||
import { postDeviceGroupGetDeviceGroupFkSelect } from '@/services/device/DeviceGroup';
|
|
||||||
import {
|
|
||||||
ModalForm,
|
|
||||||
ProForm,
|
|
||||||
ProFormDateTimePicker,
|
|
||||||
ProFormSelect,
|
|
||||||
ProFormSwitch,
|
|
||||||
ProFormText,
|
|
||||||
} from '@ant-design/pro-components';
|
|
||||||
import { FormattedMessage, useIntl } from '@umijs/max';
|
|
||||||
import { Form, message } from 'antd';
|
|
||||||
import React from 'react';
|
|
||||||
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
|
|
||||||
export type FormValueType = {
|
|
||||||
target?: string;
|
|
||||||
template?: string;
|
|
||||||
type?: string;
|
|
||||||
time?: string;
|
|
||||||
frequency?: string;
|
|
||||||
} & Partial<API.Device>;
|
|
||||||
|
|
||||||
export type UpdateFormProps = {
|
|
||||||
updateModalOpen: boolean;
|
|
||||||
handleModal: () => void;
|
|
||||||
values: Partial<API.Device>;
|
|
||||||
reload: any;
|
|
||||||
};
|
|
||||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
|
||||||
const intl = useIntl();
|
|
||||||
const [form] = Form.useForm<API.Device>();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ModalForm<API.Device>
|
|
||||||
width={proFormModelWidth}
|
|
||||||
title={intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.update',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}
|
|
||||||
open={props.updateModalOpen}
|
|
||||||
form={form}
|
|
||||||
autoFocusFirstInput
|
|
||||||
modalProps={{
|
|
||||||
destroyOnClose: true,
|
|
||||||
onCancel: () => props.handleModal(),
|
|
||||||
}}
|
|
||||||
submitTimeout={2000}
|
|
||||||
onFinish={async (values) => {
|
|
||||||
putDeviceUpdateDevice(values)
|
|
||||||
.then(() => {
|
|
||||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
|
||||||
props.reload();
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
|
||||||
});
|
|
||||||
|
|
||||||
props.handleModal();
|
|
||||||
return true;
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ProForm.Group>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="id"
|
|
||||||
label="id"
|
|
||||||
disabled={true}
|
|
||||||
initialValue={props.values.id}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="name"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.name" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({ id: 'device.device.table.list.name', defaultMessage: '$$$' })}`}
|
|
||||||
required={true}
|
|
||||||
initialValue={props.values.name}
|
|
||||||
disabled={false}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: (
|
|
||||||
<FormattedMessage
|
|
||||||
id="device.device.table.rule.required.name"
|
|
||||||
defaultMessage="name is required"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="code"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.code" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({ id: 'device.device.table.list.code', defaultMessage: '$$$' })}`}
|
|
||||||
required={true}
|
|
||||||
initialValue={props.values.code}
|
|
||||||
disabled={false}
|
|
||||||
rules={[
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: (
|
|
||||||
<FormattedMessage
|
|
||||||
id="device.device.table.rule.required.code"
|
|
||||||
defaultMessage="code is required"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="position"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.position" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.position',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.position}
|
|
||||||
disabled={false}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="param"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.param" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.param',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.param}
|
|
||||||
disabled={false}
|
|
||||||
/>
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="spec"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.spec" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({ id: 'device.device.table.list.spec', defaultMessage: '$$$' })}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.spec}
|
|
||||||
disabled={false}
|
|
||||||
/>
|
|
||||||
<ProFormSelect
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="categoryFkId"
|
|
||||||
label={
|
|
||||||
<FormattedMessage id="device.device.table.list.categoryFkId" defaultMessage="$$$" />
|
|
||||||
}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_select',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.categoryFkId',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.categoryFkId}
|
|
||||||
showSearch
|
|
||||||
debounceTime={1000}
|
|
||||||
request={async (keyWord) => {
|
|
||||||
const resp = await postDeviceCategoryGetDeviceCategoryFkSelect({
|
|
||||||
keyword: keyWord?.keyWords || '',
|
|
||||||
});
|
|
||||||
return resp.data.list.map((v: any) => {
|
|
||||||
return {
|
|
||||||
label: v.name,
|
|
||||||
value: v.id,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ProFormSelect
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="groupFkId"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.groupFkId" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_select',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.groupFkId',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.groupFkId}
|
|
||||||
showSearch
|
|
||||||
debounceTime={1000}
|
|
||||||
request={async (keyWord) => {
|
|
||||||
const resp = await postDeviceGroupGetDeviceGroupFkSelect({
|
|
||||||
keyword: keyWord?.keyWords || '',
|
|
||||||
});
|
|
||||||
return resp.data.list.map((v: any) => {
|
|
||||||
return {
|
|
||||||
label: v.name,
|
|
||||||
value: v.id,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ProFormText
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="remark"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.remark" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.remark',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.remark}
|
|
||||||
disabled={false}
|
|
||||||
/>
|
|
||||||
<ProFormSwitch
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="isEnable"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.isEnable" defaultMessage="$$$" />}
|
|
||||||
initialValue={props.values.isEnable}
|
|
||||||
disabled={false}
|
|
||||||
/>
|
|
||||||
<ProFormDateTimePicker
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="createTime"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.createTime" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.createTime',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.createTime}
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
<ProFormDateTimePicker
|
|
||||||
width={proFormItemStyleProps.column2Width}
|
|
||||||
name="updateTime"
|
|
||||||
label={<FormattedMessage id="device.device.table.list.updateTime" defaultMessage="$$$" />}
|
|
||||||
placeholder={`${intl.formatMessage({
|
|
||||||
id: 'common.please_input',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}${intl.formatMessage({
|
|
||||||
id: 'device.device.table.list.updateTime',
|
|
||||||
defaultMessage: '$$$',
|
|
||||||
})}`}
|
|
||||||
required={false}
|
|
||||||
initialValue={props.values.updateTime}
|
|
||||||
disabled={true}
|
|
||||||
/>
|
|
||||||
</ProForm.Group>
|
|
||||||
</ModalForm>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export default UpdateForm;
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import {useIntl} from '@umijs/max';
|
|
||||||
import React, {useState, useRef, useCallback, useEffect} from 'react';
|
|
||||||
import {Form, Modal} from 'antd';
|
|
||||||
|
|
||||||
import WebRTCStreamer from "@/components/WebRtcPlayer";
|
|
||||||
export type FormValueType = {
|
|
||||||
target?: string;
|
|
||||||
template?: string;
|
|
||||||
type?: string;
|
|
||||||
time?: string;
|
|
||||||
frequency?: string;
|
|
||||||
} & Partial<API.Device>;
|
|
||||||
|
|
||||||
export type VideoModalProps = {
|
|
||||||
modalOpen: boolean;
|
|
||||||
handleModal: () => void;
|
|
||||||
values: Partial<API.Device>;
|
|
||||||
reload: any;
|
|
||||||
videoServerParam: API.RtspRes;
|
|
||||||
};
|
|
||||||
|
|
||||||
const VideoModal: React.FC<VideoModalProps> = (props) => {
|
|
||||||
|
|
||||||
const intl = useIntl();
|
|
||||||
const [form] = Form.useForm<API.ActionDetection>();
|
|
||||||
|
|
||||||
const [videoInit, setVideoInit] = useState(false);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(()=>{
|
|
||||||
setVideoInit(false)
|
|
||||||
if (props.modalOpen) {
|
|
||||||
setVideoInit(true)
|
|
||||||
|
|
||||||
} else {
|
|
||||||
console.log('***********')
|
|
||||||
setVideoInit(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
}, [props.modalOpen])
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal title="播放视频" open={props.modalOpen}
|
|
||||||
width={1280}
|
|
||||||
onOk={props.handleModal} onCancel={props.handleModal}
|
|
||||||
footer={null}>
|
|
||||||
{videoInit && (<WebRTCStreamer is_open={props.modalOpen} stream_url={props.values.param} server_url={props.videoServerParam.host || ''}></WebRTCStreamer>)}
|
|
||||||
|
|
||||||
</Modal>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
export default VideoModal;
|
|
||||||
Loading…
Reference in New Issue