Merge branch 'iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into iscs

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,33 @@ 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;

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: [
-
-			]
-		}
-	}
+            ]
+        }
+    }
 };

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: '图形是否不可见，选中时不绘制图形。'
+    }
 ];

src/iscs_new/core/form/form2ShapeStyle.js

@@ -1,152 +1,153 @@
 import types from './types';
 
 export default [
-	{
-		prop: 'fill',
-		label: '填充样式',
-        type: types.String,
-        rules:[
-			{ required: true, message:'请输入填充样式', trigger: 'blur' }
-		],
-        value: '',
-		description: '填充样式。'
-	},
-	{
-		prop: 'stroke',
-		label: '描边样式',
-        type: types.String,
-        rules:[
-			{ required: true, message:'请输入描边样式', trigger: 'blur' }
-		],
-        value: '',
-		description: '描边样式。'
-	},
-	{
-		prop: 'opacity',
-		label: '描边样式',
+    {
+        prop: 'lineWidth',
+        label: '线宽',
         type: types.Number,
-		min: 0,
-		max: 1,
-		step: 0.05,
-		precisionFlag: 2,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入不透明度', trigger: 'blur' }
-		],
+            { required: true, message:'请输入线宽', trigger: 'blur' }
+        ],
+        value: 0,
+        description: '线宽'
+    },
+    {
+        prop: 'fill',
+        label: '填充样式',
+        type: types.Color,
+        rules:[
+            { required: true, message:'请输入填充样式', trigger: 'blur' }
+        ],
+        value: '',
+        description: '填充样式。'
+    },
+    {
+        prop: 'opacity',
+        label: '不透明度',
+        type: types.Number,
+        min: 0,
+        max: 1,
+        step: 0.05,
+        precisionFlag: 2,
+        rules:[
+            { required: true, message:'请输入不透明度', trigger: 'blur' }
+        ],
         value: 1,
-		description: '不透明度。'
-	},
-	{
-		prop: 'lineDash',
-		label: '描边样式',
+        description: '不透明度。'
+    },
+    {
+        prop: 'stroke',
+        label: '描边样式',
+        type: types.Color,
+        rules:[
+            { required: true, message:'请输入描边样式', trigger: 'blur' }
+        ],
+        value: '',
+        description: '描边样式。'
+    },
+    {
+        prop: 'lineDash',
+        label: '描边虚线',
         type: types.NumberArray,
-		min: 0,
-		max: 100,
-		step: 1,
-		precisionFlag: 0,
+        length:2,
+        min: 0,
+        max: 100,
+        step: 1,
+        precisionFlag: 0,
         rules:[
-			{ required: true, message:'请输入描边虚线样式', trigger: 'blur' }
-		],
-        value: 1,
-		description: '描边虚线样式，参考 SVG stroke-dasharray。'
-	},
-	{
-		prop: 'lineDashOffset',
-		label: '描边虚线偏移',
-        type: types.Point,
-		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-dasharray。'
+    },
+    {
+        prop: 'lineDashOffset',
+        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' }
-		],
-        value: 0,
-		description: '阴影模糊大小。'
-	},
-	{
-		prop: 'shadowColor',
-		label: '阴影颜色',
-        type: types.String,
+            { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
+        ],
+        value: [0, 0],
+        description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
+    },
+    {
+        prop: 'shadowColor',
+        label: '阴影颜色',
+        type: types.Color,
         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: '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: '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: '混合模式',
-        type: types.String,
-        rules:[
-			{ required: true, message:'请输入混合模式', trigger: 'blur' }
-		],
-        value: '',
-		description: '混合模式，同 Canvas globalCompositeOperation。'
-	}
-]
+        description: '描边粗细不随缩放而改变，不选中时则会根据缩放同比例缩放描边粗细。'
+    }
+    // {
+    //     prop: 'blend',
+    //     label: '混合模式',
+    //     type: types.String,
+    //     rules:[
+    //         { required: true, message:'请输入混合模式', trigger: 'blur' }
+    //     ],
+    //     value: '',
+    //     description: '混合模式，同 Canvas globalCompositeOperation。'
+    // }
+];

src/views/iscs_new/components/dataForm.vue

@@ -5,12 +5,13 @@
         {{ 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]"
-              size="mini"
+              size="small"
               :min="isNaN(item.min) ? -Infinity : item.min"
               :max="isNaN(item.max)? Infinity : item.max"
               :step="isNaN(item.step) ? -Infinity : item.step"
@@ -19,22 +20,45 @@
             <el-input-number
               v-else
               v-model="formModel[styleGroup.code][item.prop]"
-              size="mini"
+              size="small"
               :min="isNaN(item.min) ? -Infinity : item.min"
               :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]"
+              size="small"
               :active-color="item.activeColor || '#409eff'"
               :inactive-color="item.inactiveColor || '#dcdfe6'"
             />
-          </el-form-item>
-        </template>
+          </template>
+          <template v-else-if="checkFieldType(item, 'Color')">
+            <el-color-picker
+              v-model="formModel[styleGroup.code][item.prop]"
+              size="small"
+            />
+          </template>
+          <template v-else-if="checkFieldType(item, 'NumberArray')">
+            <el-input-number
+              v-for="count in item.length"
+              :key="count"
+              v-model="formModel[styleGroup.code][item.prop][count-1]"
+              size="small"
+              :min="isNaN(item.min) ? -Infinity : item.min"
+              :max="isNaN(item.max)? Infinity : item.max"
+              :step="isNaN(item.step) ? -Infinity : item.step"
+              :precision="item.precision"
+            />
+          </template>
+          <!-- <template v-else-if="checkFieldType(item, 'Color')">
+            <el-color-picker
+              v-model="formModel[styleGroup.code][item.prop]"
+              size="small"
+            />
+          </template> -->
+        </el-form-item>
       </template>
     </div>
   </el-form>

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>