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 8b76ef6..3b85dbe 100644 --- a/web-network/client/src/sections/network/containers/device-monitor.js +++ b/web-network/client/src/sections/network/containers/device-monitor.js @@ -1,7 +1,7 @@ import React, { useState, useEffect, useMemo } from 'react'; import { connect } from 'react-redux'; import { - Spin, Row, Col, Select, Radio, Empty, + Spin, Row, Col, Select, Radio, Empty, } from 'antd'; // import { LayoutContent, ExportData } from '@peace/components'; import ProTable from '@ant-design/pro-table'; @@ -11,20 +11,31 @@ import { ApartmentOutlined, TableOutlined } from '@ant-design/icons'; import { PinyinHelper, Func as PeaceFunc } from '@peace/utils'; import DeviceTree from '../components/device-tree'; import { DeviceTypes } from '../constant'; +import qs from "qs"; + import '../style.less'; -function DeviceMonitor({ ...props }) { - const { - dispatch, actions, user, clientWidth, clientHeight, loading, - myStructList, deviceMetasWithFollow, devices, dimensions, deviceListAlarms, factorStations, - } = props; +function DeviceMonitor ({ ...props }) { + const { + dispatch, actions, user, clientWidth, clientHeight, loading, + myStructList, deviceMetasWithFollow, devices, dimensions, deviceListAlarms, factorStations, + } = props; + - const [params, setParams] = useState({}); - const [selectStructure, setSelectStructure] = useState(null); - const [extraType, setExtraType] = useState('tree'); + const [params, setParams] = useState({}); + const [selectStructure, setSelectStructure] = useState(null); + const [extraType, setExtraType] = useState('tree'); // const pageStyle = Func.getPaginationStyle(); - useEffect(() => { + + let strucParam = JSON.parse((qs.parse(props.location?.search.slice(1)) || {})?.strucData) + console.log(1111, strucParam) + + + + useEffect(() => { + + // dispatch(actions.dataMonitor.getDeviceMeta()); // dispatch(actions.dataMonitor.getMyStructList(user?.orgId)).then((res) => { // if (res.success) { @@ -34,238 +45,238 @@ function DeviceMonitor({ ...props }) { // } // } // }); - }, []); + }, []); - 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]); + 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 sturctureChange = (value) => { - setSelectStructure(value); - }; - // 展示切换 - const onExtraChange = (e) => { - setExtraType(e.target.value); - }; + // 结构物切换 + const sturctureChange = (value) => { + setSelectStructure(value); + }; + // 展示切换 + const onExtraChange = (e) => { + setExtraType(e.target.value); + }; - const renderExtra = () => ( - - - - {' '} - 树状展示 - - - - {' '} - 表格展示 - - - ); + const renderExtra = () => ( + + + + {' '} + 树状展示 + + + + {' '} + 表格展示 + + + ); - // 计算设备列表数据缓存 - const dataSource = useMemo(() => { - const result = []; - if (devices?.instances) { - const { instances } = devices; - const stations = factorStations.reduce((p, c) => p.concat(c.groups), []).reduce((pre, cur) => pre.concat(cur.stations), []); - Object.keys(instances).forEach((k) => { - if (instances[k].type == 's.d') { - const dType = instances[k]?.instance?.properties?.deviceType; - result.push({ - id: k, - name: instances[k].name || '', - deviceTypeId: dType, - deviceType: dType ? DeviceTypes[dType] : '', - productName: instances[k]?.instance?.properties?.productName || '', - productType: instances[k]?.instance?.properties?.productType || '', - location: stations.filter((f) => Object.keys(f.iotaDevices).includes(k)).map((v) => v.name).toString(), - status: deviceListAlarms.find((v) => v.deviceId === k) ? 'alarm' : 'normal', - }); - } - }); - } + // 计算设备列表数据缓存 + const dataSource = useMemo(() => { + const result = []; + if (devices?.instances) { + const { instances } = devices; + const stations = factorStations.reduce((p, c) => p.concat(c.groups), []).reduce((pre, cur) => pre.concat(cur.stations), []); + Object.keys(instances).forEach((k) => { + if (instances[k].type == 's.d') { + const dType = instances[k]?.instance?.properties?.deviceType; + result.push({ + id: k, + name: instances[k].name || '', + deviceTypeId: dType, + deviceType: dType ? DeviceTypes[dType] : '', + productName: instances[k]?.instance?.properties?.productName || '', + productType: instances[k]?.instance?.properties?.productType || '', + location: stations.filter((f) => Object.keys(f.iotaDevices).includes(k)).map((v) => v.name).toString(), + status: deviceListAlarms.find((v) => v.deviceId === k) ? 'alarm' : 'normal', + }); + } + }); + } - return result; - }, [devices, deviceListAlarms]); + return result; + }, [devices, deviceListAlarms]); - // 筛选过滤数据 - const filterDataSource = () => { - const { - name, deviceType, productType, productName, location, status, - } = params; - return dataSource.filter((s) => (name ? s.name ? (s.name.indexOf(name) != -1 || PinyinHelper.isPinyinMatched(s.name, name)) : false : true) - && (location ? s.location ? (s.location.indexOf(location) != -1 || PinyinHelper.isPinyinMatched(s.location, location)) : false : true) - && (deviceType ? s.deviceTypeId == deviceType : true) - && (productType ? s.productType == productType : true) - && (status ? s.status == status : true) - && (productName ? s.productName ? (s.productName.indexOf(productName) != -1 || PinyinHelper.isPinyinMatched(s.productName, productName)) : false : true)); - }; + // 筛选过滤数据 + const filterDataSource = () => { + const { + name, deviceType, productType, productName, location, status, + } = params; + return dataSource.filter((s) => (name ? s.name ? (s.name.indexOf(name) != -1 || PinyinHelper.isPinyinMatched(s.name, name)) : false : true) + && (location ? s.location ? (s.location.indexOf(location) != -1 || PinyinHelper.isPinyinMatched(s.location, location)) : false : true) + && (deviceType ? s.deviceTypeId == deviceType : true) + && (productType ? s.productType == productType : true) + && (status ? s.status == status : true) + && (productName ? s.productName ? (s.productName.indexOf(productName) != -1 || PinyinHelper.isPinyinMatched(s.productName, productName)) : false : true)); + }; // const deviceTypeIds = Func.uniqueArr(dataSource, 'deviceTypeId'); // const productTypeIds = Func.uniqueArr(dataSource, 'productType'); - const columns = [{ - title: '名称', - dataIndex: 'name', - ellipsis: true, + const columns = [{ + title: '名称', + dataIndex: 'name', + ellipsis: true, - }, { - title: '设备类型', - dataIndex: 'deviceType', + }, { + title: '设备类型', + dataIndex: 'deviceType', // valueEnum: Func.transValueEnum(deviceTypeIds, 'deviceTypeId', 'deviceType'), // fieldProps: Func.getSelectCommonProps(), - }, { - title: '产品名称', - dataIndex: 'productName', - ellipsis: true, + }, { + title: '产品名称', + dataIndex: 'productName', + ellipsis: true, - }, { - title: '产品型号', - dataIndex: 'productType', + }, { + title: '产品型号', + dataIndex: 'productType', // valueEnum: Func.transValueEnum(productTypeIds, 'productType', 'productType'), // fieldProps: Func.getSelectCommonProps(), - }, { - title: '测点', - dataIndex: 'location', + }, { + title: '测点', + dataIndex: 'location', - }, { - title: '状态', - dataIndex: 'status', - filters: true, - onFilter: true, - valueEnum: { - normal: { text: '正常', status: 'Success' }, - alarm: { text: '异常', status: 'Error' }, - }, + }, { + title: '状态', + dataIndex: 'status', + filters: true, + onFilter: true, + valueEnum: { + normal: { text: '正常', status: 'Success' }, + alarm: { text: '异常', status: 'Error' }, + }, // fieldProps: Func.getSelectCommonProps(), - }]; + }]; - const renderTitle = () => ( -
- 设备总数: - {' '} - {dataSource.length} - {' '} - 个; - 异常设备: - {dataSource.filter((f) => f.status === 'alarm').length} - {' '} - 个; - 正常设备: - {dataSource.filter((f) => f.status === 'normal').length} - {' '} - 个; -
- ); - const data = filterDataSource(); - return ( + const renderTitle = () => ( +
+ 设备总数: + {' '} + {dataSource.length} + {' '} + 个; + 异常设备: + {dataSource.filter((f) => f.status === 'alarm').length} + {' '} + 个; + 正常设备: + {dataSource.filter((f) => f.status === 'normal').length} + {' '} + 个; +
+ ); + const data = filterDataSource(); + return ( //
div
// - - - - { - extraType === 'tree' - ? (myStructList.find((v) => v.id === selectStructure) - && deviceMetasWithFollow?.devices?.length > 0 - && devices.instances) - ? ( - v.id === selectStructure)} - clientHeight={clientHeight} - clientWidth={clientWidth} - /> - ) : - : ( - { - setParams(params); - return { - data: [], - success: true, - }; - }} - pagination={{ }} - options={{ - search: false, - reload: false, - }} - search={{ - className: 'device-monitor-search', - }} - toolBarRender={() => { - const node = []; - node.push(); - return node; - }} - // scroll={{ y: Func.getContentHeight(clientHeight) - 421 }} - dateFormatter="string" - headerTitle="设备列表" - dataSource={data} - /> - ) - } - - + + + + { + extraType === 'tree' + ? (myStructList.find((v) => v.id === selectStructure) + && deviceMetasWithFollow?.devices?.length > 0 + && devices.instances) + ? ( + v.id === selectStructure)} + clientHeight={clientHeight} + clientWidth={clientWidth} + /> + ) : + : ( + { + setParams(params); + return { + data: [], + success: true, + }; + }} + pagination={{}} + options={{ + search: false, + reload: false, + }} + search={{ + className: 'device-monitor-search', + }} + toolBarRender={() => { + const node = []; + node.push(); + return node; + }} + // scroll={{ y: Func.getContentHeight(clientHeight) - 421 }} + dateFormatter="string" + headerTitle="设备列表" + dataSource={data} + /> + ) + } + + // - ); + ); } -function mapStateToProps(state) { - const { - auth, global, myStructList, deviceMeta, deviceList, dimensionsList, deviceListAlarms, factorStations, - } = state; - return { - loading: myStructList?.isRequesting || deviceMeta?.isRequesting || deviceList?.isRequesting || dimensionsList?.isRequesting, - user: auth?.user, - actions: global?.actions, - clientWidth: global?.clientWidth, - clientHeight: global?.clientHeight, - myStructList: myStructList?.data || [], - deviceMetasWithFollow: deviceMeta?.data || {}, - devices: deviceList?.data || {}, - dimensions: dimensionsList?.data || { dimensions: [], total: 0 }, - deviceListAlarms: deviceListAlarms?.data || [], - factorStations: factorStations?.data || [], - }; +function mapStateToProps (state) { + const { + auth, global, myStructList, deviceMeta, deviceList, dimensionsList, deviceListAlarms, factorStations, + } = state; + return { + loading: myStructList?.isRequesting || deviceMeta?.isRequesting || deviceList?.isRequesting || dimensionsList?.isRequesting, + user: auth?.user, + actions: global?.actions, + clientWidth: global?.clientWidth, + clientHeight: global?.clientHeight, + myStructList: myStructList?.data || [], + deviceMetasWithFollow: deviceMeta?.data || {}, + devices: deviceList?.data || {}, + dimensions: dimensionsList?.data || { dimensions: [], total: 0 }, + deviceListAlarms: deviceListAlarms?.data || [], + factorStations: factorStations?.data || [], + }; } export default connect(mapStateToProps)(DeviceMonitor); diff --git a/web-network/package.json b/web-network/package.json index e907806..7d26451 100644 --- a/web-network/package.json +++ b/web-network/package.json @@ -87,6 +87,7 @@ "lodash": "^4.17.21", "mini-dynamic-antd-theme": "^0.5.3", "moment": "^2.29.4", + "qs": "^6.11.2", "react-color": "^2.19.3", "react-router-breadcrumbs-hoc": "^4.0.1", "react-sortable-hoc": "^2.0.0", diff --git a/web/client/src/layout/components/header/index.jsx b/web/client/src/layout/components/header/index.jsx index 917b365..55dc3fc 100644 --- a/web/client/src/layout/components/header/index.jsx +++ b/web/client/src/layout/components/header/index.jsx @@ -104,7 +104,7 @@ const Header = (props) => { if (socket) { socket.disconnect(); } - history.push(`/network`); + history.push(`/signin`); } }} style={{ @@ -378,7 +378,7 @@ const Header = (props) => { if (socket) { socket.disconnect(); } - history.push(`/network`); + history.push(`/signin`); }}> 退出 {/* */} diff --git a/web/client/src/layout/containers/layout/index.jsx b/web/client/src/layout/containers/layout/index.jsx index cab2aa6..2a772a6 100644 --- a/web/client/src/layout/containers/layout/index.jsx +++ b/web/client/src/layout/containers/layout/index.jsx @@ -172,7 +172,7 @@ const LayoutContainer = props => { NProgress.done(); if ((!user || !user.authorized)) { if (!location.pathname.includes('projectGroup')) { - history.push('/network'); + history.push('/signin'); } } if (msg) { diff --git a/web/client/src/sections/analysis/containers/network.jsx b/web/client/src/sections/analysis/containers/network.jsx index 7fb2fcc..1200c09 100644 --- a/web/client/src/sections/analysis/containers/network.jsx +++ b/web/client/src/sections/analysis/containers/network.jsx @@ -109,8 +109,22 @@ const Network = ({ -
+ +
+ + + {/*
树状展示 表格展示 - {/*
+
-
*/} +
{show == 'tree' && } {show == 'table' && } -
- + */} + diff --git a/web/client/src/sections/analysis/nav-item.jsx b/web/client/src/sections/analysis/nav-item.jsx index 38b3fa0..80b0dff 100644 --- a/web/client/src/sections/analysis/nav-item.jsx +++ b/web/client/src/sections/analysis/nav-item.jsx @@ -25,9 +25,9 @@ export function getNavItem (user, dispatch) { items: [{ itemKey: 'operationData', to: '/analysis/operationAnalysis/operationData', text: '运维数据' }, - // { - // itemKey: 'network', to: '/analysis/operationAnalysis/network', text: '一图统揽' - // } + { + itemKey: 'network', to: '/analysis/operationAnalysis/network', text: '一图统揽' + } ] }, // {