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/workOrders/repairRank', 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: '/metrics/things/:iotaThingId/devices/link_status', o: 'GET' },
{ p: '/things/:iotaThingId/deploy', o: 'GET' },
{ p: '/sensors/last/data', o: 'POST' },
{ p: '/meta/things/:iotaThingId/devices', o: 'GET' },
{ p: '/devices/alarms', o: 'POST' },
{ p: '/devices/cardStatus', o: 'POST' },
{ p: '/metrics/devices/:deviceId/link_status', o: 'GET' },
{ p: '/device/:deviceId/alarms', o: 'GET' },
// { p: '/organizations/:pepProjectId/struc', o: 'GET' },
// { p: '/things/:iotaThingId/deploys', o: 'GET' },
// { p: '/meta/things/:iotaThingId/devices', o: 'GET' },
// { p: '/metrics/things/:iotaThingId/devices/link_status', o: 'GET' },
// { p: '/things/:iotaThingId/deploy', o: 'GET' },
// { p: '/sensors/last/data', o: 'POST' },
// { p: '/meta/things/:iotaThingId/devices', o: 'GET' },
// { p: '/devices/alarms', o: 'POST' },
// { p: '/devices/cardStatus', o: 'POST' },
// { p: '/metrics/devices/:deviceId/link_status', o: 'GET' },
// { p: '/device/:deviceId/alarms', o: 'GET' },
], // 不做认证的路由,也可以使用 exclude: ["*"] 跳过所有路由

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

@ -4,4 +4,4 @@ import React from 'react';
import { render } from 'react-dom';
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 (
<div className='login'>
{/* <div className='left'></div> */}
<div className='right'>
<div className='loginBox'>
<h1>南昌县智慧交通监管系统</h1>
<Form onKeyDown={enterHandler}>
<FormItem>
<div className='loginFormTit'>用户名</div>
<Input
className='loginInp'
type="text"
value={username}
maxlength={11}
onChange={e => {
//('e.target.value', e.target.value)
setUserName(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
<div className='loginFormTit'>密码</div>
<FormItem>
<Input
className='loginInp'
type="password"
value={password}
<div>
{"{ token : 未生效,请刷新页面}"}
</div>
// <div className='login'>
// {/* <div className='left'></div> */}
// <div className='right'>
// <div className='loginBox'>
// <h1>南昌县智慧交通监管系统</h1>
// <Form onKeyDown={enterHandler}>
// <FormItem>
// <div className='loginFormTit'>用户名</div>
// <Input
// className='loginInp'
// type="text"
// value={username}
// maxlength={11}
// onChange={e => {
// //('e.target.value', e.target.value)
// setUserName(e.target.value)
// setInputChanged(true)
// }}
// />
// </FormItem>
// <div className='loginFormTit'>密码</div>
// <FormItem>
// <Input
// className='loginInp'
// type="password"
// value={password}
onChange={e => {
//console.log('setPassword', e.target.value)
setPassword(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
</Form>
<Button type="primary" className='loginBtn' loading={isRequesting} onClick={handleLogin}>登录</Button>
</div>
</div>
</div>
// onChange={e => {
// //console.log('setPassword', e.target.value)
// setPassword(e.target.value)
// setInputChanged(true)
// }}
// />
// </FormItem>
// </Form>
// <Button type="primary" className='loginBtn' loading={isRequesting} onClick={handleLogin}>登录</Button>
// </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';
export function getOrganizationsStruc (id) {
export function getOrganizationsStruc (id, token) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_ORGANIZATIONS_STRUC',
url: `${ApiTable.organizationsStruc.replace('{pepProjectId}', id)}`,
url: `${ApiTable.organizationsStruc.replace('{pepProjectId}', id)}?token=${token}`,
msg: { error: '获取项目下的结构物信息失败' },
reducer: { name: 'organizationsStruc' }
})
}
export function getThingsDeploy (id) {
export function getThingsDeploy (id, token) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_THINGS_DEPLOY',
url: `${ApiTable.thingsDeploy.replace('{iotaThingId}', id)}`,
url: `${ApiTable.thingsDeploy.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取设备部署信息失败' },
reducer: { name: 'deviceList' }
})
}
export function getDeviceMetaDeployed (id) {
export function getDeviceMetaDeployed (id, token) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_DEVIC_META_DEPLOYED',
url: `${ApiTable.deviceMetaDeployed.replace('{iotaThingId}', id)}`,
url: `${ApiTable.deviceMetaDeployed.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取部署设备原型失败' },
reducer: { name: 'deviceMeta' }
})
}
export function getIotaThingsLlinkStatus (id) {
export function getIotaThingsLlinkStatus (id, token) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_IOTA_ThINGS_LINK_STATUS',
url: `${ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', id)}`,
url: `${ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取设备在线状态/以结构物id集体获取失败' },
reducer: { name: '' }
})
}
export function findDeviceMetaDeployed (id) {
export function findDeviceMetaDeployed (id, token) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'FIND_DEVICE_META_DEPLOYED',
url: `${ApiTable.findDeviceMetaDeployed.replace('{iotaThingId}', id)}`,
url: `${ApiTable.findDeviceMetaDeployed.replace('{iotaThingId}', id)}?token=${token}`,
msg: { error: '获取单个结构物的设备信息失败' },
reducer: { name: 'deviceMetaDeployed', params: { noClear: true } },
})
}
export function findSensorLastData (data) {
export function findSensorLastData (data, token) {
return dispatch => basicAction({
type: 'post',
data,
dispatch: dispatch,
actionType: 'FIND_SENSOR_LAST_DATA',
url: `${ApiTable.findSensorLastData}`,
url: `${ApiTable.findSensorLastData}?token=${token}`,
msg: { error: '原始数据查询失败' },
reducer: { name: 'sensorLastData' }
})
}
export function getDevicesAlarms (deviceIds, query) {
export function getDevicesAlarms (deviceIds, query, token) {
return dispatch => basicAction({
type: 'post',
dispatch: dispatch,
data: deviceIds,
query: query,
actionType: 'REQUEST_POST_DEVICES_ALARMS',
url: `${ApiTable.getDevicesAlarms}?state=new`,
url: `${ApiTable.getDevicesAlarms}?state=new&token=${token}`,
msg: {
error: '获取设备告警信息失败'
},
@ -92,13 +92,13 @@ export function getDevicesAlarms (deviceIds, query) {
}
export function findDevicesCardStatus (deviceIds) {
export function findDevicesCardStatus (deviceIds, token) {
return dispatch => basicAction({
type: 'post',
dispatch: dispatch,
data: deviceIds,
actionType: 'FIND_DEVICES_CARD_STATUS',
url: `${ApiTable.findDevicesCardStatus}`,
url: `${ApiTable.findDevicesCardStatus}?token=${token}`,
msg: {
error: '获取物联网卡信息失败'
},
@ -108,25 +108,25 @@ export function findDevicesCardStatus (deviceIds) {
});
}
export function getDevicesLlinkStatus (id) {
export function getDevicesLlinkStatus (id, token) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
actionType: 'GET_DEVICES_LINK_STATUS',
url: `${ApiTable.getDevicesLlinkStatus.replace('{deviceId}', id)}`,
url: `${ApiTable.getDevicesLlinkStatus.replace('{deviceId}', id)}?token=${token}`,
msg: { error: '获取设备在线状态/以设备id单个获取' },
reducer: { name: '' }
})
}
export function findAlarmsDevice (deviceIds, query) {
export function findAlarmsDevice (deviceIds, query, token) {
return dispatch => basicAction({
type: 'get',
dispatch: dispatch,
query: query,
actionType: 'GET_FIND_ALARM_DEVICES',
url: `device/${deviceIds}/alarms`,
url: `device/${deviceIds}/alarms?token=${token}`,
msg: {
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;
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 [linkState, setLinkState] = useSafeState(null);
@ -31,14 +31,14 @@ export default ({ ...props }) => {
if (info?.device?.id && info.device.id != currentDeviceId) {
setCurrentDeviceId(info.device.id);
setActiveKey('1');
dispatch(analysis.getDevicesLlinkStatus(info?.device?.id)).then(res => {
dispatch(analysis.getDevicesLlinkStatus(info?.device?.id, token)).then(res => {
if (res.success) {
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) {
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 moment from 'moment';
import {
Spin, Input, Button, Message, Menu, Dropdown, Row, Drawer,
Spin, Input, Button, Message, Menu, Dropdown, Row, Drawer,
} from 'antd';
import { useSafeState } from 'ahooks';
@ -16,298 +16,302 @@ const { Item } = Menu;
const { ModifyEquipmentNetworking } = AuthorizationCode;
export default function ({ ...props }) {
const {
dispatch,actions, clientHeight, deviceMetasWithFollow, deviceList, dimensionlist, struct,
} = props;
const [g6TreeDirection, setG6TreeDirection] = useSafeState('TB');
const [devices, setDevices] = useSafeState(null);
const [selectedNode, setSelectedNode] = useSafeState(null);
const [selectedParentNode, setSelectedParentNode] = useSafeState(null);
const [emitDataChange, setEmitDataChange] = useSafeState(false);
const [collapseAll, setCollapseAll] = useSafeState(false);
const [collapsed, setCollapsed] = useSafeState([]);
const [expandAll, setExpandAll] = useSafeState(false);
const [expanded, setExpanded] = useSafeState([]);
const [targetNode, setTargetNode] = useSafeState('');
const [showOptionModal, setShowOptionModal] = useSafeState(false);
// const [showAddDimensionModal, setShowAddDimensionModal] = useState(false);
// const [showAddEquipmentModal, setShowAddEquipmentModal] = useState(false);
// const [isClAdd, setIsClAdd] = useState(false);
const [clientWidth, setClientWidth] = useSafeState(document.body.clientWidth - 64 - 20 - 16 - 2);
// const [clTitle, setClTitle] = useState('');
const [dimensions, setDimensions] = useSafeState({});
const [sensorsId, setSensorsId] = useSafeState([]);
const [sensorsDataItems, setSensorsDataItems] = useSafeState({});
const [foldAllG6ToCenter, setFoldAllG6ToCenter] = useSafeState(false);
const [inputSearching, setInputSearching] = useSafeState(false);
// const [httpServerInterfaceIds, setHttpServerInterfaceIds] = useState([]);
const {
dispatch, actions, clientHeight, deviceMetasWithFollow, deviceList, dimensionlist, struct, token
} = props;
const [g6TreeDirection, setG6TreeDirection] = useSafeState('TB');
const [devices, setDevices] = useSafeState(null);
const [selectedNode, setSelectedNode] = useSafeState(null);
const [selectedParentNode, setSelectedParentNode] = useSafeState(null);
const [emitDataChange, setEmitDataChange] = useSafeState(false);
const [collapseAll, setCollapseAll] = useSafeState(false);
const [collapsed, setCollapsed] = useSafeState([]);
const [expandAll, setExpandAll] = useSafeState(false);
const [expanded, setExpanded] = useSafeState([]);
const [targetNode, setTargetNode] = useSafeState('');
const [showOptionModal, setShowOptionModal] = useSafeState(false);
// const [showAddDimensionModal, setShowAddDimensionModal] = useState(false);
// const [showAddEquipmentModal, setShowAddEquipmentModal] = useState(false);
// const [isClAdd, setIsClAdd] = useState(false);
const [clientWidth, setClientWidth] = useSafeState(document.body.clientWidth - 64 - 20 - 16 - 2);
// const [clTitle, setClTitle] = useState('');
const [dimensions, setDimensions] = useSafeState({});
const [sensorsId, setSensorsId] = useSafeState([]);
const [sensorsDataItems, setSensorsDataItems] = useSafeState({});
const [foldAllG6ToCenter, setFoldAllG6ToCenter] = useSafeState(false);
const [inputSearching, setInputSearching] = useSafeState(false);
// const [httpServerInterfaceIds, setHttpServerInterfaceIds] = useState([]);
useEffect(() => {
if (deviceMetasWithFollow?.devices) {
// const deviceMetas = deviceMetasWithFollow?.devices || {};
// let httpServerInterfaceIds = [];
// for (let d of deviceMetas) {
// if (d.interfaces && d.interfaces.length) {
// for (let f of d.interfaces) {
// if (f.directType == 1 && f.interfaceMeta && f.interfaceMeta.name == "HTTP_SERVER") {
// httpServerInterfaceIds.push(f.id)
// }
// }
// }
// }
// setHttpServerInterfaceIds(httpServerInterfaceIds);
if (deviceList?.instances) {
const sensorsId = [];
const sensorsDataItems = {};
for (const id in deviceList.instances) {
const instances = deviceList.instances[id];
if (instances.type == 's.d' && instances.instance.properties.deviceType == 'sensor') {
const meta = deviceMetasWithFollow.devices.find((m) => m.id == instances.instance.deviceMetaId);
sensorsDataItems[id] = {
items: {},
deviceName: instances.name,
};
if (meta) {
sensorsDataItems[id].items = meta.capabilities[0].properties.reduce((p, n) => {
if (n.category == 'Output') {
p[n.name] = { name: n.showName, unit: n.unit };
}
return p;
}, {});
useEffect(() => {
if (deviceMetasWithFollow?.devices) {
// const deviceMetas = deviceMetasWithFollow?.devices || {};
// let httpServerInterfaceIds = [];
// for (let d of deviceMetas) {
// if (d.interfaces && d.interfaces.length) {
// for (let f of d.interfaces) {
// if (f.directType == 1 && f.interfaceMeta && f.interfaceMeta.name == "HTTP_SERVER") {
// httpServerInterfaceIds.push(f.id)
// }
// }
// }
// }
// setHttpServerInterfaceIds(httpServerInterfaceIds);
if (deviceList?.instances) {
const sensorsId = [];
const sensorsDataItems = {};
for (const id in deviceList.instances) {
const instances = deviceList.instances[id];
if (instances.type == 's.d' && instances.instance.properties.deviceType == 'sensor') {
const meta = deviceMetasWithFollow.devices.find((m) => m.id == instances.instance.deviceMetaId);
sensorsDataItems[id] = {
items: {},
deviceName: instances.name,
};
if (meta) {
sensorsDataItems[id].items = meta.capabilities[0].properties.reduce((p, n) => {
if (n.category == 'Output') {
p[n.name] = { name: n.showName, unit: n.unit };
}
return p;
}, {});
}
sensorsId.push(id);
}
}
sensorsId.push(id);
}
}
setSensorsId(sensorsId);
setSensorsDataItems(sensorsDataItems);
setSensorsId(sensorsId);
setSensorsDataItems(sensorsDataItems);
}
}
}
if (deviceList?.instances) {
const newInstances = { ...deviceList.instances, ...dimensionlist };
setDevices({ ...deviceList, instances: newInstances });
} else if (!devices) {
const data = { instances: {} };
const uuidNode = guid();
data.instances[uuidNode] = {
instance: {},
svg: {
compX: 0,
compY: 0,
isSelected: false,
rotateAng: 0,
scaleX: 1,
scaleY: 1,
x: 2498,
y: 1083,
},
type: 's.iota',
};
data.settings = {
grid: {
step: 20,
},
height: 3072,
padding: 40,
scale: 10,
scrollLeft: 2047,
scrollTop: 1082,
width: 5120,
};
setDevices(data);
}
}, [deviceList, deviceMetasWithFollow]);
if (deviceList?.instances) {
const newInstances = { ...deviceList.instances, ...dimensionlist };
setDevices({ ...deviceList, instances: newInstances });
} else if (!devices) {
const data = { instances: {} };
const uuidNode = guid();
data.instances[uuidNode] = {
instance: {},
svg: {
compX: 0,
compY: 0,
isSelected: false,
rotateAng: 0,
scaleX: 1,
scaleY: 1,
x: 2498,
y: 1083,
},
type: 's.iota',
};
data.settings = {
grid: {
step: 20,
},
height: 3072,
padding: 40,
scale: 10,
scrollLeft: 2047,
scrollTop: 1082,
width: 5120,
};
setDevices(data);
}
}, [deviceList, deviceMetasWithFollow]);
const guid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0; const
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
const guid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = Math.random() * 16 | 0; const
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
const closeOptionModal = () => {
setShowOptionModal(false);
setSelectedNode(null);
};
const closeOptionModal = () => {
setShowOptionModal(false);
setSelectedNode(null);
};
const _handelNodeClick = (node) => {
if (node) {
const targetId = node.get('model').id;
const selectedNode = { ...devices?.instances[targetId], id: targetId };
const deviceMetaId = selectedNode?.instance?.deviceMetaId;
const selectedDeviceMetaArr = [];
let selectedDeviceMeta;
if (selectedDeviceMetaArr.length == 0) {
selectedDeviceMeta = deviceMetasWithFollow && deviceMetasWithFollow.devices
? deviceMetasWithFollow.devices.filter((s) => s.id == deviceMetaId)[0]
: [];
} else {
selectedDeviceMeta = selectedDeviceMetaArr[0];
}
if (selectedNode.type && selectedNode.type != 's.iota') {
// parentNode
const _handelNodeClick = (node) => {
if (node) {
const targetId = node.get('model').id;
const selectedNode = { ...devices?.instances[targetId], id: targetId };
const deviceMetaId = selectedNode?.instance?.deviceMetaId;
const selectedDeviceMetaArr = [];
let selectedDeviceMeta;
if (selectedDeviceMetaArr.length == 0) {
selectedDeviceMeta = deviceMetasWithFollow && deviceMetasWithFollow.devices
? deviceMetasWithFollow.devices.filter((s) => s.id == deviceMetaId)[0]
: [];
} else {
selectedDeviceMeta = selectedDeviceMetaArr[0];
}
if (selectedNode.type && selectedNode.type != 's.iota') {
// parentNode
const parentNode = Object.keys(devices.instances).reduce((p, k) => {
const instance = devices.instances[k];
if (instance.type == 's.l' && instance.instance.from.ownerSvgId == targetId) {
p = { ...devices.instances[instance.instance.to.ownerSvgId], id: instance.instance.to.ownerSvgId };
}
return p;
}, null);
const parentNode = Object.keys(devices.instances).reduce((p, k) => {
const instance = devices.instances[k];
if (instance.type == 's.l' && instance.instance.from.ownerSvgId == targetId) {
p = { ...devices.instances[instance.instance.to.ownerSvgId], id: instance.instance.to.ownerSvgId };
}
return p;
}, null);
const selectedParentNodeMetaId = parentNode ? parentNode.instance.deviceMetaId : null;
const selectedParentNodeMeta = selectedParentNodeMetaId ? deviceMetasWithFollow.devices.filter((s) => s.id == selectedParentNodeMetaId)[0] : null;
const selectedParentNodeMetaId = parentNode ? parentNode.instance.deviceMetaId : null;
const selectedParentNodeMeta = selectedParentNodeMetaId ? deviceMetasWithFollow.devices.filter((s) => s.id == selectedParentNodeMetaId)[0] : null;
setSelectedNode({ type: 'equipment', device: selectedNode, meta: selectedDeviceMeta });
setSelectedParentNode({ type: 'equipment', device: parentNode, meta: selectedParentNodeMeta });
setShowOptionModal(true);
setSelectedNode({ type: 'equipment', device: selectedNode, meta: selectedDeviceMeta });
setSelectedParentNode({ type: 'equipment', device: parentNode, meta: selectedParentNodeMeta });
setShowOptionModal(true);
} else {
setShowOptionModal(false);
setSelectedNode(null);
setSelectedParentNode(null);
}
} else {
setShowOptionModal(false);
setSelectedNode(null);
setSelectedParentNode(null);
setShowOptionModal(false);
setSelectedNode(null);
setSelectedParentNode(null);
}
} else {
setShowOptionModal(false);
setSelectedNode(null);
setSelectedParentNode(null);
}
};
};
const emitDataChange_ = () => {
setEmitDataChange(true);
};
const emitDataChange_ = () => {
setEmitDataChange(true);
};
const _finishDataChange = () => {
setEmitDataChange(false);
};
const _finishDataChange = () => {
setEmitDataChange(false);
};
const handleNodeEnter = (node) => {
const result = dimensionlist?.dimensions?.length <= 0;
return result;
};
const onCollapse = (model, collapse) => {
if (collapse) {
setCollapsed(collapsed.concat([model.id]));
setExpanded(expanded.filter((c) => c != model.id));
} else {
setCollapsed(collapsed.filter((c) => c != model.id));
setExpanded(expanded.concat([model.id]));
}
};
const handleNodeEnter = (node) => {
const result = dimensionlist?.dimensions?.length <= 0;
return result;
};
const onCollapse = (model, collapse) => {
if (collapse) {
setCollapsed(collapsed.concat([model.id]));
setExpanded(expanded.filter((c) => c != model.id));
} else {
setCollapsed(collapsed.filter((c) => c != model.id));
setExpanded(expanded.concat([model.id]));
}
};
const resetFoldAllG6ToCenter = () => {
setFoldAllG6ToCenter(false);
};
const resetFoldAllG6ToCenter = () => {
setFoldAllG6ToCenter(false);
};
const changeG6TreeDirection = () => {
setG6TreeDirection(g6TreeDirection == 'TB' ? 'LR' : 'TB');
setShowOptionModal(false);
};
const containerHeight = clientHeight - 270;
const changeG6TreeDirection = () => {
setG6TreeDirection(g6TreeDirection == 'TB' ? 'LR' : 'TB');
setShowOptionModal(false);
};
const containerHeight = clientHeight - 270;
return (
<div id="flag">
<div style={{
position: 'absolute', top: 100, left: 32, zIndex: 2,
}}
>
<Button
style={{ marginRight: 12, marginBottom: 12, float: 'left' }}
type="primary"
onClick={() => {
setExpandAll(false);
setCollapseAll(true);
setCollapsed([]);
setExpanded([]);
setEmitDataChange(true);
// setFoldAllG6ToCenter(true);
setTargetNode('');
document.getElementById('searchInput').value = '';
}}
>
折叠全部
</Button>
<Button
type="primary"
style={{ marginRight: 12, marginBottom: 12, float: 'left' }}
onClick={() => {
setCollapseAll(false);
setExpandAll(true);
setCollapsed([]);
setExpanded([]);
setEmitDataChange(true);
setTargetNode('');
document.getElementById('searchInput').value = '';
}}
>
展开全部
</Button>
return (
<div id="flag">
<div style={{
position: 'absolute', top: 100, left: 32, zIndex: 2,
}}
>
<Button
style={{ marginRight: 12, marginBottom: 12, float: 'left' }}
type="primary"
onClick={() => {
setExpandAll(false);
setCollapseAll(true);
setCollapsed([]);
setExpanded([]);
setEmitDataChange(true);
// setFoldAllG6ToCenter(true);
setTargetNode('');
document.getElementById('searchInput').value = '';
}}
>
折叠全部
</Button>
<Button
type="primary"
style={{ marginRight: 12, marginBottom: 12, float: 'left' }}
onClick={() => {
setCollapseAll(false);
setExpandAll(true);
setCollapsed([]);
setExpanded([]);
setEmitDataChange(true);
setTargetNode('');
document.getElementById('searchInput').value = '';
}}
>
展开全部
</Button>
<Button type="primary" style={{ marginLeft: 12, marginBottom: 12 }} onClick={changeG6TreeDirection}>组图方向</Button>
<span style={{ float: 'left' }}>
<Input.Search
style={{ width: 200 }}
id="searchInput"
onSearch={(v) => {
setTargetNode(v);
setInputSearching(true);
// localStorage.setItem('inputSearching', true)
}}
/>
</span>
</div>
{
devices?.instances
&& (
<ZuwangMain
data={devices.instances}
collapseAll={collapseAll}
expandAll={expandAll}
collapsed={collapsed}
expanded={expanded}
onCollapse={onCollapse}
width={clientWidth}
height={containerHeight}
emitChange={emitDataChange}
emitDataChange_={emitDataChange_}
changeFinish={_finishDataChange}
handelNodeClick={_handelNodeClick}
targetNode={targetNode}
inputSearching={inputSearching}
setInputSearching={setInputSearching}
struct={struct}
handleNodeEnter={handleNodeEnter}
foldAllG6ToCenter={foldAllG6ToCenter}
resetFoldAllG6ToCenter={resetFoldAllG6ToCenter}
g6TreeDirection={g6TreeDirection}
/>
)
}
<Button type="primary" style={{ marginLeft: 12, marginBottom: 12 }} onClick={changeG6TreeDirection}>组图方向</Button>
<span style={{ float: 'left' }}>
<Input.Search
style={{ width: 200 }}
id="searchInput"
onSearch={(v) => {
setTargetNode(v);
setInputSearching(true);
// localStorage.setItem('inputSearching', true)
}}
/>
</span>
</div>
{
devices?.instances
&& (
<ZuwangMain
data={devices.instances}
collapseAll={collapseAll}
expandAll={expandAll}
collapsed={collapsed}
expanded={expanded}
onCollapse={onCollapse}
width={clientWidth}
height={containerHeight}
emitChange={emitDataChange}
emitDataChange_={emitDataChange_}
changeFinish={_finishDataChange}
handelNodeClick={_handelNodeClick}
targetNode={targetNode}
inputSearching={inputSearching}
setInputSearching={setInputSearching}
struct={struct}
handleNodeEnter={handleNodeEnter}
foldAllG6ToCenter={foldAllG6ToCenter}
resetFoldAllG6ToCenter={resetFoldAllG6ToCenter}
g6TreeDirection={g6TreeDirection}
token={token}
dispatch={dispatch}
actions={actions}
/>
)
}
<Drawer
destroyOnClose
getContainer={document.getElementById('flag')}
style={{ position: 'absolute' }}
mask={false}
maskClosable={false}
visible={showOptionModal}
width={480}
onClose={closeOptionModal}
bodyStyle={{ padding: 8 }}
>
<Drawer
destroyOnClose
getContainer={document.getElementById('flag')}
style={{ position: 'absolute' }}
mask={false}
maskClosable={false}
visible={showOptionModal}
width={480}
onClose={closeOptionModal}
bodyStyle={{ padding: 8 }}
>
<EquipmentOption
isEdit={false}
struct={struct}
devices={devices}
deviceMetas={deviceMetasWithFollow}
info={selectedNode}
parentNode={selectedParentNode}
dimensions={dimensionlist}
height={containerHeight}
dispatch={dispatch}
actions={actions}
/>
</Drawer>
</div>
);
<EquipmentOption
isEdit={false}
struct={struct}
devices={devices}
deviceMetas={deviceMetasWithFollow}
info={selectedNode}
parentNode={selectedParentNode}
dimensions={dimensionlist}
height={containerHeight}
dispatch={dispatch}
actions={actions}
token={token}
/>
</Drawer>
</div>
);
}

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

@ -19,7 +19,7 @@ export default function ({ ...props }) {
const {
struct, data, resetFoldAllG6ToCenter, foldAllG6ToCenter, g6TreeDirection, emitChange, emitDataChange_,
width, height, collapseAll, collapsed, expanded, expandAll, changeFinish, targetNode, inputSearching, setInputSearching,
onCollapse, handleNodeEnter, handelNodeClick,
onCollapse, handleNodeEnter, handelNodeClick, token, dispatch, actions
} = props;
const [isGetLinkStateDone, { setTrue, setFalse }] = useBoolean(false);
const [devicesLinkState, setDevicesLinkState] = useSafeState(null);
@ -30,28 +30,28 @@ export default function ({ ...props }) {
const [lastClickNodeKey, setLastClickNodeKey] = useSafeState(null);
const [disCheckedKeys, setDisCheckedKeys] = useSafeState([]);
let intervalLinkStatus = null;
const { analysis } = actions
// const da = useThingsLinkStatus(struct?.iotaThingId);
const getThingsLinkStatus = (isCycle = false) => {
const iotaThingId = struct?.thingId;
if (iotaThingId) {
const url = ApiTable.getIotaThingsLlinkStatus.replace('{iotaThingId}', iotaThingId);
Request.get(url).then((res) => {
if (res.devices.length >= 0) {
setDevicesLinkState(res.devices);
dispatch(analysis.getIotaThingsLlinkStatus(iotaThingId, token)).then((res) => {
if (res.payload?.data?.devices.length >= 0) {
setDevicesLinkState(res.payload?.data?.devices || []);
} else {
intervalLinkStatus && clearInterval(intervalLinkStatus);
}
if (!isCycle) {
setTrue();
setTrue(true);
}
}, (error) => {
if (!isCycle) {
message.warning('设备在线状态获取失败');
setTrue();
message.warning('设备在线状态获取失败')
setTrue(true);
}
});
})
}
};
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)
const token = qs.parse(props.location?.search.slice(1))?.key
useEffect(() => {
if (strucParam?.thingId) {
dispatch(analysis.getThingsDeploy(strucParam?.thingId)).then(res => {
console.log(3213, res);
dispatch(analysis.getThingsDeploy(strucParam?.thingId, token)).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(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) => {
@ -149,10 +131,12 @@ function DeviceMonitor ({ ...props }) {
struct={strucParam}
clientHeight={clientHeight}
clientWidth={clientWidth}
token={token}
/>
) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
: (
<TableShow thingId={strucParam.thingId} project={strucParam.projectId} />
<TableShow thingId={strucParam.thingId} project={strucParam.projectId} token={token} />
)
}
</ProCard>

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

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

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

@ -62,7 +62,6 @@ const Network = ({
useEffect(() => {
// iframe
const iframe = document.getElementById('myIframe');
console.log(4324, iframe);
if (iframe) {
// iframeload
iframe.addEventListener('load', function () {
@ -128,7 +127,6 @@ const Network = ({
<Spin
// style={{ }}
childStyle={{ width: "100%", height: clientHeight - 188 }}
spinning={spinning}>
<div id='show' style={{ width: "100%", height: "100%" }}>
@ -139,7 +137,7 @@ const Network = ({
height: '100%',
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
>
<p>你的浏览器不支持 iframe </p>

Loading…
Cancel
Save