Browse Source

组网鉴权

dev
wenlele 1 year ago
parent
commit
616516863f
  1. 24
      api/config.js
  2. 2
      web-network/client/src/index.js
  3. 79
      web-network/client/src/sections/auth/containers/login.js
  4. 40
      web-network/client/src/sections/network/actions/network.js
  5. 6
      web-network/client/src/sections/network/components/device-tree/equipment-option.js
  6. 552
      web-network/client/src/sections/network/components/device-tree/index.js
  7. 18
      web-network/client/src/sections/network/components/device-tree/zuwang-main.js
  8. 32
      web-network/client/src/sections/network/containers/device-monitor.js
  9. 612
      web-network/client/src/sections/network/containers/tableShow.js
  10. 4
      web/client/src/sections/analysis/containers/network.jsx

24
api/config.js

@ -240,17 +240,19 @@ const product = {
{ p: '/project/group/:groupId/detail', o: 'GET' }, { p: '/project/group/:groupId/detail', o: 'GET' },
{ p: '/project/workOrders/repairRank', o: 'GET' }, { p: '/project/workOrders/repairRank', o: 'GET' },
{ p: '/project/workOrders', o: 'GET' }, { p: '/project/workOrders', o: 'GET' },
{ p: '/organizations/:pepProjectId/struc', o: 'GET' },
{ p: '/things/:iotaThingId/deploys', o: 'GET' },
{ p: '/meta/things/:iotaThingId/devices', o: 'GET' }, // { p: '/organizations/:pepProjectId/struc', o: 'GET' },
{ p: '/metrics/things/:iotaThingId/devices/link_status', o: 'GET' }, // { p: '/things/:iotaThingId/deploys', o: 'GET' },
{ p: '/things/:iotaThingId/deploy', o: 'GET' }, // { p: '/meta/things/:iotaThingId/devices', o: 'GET' },
{ p: '/sensors/last/data', o: 'POST' }, // { p: '/metrics/things/:iotaThingId/devices/link_status', o: 'GET' },
{ p: '/meta/things/:iotaThingId/devices', o: 'GET' }, // { p: '/things/:iotaThingId/deploy', o: 'GET' },
{ p: '/devices/alarms', o: 'POST' }, // { p: '/sensors/last/data', o: 'POST' },
{ p: '/devices/cardStatus', o: 'POST' }, // { p: '/meta/things/:iotaThingId/devices', o: 'GET' },
{ p: '/metrics/devices/:deviceId/link_status', o: 'GET' }, // { p: '/devices/alarms', o: 'POST' },
{ p: '/device/:deviceId/alarms', o: 'GET' }, // { p: '/devices/cardStatus', o: 'POST' },
// { p: '/metrics/devices/:deviceId/link_status', o: 'GET' },
// { p: '/device/:deviceId/alarms', o: 'GET' },
], // 不做认证的路由,也可以使用 exclude: ["*"] 跳过所有路由 ], // 不做认证的路由,也可以使用 exclude: ["*"] 跳过所有路由

2
web-network/client/src/index.js

@ -4,4 +4,4 @@ import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import App from './app'; import App from './app';
render((<App projectName="南昌县智慧交通监管系统" />), document.getElementById('App')); render((<App projectName="运维组网" />), document.getElementById('App'));

79
web-network/client/src/sections/auth/containers/login.js

@ -73,45 +73,48 @@ const Login = props => {
return ( return (
<div className='login'> <div>
{/* <div className='left'></div> */} {"{ token : 未生效,请刷新页面}"}
<div className='right'> </div>
<div className='loginBox'> // <div className='login'>
<h1>南昌县智慧交通监管系统</h1> // {/* <div className='left'></div> */}
<Form onKeyDown={enterHandler}> // <div className='right'>
<FormItem> // <div className='loginBox'>
<div className='loginFormTit'>用户名</div> // <h1>南昌县智慧交通监管系统</h1>
<Input // <Form onKeyDown={enterHandler}>
className='loginInp' // <FormItem>
type="text" // <div className='loginFormTit'>用户名</div>
value={username} // <Input
maxlength={11} // className='loginInp'
onChange={e => { // type="text"
//('e.target.value', e.target.value) // value={username}
setUserName(e.target.value) // maxlength={11}
setInputChanged(true) // onChange={e => {
}} // //('e.target.value', e.target.value)
/> // setUserName(e.target.value)
</FormItem> // setInputChanged(true)
<div className='loginFormTit'>密码</div> // }}
<FormItem> // />
<Input // </FormItem>
className='loginInp' // <div className='loginFormTit'>密码</div>
type="password" // <FormItem>
value={password} // <Input
// className='loginInp'
// type="password"
// value={password}
onChange={e => { // onChange={e => {
//console.log('setPassword', e.target.value) // //console.log('setPassword', e.target.value)
setPassword(e.target.value) // setPassword(e.target.value)
setInputChanged(true) // setInputChanged(true)
}} // }}
/> // />
</FormItem> // </FormItem>
</Form> // </Form>
<Button type="primary" className='loginBtn' loading={isRequesting} onClick={handleLogin}>登录</Button> // <Button type="primary" className='loginBtn' loading={isRequesting} onClick={handleLogin}>登录</Button>
</div> // </div>
</div> // </div>
</div> // </div>
); );
} }

40
web-network/client/src/sections/network/actions/network.js

@ -4,84 +4,84 @@ import { basicAction } from '@peace/utils';
import { ApiTable } from '$utils'; import { ApiTable } from '$utils';
export function getOrganizationsStruc (id) { export function getOrganizationsStruc (id, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'get', type: 'get',
dispatch: dispatch, dispatch: dispatch,
actionType: 'GET_ORGANIZATIONS_STRUC', actionType: 'GET_ORGANIZATIONS_STRUC',
url: `${ApiTable.organizationsStruc.replace('{pepProjectId}', id)}`, url: `${ApiTable.organizationsStruc.replace('{pepProjectId}', id)}?token=${token}`,
msg: { error: '获取项目下的结构物信息失败' }, msg: { error: '获取项目下的结构物信息失败' },
reducer: { name: 'organizationsStruc' } reducer: { name: 'organizationsStruc' }
}) })
} }
export function getThingsDeploy (id) { export function getThingsDeploy (id, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'get', type: 'get',
dispatch: dispatch, dispatch: dispatch,
actionType: 'GET_THINGS_DEPLOY', actionType: 'GET_THINGS_DEPLOY',
url: `${ApiTable.thingsDeploy.replace('{iotaThingId}', id)}`, url: `${ApiTable.thingsDeploy.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取设备部署信息失败' }, msg: { error: '获取设备部署信息失败' },
reducer: { name: 'deviceList' } reducer: { name: 'deviceList' }
}) })
} }
export function getDeviceMetaDeployed (id) { export function getDeviceMetaDeployed (id, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'get', type: 'get',
dispatch: dispatch, dispatch: dispatch,
actionType: 'GET_DEVIC_META_DEPLOYED', actionType: 'GET_DEVIC_META_DEPLOYED',
url: `${ApiTable.deviceMetaDeployed.replace('{iotaThingId}', id)}`, url: `${ApiTable.deviceMetaDeployed.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取部署设备原型失败' }, msg: { error: '获取部署设备原型失败' },
reducer: { name: 'deviceMeta' } reducer: { name: 'deviceMeta' }
}) })
} }
export function getIotaThingsLlinkStatus (id) { export function getIotaThingsLlinkStatus (id, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'get', type: 'get',
dispatch: dispatch, dispatch: dispatch,
actionType: 'GET_IOTA_ThINGS_LINK_STATUS', actionType: 'GET_IOTA_ThINGS_LINK_STATUS',
url: `${ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', id)}`, url: `${ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取设备在线状态/以结构物id集体获取失败' }, msg: { error: '获取设备在线状态/以结构物id集体获取失败' },
reducer: { name: '' } reducer: { name: '' }
}) })
} }
export function findDeviceMetaDeployed (id) { export function findDeviceMetaDeployed (id, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'get', type: 'get',
dispatch: dispatch, dispatch: dispatch,
actionType: 'FIND_DEVICE_META_DEPLOYED', actionType: 'FIND_DEVICE_META_DEPLOYED',
url: `${ApiTable.findDeviceMetaDeployed.replace('{iotaThingId}', id)}`, url: `${ApiTable.findDeviceMetaDeployed.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取单个结构物的设备信息失败' }, msg: { error: '获取单个结构物的设备信息失败' },
reducer: { name: 'deviceMetaDeployed', params: { noClear: true } }, reducer: { name: 'deviceMetaDeployed', params: { noClear: true } },
}) })
} }
export function findSensorLastData (data) { export function findSensorLastData (data, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'post', type: 'post',
data, data,
dispatch: dispatch, dispatch: dispatch,
actionType: 'FIND_SENSOR_LAST_DATA', actionType: 'FIND_SENSOR_LAST_DATA',
url: `${ApiTable.findSensorLastData}`, url: `${ApiTable.findSensorLastData}?token=${token}`,
msg: { error: '原始数据查询失败' }, msg: { error: '原始数据查询失败' },
reducer: { name: 'sensorLastData' } reducer: { name: 'sensorLastData' }
}) })
} }
export function getDevicesAlarms (deviceIds, query) { export function getDevicesAlarms (deviceIds, query, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'post', type: 'post',
dispatch: dispatch, dispatch: dispatch,
data: deviceIds, data: deviceIds,
query: query, query: query,
actionType: 'REQUEST_POST_DEVICES_ALARMS', actionType: 'REQUEST_POST_DEVICES_ALARMS',
url: `${ApiTable.getDevicesAlarms}?state=new`, url: `${ApiTable.getDevicesAlarms}?state=new&token=${token}`,
msg: { msg: {
error: '获取设备告警信息失败' error: '获取设备告警信息失败'
}, },
@ -92,13 +92,13 @@ export function getDevicesAlarms (deviceIds, query) {
} }
export function findDevicesCardStatus (deviceIds) { export function findDevicesCardStatus (deviceIds, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'post', type: 'post',
dispatch: dispatch, dispatch: dispatch,
data: deviceIds, data: deviceIds,
actionType: 'FIND_DEVICES_CARD_STATUS', actionType: 'FIND_DEVICES_CARD_STATUS',
url: `${ApiTable.findDevicesCardStatus}`, url: `${ApiTable.findDevicesCardStatus}?token=${token}`,
msg: { msg: {
error: '获取物联网卡信息失败' error: '获取物联网卡信息失败'
}, },
@ -108,25 +108,25 @@ export function findDevicesCardStatus (deviceIds) {
}); });
} }
export function getDevicesLlinkStatus (id) { export function getDevicesLlinkStatus (id, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'get', type: 'get',
dispatch: dispatch, dispatch: dispatch,
actionType: 'GET_DEVICES_LINK_STATUS', actionType: 'GET_DEVICES_LINK_STATUS',
url: `${ApiTable.getDevicesLlinkStatus.replace('{deviceId}', id)}`, url: `${ApiTable.getDevicesLlinkStatus.replace('{deviceId}', id)}?token=${token}`,
msg: { error: '获取设备在线状态/以设备id单个获取' }, msg: { error: '获取设备在线状态/以设备id单个获取' },
reducer: { name: '' } reducer: { name: '' }
}) })
} }
export function findAlarmsDevice (deviceIds, query) { export function findAlarmsDevice (deviceIds, query, token) {
return dispatch => basicAction({ return dispatch => basicAction({
type: 'get', type: 'get',
dispatch: dispatch, dispatch: dispatch,
query: query, query: query,
actionType: 'GET_FIND_ALARM_DEVICES', actionType: 'GET_FIND_ALARM_DEVICES',
url: `device/${deviceIds}/alarms`, url: `device/${deviceIds}/alarms?token=${token}`,
msg: { msg: {
error: '获取设备告警信息失败' error: '获取设备告警信息失败'
}, },

6
web-network/client/src/sections/network/components/device-tree/equipment-option.js

@ -13,7 +13,7 @@ import { Request } from '@peace/utils'
const TabPane = Tabs.TabPane; const TabPane = Tabs.TabPane;
export default ({ ...props }) => { export default ({ ...props }) => {
const { isEdit, devices, info, parentNode, dimensions, height, deviceMetas, dispatch, actions } = props; const { isEdit, devices, info, parentNode, dimensions, height, deviceMetas, dispatch, actions, token } = props;
const { analysis } = actions const { analysis } = actions
const [linkState, setLinkState] = useSafeState(null); const [linkState, setLinkState] = useSafeState(null);
@ -31,14 +31,14 @@ export default ({ ...props }) => {
if (info?.device?.id && info.device.id != currentDeviceId) { if (info?.device?.id && info.device.id != currentDeviceId) {
setCurrentDeviceId(info.device.id); setCurrentDeviceId(info.device.id);
setActiveKey('1'); setActiveKey('1');
dispatch(analysis.getDevicesLlinkStatus(info?.device?.id)).then(res => { dispatch(analysis.getDevicesLlinkStatus(info?.device?.id, token)).then(res => {
if (res.success) { if (res.success) {
setLinkState(res.payload?.data?.status) setLinkState(res.payload?.data?.status)
} }
}) })
dispatch(analysis.findAlarmsDevice(info?.device?.id, { limit: 5 })).then(res => { dispatch(analysis.findAlarmsDevice(info?.device?.id, { limit: 5 }, token)).then(res => {
if (res.success) { if (res.success) {
setAlarmMsg({ new: res.payload?.data?.new || [], history: res.payload?.data?.history || [] }) setAlarmMsg({ new: res.payload?.data?.new || [], history: res.payload?.data?.history || [] })
} }

552
web-network/client/src/sections/network/components/device-tree/index.js

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import moment from 'moment'; import moment from 'moment';
import { import {
Spin, Input, Button, Message, Menu, Dropdown, Row, Drawer, Spin, Input, Button, Message, Menu, Dropdown, Row, Drawer,
} from 'antd'; } from 'antd';
import { useSafeState } from 'ahooks'; import { useSafeState } from 'ahooks';
@ -16,298 +16,302 @@ const { Item } = Menu;
const { ModifyEquipmentNetworking } = AuthorizationCode; const { ModifyEquipmentNetworking } = AuthorizationCode;
export default function ({ ...props }) { export default function ({ ...props }) {
const { const {
dispatch,actions, clientHeight, deviceMetasWithFollow, deviceList, dimensionlist, struct, dispatch, actions, clientHeight, deviceMetasWithFollow, deviceList, dimensionlist, struct, token
} = props; } = props;
const [g6TreeDirection, setG6TreeDirection] = useSafeState('TB'); const [g6TreeDirection, setG6TreeDirection] = useSafeState('TB');
const [devices, setDevices] = useSafeState(null); const [devices, setDevices] = useSafeState(null);
const [selectedNode, setSelectedNode] = useSafeState(null); const [selectedNode, setSelectedNode] = useSafeState(null);
const [selectedParentNode, setSelectedParentNode] = useSafeState(null); const [selectedParentNode, setSelectedParentNode] = useSafeState(null);
const [emitDataChange, setEmitDataChange] = useSafeState(false); const [emitDataChange, setEmitDataChange] = useSafeState(false);
const [collapseAll, setCollapseAll] = useSafeState(false); const [collapseAll, setCollapseAll] = useSafeState(false);
const [collapsed, setCollapsed] = useSafeState([]); const [collapsed, setCollapsed] = useSafeState([]);
const [expandAll, setExpandAll] = useSafeState(false); const [expandAll, setExpandAll] = useSafeState(false);
const [expanded, setExpanded] = useSafeState([]); const [expanded, setExpanded] = useSafeState([]);
const [targetNode, setTargetNode] = useSafeState(''); const [targetNode, setTargetNode] = useSafeState('');
const [showOptionModal, setShowOptionModal] = useSafeState(false); const [showOptionModal, setShowOptionModal] = useSafeState(false);
// const [showAddDimensionModal, setShowAddDimensionModal] = useState(false); // const [showAddDimensionModal, setShowAddDimensionModal] = useState(false);
// const [showAddEquipmentModal, setShowAddEquipmentModal] = useState(false); // const [showAddEquipmentModal, setShowAddEquipmentModal] = useState(false);
// const [isClAdd, setIsClAdd] = useState(false); // const [isClAdd, setIsClAdd] = useState(false);
const [clientWidth, setClientWidth] = useSafeState(document.body.clientWidth - 64 - 20 - 16 - 2); const [clientWidth, setClientWidth] = useSafeState(document.body.clientWidth - 64 - 20 - 16 - 2);
// const [clTitle, setClTitle] = useState(''); // const [clTitle, setClTitle] = useState('');
const [dimensions, setDimensions] = useSafeState({}); const [dimensions, setDimensions] = useSafeState({});
const [sensorsId, setSensorsId] = useSafeState([]); const [sensorsId, setSensorsId] = useSafeState([]);
const [sensorsDataItems, setSensorsDataItems] = useSafeState({}); const [sensorsDataItems, setSensorsDataItems] = useSafeState({});
const [foldAllG6ToCenter, setFoldAllG6ToCenter] = useSafeState(false); const [foldAllG6ToCenter, setFoldAllG6ToCenter] = useSafeState(false);
const [inputSearching, setInputSearching] = useSafeState(false); const [inputSearching, setInputSearching] = useSafeState(false);
// const [httpServerInterfaceIds, setHttpServerInterfaceIds] = useState([]); // const [httpServerInterfaceIds, setHttpServerInterfaceIds] = useState([]);
useEffect(() => { useEffect(() => {
if (deviceMetasWithFollow?.devices) { if (deviceMetasWithFollow?.devices) {
// const deviceMetas = deviceMetasWithFollow?.devices || {}; // const deviceMetas = deviceMetasWithFollow?.devices || {};
// let httpServerInterfaceIds = []; // let httpServerInterfaceIds = [];
// for (let d of deviceMetas) { // for (let d of deviceMetas) {
// if (d.interfaces && d.interfaces.length) { // if (d.interfaces && d.interfaces.length) {
// for (let f of d.interfaces) { // for (let f of d.interfaces) {
// if (f.directType == 1 && f.interfaceMeta && f.interfaceMeta.name == "HTTP_SERVER") { // if (f.directType == 1 && f.interfaceMeta && f.interfaceMeta.name == "HTTP_SERVER") {
// httpServerInterfaceIds.push(f.id) // httpServerInterfaceIds.push(f.id)
// } // }
// } // }
// } // }
// } // }
// setHttpServerInterfaceIds(httpServerInterfaceIds); // setHttpServerInterfaceIds(httpServerInterfaceIds);
if (deviceList?.instances) { if (deviceList?.instances) {
const sensorsId = []; const sensorsId = [];
const sensorsDataItems = {}; const sensorsDataItems = {};
for (const id in deviceList.instances) { for (const id in deviceList.instances) {
const instances = deviceList.instances[id]; const instances = deviceList.instances[id];
if (instances.type == 's.d' && instances.instance.properties.deviceType == 'sensor') { if (instances.type == 's.d' && instances.instance.properties.deviceType == 'sensor') {
const meta = deviceMetasWithFollow.devices.find((m) => m.id == instances.instance.deviceMetaId); const meta = deviceMetasWithFollow.devices.find((m) => m.id == instances.instance.deviceMetaId);
sensorsDataItems[id] = { sensorsDataItems[id] = {
items: {}, items: {},
deviceName: instances.name, deviceName: instances.name,
}; };
if (meta) { if (meta) {
sensorsDataItems[id].items = meta.capabilities[0].properties.reduce((p, n) => { sensorsDataItems[id].items = meta.capabilities[0].properties.reduce((p, n) => {
if (n.category == 'Output') { if (n.category == 'Output') {
p[n.name] = { name: n.showName, unit: n.unit }; p[n.name] = { name: n.showName, unit: n.unit };
} }
return p; return p;
}, {}); }, {});
}
sensorsId.push(id);
}
} }
sensorsId.push(id); setSensorsId(sensorsId);
} setSensorsDataItems(sensorsDataItems);
} }
setSensorsId(sensorsId);
setSensorsDataItems(sensorsDataItems);
} }
}
if (deviceList?.instances) { if (deviceList?.instances) {
const newInstances = { ...deviceList.instances, ...dimensionlist }; const newInstances = { ...deviceList.instances, ...dimensionlist };
setDevices({ ...deviceList, instances: newInstances }); setDevices({ ...deviceList, instances: newInstances });
} else if (!devices) { } else if (!devices) {
const data = { instances: {} }; const data = { instances: {} };
const uuidNode = guid(); const uuidNode = guid();
data.instances[uuidNode] = { data.instances[uuidNode] = {
instance: {}, instance: {},
svg: { svg: {
compX: 0, compX: 0,
compY: 0, compY: 0,
isSelected: false, isSelected: false,
rotateAng: 0, rotateAng: 0,
scaleX: 1, scaleX: 1,
scaleY: 1, scaleY: 1,
x: 2498, x: 2498,
y: 1083, y: 1083,
}, },
type: 's.iota', type: 's.iota',
}; };
data.settings = { data.settings = {
grid: { grid: {
step: 20, step: 20,
}, },
height: 3072, height: 3072,
padding: 40, padding: 40,
scale: 10, scale: 10,
scrollLeft: 2047, scrollLeft: 2047,
scrollTop: 1082, scrollTop: 1082,
width: 5120, width: 5120,
}; };
setDevices(data); setDevices(data);
} }
}, [deviceList, deviceMetasWithFollow]); }, [deviceList, deviceMetasWithFollow]);
const guid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => { const guid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0; const const r = Math.random() * 16 | 0; const
v = c == 'x' ? r : (r & 0x3 | 0x8); v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16); return v.toString(16);
}); });
const closeOptionModal = () => { const closeOptionModal = () => {
setShowOptionModal(false); setShowOptionModal(false);
setSelectedNode(null); setSelectedNode(null);
}; };
const _handelNodeClick = (node) => { const _handelNodeClick = (node) => {
if (node) { if (node) {
const targetId = node.get('model').id; const targetId = node.get('model').id;
const selectedNode = { ...devices?.instances[targetId], id: targetId }; const selectedNode = { ...devices?.instances[targetId], id: targetId };
const deviceMetaId = selectedNode?.instance?.deviceMetaId; const deviceMetaId = selectedNode?.instance?.deviceMetaId;
const selectedDeviceMetaArr = []; const selectedDeviceMetaArr = [];
let selectedDeviceMeta; let selectedDeviceMeta;
if (selectedDeviceMetaArr.length == 0) { if (selectedDeviceMetaArr.length == 0) {
selectedDeviceMeta = deviceMetasWithFollow && deviceMetasWithFollow.devices selectedDeviceMeta = deviceMetasWithFollow && deviceMetasWithFollow.devices
? deviceMetasWithFollow.devices.filter((s) => s.id == deviceMetaId)[0] ? deviceMetasWithFollow.devices.filter((s) => s.id == deviceMetaId)[0]
: []; : [];
} else { } else {
selectedDeviceMeta = selectedDeviceMetaArr[0]; selectedDeviceMeta = selectedDeviceMetaArr[0];
} }
if (selectedNode.type && selectedNode.type != 's.iota') { if (selectedNode.type && selectedNode.type != 's.iota') {
// parentNode // parentNode
const parentNode = Object.keys(devices.instances).reduce((p, k) => { const parentNode = Object.keys(devices.instances).reduce((p, k) => {
const instance = devices.instances[k]; const instance = devices.instances[k];
if (instance.type == 's.l' && instance.instance.from.ownerSvgId == targetId) { if (instance.type == 's.l' && instance.instance.from.ownerSvgId == targetId) {
p = { ...devices.instances[instance.instance.to.ownerSvgId], id: instance.instance.to.ownerSvgId }; p = { ...devices.instances[instance.instance.to.ownerSvgId], id: instance.instance.to.ownerSvgId };
} }
return p; return p;
}, null); }, null);
const selectedParentNodeMetaId = parentNode ? parentNode.instance.deviceMetaId : null; const selectedParentNodeMetaId = parentNode ? parentNode.instance.deviceMetaId : null;
const selectedParentNodeMeta = selectedParentNodeMetaId ? deviceMetasWithFollow.devices.filter((s) => s.id == selectedParentNodeMetaId)[0] : null; const selectedParentNodeMeta = selectedParentNodeMetaId ? deviceMetasWithFollow.devices.filter((s) => s.id == selectedParentNodeMetaId)[0] : null;
setSelectedNode({ type: 'equipment', device: selectedNode, meta: selectedDeviceMeta }); setSelectedNode({ type: 'equipment', device: selectedNode, meta: selectedDeviceMeta });
setSelectedParentNode({ type: 'equipment', device: parentNode, meta: selectedParentNodeMeta }); setSelectedParentNode({ type: 'equipment', device: parentNode, meta: selectedParentNodeMeta });
setShowOptionModal(true); setShowOptionModal(true);
} else {
setShowOptionModal(false);
setSelectedNode(null);
setSelectedParentNode(null);
}
} else { } else {
setShowOptionModal(false); setShowOptionModal(false);
setSelectedNode(null); setSelectedNode(null);
setSelectedParentNode(null); setSelectedParentNode(null);
} }
} else { };
setShowOptionModal(false);
setSelectedNode(null);
setSelectedParentNode(null);
}
};
const emitDataChange_ = () => { const emitDataChange_ = () => {
setEmitDataChange(true); setEmitDataChange(true);
}; };
const _finishDataChange = () => { const _finishDataChange = () => {
setEmitDataChange(false); setEmitDataChange(false);
}; };
const handleNodeEnter = (node) => { const handleNodeEnter = (node) => {
const result = dimensionlist?.dimensions?.length <= 0; const result = dimensionlist?.dimensions?.length <= 0;
return result; return result;
}; };
const onCollapse = (model, collapse) => { const onCollapse = (model, collapse) => {
if (collapse) { if (collapse) {
setCollapsed(collapsed.concat([model.id])); setCollapsed(collapsed.concat([model.id]));
setExpanded(expanded.filter((c) => c != model.id)); setExpanded(expanded.filter((c) => c != model.id));
} else { } else {
setCollapsed(collapsed.filter((c) => c != model.id)); setCollapsed(collapsed.filter((c) => c != model.id));
setExpanded(expanded.concat([model.id])); setExpanded(expanded.concat([model.id]));
} }
}; };
const resetFoldAllG6ToCenter = () => { const resetFoldAllG6ToCenter = () => {
setFoldAllG6ToCenter(false); setFoldAllG6ToCenter(false);
}; };
const changeG6TreeDirection = () => { const changeG6TreeDirection = () => {
setG6TreeDirection(g6TreeDirection == 'TB' ? 'LR' : 'TB'); setG6TreeDirection(g6TreeDirection == 'TB' ? 'LR' : 'TB');
setShowOptionModal(false); setShowOptionModal(false);
}; };
const containerHeight = clientHeight - 270; const containerHeight = clientHeight - 270;
return ( return (
<div id="flag"> <div id="flag">
<div style={{ <div style={{
position: 'absolute', top: 100, left: 32, zIndex: 2, position: 'absolute', top: 100, left: 32, zIndex: 2,
}} }}
> >
<Button <Button
style={{ marginRight: 12, marginBottom: 12, float: 'left' }} style={{ marginRight: 12, marginBottom: 12, float: 'left' }}
type="primary" type="primary"
onClick={() => { onClick={() => {
setExpandAll(false); setExpandAll(false);
setCollapseAll(true); setCollapseAll(true);
setCollapsed([]); setCollapsed([]);
setExpanded([]); setExpanded([]);
setEmitDataChange(true); setEmitDataChange(true);
// setFoldAllG6ToCenter(true); // setFoldAllG6ToCenter(true);
setTargetNode(''); setTargetNode('');
document.getElementById('searchInput').value = ''; document.getElementById('searchInput').value = '';
}} }}
> >
折叠全部 折叠全部
</Button> </Button>
<Button <Button
type="primary" type="primary"
style={{ marginRight: 12, marginBottom: 12, float: 'left' }} style={{ marginRight: 12, marginBottom: 12, float: 'left' }}
onClick={() => { onClick={() => {
setCollapseAll(false); setCollapseAll(false);
setExpandAll(true); setExpandAll(true);
setCollapsed([]); setCollapsed([]);
setExpanded([]); setExpanded([]);
setEmitDataChange(true); setEmitDataChange(true);
setTargetNode(''); setTargetNode('');
document.getElementById('searchInput').value = ''; document.getElementById('searchInput').value = '';
}} }}
> >
展开全部 展开全部
</Button> </Button>
<Button type="primary" style={{ marginLeft: 12, marginBottom: 12 }} onClick={changeG6TreeDirection}>组图方向</Button> <Button type="primary" style={{ marginLeft: 12, marginBottom: 12 }} onClick={changeG6TreeDirection}>组图方向</Button>
<span style={{ float: 'left' }}> <span style={{ float: 'left' }}>
<Input.Search <Input.Search
style={{ width: 200 }} style={{ width: 200 }}
id="searchInput" id="searchInput"
onSearch={(v) => { onSearch={(v) => {
setTargetNode(v); setTargetNode(v);
setInputSearching(true); setInputSearching(true);
// localStorage.setItem('inputSearching', true) // localStorage.setItem('inputSearching', true)
}} }}
/> />
</span> </span>
</div> </div>
{ {
devices?.instances devices?.instances
&& ( && (
<ZuwangMain <ZuwangMain
data={devices.instances} data={devices.instances}
collapseAll={collapseAll} collapseAll={collapseAll}
expandAll={expandAll} expandAll={expandAll}
collapsed={collapsed} collapsed={collapsed}
expanded={expanded} expanded={expanded}
onCollapse={onCollapse} onCollapse={onCollapse}
width={clientWidth} width={clientWidth}
height={containerHeight} height={containerHeight}
emitChange={emitDataChange} emitChange={emitDataChange}
emitDataChange_={emitDataChange_} emitDataChange_={emitDataChange_}
changeFinish={_finishDataChange} changeFinish={_finishDataChange}
handelNodeClick={_handelNodeClick} handelNodeClick={_handelNodeClick}
targetNode={targetNode} targetNode={targetNode}
inputSearching={inputSearching} inputSearching={inputSearching}
setInputSearching={setInputSearching} setInputSearching={setInputSearching}
struct={struct} struct={struct}
handleNodeEnter={handleNodeEnter} handleNodeEnter={handleNodeEnter}
foldAllG6ToCenter={foldAllG6ToCenter} foldAllG6ToCenter={foldAllG6ToCenter}
resetFoldAllG6ToCenter={resetFoldAllG6ToCenter} resetFoldAllG6ToCenter={resetFoldAllG6ToCenter}
g6TreeDirection={g6TreeDirection} g6TreeDirection={g6TreeDirection}
/> token={token}
) dispatch={dispatch}
} actions={actions}
/>
)
}
<Drawer <Drawer
destroyOnClose destroyOnClose
getContainer={document.getElementById('flag')} getContainer={document.getElementById('flag')}
style={{ position: 'absolute' }} style={{ position: 'absolute' }}
mask={false} mask={false}
maskClosable={false} maskClosable={false}
visible={showOptionModal} visible={showOptionModal}
width={480} width={480}
onClose={closeOptionModal} onClose={closeOptionModal}
bodyStyle={{ padding: 8 }} bodyStyle={{ padding: 8 }}
> >
<EquipmentOption <EquipmentOption
isEdit={false} isEdit={false}
struct={struct} struct={struct}
devices={devices} devices={devices}
deviceMetas={deviceMetasWithFollow} deviceMetas={deviceMetasWithFollow}
info={selectedNode} info={selectedNode}
parentNode={selectedParentNode} parentNode={selectedParentNode}
dimensions={dimensionlist} dimensions={dimensionlist}
height={containerHeight} height={containerHeight}
dispatch={dispatch} dispatch={dispatch}
actions={actions} actions={actions}
/> token={token}
</Drawer> />
</div> </Drawer>
); </div>
);
} }

18
web-network/client/src/sections/network/components/device-tree/zuwang-main.js

@ -19,7 +19,7 @@ export default function ({ ...props }) {
const { const {
struct, data, resetFoldAllG6ToCenter, foldAllG6ToCenter, g6TreeDirection, emitChange, emitDataChange_, struct, data, resetFoldAllG6ToCenter, foldAllG6ToCenter, g6TreeDirection, emitChange, emitDataChange_,
width, height, collapseAll, collapsed, expanded, expandAll, changeFinish, targetNode, inputSearching, setInputSearching, width, height, collapseAll, collapsed, expanded, expandAll, changeFinish, targetNode, inputSearching, setInputSearching,
onCollapse, handleNodeEnter, handelNodeClick, onCollapse, handleNodeEnter, handelNodeClick, token, dispatch, actions
} = props; } = props;
const [isGetLinkStateDone, { setTrue, setFalse }] = useBoolean(false); const [isGetLinkStateDone, { setTrue, setFalse }] = useBoolean(false);
const [devicesLinkState, setDevicesLinkState] = useSafeState(null); const [devicesLinkState, setDevicesLinkState] = useSafeState(null);
@ -30,28 +30,28 @@ export default function ({ ...props }) {
const [lastClickNodeKey, setLastClickNodeKey] = useSafeState(null); const [lastClickNodeKey, setLastClickNodeKey] = useSafeState(null);
const [disCheckedKeys, setDisCheckedKeys] = useSafeState([]); const [disCheckedKeys, setDisCheckedKeys] = useSafeState([]);
let intervalLinkStatus = null; let intervalLinkStatus = null;
const { analysis } = actions
// const da = useThingsLinkStatus(struct?.iotaThingId); // const da = useThingsLinkStatus(struct?.iotaThingId);
const getThingsLinkStatus = (isCycle = false) => { const getThingsLinkStatus = (isCycle = false) => {
const iotaThingId = struct?.thingId; const iotaThingId = struct?.thingId;
if (iotaThingId) { if (iotaThingId) {
const url = ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', iotaThingId); dispatch(analysis.getIotaThingsLlinkStatus(iotaThingId, token)).then((res) => {
Request.get(url).then((res) => { if (res.payload?.data?.devices.length >= 0) {
if (res.devices.length >= 0) { setDevicesLinkState(res.payload?.data?.devices || []);
setDevicesLinkState(res.devices);
} else { } else {
intervalLinkStatus && clearInterval(intervalLinkStatus); intervalLinkStatus && clearInterval(intervalLinkStatus);
} }
if (!isCycle) { if (!isCycle) {
setTrue(); setTrue(true);
} }
}, (error) => { }, (error) => {
if (!isCycle) { if (!isCycle) {
message.warning('设备在线状态获取失败'); message.warning('设备在线状态获取失败')
setTrue(); setTrue(true);
} }
}); })
} }
}; };
useEffect(() => { useEffect(() => {

32
web-network/client/src/sections/network/containers/device-monitor.js

@ -31,41 +31,23 @@ function DeviceMonitor ({ ...props }) {
let strucParam = JSON.parse((qs.parse(props.location?.search.slice(1)) || {})?.strucData) let strucParam = JSON.parse((qs.parse(props.location?.search.slice(1)) || {})?.strucData)
const token = qs.parse(props.location?.search.slice(1))?.key
useEffect(() => { useEffect(() => {
if (strucParam?.thingId) { if (strucParam?.thingId) {
dispatch(analysis.getThingsDeploy(strucParam?.thingId)).then(res => { dispatch(analysis.getThingsDeploy(strucParam?.thingId, token)).then(res => {
console.log(3213, res);
if (res.success) { if (res.success) {
const instances = res?.payload?.data?.instances; const instances = res?.payload?.data?.instances;
if (instances) { if (instances) {
const deviceIds = Object.keys(instances).filter((k) => instances[k]?.type == 's.d'); const deviceIds = Object.keys(instances).filter((k) => instances[k]?.type == 's.d');
dispatch(analysis.getDevicesAlarms(deviceIds, { limit: 5 })); dispatch(analysis.getDevicesAlarms(deviceIds, { limit: 5 }, token));
} }
} }
}) })
dispatch(analysis.getDeviceMetaDeployed(strucParam?.thingId)) dispatch(analysis.getDeviceMetaDeployed(strucParam?.thingId, token))
} }
}, []); }, []);
useEffect(() => {
if (selectStructure && myStructList?.length > 0) {
const curStructure = myStructList.find((v) => v.id === selectStructure);
if (curStructure) {
// dispatch(actions.dataMonitor.getStationList(curStructure?.id));
// dispatch(actions.dataMonitor.getDeviceList(curStructure?.iotaThingId)).then((res) => {
// if (res.success) {
// const instances = res?.payload?.data?.instances;
// if (instances) {
// const deviceIds = Object.keys(instances).filter((k) => instances[k]?.type == 's.d');
// dispatch(actions.dataMonitor.getDevicesAlarms(deviceIds, { limit: 5 }));
// }
// }
// });
// dispatch(actions.dataMonitor.getDimensionsList(curStructure?.iotaThingId));
}
}
}, [selectStructure]);
// 展示切换 // 展示切换
const onExtraChange = (e) => { const onExtraChange = (e) => {
@ -149,10 +131,12 @@ function DeviceMonitor ({ ...props }) {
struct={strucParam} struct={strucParam}
clientHeight={clientHeight} clientHeight={clientHeight}
clientWidth={clientWidth} clientWidth={clientWidth}
token={token}
/> />
) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
: ( : (
<TableShow thingId={strucParam.thingId} project={strucParam.projectId} /> <TableShow thingId={strucParam.thingId} project={strucParam.projectId} token={token} />
) )
} }
</ProCard> </ProCard>

612
web-network/client/src/sections/network/containers/tableShow.js

@ -1,332 +1,332 @@
import React, { useEffect, useState, useRef, useMemo } from 'react' import React, { useEffect, useState, useRef, useMemo } from 'react'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Spin, Card, CardGroup, Form,Select ,Input, Button, Table, Pagination, Tooltip } from 'antd' import { Spin, Card, CardGroup, Form, Select, Input, Button, Table, Pagination, Tooltip } from 'antd'
import ExportData from '../components/export-data' import ExportData from '../components/export-data'
import moment from 'moment' import moment from 'moment'
const Network = props => { const Network = props => {
const { dispatch, actions, user, clientHeight, thingId, deviceListAlarms, devicesCardStatusList, project } = props const { dispatch, actions, user, clientHeight, thingId, deviceListAlarms, devicesCardStatusList, project, token } = props
const { analysis } = actions const { analysis } = actions
const form = useRef() //表单 const form = useRef() //表单
const [deployData, setDeployData] = useState([]) const [deployData, setDeployData] = useState([])
const [deviceData, setDeviceData] = useState([]) const [deviceData, setDeviceData] = useState([])
const [deviceMetasDeployed, setDeviceMetasDeployed] = useState([]) const [deviceMetasDeployed, setDeviceMetasDeployed] = useState([])
const [sensorId, setSensorId] = useState([]) const [sensorId, setSensorId] = useState([])
const [sensorsDataItems, setSensorsDataItems] = useState({}) const [sensorsDataItems, setSensorsDataItems] = useState({})
const [tableData, setTableData] = useState([]) //最新一次的数据 const [tableData, setTableData] = useState([]) //最新一次的数据
const [lastData, setLastData] = useState([]) //最终数据 const [lastData, setLastData] = useState([]) //最终数据
const [lastDataCopy, setLastDataCopy] = useState([]) //最终数据 const [lastDataCopy, setLastDataCopy] = useState([]) //最终数据
const [searchType, setSearchType] = useState('') const [searchType, setSearchType] = useState('')
const [searchName, setSearchName] = useState('') const [searchName, setSearchName] = useState('')
const [typeList, setTypeList] = useState([]) const [typeList, setTypeList] = useState([])
const [query, setQuery] = useState({ limit: 10, page: 0 }) //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }) //页码信息
const DeviceTypes = { const DeviceTypes = {
'DTU': 'DTU', 'DTU': 'DTU',
'gateway': '网关', 'gateway': '网关',
'sensor': '传感器', 'sensor': '传感器',
'acqUnit': '采集单元', 'acqUnit': '采集单元',
'dau.gateway': '分布式智能云采集网关', 'dau.gateway': '分布式智能云采集网关',
'dau.node': '分布式智能云采集节点', 'dau.node': '分布式智能云采集节点',
'tcp.dtu': '工作站', 'tcp.dtu': '工作站',
} }
useEffect(() => { useEffect(() => {
setLastData([]) setLastData([])
setLastDataCopy([]) setLastDataCopy([])
}, [project]) }, [project])
useEffect(() => { useEffect(() => {
if (thingId) { if (thingId) {
let dataList = [] let dataList = []
dispatch(analysis.getThingsDeploy(thingId)).then(rs => { dispatch(analysis.getThingsDeploy(thingId, token)).then(rs => {
if (rs.success) { if (rs.success) {
setDeployData(rs.payload.data) setDeployData(rs.payload.data)
dataList = rs.payload.data dataList = rs.payload.data
//列表渲染数据 //列表渲染数据
let da = [] let da = []
if (dataList.instances) { if (dataList.instances) {
Object.keys(dataList.instances).forEach(i => { Object.keys(dataList.instances).forEach(i => {
if (dataList.instances[i].type == 's.d') { if (dataList.instances[i].type == 's.d') {
da.push({ da.push({
sensorId: i, sensorId: i,
sensorName: dataList.instances[i]?.name, sensorName: dataList.instances[i]?.name,
deviceType: dataList?.instances[i]?.instance?.properties?.deviceType, deviceType: dataList?.instances[i]?.instance?.properties?.deviceType,
collectTime: '--', collectTime: '--',
data: '--', data: '--',
iotCardStatus: '--', iotCardStatus: '--',
status: '--', status: '--',
option: '--', option: '--',
}) })
} }
}) })
} }
dispatch(analysis.findDeviceMetaDeployed(thingId)).then(res => { dispatch(analysis.findDeviceMetaDeployed(thingId, token)).then(res => {
if (res.success) { if (res.success) {
setDeviceMetasDeployed(res.payload.data) setDeviceMetasDeployed(res.payload.data)
const deviceMetaDeployed = res.payload.data const deviceMetaDeployed = res.payload.data
if (deviceMetaDeployed && dataList && deviceMetaDeployed.devices) { if (deviceMetaDeployed && dataList && deviceMetaDeployed.devices) {
const sensorsId = [] const sensorsId = []
let deviceIds = [] //所有设备的id let deviceIds = [] //所有设备的id
const sensorsDataItems = {} const sensorsDataItems = {}
for (const id in dataList.instances) { for (const id in dataList.instances) {
deviceIds.push(id) deviceIds.push(id)
const instances = dataList.instances[id] const instances = dataList.instances[id]
if (instances.type == 's.d' && instances.instance.properties.deviceType == 'sensor') { if (instances.type == 's.d' && instances.instance.properties.deviceType == 'sensor') {
const meta = deviceMetaDeployed.devices.find(m => m.id == instances.instance.deviceMetaId) const meta = deviceMetaDeployed.devices.find(m => m.id == instances.instance.deviceMetaId)
sensorsDataItems[id] = { sensorsDataItems[id] = {
items: {}, items: {},
deviceName: instances.name, deviceName: instances.name,
} }
if (meta) { if (meta) {
sensorsDataItems[id].items = meta.capabilities[0].properties.reduce((p, n) => { sensorsDataItems[id].items = meta.capabilities[0].properties.reduce((p, n) => {
if (n.category == 'Output') { if (n.category == 'Output') {
p[n.name] = { name: n.showName, unit: n.unit } p[n.name] = { name: n.showName, unit: n.unit }
}
return p
}, {})
}
sensorsId.push(id)
}
} }
return p dispatch(analysis.getDevicesAlarms(deviceIds, { limit: 5 }, token))
}, {}) dispatch(analysis.findDevicesCardStatus({ deviceIds: alarmSensorId }, token))
} setSensorsDataItems(sensorsDataItems)
sensorsId.push(id) setSensorId(sensorsId)
setDeviceData(da)
}
} }
} })
dispatch(analysis.getDevicesAlarms(deviceIds , { limit: 5 }))
dispatch(analysis.findDevicesCardStatus({ deviceIds: alarmSensorId }))
setSensorsDataItems(sensorsDataItems)
setSensorId(sensorsId)
setDeviceData(da)
}
} }
}) })
} }
}) }, [thingId])
} useEffect(async () => {
}, [thingId]) if (sensorId && sensorId.length && sensorsDataItems) {
useEffect(async () => { const rs = await dispatch(analysis.findSensorLastData(sensorId, token))
if (sensorId && sensorId.length && sensorsDataItems) { const tableData = []
const rs = await dispatch(analysis.findSensorLastData(sensorId)) if (rs.success) {
const tableData = [] rs.payload.data.forEach(sd => {
if (rs.success) { if (Object.keys(sensorsDataItems).length) {
rs.payload.data.forEach(sd => { let sensorDataItem = sensorsDataItems[sd.sensorId]
if (Object.keys(sensorsDataItems).length) { let sensorName = sensorDataItem && sensorDataItem.deviceName ? sensorDataItem.deviceName : ''
let sensorDataItem = sensorsDataItems[sd.sensorId] let msg = sd.data.length
let sensorName = sensorDataItem && sensorDataItem.deviceName ? sensorDataItem.deviceName : '' ? sd.data[0]
let msg = sd.data.length : {
? sd.data[0] collectTime: null,
: { sensorName: sensorName,
collectTime: null, data: { noData: '暂无数据' },
sensorName: sensorName, }
data: { noData: '暂无数据' }, let dataStr = ''
} let dataKeys = Object.keys(msg.data)
let dataStr = '' dataKeys.forEach(k => {
let dataKeys = Object.keys(msg.data) let item = sensorDataItem && sensorDataItem.items ? sensorDataItem.items[k] : null
dataKeys.forEach(k => { if (item) {
let item = sensorDataItem && sensorDataItem.items ? sensorDataItem.items[k] : null dataStr += `${item.name}${msg.data[k]}${item.unit}); `
if (item) { } else if (k == 'noData') {
dataStr += `${item.name}${msg.data[k]}${item.unit}); ` dataStr += msg.data[k]
} else if (k == 'noData') { } else {
dataStr += msg.data[k] dataStr += `${k}${msg.data[k]}`
} else { }
dataStr += `${k}${msg.data[k]}` })
} let collectTime = msg.collectTime ? moment(msg.collectTime).format('YYYY-MM-DD HH:mm:ss') : '--'
}) tableData.push({
let collectTime = msg.collectTime ? moment(msg.collectTime).format('YYYY-MM-DD HH:mm:ss') : '--' sensorId: sd.sensorId,
tableData.push({ sensorName: sensorName,
sensorId: sd.sensorId, collectTime: collectTime,
sensorName: sensorName, data: dataStr,
collectTime: collectTime, deviceType: 'sensor', //传感器
data: dataStr, iotCardStatus: '--',
deviceType: 'sensor', //传感器 status: '--',
iotCardStatus: '--', option: '--',
status: '--', })
option: '--', }
}) })
} }
}) setTableData(tableData)
}
}, [sensorId])
useEffect(() => {
if (deviceData && deviceData.length) {
const dataD = deviceData?.map(p => {
const objRslt = tableData?.find(q => q.sensorId == p.sensorId)
return {
sensorId: objRslt ? objRslt.sensorId : p.sensorId,
sensorName: objRslt ? objRslt.sensorName : p.sensorName,
collectTime: objRslt ? objRslt.collectTime : p.collectTime,
data: objRslt ? objRslt.data : p.data,
deviceType: DeviceTypes[objRslt ? objRslt.deviceType : p.deviceType],
iotCardStatus:
devicesCardStatusList && devicesCardStatusList.length
? devicesCardStatusList.find(v => v.deviceId == p.sensorId).status === 0
? '正常'
: devicesCardStatusList.find(v => v.deviceId == p.sensorId).status === 1
? '未激活'
: '停机'
: '--',
status:
deviceListAlarms && deviceListAlarms.length
? deviceListAlarms?.find(v => v.deviceId == p.sensorId)
? '异常'
: '正常'
: '--',
option: objRslt ? objRslt.option : p.option,
}
})
const typeList = dataD.reduce((p, c) => {
let isExist = p.some(q => q.label === c.deviceType)
if (!isExist) {
p.push({ label: c.deviceType, value: c.sensorId })
}
return p
}, [])
setTypeList(typeList)
setLastData(dataD)
setLastDataCopy(dataD)
} }
setTableData(tableData) }, [deviceData])
} // const lastDataCopy=useMemo(()=>{
}, [sensorId]) // return lastData
useEffect(() => { // },[thingId])
if (deviceData && deviceData.length ) { const scroll = useMemo(() => ({ y: clientHeight - 600 + 175 + 175 }), [])
const dataD = deviceData?.map(p => { //名称回调事件
const objRslt = tableData?.find(q => q.sensorId == p.sensorId) const inputChange = e => {
return { setSearchName(e.target.value)
sensorId: objRslt ? objRslt.sensorId : p.sensorId, }
sensorName: objRslt ? objRslt.sensorName : p.sensorName, //选择设备类型下拉框回调
collectTime: objRslt ? objRslt.collectTime : p.collectTime, const selectChange = e => {
data: objRslt ? objRslt.data : p.data, let rslt = typeList.find(f => f.value == e)
deviceType: DeviceTypes[objRslt ? objRslt.deviceType : p.deviceType], setSearchType(rslt ? rslt.label : undefined)
iotCardStatus: }
devicesCardStatusList && devicesCardStatusList.length
? devicesCardStatusList.find(v => v.deviceId == p.sensorId).status === 0
? '正常'
: devicesCardStatusList.find(v => v.deviceId == p.sensorId).status === 1
? '未激活'
: '停机'
: '--',
status:
deviceListAlarms && deviceListAlarms.length
? deviceListAlarms?.find(v => v.deviceId == p.sensorId)
? '异常'
: '正常'
: '--',
option: objRslt ? objRslt.option : p.option,
}
})
const typeList = dataD.reduce((p, c) => {
let isExist = p.some(q => q.label === c.deviceType)
if (!isExist) {
p.push({ label: c.deviceType, value: c.sensorId })
}
return p
}, [])
setTypeList(typeList)
setLastData(dataD)
setLastDataCopy(dataD)
}
}, [deviceData])
// const lastDataCopy=useMemo(()=>{
// return lastData
// },[thingId])
const scroll = useMemo(() => ({ y:clientHeight-600+175+175 }), [])
//名称回调事件
const inputChange = e => {
setSearchName(e.target.value)
}
//选择设备类型下拉框回调
const selectChange = e => {
let rslt=typeList.find(f => f.value == e)
setSearchType(rslt?rslt.label:undefined)
}
//查询事件回调 //查询事件回调
const searchHandler = () => { const searchHandler = () => {
setLastData( setLastData(
lastDataCopy.filter(f => lastDataCopy.filter(f =>
(!searchName || f.sensorName.includes(searchName)) && (!searchName || f.sensorName.includes(searchName)) &&
(!searchType|| f.deviceType===searchType) (!searchType || f.deviceType === searchType)
)
) )
) }
}
const columns = [ const columns = [
{ {
title: '设备名称', title: '设备名称',
dataIndex: 'sensorName', dataIndex: 'sensorName',
width: '20%', width: '20%',
key: 'sensorName', key: 'sensorName',
render: (_, r) => { render: (_, r) => {
return ( return (
<> <>
<Tooltip title={r.sensorName}> <Tooltip title={r.sensorName}>
<div>{r.sensorName.length > 7 ? `${r.sensorName.substr(0, 7)}...` : r.sensorName}</div> <div>{r.sensorName.length > 7 ? `${r.sensorName.substr(0, 7)}...` : r.sensorName}</div>
</Tooltip> </Tooltip>
</> </>
) )
},
},
{
title: '设备类型',
dataIndex: 'deviceType',
width: '15%',
key: 'deviceType',
},
{
title: '最后采集时间',
dataIndex: 'collectTime',
width: '15%',
key: 'collectTime',
},
{
title: '数据',
dataIndex: 'data',
width: '20%',
key: 'data',
render: (_, r) => {
return (
<>
<Tooltip title={r.data}>
<div>{r.data.length > 6 ? `${r.data.substr(0, 6)}...` : r.data}</div>
</Tooltip>
</>
)
},
},
{
title: '物联网卡状态',
width: '15%',
dataIndex: 'iotCardStatus',
key: 'iotCardStatus',
},
{
title: '状态',
width: '10%',
dataIndex: 'status',
key: 'status',
}, },
}, {
{ title: '操作',
title: '设备类型', width: '10%',
dataIndex: 'deviceType', dataIndex: 'option',
width: '15%', key: 'option',
key: 'deviceType',
},
{
title: '最后采集时间',
dataIndex: 'collectTime',
width: '15%',
key: 'collectTime',
},
{
title: '数据',
dataIndex: 'data',
width: '20%',
key: 'data',
render: (_, r) => {
return (
<>
<Tooltip title={r.data}>
<div>{r.data.length > 6 ? `${r.data.substr(0, 6)}...` : r.data}</div>
</Tooltip>
</>
)
}, },
}, ]
{ return (
title: '物联网卡状态', <>
width: '15%', <div style={{ marginBottom: 12, display: 'flex' }}>
dataIndex: 'iotCardStatus', <div>
key: 'iotCardStatus', <Input // suffix={<IconSearch />}
}, label='名称'
{ placeholder='请输入设备名称'
title: '状态', pure
width: '10%', allowClear
dataIndex: 'status', style={{ width: 260, marginRight: 12 }}
key: 'status', onChange={inputChange} />
}, <Select options={typeList} label='设备类型'
{ pure
title: '操作', allowClear
width: '10%', onChange={selectChange}
dataIndex: 'option', style={{ width: 260, marginLeft: 12, marginRight: 12 }}
key: 'option', placeholder='请选择设备类型'></Select>
}, <Button theme='solid' type='primary' htmlType='submit' onClick={searchHandler}>
] 查询
return ( </Button>
<> </div>
<div style={{ marginBottom: 12, display: 'flex' }}> <div style={{ marginLeft: 10 }}>
<div> {' '}
<Input // suffix={<IconSearch />} {lastData.length ? (
label='名称' <ExportData
placeholder='请输入设备名称' // showIcon
pure fileName='设备列表'
allowClear exportType='fileSaver'
style={{ width: 260, marginRight: 12 }} data={lastData}
onChange={inputChange}/> columns={columns}
<Select options={typeList} label='设备类型' key='export'
pure />
allowClear ) : (
onChange={selectChange} ''
style={{ width: 260, marginLeft: 12, marginRight: 12 }} )}
placeholder='请选择设备类型'></Select> </div>
<Button theme='solid' type='primary' htmlType='submit' onClick={searchHandler}> </div>
查询 <Table
</Button> // scroll={scroll}
</div> columns={columns}
<div style={{ marginLeft: 10 }}> dataSource={lastData}></Table>
{' '} </>
{lastData.length ? ( )
<ExportData
// showIcon
fileName='设备列表'
exportType='fileSaver'
data={lastData}
columns={columns}
key='export'
/>
) : (
''
)}
</div>
</div>
<Table
// scroll={scroll}
columns={columns}
dataSource={lastData}></Table>
</>
)
} }
function mapStateToProps(state) { function mapStateToProps (state) {
const { auth, global, members, webSocket, deviceListAlarms, devicesCardStatus } = state const { auth, global, members, webSocket, deviceListAlarms, devicesCardStatus } = state
return { return {
user: auth.user, user: auth.user,
actions: global.actions, actions: global.actions,
clientHeight: global.clientHeight, clientHeight: global.clientHeight,
deviceListAlarms: deviceListAlarms?.data || [], deviceListAlarms: deviceListAlarms?.data || [],
devicesCardStatusList: devicesCardStatus?.data || [], devicesCardStatusList: devicesCardStatus?.data || [],
} }
} }
export default connect(mapStateToProps)(Network) export default connect(mapStateToProps)(Network)

4
web/client/src/sections/analysis/containers/network.jsx

@ -62,7 +62,6 @@ const Network = ({
useEffect(() => { useEffect(() => {
// iframe // iframe
const iframe = document.getElementById('myIframe'); const iframe = document.getElementById('myIframe');
console.log(4324, iframe);
if (iframe) { if (iframe) {
// iframeload // iframeload
iframe.addEventListener('load', function () { iframe.addEventListener('load', function () {
@ -128,7 +127,6 @@ const Network = ({
<Spin <Spin
// style={{ }}
childStyle={{ width: "100%", height: clientHeight - 188 }} childStyle={{ width: "100%", height: clientHeight - 188 }}
spinning={spinning}> spinning={spinning}>
<div id='show' style={{ width: "100%", height: "100%" }}> <div id='show' style={{ width: "100%", height: "100%" }}>
@ -139,7 +137,7 @@ const Network = ({
height: '100%', height: '100%',
zIndex: 7, border: 0 zIndex: 7, border: 0
}} }}
src={`${networkWeb}/network?strucData=${JSON.stringify(organizationsStruc?.find(v => v.thingId == thingId) || {})}`} src={`${networkWeb}/network?key=${user?.token}&strucData=${JSON.stringify(organizationsStruc?.find(v => v.thingId == thingId) || {})}`}
allowFullScreen allowFullScreen
> >
<p>你的浏览器不支持 iframe </p> <p>你的浏览器不支持 iframe </p>

Loading…
Cancel
Save