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-03 09:24:44 +08:00
parent 97af268212
commit aef74d32da
10 changed files with 273 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/jmapNew/config/skinCode/batong_01.js
View File

@ -37,6 +37,17 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
switchText: {
show: false, // 道岔区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台轨名称
show: true, // 站台轨名称显示
opposite: true, // 对称相反

11
src/jmapNew/config/skinCode/bejing_01.js
View File

@ -37,6 +37,17 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
switchText: {
show: false, // 道岔区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台轨名称
show: true, // 站台轨名称显示
opposite: true, // 对称相反

11
src/jmapNew/config/skinCode/chengdu_03.js
View File

@ -37,6 +37,17 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
switchText: {
show: false, // 道岔区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称

11
src/jmapNew/config/skinCode/chengdu_04.js
View File

@ -37,6 +37,17 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
switchText: {
show: false, // 道岔区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台
show: true, // 站台轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称

21
src/jmapNew/config/skinCode/fuzhou_01.js
View File

@ -27,7 +27,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: true, // 逻辑区段名称显示
show: false, // 逻辑区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 6, // 文字离区段距离
fontSize: 8, // 字体大小
@ -37,6 +37,17 @@ class SkinCode extends defaultStyle {
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
switchText: {
show: false, // 道岔区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
fontColor: '#FFFFFF', // 字体颜色
textAlign: 'center', // 水平对齐方式
textPosition: 'inside', // 文字位置
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
@ -243,10 +254,10 @@ class SkinCode extends defaultStyle {
fontWeight: 'normal', // 字体粗细
textAlign: 'middle', // 字体水平对齐
textVerticalAlign: 'top', // 字体垂直对齐
centerControlText: '中控', // 中控文字内容
substationControlText: '站控', // 站控文字内容
emergencyControlText:'紧急站控', // 紧急站控文字内容
interconnectedControlText:'连锁控' // 连锁控文字内容
centerControlText: '中控', // 中控文字内容
substationControlText: '站控', // 站控文字内容
emergencyControlText:'紧急站控', // 紧急站控文字内容
interconnectedControlText:'连锁控' // 连锁控文字内容
// stationCenterControlText: '站中控', // 站中控文字内容
// generalAlarmControlText: '总报警' // 总报警文字内容
},

176
src/jmapNew/shape/Section/ELines.js
View File

@ -4,99 +4,99 @@ import BezierCurve from 'zrender/src/graphic/shape/BezierCurve';
/** 创建区段线集合*/
export default class ELines extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.create(model);
}
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) {
if (model.isCurve) {
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
shape[`cpy${i}`] = model.points[i].y;
}
create(model) {
/** 创建区段*/
if (model && model.points.length > 1) {
if (model.isCurve) {
const shape = {};
for (let i = 1; i < (model.points.length - 1); i++) {
shape[`cpx${i}`] = model.points[i].x;
shape[`cpy${i}`] = model.points[i].y;
}
shape[`x1`] = model.points[0].x;
shape[`y1`] = model.points[0].y;
shape[`x2`] = model.points[model.points.length - 1].x;
shape[`y2`] = model.points[model.points.length - 1].y;
shape[`x1`] = model.points[0].x;
shape[`y1`] = model.points[0].y;
shape[`x2`] = model.points[model.points.length - 1].x;
shape[`y2`] = model.points[model.points.length - 1].y;
this.add(new BezierCurve({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z + 1,
culling: true,
shape: shape,
style: {
lineWidth: model.style.Section.line.width,
stroke: model.style.Section.line.spareColor,
fillOpacity: 0
}
}));
} else {
for (let i = 0; i < (model.points.length - 1); i++) {
this.add(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.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.style.Section.line.width,
stroke: model.style.Section.line.spareColor
}
}));
}
}
}
}
this.add(new BezierCurve({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z + 1,
culling: true,
shape: shape,
style: {
lineWidth: model.style.Section.line.width,
stroke: model.style.Section.line.spareColor,
fillOpacity: 0
}
}));
} else {
for (let i = 0; i < (model.points.length - 1); i++) {
this.add(new Line({
isLine: true,
zlevel: this.zlevel,
progressive: model.progressive,
z: this.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.style.Section.line.width,
stroke: model.style.Section.line.spareColor
}
}));
}
}
}
}
setStyle(styles) {
this.eachChild((child) => {
if (child.setStyle && child.isLine) {
child.setStyle(styles);
}
});
}
setStyle(styles) {
this.eachChild((child) => {
if (child.setStyle && child.isLine) {
child.setStyle(styles);
}
});
}
animateStyle(loop, animates) {
if (animates && animates.length) {
this.eachChild((child) => {
if (child.animateStyle && child.isLine) {
let an = child.animateStyle(loop);
animates.forEach(elem => {
an = an.when(elem.time, elem.styles);
});
an.start();
}
});
}
}
animateStyle(loop, animates) {
if (animates && animates.length) {
this.eachChild((child) => {
if (child.animateStyle && child.isLine) {
let an = child.animateStyle(loop);
animates.forEach(elem => {
an = an.when(elem.time, elem.styles);
});
an.start();
}
});
}
}
stopAnimation(flag) {
this.eachChild((child) => {
if (child.stopAnimation && child.isLine) {
child.stopAnimation(flag);
}
});
}
stopAnimation(flag) {
this.eachChild((child) => {
if (child.stopAnimation && child.isLine) {
child.stopAnimation(flag);
}
});
}
setBorderVisible(isVisible) {
this.lineBorder && this.lineBorder.hide();
if (isVisible) {
this.lineBorder && this.lineBorder.show();
}
}
setBorderVisible(isVisible) {
this.lineBorder && this.lineBorder.hide();
if (isVisible) {
this.lineBorder && this.lineBorder.show();
}
}
}

158
src/jmapNew/shape/Section/index.js
View File

@ -10,6 +10,7 @@ import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路
import ELimitName from './ELimitName'; // 成都三号线 限速名称
import JTriangle from '../../utils/JTriangle';
import Rect from 'zrender/src/graphic/shape/Rect';
import router from '@/router';
/** 区段*/
export default class Section extends Group {
@ -231,76 +232,93 @@ export default class Section extends Group {
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
const drict = model.trainPosType != '01' ? 1 : -1;
/** 区段名称 (逻辑区段名称 或 物理区段名称 是否显示)*/
if (style.Section.logicText.show || style.Section.text.show) {
let tempx = x;
let tempy = y;
// 创建区段名称
if (model.type !== '04') {
if (model.type == '02') {
const opposite = style.Section.logicText.opposite ? -1 : 1;
tempx += traingle.getSin(style.Section.logicText.distance);
tempy += traingle.getCos(style.Section.logicText.distance) * (style.Section.logicText.position || opposite * drict);
if (style.Section.logicText.show) {
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y,
fontWeight: style.Section.logicText.fontWeight,
fontSize: style.Section.logicText.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.logicText.fontColor,
textAlign: style.Section.logicText.textAlign,
textPosition: style.Section.logicText.textPosition,
textVerticalAlign: style.Section.logicText.textVerticalAlign
});
this.add(this.name);
}
} else if (style.Section.text.show && !model.isSwitchSection) {
const opposite = style.Section.text.opposite ? -1 : 1;
tempx += traingle.getSin(style.Section.text.distance);
tempy += traingle.getCos(style.Section.text.distance) * (style.Section.text.position || opposite * drict);
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
this.add(this.name);
}
} else {
if (style.Section.text.show) {
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y + style.Section.text.distance * drict,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
this.add(this.name);
}
let tempx = x;
let tempy = y;
if (model.type === '01') {
if (style.Section.text.show && !model.isSwitchSection) {
const opposite = style.Section.text.opposite ? -1 : 1;
tempx += traingle.getSin(style.Section.text.distance);
tempy += traingle.getCos(style.Section.text.distance) * (style.Section.text.position || opposite * drict);
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
this.add(this.name);
}
} else if (model.type === '02') {
if (style.Section.logicText.show) {
const opposite = style.Section.logicText.opposite ? -1 : 1;
tempx += traingle.getSin(style.Section.logicText.distance);
tempy += traingle.getCos(style.Section.logicText.distance) * (style.Section.logicText.position || opposite * drict);
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y,
fontWeight: style.Section.logicText.fontWeight,
fontSize: style.Section.logicText.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.logicText.fontColor,
textAlign: style.Section.logicText.textAlign,
textPosition: style.Section.logicText.textPosition,
textVerticalAlign: style.Section.logicText.textVerticalAlign
});
this.add(this.name);
}
} else if (model.type === '03') {
if (style.Section.switchText.show) {
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y + style.Section.text.distance * drict,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
this.add(this.name);
}
} else if (model.type === '04') {
if (router.currentRoute.path.startsWith('/design/usermap/map/draw') && router.currentRoute.path.endsWith('/draft') ) {
this.name = new ETextName({
zlevel: this.zlevel,
z: this.z + 2,
style: this.style,
silent: false,
x: tempx + model.namePosition.x,
y: tempy + model.namePosition.y + style.Section.text.distance * drict,
fontWeight: style.Section.text.fontWeight,
fontSize: style.Section.text.fontSize,
fontFamily: style.fontFamily,
text: model.name,
textFill: style.Section.text.fontColor,
textAlign: style.Section.text.textAlign,
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
this.add(this.name);
}
}

1
src/views/designUser/mapmanage/create.vue
View File

@ -145,6 +145,7 @@ export default {
this.$refs['newForm'].validate((valid) => {
if (valid) {
this.loading = true;
this.newModel['drawWay'] = '0';
newMap(this.newModel).then(response => {
this.loading = false;
this.$emit('refresh');

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

@ -353,7 +353,8 @@ export default {
}, {
value: '02',
label: this.$t('map.sectionAssociationMode')
}]
}],
AssociateSectionList: []
};
},
computed: {
@ -383,8 +384,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: 'select', optionLabel: 'name', optionValue: 'code', clearable: true, options: this.PhysicalSectionList},
{ prop: 'rightSectionCode', label: this.$t('map.rightAssociatedSection'), type: 'select', optionLabel: 'name', optionValue: 'code', clearable: true, options: this.PhysicalSectionList},
{ prop: 'leftSectionCode', label: this.$t('map.leftAssociatedSection'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList},
{ prop: 'rightSectionCode', label: this.$t('map.rightAssociatedSection'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', clearable: true, options: this.AssociateSectionList},
{ 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
@ -658,6 +659,7 @@ export default {
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.AssociateSectionList = this.sectionList.filter(item => { return item.type === '01' && item.code !== selected.code; });
if (!this.fieldS) { // 判断是否激活选择站台
this.$refs.dataform.resetFields();
if (selected && selected._type.toUpperCase() === 'Section'.toUpperCase()) {
@ -1007,19 +1009,29 @@ export default {
};
models.push(model);
}
const leftAssociatedSection = deepAssign({}, this.$store.getters['map/getDeviceByCode'](selected.leftSectionCode));
const rightAssociatedSection = deepAssign({}, this.$store.getters['map/getDeviceByCode'](selected.rightSectionCode));
models.forEach((elem, index) => {
if (index === 0) {
elem.leftSectionCode = selected.leftSectionCode;
elem.rightSectionCode = models[index + 1].code;
if (leftAssociatedSection) {
leftAssociatedSection.rightSectionCode = elem.code;
}
} else if (index === models.length - 1) {
elem.leftSectionCode = models[index - 1].code;
elem.rightSectionCode = selected.rightSectionCode;
if (rightAssociatedSection) {
rightAssociatedSection.leftSectionCode = elem.code;
}
} else {
elem.leftSectionCode = models[index - 1].code;
elem.rightSectionCode = models[index + 1].code;
}
});
models.push(deepAssign(selected, { _dispose: true }));
leftAssociatedSection && models.push(leftAssociatedSection);
rightAssociatedSection && models.push(rightAssociatedSection);
this.$emit('updateMapModel', models); // 添加新增拆分区段
}
}
@ -1096,6 +1108,16 @@ export default {
model.leftSectionCode = lsection.leftSectionCode;
model.rightSectionCode = rsection.rightSectionCode;
models.push(model);
const leftAssociatedSection = deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.leftSectionCode));
const rightAssociatedSection = deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.rightSectionCode));
if (leftAssociatedSection) {
leftAssociatedSection.rightSectionCode = model.code;
models.push(leftAssociatedSection);
}
if (rightAssociatedSection) {
rightAssociatedSection.leftSectionCode = model.code;
models.push(rightAssociatedSection);
}
this.$emit('updateMapModel', models);
}
if (lsection.points[0].x == rsection.points[rsection.points.length - 1].x && lsection.points[0].y == rsection.points[rsection.points.length - 1].y) {
@ -1118,6 +1140,16 @@ export default {
model.leftSectionCode = rsection.leftSectionCode;
model.rightSectionCode = lsection.rightSectionCode;
models.push(model);
const leftAssociatedSection = deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.leftSectionCode));
const rightAssociatedSection = deepAssign({}, this.$store.getters['map/getDeviceByCode'](model.rightSectionCode));
if (leftAssociatedSection) {
leftAssociatedSection.rightSectionCode = model.code;
models.push(leftAssociatedSection);
}
if (rightAssociatedSection) {
rightAssociatedSection.leftSectionCode = model.code;
models.push(rightAssociatedSection);
}
this.$emit('updateMapModel', models);
}
}

2
src/views/newMap/newMapdraft/mapoperate/signal.vue
View File

@ -257,7 +257,7 @@ export default {
{ prop: 'uniqueName', label: this.$t('map.signalUniqueName'), type: 'input' },
{ prop: 'useType', label: this.$t('map.signalUseType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalUseTypeList },
{ prop: 'potLampType', label: this.$t('map.potLampType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.SignalPotLampTypeList },
{ prop: 'sectionCode', label: this.$t('map.belongsSection'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.signalSectionList },
{ prop: 'sectionCode', label: this.$t('map.belongsSection'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.signalSectionList, disabled: true },
{ prop: 'offset', label: this.$t('map.signalOffset'), type: 'number', min: 0, placeholder: this.$t('tip.meter') }
]