From 8e13a2190b88fb8179b949bd9a4daabc3e540ef6 Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Wed, 7 Apr 2021 13:54:55 +0800
Subject: [PATCH] =?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   |  29 ++-
 src/iscs_new/core/form/elementConst.js     | 290 +++++++++++----------
 src/iscs_new/core/form/form2Base.js        |  48 ++--
 src/iscs_new/core/form/form2ShapeStyle.js  | 232 ++++++++---------
 src/views/iscs_new/components/dataForm.vue |  15 +-
 src/views/iscs_new/iscsDraw/index.vue      | 113 ++++----
 6 files changed, 382 insertions(+), 345 deletions(-)

diff --git a/src/iscs_new/core/form/builderFactory.js b/src/iscs_new/core/form/builderFactory.js
index 22d525f52..da48db832 100644
--- a/src/iscs_new/core/form/builderFactory.js
+++ b/src/iscs_new/core/form/builderFactory.js
@@ -5,7 +5,7 @@ class BuilderFactory {
         this.formList = [];
     }
     getFormList() {
-        const elementList = elementConst.elementsList;
+        const elementList = Object.values(elementConst);
         elementList.forEach(element=>{
             const temp = Object.assign({}, element);
 
@@ -14,13 +14,32 @@ class BuilderFactory {
             temp.rules = {};
 
             // 添加通用配置
-            temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
+            temp.model['base'] = {};
+            temp.rules['base'] = {};
             form2Base.forEach(each=>{
-                temp.model[each.prop] = each.defValue;
-                temp.rules[each.prop] = each.rules;
+                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;
+                }
+            });
+            temp.formGroup.push({name:'样式配置', code:'style', styleList:styleList});
+            // shape
+            // element
 
-            // 添加绘图配置  shape
             // temp.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
             // temp.rules
             // let ClassName=element.code;
diff --git a/src/iscs_new/core/form/elementConst.js b/src/iscs_new/core/form/elementConst.js
index e085478ad..d426fa2d8 100644
--- a/src/iscs_new/core/form/elementConst.js
+++ b/src/iscs_new/core/form/elementConst.js
@@ -1,163 +1,167 @@
 
 import * as graphic from '../../core/graphic';
-
+import form2ShapeStyle from './form2ShapeStyle';
 const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
 
 export const elementConst = {
-	[graphicType.Line]: {
-		code: graphicType.Line,
-		name:'线段',
-		formList: {
-			style: [
+    [graphicType.Line]: {
+        code: graphicType.Line,
+        name:'线段',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
+                // opts.shape.x1	number	0	起始点横坐标。
+                // opts.shape.y1	number	0	起始点纵坐标。
+                // opts.shape.x2	number	0	终止点横坐标。
+                // opts.shape.y2	number	0	终止点纵坐标。
+                // opts.shape.percent	number	1	已显示的百分比，用于绘制动画。
+            ]
+        }
+    },
+    [graphicType.Text]: {
+        code: graphicType.Text,
+        name:'文字',
+        formList: {
+            style: [
 
-			],
-			shape: [
+            ],
+            shape: [
 
-			]
-		}
-	},
-	[graphicType.Text]: {
-		code: graphicType.Text,
-		name:'文字',
-		formList: {
-			style: [
+            ]
+        }
+    },
+    [graphicType.Rect]: {
+        code: graphicType.Rect,
+        name:'矩形',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			],
-			shape: [
+            ]
+        }
+    },
+    [graphicType.Circle]: {
+        code: graphicType.Circle,
+        name:'圆形',
+        formList:{
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			]
-		}
-	},
-	[graphicType.Rect]: {
-		code: graphicType.Rect,
-		name:'矩形',
-		formList: {
-			style: [
+            ]
+        }
+    },
+    [graphicType.Polygon]: {
+        code: graphicType.Polygon,
+        name:'多边形',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			],
-			shape: [
+            ]
+        }
+    },
+    [graphicType.Arrow]: {
+        code: graphicType.Arrow,
+        name:'箭头',
+        formList: {
+            style: [
 
-			]
-		}
-	},
-	[graphicType.Circle]: {
-		code: graphicType.Circle,
-		name:'圆形',
-		formList:{
-			style: [
+            ],
+            shape: [
 
-			],
-			shape: [
+            ]
+        }
+    },
+    [graphicType.Polyline]: {
+        code: graphicType.Polyline,
+        name:'多边形折线段',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			]
-		}
-	},
-	[graphicType.Polygon]: {
-		code: graphicType.Polygon,
-		name:'多边形',
-		formList: {
-			style: [
+            ]
+        }
+    },
+    [graphicType.Isogon]: {
+        code: graphicType.Isogon,
+        name:'正多边形',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape:[
 
-			],
-			shape: [
+            ]
+        }
+    },
+    [graphicType.Ellipse]: {
+        code: graphicType.Ellipse,
+        name:'椭圆',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape:[
 
-			]
-		}
-	},
-	[graphicType.Arrow]: {
-		code: graphicType.Arrow,
-		name:'箭头',
-		formList: {
-			style: [
+            ]
+        }
+    },
+    [graphicType.Arc]: {
+        code: graphicType.Arc,
+        name:'圆弧',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			],
-			shape: [
+            ]
+        }
+    },
+    [graphicType.Sector]: {
+        code: graphicType.Sector,
+        name:'扇形',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			]
-		}
-	},
-	[graphicType.Polyline]: {
-		code: graphicType.Polyline,
-		name:'多边形折线段',
-		formList: {
-			style: [
+            ]
+        }
+    },
+    [graphicType.Heart]: {
+        code: graphicType.Heart,
+        name:'心形',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			],
-			shape: [
+            ]
+        }
+    },
+    [graphicType.Droplet]: {
+        code: graphicType.Droplet,
+        name:'水滴',
+        formList: {
+            style: [
+                ...form2ShapeStyle
+            ],
+            shape: [
 
-			]
-		}
-	},
-	[graphicType.Isogon]: {
-		code: graphicType.Isogon,
-		name:'正多边形',
-		formList: {
-			style: [
-
-			],
-			shape:[
-
-			]
-		}
-	},
-	[graphicType.Ellipse]: {
-		code: graphicType.Ellipse,
-		name:'椭圆',
-		formList: {
-			style: [
-
-			],
-			shape:[
-
-			]
-		}
-	},
-	[graphicType.Arc]: {
-		code: graphicType.Arc,
-		name:'圆弧',
-		formList: {
-			style: [
-
-			],
-			shape: [
-
-			]
-		}
-	},
-	[graphicType.Sector]: {
-		code: graphicType.Sector,
-		name:'扇形',
-		formList: {
-			style: [
-
-			],
-			shape: [
-
-			]
-		}
-	},
-	[graphicType.Heart]: {
-		code: graphicType.Heart,
-		name:'心形',
-		formList: {
-			style: [
-
-			],
-			shape: [
-
-			]
-		}
-	},
-	[graphicType.Droplet]: {
-		code: graphicType.Droplet,
-		name:'水滴',
-		formList: {
-			style: [
-
-			],
-			shape: [
-
-			]
-		}
-	}
+            ]
+        }
+    }
 };
diff --git a/src/iscs_new/core/form/form2Base.js b/src/iscs_new/core/form/form2Base.js
index b408873e4..061551b52 100644
--- a/src/iscs_new/core/form/form2Base.js
+++ b/src/iscs_new/core/form/form2Base.js
@@ -2,40 +2,40 @@ import types from './types';
 
 export default [
     { 	prop: 'z1',
-		label: '层级z1',
+        label: '层级z1',
         type: types.Number,
-		precisionFlag: 0,
-		min:0,
-		max:20,
-		step:1,
+        precisionFlag: 0,
+        min:0,
+        max:20,
+        step:1,
         rules:[
-			{ required: true, message:'请输入层级z', trigger: 'blur' }
-		],
+            { required: true, message:'请输入层级z', trigger: 'blur' }
+        ],
         value: 10,
-		description: '控制图形的前后顺序。'
+        description: '控制图形的前后顺序。'
     },
     {
-		prop: 'z2',
-		label: '层级z2',
+        prop: 'z2',
+        label: '层级z2',
         type: types.Number,
-		precisionFlag: 0,
-		min: 0,
-		max: 100,
-		step: 1,
+        precisionFlag: 0,
+        min: 0,
+        max: 100,
+        step: 1,
         rules:[
-			{ required: true, message:'请输入层级z2', trigger: 'blur' }
-		],
+            { required: true, message:'请输入层级z2', trigger: 'blur' }
+        ],
         value: 50,
-		description: '控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低。'
+        description: '控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低。'
     },
-	{
-		prop: 'sightless',
-		label: '图形是否不可见',
+    {
+        prop: 'sightless',
+        label: '图形是否不可见',
         type: types.Boolean,
         rules:[
-			{ required: true, message:'请选择图形是否不可见', trigger: 'blur' }
-		],
+            { required: true, message:'请选择图形是否不可见', trigger: 'blur' }
+        ],
         value: false,
-		description: '图形是否不可见，选中时不绘制图形。'
-	}
+        description: '图形是否不可见，选中时不绘制图形。'
+    }
 ];
diff --git a/src/iscs_new/core/form/form2ShapeStyle.js b/src/iscs_new/core/form/form2ShapeStyle.js
index 65b0c1870..af406edcf 100644
--- a/src/iscs_new/core/form/form2ShapeStyle.js
+++ b/src/iscs_new/core/form/form2ShapeStyle.js
@@ -1,152 +1,152 @@
 import types from './types';
 
 export default [
-	{
-		prop: 'fill',
-		label: '填充样式',
-        type: types.String,
+    {
+        prop: 'fill',
+        label: '填充样式',
+        type: types.Color,
         rules:[
-			{ required: true, message:'请输入填充样式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入填充样式', trigger: 'blur' }
+        ],
         value: '',
-		description: '填充样式。'
-	},
-	{
-		prop: 'stroke',
-		label: '描边样式',
-        type: types.String,
+        description: '填充样式。'
+    },
+    {
+        prop: 'stroke',
+        label: '描边样式',
+        type: types.Color,
         rules:[
-			{ required: true, message:'请输入描边样式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入描边样式', trigger: 'blur' }
+        ],
         value: '',
-		description: '描边样式。'
-	},
-	{
-		prop: 'opacity',
-		label: '描边样式',
+        description: '描边样式。'
+    },
+    {
+        prop: 'opacity',
+        label: '不透明度',
         type: types.Number,
-		min: 0,
-		max: 1,
-		step: 0.05,
-		precisionFlag: 2,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        precisionFlag: 2,
         rules:[
-			{ required: true, message:'请输入不透明度', trigger: 'blur' }
-		],
+            { required: true, message:'请输入不透明度', trigger: 'blur' }
+        ],
         value: 1,
-		description: '不透明度。'
-	},
-	{
-		prop: 'lineDash',
-		label: '描边样式',
+        description: '不透明度。'
+    },
+    {
+        prop: 'lineDash',
+        label: '描边虚线',
         type: types.NumberArray,
-		min: 0,
-		max: 100,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入描边虚线样式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
+        ],
         value: 1,
-		description: '描边虚线样式，参考 SVG stroke-dasharray。'
-	},
-	{
-		prop: 'lineDashOffset',
-		label: '描边虚线偏移',
+        description: '描边虚线样式，参考 SVG stroke-dasharray。'
+    },
+    {
+        prop: 'lineDashOffset',
+        label: '描边虚线偏移',
         type: types.Point,
-		min: 0,
-		max: 100,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
-		],
-        value: [0,0],
-		description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
-	},
-	{
-		prop: 'shadowBlur',
-		label: '阴影模糊大小',
+            { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
+        ],
+        value: [0, 0],
+        description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
+    },
+    {
+        prop: 'shadowBlur',
+        label: '阴影模糊大小',
         type: types.Number,
-		min: 0,
-		max: 100,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
-		],
+            { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
+        ],
         value: 0,
-		description: '阴影模糊大小。'
-	},
-	{
-		prop: 'shadowColor',
-		label: '阴影颜色',
+        description: '阴影模糊大小。'
+    },
+    {
+        prop: 'shadowColor',
+        label: '阴影颜色',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入阴影颜色', trigger: 'blur' }
-		],
+            { required: true, message:'请输入阴影颜色', trigger: 'blur' }
+        ],
         value: '',
-		description: '阴影颜色。'
-	},
-	{
-		prop: 'shadowOffsetX',
-		label: '阴影横向偏移',
+        description: '阴影颜色。'
+    },
+    {
+        prop: 'shadowOffsetX',
+        label: '阴影横向偏移',
         type: types.Number,
-		min: 0,
-		max: 100,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
-		],
+            { required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
+        ],
         value: 0,
-		description: '阴影横向偏移。'
-	},
-	{
-		prop: 'shadowOffsetY',
-		label: '阴影纵向偏移',
+        description: '阴影横向偏移。'
+    },
+    {
+        prop: 'shadowOffsetY',
+        label: '阴影纵向偏移',
         type: types.Number,
-		min: 0,
-		max: 100,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
-		],
+            { required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
+        ],
         value: 0,
-		description: '阴影纵向偏移。'
-	},
-	{
-		prop: 'lineWidth',
-		label: '线宽',
+        description: '阴影纵向偏移。'
+    },
+    {
+        prop: 'lineWidth',
+        label: '线宽',
         type: types.Number,
-		min: 0,
-		max: 100,
-		step: 1,
-		precisionFlag: 0,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入线宽', trigger: 'blur' }
-		],
+            { required: true, message:'请输入线宽', trigger: 'blur' }
+        ],
         value: 0,
-		description: '线宽。'
-	},
-	{
-		prop: 'strokeNoScale',
-		label: '描边粗细不随缩放而改变',
+        description: '线宽。'
+    },
+    {
+        prop: 'strokeNoScale',
+        label: '描边粗细不随缩放而改变',
         type: types.Boolean,
         rules:[
-			{ required: true, message:'请选择描边粗细不随缩放而改变', trigger: 'blur' }
-		],
+            { required: true, message:'请选择描边粗细不随缩放而改变', trigger: 'blur' }
+        ],
         value: false,
-		description: '描边粗细不随缩放而改变，不选中时则会根据缩放同比例缩放描边粗细。'
-	},
-	{
-		prop: 'blend',
-		label: '混合模式',
+        description: '描边粗细不随缩放而改变，不选中时则会根据缩放同比例缩放描边粗细。'
+    },
+    {
+        prop: 'blend',
+        label: '混合模式',
         type: types.String,
         rules:[
-			{ required: true, message:'请输入混合模式', trigger: 'blur' }
-		],
+            { required: true, message:'请输入混合模式', trigger: 'blur' }
+        ],
         value: '',
-		description: '混合模式，同 Canvas globalCompositeOperation。'
-	}
-]
+        description: '混合模式，同 Canvas globalCompositeOperation。'
+    }
+];
diff --git a/src/views/iscs_new/components/dataForm.vue b/src/views/iscs_new/components/dataForm.vue
index 5f0323576..c9e22d8f3 100644
--- a/src/views/iscs_new/components/dataForm.vue
+++ b/src/views/iscs_new/components/dataForm.vue
@@ -5,8 +5,9 @@
         {{ styleGroup.name }}
       </div>
       <template v-for="item in styleGroup.styleList">
-        <template v-if="checkFieldType(item, 'number')">
-          <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
+        <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
+          <!-- {{ tempModel=styleGroup.code?formModel[styleGroup.code]:formModel }} -->
+          <template v-if="checkFieldType(item, 'Number')">
             <el-input-number
               v-if="item.precisionFlag"
               v-model="formModel[styleGroup.code][item.prop]"
@@ -24,17 +25,15 @@
               :max="isNaN(item.max)? Infinity : item.max"
               :step="isNaN(item.step) ? -Infinity : item.step"
             />
-          </el-form-item>
-        </template>
-        <template v-else-if="checkFieldType(item, 'switch')">
-          <el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
+          </template>
+          <template v-else-if="checkFieldType(item, 'Boolean')">
             <el-switch
               v-model="formModel[styleGroup.code][item.prop]"
               :active-color="item.activeColor || '#409eff'"
               :inactive-color="item.inactiveColor || '#dcdfe6'"
             />
-          </el-form-item>
-        </template>
+          </template>
+        </el-form-item>
       </template>
     </div>
   </el-form>
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
index 554778bfb..7061e4950 100644
--- a/src/views/iscs_new/iscsDraw/index.vue
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -14,10 +14,7 @@
               @click="handleSave"
             >保存</el-button>
           </div>
-          <!-- <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
-            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code">{{ element.name }}</el-tab-pane>
-          </el-tabs> -->
-          <el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
+          <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>
@@ -36,7 +33,7 @@ import IscsPlate from '@/views/iscsSystem/index';
 // import {allElements} from '@/iscs_new/core/form/allElments';
 import BuilderFactory from '@/iscs_new/core/form/builderFactory';
 import DataForm from '../components/dataForm';
-import { saveIscsElement } from '@/api/iscs';
+// import { saveIscsElement } from '@/api/iscs';
 
 export default {
     name: 'IscsView',
@@ -113,59 +110,77 @@ export default {
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
     @import "src/styles/mixin.scss";
+    .card{
+        height: 100%;
+        display:flex;width: 100%;flex-direction: column
+    }
+
+    .card .el-tab-pane{
+      flex:1;
+      height: 100%;
+      overflow: auto;
+    }
 
     .map-view {
         float: left;
         width: 100%;
     }
+    .heightClass{height:100%;overflow:hidden;display:flex;width: 100%;flex-direction: column;}
 
-	.mapPaint{
+    .mapPaint{
         height: 100%;
         overflow: hidden;
     }
 
-	.right-card{
-		width: 470px;
-		height: 100%;
-		position: absolute;
-		right: 0;
-		transform: translateX(470px);
-		transition: all 0.5s;
-		background: #fff;
-		z-index: 9;
-		/deep/{
-			.v-modal{
-				opacity: 0;
-			}
-		}
-		&.hide{
-			transform: translateX(0);
-		}
-
-		.btn_draft_box{
-			position: absolute;
-			left: 0;
-			top: 50%;
-			padding: 8px 3px;
-			background: #fff;
-			z-index: 10;
-			transform: translateX(-22px);
-			cursor: pointer;
-			border-radius: 5px 0 0 5px;
-            box-shadow: -2px 0px 2px #000000;
-		}
-
-		.btn_table_box {
-			position: absolute;
-			left: 0;
-			top: calc(50% +  50px);
-			padding: 8px 3px;
-			background: #fff;
-			z-index: 10;
-			transform: translateX(-22px);
-			cursor: pointer;
-			border-radius: 5px 0 0 5px;
-            box-shadow: -2px 0px 2px #000000;
-		}
+    .right-card{
+      width: 470px;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      transform: translateX(470px);
+      transition: all 0.5s;
+      background: #fff;
+      z-index: 9;
+      /deep/{
+        .v-modal{
+          opacity: 0;
+        }
+      }
+      &.hide{
+        transform: translateX(0);
     }
+
+    .btn_draft_box{
+      position: absolute;
+      left: 0;
+      top: 50%;
+      padding: 8px 3px;
+      background: #fff;
+      z-index: 10;
+      transform: translateX(-22px);
+      cursor: pointer;
+      border-radius: 5px 0 0 5px;
+            box-shadow: -2px 0px 2px #000000;
+    }
+
+    .btn_table_box {
+      position: absolute;
+      left: 0;
+      top: calc(50% +  50px);
+      padding: 8px 3px;
+      background: #fff;
+      z-index: 10;
+      transform: translateX(-22px);
+      cursor: pointer;
+      border-radius: 5px 0 0 5px;
+            box-shadow: -2px 0px 2px #000000;
+    }
+  }
+</style>
+<style lang="scss">
+  .heightClass .el-card__body{
+    flex:1;
+    height: 100%;
+    overflow: hidden;
+  }
 </style>