diff --git a/src/assets/ibp_images/appendage_box.png b/src/assets/ibp_images/appendage_box.png
new file mode 100644
index 000000000..687e88e4e
Binary files /dev/null and b/src/assets/ibp_images/appendage_box.png differ
diff --git a/src/assets/ibp_images/ibp_bg.png b/src/assets/ibp_images/ibp_bg.png
index ba2d03cbf..6e48da514 100644
Binary files a/src/assets/ibp_images/ibp_bg.png and b/src/assets/ibp_images/ibp_bg.png differ
diff --git a/src/ibp/constant/deviceRender.js b/src/ibp/constant/deviceRender.js
index 86e642062..5b9b01671 100644
--- a/src/ibp/constant/deviceRender.js
+++ b/src/ibp/constant/deviceRender.js
@@ -27,8 +27,8 @@ deviceRender[deviceType.RotatingButton] = {
 	zlevel: 2
 };
 
-/** Tip渲染配置*/
-deviceRender[deviceType.Tip] = {
+/** TipBox渲染配置*/
+deviceRender[deviceType.TipBox] = {
 	zlevel: 2
 };
 
diff --git a/src/ibp/constant/deviceType.js b/src/ibp/constant/deviceType.js
index 59e79b6b4..c31c54c19 100644
--- a/src/ibp/constant/deviceType.js
+++ b/src/ibp/constant/deviceType.js
@@ -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;
diff --git a/src/ibp/constant/ibpData.js b/src/ibp/constant/ibpData.js
index 656fc75cc..0e74a3e8d 100644
--- a/src/ibp/constant/ibpData.js
+++ b/src/ibp/constant/ibpData.js
@@ -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,
diff --git a/src/ibp/shape/alarm.js b/src/ibp/shape/alarm.js
index cc09557d8..b077b3186 100644
--- a/src/ibp/shape/alarm.js
+++ b/src/ibp/shape/alarm.js
@@ -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() {
diff --git a/src/ibp/shape/appendageBox.js b/src/ibp/shape/appendageBox.js
index eb3dd85e8..2a84a0471 100644
--- a/src/ibp/shape/appendageBox.js
+++ b/src/ibp/shape/appendageBox.js
@@ -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,
diff --git a/src/ibp/shape/arrow.js b/src/ibp/shape/arrow.js
index 166bc364b..9c88aed5a 100644
--- a/src/ibp/shape/arrow.js
+++ b/src/ibp/shape/arrow.js
@@ -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;
diff --git a/src/ibp/shape/button.js b/src/ibp/shape/button.js
index 050fc0a28..2f38ff20e 100644
--- a/src/ibp/shape/button.js
+++ b/src/ibp/shape/button.js
@@ -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;
-		}				
+		}
 		}
 	}
 
diff --git a/src/ibp/shape/factory.js b/src/ibp/shape/factory.js
index 64a4a7888..17f1d4fcf 100644
--- a/src/ibp/shape/factory.js
+++ b/src/ibp/shape/factory.js
@@ -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;
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue
index c70116a04..f18511237 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAlarm.vue
@@ -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)
             }
         }
     };
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue
index 68719fda7..779db1442 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpAppendageBox.vue
@@ -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,
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue
index c24ac3c55..f5c131559 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpArrow.vue
@@ -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)
             }
         }
     };
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue
index a13fd4117..188fcbcd8 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpButton.vue
@@ -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)
             }
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLamp.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLamp.vue
index b7b9588ac..7de6f55d9 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLamp.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLamp.vue
@@ -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)
             }
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLine.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLine.vue
index 982aa4593..8fde4e44b 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLine.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpLine.vue
@@ -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>
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue
index 50b4fffed..5e4a8c536 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpRotatingButton.vue
@@ -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>
diff --git a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTipBox.vue b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTipBox.vue
index 3ca9b9e79..fe98054a6 100644
--- a/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTipBox.vue
+++ b/src/views/ibp/ibpDraft/ibpEdit/ibpOperate/ibpTipBox.vue
@@ -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)
             }