|
|
|
|
@ -1,8 +1,21 @@
|
|
|
|
|
import styles from './index.less';
|
|
|
|
|
import { message, Input, Button, Row, Modal, Form, Tabs, Empty } from 'antd';
|
|
|
|
|
import {
|
|
|
|
|
message,
|
|
|
|
|
Input,
|
|
|
|
|
Button,
|
|
|
|
|
Row,
|
|
|
|
|
Modal,
|
|
|
|
|
Form,
|
|
|
|
|
Table,
|
|
|
|
|
Empty,
|
|
|
|
|
Col,
|
|
|
|
|
Select,
|
|
|
|
|
DatePicker,
|
|
|
|
|
} from 'antd';
|
|
|
|
|
import Fetch from '@/utils/fetch';
|
|
|
|
|
import { useEffect, useState, FC, Fragment, useRef } from 'react';
|
|
|
|
|
import { cloneDeep } from 'lodash';
|
|
|
|
|
import { ColumnsType } from 'antd/lib/table';
|
|
|
|
|
|
|
|
|
|
const testData = {
|
|
|
|
|
id: 1,
|
|
|
|
|
@ -26,7 +39,7 @@ const testData = {
|
|
|
|
|
cProgress: 0,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const Progress = ({ item, onFinish, start }: any) => {
|
|
|
|
|
const Progress = ({ item, onFinish, start, setVisible }: any) => {
|
|
|
|
|
const [data, setData] = useState<any>({});
|
|
|
|
|
const timer = useRef<any>(null);
|
|
|
|
|
const dataSave = useRef<any>({});
|
|
|
|
|
@ -88,6 +101,12 @@ const Progress = ({ item, onFinish, start }: any) => {
|
|
|
|
|
<div className={styles.s2}>
|
|
|
|
|
<div className={styles.s1}>{data.deviceId}</div>
|
|
|
|
|
<div className={styles.s2}>{data.name}</div>
|
|
|
|
|
<div className={styles.s0}>
|
|
|
|
|
<i
|
|
|
|
|
onClick={() => setVisible(true)}
|
|
|
|
|
className="iconfont icon-bianji10"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>{data.aText}</div>
|
|
|
|
|
@ -100,6 +119,9 @@ const Progress = ({ item, onFinish, start }: any) => {
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.t}>{data.aProgress}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s0}>
|
|
|
|
|
<i className="iconfont icon-bianji10" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>{data.bText}</div>
|
|
|
|
|
@ -112,6 +134,9 @@ const Progress = ({ item, onFinish, start }: any) => {
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.t}>{data.bProgress}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s0}>
|
|
|
|
|
<i className="iconfont icon-bianji10" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>{data.cText}</div>
|
|
|
|
|
@ -124,6 +149,9 @@ const Progress = ({ item, onFinish, start }: any) => {
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.t}>{data.cProgress}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s0}>
|
|
|
|
|
<i className="iconfont icon-bianji10" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
@ -134,10 +162,16 @@ const Page = () => {
|
|
|
|
|
const [disabled, setDisabled] = useState<boolean>(false);
|
|
|
|
|
const [start, setStart] = useState<boolean>(false);
|
|
|
|
|
const [loading, setLoading] = useState<boolean>(false);
|
|
|
|
|
|
|
|
|
|
const [visible, setVisible] = useState<any>(false);
|
|
|
|
|
const [modalData, setModalData] = useState<any>([]);
|
|
|
|
|
const [modalSelectKey, setModalSelectKey] = useState<any>([]);
|
|
|
|
|
|
|
|
|
|
const resizeBar = useRef<any>(null);
|
|
|
|
|
const resizeBox = useRef<any>(null);
|
|
|
|
|
const iframeBox = useRef<any>(null);
|
|
|
|
|
const dataSave = useRef<any>([]);
|
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
|
|
|
|
|
|
console.log(data, 'data');
|
|
|
|
|
|
|
|
|
|
@ -154,7 +188,7 @@ const Page = () => {
|
|
|
|
|
|
|
|
|
|
const getData = (e: any) => {
|
|
|
|
|
if (e.origin === 'https://edu-xnfz.educoder.net') {
|
|
|
|
|
// alert(e.data)
|
|
|
|
|
console.log(e.data, 22222);
|
|
|
|
|
let newData: any = [];
|
|
|
|
|
try {
|
|
|
|
|
if (e.data) {
|
|
|
|
|
@ -284,6 +318,40 @@ const Page = () => {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleModalFinish = async (v: any) => {
|
|
|
|
|
console.log(v, 222);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getModalData = async (p: any) => {};
|
|
|
|
|
|
|
|
|
|
const columns: ColumnsType<any> = [
|
|
|
|
|
{
|
|
|
|
|
width: 120,
|
|
|
|
|
title: '编号',
|
|
|
|
|
align: 'center',
|
|
|
|
|
dataIndex: 'index',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '设备物理标识',
|
|
|
|
|
dataIndex: 'number',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '注册时间',
|
|
|
|
|
dataIndex: 'beginTime',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
width: 120,
|
|
|
|
|
title: '状态',
|
|
|
|
|
dataIndex: 'status',
|
|
|
|
|
render: (v: any, r: any) =>
|
|
|
|
|
v === '1' ? (
|
|
|
|
|
<span style={{ color: 'green' }}>已同步</span>
|
|
|
|
|
) : (
|
|
|
|
|
<span>未同步</span>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={styles.page}>
|
|
|
|
|
<iframe
|
|
|
|
|
@ -312,59 +380,31 @@ const Page = () => {
|
|
|
|
|
<div className={styles.s2}>
|
|
|
|
|
<div className={styles.s1}>接口板编号</div>
|
|
|
|
|
<div className={styles.s2}>设备物理标志</div>
|
|
|
|
|
<div className={styles.s0}>编辑</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>接入状态</div>
|
|
|
|
|
<div>执行状态</div>
|
|
|
|
|
<div className={styles.s0}>编辑</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>接入状态</div>
|
|
|
|
|
<div>执行状态</div>
|
|
|
|
|
<div className={styles.s0}>编辑</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>接入状态</div>
|
|
|
|
|
<div>执行状态</div>
|
|
|
|
|
<div className={styles.s0}>编辑</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/* <div className={styles.row}>
|
|
|
|
|
<div className={styles.s2}>
|
|
|
|
|
<div className={styles.s1}>板1</div>
|
|
|
|
|
<div className={styles.s2}>MPT574_179064679</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>正在写入</div>
|
|
|
|
|
<div className={styles.progress}>
|
|
|
|
|
<div className={styles.pw}>
|
|
|
|
|
<span style={{ width: `${num}%` }} className={styles.p}></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.t}>{num}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>注入器连接成功</div>
|
|
|
|
|
<div className={styles.progress}>
|
|
|
|
|
<div className={styles.pw}>
|
|
|
|
|
<span style={{ width: `${num}%` }} className={styles.p}></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.t}>{num}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.s1}>
|
|
|
|
|
<div>正在写入</div>
|
|
|
|
|
<div className={styles.progress}>
|
|
|
|
|
<div className={styles.pw}>
|
|
|
|
|
<span style={{ width: `${num}%` }} className={styles.p}></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.t}>{num}%</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> */}
|
|
|
|
|
{!!data.length ? (
|
|
|
|
|
data.map((e: any) => (
|
|
|
|
|
<Progress
|
|
|
|
|
key={e.id}
|
|
|
|
|
item={e}
|
|
|
|
|
start={start}
|
|
|
|
|
setVisible={setVisible}
|
|
|
|
|
onFinish={handleFinish}
|
|
|
|
|
/>
|
|
|
|
|
))
|
|
|
|
|
@ -383,6 +423,100 @@ const Page = () => {
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Modal
|
|
|
|
|
centered
|
|
|
|
|
title="设备详细信息"
|
|
|
|
|
visible={visible}
|
|
|
|
|
okText="确认"
|
|
|
|
|
width={924}
|
|
|
|
|
afterClose={() => {
|
|
|
|
|
form.resetFields();
|
|
|
|
|
setModalSelectKey([]);
|
|
|
|
|
setModalData([]);
|
|
|
|
|
}}
|
|
|
|
|
cancelText="取消"
|
|
|
|
|
onOk={() => {
|
|
|
|
|
setVisible(false);
|
|
|
|
|
}}
|
|
|
|
|
onCancel={() => {
|
|
|
|
|
setVisible(false);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Form
|
|
|
|
|
form={form}
|
|
|
|
|
colon={false}
|
|
|
|
|
onFinish={handleModalFinish}
|
|
|
|
|
labelCol={{ span: 6 }}
|
|
|
|
|
wrapperCol={{ span: 18 }}
|
|
|
|
|
>
|
|
|
|
|
<Row align="middle">
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<Form.Item label="装备类型" name="type" initialValue={''}>
|
|
|
|
|
<Select>
|
|
|
|
|
<Select.Option key={''}>全部</Select.Option>
|
|
|
|
|
<Select.Option key={'电脑'}>电脑</Select.Option>
|
|
|
|
|
<Select.Option key={'键盘'}>键盘</Select.Option>
|
|
|
|
|
<Select.Option key={'显示器'}>显示器</Select.Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<Form.Item label="注册时间" name="deviceId" initialValue={''}>
|
|
|
|
|
<DatePicker style={{ width: 328 }} />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row align="middle">
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<Form.Item label="资源状态" name="status" initialValue={''}>
|
|
|
|
|
<Select>
|
|
|
|
|
<Select.Option key={''}>全部状态</Select.Option>
|
|
|
|
|
<Select.Option key={'已分发'}>已分发</Select.Option>
|
|
|
|
|
<Select.Option key={'未分发'}>未分发</Select.Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<Form.Item label="铭牌号" name="num" initialValue={''}>
|
|
|
|
|
<Input />
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row justify="end">
|
|
|
|
|
<Form.Item>
|
|
|
|
|
<Button
|
|
|
|
|
className="mr20"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
form.resetFields();
|
|
|
|
|
getModalData({});
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
重置
|
|
|
|
|
</Button>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item>
|
|
|
|
|
<Button type="primary" htmlType="submit">
|
|
|
|
|
查询
|
|
|
|
|
</Button>
|
|
|
|
|
</Form.Item>
|
|
|
|
|
</Row>
|
|
|
|
|
</Form>
|
|
|
|
|
<Table
|
|
|
|
|
dataSource={modalData}
|
|
|
|
|
rowSelection={{
|
|
|
|
|
type: 'checkbox',
|
|
|
|
|
selectedRowKeys: modalSelectKey,
|
|
|
|
|
onChange: (selectedRowKeys: any[], selectedRows: any[]) => {
|
|
|
|
|
setModalSelectKey(selectedRowKeys);
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
bordered={false}
|
|
|
|
|
rowKey="id"
|
|
|
|
|
columns={columns}
|
|
|
|
|
scroll={{ y: 400 }}
|
|
|
|
|
pagination={false}
|
|
|
|
|
/>
|
|
|
|
|
</Modal>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
