desc: 增加section皮肤，图形渲染
This commit is contained in:
zyy
parent
ff58614606
commit
fec5d79341
@ -10,5 +10,12 @@ deviceState[deviceType.Link] = {
|
||||
State02: '02' // 02状态
|
||||
}
|
||||
};
|
||||
deviceState[deviceType.Section] = {
|
||||
status: {
|
||||
Default: '01', // 01默认状态
|
||||
State01: '01', // 01状态
|
||||
State02: '02' // 02状态
|
||||
}
|
||||
};
|
||||
|
||||
export default deviceState;
|
||||
|
||||
@ -9,6 +9,82 @@ const fuzhouSkin = {
|
||||
linkColor: '#a0a0a0',
|
||||
linkWidth: 6,
|
||||
linkTextColor: '#FFFFFF'
|
||||
},
|
||||
'Section': {
|
||||
// 区段 宽度
|
||||
sectionWidth: 5,
|
||||
|
||||
// 区段宽超出宽度
|
||||
sectionBeyondWidth: 1,
|
||||
|
||||
// 计轴 半径
|
||||
sectionAxleR: 3,
|
||||
|
||||
// 计轴和区段之间的距离 需要添加
|
||||
sectionAxleDistance: 5,
|
||||
|
||||
// 限速线的宽短
|
||||
sectionSpeedLimitLinewidth: 1,
|
||||
|
||||
// 限速线距离区段距离
|
||||
sectionSpeedLimitDistance: 5,
|
||||
|
||||
// 区段侵入颜色
|
||||
sectionInvadeColor: '#EF0C08',
|
||||
|
||||
// 限速线颜色
|
||||
sectionSpeedLimitColor: '#FFFF00',
|
||||
|
||||
// 区段计轴颜色
|
||||
sectionAxleColor: '#FFFFFF',
|
||||
|
||||
// 区段边界符颜色
|
||||
sectionSeparatorColor: '#3149C3',
|
||||
|
||||
// 区段空闲颜色
|
||||
sectionSpareColor: '#3F3F3F',
|
||||
|
||||
// 逻辑区段名称颜色
|
||||
sectionLogicalTextColor: '#FFFFFF',
|
||||
|
||||
// 区段通信车占用颜色
|
||||
sectionCommunicationOccupiedColor: '#FF329A',
|
||||
|
||||
// 区段非通讯车占用颜色
|
||||
sectionUnCommunicationOccupiedColor: '#FE0000',
|
||||
|
||||
// 区段路由锁定颜色
|
||||
sectionRouteLockColor: '#FFFFFF',
|
||||
|
||||
// 区段故障锁定颜色
|
||||
sectionFaultLockColor: '#9B4A0A',
|
||||
|
||||
// 区段未定义颜色
|
||||
sectionUndefinedColor: '#0071C1',
|
||||
|
||||
// 保护区段锁闭
|
||||
sectionProtectionSectionLockedColor: '#FEFF00',
|
||||
|
||||
// 区段计轴预复位
|
||||
sectionAxleResetColor: '#00FFFF',
|
||||
|
||||
// 区段封锁颜色
|
||||
sectionBlockColor: '#800080',
|
||||
|
||||
// 区段atc切除颜色
|
||||
sectionAtcExcisionColor: '#A0522D',
|
||||
|
||||
// 区段ats切除颜色
|
||||
sectionAtsExcisionColor: '#A0522D',
|
||||
|
||||
// 区段延时释放颜色
|
||||
sectionTimeReleaseColor: '#3F3F3F',
|
||||
|
||||
// 区段保护锁闭
|
||||
sectionProtectiveLockColor: '#FFFF00',
|
||||
|
||||
// 区段保护延时解锁
|
||||
sectionProtectiveTimeReleaseColor: '#0071C1'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -169,6 +169,7 @@ class Jmap {
|
||||
let prop = null;
|
||||
switch (type) {
|
||||
case deviceType.Link: prop = 'linkList'; break;
|
||||
case deviceType.Sction: prop = 'sectionList'; break;
|
||||
}
|
||||
|
||||
const list = this.data[prop];
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import deviceType from '../config/deviceType';
|
||||
import Link from './Link';
|
||||
import Section from './section';
|
||||
|
||||
/** 图库*/
|
||||
const mapShape = {};
|
||||
mapShape[deviceType.Link] = Link;
|
||||
mapShape[deviceType.Section] = Section;
|
||||
|
||||
function shapefactory(type, device, style) {
|
||||
const shape = mapShape[type];
|
||||
|
||||
929
src/jmap/shape/section.js
Normal file
929
src/jmap/shape/section.js
Normal file
@ -0,0 +1,929 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Polyline from 'zrender/src/graphic/shape/Polyline';
|
||||
import Circle from 'zrender/src/graphic/shape/Circle';
|
||||
import Line from 'zrender/src/graphic/shape/Line';
|
||||
import Text from 'zrender/src/graphic/Text';
|
||||
import JTriangle from '@/jmap/utils/JTriangle';
|
||||
import store from '@/store';
|
||||
|
||||
/** 计轴*/
|
||||
class SectionAxle extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = 5;
|
||||
this._create(model);
|
||||
}
|
||||
|
||||
_create(model) {
|
||||
if (model && model.theme && model.traingle) {
|
||||
const axleLength = 2 * model.theme.sectionAxleR;
|
||||
const positionx = model.point.x + model.drictx * (model.traingle.getCos(axleLength));
|
||||
const positiony = model.point.y + model.dricty * (model.traingle.getCos(axleLength));
|
||||
|
||||
this.line = new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
x1: positionx - model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength),
|
||||
y1: positiony + model.drictx * model.traingle.getSin(axleLength) - model.traingle.getSin(axleLength),
|
||||
x2: positionx + model.traingle.getCos(axleLength) - model.dricty * model.traingle.getSin(axleLength),
|
||||
y2: positiony + model.drictx * model.traingle.getSin(axleLength) + model.traingle.getSin(axleLength)
|
||||
},
|
||||
style: {
|
||||
GBaseLineWidth: 1,
|
||||
stroke: model.theme.sectionAxleColor
|
||||
}
|
||||
});
|
||||
this.axle = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
cx: positionx - model.dricty * model.traingle.getSin(axleLength),
|
||||
cy: positiony + model.drictx * model.traingle.getSin(axleLength),
|
||||
r: model.theme.sectionAxleR
|
||||
},
|
||||
style: {
|
||||
GBaseLineWidth: 1,
|
||||
stroke: model.theme.sectionAxleColor,
|
||||
fill: 'rgb(0,0,0,0)'
|
||||
}
|
||||
});
|
||||
|
||||
this.add(this.line);
|
||||
this.add(this.axle);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 分隔符*/
|
||||
class SectionSeparator extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = 6;
|
||||
this._create(model);
|
||||
}
|
||||
|
||||
_create(model) {
|
||||
if (model && model.theme) {
|
||||
this.partition = new Polyline({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
points: [
|
||||
[model.point.x, model.point.y],
|
||||
[model.point.x, model.point.y]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.theme.sectionWidth / 3,
|
||||
stroke: model.theme.sectionSeparatorColor
|
||||
}
|
||||
});
|
||||
|
||||
this.circle = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
shape: {
|
||||
cx: model.point.x,
|
||||
cy: model.point.y,
|
||||
r: 2 * model.theme.sectionWidth
|
||||
},
|
||||
style: {
|
||||
GBaseLineWidth: 1,
|
||||
stroke: 'red',
|
||||
fill: model.theme.transparentColor
|
||||
}
|
||||
});
|
||||
|
||||
this.add(this.partition);
|
||||
this.setType(model.sepType, model.borderBorderShow);
|
||||
}
|
||||
}
|
||||
|
||||
setType(type, show) {
|
||||
const model = this.model;
|
||||
if (model && model.theme && model.traingle) {
|
||||
this.remove(this.circle);
|
||||
if (type === '00') {
|
||||
this.partition.setShape('points', [
|
||||
[model.point.x, model.point.y],
|
||||
[model.point.x, model.point.y]
|
||||
]);
|
||||
} else if (type === '01') {
|
||||
this.partition.setShape('points', [
|
||||
[model.point.x, model.point.y - (model.theme.sectionWidth * 0.8)],
|
||||
[model.point.x, model.point.y + (model.theme.sectionWidth * 0.8)]
|
||||
]);
|
||||
} else if (type === '02') {
|
||||
this.partition.setShape('points', [
|
||||
[model.point.x + model.drict * (model.theme.sectionWidth), model.point.y - (model.theme.sectionWidth * 1.5)],
|
||||
[model.point.x, model.point.y - (model.theme.sectionWidth * 1.5)],
|
||||
[model.point.x, model.point.y + (model.theme.sectionWidth * 1.5)]
|
||||
]);
|
||||
} else if (type === '03') {
|
||||
this.partition.setShape('points', [
|
||||
[model.point.x + model.drict * (model.theme.sectionWidth + 5), model.point.y - (model.theme.sectionWidth * 1.2)],
|
||||
[model.point.x, model.point.y - (model.theme.sectionWidth * 1.2)],
|
||||
[model.point.x, model.point.y + (model.theme.sectionWidth * 1.2)],
|
||||
[model.point.x + model.drict * (model.theme.sectionWidth + 5), model.point.y + (model.theme.sectionWidth * 1.2)]
|
||||
]);
|
||||
this.partition.setStyle('stroke', '#3F3F3F');
|
||||
this.partition.setStyle('lineWidth', model.theme.sectionWidth - 2);
|
||||
} else if (type === '04') {
|
||||
this.add(this.circle);
|
||||
}
|
||||
}
|
||||
|
||||
if (type === '03' && !show) {
|
||||
this.partition.hide();
|
||||
} else {
|
||||
this.partition.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 创建区段限速限集合*/
|
||||
class LimitLines extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this._create(model);
|
||||
}
|
||||
|
||||
_create(model) {
|
||||
/** 创建区段*/
|
||||
if (model && model.points.length > 1) {
|
||||
const swPadding = model.theme.switchLen; // 定位和反位时区段距离岔芯的距离
|
||||
var switchWidth = model.theme.sectionWidth + model.theme.sectionBeyondWidth; // 道岔宽度
|
||||
const beg = Object.assign({}, model.points[0]);
|
||||
const end = Object.assign({}, model.points[model.points.length - 1]);
|
||||
if (model.isSwitchSection && beg.y !== end.y) {
|
||||
const swch = store.getters['map/getDeviceByCode'](model.relSwitchCode);
|
||||
if (swch) {
|
||||
const traingle = new JTriangle(swch.intersection, swch.skew);
|
||||
if ((swch.intersection.x === beg.x) && (swch.intersection.y === beg.y)) {
|
||||
beg.x = beg.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
beg.y = beg.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
|
||||
if ((swch.intersection.x === end.x) && (swch.intersection.y === end.y)) {
|
||||
end.x = end.x + traingle.drictx * (swPadding + switchWidth) * traingle.getCotRate();
|
||||
end.y = end.y + traingle.dricty * (swPadding + switchWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (model.points.length == 2) {
|
||||
this.add(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.theme.sectionSpeedLimitLinewidth,
|
||||
stroke: model.theme.sectionSpeedLimitColor
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
this.add(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: beg.x,
|
||||
y1: beg.y,
|
||||
x2: model.points[1].x,
|
||||
y2: model.points[1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.theme.sectionSpeedLimitLinewidth,
|
||||
stroke: model.theme.sectionSpeedLimitColor
|
||||
}
|
||||
}));
|
||||
|
||||
for (let i = 1; i < (model.points.length - 2); i++) {
|
||||
this.add(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: model.points[i].x,
|
||||
y1: model.points[i].y,
|
||||
x2: model.points[i + 1].x,
|
||||
y2: model.points[i + 1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.theme.sectionSpeedLimitLinewidth,
|
||||
stroke: model.theme.sectionSpeedLimitColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
this.add(new Line({
|
||||
isLine: true,
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
position: model.position,
|
||||
shape: {
|
||||
x1: model.points[model.points.length - 2].x,
|
||||
y1: model.points[model.points.length - 2].y,
|
||||
x2: end.x,
|
||||
y2: end.y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.theme.sectionSpeedLimitLinewidth,
|
||||
stroke: model.theme.sectionSpeedLimitColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 创建区段线集合*/
|
||||
class Lines extends Group {
|
||||
constructor(model) {
|
||||
super();
|
||||
this.model = model;
|
||||
this.zlevel = model.zlevel;
|
||||
this.z = model.z;
|
||||
this._create(model);
|
||||
}
|
||||
|
||||
_create(model) {
|
||||
/** 创建区段*/
|
||||
if (model && model.points.length > 1) {
|
||||
for (let i = 0; i < (model.points.length - 1); i++) {
|
||||
this.add(new Line({
|
||||
zlevel: this.zlevel,
|
||||
z: model.z,
|
||||
shape: {
|
||||
x1: model.points[i].x,
|
||||
y1: model.points[i].y,
|
||||
x2: model.points[i + 1].x,
|
||||
y2: model.points[i + 1].y
|
||||
},
|
||||
style: {
|
||||
lineWidth: model.theme.sectionWidth,
|
||||
stroke: model.theme.sectionSpareColor
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setStyle(styles) {
|
||||
this.eachChild((child) => {
|
||||
for (const prop in styles) {
|
||||
child.setStyle(prop, styles[prop]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
animateStyle(loop, animates) {
|
||||
if (animates && animates.length) {
|
||||
this.eachChild((child) => {
|
||||
let an = child.animateStyle(loop);
|
||||
animates.forEach(elem => {
|
||||
an = an.when(elem.time, elem.styles);
|
||||
});
|
||||
an.start();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
stopAnimation(flag) {
|
||||
this.eachChild((child) => {
|
||||
child.stopAnimation(flag);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 区段*/
|
||||
export default class Section extends Group {
|
||||
// constructor(model, theme) {
|
||||
constructor({ _code, _type, zlevel, model, state }, style, styleGlobal) {
|
||||
super();
|
||||
this._type = model._type;
|
||||
this.name = model._code;
|
||||
this.zlevel = model.zlevel;
|
||||
this.model = model;
|
||||
// console.log(style, styleGlobal, 'section');
|
||||
this.theme = style;
|
||||
this.styleGlobal = styleGlobal;
|
||||
// this.theme = theme;
|
||||
this.z = model.layer || 0;
|
||||
this._create(model);
|
||||
}
|
||||
|
||||
_create(model) {
|
||||
// 01:物理区段；02逻辑区段；03道岔区段
|
||||
this.createSectionText(); // 创建区段文字
|
||||
if (model.sectionType === '01' && (
|
||||
model.logicSectionNum.length <= 0 ||
|
||||
model.logicSectionNum.length == 1 && model.logicSectionNum[0] == 0) ||
|
||||
model.sectionType === '02') {
|
||||
this.createSection(); // 创建区段
|
||||
this.createSeparator(); // 创建分隔符
|
||||
if (model.sectionType === '01') {
|
||||
this.createAxles(); // 创建计轴
|
||||
}
|
||||
this.setStatus(model);
|
||||
}
|
||||
}
|
||||
|
||||
/** 创建区段*/
|
||||
createSection() {
|
||||
const model = this.model;
|
||||
const theme = this.theme;
|
||||
|
||||
// 创建区段
|
||||
this.section = new Lines({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
points: model.points,
|
||||
theme: theme
|
||||
});
|
||||
|
||||
// 创建延时释放
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
this.release = new Line({
|
||||
zlevel: model.zlevel + 1,
|
||||
z: this.z,
|
||||
shape: {
|
||||
x1: model.points[0].x + traingle.getCos(traingle.absz / 3),
|
||||
y1: model.points[0].y + traingle.getSin(traingle.absz / 3),
|
||||
x2: model.points[0].x + traingle.getCos(traingle.absz / 3 * 2),
|
||||
y2: model.points[0].y + traingle.getSin(traingle.absz / 3 * 2)
|
||||
},
|
||||
style: {
|
||||
lineWidth: theme.sectionWidth,
|
||||
stroke: theme.sectionSpareColor
|
||||
}
|
||||
});
|
||||
this.release.hide();
|
||||
|
||||
let x = traingle.drictx * (theme.sectionSpeedLimitDistance + theme.sectionWidth / 2) * traingle.getSinRate();
|
||||
let y = traingle.dricty * (theme.sectionSpeedLimitDistance + theme.sectionWidth / 2) * traingle.getCosRate();
|
||||
if (x == Infinity) { x = 0; }
|
||||
if (y == Infinity) { y = 0; }
|
||||
|
||||
// 创建限速线
|
||||
this.speedLimitLeft = new LimitLines({
|
||||
zlevel: this.zlevel + 4,
|
||||
z: this.z,
|
||||
position: [x, -y],
|
||||
points: model.points,
|
||||
isSwitchSection: model.isSwitchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
theme: theme
|
||||
});
|
||||
|
||||
this.speedLimitRight = new LimitLines({
|
||||
zlevel: this.zlevel + 4,
|
||||
z: this.z,
|
||||
position: [-x, y],
|
||||
points: model.points,
|
||||
isSwitchSection: model.isSwitchSection,
|
||||
relSwitchCode: model.relSwitchCode,
|
||||
theme: theme
|
||||
});
|
||||
|
||||
this.add(this.section);
|
||||
this.add(this.release);
|
||||
this.add(this.speedLimitLeft);
|
||||
this.add(this.speedLimitRight);
|
||||
}
|
||||
|
||||
/** 创建区段名称*/
|
||||
createSectionText() {
|
||||
const model = this.model;
|
||||
const theme = this.theme;
|
||||
|
||||
if (model && theme) {
|
||||
// 计算区段坐标位置
|
||||
const x = Math.min(model.points[0].x, model.points[model.points.length - 1].x) + Math.abs(model.points[model.points.length - 1].x - model.points[0].x) / 2 + model.namePosition.x;
|
||||
const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2 + model.namePosition.y;
|
||||
|
||||
/** 区段名称*/
|
||||
if (model.nameShow) {
|
||||
let tempx = x;
|
||||
let tempy = y;
|
||||
|
||||
// 根据列车上下行进行坐标偏移
|
||||
let drict = 1;
|
||||
if (model.trainPosType === '01') {
|
||||
drict = -1;
|
||||
tempy -= (theme.sectionWidth + theme.textFontSize);
|
||||
}
|
||||
|
||||
if (model.sectionType !== '03') {
|
||||
// 计算文字和物理区段的距离
|
||||
// 如果不是逻辑区段，让名称和区段保持点距离
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
if (model.sectionType === '01') {
|
||||
tempx += traingle.getSin(theme.nameDistance);
|
||||
tempy += traingle.getCos(theme.nameDistance) * drict;
|
||||
}
|
||||
} else {
|
||||
tempy += theme.nameDistance * drict;
|
||||
}
|
||||
|
||||
// 创建区段名称
|
||||
this.sectionText = new Text({
|
||||
zlevel: this.zlevel + 3,
|
||||
z: 6,
|
||||
style: {
|
||||
x: tempx,
|
||||
y: tempy,
|
||||
text: model.name,
|
||||
textFont: theme.textFontSize + 'px ' + theme.textFontFormat,
|
||||
textFill: theme.textFontColor,
|
||||
textAlign: 'center',
|
||||
textPosition: 'inside'
|
||||
}
|
||||
});
|
||||
|
||||
// 添加视图
|
||||
this.add(this.sectionText);
|
||||
}
|
||||
|
||||
/** 站台轨名称*/
|
||||
if (model.isStandTrack && model.standTrackNameShow) {
|
||||
let tempx = x;
|
||||
let tempy = y;
|
||||
// 根据列车上下行进行坐标偏移
|
||||
let drict = 1;
|
||||
if (model.trainPosType != '01') {
|
||||
drict = -1;
|
||||
tempy -= (theme.sectionWidth + theme.textFontSize);
|
||||
}
|
||||
|
||||
// 计算文字和物理区段的距离
|
||||
if (model.sectionType !== '02') {
|
||||
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
|
||||
tempx += traingle.getSin(theme.nameDistance);
|
||||
tempy += traingle.getCos(theme.nameDistance) * drict;
|
||||
}
|
||||
|
||||
// 创建站台轨名称
|
||||
this.standTrackText = new Text({
|
||||
zlevel: this.zlevel + 3,
|
||||
z: 6,
|
||||
style: {
|
||||
x: tempx + model.standTrackNamePosition.x,
|
||||
y: tempy + model.standTrackNamePosition.y,
|
||||
text: model.standTrackName,
|
||||
textFont: theme.textFontSize + 'px ' + theme.textFontFormat,
|
||||
textFill: theme.textFontColor,
|
||||
textAlign: 'center',
|
||||
textPosition: 'inside'
|
||||
}
|
||||
});
|
||||
|
||||
// 添加视图
|
||||
this.add(this.standTrackText);
|
||||
|
||||
}
|
||||
|
||||
/** 折返轨名称*/
|
||||
if (model.isReentryTrack && model.reentryTrackNameShow) {
|
||||
// 创建折返轨名称
|
||||
this.reentryTrackText = new Text({
|
||||
zlevel: this.zlevel + 3,
|
||||
z: 6,
|
||||
style: {
|
||||
x: x + model.reentryTrackNamePosition.x,
|
||||
y: y + model.reentryTrackNamePosition.y,
|
||||
text: model.reentryTrackName,
|
||||
textFont: theme.textFontSize + 'px ' + theme.textFontFormat,
|
||||
textFill: theme.textFontColor,
|
||||
textAlign: 'center',
|
||||
textPosition: 'inside'
|
||||
}
|
||||
});
|
||||
|
||||
// 添加视图
|
||||
this.add(this.reentryTrackText);
|
||||
}
|
||||
|
||||
/** 转换轨名称*/
|
||||
if (model.isTransferTrack && model.transferTrackNameShow) {
|
||||
// 转换轨名称
|
||||
this.transferTrackText = new Text({
|
||||
zlevel: this.zlevel + 3,
|
||||
z: 6,
|
||||
style: {
|
||||
x: x + model.transferTrackNamePosition.x,
|
||||
y: y + model.transferTrackNamePosition.y,
|
||||
text: model.transferTrackName,
|
||||
textFont: theme.textFontSize + 'px ' + theme.textFontFormat,
|
||||
textFill: theme.textFontColor,
|
||||
textAlign: 'center',
|
||||
textPosition: 'inside'
|
||||
}
|
||||
});
|
||||
|
||||
// 添加视图
|
||||
this.add(this.transferTrackText);
|
||||
}
|
||||
|
||||
/** 目的码名称*/
|
||||
if (model.destinationCode && model.destinationCodeShow) {
|
||||
// 转换轨名称
|
||||
this.destinationText = new Text({
|
||||
zlevel: this.zlevel + 3,
|
||||
z: 6,
|
||||
style: {
|
||||
x: x + model.destinationCodePoint.x,
|
||||
y: y + model.destinationCodePoint.y,
|
||||
text: model.destinationCode,
|
||||
textFont: theme.textFontSize + 'px ' + theme.textFontFormat,
|
||||
textFill: theme.destinationTextFontColor,
|
||||
textAlign: 'center',
|
||||
textPosition: 'inside'
|
||||
}
|
||||
});
|
||||
|
||||
// 添加视图
|
||||
this.add(this.destinationText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 创建计轴*/
|
||||
createAxles() {
|
||||
const model = this.model;
|
||||
const theme = this.theme;
|
||||
|
||||
/** 创建四个计轴*/
|
||||
let traingle = null;
|
||||
if (model && theme && model.isShowAxle && model.points && model.points.length > 1) {
|
||||
traingle = new JTriangle(model.points[0], model.points[1]);
|
||||
this.lUpAxle = new SectionAxle({
|
||||
theme: theme,
|
||||
zlevel: this.zlevel,
|
||||
point: {
|
||||
x: model.points[0].x,
|
||||
y: model.points[0].y
|
||||
},
|
||||
drictx: 1,
|
||||
dricty: -1,
|
||||
traingle: traingle
|
||||
});
|
||||
this.lBottomAxle = new SectionAxle({
|
||||
theme: theme,
|
||||
zlevel: this.zlevel,
|
||||
point: {
|
||||
x: model.points[0].x,
|
||||
y: model.points[0].y
|
||||
},
|
||||
drictx: 1,
|
||||
dricty: 1,
|
||||
traingle: traingle
|
||||
});
|
||||
|
||||
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
|
||||
this.rUpAxle = new SectionAxle({
|
||||
theme: theme,
|
||||
zlevel: this.zlevel,
|
||||
point: {
|
||||
x: model.points[model.points.length - 1].x,
|
||||
y: model.points[model.points.length - 1].y
|
||||
},
|
||||
drictx: -1,
|
||||
dricty: -1,
|
||||
traingle: traingle
|
||||
});
|
||||
this.rBottomAxle = new SectionAxle({
|
||||
theme: theme,
|
||||
zlevel: this.zlevel,
|
||||
point: {
|
||||
x: model.points[model.points.length - 1].x,
|
||||
y: model.points[model.points.length - 1].y
|
||||
},
|
||||
drictx: -1,
|
||||
dricty: 1,
|
||||
traingle: traingle
|
||||
});
|
||||
|
||||
this.add(this.lUpAxle);
|
||||
this.add(this.rUpAxle);
|
||||
this.add(this.lBottomAxle);
|
||||
this.add(this.rBottomAxle);
|
||||
}
|
||||
}
|
||||
|
||||
/** 创建分隔符*/
|
||||
createSeparator() {
|
||||
const model = this.model;
|
||||
const theme = this.theme;
|
||||
let traingle = null;
|
||||
|
||||
if (model && theme && model.points && model.points.length > 1) {
|
||||
/** 创建左侧分隔符*/
|
||||
traingle = new JTriangle(model.points[0], model.points[1]);
|
||||
this.lPartition = new SectionSeparator({
|
||||
theme: theme,
|
||||
borderBorderShow: model.borderBorderShow,
|
||||
zlevel: this.zlevel + 2,
|
||||
traingle: traingle,
|
||||
point: {
|
||||
x: model.points[0].x,
|
||||
y: model.points[0].y
|
||||
},
|
||||
sepType: model.l.sepType,
|
||||
drict: -1
|
||||
});
|
||||
|
||||
/** 创建右侧分隔符*/
|
||||
traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
|
||||
this.rPartition = new SectionSeparator({
|
||||
theme: theme,
|
||||
borderBorderShow: model.borderBorderShow,
|
||||
zlevel: this.zlevel + 2,
|
||||
traingle: traingle,
|
||||
point: {
|
||||
x: model.points[model.points.length - 1].x,
|
||||
y: model.points[model.points.length - 1].y
|
||||
},
|
||||
sepType: model.r.sepType,
|
||||
drict: 1
|
||||
});
|
||||
|
||||
/** 添加视图*/
|
||||
this.add(this.lPartition);
|
||||
this.add(this.rPartition);
|
||||
}
|
||||
}
|
||||
|
||||
setInvisible() {
|
||||
const invisible = this.model.sectionType === '02' && this.model.isShowLogical;
|
||||
this.eachChild((child) => {
|
||||
child.attr('invisible', invisible);
|
||||
});
|
||||
}
|
||||
|
||||
recover() {
|
||||
if (this.section) {
|
||||
this.section.stopAnimation(true);
|
||||
this.section.setStyle({
|
||||
fill: this.theme.backgroundColor,
|
||||
stroke: this.theme.sectionSpareColor,
|
||||
lineWidth: this.theme.sectionWidth
|
||||
});
|
||||
|
||||
this.release.hide();
|
||||
this.speedLimitLeft.hide();
|
||||
this.speedLimitRight.hide();
|
||||
}
|
||||
}
|
||||
|
||||
/** 未定义状态*/
|
||||
undefine() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionUndefinedColor,
|
||||
lineWidth: this.theme.sectionWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 空闲状态*/
|
||||
spare() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionSpareColor,
|
||||
lineWidth: this.theme.sectionWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 通信车占用状态*/
|
||||
communicationOccupied() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionCommunicationOccupiedColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 非通信车占用状态*/
|
||||
unCommunicationOccupied() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionUnCommunicationOccupiedColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 进路锁闭*/
|
||||
routeLock() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionRouteLockColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 封锁*/
|
||||
block() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionBlockColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 故障锁定状态*/
|
||||
faultLock() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionFaultLockColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** atc切除状态*/
|
||||
atcExcision() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionAtcExcisionColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** ats切除状态*/
|
||||
atsExcision() {
|
||||
if (this.section) {
|
||||
this.atcExcision();
|
||||
this.section.animateStyle(true, [
|
||||
{ time: 1000, styles: { stroke: this.theme.backgroundColor } },
|
||||
{ time: 2000, styles: { stroke: this.theme.sectionAtsExcisionColor, lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth } }
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/** 保护区段锁闭*/
|
||||
protectiveLock() {
|
||||
if (this.section) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionProtectiveLockColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 延时释放*/
|
||||
timeRelease() {
|
||||
if (this.release) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionRouteLockColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
this.release.show();
|
||||
this.release.setStyle('lineWidth', this.theme.sectionWidth + this.theme.sectionBeyondWidth);
|
||||
this.release.setStyle('stroke', this.theme.sectionRouteLockColor);
|
||||
this.release.animateStyle(true)
|
||||
.when(1000, { stroke: this.theme.sectionRouteLockColor })
|
||||
.when(2000, { stroke: this.theme.sectionTimeReleaseColor })
|
||||
.start();
|
||||
}
|
||||
}
|
||||
|
||||
/** 保护区段延时解锁*/
|
||||
protectiveTimeRelease() {
|
||||
if (this.release) {
|
||||
this.section.setStyle({
|
||||
stroke: this.theme.sectionProtectiveLockColor,
|
||||
lineWidth: this.theme.sectionWidth + this.theme.sectionBeyondWidth
|
||||
});
|
||||
this.release.show();
|
||||
this.release.setStyle('lineWidth', this.theme.sectionWidth + this.theme.sectionBeyondWidth);
|
||||
this.release.setStyle('stroke', this.theme.sectionProtectiveLockColor);
|
||||
this.release.animateStyle(true)
|
||||
.when(1000, { stroke: this.theme.sectionProtectiveLockColor })
|
||||
.when(2000, { stroke: this.theme.sectionProtectiveTimeReleaseColor })
|
||||
.start();
|
||||
}
|
||||
}
|
||||
|
||||
/** 区段切除*/
|
||||
sectionCutOff() {
|
||||
if (this.release) {
|
||||
const lineWidth = this.theme.sectionWidth + (this.model.status != '01' ? this.theme.sectionBeyondWidth : 0);
|
||||
this.section.animateStyle(true, [
|
||||
{ time: 0, styles: { lineWidth: lineWidth } },
|
||||
{ time: 1000, styles: { stroke: this.theme.backgroundColor } },
|
||||
{ time: 2000, styles: { lineWidth: lineWidth } }
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/** 设置限速*/
|
||||
setSpeedUpperLimit() {
|
||||
if (this.section) {
|
||||
this.speedLimitLeft.show();
|
||||
this.speedLimitRight.show();
|
||||
}
|
||||
}
|
||||
|
||||
/** 计轴预复位*/
|
||||
axleReset() {
|
||||
if (this.release) {
|
||||
this.release.show();
|
||||
this.release.setStyle({
|
||||
stroke: this.theme.sectionAxleResetColor
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 设置状态*/
|
||||
setStatus(model) {
|
||||
this.recover();
|
||||
switch (model.status) {
|
||||
case '00':// 未定义
|
||||
this.undefine();
|
||||
break;
|
||||
case '01': // 空闲
|
||||
this.spare();
|
||||
break;
|
||||
case '02': // 通信车占用
|
||||
this.communicationOccupied();
|
||||
break;
|
||||
case '03': // 非通信车占用
|
||||
this.unCommunicationOccupied();
|
||||
break;
|
||||
case '04': // 进路锁闭
|
||||
this.routeLock();
|
||||
break;
|
||||
case '05': // 故障锁闭
|
||||
this.faultLock();
|
||||
break;
|
||||
case '06': // 封锁
|
||||
this.block();
|
||||
break;
|
||||
case '09': // 保护区段锁闭
|
||||
this.protectiveLock();
|
||||
break;
|
||||
case '10': // 延时释放
|
||||
this.timeRelease();
|
||||
break;
|
||||
case '11': // 保护区段延时解锁
|
||||
this.protectiveTimeRelease();
|
||||
break;
|
||||
case '12': // 计轴预复位
|
||||
this.axleReset();
|
||||
break;
|
||||
}
|
||||
|
||||
/** 区段切除*/
|
||||
if (model.cutOff) {
|
||||
this.sectionCutOff();
|
||||
}
|
||||
|
||||
/** 是否限速*/
|
||||
if (model.speedUpperLimit >= 0) {
|
||||
this.setSpeedUpperLimit();
|
||||
}
|
||||
}
|
||||
|
||||
/** 计算提示位置*/
|
||||
getShapeTipPoint() {
|
||||
let rect = this.getBoundingRect();
|
||||
let distance = this.theme.sectionWidth / 2;
|
||||
if (this.section) {
|
||||
rect = this.section.getBoundingRect();
|
||||
if (this.model.sectionType !== '02' && this.model.nameShow) {
|
||||
if (this.model.trainPosType == '01') {
|
||||
distance = distance + this.theme.nameDistance + this.theme.textFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
x: rect.x + rect.width / 2,
|
||||
y: rect.y + rect.height / 2.7 - distance
|
||||
};
|
||||
}
|
||||
}
|
||||
67
src/jmap/utils/JTriangle.js
Normal file
67
src/jmap/utils/JTriangle.js
Normal file
@ -0,0 +1,67 @@
|
||||
/** 三角函数计算 */
|
||||
function JTriangle(beg, end) {
|
||||
this.init(beg, end);
|
||||
}
|
||||
JTriangle.prototype = {
|
||||
constructor: JTriangle,
|
||||
beg: null,
|
||||
end: null,
|
||||
abspowx: 0,
|
||||
abspowy: 0,
|
||||
abspowz: 0,
|
||||
drictx: 0,
|
||||
dricty: 0,
|
||||
drict: 0,
|
||||
|
||||
init: function (beg, end) {
|
||||
this.beg = beg;
|
||||
this.end = end;
|
||||
this.abspowx = Math.pow(this.end.x - this.beg.x, 2);
|
||||
this.abspowy = Math.pow(this.end.y - this.beg.y, 2);
|
||||
this.abspowz = this.abspowx + this.abspowy;
|
||||
this.absx = Math.abs(this.end.x - this.beg.x);
|
||||
this.absy = Math.abs(this.end.y - this.beg.y);
|
||||
this.absz = Math.sqrt(Math.pow(this.end.x - this.beg.x, 2), Math.pow(this.end.y - this.beg.y, 2));
|
||||
this.drictx = this.end.x > this.beg.x ? 1 : -1;
|
||||
this.dricty = this.end.y > this.beg.y ? 1 : -1;
|
||||
this.drict = this.drictx * this.dricty;
|
||||
this.diff_x = end.x - beg.x;
|
||||
this.diff_y = end.y - beg.y;
|
||||
},
|
||||
getRotation: function () {
|
||||
return Math.atan(this.diff_y / this.diff_x);
|
||||
},
|
||||
getAngle: function () {
|
||||
return 360 * Math.atan(this.diff_y / this.diff_x) / (2 * Math.PI);
|
||||
},
|
||||
getCos: function (n) {
|
||||
return this.drictx * Math.sqrt(Math.pow(n, 2) * this.abspowx / this.abspowz);
|
||||
},
|
||||
getSin: function (n) {
|
||||
return this.dricty * Math.sqrt(Math.pow(n, 2) * this.abspowy / this.abspowz);
|
||||
},
|
||||
getCosRate: function () {
|
||||
return Math.sqrt(this.abspowx / this.abspowz);
|
||||
},
|
||||
getSinRate: function () {
|
||||
return Math.sqrt(this.abspowy / this.abspowz);
|
||||
},
|
||||
getTanRate: function () {
|
||||
var diff_x = this.end.x - this.beg.x;
|
||||
var diff_y = this.end.y - this.beg.y;
|
||||
return Math.abs(diff_y / diff_x);
|
||||
},
|
||||
getCotRate: function () {
|
||||
var diff_x = this.end.x - this.beg.x;
|
||||
var diff_y = this.end.y - this.beg.y;
|
||||
return Math.abs(diff_x / diff_y);
|
||||
},
|
||||
middlePoint: function () {
|
||||
return {
|
||||
x: Math.min(this.end.x, this.beg.x) + Math.abs(this.end.x - this.beg.x) / 2,
|
||||
y: Math.min(this.end.y, this.beg.y) + Math.abs(this.end.y - this.beg.y) / 2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default JTriangle;
|
||||
@ -19,6 +19,9 @@ export function parser(data, defaultStateDict) {
|
||||
zrUtil.each(data.linkList || [], (elem) => {
|
||||
mapDevice[elem.code] = deviceFactory(deviceType.Link, defaultStateDict, elem);
|
||||
});
|
||||
zrUtil.each(data.sectionList || [], (elem) => {
|
||||
mapDevice[elem.code] = deviceFactory(deviceType.Section, defaultStateDict, elem);
|
||||
});
|
||||
}
|
||||
|
||||
return mapDevice;
|
||||
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
selected(e) {
|
||||
console.log('selected', e, this.jmap);
|
||||
console.log('selected', e);
|
||||
},
|
||||
contextmenu(e) {
|
||||
console.log('contextmenu', e);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user