|
@ -1,24 +1,159 @@ |
|
|
'use strict'; |
|
|
'use strict'; |
|
|
import React, { useEffect, useRef } from 'react'; |
|
|
import React, { useEffect, useState, useRef } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { push } from 'react-router-redux'; |
|
|
import { push } from 'react-router-redux'; |
|
|
import { Form, Button, Toast, Table } from '@douyinfe/semi-ui'; |
|
|
import { Popconfirm, Button, Toast, Skeleton, Table, Tag } from '@douyinfe/semi-ui'; |
|
|
import { IconLock, IconUser } from '@douyinfe/semi-icons'; |
|
|
import { IconChevronDown } from '@douyinfe/semi-icons'; |
|
|
|
|
|
import { SkeletonScreen } from "$components"; |
|
|
|
|
|
import GatewayStatusModal from './gatewayStatusModal' |
|
|
|
|
|
import GatewayEditModal from './gatewayEditModal' |
|
|
|
|
|
|
|
|
const GatewayManage = props => { |
|
|
const GatewayManage = props => { |
|
|
const { dispatch, user, error, actions, apiRoot, isRequesting } = props |
|
|
const { dispatch, user, error, actions } = props |
|
|
|
|
|
const { edition } = actions; |
|
|
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
|
|
|
const [tableData, setTableData] = useState([]); |
|
|
|
|
|
const [limits, setLimits] = useState()//每页实际条数 |
|
|
|
|
|
const [detailV, setDetailV] = useState(false) |
|
|
|
|
|
const [editV, setEditV] = useState(false) |
|
|
|
|
|
const [dataToModal, setDataToModal] = useState(null) |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
|
|
|
getTableData(query) |
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
const getTableData = (obj) => { |
|
|
|
|
|
let { limit, page } = obj |
|
|
|
|
|
let queryObj = { limit, offset: limit * page } |
|
|
|
|
|
dispatch(edition.getGateways(queryObj)).then(res => {//查询网关列表 |
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
setTableData(res.payload.data.data); |
|
|
|
|
|
setLimits(res.payload.data.total); |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const ableDevice = (id, v) => { |
|
|
|
|
|
let ableObj = { "enabled": v } |
|
|
|
|
|
dispatch(edition.ableGateway(id, ableObj)).then(r => { |
|
|
|
|
|
if (r.success) { |
|
|
|
|
|
getTableData(query) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const aStyle = { color: '#40a9ff', cursor: 'pointer' } |
|
|
|
|
|
const columns = [ |
|
|
|
|
|
{ |
|
|
|
|
|
title: "序列号", |
|
|
|
|
|
dataIndex: "serialNo", |
|
|
|
|
|
key: "serialNo", |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "名称", |
|
|
|
|
|
dataIndex: "name", |
|
|
|
|
|
key: "name", |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "在线状态", |
|
|
|
|
|
dataIndex: "state", |
|
|
|
|
|
key: "state", |
|
|
|
|
|
render: (text, record) => { |
|
|
|
|
|
return text ? <Tag color='green'>在线</Tag> : <Tag color='grey'>离线</Tag> |
|
|
|
|
|
} |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "固件信息", |
|
|
|
|
|
dataIndex: "hardwareName", |
|
|
|
|
|
key: "hardwareName", |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "软件信息", |
|
|
|
|
|
dataIndex: "softwareVer", |
|
|
|
|
|
key: "softwareVer", |
|
|
|
|
|
render: (text, record) => <span>{text || '-'}</span> |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "绑定结构物数", |
|
|
|
|
|
dataIndex: "thingIds", |
|
|
|
|
|
key: "thingIds", |
|
|
|
|
|
render: (text, record) => <span>{text.length}</span> |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "是否启用", |
|
|
|
|
|
dataIndex: "enabled", |
|
|
|
|
|
key: "enabled", |
|
|
|
|
|
render: (text, record) => <span>{text ? '是' : '否'}</span> |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "状态详情", |
|
|
|
|
|
dataIndex: "detail", |
|
|
|
|
|
key: "detail", |
|
|
|
|
|
render: (text, record) => <a style={aStyle} onClick={() => { |
|
|
|
|
|
setDetailV(true) |
|
|
|
|
|
setDataToModal(record) |
|
|
|
|
|
}}>查看</a> |
|
|
|
|
|
}, { |
|
|
|
|
|
title: "操作", |
|
|
|
|
|
dataIndex: "action", |
|
|
|
|
|
key: "action", |
|
|
|
|
|
render: (text, record) => { |
|
|
|
|
|
return <div> |
|
|
|
|
|
<Popconfirm |
|
|
|
|
|
title="提示" |
|
|
|
|
|
content={`确认${record.enabled ? '禁用' : '启用'}该网关?`} |
|
|
|
|
|
onConfirm={() => { |
|
|
|
|
|
ableDevice(record.id, !record.enabled) |
|
|
|
|
|
}}> |
|
|
|
|
|
<a style={aStyle}>{record.enabled ? '禁用' : '启用'}</a> |
|
|
|
|
|
</Popconfirm> |
|
|
|
|
|
|
|
|
|
|
|
<a style={{ ...aStyle, marginLeft: 15 }} onClick={() => { |
|
|
|
|
|
setEditV(true) |
|
|
|
|
|
setDataToModal(record) |
|
|
|
|
|
}}>编辑</a> |
|
|
|
|
|
<a style={{ ...aStyle, marginLeft: 15 }} onClick={() => { |
|
|
|
|
|
|
|
|
}, []) |
|
|
}}>删除</a> |
|
|
|
|
|
<span style={{ ...aStyle, marginLeft: 15 }} onClick={() => { |
|
|
|
|
|
|
|
|
|
|
|
}}>更多<IconChevronDown /></span> |
|
|
|
|
|
</div> |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
]; |
|
|
return ( |
|
|
return ( |
|
|
<div style={{}}> |
|
|
<div style={{}}> |
|
|
网关设备列表 |
|
|
<Skeleton |
|
|
|
|
|
loading={false} |
|
|
|
|
|
active={true} |
|
|
|
|
|
placeholder={SkeletonScreen()} |
|
|
|
|
|
> |
|
|
|
|
|
<Table |
|
|
|
|
|
columns={columns} |
|
|
|
|
|
dataSource={tableData} |
|
|
|
|
|
bordered={false} |
|
|
|
|
|
empty="暂无数据" |
|
|
|
|
|
style={{ |
|
|
|
|
|
padding: "0px 20px", |
|
|
|
|
|
}} |
|
|
|
|
|
pagination={{ |
|
|
|
|
|
current: query.page + 1, |
|
|
|
|
|
total: limits, |
|
|
|
|
|
showSizeChanger: true, |
|
|
|
|
|
showQuickJumper: true, |
|
|
|
|
|
showTotal: (total) => { |
|
|
|
|
|
return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / limits)}页,${total}项`}</span> |
|
|
|
|
|
}, |
|
|
|
|
|
onChange: (page, pageSize) => { |
|
|
|
|
|
setQuery({ limit: pageSize, page: page - 1 }); |
|
|
|
|
|
getTableData({ limit: pageSize, page: page - 1 }); |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
/> |
|
|
|
|
|
</Skeleton> |
|
|
|
|
|
{ |
|
|
|
|
|
detailV ? <GatewayStatusModal |
|
|
|
|
|
onCancel={() => setDetailV(false)} |
|
|
|
|
|
dataToModal={dataToModal} /> : '' |
|
|
|
|
|
} |
|
|
|
|
|
{ |
|
|
|
|
|
editV ? <GatewayEditModal |
|
|
|
|
|
onCancel={() => setEditV(false)} |
|
|
|
|
|
dataToModal={dataToModal} /> : '' |
|
|
|
|
|
} |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|