调整供电线路保存,福州皮肤配置文件调整
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] = {
|
||||
common: { // 通用属性
|
||||
textFontSize: 8, // 站台默认字体大小
|
||||
|
@ -363,6 +363,13 @@ class SkinCode extends defaultStyle {
|
||||
}
|
||||
};
|
||||
|
||||
// 供电线路
|
||||
this[deviceType.Power] = {
|
||||
lineColor: '#FFFFFF', // 线条颜色
|
||||
strokeColor: '#ccc', // 线条颜色
|
||||
extendLength: 10 // 延伸长度
|
||||
};
|
||||
|
||||
this[deviceType.Switch] = {
|
||||
text: {
|
||||
show: true, // 道岔名称显示
|
||||
|
@ -200,6 +200,13 @@ class SkinCode extends defaultStyle {
|
||||
}
|
||||
};
|
||||
|
||||
// 供电线路
|
||||
this[deviceType.Power] = {
|
||||
lineColor: '#FFFFFF', // 线条颜色
|
||||
strokeColor: '#ccc', // 线条颜色
|
||||
extendLength: 10 // 延伸长度
|
||||
};
|
||||
|
||||
this[deviceType.StationStand] = {
|
||||
common: { // 通用属性
|
||||
textFontSize: 10, // 站台默认字体大小
|
||||
|
@ -383,6 +383,13 @@ class SkinCode extends defaultStyle {
|
||||
}
|
||||
};
|
||||
|
||||
// 供电线路
|
||||
this[deviceType.Power] = {
|
||||
lineColor: '#FFFFFF', // 线条颜色
|
||||
strokeColor: '#ccc', // 线条颜色
|
||||
extendLength: 10 // 延伸长度
|
||||
};
|
||||
|
||||
this[deviceType.Switch] = {
|
||||
text: {
|
||||
show: true, // 道岔名称显示
|
||||
|
@ -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: {
|
||||
|
@ -392,6 +392,13 @@ class SkinCode extends defaultStyle {
|
||||
}
|
||||
};
|
||||
|
||||
// 供电线路
|
||||
this[deviceType.Power] = {
|
||||
lineColor: '#FFFFFF', // 线条颜色
|
||||
strokeColor: '#ccc', // 线条颜色
|
||||
extendLength: 10 // 延伸长度
|
||||
};
|
||||
|
||||
this[deviceType.Switch] = {
|
||||
text: {
|
||||
show: true, // 道岔名称显示
|
||||
|
@ -411,6 +411,13 @@ class SkinCode extends defaultStyle {
|
||||
}
|
||||
};
|
||||
|
||||
// 供电线路
|
||||
this[deviceType.Power] = {
|
||||
lineColor: '#FFFFFF', // 线条颜色
|
||||
strokeColor: '#ccc', // 线条颜色
|
||||
extendLength: 10 // 延伸长度
|
||||
};
|
||||
|
||||
this[deviceType.StationDelayUnlock] = {
|
||||
text: {
|
||||
distance: 3, // 延迟解锁和设备之间的距离
|
||||
|
@ -387,6 +387,13 @@ class SkinCode extends defaultStyle {
|
||||
}
|
||||
};
|
||||
|
||||
// 供电线路
|
||||
this[deviceType.Power] = {
|
||||
lineColor: '#FFFFFF', // 线条颜色
|
||||
strokeColor: '#ccc', // 线条颜色
|
||||
extendLength: 10 // 延伸长度
|
||||
};
|
||||
|
||||
this[deviceType.Switch] = {
|
||||
text: {
|
||||
show: true, // 道岔名称显示
|
||||
|
@ -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
|
||||
|
@ -245,4 +245,9 @@ deviceRender[deviceType.Arrow] = {
|
||||
_type: deviceType.Arrow,
|
||||
zlevel: 1
|
||||
};
|
||||
/** 供电线路 */
|
||||
deviceRender[deviceType.Power] = {
|
||||
_type: deviceType.Power,
|
||||
zlevel: 1
|
||||
};
|
||||
export default deviceRender;
|
||||
|
@ -42,7 +42,8 @@ const deviceType = {
|
||||
Axle: 'Axle',
|
||||
SplitStation:'SplitStation',
|
||||
SwitchFault: 'SwitchFault',
|
||||
Arrow: 'Arrow'
|
||||
Arrow: 'Arrow',
|
||||
Power: 'Power'
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
setTextColor(color) {
|
||||
if (color) {
|
||||
this.text.setStyle('textFill', color);
|
||||
}
|
||||
}
|
||||
getArcBoundingRect() {
|
||||
const rect = this.control.getBoundingRect().clone();
|
||||
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.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) {
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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});
|
||||
});
|
||||
|
@ -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,
|
||||
|
@ -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};
|
||||
|
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