joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'test' of git.cloud.tencent.com:joylink/jl-nclient into test

Browse Source
This commit is contained in:
sunzhenyu 2019-08-29 11:14:45 +08:00
commit 0f462ac0c1
76 changed files with 2044 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/ibp_images/alarm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/ibp_images/blue_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/ibp_images/blue_button_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/assets/ibp_images/gray_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/ibp_images/gray_button_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
src/assets/ibp_images/green_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/ibp_images/green_button_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
src/assets/ibp_images/red_button.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/ibp_images/red_button_on.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/assets/ibp_images/rotate_black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/ibp_images/rotate_red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/ibp_images/yellow_button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/ibp_images/yellow_button_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

3
src/i18n/langs/en/map.js
View File

@ -54,6 +54,7 @@ export default {
trainWindow: 'train window',
line: 'line',
text: 'text',
button: 'button',
mapName: 'Name of the map:',
skinName: 'Skin style:',
@ -189,6 +190,8 @@ export default {
linkLp: 'Link Start point coordinates:',
linkRp: 'Link End point coordinates:',
linePoint: 'point:',
rulesChange: 'The rules change',
splitMerge: 'Split/merge',
linkSet: 'The Link set',

10
src/i18n/langs/zh/map.js
View File

@ -48,6 +48,7 @@ export default {
zcZoneControl: 'zc区域控制',
temporaryLimit: '全线临时限速',
lcControl: 'Lc控制',
buttonControl: '按钮',
image: '图片',
station: '车站',
controlMode: '控制模式',
@ -58,6 +59,7 @@ export default {
trainWindow: '车次窗',
line: '线条',
text: '文字',
button: '按钮',
mapName: '地图名称:',
skinName: '皮肤:',
@ -76,6 +78,7 @@ export default {
lineCoding: '线条编码:',
lineType: '线条类型:',
lineWidth: '线条宽度:',
linePoint: '坐标:',
segmentCoordinates: '区段显示坐标:',
publishMapCreation: '从发布地图创建',
@ -133,6 +136,8 @@ export default {
failedCreateSignal: '创建自动信号失败',
automaticSignalUpdateSucceeded: '更新自动信号成功！',
automaticSignalUpdateFailed: '更新自动信号失败',
interconnected: '联锁控名称',
buttonType: '所属类型',
stationName: '车站名称:',
@ -254,7 +259,7 @@ export default {
isCurve: '是否曲线:',
physicalSegmentName: '物理区段名称:',
directionType: '形式方向:',
directionType: '行驶方向:',
leftOrRight: '左右位置:',
positionType: '上下位置:',
@ -312,7 +317,7 @@ export default {
zzkContent: '站中控内容:',
stationControlZok: '中控',
stationstandName: '选择车站名称:',
stationstandName: '所属车站:',
stationstandDirection: '站台方向:',
stationstandHasDoor: '是否显示屏蔽门:',
stationstandNameColon: '站台名称:',
@ -341,6 +346,7 @@ export default {
delayUnlockPosition: '延迟解锁坐标:',
trainWindowPoints: '车次窗坐标:',
textPoints: '坐标:',
buttonText: '内容',
textCode: '文字编码:',
textContent: '文本内容:',

4
src/i18n/langs/zh/router.js
View File

@ -54,5 +54,7 @@ export default {
userTrainingManage: '用户实训管理',
userExamManage: '用户考试管理',
userSimulationManage: '用户仿真管理',
existingSimulation: '存在仿真管理'
existingSimulation: '存在仿真管理',
ibpDraw: 'Ibp盘绘制'
};

5
src/i18n/langs/zh/rules.js
View File

@ -252,6 +252,9 @@ export default {
enterScale: '请输入缩放比例',
enterXOffset: '请输入X偏移',
enterYOffset: '请输入Y偏移'
enterYOffset: '请输入Y偏移',
pleaseSelectButtonType: '请选择按钮类型',
pleaseSelectButtonContent: '请输入内容'
};

4
src/ibp/constant/deviceRender.js
View File

@ -2,8 +2,8 @@ import deviceType from './deviceType';
const deviceRender = {};
/** Text渲染配置*/
deviceRender[deviceType.Text] = {
/** IbpText渲染配置*/
deviceRender[deviceType.IbpText] = {
zlevel: 1
};

2
src/ibp/constant/deviceType.js
View File

@ -1,5 +1,5 @@
const deviceType = {
Text: 'Text',
IbpText: 'IbpText',
SquareButton: 'SquareButton',
WarnButton: 'WarnButton',
Arrow: 'Arrow',

55
src/ibp/ibpPan.js
View File

@ -6,7 +6,7 @@ import MouseController from './mouseController';
import Painter from './painter';
import deviceState from '../jmap/constant/deviceState';
import deviceType from './constant/deviceType';
import {calculateDCenter, createBoundingRect, deviceFactory} from './utils/parser';
import {calculateDCenter, createBoundingRect, modelFactory} from './utils/parser';
const renderer = 'canvas';
const devicePixelRatio = 1;
@ -34,6 +34,8 @@ class IbpPan {
const height = opts.config.height;
this.$ibpZr = zrender.init(opts.dom, Object.assign({ renderer, devicePixelRatio, width, height }, opts.config));
this.$options = new Options(Object.assign({ scaleRate: 1, offsetX: 0, offsetY: 0 }, opts.options || {}), (dataZoom) => { this.$mouseController.trigger(this.events.DataZoom, dataZoom); }); // 缩放
this.$mouseController = new MouseController(this);
this.$mouseController.enable();
this.$painter = new Painter(this);
this.$painter.updateZrSize({width: this.$ibpZr.getWidth(), height: this.$ibpZr.getHeight()});
@ -41,9 +43,6 @@ class IbpPan {
this.optionsHandler = this.setOptions.bind(this);
this.$mouseController = new MouseController(this);
this.$mouseController.enable();
this.$mouseController.on(this.events.__Pan, this.optionsHandler);
this.$mouseController.on(this.events.__Zoom, this.optionsHandler);
@ -123,12 +122,12 @@ class IbpPan {
}
render(list) {
console.log('-*-*-*-*-', list);
(list || []).forEach(elem => {
const code = elem.code;
const type = elem._type;
const oDevice = this.ibpDevice[code] || deviceFactory(type, elem);
const nDevice = Object.assign(oDevice || {}, elem);
this.dataSync(nDevice);
const oDevice = this.ibpDevice[code] || {instance: null, event: null, model: modelFactory(type, elem)};
const nDevice = Object.assign(oDevice.model || {}, elem);
this.$painter.delete(oDevice);
if (!elem._dispose) {
this.ibpDevice[code] = nDevice;
@ -140,7 +139,7 @@ class IbpPan {
}
// 中间处理
hookHandle(oDevice, elem) {
hookHandle(model, elem) {
const code = elem.code;
const type = elem._type;
// 如果是延时计时，需要保存计数值到全局
@ -153,8 +152,8 @@ class IbpPan {
localStore(code, val);
}
for (var prop in elem) {
if (elem[prop] != oDevice[prop]) {
Object.assign(oDevice, elem);
if (elem[prop] != model[prop]) {
Object.assign(model, elem);
return true;
}
}
@ -169,7 +168,7 @@ class IbpPan {
if (elem.dispose) {
this.$painter.delete(oDevice);
} else {
if (this.hookHandle(oDevice, elem)) {
if (this.hookHandle(oDevice.model, elem)) {
this.$painter.update(oDevice);
}
}
@ -178,6 +177,12 @@ class IbpPan {
if (this.methods.stateUpdate instanceof Function) { this.methods.stateUpdate(list); }
}
drawIbpInit() {
(Object.keys(this.ibpDevice) || []).forEach(elem => {
this.$painter.drawIbp(this.ibpDevice[elem]);
});
}
pullBack(payload) {
if (payload.type === 'zoom') {
const zrWidth = this.$ibpZr.getWidth();
@ -196,33 +201,6 @@ class IbpPan {
return payload || {};
}
dataSync(model) {
var prop = null;
var type = model._type;
var code = model.code;
switch (type) {
case deviceType.Link: prop = 'linkList'; break;
}
const list = this.data[prop] || [];
const idex = list.findIndex(elem => { return elem.code == code; });
if (list) {
if (model._dispose) {
idex >= 0 && list.splice(idex, 1);
} else {
const elem = list[idex];
if (elem) {
Object.keys(elem).forEach(key => {
elem[key] = model[key];
});
} else {
list.push(Object.assign({}, model));
}
}
}
}
getZr() {
return this.$ibpZr;
}
@ -250,7 +228,6 @@ class IbpPan {
refresh() {
this.$painter.refresh();
}
clear() {
this.skinCode = '';
this.style = {};

19
src/ibp/painter.js
View File

@ -59,11 +59,12 @@ class Painter {
* @param {*} device
*/
add(device) {
device = Object.assign(device, { event: this.$ibp.$mouseController });
const instance = shapefactory(device, this.$ibp);
if (instance) {
device.instance = instance;
this.$transformHandle.transformView(instance);
this.ibpInstanceLevel[device._type].add(instance);
this.ibpInstanceLevel[device.model._type].add(instance);
}
}
@ -74,7 +75,7 @@ class Painter {
delete(device) {
const instance = device.instance;
if (instance) {
this.ibpInstanceLevel[device._type].remove(instance);
this.ibpInstanceLevel[device.model._type].remove(instance);
}
}
@ -84,7 +85,7 @@ class Painter {
*/
update(device) {
if (device) {
if (device._dispose) {
if (device.model._dispose) {
this.delete(device);
} else {
const instance = device.instance;
@ -95,6 +96,18 @@ class Painter {
}
}
/**
* 绘制ipb时，更改draggable 和注册事件
*/
drawIbp(device) {
if (device) {
const instance = device.instance;
if (instance) {
instance.setDraggable();
}
}
}
/**
* 更新transform变化
* @param {*} opt

52
src/ibp/shape/alarm.js Normal file
View File

@ -0,0 +1,52 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
import alarmpic from '@/assets/ibp_images/alarm.png';
export default class alarm extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.create();
}
create() {
const model = this.model;
this.imageBg = new Image({
zlevel: this.zlevel,
draggable: model.draggable || false,
style: {
image: alarmpic,
x: model.point.x,
y: model.point.y,
width: 70,
height: 74
}
});
this.add(this.imageBg);
}
setDraggable() {
this.arrow.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
this.on('mousedown', this.mousedown, this);
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown(e) {
this.event.disable();
}
mousemove(e) {
}
mouseup(e) {
this.event.enable();
this.model.point.x = this.model.point.x + e.offsetX;
this.model.point.y = this.model.point.y + e.offsetY;
}
}

56
src/ibp/shape/arrow.js
View File

@ -1,22 +1,24 @@
import Polygon from 'zrender/src/graphic/shape/Polygon';
import Group from 'zrender/src/container/Group';
import {arrow} from '../../jmap/shape/utils/ShapePoints';
import {arrow} from '@/jmap/shape/utils/ShapePoints';
// import { updateIbpData } from '@/ibp/utils/parser';
class Arrow extends Group {
constructor(model) {
constructor(device) {
super();
this.model = model;
this.event = device.event;
this.model = device.model;
this.create();
}
create() {
const model = this.model;
const point = arrow(this.model.point.x, this.model.point.y, this.model.length, 10);
this.arrow = new Polygon({
zlevel: model.zlevel,
z: model.z,
draggable: model.draggable || false,
shape: {
points: point
points: arrow(this.model.point.x, this.model.point.y, this.model.length, 10)
},
style: {
stroke: model.stroke,
@ -25,13 +27,55 @@ class Arrow extends Group {
}
});
this.add(this.arrow);
this.getOrientate();
}
getOrientate() {
switch (this.model.orientation) {
case 'left': {
this.transformRotation(0);
break;
}
case 'right': {
this.transformRotation(180);
break;
}
}
}
// 整体旋转箭头
transformRotation(rotate) {
this.arrow.origin = [this.model.point.x, this.model.point.y];
this.arrow.rotation = Math.PI / 180 * Number(rotate);
this.arrow.dirty();
}
// 箭头颜色
setColor(color) {
this.arrow.setStyle('fill', color);
}
setDraggable() {
this.arrow.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
this.on('mousedown', this.mousedown, this);
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
this.event.disable();
console.log('鼠标按下');
}
mousemove() {
console.log('鼠标移动');
}
mouseup(e) {
this.event.enable();
this.model.point.x = this.model.point.x + e.offsetX;
this.model.point.y = this.model.point.y + e.offsetY;
console.log('鼠标抬起', this.model);
}
}
export default Arrow;

8
src/ibp/shape/background.js
View File

@ -4,10 +4,10 @@ import Rect from 'zrender/src/graphic/shape/Rect';
import ibpBg from '@/assets/ibp_images/ibp_bg.png';
export default class background extends Group {
constructor(model) {
constructor(device) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.model = device.model;
this.zlevel = device.model.zlevel;
this.z = 1;
this.create();
}
@ -47,4 +47,6 @@ export default class background extends Group {
this.tailorRect.setShape('x', x-opt.offsetX);
this.tailorRect.setShape('y', y-opt.offsetY);
}
setDraggable() {
}
}

215
src/ibp/shape/button.js
View File

@ -1,163 +1,120 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
// import Eventful from 'zrender/src/mixin/Eventful';
import * as eventTool from 'zrender/src/core/event';
import buttonPic from '@/assets/ibp_images/red_button.png';
import buttonPicOn from '@/assets/ibp_images/red_button_on.png';
import redButtonPic from '@/assets/ibp_images/red_button.png';
import redButtonPicOn from '@/assets/ibp_images/red_button_on.png';
import greenButtonPicOn from '@/assets/ibp_images/green_button_on.png';
import greenButtonPic from '@/assets/ibp_images/green_button.png';
import blueButtonPic from '@/assets/ibp_images/blue_button.png';
import blueButtonPicOn from '@/assets/ibp_images/blue_button_on.png';
import yellowButtonPic from '@/assets/ibp_images/yellow_button.png';
import yellowButtonPicOn from '@/assets/ibp_images/yellow_button_on.png';
import grayButtonPic from '@/assets/ibp_images/gray_button.png';
import grayButtonPicOn from '@/assets/ibp_images/gray_button_on.png';
export default class button extends Group {
constructor(model) {
static colors = new Map([
['red_on', [redButtonPicOn]],
['red_off', [redButtonPic]],
['green_on', [greenButtonPicOn]],
['green_off', [greenButtonPic]],
['blue_on', [blueButtonPicOn]],
['blue_off', [blueButtonPic]],
['yellow_on', [yellowButtonPicOn]],
['yellow_off', [yellowButtonPic]],
['gray_on', [grayButtonPicOn]],
['gray_off', [grayButtonPic]]
]);
constructor(device) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.model = device.model;
this.zlevel = device.model.zlevel;
this.create();
this.createMouseEvent();
}
create() {
const model = this.model;
this.imageBg = new Image({
zlevel: this.zlevel,
z: this.z,
draggable: model.draggable || false,
style: {
image: model.status === '01' ? buttonPic : buttonPicOn,
x: this.model.point.x,
y: this.model.point.y,
width: this.model.width,
height: this.model.height
image: this.getImagePic(),
x: model.point.x,
y: model.point.y,
width: 70,
height: 80
}
});
this.add(this.imageBg);
}
getImagePic() {
const color = button.colors.get(`${this.model.color}_${this.model.status}`);
return color[0];
}
setDraggable() {
this.arrow.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
this.on('mousedown', this.mousedown, this);
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
// 设置按钮状态
setState(model) {
switch (model.status) {
case '01': this.close(); break; // 关闭
case '02': this.open(); break; // 开放
case 'on': {
// 关闭
this.close();
this.model.status='on';
break;
}
case 'off': {
// 开放
this.open();
this.model.status='off';
break;
}
}
}
// 绑定按钮事件
createMouseEvent() {
this.model.isDraging=true;
if (this.model.isDraging) {
// 按钮拖拽事件监听
this.imageBg.on('mousedown', (e) => {
if (eventTool.notLeftMouse(e)) {
return;
}
eventTool.stop(e.event);
var x = e.offsetX;
var y = e.offsetY;
this._x = x;
this._y = y;
this._dragginger = true;
});
this.imageBg.on('mousemove', (e) => {
// !this._moveOnMouseMove ||
if (eventTool.notLeftMouse(e) || !this._dragginger) {
return;
}
// eventTool.stop(e.event);
const oldX = this._x;
const oldY = this._y;
const dx = e.offsetX - oldX;
const dy = e.offsetY - oldY;
this._x = e.offsetX;
this._y = e.offsetY;
debugger;
// this.imageBg.preventDefaultMouseMove &&
eventTool.stop(e.event);
// debugger;
this.imageBg.setStyle({x: oldX+dx, y: oldY+dy });
});
this.imageBg.on('mouseup', (e) => {
if (!eventTool.notLeftMouse(e)) {
this._dragginger = false;
}
});
} else {
// 按钮的点击监听
this.imageBg.on('click', (e) => {
switch (this.model.status) {
case '01': {
this.open();
this.model.status='02';
break;
}
case '02': {
this.close();
this.model.status='01';
break;
}
}
});
onclick() {
if (!this.model.draggable) {
switch (this.model.status) {
case 'off': {
this.open();
this.model.status='on';
break;
}
case 'on': {
this.close();
this.model.status='off';
break;
}
}
}
}
// if (this.model.isDraging) {
// // this.mouseEvent = new EMouse(this);
// // this.add(this.mouseEvent);
// this.imageBg.on('mousedown', (e) => {
// // debugger;
// if (eventTool.notLeftMouse(e)) {
// return;
// }
// var x = e.offsetX;
// var y = e.offsetY;
// this._x = x;
// this._y = y;
// this._dragging = true;
// });
// this.imageBg.on('mousemove', (e) => {
// if (eventTool.notLeftMouse(e) || !this._moveOnMouseMove ||!this._dragging) {
// return;
// }
// const oldX = this._x;
// const oldY = this._y;
// const dx = e.offsetX - oldX;
// const dy = e.offsetY - oldY;
// this._x = e.offsetX;
// this._y = e.offsetY;
// debugger;
// this.imageBg.preventDefaultMouseMove && eventTool.stop(e.event);
// debugger;
// this.imageBg.setStyle({x: dx, y: dy});
// // this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
// });
// this.on('mouseup', (e) => { });
// }
// else {
// this.on('mousedown', (e) => { this.mouseEvent.mouseout(e); });
// // this.on('mousemove', (e) => { this.mouseEvent.mouseover(e); });
// this.on('mouseup', (e) => { this.mouseEvent.mouseover(e); });
// }
mousedown(e) {
this.event.disable();
}
mousemove(e) {
}
mouseup(e) {
this.event.enable();
this.model.point.x = this.model.point.x + e.offsetX;
this.model.point.y = this.model.point.y + e.offsetY;
}
// 关闭
close() {
this.imageBg.setStyle({image: buttonPic});
const color = button.colors.get(`${this.model.color}_off`);
this.imageBg.setStyle({image: color[0]});
}
// 开放
open() {
this.imageBg.setStyle({image: buttonPicOn});
}
getShapeTipPoint() {
if (this.imageBg) {
var distance = 2;
var rect = this.imageBg.getBoundingRect();
return {
x: rect.x + rect.width / 2,
y: rect.y - distance
};
}
return null;
const color = button.colors.get(`${this.model.color}_on`);
this.imageBg.setStyle({image: color[0]});
}
}

31
src/ibp/shape/circularLamp.js
View File

@ -1,13 +1,13 @@
import Group from 'zrender/src/container/Group';
import Circle from 'zrender/src/graphic/shape/Circle';
import MouseController from '../mouseController';
export default class CircularLamp extends Group {
constructor(model) {
constructor(device) {
super();
this.model = model;
this.zlevel = model.zlevel;
this.z = model.z;
this.model = device.model;
this.event = device.event;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
@ -15,6 +15,7 @@ export default class CircularLamp extends Group {
this.lamp = new Circle({
zlevel: this.zlevel,
z: this.z,
draggable: this.model.draggable||false,
shape: {
cx: this.model.point.x,
cy: this.model.point.y,
@ -30,4 +31,24 @@ export default class CircularLamp extends Group {
setCircularLampColor(color) {
this.lamp.setStyle('fill', color);
}
setDraggable() {
this.lamp.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
this.on('mousedown', this.mousedown, this);
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
this.event.disable();
console.log('鼠标按下');
}
mousemove() {
console.log('鼠标移动');
}
mouseup() {
this.event.enable();
console.log('鼠标抬起');
}
}

25
src/ibp/shape/element/textName.js
View File

@ -1,25 +0,0 @@
// import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
/** 名称元素*/
export default function ETextName(model) {
const TextName = new Text({
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,
style: {
x: model.x,
y: model.y,
fontWeight: model.fontWeight,
fontSize: model.fontSize,
fontFamily: model.fontFamily,
text: model.text,
textStrokeWidth: model.textStrokeWidth,
textFill: model.textFill,
textAlign: model.textAlign,
textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || null
}
});
return TextName;
}

6
src/ibp/shape/factory.js
View File

@ -1,15 +1,17 @@
import Arrow from './arrow';
import deviceType from '../constant/deviceType';
import Background from './background';
import CircularLamp from './circularLamp'
import CircularLamp from './circularLamp';
import IbpText from './ibpText';
const ibpShape = {};
ibpShape[deviceType.Arrow] = Arrow;
ibpShape[deviceType.Background] = Background;
ibpShape[deviceType.CircularLamp] = CircularLamp;
ibpShape[deviceType.IbpText] = IbpText;
function shapefactory(device, ibp) {
const type = device._type;
const type = device.model._type;
const shape = ibpShape[type];
if (shape instanceof Function) {
// eslint-disable-next-line

60
src/ibp/shape/ibpText.js Normal file
View File

@ -0,0 +1,60 @@
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import { updateIbpData } from '@/ibp/utils/parser';
export default class button extends Group {
constructor(device) {
super();
this.model = device.model;
this.event = device.event;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.create();
}
create() {
const model = this.model;
this.textName = new Text({
zlevel: model.zlevel,
z: model.z,
silent: model.silent || false,
draggable: model.draggable || false,
style: {
x: model.x,
y: model.y,
fontWeight: model.fontWeight,
fontSize: model.fontSize,
fontFamily: model.fontFamily,
text: model.context,
textStrokeWidth: model.textStrokeWidth,
textFill: model.textFill,
textAlign: model.textAlign,
textPosition: model.textPosition || 'inside',
textVerticalAlign: model.textVerticalAlign || null
}
});
this.add(this.textName);
}
setDraggable() {
this.textName.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
this.on('mousedown', this.mousedown, this);
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
this.event.disable();
console.log('鼠标按下');
}
mousemove() {
console.log('鼠标移动');
}
mouseup(e) {
this.event.enable();
this.model.x = this.model.x + e.offsetX;
this.model.y = this.model.y + e.offsetY;
console.log('鼠标抬起', this.model);
updateIbpData(this.model, 'update');
}
}

68
src/ibp/shape/rotateTip.js Normal file
View File

@ -0,0 +1,68 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
import rotateBlack from '@/assets/ibp_images/rotate_black.png';
import rotateRed from '@/assets/ibp_images/rotate_red.png';
export default class rotateTip extends Group {
constructor(device) {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.create();
}
create() {
const model = this.model;
this.imageBg = new Image({
zlevel: this.zlevel,
draggable: model.draggable || false,
style: {
image: this.getRotateColor(),
x: model.point.x,
y: model.point.y,
width: 70,
height: 74
}
});
this.add(this.imageBg);
}
getRotateColor() {
if (this.model.color) {
switch (this.model.color) {
case 'black': {
return rotateBlack;
}
case 'red': {
return rotateRed;
}
}
} else {
return rotateBlack;
}
}
setDraggable() {
this.arrow.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
this.on('mousedown', this.mousedown, this);
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown(e) {
this.event.disable();
}
mousemove(e) {
}
mouseup(e) {
this.event.enable();
this.model.point.x = this.model.point.x + e.offsetX;
this.model.point.y = this.model.point.y + e.offsetY;
}
}

26
src/ibp/utils/parser.js
View File

@ -28,13 +28,13 @@ export function calculateDCenter(viewRect, zrbound) {
return { dx: dx, dy: dy };
}
export function deviceFactory(type, elem) {
return Object.assign({ _type: type }, deviceRender[type], elem);
export function modelFactory(type, elem) {
return Object.assign(elem, { _type: type }, deviceRender[type]);
}
export function createDevice(type, model, propConvert) {
const device = deviceFactory(type, model);
return propConvert ? propConvert.initPrivateProps(device) : device;
export function createModel(type, model, propConvert) {
const tempModel = modelFactory(type, model);
return { instance: null, event: null, model: propConvert ? propConvert.initPrivateProps(tempModel) : tempModel };
}
export function parser(data, config) {
@ -44,33 +44,33 @@ export function parser(data, config) {
if (data) {
Object.assign(data.background, config);
ibpDevice[data.background.code] = createDevice(deviceType.Background, data.background, propConvert);
ibpDevice[data.background.code] = createModel(deviceType.Background, data.background, propConvert);
zrUtil.each(data.textList || [], elem => {
ibpDevice[elem.code] = createDevice(deviceType.Text, elem, propConvert);
ibpDevice[elem.code] = createModel(deviceType.IbpText, elem, propConvert);
}, this);
zrUtil.each(data.squareButtonList || [], elem => {
ibpDevice[elem.code] = createDevice(deviceType.SquareButton, elem, propConvert);
ibpDevice[elem.code] = createModel(deviceType.SquareButton, elem, propConvert);
}, this);
zrUtil.each(data.circularLampList || [], elem => {
ibpDevice[elem.code] = createDevice(deviceType.CircularLamp, elem, propConvert);
ibpDevice[elem.code] = createModel(deviceType.CircularLamp, elem, propConvert);
}, this);
zrUtil.each(data.warnButtonList || [], elem => {
ibpDevice[elem.code] = createDevice(deviceType.WarnButton, elem, propConvert);
ibpDevice[elem.code] = createModel(deviceType.WarnButton, elem, propConvert);
}, this);
zrUtil.each(data.arrowList || [], elem => {
ibpDevice[elem.code] = createDevice(deviceType.Arrow, elem, propConvert);
ibpDevice[elem.code] = createModel(deviceType.Arrow, elem, propConvert);
}, this);
zrUtil.each(data.rotatingButtonList || [], elem => {
ibpDevice[elem.code] = createDevice(deviceType.RotatingButton, elem, propConvert);
ibpDevice[elem.code] = createModel(deviceType.RotatingButton, elem, propConvert);
}, this);
zrUtil.each(data.tipList || [], elem => {
ibpDevice[elem.code] = createDevice(deviceType.Tip, elem, propConvert);
ibpDevice[elem.code] = createModel(deviceType.Tip, elem, propConvert);
}, this);
}

2
src/jmap/config/skinCode/bejing_01.js
View File

@ -272,7 +272,7 @@ class SkinCode extends defaultStyle {
emergencyControlShow: true, // 紧急站控显示
centerControlShow: true, // 中控显示
substationControlShow: true, // 站控按钮显示
turnedAroundControlShow: false // 按图折返显示
interconnectedControlShow: false // 联锁控显示
},
arrow: {
show: false // 控制模式箭头显隐

14
src/jmap/config/skinCode/chengdu_03.js
View File

@ -276,7 +276,7 @@ class SkinCode extends defaultStyle {
emergencyControlShow: true, // 紧急站控显示
centerControlShow: true, // 中控显示
substationControlShow: true, // 站控按钮显示
turnedAroundControlShow: true // 按图折返显示
interconnectedControlShow: true // 联锁控显示
},
arrow: {
show: false // 控制模式箭头显隐
@ -374,6 +374,18 @@ class SkinCode extends defaultStyle {
}
};
this[deviceType.ButtonControl] = {
text: {
fontSize: 11, // 字体大小
fontWeight: 'normal', // 字体粗细
distance: 5 // 灯跟文字距离
},
lamp: {
radiusR: 6, // 控制灯大小
controlColor: '#FFFF00' // 控制灯颜色
}
};
this[deviceType.Line] = {
lineColor: '#FFFFFF' // 线条颜色
};

2
src/jmap/config/skinCode/chengdu_04.js
View File

@ -273,7 +273,7 @@ class SkinCode extends defaultStyle {
emergencyControlShow: true, // 紧急站控显示
centerControlShow: true, // 中控显示
substationControlShow: true, // 站控按钮显示
turnedAroundControlShow: false // 按图折返显示
interconnectedControlShow: false // 联锁控显示
},
arrow: {
show: false // 控制模式箭头显隐

2
src/jmap/config/skinCode/fuzhou_01.js
View File

@ -255,7 +255,7 @@ class SkinCode extends defaultStyle {
emergencyControlShow: false, // 紧急站控显示
centerControlShow: true, // 中控显示
substationControlShow: true, // 站控按钮显示
turnedAroundControlShow: false // 按图折返显示
interconnectedControlShow: false // 联锁控显示
},
arrow: {
show: true // 控制模式箭头显隐

1
src/jmap/constant/deviceType.js
View File

@ -11,6 +11,7 @@ const deviceType = {
StationStand: 'StationStand',
StationControl: 'StationControl',
StationCounter: 'StationCounter',
ButtonControl: 'ButtonControl',
StationDelayUnlock: 'StationDelayUnlock',
Train: 'Train',
TrainWindow: 'TrainWindow',

1
src/jmap/map.js
View File

@ -292,6 +292,7 @@ class Jlmap {
case deviceType.ZcControl: prop = 'zcControlList'; break;
case deviceType.StationDelayUnlock: prop = 'stationDelayUnlockList'; break;
case deviceType.LcControl: prop = 'lcControlList'; break;
case deviceType.ButtonControl: prop = 'buttonList'; break;
case deviceType.LimitControl: prop = 'tempSpeedLimitList'; break;
case deviceType.ImageControl: prop = 'imageControl'; break;
case deviceType.Train: prop = 'trainList'; break;

67
src/jmap/shape/ButtonControl/index.js Normal file
View File

@ -0,0 +1,67 @@
/*
* lC区域控制模式
*/
import Group from 'zrender/src/container/Group';
import EControl from '../element/EControl';
export default class ButtonControl extends Group {
constructor(model, style) {
super();
this.z = 20;
this._code = model.code;
this._type = model._type;
this.zlevel = 10;
this.model = model;
this.style = style;
this.create();
this.setState(model);
}
create() {
const model = this.model;
this.control = new EControl({
zlevel: this.zlevel,
z: this.z,
arc: {
shape: {
cx: model.position.x,
cy: model.position.y,
r: this.style.ButtonControl.lamp.radiusR
},
lineWidth: 0,
fill: this.style.ButtonControl.lamp.controlColor
},
text: {
position: [0, 0],
x: model.position.x,
y: model.position.y + this.style.ButtonControl.lamp.radiusR + this.style.ButtonControl.text.distance,
fontWeight: this.style.ButtonControl.text.fontWeight,
fontSize: this.style.ButtonControl.text.fontSize,
fontFamily: this.style.fontFamily,
text: model.text || '按图折返',
textFill: '#fff',
textAlign: 'middle',
textVerticalAlign: 'top'
},
style: this.style
});
this.add(this.control);
}
// 设置状态
setState(model) {
}
getShapeTipPoint() {
if (this.control) {
var distance = 2;
var rect = this.control.getBoundingRect();
return {
x: rect.x + rect.width / 2,
y: rect.y - distance
};
}
return null;
}
}

12
src/jmap/shape/StationControl/index.js
View File

@ -73,10 +73,10 @@ export default class StationControl extends Group {
});
this.add(this.substationControl);
}
// 按图折返
if (this.style.StationControl.lamp.turnedAroundControlShow) {
this.turnedAroundControl = new ESingleControl({
_subType: 'turnedAround',
// 联锁控
if (this.style.StationControl.lamp.interconnectedControlShow) {
this.interconnectedControl = new ESingleControl({
_subType: 'interconnected',
style: this.style,
zlevel: this.zlevel,
z: this.z,
@ -84,10 +84,10 @@ export default class StationControl extends Group {
x: model.position.x + this.style.StationControl.lamp.distance * 3 / 2 + this.style.StationControl.lamp.offset.x,
y: model.position.y + this.style.StationControl.lamp.offset.y
},
context: '按图折返',
context: model.lskContent || '联锁控',
pop: false
});
this.add(this.turnedAroundControl);
this.add(this.interconnectedControl);
}
// 箭头
if (this.style.StationControl.arrow.show) {

2
src/jmap/shape/factory.js
View File

@ -9,6 +9,7 @@ import LcControl from './LcControl/index.js';
import LimitControl from './LimitControl/index.js';
import Switch from './Switch/index.js';
import ZcControl from './ZcControl/index.js';
import ButtonControl from './ButtonControl/index.js';
import StationCounter from './StationCounter/index.js';
import StationDelayUnlock from './StationDelayUnlock/index.js';
import StationStand from './StationStand/index.js';
@ -29,6 +30,7 @@ mapShape[deviceType.LcControl] = LcControl;
mapShape[deviceType.LimitControl] = LimitControl;
mapShape[deviceType.Switch] = Switch;
mapShape[deviceType.ZcControl] = ZcControl;
mapShape[deviceType.ButtonControl] = ButtonControl;
mapShape[deviceType.StationCounter] = StationCounter;
mapShape[deviceType.StationDelayUnlock] = StationDelayUnlock;
mapShape[deviceType.StationStand] = StationStand;

4
src/jmap/utils/parser.js
View File

@ -86,6 +86,10 @@ export function parser(data, skinCode) {
mapDevice[elem.code] = createDevice(deviceType.ZcControl, elem, propConvert);
}, this);
zrUtil.each(data.buttonList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.ButtonControl, elem, propConvert);
}, this);
zrUtil.each(data.lcList || [], elem => {
mapDevice[elem.code] = createDevice(deviceType.LcControl, elem, propConvert);
}, this);

14
src/router/index.js
View File

@ -84,6 +84,8 @@ import RunPlanEveryDay from '@/views/publish/runPlanEveryDay/index';
import ProductStatus from '@/views/publish/productStatus/index';
import PublishLesson from '@/views/publish/publishLesson/index';
// import SimulationScript from '@/views/publish/simulationScript/index';
import IbpDraft from '@/views/ibp/ibpDraft/index';
import IbpEdit from '@/views/ibp/ibpDraft/ibpEdit/index';
import Commodity from '@/views/orderauthor/commodity/index';
import CommodityDraft from '@/views/orderauthor/commodity/draft';
@ -216,6 +218,11 @@ export const UrlConfig = {
prefix: '/script',
detail: '/script/detail',
display: '/script/display'
},
ibp: {
prefix: 'ibp',
draft: '/ibp/draft',
edit: 'ibp/edit'
}
};
@ -375,6 +382,13 @@ export const asyncRouter = [
}
]
},
// {
// path: 'ibp/edit',
// component: IbpEdit,
// meta: {
// i18n: 'router.ibpDraw'
// }
// },
{
path: 'runPlan',
redirect: '/map/runPlan/view/draft',

4
src/store/index.js
View File

@ -13,6 +13,7 @@ import exam from './modules/exam';
import runPlan from './modules/runplan';
import socket from './modules/socket';
import scriptRecord from './modules/scriptRecord';
import ibp from './modules/ibp';
import getters from './getters';
@ -32,7 +33,8 @@ const store = new Vuex.Store({
exam,
runPlan,
socket,
scriptRecord
scriptRecord,
ibp
},
getters
});

59
src/store/modules/ibp.js Normal file
View File

@ -0,0 +1,59 @@
import Vue from 'vue';
import { parser } from '@/ibp/utils/parser';
/**
* ibp状态数据
*/
const ibp = {
namespaced: true,
state: {
ibp: null, // 数据
ibpDevice: {}, // 解析后的地图数据
ibpList: {}, // 数据列表
ibpIdList: {} // 数据列表(以id为标识)
},
getters: {
ibpList: (state) => {
return state.ibpList;
},
ibp: (state) => {
return state.ibp;
},
version: (state) => {
if (state.ibp) {
return state.ibp.version;
} else {
return null;
}
}
},
mutations: {
ibpRender: (state, devices) => {
Vue.prototype.$ibp && Vue.prototype.$ibp.render(devices);
},
setIbpData: (state, ibp) => {
state.ibp = ibp;
}
},
actions: {
setIbpData: ({ commit }, map) => {
commit('setIbpData', map);
},
updateIbpDevices: ({ commit }, models) => {
return new Promise((resolve) => {
if (!(models instanceof Array)) {
models = [models];
}
commit('ibpRender', models);
resolve(models);
});
}
}
};
export default ibp;

7
src/store/modules/map.js
View File

@ -248,6 +248,13 @@ const map = {
return [];
}
},
buttonList: (state) => {
if (state.map) {
return state.map.buttonList;
} else {
return [];
}
},
signalList: (state) => {
if (state.map) {
return state.map.signalList;

4
src/utils/baseUrl.js
View File

@ -3,8 +3,8 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.9.255:9000'; // 袁琪
// BASE_API = 'https://test.joylink.club/jlcloud';
BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.4:9000' // 琰培
} else {

65
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="报警器宽度">
<el-input-number v-model="form.alarmWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="报警器长度">
<el-input-number v-model="form.alarmHeight" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'ButtonDraft',
components: {
},
data() {
return {
form: {
alarmWidth: '',
alarmHeight: ''
},
rules: {
alarmWidth: [
{ required: true, message: '请输入报警器宽度', trigger: 'blur' },
],
alarmHeight: [
{ required: true, message: '请输入报警器高度', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const alarmModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
_type: 'SquareButton',
width: this.form .alarmWidth,
height: this.form.alarmHeight
};
this.$emit('createButton', alarmModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

65
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="扶梯框宽度">
<el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="扶梯框高度">
<el-input-number v-model="form.appendageBoxHeight" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'AppendageBoxDraft',
components: {
},
data() {
return {
form: {
appendageBoxWidth: '',
appendageBoxHeight: ''
},
rules: {
appendageBoxWidth: [
{ required: true, message: '请输入扶梯框宽度', trigger: 'blur' },
],
appendageBoxHeight: [
{ required: true, message: '请输入扶梯框高度', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const appendageBoxModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
_type: 'AppendageBox',
width: this.form .appendageBoxWidth,
height: this.form.appendageBoxHeight
};
this.$emit('createAppendageBox', appendageBoxModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

78
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="箭头方向">
<el-select v-model="form.arrowDirection" placeholder="请选择箭头方向">
<el-option label="向上" value="redButton"></el-option>
<el-option label="向下" value="yellowButton"></el-option>
<el-option label="向左" value="greenButton"></el-option>
<el-option label="向右" value="greenButton"></el-option>
</el-select>
</el-form-item>
<el-form-item label="箭头长度">
<el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="箭头宽度">
<el-input-number v-model="form.arrowHeight" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'ButtonDraft',
components: {
},
data() {
return {
form: {
arrowDirection: '',
arrowWidth: '',
arrowHeight: ''
},
rules: {
arrowDirection: [
{ required: true, message: '请选择箭头方向', trigger: 'change'}
],
arrowWidth: [
{ required: true, message: '请输入箭头长度', trigger: 'blur' },
],
arrowHeight: [
{ required: true, message: '请输入箭头线宽', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const arrowModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
_type: 'Arrow',
colorType: this.form.buttonColor,
width: this.form .arrowWidth,
height: this.form.arrowHeight
};
this.$emit('createButton', arrowModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

71
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpBg.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="背景板宽度">
<el-input-number v-model="form.bgWidth" controls-position="right" :min="1" ></el-input-number>
</el-form-item>
<el-form-item label="背景板高度">
<el-input-number v-model="form.bgHeight" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'BgDraft',
components: {
},
data() {
return {
form: {
bgWidth: '',
bgHeight: ''
},
rules: {
bgWidth: [
{ required: true, message: '请输入背景板宽度', trigger: 'blur' },
],
bgHeight: [
{ required: true, message: '请输入背景板高度', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const bgModel = {
zlevel: 1,
z: 1,
x: 0,
y: 0,
_type: 'Background',
width: this.form .bgWidth,
height: this.form.bgHeight
};
this.$emit('createBg', bgModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

82
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="按钮颜色">
<el-select v-model="form.buttonColor" placeholder="请选择按钮颜色">
<el-option label="红色按钮" value="redButton"></el-option>
<el-option label="黄色按钮" value="yellowButton"></el-option>
<el-option label="绿色按钮" value="greenButton"></el-option>
</el-select>
</el-form-item>
<el-form-item label="按钮宽度">
<el-input-number v-model="form.buttonWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="按钮高度">
<el-input-number v-model="form.buttonHeight" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'ButtonDraft',
components: {
},
data() {
return {
form: {
buttonColor: '',
buttonWidth: '',
buttonHeight: ''
},
rules: {
buttonColor: [
{ required: true, message: '请选择按钮颜色', trigger: 'change'}
],
buttonWidth: [
{ required: true, message: '请输入按钮宽度', trigger: 'blur' },
],
buttonHeight: [
{ required: true, message: '请输入按钮高度', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const buttonModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
_type: 'SquareButton',
colorType: this.form.buttonColor,
width: this.form .bgWidth,
height: this.form.bgHeight
};
this.$emit('createButton', buttonModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

78
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpCLamp.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="圆形指示灯半径">
<el-input-number v-model="form.r" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="圆形指示灯关闭颜色">
<el-input-number v-model="form.offColor" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="圆形指示灯打开颜色">
<el-input-number v-model="form.onColor" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'ButtonDraft',
components: {
},
data() {
return {
form: {
r: '',
offColor: '',
onColor: ''
},
rules: {
r: [
{ required: true, message: '请输入圆形指示灯半径', trigger: 'change'}
],
offColor: [
{ required: true, message: '请输入圆形指示灯关闭颜色', trigger: 'blur' },
],
onColor: [
{ required: true, message: '请输入圆形指示灯打开颜色', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const lampModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
_type: 'CircularLamp',
r: this.form.r,
offColor: this.form.offColor,
onColor: this.form.onColor
};
this.$emit('createLamp', lampModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

65
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="旋转按钮宽度">
<el-input-number v-model="form.rotatingButtonWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="旋转按钮高度">
<el-input-number v-model="form.rotatingButtonHeight" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'RotatingButtonDraft',
components: {
},
data() {
return {
form: {
rotatingButtonWidth: '',
rotatingButtonHeight: ''
},
rules: {
rotatingButtonWidth: [
{ required: true, message: '请输入旋转按钮宽度', trigger: 'blur' },
],
rotatingButtonHeight: [
{ required: true, message: '请输入旋转按钮高度', trigger: 'blur' },
]
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const rotatingButtonModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
_type: 'RotatingButton',
width: this.form .rotatingButtonWidth,
height: this.form.rotatingButtonHeight
};
this.$emit('createAppendageBox', rotatingButtonModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>

92
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpText.vue Normal file
View File

@ -0,0 +1,92 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="文字编号">
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="文字内容">
<el-input type="textarea" v-model="form.context"></el-input>
</el-form-item>
<el-form-item label="文字颜色">
<el-input v-model="form.textFill"></el-input>
</el-form-item>
<el-form-item label="文字大小">
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" :max="50"></el-input-number>
</el-form-item>
<el-form-item label="是否加粗">
<el-switch v-model="form.fontWeight"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'TextDraft',
components: {
},
data() {
return {
form: {
code: '',
context: '',
textFill: '',
fontSize: '',
fontWeight: false
},
rules: {
code: [
{ required: true, message: '请输入文字编号', trigger: 'blur' },
],
context: [
{ required: true, message: '请输入文字内容', trigger: 'blur' },
],
textFill: [
{ required: true, message: '请输入文字颜色', trigger: 'blur' },
],
fontSize: [
{ required: true, message: '请输入文字大小', trigger: 'blur' },
],
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const textModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
code: this.form.code,
_type: 'IbpText',
context: this.form .context,
textFill: this.form.textFill,
fontSize: this.form.fontSize ,
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
};
this.$emit('createText', textModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

93
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTip.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="文字编号">
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="文字内容">
<el-input v-model="form.context"></el-input>
</el-form-item>
<el-form-item label="文字颜色">
<el-input v-model="form.textFill"></el-input>
</el-form-item>
<el-form-item label="文字大小">
<el-input-number v-model="form.fontSize" controls-position="right" :min="1" :max="50"></el-input-number>
</el-form-item>
<el-form-item label="是否加粗">
<el-switch v-model="form.fontWeight"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'TextDraft',
components: {
},
data() {
return {
form: {
code: '',
context: '',
textFill: '',
fontSize: '',
fontWeight: false
},
rules: {
code: [
{ required: true, message: '请输入文字编号', trigger: 'blur' },
],
context: [
{ required: true, message: '请输入文字内容', trigger: 'blur' },
],
textFill: [
{ required: true, message: '请输入文字颜色', trigger: 'blur' },
],
fontSize: [
{ required: true, message: '请输入文字大小', trigger: 'blur' },
],
}
};
},
computed: {
},
watch: {
},
mounted() {
},
methods: {
onSubmit() {
const textModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
code: this.form.code,
_type: 'IbpText',
context: this.form .context,
textFill: this.form.textFill,
fontSize: this.form.fontSize ,
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
};
this.$emit('createText', textModel)
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
</style>

104
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/index.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control">
<el-card type="border-card">
<div slot="header" class="clearfix">
<span>
车站名称
<b>请选择车站</b>
</span>
<el-button
type="text"
style="float: right; padding: 3px 0; margin-right: 5px;"
@click="handleSave"
>保存</el-button>
</div>
<el-tabs v-model="enabledTab" class="mapEdit" type="card">
<el-tab-pane label="背景板" name="BgImage">
<ibp-bg
@createBg="createDataModel"
></ibp-bg>
</el-tab-pane>
<el-tab-pane label="文字" name="Text">
<ibp-text
@createText="createDataModel"
>
</ibp-text>
</el-tab-pane>
<el-tab-pane label="功能提示" name="Tip">
<ibp-tip
@createTip="createDataModel"
></ibp-tip>
</el-tab-pane>
<el-tab-pane label="按键" name="Button">
<ibp-button
@createButton="createDataModel"
>
</ibp-button>
</el-tab-pane>
<el-tab-pane label="圆形指示灯" name="CircularLamp">
</el-tab-pane>
<el-tab-pane label="箭头" name="Arrow">
</el-tab-pane>
<el-tab-pane label="扶梯框" name="AppendageBox">
</el-tab-pane>
<el-tab-pane label="报警器" name="Alarm">
</el-tab-pane>
<el-tab-pane label="旋转按钮" name="SpinButton">
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</transition>
</template>
<script>
import { checkLoginLine } from '@/api/login';
import { updateIbpData } from '@/ibp/utils/parser';
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
import { EventBus } from '@/scripts/event-bus';
import IbpText from './ibpText';
import IbpTip from './ibpTip';
import IbpButton from './ibpButton';
import IbpBg from './ibpBg';
export default {
name: 'IbpOperate',
components: {
IbpText,
IbpBg,
IbpButton,
IbpTip
},
mixins: [
],
data() {
return {
enabledTab: 'BgImage',
};
},
watch: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
createDataModel(textModel) {
this.$store.dispatch('ibp/updateIbpDevices', textModel);
updateIbpData(textModel,'update')
},
handleSave() {
console.log(this.$store.state.ibp.ibp);
}
}
};
</script>

103
src/views/ibp/ibpDraft/ibpEdit/index.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<transition name="el-zoom-in-center">
<div class="mapPaint">
<div class="map-view">
<ibp-plate ref="ibpPlate"/>
</div>
<div class="map-draft">
<ibp-operate ref="ibpOperate"></ibp-operate>
</div>
</div>
</transition>
</template>
<script>
import { checkLoginLine } from '@/api/login';
import IbpPlate from '@/views/ibp/index';
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
import { EventBus } from '@/scripts/event-bus';
import IbpOperate from './ibpOperate/index';
export default {
name: 'MapView',
components: {
IbpPlate,
IbpOperate
},
mixins: [
WindowResizeHandler
],
data() {
return {
mapSaveing: false,
viewDraft: 'draft',
autoSaveTask: null,
selected: null,
mapInfo: { name: "" },
timeDemon: null
};
},
watch: {
},
mounted() {
this.$refs.ibpPlate.show();
this.$refs.ibpPlate.drawIbpInit();
},
beforeDestroy() {
},
methods: {
resizeHandler() {
this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
const width = this._clientWidth - 521;
const height = this._clientHeight;
this.$store.dispatch('config/resize', { width: width, height: height });
},
endViewLoading(isSuccess) {
},
selectViewDraft(data) {
this.viewDraft = data;
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.map-draft{
/deep/{
.v-modal{
opacity: 0;
}
}
}
.map-view {
float: left;
width: 60%;
}
.map-draft {
float: right;
width: 520px;
// /deep/ .el-scrollbar__view {
// width: 510px !important;
// height: calc(100% - 40px);
// }
}
.physical-view {
line-height: 25px;
height: 60px;
padding-left: 12px;
.el-checkbox {
width: 70px;
margin: 0;
margin-right: 12px;
}
}
</style>

72
src/views/ibp/ibpDraft/index.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div id="mapMain" class="ibpDraft">
<div class="map-list" :style="{width: widthLeft+'px'}">
<span>车站列表</span>
</div>
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
<transition>
<router-view />
</transition>
</div>
</template>
<script>
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
import localStore from 'storejs';
import IbpPlate from '@/views/ibp/index';
import DrapLeft from '@/views/components/drapLeft/index';
export default {
name: 'IbpDraft',
components: {
IbpPlate,
DrapLeft
},
mixins: [
WindowResizeHandler
],
data() {
return {
widthLeft: 320
};
},
watch: {
widthLeft(val) {
this.setMapResize(val);
}
},
mounted() {
// this.$refs.ibpPlate.show();
this.resizeHandler();
},
methods: {
drapWidth(width) {
this.widthLeft = Number(width);
},
resizeHandler() {
this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
const width = this._clientWidth - 521 - this.widthLeft;
const height = this._clientHeight - 90;
this.$store.dispatch('config/resize', { width: width, height: height });
},
setMapResize(LeftWidth) {
const widths = this._clientWidth - 521 - LeftWidth;
const heights = this._clientHeight - 90;
this.$store.dispatch('config/resize', { width: widths, height: heights });
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.ibpDraft {
overflow: hidden;
.map-list {
float: left;
height: 100%;
}
}
</style>

47
src/views/ibp/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div :id="ibpId" :style="{ width: '100%', height: '100%' }" class="ibp-canvas"></div>
<el-button class="ibp-button" type="primary" @click="back">返回</el-button>
<el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">返回</el-button>
</div>
</template>
@ -20,6 +20,8 @@ export default {
},
data() {
return {
width: this.$store.state.config.width,
height: this.$store.state.config.height,
dataZoom: {
offsetX: '0',
offsetY: '0',
@ -31,7 +33,8 @@ export default {
x: 0,
y: 0
}
}
},
showBackButton: true
};
},
computed: {
@ -58,12 +61,19 @@ export default {
}
},
methods: {
resizeHandler() {
this._clientWidth = this._clientWidth || document.documentElement.clientWidth;
this._clientHeight = this._clientHeight || document.documentElement.clientHeight;
const width = this._clientWidth - 521;
const height = this._clientHeight - 60;
this.$store.dispatch('config/resize', { width: width, height: height });
},
show: function () {
document.getElementById(this.ibpId).oncontextmenu = function (e) {
return false;
};
const data = parser(ibpData,{width: this.canvasWidth, height: this.canvasHeight});
console.log('=================', data);
this.$ibp = new IbpPan({
dom: document.getElementById(this.ibpId),
config: {
@ -82,8 +92,9 @@ export default {
stateLoaded: this.handleStateLoaded
}
});
Vue.prototype.$ibp = this.$ibp;
this.setMap(data);
console.log('+++++++++',this.$ibp);
this.$store.dispatch('ibp/setIbpData', ibpData);
window.document.oncontextmenu = function () {
return false;
};
@ -102,23 +113,7 @@ export default {
back() {
this.$emit('hideIbp');
},
// 视图缩放事假
onDataZoom(dataZoom) {
this.dataZoom.offsetX = dataZoom.offsetX.toFixed(1) + '';
this.dataZoom.offsetY = dataZoom.offsetY.toFixed(1) + '';
this.dataZoom.scaleRate = dataZoom.scaleRate + '';
const skinCode = this.$store.getters['map/skinCode'];
if (skinCode) {
const param = {
scaleRate: this.dataZoom.scaleRate,
offsetY: this.dataZoom.offsetY,
skinCode: skinCode
};
localStore.set(`scaleRate_${skinCode}`, JSON.stringify(param)); // 保存缩放倍数
}
},
// 点击选择事件
onSelected(em) {
this.$emit('onSelect', em);
@ -127,13 +122,10 @@ export default {
onContextMenu(em) {
this.$emit('onMenu', em);
},
// 缩小
setShrink() {
this.$ibp.setOptions({type: 'zoom', scale: -1});
},
// 放大
setMagnify() {
this.$ibp.setOptions({type: 'zoom', scale: 1});
// 绘图时调用，元素可拖拽
drawIbpInit() {
this.$ibp.drawIbpInit();
this.showBackButton = false;
}
}
};
@ -149,6 +141,5 @@ export default {
/*background-image: url('../../assets/ibp_images/ibp_bg.png');*/
/*background-repeat:repeat;*/
/*background-size: 4096px 2048px;*/
background-color: #0e151f;
}
</style>

18
src/views/map/mapdraft/mapedit/dataRelation/index.vue
View File

@ -38,6 +38,15 @@
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="路径单元" name="path">
<path-operate
ref="pathOperate"
:card-height="cardHeight+25"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="交路" name="routing">
<routing-operate
ref="routingOperate"
@ -65,15 +74,6 @@
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane label="路径单元" name="path">
<path-operate
ref="pathOperate"
:card-height="cardHeight+25"
:map-info="mapInfo"
:selected="selected"
@setCenter="setCenter"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>

24
src/views/map/mapdraft/mapedit/dataRelation/pathoperate/route.vue
View File

@ -58,7 +58,7 @@
style="width: 95%; margin: 0 auto"
>
<el-table-column type="index" />
<el-table-column prop="routeCode" label="进路ID" />
<el-table-column prop="routeCode" label="进路code" />
<el-table-column prop="routeName" label="进路名称" />
<el-table-column fixed="right" :label="$t('map.operation')" width="50">
<template slot-scope="scope">
@ -235,10 +235,8 @@ export default {
data.forEach((element, index) => {
this.addModel.mapRouteUnitRelList.push({
routeCode: element.code,
routeName: element.name,
mapId: this.mapInfo.id,
id: element.id,
routeUnitCode: this.addModel.code
routeName: element.name
// routeUnitCode: this.addModel.code
});
});
},
@ -274,15 +272,13 @@ export default {
this.loading = false;
});
} else {
[
addRouteUnit(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.createSuccess'));
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
})
];
addRouteUnit(this.buildModel()).then(response => {
this.$message.success(this.$t('tip.createSuccess'));
this.clear();
}).catch(() => {
this.$messageBox(this.$t('tip.operationAbnormal'));
this.loading = false;
});
}
},
clear() {

6
src/views/map/mapdraft/mapedit/dataRelation/routeoperate/route.vue
View File

@ -515,8 +515,10 @@ export default {
const model = Object.assign({}, this.addModel);
model['mapId'] = this.mapInfo.id;
model['routeSectionList'] = this.addModel.routeSectionList.map(elem => { return { sectionCode: elem }; });
model['routeTriggerSectionList'] = this.addModel.routeTriggerSectionList.map(elem => { return { mapId: this.mapInfo.id, routeCode: model.code, sectionCode: elem }; });
model['routeOverlapSectionList'] = this.addModel.routeOverlapSectionList.map(elem => { return { mapId: this.mapInfo.id, routeCode: model.code, sectionCode: elem }; });
// mapId: this.mapInfo.id, routeCode: model.code,
model['routeTriggerSectionList'] = this.addModel.routeTriggerSectionList.map(elem => { return { sectionCode: elem }; });
// mapId: this.mapInfo.id, routeCode: model.code,
model['routeOverlapSectionList'] = this.addModel.routeOverlapSectionList.map(elem => { return { sectionCode: elem }; });
model['routeStandList'] = this.addModel.routeStandList.map(elem => { return { stationStandCode: elem }; });
if (code) { model['code'] = code; }

4
src/views/map/mapdraft/mapedit/mapoperate/ImageControl.vue
View File

@ -120,8 +120,8 @@ export default {
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.image')}${this.$t('map.code')}`, type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.resourceList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.imageName'), type: 'input' },
{ prop: 'code', label: `${this.$t('map.image')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.resourceList, change: true, deviceChange: this.deviceChange },
// { prop: 'name', label: this.$t('map.imageName'), type: 'input' },
{ prop: 'width', label: this.$t('map.imageWidth'), type: 'number', min: 0 },
{ prop: 'height', label: this.$t('map.imageHeight'), type: 'number', min: 0 },
{ prop: 'zIndex', label: this.$t('map.imageZindex'), type: 'number', min: 0 },

308
src/views/map/mapdraft/mapedit/mapoperate/buttonDraft.vue Normal file
View File

@ -0,0 +1,308 @@
<template>
<div>
<el-tabs v-model="activeName" class="card">
<el-tab-pane class="view-control" :label="$t('map.property')" name="first">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<config-list ref="form" :form="form" :form-model="editModel" :rules="rules" />
</el-scrollbar>
<div class="button_box">
<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>
</div>
</el-tab-pane>
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" label-width="120px" :rules="createRules" :model="addModel" size="mini">
<!-- <el-form-item :label="$t('map.buttonText')+':'" prop="text">
<el-input v-model="addModel.text" />
</el-form-item> -->
<el-form-item :label="$t('map.buttonType')+ ':'" prop="type">
<el-select v-model="addModel.type" filterable>
<el-option
v-for="item in buttonTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.belongsStation')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
:key="item.code"
:label="item.name + ' (' + item.code+ ')'"
:value="item.code"
/>
</el-select>
</el-form-item>
<div class="coordinate">
<span class="title" style="width: 120px">{{ $t('map.textPoints') }}</span>
<el-form-item
label="x:"
prop="position.x"
style="display: table; float: left; margin-right: 20px;"
label-width="25px"
>
<el-input-number v-model="addModel.position.x" label="x:" />
</el-form-item>
<el-form-item
label="y:"
prop="position.y"
style="display: table; float: left;"
label-width="25px"
>
<el-input-number v-model="addModel.position.y" label="y:" />
</el-form-item>
</div>
</el-form>
</el-scrollbar>
<div class="button_box">
<el-button-group class="map-draft-group">
<el-button type="primary" size="small" @click="create">{{ $t('map.create') }}</el-button>
</el-button-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getUID } from '@/jmap/utils/Uid';
import ConfigList from './config/list';
export default {
name: 'LcControlDraft',
components: {
ConfigList
},
props: {
selected: {
type: Object,
default: function () {
return null;
}
},
cardHeight: {
type: [String, Number],
required: true
}
},
data() {
return {
activeName: 'first',
buttonTypeList: [
{ code: '01', name: '按图折返' }
],
mapData: null,
editModel: {
code: '',
text: '',
type: '',
stationCode: '',
position: {
x: 0,
y: 0
}
},
addModel: {
type: '',
stationCode: '',
text: '',
position: {
x: 0,
y: 0
}
},
rules: {
code: [
{ required: true, message: this.$t('rules.pleaseSelectEncoding'), trigger: 'change' }
],
tsxt: [
{ required: true, message: this.$t('rules.pleaseEnterStatusSignal'), trigger: 'blur' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
}
};
},
computed: {
...mapGetters('map', [
'stationList',
'buttonList'
]),
createRules: function () {
return {
text: [
{ required: true, message: this.$t('rules.pleaseSelectButtonContent'), trigger: 'blur' }
],
type: [
{ required: true, message: this.$t('rules.pleaseSelectButtonType'), trigger: 'blur' }
],
stationCode: [
{ required: true, message: this.$t('rules.stationControlStationCode'), trigger: 'change' }
],
'position.x': [
{ required: true, message: this.$t('map.pleaseEnterXCoordinate'), trigger: 'blur' }
],
'position.y': [
{ required: true, message: this.$t('map.pleaseEnterYCoordinate'), trigger: 'blur' }
]
};
},
form() {
const form = {
labelWidth: '140px',
items: {
code: {
name: '',
item: []
},
draw: {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: `${this.$t('map.buttonControl')}${this.$t('map.code')}`, type: 'select', optionLabel: 'code', optionValue: 'code', options: this.buttonList, change: true, deviceChange: this.deviceChange },
// { prop: 'text', label: `${this.$t('map.buttonText')}:`, type: 'input' },
{ prop: 'type', label: `${this.$t('map.buttonType')}:`, type: 'select', optionLabel: 'name', optionValue: 'code', options: this.buttonTypeList },
{ prop: 'position', label: this.$t('map.stateSignalsPlotCoordinates'), type: 'coordinate', width: '140px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px'},
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
] }
]
},
map: {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList }
]
}
}
};
return form;
}
},
watch: {
selected: function (val, oldVal) {
this.deviceSelect(val);
}
},
mounted() {
},
methods: {
deviceChange(code) {
this.$emit('setCenter', code);
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
},
deviceSelect(selected) {
this.$refs.form.resetFields();
this.$refs.make.resetFields();
if (selected && selected._type.toUpperCase() == 'ButtonControl'.toUpperCase()) {
this.editModel.code = selected.code;
this.editModel.text = selected.text;
this.editModel.type = selected.type;
this.editModel.stationCode = selected.stationCode;
this.editModel.position = {
x: selected.position.x,
y: selected.position.y
};
this.activeName = 'first';
}
},
create() {
this.$refs.make.validate((valid) => {
if (valid) {
const uid = getUID('ButtonControl');
const model = {
_type: 'ButtonControl',
code: uid,
type: this.addModel.type,
stationCode: this.addModel.stationCode,
text: this.addModel.text,
position: {
x: this.addModel.position.x,
y: this.addModel.position.y
}
};
this.$emit('addOrUpdateMapModel', model);
}
});
},
// 修改对象
edit() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.$emit('addOrUpdateMapModel', this.buildEditModel());
}
});
},
buildEditModel() {
const model = {
_type: 'ButtonControl',
code: this.editModel.code,
text: this.editModel.text,
type: this.editModel.type,
stationCode: this.editModel.stationCode,
position: {
x: this.editModel.position.x,
y: this.editModel.position.y
}
};
return model;
},
// 删除对象
deleteObj() {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'LcControl'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'
}).then(() => {
_that.$emit('delMapModel', selected);
_that.deviceSelect();
}).catch(() => {
_that.$message.info(this.$t('tip.cancelledDelete'));
});
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.button_box{
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
.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: 160px;
font-weight: bold;
display: block;
float: left;
}
}
.map-draft-group {
color: #3E44BE;
}
</style>

14
src/views/map/mapdraft/mapedit/mapoperate/index.vue
View File

@ -204,6 +204,16 @@
@setCenter="setCenter"
/>
</el-tab-pane>
<el-tab-pane :label="$t('map.button')" name="ButtonControl">
<button-draft
ref="ImageControl"
:card-height="cardHeights"
:selected="selected"
@addOrUpdateMapModel="addOrUpdateMapModel"
@delMapModel="delMapModel"
@setCenter="setCenter"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
@ -228,6 +238,7 @@ import ZcControlDraft from './zcControl';
import LimitControlDraft from './limitControl';
import LcControlDraft from './lcControl';
import ImageControlDraft from './ImageControl';
import ButtonDraft from './buttonDraft';
import { ViewMode } from '@/scripts/ConstDic';
@ -250,7 +261,8 @@ export default {
ZcControlDraft,
LimitControlDraft,
LcControlDraft,
ImageControlDraft
ImageControlDraft,
ButtonDraft
},
props: {
selected: {

2
src/views/map/mapdraft/mapedit/mapoperate/line.vue
View File

@ -27,7 +27,7 @@
<el-input-number v-model="addModel.width" :min="1" />px
</el-form-item>
<div class="coordinate">
<span class="title">{{ $t('map.segmentCoordinates') }}</span>
<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;">

24
src/views/map/mapdraft/mapedit/mapoperate/link.vue
View File

@ -171,14 +171,13 @@ export default {
{ prop: 'code', label: this.$t('map.linkCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.linkName'), type: 'input' },
{ prop: 'lp', label: this.$t('map.linkLp'), type: 'coordinate', width: '119px', children: [
{ prop: 'lp.x', firstLevel: 'lp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
{ prop: 'lp.y', firstLevel: 'lp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
{ prop: 'lp.x', firstLevel: 'lp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'lp.y', firstLevel: 'lp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] },
{ prop: 'rp', label: this.$t('map.linkRp'), type: 'coordinate', width: '119px', children: [
{ prop: 'rp.x', firstLevel: 'rp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: false },
{ prop: 'rp.y', firstLevel: 'rp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: false }
{ prop: 'rp.x', firstLevel: 'rp', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px', disabled: false },
{ prop: 'rp.y', firstLevel: 'rp', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px', disabled: false }
] },
{ prop: 'color', label: this.$t('map.linkColor'), type: 'color' },
{ prop: 'leftFdCode', label: this.$t('map.linkLeftFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'leftSdCode', label: this.$t('map.linkLeftSdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
{ prop: 'rightFdCode', label: this.$t('map.linkRightFdCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.linkLists },
@ -202,6 +201,21 @@ export default {
],
name: [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'lp.x': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'lp.y': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'rp.x': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
'rp.y': [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
],
lengthFact: [
{ required: true, message: this.$t('rules.linkSelectName'), trigger: 'blur' }
]
};
// 清空表单验证提示信息

22
src/views/map/mapdraft/mapedit/mapoperate/signal.vue
View File

@ -24,16 +24,6 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.directionType')" prop="directionType">
<el-select v-model="addModel.directionType" filterable>
<el-option
v-for="item in SignalDirectionTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.leftOrRight')" prop="leftOrRight">
<el-select v-model="addModel.leftOrRight" filterable>
<el-option
@ -44,6 +34,16 @@
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.directionType')" prop="directionType">
<el-select v-model="addModel.directionType" filterable>
<el-option
v-for="item in SignalDirectionTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('map.positionType')" prop="positionType">
<el-select v-model="addModel.positionType" filterable>
<el-option
@ -202,7 +202,7 @@ export default {
PhysicalSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return elem.type === '01'; });
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
}
return list;
},

2
src/views/map/mapdraft/mapedit/mapoperate/station.vue
View File

@ -171,7 +171,7 @@ export default {
PhysicalSectionList() {
let list = [];
if (this.sectionList && this.sectionList.length) {
list = this.sectionList.filter(elem => { return elem.type === '01'; });
list = this.sectionList.filter(elem => { return elem.type === '01' && !elem.isSwitchSection; });
}
return list;
},

13
src/views/map/mapdraft/mapedit/mapoperate/stationcontrol.vue
View File

@ -15,7 +15,7 @@
<el-tab-pane class="view-control" :label="$t('map.newConstruction')" name="second">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
<el-form ref="make" :model="addModel" label-width="120px" size="mini" :rules="makeRules">
<el-form-item :label="$t('map.stationName')" prop="stationCode">
<el-form-item :label="$t('map.stationstandName')" prop="stationCode">
<el-select v-model="addModel.stationCode" filterable>
<el-option
v-for="item in stationList"
@ -74,7 +74,8 @@ export default {
zakContent: '',
jjzkContent: '',
zbjkContent: '',
zzkContent: ''
zzkContent: '',
lskContent: ''
},
addModel: {
stationCode: ''
@ -104,11 +105,12 @@ export default {
name: this.$t('map.drawData'),
item: [
{ prop: 'code', label: this.$t('map.stationControlCode'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.stationControlList, change: true, deviceChange: this.deviceChange },
{ prop: 'name', label: this.$t('map.stationControlName'), type: 'input' },
// { prop: 'name', label: this.$t('map.stationControlName'), type: 'input' },
{ prop: 'zokContent', label: this.$t('map.zokContent'), type: 'input' },
{ prop: 'zakContent', label: this.$t('map.zakContent'), type: 'input' },
{ prop: 'jjzkContent', label: this.$t('map.jjzkContent'), type: 'input' },
{ prop: 'zzkContent', label: this.$t('map.zzkContent'), type: 'input' },
{ prop: 'lskContent', label: `${this.$t('map.interconnected')}:`, type: 'input' },
{ prop: 'position', label: this.$t('map.stationControlPosition'), type: 'coordinate', width: '150px', children: [
{ prop: 'position.x', firstLevel: 'position', secondLevel: 'x', label: 'x:', type: 'number', labelWidth: '25px' },
{ prop: 'position.y', firstLevel: 'position', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '25px' }
@ -184,6 +186,7 @@ export default {
this.editModel.zakContent = selected.zakContent;
this.editModel.jjzkContent = selected.jjzkContent;
this.editModel.zzkContent = selected.zzkContent;
this.editModel.lskContent = selected.lskContent;
this.editModel.stationCode = selected.stationCode;
this.editModel.zbjkContent = selected.zbjkContent;
if (selected.hasOwnProperty('position')) {
@ -208,7 +211,8 @@ export default {
zbjkContent: '总报警',
zakContent: '站控',
jjzkContent: '紧急站控',
zzkContent: '站中控按钮'
zzkContent: '站中控按钮',
lskContent: '连锁控'
};
this.stationList.forEach(elem => {
if (elem.code === this.addModel.stationCode) {
@ -241,6 +245,7 @@ export default {
zbjkContent: this.editModel.zbjkContent,
zakContent: this.editModel.zakContent,
jjzkContent: this.editModel.jjzkContent,
lskContent: this.editModel.lskContent,
zzkContent: this.editModel.zzkContent,
stationCode: this.editModel.stationCode,
position: {

44
src/views/map/mapdraft/mapedit/mapoperate/switch.vue
View File

@ -86,12 +86,16 @@ export default {
const list = [];
if (this.sectionList && this.sectionList.length) {
this.sectionList.forEach(elem => {
if (elem.type === '01') {
list.push({
label: elem.name,
key: elem.code,
pinyin: elem.name
});
if (elem.type === '01' && elem.isSwitchSection) {
const link = this.findLinkData(elem.linkCode);
if ((link.leftFdCode && link.leftSdCode) || (link.rightFdCode && link.rightSdCode)) {
list.push({
label: elem.name,
key: elem.code,
pinyin: elem.name
});
}
}
});
}
@ -125,10 +129,10 @@ export default {
name: this.$t('map.mapData'),
item: [
{ prop: 'stationCode', label: this.$t('map.equipmentStation'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.stationList },
{ prop: 'turnTime', label: this.$t('map.turnTime'), type: 'number', min: 0, max: 1000, placeholder: 's' },
{ prop: 'sectionACode', label: this.$t('map.sectionACode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
{ prop: 'sectionBCode', label: this.$t('map.sectionBCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
{ prop: 'sectionCCode', label: this.$t('map.sectionCCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList }
{ prop: 'turnTime', label: this.$t('map.turnTime'), type: 'number', min: 0, max: 1000, placeholder: 's' }
// { prop: 'sectionACode', label: this.$t('map.sectionACode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
// { prop: 'sectionBCode', label: this.$t('map.sectionBCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList },
// { prop: 'sectionCCode', label: this.$t('map.sectionCCode'), type: 'select', optionLabel: 'name&&code', optionValue: 'code', options: this.sectionList }
]
}
}
@ -229,6 +233,8 @@ export default {
if (node) {
const lFdSection = this.findSectionDataByLinkCodeAndPoint(link.leftFdCode, section.points[0]);
const lSdSection = this.findSectionDataByLinkCodeAndPoint(link.leftSdCode, section.points[0]);
// const cnodeSection = mapDevice[mapDevice[elem.code].sectionACode];
if (lFdSection && lSdSection) {
const model = {
_type: 'Switch',
@ -249,6 +255,14 @@ export default {
rp: {
x: lSdSection.points[lSdSection.points.length - 2].x,
y: lSdSection.points[lSdSection.points.length - 2].y
},
intersection: {
x: section.points[0].x,
y: section.points[0].y
},
skew: {
x: lSdSection.points[lSdSection.points.length - 2].x,
y: lSdSection.points[lSdSection.points.length - 2].y
}
};
@ -287,6 +301,14 @@ export default {
rp: {
x: rSdSection.points[1].x,
y: rSdSection.points[1].y
},
intersection: {
x: section.points[section.points.length - 1].x,
y: section.points[section.points.length - 1].y
},
skew: {
x: rSdSection.points[1].x,
y: rSdSection.points[1].y
}
};
@ -351,7 +373,7 @@ export default {
const selected = this.$store.getters['map/getDeviceByCode'](this.editModel.code);
if (selected && selected._type.toUpperCase() === 'Switch'.toUpperCase()) {
const _that = this;
this.$confirm(this.$t('tip.confirmBatchGeneration'), this.$t('tip.hint'), {
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
type: 'warning'

26
src/views/map/mapdraft/mapmanage/edit.vue
View File

@ -24,11 +24,6 @@
<el-form-item :label="$t('map.mapName')" prop="name">
<el-input v-model="editModel.name" />
</el-form-item>
<!-- <el-form-item :label="$t('map.selectCity')" prop="cityCode">
<el-select v-model="editModel.cityCode" :placeholder="$t('map.pleaseSelect')" size="mini">
<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
</el-select>
</el-form-item> -->
</el-form>
</template>
<template v-else>
@ -116,9 +111,6 @@ export default {
],
skinCode: [
{ required: true, message: this.$t('rules.pleaseSelectAssociatedSkin'), trigger: 'change' }
],
cityCode: [
{ required: true, message: this.$t('rules.pleaseSelectAssociatedCity'), trigger: 'change' }
]
};
},
@ -152,13 +144,19 @@ export default {
this.initLoadData();
},
methods: {
show() {
show(type) {
const dataZoom = this.$store.state.map.dataZoom;
if (dataZoom && dataZoom.offsetX) {
this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
this.updtModel.scaling = dataZoom.scaleRate;
if (type == 'editCode') {
this.editModel.skinCode = this.editModel.skinCode ? this.editModel.skinCode : '';
this.editModel.name = this.editModel.name ? this.editModel.name : '';
} else if (type == 'editPoint') {
if (dataZoom && dataZoom.offsetX) {
this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
this.updtModel.scaling = dataZoom.scaleRate;
}
}
this.dialogShow = true;
},
close() {
@ -176,7 +174,7 @@ export default {
save() {
this.loading = true;
if (this.basicInfo) {
this.editModel.id = this.$route.params.mapId;
// this.editModel.id = this.$route.params.mapId;
this.$refs['edit'].validate((valid) => {
if (valid) {
updateMap(this.editModel).then(response => {

2
src/views/map/mapdraft/mapmanage/maplist.vue
View File

@ -117,6 +117,7 @@ export default {
y: e.clientY
};
this.editModel = obj;
this.editModel.skinCode = node.parent.data.id;
this.$store.dispatch('menuOperation/setPopMenu', { position: this.point, menu: menu });
}
},
@ -299,7 +300,6 @@ export default {
import('@/utils/Export2Excel').then(excel => {
self.queryExportData(resultData).then(data => {
excel.export_json_excel(data, resultData.name);
}).catch(error => {
self.$message.error('导出执行异常：' + error.message);
});

18
src/views/map/mapdraft/mapmanage/operateMenu.vue
View File

@ -114,13 +114,13 @@ export default {
updateObj() {
this.doClose();
if (this.$refs && this.$refs.edit) {
this.$refs.edit.show();
this.$refs.edit.show('editCode');
}
},
updateObjAxis() {
this.doClose();
if (this.$refs && this.$refs.axisEdit) {
this.$refs.axisEdit.show();
this.$refs.axisEdit.show('editPoint');
}
},
saveAs() {
@ -144,12 +144,14 @@ export default {
type: 'warning'
}).then(() => {
deleteMap(this.editModel.id).then(response => {
this.$store.dispatch('map/mapClear').then(() => {
_that.refresh();
_that.$emit('editMap', null);
_that.$message.success(this.$t('map.successfullyDelete'));
_that.$router.push({ path: `${UrlConfig.map.draft}/0/draft` });
});
if (this.editModel.id == this.$route.params.mapId) {
this.$store.dispatch('map/mapClear').then(() => {
_that.$emit('editMap', null);
_that.$router.push({ path: `${UrlConfig.map.draft}/0/draft` });
});
}
_that.refresh();
_that.$message.success(this.$t('map.successfullyDelete'));
}).catch(error => {
_that.$message.error(this.$t('map.failDelete') + error.message);
});

9
src/views/map/mapdraft/mapmanage/publish.vue
View File

@ -6,6 +6,7 @@
label-position="right"
:model="editModel"
label-width="120px"
:rules="editRules"
size="mini"
@submit.native.prevent
>
@ -45,6 +46,14 @@ export default {
id: '',
name: '',
cityCode: '000000'
},
editRules: {
cityCode: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'change' }
],
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
]
}
};
},

6
src/views/map/mapdraft/mapmanage/saveAs.vue
View File

@ -6,6 +6,7 @@
label-position="right"
:model="editModel"
label-width="100px"
:rules="editRules"
size="mini"
@submit.native.prevent
>
@ -39,6 +40,11 @@ export default {
editModel: {
id: '',
name: ''
},
editRules: {
name: [
{ required: true, message: this.$t('rules.pleaseEnterMapName'), trigger: 'blur' }
]
}
};
},