Skip to content

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

fix: 组态增加背景解析

parent 2d90cba6
Show whitespace changes
Inline Side-by-side
Showing with 195 additions and 75 deletions
packages/extend-components/EC_ConfigurationView/src/HistoryModel.js
View file @ 8826c4e8
......@@ -841,7 +841,72 @@ const ConfigurationView = (props) => {
},
);
// 自定义矩形
go.Shape.defineFigureGenerator('RoundedRectanglePlus', (shape, w, h) => {
// this figure takes one parameter, the size of the corner
let p1 = Infinity; // default corner size
if (shape !== null) {
const param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
const geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(
new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()),
);
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
/** *********************************节点模板************************************* */
// 背景模板定义
myDiagram.nodeTemplateMap.add(
'bgCase',
goJS(
go.Node,
'Spot',
{ locationSpot: go.Spot.Center, zOrder: 0 },
// new go.Binding('zOrder', 'zOrder').makeTwoWay(),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('visible', 'visible').makeTwoWay(),
new go.Binding('angle').makeTwoWay(),
{
// 设置其可选择
selectable: false,
layerName: 'Background',
},
// the main object is a Panel that surrounds a TextBlock with a Shape ~图形：Panel包围着TextBlock
goJS(
go.Panel,
'Auto',
{
name: 'PANEL',
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
goJS(
go.Picture,
{ width: 56, height: 56, scale: 1, source: '', background: '#2e3343' },
new go.Binding('source', 'imgSrc', function (v) {
return `/PandaCore/GCK/SketchPad/PreviewResource?name=${v}&_site=${globalConfig?.userInfo?.LocalSite || ''}`;
}).makeTwoWay(),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('background', 'background').makeTwoWay(),
),
),
),
);
// svg节点定义
myDiagram.nodeTemplateMap.add(
'svgCase',
......@@ -956,7 +1021,7 @@ const ConfigurationView = (props) => {
),
);
// 设备简称
// 设备名称定义
myDiagram.nodeTemplateMap.add(
'deviceCase',
goJS(
......@@ -971,11 +1036,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'Rectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
new go.Binding('fill', 'fillColor').makeTwoWay(),
new go.Binding('stroke').makeTwoWay(),
new go.Binding('strokeWidth').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -1032,11 +1098,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'Rectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
new go.Binding('fill', 'fillColor').makeTwoWay(),
new go.Binding('stroke').makeTwoWay(),
new go.Binding('strokeWidth').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -1086,6 +1153,11 @@ const ConfigurationView = (props) => {
new go.Binding('zOrder', 'zOrder').makeTwoWay(),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('angle').makeTwoWay(),
{
// 设置其可选择
selectable: false,
layerName: 'Background',
},
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
......@@ -1145,11 +1217,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'Rectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
new go.Binding('fill', 'fillColor'),
new go.Binding('stroke'),
new go.Binding('strokeWidth'),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -1293,32 +1366,6 @@ const ConfigurationView = (props) => {
),
);
// 进度条设置
go.Shape.defineFigureGenerator('RoundedRectanglePlus', (shape, w, h) => {
// this figure takes one parameter, the size of the corner
let p1 = Infinity; // default corner size
if (shape !== null) {
const param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
const geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(
new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()),
);
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
// 定义进度条
myDiagram.nodeTemplateMap.add(
'speedCase',
......@@ -1343,10 +1390,12 @@ const ConfigurationView = (props) => {
stroke: '#FFFFFF',
desiredSize: new go.Size(NaN, 26),
fill: 'transparent',
parameter1: 5,
},
new go.Binding('width').makeTwoWay(),
new go.Binding('height').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('stroke', 'stroke').makeTwoWay(),
),
goJS(
......@@ -1360,10 +1409,12 @@ const ConfigurationView = (props) => {
strokeWidth: 2,
stroke: 'transparent',
desiredSize: new go.Size(NaN, 26),
parameter1: 5,
},
new go.Binding('width').makeTwoWay(),
new go.Binding('height').makeTwoWay(),
new go.Binding('fill', 'waterColor').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
),
goJS(
......@@ -1378,9 +1429,11 @@ const ConfigurationView = (props) => {
strokeWidth: 2,
minSize: new go.Size(NaN, 5),
desiredSize: new go.Size(NaN, 20),
parameter1: 5,
},
new go.Binding('width', 'lineWidth').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('fill', 'fillColor').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth'),
),
......@@ -1489,11 +1542,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'RoundedRectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 5 },
new go.Binding('fill', 'fillColor'),
new go.Binding('stroke'),
new go.Binding('strokeWidth'),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -1596,6 +1650,7 @@ const ConfigurationView = (props) => {
resegmentable: true,
relinkableFrom: true,
relinkableTo: true,
zOrder: 1,
},
new go.Binding('fromSpot', 'fromPort', (d) => {
return spotConverter(d);
......@@ -1644,6 +1699,7 @@ const ConfigurationView = (props) => {
relinkableTo: true,
relinkableFrom: true,
relinkableTo: true,
zOrder: 1,
},
new go.Binding('fromSpot', 'fromPort', function (d) {
return spotConverter(d);
......
packages/extend-components/EC_ConfigurationView/src/RealModel.js
View file @ 8826c4e8
......@@ -153,13 +153,15 @@ const ConfigurationView = (props) => {
}
// 获取点表信息
const pointInfo = await getPointAddress({
const pointInfo = devices.length
? await getPointAddress({
code: devices.join(','),
_site:
globalConfig.userInfo && globalConfig.userInfo.LocalSite
? globalConfig.userInfo.LocalSite
: '',
});
})
: null;
editionArr = deepCopy(pointInfo && pointInfo.data ? pointInfo.data : [], []);
};
......@@ -733,7 +735,8 @@ const ConfigurationView = (props) => {
type: siteInfo && siteInfo[name] ? siteInfo[name].Type : '',
});
});
mqttView = new MqttView({
mqttView = devices.length
? new MqttView({
mqttIP: globalConfig.mqtt_iotIP,
mqttPath: globalConfig.mqtt_path,
mqttSsl: globalConfig.mqtt_IsSSL,
......@@ -741,10 +744,11 @@ const ConfigurationView = (props) => {
devices,
callback: refreshData,
controlback: controlData,
});
})
: null;
diagramRender(typeof fromJson === 'string' ? fromJson : JSON.stringify(fromJson));
try {
mqttView.saveWaterMqtt();
mqttView && mqttView.saveWaterMqtt();
} catch (e) {
// 获取实时数据
getRealData(siteInfo);
......@@ -978,6 +982,7 @@ const ConfigurationView = (props) => {
code,
};
const flag = isNumber(value);
mqttView &&
mqttView.onSendWaMessageArrived(
userName,
sha1(password).toUpperCase(),
......@@ -1007,6 +1012,7 @@ const ConfigurationView = (props) => {
guidAggre[guid] = { tag, code };
const { val } = ctRule[0];
const flag = isNumber(val);
mqttView &&
mqttView.onSendWaMessageArrived(
globalConfig.token || '',
'',
......@@ -1056,6 +1062,7 @@ const ConfigurationView = (props) => {
return false;
}
guidAggre[guid] = { tag, code };
mqttView &&
mqttView.onSendWaMessageArrived(
globalConfig.token || '',
'',
......@@ -1076,6 +1083,7 @@ const ConfigurationView = (props) => {
}
guidAggre[guid] = { tag, code };
const flag = isNumber(value);
mqttView &&
mqttView.onSendWaMessageArrived(
globalConfig.token || '',
'',
......@@ -1242,7 +1250,72 @@ const ConfigurationView = (props) => {
},
);
// 自定义矩形
go.Shape.defineFigureGenerator('RoundedRectanglePlus', (shape, w, h) => {
// this figure takes one parameter, the size of the corner
let p1 = Infinity; // default corner size
if (shape !== null) {
const param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
const geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(
new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()),
);
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
/** *********************************节点模板************************************* */
// 背景模板定义
myDiagram.nodeTemplateMap.add(
'bgCase',
goJS(
go.Node,
'Spot',
{ locationSpot: go.Spot.Center, zOrder: 0 },
// new go.Binding('zOrder', 'zOrder').makeTwoWay(),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('visible', 'visible').makeTwoWay(),
new go.Binding('angle').makeTwoWay(),
{
// 设置其可选择
selectable: false,
layerName: 'Background',
},
// the main object is a Panel that surrounds a TextBlock with a Shape ~图形：Panel包围着TextBlock
goJS(
go.Panel,
'Auto',
{
name: 'PANEL',
},
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
goJS(
go.Picture,
{ width: 56, height: 56, scale: 1, source: '', background: '#2e3343' },
new go.Binding('source', 'imgSrc', function (v) {
return `/PandaCore/GCK/SketchPad/PreviewResource?name=${v}&_site=${globalConfig?.userInfo?.LocalSite || ''}`;
}).makeTwoWay(),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('background', 'background').makeTwoWay(),
),
),
),
);
// svg节点定义
myDiagram.nodeTemplateMap.add(
'svgCase',
......@@ -1368,7 +1441,7 @@ const ConfigurationView = (props) => {
),
);
// 设备简称
// 设备名称定义
myDiagram.nodeTemplateMap.add(
'deviceCase',
goJS(
......@@ -1383,11 +1456,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'Rectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
new go.Binding('fill', 'fillColor').makeTwoWay(),
new go.Binding('stroke').makeTwoWay(),
new go.Binding('strokeWidth').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -1446,11 +1520,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'Rectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
new go.Binding('fill', 'fillColor').makeTwoWay(),
new go.Binding('stroke').makeTwoWay(),
new go.Binding('strokeWidth').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -1511,6 +1586,11 @@ const ConfigurationView = (props) => {
new go.Binding('zOrder', 'zOrder').makeTwoWay(),
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('angle').makeTwoWay(),
{
// 设置其可改变大小
resizable: false,
layerName: 'Background',
},
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
......@@ -1570,11 +1650,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'Rectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
new go.Binding('fill', 'fillColor'),
new go.Binding('stroke'),
new go.Binding('strokeWidth'),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -1724,32 +1805,6 @@ const ConfigurationView = (props) => {
),
);
// 进度条设置
go.Shape.defineFigureGenerator('RoundedRectanglePlus', (shape, w, h) => {
// this figure takes one parameter, the size of the corner
let p1 = Infinity; // default corner size
if (shape !== null) {
const param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
const geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(
new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()),
);
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
// 定义进度条
myDiagram.nodeTemplateMap.add(
'speedCase',
......@@ -1774,10 +1829,12 @@ const ConfigurationView = (props) => {
stroke: '#FFFFFF',
desiredSize: new go.Size(NaN, 26),
fill: 'transparent',
parameter1: 5,
},
new go.Binding('width').makeTwoWay(),
new go.Binding('height').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('stroke', 'stroke').makeTwoWay(),
),
goJS(
......@@ -1791,10 +1848,12 @@ const ConfigurationView = (props) => {
strokeWidth: 2,
stroke: 'transparent',
desiredSize: new go.Size(NaN, 26),
parameter1: 5,
},
new go.Binding('width').makeTwoWay(),
new go.Binding('height').makeTwoWay(),
new go.Binding('fill', 'waterColor').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
),
goJS(
......@@ -1809,9 +1868,11 @@ const ConfigurationView = (props) => {
strokeWidth: 2,
minSize: new go.Size(NaN, 5),
desiredSize: new go.Size(NaN, 20),
parameter1: 5,
},
new go.Binding('width', 'lineWidth').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('fill', 'fillColor').makeTwoWay(),
new go.Binding('strokeWidth', 'strokeWidth'),
),
......@@ -1920,11 +1981,12 @@ const ConfigurationView = (props) => {
roleVisibleBinding(), // 绑定角色可见
goJS(
go.Shape,
'RoundedRectangle',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
'RoundedRectanglePlus',
{ name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 5 },
new go.Binding('fill', 'fillColor'),
new go.Binding('stroke'),
new go.Binding('strokeWidth'),
new go.Binding('parameter1', 'radius').makeTwoWay(),
new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
),
goJS(
......@@ -2034,6 +2096,7 @@ const ConfigurationView = (props) => {
resegmentable: true,
relinkableFrom: true,
relinkableTo: true,
zOrder: 1,
},
new go.Binding('fromSpot', 'fromPort', (d) => {
return spotConverter(d);
......@@ -2082,6 +2145,7 @@ const ConfigurationView = (props) => {
relinkableTo: true,
relinkableFrom: true,
relinkableTo: true,
zOrder: 1,
},
new go.Binding('fromSpot', 'fromPort', function (d) {
return spotConverter(d);
......
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