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

修改代码

Browse Source
This commit is contained in:
zyy 2019-07-31 18:19:15 +08:00
parent 0157f32fc0
commit 1a44bfb002
19 changed files with 359 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/jmap/config/skinStyle/bejing_01.js
View File

@ -24,6 +24,9 @@ class SkinStyle extends defaultStyle {
textVerticalAlign: 'middle', // 文字垂直对齐方式
position: 1 // 区段名称位置 1 上面 -1 下面 0 默认
},
mouse: {
on: true
},
line: {
width: 5, // 区段宽度
beyondWidth: 0, // 区段宽超出宽度

30
src/jmap/mouseController.js
View File

@ -153,6 +153,36 @@ class MouseController extends Eventful {
checkEvent(e) {
return new EventModel(e);
// var oldEm = new EventModel(this.$zr.curEvent || { event: {} });
// var newEm = new EventModel(e);
// if ([1, 3].includes(e.which)) {
// // 查找之前和当前鼠标选中的实例
// var oldInstances = (this._viewRepo.__getViewInstancesByDeviceType(oldEm.deviceType) || {})._instances || {};
// var newInstances = (this._viewRepo.__getViewInstancesByDeviceType(newEm.deviceType) || {})._instances || {};
// var newDevice = newInstances[newEm.deviceCode] || {};
// var oldDevice = oldInstances[oldEm.deviceCode] || {};
// // 如果之前和当前选中的实例不一致
// if (oldDevice.name != newDevice.name) {
// // 如果实例有取消选择函数并且被点击，则执行取消选中函数
// if (oldDevice && oldDevice.model && oldDevice.mouseleave) {
// // 视图数据设置点击标志，同步执行
// oldDevice['selected'] = false;
// oldDevice['mouseleave'](e);
// }
// // 如果实例有选中函数并且被点击，则执行选中函数
// if (newDevice && newDevice.model && newDevice.mouseenter) {
// const model = store.getters['map/getDeviceByCode'](newDevice.name) || {};
// Object.assign(model, { _selected: true });
// }
// }
// // 保存当前实例到全局
// this._zr.curEvent = e;
// }
// return newEm;
}
updateDatazoom(zoom) {

120
src/jmap/shape/Section/EMouse.js Normal file
View File

@ -0,0 +1,120 @@
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import Rect from 'zrender/src/graphic/shape/Rect';
// import Vue from 'vue';
class EMouse extends Group {
constructor(device) {
super();
this.down = false;
this.device = device;
this.create();
}
create() {
if (this.device.sectionText) {
const rect = this.device.sectionText.getBoundingRect();
if (!this.device.isSwitchSection) {
this.sectionTextBorder = new Rect({
zlevel: this.device.zlevel,
z: this.device.z + 3,
shape: rect,
style: {
lineDash: [3, 3],
stroke: '#fff', // 白色
fill: this.device.model.sectionType == '02' ? this.device.style.Section.line.logicalColor : '#00FFFF' // 蓝色
}
});
this.add(this.sectionTextBorder);
this.sectionTextBorder.hide();
}
const fontSize = this.device.model.type == '02' ? this.device.style.Section.text.fontSize + 2: this.device.style.Section.text.fontSize;
this.TextName = new Text({
zlevel: this.device.zlevel,
z: this.device.z + 4,
style: {
x: rect.x + (rect.width / 2),
y: rect.y + (rect.height / 2),
fontWeight: 'normal',
fontSize: fontSize,
fontFamily: this.device.style.fontFamily,
text: this.device.model.name,
textFill: '#000',
textAlign: this.device.style.Section.text.textAlign,
textPosition: this.device.style.Section.text.textPosition || 'inside',
textVerticalAlign: this.device.style.Section.text.textVerticalAlign || null
}
});
this.add(this.TextName);
this.TextName.hide();
this.sectionTextShadow = new Text({
zlevel: this.zlevel + 3,
z: 5,
position: [4, -2],
silent: true,
style: {
x: rect.x + (rect.width / 2),
y: rect.y + (rect.height / 2),
text: this.device.model.name,
textFill: this.device.style.textShadowColor, // 黄色
textAlign: 'middle',
textVerticalAlign: 'top',
textFont: 'bold ' + (fontSize + 1) + 'px ' + this.device.style.textFontFormat
}
});
this.add(this.sectionTextShadow);
this.sectionTextShadow.hide();
}
if (this.device.section) {
const rect = this.device.section.getBoundingRect();
this.lineBorder = new Rect({
zlevel: this.device.zlevel,
z: this.device.z - 1,
shape: rect,
style: {
lineDash: [3, 3],
stroke: this.device.style.borderColor,
fill: this.device.style.transparentColor
}
});
this.add(this.lineBorder);
this.lineBorder.hide();
}
}
mouseover(subType) {
// 显示车次窗
if (this.device.model.isSwitchSection) {
if (subType == 'Text') {
this.sectionTextShadow && this.sectionTextShadow.show();
} else {
// 道岔区段
const refSwitch = this.device.model.switch.instance;
refSwitch && refSwitch.mouseEvent.mouseover();
// const refSwitch = Vue.prototype.$jlmap.mapDevice[this.device.model.relSwitchCode].instance;
// refSwitch && refSwitch.mouseEvent.mouseover();
}
} else {
this.TextName && this.TextName.show();
this.sectionTextBorder && this.sectionTextBorder.show();
this.lineBorder && this.lineBorder.show();
}
}
mouseout() {
this.sectionTextShadow && this.sectionTextShadow.hide();
if (this.device.model.isSwitchSection) {
// 道岔区段
const refSwitch = this.device.model.switch.instance;
refSwitch && refSwitch.mouseEvent.mouseout();
// const refSwitch = Vue.prototype.$jlmap.mapDevice[this.device.model.relSwitchCode].instance;
// refSwitch && refSwitch.mouseEvent.mouseout();
} else {
this.TextName && this.TextName.hide();
this.sectionTextBorder && this.sectionTextBorder.hide();
this.lineBorder && this.lineBorder.hide();
}
}
}
export default EMouse;

35
src/jmap/shape/Section/index.js
View File

@ -7,6 +7,7 @@ import ESeparator from './ESeparator'; // 分隔符 (私有)
import { EAxle } from './EAxle'; // 创建计轴 (私有)
import JTriangle from '../../utils/JTriangle';
import BoundingRect from 'zrender/src/core/BoundingRect';
import EMouse from './EMouse';
/** 区段*/
export default class Section extends Group {
@ -17,8 +18,10 @@ export default class Section extends Group {
this.zlevel = model.zlevel;
this.z = 5 + parseInt(model.layer || 0);
this.model = model;
this.selected = false;
this.style = style;
this._create();
this.createMouseEvent();
}
_create() {
@ -39,6 +42,38 @@ export default class Section extends Group {
}
}
createMouseEvent() {
// 鼠标事件
if (this.style.Section.mouse.on) {
this.mouseEvent = new EMouse(this);
this.add(this.mouseEvent);
// this.on('mousedown', this.mouseclick);
this.on('mouseout', this.mouseleave);
this.on('mouseover', this.mouseenter);
}
}
mouseclick(e) {
if ([3].includes(e.which)) {
this.selected = !this.selected;
if (this.selected) {
this.mouseEvent.mouseover(e.target._subType);
}
}
}
mouseenter(e) {
if (!this.selected) {
this.mouseEvent.mouseover(e.target._subType);
}
}
mouseleave(e) {
if (!this.selected) {
this.mouseEvent.mouseout(e);
}
}
/** 创建区段*/
createSection() {
const model = this.model;

97
src/jmap/shape/Switch/EMouse.js Normal file
View File

@ -0,0 +1,97 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
// import Vue from 'vue';
class EMouse extends Group {
constructor(device) {
super();
this.down = false;
this.device = device;
this.create();
this.craeteSwitchBorder();
}
create() {
if (this.device.name) {
// 创建锁闭框
// var rect = this.device.name.getBoundingRect();
// var textWidth = rect.width * 0.8;
// if (this.device.triangle.drictx !== 1) {
// rect.x += rect.width;
// textWidth = -textWidth;
// }
// this.textRect = new Rect({
// zlevel: this.device.zlevel,
// z: this.device.z,
// silent: true,
// shape: {
// x: rect.x,
// y: rect.y,
// width: textWidth,
// height: rect.height
// },
// style: {
// lineWidth: 1,
// lineDash: [3, 3],
// stroke: this.device.style.borderColor,
// fill: this.device.style.borderContextBackgroundColor
// }
// });
// this.add(this.textRect);
// this.textRect.hide();
}
}
// 创建道岔边框
craeteSwitchBorder() {
const sectionA = this.device.model.sectionAInstance.instance;
const sectionB = this.device.model.sectionBInstance.instance;
const sectionC = this.device.model.sectionCInstance.instance;
const rect = this.device.getBoundingRect();
sectionA && rect.union(sectionA.getBoundingRect());
sectionB && rect.union(sectionB.getBoundingRect());
sectionC && rect.union(sectionC.getBoundingRect());
this.switchBorder = new Rect({
zlevel: this.device.model.zlevel,
z: this.device.z,
silent: true,
shape: Object.assign({ r: 4 }, rect),
style: {
lineDash: [3, 3],
stroke: this.device.style.borderColor,
fill: this.device.style.transparentColor
}
});
this.add(this.switchBorder);
this.switchBorder.hide();
}
mouseover() {
// 显示车次窗
// const section = Vue.prototype.$jlmap.mapDevice[this.device.model.switchSectionCode].instance;
// section && section.setTrainWindowEventShow(true);
this.switchBorder && this.switchBorder.show();
this.device.setLossAction(false);
this.device.setSwitchCoreColor(this.device.style.borderContextBackgroundColor);
this.device.setTextStyle({
textFill: '#000'
});
this.textRect && this.textRect.show();
}
mouseout() {
// const section = Vue.prototype.$jlmap.mapDevice[this.device.model.switchSectionCode].instance;
// section && section.setTrainWindowEventShow(false);
this.switchBorder && this.switchBorder.hide();
this.device.setTextStyle({
textFill: this.device.style.backgroundColor
});
this.textRect && this.textRect.hide();
this.device.setState(this.device.model);
}
}
export default EMouse;

3
src/jmap/shape/Switch/ESwName.js
View File

@ -23,7 +23,8 @@ class ESwName extends Group {
fontSize: style.textFontSize,
fontFamily: style.textFontFormat,
text: model.name,
textAlign: model.triangle.drictx === 1 ? 'left' : 'right',
// textAlign: model.triangle.drictx === 1 ? 'left' : 'right',
textAlign: 'center',
textVerticalAlign: model.triangle.dricty === 1 ? 'top' : 'bottom',
textFill: style.Switch.text.switchTextLossColor
}

39
src/jmap/shape/Switch/index.js
View File

@ -8,6 +8,7 @@ import ESwName from './ESwName.js';
import ESwCore from './ESwCore.js';
import ESwLocal from './ESwLocal.js';
import ESwLnversion from './ESwLnversion';
import EMouse from './EMouse';
export default class Switch extends Group {
constructor(model, style) {
@ -19,9 +20,42 @@ export default class Switch extends Group {
this.zlevel = model.zlevel;
this.z = 6;
this._create();
this.createMouseEvent();
this.setState(model);
}
createMouseEvent() {
// 鼠标事件
if (this.style.Section.mouse.on) {
this.mouseEvent = new EMouse(this);
this.add(this.mouseEvent);
// this.on('mousedown', this.mouseclick);
this.on('mouseout', this.mouseleave);
this.on('mouseover', this.mouseenter);
}
}
mouseclick(e) {
if ([3].includes(e.which)) {
this.selected = !this.selected;
if (this.selected) {
this.mouseEvent.mouseover();
}
}
}
mouseenter(e) {
if (!this.selected) {
this.mouseEvent.mouseover();
}
}
mouseleave() {
if (!this.selected) {
this.mouseEvent.mouseout();
}
}
_create() {
const model = this.model;
const style = this.style;
@ -166,6 +200,11 @@ export default class Switch extends Group {
this.name.getNameText().setStyle('textFill', color);
}
/** 设置道岔背景颜色*/
setTextStyle(style) {
this.name.getNameText().setStyle(style);
}
/** 设置道岔文字边框颜色 */
setHasTextBorder(width) {
this.name.getTextRect().setStyle('lineWidth', width);

1
src/jmap/shape/element/ETextName.js
View File

@ -4,6 +4,7 @@ import Text from 'zrender/src/graphic/Text';
/** 名称元素*/
export default function ETextName(model) {
const TextName = new Text({
_subType: 'Text',
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,

10
src/jmap/utils/parser.js
View File

@ -43,7 +43,6 @@ export function parser(data, jmap) {
zrUtil.each(data.sectionList || [], elem => {
mapDevice[elem.code] = propConvert.initPrivateProps(deviceFactory(deviceType.Section, elem));
}, this);
zrUtil.each(data.signalList || [], elem => {
@ -111,11 +110,12 @@ export function parser(data, jmap) {
}, this);
zrUtil.each(data.switchList || [], elem => {
const device = deviceFactory(deviceType.Switch, elem);
const cnodeSection = mapDevice[elem.sectionACode];
const lnodeSection = mapDevice[elem.sectionBCode];
const rnodeSection = mapDevice[elem.sectionCCode];
cnodeSection['switch'] = lnodeSection['switch'] = rnodeSection['switch'] = elem;
cnodeSection['switch'] = lnodeSection['switch'] = rnodeSection['switch'] = device;
if (cnodeSection && lnodeSection && rnodeSection) {
const cnode = mapDevice[cnodeSection.linkCode];
@ -144,9 +144,13 @@ export function parser(data, jmap) {
elem.sectionName = section.name;
}
elem['sectionAInstance'] = cnodeSection;
elem['sectionBInstance'] = lnodeSection;
elem['sectionCInstance'] = rnodeSection;
rnodeSection['layer'] = -1;
}
mapDevice[elem.code] = propConvert.initPrivateProps(deviceFactory(deviceType.Switch, elem));
mapDevice[elem.code] = propConvert.initPrivateProps(device);
}, this);
}

5
src/views/map/mapdraft/mapedit/mapoperate/ImageControl.vue
View File

@ -169,11 +169,10 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (model && model._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'ImageControl'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.name = selected.name;
this.editModel.width = selected.width;

8
src/views/map/mapdraft/mapedit/mapoperate/counter.vue
View File

@ -188,11 +188,10 @@ export default {
deviceChange(code) {
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (model && model._type.toUpperCase() === 'Counter'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'Counter'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.name = selected.name;
this.editModel.type = selected.type;
@ -204,8 +203,7 @@ export default {
y: selected.position.y
};
this.activeName = 'first';
} else if (model && model._type.toUpperCase() === 'Station'.toUpperCase()) {
const selected = model.model;
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
this.activeName = 'second';
} else {

8
src/views/map/mapdraft/mapedit/mapoperate/delayunlock.vue
View File

@ -165,12 +165,11 @@ export default {
deviceChange(code) {
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.$nextTick(() => {
if (model && model._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'DelayUnlock'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.textFontFormat = selected.font;
this.editModel.textFontColor = selected.fontColor;
@ -181,8 +180,7 @@ export default {
y: selected.position.y
};
this.activeName = 'first';
} else if (model && model._type.toUpperCase() === 'Station'.toUpperCase()) {
const selected = model.model;
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
this.activeName = 'second';
} else {

5
src/views/map/mapdraft/mapedit/mapoperate/lcControl.vue
View File

@ -172,11 +172,10 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (model && model._type.toUpperCase() === 'LcControl'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.name = selected.name;
this.editModel.position = {

5
src/views/map/mapdraft/mapedit/mapoperate/limitControl.vue
View File

@ -172,11 +172,10 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (model && model._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'LimitControl'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.name = selected.name;
this.editModel.position = {

9
src/views/map/mapdraft/mapedit/mapoperate/stoppoint.vue
View File

@ -223,9 +223,8 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
const selected = model.model;
if (model && model._type.toUpperCase() === 'StopPoint'.toUpperCase()) {
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'StopPoint'.toUpperCase()) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
this.editModel.code = selected.code;
@ -241,10 +240,10 @@ export default {
this.editModel.destCodePosition.x = selected.destCodePosition.x;
this.editModel.destCodePosition.y = selected.destCodePosition.y;
this.activeName = 'first';
} else if (model && model._type.toUpperCase() === 'Link'.toUpperCase()) {
} else if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
this.addModel.linkCode = selected.code;
this.activeName = 'second';
} else if (model && model._type.toUpperCase() === 'Station'.toUpperCase()) {
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.addModel.stationCode = selected.code;
this.activeName = 'second';
} else {

7
src/views/map/mapdraft/mapedit/mapoperate/text.vue
View File

@ -158,11 +158,10 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (model && model._type.toUpperCase() === 'Text'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
this.editModel.code = selected.code;
[this.editModel.prepend, this.editModel.content] = selected.content.split('::');
this.editModel.font = selected.font;
@ -172,7 +171,7 @@ export default {
y: selected.position.y
};
this.activeName = 'first';
} else if (model && model._type.toUpperCase() === 'Station'.toUpperCase()) {
} else if (selected && selected._type.toUpperCase() === 'Station'.toUpperCase()) {
this.activeName = 'second';
} else {
this.activeName = 'second';

5
src/views/map/mapdraft/mapedit/mapoperate/train.vue
View File

@ -187,11 +187,10 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (model && model._type.toUpperCase() === 'Train'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'Train'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.modelCode = selected.modelCode;
this.editModel.groupNumber = selected.groupNumber;

5
src/views/map/mapdraft/mapedit/mapoperate/trainwindow.vue
View File

@ -170,10 +170,9 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.form.resetFields();
if (model && model._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'TrainWindow'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.width = selected.width;
this.editModel.height = selected.height;

5
src/views/map/mapdraft/mapedit/mapoperate/zcControl.vue
View File

@ -151,11 +151,10 @@ export default {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(model) {
deviceSelect(selected) {
this.$refs.dataform.resetFields();
this.$refs.make.resetFields();
if (model && model._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
const selected = model.model;
if (selected && selected._type.toUpperCase() === 'ZcControl'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.name = selected.name;
this.editModel.visible = selected.visible;