调整供电线路保存,福州皮肤配置文件调整

This commit is contained in:
zyy 2020-05-28 14:39:06 +08:00
parent 3f451e817c
commit df4dc3eea9
22 changed files with 605 additions and 10 deletions

View File

@ -250,6 +250,13 @@ class SkinCode extends defaultStyle {
}
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.StationStand] = {
common: { // 通用属性
textFontSize: 8, // 站台默认字体大小

View File

@ -363,6 +363,13 @@ class SkinCode extends defaultStyle {
}
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示

View File

@ -200,6 +200,13 @@ class SkinCode extends defaultStyle {
}
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.StationStand] = {
common: { // 通用属性
textFontSize: 10, // 站台默认字体大小

View File

@ -383,6 +383,13 @@ class SkinCode extends defaultStyle {
}
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示

View File

@ -329,8 +329,8 @@ class SkinCode extends defaultStyle {
},
StationControl:{
text: {
distance: 2, // 灯和文字之间的距离
fontSize: 11, // 字体大小
distance: 10, // 灯和文字之间的距离
fontSize: 14, // 字体大小
fontFormat: 'consolas', // 字体格式
fontColor: '#ffffff', // 字体颜色
fontWeight: 'normal', // 字体粗细
@ -345,9 +345,9 @@ class SkinCode extends defaultStyle {
},
lamp: {
count: 2, // 控制模式灯个数
offset: {x: 0, y: 0}, // 控制模式灯偏移量
radiusR: 4, // 控制模式灯的半径
distance: 36, // 控制模式之间灯之间的距离
offset: {x: 0, y: 3}, // 控制模式灯偏移量
radiusR: 7, // 控制模式灯的半径
distance: 42, // 控制模式之间灯之间的距离
grayColor: '#7F7F7F', // 控制模式灰色
greenColor: '#00FF00', // 控制模式绿色
redColor: '#FF0000', // 控制模式红色
@ -418,6 +418,12 @@ class SkinCode extends defaultStyle {
this[deviceType.Line] = {
lineColor: '#FFFFFF' // 线条颜色
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 8 // 延伸长度
};
this[deviceType.LcControl] = {
text: {

View File

@ -392,6 +392,13 @@ class SkinCode extends defaultStyle {
}
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示

View File

@ -411,6 +411,13 @@ class SkinCode extends defaultStyle {
}
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.StationDelayUnlock] = {
text: {
distance: 3, // 延迟解锁和设备之间的距离

View File

@ -387,6 +387,13 @@ class SkinCode extends defaultStyle {
}
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.Switch] = {
text: {
show: true, // 道岔名称显示

View File

@ -509,6 +509,14 @@ class SkinCode extends defaultStyle {
lineColor: '#FFFFFF', // 线条颜色
lineDash: [8, 4]
};
// 供电线路
this[deviceType.Power] = {
lineColor: '#FFFFFF', // 线条颜色
strokeColor: '#ccc', // 线条颜色
extendLength: 10 // 延伸长度
};
this[deviceType.AutomaticRoute] = {
// 是否显示
displayCondition: '03', // 显示条件 prdType

View File

@ -245,4 +245,9 @@ deviceRender[deviceType.Arrow] = {
_type: deviceType.Arrow,
zlevel: 1
};
/** 供电线路 */
deviceRender[deviceType.Power] = {
_type: deviceType.Power,
zlevel: 1
};
export default deviceRender;

View File

@ -42,7 +42,8 @@ const deviceType = {
Axle: 'Axle',
SplitStation:'SplitStation',
SwitchFault: 'SwitchFault',
Arrow: 'Arrow'
Arrow: 'Arrow',
Power: 'Power'
};
export default deviceType;

View File

@ -0,0 +1,47 @@
import Group from 'zrender/src/container/Group';
import Polyline from 'zrender/src/graphic/shape/Polyline';
/** 分隔符*/
export default class ESeparator extends Group {
constructor(model) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z || 6;
this.style = model.style;
this.setType();
}
createModel(points) {
const model = this.model;
this.partition = new Polyline({
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
shape: {
points: points
},
style: {
lineWidth: model.width,
stroke: model.stroke
}
});
this.add(this.partition);
}
setType() {
const model = this.model;
if (model && model.traingle) {
const points = [
[model.point.x, model.point.y - (this.style.Power.extendLength)],
[model.point.x, model.point.y + (this.style.Power.extendLength)]
];
this.createModel(points);
}
if (model.traingle) {
this.origin = [model.point.x, model.point.y];
this.rotation = Math.PI * 2 - Math.atan2(model.traingle.absy, model.traingle.absx) * model.traingle.drictx * model.traingle.dricty;
this.dirty(); // 可以无需调用
}
}
}

View File

@ -0,0 +1,131 @@
import Polyline from 'zrender/src/graphic/shape/Polyline';
import Group from 'zrender/src/container/Group';
import JTriangle from '../../utils/JTriangle';
import ESeparator from './ESeparator';
import {isShowThePrdType} from '../../utils/handlePath';
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;
this.isShowShape = true;
if (isShowThePrdType(model.prdType, model.showConditions) || model.previewOrMapDraw) {
this.create();
this.createTerminal();
this.setState(model);
}
if (model.previewOrMapDraw) {
this.setShowMode();
}
}
create() {
const model = this.model;
const style = this.style;
if (model && model.points.length > 1) {
const points = [];
for (let i = 0; i < model.points.length; i++) {
points.push([model.points[i].x, model.points[i].y]);
}
this.line = new Polyline({
zlevel: this.zlevel,
progressive: model.progressive,
z: this.z,
shape: {
points: points
},
style: {
lineWidth: model.width,
stroke: style.Power.strokeColor
}
});
this.add(this.line);
}
}
createTerminal() { // 创建左右端点
const model = this.model;
const style = this.style;
if (model && model.leftTerminal) { // 左端点
const traingle = new JTriangle(model.points[0], model.points[1]);
this.leftTerminal = new ESeparator({
style: style,
zlevel: this.zlevel,
z: this.z + 3,
traingle: traingle,
width: model.width,
stroke: style.Power.strokeColor,
point: {
x: model.points[0].x,
y: model.points[0].y
}
});
this.add(this.leftTerminal);
}
if (model && model.rightTerminal) { // 右端点
const traingle = new JTriangle(model.points[model.points.length - 2], model.points[model.points.length - 1]);
this.rightTerminal = new ESeparator({
style: style,
zlevel: this.zlevel,
z: this.z + 3,
traingle: traingle,
width: model.width,
stroke: style.Power.strokeColor,
point: {
x: model.points[model.points.length - 1].x,
y: model.points[model.points.length - 1].y
}
});
this.add(this.rightTerminal);
}
}
setLineType(type) {
switch (type) {
case '01': break;
case '02':
this.eachChild((child) => {
child.setStyle('lineDash', this.style.Line.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.eachChild((child) => {
child.show();
});
} else {
this.eachChild((child) => {
child.hide();
});
}
}
setShowStation(stationCode) {
if (!stationCode || this.model.stationCode === stationCode) {
this.eachChild((child) => {
child.show();
});
this.isShowShape = true;
this.setState(this.model);
} else {
this.eachChild((child) => {
child.hide();
});
this.isShowShape = false;
}
}
}

View File

@ -70,6 +70,12 @@ export default class ESingleControl extends Group {
this.control.setStyle('fill', color);
}
}
setTextColor(color) {
if (color) {
this.text.setStyle('textFill', color);
}
}
getArcBoundingRect() {
const rect = this.control.getBoundingRect().clone();
const scale = this.control.scale[0];

View File

@ -291,12 +291,15 @@ export default class Station extends Group {
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.grayColor);
this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.greenColor);
this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.lamp.greenColor); // 文字颜色
}
handleLocal() { // 站控
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
this.substationControl && this.substationControl.setColor(this.style.Station.StationControl.lamp.yellowColor);
this.substationControl && this.substationControl.setTextColor(this.style.Station.StationControl.lamp.yellowColor); // 文字颜色
this.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
this.arrowsControl && this.arrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor);
}
handleEmergency() { // 紧急站控
@ -315,7 +318,8 @@ export default class Station extends Group {
setState(model) {
if (!this.isShowShape) return;
this.recover();
model.controlMode && this['handle' + model.controlMode]();
// model.controlMode && this['handle' + model.controlMode]();
this.handleLocal();
}
getShapeTipPoint(opts) {

View File

@ -24,6 +24,7 @@ import AutomaticRoute from './AutomacticRoute/index.js';
import SaidLamp from './SaidLamp/index.js';
import SplitStation from './SplitStation/index';
import Arrow from './Arrow/index';
import Power from './Power/index';
/** 图库*/
const mapShape = {};
@ -69,6 +70,7 @@ mapShape[deviceType.Axle] = SaidLamp;
mapShape[deviceType.SwitchFault] = SaidLamp;
mapShape[deviceType.SplitStation] = SplitStation;
mapShape[deviceType.Arrow] = Arrow;
mapShape[deviceType.Power] = Power;
function shapefactory(device, jmap) {
const type = device._type;

View File

@ -144,9 +144,12 @@ export function parser(data, skinCode, showConfig) {
zrUtil.each(data.splitStationList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.SplitStation, elem, propConvert, showConfig);
}, this);
zrUtil.each( data.arrowList || [], elem => {
zrUtil.each(data.arrowList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.Arrow, elem, propConvert, showConfig);
}, this);
zrUtil.each(data.powerList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.Power, elem, propConvert, showConfig);
}, this);
zrUtil.each(data.indicatorLightList || [], elem => {
switch (elem.type) {
case 'AtsControl':
@ -326,6 +329,7 @@ export function updateMapData(state, model) {
case deviceType.SplitStation: updateForList(model, state, 'splitStationList'); break;
case deviceType.SwitchFault: updateForList(model, state, 'indicatorLightList'); break;
case deviceType.Arrow: updateForList(model, state, 'arrowList'); break;
case deviceType.Power: updateForList(model, state, 'powerList'); break;
}
}
}

View File

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

View File

@ -182,7 +182,7 @@ export default {
} else {
getPracticalQuestion(this.$route.query.raceId).then((responese)=>{
if (responese.data) {
participantCreatTrainingRoom(this.$route.query.raceId, {mapId: 41, prdType: '02'}).then(resp => {
participantCreatTrainingRoom(this.$route.query.raceId, {mapId: 41, prdType: '03'}).then(resp => {
const query = { lineCode: '11', mapId: '41', group: resp.data, raceId: this.$route.query.raceId};
this.$router.replace({ path: `/jointTrainingNew`, query: query});
});

View File

@ -133,6 +133,14 @@
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="供电线" class="tab_pane_box" name="Power" :lazy="lazy">
<power-draft
ref="Power"
:selected="selected"
@updateMapModel="updateMapModel"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane :label="$t('map.text')" class="tab_pane_box" name="Text" :lazy="lazy">
<text-draft
ref="Text"
@ -211,6 +219,7 @@ import PsdDraft from './psdDraft';
import EspDraft from './espDraft';
import TrainDraft from './train/index';
import LineDraft from './line';
import PowerDraft from './power';
import TextDraft from './text';
import ControlDraft from './ControlDraft';
import TrainWindowDraft from './trainwindow';
@ -242,6 +251,7 @@ export default {
TrainWindowDraft,
TrainDraft,
LineDraft,
PowerDraft,
TextDraft,
ZcControlDraft,
OutFrameDraft,

View File

@ -225,7 +225,7 @@ export default {
this.editModel.points.splice(index + 1, 0, data);
},
delPoint(index) {
this.editModel.points.splice(index + 1, 0);
this.editModel.points.splice(index, 1);
},
addPointAddModel(index) {
const data = { x: 0, y: 0};

View File

@ -0,0 +1,315 @@
<template>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first" :lazy="lazy">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
</div>
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="edit">{{ $t('map.updateObj') }}</el-button>
<el-button type="danger" size="small" @click="deleteObj">{{ $t('map.deleteObj') }}</el-button>
</el-button-group>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second" :lazy="lazy">
<div style="height: calc(100% - 46px);">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-form ref="make" label-width="120px" :model="addModel" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.lineWidth')" prop="width">
<el-input-number v-model="addModel.width" :min="1" />px
</el-form-item>
<el-form-item :label="$t('map.showConditions')" prop="showConditions">
<el-radio-group v-model="addModel.showConditions">
<el-radio label="01">{{ $t('map.localCenter') }}</el-radio>
<el-radio label="02">{{ $t('map.center') }}</el-radio>
<el-radio label="03">{{ $t('map.local') }}</el-radio>
</el-radio-group>
</el-form-item>
<div class="coordinate">
<span class="title">{{ $t('map.linePoint') }}</span>
<div class="point-section">
<template v-for="(point, index) in addModel.points">
<div :key="index" style="overflow: hidden;">
<el-form-item
label=""
:prop="'points[' + index + '].x'"
style="display: table; float: left;"
label-width="0px"
>
<el-input-number v-model="point.x" />
</el-form-item>
<span style="display: table; margin-left: 8px; float: left; line-height: 28px;">
, </span>
<el-form-item
label=""
:prop="'points[' + index + '].y'"
style="display: table; float: left; margin-right: 5px;"
label-width="10px"
>
<el-input-number v-model="point.y" />
</el-form-item>
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPointAddModel(index)"
/>
<el-button
icon="el-icon-minus"
:disabled="index == 0 || index == addModel.points.length - 1"
circle
class="point-button"
@click="delPointAddModel(index)"
/>
</div>
</template>
</div>
</div>
</el-form>
</el-scrollbar>
</div>
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</el-tab-pane>
</el-tabs>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmapNew/utils/Uid';
import ConfigList from './config/list';
import { deepAssign } from '@/utils/index';
export default {
name: 'StationStandDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
}
},
data() {
return {
activeName: 'first',
lazy: true,
showConditionsList: [
{ label: this.$t('map.localCenter'), value: '01'},
{ label: this.$t('map.center'), value: '02' },
{ label: this.$t('map.local'), value: '03'}
],
terminalList: [
{ label: '显示', value: true},
{ label: '隐藏', value: false }
],
editModel: {
code: '',
width: 1,
leftTerminal: true,
rightTerminal: true,
showConditions: '01', //
points: []
},
addModel: {
width: 1,
showConditions: '01',
points: [
{ x: 0, y: 0 },
{ x: 100, y: 100 }
]
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
},
makeRules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectLine'), trigger: 'blur' }
],
width: [
{ required: true, message: this.$t('rules.pleaseSelectLineWidth'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'powerList'
]),
form() {
const form = {
labelWidth: '120px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: '供电线路', type: 'select', optionLabel: 'code', optionValue: 'code', options: this.powerList, change: true, deviceChange: this.deviceChange },
{ prop: 'width', label: '供电线路宽度', type: 'number', min: 1, placeholder: 'px' },
{ prop: 'showConditions', label: this.$t('map.showConditions'), type: 'radio', optionLabel: 'label', optionValue:'value', radioList: this.showConditionsList},
{ prop: 'leftTerminal', label: '左侧端点:', type: 'select', optionLabel: 'label', optionValue:'value', options: this.terminalList},
{ prop: 'rightTerminal', label: '右侧端点:', type: 'select', optionLabel: 'label', optionValue:'value', options: this.terminalList},
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, addPoint: this.addPoint, delPoint: this.delPoint }
]
},
map: {
name: this.$t('map.mapData'),
item: [
]
}
}
};
return form;
},
isPointsShow() {
return this.editModel.points.length > 0;
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
if (selected && selected._type.toUpperCase() === 'Power'.toUpperCase()) {
this.$refs.form && this.$refs.form.resetFields();
this.$refs.make && this.$refs.make.resetFields();
this.activeName = 'first';
this.editModel = deepAssign(this.editModel, selected);
}
},
addPoint(index) {
const data = { x: 0, y: 0 };
this.editModel.points.splice(index + 1, 0, data);
},
delPoint(index) {
this.editModel.points.splice(index, 1);
},
addPointAddModel(index) {
const data = { x: 0, y: 0};
this.addModel.points.splice(index + 1, 0, data);
},
delPointAddModel(index) {
this.addModel.points.splice(index, 1);
},
create() {
this.$refs['make'].validate((valid) => {
if (valid) {
if (JSON.stringify(this.addModel.points[0]) !== JSON.stringify(this.addModel.points[this.addModel.points.length - 1])) {
const pointArr = JSON.stringify(this.addModel.points);
const model = {
_type: 'Power',
code: getUID('Power', this.powerList),
width: this.addModel.width,
leftTerminal: true,
rightTerminal: true,
showConditions: this.addModel.showConditions,
points: JSON.parse(pointArr)
};
this.$emit('updateMapModel', model);
this.$refs.make && this.$refs.make.resetFields();
} else {
this.$message.console.error(this.$t('tip.cannotCoincide'));
}
}
});
},
//
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
const data = Object.assign({_type: 'Line'}, this.editModel);
this.$emit('updateMapModel', data);
}
});
},
//
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Line'.toUpperCase()) {
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
this.$emit('updateMapModel', {...selected, _dispose: true});
this.$refs.form && this.$refs.form.resetFields();
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.view-control{
height: 100%;
overflow-y: auto;
}
.card {
height: 100%;
}
.coordinate {
overflow: hidden;
.title {
text-align: right;
font-size: 14px;
color: #606266;
line-height: 40px;
padding: 0 12px 0 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 28px;
width: 120px;
font-weight: bold;
display: block;
float: left;
}
}
.point-section {
/*float: left;*/
position: absolute;
left: 120px;
width: calc(100% - 120px);
}
.point-button {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
float: left;
/deep/ {
.el-icon-plus,
.el-icon-minus {
transform: translateY(-5px);
}
}
}
.el-input-number--mini {
width: 110px;
}
</style>