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 2019-12-05 14:54:33 +08:00
parent 0a51aa1e23
commit a83b2cd2cd
6 changed files with 212 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/jmapNew/shape/LcControl/index.js
View File

@ -6,73 +6,73 @@ import EControl from '../element/EControl';
import EMouse from './EMouse'; import EMouse from './EMouse';
export default class LcControl extends Group { export default class LcControl extends Group {
constructor(model, style) { constructor(model, style) {
super(); super();
this.z = 20; this.z = 20;
this._code = model.code; this._code = model.code;
this._type = model._type; this._type = model._type;
this.zlevel = model.zlevel; this.zlevel = model.zlevel;
this.model = model; this.model = model;
this.style = style; this.style = style;
this.create(); this.create();
this.createMouseEvent(); this.createMouseEvent();
this.setState(model); this.setState(model);
} }
create() { create() {
const model = this.model; const model = this.model;
this.control = new EControl({ this.control = new EControl({
zlevel: this.zlevel, zlevel: this.zlevel,
z: this.z, z: this.z,
arc: { arc: {
shape: { shape: {
cx: model.position.x, cx: model.position.x,
cy: model.position.y, cy: model.position.y,
r: this.style.LcControl.lamp.radiusR r: this.style.LcControl.lamp.radiusR
}, },
lineWidth: 0, lineWidth: 0,
fill: this.style.LcControl.lamp.controlColor fill: this.style.LcControl.lamp.controlColor
}, },
text: { text: {
position: [0, 0], position: [0, 0],
x: model.position.x, x: model.position.x,
y: model.position.y + this.style.LcControl.lamp.radiusR + this.style.LcControl.text.distance, y: model.position.y + this.style.LcControl.lamp.radiusR + this.style.LcControl.text.distance,
fontWeight: this.style.LcControl.text.fontWeight, fontWeight: this.style.LcControl.text.fontWeight,
fontSize: this.style.LcControl.text.fontSize, fontSize: this.style.LcControl.text.fontSize,
fontFamily: this.style.fontFamily, fontFamily: this.style.fontFamily,
text: model.name, text: model.name,
textFill: '#fff', textFill: '#fff',
textAlign: 'middle', textAlign: 'middle',
textVerticalAlign: 'top' textVerticalAlign: 'top'
}, },
style: this.style style: this.style
}); });
this.add(this.control); this.add(this.control);
} }
// 设置状态 // 设置状态
setState(model) { setState(model) {
} }
createMouseEvent() { createMouseEvent() {
if (this.style.LcControl.mouseOverStyle) { if (this.style.LcControl.mouseOverStyle) {
this.mouseEvent = new EMouse(this); this.mouseEvent = new EMouse(this);
this.add(this.mouseEvent); this.add(this.mouseEvent);
this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); }); this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); }); this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
} }
} }
getShapeTipPoint() { getShapeTipPoint() {
if (this.control) { if (this.control) {
var distance = 2; var distance = 2;
var rect = this.control.getBoundingRect(); var rect = this.control.getBoundingRect();
return { return {
x: rect.x + rect.width / 2, x: rect.x + rect.width / 2,
y: rect.y - distance y: rect.y - distance
}; };
} }
return null; return null;
} }
} }

18
src/views/mapsystem/plugin/delayBox.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div v-if="delayShow"> <div v-if="delayShow">
<div v-for="item in delayInfoList" /> <div v-for="item in stationList">
<delay-info v-if="item.delayInfo" :delay-info-list="item.delayInfo" position="item.points" />
</div>
</div> </div>
</template> </template>
@ -10,16 +11,21 @@ import DelayInfo from './delayInfo';
export default { export default {
name: 'DelayBox', name: 'DelayBox',
components: {
DelayInfo
},
data() { data() {
return { return {
delayShow: false, delayShow: false,
delayInfoList: [] stationList: []
}; };
}, },
methods: { watch: {
doShow() { '$store.state.map.stationList': function(val) {
this.stationList = val;
} }
},
methods: {
} }
}; };
</script> </script>

61
src/views/mapsystem/plugin/delayInfo.vue
View File

@ -1,19 +1,72 @@
<template> <template>
<div><span>人解</span><span>信号机名</span><span>时间</span></div> <div v-show="showDelayBox" class="info_box" :style="{left: tPosition.x+'px', top: tPosition.y+'px' }">
<el-scrollbal>
<div v-for="item in delayInfoList"><span>人解</span><span>信号机名</span><span>时间</span></div>
</el-scrollbal>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'DelayInfo', name: 'DelayInfo',
props: { props: {
delayInformation: { delayInfoList: {
type: Object, type: Object,
required: true required: true,
default: function () {
return [];
}
},
position: {
type: Object,
required: true,
default: function () {
return {
x: 0,
y: 0
};
}
}
},
data() {
return {
tPosition: {
x: 0,
y: 0
},
showDelayBox: true
};
},
watch: {
'position.x': function (val) {
this.handlePosition();
},
'position.y': function (val) {
this.handlePosition();
}
},
methods: {
handlePosition() {
const offset = this.$store.state.config.canvasOffset;
this.tPosition = {
x: this.position.x + offset.x,
y: this.position.y + offset.y
};
if (this.tPosition.x < 0 || this.tPosition < 0) {
this.showDelayBox = false;
} else {
this.showDelayBox = true;
}
} }
} }
}; };
</script> </script>
<style scoped> <style scoped>
.info_box{
border-top:1px solid #fff;
height: auto;
max-height: 200px;
background-color: #000;
}
</style> </style>

1
src/views/newMap/newMapdraft/index.vue
View File

@ -137,7 +137,6 @@ export default {
this.setDelayUnlockStatus(response.data, '00'); this.setDelayUnlockStatus(response.data, '00');
this.initAutoSaveTask(); this.initAutoSaveTask();
}).catch((error) => { }).catch((error) => {
console.log(error);
this.$message.error(this.$t('tip.failedLoadMap')); this.$message.error(this.$t('tip.failedLoadMap'));
this.endViewLoading(); this.endViewLoading();
}); });

1
src/views/newMap/newMapdraft/mapoperate/config/list.vue
View File

@ -68,6 +68,7 @@
filterable filterable
:placeholder="item.placeholder" :placeholder="item.placeholder"
:disabled="item.disabled" :disabled="item.disabled"
:clearable="item.clearable"
> >
<el-option <el-option
v-for="option in item.options" v-for="option in item.options"

93
src/views/newMap/newMapdraft/mapoperate/section.vue
View File

@ -342,7 +342,9 @@ export default {
value: '02', value: '02',
label: this.$t('map.sectionAssociationMode') label: this.$t('map.sectionAssociationMode')
}], }],
AssociateSectionList: [] AssociateSectionList: [],
oldLeftSectionCode: '',
oldRightSectionCode: ''
}; };
}, },
computed: { computed: {
@ -372,8 +374,8 @@ export default {
{ prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' } { prop: 'namePosition.y', firstLevel: 'namePosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }, ] },
{ prop: 'type', label: this.$t('map.sectionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SectionTypeList}, { prop: 'type', label: this.$t('map.sectionType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SectionTypeList},
{ prop: 'leftSectionCode', label: this.$t('map.leftAssociatedSection'), type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList, hover: this.hover, buttonType: 'leftSection', buttonShowType: this.isLeftSectionButtonShow}, { prop: 'leftSectionCode', label: this.$t('map.leftAssociatedSection'), type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList, hover: this.hover, buttonType: 'leftSection', buttonShowType: this.isLeftSectionButtonShow, isHidden: !this.hasAssociatedSection},
{ prop: 'rightSectionCode', label: this.$t('map.rightAssociatedSection'), type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList}, { prop: 'rightSectionCode', label: this.$t('map.rightAssociatedSection'), type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList, hover: this.hover, buttonType: 'rightSection', buttonShowType: this.isRightSectionButtonShow, isHidden: !this.hasAssociatedSection},
{ prop: 'parentCode', label: this.$t('map.associatedSection'), type: 'select', mode: true, optionLabel: 'name&&code', optionValue: 'code', disabled: true, options: this.sectionList, isHidden: !this.isParentCode }, { prop: 'parentCode', label: this.$t('map.associatedSection'), type: 'select', mode: true, optionLabel: 'name&&code', optionValue: 'code', disabled: true, options: this.sectionList, isHidden: !this.isParentCode },
{ prop: 'isStandTrack', label: this.$t('map.isStandTrack'), type: 'checkbox', isHidden: !this.isStandTrackShow }, // 1 { prop: 'isStandTrack', label: this.$t('map.isStandTrack'), type: 'checkbox', isHidden: !this.isStandTrackShow }, // 1
@ -444,16 +446,16 @@ export default {
}, },
rules() { rules() {
var validateLeftSection = (rule, value, callback) => { var validateLeftSection = (rule, value, callback) => {
const leftSection = value ? this.$store.getters['map/getDeviceByCode'](value) : ''; const leftSection = value ? this.$store.getters['map/getDeviceByCode'](value) : null;
if (leftSection && (leftSection.points[1].x !== this.editModel.points[0].x || leftSection.points[1].y !== this.editModel.points[0].y )) { if (leftSection && !(this.checkPointsCoincide(leftSection.points[leftSection.points.length - 1], this.editModel.points[0].x) || this.checkPointsCoincide(leftSection.points[leftSection.points.length - 1], this.oldPoint[0]) )) {
callback(new Error(this.$t('rules.theLeftEndOfTheSelectedAssociatedSectionIsNotAdjacent'))); callback(new Error(this.$t('rules.theLeftEndOfTheSelectedAssociatedSectionIsNotAdjacent')));
} else { } else {
callback(); callback();
} }
}; };
var validateRightSection = (rule, value, callback) => { var validateRightSection = (rule, value, callback) => {
const rightSection = value ? this.$store.getters['map/getDeviceByCode'](value) : ''; const rightSection = value ? this.$store.getters['map/getDeviceByCode'](value) : null;
if (rightSection && (rightSection.points[0].x !== this.editModel.points[1].x || rightSection.points[0].y !== this.editModel.points[1].y )) { if (rightSection && !(this.checkPointsCoincide(rightSection.points[0], this.editModel.points[this.editModel.points.length - 1]) || this.checkPointsCoincide(rightSection.points[0], this.oldPoint[this.oldPoint.length - 1]))) {
callback(new Error(this.$t('rules.theRightEndOfTheSelectedAssociatedSectionIsNotAdjacent'))); callback(new Error(this.$t('rules.theRightEndOfTheSelectedAssociatedSectionIsNotAdjacent')));
} else { } else {
callback(); callback();
@ -598,6 +600,12 @@ export default {
}, },
isLeftSectionButtonShow() { isLeftSectionButtonShow() {
return this.field === 'leftSection'; return this.field === 'leftSection';
},
isRightSectionButtonShow() {
return this.field === 'rightSection';
},
hasAssociatedSection() {
return this.editModel.type === '01' || this.editModel.type === '03';
} }
}, },
watch: { watch: {
@ -647,16 +655,20 @@ export default {
if (!this.fieldS) { // 判断是否激活选择站台 if (!this.fieldS) { // 判断是否激活选择站台
if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) { if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
if (this.field === 'leftSection') { if (this.field === 'leftSection') {
this.editModel.leftSectionCode = selected.code; if (selected.type === '01' || selected.type === '03') {
this.activeName = 'first'; this.editModel.leftSectionCode = selected.code;
this.field = ''; this.activeName = 'first';
this.$emit('fieldSelect', ''); this.field = '';
this.$emit('fieldSelect', '');
}
return; return;
} else if (this.field === 'rightSection') { } else if (this.field === 'rightSection') {
this.editModel.rightSectionCode = selected.code; if ((selected.type === '01' || selected.type === '03')) {
this.activeName = 'first'; this.editModel.rightSectionCode = selected.code;
this.field = ''; this.activeName = 'first';
this.$emit('fieldSelect', ''); this.field = '';
this.$emit('fieldSelect', '');
}
return; return;
} }
this.$refs.dataform.resetFields(); this.$refs.dataform.resetFields();
@ -667,6 +679,8 @@ export default {
this.editModel.isSegmentation = selected.isSegmentation || false; this.editModel.isSegmentation = selected.isSegmentation || false;
this.editModel.points = JSON.parse(JSON.stringify(selected.points)); this.editModel.points = JSON.parse(JSON.stringify(selected.points));
this.oldPoint = JSON.parse(JSON.stringify(selected.points)); this.oldPoint = JSON.parse(JSON.stringify(selected.points));
this.oldLeftSectionCode = selected.leftSectionCode;
this.oldRightSectionCode = selected.rightSectionCode;
this.editModel.lengthFact = selected.lengthFact || 0; this.editModel.lengthFact = selected.lengthFact || 0;
this.addModel.splitOffsetMax = Math.sqrt(new JTriangle(selected.points[0], selected.points[selected.points.length - 1]).abspowz); this.addModel.splitOffsetMax = Math.sqrt(new JTriangle(selected.points[0], selected.points[selected.points.length - 1]).abspowz);
@ -902,6 +916,10 @@ export default {
edit() { edit() {
this.$refs['dataform'].validate((valid) => { this.$refs['dataform'].validate((valid) => {
if (valid) { if (valid) {
if (this.editModel.type === '03' && this.editModel.leftSectionCode && this.editModel.rightSectionCode) {
this.$messageBox('道岔区段应仅有一侧关联区段！');
return;
}
const models = []; const models = [];
const model = deepAssign(this.editModel, {_type: 'Section'}); // 修改元素model const model = deepAssign(this.editModel, {_type: 'Section'}); // 修改元素model
model.leftStopPointOffset = Number(model.leftStopPointOffset); model.leftStopPointOffset = Number(model.leftStopPointOffset);
@ -933,11 +951,50 @@ export default {
this.fieldS = ''; this.fieldS = '';
this.$emit('updateMapModel', models); this.$emit('updateMapModel', models);
this.oldPoint = JSON.parse(JSON.stringify(model.points)); this.oldPoint = JSON.parse(JSON.stringify(model.points));
this.oldLeftSectionCode = model.leftSectionCode;
this.oldRightSectionCode = model.rightSectionCode;
} else { } else {
this.$message('还有属性未填写，修改未生效！'); this.$message('还有属性未填写，修改未生效！');
} }
}); });
}, },
handleAssociatedSectionChange(model) { // 处理因该区段关联区段改变影响的区段数据
const models = [];
if (model.leftSectionCode !== this.oldLeftSectionCode) {
const editLeftSection = this.getSectionByCode(model.leftSectionCode);
const oldEditLeftSection = this.getSectionByCode(this.oldLeftSectionCode);
if (editLeftSection) {
editLeftSection.rightSectionCode = model.code;
models.push(editLeftSection);
}
if (oldEditLeftSection) {
oldEditLeftSection.rightSectionCode = '';
models.push(oldEditLeftSection);
}
}
if (model.rightSectionCode !== this.oldRightSectionCode) {
const editRightSection = this.getSectionByCode(model.rightSectionCode);
const oldEditRightSection = this.getSectionByCode(this.oldRightSectionCode);
if (editRightSection) {
editRightSection.leftSectionCode = model.code;
models.push(editRightSection);
}
if (oldEditRightSection) {
oldEditRightSection.leftSectionCode = '';
models.push(oldEditRightSection);
}
}
return models;
},
getSectionByCode(code) { // 根据sectionCode 获取深拷贝的section对象
if (code) {
const section = deepAssign({}, this.$store.getters['map/getDeviceByCode'](code) || {});
if (JSON.stringify(section) !== '{}') {
return section;
}
}
return null;
},
// 删除对象 // 删除对象
deleteObj() { deleteObj() {
const models = []; const models = [];
@ -1170,6 +1227,12 @@ export default {
} }
} }
}); });
},
checkPointsCoincide(point1, point2) { // 校验两点是否重合
if (point1 && point2) {
return point1.x === point2.x && point1.y === point2.y;
}
return false;
} }
} }
}; };