|
@ -1,111 +1,111 @@ |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { Button, Table, Popconfirm, Pagination,Select,Input,Switch,Notification,Progress } from '@douyinfe/semi-ui'; |
|
|
import { Button, Table, Popconfirm, Pagination, Select, Input, Switch, Notification, Progress } from '@douyinfe/semi-ui'; |
|
|
import moment from 'moment' |
|
|
import moment from 'moment' |
|
|
import FirmwareListModal from '../components/firmwareListModal'; |
|
|
import FirmwareListModal from '../components/firmwareListModal'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const DeviceManagement = (props) => { |
|
|
const DeviceManagement = (props) => { |
|
|
const {actions,dispatch,pepProjectId,user}=props |
|
|
const { actions, dispatch, pepProjectId, user } = props |
|
|
const {firmwareUpgrade}=actions |
|
|
const { firmwareUpgrade } = actions |
|
|
const [updataButtonDisabled,setUpdataButtonDisabled]=useState(true)//批量升级的按钮的显示与隐藏 |
|
|
const [updataButtonDisabled, setUpdataButtonDisabled] = useState(true)//批量升级的按钮的显示与隐藏 |
|
|
const [firmwareModalVis,setFirmwareModalVis]=useState(false) |
|
|
const [firmwareModalVis, setFirmwareModalVis] = useState(false) |
|
|
const [strucAndDeviceType,setStrucAndDeviceType]=useState([])// |
|
|
const [strucAndDeviceType, setStrucAndDeviceType] = useState([])// |
|
|
const [struc,setStruc]=useState([])// |
|
|
const [struc, setStruc] = useState([])// |
|
|
const [deviceType,setDeviceType]=useState([])//设备类型的optionList |
|
|
const [deviceType, setDeviceType] = useState([])//设备类型的optionList |
|
|
const [data,setData]=useState([])//列表数据 |
|
|
const [data, setData] = useState([])//列表数据 |
|
|
const [thingIds,setThingIds]=useState([])//结构物id数组 |
|
|
const [thingIds, setThingIds] = useState([])//结构物id数组 |
|
|
const [defaultVal,setDefaultVal]=useState('')//设备类型id |
|
|
const [defaultVal, setDefaultVal] = useState('')//设备类型id |
|
|
const [thingId,setThingId]=useState()//单个结构物id |
|
|
const [thingId, setThingId] = useState()//单个结构物id |
|
|
const [searchVal,setSearchVal]=useState()//搜索框值 |
|
|
const [searchVal, setSearchVal] = useState()//搜索框值 |
|
|
const [recordRow,setRecordRow]=useState() |
|
|
const [recordRow, setRecordRow] = useState() |
|
|
const [selectedRows,setSelectedRows]=useState([])//选择的key |
|
|
const [selectedRows, setSelectedRows] = useState([])//选择的key |
|
|
const [selectdR,setSelectedR]=useState([])//选择行 |
|
|
const [selectdR, setSelectedR] = useState([])//选择行 |
|
|
const [vData,setVData]=useState([])//版本信息 |
|
|
const [vData, setVData] = useState([])//版本信息 |
|
|
const [id,setId]=useState()//初始化展示的结构物 |
|
|
const [id, setId] = useState()//初始化展示的结构物 |
|
|
const getData=(data)=>{ |
|
|
const getData = (data) => { |
|
|
dispatch(firmwareUpgrade.getThingMessages(data)).then((res)=>{ |
|
|
dispatch(firmwareUpgrade.getThingMessages(data)).then((res) => { |
|
|
if(res.success) { |
|
|
if (res.success) { |
|
|
setData(res.payload.data) |
|
|
setData(res.payload.data) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
useEffect(()=>{ |
|
|
useEffect(() => { |
|
|
//结构物和设备类型 |
|
|
//结构物和设备类型 |
|
|
dispatch(firmwareUpgrade.getStruc({pepProjectId})).then((res)=>{ |
|
|
dispatch(firmwareUpgrade.getStruc({ pepProjectId })).then((res) => { |
|
|
if(res.success) { |
|
|
if (res.success) { |
|
|
setStrucAndDeviceType( res.payload.data) |
|
|
setStrucAndDeviceType(res.payload.data) |
|
|
setStruc( res.payload.data?.map(item=>{ |
|
|
setStruc(res.payload.data?.map(item => { |
|
|
return {label:item.strucName,value:item.thingId} |
|
|
return { label: item.strucName, value: item.thingId } |
|
|
})) |
|
|
})) |
|
|
setThingIds(res.payload.data?.map(item=>item.thingId)?.join(',')||'') |
|
|
setThingIds(res.payload.data?.map(item => item.thingId)?.join(',') || '') |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
// console.log('xxxx111',user) |
|
|
// console.log('xxxx111',user) |
|
|
dispatch(firmwareUpgrade.getFirmware()).then(res=>{ |
|
|
dispatch(firmwareUpgrade.getFirmware()).then(res => { |
|
|
if(res.success) setVData(res.payload.data) |
|
|
if (res.success) setVData(res.payload.data) |
|
|
}) |
|
|
}) |
|
|
},[]) |
|
|
}, [pepProjectId]) |
|
|
useEffect(()=>{ |
|
|
useEffect(() => { |
|
|
if(thingIds&&thingIds.length){ |
|
|
if (thingIds && thingIds.length) { |
|
|
const data={thingIds:thingIds.split(',')[0]||'000'}//给一个初始化的值 |
|
|
const data = { thingIds: thingIds.split(',')[0] || '000' }//给一个初始化的值 |
|
|
setId(thingIds.split(',')[0]) |
|
|
setId(thingIds.split(',')[0]) |
|
|
getData(data) |
|
|
getData(data) |
|
|
} |
|
|
} |
|
|
},[thingIds]) |
|
|
}, [thingIds]) |
|
|
|
|
|
|
|
|
const structChange =value => { |
|
|
const structChange = value => { |
|
|
setId(value) |
|
|
setId(value) |
|
|
clearSelectedRows() |
|
|
clearSelectedRows() |
|
|
setUpdataButtonDisabled(true) |
|
|
setUpdataButtonDisabled(true) |
|
|
const deviceTypeList= strucAndDeviceType?.find(item=>item.thingId==value)?.deviceType?.map(child=>{ |
|
|
const deviceTypeList = strucAndDeviceType?.find(item => item.thingId == value)?.deviceType?.map(child => { |
|
|
return { |
|
|
return { |
|
|
label:child.model, |
|
|
label: child.model, |
|
|
value:child.id |
|
|
value: child.id |
|
|
} |
|
|
} |
|
|
})||[] |
|
|
}) || [] |
|
|
setDefaultVal('') |
|
|
setDefaultVal('') |
|
|
// console.log('event',deviceTypeList) |
|
|
// console.log('event',deviceTypeList) |
|
|
setDeviceType(deviceTypeList) |
|
|
setDeviceType(deviceTypeList) |
|
|
setThingId(value) |
|
|
setThingId(value) |
|
|
const data={thingIds:value,device_meta_id:defaultVal} |
|
|
const data = { thingIds: value, device_meta_id: defaultVal } |
|
|
getData(data) |
|
|
getData(data) |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
const deviceTypeChange=value=>{ |
|
|
const deviceTypeChange = value => { |
|
|
setUpdataButtonDisabled(true) |
|
|
setUpdataButtonDisabled(true) |
|
|
clearSelectedRows() |
|
|
clearSelectedRows() |
|
|
setDefaultVal(value) |
|
|
setDefaultVal(value) |
|
|
const data={thingIds:thingId,device_meta_id:value} |
|
|
const data = { thingIds: thingId, device_meta_id: value } |
|
|
getData(data) |
|
|
getData(data) |
|
|
// console.log(value,'event') |
|
|
// console.log(value,'event') |
|
|
} |
|
|
} |
|
|
//清除结构物的逻辑 |
|
|
//清除结构物的逻辑 |
|
|
const clearHandler=()=>{ |
|
|
const clearHandler = () => { |
|
|
setUpdataButtonDisabled(true) |
|
|
setUpdataButtonDisabled(true) |
|
|
clearSelectedRows() |
|
|
clearSelectedRows() |
|
|
const data={thingIds} |
|
|
const data = { thingIds } |
|
|
getData(data) |
|
|
getData(data) |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
//清楚设备类型的逻辑 |
|
|
//清楚设备类型的逻辑 |
|
|
const cleartypeHandler=()=>{ |
|
|
const cleartypeHandler = () => { |
|
|
setUpdataButtonDisabled(true) |
|
|
setUpdataButtonDisabled(true) |
|
|
clearSelectedRows() |
|
|
clearSelectedRows() |
|
|
setDefaultVal(null) |
|
|
setDefaultVal(null) |
|
|
const data={thingIds:thingId} |
|
|
const data = { thingIds: thingId } |
|
|
getData(data) |
|
|
getData(data) |
|
|
} |
|
|
} |
|
|
//搜索按钮的逻辑 |
|
|
//搜索按钮的逻辑 |
|
|
const searchHandler=()=>{ |
|
|
const searchHandler = () => { |
|
|
if(!thingId&&!defaultVal){ |
|
|
if (!thingId && !defaultVal) { |
|
|
const data={thingIds} |
|
|
const data = { thingIds } |
|
|
getData(data) |
|
|
getData(data) |
|
|
}else{ |
|
|
} else { |
|
|
const data={thingIds:thingId,device_meta_id:defaultVal,searchVal} |
|
|
const data = { thingIds: thingId, device_meta_id: defaultVal, searchVal } |
|
|
getData(data) |
|
|
getData(data) |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
@ -122,19 +122,19 @@ const DeviceManagement = (props) => { |
|
|
// console.log(`select row: ${selected}`, record); |
|
|
// console.log(`select row: ${selected}`, record); |
|
|
// }, |
|
|
// }, |
|
|
onSelectAll: (selected, selectedRows) => { |
|
|
onSelectAll: (selected, selectedRows) => { |
|
|
setUpdataButtonDisabled(!selectedRows.every(item=>selectedRows[0]?.deviceType===item.deviceType&&item.switchStatus)) |
|
|
setUpdataButtonDisabled(!selectedRows.every(item => selectedRows[0]?.deviceType === item.deviceType && item.switchStatus)) |
|
|
}, |
|
|
}, |
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
setSelectedR(selectedRows) |
|
|
setSelectedR(selectedRows) |
|
|
setSelectedRows(selectedRowKeys) |
|
|
setSelectedRows(selectedRowKeys) |
|
|
// console.log('xxxx',selectedRows) |
|
|
// console.log('xxxx',selectedRows) |
|
|
//选择之后,清空选择 |
|
|
//选择之后,清空选择 |
|
|
if(selectedRows&&selectedRows.length===0){ |
|
|
if (selectedRows && selectedRows.length === 0) { |
|
|
setUpdataButtonDisabled(true) |
|
|
setUpdataButtonDisabled(true) |
|
|
} |
|
|
} |
|
|
//选择很多的时候,如果有设备型号不对应的情况 |
|
|
//选择很多的时候,如果有设备型号不对应的情况 |
|
|
if(selectedRows&&selectedRows.length>0){ |
|
|
if (selectedRows && selectedRows.length > 0) { |
|
|
setUpdataButtonDisabled(!selectedRows.every(item=>selectedRows[0].deviceType===item.deviceType&&item.switchStatus)) |
|
|
setUpdataButtonDisabled(!selectedRows.every(item => selectedRows[0].deviceType === item.deviceType && item.switchStatus)) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -143,15 +143,15 @@ const DeviceManagement = (props) => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let columns=[{ |
|
|
let columns = [{ |
|
|
title: '序号', |
|
|
title: '序号', |
|
|
render: (t, r, i) => { |
|
|
render: (t, r, i) => { |
|
|
return i + 1; |
|
|
return i + 1; |
|
|
} |
|
|
} |
|
|
},{ |
|
|
}, { |
|
|
title: '设备名称', |
|
|
title: '设备名称', |
|
|
dataIndex: 'deviceName' |
|
|
dataIndex: 'deviceName' |
|
|
},{ |
|
|
}, { |
|
|
title: '设备型号', |
|
|
title: '设备型号', |
|
|
dataIndex: 'deviceType' |
|
|
dataIndex: 'deviceType' |
|
|
}, |
|
|
}, |
|
@ -165,33 +165,33 @@ const DeviceManagement = (props) => { |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '升级状态', |
|
|
title: '升级状态', |
|
|
render:(_,record)=>{ |
|
|
render: (_, record) => { |
|
|
return record.status!=='未升级'&&record.status!=='升级成功'?<Progress percent={parseFloat(record.updatePercentage||0)} showInfo></Progress>:record.status |
|
|
return record.status !== '未升级' && record.status !== '升级成功' ? <Progress percent={parseFloat(record.updatePercentage || 0)} showInfo></Progress> : record.status |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '升级开关状态', |
|
|
title: '升级开关状态', |
|
|
dataIndex: 'switchStatus' , |
|
|
dataIndex: 'switchStatus', |
|
|
render:(_,record)=>{ |
|
|
render: (_, record) => { |
|
|
return <Switch disabled defaultChecked={record.switchStatus}></Switch> |
|
|
return <Switch disabled defaultChecked={record.switchStatus}></Switch> |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '操作', |
|
|
title: '操作', |
|
|
render:(_,record)=>{ |
|
|
render: (_, record) => { |
|
|
return <div> |
|
|
return <div> |
|
|
<Button type="secondary" onClick={()=>{ |
|
|
<Button type="secondary" onClick={() => { |
|
|
if(record.switchStatus){ |
|
|
if (record.switchStatus) { |
|
|
setFirmwareModalVis(true) |
|
|
setFirmwareModalVis(true) |
|
|
setRecordRow([record]) |
|
|
setRecordRow([record]) |
|
|
}else{ |
|
|
} else { |
|
|
Notification.info({ |
|
|
Notification.info({ |
|
|
title: '提示', |
|
|
title: '提示', |
|
|
content: '请到安心云平台打开升级开关后进行升级。', |
|
|
content: '请到安心云平台打开升级开关后进行升级。', |
|
|
duration: 3, |
|
|
duration: 3, |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
if(record.status!=='未升级'&&record.status!=='升级成功'){ |
|
|
if (record.status !== '未升级' && record.status !== '升级成功') { |
|
|
Notification.info({ |
|
|
Notification.info({ |
|
|
title: '提示', |
|
|
title: '提示', |
|
|
content: '该设备仍在升级中,请在完成升级后再操作。', |
|
|
content: '该设备仍在升级中,请在完成升级后再操作。', |
|
@ -203,9 +203,9 @@ const DeviceManagement = (props) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
] |
|
|
] |
|
|
return <><div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
|
|
return <><div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center',marginRight:30 }}> |
|
|
<div style={{ display: 'flex', alignItems: 'center', marginRight: 30 }}> |
|
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
|
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>设备管理</div> |
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>设备管理</div> |
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>Device Management</div> |
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>Device Management</div> |
|
@ -214,40 +214,41 @@ return <><div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20 |
|
|
onChange={structChange} |
|
|
onChange={structChange} |
|
|
onClear={clearHandler} |
|
|
onClear={clearHandler} |
|
|
value={id} // 设置默认值为第一个选项的值 |
|
|
value={id} // 设置默认值为第一个选项的值 |
|
|
style={{ width:300,marginRight:10}}> |
|
|
style={{ width: 300, marginRight: 10 }}> |
|
|
</Select> |
|
|
</Select> |
|
|
<Select placeholder='请选择设备型号' value={defaultVal} optionList={deviceType} |
|
|
<Select placeholder='请选择设备型号' value={defaultVal} optionList={deviceType} |
|
|
onClear={cleartypeHandler} |
|
|
onClear={cleartypeHandler} |
|
|
onChange={deviceTypeChange} |
|
|
onChange={deviceTypeChange} |
|
|
filter |
|
|
filter |
|
|
showClear |
|
|
showClear |
|
|
style={{ width:300,marginRight:10}}></Select> |
|
|
style={{ width: 300, marginRight: 10 }}></Select> |
|
|
<Button style={{marginRight:10}} type="secondary" disabled={updataButtonDisabled} onClick={()=>{ |
|
|
<Button style={{ marginRight: 10 }} type="secondary" disabled={updataButtonDisabled} onClick={() => { |
|
|
setFirmwareModalVis(true); |
|
|
setFirmwareModalVis(true); |
|
|
setRecordRow(selectdR) |
|
|
setRecordRow(selectdR) |
|
|
}}>固件升级</Button> |
|
|
}}>固件升级</Button> |
|
|
<Input placeholder='请输入设备名称' style={{ width:300,marginRight:10}} onChange={(e)=>{setSearchVal(e)}}></Input> |
|
|
<Input placeholder='请输入设备名称' style={{ width: 300, marginRight: 10 }} onChange={(e) => { setSearchVal(e) }}></Input> |
|
|
<Button style={{marginRight:10}} type="secondary" theme='solid' |
|
|
<Button style={{ marginRight: 10 }} type="secondary" theme='solid' |
|
|
onClick={searchHandler} |
|
|
onClick={searchHandler} |
|
|
>查询</Button> |
|
|
>查询</Button> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div style={{marginTop:10}}> |
|
|
<div style={{ marginTop: 10 }}> |
|
|
<Table columns={columns} rowSelection={rowSelection} dataSource={data}></Table> |
|
|
<Table columns={columns} rowSelection={rowSelection} dataSource={data}></Table> |
|
|
<FirmwareListModal vData={vData} versionData={data} modalVis={firmwareModalVis} recordRow={recordRow} onCancel={()=>{setFirmwareModalVis(false);setRecordRow(null)}}></FirmwareListModal> |
|
|
<FirmwareListModal vData={vData} versionData={data} modalVis={firmwareModalVis} recordRow={recordRow} onCancel={() => { setFirmwareModalVis(false); setRecordRow(null) }}></FirmwareListModal> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</> |
|
|
</> |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
function mapStateToProps (state) { |
|
|
const { auth, global, getPush } = state; |
|
|
const { auth, global, getPush } = state; |
|
|
|
|
|
console.log(222, global); |
|
|
return { |
|
|
return { |
|
|
loading: getPush.isRequesting, |
|
|
loading: getPush.isRequesting, |
|
|
user: auth.user, |
|
|
user: auth.user, |
|
|
actions: global.actions, |
|
|
actions: global.actions, |
|
|
pepProjectId:global.pepProjectId |
|
|
pepProjectId: global.pepProjectId |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(DeviceManagement); |
|
|
export default connect(mapStateToProps)(DeviceManagement); |