From 156a63ea021c316a77b775f6931c2d840857061f Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Wed, 7 Apr 2021 17:56:40 +0800
Subject: [PATCH 1/3] =?UTF-8?q?iscs=20=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/iscs_new/core/form/builderFactory.js   |  38 +-
 src/iscs_new/core/form/elementConst.js     | 349 +++++++++++-
 src/iscs_new/core/form/form2Base.js        |   4 +-
 src/iscs_new/core/form/form2ShapeStyle.js  |  68 +--
 src/iscs_new/core/form/form2TextStyle.js   | 600 ++++++++++-----------
 src/views/iscs_new/components/dataForm.vue |   8 +-
 src/views/iscs_new/iscsDraw/index.vue      |  47 +-
 7 files changed, 723 insertions(+), 391 deletions(-)

diff --git a/src/iscs_new/core/form/builderFactory.js b/src/iscs_new/core/form/builderFactory.js
index fc2d48662..d0f07a669 100644
--- a/src/iscs_new/core/form/builderFactory.js
+++ b/src/iscs_new/core/form/builderFactory.js
@@ -8,46 +8,24 @@ class BuilderFactory {
         const elementList = Object.values(elementConst);
         elementList.forEach(element=>{
             const temp = Object.assign({}, element);
-
             temp.formGroup = [];
             temp.model = {};
-            temp.rules = {};
-
             // 添加通用配置
             temp.model['base'] = {};
-            temp.rules['base'] = {};
             form2Base.forEach(each=>{
                 temp.model['base'][each.prop] = each.value;
-                if (each.rules) {
-                    each.required = true;
-                    temp.rules['base'][each.prop] = each.rules;
-                }
             });
             temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
 
-            // 添加样式配置  样式
-            temp.model['style'] = {};
-            temp.rules['style'] = {};
-            const styleList = element.formList.style;
-            styleList.forEach(each=>{
-                temp.model['style'][each.prop] = each.value;
-                if (each.rules) {
-                    each.required = true;
-                    temp.rules['style'][each.prop] = each.rules;
-                }
+            const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
+            list.forEach(eachType=>{
+                temp.model[eachType.type] = {};
+                const eachList = element.formList[eachType.type];
+                eachList.forEach(each=>{
+                    temp.model[eachType.type][each.prop] = each.value;
+                });
+                temp.formGroup.push({name:eachType.name, code:eachType.type, styleList:eachList});
             });
-            temp.formGroup.push({name:'样式配置', code:'style', styleList:styleList});
-
-            // shape
-            // element
-
-            // temp.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
-            // temp.rules
-            // let ClassName=element.code;
-            // const  = elementTypeList[element];
-            // temp.formStyle=new ClassName();
-            // 添加样式配置  style
-
             this.formList.push(temp);
         });
         return this.formList;
diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js
index d426fa2d8..f066c4295 100644
--- a/src/iscs_new/core/form/elementConst.js
+++ b/src/iscs_new/core/form/elementConst.js
@@ -1,6 +1,7 @@
 
 import * as graphic from '../../core/graphic';
 import form2ShapeStyle from './form2ShapeStyle';
+import types from './types';
 const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
 
 export const elementConst = {
@@ -12,10 +13,30 @@ export const elementConst = {
                 ...form2ShapeStyle
             ],
             shape: [
-                // opts.shape.x1	number	0	起始点横坐标。
-                // opts.shape.y1	number	0	起始点纵坐标。
-                // opts.shape.x2	number	0	终止点横坐标。
-                // opts.shape.y2	number	0	终止点纵坐标。
+                {prop: 'x1', label: '起始点横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入起始点横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '起始点横坐标'},
+                {prop: 'y1', label: '起始点纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '起始点纵坐标'},
+                {prop: 'x2', label: '终止点横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入终止点横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '终止点横坐标'},
+                {prop: 'y2', label: '终止点纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '终止点纵坐标'}
                 // opts.shape.percent	number	1	已显示的百分比，用于绘制动画。
             ]
         }
@@ -37,11 +58,50 @@ export const elementConst = {
         name:'矩形',
         formList: {
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape: [
-
-            ]
+                {prop: 'x', label: '左上角横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入左上角横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '左上角横坐标'},
+                {prop: 'y', label: '左上角纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '左上角纵坐标'},
+                {prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入宽度', trigger: 'blur' }
+                    ],
+                    value: 50,
+                    description: '宽度'},
+                {prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入高度', trigger: 'blur' }
+                    ],
+                    value: 50,
+                    description: '高度'},
+                {prop: 'r', label: '圆角矩形半径', type: types.NumberArray, precision: 0, step:1, length:4,
+                    rules:[
+                        { required: true, message:'请输入圆角矩形半径', trigger: 'blur' }
+                    ],
+                    value:  [5, 5, 5, 5],
+                    description: '用于创建圆角矩形。左上、右上、右下、左下角的半径依次为 r1、 r2、 r3、 r4。[1, 1, 1, 1]'
+                }]
         }
     },
     [graphicType.Circle]: {
@@ -49,10 +109,37 @@ export const elementConst = {
         name:'圆形',
         formList:{
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape: [
-
+                {prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心横坐标'},
+                {prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心纵坐标'},
+                {prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入半径', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '半径'}
             ]
         }
     },
@@ -61,6 +148,16 @@ export const elementConst = {
         name:'多边形',
         formList: {
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape: [
@@ -97,10 +194,43 @@ export const elementConst = {
         name:'正多边形',
         formList: {
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape:[
-
+                {prop: 'x', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心横坐标'},
+                {prop: 'y', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心纵坐标'},
+                {prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入半径', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '半径'},
+                {prop: 'n', label: '边数', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入边数', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '边数'}
             ]
         }
     },
@@ -109,10 +239,43 @@ export const elementConst = {
         name:'椭圆',
         formList: {
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape:[
-
+                {prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心横坐标'},
+                {prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心纵坐标'},
+                {prop: 'rx', label: '横向半径', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入横向半径', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '横向半径'},
+                {prop: 'ry', label: '纵向半径', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入纵向半径', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '纵向半径'}
             ]
         }
     },
@@ -124,7 +287,46 @@ export const elementConst = {
                 ...form2ShapeStyle
             ],
             shape: [
-
+                {prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心横坐标'},
+                {prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心纵坐标'},
+                {prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入半径', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '半径'},
+                {prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入起始弧度', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '起始弧度'},
+                {prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入终止弧度', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '终止弧度'},
+                {
+                    prop: 'clockwise',
+                    label: '顺时针方向',
+                    type: types.Boolean,
+                    rules:[
+                        { required: true, message:'请选择图形是否不可见', trigger: 'change' }
+                    ],
+                    value: true,
+                    description: '顺时针方向。'
+                }
             ]
         }
     },
@@ -133,10 +335,65 @@ export const elementConst = {
         name:'扇形',
         formList: {
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape: [
-
+                {prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心横坐标'},
+                {prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心纵坐标'},
+                {prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入半径', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '半径'},
+                {prop: 'r0', label: '内半径', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入内半径', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '内半径'},
+                {prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入起始弧度', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '起始弧度'},
+                {prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入终止弧度', trigger: 'blur' }
+                    ],
+                    value: 20,
+                    description: '终止弧度'},
+                {
+                    prop: 'clockwise',
+                    label: '顺时针方向',
+                    type: types.Boolean,
+                    rules:[
+                        { required: true, message:'请选择图形是否不可见', trigger: 'change' }
+                    ],
+                    value: true,
+                    description: '顺时针方向。'
+                }
             ]
         }
     },
@@ -145,10 +402,43 @@ export const elementConst = {
         name:'心形',
         formList: {
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape: [
-
+                {prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心横坐标'},
+                {prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心纵坐标'},
+                {prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入宽度', trigger: 'blur' }
+                    ],
+                    value: 50,
+                    description: '宽度'},
+                {prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入高度', trigger: 'blur' }
+                    ],
+                    value: 50,
+                    description: '高度'}
             ]
         }
     },
@@ -157,10 +447,43 @@ export const elementConst = {
         name:'水滴',
         formList: {
             style: [
+                {
+                    prop: 'fill',
+                    label: '填充样式',
+                    type: types.Color,
+                    rules:[
+                        { required: true, message:'请输入填充样式', trigger: 'blur' }
+                    ],
+                    value: '',
+                    description: '填充样式。'
+                },
                 ...form2ShapeStyle
             ],
             shape: [
-
+                {prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心横坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心横坐标'},
+                {prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
+                    ],
+                    value: 10,
+                    description: '圆心纵坐标'},
+                {prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入宽度', trigger: 'blur' }
+                    ],
+                    value: 50,
+                    description: '宽度'},
+                {prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
+                    rules:[
+                        { required: true, message:'请输入高度', trigger: 'blur' }
+                    ],
+                    value: 50,
+                    description: '高度'}
             ]
         }
     }
diff --git a/src/iscs_new/core/form/form2Base.js b/src/iscs_new/core/form/form2Base.js
index 061551b52..f2773d37d 100644
--- a/src/iscs_new/core/form/form2Base.js
+++ b/src/iscs_new/core/form/form2Base.js
@@ -4,7 +4,7 @@ export default [
     { 	prop: 'z1',
         label: '层级z1',
         type: types.Number,
-        precisionFlag: 0,
+        precision: 0,
         min:0,
         max:20,
         step:1,
@@ -18,7 +18,7 @@ export default [
         prop: 'z2',
         label: '层级z2',
         type: types.Number,
-        precisionFlag: 0,
+        precision: 0,
         min: 0,
         max: 100,
         step: 1,
diff --git a/src/iscs_new/core/form/form2ShapeStyle.js b/src/iscs_new/core/form/form2ShapeStyle.js
index 335f75bfd..643f4a9dd 100644
--- a/src/iscs_new/core/form/form2ShapeStyle.js
+++ b/src/iscs_new/core/form/form2ShapeStyle.js
@@ -8,23 +8,13 @@ export default [
         min: 0,
         max: 100,
         step: 1,
-        precisionFlag: 0,
+        precision: 0,
         rules:[
             { required: true, message:'请输入线宽', trigger: 'blur' }
         ],
-        value: 0,
+        value: 1,
         description: '线宽'
     },
-    {
-        prop: 'fill',
-        label: '填充样式',
-        type: types.Color,
-        rules:[
-            { required: true, message:'请输入填充样式', trigger: 'blur' }
-        ],
-        value: '',
-        description: '填充样式。'
-    },
     {
         prop: 'opacity',
         label: '不透明度',
@@ -32,7 +22,7 @@ export default [
         min: 0,
         max: 1,
         step: 0.05,
-        precisionFlag: 2,
+        precision: 2,
         rules:[
             { required: true, message:'请输入不透明度', trigger: 'blur' }
         ],
@@ -43,9 +33,9 @@ export default [
         prop: 'stroke',
         label: '描边样式',
         type: types.Color,
-        rules:[
-            { required: true, message:'请输入描边样式', trigger: 'blur' }
-        ],
+        // rules:[
+        //     { required: true, message:'请输入描边样式', trigger: 'blur' }
+        // ],
         value: '',
         description: '描边样式。'
     },
@@ -57,10 +47,10 @@ export default [
         min: 0,
         max: 100,
         step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
-        ],
+        precision: 0,
+        // rules:[
+        //     { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
+        // ],
         value: [0, 0],
         description: '描边虚线样式，参考 SVG stroke-dasharray。'
     },
@@ -71,10 +61,10 @@ export default [
         min: 0,
         max: 100,
         step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
-        ],
+        precision: 0,
+        // rules:[
+        //     { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
+        // ],
         value: [0, 0],
         description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
     },
@@ -82,9 +72,9 @@ export default [
         prop: 'shadowColor',
         label: '阴影颜色',
         type: types.Color,
-        rules:[
-            { required: true, message:'请输入阴影颜色', trigger: 'blur' }
-        ],
+        // rules:[
+        //     { required: true, message:'请输入阴影颜色', trigger: 'blur' }
+        // ],
         value: '',
         description: '阴影颜色。'
     },
@@ -95,10 +85,10 @@ export default [
         min: 0,
         max: 100,
         step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
-        ],
+        precision: 0,
+        // rules:[
+        //     { required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
+        // ],
         value: 0,
         description: '阴影横向偏移。'
     },
@@ -109,10 +99,10 @@ export default [
         min: 0,
         max: 100,
         step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
-        ],
+        precision: 0,
+        // rules:[
+        //     { required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
+        // ],
         value: 0,
         description: '阴影纵向偏移。'
     },
@@ -123,10 +113,10 @@ export default [
         min: 0,
         max: 100,
         step: 1,
-        precisionFlag: 0,
-        rules:[
-            { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
-        ],
+        precision: 0,
+        // rules:[
+        //     { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
+        // ],
         value: 0,
         description: '阴影模糊大小。'
     },
diff --git a/src/iscs_new/core/form/form2TextStyle.js b/src/iscs_new/core/form/form2TextStyle.js
index 4fbf92ba7..3f4e63694 100644
--- a/src/iscs_new/core/form/form2TextStyle.js
+++ b/src/iscs_new/core/form/form2TextStyle.js
@@ -1,402 +1,402 @@
 import types from './types';
 
 export default [
-	{
-		prop: 'text',
-		label: '内容',
+    {
+        prop: 'text',
+        label: '内容',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入内容', trigger: 'blur' }
-		],
+            { required: true, message:'请输入内容', trigger: 'blur' }
+        ],
         value: 'context',
-		description: '在图形中显示的文字。'
-	},
-	// {
-	// 	prop: 'font',
-	// 	label: '文字样式',
+        description: '在图形中显示的文字。'
+    },
+    // {
+    // 	prop: 'font',
+    // 	label: '文字样式',
     //     type: types.String,
     //     rules:[
-	// 		{ required: true, message:'请输入文字样式', trigger: 'blur' }
-	// 	],
+    // 		{ required: true, message:'请输入文字样式', trigger: 'blur' }
+    // 	],
     //     value: '',
-	// 	description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。'
-	// },
-	{
-		prop: 'fontStyle',
-		label: '',
+    // 	description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。'
+    // },
+    {
+        prop: 'fontStyle',
+        label: '',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字样式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字样式', trigger: 'blur' }
+        ],
         value: 'normal',
-		description: '同 CSS font-style。'
-	},
-	{
-		prop: 'fontWeight',
-		label: '文字粗细',
+        description: '同 CSS font-style。'
+    },
+    {
+        prop: 'fontWeight',
+        label: '文字粗细',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字粗细', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字粗细', trigger: 'blur' }
+        ],
         value: 'normal',
-		description: '同 CSS font-weight。'
-	},
-	{
-		prop: 'fontSize',
-		label: '文字大小',
+        description: '同 CSS font-weight。'
+    },
+    {
+        prop: 'fontSize',
+        label: '文字大小',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字大小', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字大小', trigger: 'blur' }
+        ],
         value: '12px',
-		description: '同 CSS font-size。'
-	},
-	{
-		prop: 'fontFamily',
-		label: '文字族',
+        description: '同 CSS font-size。'
+    },
+    {
+        prop: 'fontFamily',
+        label: '文字族',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字族', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字族', trigger: 'blur' }
+        ],
         value: '文字样式',
-		description: '同 CSS font-family。'
-	},
-	{
-		prop: 'textFill',
-		label: '文字填充样式',
+        description: '同 CSS font-family。'
+    },
+    {
+        prop: 'textFill',
+        label: '文字填充样式',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字填充样式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字填充样式', trigger: 'blur' }
+        ],
         value: '',
-		description: '文字填充样式。'
-	},
-	{
-		prop: 'textStroke',
-		label: '文字描边样式',
+        description: '文字填充样式。'
+    },
+    {
+        prop: 'textStroke',
+        label: '文字描边样式',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字描边样式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字描边样式', trigger: 'blur' }
+        ],
         value: '',
-		description: '文字描边样式。'
-	},
-	{
-		prop: 'textWidth',
-		label: '文字宽度',
+        description: '文字描边样式。'
+    },
+    {
+        prop: 'textWidth',
+        label: '文字宽度',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字宽度', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字宽度', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字宽度。'
-	},
-	{
-		prop: 'textHeight',
-		label: '文字高度',
+        description: '文字宽度。'
+    },
+    {
+        prop: 'textHeight',
+        label: '文字高度',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字高度', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字高度', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字高度，仅用于设置背景色时需要设置。'
-	},
-	{
-		prop: 'textLineWidth',
-		label: '文字描边宽度',
+        description: '文字高度，仅用于设置背景色时需要设置。'
+    },
+    {
+        prop: 'textLineWidth',
+        label: '文字描边宽度',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字描边宽度', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字描边宽度', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字描边宽度。'
-	},
-	{
-		prop: 'textLineHeight',
-		label: '文字行高',
+        description: '文字描边宽度。'
+    },
+    {
+        prop: 'textLineHeight',
+        label: '文字行高',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字行高', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字行高', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字行高。'
-	},
-	{
-		prop: 'textPosition',
-		label: '文字位置',
+        description: '文字行高。'
+    },
+    {
+        prop: 'textPosition',
+        label: '文字位置',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字位置', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字位置', trigger: 'blur' }
+        ],
         value: '',
-		description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
-	},
-	{
-		prop: 'textOffset',
-		label: '文字行高',
+        description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
+    },
+    {
+        prop: 'textOffset',
+        label: '文字行高',
         type: types.Point,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字位置偏移', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字位置偏移', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字位置偏移，包括 x、 y。'
-	},
-	{
-		prop: 'textAlign',
-		label: '文字水平对齐方式',
+        description: '文字位置偏移，包括 x、 y。'
+    },
+    {
+        prop: 'textAlign',
+        label: '文字水平对齐方式',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
+        ],
         value: '',
-		description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
-	},
-	{
-		prop: 'textVerticalAlign',
-		label: '文字垂直对齐方式',
+        description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
+    },
+    {
+        prop: 'textVerticalAlign',
+        label: '文字垂直对齐方式',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
+        ],
         value: '',
-		description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
-	},
-	{
-		prop: 'textDistance',
-		label: '文字与其对齐的边缘的距离',
+        description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
+    },
+    {
+        prop: 'textDistance',
+        label: '文字与其对齐的边缘的距离',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
-	},
-	{
-		prop: 'textShadowColor',
-		label: '文字阴影颜色',
+        description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
+    },
+    {
+        prop: 'textShadowColor',
+        label: '文字阴影颜色',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
+        ],
         value: '',
-		description: "文字阴影颜色。"
-	},
-	{
-		prop: 'textShadowBlur',
-		label: '文字阴影模糊大小',
+        description: '文字阴影颜色。'
+    },
+    {
+        prop: 'textShadowBlur',
+        label: '文字阴影模糊大小',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字阴影模糊大小', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字阴影模糊大小', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字阴影模糊大小。'
-	},
-	{
-		prop: 'textShadowOffsetX',
-		label: '文字阴影水平偏移',
+        description: '文字阴影模糊大小。'
+    },
+    {
+        prop: 'textShadowOffsetX',
+        label: '文字阴影水平偏移',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字阴影水平偏移', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字阴影水平偏移', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字阴影水平偏移。'
-	},
-	{
-		prop: 'textShadowOffsetY',
-		label: '文字阴影垂直偏移',
+        description: '文字阴影水平偏移。'
+    },
+    {
+        prop: 'textShadowOffsetY',
+        label: '文字阴影垂直偏移',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字阴影垂直偏移', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字阴影垂直偏移', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字阴影垂直偏移。'
-	},
-	{
-		prop: 'textBoxShadowColor',
-		label: '文字包围盒阴影颜色',
+        description: '文字阴影垂直偏移。'
+    },
+    {
+        prop: 'textBoxShadowColor',
+        label: '文字包围盒阴影颜色',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
+        ],
         value: 'transparent',
-		description: "文字包围盒阴影颜色。"
-	},
-	{
-		prop: 'textBoxShadowBlur',
-		label: '文字包围盒阴影模糊大小',
+        description: '文字包围盒阴影颜色。'
+    },
+    {
+        prop: 'textBoxShadowBlur',
+        label: '文字包围盒阴影模糊大小',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字包围盒阴影模糊大小', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字包围盒阴影模糊大小', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字包围盒阴影模糊大小。'
-	},
-	{
-		prop: 'textBoxShadowOffsetX',
-		label: '文字包围盒阴影水平偏移',
+        description: '文字包围盒阴影模糊大小。'
+    },
+    {
+        prop: 'textBoxShadowOffsetX',
+        label: '文字包围盒阴影水平偏移',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字包围盒阴影水平偏移', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字包围盒阴影水平偏移', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字包围盒阴影水平偏移。'
-	},
-	{
-		prop: 'textBoxShadowOffsetY',
-		label: '文字包围盒阴影垂直偏移',
+        description: '文字包围盒阴影水平偏移。'
+    },
+    {
+        prop: 'textBoxShadowOffsetY',
+        label: '文字包围盒阴影垂直偏移',
         type: types.Number,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字包围盒阴影垂直偏移。', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字包围盒阴影垂直偏移。', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字包围盒阴影垂直偏移。'
-	},
-	{
-		prop: 'transformText',
-		label: '文字是否跟随变换效果',
+        description: '文字包围盒阴影垂直偏移。'
+    },
+    {
+        prop: 'transformText',
+        label: '文字是否跟随变换效果',
         type: types.Boolean,
         rules:[
-			{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
-		],
+            { required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
+        ],
         value: false,
-		description: "文字是否跟随变换效果，仅对 Path 或 Image 元素有效"
-	},
-	{
-		prop: 'textRotation',
-		label: '文字旋转角度',
+        description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
+    },
+    {
+        prop: 'textRotation',
+        label: '文字旋转角度',
         type: types.Number,
-		min: 0,
-		max: 360,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 360,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字旋转角度', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字旋转角度', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
-	},
-	{
-		prop: 'textOrigin',
-		label: '文字变换中心',
+        description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
+    },
+    {
+        prop: 'textOrigin',
+        label: '文字变换中心',
         type: types.Point,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字变换中心', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字变换中心', trigger: 'blur' }
+        ],
         value: 0,
-		description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
-	},
-	{
-		prop: 'textBackgroundColor',
-		label: '文字包围盒颜色',
+        description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
+    },
+    {
+        prop: 'textBackgroundColor',
+        label: '文字包围盒颜色',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
+        ],
         value: '',
-		description: "文字包围盒颜色。"
-	},
-	{
-		prop: 'textBorderColor',
-		label: '文字包围盒描边颜色',
+        description: '文字包围盒颜色。'
+    },
+    {
+        prop: 'textBorderColor',
+        label: '文字包围盒描边颜色',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
+        ],
         value: '',
-		description: "文字包围盒描边颜色。"
-	},
-	{
-		prop: 'textBorderWidth',
-		label: '文字包围盒描边宽度',
+        description: '文字包围盒描边颜色。'
+    },
+    {
+        prop: 'textBorderWidth',
+        label: '文字包围盒描边宽度',
         type: types.Number,
-		min: 0,
-		max: 1000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 1000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字包围盒描边宽度', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字包围盒描边宽度', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字包围盒描边宽度。'
-	},
-	{
-		prop: 'textBorderRadius',
-		label: '文字圆角大小',
+        description: '文字包围盒描边宽度。'
+    },
+    {
+        prop: 'textBorderRadius',
+        label: '文字圆角大小',
         type: types.Number,
-		min: 0,
-		max: 360,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 360,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字圆角大小', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字圆角大小', trigger: 'blur' }
+        ],
         value: 0,
-		description: '文字圆角大小。'
-	},
-	{
-		prop: 'textPadding',
-		label: '文字内边距',
+        description: '文字圆角大小。'
+    },
+    {
+        prop: 'textPadding',
+        label: '文字内边距',
         type: types.Point,
-		min: 0,
-		max: 10000,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 10000,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入文字内边距', trigger: 'blur' }
-		],
+            { required: true, message:'请输入文字内边距', trigger: 'blur' }
+        ],
         value: 0,
-		description: "文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。"
-	}
-]
+        description: '文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。'
+    }
+];
diff --git a/src/views/iscs_new/components/dataForm.vue b/src/views/iscs_new/components/dataForm.vue
index b0d1952d2..c04397a85 100644
--- a/src/views/iscs_new/components/dataForm.vue
+++ b/src/views/iscs_new/components/dataForm.vue
@@ -1,15 +1,15 @@
 <template>
-  <el-form ref="form" :model="formModel" :rules="rules" class="composeForm" label-width="auto">
+  <el-form ref="form" :model="formModel" class="composeForm" label-width="180px">
     <div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
       <div class="styleGroupName">
         {{ styleGroup.name }}
       </div>
       <template v-for="item in styleGroup.styleList">
-        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
+        <el-form-item :key="item.prop" :prop="styleGroup.code+'.'+item.prop" :label="item.label" class="formName" :rules="item.rules?item.rules:[]">
           <!-- {{ tempModel=styleGroup.code?formModel[styleGroup.code]:formModel }} -->
           <template v-if="checkFieldType(item, 'Number')">
             <el-input-number
-              v-if="item.precisionFlag"
+              v-if="item.precision!=undefined"
               v-model="formModel[styleGroup.code][item.prop]"
               size="small"
               :min="isNaN(item.min) ? -Infinity : item.min"
@@ -100,6 +100,6 @@ export default {
     .composeForm{padding: 10px 15px;}
     .styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;}
     .formName .el-form-item__label {font-size:14px;}
-    .formName.el-form-item {margin-bottom:12px}
+    .formName.el-form-item {margin-bottom:25px}
     .styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
 </style>
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index 7061e4950..b935409b9 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -15,10 +15,15 @@
             >保存</el-button>
           </div>
           <el-tabs v-model="enabledTab" class="card" type="card" @tab-click="handleTabClick">
-            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">
-              <data-form :ref="'dataform'+index" :form="element" :form-model="element.model" :rules="element.rules" />
+            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
+              <data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
             </el-tab-pane>
           </el-tabs>
+          <div class="bottomBtnGroup">
+            <el-button type="primary" size="small" @click="onSubmit">添加</el-button>
+            <el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
+            <el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
+          </div>
         </el-card>
       </div>
       <!-- <div class="right-card" :class="{'hide': tableShow}">
@@ -51,6 +56,7 @@ export default {
             draftShow: false,
             // tableShow: false,
             enabledTab:'',
+            showDeleteButton:false,
             elementList:[]
         };
     },
@@ -104,7 +110,24 @@ export default {
         },
         handleTabClick() {
 
-        }
+        },
+        onSubmit(){
+          let that=this;
+          that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
+                if (valid) {
+                  let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
+                  let newModel=Object.assign({},formModel.base);
+                  newModel.style=Object.assign({},formModel.style);
+                  newModel.shape=Object.assign({},formModel.shape);
+                }
+          });
+        },
+        deleteDevice(){
+
+        },
+        initPage(){
+
+        },
     }
 };
 </script>
@@ -119,6 +142,7 @@ export default {
       flex:1;
       height: 100%;
       overflow: auto;
+      padding-bottom:30px;
     }
 
     .map-view {
@@ -176,6 +200,23 @@ export default {
             box-shadow: -2px 0px 2px #000000;
     }
   }
+  .bottomBtnGroup{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 43px;
+    text-align: right;
+    right: 0px;
+    background: #fff;
+    z-index: 2;
+    padding-top: 5px;
+    border-bottom: 1px #dedede solid;
+    box-shadow: 2px -3px 5px #dedede;
+  }
+  .bottomBtnGroup button{
+    display: inline-block;
+    margin-right:10px;
+  }
 </style>
 <style lang="scss">
   .heightClass .el-card__body{

From d7ac07460801ce0568cfa513d7c9666a0b30de5c Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Wed, 7 Apr 2021 18:10:24 +0800
Subject: [PATCH 2/3] =?UTF-8?q?iscs=20=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iscs_new/iscsDraw/index.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index b935409b9..80f89211b 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -2,7 +2,8 @@
   <transition name="el-zoom-in-center">
     <div class="mapPaint">
       <div class="map-view">
-        <iscs-plate ref="iscsPlate" @iscsChange="iscsChange" />
+        <iscs-canvas ref="iscsCanvas" />
+        <!-- @iscsChange="iscsChange"  -->
       </div>
       <div class="right-card" :class="{'hide': draftShow}">
         <div class="btn_draft_box" @click="clickDraftBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
@@ -34,7 +35,7 @@
 </template>
 <script>
 import localStore from 'storejs';
-import IscsPlate from '@/views/iscsSystem/index';
+import iscsCanvas from './iscsCanvas';
 // import {allElements} from '@/iscs_new/core/form/allElments';
 import BuilderFactory from '@/iscs_new/core/form/builderFactory';
 import DataForm from '../components/dataForm';
@@ -43,7 +44,7 @@ import DataForm from '../components/dataForm';
 export default {
     name: 'IscsView',
     components: {
-        IscsPlate,
+        iscsCanvas,
         DataForm
     },
     data() {

From 62eb86e5ecd7e5f409af3235377fe69b4cdcf3e9 Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Wed, 7 Apr 2021 18:10:51 +0800
Subject: [PATCH 3/3] =?UTF-8?q?iscs=20=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iscs_new/iscsDraw/iscsCanvas.vue | 414 +++++++++++++++++++++
 1 file changed, 414 insertions(+)
 create mode 100644 src/views/iscs_new/iscsDraw/iscsCanvas.vue

diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
new file mode 100644
index 000000000..376cce795
--- /dev/null
+++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
@@ -0,0 +1,414 @@
+<template>
+  <div>
+    <!-- <div>
+      <el-row>
+        <el-input v-model="json" type="textarea" :rows="4" />
+        <el-button @click="doRemove"> 删除 </el-button>
+        <el-button @click="doUnbinding">解绑</el-button>
+        <el-button @click="doSource"> 源数据 </el-button>
+      </el-row>
+    </div> -->
+    <div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Iscs from '@/iscs_new/map';
+// import orders from '@/iscs_new/utils/orders';
+// import shapeType from '@/iscs_new/constant/shapeType';
+import { mapGetters } from 'vuex';
+// import { exitFullscreen } from '@/utils/screen';
+
+export default {
+    data() {
+        return {
+            json: '{}',
+            dataZoom: {
+                offsetX: '0',
+                offsetY: '0',
+                scaleRate: '1'
+            },
+            config: {
+                scaleRate: '1',
+                origin: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            selected: null, // 选择复制元素
+            loading: false
+        };
+    },
+    computed: {
+        ...mapGetters('iscs', [
+            'iscs'
+        ]),
+        iscsId() {
+            return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
+        },
+        width() {
+            return document.documentElement.clientWidth;
+        },
+        height() {
+            return document.documentElement.clientHeight;
+        }
+    },
+    watch: {
+        '$store.state.config.canvasSizeCount': function (val) {
+            this.resize();
+        },
+        '$store.state.socket.equipmentStatus': function (val) {
+            if (val.length) {
+                this.stateMessage(val);
+            }
+        }
+    },
+    mounted() {
+        this.init();
+        this.$iscs.modelBuilder.addEventListener();
+    },
+    beforeDestroy() {
+        this.$iscs.modelBuilder.removeEventListener();
+        this.destroy();
+    },
+    methods: {
+        init() {
+            document.getElementById(this.iscsId).oncontextmenu = function (e) {
+                return false;
+            };
+
+            this.$iscs = new Iscs({
+                dom: document.getElementById(this.iscsId),
+                draw: true,
+                config: {
+                    renderer: 'canvas',
+                    width: this.width,
+                    height: this.height
+                },
+                options: {
+                    scaleRate: 1,
+                    offsetX: 0,
+                    offsetY: 0
+                }
+            });
+
+            Vue.prototype.$iscs = this.$iscs;
+            this.$iscs.on('viewLoaded', this.onUpdate, this);
+            this.$iscs.on('contextmenu', this.onContextMenu, this);
+            this.$iscs.on('selected', this.onSelected, this);
+            this.$iscs.on('keyboard', this.onKeyboard, this);
+
+            // this.$iscs.setMap([
+            //     {
+            //         type: 'Device',
+            //         name: 'test',
+            //         isActive: false,
+            //         isFocus: false,
+            //         shapeList: [
+            //             { 	name: 'a',
+            //                 type: 'Rect',
+            //                 shape: {},
+            //                 style: {
+            //                     fill: 'red',
+            //                     stroke: 'black'
+            //                 },
+            //                 stateList: [
+            //                     { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
+            //                     { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
+            //                 ]
+            //             },
+            //             { 	name: 'b',
+            //                 type: 'Circle',
+            //                 shape: {},
+            //                 style: {
+            //                     fill: 'red',
+            //                     stroke: 'black'
+            //                 },
+            //                 stateList: [
+            //                     { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
+            //                     { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
+            //                 ]
+            //             }
+            //         ],
+            //         stateList: [
+            //             { status: 's1', frameList: [[{name: 'a', status: 'st1'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st2'}]], weight: 2, loop: true, delay: 2000, time: 200, needDefault: true },
+            //             { status: 's2', frameList: [[{name: 'a', status: 'st2'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st1'}, {name: 'b', status: 'st2'}]], weight: 1, loop: true, delay: 5000, time: 500, needDefault: false }
+            //         ]
+            //     }
+            // ], {
+            //     elementList: [
+            //         {
+            //             code: '1',
+            //             name: 'a',
+            //             type: 'Rect',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             shape: {
+            //                 x: 100,
+            //                 y: 100,
+            //                 width: 30,
+            //                 height: 30
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '100'
+            //         },
+            //         {
+            //             code: '2',
+            //             name: 'b',
+            //             type: 'Circle',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             shape: {
+            //                 cx: 100,
+            //                 cy: 100,
+            //                 r: 10
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '100'
+            //         },
+            //         {
+            //             code: '3',
+            //             name: 'a',
+            //             type: 'Rect',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: Math.PI / 4,
+            //             shape: {
+            //                 x: 200,
+            //                 y: 100,
+            //                 width: 30,
+            //                 height: 30
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '101'
+            //         },
+            //         {
+            //             code: '4',
+            //             name: 'b',
+            //             type: 'Circle',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             scale: [0.5, 0.5],
+            //             shape: {
+            //                 cx: 200,
+            //                 cy: 100,
+            //                 r: 10
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '101'
+            //         },
+            //         {
+            //             code: '5',
+            //             name: 'c',
+            //             type: 'Droplet',
+            //             scale: [0.5, 0.5],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             shape: {
+            //                 cx: 300,
+            //                 cy: 200,
+            //                 width: 30,
+            //                 height: 30
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: ''
+            //         },
+            //         {
+            //             code: '6',
+            //             name: 'd',
+            //             type: 'Droplet',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: Math.PI / 2,
+            //             shape: {
+            //                 cx: 400,
+            //                 cy: 200,
+            //                 width: 20,
+            //                 height: 20
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: ''
+            //         },
+            //         {
+            //             code: '7',
+            //             name: 'a',
+            //             type: 'Rect',
+            //             scale: [1, 1],
+            //             position: [100, 0],
+            //             rotation: Math.PI / 2,
+            //             shape: {
+            //                 x: 100,
+            //                 y: 100,
+            //                 width: 30,
+            //                 height: 60
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: ''
+            //         }
+            //     ],
+            //     composeList: [
+            //         {
+            //             code: '100',
+            //             type: 'Device',
+            //             elementCodes: ['1', '2'],
+            //             scale: [0.5, 0.5],
+            //             position: [100, 100],
+            //             rotation: Math.PI / 2,
+            //             sightless: false,
+            //             composeCode: '1000'
+            //         },
+            //         {
+            //             code: '101',
+            //             type: 'Device',
+            //             elementCodes: ['3', '4'],
+            //             scale: [1, 1],
+            //             position: [200, 0],
+            //             rotation: 0,
+            //             sightless: false,
+            //             composeCode: '1000'
+            //         },
+            //         {
+            //             code: '1000',
+            //             type: 'Device',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             elementCodes: ['100', '101'],
+            //             sightless: false,
+            //             composeCode: ''
+            //         }
+            //     ]
+            // }, {
+            //     panEnable: true,
+            //     zoomEnable: true,
+            //     keyEnable: true,
+            //     draggle: true,
+            //     selecting: true,
+            //     selectable: true,
+            //     reflect: true
+            // });
+
+            window.document.oncontextmenu = function () {
+                return false;
+            };
+        },
+        onUpdate(e) {
+            // this.$iscs.update([
+            //     { status: 's1', code: '100', type: 'Device' },
+            //     { status: 's2', code: '101', type: 'Device' }
+            // ]);
+            setTimeout(e => {
+                // this.$iscs.update([
+                // 	{ status: 's0', code: '100', type: 'Device' },
+                // 	{ status: 's0', code: '101', type: 'Device' },
+                // ])
+            }, 15000);
+        },
+        // 键盘快捷键事件
+        onKeyboard(hook) {
+            console.log(hook);
+        },
+        // 点击选择事件
+        onSelected(em) {
+            this.selected = em;
+            console.log(em, 'selected');
+        },
+        // 右键点击事件
+        onContextMenu(em) {
+            this.selected = em;
+            console.log(em, 'contextMenu');
+        },
+        resize() {
+            this.$nextTick(() => {
+                this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
+            });
+        },
+        // back() {
+        //     this.group = this.$route.query.group;
+        //     this.$store.dispatch('training/over').then(() => {
+        //         putJointTrainingSimulationUserNew(this.group).then(() => {
+        //             this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
+        //             exitFullscreen();
+        //         });
+
+        //     });
+        // },
+        destroy() {
+            if (this.$iscs) {
+                this.$iscs.destroy();
+                this.$iscs = null;
+                Vue.prototype.$iscs = null;
+            }
+        },
+        stateMessage(val) {
+            this.$iscs && this.$iscs.setDeviceStatus(val);
+        }
+        // doRemove() {
+        //     if (this.selected) {
+        //         this.$iscs.render([
+        //             {
+        //                 model: this.selected.model,
+        //                 action: { order: orders.DELETE, shapeType: shapeType.Compose }
+        //             }
+        //         ]);
+        //     }
+        // },
+        // doUnbinding() {
+        //     if (this.selected) {
+        //         this.$iscs.render([
+        //             {
+        //                 model: this.selected.model,
+        //                 action: { order: orders.UNBINDING, shapeType: shapeType.Compose }
+        //             }
+        //         ]);
+        //     }
+        // },
+        // doSource() {
+        //     console.log(this.$iscs.getSource());
+        //     this.json = JSON.stringify(this.$iscs.getSource());
+        // }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .iscs-button{
+        position: absolute;
+        float: right;
+        right: 20px;
+        bottom: 15px;
+    }
+    .iscs-canvas{
+    }
+</style>