调整供电线路保存,福州皮肤配置文件调整
This commit is contained in:
parent
3f451e817c
commit
df4dc3eea9
@ -250,6 +250,13 @@ class SkinCode extends defaultStyle {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.StationStand] = {
|
this[deviceType.StationStand] = {
|
||||||
common: { // 通用属性
|
common: { // 通用属性
|
||||||
textFontSize: 8, // 站台默认字体大小
|
textFontSize: 8, // 站台默认字体大小
|
||||||
|
@ -363,6 +363,13 @@ class SkinCode extends defaultStyle {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.Switch] = {
|
this[deviceType.Switch] = {
|
||||||
text: {
|
text: {
|
||||||
show: true, // 道岔名称显示
|
show: true, // 道岔名称显示
|
||||||
|
@ -200,6 +200,13 @@ class SkinCode extends defaultStyle {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.StationStand] = {
|
this[deviceType.StationStand] = {
|
||||||
common: { // 通用属性
|
common: { // 通用属性
|
||||||
textFontSize: 10, // 站台默认字体大小
|
textFontSize: 10, // 站台默认字体大小
|
||||||
|
@ -383,6 +383,13 @@ class SkinCode extends defaultStyle {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.Switch] = {
|
this[deviceType.Switch] = {
|
||||||
text: {
|
text: {
|
||||||
show: true, // 道岔名称显示
|
show: true, // 道岔名称显示
|
||||||
|
@ -329,8 +329,8 @@ class SkinCode extends defaultStyle {
|
|||||||
},
|
},
|
||||||
StationControl:{
|
StationControl:{
|
||||||
text: {
|
text: {
|
||||||
distance: 2, // 灯和文字之间的距离
|
distance: 10, // 灯和文字之间的距离
|
||||||
fontSize: 11, // 字体大小
|
fontSize: 14, // 字体大小
|
||||||
fontFormat: 'consolas', // 字体格式
|
fontFormat: 'consolas', // 字体格式
|
||||||
fontColor: '#ffffff', // 字体颜色
|
fontColor: '#ffffff', // 字体颜色
|
||||||
fontWeight: 'normal', // 字体粗细
|
fontWeight: 'normal', // 字体粗细
|
||||||
@ -345,9 +345,9 @@ class SkinCode extends defaultStyle {
|
|||||||
},
|
},
|
||||||
lamp: {
|
lamp: {
|
||||||
count: 2, // 控制模式灯个数
|
count: 2, // 控制模式灯个数
|
||||||
offset: {x: 0, y: 0}, // 控制模式灯偏移量
|
offset: {x: 0, y: 3}, // 控制模式灯偏移量
|
||||||
radiusR: 4, // 控制模式灯的半径
|
radiusR: 7, // 控制模式灯的半径
|
||||||
distance: 36, // 控制模式之间灯之间的距离
|
distance: 42, // 控制模式之间灯之间的距离
|
||||||
grayColor: '#7F7F7F', // 控制模式灰色
|
grayColor: '#7F7F7F', // 控制模式灰色
|
||||||
greenColor: '#00FF00', // 控制模式绿色
|
greenColor: '#00FF00', // 控制模式绿色
|
||||||
redColor: '#FF0000', // 控制模式红色
|
redColor: '#FF0000', // 控制模式红色
|
||||||
@ -418,6 +418,12 @@ class SkinCode extends defaultStyle {
|
|||||||
this[deviceType.Line] = {
|
this[deviceType.Line] = {
|
||||||
lineColor: '#FFFFFF' // 线条颜色
|
lineColor: '#FFFFFF' // 线条颜色
|
||||||
};
|
};
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 8 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.LcControl] = {
|
this[deviceType.LcControl] = {
|
||||||
text: {
|
text: {
|
||||||
|
@ -392,6 +392,13 @@ class SkinCode extends defaultStyle {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.Switch] = {
|
this[deviceType.Switch] = {
|
||||||
text: {
|
text: {
|
||||||
show: true, // 道岔名称显示
|
show: true, // 道岔名称显示
|
||||||
|
@ -411,6 +411,13 @@ class SkinCode extends defaultStyle {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.StationDelayUnlock] = {
|
this[deviceType.StationDelayUnlock] = {
|
||||||
text: {
|
text: {
|
||||||
distance: 3, // 延迟解锁和设备之间的距离
|
distance: 3, // 延迟解锁和设备之间的距离
|
||||||
|
@ -387,6 +387,13 @@ class SkinCode extends defaultStyle {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.Switch] = {
|
this[deviceType.Switch] = {
|
||||||
text: {
|
text: {
|
||||||
show: true, // 道岔名称显示
|
show: true, // 道岔名称显示
|
||||||
|
@ -509,6 +509,14 @@ class SkinCode extends defaultStyle {
|
|||||||
lineColor: '#FFFFFF', // 线条颜色
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
lineDash: [8, 4]
|
lineDash: [8, 4]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 供电线路
|
||||||
|
this[deviceType.Power] = {
|
||||||
|
lineColor: '#FFFFFF', // 线条颜色
|
||||||
|
strokeColor: '#ccc', // 线条颜色
|
||||||
|
extendLength: 10 // 延伸长度
|
||||||
|
};
|
||||||
|
|
||||||
this[deviceType.AutomaticRoute] = {
|
this[deviceType.AutomaticRoute] = {
|
||||||
// 是否显示
|
// 是否显示
|
||||||
displayCondition: '03', // 显示条件 prdType
|
displayCondition: '03', // 显示条件 prdType
|
||||||
|
@ -245,4 +245,9 @@ deviceRender[deviceType.Arrow] = {
|
|||||||
_type: deviceType.Arrow,
|
_type: deviceType.Arrow,
|
||||||
zlevel: 1
|
zlevel: 1
|
||||||
};
|
};
|
||||||
|
/** 供电线路 */
|
||||||
|
deviceRender[deviceType.Power] = {
|
||||||
|
_type: deviceType.Power,
|
||||||
|
zlevel: 1
|
||||||
|
};
|
||||||
export default deviceRender;
|
export default deviceRender;
|
||||||
|
@ -42,7 +42,8 @@ const deviceType = {
|
|||||||
Axle: 'Axle',
|
Axle: 'Axle',
|
||||||
SplitStation:'SplitStation',
|
SplitStation:'SplitStation',
|
||||||
SwitchFault: 'SwitchFault',
|
SwitchFault: 'SwitchFault',
|
||||||
Arrow: 'Arrow'
|
Arrow: 'Arrow',
|
||||||
|
Power: 'Power'
|
||||||
};
|
};
|
||||||
|
|
||||||
export default deviceType;
|
export default deviceType;
|
||||||
|
47
src/jmapNew/shape/Power/ESeparator.js
Normal file
47
src/jmapNew/shape/Power/ESeparator.js
Normal 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(); // 可以无需调用
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
131
src/jmapNew/shape/Power/index.js
Normal file
131
src/jmapNew/shape/Power/index.js
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -70,6 +70,12 @@ export default class ESingleControl extends Group {
|
|||||||
this.control.setStyle('fill', color);
|
this.control.setStyle('fill', color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTextColor(color) {
|
||||||
|
if (color) {
|
||||||
|
this.text.setStyle('textFill', color);
|
||||||
|
}
|
||||||
|
}
|
||||||
getArcBoundingRect() {
|
getArcBoundingRect() {
|
||||||
const rect = this.control.getBoundingRect().clone();
|
const rect = this.control.getBoundingRect().clone();
|
||||||
const scale = this.control.scale[0];
|
const scale = this.control.scale[0];
|
||||||
|
@ -291,12 +291,15 @@ export default class Station extends Group {
|
|||||||
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
||||||
this.substationControl && this.substationControl.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.setColor(this.style.Station.StationControl.lamp.greenColor);
|
||||||
|
this.centerControl && this.centerControl.setTextColor(this.style.Station.StationControl.lamp.greenColor); // 文字颜色
|
||||||
}
|
}
|
||||||
|
|
||||||
handleLocal() { // 站控
|
handleLocal() { // 站控
|
||||||
this.emergencyControl && this.emergencyControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
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.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.centerControl && this.centerControl.setColor(this.style.Station.StationControl.lamp.grayColor);
|
||||||
|
this.arrowsControl && this.arrowsControl.setColor(this.style.Station.StationControl.lamp.greenColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleEmergency() { // 紧急站控
|
handleEmergency() { // 紧急站控
|
||||||
@ -315,7 +318,8 @@ export default class Station extends Group {
|
|||||||
setState(model) {
|
setState(model) {
|
||||||
if (!this.isShowShape) return;
|
if (!this.isShowShape) return;
|
||||||
this.recover();
|
this.recover();
|
||||||
model.controlMode && this['handle' + model.controlMode]();
|
// model.controlMode && this['handle' + model.controlMode]();
|
||||||
|
this.handleLocal();
|
||||||
}
|
}
|
||||||
|
|
||||||
getShapeTipPoint(opts) {
|
getShapeTipPoint(opts) {
|
||||||
|
@ -24,6 +24,7 @@ import AutomaticRoute from './AutomacticRoute/index.js';
|
|||||||
import SaidLamp from './SaidLamp/index.js';
|
import SaidLamp from './SaidLamp/index.js';
|
||||||
import SplitStation from './SplitStation/index';
|
import SplitStation from './SplitStation/index';
|
||||||
import Arrow from './Arrow/index';
|
import Arrow from './Arrow/index';
|
||||||
|
import Power from './Power/index';
|
||||||
|
|
||||||
/** 图库*/
|
/** 图库*/
|
||||||
const mapShape = {};
|
const mapShape = {};
|
||||||
@ -69,6 +70,7 @@ mapShape[deviceType.Axle] = SaidLamp;
|
|||||||
mapShape[deviceType.SwitchFault] = SaidLamp;
|
mapShape[deviceType.SwitchFault] = SaidLamp;
|
||||||
mapShape[deviceType.SplitStation] = SplitStation;
|
mapShape[deviceType.SplitStation] = SplitStation;
|
||||||
mapShape[deviceType.Arrow] = Arrow;
|
mapShape[deviceType.Arrow] = Arrow;
|
||||||
|
mapShape[deviceType.Power] = Power;
|
||||||
|
|
||||||
function shapefactory(device, jmap) {
|
function shapefactory(device, jmap) {
|
||||||
const type = device._type;
|
const type = device._type;
|
||||||
|
@ -147,6 +147,9 @@ export function parser(data, skinCode, showConfig) {
|
|||||||
zrUtil.each(data.arrowList || [], elem => {
|
zrUtil.each(data.arrowList || [], elem => {
|
||||||
mapDevice[elem.code] = createDevice(deviceType.Arrow, elem, propConvert, showConfig);
|
mapDevice[elem.code] = createDevice(deviceType.Arrow, elem, propConvert, showConfig);
|
||||||
}, this);
|
}, this);
|
||||||
|
zrUtil.each(data.powerList || [], elem => {
|
||||||
|
mapDevice[elem.code] = createDevice(deviceType.Power, elem, propConvert, showConfig);
|
||||||
|
}, this);
|
||||||
zrUtil.each(data.indicatorLightList || [], elem => {
|
zrUtil.each(data.indicatorLightList || [], elem => {
|
||||||
switch (elem.type) {
|
switch (elem.type) {
|
||||||
case 'AtsControl':
|
case 'AtsControl':
|
||||||
@ -326,6 +329,7 @@ export function updateMapData(state, model) {
|
|||||||
case deviceType.SplitStation: updateForList(model, state, 'splitStationList'); break;
|
case deviceType.SplitStation: updateForList(model, state, 'splitStationList'); break;
|
||||||
case deviceType.SwitchFault: updateForList(model, state, 'indicatorLightList'); break;
|
case deviceType.SwitchFault: updateForList(model, state, 'indicatorLightList'); break;
|
||||||
case deviceType.Arrow: updateForList(model, state, 'arrowList'); break;
|
case deviceType.Arrow: updateForList(model, state, 'arrowList'); break;
|
||||||
|
case deviceType.Power: updateForList(model, state, 'powerList'); break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -342,6 +342,13 @@ const map = {
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
powerList: (state) => {
|
||||||
|
if (state.map) {
|
||||||
|
return state.map.powerList || [];
|
||||||
|
} else {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
tempSpeedLimitList: (state) => {
|
tempSpeedLimitList: (state) => {
|
||||||
if (state.map) {
|
if (state.map) {
|
||||||
return state.map.tempSpeedLimitList;
|
return state.map.tempSpeedLimitList;
|
||||||
|
@ -182,7 +182,7 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
getPracticalQuestion(this.$route.query.raceId).then((responese)=>{
|
getPracticalQuestion(this.$route.query.raceId).then((responese)=>{
|
||||||
if (responese.data) {
|
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};
|
const query = { lineCode: '11', mapId: '41', group: resp.data, raceId: this.$route.query.raceId};
|
||||||
this.$router.replace({ path: `/jointTrainingNew`, query: query});
|
this.$router.replace({ path: `/jointTrainingNew`, query: query});
|
||||||
});
|
});
|
||||||
|
@ -133,6 +133,14 @@
|
|||||||
@setCenter="setCenter"
|
@setCenter="setCenter"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</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">
|
<el-tab-pane :label="$t('map.text')" class="tab_pane_box" name="Text" :lazy="lazy">
|
||||||
<text-draft
|
<text-draft
|
||||||
ref="Text"
|
ref="Text"
|
||||||
@ -211,6 +219,7 @@ import PsdDraft from './psdDraft';
|
|||||||
import EspDraft from './espDraft';
|
import EspDraft from './espDraft';
|
||||||
import TrainDraft from './train/index';
|
import TrainDraft from './train/index';
|
||||||
import LineDraft from './line';
|
import LineDraft from './line';
|
||||||
|
import PowerDraft from './power';
|
||||||
import TextDraft from './text';
|
import TextDraft from './text';
|
||||||
import ControlDraft from './ControlDraft';
|
import ControlDraft from './ControlDraft';
|
||||||
import TrainWindowDraft from './trainwindow';
|
import TrainWindowDraft from './trainwindow';
|
||||||
@ -242,6 +251,7 @@ export default {
|
|||||||
TrainWindowDraft,
|
TrainWindowDraft,
|
||||||
TrainDraft,
|
TrainDraft,
|
||||||
LineDraft,
|
LineDraft,
|
||||||
|
PowerDraft,
|
||||||
TextDraft,
|
TextDraft,
|
||||||
ZcControlDraft,
|
ZcControlDraft,
|
||||||
OutFrameDraft,
|
OutFrameDraft,
|
||||||
|
@ -225,7 +225,7 @@ export default {
|
|||||||
this.editModel.points.splice(index + 1, 0, data);
|
this.editModel.points.splice(index + 1, 0, data);
|
||||||
},
|
},
|
||||||
delPoint(index) {
|
delPoint(index) {
|
||||||
this.editModel.points.splice(index + 1, 0);
|
this.editModel.points.splice(index, 1);
|
||||||
},
|
},
|
||||||
addPointAddModel(index) {
|
addPointAddModel(index) {
|
||||||
const data = { x: 0, y: 0};
|
const data = { x: 0, y: 0};
|
||||||
|
315
src/views/newMap/newMapdraft/mapoperate/power.vue
Normal file
315
src/views/newMap/newMapdraft/mapoperate/power.vue
Normal 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>
|
Loading…
Reference in New Issue
Block a user