Skip to content

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

feat: 组态增加动画、图片翻转

parent 064ccdf3
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 7 deletions
packages/extend-components/EC_ConfigurationView/src/HistoryModel.js
View file @ 2abb64ba
......@@ -644,6 +644,29 @@ const ConfigurationView = (props) => {
if (dataType === '统计') getStatisticsData(false);
}, [props.params]);
// 图片模型翻转
const pictureFlipMethod = (type) => {
let flipType = '';
switch (type) {
case 'none':
flipType = go.GraphObject.None;
break;
case 'horizontal':
flipType = go.GraphObject.FlipHorizontal;
break;
case 'vertical':
flipType = go.GraphObject.FlipVertical;
break;
case 'both':
flipType = go.GraphObject.FlipBoth;
break;
default:
flipType = go.GraphObject.None;
break;
}
return flipType;
};
/** ************************************获取画板JSON******************************* */
const getDiagramJson = async (list, siteInfo) => {
const response = await getSketchPadContent({
......@@ -1382,12 +1405,14 @@ const ConfigurationView = (props) => {
column: 0,
scale: 1,
source: require('./images/组态/默认.png'),
flip: go.GraphObject.None,
},
new go.Binding('source', 'imgSrc', function (v) {
return !v
? require('./images/组态/默认.png')
: `/PandaMonitor/Monitor/SketchPad/PreviewResource?name=${v}&_site=${siteCodeStr}`;
}).makeTwoWay(),
new go.Binding('flip', 'flip', pictureFlipMethod),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
......@@ -1440,13 +1465,22 @@ const ConfigurationView = (props) => {
new go.Binding('visible', 'visible').makeTwoWay(),
goJS(
go.Picture,
{ name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
{
name: 'animateSvg',
width: 56,
height: 56,
column: 0,
scale: 1,
source: '',
flip: go.GraphObject.None,
},
new go.Binding('source', 'imgSrc', (v) => {
return `${imgUrl}Model/Preview/${encodeURIComponent(v)}`;
}),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('flip', 'flip', pictureFlipMethod),
),
),
{
......
packages/extend-components/EC_ConfigurationView/src/RealModel.js
View file @ 2abb64ba
......@@ -75,6 +75,8 @@ const ConfigurationView = (props) => {
let mqttView = null;
let editionArr = [];
let globalControl = false;
// 入场动画
let entryAnim = '';
const guidAggre = {};
const bindData = [];
const stationList = [];
......@@ -912,6 +914,7 @@ const ConfigurationView = (props) => {
mqttView && mqttView.disSaveWaconnect();
mqttView = null;
if (myDiagram) {
myDiagram.removeDiagramListener('InitialAnimationStarting', animationStarting);
myDiagram.div = null;
myDiagram = null;
setIsDiagram(null);
......@@ -1003,6 +1006,29 @@ const ConfigurationView = (props) => {
return shRule;
};
// 图片模型翻转
const pictureFlipMethod = (type) => {
let flipType = '';
switch (type) {
case 'none':
flipType = go.GraphObject.None;
break;
case 'horizontal':
flipType = go.GraphObject.FlipHorizontal;
break;
case 'vertical':
flipType = go.GraphObject.FlipVertical;
break;
case 'both':
flipType = go.GraphObject.FlipBoth;
break;
default:
flipType = go.GraphObject.None;
break;
}
return flipType;
};
/** ************************************获取画板JSON******************************* */
const getDiagramJson = async (list, siteInfo) => {
const response = await getSketchPadContent({
......@@ -1726,6 +1752,12 @@ const ConfigurationView = (props) => {
return modalComponent && nodeData ? modalComponent() : null;
};
// 监听初始化动画渲染动画
const animationStarting = (e) => {
const animations = e.subject.defaultAnimation;
if (entryAnim === 'opacity') animations.add(e.diagram, 'opacity', 0, 1);
};
/** **********************************画布渲染************************************ */
const diagramRender = (jsonStr, chartInfo) => {
myDiagram = goJS(
......@@ -2019,12 +2051,14 @@ const ConfigurationView = (props) => {
column: 0,
scale: 1,
source: require('./images/组态/默认.png'),
flip: go.GraphObject.None,
},
new go.Binding('source', 'imgSrc', function (v) {
return !v
? require('./images/组态/默认.png')
: `/PandaMonitor/Monitor/SketchPad/PreviewResource?name=${v}&_site=${siteCodeStr}`;
}).makeTwoWay(),
new go.Binding('flip', 'flip', pictureFlipMethod),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
......@@ -2084,13 +2118,22 @@ const ConfigurationView = (props) => {
new go.Binding('visible', 'visible').makeTwoWay(),
goJS(
go.Picture,
{ name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
{
name: 'animateSvg',
width: 56,
height: 56,
column: 0,
scale: 1,
source: '',
flip: go.GraphObject.None,
},
new go.Binding('source', 'imgSrc', (v) => {
return `${imgUrl}Model/Preview/${encodeURIComponent(v)}`;
}),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('flip', 'flip', pictureFlipMethod),
),
),
{
......@@ -3261,6 +3304,7 @@ const ConfigurationView = (props) => {
}
if (item.category === 'bgCase') {
myDiagram.defaultScale = item.scaling || item.scaling === 0 ? item.scaling * 1 : 1;
entryAnim = item?.entryAnim || '';
}
if (item.category === 'groupCase') {
item.dtVisible = item?.visible || false;
......@@ -3273,6 +3317,26 @@ const ConfigurationView = (props) => {
if (item.controlType === '开关展示') item.switch = '是';
if (item.category === 'valCase') item.shType = '值显示';
});
// 初始化动画
switch (entryAnim) {
case 'none':
myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
break;
case 'default':
myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.Default;
break;
case 'location':
myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.AnimateLocations;
break;
case 'opacity':
myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.None;
break;
default:
myDiagram.animationManager.initialAnimationStyle = go.AnimationManager.Default;
break;
}
// 动画监听
myDiagram.addDiagramListener('InitialAnimationStarting', animationStarting);
myDiagram.model = go.Model.fromJson(json);
getDataModel();
setIsDiagram(myDiagram);
......
packages/extend-components/EC_ConfigurationView/src/configuration_custom.js
View file @ 2abb64ba
......@@ -975,6 +975,29 @@ const ConfigurationView = (props) => {
return shRule;
};
// 图片模型翻转
const pictureFlipMethod = (type) => {
let flipType = '';
switch (type) {
case 'none':
flipType = go.GraphObject.None;
break;
case 'horizontal':
flipType = go.GraphObject.FlipHorizontal;
break;
case 'vertical':
flipType = go.GraphObject.FlipVertical;
break;
case 'both':
flipType = go.GraphObject.FlipBoth;
break;
default:
flipType = go.GraphObject.None;
break;
}
return flipType;
};
/** ************************************获取画板JSON******************************* */
const getDiagramJson = async (list, siteInfo) => {
const response = await getSketchPadContent({
......@@ -1957,12 +1980,14 @@ const ConfigurationView = (props) => {
column: 0,
scale: 1,
source: require('./images/组态/默认.png'),
flip: go.GraphObject.None,
},
new go.Binding('source', 'imgSrc', function (v) {
return !v
? require('./images/组态/默认.png')
: `/PandaMonitor/Monitor/SketchPad/PreviewResource?name=${v}&_site=${siteCodeStr}`;
}).makeTwoWay(),
new go.Binding('flip', 'flip', pictureFlipMethod),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
......@@ -2022,13 +2047,22 @@ const ConfigurationView = (props) => {
new go.Binding('visible', 'visible').makeTwoWay(),
goJS(
go.Picture,
{ name: 'animateSvg', width: 56, height: 56, column: 0, scale: 1, source: '' },
{
name: 'animateSvg',
width: 56,
height: 56,
column: 0,
scale: 1,
source: '',
flip: go.GraphObject.None,
},
new go.Binding('source', 'imgSrc', (v) => {
return `${imgUrl}Model/Preview/${encodeURIComponent(v)}`;
}),
new go.Binding('scale', 'scale').makeTwoWay(),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('flip', 'flip', pictureFlipMethod),
),
),
{
......
packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx
View file @ 2abb64ba
......@@ -39,10 +39,10 @@ const Demo = () => {
</div>
<Button
onClick={() => {
// setName('崇左丽江水厂原水泵房');
// setDevices(
// 'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
// );
setName('崇左丽江水厂原水泵房');
setDevices(
'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003',
);
setMessaged({
age: '运行监控',
});
......
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