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
Unified 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. 28
      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 React, { useState, useEffect, useMemo } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { import {
Spin, Row, Col, Select, Radio, Empty, Spin, Row, Col, Select, Radio, Empty,
} from 'antd'; } from 'antd';
// import { LayoutContent, ExportData } from '@peace/components'; // import { LayoutContent, ExportData } from '@peace/components';
import ProTable from '@ant-design/pro-table'; 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 { PinyinHelper, Func as PeaceFunc } from '@peace/utils';
import DeviceTree from '../components/device-tree'; import DeviceTree from '../components/device-tree';
import { DeviceTypes } from '../constant'; import { DeviceTypes } from '../constant';
import qs from "qs";
import '../style.less'; import '../style.less';
function DeviceMonitor({ ...props }) { function DeviceMonitor ({ ...props }) {
const { const {
dispatch, actions, user, clientWidth, clientHeight, loading, dispatch, actions, user, clientWidth, clientHeight, loading,
myStructList, deviceMetasWithFollow, devices, dimensions, deviceListAlarms, factorStations, myStructList, deviceMetasWithFollow, devices, dimensions, deviceListAlarms, factorStations,
} = props; } = props;
const [params, setParams] = useState({}); const [params, setParams] = useState({});
const [selectStructure, setSelectStructure] = useState(null); const [selectStructure, setSelectStructure] = useState(null);
const [extraType, setExtraType] = useState('tree'); const [extraType, setExtraType] = useState('tree');
// const pageStyle = Func.getPaginationStyle(); // 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.getDeviceMeta());
// dispatch(actions.dataMonitor.getMyStructList(user?.orgId)).then((res) => { // dispatch(actions.dataMonitor.getMyStructList(user?.orgId)).then((res) => {
// if (res.success) { // if (res.success) {
@ -34,238 +45,238 @@ function DeviceMonitor({ ...props }) {
// } // }
// } // }
// }); // });
}, []); }, []);
useEffect(() => { useEffect(() => {
if (selectStructure && myStructList?.length > 0) { if (selectStructure && myStructList?.length > 0) {
const curStructure = myStructList.find((v) => v.id === selectStructure); const curStructure = myStructList.find((v) => v.id === selectStructure);
if (curStructure) { if (curStructure) {
// dispatch(actions.dataMonitor.getStationList(curStructure?.id)); // dispatch(actions.dataMonitor.getStationList(curStructure?.id));
// dispatch(actions.dataMonitor.getDeviceList(curStructure?.iotaThingId)).then((res) => { // dispatch(actions.dataMonitor.getDeviceList(curStructure?.iotaThingId)).then((res) => {
// if (res.success) { // if (res.success) {
// const instances = res?.payload?.data?.instances; // const instances = res?.payload?.data?.instances;
// if (instances) { // if (instances) {
// const deviceIds = Object.keys(instances).filter((k) => instances[k]?.type == 's.d'); // const deviceIds = Object.keys(instances).filter((k) => instances[k]?.type == 's.d');
// dispatch(actions.dataMonitor.getDevicesAlarms(deviceIds, { limit: 5 })); // dispatch(actions.dataMonitor.getDevicesAlarms(deviceIds, { limit: 5 }));
// } // }
// } // }
// }); // });
// dispatch(actions.dataMonitor.getDimensionsList(curStructure?.iotaThingId)); // dispatch(actions.dataMonitor.getDimensionsList(curStructure?.iotaThingId));
} }
} }
}, [selectStructure]); }, [selectStructure]);
// 结构物切换 // 结构物切换
const sturctureChange = (value) => { const sturctureChange = (value) => {
setSelectStructure(value); setSelectStructure(value);
}; };
// 展示切换 // 展示切换
const onExtraChange = (e) => { const onExtraChange = (e) => {
setExtraType(e.target.value); setExtraType(e.target.value);
}; };
const renderExtra = () => ( const renderExtra = () => (
<Radio.Group onChange={onExtraChange} value={extraType}> <Radio.Group onChange={onExtraChange} value={extraType}>
<Radio.Button value="tree"> <Radio.Button value="tree">
<ApartmentOutlined /> <ApartmentOutlined />
{' '} {' '}
树状展示 树状展示
</Radio.Button> </Radio.Button>
<Radio.Button value="table"> <Radio.Button value="table">
<TableOutlined /> <TableOutlined />
{' '} {' '}
表格展示 表格展示
</Radio.Button> </Radio.Button>
</Radio.Group> </Radio.Group>
); );
// 计算设备列表数据缓存 // 计算设备列表数据缓存
const dataSource = useMemo(() => { const dataSource = useMemo(() => {
const result = []; const result = [];
if (devices?.instances) { if (devices?.instances) {
const { instances } = devices; const { instances } = devices;
const stations = factorStations.reduce((p, c) => p.concat(c.groups), []).reduce((pre, cur) => pre.concat(cur.stations), []); const stations = factorStations.reduce((p, c) => p.concat(c.groups), []).reduce((pre, cur) => pre.concat(cur.stations), []);
Object.keys(instances).forEach((k) => { Object.keys(instances).forEach((k) => {
if (instances[k].type == 's.d') { if (instances[k].type == 's.d') {
const dType = instances[k]?.instance?.properties?.deviceType; const dType = instances[k]?.instance?.properties?.deviceType;
result.push({ result.push({
id: k, id: k,
name: instances[k].name || '', name: instances[k].name || '',
deviceTypeId: dType, deviceTypeId: dType,
deviceType: dType ? DeviceTypes[dType] : '', deviceType: dType ? DeviceTypes[dType] : '',
productName: instances[k]?.instance?.properties?.productName || '', productName: instances[k]?.instance?.properties?.productName || '',
productType: instances[k]?.instance?.properties?.productType || '', productType: instances[k]?.instance?.properties?.productType || '',
location: stations.filter((f) => Object.keys(f.iotaDevices).includes(k)).map((v) => v.name).toString(), location: stations.filter((f) => Object.keys(f.iotaDevices).includes(k)).map((v) => v.name).toString(),
status: deviceListAlarms.find((v) => v.deviceId === k) ? 'alarm' : 'normal', status: deviceListAlarms.find((v) => v.deviceId === k) ? 'alarm' : 'normal',
}); });
} }
}); });
} }
return result; return result;
}, [devices, deviceListAlarms]); }, [devices, deviceListAlarms]);
// 筛选过滤数据 // 筛选过滤数据
const filterDataSource = () => { const filterDataSource = () => {
const { const {
name, deviceType, productType, productName, location, status, name, deviceType, productType, productName, location, status,
} = params; } = params;
return dataSource.filter((s) => (name ? s.name ? (s.name.indexOf(name) != -1 || PinyinHelper.isPinyinMatched(s.name, name)) : false : true) 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) && (location ? s.location ? (s.location.indexOf(location) != -1 || PinyinHelper.isPinyinMatched(s.location, location)) : false : true)
&& (deviceType ? s.deviceTypeId == deviceType : true) && (deviceType ? s.deviceTypeId == deviceType : true)
&& (productType ? s.productType == productType : true) && (productType ? s.productType == productType : true)
&& (status ? s.status == status : true) && (status ? s.status == status : true)
&& (productName ? s.productName ? (s.productName.indexOf(productName) != -1 || PinyinHelper.isPinyinMatched(s.productName, productName)) : false : true)); && (productName ? s.productName ? (s.productName.indexOf(productName) != -1 || PinyinHelper.isPinyinMatched(s.productName, productName)) : false : true));
}; };
// const deviceTypeIds = Func.uniqueArr(dataSource, 'deviceTypeId'); // const deviceTypeIds = Func.uniqueArr(dataSource, 'deviceTypeId');
// const productTypeIds = Func.uniqueArr(dataSource, 'productType'); // const productTypeIds = Func.uniqueArr(dataSource, 'productType');
const columns = [{ const columns = [{
title: '名称', title: '名称',
dataIndex: 'name', dataIndex: 'name',
ellipsis: true, ellipsis: true,
}, { }, {
title: '设备类型', title: '设备类型',
dataIndex: 'deviceType', dataIndex: 'deviceType',
// valueEnum: Func.transValueEnum(deviceTypeIds, 'deviceTypeId', 'deviceType'), // valueEnum: Func.transValueEnum(deviceTypeIds, 'deviceTypeId', 'deviceType'),
// fieldProps: Func.getSelectCommonProps(), // fieldProps: Func.getSelectCommonProps(),
}, { }, {
title: '产品名称', title: '产品名称',
dataIndex: 'productName', dataIndex: 'productName',
ellipsis: true, ellipsis: true,
}, { }, {
title: '产品型号', title: '产品型号',
dataIndex: 'productType', dataIndex: 'productType',
// valueEnum: Func.transValueEnum(productTypeIds, 'productType', 'productType'), // valueEnum: Func.transValueEnum(productTypeIds, 'productType', 'productType'),
// fieldProps: Func.getSelectCommonProps(), // fieldProps: Func.getSelectCommonProps(),
}, { }, {
title: '测点', title: '测点',
dataIndex: 'location', dataIndex: 'location',
}, { }, {
title: '状态', title: '状态',
dataIndex: 'status', dataIndex: 'status',
filters: true, filters: true,
onFilter: true, onFilter: true,
valueEnum: { valueEnum: {
normal: { text: '正常', status: 'Success' }, normal: { text: '正常', status: 'Success' },
alarm: { text: '异常', status: 'Error' }, alarm: { text: '异常', status: 'Error' },
}, },
// fieldProps: Func.getSelectCommonProps(), // fieldProps: Func.getSelectCommonProps(),
}]; }];
const renderTitle = () => ( const renderTitle = () => (
<div className="device-monitor"> <div className="device-monitor">
设备总数: 设备总数:
{' '} {' '}
{dataSource.length} {dataSource.length}
{' '} {' '}
个; 个;
异常设备: 异常设备:
<span className="title-alarm">{dataSource.filter((f) => f.status === 'alarm').length}</span> <span className="title-alarm">{dataSource.filter((f) => f.status === 'alarm').length}</span>
{' '} {' '}
个; 个;
正常设备: 正常设备:
<span className="title-normal">{dataSource.filter((f) => f.status === 'normal').length}</span> <span className="title-normal">{dataSource.filter((f) => f.status === 'normal').length}</span>
{' '} {' '}
个; 个;
</div> </div>
); );
const data = filterDataSource(); const data = filterDataSource();
return ( return (
// <div>div</div> // <div>div</div>
// <LayoutContent> // <LayoutContent>
<Spin spinning={false}> <Spin spinning={false}>
<Select <Select
allowClear allowClear
placeholder="选择结构物" placeholder="选择结构物"
style={{ minWidth: 300, marginBottom: 15 }} style={{ minWidth: 300, marginBottom: 15 }}
getPopupContainer={(triggerNode) => triggerNode.parentNode} getPopupContainer={(triggerNode) => triggerNode.parentNode}
value={selectStructure} value={selectStructure}
onChange={sturctureChange} onChange={sturctureChange}
optionFilterProp="children" optionFilterProp="children"
showSearch showSearch
filterOption={PeaceFunc.selectFilterOption} filterOption={PeaceFunc.selectFilterOption}
> >
{myStructList.map((v) => <Select.Option key={v.id} value={v.id}>{v.name}</Select.Option>)} {myStructList.map((v) => <Select.Option key={v.id} value={v.id}>{v.name}</Select.Option>)}
</Select> </Select>
<ProCard title={renderTitle()} extra={renderExtra()} headerBordered> <ProCard title={renderTitle()} extra={renderExtra()} headerBordered>
{ {
extraType === 'tree' extraType === 'tree'
? (myStructList.find((v) => v.id === selectStructure) ? (myStructList.find((v) => v.id === selectStructure)
&& deviceMetasWithFollow?.devices?.length > 0 && deviceMetasWithFollow?.devices?.length > 0
&& devices.instances) && devices.instances)
? ( ? (
<DeviceTree <DeviceTree
deviceMetasWithFollow={deviceMetasWithFollow} deviceMetasWithFollow={deviceMetasWithFollow}
deviceList={devices} deviceList={devices}
dimensionlist={dimensions} dimensionlist={dimensions}
dispatch={dispatch} dispatch={dispatch}
struct={myStructList.find((v) => v.id === selectStructure)} struct={myStructList.find((v) => v.id === selectStructure)}
clientHeight={clientHeight} clientHeight={clientHeight}
clientWidth={clientWidth} clientWidth={clientWidth}
/> />
) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> ) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
: ( : (
<ProTable <ProTable
tableClassName="device-monitor-pro-table" tableClassName="device-monitor-pro-table"
className="device-monitor-pro-table" className="device-monitor-pro-table"
columns={columns} columns={columns}
rowKey="id" rowKey="id"
request={async (params) => { request={async (params) => {
setParams(params); setParams(params);
return { return {
data: [], data: [],
success: true, success: true,
}; };
}} }}
pagination={{ }} pagination={{}}
options={{ options={{
search: false, search: false,
reload: false, reload: false,
}} }}
search={{ search={{
className: 'device-monitor-search', className: 'device-monitor-search',
}} }}
toolBarRender={() => { toolBarRender={() => {
const node = []; const node = [];
node.push(<ExportData showIcon fileName="设备列表" exportType="fileSaver" data={data} columns={columns} key="export" />); node.push(<ExportData showIcon fileName="设备列表" exportType="fileSaver" data={data} columns={columns} key="export" />);
return node; return node;
}} }}
// scroll={{ y: Func.getContentHeight(clientHeight) - 421 }} // scroll={{ y: Func.getContentHeight(clientHeight) - 421 }}
dateFormatter="string" dateFormatter="string"
headerTitle="设备列表" headerTitle="设备列表"
dataSource={data} dataSource={data}
/> />
) )
} }
</ProCard> </ProCard>
</Spin> </Spin>
// </LayoutContent> // </LayoutContent>
); );
} }
function mapStateToProps(state) { function mapStateToProps (state) {
const { const {
auth, global, myStructList, deviceMeta, deviceList, dimensionsList, deviceListAlarms, factorStations, auth, global, myStructList, deviceMeta, deviceList, dimensionsList, deviceListAlarms, factorStations,
} = state; } = state;
return { return {
loading: myStructList?.isRequesting || deviceMeta?.isRequesting || deviceList?.isRequesting || dimensionsList?.isRequesting, loading: myStructList?.isRequesting || deviceMeta?.isRequesting || deviceList?.isRequesting || dimensionsList?.isRequesting,
user: auth?.user, user: auth?.user,
actions: global?.actions, actions: global?.actions,
clientWidth: global?.clientWidth, clientWidth: global?.clientWidth,
clientHeight: global?.clientHeight, clientHeight: global?.clientHeight,
myStructList: myStructList?.data || [], myStructList: myStructList?.data || [],
deviceMetasWithFollow: deviceMeta?.data || {}, deviceMetasWithFollow: deviceMeta?.data || {},
devices: deviceList?.data || {}, devices: deviceList?.data || {},
dimensions: dimensionsList?.data || { dimensions: [], total: 0 }, dimensions: dimensionsList?.data || { dimensions: [], total: 0 },
deviceListAlarms: deviceListAlarms?.data || [], deviceListAlarms: deviceListAlarms?.data || [],
factorStations: factorStations?.data || [], factorStations: factorStations?.data || [],
}; };
} }
export default connect(mapStateToProps)(DeviceMonitor); export default connect(mapStateToProps)(DeviceMonitor);

1
web-network/package.json
View File

@ -87,6 +87,7 @@
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mini-dynamic-antd-theme": "^0.5.3", "mini-dynamic-antd-theme": "^0.5.3",
"moment": "^2.29.4", "moment": "^2.29.4",
"qs": "^6.11.2",
"react-color": "^2.19.3", "react-color": "^2.19.3",
"react-router-breadcrumbs-hoc": "^4.0.1", "react-router-breadcrumbs-hoc": "^4.0.1",
"react-sortable-hoc": "^2.0.0", "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) { if (socket) {
socket.disconnect(); socket.disconnect();
} }
history.push(`/network`); history.push(`/signin`);
} }
}} }}
style={{ style={{
@ -378,7 +378,7 @@ const Header = (props) => {
if (socket) { if (socket) {
socket.disconnect(); socket.disconnect();
} }
history.push(`/network`); history.push(`/signin`);
}}> }}>
退出 退出
{/* <Nav.Item itemKey={"logout"} text={"退出"} style={{ textAlign: "center" }} /> */} {/* <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(); NProgress.done();
if ((!user || !user.authorized)) { if ((!user || !user.authorized)) {
if (!location.pathname.includes('projectGroup')) { if (!location.pathname.includes('projectGroup')) {
history.push('/network'); history.push('/signin');
} }
} }
if (msg) { if (msg) {

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

@ -109,8 +109,22 @@ const Network = ({
</div> </div>
<div id='show' style={{ width: "100%", height: "calc(100% - 106px)" }}> <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={{ <div style={{
display: "flex", alignItems: 'center', justifyContent: "space-between", display: "flex", alignItems: 'center', justifyContent: "space-between",
borderBottom: '1px solid rgb(184 176 176 / 60%)', padding: 10 borderBottom: '1px solid rgb(184 176 176 / 60%)', padding: 10
@ -124,7 +138,7 @@ const Network = ({
<Radio value={"tree"}>树状展示</Radio> <Radio value={"tree"}>树状展示</Radio>
<Radio value={"table"}>表格展示</Radio> <Radio value={"table"}>表格展示</Radio>
</RadioGroup> </RadioGroup>
{/* <div> <div>
<Button <Button
theme="solid" theme="solid"
type="primary" type="primary"
@ -137,10 +151,10 @@ const Network = ({
border: '1px solid #005ABD' border: '1px solid #005ABD'
}} }}
onClick={() => { onClick={() => {
}} }}
> >
</Button> </Button>
<Button <Button
theme="solid" theme="solid"
@ -158,13 +172,13 @@ const Network = ({
> >
表格展示 表格展示
</Button> </Button>
</div> */} </div>
</div> </div>
{show == 'tree' && <TreeShow thingId={thingId} />} {show == 'tree' && <TreeShow thingId={thingId} />}
{show == 'table' && <TableShow thingId={thingId} project={projectValue} /> {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: [{ items: [{
itemKey: 'operationData', to: '/analysis/operationAnalysis/operationData', text: '运维数据' 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