Skip to content

W
wisdom-components
Commit cf66b908 authored by 李纪文's avatar 李纪文
Browse files
Options

feat: 组态分组增加消息通信

parent 82c96828
Show whitespace changes
Inline Side-by-side
Showing with 278 additions and 151 deletions
packages/extend-components/EC_AlarmCurve/src/demos/Basic.tsx
View file @ cf66b908
...@@ -4,6 +4,15 @@ import { Button } from 'antd'; ...@@ -4,6 +4,15 @@ import { Button } from 'antd';
const Demos = () => { const Demos = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [sensors, setSensors] = useState('出水瞬时流量');
const onOk = () => {
setOpen(false);
};
const onCancel = () => {
setOpen(false);
};
return ( return (
<> <>
...@@ -14,7 +23,21 @@ const Demos = () => { ...@@ -14,7 +23,21 @@ const Demos = () => {
> >
打开限制曲线 打开限制曲线
</Button> </Button>
<LimitCurve open={open} /> <Button
onClick={() => {
setSensors('噪声');
}}
>
改变sensors
</Button>
<LimitCurve
open={open}
onOk={onOk}
onCancel={onCancel}
deviceCode={'EGBF00000120'}
deviceType={'二供泵房'}
sensors={sensors}
/>
</> </>
); );
}; };
......
packages/extend-components/EC_AlarmCurve/src/limitCurve/index.js
View file @ cf66b908
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState } from 'react';
import { ConfigProvider, Modal, Radio, Slider, InputNumber } from 'antd'; import { ConfigProvider, Modal, Radio, Slider, InputNumber, Input, Button } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import moment from 'moment'; import moment from 'moment';
import { BasicChart } from '@wisdom-components/basicchart'; import { BasicChart } from '@wisdom-components/basicchart';
import { getHistoryInfo } from '../apis'; import { getHistoryInfo } from '../apis';
import { std } from 'mathjs'; import { std } from 'mathjs';
import skmeans from 'skmeans'; import skmeans from 'skmeans';
import LoadBox from '@wisdom-components/loadbox';
import { outlierArr, timeArr, chartArr, average } from './utils';
import './index.less'; import './index.less';
const LimitCurve = (props) => { const LimitCurve = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('limit-curve'); const prefixCls = getPrefixCls('limit-curve');
const { width, deviceCode, sensors, deviceType, getContainer, title } = props; const { width, deviceCode, sensors, deviceType, getContainer, title } = props;
const [spinning,setSpinning] = useState(true);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [cluster, setCluster] = useState('K-means'); // 聚集算法 const [timeType, setTimeType] = useState('近7天'); // 时间
const [outlier, setOutlier] = useState(3); // 过滤异常 const [outlier, setOutlier] = useState(3); // 过滤异常
const [curve, setCurve] = useState('特征曲线'); // 曲线类型 const [curve, setCurve] = useState('特征曲线'); // 曲线类型
const [sensitive, setSensitive] = useState(10); // 敏感度 const [sensitive, setSensitive] = useState(10); // 敏感度
...@@ -32,22 +35,23 @@ const LimitCurve = (props) => { ...@@ -32,22 +35,23 @@ const LimitCurve = (props) => {
// 取消 // 取消
const onCancel = () => { const onCancel = () => {
setOpen(false); setOpen(false);
props.onCancel && props.onCancel();
}; };
// 获取历史数据 // 获取历史数据
const getSensorsData = async () => { const getSensorsData = async () => {
setSpinning(true);
const params = { const params = {
isDilute: true, isDilute: true,
zoom: '', zoom: '',
unit: '', unit: '',
dateFrom: moment().subtract(8, 'day').format('YYYY-MM-DD 00:00:00'), dateFrom: moment().subtract(8, 'day').format('YYYY-MM-DD 00:00:00'),
dateTo: moment().subtract(1, 'day').format('YYYY-MM-DD 23:59:59'), dateTo: moment().subtract(1, 'day').format('YYYY-MM-DD 23:59:59'),
acrossTables: [ acrossTables: [{ deviceCode: deviceCode, sensors: sensors, deviceType: deviceType }],
{ deviceCode: 'EGBF00000120', sensors: '出水瞬时流量', deviceType: '二供泵房' },
],
isBoxPlots: true, isBoxPlots: true,
}; };
const results = await getHistoryInfo(params); const results = await getHistoryInfo(params);
setSpinning(false);
const historyData = results?.data?.[0] || {}; const historyData = results?.data?.[0] || {};
setSensorData(() => { setSensorData(() => {
...@@ -80,6 +84,7 @@ const LimitCurve = (props) => { ...@@ -80,6 +84,7 @@ const LimitCurve = (props) => {
const _centroids = centroids.sort((a, b) => { const _centroids = centroids.sort((a, b) => {
return a[0] - b[0]; return a[0] - b[0];
}); });
console.log(_centroids);
const option = { const option = {
xAxis: { xAxis: {
type: 'time', type: 'time',
...@@ -108,17 +113,23 @@ const LimitCurve = (props) => { ...@@ -108,17 +113,23 @@ const LimitCurve = (props) => {
}, },
series: [ series: [
{ {
type: 'scatter',
name: sensors,
sampling: 'average',
large: true,
symbolSize: 5, symbolSize: 5,
data: _chartData.map((item) => { data: _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv]; return [new Date(item.time).getTime(), item.pv];
}), }),
type: 'scatter',
}, },
{ {
data: centroids.map((item) => { type: 'line',
name: sensors,
sampling: 'average',
large: true,
data: _centroids.map((item) => {
return [Math.floor(item[0]), item[1]]; return [Math.floor(item[0]), item[1]];
}), }),
type: 'line',
}, },
], ],
}; };
...@@ -126,8 +137,9 @@ const LimitCurve = (props) => { ...@@ -126,8 +137,9 @@ const LimitCurve = (props) => {
}; };
useEffect(() => { useEffect(() => {
getSensorsData(); open && getSensorsData();
}, []); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
useEffect(() => { useEffect(() => {
const { dataModel = [] } = sensorData; const { dataModel = [] } = sensorData;
...@@ -155,7 +167,6 @@ const LimitCurve = (props) => { ...@@ -155,7 +167,6 @@ const LimitCurve = (props) => {
const dataArr = []; const dataArr = [];
const pvArr = data.map((item) => { const pvArr = data.map((item) => {
return item.pv; return item.pv;
// clusteredArr.push([new Date(item.time).getTime(),item.pv])
}); });
const stdVal = pvArr.length ? std(pvArr) : 0; const stdVal = pvArr.length ? std(pvArr) : 0;
const medianVal = pvArr.length ? average(pvArr) : 0; const medianVal = pvArr.length ? average(pvArr) : 0;
...@@ -173,68 +184,12 @@ const LimitCurve = (props) => { ...@@ -173,68 +184,12 @@ const LimitCurve = (props) => {
_clustered.push(...centroids); _clustered.push(...centroids);
} }
renderChart(_chartData, _clustered); renderChart(_chartData, _clustered);
}, [sensorData, cluster, outlier]); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [sensorData, timeType, outlier]);
useEffect(() => { useEffect(() => {
console.log(chartData);
const _chartData = chartDataHandle(chartData);
const clusteredData = _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
});
const clustered = clusteredData.length ? skmeans(clusteredData, 24) : {};
console.log(clustered);
const { centroids = [] } = clustered;
const _centroids = centroids.sort((a, b) => {
return a[0] - b[0];
});
const option = {
xAxis: {
type: 'time',
// axisTick: {
// alignWithLabel: true,
// },
// boundaryGap: false,
// splitLine: {
// show: true,
// lineStyle: {
// type: 'dashed',
// },
// },
},
yAxis: {
type: 'value',
name: 'm',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
},
axisLabel: {
formatter: '{value}',
},
},
series: [
{
symbolSize: 5,
data: _chartData.map((item) => {
return [new Date(item.time).getTime(), item.pv];
}),
type: 'scatter',
},
{
data: _centroids.map((item) => {
return [new Date(Math.floor(item[0])).getTime(), item[1]];
}),
type: 'line',
},
],
};
setOptions(option);
}, [chartData]);
useEffect(()=>{
setOpen(props.open); setOpen(props.open);
},[props.open]) }, [props.open]);
return ( return (
<> <>
...@@ -249,18 +204,30 @@ const LimitCurve = (props) => { ...@@ -249,18 +204,30 @@ const LimitCurve = (props) => {
onCancel={onCancel} onCancel={onCancel}
wrapClassName={classNames(`${prefixCls}`)} wrapClassName={classNames(`${prefixCls}`)}
getContainer={getContainer || document.body} getContainer={getContainer || document.body}
destroyOnClose={true}
> >
<div className={classNames(`${prefixCls}-box`)}> <div className={classNames(`${prefixCls}-box`)}>
<div className={classNames(`${prefixCls}-header`)}> <div className={classNames(`${prefixCls}-header`)}>
<div className={classNames(`${prefixCls}-header-list`)}> <div className={classNames(`${prefixCls}-header-list`)}>
<span className={classNames(`${prefixCls}-header-item`)}> <span className={classNames(`${prefixCls}-header-item`)}>
聚类算法： 曲线选择：
<Radio.Group
options={chartArr}
optionType={'button'}
value={curve}
onChange={(e) => {
setCurve(e.target.value);
}}
/>
</span>
<span className={classNames(`${prefixCls}-header-item`)}>
取值方式：
<Radio.Group <Radio.Group
options={clusterArr} options={timeArr}
optionType={'button'} optionType={'button'}
value={cluster} value={timeType}
onChange={(e) => { onChange={(e) => {
setCluster(e.target.value); setTimeType(e.target.value);
}} }}
/> />
</span> </span>
...@@ -276,7 +243,7 @@ const LimitCurve = (props) => { ...@@ -276,7 +243,7 @@ const LimitCurve = (props) => {
/> />
</span> </span>
<span className={classNames(`${prefixCls}-header-item`)}> <span className={classNames(`${prefixCls}-header-item`)}>
敏感度： 浮动范围：
<Slider <Slider
min={0} min={0}
max={100} max={100}
...@@ -303,15 +270,46 @@ const LimitCurve = (props) => { ...@@ -303,15 +270,46 @@ const LimitCurve = (props) => {
</div> </div>
<div className={classNames(`${prefixCls}-header-list`)}> <div className={classNames(`${prefixCls}-header-list`)}>
<span className={classNames(`${prefixCls}-header-item`)}> <span className={classNames(`${prefixCls}-header-item`)}>
曲线选择： 取值限制：
<Radio.Group <div className={classNames(`${prefixCls}-header-value`)}>
options={chartArr} <Input
optionType={'button'} style={{
value={curve} width: '150px',
onChange={(e) => { }}
setCurve(e.target.value); addonBefore="低低限"
disabled
/>
</div>
<div className={classNames(`${prefixCls}-header-value`)}>
<Input
style={{
width: '150px',
}}
addonBefore="低限"
disabled
/>
</div>
<div className={classNames(`${prefixCls}-header-value`)}>
<Input
style={{
width: '150px',
}} }}
addonBefore="高限"
disabled
/> />
</div>
<div className={classNames(`${prefixCls}-header-value`)}>
<Input
style={{
width: '150px',
}}
addonBefore="高高限"
disabled
/>
</div>
</span>
<span className={classNames(`${prefixCls}-header-item`)}>
<Button type="primary">确定</Button>
</span> </span>
</div> </div>
</div> </div>
...@@ -323,48 +321,11 @@ const LimitCurve = (props) => { ...@@ -323,48 +321,11 @@ const LimitCurve = (props) => {
style={{ width: '100%', height: '100%' }} style={{ width: '100%', height: '100%' }}
/> />
</div> </div>
{spinning && <div className={classNames(`${prefixCls}-load`)}><LoadBox spinning={spinning}/></div>}
</div> </div>
</Modal> </Modal>
</> </>
); );
}; };
const outlierArr = [
{
label: '低',
value: 3,
},
{
label: '中',
value: 2,
},
{
label: '高',
value: 1,
},
];
const clusterArr = [
{
label: 'K-means',
value: 'K-means',
},
];
const chartArr = [
{
label: '特征曲线',
value: '特征曲线',
},
{
label: '原始曲线',
value: '原始曲线',
},
];
// 平均值方法
const average = (arr) => {
return arr.reduce((acc, cur) => acc + cur, 0) / arr.length;
};
export default LimitCurve; export default LimitCurve;
packages/extend-components/EC_AlarmCurve/src/limitCurve/index.less
View file @ cf66b908
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
} }
&-header { &-header {
...@@ -33,10 +34,31 @@ ...@@ -33,10 +34,31 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
&-value {
margin-right: 10px;
.@{ant-prefix}-input[disabled] {
background-color: #ffffff;
}
}
} }
&-content { &-content {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
&-load {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100;
}
} }
\ No newline at end of file
packages/extend-components/EC_AlarmCurve/src/limitCurve/utils.js
View file @ cf66b908
export const variance = (numbers) => { export const outlierArr = [
let mean = 0; {
let sum = 0; label: '低',
for (const i = 0; i < numbers.length; i++) { value: 3,
sum += numbers[i]; },
} {
mean = sum / numbers.length; label: '中',
sum = 0; value: 2,
for (const i = 0; i < numbers.length; i++) { },
sum += Math.pow(numbers[i] - mean, 2); {
} label: '高',
return sum / numbers.length; value: 1,
},
];
export const timeArr = [
{
label: '近7天',
value: '近7天',
},
{
label: '7工作日',
value: '7工作日',
},
{
label: '7节假日',
value: '7节假日',
},
];
export const chartArr = [
{
label: '特征曲线',
value: '特征曲线',
},
{
label: '原始曲线',
value: '原始曲线',
},
];
// 平均值方法
export const average = (arr) => {
return arr.reduce((acc, cur) => acc + cur, 0) / arr.length;
}; };
\ No newline at end of file
packages/extend-components/EC_ConfigurationView/src/EC_ConfigurationView.md
View file @ cf66b908
...@@ -35,6 +35,7 @@ group: ...@@ -35,6 +35,7 @@ group:
| config | 全局 globalConfig,没有时需要传递 | object | {} | | config | 全局 globalConfig,没有时需要传递 | object | {} |
| isZoom | 是否可缩放(手持上建议设置 true) | boolean | false | | isZoom | 是否可缩放(手持上建议设置 true) | boolean | false |
| flowShow | 是否水流效果（无数据表现） | boolean | true | | flowShow | 是否水流效果（无数据表现） | boolean | true |
| messaged | 传递信息给组态 | object | {} |
| customBack | 自定义交互的回调，返回点击的模型 | function(node){} | - | | customBack | 自定义交互的回调，返回点击的模型 | function(node){} | - |
### 工艺回放 ### 工艺回放
......
packages/extend-components/EC_ConfigurationView/src/HistoryModel.js
View file @ cf66b908
...@@ -313,6 +313,12 @@ const ConfigurationView = (props) => { ...@@ -313,6 +313,12 @@ const ConfigurationView = (props) => {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true); myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
} }
break; break;
case 'groupCase': // 分组模型
shRule = ruleOperation(node, realVal);
if (node.shType === '显隐展示') {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
}
break;
default: default:
break; break;
} }
...@@ -1140,12 +1146,13 @@ const ConfigurationView = (props) => { ...@@ -1140,12 +1146,13 @@ const ConfigurationView = (props) => {
goJS( goJS(
go.Group, go.Group,
'Auto', 'Auto',
{ ungroupable: true, zOrder: 1 }, { ungroupable: true, zOrder: 1, visible: true },
{ {
// 设置其可选择 // 设置其可选择
selectable: false, selectable: false,
layerName: 'Background', layerName: 'Background',
}, },
new go.Binding('visible', 'visible').makeTwoWay(),
goJS( goJS(
go.Shape, go.Shape,
'RoundedRectangle', // surrounds everything 'RoundedRectangle', // surrounds everything
......
packages/extend-components/EC_ConfigurationView/src/RealModel.js
View file @ cf66b908
...@@ -80,6 +80,7 @@ const ConfigurationView = (props) => { ...@@ -80,6 +80,7 @@ const ConfigurationView = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('ec-configuration-view'); const prefixCls = getPrefixCls('ec-configuration-view');
const componentPrefix = getPrefixCls(''); const componentPrefix = getPrefixCls('');
const [isDiagram, setIsDiagram] = useState(null);
const [isModalVisible, setIsModalVisible] = useState(false); const [isModalVisible, setIsModalVisible] = useState(false);
const [isAuModalVisible, setIsAuModalVisible] = useState(false); // 登录模态框 const [isAuModalVisible, setIsAuModalVisible] = useState(false); // 登录模态框
const [isHIModalVisible, setIsHIModalVisible] = useState(false); // 历史曲线模态框 const [isHIModalVisible, setIsHIModalVisible] = useState(false); // 历史曲线模态框
...@@ -382,6 +383,12 @@ const ConfigurationView = (props) => { ...@@ -382,6 +383,12 @@ const ConfigurationView = (props) => {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true); myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
} }
break; break;
case 'groupCase': // 分组模型
shRule = ruleOperation(node, realVal);
if (node.shType === '显隐展示') {
myDiagram.model.setDataProperty(node, 'visible', shRule ? shRule.visible : true);
}
break;
default: default:
break; break;
} }
...@@ -883,6 +890,7 @@ const ConfigurationView = (props) => { ...@@ -883,6 +890,7 @@ const ConfigurationView = (props) => {
if (myDiagram) { if (myDiagram) {
myDiagram.div = null; myDiagram.div = null;
myDiagram = null; myDiagram = null;
setIsDiagram(null);
} }
}; };
}, [props.name, numerals]); }, [props.name, numerals]);
...@@ -912,6 +920,65 @@ const ConfigurationView = (props) => { ...@@ -912,6 +920,65 @@ const ConfigurationView = (props) => {
}; };
}, []); }, []);
useEffect(() => {
try {
const { messaged = {} } = props;
if (isDiagram && Object.keys(messaged).length > 0) {
const json = JSON.parse(isDiagram.model.toJson());
const jsonCopy = JSON.parse(JSON.stringify(json));
jsonCopy.nodeDataArray.forEach((item) => {
if (item.category === 'groupCase' && !item.shName) {
const node = isDiagram.model.findNodeDataForKey(item.key);
messagedMethod(node, messaged);
}
});
}
} catch (err) {
// console.log(err);
}
}, [props.messaged, isDiagram]);
// 信息通信
const messagedMethod = (node, messaged) => {
let shRule = [];
try {
switch (node.category) {
case 'groupCase': // 分组模型
shRule = ruleMessaged(node, messaged);
if (node.shType === '显隐展示') {
isDiagram.model.setDataProperty(
node,
'visible',
shRule ? shRule.visible : node.dtVisible,
);
}
break;
default:
break;
}
} catch (e) {
// console.log(e);
}
};
// 信息通信语句解析
const ruleMessaged = (node, messaged) => {
const patt = /[><=]/gi;
const shRule = JSON.parse(node.shRule).find((rule) => {
if (rule.val.toString().match(patt)) {
const ruleStr = 'if(' + rule.val + '){ return true } else { return false }';
try {
return new Function('x', 'X', ruleStr)(messaged, messaged);
} catch (err) {
return false;
}
} else {
return false;
}
});
return shRule;
};
/** ************************************获取画板JSON******************************* */ /** ************************************获取画板JSON******************************* */
const getDiagramJson = async (list, siteInfo) => { const getDiagramJson = async (list, siteInfo) => {
const response = await getSketchPadContent({ const response = await getSketchPadContent({
...@@ -1648,12 +1715,13 @@ const ConfigurationView = (props) => { ...@@ -1648,12 +1715,13 @@ const ConfigurationView = (props) => {
goJS( goJS(
go.Group, go.Group,
'Auto', 'Auto',
{ ungroupable: true, zOrder: 1 }, { ungroupable: true, zOrder: 1, visible: true },
{ {
// 设置其可选择 // 设置其可选择
selectable: false, selectable: false,
layerName: 'Background', layerName: 'Background',
}, },
new go.Binding('visible', 'visible').makeTwoWay(),
goJS( goJS(
go.Shape, go.Shape,
'RoundedRectangle', // surrounds everything 'RoundedRectangle', // surrounds everything
...@@ -3096,6 +3164,9 @@ const ConfigurationView = (props) => { ...@@ -3096,6 +3164,9 @@ const ConfigurationView = (props) => {
if (item.category === 'bgCase') { if (item.category === 'bgCase') {
myDiagram.defaultScale = item.scaling || item.scaling === 0 ? item.scaling * 1 : 1; myDiagram.defaultScale = item.scaling || item.scaling === 0 ? item.scaling * 1 : 1;
} }
if (item.category === 'groupCase') {
item.dtVisible = item?.visible || false;
}
// 兼容V1之前版本（部分展示可支持） // 兼容V1之前版本（部分展示可支持）
if (chartInfo.version === 'V1') return false; if (chartInfo.version === 'V1') return false;
...@@ -3106,6 +3177,7 @@ const ConfigurationView = (props) => { ...@@ -3106,6 +3177,7 @@ const ConfigurationView = (props) => {
}); });
myDiagram.model = go.Model.fromJson(json); myDiagram.model = go.Model.fromJson(json);
getDataModel(); getDataModel();
setIsDiagram(myDiagram);
}; };
return ( return (
...@@ -3271,6 +3343,7 @@ ConfigurationView.defaultProps = { ...@@ -3271,6 +3343,7 @@ ConfigurationView.defaultProps = {
config: {}, config: {},
isZoom: false, isZoom: false,
flowShow: true, flowShow: true,
messaged: {},
customBack: () => {}, customBack: () => {},
}; };
...@@ -3281,6 +3354,7 @@ ConfigurationView.propTypes = { ...@@ -3281,6 +3354,7 @@ ConfigurationView.propTypes = {
config: PropTypes.object, config: PropTypes.object,
isZoom: PropTypes.bool, isZoom: PropTypes.bool,
flowShow: PropTypes.bool, flowShow: PropTypes.bool,
messaged: PropTypes.object,
customBack: PropTypes.func, customBack: PropTypes.func,
}; };
......
packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx
View file @ cf66b908
...@@ -3,10 +3,11 @@ import { Button } from 'antd'; ...@@ -3,10 +3,11 @@ import { Button } from 'antd';
import PandaConfiguration from '../index'; import PandaConfiguration from '../index';
// import PandaConfigurationView from '../../es/index'; // import PandaConfigurationView from '../../es/index';
const Demo = () => { const Demo = () => {
const [name, setName] = useState('宿场加压站2'); const [name, setName] = useState('cs0320');
const [devices, setDevices] = useState( const [devices, setDevices] = useState('EQZT00000008');
'JYJZ00000001,JYBZ00000001', const [messaged, setMessaged] = useState({
); age: '运行监控1',
});
return ( return (
<> <>
<div style={{ width: '100%', height: '600px', background: '#242835' }}> <div style={{ width: '100%', height: '600px', background: '#242835' }}>
...@@ -21,16 +22,20 @@ const Demo = () => { ...@@ -21,16 +22,20 @@ const Demo = () => {
// devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')} // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
config={globalConfig} config={globalConfig}
deviceName={['工艺流程1', '工艺流程2', '工艺流程3']} deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
messaged={messaged}
// isZoom={true} // isZoom={true}
// flowShow={false} // flowShow={false}
/> />
</div> </div>
<Button <Button
onClick={() => { onClick={() => {
setName('崇左丽江水厂原水泵房'); // setName('崇左丽江水厂原水泵房');
setDevices( // setDevices(
'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003', // 'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
); // );
setMessaged({
age: '运行监控',
});
}} }}
style={{ margin: '10px' }} style={{ margin: '10px' }}
> >
...@@ -44,18 +49,18 @@ export default Demo; ...@@ -44,18 +49,18 @@ export default Demo;
const globalConfig = { const globalConfig = {
token: 'a1372ef0ce7b4e4884d31cfd99fe92f6', token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
mqtt_iotIP: '36.140.140.170:8200', mqtt_iotIP: 'emqttd10.panda-water.cn:443',
mqtt_path: '/ws/', mqtt_path: '/mqtt',
mqtt_IsSSL: false, mqtt_IsSSL: true,
mqtt_site_code: 'site_ds5418ua', mqtt_site_code: 'site_dc8302ni',
mqtt_mess: { mqtt_mess: {
MessageLevel: '1.0', MessageLevel: '1.0',
TcpIP: '36.140.140.170', TcpIP: 'emqttd10.panda-water.cn',
TcpPort: 8200, TcpPort: 443,
site_code: 'site_ds5418ua', site_code: 'site_dc8302ni',
}, },
userInfo: { userInfo: {
LocalSite: 'site_ds5418ua', LocalSite: 'site_dc8302ni',
site: '', site: '',
}, },
}; };
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment