绘图相关调整_(问题调整)
This commit is contained in:
fan
parent
0a51aa1e23
commit
a83b2cd2cd
@ -6,73 +6,73 @@ import EControl from '../element/EControl';
|
||||
import EMouse from './EMouse';
|
||||
|
||||
export default class LcControl extends Group {
|
||||
constructor(model, style) {
|
||||
super();
|
||||
this.z = 20;
|
||||
this._code = model.code;
|
||||
this._type = model._type;
|
||||
this.zlevel = model.zlevel;
|
||||
this.model = model;
|
||||
this.style = style;
|
||||
this.create();
|
||||
this.createMouseEvent();
|
||||
this.setState(model);
|
||||
}
|
||||
constructor(model, style) {
|
||||
super();
|
||||
this.z = 20;
|
||||
this._code = model.code;
|
||||
this._type = model._type;
|
||||
this.zlevel = model.zlevel;
|
||||
this.model = model;
|
||||
this.style = style;
|
||||
this.create();
|
||||
this.createMouseEvent();
|
||||
this.setState(model);
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.control = new EControl({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
arc: {
|
||||
shape: {
|
||||
cx: model.position.x,
|
||||
cy: model.position.y,
|
||||
r: this.style.LcControl.lamp.radiusR
|
||||
},
|
||||
lineWidth: 0,
|
||||
fill: this.style.LcControl.lamp.controlColor
|
||||
},
|
||||
text: {
|
||||
position: [0, 0],
|
||||
x: model.position.x,
|
||||
y: model.position.y + this.style.LcControl.lamp.radiusR + this.style.LcControl.text.distance,
|
||||
fontWeight: this.style.LcControl.text.fontWeight,
|
||||
fontSize: this.style.LcControl.text.fontSize,
|
||||
fontFamily: this.style.fontFamily,
|
||||
text: model.name,
|
||||
textFill: '#fff',
|
||||
textAlign: 'middle',
|
||||
textVerticalAlign: 'top'
|
||||
},
|
||||
style: this.style
|
||||
});
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.control = new EControl({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
arc: {
|
||||
shape: {
|
||||
cx: model.position.x,
|
||||
cy: model.position.y,
|
||||
r: this.style.LcControl.lamp.radiusR
|
||||
},
|
||||
lineWidth: 0,
|
||||
fill: this.style.LcControl.lamp.controlColor
|
||||
},
|
||||
text: {
|
||||
position: [0, 0],
|
||||
x: model.position.x,
|
||||
y: model.position.y + this.style.LcControl.lamp.radiusR + this.style.LcControl.text.distance,
|
||||
fontWeight: this.style.LcControl.text.fontWeight,
|
||||
fontSize: this.style.LcControl.text.fontSize,
|
||||
fontFamily: this.style.fontFamily,
|
||||
text: model.name,
|
||||
textFill: '#fff',
|
||||
textAlign: 'middle',
|
||||
textVerticalAlign: 'top'
|
||||
},
|
||||
style: this.style
|
||||
});
|
||||
|
||||
this.add(this.control);
|
||||
}
|
||||
this.add(this.control);
|
||||
}
|
||||
|
||||
// 设置状态
|
||||
setState(model) {
|
||||
}
|
||||
// 设置状态
|
||||
setState(model) {
|
||||
}
|
||||
|
||||
createMouseEvent() {
|
||||
if (this.style.LcControl.mouseOverStyle) {
|
||||
this.mouseEvent = new EMouse(this);
|
||||
this.add(this.mouseEvent);
|
||||
this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
|
||||
this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
|
||||
}
|
||||
}
|
||||
createMouseEvent() {
|
||||
if (this.style.LcControl.mouseOverStyle) {
|
||||
this.mouseEvent = new EMouse(this);
|
||||
this.add(this.mouseEvent);
|
||||
this.on('mouseout', (e) => { this.mouseEvent.mouseout(e); });
|
||||
this.on('mouseover', (e) => { this.mouseEvent.mouseover(e); });
|
||||
}
|
||||
}
|
||||
|
||||
getShapeTipPoint() {
|
||||
if (this.control) {
|
||||
var distance = 2;
|
||||
var rect = this.control.getBoundingRect();
|
||||
return {
|
||||
x: rect.x + rect.width / 2,
|
||||
y: rect.y - distance
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
getShapeTipPoint() {
|
||||
if (this.control) {
|
||||
var distance = 2;
|
||||
var rect = this.control.getBoundingRect();
|
||||
return {
|
||||
x: rect.x + rect.width / 2,
|
||||
y: rect.y - distance
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -10,16 +11,21 @@ import DelayInfo from './delayInfo';
|
||||
|
||||
export default {
|
||||
name: 'DelayBox',
|
||||
components: {
|
||||
DelayInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
delayShow: false,
|
||||
delayInfoList: []
|
||||
stationList: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
|
||||
watch: {
|
||||
'$store.state.map.stationList': function(val) {
|
||||
this.stationList = val;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,19 +1,72 @@
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DelayInfo',
|
||||
props: {
|
||||
delayInformation: {
|
||||
delayInfoList: {
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.info_box{
|
||||
border-top:1px solid #fff;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -137,7 +137,6 @@ export default {
|
||||
this.setDelayUnlockStatus(response.data, '00');
|
||||
this.initAutoSaveTask();
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
this.$message.error(this.$t('tip.failedLoadMap'));
|
||||
this.endViewLoading();
|
||||
});
|
||||
|
||||
@ -68,6 +68,7 @@
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
:clearable="item.clearable"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
|
||||
@ -342,7 +342,9 @@ export default {
|
||||
value: '02',
|
||||
label: this.$t('map.sectionAssociationMode')
|
||||
}],
|
||||
AssociateSectionList: []
|
||||
AssociateSectionList: [],
|
||||
oldLeftSectionCode: '',
|
||||
oldRightSectionCode: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -372,8 +374,8 @@ export default {
|
||||
{ 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: '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: 'rightSectionCode', label: this.$t('map.rightAssociatedSection'), type: 'selectHover', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList},
|
||||
{ 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, 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: 'isStandTrack', label: this.$t('map.isStandTrack'), type: 'checkbox', isHidden: !this.isStandTrackShow }, // 1
|
||||
@ -444,16 +446,16 @@ export default {
|
||||
},
|
||||
rules() {
|
||||
var validateLeftSection = (rule, value, callback) => {
|
||||
const leftSection = value ? this.$store.getters['map/getDeviceByCode'](value) : '';
|
||||
if (leftSection && (leftSection.points[1].x !== this.editModel.points[0].x || leftSection.points[1].y !== this.editModel.points[0].y )) {
|
||||
const leftSection = value ? this.$store.getters['map/getDeviceByCode'](value) : null;
|
||||
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')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validateRightSection = (rule, value, callback) => {
|
||||
const rightSection = value ? this.$store.getters['map/getDeviceByCode'](value) : '';
|
||||
if (rightSection && (rightSection.points[0].x !== this.editModel.points[1].x || rightSection.points[0].y !== this.editModel.points[1].y )) {
|
||||
const rightSection = value ? this.$store.getters['map/getDeviceByCode'](value) : null;
|
||||
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')));
|
||||
} else {
|
||||
callback();
|
||||
@ -598,6 +600,12 @@ export default {
|
||||
},
|
||||
isLeftSectionButtonShow() {
|
||||
return this.field === 'leftSection';
|
||||
},
|
||||
isRightSectionButtonShow() {
|
||||
return this.field === 'rightSection';
|
||||
},
|
||||
hasAssociatedSection() {
|
||||
return this.editModel.type === '01' || this.editModel.type === '03';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -647,16 +655,20 @@ export default {
|
||||
if (!this.fieldS) { // 判断是否激活选择站台
|
||||
if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
|
||||
if (this.field === 'leftSection') {
|
||||
this.editModel.leftSectionCode = selected.code;
|
||||
this.activeName = 'first';
|
||||
this.field = '';
|
||||
this.$emit('fieldSelect', '');
|
||||
if (selected.type === '01' || selected.type === '03') {
|
||||
this.editModel.leftSectionCode = selected.code;
|
||||
this.activeName = 'first';
|
||||
this.field = '';
|
||||
this.$emit('fieldSelect', '');
|
||||
}
|
||||
return;
|
||||
} else if (this.field === 'rightSection') {
|
||||
this.editModel.rightSectionCode = selected.code;
|
||||
this.activeName = 'first';
|
||||
this.field = '';
|
||||
this.$emit('fieldSelect', '');
|
||||
if ((selected.type === '01' || selected.type === '03')) {
|
||||
this.editModel.rightSectionCode = selected.code;
|
||||
this.activeName = 'first';
|
||||
this.field = '';
|
||||
this.$emit('fieldSelect', '');
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.$refs.dataform.resetFields();
|
||||
@ -667,6 +679,8 @@ export default {
|
||||
this.editModel.isSegmentation = selected.isSegmentation || false;
|
||||
this.editModel.points = 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.addModel.splitOffsetMax = Math.sqrt(new JTriangle(selected.points[0], selected.points[selected.points.length - 1]).abspowz);
|
||||
@ -902,6 +916,10 @@ export default {
|
||||
edit() {
|
||||
this.$refs['dataform'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.editModel.type === '03' && this.editModel.leftSectionCode && this.editModel.rightSectionCode) {
|
||||
this.$messageBox('道岔区段应仅有一侧关联区段！');
|
||||
return;
|
||||
}
|
||||
const models = [];
|
||||
const model = deepAssign(this.editModel, {_type: 'Section'}); // 修改元素model
|
||||
model.leftStopPointOffset = Number(model.leftStopPointOffset);
|
||||
@ -933,11 +951,50 @@ export default {
|
||||
this.fieldS = '';
|
||||
this.$emit('updateMapModel', models);
|
||||
this.oldPoint = JSON.parse(JSON.stringify(model.points));
|
||||
this.oldLeftSectionCode = model.leftSectionCode;
|
||||
this.oldRightSectionCode = model.rightSectionCode;
|
||||
} else {
|
||||
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() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user