修改代码

This commit is contained in:
ival 2019-07-22 15:43:42 +08:00
parent e9b66e1cea
commit 2ca2c0f193
6 changed files with 65 additions and 82 deletions

View File

@ -9,7 +9,7 @@ import deviceType from './constant/deviceType';
import { parser, deviceFactory } from './utils/parser'; import { parser, deviceFactory } from './utils/parser';
const renderer = 'canvas'; const renderer = 'canvas';
const devicePixelRatio = 2; const devicePixelRatio = 1;
class Jmap { class Jmap {
constructor(opts) { constructor(opts) {

View File

@ -14,7 +14,7 @@ class ESigName extends Group {
_subType: model._subType, _subType: model._subType,
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
silent: model.silent || false, silent: model.silent,
style: { style: {
x: model.x, x: model.x,
y: model.y, y: model.y,

View File

@ -9,7 +9,6 @@ import ESigRoute from './ESigRoute';
import ESigButton from './ESigButton'; import ESigButton from './ESigButton';
import ESigDelay from './ESigDelay'; import ESigDelay from './ESigDelay';
import ESigName from './ESigName'; import ESigName from './ESigName';
// import Text from 'zrender/src/graphic/Text';
import Group from 'zrender/src/container/Group'; import Group from 'zrender/src/container/Group';
class Signal extends Group { class Signal extends Group {
@ -25,6 +24,7 @@ class Signal extends Group {
this.zlevel = zlevel; this.zlevel = zlevel;
this.z = 1; this.z = 1;
this.create(); this.create();
this.transformRotation(this);
this.setState(state); this.setState(state);
} }
@ -70,12 +70,13 @@ class Signal extends Group {
this.sigName = new ESigName({ this.sigName = new ESigName({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
silent: false,
style: style, style: style,
x: sigNameX, x: sigNameX,
y: sigNameY, y: sigNameY,
text: model.name, text: model.name,
textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`, textFont: `bold ${style.Signal.signalTextFontSize} px ${style.textFontFormat}`,
textFill: style.Signal.sigTextGreen, textFill: style.Signal.signalTextGreen,
textAlign: 'middle', textAlign: 'middle',
textVerticalAlign: posit == 1 ? 'top' : 'bottom' textVerticalAlign: posit == 1 ? 'top' : 'bottom'
}); });
@ -148,6 +149,21 @@ class Signal extends Group {
// this.add(this.sigButton); // this.add(this.sigButton);
} }
// 整体旋转信号灯
transformRotation(device) {
if (this.model.rotate) {
device.eachChild(item => {
if (item instanceof Group) {
this.transformRotation(item);
} else {
item.origin = [this.model.position.x, this.model.position.y];
item.rotation = -Math.PI / 180 * Number(this.model.rotate);
item.dirty();
}
});
}
}
// 关闭 // 关闭
close() { close() {
if (this.count === 1) { if (this.count === 1) {

View File

@ -11,23 +11,6 @@ class ESwCore extends Group {
_create() { _create() {
const model = this.model; const model = this.model;
const style = this.model.style; const style = this.model.style;
this.line = new Line({
zlevel: model.zlevel,
z: model.z,
silent: true,
shape: {
x1: model.intersectionX - model.coverLength,
y1: model.intersectionY,
x2: model.intersectionX + model.coverLength,
y2: model.intersectionY
},
style: {
lineWidth: model.switchWidth,
stroke: style.backgroundColor
}
});
this.skewLine = new Line({ this.skewLine = new Line({
zlevel: model.zlevel, zlevel: model.zlevel,
z: model.z, z: model.z,
@ -36,10 +19,26 @@ class ESwCore extends Group {
x1: model.intersectionX, x1: model.intersectionX,
y1: model.intersectionY, y1: model.intersectionY,
x2: model.intersectionX + model.triangle.drictx * model.triangle.getCotRate() * model.coverLength, x2: model.intersectionX + model.triangle.drictx * model.triangle.getCotRate() * model.coverLength,
y2: model.intersectiony + model.triangle.dricty * model.coverLength y2: model.intersectionY + model.triangle.dricty * model.coverLength
}, },
style: { style: {
lineWidth: model.switchWidth, lineWidth: model.lineWidth,
stroke: style.backgroundColor
}
});
this.line = new Line({
zlevel: model.zlevel,
z: model.z,
silent: true,
shape: {
x1: model.intersectionX - model.triangle.getCotRate() * model.coverLength,
y1: model.intersectionY,
x2: model.intersectionX + model.triangle.getCotRate() * model.coverLength,
y2: model.intersectionY
},
style: {
lineWidth: model.lineWidth,
stroke: style.backgroundColor stroke: style.backgroundColor
} }
}); });

View File

@ -3,10 +3,11 @@
*/ */
import Line from 'zrender/src/graphic/shape/Line'; import Line from 'zrender/src/graphic/shape/Line';
import Group from 'zrender/src/container/Group'; import Group from 'zrender/src/container/Group';
import Polygon from 'zrender/src/graphic/shape/Polygon';
import JTriangle from '../../utils/JTriangle'; import JTriangle from '../../utils/JTriangle';
import ESwName from './ESwName.js'; import ESwName from './ESwName.js';
import ESwCore from './ESwCore.js'; import ESwCore from './ESwCore.js';
import ESwLocal from './ESwLocal.js';
import ESwLnversion from './ESwLnversion';
export default class Switch extends Group { export default class Switch extends Group {
constructor({ _code, _type, zlevel, model, state }, style, jmap) { constructor({ _code, _type, zlevel, model, state }, style, jmap) {
@ -55,74 +56,45 @@ export default class Switch extends Group {
const point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]]; const point2 = [point1[0] + directx * switchWidth / this.triangle.getSinRate(), point1[1]];
const point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding]; const point3 = [point2[0] + directx * this.triangle.getCotRate() * swPadding, point2[1] + directy * swPadding];
const point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)]; const point4 = [point3[0] + direct * this.triangle.getSin(switchWidth), point3[1] - direct * this.triangle.getCos(switchWidth)];
this.locShelter = new Polygon({ this.locShelter = new ESwLocal({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
shape: { style: style,
points: [ shelterPoints: [point1, point2, point3, point4],
point1, point2, point3, point4
]
},
style: {
fill: style.backgroundColor
},
cursor: 'pointer', cursor: 'pointer',
triangle: this.triangle,
onmouseover: () => { this.name.getArrowText().show(); }, onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); } onmouseout: () => { this.name.getArrowText().hide(); }
}); });
const lpx = Math.abs(this.triangle.getCos(1));
this.locShelter.position = [directx * lpx, -directy * 0.2];
this.locShelter.show();
const slen = switchWidth / this.triangle.getSinRate(); const slen = switchWidth / this.triangle.getSinRate();
const rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth]; const rpoint1 = [model.intersection.x + directx * halfWidth, model.intersection.y - directy * halfWidth];
const rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]]; const rpoint2 = [rpoint1[0] + directx * (swPadding + switchWidth * this.triangle.getCotRate()), rpoint1[1]];
const rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth]; const rpoint3 = [rpoint2[0], rpoint2[1] + directy * switchWidth];
const rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)]; const rpoint4 = [rpoint1[0] + this.triangle.getCos(slen), rpoint1[1] + this.triangle.getSin(slen)];
this.relocShelter = new Polygon({
zlevel: this.zlevel,
z: this.z,
shape: {
points: [
rpoint1, rpoint2, rpoint3, rpoint4
]
},
style: {
fill: style.backgroundColor
},
cursor: 'pointer',
onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); }
});
const rpx = Math.abs(this.triangle.getCos(halfWidth)) + 0.2;
this.relocShelter.position = [-directx * rpx, -directy * 0.2];
this.relocShelter.hide();
const sinX = style.Section.sectionWidth / this.triangle.getSinRate();
const switchWidth1 = style.Section.sectionWidth / 2; const switchWidth1 = style.Section.sectionWidth / 2;
const width1 = switchWidth1 * this.triangle.getSinRate(); const width1 = switchWidth1 * this.triangle.getSinRate();
const height1 = switchWidth1 * this.triangle.getCosRate(); const height1 = switchWidth1 * this.triangle.getCosRate();
const width2 = (height1 + switchWidth1) / this.triangle.getTanRate(); const width2 = (height1 + switchWidth1) / this.triangle.getTanRate();
const width3 = sinX - width2 - width1; const width3 = (style.Section.sectionWidth / this.triangle.getSinRate()) - width2 - width1;
const switchPoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1]; const spoint1 = [model.intersection.x + directx * width3, model.intersection.y - directy * switchWidth1];
const switchPoint2 = [switchPoint1[0] - directx * (width2 + width1) - directx * width3, switchPoint1[1]]; const spoint2 = [spoint1[0] - directx * (width2 + width1) - directx * width3, spoint1[1]];
const switchPoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1]; const spoint3 = [model.intersection.x - directx * width3, model.intersection.y + directy * switchWidth1];
const switchPoint4 = [switchPoint1[0] + directx * (width2 + width1) - directx * width3, switchPoint3[1]]; const spoint4 = [spoint1[0] + directx * (width2 + width1) - directx * width3, spoint3[1]];
this.reserveSection = new Polygon({
this.relocShelter = new ESwLnversion({
zlevel: this.zlevel, zlevel: this.zlevel,
shape: { z: this.z,
points: [ style: style,
switchPoint1, switchPoint2, switchPoint3, switchPoint4 shelterPoints: [rpoint1, rpoint2, rpoint3, rpoint4],
] sectionPoints: [spoint1, spoint2, spoint3, spoint4],
},
style: {
fill: style.Section.sectionSpareColor
},
cursor: 'pointer', cursor: 'pointer',
halfWidth: halfWidth,
triangle: this.triangle,
onmouseover: () => { this.name.getArrowText().show(); }, onmouseover: () => { this.name.getArrowText().show(); },
onmouseout: () => { this.name.getArrowText().hide(); } onmouseout: () => { this.name.getArrowText().hide(); }
}); });
this.reserveSection.hide();
this.releaseBackground = new Line({ this.releaseBackground = new Line({
zlevel: this.zlevel, zlevel: this.zlevel,
@ -160,7 +132,6 @@ export default class Switch extends Group {
this.add(this.swCore); this.add(this.swCore);
this.add(this.locShelter); this.add(this.locShelter);
this.add(this.relocShelter); this.add(this.relocShelter);
this.add(this.reserveSection);
this.add(this.releaseBackground); this.add(this.releaseBackground);
this.add(this.name); this.add(this.name);
} }
@ -208,9 +179,8 @@ export default class Switch extends Group {
recover() { recover() {
this.setSwitchCoreColor(this.style.backgroundColor); this.setSwitchCoreColor(this.style.backgroundColor);
this.name.getNameText().stopAnimation(false); this.name.getNameText().stopAnimation(false);
this.reserveSection.stopAnimation(false);
this.swCore.stopAnimation(false); this.swCore.stopAnimation(false);
this.relocShelter.stopAnimation(false);
this.relocShelter.hide(); this.relocShelter.hide();
this.releaseBackground.hide(); this.releaseBackground.hide();
@ -234,7 +204,6 @@ export default class Switch extends Group {
this.setSwitchCoreInvisible(true); this.setSwitchCoreInvisible(true);
this.locShelter.show(); this.locShelter.show();
this.relocShelter.hide(); this.relocShelter.hide();
this.reserveSection.hide();
} }
/** 反位*/ /** 反位*/
@ -243,7 +212,6 @@ export default class Switch extends Group {
this.setSwitchCoreInvisible(true); this.setSwitchCoreInvisible(true);
this.locShelter.hide(); this.locShelter.hide();
this.relocShelter.show(); this.relocShelter.show();
this.reserveSection.show();
} }
/** 失去*/ /** 失去*/
@ -251,7 +219,6 @@ export default class Switch extends Group {
this.recover(); this.recover();
this.locShelter.hide(); this.locShelter.hide();
this.relocShelter.hide(); this.relocShelter.hide();
this.reserveSection.hide();
this.setSwitchCoreInvisible(false); this.setSwitchCoreInvisible(false);
nameFlicker && this.nameTextAnimation(); nameFlicker && this.nameTextAnimation();
} }
@ -294,10 +261,10 @@ export default class Switch extends Group {
switch (this.model.locateType) { switch (this.model.locateType) {
case '01': case '01':
this.releaseBackground.hide(); this.releaseBackground.hide();
this.setSectionState(this.release, 'stroke', this.model.sectionAstatus); this.setSectionState(this.relocShelter.getSection(), 'stroke', this.model.sectionAstatus);
break; break;
case '02': case '02':
this.reserveSection.animateStyle(true) this.relocShelter.getSection().animateStyle(true)
.when(1000, { fill: this.style.backgroundColor }) .when(1000, { fill: this.style.backgroundColor })
.start(); .start();
break; break;
@ -344,7 +311,8 @@ export default class Switch extends Group {
} }
setLocateType(state) { setLocateType(state) {
this.setSectionState(this.reserveSection, 'fill', this.model.sectionCstatus); state.locateType = '02';
this.setSectionState(this.relocShelter.getSection(), 'fill', this.model.sectionCstatus);
switch (state.locateType) { switch (state.locateType) {
case '01': case '01':
this.setLocationAction(); /** 定位*/ this.setLocationAction(); /** 定位*/

View File

@ -80,9 +80,9 @@ export function parser(data, jmap) {
}, this); }, this);
zrUtil.each(data.switchList || [], elem => { zrUtil.each(data.switchList || [], elem => {
const cnodeSection = mapDevice[elem.sectionACode]; const cnodeSection = elem['sectionA'] = mapDevice[elem.sectionACode];
const lnodeSection = mapDevice[elem.sectionBCode]; const lnodeSection = elem['sectionB'] = mapDevice[elem.sectionBCode];
const rnodeSection = mapDevice[elem.sectionCCode]; const rnodeSection = elem['sectionC'] =mapDevice[elem.sectionCCode];
if (cnodeSection && lnodeSection && rnodeSection) { if (cnodeSection && lnodeSection && rnodeSection) {
const cnode = mapDevice[cnodeSection.model.linkCode]; const cnode = mapDevice[cnodeSection.model.linkCode];
if (cnode && cnode.model.leftFdCode === lnodeSection.model.linkCode && cnode.model.leftSdCode === rnodeSection.model.linkCode) { if (cnode && cnode.model.leftFdCode === lnodeSection.model.linkCode && cnode.model.leftSdCode === rnodeSection.model.linkCode) {