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-28 13:22:17 +08:00
parent f0f7ac1111
commit 3393a65f0d
18 changed files with 108 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 MiB

After

Width:  |  Height:  |  Size: 14 MiB

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

@ -27,8 +27,8 @@ deviceRender[deviceType.RotatingButton] = {
zlevel: 2
};
/** Tip渲染配置*/
deviceRender[deviceType.Tip] = {
/** TipBox渲染配置*/
deviceRender[deviceType.TipBox] = {
zlevel: 2
};

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

@ -4,11 +4,12 @@ const deviceType = {
WarnButton: 'WarnButton',
Arrow: 'Arrow',
RotatingButton: 'RotatingButton',
Tip: 'Tip',
TipBox: 'TipBox',
Background: 'Background',
CircularLamp: 'CircularLamp',
IbpLine: 'IbpLine',
AppendageBox: 'AppendageBox'
AppendageBox: 'AppendageBox',
Alarm: 'Alarm'
};
export default deviceType;

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

@ -13,6 +13,7 @@ const ibpData = {
y: 400
},
length: 488,
width: 10,
stroke: '#0000CD',
fill: '#0000CD',
lineWidth: 1,
@ -27,6 +28,7 @@ const ibpData = {
y: 200
},
length: 488,
width: 10,
stroke: '#0000CD',
fill: '#0000CD',
lineWidth: 1,

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

@ -7,6 +7,7 @@ export default class alarm extends Group {
constructor(device) {
super();
this.model = device.model;
this.event = device.event;
this.zlevel = device.model.zlevel;
this.create();
}
@ -20,15 +21,15 @@ export default class alarm extends Group {
image: alarmpic,
x: model.point.x,
y: model.point.y,
width: 70,
height: 74
width: model.width,
height: model.height
}
});
this.add(this.imageBg);
}
setDraggable() {
this.arrow.attr('draggable', true);
this.imageBg.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {

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

@ -1,5 +1,6 @@
import Group from 'zrender/src/container/Group';
import Image from 'zrender/src/graphic/Image';
import AppendageBoxImage from '@/assets/ibp_images/appendage_box.png';
export default class AppendageBox extends Group {
constructor(device) {
@ -17,7 +18,7 @@ export default class AppendageBox extends Group {
z: this.z,
draggable: false,
style: {
image: '',
image: AppendageBoxImage,
x: this.model.point.x,
y: this.model.point.y,
width: this.model.width,

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

@ -16,9 +16,9 @@ class Arrow extends Group {
this.arrow = new Polygon({
zlevel: model.zlevel,
z: model.z,
draggable: model.draggable || false,
draggable: false,
shape: {
points: arrow(this.model.point.x, this.model.point.y, this.model.length, 10)
points: arrow(this.model.point.x, this.model.point.y, this.model.length, this.model.width)
},
style: {
stroke: model.stroke,
@ -36,6 +36,14 @@ class Arrow extends Group {
this.transformRotation(0);
break;
}
case 'top': {
this.transformRotation(90);
break;
}
case 'bottom': {
this.transformRotation(270);
break;
}
case 'right': {
this.transformRotation(180);
break;

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

@ -28,6 +28,7 @@ export default class button extends Group {
super();
this.model = device.model;
this.zlevel = device.model.zlevel;
this.event = device.event;
this.create();
}
create() {
@ -52,7 +53,7 @@ export default class button extends Group {
}
setDraggable() {
this.arrow.attr('draggable', true);
this.imageBg.attr('draggable', true);
this.createMouseEvent();
}
createMouseEvent() {
@ -75,7 +76,7 @@ export default class button extends Group {
this.open();
this.model.status='off';
break;
}
}
}
}

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

@ -6,6 +6,8 @@ import IbpText from './ibpText';
import Alarm from './alarm';
import IbpLine from './ibpLine';
import Button from './button';
import TipBox from './ibpTipBox';
import AppendageBox from './appendageBox';
const ibpShape = {};
ibpShape[deviceType.Arrow] = Arrow;
@ -15,6 +17,8 @@ ibpShape[deviceType.IbpText] = IbpText;
ibpShape[deviceType.Alarm] = Alarm;
ibpShape[deviceType.IbpLine] = IbpLine;
ibpShape[deviceType.SquareButton] = Button;
ibpShape[deviceType.TipBox] = TipBox;
ibpShape[deviceType.AppendageBox] = AppendageBox;
function shapefactory(device, ibp) {
const type = device.model._type;

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

@ -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="100px">
<el-form-item label="报警器编号">
<el-input v-model="form.code"></el-input>
</el-form-item>
@ -56,14 +56,16 @@
const alarmModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
point: {
x: 10,
y: 10
},
code: this.form.code,
_type: 'Alarm',
width: this.form .alarmWidth,
height: this.form.alarmHeight
};
this.$emit('createButton', alarmModel)
this.$emit('createAlarm', alarmModel)
}
}
};

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

@ -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="100px">
<el-form-item label="扶梯框编号">
<el-input v-model="form.code"></el-input>
</el-form-item>
@ -55,8 +55,10 @@
const appendageBoxModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
point: {
x: 10,
y: 10
},
_type: 'AppendageBox',
code: this.form.code,
width: this.form .appendageBoxWidth,

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

@ -5,18 +5,21 @@
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item label="箭头方向">
<el-select v-model="form.arrowDirection" placeholder="请选择箭头方向">
<el-option label="向上" value="redButton"></el-option>
<el-option label="向下" value="yellowButton"></el-option>
<el-option label="向左" value="greenButton"></el-option>
<el-option label="向右" value="greenButton"></el-option>
<el-select v-model="form.orientation" placeholder="请选择箭头方向">
<el-option label="向上" value="top"></el-option>
<el-option label="向下" value="bottom"></el-option>
<el-option label="向左" value="left"></el-option>
<el-option label="向右" value="right"></el-option>
</el-select>
</el-form-item>
<el-form-item label="箭头长度">
<el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
<el-input-number v-model="form.arrowLength" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="箭头宽度">
<el-input-number v-model="form.arrowHeight" controls-position="right" :min="1"></el-input-number>
<el-input-number v-model="form.arrowWidth" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="箭头颜色">
<el-input v-model="form.fillColor"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
@ -34,23 +37,28 @@
data() {
return {
form: {
arrowDirection: '',
code: '',
orientation: '',
arrowWidth: '',
arrowHeight: ''
arrowLength: '',
fillColor: ''
},
rules: {
code: [
{ required: true, message: '请输入箭头编号', trigger: 'blur' },
],
arrowDirection: [
orientation: [
{ required: true, message: '请选择箭头方向', trigger: 'change'}
],
arrowWidth: [
arrowLength: [
{ required: true, message: '请输入箭头长度', trigger: 'blur' },
],
arrowHeight: [
arrowWidth: [
{ required: true, message: '请输入箭头线宽', trigger: 'blur' },
]
],
fillColor: [
{ required: true, message: '请输入箭头颜色', trigger: 'blur' },
],
}
};
},
@ -67,15 +75,19 @@
const arrowModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
point: {
x: 10,
y: 10
},
_type: 'Arrow',
code: this.form.code,
colorType: this.form.buttonColor,
orientation: this.form.orientation,
fill: this.form.fillColor,
width: this.form .arrowWidth,
height: this.form.arrowHeight
length: this.form.arrowLength,
lineWidth: 1
};
this.$emit('createButton', arrowModel)
this.$emit('createArrow', arrowModel)
}
}
};

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

@ -6,9 +6,10 @@
</el-form-item>
<el-form-item label="按钮颜色">
<el-select v-model="form.buttonColor" placeholder="请选择按钮颜色">
<el-option label="红色按钮" value="redButton"></el-option>
<el-option label="黄色按钮" value="yellowButton"></el-option>
<el-option label="绿色按钮" value="greenButton"></el-option>
<el-option label="红色按钮" value="red"></el-option>
<el-option label="黄色按钮" value="yellow"></el-option>
<el-option label="绿色按钮" value="green"></el-option>
<el-option label="灰色按钮" value="gray"></el-option>
</el-select>
</el-form-item>
<el-form-item label="按钮宽度">
@ -66,13 +67,16 @@
const buttonModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
point: {
x: 10,
y: 10,
},
_type: 'SquareButton',
code: this.form.code,
colorType: this.form.buttonColor,
width: this.form .bgWidth,
height: this.form.bgHeight
color: this.form.buttonColor,
status: 'off',
width: this.form.buttonWidth,
height: this.form.buttonHeight
};
this.$emit('createButton', buttonModel)
}

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

@ -1,18 +1,12 @@
<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 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 label="圆形指示灯关闭颜色">
<el-input-number v-model="form.offColor" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="圆形指示灯打开颜色">
<el-input-number v-model="form.onColor" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
@ -40,12 +34,6 @@
r: [
{ required: true, message: '请输入圆形指示灯半径', trigger: 'change'}
],
offColor: [
{ required: true, message: '请输入圆形指示灯关闭颜色', trigger: 'blur' },
],
onColor: [
{ required: true, message: '请输入圆形指示灯打开颜色', trigger: 'blur' },
]
}
};
},
@ -62,13 +50,14 @@
const lampModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
point:{
x: 10,
y: 10
},
_type: 'CircularLamp',
code: this.form.code,
r: this.form.r,
offColor: this.form.offColor,
onColor: this.form.onColor
fillColor: '#332C22'
};
this.$emit('createLamp', lampModel)
}

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

@ -11,7 +11,7 @@
</el-select>
</el-form-item>
<el-form-item label="线段长度">
<el-input v-model="form.length"></el-input>
<el-input-number controls-position="right" :min="1" v-model="form.length"></el-input-number>
</el-form-item>
<el-form-item label="线段宽度">
<el-input-number v-model="form.lineWidth" controls-position="right" :min="1" :max="50"></el-input-number>

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

@ -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 v-model="form.code"></el-input>
</el-form-item>

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

@ -5,10 +5,13 @@
<el-input 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" :max="50"></el-input-number>
<el-input-number v-model="form.tipBoxWidth" controls-position="right" :min="1" ></el-input-number>
</el-form-item>
<el-form-item label="提示框高度">
<el-input-number v-model="form.tipBoxHeight" controls-position="right" :min="1" :max="50"></el-input-number>
<el-input-number v-model="form.tipBoxHeight" controls-position="right" :min="1" ></el-input-number>
</el-form-item>
<el-form-item label="提示框颜色">
<el-input v-model="form.fillColor"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
@ -30,6 +33,7 @@
code: '',
tipBoxWidth: '',
tipBoxHeight: '',
fillColor: ''
},
rules: {
code: [
@ -40,6 +44,9 @@
],
tipBoxHeight: [
{ required: true, message: '请输入提示框高度', trigger: 'blur' },
],
fillColor: [
{ required: true, message: '请输入提示框颜色', trigger: 'blur' },
]
}
};
@ -57,15 +64,15 @@
const tipBoxModel = {
zlevel: 1,
z: 1,
x: 10,
y: 10,
point: {
x: 10,
y: 10
},
code: this.form.code,
_type: 'IbpText',
context: this.form.context,
textFill: this.form.textFill,
fontSize: this.form.fontSize ,
fontWeight: this.form.fontWeight,
fontFamily: 'consolas'
_type: 'TipBox',
width: this.form.tipBoxWidth,
height: this.form.tipBoxHeight,
fillColor: this.form.fillColor
};
this.$emit('createTipBox', tipBoxModel)
}