diff --git a/package.json b/package.json
index bd8acf7b4..e780635b6 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
-    "bjjl-engine-2d": "^1.0.18",
+    "bjjl-engine-2d": "^1.0.19",
     "echarts": "^4.7.0",
     "element-ui": "^2.12.0",
     "file-saver": "^1.3.3",
diff --git a/src/views/newDraw/drawForm.vue b/src/views/newDraw/drawForm.vue
new file mode 100644
index 000000000..8b3f25a25
--- /dev/null
+++ b/src/views/newDraw/drawForm.vue
@@ -0,0 +1,110 @@
+<template>
+  <div style="background: #fff;">
+    <div style="text-align: right;">
+      <el-button type="text" @click="save">保存</el-button>
+      <el-button type="text" style="margin-right: 10px" @click="back">返回</el-button>
+    </div>
+    <div class="styleGroup">
+      <div class="styleGroupName">
+        绘图配置
+      </div>
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="模型:">
+          <el-select v-model="form.code" size="mini" placeholder="请选择" @change="modelChange">
+            <el-option
+              v-for="item in model"
+              :key="item.code"
+              :label="item.name + '(' + item.code + ')'"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="位置:">
+          <el-input-number v-model="form.position[0]" size="mini" />
+          <el-input-number v-model="form.position[1]" size="mini" />
+        </el-form-item>
+        <el-form-item label="旋转:">
+          <el-input-number v-model="form.rotation" size="mini" :min="-360" :max="360" />
+        </el-form-item>
+        <el-form-item label="缩放:">
+          <el-input-number v-model="form.scale[0]" :precision="2" :step="0.1" size="mini" :min="0.1" />
+          <el-input-number v-model="form.scale[1]" :precision="2" :step="0.1" size="mini" :min="0.1" />
+        </el-form-item>
+      </el-form>
+      <div style="text-align: right;">
+        <el-button :disabled="!form.code" type="warning" size="mini" @click="updateCompose">修改</el-button>
+        <el-button :disabled="!form.code" type="danger" size="mini" @click="deleteCompose">删除</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: 'DrawForm',
+    props: {
+        model: {
+            type: Array,
+            default() {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            form: {
+                code: '',
+                type: '',
+                name: '',
+                position: [0, 0],
+                rotation: 0,
+                scale: [1, 1]
+            }
+        };
+    },
+    methods: {
+        selectChange(compose) {
+            // this.form.code = compose.code;
+            // this.form.type = compose.type;
+            // this.form.name = compose.name;
+            // this.form.position = compose.position;
+            // this.form.rotation = compose.rotation;
+            // this.form.scale = compose.scale;
+            this.form = compose;
+        },
+        modelChange(code) {
+            const compose = this.model.find(item => item.code === code);
+            this.selectChange(compose);
+        },
+        updateCompose() {
+            this.$emit('updateCompose', this.form);
+        },
+        deleteCompose() {
+            this.$emit('deleteCompose', this.form);
+            this.form = {
+                code: '',
+                type: '',
+                name: '',
+                position: [0, 0],
+                rotation: 0,
+                scale: [1, 1]
+            };
+        },
+        save() {
+
+        },
+        back() {
+            this.$router.go(-1);
+        }
+    }
+};
+</script>
+
+<style scoped>
+    .styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin: 30px 15px;}
+    .styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
+    /deep/ .el-form-item__content{
+        text-align: left;
+    }
+</style>
diff --git a/src/views/newDraw/edit.vue b/src/views/newDraw/edit.vue
index a6ae84241..57ad76c22 100644
--- a/src/views/newDraw/edit.vue
+++ b/src/views/newDraw/edit.vue
@@ -1,20 +1,30 @@
 <template>
-  <div style="width: 100%;height: 100%;">
-    <jl-picture-builder ref="jlPictureBuilder" :model="model" :compose-map="composeMap" />
-    <div style="height: 300px;background: #fff;z-index: 999;position: absolute;top: 70px;padding: 5px;left: 5px;">
+  <div id="app" style="width: 100%;height: 100%;">
+    <!--<jl-model-builder type="测试类型" composeName="测试名称" :model="model" @save="save"></jl-model-builder>-->
+    <jl-picture-builder ref="jlPictureBuilder" :model="model" :compose-map="composeMap" @selectChange="selectChange" />
+    <div style="height: 300px;background: #fff;z-index: 999;position: absolute;top: 70px;left: 0;">
       <template v-for="item in modelList">
-        <el-button :key="item.code" size="mini" @click="addModel(item)">{{ item.name }}</el-button>
+        <el-button :key="item.code" size="mini" style="margin: 5px" @click="addModel(item)">{{ item.name }}</el-button>
       </template>
     </div>
+    <draw-form
+      ref="drawForm"
+      :model="model"
+      style="position: absolute;right: 0;top: 60px;height: calc(100% - 60px);"
+      @updateCompose="updateCompose"
+      @deleteCompose="deleteCompose"
+    />
   </div>
 </template>
 
 <script>
+import DrawForm from './drawForm';
 import { getModelList } from '@/api/management/model';
-import { deepAssign } from '@/utils/index';
-
 export default {
     name: 'Edit',
+    components: {
+        DrawForm
+    },
     data() {
         return {
             composeMap: {},
@@ -25,12 +35,15 @@ export default {
     mounted() {
         getModelList().then(res=>{
             this.modelList = res.data;
-            // this.modelList.forEach(item => {
-            //     this.composeMap[item.code] = item;
-            // });
         });
     },
     methods: {
+        test() {
+            this.$refs.jlPictureBuilder.update([]);
+        },
+        save(model) {
+            console.log(JSON.stringify(model));
+        },
         addModel(model) {
             if (!this.composeMap[model.code]) {
                 this.composeMap[model.code] = JSON.parse(model.jsonData);
@@ -39,19 +52,49 @@ export default {
                 code: this.getUID(model.code),
                 position: [100, 100],
                 type: model.code,
+                name: model.name,
                 rotation: 0,
-                scale: [1, 1]
+                scale: [1, 1],
+                shapeList: this.composeMap[model.code].shapeList
             };
             this.model.push(addModel);
             this.$refs.jlPictureBuilder.update([{model: addModel, action:{order:'&Add', shapeType: 'Compose'}}]);
         },
+        updateCompose(model) {
+            const updateModel = {
+                code: model.code,
+                position: model.position,
+                type: model.type,
+                name: model.name,
+                rotation: model.rotation,
+                scale: model.scale,
+                shapeList: this.composeMap[model.type].shapeList
+            };
+            const index = this.model.findIndex(item => item.code === model.code);
+            this.model.splice(index, 1, updateModel);
+            this.$refs.jlPictureBuilder.update([{model: updateModel, action:{order:'&UPT', shapeType: 'Compose'}}]);
+        },
+        deleteCompose(model) {
+            const index = this.model.findIndex(item => item.code === model.code);
+            this.model.splice(index, 1);
+            this.$refs.jlPictureBuilder.update([{model: model, action:{order:'&DEL', shapeType: 'Compose'}}]);
+        },
         getUID (type, base = 0) {
             return [(type || ''), base++, Math.random().toFixed(5)].join('_');
+        },
+        selectChange(compose) {
+            this.$refs.drawForm.selectChange(compose);
         }
     }
 };
 </script>
 
-<style scoped>
-
+<style>
+	#app {
+		font-family: "Avenir", Helvetica, Arial, sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		text-align: center;
+		color: #2c3e50;
+	}
 </style>