free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

iframe 嵌套

dev
wenlele 1 year ago
parent
2aa93c6ef1
commit
380de45cd4
6 changed files with 256 additions and 230 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 445
      web-network/client/src/sections/network/containers/device-monitor.js
  2. 1
      web-network/package.json
  3. 4
      web/client/src/layout/components/header/index.jsx
  4. 2
      web/client/src/layout/containers/layout/index.jsx
  5. 24
      web/client/src/sections/analysis/containers/network.jsx
  6. 6
      web/client/src/sections/analysis/nav-item.jsx

445
web-network/client/src/sections/network/containers/device-monitor.js
View File

@ -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 = () => (
<Radio.Group onChange={onExtraChange} value={extraType}>
<Radio.Button value="tree">
<ApartmentOutlined />
{' '}
树状展示
</Radio.Button>
<Radio.Button value="table">
<TableOutlined />
{' '}
表格展示
</Radio.Button>
</Radio.Group>
);
const renderExtra = () => (
<Radio.Group onChange={onExtraChange} value={extraType}>
<Radio.Button value="tree">
<ApartmentOutlined />
{' '}
树状展示
</Radio.Button>
<Radio.Button value="table">
<TableOutlined />
{' '}
表格展示
</Radio.Button>
</Radio.Group>
);
// 计算设备列表数据缓存
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 = () => (
<div className="device-monitor">
设备总数:
{' '}
{dataSource.length}
{' '}
个;
异常设备:
<span className="title-alarm">{dataSource.filter((f) => f.status === 'alarm').length}</span>
{' '}
个;
正常设备:
<span className="title-normal">{dataSource.filter((f) => f.status === 'normal').length}</span>
{' '}
个;
</div>
);
const data = filterDataSource();
return (
const renderTitle = () => (
<div className="device-monitor">
设备总数:
{' '}
{dataSource.length}
{' '}
个;
异常设备:
<span className="title-alarm">{dataSource.filter((f) => f.status === 'alarm').length}</span>
{' '}
个;
正常设备:
<span className="title-normal">{dataSource.filter((f) => f.status === 'normal').length}</span>
{' '}
个;
</div>
);
const data = filterDataSource();
return (
// <div>div</div>
// <LayoutContent>
<Spin spinning={false}>
<Select
allowClear
placeholder="选择结构物"
style={{ minWidth: 300, marginBottom: 15 }}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
value={selectStructure}
onChange={sturctureChange}
optionFilterProp="children"
showSearch
filterOption={PeaceFunc.selectFilterOption}
>
{myStructList.map((v) => <Select.Option key={v.id} value={v.id}>{v.name}</Select.Option>)}
</Select>
<ProCard title={renderTitle()} extra={renderExtra()} headerBordered>
{
extraType === 'tree'
? (myStructList.find((v) => v.id === selectStructure)
&& deviceMetasWithFollow?.devices?.length > 0
&& devices.instances)
? (
<DeviceTree
deviceMetasWithFollow={deviceMetasWithFollow}
deviceList={devices}
dimensionlist={dimensions}
dispatch={dispatch}
struct={myStructList.find((v) => v.id === selectStructure)}
clientHeight={clientHeight}
clientWidth={clientWidth}
/>
) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
: (
<ProTable
tableClassName="device-monitor-pro-table"
className="device-monitor-pro-table"
columns={columns}
rowKey="id"
request={async (params) => {
setParams(params);
return {
data: [],
success: true,
};
}}
pagination={{ }}
options={{
search: false,
reload: false,
}}
search={{
className: 'device-monitor-search',
}}
toolBarRender={() => {
const node = [];
node.push(<ExportData showIcon fileName="设备列表" exportType="fileSaver" data={data} columns={columns} key="export" />);
return node;
}}
// scroll={{ y: Func.getContentHeight(clientHeight) - 421 }}
dateFormatter="string"
headerTitle="设备列表"
dataSource={data}
/>
)
}
</ProCard>
</Spin>
<Spin spinning={false}>
<Select
allowClear
placeholder="选择结构物"
style={{ minWidth: 300, marginBottom: 15 }}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
value={selectStructure}
onChange={sturctureChange}
optionFilterProp="children"
showSearch
filterOption={PeaceFunc.selectFilterOption}
>
{myStructList.map((v) => <Select.Option key={v.id} value={v.id}>{v.name}</Select.Option>)}
</Select>
<ProCard title={renderTitle()} extra={renderExtra()} headerBordered>
{
extraType === 'tree'
? (myStructList.find((v) => v.id === selectStructure)
&& deviceMetasWithFollow?.devices?.length > 0
&& devices.instances)
? (
<DeviceTree
deviceMetasWithFollow={deviceMetasWithFollow}
deviceList={devices}
dimensionlist={dimensions}
dispatch={dispatch}
struct={myStructList.find((v) => v.id === selectStructure)}
clientHeight={clientHeight}
clientWidth={clientWidth}
/>
) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
: (
<ProTable
tableClassName="device-monitor-pro-table"
className="device-monitor-pro-table"
columns={columns}
rowKey="id"
request={async (params) => {
setParams(params);
return {
data: [],
success: true,
};
}}
pagination={{}}
options={{
search: false,
reload: false,
}}
search={{
className: 'device-monitor-search',
}}
toolBarRender={() => {
const node = [];
node.push(<ExportData showIcon fileName="设备列表" exportType="fileSaver" data={data} columns={columns} key="export" />);
return node;
}}
// scroll={{ y: Func.getContentHeight(clientHeight) - 421 }}
dateFormatter="string"
headerTitle="设备列表"
dataSource={data}
/>
)
}
</ProCard>
</Spin>
// </LayoutContent>
);
);
}
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);

1
web-network/package.json
View File

@ -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",

4
web/client/src/layout/components/header/index.jsx
View File

@ -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`);
}}>
退出
{/* <Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} /> */}

2
web/client/src/layout/containers/layout/index.jsx
View File

@ -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) {

24
web/client/src/sections/analysis/containers/network.jsx
View File

@ -109,8 +109,22 @@ const Network = ({
</div>
<div id='show' style={{ width: "100%", height: "calc(100% - 106px)" }}>
<iframe
style={{
width: '100%',
height: '100%',
zIndex: 7, border: 0
}}
src={`http://localhost:5000/network?strucData=${JSON.stringify(organizationsStruc?.find(v => v.thingId == thingId) || {})}`}
allowFullScreen
>
<p>你的浏览器不支持 iframe 。</p>
</iframe>
</div>
{/* <div id='show' style={{ width: "100%", height: "calc(100% - 106px)" }}>
<div style={{
display: "flex", alignItems: 'center', justifyContent: "space-between",
borderBottom: '1px solid rgb(184 176 176 / 60%)', padding: 10
@ -124,7 +138,7 @@ const Network = ({
<Radio value={"tree"}>树状展示</Radio>
<Radio value={"table"}>表格展示</Radio>
</RadioGroup>
{/* <div>
<div>
<Button
theme="solid"
type="primary"
@ -158,13 +172,13 @@ const Network = ({
>
表格展示
</Button>
</div> */}
</div>
</div>
{show == 'tree' && <TreeShow thingId={thingId} />}
{show == 'table' && <TableShow thingId={thingId} project={projectValue} />
}
</div>
</div>
</div > */}
</div >

6
web/client/src/sections/analysis/nav-item.jsx
View File

@ -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: '一图统揽'
}
]
},
// {

Write Preview
Loading…
Cancel
Save