Merge branch 'dev' of https://git.qcloud.com/joylink/jl-nclient into dev
This commit is contained in:
ival
commit
5574df0e9d
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 MiB After Width: | Height: | Size: 13 MiB |
BIN
src/assets/ibp_images/key.png
Normal file
BIN
src/assets/ibp_images/key.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
src/assets/ibp_images/key_on.png
Normal file
BIN
src/assets/ibp_images/key_on.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 13 KiB |
@ -29,7 +29,7 @@ deviceRender[deviceType.RotatingButton] = {
|
||||
|
||||
/** TipBox渲染配置*/
|
||||
deviceRender[deviceType.TipBox] = {
|
||||
zlevel: 2
|
||||
zlevel: 1
|
||||
};
|
||||
|
||||
/** BackGround渲染配置*/
|
||||
@ -57,4 +57,14 @@ deviceRender[deviceType.Elevator] = {
|
||||
zlevel: 2
|
||||
};
|
||||
|
||||
/** Key 渲染配置 */
|
||||
deviceRender[deviceType.Key] = {
|
||||
zlevel: 3
|
||||
};
|
||||
|
||||
/** TeleTerminal 渲染配置 */
|
||||
deviceRender[deviceType.TeleTerminal] = {
|
||||
zlevel: 2
|
||||
};
|
||||
|
||||
export default deviceRender;
|
||||
|
||||
@ -9,7 +9,9 @@ const deviceType = {
|
||||
IbpLine: 'IbpLine',
|
||||
AppendageBox: 'AppendageBox',
|
||||
Alarm: 'Alarm',
|
||||
Elevator: 'Elevator'
|
||||
Elevator: 'Elevator',
|
||||
Key: 'Key',
|
||||
TeleTerminal: 'TeleTerminal'
|
||||
};
|
||||
|
||||
export default deviceType;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -10,8 +10,9 @@ export default class alarm extends Group {
|
||||
this.model = device.model;
|
||||
this.event = device.event;
|
||||
this.zlevel = device.model.zlevel;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
@ -25,7 +26,7 @@ export default class alarm extends Group {
|
||||
x: model.point.x,
|
||||
y: model.point.y,
|
||||
width: model.width,
|
||||
height: model.height
|
||||
height: model.width/71*74
|
||||
}
|
||||
});
|
||||
this.add(this.imageBg);
|
||||
@ -53,8 +54,9 @@ export default class alarm extends Group {
|
||||
if (e.which == 3) {
|
||||
store.dispatch('ibp/setUpdateDeviceData', this.model);
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
|
||||
mousemove(e) {
|
||||
@ -62,7 +64,11 @@ export default class alarm extends Group {
|
||||
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
this.draggable = false;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@ export default class AppendageBox extends Group {
|
||||
this.z = device.model.z;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
@ -47,12 +48,16 @@ export default class AppendageBox extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ class Arrow extends Group {
|
||||
this.model = device.model;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
@ -25,7 +26,6 @@ class Arrow extends Group {
|
||||
},
|
||||
style: {
|
||||
stroke: model.stroke,
|
||||
lineWidth: model.lineWidth,
|
||||
fill: model.fill
|
||||
}
|
||||
});
|
||||
@ -81,13 +81,16 @@ class Arrow extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ export default class background extends Group {
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
this.imageBg = new Image({
|
||||
this.imageBg1 = new Image({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: {
|
||||
@ -23,6 +23,17 @@ export default class background extends Group {
|
||||
height: 1024
|
||||
}
|
||||
});
|
||||
this.imageBg2 = new Image({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
style: {
|
||||
x: 2048,
|
||||
y: 0,
|
||||
image: ibpBg,
|
||||
width: 2048,
|
||||
height: 1024
|
||||
}
|
||||
});
|
||||
this.tailorRect = new Rect({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
@ -37,7 +48,8 @@ export default class background extends Group {
|
||||
}
|
||||
tailorBgImage() {
|
||||
// this.imageBg.setClipPath(this.tailorRect);
|
||||
this.add(this.imageBg);
|
||||
this.add(this.imageBg1);
|
||||
this.add(this.imageBg2);
|
||||
}
|
||||
setDraggable() {
|
||||
}
|
||||
|
||||
@ -33,6 +33,7 @@ export default class button extends Group {
|
||||
this.event = device.event;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
@ -78,36 +79,36 @@ export default class button extends Group {
|
||||
setState(model) {
|
||||
switch (model.status) {
|
||||
case 'on': {
|
||||
// 关闭
|
||||
this.close();
|
||||
// 开放
|
||||
this.open();
|
||||
this.model.status='on';
|
||||
break;
|
||||
}
|
||||
case 'off': {
|
||||
// 开放
|
||||
this.open();
|
||||
// 关闭
|
||||
this.close();
|
||||
this.model.status='off';
|
||||
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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mousedown(e) {
|
||||
this.event.disable();
|
||||
@ -116,16 +117,18 @@ export default class button extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
// debugger;
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
|
||||
}
|
||||
// 关闭
|
||||
close() {
|
||||
const color = button.colors.get(`${this.model.color}_off`);
|
||||
|
||||
@ -9,8 +9,9 @@ export default class CircularLamp extends Group {
|
||||
this.event = device.event;
|
||||
this.zlevel = device.model.zlevel;
|
||||
this.z = device.model.z;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
@ -18,7 +19,7 @@ export default class CircularLamp extends Group {
|
||||
this.lamp = new Circle({
|
||||
zlevel: this.zlevel,
|
||||
z: this.z,
|
||||
draggable: this.model.draggable||false,
|
||||
draggable: false,
|
||||
shape: {
|
||||
cx: this.model.point.x,
|
||||
cy: this.model.point.y,
|
||||
@ -50,12 +51,15 @@ export default class CircularLamp extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,8 +33,8 @@ export default class elevator extends Group {
|
||||
},
|
||||
width: model.width,
|
||||
height: model.height,
|
||||
fillColor: model.fillColor ||'#adadad',
|
||||
stroke: model.fillColor ||'#adadad',
|
||||
fillColor: model.fillColor ||'#313131',
|
||||
stroke: model.fillColor ||'#313131',
|
||||
lineWidth: 0
|
||||
}
|
||||
});
|
||||
|
||||
@ -16,7 +16,7 @@ export default class elevatorArrow extends Group {
|
||||
const model = this.model;
|
||||
this.imageBg = new Image({
|
||||
zlevel: this.zlevel,
|
||||
z: 3,
|
||||
z: model.z,
|
||||
draggable: false,
|
||||
style: {
|
||||
image: this.getStatus(),
|
||||
|
||||
@ -21,12 +21,14 @@ export default class elevatorBack extends Group {
|
||||
draggable: false,
|
||||
// model.draggable ||
|
||||
shape: {
|
||||
cx: model.point.x + model.width/6*5,
|
||||
cy: model.point.y + model.height/8,
|
||||
r: model.width/6
|
||||
cx: (model.point.x + model.width/6*5).toFixed(2),
|
||||
cy: (model.point.y + model.height/8).toFixed(2),
|
||||
r: (model.width/6).toFixed(2)
|
||||
},
|
||||
style: {
|
||||
fill: this.model.fillColor || '#adadad'
|
||||
brushType: 'fill',
|
||||
fill: this.model.fillColor || '#313131',
|
||||
lineWidth: 0
|
||||
}
|
||||
});
|
||||
|
||||
@ -35,17 +37,18 @@ export default class elevatorBack extends Group {
|
||||
z: model.z,
|
||||
draggable: false,
|
||||
shape: {
|
||||
points: [[model.point.x+model.width/6, model.point.y + model.height], [model.point.x+model.width/6*2, model.point.y + model.height],
|
||||
[model.point.x+model.width/6*5, model.point.y + model.height/8*2],
|
||||
[model.point.x+model.width/6*5, model.point.y],
|
||||
[model.point.x+model.width/6*4, model.point.y],
|
||||
[model.point.x+model.width/6, model.point.y + model.height/8*6]
|
||||
points: [[(model.point.x+model.width/6).toFixed(2), (model.point.y + model.height).toFixed(2)], [(model.point.x+model.width/6*2).toFixed(2), model.point.y + model.height],
|
||||
[(model.point.x+model.width/6*5).toFixed(2), (model.point.y + model.height/8*2).toFixed(2)],
|
||||
[(model.point.x+model.width/6*5).toFixed(2), model.point.y],
|
||||
[(model.point.x+model.width/6*4).toFixed(2), model.point.y],
|
||||
[(model.point.x+model.width/6).toFixed(2), (model.point.y + model.height/8*6).toFixed(2)]
|
||||
]
|
||||
},
|
||||
style: {
|
||||
stroke: model.stroke || '#adadad',
|
||||
lineWidth: model.lineWidth,
|
||||
fill: model.fillColor || '#adadad'
|
||||
brushType: 'fill',
|
||||
stroke: model.stroke || '#313131',
|
||||
lineWidth: 0,
|
||||
fill: model.fillColor || '#313131'
|
||||
}
|
||||
});
|
||||
|
||||
@ -55,12 +58,14 @@ export default class elevatorBack extends Group {
|
||||
// path: 'M 0 0 Q -70 -50 0 -100 0 -100 L 150 -400 L 200 -400 Q 270 -350 200 -300 200 -300 L 50 0',
|
||||
draggable: false,
|
||||
shape: {
|
||||
cx: model.point.x + model.width/6,
|
||||
cy: model.point.y + model.height/8*7,
|
||||
r: model.width/6
|
||||
cx: (model.point.x + model.width/6).toFixed(2),
|
||||
cy: (model.point.y + model.height/8*7).toFixed(2),
|
||||
r: (model.width/6).toFixed(2)
|
||||
},
|
||||
style: {
|
||||
fill: this.model.fillColor || '#adadad'
|
||||
fill: this.model.fillColor || '#313131',
|
||||
lineWidth: 0,
|
||||
brushType: 'fill'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -10,6 +10,8 @@ import TipBox from './ibpTipBox';
|
||||
import AppendageBox from './appendageBox';
|
||||
import RotatingButton from './rotatingButton';
|
||||
import Elevator from './elevator';
|
||||
import Key from './key';
|
||||
import TeleTerminal from './teleTerminal';
|
||||
|
||||
const ibpShape = {};
|
||||
ibpShape[deviceType.Arrow] = Arrow;
|
||||
@ -23,6 +25,8 @@ ibpShape[deviceType.TipBox] = TipBox;
|
||||
ibpShape[deviceType.AppendageBox] = AppendageBox;
|
||||
ibpShape[deviceType.RotatingButton] = RotatingButton;
|
||||
ibpShape[deviceType.Elevator] = Elevator;
|
||||
ibpShape[deviceType.Key] = Key;
|
||||
ibpShape[deviceType.TeleTerminal] = TeleTerminal;
|
||||
|
||||
function shapefactory(device, ibp) {
|
||||
const type = device.model._type;
|
||||
|
||||
@ -9,8 +9,9 @@ export default class ibpLine extends Group {
|
||||
this.event = device.event;
|
||||
this.zlevel = device.model.zlevel;
|
||||
this.z = device.model.z;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
@ -48,14 +49,17 @@ export default class ibpLine extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point1.x = this.model.point1.x - this.offsetX + e.offsetX;
|
||||
this.model.point1.y = this.model.point1.y - this.offsetY + e.offsetY;
|
||||
this.model.point2.x = this.model.point2.x - this.offsetX + e.offsetX;
|
||||
this.model.point2.y = this.model.point2.y - this.offsetY + e.offsetY;
|
||||
if (this.dragging) {
|
||||
this.model.point1.x = this.model.point1.x - this.offsetX + e.offsetX;
|
||||
this.model.point1.y = this.model.point1.y - this.offsetY + e.offsetY;
|
||||
this.model.point2.x = this.model.point2.x - this.offsetX + e.offsetX;
|
||||
this.model.point2.y = this.model.point2.y - this.offsetY + e.offsetY;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ export default class ibpText extends Group {
|
||||
this.z = device.model.z;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
@ -31,7 +32,8 @@ export default class ibpText extends Group {
|
||||
textFill: model.textFill,
|
||||
textAlign: model.textAlign,
|
||||
textPosition: model.textPosition || 'inside',
|
||||
textVerticalAlign: model.textVerticalAlign || null
|
||||
textVerticalAlign: model.textVerticalAlign || null,
|
||||
textLineHeight: model.fontSize
|
||||
}
|
||||
});
|
||||
this.add(this.textName);
|
||||
@ -52,13 +54,15 @@ export default class ibpText extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
console.log('test', e);
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ export default class ibpTipBox extends Group {
|
||||
this.z = device.model.z;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
create() {
|
||||
@ -47,12 +48,15 @@ export default class ibpTipBox extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
103
src/ibp/shape/key.js
Normal file
103
src/ibp/shape/key.js
Normal file
@ -0,0 +1,103 @@
|
||||
import Group from 'zrender/src/container/Group';
|
||||
import Image from 'zrender/src/graphic/Image';
|
||||
import keyPic from '@/assets/ibp_images/key.png';
|
||||
import keyPicOn from '@/assets/ibp_images/key_on.png';
|
||||
import store from '@/store';
|
||||
|
||||
export default class key extends Group {
|
||||
|
||||
constructor(device) {
|
||||
super();
|
||||
this.model = device.model;
|
||||
this.zlevel = device.model.zlevel;
|
||||
this.event = device.event;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.create();
|
||||
}
|
||||
|
||||
create() {
|
||||
const model = this.model;
|
||||
this.imageBg = new Image({
|
||||
zlevel: this.zlevel,
|
||||
z: model.z,
|
||||
draggable: model.draggable || false,
|
||||
style: {
|
||||
image: this.getRotateColor(),
|
||||
x: model.point.x,
|
||||
y: model.point.y,
|
||||
width: 314,
|
||||
height: 932
|
||||
}
|
||||
});
|
||||
this.add(this.imageBg);
|
||||
this.transformScale();
|
||||
}
|
||||
|
||||
/** 缩放按钮 */
|
||||
transformScale() {
|
||||
this.imageBg.origin = [this.model.point.x, this.model.point.y];
|
||||
this.imageBg.scale =[this.model.width/314, this.model.width/314];
|
||||
this.imageBg.dirty();
|
||||
}
|
||||
|
||||
getRotateColor() {
|
||||
if (this.model.status) {
|
||||
switch (this.model.status) {
|
||||
case 'on': {
|
||||
return keyPicOn;
|
||||
}
|
||||
case 'off': {
|
||||
return keyPic;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return keyPic;
|
||||
}
|
||||
}
|
||||
|
||||
setStatus(model) {
|
||||
switch (model.status) {
|
||||
case 'on': {
|
||||
// 开放
|
||||
this.imageBg.setStyle({image: keyPicOn});
|
||||
this.model.status='on';
|
||||
break;
|
||||
}
|
||||
case 'off': {
|
||||
// 关闭
|
||||
this.imageBg.setStyle({image: keyPic});
|
||||
this.model.status='off';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setDraggable() {
|
||||
this.imageBg.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();
|
||||
if (e.which == 3) {
|
||||
store.dispatch('ibp/setUpdateDeviceData', this.model);
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
}
|
||||
|
||||
mousemove(e) {
|
||||
}
|
||||
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
}
|
||||
@ -13,6 +13,7 @@ export default class rotateTip extends Group {
|
||||
this.event = device.event;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
@ -72,6 +73,7 @@ export default class rotateTip extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
|
||||
mousemove(e) {
|
||||
@ -79,7 +81,9 @@ export default class rotateTip extends Group {
|
||||
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,6 +12,7 @@ export default class RotatingButton extends Group {
|
||||
this.z = device.model.z;
|
||||
this.offsetX = 0;
|
||||
this.offsetY = 0;
|
||||
this.dragging = false;
|
||||
this.create();
|
||||
}
|
||||
|
||||
@ -25,7 +26,7 @@ export default class RotatingButton extends Group {
|
||||
x: this.model.point.x,
|
||||
y: this.model.point.y,
|
||||
width: this.model.width,
|
||||
height: this.model.height
|
||||
height: this.model.width/434*381
|
||||
}
|
||||
});
|
||||
this.add(this.rotatingButton);
|
||||
@ -47,12 +48,15 @@ export default class RotatingButton extends Group {
|
||||
}
|
||||
this.offsetX = e.offsetX;
|
||||
this.offsetY = e.offsetY;
|
||||
this.dragging = true;
|
||||
}
|
||||
mousemove() {
|
||||
}
|
||||
mouseup(e) {
|
||||
this.event.enable();
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
if (this.dragging) {
|
||||
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
|
||||
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ export default class alarm extends Group {
|
||||
|
||||
constructor(device) {
|
||||
super();
|
||||
this.event = device.event;
|
||||
this.model = device.model;
|
||||
this.zlevel = device.model.zlevel;
|
||||
this.create();
|
||||
@ -20,8 +21,8 @@ export default class alarm extends Group {
|
||||
image: teleTerminalPic,
|
||||
x: model.point.x,
|
||||
y: model.point.y,
|
||||
width: 64,
|
||||
height: 56
|
||||
width: 150,
|
||||
height: 150
|
||||
}
|
||||
});
|
||||
this.add(this.imageBg);
|
||||
@ -31,12 +32,12 @@ export default class alarm extends Group {
|
||||
/** 缩放按钮 */
|
||||
transformScale() {
|
||||
this.imageBg.origin = [this.model.point.x, this.model.point.y];
|
||||
this.imageBg.scale =[this.model.width/64, this.model.width/64];
|
||||
this.imageBg.scale =[this.model.width/150, this.model.width/150];
|
||||
this.imageBg.dirty();
|
||||
}
|
||||
|
||||
setDraggable() {
|
||||
this.arrow.attr('draggable', true);
|
||||
this.imageBg.attr('draggable', true);
|
||||
this.createMouseEvent();
|
||||
}
|
||||
createMouseEvent() {
|
||||
|
||||
@ -58,8 +58,8 @@ export function parser(data, config) {
|
||||
ibpDevice[elem.code] = createModel(deviceType.CircularLamp, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.warnButtonList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.WarnButton, elem, propConvert);
|
||||
zrUtil.each(data.alarmList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.Alarm, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.arrowList || [], elem => {
|
||||
@ -70,14 +70,30 @@ export function parser(data, config) {
|
||||
ibpDevice[elem.code] = createModel(deviceType.RotatingButton, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.tipList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.Tip, elem, propConvert);
|
||||
zrUtil.each(data.tipBoxList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.TipBox, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.ibpLineList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.IbpLine, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.appendageBoxList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.AppendageBox, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.elevatorList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.Elevator, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.keyList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.Key, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
zrUtil.each(data.teleTerminalList || [], elem => {
|
||||
ibpDevice[elem.code] = createModel(deviceType.TeleTerminal, elem, propConvert);
|
||||
}, this);
|
||||
|
||||
}
|
||||
|
||||
return ibpDevice;
|
||||
@ -259,6 +275,40 @@ export function updateIbpData(device) {
|
||||
}
|
||||
break;
|
||||
}
|
||||
case deviceType.Key : {
|
||||
if (ibpData.keyList && ibpData.keyList.length > 0) {
|
||||
let newDevice = true;
|
||||
for (let i=0; i<ibpData.keyList.length; i++) {
|
||||
if (device.code === ibpData.keyList[i].code) {
|
||||
device.dispose ? ibpData.keyList.splice(i, 1):ibpData.keyList[i] = device;
|
||||
newDevice = false;
|
||||
}
|
||||
}
|
||||
if (newDevice) {
|
||||
ibpData.keyList.push(device);
|
||||
}
|
||||
} else {
|
||||
ibpData.keyList = [device];
|
||||
}
|
||||
break;
|
||||
}
|
||||
case deviceType.TeleTerminal : {
|
||||
if (ibpData.teleTerminalList && ibpData.teleTerminalList.length > 0) {
|
||||
let newDevice = true;
|
||||
for (let i=0; i<ibpData.teleTerminalList.length; i++) {
|
||||
if (device.code === ibpData.teleTerminalList[i].code) {
|
||||
device.dispose ? ibpData.teleTerminalList.splice(i, 1):ibpData.teleTerminalList[i] = device;
|
||||
newDevice = false;
|
||||
}
|
||||
}
|
||||
if (newDevice) {
|
||||
ibpData.teleTerminalList.push(device);
|
||||
}
|
||||
} else {
|
||||
ibpData.teleTerminalList = [device];
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
store.dispatch('ibp/setIbpData', ibpData);
|
||||
|
||||
@ -388,13 +388,13 @@ export const asyncRouter = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'ibp/edit',
|
||||
component: IbpEdit,
|
||||
meta: {
|
||||
i18n: 'router.ibpDraw'
|
||||
}
|
||||
},
|
||||
// {
|
||||
// path: 'ibp/edit',
|
||||
// component: IbpEdit,
|
||||
// meta: {
|
||||
// i18n: 'router.ibpDraw'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
path: 'runPlan',
|
||||
redirect: '/map/runPlan/view/draft',
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="报警器编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="报警器编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警器宽度">
|
||||
<el-form-item label="报警器宽度" prop="alarmWidth">
|
||||
<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 label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -28,14 +34,11 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
alarmHeight: ''
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
@ -43,9 +46,6 @@
|
||||
],
|
||||
alarmWidth: [
|
||||
{ required: true, message: '请输入报警器宽度', trigger: 'blur' },
|
||||
],
|
||||
alarmHeight: [
|
||||
{ required: true, message: '请输入报警器高度', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
@ -62,36 +62,46 @@
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.alarmWidth = model.width;
|
||||
this.form.alarmHeight = model.height;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const alarmModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form .alarmWidth,
|
||||
height: this.form.alarmHeight
|
||||
};
|
||||
this.$emit('createAlarm', alarmModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const alarmModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form .alarmWidth,
|
||||
};
|
||||
this.$emit('createAlarm', alarmModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const alarmModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point:{
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'Alarm',
|
||||
width: this.form .alarmWidth,
|
||||
height: this.form.alarmHeight
|
||||
};
|
||||
this.$emit('deleteDataModel',alarmModel );
|
||||
this.initPage();
|
||||
@ -103,12 +113,13 @@
|
||||
this.form = {
|
||||
code: '',
|
||||
alarmWidth: '',
|
||||
alarmHeight: ''
|
||||
};
|
||||
this.point = {
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "alarm_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="扶梯框编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="扶梯框编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="扶梯框宽度">
|
||||
<el-form-item label="扶梯框宽度" prop="appendageBoxWidth">
|
||||
<el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="扶梯框高度">
|
||||
<el-form-item label="扶梯框高度" prop="appendageBoxHeight">
|
||||
<el-input-number v-model="form.appendageBoxHeight" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -28,14 +37,13 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
form: {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: ''
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入扶梯框编号', trigger: 'blur' },
|
||||
@ -62,31 +70,44 @@
|
||||
this.form.code = model.code;
|
||||
this.form.appendageBoxWidth = model.width;
|
||||
this.form.appendageBoxHeight = model.height;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const appendageBoxModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form .appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight
|
||||
};
|
||||
this.$emit('createAppendageBox', appendageBoxModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const appendageBoxModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form .appendageBoxWidth,
|
||||
height: this.form.appendageBoxHeight
|
||||
};
|
||||
this.$emit('createAppendageBox', appendageBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const appendageBoxModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'AppendageBox',
|
||||
code: this.form.code,
|
||||
width: this.form .appendageBoxWidth,
|
||||
@ -102,12 +123,14 @@
|
||||
this.form = {
|
||||
code: '',
|
||||
appendageBoxWidth: '',
|
||||
appendageBoxHeight: ''
|
||||
};
|
||||
this.point = {
|
||||
appendageBoxHeight: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "aBox"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item label="箭头编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="箭头编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头方向">
|
||||
<el-form-item label="箭头方向" prop="orientation">
|
||||
<el-select v-model="form.orientation" placeholder="请选择箭头方向">
|
||||
<el-option label="向上" value="top"></el-option>
|
||||
<el-option label="向下" value="bottom"></el-option>
|
||||
@ -12,18 +14,19 @@
|
||||
<el-option label="向右" value="right"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头长度">
|
||||
<el-form-item label="箭头长度" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowLength" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头宽度">
|
||||
<el-form-item label="箭头宽度" prop="arrowLength">
|
||||
<el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="箭头颜色">
|
||||
<el-form-item label="箭头颜色" prop="fillColor">
|
||||
<el-input v-model="form.fillColor"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -31,7 +34,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonDraft',
|
||||
name: 'ArrowDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
@ -91,21 +94,27 @@
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const arrowModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form .arrowWidth,
|
||||
length: this.form.arrowLength,
|
||||
lineWidth: 1
|
||||
};
|
||||
this.$emit('createArrow', arrowModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const arrowModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
_type: 'Arrow',
|
||||
code: this.form.code,
|
||||
orientation: this.form.orientation,
|
||||
fill: this.form.fillColor,
|
||||
width: this.form .arrowWidth,
|
||||
length: this.form.arrowLength,
|
||||
};
|
||||
this.$emit('createArrow', arrowModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const arrowModel = {
|
||||
@ -118,7 +127,6 @@
|
||||
fill: this.form.fillColor,
|
||||
width: this.form .arrowWidth,
|
||||
length: this.form.arrowLength,
|
||||
lineWidth: 1
|
||||
};
|
||||
this.$emit('deleteDataModel',arrowModel);
|
||||
this.initPage();
|
||||
@ -138,6 +146,10 @@
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "arrow_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="背景板宽度">
|
||||
<el-input-number v-model="form.bgWidth" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
@ -1,26 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item label="按钮编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="按钮编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="按钮颜色">
|
||||
<el-form-item label="按钮颜色" prop="buttonColor">
|
||||
<el-select v-model="form.buttonColor" placeholder="请选择按钮颜色">
|
||||
<el-option label="红色按钮" value="red"></el-option>
|
||||
<el-option label="黄色按钮" value="yellow"></el-option>
|
||||
<el-option label="绿色按钮" value="green"></el-option>
|
||||
<el-option label="蓝色按钮" value="blue"></el-option>
|
||||
<el-option label="灰色按钮" value="gray"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="按钮宽度">
|
||||
<el-form-item label="按钮宽度" prop="buttonWidth">
|
||||
<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 label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -36,15 +43,12 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
buttonColor: '',
|
||||
buttonWidth: '',
|
||||
buttonHeight: ''
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
@ -55,9 +59,6 @@
|
||||
],
|
||||
buttonWidth: [
|
||||
{ required: true, message: '请输入按钮宽度', trigger: 'blur' },
|
||||
],
|
||||
buttonHeight: [
|
||||
{ required: true, message: '请输入按钮高度', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
@ -75,40 +76,50 @@
|
||||
this.form.code = model.code;
|
||||
this.form.buttonColor = model.color;
|
||||
this.form.buttonWidth = model.width;
|
||||
this.form.buttonHeight = model.height;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const buttonModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
_type: 'SquareButton',
|
||||
code: this.form.code,
|
||||
color: this.form.buttonColor,
|
||||
status: 'off',
|
||||
width: this.form.buttonWidth,
|
||||
height: this.form.buttonHeight
|
||||
};
|
||||
this.$emit('createButton', buttonModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const buttonModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'SquareButton',
|
||||
code: this.form.code,
|
||||
color: this.form.buttonColor,
|
||||
status: 'off',
|
||||
width: this.form.buttonWidth,
|
||||
};
|
||||
this.$emit('createButton', buttonModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice() {
|
||||
const buttonModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'SquareButton',
|
||||
code: this.form.code,
|
||||
color: this.form.buttonColor,
|
||||
status: 'off',
|
||||
width: this.form.buttonWidth,
|
||||
height: this.form.buttonHeight
|
||||
};
|
||||
this.$emit('deleteDataModel',buttonModel );
|
||||
this.initPage();
|
||||
@ -121,21 +132,17 @@
|
||||
code: '',
|
||||
buttonColor: '',
|
||||
buttonWidth: '',
|
||||
buttonHeight: ''
|
||||
};
|
||||
this.point = {
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "sButton_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.button_box{
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="电梯编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code" style="width:300px"></el-input>
|
||||
<el-form-item label="电梯编号" prop="code">
|
||||
<el-input :disabled="isUpdate" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电梯宽度">
|
||||
<el-form-item label="电梯宽度" prop="elevatorWidth">
|
||||
<el-input-number v-model="form.elevatorWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="电梯高度">
|
||||
<el-form-item label="电梯高度" prop="elevatorHeight">
|
||||
<el-input-number v-model="form.elevatorHeight" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="电梯颜色">
|
||||
<el-form-item label="电梯颜色" prop="elevatorColor">
|
||||
<el-color-picker v-model="form.elevatorColor"></el-color-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="启动方向">
|
||||
<el-form-item label="启动方向" prop="direction">
|
||||
<el-select v-model="form.direction" placeholder="请选择启动方向">
|
||||
<el-option label="不启动" value="none"></el-option>
|
||||
<el-option label="向上启动" value="top"></el-option>
|
||||
<el-option label="向下启动" value="bottom"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -37,16 +46,14 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 70,
|
||||
y: 70
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
elevatorWidth: '',
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
@ -72,7 +79,6 @@
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
// 待修改
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Elevator' ){
|
||||
this.buttonText = '修改';
|
||||
@ -83,36 +89,47 @@
|
||||
this.form.elevatorHeight = model.height;
|
||||
this.form.elevatorColor = model.fillColor;
|
||||
this.form.direction = model.direction;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid){
|
||||
const elevatorModel = {
|
||||
zlevel: 2,
|
||||
z: 2,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction,
|
||||
};
|
||||
this.$emit('createElevator', elevatorModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const elevatorModel = {
|
||||
zlevel: 2,
|
||||
z: 2,
|
||||
point: this.point,
|
||||
draggable: true,
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
height: this.form.elevatorHeight,
|
||||
fillColor: this.form.elevatorColor,
|
||||
direction: this.form.direction,
|
||||
};
|
||||
this.$emit('createElevator', elevatorModel);
|
||||
this.initPage();
|
||||
},
|
||||
deleteDevice() {
|
||||
// 待修改
|
||||
const elevatorModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
draggable: true,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'Elevator',
|
||||
code: this.form.code,
|
||||
width: this.form.elevatorWidth,
|
||||
@ -133,15 +150,17 @@
|
||||
elevatorHeight: '',
|
||||
elevatorColor:'',
|
||||
direction:'none',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
this.point = {
|
||||
x: 80,
|
||||
y: 80
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "elevator_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
157
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpKey.vue
Normal file
157
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpKey.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="钥匙编号" prop="code">
|
||||
<el-input :disabled="isUpdate" v-model="form.code">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="钥匙宽度" prop="keyWidth">
|
||||
<el-input-number v-model="form.keyWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="钥匙高度" prop="keyHeight">
|
||||
<el-input-number v-model="form.keyHeight" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="钥匙朝向" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择钥匙朝向">
|
||||
<el-option label="水平" value="on"></el-option>
|
||||
<el-option label="竖直" value="off"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
form: {
|
||||
code: '',
|
||||
keyWidth: '',
|
||||
keyHeight: '',
|
||||
status:'',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入钥匙孔编号', trigger: 'blur' },
|
||||
],
|
||||
keyWidth: [
|
||||
{ required: true, message: '请输入钥匙孔宽度', trigger: 'blur' },
|
||||
],
|
||||
keyHeight: [
|
||||
{ required: true, message: '请输入钥匙孔高度', trigger: 'blur' },
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择钥匙朝向', trigger: 'change' },
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'Key' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.keyWidth = model.width;
|
||||
this.form.keyHeight = model.height;
|
||||
this.form.status = model.status;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if(valid) {
|
||||
const keyModel = {
|
||||
zlevel: 3,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'Key',
|
||||
code: this.form.code,
|
||||
width: this.form.keyWidth,
|
||||
height: this.form.keyHeight,
|
||||
status:this.form.status
|
||||
};
|
||||
this.$emit('createKey', keyModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const keyModel = {
|
||||
zlevel: 3,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'Key',
|
||||
code: this.form.code,
|
||||
width: this.form .keyWidth,
|
||||
height: this.form.keyHeight,
|
||||
status:this.form.status
|
||||
};
|
||||
this.$emit('deleteDataModel',keyModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
keyWidth: '',
|
||||
keyHeight: '',
|
||||
status:'',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "key_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,15 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="圆形指示灯编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="圆形指示灯编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="圆形指示灯半径">
|
||||
<el-form-item label="圆形指示灯半径" prop="r">
|
||||
<el-input-number v-model="form.r" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -17,7 +26,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonDraft',
|
||||
name: 'LampDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
@ -25,20 +34,18 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
r: ''
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入按钮编号', trigger: 'blur' },
|
||||
],
|
||||
r: [
|
||||
{ required: true, message: '请输入圆形指示灯半径', trigger: 'change'}
|
||||
{ required: true, message: '请输入圆形指示灯半径', trigger: 'blur'}
|
||||
],
|
||||
}
|
||||
};
|
||||
@ -55,31 +62,45 @@
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.r = model.r;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const lampModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('createLamp', lampModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if(valid){
|
||||
const lampModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
fillColor: '#332C22'
|
||||
};
|
||||
this.$emit('createLamp', lampModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lampModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
_type: 'CircularLamp',
|
||||
code: this.form.code,
|
||||
r: this.form.r,
|
||||
@ -94,21 +115,17 @@
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
r: ''
|
||||
r: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
this.point = {
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "lamp_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.button_box{
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item label="线段编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="线段编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段方向">
|
||||
<el-select v-model="form.direction" placeholder="请选择线段方向">
|
||||
<el-option label="横向" value="transverse"></el-option>
|
||||
<el-option label="竖向" value="vertical"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段长度">
|
||||
<el-input-number controls-position="right" :min="1" v-model="form.length"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段宽度">
|
||||
<el-form-item label="线段宽度" prop="lineWidth">
|
||||
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="线段颜色">
|
||||
<el-form-item label="线段颜色" prop="fillColor">
|
||||
<el-input v-model="form.fillColor"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始X轴坐标">
|
||||
<el-input-number v-model="form.x1" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="起始Y轴坐标">
|
||||
<el-input-number v-model="form.y1" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止X轴坐标">
|
||||
<el-input-number v-model="form.x2" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="终止Y轴坐标">
|
||||
<el-input-number v-model="form.y2" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -37,27 +43,19 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point1: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
direction: '',
|
||||
length: '',
|
||||
lineWidth: '',
|
||||
fillColor: ''
|
||||
fillColor: '',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入线段编号', trigger: 'blur' },
|
||||
],
|
||||
direction: [
|
||||
{ required: true, message: '请选择线段方向', trigger: 'change'}
|
||||
],
|
||||
length: [
|
||||
{ required: true, message: '请输入线段长度', trigger: 'blur' },
|
||||
],
|
||||
lineWidth: [
|
||||
{ required: true, message: '请输入线段宽度', trigger: 'blur' },
|
||||
],
|
||||
@ -78,45 +76,57 @@
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.direction = model.direction;
|
||||
this.form.length = (model.direction == 'transverse'? model.point1.x -model.point2.x : model.point1.y - model.point2.y);
|
||||
this.form.lineWidth = model.lineWidth;
|
||||
this.form.fillColor = model.fill;
|
||||
this.point1 = model.point;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.form.x1 = model.point1.x;
|
||||
this.form.y1 = model.point1.y;
|
||||
this.form.x2 = model.point2.x;
|
||||
this.form.y2 = model.point2.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const lineModel = {
|
||||
zlevel: 1,
|
||||
z: 1,
|
||||
point1: this.point1,
|
||||
point2: {
|
||||
x: this.form.direction == 'transverse'? this.point1.x + parseInt(this.form.length):10,
|
||||
y: this.form.direction == 'vertical'? this.point1.y + parseInt(this.form.length):10
|
||||
},
|
||||
direction: this.form.direction,
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('createLine', lineModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) =>{
|
||||
if (valid){
|
||||
const lineModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('createLine', lineModel);
|
||||
this.initPage();
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const lineModel = {
|
||||
zlevel: 1,
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point1: this.point1,
|
||||
point2: {
|
||||
x: this.form.direction == 'transverse'? this.point1.x + parseInt(this.form.length):10,
|
||||
y: this.form.direction == 'vertical'? this.point1.y + parseInt(this.form.length):10
|
||||
point1: {
|
||||
x: this.form.x1,
|
||||
y: this.form.y1
|
||||
},
|
||||
point2: {
|
||||
x: this.form.x2,
|
||||
y: this.form.y2
|
||||
},
|
||||
direction: this.form.direction,
|
||||
code: this.form.code,
|
||||
_type: 'IbpLine',
|
||||
lineWidth: this.form.lineWidth,
|
||||
@ -131,24 +141,21 @@
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
direction: '',
|
||||
length: '',
|
||||
lineWidth: '',
|
||||
fillColor: ''
|
||||
};
|
||||
this.point = {
|
||||
x: 10,
|
||||
y: 10
|
||||
fillColor: '',
|
||||
x1: 10,
|
||||
y1: 10,
|
||||
x2: 20,
|
||||
y2: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "line_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
.button_box{
|
||||
width: 100%;
|
||||
background: #f0f0f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,18 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="钥匙孔编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="钥匙孔编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="钥匙孔宽度">
|
||||
<el-form-item label="钥匙孔宽度" prop="rotatingButtonWidth">
|
||||
<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 label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -28,14 +34,11 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
rotatingButtonWidth: '',
|
||||
rotatingButtonHeight: ''
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
@ -43,9 +46,6 @@
|
||||
],
|
||||
rotatingButtonWidth: [
|
||||
{ required: true, message: '请输入钥匙孔宽度', trigger: 'blur' },
|
||||
],
|
||||
rotatingButtonHeight: [
|
||||
{ required: true, message: '请输入钥匙孔高度', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
@ -62,38 +62,49 @@
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.rotatingButtonWidth = model.width;
|
||||
this.form.rotatingButtonHeight = model.height;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const rotatingButtonModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
draggable: true,
|
||||
_type: 'RotatingButton',
|
||||
code: this.form.code,
|
||||
width: this.form .rotatingButtonWidth,
|
||||
height: this.form.rotatingButtonHeight
|
||||
};
|
||||
this.$emit('createRotatingButton', rotatingButtonModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const rotatingButtonModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotatingButton',
|
||||
code: this.form.code,
|
||||
width: this.form .rotatingButtonWidth,
|
||||
};
|
||||
this.$emit('createRotatingButton', rotatingButtonModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const rotatingButtonModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
draggable: true,
|
||||
_type: 'RotatingButton',
|
||||
code: this.form.code,
|
||||
width: this.form .rotatingButtonWidth,
|
||||
height: this.form.rotatingButtonHeight
|
||||
};
|
||||
this.$emit('deleteDataModel',rotatingButtonModel );
|
||||
this.initPage();
|
||||
@ -105,12 +116,13 @@
|
||||
this.form = {
|
||||
code: '',
|
||||
rotatingButtonWidth: '',
|
||||
rotatingButtonHeight: ''
|
||||
};
|
||||
this.point = {
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "rButton_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
|
||||
<el-form-item label="端子编号">
|
||||
<el-input :disabled="true" v-model="form.code" style="width:300px">
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="端子宽度">
|
||||
<el-input-number v-model="form.terminalWidth" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="端子高度">
|
||||
<el-input-number v-model="form.terminalHeight" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'KeyDraft',
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
terminalHeight: '',
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请输入端子编号', trigger: 'blur' },
|
||||
],
|
||||
terminalWidth: [
|
||||
{ required: true, message: '请输入端子宽度', trigger: 'blur' },
|
||||
],
|
||||
terminalHeight: [
|
||||
{ required: true, message: '请输入端子高度', trigger: 'blur' },
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
'$store.state.ibp.rightClickCount': function (val) {
|
||||
const model = this.$store.getters['ibp/updateDeviceData'];
|
||||
if (model._type === 'TeleTerminal' ){
|
||||
this.buttonText = '修改';
|
||||
this.showDeleteButton = true;
|
||||
this.isUpdate = true;
|
||||
this.form.code = model.code;
|
||||
this.form.terminalWidth = model.width;
|
||||
this.form.terminalHeight = model.height;
|
||||
this.point = model.point;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const TerminalModel = {
|
||||
zlevel: 2,
|
||||
z: 4,
|
||||
point: this.point,
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form.terminalWidth,
|
||||
height: this.form.terminalHeight,
|
||||
};
|
||||
this.$emit('createTeleTerminal', TerminalModel);
|
||||
this.initPage();
|
||||
},
|
||||
deleteDevice() {
|
||||
const TerminalModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
draggable: true,
|
||||
_type: 'TeleTerminal',
|
||||
code: this.form.code,
|
||||
width: this.form .terminalWidth,
|
||||
height: this.form.terminalHeight,
|
||||
};
|
||||
this.$emit('deleteDataModel',TerminalModel);
|
||||
this.initPage();
|
||||
},
|
||||
initPage() {
|
||||
this.isUpdate = false;
|
||||
this.buttonText = '立即创建';
|
||||
this.showDeleteButton = false;
|
||||
this.form = {
|
||||
code: '',
|
||||
terminalWidth: '',
|
||||
terminalHeight: '',
|
||||
};
|
||||
this.point = {
|
||||
x: 70,
|
||||
y: 70
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "terminal"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,24 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item label="文字编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="文字编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字内容">
|
||||
<el-form-item label="文字内容" prop="context">
|
||||
<el-input type="textarea" v-model="form.context"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字颜色">
|
||||
<el-form-item label="文字颜色" prop="textFill">
|
||||
<el-input v-model="form.textFill"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文字大小">
|
||||
<el-form-item label="文字大小" prop="fontSize">
|
||||
<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-form-item label="文字粗细" prop="fontWeight">
|
||||
<el-input-number v-model="form.fontWeight" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -34,16 +43,14 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
context: '',
|
||||
textFill: '',
|
||||
fontSize: '',
|
||||
fontWeight: ''
|
||||
fontWeight: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
@ -79,18 +86,45 @@
|
||||
this.form.textFill = model.textFill;
|
||||
this.form.fontSize = model.fontSize;
|
||||
this.form.fontWeight = model.fontWeight;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const textModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
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);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
const textModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpText',
|
||||
context: this.form.context,
|
||||
@ -106,7 +140,10 @@
|
||||
const textModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'IbpText',
|
||||
context: this.form.context,
|
||||
@ -127,12 +164,14 @@
|
||||
context: '',
|
||||
textFill: '',
|
||||
fontSize: '',
|
||||
fontWeight: ''
|
||||
};
|
||||
this.point = {
|
||||
fontWeight: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "text_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,21 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
|
||||
<el-form-item label="提示框编号">
|
||||
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
|
||||
<el-form-item label="提示框编号" prop="code">
|
||||
<el-input :disabled="true" v-model="form.code" >
|
||||
<el-button slot="append" :disabled="isUpdate" type="primary" @click="generateCode">生成编号</el-button>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="提示框宽度">
|
||||
<el-form-item label="提示框宽度" prop="tipBoxWidth">
|
||||
<el-input-number v-model="form.tipBoxWidth" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="提示框高度">
|
||||
<el-form-item label="提示框高度" prop="tipBoxHeight">
|
||||
<el-input-number v-model="form.tipBoxHeight" controls-position="right" :min="1" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="提示框颜色">
|
||||
<el-form-item label="提示框颜色" prop="fillColor">
|
||||
<el-input v-model="form.fillColor"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="X轴坐标">
|
||||
<el-input-number v-model="form.x" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y轴坐标">
|
||||
<el-input-number v-model="form.y" controls-position="right" :min="1"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
|
||||
<el-button type="primary" @click="onSubmit('form')">{{ buttonText }}</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="deleteDevice" type="danger">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" @click="initPage">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@ -32,15 +41,13 @@
|
||||
isUpdate: false,
|
||||
buttonText: '立即创建',
|
||||
showDeleteButton: false,
|
||||
point: {
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
form: {
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: ''
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
},
|
||||
rules: {
|
||||
code: [
|
||||
@ -72,32 +79,46 @@
|
||||
this.form.tipBoxWidth = model.width;
|
||||
this.form.tipBoxHeight = model.height;
|
||||
this.form.fillColor = model.fillColor;
|
||||
this.point = model.point;
|
||||
this.form.x = model.point.x;
|
||||
this.form.y = model.point.y;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
const tipBoxModel = {
|
||||
zlevel: 2,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('createTipBox', tipBoxModel);
|
||||
this.initPage();
|
||||
onSubmit(form) {
|
||||
this.$refs[form].validate((valid) => {
|
||||
if (valid) {
|
||||
const tipBoxModel = {
|
||||
zlevel: 1,
|
||||
z: 1,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
height: this.form.tipBoxHeight,
|
||||
fillColor: this.form.fillColor
|
||||
};
|
||||
this.$emit('createTipBox', tipBoxModel);
|
||||
this.initPage();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
deleteDevice() {
|
||||
const tipBoxModel = {
|
||||
zlevel: 2,
|
||||
zlevel: 1,
|
||||
z: 1,
|
||||
point: this.point,
|
||||
point: {
|
||||
x: this.form.x,
|
||||
y: this.form.y
|
||||
},
|
||||
code: this.form.code,
|
||||
_type: 'TipBox',
|
||||
width: this.form.tipBoxWidth,
|
||||
@ -115,12 +136,14 @@
|
||||
code: '',
|
||||
tipBoxWidth: '',
|
||||
tipBoxHeight: '',
|
||||
fillColor: ''
|
||||
};
|
||||
this.point = {
|
||||
fillColor: '',
|
||||
x: 10,
|
||||
y: 10
|
||||
};
|
||||
},
|
||||
generateCode() {
|
||||
const mydate = new Date();
|
||||
this.form.code = "tipBox_"+mydate.getDay()+ mydate.getHours()+ mydate.getMinutes()+mydate.getSeconds()+mydate.getMilliseconds()+ Math.round(Math.random() * 10000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -72,18 +72,24 @@
|
||||
>
|
||||
</ibp-rotating-button>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="电话端子" name="teleTerminal">
|
||||
<el-tab-pane label="电话端子" name="teleTerminal">
|
||||
<ibp-telephone-terminal ref="teleTerminal"
|
||||
@createTeleTerminal="createDataModel" @deleteDataModel="deleteDataModel"
|
||||
>
|
||||
</ibp-telephone-terminal>
|
||||
</el-tab-pane> -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="电梯" name="elevator">
|
||||
<ibp-elevator ref="elevator"
|
||||
@createElevator="createDataModel" @deleteDataModel="deleteDataModel"
|
||||
>
|
||||
</ibp-elevator>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="钥匙" name="key">
|
||||
<ibp-key ref="key"
|
||||
@createKey="createDataModel" @deleteDataModel="deleteDataModel"
|
||||
>
|
||||
</ibp-key>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -104,6 +110,8 @@
|
||||
import IbpLine from './ibpLine';
|
||||
import IbpTelephoneTerminal from './ibpTelephoneTerminal';
|
||||
import IbpElevator from './ibpElevator';
|
||||
import IbpKey from './ibpKey';
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
@ -119,8 +127,9 @@
|
||||
IbpLamp,
|
||||
IbpRotatingButton,
|
||||
IbpLine,
|
||||
// IbpTelephoneTerminal,
|
||||
IbpElevator
|
||||
IbpTelephoneTerminal,
|
||||
IbpElevator,
|
||||
IbpKey
|
||||
},
|
||||
mixins: [
|
||||
|
||||
@ -166,6 +175,7 @@
|
||||
this.$refs.alarm.initPage();
|
||||
this.$refs.rotatingbutton.initPage();
|
||||
this.$refs.elevator.initPage();
|
||||
this.$refs.key.initPage();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user