desc: 修改名称显示放到皮肤配置中

This commit is contained in:
zyy 2019-08-23 14:24:30 +08:00
parent f30084539a
commit 2250bc970d
20 changed files with 166 additions and 113 deletions

View File

@ -27,7 +27,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: { // 逻辑区段名称
show: true, // 逻辑区段名称显示
show: false, // 逻辑区段名称显示
position: -1, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 11, // 文字离区段距离
fontSize: 11, // 字体大小
@ -138,6 +138,7 @@ class SkinCode extends defaultStyle {
standardWidth: 1.5 // 灯柱宽度
},
text: {
show: true, // 信号机名称显示
distance: 3, // 文字和灯杆的距离
isNoRotation: true, // 是否禁止旋转
isAlignCenter: false, // 信号字体对其方式
@ -303,12 +304,16 @@ class SkinCode extends defaultStyle {
};
this[deviceType.Station] = {
text: {
show: true // 公里标名称显示
},
kilometerPosition: 'down', // 公里标位置
fontWeight: 'bold' // 文字错细
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
offset: {x: -15, y: -10}, // 道岔名称与区段距离
fontSize: 10, // 字体大小

View File

@ -16,6 +16,7 @@ class SkinCode extends defaultStyle {
routeColor: true // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
@ -26,6 +27,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: false, // 逻辑区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -36,6 +38,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
@ -46,6 +49,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
show: true, // 折返轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -56,6 +60,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
show: true, // 转换轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -66,6 +71,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
show: true, // 目的码名称显示
opposite: true, // 对称相反
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
@ -135,6 +141,7 @@ class SkinCode extends defaultStyle {
standardWidth: 2 // 灯柱宽度
},
text: {
show: true, // 信号机名称显示
distance: 3, // 文字和灯杆的距离
isNoRotation: true, // 是否禁止旋转
isAlignCenter: false, // 信号字体对其方式
@ -293,11 +300,15 @@ class SkinCode extends defaultStyle {
};
this[deviceType.Station] = {
text: {
show: true // 公里标名称显示
},
kilometerPosition: 'up' // 公里标朝向
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
offset: {x: 5, y: -10}, // 道岔名称与区段距离
fontSize: 11, // 字体大小

View File

@ -16,6 +16,7 @@ class SkinCode extends defaultStyle {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
fontSize: 12, // 字体大小
@ -26,6 +27,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: { // 逻辑区段名称
show: false, // 逻辑区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
fontSize: 11, // 字体大小
@ -36,6 +38,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: { // 站台
show: true, // 站台轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 24, // 文字离区段距离
fontSize: 11, // 字体大小
@ -46,6 +49,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: { // 折返
show: true, // 折返轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -56,6 +60,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: { // 转换轨
show: true, // 转换轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 36, // 文字离区段距离
fontSize: 11, // 字体大小
@ -66,6 +71,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: { // 目的地
show: true, // 目的码名称显示
opposite: true, // 对称相反
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 12, // 文字离区段距离
@ -132,6 +138,7 @@ class SkinCode extends defaultStyle {
standardWidth: 2 // 灯柱宽度
},
text: {
show: true, // 信号机名称显示
distance: 3, // 文字和灯杆的距离
isNoRotation: true, // 是否禁止旋转
isAlignCenter: false, // 信号字体对其方式
@ -290,11 +297,15 @@ class SkinCode extends defaultStyle {
};
this[deviceType.Station] = {
text: {
show: true // 公里标名称显示
},
kilometerPosition: 'up' // 公里标朝向
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
offset: {x: 5, y: -10}, // 道岔名称与区段距离
fontSize: 11, // 字体大小

View File

@ -16,6 +16,7 @@ class SkinCode extends defaultStyle {
routeColor: false // 进路触发颜色
},
text: {
show: true, // 物理区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 18, // 文字离区段距离
fontSize: 11, // 字体大小
@ -26,6 +27,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
logicText: {
show: true, // 逻辑区段名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 6, // 文字离区段距离
fontSize: 8, // 字体大小
@ -36,6 +38,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
standText: {
show: true, // 站台轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -46,6 +49,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
reentryText: {
show: true, // 折返轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 30, // 文字离区段距离
fontSize: 11, // 字体大小
@ -56,6 +60,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
transferText: {
show: true, // 转换轨名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 28, // 文字离区段距离
fontSize: 11, // 字体大小
@ -66,6 +71,7 @@ class SkinCode extends defaultStyle {
textVerticalAlign: 'middle' // 文字垂直对齐方式
},
destinationText: {
show: true, // 目的码名称显示
opposite: true, // 对称相反
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
distance: 10, // 文字离区段距离
@ -125,6 +131,7 @@ class SkinCode extends defaultStyle {
standardWidth: 2 // 灯珠宽度
},
text: {
show: true, // 信号机名称显示
distance: 0, // 文字和灯杆的距离
isNoRotation: true, // 是否禁止旋转
isAlignCenter: true, // 信号字体对其方式
@ -272,11 +279,15 @@ class SkinCode extends defaultStyle {
};
this[deviceType.Station] = {
text: {
show: true // 公里标名称显示
},
kilometerPosition: 'up' // 公里标朝向
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示
position: 0, // 区段名称位置 1 上面 -1 下面 0 对称
offset: {x: 0, y: 8}, // 道岔名称与区段距离
fontSize: 11, // 字体大小

View File

@ -80,10 +80,10 @@ class Jlmap {
// 保存皮肤类型
if (map.skinVO) {
this.skinCode = map.skinVO.code;
this.$options.scaleRate = map.skinVO.scaling;
this.$options.offsetX = map.skinVO.origin.x;
this.$options.offsetY = map.skinVO.origin.y;
this.$painter.updateTransform({ scaleRate: map.skinVO.scaling, offsetX: map.skinVO.origin.x, offsetY: map.skinVO.origin.y });
this.$options.scaleRate = map.skinVO.scaling || 1;
this.$options.offsetX = map.skinVO.origin ? map.skinVO.origin.x : 0;
this.$options.offsetY = map.skinVO.origin ? map.skinVO.origin.y : 0;
this.$painter.updateTransform({ scaleRate: this.$options.scaleRate, offsetX: this.$options.offsetX, offsetY: this.$options.offsetY });
}
// 保存原始数据

View File

@ -67,12 +67,16 @@ class Painter {
* @param {*} device
*/
add(device) {
try {
const instance = shapefactory(device, this.$jmap);
if (instance) {
device.instance = instance;
this.$transformHandle.transformView(instance);
this.mapInstanceLevel[device._type].add(instance);
}
} catch (err) {
console.error(err);
}
}
/**
@ -136,6 +140,7 @@ class Painter {
*/
update(device) {
if (device) {
try {
if (device._dispose) {
this.delete(device);
} else if (deviceType.Train == device._type) {
@ -146,6 +151,9 @@ class Painter {
instance.setState(device);
}
}
} catch (err) {
console.error(err);
}
}
}

View File

@ -228,8 +228,8 @@ export default class Section extends Group {
const y = Math.min(model.points[0].y, model.points[model.points.length - 1].y) + Math.abs(model.points[model.points.length - 1].y - model.points[0].y) / 2;
const traingle = new JTriangle(model.points[0], model.points[model.points.length - 1]);
const drict = model.trainPosType != '01' ? 1 : -1;
/** 区段名称*/
if (model.nameShow) {
/** 区段名称 (逻辑区段名称 或 物理区段名称 是否显示)*/
if (style.Section.logicText.show || style.Section.text.show) {
let tempx = x;
let tempy = y;
// 创建区段名称
@ -238,6 +238,7 @@ export default class Section extends Group {
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,
@ -254,7 +255,9 @@ export default class Section extends Group {
textPosition: style.Section.logicText.textPosition,
textVerticalAlign: style.Section.logicText.textVerticalAlign
});
} else {
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);
@ -274,8 +277,10 @@ export default class Section extends Group {
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,
@ -292,12 +297,13 @@ export default class Section extends Group {
textPosition: style.Section.text.textPosition,
textVerticalAlign: style.Section.text.textVerticalAlign
});
}
this.add(this.name);
}
}
}
/** 站台轨名称*/
if (model.isStandTrack && model.standTrackNameShow) {
if (model.isStandTrack && model.standTrackNameShow && style.Section.standText.show) {
const opposite = style.Section.standText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.standText.distance);
const tempy = y + traingle.getCos(style.Section.standText.distance) * (style.Section.standText.position || opposite * drict);
@ -320,7 +326,7 @@ export default class Section extends Group {
}
/** 折返轨名称*/
if (model.isReentryTrack && model.reentryTrackNameShow) {
if (model.isReentryTrack && model.reentryTrackNameShow && style.Section.reentryText.show) {
const opposite = style.Section.reentryText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.reentryText.distance);
const tempy = y + traingle.getCos(style.Section.reentryText.distance) * (style.Section.reentryText.position || opposite * drict);
@ -343,7 +349,7 @@ export default class Section extends Group {
}
/** 转换轨名称*/
if (model.isTransferTrack && model.transferTrackNameShow) {
if (model.isTransferTrack && model.transferTrackNameShow && style.Section.transferText.show) {
const opposite = style.Section.transferText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.transferText.distance);
const tempy = y + traingle.getCos(style.Section.transferText.distance) * (style.Section.transferText.position || opposite * drict);
@ -366,7 +372,7 @@ export default class Section extends Group {
}
/** 目的码名称*/
if (model.destinationCode && model.destinationCodeShow) {
if (model.destinationCode && model.destinationCodeShow && style.Section.destinationText.show) {
const opposite = style.Section.destinationText.opposite ? -1: 1;
const tempx = x + traingle.getSin(style.Section.destinationText.distance);
const tempy = y + traingle.getCos(style.Section.destinationText.distance) * (style.Section.destinationText.position || opposite * drict);
@ -731,7 +737,7 @@ export default class Section extends Group {
/** 设置状态*/
setState(model) {
this.recover();
if (model.status == '01') {
if (model.status == '01' || model.status == '00' || model.status == undefined) {
if (this.name && this.style.Section.active.routeColor) {
this.name.setStyle({textFill: this.style.Section.text.fontColor});
}

View File

@ -47,7 +47,7 @@ export default class EMouse extends Group {
this.device.lamps.forEach(elem => {
elem.setBorderColor(this.style.Signal.mouseOverStyle.lampBorderLineColor);
});
this.device.sigName.setColor(this.style.backgroundColor);
this.device.sigName && this.device.sigName.setColor(this.style.backgroundColor);
}
mouseout(e) {

View File

@ -150,7 +150,7 @@ class Signal extends Group {
this.add(this.sigPost);
this.lamps.forEach(lamp => { this.add(lamp); });
this.model.nameShow ? this.add(this.sigName) : null;
this.style.Signal.text.show ? this.add(this.sigName) : null;
this.add(this.sigAuto);
this.add(this.sigRoute);
this.add(this.sigDelay);

View File

@ -21,7 +21,7 @@ export default class Station extends Group {
const model = this.model;
const style = this.style;
if (model.visible) {
if (style.Station.text.show) {
this.stationText = new ETextName({
zlevel: this.zlevel,
z: this.z,

View File

@ -113,24 +113,24 @@ export default class StationControl extends Group {
setState(model) {
switch (model.status) {
case '00': // 无状态
this.emergencyControl.setColor(this.style.StationControl.lamp.grayColor);
this.substationControl.setColor(this.style.StationControl.lamp.grayColor);
this.centerControl.setColor(this.style.StationControl.lamp.grayColor);
this.emergencyControl && this.emergencyControl.setColor(this.style.StationControl.lamp.grayColor);
this.substationControl && this.substationControl.setColor(this.style.StationControl.lamp.grayColor);
this.centerControl && this.centerControl.setColor(this.style.StationControl.lamp.grayColor);
break;
case '01': // 中控
this.emergencyControl.setColor(this.style.StationControl.lamp.grayColor);
this.substationControl.setColor(this.style.StationControl.lamp.grayColor);
this.centerControl.setColor(this.style.StationControl.lamp.greenColor);
this.emergencyControl && this.emergencyControl.setColor(this.style.StationControl.lamp.grayColor);
this.substationControl && this.substationControl.setColor(this.style.StationControl.lamp.grayColor);
this.centerControl && this.centerControl.setColor(this.style.StationControl.lamp.greenColor);
break;
case '02': // 站控
this.emergencyControl.setColor(this.style.StationControl.lamp.grayColor);
this.substationControl.setColor(this.style.StationControl.lamp.yellowColor);
this.centerControl.setColor(this.style.StationControl.lamp.grayColor);
this.emergencyControl && this.emergencyControl.setColor(this.style.StationControl.lamp.grayColor);
this.substationControl && this.substationControl.setColor(this.style.StationControl.lamp.yellowColor);
this.centerControl && this.centerControl.setColor(this.style.StationControl.lamp.grayColor);
break;
case '03': // 紧急站控
this.emergencyControl.setColor(this.style.StationControl.lamp.redColor);
this.substationControl.setColor(this.style.StationControl.lamp.grayColor);
this.centerControl.setColor(this.style.StationControl.lamp.grayColor);
this.emergencyControl && this.emergencyControl.setColor(this.style.StationControl.lamp.redColor);
this.substationControl && this.substationControl.setColor(this.style.StationControl.lamp.grayColor);
this.centerControl && this.centerControl.setColor(this.style.StationControl.lamp.grayColor);
break;
}
}

View File

@ -196,7 +196,7 @@ class StationStand extends Group {
/** 空闲*/
spare() {
this.safeStand.setColor(this.style.StationStand.stand.spareColor);
this.safeStand && this.safeStand.setColor(this.style.StationStand.stand.spareColor);
}
/** 列车停站*/

View File

@ -135,7 +135,7 @@ export default class Switch extends Group {
nameTextY: nameTextY,
sectionName: model.sectionName,
name: model.name,
nameShow: model.nameShow,
nameShow: style.Switch.text.show,
triangle: this.triangle
});
@ -188,7 +188,7 @@ export default class Switch extends Group {
/** 设置岔芯颜色*/
setSwitchCoreColor(color) {
this.swCore.setColor(color);
this.swCore && this.swCore.setColor(color);
}
/** 设置道岔文字颜色*/

View File

@ -110,7 +110,7 @@ export default {
launchFullscreen();
await putJointTrainingSimulationEntrance(this.group);
const rest = await getPublishMapInfo(this.mapId);
const query = { skinStyle: rest.data.skinStyle, mapId: this.mapId, group: this.group };
const query = { skinCode: rest.data.skinCode, mapId: this.mapId, group: this.group };
this.$router.push({ path: `/jointTraining`, query: query });
} else if (this.state == '01') {
const query = { group: this.group };

View File

@ -158,15 +158,15 @@ export default {
trainingId() {
return this.$route.query.trainingId;
},
skinCode() {
return this.$route.query.skinCode;
},
mapId() {
return this.$route.query.mapId;
},
prdType() {
return this.$route.query.prdType;
},
skinCode() {
return this.$route.query.skinCode;
},
isLesson() {
return this.mode === 'teach' || this.mode === 'record' || this.mode === 'manage';
},

View File

@ -72,6 +72,7 @@ export default {
userRole: '',
group: '',
mapId: '',
skinCode: '',
simulationShow: false,
drivingShow: false
};
@ -90,10 +91,7 @@ export default {
]),
...mapGetters('config', [
'canvasId'
]),
skinCode() {
return this.$route.query.skinCode;
}
])
},
watch: {
'$store.state.config.menuBarLoadedCount': function (val) {
@ -135,6 +133,7 @@ export default {
async created() {
this.group = this.$route.query.group;
this.mapId = this.$route.query.mapId;
this.skinCode = this.$route.query.skinCode;
},
async mounted() {
await this.initLoadData();
@ -283,6 +282,8 @@ export default {
this.$store.dispatch('training/end', TrainingMode.NORMAL);
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); //
console.log(this.skinCode);
if (this.skinCode) {
// 01 02 ''
const resp = await this.getUserRole();

View File

@ -122,13 +122,13 @@ export default {
this.setPosition();
},
'$store.state.map.map.stationList': function (val) { //
if (val.length) {
if (val && val.length) {
this.stationList = val;
this.stationLists = val;
}
},
'$store.state.socket.roleInfo': function (val) {
if (val.length) {
if (val && val.length) {
this.addrolesList(val);
this.$nextTick(() => {
this.$store.dispatch('config/updateMenuBar');

View File

@ -132,8 +132,8 @@
v-if="userId == roomInfo.creatorId"
type="primary"
style="float: right;"
@click="start"
:loading="loading"
@click="start"
>
开始仿真</el-button>
</div>
@ -141,16 +141,16 @@
<el-button
type="primary"
style="float: right; margin-right: 10px;"
@click="joinJointTrain"
:loading="loading"
@click="joinJointTrain"
>
进入仿真</el-button>
<el-button
v-if="userId == roomInfo.creatorId"
type=""
style="float: right; margin-right: 10px;"
@click="stop"
:loading="loading"
@click="stop"
>
结束仿真</el-button>
</div>
@ -158,8 +158,8 @@
v-if="userId == roomInfo.creatorId"
type=""
style="float: right; margin-right: 0px;"
@click="postCode"
:loading="loading"
@click="postCode"
>生成二维码
</el-button>
<el-button type="" style="float: right; margin-right: 10px;" @click="backRoom">返回
@ -168,8 +168,8 @@
v-if="userId == roomInfo.creatorId"
type="danger"
style="float: right; margin-right: 0px;"
@click="exit"
:loading="loading"
@click="exit"
>销毁房间
</el-button>
</div>