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:
fan 2021-04-13 18:09:37 +08:00
parent e239f1e8c6
commit 0b5cc8e15d
7 changed files with 241 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/jmapNew/shape/SignalButton/index.js Normal file
View File

@ -0,0 +1,121 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import Line from 'zrender/src/graphic/shape/Line';
import Text from 'zrender/src/graphic/Text';
export default class SignalButton extends Group {
constructor(model, {style}) {
super();
this._code = model.code;
this._type = model._type;
this.zlevel = model.zlevel;
this.z = 0;
this.model = model;
this.style = style.Line;
this.isShowShape = true;
this.create();
this.setState(model);
this.setShowMode();
}
create() {
const model = this.model;
let fillColor = '#008000';
if (model.type === 'GUIDE') {
fillColor = '#5050E1';
} else if (model.type === 'FLEXIBLE' || model.type === 'SHUNT_TERMINAL') {
fillColor = '#808080';
}
this.rectButton = new Rect({
zlevel: this.zlevel,
z: this.z,
silent: true,
shape: {
x: model.position.x,
y: model.position.y,
width: 14,
height: 14
},
style: {
lineDash: null,
stroke: '#808080',
fill: fillColor
}
});
this.leftLine = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: model.position.x,
y1: model.position.y,
x2: model.position.x + 14,
y2: model.position.y + 14
},
style: {
lineWidth: 2,
stroke: '#ff0000'
}
});
this.add(this.leftLine);
this.leftLine.hide();
this.rightLine = new Line({
zlevel: this.zlevel,
z: this.z + 1,
shape: {
x1: model.position.x + 14,
y1: model.position.y,
x2: model.position.x,
y2: model.position.y + 14
},
style: {
lineWidth: 2,
stroke: '#ff0000'
}
});
this.add(this.rightLine);
this.rightLine.hide();
this.buttonText = new Text({
zlevel: this.zlevel,
z: this.z,
style: {
x: model.position.x + 7,
y: model.position.y - 20,
fontWeight: '400',
fontSize: 12,
fontFamily: '',
text: model.name,
textFill: '#C0C0C0',
textAlign: 'middle',
textVerticalAlign: 'top'
}
});
this.add(this.rectButton);
this.add(this.buttonText);
}
startAnimate() {
let color = '#008000';
if (this.model.type === 'TRAIN_TERMINAL') {
color = '#008000';
} else if (this.model.type === 'FLEXIBLE' || this.model.type === 'SHUNT_TERMINAL') {
color = '#808080';
}
this.rectButton && this.rectButton.animateStyle(true)
.when(0, { fill: '#000' })
.when(1000, { fill: color })
.when(2000, { fill: '#000' })
.start();
}
stopAnimation() {
this.rectButton && this.rectButton.stopAnimation(true);
}
setState(model) {
if (!this.isShowShape) return;
}
// 设置显示模式
setShowMode() {
}
setShowStation(stationCode) {
}
getAnchorPoint() {
}
}

2
src/jmapNew/shape/factory.js
View File

@ -30,6 +30,7 @@ import OverAp from './OverAp/index.js';
import FloodGate from './FloodGate/index';
import DirectionRod from './DirectionRod/index';
import Responder from './Responder/index';
import SignalButton from './SignalButton/index';
/** 图库*/
const mapShape = {};
@ -81,6 +82,7 @@ mapShape[deviceType.OverAp] = OverAp;
mapShape[deviceType.FloodGate] = FloodGate;
mapShape[deviceType.DirectionRod] = DirectionRod;
mapShape[deviceType.Responder] = Responder;
mapShape[deviceType.SignalButton] = SignalButton;
function shapefactory(device, jmap) {
const type = device._type;

127
src/jmapNew/shape/signalButton/index.js
View File

@ -1,127 +0,0 @@
import Group from 'zrender/src/container/Group';
import Polyline from 'zrender/src/graphic/shape/Polyline';
export default class Line2 extends Group {
constructor(model, {style}) {
super();
this._code = model.code;
this._type = model._type;
this.zlevel = model.zlevel;
this.z = 0;
this.model = model;
this.style = style.Line;
this.isShowShape = true;
this.create();
this.setState(model);
this.setShowMode();
}
create() {
const model = this.model;
if (model && model.points.length > 1) {
const points = [];
const vicePoints = [];
const modelPoints = model.points;
const length = modelPoints.length;
const path = window.location.href;
if (model.type === '03' && !path.includes('/map/draw')) {
for (let i = 0; i < length; i++) {
points.push([modelPoints[i].x + 10, modelPoints[i].y]);
}
this.segment = new Polyline({
zlevel: this.zlevel,
z:this.z,
shape: {
points:points
},
style: {
lineWidth: model.width,
stroke: model.lineColor || this.style.lineColor
}
});
this.add(this.segment);
for (let i = 0; i < length; i++) {
vicePoints.push([modelPoints[i].x - model.offsetX, modelPoints[i].y + model.offsetY]);
}
this.viceSegment = new Polyline({
zlevel: this.zlevel,
z:this.z,
shape: {
points:vicePoints
},
style: {
lineWidth: model.width,
stroke: model.lineColor || this.style.lineColor
}
});
this.add(this.viceSegment);
} else {
for (let i = 0; i < length; i++) {
points.push([modelPoints[i].x, modelPoints[i].y]);
}
this.segment = new Polyline({
zlevel: this.zlevel,
z:this.z,
shape: {
points:points
},
style: {
lineWidth: model.width,
stroke: model.lineColor || this.style.lineColor
}
});
this.add(this.segment);
}
}
}
setLineType(type) {
switch (type) {
case '01': break;
case '02':
this.segment && this.segment.setStyle('lineDash', this.style.lineDash || [4]);
break;
case '03':
this.segment && this.segment.setStyle('lineDash', this.style.lineDash || [4]);
this.viceSegment && this.viceSegment.setStyle('lineDash', this.style.lineDash || [4]);
break;
}
}
setState(model) {
if (!this.isShowShape) return;
this.setLineType(model.type);
}
// 设置显示模式
setShowMode() {
const showMode = this.model.showMode;
const showConditions = this.model.showConditions;
if (!showConditions || showConditions === '01' || showMode === showConditions) {
this.segment && this.segment.show();
this.viceSegment && this.viceSegment.show();
} else {
this.segment && this.segment.hide();
this.viceSegment && this.viceSegment.hide();
}
}
setShowStation(stationCode) {
if (!stationCode || this.model.stationCode === stationCode) {
this.segment && this.segment.show();
this.viceSegment && this.viceSegment.show();
this.isShowShape = true;
this.setState(this.model);
} else {
this.segment && this.segment.hide();
this.viceSegment && this.viceSegment.hide();
this.isShowShape = false;
}
}
getAnchorPoint() {
if (this.segment) {
const rect = this.segment.getBoundingRect();
return {x:rect.x, y:rect.y};
} else {
return {x:0, y:0};
}
}
}

23
src/jmapNew/utils/parser.js
View File

@ -32,7 +32,7 @@ export function createBoundingRect(view) {
}
export function calculateDCenter(viewRect, offsetX) {
var dx = offsetX - viewRect.width/2 - viewRect.x;
var dx = offsetX - viewRect.width / 2 - viewRect.x;
var dy = 0;
return { dx: dx, dy: dy };
}
@ -264,6 +264,10 @@ export function parser(data, skinCode, showConfig) {
mapDevice[elem.code] = createDevice(deviceType.DirectionRod, elem, propConvert, showConfig);
}, this);
zrUtil.each(data.signalButtonList || [], elem=> {
mapDevice[elem.code] = createDevice(deviceType.SignalButton, elem, propConvert, showConfig);
});
zrUtil.each(data.responderList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.Responder, elem, propConvert, showConfig);
}, this);
@ -283,14 +287,14 @@ export function parser(data, skinCode, showConfig) {
mapDevice[elem.code] = createDevice(deviceType.OverAp, elem, propConvert, showConfig);
});
// 二次处理
zrUtil.each(data.signalList || [], elem => {
const actual = mapDevice[elem.linkSignalCode];
if (actual && elem.type == 'TRANSMISSION') {
// 信号机别名列表
if (!actual.aliasCodes) { actual.aliasCodes = []; }
actual.aliasCodes.push(elem.code);
}
// 二次处理
zrUtil.each(data.signalList || [], elem => {
const actual = mapDevice[elem.linkSignalCode];
if (actual && elem.type == 'TRANSMISSION') {
// 信号机别名列表
if (!actual.aliasCodes) { actual.aliasCodes = []; }
actual.aliasCodes.push(elem.code);
}
}, this);
}
@ -373,6 +377,7 @@ export function updateMapData(state, model) {
case deviceType.FloodGate: updateForList(model, state, 'floodGateList'); break;
case deviceType.DirectionRod: updateForList(model, state, 'directionRodList'); break;
case deviceType.Responder: updateForList(model, state, 'responderList'); break;
case deviceType.SignalButton: updateForList(model, state, 'signalButtonList'); break;
}
}
}

7
src/store/modules/map.js
View File

@ -538,6 +538,13 @@ const map = {
return [];
}
},
signalButtonList: (state) => {
if (state.map) {
return state.map.signalButtonList || [];
} else {
return [];
}
},
responderList: (state) => {
if (state.map) {
return state.map.responderList || [];

7
src/views/newMap/newMapdraft/mapoperate/index.vue
View File

@ -67,6 +67,7 @@ import Arrow from './arrow';
import SplitScreen from './splitScreen';
import FloodGate from './floodGate';
import DirectionRod from './directionRod';
import SignalButton from './signalButton';
import { EventBus } from '@/scripts/event-bus';
export default {
@ -97,7 +98,8 @@ export default {
Arrow,
SplitScreen,
FloodGate,
DirectionRod
DirectionRod,
SignalButton
},
props: {
selected: {
@ -138,7 +140,8 @@ export default {
{label: '站间分隔', name:'SplitStation', menus:SplitStation},
{label: '箭头', name:'Arrow', menus:Arrow},
{label: '防淹门', name: 'FloodGate', menus: FloodGate},
{label: '方向杆', name: 'DirectionRod', menus: DirectionRod}
{label: '方向杆', name: 'DirectionRod', menus: DirectionRod},
{label: '信号按钮', name: 'SignalButton', menus: SignalButton }
],
selectDevice:'',
enabledTab: 'Section',

135
src/views/newMap/newMapdraft/mapoperate/signalButton.vue
View File

@ -24,8 +24,6 @@
</template>
<script>
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
import { mapGetters } from 'vuex';
import { getUID } from '@/jmapNew/utils/Uid';
import OperateProperty from './components/operateProperty';
@ -50,14 +48,14 @@ export default {
return {
activeName: 'first',
lazy: true,
skins: [],
field: '',
editModel: {
code: '',
prepend: 'H',
content: '',
font: '',
fontColor: '',
showConditions: '01',
name: '',
type: '',
signalCode: '',
sectionCode: '',
switchCode: '',
position: {
x: 0,
y: 0
@ -65,30 +63,41 @@ export default {
stationCode: ''
},
addModel: {
prepend: 'H',
content: '',
showConditions: '01',
name: '',
type: '',
position: {
x: 0,
y: 0
}
},
typeList: [
{ value: 'pass', label: '接车按钮' }
{ value: 'PICK', label: '接车按钮' },
{ value: 'PASS', label: '通过按钮' },
{ value: 'GUIDE', label: '引导按钮' },
{ value: 'FLEXIBLE', label: '变通按钮' },
{ value: 'RAMP_TERMINAL', label: '坡道终端按钮' },
{ value: 'TRAIN_TERMINAL', label: '列车终端按钮'},
{ value: 'SHUNT_TERMINAL', label: '调车终端按钮'}
],
centralizedStationList: [], // 设备集中站列表
rules: {
code: [
{ required: true, message: this.$t('rules.selectText'), trigger: 'blur' }
],
content: [
{ required: true, message: this.$t('rules.pleaseEnterContent'), trigger: 'blur' }
name: [
{ required: true, message: '请输入按钮名称', trigger: 'blur' }
],
font: [
{ required: true, message: this.$t('rules.textFont'), trigger: 'blur' }
type: [
{ required: true, message: '请选择按钮类型', trigger: 'change' }
],
fontColor: [
{ required: true, message: this.$t('rules.textFontColor'), trigger: 'blur' }
signalCode: [
{ required: true, message: '请选择关联的信号机设备', trigger: 'change' }
],
sectionCode: [
{ required: true, message: '请选择关联的区段设备', trigger: 'change' }
],
switchCode: [
{ required: true, message: '请选择关联的道岔设备', trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('rules.pleaseEnterXCoordinate'), trigger: 'blur' }
@ -101,16 +110,13 @@ export default {
},
computed: {
...mapGetters('map', [
'textList',
'signalButtonList',
'stationList',
'lineCode'
'lineCode',
'signalList',
'sectionList',
'switchList'
]),
showConditionsList() {
const showConditionsList = ConstConfig.ConstSelect.showConditionsList;
return Cookies.get('user_lang') == 'en'
? showConditionsList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
: showConditionsList.map(elem => { return { value: elem.value, label: elem.label }; });
},
form() {
const form = {
labelWidth: '130px',
@ -122,11 +128,12 @@ export default {
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.textCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.textList, deviceChange: this.deviceChange },
{ prop: 'content', label: this.$t('map.textContent'), type: 'fontContent', content: 'content', prepend: 'prepend', placeholder: this.$t('map.pleaseEnter') },
{ prop: 'font', label: this.$t('map.textFont'), type: 'font', placeholder: this.$t('map.font') },
{ prop: 'fontColor', label: this.$t('map.textFontColor'), type: 'color' },
{ prop: 'showConditions', label: this.$t('map.showConditions'), type: 'radio', optionLabel: 'label', optionValue:'value', radioList: this.showConditionsList},
{ prop: 'code', label: '按钮编码:', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.signalButtonList, deviceChange: this.deviceChange },
{ prop: 'name', label: '按钮名称:', type: 'input' },
{ prop: 'type', label: '按钮类型:', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.typeList},
{ prop: 'signalCode', label: '关联信号机:', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.signalList, hover: this.hover, buttonType: 'linkSignal', buttonShowType: this.isLinkSignalShow, isHidden: !this.isLinkSignal },
{ prop: 'sectionCode', label: '关联区段:', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.sectionList, hover: this.hover, buttonType: 'linkSection', buttonShowType: this.isLinkSectionShow, isHidden: !this.isLinkSection },
{ prop: 'switchCode', label: '关联道岔:', type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.switchList, hover: this.hover, buttonType: 'linkSwitch', buttonShowType: this.isLinkSwitchShow, isHidden: !this.isLinkSwitch },
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
@ -150,8 +157,8 @@ export default {
all:{
name:'',
item: [
{ prop: 'content', label: this.$t('map.textContent'), type: 'fontContent', content: 'content', prepend: 'prepend', placeholder: this.$t('map.pleaseEnter') },
{ prop: 'showConditions', label: this.$t('map.showConditions'), type: 'radio', optionLabel: 'label', optionValue:'value', radioList: this.showConditionsList},
{ prop: 'name', label: '按钮名称:', type: 'input' },
{ prop: 'type', label: '按钮类型:', type: 'select', optionLabel: 'label', optionValue: 'value', options: this.typeList},
{ prop: 'position', label: this.$t('map.textPoints'), type: 'coordinate', width: '120px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
@ -161,6 +168,26 @@ export default {
}
};
return form;
},
isLinkSignalShow() {
return this.field === 'linkSignal';
},
isLinkSignal() {
const list = ['PICK', 'PASS', 'GUIDE'];
return list.includes(this.editModel.type);
},
isLinkSectionShow() {
return this.field === 'linkSection';
},
isLinkSwitchShow() {
return this.field === 'linkSwitch';
},
isLinkSection() {
const list = ['RAMP_TERMINAL', 'TRAIN_TERMINAL', 'SHUNT_TERMINAL'];
return list.includes(this.editModel.type);
},
isLinkSwitch() {
return this.editModel.type === 'flexible';
}
},
methods: {
@ -169,18 +196,34 @@ export default {
this.centralizedStationList = this.stationList.filter(station=> station.centralized);
}
},
hover(field) {
this.field = field == this.field ? '' : field;
if (this.field) {
this.$emit('deviceSelect', 'SignalButton');
} else {
this.$emit('deviceSelect', '');
}
},
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.handleInit();
this.$refs.form && this.$refs.form.resetFields();
this.$refs.dataform && this.$refs.dataform.resetFields();
if (selected && selected._type.toUpperCase() === 'Text'.toUpperCase()) {
if (selected && selected._type.toUpperCase() === 'SignalButton'.toUpperCase()) {
this.handleInit();
this.$refs.form && this.$refs.form.resetFields();
this.$refs.dataform && this.$refs.dataform.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
[this.editModel.prepend, this.editModel.content] = selected.content.split('::');
} else if (this.field === 'linkSignal' && selected && selected._type.toUpperCase() === 'Signal'.toUpperCase()) {
this.activeName = 'first';
this.editModel.signalCode = selected.code;
} else if (this.field === 'linkSection' && selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
this.activeName = 'first';
this.editModel.sectionCode = selected.code;
} else if (this.field === 'linkSwitch' && selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
this.activeName = 'first';
this.editModel.switchCode = selected.code;
}
},
clearDeviceSelect() {
@ -188,11 +231,10 @@ export default {
},
create() {
const model = {
_type: 'Text',
code: getUID('Text', this.textList),
font: '14',
fontColor: '#FFFFFF',
content: `${this.addModel.prepend}::${this.addModel.content}`,
_type: 'SignalButton',
code: getUID('SignalButton', this.signalButtonList),
type: this.addModel.type,
name: this.addModel.name,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
@ -209,6 +251,13 @@ export default {
this.$refs.dataform.edit();
},
updateMapModel(data) {
if (this.isLinkSignal) {
data.sectionCode = ''; data.switchCode = '';
} else if (this.isLinkSection) {
data.signalCode = ''; data.switchCode = '';
} else if (this.isLinkSwitch) {
data.signalCode = ''; data.sectionCode = '';
}
this.$emit('updateMapModel', data);
}
}