From 616516863f6d2d3975fd7acb376dcd8f52641e89 Mon Sep 17 00:00:00 2001 From: wenlele Date: Wed, 6 Dec 2023 14:01:34 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BD=91=E9=89=B4=E6=9D=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/config.js | 24 +- web-network/client/src/index.js | 2 +- .../src/sections/auth/containers/login.js | 79 +-- .../src/sections/network/actions/network.js | 40 +- .../device-tree/equipment-option.js | 6 +- .../network/components/device-tree/index.js | 552 ++++++++-------- .../components/device-tree/zuwang-main.js | 18 +- .../network/containers/device-monitor.js | 32 +- .../sections/network/containers/tableShow.js | 612 +++++++++--------- .../sections/analysis/containers/network.jsx | 4 +- 10 files changed, 680 insertions(+), 689 deletions(-) diff --git a/api/config.js b/api/config.js index 9285bb4..7bfb324 100644 --- a/api/config.js +++ b/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: ["*"] 跳过所有路由 diff --git a/web-network/client/src/index.js b/web-network/client/src/index.js index 0f6f57a..7c37f98 100644 --- a/web-network/client/src/index.js +++ b/web-network/client/src/index.js @@ -4,4 +4,4 @@ import React from 'react'; import { render } from 'react-dom'; import App from './app'; -render((), document.getElementById('App')); \ No newline at end of file +render((), document.getElementById('App')); \ No newline at end of file diff --git a/web-network/client/src/sections/auth/containers/login.js b/web-network/client/src/sections/auth/containers/login.js index 7c77bfa..333d5ce 100644 --- a/web-network/client/src/sections/auth/containers/login.js +++ b/web-network/client/src/sections/auth/containers/login.js @@ -73,45 +73,48 @@ const Login = props => { return ( -
- {/*
*/} -
-
-

南昌县智慧交通监管系统

-
- -
用户名
- { - //('e.target.value', e.target.value) - setUserName(e.target.value) - setInputChanged(true) - }} - /> -
-
密码
- - + {"{ token : 未生效,请刷新页面}"} +
+ //
+ // {/*
*/} + //
+ //
+ //

南昌县智慧交通监管系统

+ // + // + //
用户名
+ // { + // //('e.target.value', e.target.value) + // setUserName(e.target.value) + // setInputChanged(true) + // }} + // /> + //
+ //
密码
+ // + // { - //console.log('setPassword', e.target.value) - setPassword(e.target.value) - setInputChanged(true) - }} - /> - - - -
-
-
+ // onChange={e => { + // //console.log('setPassword', e.target.value) + // setPassword(e.target.value) + // setInputChanged(true) + // }} + // /> + // + // + // + //
+ //
+ // ); } diff --git a/web-network/client/src/sections/network/actions/network.js b/web-network/client/src/sections/network/actions/network.js index fb0e1fd..8f08ee2 100644 --- a/web-network/client/src/sections/network/actions/network.js +++ b/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: '获取设备告警信息失败' }, diff --git a/web-network/client/src/sections/network/components/device-tree/equipment-option.js b/web-network/client/src/sections/network/components/device-tree/equipment-option.js index 25def35..67615d7 100644 --- a/web-network/client/src/sections/network/components/device-tree/equipment-option.js +++ b/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 || [] }) } diff --git a/web-network/client/src/sections/network/components/device-tree/index.js b/web-network/client/src/sections/network/components/device-tree/index.js index ea90bc9..48f8c6b 100644 --- a/web-network/client/src/sections/network/components/device-tree/index.js +++ b/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 ( -
-
- - + return ( +
+
+ + - - - { - setTargetNode(v); - setInputSearching(true); - // localStorage.setItem('inputSearching', true) - }} - /> - -
- { - devices?.instances - && ( - - ) - } + + + { + setTargetNode(v); + setInputSearching(true); + // localStorage.setItem('inputSearching', true) + }} + /> + +
+ { + devices?.instances + && ( + + ) + } - + - - -
- ); + + +
+ ); } diff --git a/web-network/client/src/sections/network/components/device-tree/zuwang-main.js b/web-network/client/src/sections/network/components/device-tree/zuwang-main.js index 558e5b2..956889a 100644 --- a/web-network/client/src/sections/network/components/device-tree/zuwang-main.js +++ b/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(() => { diff --git a/web-network/client/src/sections/network/containers/device-monitor.js b/web-network/client/src/sections/network/containers/device-monitor.js index bdf3779..c2cdc12 100644 --- a/web-network/client/src/sections/network/containers/device-monitor.js +++ b/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} + /> ) : : ( - + ) } diff --git a/web-network/client/src/sections/network/containers/tableShow.js b/web-network/client/src/sections/network/containers/tableShow.js index b23afc9..eadfc97 100644 --- a/web-network/client/src/sections/network/containers/tableShow.js +++ b/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 ( - <> - -
{r.sensorName.length > 7 ? `${r.sensorName.substr(0, 7)}...` : r.sensorName}
-
- - ) + const columns = [ + { + title: '设备名称', + dataIndex: 'sensorName', + width: '20%', + key: 'sensorName', + render: (_, r) => { + return ( + <> + +
{r.sensorName.length > 7 ? `${r.sensorName.substr(0, 7)}...` : r.sensorName}
+
+ + ) + }, + }, + { + title: '设备类型', + dataIndex: 'deviceType', + width: '15%', + key: 'deviceType', + }, + { + title: '最后采集时间', + dataIndex: 'collectTime', + width: '15%', + key: 'collectTime', + }, + { + title: '数据', + dataIndex: 'data', + width: '20%', + key: 'data', + render: (_, r) => { + return ( + <> + +
{r.data.length > 6 ? `${r.data.substr(0, 6)}...` : r.data}
+
+ + ) + }, + }, + { + 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 ( - <> - -
{r.data.length > 6 ? `${r.data.substr(0, 6)}...` : r.data}
-
- - ) + { + 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 ( - <> -
-
- } - label='名称' - placeholder='请输入设备名称' - pure - allowClear - style={{ width: 260, marginRight: 12 }} - onChange={inputChange}/> - - -
-
- {' '} - {lastData.length ? ( - - ) : ( - '' - )} -
-
-
- - ) + ] + return ( + <> +
+
+ } + label='名称' + placeholder='请输入设备名称' + pure + allowClear + style={{ width: 260, marginRight: 12 }} + onChange={inputChange} /> + + +
+
+ {' '} + {lastData.length ? ( + + ) : ( + '' + )} +
+
+
+ + ) } -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) diff --git a/web/client/src/sections/analysis/containers/network.jsx b/web/client/src/sections/analysis/containers/network.jsx index 7ddc3d3..95c059b 100644 --- a/web/client/src/sections/analysis/containers/network.jsx +++ b/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) { // 监听iframe的load事件 iframe.addEventListener('load', function () { @@ -128,7 +127,6 @@ const Network = ({
@@ -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 >

你的浏览器不支持 iframe 。