joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into iscs

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-03-29 10:04:17 +08:00
commit 5150fe4651
41 changed files with 289 additions and 3335 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/iscs_new/config/defaultStyle.js
View File

@ -1,9 +1,7 @@
import mask from '@/assets/map/tpsq/image-mask.jpg'; export default class highlightStyle {
export default class defaultStyle {
constructor() { constructor() {
/** 透明填充 颜色*/ /** 透明填充 颜色*/
this.transparentColor = 'rgba(0,0,0,0)'; this.transparentColor = 'transparent';
/** 默认背景 颜色*/ /** 默认背景 颜色*/
this.backgroundColor = '#000000'; this.backgroundColor = '#000000';
@ -14,22 +12,17 @@ export default class defaultStyle {
/** 默认字体 大小*/ /** 默认字体 大小*/
this.fontSize = 12; this.fontSize = 12;
/** 文字高亮颜色*/
this.textHover2Color = '#6000ff';
/** 线条高亮颜色*/
this.lineHover2Color = '#ffff00';
/** Svg高亮颜色*/
this.svgHover2Color = '#62ff00';
/** 图片高亮遮罩*/ /** 图片高亮遮罩*/
this.maskHover2Image = mask; this.maskHover2Image = '';
/** 文字高亮遮罩*/
this.textHover2Color = '#1477e5';
/** 管道高亮遮罩*/
this.pipeHover2Color = '#ffff00'; // '#ff5f5f'
this.pipeHover2ColorDef = '#fff';
/** 图形高亮遮罩*/
this.graphHover2Color = '#62ff00';
/** 测量高亮遮罩*/
this.measureHover2Color = '#6000ff';
/** 选中透明度*/ /** 选中透明度*/
this.maskOpacity = 0.8; this.maskOpacity = 0.8;

117
src/iscs_new/config/graphStyle.js
View File

@ -1,117 +0,0 @@
import defaultStyle from './defaultStyle';
import graphType from '../constant/graphType';
class SkinCode extends defaultStyle {
constructor() {
super();
this[graphType.Text] = {
text: {
fontWeight: 'normal'
}
};
this[graphType.Table] = {
header: {
height: 40,
fontWeight: 'bold',
fontSize: 18
}
};
this[graphType.Resource] = {
warning: {
r: 5,
fill: 'red',
offset: { x: 0, y: 0}
},
hover: {
lineWidth: 1
}
};
this[graphType.LinePipe] = {
line: {
lineWidth: 2
},
arrow: {
lineWidth: 1
}
};
this[graphType.Measure] = {
};
this[graphType.Warning] = {
circle: {
lineWidth: 0,
stroke: '#eee'
},
text: {
fontWeight: 'bold',
fontSize: 16,
textFill: 'red'
}
};
this[graphType.Switching] = {
text: {
fontWeight: 'normal'
},
button: {
lineWidth: 0.5,
stroke: '#666',
fill: '#d1d1d1'
}
};
this[graphType.Popup] = {
text: {
fontWeight: 'normal'
},
button: {
lineWidth: 0.5,
stroke: '#666',
fill: '#d1d1d1'
}
};
this[graphType.ProgramControl] = {
button: {
lineWidth: 3,
stroke: '#fff',
width: 72,
height: 24
},
line: {
lineWidth: 1,
stroke: '#fff'
},
block: {
lineWidth: 1,
stroke: '#888',
fill: '#d1d1d1',
shadowColor: '#000',
shadowOffsetX: 1,
shadowOffsetY: 1
},
indicate: {
fill: '#000'
}
};
this[graphType.Pid] = {
text: {
fontWeight: 'normal'
},
button: {
lineWidth: 0.5,
stroke: '#666',
fill: '#d1d1d1'
}
};
}
}
export default new SkinCode();

117
src/iscs_new/config/panelStyle.js
View File

@ -1,117 +0,0 @@
import defaultStyle from './defaultStyle';
import panelType from '../constant/panelType';
class SkinCode extends defaultStyle {
constructor() {
super();
this[panelType.Text] = {
text: {
fontWeight: 'normal'
}
};
this[panelType.Table] = {
header: {
height: 40,
fontWeight: 'bold',
fontSize: 18
}
};
this[panelType.Resource] = {
warning: {
r: 5,
fill: 'red',
offset: { x: 0, y: 0}
},
hover: {
lineWidth: 1
}
};
this[panelType.LinePipe] = {
line: {
lineWidth: 2
},
arrow: {
lineWidth: 1
}
};
this[panelType.Measure] = {
};
this[panelType.Warning] = {
circle: {
lineWidth: 0,
stroke: '#eee'
},
text: {
fontWeight: 'bold',
fontSize: 16,
textFill: 'red'
}
};
this[panelType.Switching] = {
text: {
fontWeight: 'normal'
},
button: {
lineWidth: 0.5,
stroke: '#666',
fill: '#d1d1d1'
}
};
this[panelType.Popup] = {
text: {
fontWeight: 'normal'
},
button: {
lineWidth: 0.5,
stroke: '#666',
fill: '#d1d1d1'
}
};
this[panelType.ProgramControl] = {
button: {
lineWidth: 3,
stroke: '#fff',
width: 72,
height: 24
},
line: {
lineWidth: 1,
stroke: '#fff'
},
block: {
lineWidth: 1,
stroke: '#888',
fill: '#d1d1d1',
shadowColor: '#000',
shadowOffsetX: 1,
shadowOffsetY: 1
},
indicate: {
fill: '#000'
}
};
this[panelType.Pid] = {
text: {
fontWeight: 'normal'
},
button: {
lineWidth: 0.5,
stroke: '#666',
fill: '#d1d1d1'
}
};
}
}
export default new SkinCode();

39
src/iscs_new/config/resourceStyle.js
View File

@ -1,39 +0,0 @@
import defaultStyle from './defaultStyle';
import STLBg from '@/assets/map/stl_bg.png';
import STLPilotLamp from '@/assets/map/stl_pilot_lamp.png';
import STLButton from '@/assets/map/stl_button.png';
import graphType from '../constant/graphType';
import resourceType from '../constant/resourceType';
class SkinCode extends defaultStyle {
constructor() {
super();
this[graphType.Resource] = {
warning: {
r: 5,
fill: 'red',
offset: { x: 0, y: 0}
},
hover: {
lineWidth: 2
},
Bg: {
image: STLBg
},
PilotLamp: {
image: STLPilotLamp
},
Button: {
image: STLButton
}
};
this[resourceType.Button] = {
text: {
fontSize: 14,
fontWeight: 'bold'
}
};
}
}
export default new SkinCode();

10
src/iscs_new/config/style.js
View File

@ -1,10 +0,0 @@
import GraphStyle from './graphStyle';
import PanelStyle from './panelStyle';
import ResourceStyle from './resourceStyle';
export default {
...GraphStyle,
...PanelStyle,
...ResourceStyle
};

65
src/iscs_new/constant/graphRender.js
View File

@ -1,65 +0,0 @@
import graphType from './graphType';
const graphRender = {};
graphRender[graphType.Text] = {
_type: graphType.Text,
zlevel: 1,
z: 9
};
graphRender[graphType.Table] = {
_type: graphType.Table,
zlevel: 1,
z: 4
};
graphRender[graphType.Resource] = {
_type: graphType.Resource,
zlevel: 1,
z: 8
};
graphRender[graphType.LinePipe] = {
_type: graphType.LinePipe,
zlevel: 1,
z: 4
};
graphRender[graphType.Measure] = {
_type: graphType.Measure,
zlevel: 1,
z: 9
};
graphRender[graphType.Warning] = {
_type: graphType.Warning,
zlevel: 1,
z: 9
};
graphRender[graphType.Switching] = {
_type: graphType.Switching,
zlevel: 1,
z: 9
};
graphRender[graphType.Popup] = {
_type: graphType.Popup,
zlevel: 1,
z: 9
};
graphRender[graphType.ProgramControl] = {
_type: graphType.ProgramControl,
zlevel: 1,
z: 9
};
graphRender[graphType.Pid] = {
_type: graphType.Pid,
zlevel: 1,
z: 9
};
export default graphRender;

15
src/iscs_new/constant/graphType.js
View File

@ -1,15 +0,0 @@
const graphType = {
Text: 'text',
Table: 'table',
Table1: 'Table1',
Resource: 'resource',
LinePipe: 'linePipe',
Measure: 'measure',
Warning: 'warning',
Switching: 'switching', // 投切按钮
Popup: 'popup', // 弹窗按钮
ProgramControl: 'programControl', // 程制按钮
Pid: 'pid' // Pid按钮
};
export default graphType;

65
src/iscs_new/constant/panelRender.js
View File

@ -1,65 +0,0 @@
import panelType from './panelType';
const panelRender = {};
panelRender[panelType.Text] = {
_type: panelType.Text,
zlevel: 1,
z: 9
};
panelRender[panelType.Table] = {
_type: panelType.Table,
zlevel: 1,
z: 4
};
panelRender[panelType.Resource] = {
_type: panelType.Resource,
zlevel: 1,
z: 4
};
panelRender[panelType.LinePipe] = {
_type: panelType.LinePipe,
zlevel: 1,
z: 4
};
panelRender[panelType.Measure] = {
_type: panelType.Measure,
zlevel: 1,
z: 9
};
panelRender[panelType.Warning] = {
_type: panelType.Warning,
zlevel: 1,
z: 9
};
panelRender[panelType.Switching] = {
_type: panelType.Switching,
zlevel: 1,
z: 9
};
panelRender[panelType.Popup] = {
_type: panelType.Popup,
zlevel: 1,
z: 9
};
panelRender[panelType.ProgramControl] = {
_type: panelType.ProgramControl,
zlevel: 1,
z: 9
};
panelRender[panelType.Pid] = {
_type: panelType.Pid,
zlevel: 1,
z: 9
};
export default panelRender;

14
src/iscs_new/constant/panelType.js
View File

@ -1,14 +0,0 @@
const panelType = {
Text: 'panel-text',
Table: 'panel-table',
Resource: 'panel-resource',
LinePipe: 'panel-linePipe',
Measure: 'panel-measure',
Warning: 'panel-warning',
Switching: 'panel-switching', // 投切按钮
Popup: 'panel-popup', // 弹窗按钮
ProgramControl: 'panel-programControl', // 程制按钮
Pid: 'panel-pid' // Pid按钮
};
export default panelType;

32
src/iscs_new/constant/resourceRender.js
View File

@ -1,32 +0,0 @@
import resourceType from './resourceType';
const resourceRender = {};
resourceRender[resourceType.Background] = {
_type: resourceType.Background,
zlevel: 1,
z: 9,
z2: 1
};
resourceRender[resourceType.Button] = {
_type: resourceType.Button,
zlevel: 1,
z: 9,
z2: 1
};
resourceRender[resourceType.PilotLamp] = {
_type: resourceType.PilotLamp,
zlevel: 1,
z: 9,
z2: 1
};
resourceRender[resourceType.Display] = {
_type: resourceType.Display,
zlevel: 1,
z: 9,
z2: 1
};
export default resourceRender;

8
src/iscs_new/constant/resourceType.js
View File

@ -1,8 +0,0 @@
const resourceType = {
Button: 'res-button',
Display: 'res-display',
PilotLamp: 'res-pilotLamp',
Background: 'res-background'
};
export default resourceType;

3
src/iscs_new/constant/shapeRender.js Normal file
View File

@ -0,0 +1,3 @@
export default {
zlevel: 1
}

6
src/iscs_new/constant/shapeType.js Normal file
View File

@ -0,0 +1,6 @@
const shapeType = {
Compose: 'Compose',
Element: 'Element'
};
export default shapeType;

38
src/iscs_new/form/form2Base.js Normal file
View File

@ -0,0 +1,38 @@
export default {
// number 0 控制图形的前后顺序。z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。
z: {
prop: 'z', label: '层级 z', type: 'select', defValue: 1,
},
// number 0 控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低，而且不会创建新的 Canvas。
z2: {
prop: 'z', label: '层级 z2', type: 'select', defValue: 10,
},
// boolean false 是否进行裁剪。
culling: {
},
// string 'pointer' 鼠标移到元素上时的鼠标样式。
cursor: {
},
// boolean false 图形是否可拖曳。
draggable: {
},
// boolean false 图形是否不可见，为 true 时不绘制图形，但是仍能触发鼠标事件。
invisible: {
},
// number -1 是否渐进式渲染。当图形元素过多时才使用，用大于 0 的数字表示渲染顺序。
progressive: {
},
// boolean false 是否使用包围盒检验鼠标是否移动到物体。false 则检测元素实际的内容。
rectHover: {
},
// boolean false 是否响应鼠标事件。
silent: {
}
}

50
src/iscs_new/form/form2ShapeStyle.js Normal file
View File

@ -0,0 +1,50 @@
export default {
// string '#000' 填充样式。
fill: {
},
// string null 描边样式。
stroke: {
},
// number 1 不透明度。
opacity: {
},
// number[] null 描边虚线样式，参考 SVG stroke-dasharray。
lineDash: {
},
// number null 描边虚线偏移，参考 SVG stroke-dashoffset。
lineDashOffset: {
},
// number 0 阴影模糊大小。
shadowBlur: {
},
// string 'transparent' 阴影颜色。
shadowColor: {
},
// number 0 阴影横向偏移。
shadowOffsetX: {
},
// number 0 阴影纵向偏移。
shadowOffsetY: {
},
// number 0 线宽。
lineWidth: {
},
// boolean false 描边粗细不随缩放而改变，false 则会根据缩放同比例缩放描边粗细。
strokeNoScale: {
},
// string null 混合模式，同 Canvas globalCompositeOperation。
blend: {
}
}

142
src/iscs_new/form/form2TextStyle.js Normal file
View File

@ -0,0 +1,142 @@
export default {
// string null 在图形中显示的文字。
text: {
},
// string null 文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。
font: {
},
// string null 同 CSS font-style。
fontStyle: {
},
// string null 同 CSS font-weight。
fontWeight: {
},
// string null 同 CSS font-size。
fontSize: {
},
// string null 同 CSS font-family。
fontFamily: {
},
// string null 文字填充样式。
textFill: {
},
// string null 文字描边样式。
textStroke: {
},
// number null 文字宽度。
textWidth: {
},
// number null 文字高度，仅用于设置背景色时需要设置。
textHeight: {
},
// number 0 文字描边宽度。
textLineWidth: {
},
// number 0 文字行高。
textLineHeight: {
},
// string|number[] 'inside' 文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。
textPosition: {
},
// Object null 文字包围盒，包括 x、 y、 width、 height 属性，如果没有设置，将使用形状的包围盒。
textRect: {
},
// number[] null 文字位置偏移，包括 x、 y。
textOffset: {
},
// string null 文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。
textAlign: {
},
// string null 文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。
textVerticalAlign: {
},
// number 5 文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。
textDistance: {
},
// string 'transparent' 文字阴影颜色。
textShadowColor: {
},
// number 0 文字阴影模糊大小。
textShadowBlur: {
},
// number 0 文字阴影水平偏移。
textShadowOffsetX: {
},
// number 0 文字阴影垂直偏移。
textShadowOffsetY: {
},
// string 'transparent' 文字包围盒阴影颜色。
textBoxShadowColor: {
},
// number 0 文字包围盒阴影模糊大小。
textBoxShadowBlur: {
},
// number 0 文字包围盒阴影水平偏移。
textBoxShadowOffsetX: {
},
// number 0 文字包围盒阴影垂直偏移。
textBoxShadowOffsetY: {
},
// boolean false 文字是否跟随变换效果，仅对 Path 或 Image 元素有效
transformText: {
},
// number 0 文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。
textRotation: {
},
// string|number[] null 文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。
textOrigin: {
},
// string null 文字包围盒颜色。
textBackgroundColor: {
},
// string null 文字包围盒描边颜色。
textBorderColor: {
},
// number 0 文字包围盒描边宽度。
textBorderWidth: {
},
// number 0 文字圆角大小。
textBorderRadius: {
},
// number|number[] null 文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。
textPadding: {
},
// Object null 富文本样式，参考 ECharts rich 配置项。
rich: {
}
}

15
src/iscs_new/form/form2TruncateStyle.js Normal file
View File

@ -0,0 +1,15 @@
// Object null 当文字过长显示不下时，显示省略号表示。
export default{
// number null 包含了 textPadding 的宽度，超出这个范围就裁剪。
outerWidth: {
},
// number null 包含了 textPadding 的高度，超出这个范围就裁剪。
outerHeight: {
},
// string '...' 默认用省略号表示超出部分，也可以对其进行自定义。
ellipsis: {
},
// string null 如果空间过小，导致省略号也显示不下，但是又不想空着，可能得有个什么标记表示这里是有字符的，就用个 “点”，就是在这个 placeholder 里设置。
placeholder: {
}
}

0
src/iscs_new/form/formBuilder.js Normal file
View File

24
src/iscs_new/graph/graphic.js
View File

@ -1,7 +1,7 @@
export {default as Group} from 'zrender/src/container/Group'; export {default as Group} from 'zrender/src/container/Group';
export {default as Image} from 'zrender/src/graphic/Image'; export {default as Image} from 'zrender/src/graphic/Image';
export {default as Text} from 'zrender/src/graphic/Text'; export {default as Text} from 'zrender/src/graphic/Text';
export {default as Arc} from 'zrender/src/graphic/shape/Arc'; export {default as Arc} from 'zrender/src/graphic/shape/Arc';
export {default as BezierCurve} from 'zrender/src/graphic/shape/BezierCurve'; export {default as BezierCurve} from 'zrender/src/graphic/shape/BezierCurve';
export {default as Circle} from 'zrender/src/graphic/shape/Circle'; export {default as Circle} from 'zrender/src/graphic/shape/Circle';
@ -19,14 +19,14 @@ export {default as Sector} from 'zrender/src/graphic/shape/Sector';
export {default as Star} from 'zrender/src/graphic/shape/Star'; export {default as Star} from 'zrender/src/graphic/shape/Star';
export {default as Trochoid} from 'zrender/src/graphic/shape/Trochoid'; export {default as Trochoid} from 'zrender/src/graphic/shape/Trochoid';
export {default as Hover} from './shape/Hover'; // export {default as Svg} from './shape/Svg';
export {default as Digit} from './shape/Digit'; // export {default as Hover} from './shape/Hover';
export {default as Arrow} from './shape/Arrow'; // export {default as Digit} from './shape/Digit';
export {default as ArrowLine} from './shape/ArrowLine'; // export {default as Arrow} from './shape/Arrow';
export {default as Sausage} from './shape/Sausage'; // export {default as ArrowLine} from './shape/ArrowLine';
export {default as Pointer} from './shape/Pointer'; // export {default as Sausage} from './shape/Sausage';
export {default as Table} from './shape/Table/table'; // export {default as Pointer} from './shape/Pointer';
export {default as CurvedScale} from './shape/CurvedScale/curvedScale'; // export {default as Table} from './shape/Table/table';
export {default as LinearScale} from './shape/LinearScale/linearScale'; // export {default as CurvedScale} from './shape/CurvedScale/curvedScale';
export {default as Coordinate} from './shape/Coordinate/Coordinate'; // export {default as LinearScale} from './shape/LinearScale/linearScale';
export {default as Svg} from './shape/Svg'; // export {default as Coordinate} from './shape/Coordinate/Coordinate';

6
src/iscs_new/maps.js
View File

@ -55,13 +55,13 @@ class Emaps {
loadState(state) { loadState(state) {
// 解析后的数据 // 解析后的数据
this.mapShape = utils.assignByDeep(this.mapShape, state.mapShape||{}, 0); this.mapShape = utils.assignByDepth(this.mapShape, state.mapShape||{}, 0);
// 实体数据 // 实体数据
this.mapEntity = utils.assignByDeep(this.mapEntity, state.mapEntity||{}, 0); this.mapEntity = utils.assignByDepth(this.mapEntity, state.mapEntity||{}, 0);
// 实体关系 // 实体关系
this.mapLink = utils.assignByDeep(this.mapLink, state.mapLink||{}, 1); this.mapLink = utils.assignByDepth(this.mapLink, state.mapLink||{}, 1);
} }
setMap(map, opts, judge = false) { setMap(map, opts, judge = false) {

3
src/iscs_new/package/index.js
View File

@ -1,11 +1,8 @@
import graphMapShape from './graph'; import graphMapShape from './graph';
import panelMapShape from './panel';
export default { export default {
__Shape: { __Shape: {
...graphMapShape, ...graphMapShape,
...panelMapShape,
...resourceMapShape
}, },
getBuilder(type) { getBuilder(type) {
const ShapeClazz = this.__Shape[type]; const ShapeClazz = this.__Shape[type];

312
src/iscs_new/package/panel/LinePipe/index.js
View File

@ -1,312 +0,0 @@
import * as color from 'zrender/src/tool/color';
import * as graphic from '../../../graph/graphic';
import * as utils from '../../../utils/utils';
import panelType from '../../../constant/panelType';
import ConstSelect from '@/scripts/ConstConfig';
export default class LinePipe extends graphic.Group {
constructor(painter, shape, state) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._state = state;
this._elMap = {
lines: [],
line: null,
flow: null,
lArrow: null,
rArrow: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
if (this._shape.draw) {
this.doActive(this.__zr);
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this.doInactive(this.__zr);
}
}
create() {
const model = this._shape.model;
const style = this._shape.style;
const isVisible = this._state.isDraw ? true : model.visible;
if (isVisible) {
if (model.points.length >= 2) {
this._elMap.line = new graphic.Polyline({
zlevel: model.zlevel,
z: model.z,
z2: (model.layer || 0),
shape: {
points: model.points.map(elem => { return [elem.x, elem.y]; }),
smooth: model.smooth / 10
},
style: {
lineWidth: model.width||style[panelType.LinePipe].line.lineWidth,
stroke: model.color
}
});
// 文字和状态
if (!this._shape.draw) {
this._elMap.flow = new graphic.Polyline({
zlevel: model.zlevel,
z: model.z,
z2: (model.layer || 0)+1,
silent: true,
shape: {
points: model.points.map(elem => { return [elem.x, elem.y]; }),
smooth: model.smooth / 10
},
style: {
lineDash: [8, 8],
lineWidth: model.width
}
});
this._elMap.flow.hide();
}
if ((ConstSelect.ConstMap.LSvgs[model.leftArrow]||{}).path) {
const rotation = -Math.atan2(
model.points[1].y-model.points[0].y,
model.points[1].x-model.points[0].x
);
const path = ConstSelect.ConstMap.LSvgs[model.leftArrow].path;
this._elMap.lArrow = new graphic.Svg({
zlevel: model.zlevel,
z: model.z,
z2: (model.layer || 0),
origin: [0, 0],
rotation,
shape: {
x: model.points[0].x,
y: model.points[0].y,
path
},
style: {
lineWidth: style[panelType.LinePipe].arrow.lineWidth,
stroke: path.includes('stroke')? model.color: 'transparent ',
fill: path.includes('fill')? model.color: 'transparent '
}
});
}
if ((ConstSelect.ConstMap.RSvgs[model.rightArrow]||{}).path) {
const len = model.points.length-1;
const rotation = -Math.atan2(
model.points[len].y-model.points[len-1].y,
model.points[len].x-model.points[len-1].x
);
const path = ConstSelect.ConstMap.RSvgs[model.rightArrow].path;
this._elMap.rArrow = new graphic.Svg({
zlevel: model.zlevel,
z: model.z,
z2: (model.layer || 0),
origin: [0, 0],
rotation,
shape: {
x: model.points[len].x,
y: model.points[len].y,
path
},
style: {
lineWidth: style[panelType.LinePipe].arrow.lineWidth,
stroke: path.includes('stroke')? model.color: 'transparent ',
fill: path.includes('fill')? model.color: 'transparent '
}
});
}
this._elMap.line.setStyle('lineDash', {
'Solid': null, // 实线
'Dotted': [12, 6], // 虚线
'Point': [4, 4], // 点线
'DotPointA': [12, 4, 4, 4], // 一类虚点线
'DotPointB': [12, 4, 4, 4, 4, 4] // 二类虚点线
}[model.type]);
}
}
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
if (this._elMap.lines && this._elMap.lines.length) {
this._elMap.lines.forEach((line, index) => {
utils.lineProxy(line, model.points[index], model.points[index+1]);
});
}
if (this._elMap.line) {
this._elMap.line.setShape({
points: model.points.map(elem => { return [elem.x, elem.y]; })
});
}
if (this._elMap.flow) {
this._elMap.flow.setShape({
points: model.points.map(elem => { return [elem.x, elem.y]; })
});
}
if (this._elMap.lArrow) {
const rotation = -Math.atan2(
model.points[1].y-model.points[0].y,
model.points[1].x-model.points[0].x
);
this._elMap.lArrow.attr('rotation', rotation);
this._elMap.lArrow.setShape({
x: model.points[0].x,
y: model.points[0].y
});
}
if (this._elMap.rArrow) {
const len = model.points.length-1;
const rotation = -Math.atan2(
model.points[len].y-model.points[len-1].y,
model.points[len].x-model.points[len-1].x
);
this._elMap.rArrow.attr('rotation', rotation);
this._elMap.rArrow.setShape({
x: model.points[len].x,
y: model.points[len].y
});
}
}
setState(model) {
const data = model.entity.data;
const stroke = model.color;
if (data && this._elMap.flow) {
if (data.filled) {
this._elMap.flow.show();
switch (data.from) {
case 'A': this.setFlowRun(data, true); break;
case 'B': this.setFlowRun(data, false); break;
default: this.setFlowStop(); break;
}
if (data.filler) {
this._elMap.flow.setStyle({stroke});
this._elMap.line.hide();
}
} else {
this._elMap.flow.hide();
this._elMap.line.show();
}
}
}
dragging(e) {
const model = this._shape.model;
model.points.map(elem => {
elem.x += e.dx;
elem.y += e.dy;
});
this.setShape(model);
}
setFlowRun(data, clockwise) {
const offsetMap = clockwise ? [32, 16, 0] : [0, 16, 32];
const flowSpeed = Math.ceil(data.speed);
if (this._elMap.flow) {
this._elMap.flow.stopAnimation();
if (flowSpeed > 0) {
this._elMap.flow.animate('style', true)
.when(0, { lineDashOffset: offsetMap[0] * flowSpeed })
.when(1000, { lineDashOffset: offsetMap[1] * flowSpeed })
.when(2000, { lineDashOffset: offsetMap[2] * flowSpeed })
.start();
}
}
}
setFlowStop() {
if (this._elMap.flow) {
this._elMap.flow.stopAnimation();
}
}
setFlowClear() {
if (this._elMap.flow) {
this.remove(this._elMap.flow);
}
}
doActive(zr) {
if (zr||this.__zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.line) {
level.addHover(this._elMap.line, {
stroke: color.lift(style.pipeHover2Color, style.liftLevel),
opacity: 0.8
});
}
this._elMap.lines.forEach(elem => {
if (elem) {
level.addHover(elem, {
stroke: color.lift(style.pipeHover2Color, style.liftLevel),
opacity: 0.8
});
}
});
[this._elMap.lArrow, this._elMap.rArrow].forEach(el =>{
if (el) {
level.addHover(el, {
stroke: el.shape.path.includes('stroke')
? color.lift(style.pipeHover2Color, style.liftLevel)
: 'transparent',
fill: el.shape.path.includes('fill')
? color.lift(style.pipeHover2Color, style.liftLevel)
: 'transparent'
});
}
});
}
}
doInactive(zr) {
if (zr||this.__zr) {
const level = zr||this.__zr;
[this._elMap.line,
...this._elMap.lines,
this._elMap.lText,
this._elMap.rText,
this._elMap.lArrow,
this._elMap.rArrow
].forEach(elem => {
if (elem) {
level.removeHover(elem);
}
});
}
}
getViewTipsPoint() {}
}

144
src/iscs_new/package/panel/Measure/index.js
View File

@ -1,144 +0,0 @@
import * as color from 'zrender/src/tool/color';
import * as graphic from '../../../graph/graphic';
// import panelType from '../../../constant/panelType';
export default class Measure extends graphic.Group {
constructor(painter, shape, state) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._state = state;
this._painter = painter;
this._state = state;
this._elMap = {
text: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
const model = this._shape.model;
if (this._shape.draw) {
this.doActive(this.__zr);
} else if (model.description) {
this._painter.$tipsHandle.trigger('show', {
x: e.offsetX,
y: e.offsetY,
text: model.description,
target: e.target
});
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw &&!map.isHover(this._code)) {
this.doInactive(this.__zr);
} else {
this._painter.$tipsHandle.trigger('hide');
}
}
create() {
const model = this._shape.model;
this._elMap.text = new graphic.Text({
zlevel: model.zlevel,
z: model.z,
style: {
x: model.point.x,
y: model.point.y,
fontFamily: 'Times New Roman',
fontWeight: 'normal',
fontSize: model.size,
textVerticalAlign: 'middle',
textBackgroundColor: 'transparent',
text: this.format('--', model.unit),
textFill: model.color||'#fff',
textAlign: 'center',
textPadding: [3, 3, 1, 3],
rich: {
txt: {
fontSize: model.size,
textVerticalAlign: 'middle',
textFill: model.color||'#fff'
},
sup: {
fontSize: parseInt(model.size/3),
textVerticalAlign: 'top'
},
sub: {
fontSize: parseInt(model.size/3),
textVerticalAlign: 'bottom'
}
}
}
});
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
if (this._elMap.text) {
this._elMap.text.setStyle({
x: model.point.x,
y: model.point.y
});
}
}
setState(model) {
const data = model.entity.data ||{};
const decimalPlace = model.decimalPlace||0;
if (this._elMap.text && data) {
const value = data.value == undefined? '--' : Number(data.value||0).toFixed(decimalPlace);
this._elMap.text.setStyle({text: this.format(value, model.unit) });
}
}
format(value, unit) {
return `{txt|${value}} ${unit}`;
}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.text && level) {
level.addHover(this._elMap.text, {
opacity: style.maskOpacity,
textBackgroundColor: color.lift(style.measureHover2Color, style.liftLevel)
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if (this._elMap.text &&level) {
level.removeHover(this._elMap.text);
}
}
getViewTipsPoint() {
const model = this._shape.model;
return {
x: model.point.x,
y: model.point.y
};
}
}

159
src/iscs_new/package/panel/Pid/index.js
View File

@ -1,159 +0,0 @@
import * as color from 'zrender/src/tool/color';
import * as graphic from '../../../graph/graphic';
import panelType from '../../../constant/panelType';
export default class Pid extends graphic.Group {
constructor(painter, shape) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._elMap = {
text: null,
button: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
const model = this._shape.model;
if (this._shape.draw) {
this._elMap.button.attr({cursor: 'pointer'});
this.doActive(this.__zr);
} else if (model.description) {
this._painter.$tipsHandle.trigger('show', {
x: e.offsetX,
y: e.offsetY,
text: model.description,
target: e.target
});
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this._elMap.button.attr({cursor: 'default'});
this.doInactive(this.__zr);
} else {
this._painter.$tipsHandle.trigger('hide');
}
}
create() {
const model = this._shape.model;
const style = this._shape.style;
this._elMap.button = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: model.point.x-model.width/2,
y: model.point.y-model.height/2,
width: model.width,
height: model.height,
r: [1]
},
style: {
fill: style[panelType.Pid].button.fill,
stroke: style[panelType.Pid].button.stroke,
lineWidth: style[panelType.Pid].button.lineWidth,
shadowColor: '#dfdfdf',
shadowOffsetX: 1,
shadowOffsetY: 1
}
});
this._elMap.text = new graphic.Text({
zlevel: model.zlevel,
z: model.z,
z2: 2,
style: {
x: model.point.x,
y: model.point.y,
fontWeight: style[panelType.Pid].text.fontWeight,
fontFamily: style.fontFamily,
fontSize: model.fontSize,
text: model.text,
textFill: '#000',
textPadding: [4, 4],
textAlign: 'center',
textVerticalAlign: 'middle'
}
});
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
if (this._elMap.button) {
this._elMap.button.setShape({
x: model.point.x-model.width/2,
y: model.point.y-model.height/2
});
}
if (this._elMap.text) {
this._elMap.text.setStyle({
x: model.point.x,
y: model.point.y
});
}
}
setState(model) {}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.button && level) {
level.addHover(this._elMap.button, {
opacity: style.maskOpacity,
fill: color.lift(style.graphHover2Color, style.liftLevel)
});
}
if (this._elMap.text && level) {
level.addHover(this._elMap.text, {
opacity: style.maskOpacity,
textFill: color.lift(style.textHover2Color, style.liftLevel)
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if ( this._elMap.button && level) {
level.removeHover(this._elMap.button);
}
if ( this._elMap.text && level) {
level.removeHover(this._elMap.text);
}
}
getViewTipsPoint() {
if (this._elMap.button) {
const button = this._elMap.button.getBoundingRect();
return {
x: button.x + button.width/2,
y: button.y
};
}
}
}

149
src/iscs_new/package/panel/Popup/index.js
View File

@ -1,149 +0,0 @@
import * as color from 'zrender/src/tool/color';
import * as graphic from '../../../graph/graphic';
import panelType from '../../../constant/panelType';
export default class Popup extends graphic.Group {
constructor(painter, shape) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._elMap = {
text: null,
button: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
if (this._shape.draw) {
this._elMap.button.attr({cursor: 'pointer'});
this.doActive(this.__zr);
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this._elMap.button.attr({cursor: 'default'});
this.doInactive(this.__zr);
}
}
create() {
const model = this._shape.model;
const style = this._shape.style;
this._elMap.button = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: model.point.x-model.width/2,
y: model.point.y-model.height/2,
width: model.width,
height: model.height,
r: [1]
},
style: {
fill: style[panelType.Popup].button.fill,
stroke: style[panelType.Popup].button.stroke,
lineWidth: style[panelType.Popup].button.lineWidth,
shadowColor: '#dfdfdf',
shadowOffsetX: 1,
shadowOffsetY: 1
}
});
this._elMap.text = new graphic.Text({
zlevel: model.zlevel,
z: model.z,
z2: 2,
style: {
x: model.point.x,
y: model.point.y,
fontWeight: style[panelType.Popup].text.fontWeight,
fontFamily: style.fontFamily,
fontSize: model.fontSize,
text: model.text,
textFill: '#000',
textPadding: [4, 4],
textAlign: 'center',
textVerticalAlign: 'middle'
}
});
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
if (this._elMap.button) {
this._elMap.button.setShape({
x: model.point.x-model.width/2,
y: model.point.y-model.height/2
});
}
if (this._elMap.text) {
this._elMap.text.setStyle({
x: model.point.x,
y: model.point.y
});
}
}
setState(model) {}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.button && level) {
level.addHover(this._elMap.button, {
opacity: style.maskOpacity,
fill: color.lift(style.graphHover2Color, style.liftLevel)
});
}
if (this._elMap.text && level) {
level.addHover(this._elMap.text, {
opacity: style.maskOpacity,
textFill: color.lift(style.textHover2Color, style.liftLevel)
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if ( this._elMap.button && level) {
level.removeHover(this._elMap.button);
}
if ( this._elMap.text && level) {
level.removeHover(this._elMap.text);
}
}
getViewTipsPoint() {
if (this._elMap.button) {
const button = this._elMap.button.getBoundingRect();
return {
x: button.x + button.width/2,
y: button.y
};
}
}
}

308
src/iscs_new/package/panel/ProgramControl/index.js
View File

@ -1,308 +0,0 @@
import * as color from 'zrender/src/tool/color';
import * as graphic from '../../../graph/graphic';
import panelType from '../../../constant/panelType';
export default class ProgramControl extends graphic.Group {
constructor(painter, shape) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._elMap = {
line: null,
button: null,
blockStart: null,
blockReset: null,
blockStop: null,
start: null,
reset: null,
stop: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
const model = this._shape.model;
if (this._shape.draw) {
this._elMap.button.attr({cursor: 'pointer'});
this.doActive(this.__zr);
} else if (model.description) {
this._painter.$tipsHandle.trigger('show', {
x: e.offsetX,
y: e.offsetY,
text: model.description,
target: e.target
});
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this._elMap.button.attr({cursor: 'default'});
this.doInactive(this.__zr);
} else {
this._painter.$tipsHandle.trigger('hide');
}
}
create() {
const model = this._shape.model;
const style = this._shape.style;
this._elMap.line = new graphic.Line({
zlevel: model.zlevel,
z: model.z,
z2: 9,
shape: {
x1: model.point.x+style[panelType.ProgramControl].button.width/2,
y1: model.point.y+style[panelType.ProgramControl].button.height/2,
x2: model.point.x-style[panelType.ProgramControl].button.width/2,
y2: model.point.y-style[panelType.ProgramControl].button.height/2
},
style: {
stroke: style[panelType.ProgramControl].line.stroke,
lineWidth: style[panelType.ProgramControl].line.lineWidth,
lineCap: 'round'
}
});
this._elMap.button = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: model.point.x-style[panelType.ProgramControl].button.width/2,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
width: style[panelType.ProgramControl].button.width,
height: style[panelType.ProgramControl].button.height,
r: [1]
},
style: {
fill: style[panelType.ProgramControl].button.fill,
stroke: style[panelType.ProgramControl].button.stroke,
lineWidth: style[panelType.ProgramControl].button.lineWidth
}
});
this._elMap.blockStart = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
z2: 3,
shape: {
x: model.point.x-style[panelType.ProgramControl].button.width/2,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
width: style[panelType.ProgramControl].button.width/3,
height: style[panelType.ProgramControl].button.height,
r: [1]
},
style: {
fill: style[panelType.ProgramControl].block.fill,
stroke: style[panelType.ProgramControl].block.stroke,
lineWidth: style[panelType.ProgramControl].block.lineWidth
}
});
this._elMap.blockReset = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
z2: 3,
shape: {
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
width: style[panelType.ProgramControl].button.width/3,
height: style[panelType.ProgramControl].button.height,
r: [1]
},
style: {
fill: style[panelType.ProgramControl].block.fill,
stroke: style[panelType.ProgramControl].block.stroke,
lineWidth: style[panelType.ProgramControl].block.lineWidth
}
});
this._elMap.blockStop = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
z2: 3,
shape: {
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
width: style[panelType.ProgramControl].button.width/3,
height: style[panelType.ProgramControl].button.height,
r: [1]
},
style: {
fill: style[panelType.ProgramControl].block.fill,
stroke: style[panelType.ProgramControl].block.stroke,
lineWidth: style[panelType.ProgramControl].block.lineWidth,
r: [1]
}
});
this._elMap.start = new graphic.Svg({
zlevel: model.zlevel,
z: model.z,
z2: 5,
origin: [0, 0],
rotation: 0,
scale: [1, 1],
shape: {
x: model.point.x-style[panelType.ProgramControl].button.width/2 + style[panelType.ProgramControl].button.width/6,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
path: 'M6 12 L-4 6 L-4 18Z'
},
style: {
fill: style[panelType.ProgramControl].indicate.fill
}
});
this._elMap.reset = new graphic.Svg({
zlevel: model.zlevel,
z: model.z,
z2: 5,
origin: [0, 0],
rotation: 0,
scale: [1, 1],
shape: {
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3 + style[panelType.ProgramControl].button.width/6,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
path: 'M6 6 L6 18 L1 18 L1 6Z M-6 6 L-6 18 L-1 18 L-1 6Z'
},
style: {
fill: style[panelType.ProgramControl].indicate.fill
}
});
this._elMap.stop = new graphic.Svg({
zlevel: model.zlevel,
z: model.z,
z2: 5,
origin: [0, 0],
rotation: 0,
scale: [1, 1],
shape: {
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2 + style[panelType.ProgramControl].button.width/6,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
path: 'M6 6 L6 18 L-6 18 L-6 6Z'
},
style: {
fill: style[panelType.ProgramControl].indicate.fill
}
});
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
const style = this._shape.style;
if (this._elMap.line) {
this._elMap.line.setShape({
x1: model.point.x+style[panelType.ProgramControl].button.width/2,
y1: model.point.y+style[panelType.ProgramControl].button.height/2,
x2: model.point.x-style[panelType.ProgramControl].button.width/2,
y2: model.point.y-style[panelType.ProgramControl].button.height/2
});
}
if (this._elMap.button) {
this._elMap.button.setShape({
x: model.point.x-style[panelType.ProgramControl].button.width/2,
y: model.point.y-style[panelType.ProgramControl].button.height/2
});
}
if (this._elMap.blockStart) {
this._elMap.blockStart.setShape({
x: model.point.x-style[panelType.ProgramControl].button.width/2,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
width: style[panelType.ProgramControl].button.width/3,
height: style[panelType.ProgramControl].button.height
});
}
if (this._elMap.blockReset) {
this._elMap.blockReset.setShape({
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
width: style[panelType.ProgramControl].button.width/3,
height: style[panelType.ProgramControl].button.height
});
}
if (this._elMap.blockStop) {
this._elMap.blockStop.setShape({
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2,
y: model.point.y-style[panelType.ProgramControl].button.height/2,
width: style[panelType.ProgramControl].button.width/3,
height: style[panelType.ProgramControl].button.height
});
}
if (this._elMap.start) {
this._elMap.start.setShape({
x: model.point.x-style[panelType.ProgramControl].button.width/2 + style[panelType.ProgramControl].button.width/6,
y: model.point.y-style[panelType.ProgramControl].button.height/2
});
}
if (this._elMap.reset) {
this._elMap.reset.setShape({
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3 + style[panelType.ProgramControl].button.width/6,
y: model.point.y-style[panelType.ProgramControl].button.height/2
});
}
if (this._elMap.stop) {
this._elMap.stop.setShape({
x: model.point.x-style[panelType.ProgramControl].button.width/2+style[panelType.ProgramControl].button.width/3*2 + style[panelType.ProgramControl].button.width/6,
y: model.point.y-style[panelType.ProgramControl].button.height/2
});
}
}
setState(model) {}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.button && level) {
level.addHover(this._elMap.button, {
opacity: style.maskOpacity,
fill: color.lift(style.graphHover2Color, style.liftLevel),
stroke: color.lift(style.graphHover2Color, style.liftLevel)
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if ( this._elMap.button && level) {
level.removeHover(this._elMap.button);
}
}
getViewTipsPoint() {
if (this._elMap.button) {
const button = this._elMap.button.getBoundingRect();
return {
x: button.x + button.width/2,
y: button.y
};
}
}
}

62
src/iscs_new/package/panel/Resource/caches.js
View File

@ -1,62 +0,0 @@
import * as utils from '../../../utils/utils';
class Caches {
constructor () {
this.registerMap = {};
}
register(model, statuses) {
const type = model.entity.type;
const resourceId = model.resourceId;
const cacheMap = this.getCacheMap(this.registerMap, type);
if (!cacheMap[resourceId]) {
cacheMap[resourceId] = this.buildMapper(statuses);
}
return new Proxy(cacheMap[resourceId], {
get: function(source, key) { return source[key]||source.none; }
});
}
buildMapper(statuses) {
const map = {};
if (statuses instanceof Array) {
statuses.forEach(el => {
const urls = el.urls;
if (urls.length == 1) {
map[el.status] = utils.getResourceUrl(el.urls[0]);
} else {
map[el.status] = [];
urls.forEach(url => {
map[el.status].push(utils.getResourceUrl(url));
});
}
});
} else {
Object.keys(statuses).forEach(status => {
const urls = statuses[status].urls;
if (urls.length == 1) {
map[status] = utils.getResourceUrl(urls[0]);
} else {
map[status] = [];
urls.forEach(url => {
map[status].push(utils.getResourceUrl(url));
});
}
});
}
return map;
}
getCacheMap(target, type) {
if (!target[type]) { target[type]= {}; }
return target[type];
}
clear() {
this.registerMap = {};
}
}
export default new Caches();

251
src/iscs_new/package/panel/Resource/index.js
View File

@ -1,251 +0,0 @@
import * as utils from '../../../utils/utils';
import * as graphic from '../../../graph/graphic';
import panelType from '../../../constant/panelType';
import StateHandle from './stateHandle.js';
import Caches from './caches';
class Adaptor {
constructor({model, state}) {
this.__model = model;
this.__state = state;
}
get() {
const model = this.__model;
const resource = (this.__state.mapResource||{})[model.resourceId] || {};
const size = (resource.size||'').split(',') || [0, 0];
const width = model.width? model.width: size[0];
const height = model.height? model.height: size[1];
return Object.assign(model, resource, {
width: parseFloat(width),
height: parseFloat(height),
resource
});
}
}
export default class Resource extends graphic.Group {
constructor(painter, shape, state) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._state = state;
this._count = 0;
this._timer = null;
this._adaptor = new Adaptor({model: shape.model, state});
this._elMap = {
image: null,
warning: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
const model = this._shape.model;
const control = model.control||{};
if (this._shape.draw) {
this._elMap.image.attr({cursor: 'pointer'});
this.doFocus();
} else if (this._elMap.image) {
this._elMap.image.attr({cursor: control.disabled? 'default': 'pointer'});
if (model.description) {
this._painter.$tipsHandle.trigger('show', {
x: e.offsetX,
y: e.offsetY,
text: model.description,
target: e.target
});
}
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this.doBlur();
} else {
this._elMap.image.attr({cursor: 'default'});
this._painter.$tipsHandle.trigger('hide');
}
}
create() {
const model = this._adaptor.get();
const style = this._shape.style;
const rotation = -Math.PI / 180 * Number(model.rotate||0);
const origin = [model.point.x+model.width/2, model.point.y+model.height/2];
const scale = new Array(2).fill(model.scale || 1);
const cache = this.register(model);
const isVisible = this._state.isDraw
? true
: !['PipeFitting'].includes(model.entity.type)&&model.visible;
if (cache&&isVisible) {
if (utils.urlIsSvg(cache.none)) {
this._elMap.image = new graphic.Svg({
zlevel: model.zlevel,
z: model.z,
z2: model.layer+5,
origin: [0, 0],
rotation,
scale,
shape: {
x: model.point.x,
y: model.point.y,
path: cache.none
},
style: {
lineWidth: style[panelType.LinePipe].arrow.lineWidth,
stroke: '#fff',
fill: '#fff'
}
});
} else {
this._elMap.image = new graphic.Image({
zlevel: model.zlevel,
z: model.z,
z2: model.layer+5,
origin,
rotation,
scale,
style: {
image: cache.none,
x: model.point.x,
y: model.point.y,
width: model.width*scale[0],
height: model.height*scale[1]
}
});
}
}
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
this.setState(model);
}
traversed(map, cb) {
Object.values(map).forEach(el => {
if (el) {
if (el instanceof Array) {
this.traversed(el, cb);
} else {
cb(el);
}
}
});
}
setShape(model, e) {
if (this._elMap.image) {
if (utils.shapeIsSvg(this._elMap.image)) {
this._elMap.image.setShape({
x: model.point.x,
y: model.point.y
});
} else {
const origin = [model.point.x+model.width/2, model.point.y+model.height/2];
const scale = new Array(2).fill(model.scale || 1);
this._elMap.image.attr('origin', origin);
this._elMap.image.setStyle({
x: model.point.x,
y: model.point.y,
width: model.width*scale[0],
height: model.height*scale[1]
});
}
}
}
setState(model) {
StateHandle.reload(this);
StateHandle.update();
StateHandle.unload();
}
dragging(e) {
const model = this._adaptor.get();
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model, e);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (level && this._elMap.STL_Background) {
this._elMap.STL_Background.doActive(level);
} else if (level && this._elMap.image) {
level.addHover(this._elMap.image, {
opacity: style.maskOpacity,
image: style.maskHover2Image,
fill: style.measureHover2Color,
stroke: style.measureHover2Color
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if (this._elMap.STL_Background) {
this._elMap.STL_Background.doInactive(level);
} else if (level && this._elMap.image) {
level.removeHover(this._elMap.image);
}
this.doBlur();
}
doFocus() {
Object.values(this._elMap).forEach(elem => {
if (elem) {
elem.setStyle({opacity: 0.5});
}
});
}
doBlur() {
Object.values(this._elMap).forEach(elem => {
if (elem) {
elem.setStyle({opacity: 1});
}
});
}
register(model) {
if (model.resource) {
const resource = model.resource;
const statuses = resource.statusList||[];
statuses.push({status: 'none', urls: [resource.url]});
return Caches.register(model, statuses);
} else {
console.info(`设备绘图不支${model.entity.type}绘图(${model.code})！`);
}
}
getViewTipsPoint() {
const model = this._adaptor.get();
const image = this._elMap.image;
if (image) {
const rect = image.getBoundingRect();
return {
x: model.point.x + rect.width/10,
y: model.point.y + rect.height/20
};
}
}
}

52
src/iscs_new/package/panel/Resource/stateHandle.js
View File

@ -1,52 +0,0 @@
class StateHandle {
constructor() {
this.unload();
this.animateMap = null;
}
reload(graph) {
this.graph = graph;
this.model = graph._shape.model;
this.style = graph._shape.style;
this.state = graph._state;
}
unload() {
this.graph = null;
this.model = null;
this.style = null;
}
update() {
if (this.graph) {
const data = this.model.entity.data;
const graph = this.graph;
const cache = this.graph.register(this.model);
if (data && cache && graph._elMap.image) {
const status = cache[data.status];
graph._elMap.image.stopAnimation();
if (status instanceof Array) {
graph._elMap.image.animate('style', true)
.when(37, {image: cache.none })
.when(74, {image: null })
.during(() => {
if (+new Date() - graph._delta > 74) {
graph._elMap.image.setStyle({image: status[graph._count%2]});
graph._delta = +new Date();
graph._count = graph._count%2+1;
}
})
.start();
} else {
graph._elMap.image.stopAnimation();
graph._elMap.image.setStyle({ image: status });
graph._delta = 0;
graph._count = 0;
}
}
}
}
}
export default new StateHandle();

195
src/iscs_new/package/panel/Switching/index.js
View File

@ -1,195 +0,0 @@
import * as color from 'zrender/src/tool/color';
import * as graphic from '../../../graph/graphic';
import panelType from '../../../constant/panelType';
export default class Switching extends graphic.Group {
constructor(painter, shape) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._elMap = {
text: null,
button: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
this.on('mousedown', this.mousedown, this);
this.on('mouseup', this.mouseup, this);
}
mousedown(e) {
const model = this._shape.model;
if (model.isReset &&
!this._shape.draw &&
this._elMap.button) {
this._elMap.button.setStyle({
fill: '#FF0000'
});
}
}
mouseup(e) {
const model = this._shape.model;
const style = this._shape.style;
if (model.isReset &&
!this._shape.draw &&
this._elMap.button) {
setTimeout(() => {
this._elMap.button.setStyle({
fill: style[panelType.Switching].button.fill
});
}, 200);
}
}
mouseover(e) {
if (this._shape.draw) {
this._elMap.button.attr({cursor: 'pointer'});
this.doActive(this.__zr);
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this._elMap.button.attr({cursor: 'default'});
this.doInactive(this.__zr);
}
}
create() {
const model = this._shape.model;
const style = this._shape.style;
this._elMap.button = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
shape: {
x: model.point.x-model.width/2,
y: model.point.y-model.height/2,
width: model.width,
height: model.height,
r: [1]
},
style: {
fill: style[panelType.Switching].button.fill,
stroke: style[panelType.Switching].button.stroke,
lineWidth: style[panelType.Switching].button.lineWidth,
shadowColor: '#dfdfdf',
shadowOffsetX: 1,
shadowOffsetY: 1
}
});
this._elMap.text = new graphic.Text({
zlevel: model.zlevel,
z: model.z,
z2: 2,
style: {
x: model.point.x,
y: model.point.y,
fontWeight: style[panelType.Switching].text.fontWeight,
fontFamily: style.fontFamily,
fontSize: model.fontSize,
text: model.putInText,
textFill: '#000',
textPadding: [4, 4],
textAlign: 'center',
textVerticalAlign: 'middle'
}
});
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
if (this._elMap.button) {
this._elMap.button.setShape({
x: model.point.x-model.width/2,
y: model.point.y-model.height/2
});
}
if (this._elMap.text) {
this._elMap.text.setStyle({
x: model.point.x,
y: model.point.y
});
}
}
setState(model) {
const entity = model.entity||{};
const data = entity.data ||{};
if (!model.isReset &&
!this._shape.draw &&
entity.data) {
if (this._elMap.button) {
this._elMap.button.setStyle({
fill: data.status? '#FF0000' : '#3CB371'
});
}
if (this._elMap.text) {
this._elMap.text.setStyle({
text: data.status? model.putInText: model.cutOffText
});
}
}
}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.button && level) {
level.addHover(this._elMap.button, {
opacity: style.maskOpacity,
fill: color.lift(style.graphHover2Color, style.liftLevel)
});
}
if (this._elMap.text && level) {
level.addHover(this._elMap.text, {
opacity: style.maskOpacity,
textFill: color.lift(style.textHover2Color, style.liftLevel)
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if ( this._elMap.button && level) {
level.removeHover(this._elMap.button);
}
if ( this._elMap.text && level) {
level.removeHover(this._elMap.text);
}
}
getViewTipsPoint() {
if (this._elMap.button) {
const button = this._elMap.button.getBoundingRect();
return {
x: button.x + button.width/2,
y: button.y
};
}
}
}

144
src/iscs_new/package/panel/Table/index.js
View File

@ -1,144 +0,0 @@
import * as graphic from '../../../graph/graphic';
import panelType from '../../../constant/panelType';
export default class Table extends graphic.Group {
constructor(painter, shape) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._elMap = {
table: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
if (this._shape.draw) {
this.doActive(this.__zr);
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this.doInactive(this.__zr);
}
}
create() {
const draw = this._shape.draw;
const model = this._shape.model;
const style = this._shape.style;
this._elMap.header = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
z2: -1,
cursor: draw? 'pointer': 'default',
shape: {
x: model.point.x,
y: model.point.y,
width: model.width,
height: style[panelType.Table].header.height
},
style: {
stroke: model.lineColor,
lineWidth: model.lineWidth,
fill: model.headerBg
}
});
this._elMap.body = new graphic.Rect({
zlevel: model.zlevel,
z: model.z,
z2: -1,
silent: true,
shape: {
x: model.point.x,
y: model.point.y+style[panelType.Table].header.height,
width: model.width,
height: model.height
},
style: {
stroke: model.lineColor,
lineWidth: model.lineWidth,
fill: model.bodyBg
}
});
this._elMap.title = new graphic.Text({
zlevel: model.zlevel,
z: model.z,
z2: 0,
cursor: draw? 'pointer': 'default',
style: {
x: model.point.x+model.width/2,
y: model.point.y+style[panelType.Table].header.height/2,
fontWeight: style[panelType.Table].header.fontWeight,
fontSize: style[panelType.Table].header.fontSize,
fontFamily: style.fontFamily,
text: model.title||'标题',
textAlign: 'center',
textVerticalAlign: 'middle'
}
});
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
const style = this._shape.style;
if (this._elMap.header) {
this._elMap.header.setShape({
x: model.point.x,
y: model.point.y
});
}
if (this._elMap.body) {
this._elMap.body.setShape({
x: model.point.x,
y: model.point.y+style[panelType.Table].header.height
});
}
if (this._elMap.title) {
this._elMap.title.setStyle({
x: model.point.x+model.width/2,
y: model.point.y+style[panelType.Table].header.height/2
});
}
}
setState(model, e) {
}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
}
doInactive(zr) {
}
getViewTipsPoint() {}
}

132
src/iscs_new/package/panel/Text/index.js
View File

@ -1,132 +0,0 @@
import * as color from 'zrender/src/tool/color';
import * as graphic from '../../../graph/graphic';
export default class Text2 extends graphic.Group {
constructor(painter, shape) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._painter = painter;
this._rotation = null;
this._origin = null;
this._elMap = {
text: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
if (this._shape.draw) {
this.doActive(this.__zr);
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this.doInactive(this.__zr);
}
}
create() {
const draw = this._shape.draw;
const model = this._shape.model;
const backGroundColor = this.getTextBgColor(model);
const textStyle = this.getTextStyle(model);
this._rotation = -Math.PI / 180 * Number(model.rotate||0);
this._origin = [model.point.x, model.point.y];
this._elMap.text = new graphic.Text({
zlevel: model.zlevel,
z: model.z,
origin: this._origin,
rotation: this._rotation,
silent: !draw,
style: {
x: model.point.x,
y: model.point.y,
fontWeight: 'normal',
textBackgroundColor: backGroundColor,
fontSize: model.fontSize,
fontFamily: model.font,
text: textStyle.textValue || textStyle.value || '',
textLineHeight: model.fontSize+4,
textFill: model.fontColor,
textPadding: [4, 4],
textAlign: textStyle.textAlign,
textVerticalAlign: 'middle'
}
});
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
getTextStyle(model) {
const pattern = /\{<(?<textAlign>\w+)>\}\{<(?<textVerticalAlign>\w+)>\}(?<textValue>(.|\n)*)|(?<value>(.|\n)*)/;
const groups = (pattern.exec(model.name)||{}).groups||{};
return groups;
}
getTextBgColor(model) {
const pattern = /\{<(?<active>\w+)>\}(?<string>(.|\n)*)/;
const groups = (pattern.exec(model.backGroundColor)||{}).groups||{};
return groups.active == 'image'
? { image: `${process.env.VUE_APP_BASE_RESOURCE_URL}${groups.string}` }
: groups.active == 'color'
? groups.string
: model.backGroundColor;
}
setShape(model) {
if (this._elMap.text) {
this._origin = [model.point.x, model.point.y];
this._elMap.text.attr('origin', this._origin);
this._elMap.text.setStyle({
x: model.point.x,
y: model.point.y
});
}
}
setState(model) {
}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.text && level) {
level.addHover(this._elMap.text, {
opacity: style.maskOpacity,
textBackgroundColor: color.lift(style.textHover2Color, style.liftLevel)
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if (this._elMap.text && level) {
level.removeHover(this._elMap.text);
}
}
getViewTipsPoint() {}
}

172
src/iscs_new/package/panel/Warning/index.js
View File

@ -1,172 +0,0 @@
import RadialGradient from 'zrender/src/graphic/RadialGradient';
import * as graphic from '../../../graph/graphic';
import * as color from 'zrender/src/tool/color';
import panelType from '../../../constant/panelType';
import ConstConfig from '@/scripts/ConstConfig';
export default class Warning extends graphic.Group {
constructor(painter, shape, state) {
super();
this._code = shape.model.code;
this._type = shape.model._type;
this._shape = shape;
this._state = state;
this._painter = painter;
this._state = state;
this._elMap = {
circle: null
};
this.create();
this.on('mouseover', this.mouseover, this);
this.on('mouseout', this.mouseout, this);
}
mouseover(e) {
const model = this._shape.model;
if (this._shape.draw) {
this.doActive(this.__zr);
} else if (model.description) {
this._painter.$tipsHandle.trigger('show', {
x: e.offsetX,
y: e.offsetY,
text: model.description,
target: e.target
});
}
}
mouseout(e) {
const map = this._painter.$map;
if (this._shape.draw && !map.isHover(this._code)) {
this.doInactive(this.__zr);
} else {
this._painter.$tipsHandle.trigger('hide');
}
}
create() {
const model = this._shape.model;
const style = this._shape.style;
const distance = 8;
this._elMap.circle = new graphic.Circle({
zlevel: model.zlevel,
z: model.z,
shape: {
cx: model.point.x,
cy: model.point.y,
r: model.radius||10
},
style: {
lineWidth: style[panelType.Warning].circle.lineWidth,
stroke: style[panelType.Warning].circle.stroke,
fill: new RadialGradient(0.5, 0.5, 0.5, [
{offset: 0, color: '#eeeeee'},
{offset: 1, color: '#666666'}
])
}
});
const signX = ConstConfig.ConstMap.LocationMode.Left.value == model.showPosition
? -1
: ConstConfig.ConstMap.LocationMode.Right.value == model.showPosition
? 1
: 0;
const signY = ConstConfig.ConstMap.LocationMode.Top.value == model.showPosition
? -1
: ConstConfig.ConstMap.LocationMode.Bottom.value == model.showPosition
? 1
: 0;
this._elMap.text = new graphic.Text({
zlevel: model.zlevel,
z: model.z,
style: {
x: model.point.x + signX*(model.radius+distance),
y: model.point.y + signY*(model.radius+distance*2),
fontFamily: style.fontFamily,
fontWeight: style[panelType.Warning].text.fontWeight,
fontSize: style[panelType.Warning].text.fontSize,
textFill: style[panelType.Warning].text.textFill,
textVerticalAlign: 'middle',
text: model.description,
textAlign: ConstConfig.ConstMap.LocationMode.Left.value == model.showPosition
? 'right'
: ConstConfig.ConstMap.LocationMode.Right.value == model.showPosition
? 'left'
: 'center'
}
});
model.textShow? this._elMap.text.show(): this._elMap.text.hide();
this.setState(model);
Object.values(this._elMap).forEach(elem => { elem && elem instanceof Array? elem.forEach(el => this.add(el)): this.add(elem); });
}
setShape(model) {
if (this._elMap.circle) {
this._elMap.circle.setShape({
cx: model.point.x,
cy: model.point.y
});
}
if (this._elMap.text) {
const distance = 8;
const signX = ConstConfig.ConstMap.LocationMode.Left.value == model.showPosition
? -1
: ConstConfig.ConstMap.LocationMode.Right.value == model.showPosition
? 1
: 0;
const signY = ConstConfig.ConstMap.LocationMode.Top.value == model.showPosition
? -1
: ConstConfig.ConstMap.LocationMode.Bottom.value == model.showPosition
? 1
: 0;
this._elMap.text.setStyle({
x: model.point.x + signX*(model.radius+distance),
y: model.point.y + signY*(model.radius+distance*2)
});
}
}
setState(model) {
}
dragging(e) {
const model = this._shape.model;
model.point.x += e.dx;
model.point.y += e.dy;
this.setShape(model);
}
doActive(zr) {
const style = this._shape.style;
const level = zr||this.__zr;
if (this._elMap.circle && level) {
level.addHover(this._elMap.circle, {
opacity: style.maskOpacity,
fill: color.lift(style.graphHover2Color, style.liftLevel)
});
}
}
doInactive(zr) {
const level = zr||this.__zr;
if (this._elMap.circle &&level) {
level.removeHover(this._elMap.circle);
}
}
getViewTipsPoint() {
const model = this._shape.model;
return {
x: model.point.x,
y: model.point.y
};
}
}

29
src/iscs_new/package/panel/index.js
View File

@ -1,29 +0,0 @@
import panelType from '../../constant/panelType';
import Text2 from './Text/index';
import Table from './Table/index';
import LinePipe from './LinePipe/index';
import Resource from './Resource/index';
import Measure from './Measure/index';
import Warning from './Warning/index';
import Switching from './Switching/index';
import Popup from './Popup/index';
import ProgramControl from './ProgramControl/index';
import Pid from './Pid/index';
/** 图库*/
const mapShape = {};
mapShape[panelType.Text] = Text2;
mapShape[panelType.Table] = Table;
mapShape[panelType.LinePipe] = LinePipe;
mapShape[panelType.Resource] = Resource;
mapShape[panelType.Measure] = Measure;
mapShape[panelType.Warning] = Warning;
mapShape[panelType.Switching] = Switching;
mapShape[panelType.Popup] = Popup;
mapShape[panelType.ProgramControl] = ProgramControl;
mapShape[panelType.Pid] = Pid;
export default mapShape;

16
src/iscs_new/parser/index.js
View File

@ -1,21 +1,15 @@
import * as parserGraph from './parser-graph.js'; import * as parserGraph from './parser-graph.js';
import * as parserResource from './parser-resource.js'; import * as parserResource from './parser-resource.js';
import * as parserPanel from './parser-panel.js';
export const ParserType = { export const ParserType = {
Graph: { name: '绘图', value: 'Graph' }, Compose: 'Compose',
Data: { name: '数据', value: 'Data' }, Element: 'Element'
Panel: { name: '面板', value: 'Panel'},
Resource: { name: '资源', value: 'Resource'}
}; };
export function parserFactory(type) { export function createShapeFactory(type) {
switch (type) { switch (type) {
case ParserType.Data.value: case ParserType.Compose : return Compose;
case ParserType.Graph.value : return parserGraph; case ParserTyoe.Element : return Element;
case ParserType.Resource.value: return parserResource;
case ParserType.Panel.value: return parserPanel;
} }
return parserGraph; return parserGraph;
} }

195
src/iscs_new/parser/parser-panel.js
View File

@ -1,195 +0,0 @@
import * as zrUtil from 'zrender/src/core/util';
import * as utils from '../utils/utils';
import panelType from '../constant/panelType';
import panelRender from '../constant/panelRender';
import panelStyle from '../config/panelStyle';
// 创建一个Shape结构
export function newShape(entity, type, model) {
return { model: Object.assign(model, panelRender[type], {entity}), style: panelStyle, instance: null, hover: null, dragging: false, draw: false };
}
// 解析绘图原始数据
export function parse(state, data, isDraw) {
const mapLink = state.mapLink;
const mapEntity = state.mapEntity;
const mapShape = {};
try {
if (data) {
// 文字
zrUtil.each(data.textList||[], el => {
const entity = { type: 'Text', data: {}};
mapShape[el.code] = newShape(entity, panelType.Text, el);
}, this);
// 按钮
zrUtil.each(data.buttonList||[], el => {
const entity = { type: 'Button', data: {}};
mapShape[el.code] = newShape(entity, panelType.Button, el);
}, this);
// 表
zrUtil.each(data.tableList||[], el => {
const entity = { type: 'Table', data: {}};
mapShape[el.code] = newShape(entity, panelType.Table, el);
}, this);
// 资源
zrUtil.each(data.resourceList||[], el => {
const link = utils.getLinkByModel(mapLink, {...el, _type: panelType.Resource})||{};
const entity = isDraw
? mapEntity[link.code]||{}
: mapEntity[link.code] = { code: link.code, type: link.type, data: {}};
mapShape[el.code] = newShape(entity, panelType.Resource, el);
}, this);
// 管线
zrUtil.each(data.linePipeList||[], el => {
const link = utils.getLinkByModel(mapLink, {...el, _type: panelType.LinePipe})||{};
const entity = isDraw
? mapEntity[link.code]||{}
: mapEntity[link.code] = { code: link.code, type: 'Pipe', data: {}};
mapShape[el.code] = newShape(entity, panelType.LinePipe, el);
}, this);
// 计量
zrUtil.each(data.measureList||[], el => {
const entity = { type: panelType.Measure, data: {}};
mapShape[el.code] = newShape(entity, panelType.Measure, el);
}, this);
// 报警
zrUtil.each(data.warningList||[], el => {
const entity = { type: panelType.Warning, data: {}};
mapShape[el.code] = newShape(entity, panelType.Warning, el);
}, this);
// 投切按钮
zrUtil.each(data.switchingList||[], el => {
const entity = { type: panelType.Switching, data: {}};
mapShape[el.code] = newShape(entity, panelType.Switching, el);
}, this);
// 弹窗按钮
zrUtil.each(data.popupList||[], el => {
const entity = { type: panelType.Popup, data: {}};
mapShape[el.code] = newShape(entity, panelType.Popup, el);
}, this);
// 程制按钮
zrUtil.each(data.programControlList||[], el => {
const entity = { type: panelType.ProgramControl, data: {}};
mapShape[el.code] = newShape(entity, panelType.ProgramControl, el);
}, this);
// Pid按钮
zrUtil.each(data.pidList||[], el => {
const entity = { type: panelType.Pid, data: {}};
mapShape[el.code] = newShape(entity, panelType.Pid, el);
}, this);
}
} catch (error) {
console.error('[ERROR] ', error);
}
return mapShape;
}
// 分析依赖关系
export function analysis (state) {
const mapLink = state.mapLink||{};
const mapEntity = state.mapEntity||{};
const mapShape = state.mapShape||{};
const mapDependency = {};
function push(set, model) {
set.add(model.code);
}
function complateSelf(model, entity) {
if (entity &&
entity.code) {
let dependency = mapDependency[entity.code];
if (!dependency) dependency = mapDependency[entity.code] = {};
if (!dependency['Self']) dependency['Self'] = new Set();
push(dependency['Self'], model);
}
}
function complateDependency(model, entity) {
if (entity &&
entity.code) {
let dependency = mapDependency[entity.code];
if (!dependency) dependency = mapDependency[entity.code] = {};
if (!dependency[model._type]) dependency[model._type] = new Set();
push(dependency[model._type], model);
}
}
try {
Object.values(mapShape).forEach(({model}) => {
const link = utils.getLinkByModel(mapLink, model)||{};
const entity = utils.getEntityByModel(mapEntity, mapLink, model)||{};
if (mapEntity[link.code] && !link.hasOwnProperty('prop')) {
complateSelf(model, entity);
}
if ([panelType.Resource].includes(model._type)) {
const attrList = entity.attrList;
const attrObj = utils.getObjInListBySign(attrList, 'deviceCode');
if (attrObj && attrObj.value) {
const entity = mapEntity[attrObj.value]||{};
complateDependency(model, entity);
}
} else if (link.code && link.hasOwnProperty('prop') ) {
const entity = mapEntity[link.code]||{};
complateDependency(model, entity);
}
});
} catch (error) {
console.error(`[ERROR] `, error);
}
return mapDependency;
}
// 更新绘图原始组列表数据
export function update2List(model, map, name) {
const list = map[name];
if (list && list instanceof Array) {
const i = list.findIndex(elem => { return elem.code == model.code; });
if (model._dispose) {
i >= 0 && list.splice(i, 1);
} else if (!list[i]) {
list.push(model);
} else {
Object.assign(list[i], model);
}
} else {
map[name] = [model];
}
}
// 更新绘图的数据
export function updateData(state, model) {
const map = state.map;
if (map && model) {
switch (model._type) {
case panelType.Text: update2List(model, map, 'textList'); break;
case panelType.Button: update2List(model, map, 'buttonList'); break;
case panelType.Table: update2List(model, map, 'tableList'); break;
case panelType.Resource: update2List(model, map, 'resourceList'); break;
case panelType.LinePipe: update2List(model, map, 'linePipeList'); break;
case panelType.Measure: update2List(model, map, 'measureList'); break;
case panelType.Warning: update2List(model, map, 'warningList'); break;
case panelType.Switching: update2List(model, map, 'switchingList'); break;
case panelType.Popup: update2List(model, map, 'popupList'); break;
case panelType.ProgramControl: update2List(model, map, 'programControlList'); break;
case panelType.Pid: update2List(model, map, 'pidList'); break;
}
}
}

123
src/iscs_new/parser/parser-resource.js
View File

@ -1,123 +0,0 @@
import * as zrUtil from 'zrender/src/core/util';
import Graphic from '../package';
import * as utils from '../utils/utils';
import panelType from '../constant/panelType';
import resourceStyle from '../config/resourceStyle';
import resourceType from '../constant/resourceType';
import resourceRender from '../constant/resourceRender';
import Vue from 'vue';
// 创建一个Shape结构
export function newShape(entity, type, model) {
return { model: Object.assign(model, resourceRender[type], {entity}), style: resourceStyle, instance: null, hover: null, dragging: false, draw: false };
}
// 创建一个图形
export function newGraph(type, model, base) {
const clonedModel = utils.deepClone(model);
clonedModel.point.x += base.point.x;
clonedModel.point.y += base.point.y;
clonedModel.origin = base.origin;
clonedModel.rotation = base.rotation;
clonedModel.scale = base.scale;
clonedModel.parentTag = base.parentTag;
clonedModel.layer = base.layer+10;
clonedModel.attrList = base.attrList;
clonedModel.dialog = base.dialog;
const builder = Graphic.getBuilder(type); // 根据 type 绘制 面板，资源，画面对应的 instance
return builder(Vue.prototype.$map.getPainter(), newShape({}, type, clonedModel), {is: true});
}
export function parse(state, data, isDraw) {
const mapDevice = {};
try {
if (data) {
if (!data.background) {
data.background = { code: utils.getUID('Resource'), url: '', width: 200, height: 200, point: { x: 0, y: 0 } };
}
mapDevice[data.background.code] = newShape({}, resourceType.Background, Object.assign(data.background, {scale: [1, 1]}) );
zrUtil.each(data.buttonList||[], elem => {
mapDevice[elem.code] = newShape({}, resourceType.Button, Object.assign(elem, {scale: [1, 1]}));
}, this);
zrUtil.each(data.displayList||[], elem => {
mapDevice[elem.code] = newShape({}, resourceType.Display, Object.assign(elem, {scale: [1, 1]}));
}, this);
zrUtil.each(data.pilotLampList||[], elem => {
mapDevice[elem.code] = newShape({}, resourceType.PilotLamp, Object.assign(elem, {scale: [1, 1]}));
}, this);
zrUtil.each(data.textList||[], elem => {
mapDevice[elem.code] = newShape({}, resourceType.Text, Object.assign(elem, {scale: [1, 1]}));
}, this);
}
} catch (error) {
console.log(error);
}
return mapDevice;
}
export function generator(data, base, draw) {
const elMap = {};
try {
if (data) {
if (data.background) {
data.background._silent = true;
elMap[resourceType.Background] = newGraph(resourceType.Background, data.background, base, draw);
}
elMap[resourceType.Button] = [];
zrUtil.each(data.buttonList||[], elem => {
elMap[resourceType.Button].push(newGraph(resourceType.Button, elem, base, draw));
}, this);
elMap[resourceType.Display] = [];
zrUtil.each(data.displayList||[], elem => {
elMap[resourceType.Display].push(newGraph(resourceType.Display, elem, base, draw));
}, this);
elMap[resourceType.PilotLamp] = [];
zrUtil.each(data.pilotLampList||[], elem => {
elMap[resourceType.PilotLamp].push(newGraph(resourceType.PilotLamp, elem, base, draw));
}, this);
}
} catch (error) {
console.log(error);
}
return elMap;
}
export function update2List(model, map, name) {
const list = map[name];
if (list && list instanceof Array) {
const i = list.findIndex(elem => { return elem.code == model.code; });
if (model._dispose) {
i >= 0 && list.splice(i, 1);
} else if (!list[i]) {
list.push(model);
} else {
Object.assign(list[i], model);
}
} else {
map[name] = [model];
}
}
export function updateData(state, model) {
const map = state.map;
if (map && model) {
switch (model._type) {
case resourceType[panelType.Resource].Button: update2List(model, map, 'buttonList'); break;
case resourceType[panelType.Resource].PilotLamp: update2List(model, map, 'pilotLampList'); break;
case resourceType[panelType.Resource].Display: update2List(model, map, 'displayList'); break;
}
}
}

180
src/iscs_new/subMap/subMap.js
View File

@ -1,180 +0,0 @@
import store from '@/store';
import zrender from 'zrender';
import * as utils from '../utils/utils';
import Eventful from 'zrender/src/mixin/Eventful';
import resourceType from '../constant/resourceType';
import ConstConfig from '@/scripts/ConstConfig';
import { generator } from '../parser/parser-resource';
const renderer = 'canvas';
const devicePixelRatio = 1;
export default class SubMap extends Eventful {
constructor(map) {
super();
this.$map = map;
this.storageMap = {};
this.cacheMap = {};
}
__updateDevice(list) {
list.forEach(el => {
const storage = this.storageMap[el.code];
const cache = (storage || {}).cache;
if (storage && cache) {
cache.update(utils.initModelState(storage.model, {}));
}
});
}
register(opts) {
if (opts.dom) {
const width = opts.dom.clientWidth;
const height = opts.dom.clientHeight;
const canvasId = utils.getUID('canvas_');
const zr = zrender.init(opts.dom, { renderer, devicePixelRatio, width, height, ...utils.deepClone(opts.config || {}) });
const cache = { zr, update: null, layer: null };
opts.dom.setAttribute('canvasId', canvasId);
zr.dom.setAttribute('tabIndex', -1);
this.cacheMap[canvasId] = cache;
return cache;
}
}
appendDevice(cache, model, data) {
const x = 80;
const y = 20;
const layer = new zrender.Group({ name: '__shapes__' });
const elMap = generator(data.graphData||{}, { ...model, point: { x, y }, scale: 1, dialog: true }, false);
cache.zr.clear();
cache.zr.add(layer);
cache.layer = layer;
cache.update = function (state) {
if (model && elMap && state) {
const els = Object.values(elMap);
utils.setModelState(model, state);
(function setState(el) {
if (el instanceof Array) {
el.forEach(it => { setState(it); });
} else {
el.setState(model);
el.dirty();
}
})(els);
}
};
Object.values(elMap).forEach(el => {
if (el instanceof Array) {
el.forEach(it => { layer.add(it); });
} else if (el instanceof Object) {
layer.add(el);
}
});
layer.dirty();
this.on(`update-${model.code}`, cache.update);
this.bindEvent(elMap, model);
this.storageMap[model.code] = { model, elMap, cache };
cache.update(utils.initModelState(model, {}));
}
bindEvent(elMap, model) {
const buttonList = elMap[resourceType.Button] || [];
const displayList = elMap[resourceType.Display] || [];
const attrObj = utils.getObjFormListBySign(model.attrList, 'deviceCode') || {};
if (attrObj.val) {
const related = store.getters['map/getDeviceByCode'](attrObj.val);
displayList.forEach(display => {
buttonList.forEach(button => {
button.on('click', e => {
const control = model.control || {};
if (!control.disabled) {
const operation = {
type: ConstConfig.ConstMap.TipsTrigger.SubMap.value,
code: `${button._val}`,
params: `${model.code}`
};
store.dispatch('training/next', operation).then(({ valid }) => {
if (valid) {
store.dispatch('menuOperation/handleBreakFlag', { break: true });
display.execute(button._device.model.event, { ...e, target: button });
display.dirty();
}
});
}
});
});
display.on('updaterelated', state => {
if (related) {
utils.setModelState(related.model, state);
store.dispatch('training/updateState', [related.model]);
}
});
display.on('updateself', state => {
const device = store.getters['map/getDeviceByCode'](model.code);
if (device.instance) {
utils.setModelState(model, state);
device.instance.setState(model);
}
});
});
}
}
traversed(map, cb) {
Object.values(map).forEach(el => {
if (el) {
if (el instanceof Array) {
this.traversed(el, cb);
} else {
cb(el);
}
}
});
}
dispose(cache) {
if (cache && cache.zr) {
const canvasId = cache.zr.dom.canvasId;
delete this.cacheMap[canvasId];
this.off('update', cache.update);
cache.update = null;
cache.zr.dispose();
cache.zr = null;
}
}
getViewTipsPoint(step) {
const storage = this.storageMap[step.params];
if (storage) {
let point = null;
const dom = storage.cache.zr.dom;
this.traversed(storage.elMap, el => {
if (el._val == step.code) {
point = el.getViewTipsPoint(utils.getDomOffset(dom));
}
});
return point;
}
}
}

1
src/iscs_new/utils/container/Storage.js
View File

@ -22,7 +22,6 @@ export default class Storage {
} }
delete(code) { delete(code) {
// debugger;
if (this.has(code)) { if (this.has(code)) {
this.map.delete(code); this.map.delete(code);
this.lst.delete(code); this.lst.delete(code);

29
src/iscs_new/utils/transform.js
View File

@ -1,29 +0,0 @@
import * as matrix from 'zrender/src/core/matrix';
// 对图形进行scale/rotation/position变化
export function transformed(shape, {scale, rotation, position}) {
let transform = matrix.create();
if (scale) {
transform = matrix.scale(matrix.create(), transform, scale);
}
if (rotation) {
transform = matrix.rotate(matrix.create(), transform, rotation);
}
if (position) {
transform = matrix.translate(matrix.create(), transform, position);
}
if (shape) {
if (origin) {
shape.attr(origin, origin);
}
shape.transform = transform;
shape.decomposeTransform();
}
return shape;
}

171
src/iscs_new/utils/utils.js
View File

@ -1,6 +1,5 @@
import * as matrix from 'zrender/src/core/matrix'; import * as matrix from 'zrender/src/core/matrix';
import * as color from 'zrender/src/tool/color'; import * as color from 'zrender/src/tool/color';
import BoundingRect from 'zrender/src/core/BoundingRect';
var base = 0; var base = 0;
@ -9,118 +8,6 @@ export function getUID(type) {
return [(type || ''), base++, Math.random().toFixed(5)].join('_'); return [(type || ''), base++, Math.random().toFixed(5)].join('_');
} }
// 判断一个图形是否是svg
export function shapeIsSvg(shape) {
return shape.type == 'Svg';
}
// 判断一个url是否svg路径
export function urlIsSvg(url) {
return !/.png$/i.test(url);
}
export function isExistFile(url, draw) {
if (draw) {
try {
let xmlHttp;
if (window.ActiveXObject) {
xmlHttp = new window.ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
xmlHttp = new window.XMLHttpRequest();
}
xmlHttp.open('get', url, false);
xmlHttp.send();
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) return true;
else if (xmlHttp.status == 404) return false;
else return false;
}
return false;
} catch (e) {
return false;
}
}
return true;
}
// 根据url重新获取url路径或者Svg内容
export function getResourceUrl(relatedUrl) {
const url = `${process.env.VUE_APP_BASE_RESOURCE_URL}${relatedUrl}`;
const isSvg = /.svg$/i.test(url);
if (isSvg) {
let xmlHttp;
if (window.ActiveXObject) {
xmlHttp = new window.ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
xmlHttp = new window.XMLHttpRequest();
}
xmlHttp.open('get', url, false);
xmlHttp.send();
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200) return xmlHttp.response.replace(/.*<path\s*d="(.*)"\s*\/>.*/, '$1');
}
}
return url;
}
export function getObjFormListBySign(list, sign) {
if (list && list.length) {
return list[list.findIndex(el => { return el.sign == sign; })];
}
}
export function initModelState(model, state, blocks=['data', 'contorl']) {
blocks.forEach(block => {
state[block] = {...model[block]||{}};
});
return state;
}
export function exBoundingRect(rt, padding) {
const rect = new BoundingRect(rt.x, rt.y, rt.width, rt.height);
rect.x -= padding;
rect.y -= padding;
rect.width += padding*2;
rect.height += padding*2;
return rect;
}
// 判断Url路径是否存在
export function isExistUrl(relatedUrl, draw) {
if (draw) {
try {
let xmlHttp;
const url = `${process.env.VUE_APP_BASE_RESOURCE_URL}${relatedUrl}`;
if (window.ActiveXObject) {
xmlHttp = new window.ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
xmlHttp = new window.XMLHttpRequest();
}
xmlHttp.open('get', url, false);
xmlHttp.send();
if (xmlHttp.readyState==4) {
if (xmlHttp.status==200) return true;
else if (xmlHttp.status==404) return false;
else return false;
}
return false;
} catch (e) {
return false;
}
}
return true;
}
// clone一个对象 // clone一个对象
export function deepClone(obj) { export function deepClone(obj) {
var tag = Array.isArray(obj) ? [] : {}; var tag = Array.isArray(obj) ? [] : {};
@ -145,11 +32,11 @@ export function deepAssign(tag, obj) {
} }
// 拷贝对象指定层次的引用 // 拷贝对象指定层次的引用
export function assignByDeep(source, target, deep) { export function assignByDepth(source, target, depth) {
Object.keys(target).forEach(key => { Object.keys(target).forEach(key => {
if (deep) { if (depth) {
Object.keys(target).forEach(key => { Object.keys(target).forEach(key => {
source[key] = assignByDeep(source[key]||{}, target[key]||{}, deep-1); source[key] = assignByDepth(source[key]||{}, target[key]||{}, depth-1);
}); });
} else { } else {
source[key] = target[key]; source[key] = target[key];
@ -202,58 +89,6 @@ export function calculateDCenter(viewRect, bound) {
return { dx, dy }; return { dx, dy };
} }
export function setModelState(model, state) {
Object.keys(state).forEach(block => {
model[block] = {...model[block]||{}, ...state[block]};
});
return model;
}
// 更新point指定x/y的偏移值
export function updatePointDi(point, prop, di) {
let list = point;
if (!(point instanceof Array)) {
list = [point];
}
if (list && list.length) {
list.forEach(el => {
if (el.point) {
el.point[prop] += di;
}
if (el.points) {
el.points.forEach(point => {
point[prop] += di;
});
}
});
}
}
// 通过sceneType获取资源画面
export function getSceneBySceneType(resource, sceneType) {
return (resource.sceneMap||{})[sceneType]||{};
}
// 通过sceneType获取绘图数据块
export function getBlockBySceneType(model, sceneType) {
const index = model.sceneTypes.findIndex(el => { return el == sceneType; });
return index >= 0? model.graphList[index]||null: null;
}
// 在list中通过指定sign获取节点obj
export function getObjInListBySign(list, sign) {
if (list && list.length) {
return list[list.findIndex(el => { return el.sign == sign; })];
}
}
// 通过Model获取link关系
export function getLinkByModel(mapLink, model) {
const type = model._type == 'measure' ? 'measure' : 'device'; // 转换key
return mapLink ? (mapLink[type]||{})[model.code] : {};
}
// 通过Model获取实体 // 通过Model获取实体
export function getEntityByModel(mapEntity, mapLink, model) { export function getEntityByModel(mapEntity, mapLink, model) {
const link = getLinkByModel(mapLink, model)||{}; const link = getLinkByModel(mapLink, model)||{};