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

ibp盘

Browse Source
This commit is contained in:
fan 2019-08-29 09:26:14 +08:00
parent 94f803072f
commit 453a909f01
29 changed files with 943 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 MiB

After

Width:  |  Height:  |  Size: 14 MiB

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

@ -1,7 +1,6 @@
const deviceType = {
IbpText: 'IbpText',
SquareButton: 'SquareButton',
WarnButton: 'WarnButton',
Arrow: 'Arrow',
RotatingButton: 'RotatingButton',
TipBox: 'TipBox',

52
src/ibp/constant/ibpData.js
View File

@ -1,53 +1,3 @@
const ibpData = {
background: {
type: 'Background',
code: 'bg_0000'
},
arrowList: [
{
type: 'Arrow',
code: '1111_arrow',
point: {
x: 510,
y: 400
},
length: 488,
width: 10,
stroke: '#0000CD',
fill: '#0000CD',
lineWidth: 1,
direction: '上行',
stationstandDirection: '三桥方向'
},
{
type: 'Arrow',
code: '1222_arrow',
point: {
x: 510,
y: 200
},
length: 488,
width: 10,
stroke: '#0000CD',
fill: '#0000CD',
lineWidth: 1,
direction: '下行',
stationstandDirection: '车辆段方向'
}
],
circularLampList: [
{
type: 'CircularLamp',
code: '1333_lamp',
point: {
x: 600,
y: 600
},
r: 40,
fillColor: '#332C22'
}
]
};
const ibpData = {"background":{"type":"Background","code":"bg_0000","width":800,"height":600,"_type":"Background","zlevel":0},"arrowList":[{"zlevel":2,"z":1,"point":{"x":518,"y":273},"_type":"Arrow","code":"arrow_0001","orientation":"left","fill":"#0000CD","width":10,"length":488,"lineWidth":1},{"zlevel":2,"z":1,"point":{"x":518,"y":451},"_type":"Arrow","code":"arrow_0002","orientation":"right","fill":"#0000CD","width":10,"length":488,"lineWidth":1}],"circularLampList":[],"textList":[{"code":"text_0001","context":"隧 道 紧 急 通 风","fontFamily":"consolas","fontSize":38,"fontWeight":900,"point":{"x":452,"y":26},"textFill":"#000","z":1,"zlevel":2,"_type":"IbpText"},{"zlevel":2,"z":1,"point":{"x":40,"y":243},"code":"text_0002","_type":"IbpText","context":"车 辆 段 方 向","textFill":"#000","fontSize":22,"fontWeight":700,"fontFamily":"consolas"},{"zlevel":2,"z":1,"point":{"x":41,"y":287},"code":"text_0003","_type":"IbpText","context":"下 行","textFill":"#000","fontSize":22,"fontWeight":700,"fontFamily":"consolas"},{"zlevel":2,"z":1,"point":{"x":942,"y":422},"code":"text_0004","_type":"IbpText","context":"上 行","textFill":"#000","fontSize":22,"fontWeight":700,"fontFamily":"consolas"},{"zlevel":2,"z":1,"point":{"x":871,"y":466},"code":"text_0005","_type":"IbpText","context":"三 桥 方 向","textFill":"#000","fontSize":22,"fontWeight":700,"fontFamily":"consolas"},{"zlevel":2,"z":1,"point":{"x":88,"y":203},"code":"text_0006","_type":"IbpText","context":" DH14\n入段线车头","textFill":"#000","fontSize":8,"fontWeight":800,"fontFamily":"consolas"},{"zlevel":2,"z":1,"point":{"x":138,"y":202},"code":"text_0008","_type":"IbpText","context":" DH15\n入段线车尾","textFill":"#000","fontSize":8,"fontWeight":800,"fontFamily":"consolas"},{"zlevel":2,"z":1,"point":{"x":186,"y":200},"code":"text_0009","_type":"IbpText","context":" DH16\n入段线车中\n 进洞口\n疏散同行车","textFill":"#000","fontSize":8,"fontWeight":800,"fontFamily":"consolas"}],"squareButtonList":[{"zlevel":2,"z":1,"point":{"x":10,"y":7},"_type":"SquareButton","code":"button_0001","color":"red","status":"off","width":25,"height":30},{"zlevel":2,"z":1,"point":{"x":145,"y":169},"_type":"SquareButton","code":"button_0002","color":"red","status":"off","width":25,"height":1},{"zlevel":2,"z":1,"point":{"x":195,"y":168},"_type":"SquareButton","code":"button_0003","color":"red","status":"off","width":25,"height":1},{"zlevel":2,"z":1,"point":{"x":243,"y":169},"_type":"SquareButton","code":"button_0004","color":"red","status":"off","width":25,"height":1},{"zlevel":2,"z":1,"point":{"x":292,"y":168},"_type":"SquareButton","code":"button_0005","color":"red","status":"off","width":25,"height":1},{"zlevel":2,"z":1,"point":{"x":341,"y":169},"_type":"SquareButton","code":"button_0006","color":"red","status":"off","width":25,"height":1}]}
export default ibpData;

2
src/ibp/ibpPan.js
View File

@ -7,6 +7,7 @@ import Painter from './painter';
import deviceState from '../jmap/constant/deviceState';
import deviceType from './constant/deviceType';
import {calculateDCenter, createBoundingRect, modelFactory} from './utils/parser';
import { updateIbpData } from './utils/parser';
const renderer = 'canvas';
const devicePixelRatio = 1;
@ -125,6 +126,7 @@ class IbpPan {
(list || []).forEach(elem => {
const code = elem.code;
const type = elem._type;
updateIbpData(elem);
const oDevice = this.ibpDevice[code] || {instance: null, event: null, model: modelFactory(type, elem)};
const nDevice = {instance: null, event: null, model: Object.assign(oDevice.model || {}, elem)};
this.$painter.delete(oDevice);

28
src/ibp/shape/alarm.js
View File

@ -1,6 +1,7 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
import alarmpic from '@/assets/ibp_images/alarm.png';
import store from '@/store';
export default class alarm extends Group {
@ -9,6 +10,8 @@ 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.create();
}
@ -26,17 +29,17 @@ export default class alarm extends Group {
}
});
this.add(this.imageBg);
this.transformScale();
this.transformScale();
}
/** 缩放按钮 */
transformScale() {
this.imageBg.origin = [this.model.point.x, this.model.point.y];
this.imageBg.scale =[this.model.width/71, this.model.width/71];
this.imageBg.dirty();
}
/** 缩放按钮 */
transformScale() {
this.imageBg.origin = [this.model.point.x, this.model.point.y];
this.imageBg.scale =[this.model.width/71, this.model.width/71];
this.imageBg.dirty();
}
setDraggable() {
this.arrow.attr('draggable', true);
this.imageBg.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
@ -47,6 +50,11 @@ export default class alarm extends Group {
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) {
@ -54,7 +62,7 @@ export default class alarm extends Group {
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;
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
}
}

17
src/ibp/shape/appendageBox.js
View File

@ -1,6 +1,7 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
import AppendageBoxImage from '@/assets/ibp_images/appendage_box.png';
import store from '@/store';
export default class AppendageBox extends Group {
constructor(device) {
@ -9,6 +10,8 @@ export default class AppendageBox extends Group {
this.event = device.event;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.offsetX = 0;
this.offsetY = 0;
this.create();
}
@ -37,17 +40,19 @@ export default class AppendageBox extends Group {
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
mousedown(e) {
this.event.disable();
console.log('鼠标按下');
if (e.which == 3) {
store.dispatch('ibp/setUpdateDeviceData', this.model);
}
this.offsetX = e.offsetX;
this.offsetY = e.offsetY;
}
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.point.x = this.model.point.x + (e.offsetX - this.offsetX);
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
}
}

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

@ -2,12 +2,15 @@ import Polygon from 'zrender/src/graphic/shape/Polygon';
import Group from 'zrender/src/container/Group';
import {arrow} from '@/jmap/shape/utils/ShapePoints';
// import { updateIbpData } from '@/ibp/utils/parser';
import store from '@/store';
class Arrow extends Group {
constructor(device) {
super();
this.event = device.event;
this.model = device.model;
this.offsetX = 0;
this.offsetY = 0;
this.create();
}
@ -71,18 +74,20 @@ class Arrow extends Group {
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
mousedown(e) {
this.event.disable();
console.log('鼠标按下');
if (e.which == 3) {
store.dispatch('ibp/setUpdateDeviceData', this.model);
}
this.offsetX = e.offsetX;
this.offsetY = e.offsetY;
}
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);
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
}
}

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

@ -10,6 +10,7 @@ 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';
import store from '@/store';
export default class button extends Group {
static colors = new Map([
@ -29,6 +30,8 @@ export default class button extends Group {
this.model = device.model;
this.zlevel = device.model.zlevel;
this.event = device.event;
this.offsetX = 0;
this.offsetY = 0;
this.create();
}
create() {
@ -105,17 +108,20 @@ export default class button extends Group {
}
}
mousedown() {
mousedown(e) {
this.event.disable();
console.log('鼠标按下');
if (e.which == 3) {
store.dispatch('ibp/setUpdateDeviceData', this.model);
}
this.offsetX = e.offsetX;
this.offsetY = e.offsetY;
}
mousemove() {
}
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);
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() {

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

@ -1,5 +1,6 @@
import Group from 'zrender/src/container/Group';
import Circle from 'zrender/src/graphic/shape/Circle';
import store from '@/store';
export default class CircularLamp extends Group {
constructor(device) {
@ -8,6 +9,8 @@ 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.create();
}
@ -40,15 +43,19 @@ export default class CircularLamp extends Group {
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
mousedown(e) {
this.event.disable();
console.log('鼠标按下');
if (e.which == 3) {
store.dispatch('ibp/setUpdateDeviceData', this.model);
}
this.offsetX = e.offsetX;
this.offsetY = e.offsetY;
}
mousemove() {
console.log('鼠标移动');
}
mouseup() {
mouseup(e) {
this.event.enable();
console.log('鼠标抬起');
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
}
}

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

@ -8,6 +8,7 @@ import IbpLine from './ibpLine';
import Button from './button';
import TipBox from './ibpTipBox';
import AppendageBox from './appendageBox';
import RotatingButton from './rotatingButton';
const ibpShape = {};
ibpShape[deviceType.Arrow] = Arrow;
@ -19,6 +20,7 @@ ibpShape[deviceType.IbpLine] = IbpLine;
ibpShape[deviceType.SquareButton] = Button;
ibpShape[deviceType.TipBox] = TipBox;
ibpShape[deviceType.AppendageBox] = AppendageBox;
ibpShape[deviceType.RotatingButton] = RotatingButton;
function shapefactory(device, ibp) {
const type = device.model._type;

21
src/ibp/shape/ibpLine.js
View File

@ -1,5 +1,6 @@
import Group from 'zrender/src/container/Group';
import Line from 'zrender/src/graphic/shape/Line';
import store from '@/store';
export default class ibpLine extends Group {
constructor(device) {
@ -8,6 +9,8 @@ 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.create();
}
create() {
@ -38,19 +41,21 @@ export default class ibpLine extends Group {
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
mousedown(e) {
this.event.disable();
console.log('鼠标按下');
if (e.which == 3) {
store.dispatch('ibp/setUpdateDeviceData', this.model);
}
this.offsetX = e.offsetX;
this.offsetY = e.offsetY;
}
mousemove() {
console.log('鼠标移动');
}
mouseup(e) {
this.event.enable();
this.model.point1.x = this.model.point1.x + e.offsetX;
this.model.point1.y = this.model.point1.y + e.offsetY;
this.model.point2.x = this.model.point2.x + e.offsetX;
this.model.point2.y = this.model.point2.y + e.offsetY;
console.log('鼠标抬起', this.model);
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;
}
}

22
src/ibp/shape/ibpText.js
View File

@ -1,5 +1,6 @@
import Group from 'zrender/src/container/Group';
import Text from 'zrender/src/graphic/Text';
import store from '@/store';
export default class ibpText extends Group {
constructor(device) {
@ -8,6 +9,8 @@ export default class ibpText extends Group {
this.event = device.event;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.offsetX = 0;
this.offsetY = 0;
this.create();
}
create() {
@ -18,8 +21,8 @@ export default class ibpText extends Group {
silent: model.silent || false,
draggable: model.draggable || false,
style: {
x: model.x,
y: model.y,
x: model.point.x,
y: model.point.y,
fontWeight: model.fontWeight,
fontSize: model.fontSize,
fontFamily: model.fontFamily,
@ -42,17 +45,20 @@ export default class ibpText extends Group {
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
mousedown(e) {
this.event.disable();
console.log('鼠标按下');
if (e.which == 3) {
store.dispatch('ibp/setUpdateDeviceData', this.model);
}
this.offsetX = e.offsetX;
this.offsetY = e.offsetY;
}
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);
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);
}
}

17
src/ibp/shape/ibpTipBox.js
View File

@ -1,5 +1,6 @@
import Group from 'zrender/src/container/Group';
import Rect from 'zrender/src/graphic/shape/Rect';
import store from '@/store';
export default class ibpTipBox extends Group {
constructor(device) {
@ -8,6 +9,8 @@ export default class ibpTipBox extends Group {
this.event = device.event;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.offsetX = 0;
this.offsetY = 0;
this.create();
}
create() {
@ -37,17 +40,19 @@ export default class ibpTipBox extends Group {
this.on('mousemove', this.mousemove, this);
this.on('mouseup', this.mouseup, this);
}
mousedown() {
mousedown(e) {
this.event.disable();
console.log('鼠标按下');
if (e.which == 3) {
store.dispatch('ibp/setUpdateDeviceData', this.model);
}
this.offsetX = e.offsetX;
this.offsetY = e.offsetY;
}
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);
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
src/ibp/shape/rotateTip.js
View File

@ -2,6 +2,7 @@ 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';
import store from '@/store';
export default class rotateTip extends Group {
@ -9,6 +10,9 @@ export default class rotateTip extends Group {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.event = device.event;
this.offsetX = 0;
this.offsetY = 0;
this.create();
}
@ -63,6 +67,11 @@ export default class rotateTip extends Group {
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) {
@ -70,7 +79,7 @@ export default class rotateTip extends Group {
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;
this.model.point.x = this.model.point.x + (e.offsetX - this.offsetX);
this.model.point.y = this.model.point.y + (e.offsetY - this.offsetY);
}
}

58
src/ibp/shape/rotatingButton.js
View File

@ -0,0 +1,58 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
import Keyhole from '@/assets/ibp_images/keyhole.png';
import store from '@/store';
export default class RotatingButton extends Group {
constructor(device) {
super();
this.model = device.model;
this.event = device.event;
this.zlevel = device.model.zlevel;
this.z = device.model.z;
this.offsetX = 0;
this.offsetY = 0;
this.create();
}
create() {
this.rotatingButton = new Image({
zlevel: this.zlevel,
z: this.z,
draggable: false,
style: {
image: Keyhole,
x: this.model.point.x,
y: this.model.point.y,
width: this.model.width,
height: this.model.height
}
});
this.add(this.rotatingButton);
}
setDraggable() {
this.rotatingButton.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() {
}
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);
}
}

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

@ -2,6 +2,7 @@ import * as zrUtil from 'zrender/src/core/util';
import * as matrix from 'zrender/src/core/matrix';
import deviceType from '../constant/deviceType';
import deviceRender from '../constant/deviceRender';
import store from '@/store';
export function createTransform(opts) {
let transform = matrix.create();
@ -76,3 +77,166 @@ export function parser(data, config) {
return ibpDevice;
}
export function updateIbpData(device) {
const ibpData = store.getters['ibp/ibp'];
switch (device._type) {
case deviceType.Background : {
ibpData.background = device;
break;
}
case deviceType.IbpText : {
if (ibpData.textList && ibpData.textList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.textList.length; i++) {
if (device.code === ibpData.textList[i].code) {
device.dispose ? ibpData.textList.splice(i, 1) :ibpData.textList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.textList.push(device);
}
} else {
ibpData.textList = [device];
}
break;
}
case deviceType.SquareButton : {
if (ibpData.squareButtonList && ibpData.squareButtonList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.squareButtonList.length; i++) {
if (device.code === ibpData.squareButtonList[i].code) {
device.dispose ? ibpData.squareButtonList.splice(i, 1):ibpData.squareButtonList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.squareButtonList.push(device);
}
} else {
ibpData.squareButtonList = [device];
}
break;
}
case deviceType.Arrow : {
if (ibpData.arrowList && ibpData.arrowList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.arrowList.length; i++) {
if (device.code === ibpData.arrowList[i].code) {
device.dispose ? ibpData.arrowList.splice(i, 1):ibpData.arrowList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.arrowList.push(device);
}
} else {
ibpData.arrowList = [device];
}
break;
}
case deviceType.RotatingButton : {
if (ibpData.rotatingButtonList && ibpData.rotatingButtonList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.rotatingButtonList.length; i++) {
if (device.code === ibpData.rotatingButtonList[i].code) {
device.dispose ? ibpData.rotatingButtonList.splice(i, 1):ibpData.rotatingButtonList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.rotatingButtonList.push(device);
}
} else {
ibpData.rotatingButtonList = [device];
}
break;
}
case deviceType.TipBox : {
if (ibpData.tipBoxList && ibpData.tipBoxList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.tipBoxList.length; i++) {
if (device.code === ibpData.tipBoxList[i].code) {
device.dispose ? ibpData.tipBoxList.splice(i, 1):ibpData.tipBoxList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.tipBoxList.push(device);
}
} else {
ibpData.tipBoxList = [device];
}
break;
}
case deviceType.CircularLamp : {
if (ibpData.circularLampList && ibpData.circularLampList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.circularLampList.length; i++) {
if (device.code === ibpData.circularLampList[i].code) {
device.dispose ? ibpData.circularLampList.splice(i, 1):ibpData.circularLampList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.circularLampList.push(device);
}
} else {
ibpData.circularLampList = [device];
}
break;
}
case deviceType.IbpLine : {
if (ibpData.ibpLineList && ibpData.ibpLineList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.ibpLineList.length; i++) {
if (device.code === ibpData.ibpLineList[i].code) {
device.dispose ? ibpData.ibpLineList.splice(i, 1):ibpData.ibpLineList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.ibpLineList.push(device);
}
} else {
ibpData.ibpLineList = [device];
}
break;
}
case deviceType.AppendageBox : {
if (ibpData.appendageBoxList && ibpData.appendageBoxList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.appendageBoxList.length; i++) {
if (device.code === ibpData.appendageBoxList[i].code) {
device.dispose ? ibpData.appendageBoxList.splice(i, 1):ibpData.appendageBoxList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.appendageBoxList.push(device);
}
} else {
ibpData.appendageBoxList = [device];
}
break;
}
case deviceType.Alarm : {
if (ibpData.alarmList && ibpData.alarmList.length > 0) {
let newDevice = true;
for (let i=0; i<ibpData.alarmList.length; i++) {
if (device.code === ibpData.alarmList[i].code) {
device.dispose ? ibpData.alarmList.splice(i, 1):ibpData.alarmList[i] = device;
newDevice = false;
}
}
if (newDevice) {
ibpData.alarmList.push(device);
}
} else {
ibpData.alarmList = [device];
}
break;
}
}
store.dispatch('ibp/setIbpData', ibpData);
}

14
src/router/index.js
View File

@ -382,13 +382,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',

26
src/store/modules/ibp.js
View File

@ -1,5 +1,4 @@
import Vue from 'vue';
import { parser } from '@/ibp/utils/parser';
/**
* ibp状态数据
@ -11,7 +10,9 @@ const ibp = {
ibp: null, // 数据
ibpDevice: {}, // 解析后的地图数据
ibpList: {}, // 数据列表
ibpIdList: {} // 数据列表(以id为标识)
ibpIdList: {}, // 数据列表(以id为标识)
updateDeviceData: {}, // 修改的数据
rightClickCount: 0 // 右键点击设备
},
getters: {
@ -27,6 +28,9 @@ const ibp = {
} else {
return null;
}
},
updateDeviceData: (state) => {
return state.updateDeviceData;
}
},
@ -37,6 +41,13 @@ const ibp = {
},
setIbpData: (state, ibp) => {
state.ibp = ibp;
},
setUpdateDeviceData: (state, model) => {
state.rightClickCount++;
state.updateDeviceData = model;
},
deleteIbpDevices: (state, devices) => {
Vue.prototype.$ibp && Vue.prototype.$ibp.render(devices);
}
},
@ -52,8 +63,17 @@ const ibp = {
commit('ibpRender', models);
resolve(models);
});
},
setUpdateDeviceData: ({ commit }, models) => {
commit('setUpdateDeviceData', models);
},
deleteIbpDevices: ({ commit }, models ) => {
models = Object.assign(models, {dispose: true});
if (!(models instanceof Array)) {
models = [models];
}
commit('deleteIbpDevices', models);
}
}
};

63
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item label="报警器编号">
<el-input v-model="form.code"></el-input>
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="报警器宽度">
<el-input-number v-model="form.alarmWidth" controls-position="right" :min="1"></el-input-number>
@ -11,8 +11,8 @@
<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-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -25,6 +25,13 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
code: '',
alarmWidth: '',
@ -47,25 +54,61 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'Alarm' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.alarmWidth = model.width;
this.form.alarmHeight = model.height;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const alarmModel = {
zlevel: 1,
zlevel: 2,
z: 1,
point: {
x: 10,
y: 10
},
point: this.point,
code: this.form.code,
_type: 'Alarm',
width: this.form .alarmWidth,
height: this.form.alarmHeight
};
this.$emit('createAlarm', alarmModel)
this.$emit('createAlarm', alarmModel);
this.initPage();
},
deleteDevice() {
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('deleteDataModel',alarmModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
alarmWidth: '',
alarmHeight: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

63
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item label="扶梯框编号">
<el-input v-model="form.code"></el-input>
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="扶梯框宽度">
<el-input-number v-model="form.appendageBoxWidth" controls-position="right" :min="1"></el-input-number>
@ -11,8 +11,8 @@
<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-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -25,6 +25,13 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
appendageBoxWidth: '',
appendageBoxHeight: ''
@ -46,25 +53,61 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'AppendageBox' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.appendageBoxWidth = model.width;
this.form.appendageBoxHeight = model.height;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const appendageBoxModel = {
zlevel: 1,
zlevel: 2,
z: 1,
point: {
x: 10,
y: 10
},
point: this.point,
_type: 'AppendageBox',
code: this.form.code,
width: this.form .appendageBoxWidth,
height: this.form.appendageBoxHeight
};
this.$emit('createAppendageBox', appendageBoxModel)
this.$emit('createAppendageBox', appendageBoxModel);
this.initPage();
},
deleteDevice() {
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('deleteDataModel',appendageBoxModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
appendageBoxWidth: '',
appendageBoxHeight: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

70
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="箭头编号">
<el-input v-model="form.code"></el-input>
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="箭头方向">
<el-select v-model="form.orientation" placeholder="请选择箭头方向">
@ -22,8 +22,8 @@
<el-input v-model="form.fillColor"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -36,6 +36,13 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
code: '',
orientation: '',
@ -66,19 +73,29 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'Arrow' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.orientation = model.orientation;
this.form.arrowLength = model.length;
this.form.arrowWidth = model.width;
this.form.fillColor = model.fill;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const arrowModel = {
zlevel: 1,
zlevel: 2,
z: 1,
point: {
x: 10,
y: 10
},
point: this.point,
_type: 'Arrow',
code: this.form.code,
orientation: this.form.orientation,
@ -87,7 +104,40 @@
length: this.form.arrowLength,
lineWidth: 1
};
this.$emit('createArrow', arrowModel)
this.$emit('createArrow', arrowModel);
this.initPage();
},
deleteDevice() {
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('deleteDataModel',arrowModel);
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
orientation: '',
arrowWidth: '',
arrowLength: '',
fillColor: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

2
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpBg.vue
View File

@ -57,6 +57,8 @@
height: this.form.bgHeight
};
this.$emit('createBg', bgModel)
},
initPage(){
}
}
};

68
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="按钮编号">
<el-input v-model="form.code"></el-input>
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="按钮颜色">
<el-select v-model="form.buttonColor" placeholder="请选择按钮颜色">
@ -19,8 +19,8 @@
<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-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -33,7 +33,15 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
code: '',
buttonColor: '',
buttonWidth: '',
buttonHeight: ''
@ -58,19 +66,28 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'SquareButton' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.buttonColor = model.color;
this.form.buttonWidth = model.width;
this.form.buttonHeight = model.height;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const buttonModel = {
zlevel: 1,
zlevel: 2,
z: 1,
point: {
x: 10,
y: 10,
},
point: this.point,
_type: 'SquareButton',
code: this.form.code,
color: this.form.buttonColor,
@ -78,7 +95,38 @@
width: this.form.buttonWidth,
height: this.form.buttonHeight
};
this.$emit('createButton', buttonModel)
this.$emit('createButton', buttonModel);
this.initPage();
},
deleteDevice() {
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('deleteDataModel',buttonModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
buttonColor: '',
buttonWidth: '',
buttonHeight: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

70
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLamp.vue
View File

@ -1,15 +1,15 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
<el-form-item label="圆形指示灯编号">
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="圆形指示灯编号">
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<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>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -22,10 +22,16 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
r: '',
offColor: '',
onColor: ''
code: '',
r: ''
},
rules: {
code: [
@ -41,25 +47,59 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'CircularLamp' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.r = model.r;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const lampModel = {
zlevel: 1,
zlevel: 2,
z: 1,
point:{
x: 10,
y: 10
},
point: this.point,
_type: 'CircularLamp',
code: this.form.code,
r: this.form.r,
fillColor: '#332C22'
};
this.$emit('createLamp', lampModel)
this.$emit('createLamp', lampModel);
this.initPage();
},
deleteDevice() {
const lampModel = {
zlevel: 2,
z: 1,
point: this.point,
_type: 'CircularLamp',
code: this.form.code,
r: this.form.r,
fillColor: '#332C22'
};
this.$emit('deleteDataModel',lampModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
r: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

75
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLine.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="线段编号">
<el-input v-model="form.code"></el-input>
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="线段方向">
<el-select v-model="form.direction" placeholder="请选择线段方向">
@ -20,8 +20,8 @@
<el-input v-model="form.fillColor"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -34,6 +34,13 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point1: {
x: 10,
y: 10
},
form: {
code: '',
direction: '',
@ -64,7 +71,20 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'IbpLine' ){
this.buttonText = '修改';
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;
}
}
},
mounted() {
},
@ -73,20 +93,53 @@
const lineModel = {
zlevel: 1,
z: 1,
point1: {
x: 10,
y: 10,
},
point1: this.point1,
point2: {
x: this.form.direction == 'transverse'? 10 + parseInt(this.form.length):10,
y: this.form.direction == 'vertical'? 10 + parseInt(this.form.length):10
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.$emit('createLine', lineModel);
this.initPage();
},
deleteDevice() {
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('deleteDataModel',lineModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
direction: '',
length: '',
lineWidth: '',
fillColor: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

77
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue
View File

@ -1,18 +1,18 @@
<template>
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="120px">
<el-form-item label="旋转按钮编号">
<el-input v-model="form.code"></el-input>
<el-form-item label="钥匙孔编号">
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="旋转按钮宽度">
<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-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-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -25,19 +25,27 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
code: '',
rotatingButtonWidth: '',
rotatingButtonHeight: ''
},
rules: {
code: [
{ required: true, message: '请输入按钮编号', trigger: 'blur' },
{ required: true, message: '请输入钥匙孔编号', trigger: 'blur' },
],
rotatingButtonWidth: [
{ required: true, message: '请输入旋转按钮宽度', trigger: 'blur' },
{ required: true, message: '请输入钥匙孔宽度', trigger: 'blur' },
],
rotatingButtonHeight: [
{ required: true, message: '请输入旋转按钮高度', trigger: 'blur' },
{ required: true, message: '请输入钥匙孔高度', trigger: 'blur' },
]
}
};
@ -46,26 +54,63 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'RotatingButton' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.rotatingButtonWidth = model.width;
this.form.rotatingButtonHeight = model.height;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const rotatingButtonModel = {
zlevel: 1,
zlevel: 2,
z: 1,
point: {
x: 10,
y: 10
},
point: this.point,
draggable: true,
_type: 'RotatingButton',
code: this.form.code,
width: this.form .rotatingButtonWidth,
height: this.form.rotatingButtonHeight
};
this.$emit('createRotatingButton', rotatingButtonModel)
this.$emit('createRotatingButton', rotatingButtonModel);
this.initPage();
},
deleteDevice() {
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('deleteDataModel',rotatingButtonModel );
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
rotatingButtonWidth: '',
rotatingButtonHeight: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

77
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpText.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
<el-form-item label="文字编号">
<el-input v-model="form.code"></el-input>
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="文字内容">
<el-input type="textarea" v-model="form.context"></el-input>
@ -13,12 +13,12 @@
<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 label="文字粗细">
<el-input-number v-model="form.fontWeight" 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-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -31,12 +31,19 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
code: '',
context: '',
textFill: '',
fontSize: '',
fontWeight: false
fontWeight: ''
},
rules: {
code: [
@ -51,6 +58,9 @@
fontSize: [
{ required: true, message: '请输入文字大小', trigger: 'blur' },
],
fontWeight: [
{ required: true, message: '请输入文字粗细', trigger: 'blur' },
],
}
};
},
@ -58,17 +68,29 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'IbpText' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.context = model.context;
this.form.textFill = model.textFill;
this.form.fontSize = model.fontSize;
this.form.fontWeight = model.fontWeight;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const textModel = {
zlevel: 1,
zlevel: 2,
z: 1,
x: 10,
y: 10,
point: this.point,
code: this.form.code,
_type: 'IbpText',
context: this.form.context,
@ -77,7 +99,40 @@
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
};
this.$emit('createText', textModel)
this.$emit('createText', textModel);
this.initPage();
},
deleteDevice() {
const textModel = {
zlevel: 2,
z: 1,
point: this.point,
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('deleteDataModel',textModel);
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
context: '',
textFill: '',
fontSize: '',
fontWeight: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

66
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTipBox.vue
View File

@ -2,7 +2,7 @@
<div>
<el-form ref="form" :rules="rules" :model="form" label-width="100px">
<el-form-item label="提示框编号">
<el-input v-model="form.code"></el-input>
<el-input :disabled="isUpdate" v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="提示框宽度">
<el-input-number v-model="form.tipBoxWidth" controls-position="right" :min="1" ></el-input-number>
@ -14,8 +14,8 @@
<el-input v-model="form.fillColor"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
<el-button type="primary" @click="onSubmit">{{ buttonText }}</el-button>
<el-button v-show="showDeleteButton" @click="deleteDevice">删除</el-button>
</el-form-item>
</el-form>
</div>
@ -29,6 +29,13 @@
},
data() {
return {
isUpdate: false,
buttonText: '立即创建',
showDeleteButton: false,
point: {
x: 10,
y: 10
},
form: {
code: '',
tipBoxWidth: '',
@ -55,26 +62,65 @@
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
if (model._type === 'TipBox' ){
this.buttonText = '修改';
this.showDeleteButton = true;
this.isUpdate = true;
this.form.code = model.code;
this.form.tipBoxWidth = model.width;
this.form.tipBoxHeight = model.height;
this.form.fillColor = model.fillColor;
this.point = model.point;
}
}
},
mounted() {
},
methods: {
onSubmit() {
const tipBoxModel = {
zlevel: 1,
zlevel: 2,
z: 1,
point: {
x: 10,
y: 10
},
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.$emit('createTipBox', tipBoxModel);
this.initPage();
},
deleteDevice() {
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('deleteDataModel',tipBoxModel);
this.initPage();
},
initPage() {
this.isUpdate = false;
this.buttonText = '立即创建';
this.showDeleteButton = false;
this.form = {
code: '',
tipBoxWidth: '',
tipBoxHeight: '',
fillColor: ''
};
this.point = {
x: 10,
y: 10
};
}
}
};

71
src/views/ibp/ibpDraft/ibpEdit/ibpOperate/index.vue
View File

@ -13,62 +13,62 @@
@click="handleSave"
>保存</el-button>
</div>
<el-tabs v-model="enabledTab" class="mapEdit" type="card">
<el-tab-pane label="背景板" name="BgImage">
<el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane label="背景板" name="Background">
<ibp-bg
@createBg="createDataModel"
></ibp-bg>
</el-tab-pane>
<el-tab-pane label="线条" name="Line">
<ibp-line
@createLine="createDataModel"
<el-tab-pane label="线条" name="IbpLine">
<ibp-line ref="ibpline"
@createLine="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-line>
</el-tab-pane>
<el-tab-pane label="文字" name="Text">
<ibp-text
@createText="createDataModel"
<el-tab-pane label="文字" name="IbpText">
<ibp-text ref="ibptext"
@createText="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-text>
</el-tab-pane>
<el-tab-pane label="提示框" name="TipBox">
<ibp-tip-box
@createTipBox="createDataModel"
<ibp-tip-box ref="tipbox"
@createTipBox="createDataModel" @deleteDataModel="deleteDataModel"
></ibp-tip-box>
</el-tab-pane>
<el-tab-pane label="按键" name="Button">
<ibp-button
@createButton="createDataModel"
<el-tab-pane label="按钮" name="SquareButton">
<ibp-button ref="squarebutton"
@createButton="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-button>
</el-tab-pane>
<el-tab-pane label="圆形指示灯" name="CircularLamp">
<ibp-lamp
@createLamp="createDataModel"
<ibp-lamp ref="circularlamp"
@createLamp="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-lamp>
</el-tab-pane>
<el-tab-pane label="箭头" name="Arrow">
<ibp-arrow
@createArrow="createDataModel"
<ibp-arrow ref="arrow"
@createArrow="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-arrow>
</el-tab-pane>
<el-tab-pane label="扶梯框" name="AppendageBox">
<ibp-appendage-box
@createAppendageBox="createDataModel"
<ibp-appendage-box ref="appendagebox"
@createAppendageBox="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-appendage-box>
</el-tab-pane>
<el-tab-pane label="报警器" name="Alarm">
<ibp-alarm
@createAlarm="createDataModel"
<ibp-alarm ref="alarm"
@createAlarm="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-alarm>
</el-tab-pane>
<el-tab-pane label="旋转按钮" name="SpinButton">
<ibp-rotating-button
@createRotatingButton="createDataModel"
<el-tab-pane label="钥匙孔" name="RotatingButton">
<ibp-rotating-button ref="rotatingbutton"
@createRotatingButton="createDataModel" @deleteDataModel="deleteDataModel"
>
</ibp-rotating-button>
</el-tab-pane>
@ -111,10 +111,14 @@
data() {
return {
enabledTab: 'BgImage',
data: ''
};
},
watch: {
'$store.state.ibp.rightClickCount': function (val) {
const model = this.$store.getters['ibp/updateDeviceData'];
this.enabledTab = model._type;
}
},
mounted() {
@ -127,8 +131,23 @@
console.log('-1',model);
this.$store.dispatch('ibp/updateIbpDevices', model);
},
deleteDataModel(model) {
this.$store.dispatch('ibp/deleteIbpDevices', model);
},
handleSave() {
console.log(this.$store.state.ibp.ibp);
const data = JSON.stringify(this.$store.state.ibp.ibp)
console.log(data);
},
handleTabClick() {
this.$refs.ibpline.initPage();
this.$refs.ibptext.initPage();
this.$refs.tipbox.initPage();
this.$refs.squarebutton.initPage();
this.$refs.circularlamp.initPage();
this.$refs.arrow.initPage();
this.$refs.appendagebox.initPage();
this.$refs.alarm.initPage();
this.$refs.rotatingbutton.initPage();
}
}
};