joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-04-08 15:17:45 +08:00
parent 26ed24d339
commit 9ceeb48562
4 changed files with 347 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/iscs_new/core/form/elementConst.js
View File

@ -1,6 +1,7 @@
import * as graphic from '../../core/graphic';
import form2ShapeStyle from './form2ShapeStyle';
import form2TextStyle from './form2TextStyle';
import types from './types';
const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
@ -69,10 +70,9 @@ export const elementConst = {
name:'文字',
formList: {
style: [
...form2TextStyle
],
shape: [
]
}
},
@ -488,29 +488,29 @@ export const elementConst = {
],
value: 50,
description: '半径'
},
{
prop: 'startAngle',
label: '起始弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
},
{
prop: 'startAngle',
label: '起始弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
],
value: 0,
description: '起始弧度'
},
{
prop: 'endAngle',
label: '终止弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
},
{
prop: 'endAngle',
label: '终止弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
],
@ -595,29 +595,29 @@ export const elementConst = {
],
value: 30,
description: '内半径'
},
{
prop: 'startAngle',
label: '起始弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
},
{
prop: 'startAngle',
label: '起始弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
rules:[
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
],
value: 0,
description: '起始弧度'
},
{
prop: 'endAngle',
label: '终止弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
},
{
prop: 'endAngle',
label: '终止弧度',
type: types.Number,
precision: 0,
step:1,
min: 0,
max: 360,
rules:[
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
],

4
src/iscs_new/core/form/form2ShapeStyle.js
View File

@ -33,7 +33,7 @@ export default [
prop: 'stroke',
label: '描边样式',
type: types.Color,
value: '',
value: 'rgba(0,0,0,0)',
description: '描边样式。'
},
{
@ -63,7 +63,7 @@ export default [
prop: 'shadowColor',
label: '阴影颜色',
type: types.Color,
value: '',
value: 'rgba(0,0,0,0)',
description: '阴影颜色。'
},
{

374
src/iscs_new/core/form/form2TextStyle.js
View File

@ -8,7 +8,8 @@ export default [
rules:[
{ required: true, message:'请输入内容', trigger: 'blur' }
],
value: 'context',
value: '内容',
maxlength:1000,
description: '在图形中显示的文字。'
},
// {
@ -21,188 +22,212 @@ export default [
// value: '',
// description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。'
// },
{
prop: 'fontStyle',
label: '',
type: types.String,
rules:[
{ required: true, message:'请输入文字样式', trigger: 'blur' }
],
value: 'normal',
description: '同 CSS font-style。'
},
// {
// prop: 'fontStyle',
// label: '',
// type: types.String,
// rules:[
// { required: true, message:'请输入文字样式', trigger: 'blur' }
// ],
// value: 'normal',
// description: '同 CSS font-style。'
// },
{
prop: 'fontWeight',
label: '文字粗细',
type: types.String,
type: types.Number,
rules:[
{ required: true, message:'请输入文字粗细', trigger: 'blur' }
],
value: 'normal',
min: 300,
max: 800,
step: 100,
precisionFlag: 0,
value: 300,
description: '同 CSS font-weight。'
},
{
prop: 'fontSize',
label: '文字大小',
type: types.String,
type: types.Number,
min: 8,
max: 30,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字大小', trigger: 'blur' }
],
value: '12px',
value: 16,
description: '同 CSS font-size。'
},
{
prop: 'fontFamily',
label: '文字族',
type: types.String,
rules:[
{ required: true, message:'请输入文字族', trigger: 'blur' }
],
value: '文字样式',
description: '同 CSS font-family。'
},
// {
// prop: 'fontFamily',
// label: '文字族',
// type: types.String,
// rules:[
// { required: true, message:'请输入文字族', trigger: 'blur' }
// ],
// value: '文字样式',
// description: '同 CSS font-family。'
// },
{
prop: 'textFill',
label: '文字填充样式',
type: types.String,
type: types.Color,
rules:[
{ required: true, message:'请输入文字填充样式', trigger: 'blur' }
],
value: '',
value: '#000',
description: '文字填充样式。'
},
{
prop: 'textStroke',
label: '文字描边样式',
type: types.String,
type: types.Color,
rules:[
{ required: true, message:'请输入文字描边样式', trigger: 'blur' }
],
value: '',
value: '#fff',
description: '文字描边样式。'
},
{
prop: 'textWidth',
label: '文字宽度',
prop: 'lineWidth',
label: '线宽',
type: types.Number,
min: 0,
max: 10000,
max: 100,
step: 1,
precisionFlag: 0,
precision: 0,
rules:[
{ required: true, message:'请输入文字宽度', trigger: 'blur' }
{ required: true, message:'请输入线宽', trigger: 'blur' }
],
value: 0,
description: '文字宽度。'
},
{
prop: 'textHeight',
label: '文字高度',
type: types.Number,
min: 0,
max: 10000,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字高度', trigger: 'blur' }
],
value: 0,
description: '文字高度，仅用于设置背景色时需要设置。'
},
{
prop: 'textLineWidth',
label: '文字描边宽度',
type: types.Number,
min: 0,
max: 10000,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字描边宽度', trigger: 'blur' }
],
value: 0,
description: '文字描边宽度。'
},
{
prop: 'textLineHeight',
label: '文字行高',
type: types.Number,
min: 0,
max: 10000,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字行高', trigger: 'blur' }
],
value: 0,
description: '文字行高。'
},
{
prop: 'textPosition',
label: '文字位置',
type: types.String,
rules:[
{ required: true, message:'请输入文字位置', trigger: 'blur' }
],
value: '',
description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
},
{
prop: 'textOffset',
label: '文字行高',
type: types.Point,
min: 0,
max: 10000,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字位置偏移', trigger: 'blur' }
],
value: 0,
description: '文字位置偏移，包括 x、 y。'
value: 1,
description: '线宽'
},
// {
// prop: 'textWidth',
// label: '文字宽度',
// type: types.Number,
// min: 0,
// max: 10000,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字宽度', trigger: 'blur' }
// ],
// value: 0,
// description: '文字宽度。'
// },
// {
// prop: 'textHeight',
// label: '文字高度',
// type: types.Number,
// min: 0,
// max: 10000,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字高度', trigger: 'blur' }
// ],
// value: 0,
// description: '文字高度，仅用于设置背景色时需要设置。'
// },
// {
// prop: 'textLineWidth',
// label: '文字描边宽度',
// type: types.Number,
// min: 0,
// max: 10000,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字描边宽度', trigger: 'blur' }
// ],
// value: 0,
// description: '文字描边宽度。'
// },
// {
// prop: 'textLineHeight',
// label: '文字行高',
// type: types.Number,
// min: 0,
// max: 10000,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字行高', trigger: 'blur' }
// ],
// value: 0,
// description: '文字行高。'
// },
// {
// prop: 'textPosition',
// label: '文字位置',
// type: types.Select,
// rules:[
// { required: true, message:'请输入文字位置', trigger: 'blur' }
// ],
// value: '',
// description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
// },
// {
// prop: 'textOffset',
// label: '文字行高',
// type: types.Point,
// min: 0,
// max: 10000,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字位置偏移', trigger: 'blur' }
// ],
// value: 0,
// description: '文字位置偏移，包括 x、 y。'
// },
{
prop: 'textAlign',
label: '文字水平对齐方式',
type: types.String,
type: types.Select,
rules:[
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
],
value: '',
value: 'left',
optionList:[{value:'left', label:'左对齐'}, {value:'center', label:'居中对齐'}, {value:'right', label:'右对齐'}],
description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
},
{
prop: 'textVerticalAlign',
label: '文字垂直对齐方式',
type: types.String,
type: types.Select,
rules:[
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
],
value: '',
value: 'top',
optionList:[{value:'top', label:'顶对齐'}, {value:'middle', label:'居中对齐'}, {value:'bottom', label:'底对齐'}],
description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
},
{
prop: 'textDistance',
label: '文字与其对齐的边缘的距离',
type: types.Number,
min: 0,
max: 10000,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
],
value: 0,
description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
},
// {
// prop: 'textDistance',
// label: '文字与其对齐的边缘的距离',
// type: types.Number,
// min: 0,
// max: 10000,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
// ],
// value: 0,
// description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
// },
{
prop: 'textShadowColor',
label: '文字阴影颜色',
type: types.String,
type: types.Color,
rules:[
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
],
value: '',
value: 'rgba(0,0,0,0)',
description: '文字阴影颜色。'
},
{
@ -224,7 +249,7 @@ export default [
label: '文字阴影水平偏移',
type: types.Number,
min: 0,
max: 10000,
max: 1000,
step: 1,
precisionFlag: 0,
rules:[
@ -238,7 +263,7 @@ export default [
label: '文字阴影垂直偏移',
type: types.Number,
min: 0,
max: 10000,
max: 1000,
step: 1,
precisionFlag: 0,
rules:[
@ -250,11 +275,11 @@ export default [
{
prop: 'textBoxShadowColor',
label: '文字包围盒阴影颜色',
type: types.String,
type: types.Color,
rules:[
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
],
value: 'transparent',
value: 'rgba(0,0,0,0)',
description: '文字包围盒阴影颜色。'
},
{
@ -262,7 +287,7 @@ export default [
label: '文字包围盒阴影模糊大小',
type: types.Number,
min: 0,
max: 10000,
max: 1000,
step: 1,
precisionFlag: 0,
rules:[
@ -276,7 +301,7 @@ export default [
label: '文字包围盒阴影水平偏移',
type: types.Number,
min: 0,
max: 10000,
max: 1000,
step: 1,
precisionFlag: 0,
rules:[
@ -290,7 +315,7 @@ export default [
label: '文字包围盒阴影垂直偏移',
type: types.Number,
min: 0,
max: 10000,
max: 1000,
step: 1,
precisionFlag: 0,
rules:[
@ -299,62 +324,62 @@ export default [
value: 0,
description: '文字包围盒阴影垂直偏移。'
},
{
prop: 'transformText',
label: '文字是否跟随变换效果',
type: types.Boolean,
rules:[
{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
],
value: false,
description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
},
{
prop: 'textRotation',
label: '文字旋转角度',
type: types.Number,
min: 0,
max: 360,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字旋转角度', trigger: 'blur' }
],
value: 0,
description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
},
{
prop: 'textOrigin',
label: '文字变换中心',
type: types.Point,
min: 0,
max: 10000,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字变换中心', trigger: 'blur' }
],
value: 0,
description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
},
// {
// prop: 'transformText',
// label: '文字是否跟随变换效果',
// type: types.Boolean,
// rules:[
// { required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
// ],
// value: false,
// description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
// },
// {
// prop: 'textRotation',
// label: '文字旋转角度',
// type: types.Number,
// min: 0,
// max: 360,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字旋转角度', trigger: 'blur' }
// ],
// value: 0,
// description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
// },
// {
// prop: 'textOrigin',
// label: '文字变换中心',
// type: types.Point,
// min: 0,
// max: 10000,
// step: 1,
// precisionFlag: 0,
// rules:[
// { required: true, message:'请输入文字变换中心', trigger: 'blur' }
// ],
// value: 0,
// description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
// },
{
prop: 'textBackgroundColor',
label: '文字包围盒颜色',
type: types.String,
type: types.Color,
rules:[
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
],
value: '',
value: 'rgba(0,0,0,0)',
description: '文字包围盒颜色。'
},
{
prop: 'textBorderColor',
label: '文字包围盒描边颜色',
type: types.String,
type: types.Color,
rules:[
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
],
value: '',
value: 'rgba(0,0,0,0)',
description: '文字包围盒描边颜色。'
},
{
@ -388,15 +413,16 @@ export default [
{
prop: 'textPadding',
label: '文字内边距',
type: types.Point,
type: types.NumberArray,
length:4,
min: 0,
max: 10000,
max: 1000,
step: 1,
precisionFlag: 0,
rules:[
{ required: true, message:'请输入文字内边距', trigger: 'blur' }
],
value: 0,
value: [0, 0, 0, 0],
description: '文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。'
}
];

189
src/views/iscs_new/components/dataForm.vue
View File

@ -1,86 +1,111 @@
<template>
<el-form ref="form" :model="formModel" class="composeForm" label-width="110px">
<div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
<div class="styleGroupName">
{{ styleGroup.name }}
<template v-for="(styleGroup,index) in form.formGroup">
<div v-if="styleGroup.styleList.length>0" :key="index" class="styleGroup">
<div class="styleGroupName">
{{ styleGroup.name }}
</div>
<template v-for="item in styleGroup.styleList">
<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.precision!=undefined"
v-model="formModel[styleGroup.code][item.prop]"
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"
/>
<el-input-number
v-else
v-model="formModel[styleGroup.code][item.prop]"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
:step="isNaN(item.step) ? -Infinity : item.step"
/>
</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'"
/>
</template>
<template v-else-if="checkFieldType(item, 'Color')">
<el-color-picker
v-model="formModel[styleGroup.code][item.prop]"
show-alpha
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]"
style="margin-left:5px"
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, 'Points')">
<div class="point-section">
<template v-for="(point, j) in formModel[styleGroup.code][item.prop]">
<div :key="j" style="overflow: hidden;">
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.code],item.prop)" />
<span class="pointSplice">, </span>
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.code],item.prop)" />
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPoint(j,formModel[styleGroup.code],item.prop)"
/>
<el-button
icon="el-icon-minus"
:disabled="j <3"
circle
class="point-button"
style="margin-left: 4px;"
@click="delPoint(j,formModel[styleGroup.code],item.prop)"
/>
</div>
</template>
</div>
</template>
<template v-else-if="checkFieldType(item, 'Select')">
<el-select
:ref="'select_'+item.prop"
v-model="formModel[styleGroup.code][item.prop]"
size="small"
>
<el-option
v-for="option in item.optionList"
:key="option['value']"
:label="option['label']"
:value="option['value']"
/>
</el-select>
</template>
<template v-else-if="checkFieldType(item, 'String')">
<el-input
v-model="formModel[styleGroup.code][item.prop]"
size="small"
type="text"
:maxlength="item.maxlength"
/>
</template>
</el-form-item>
</template>
</div>
<template v-for="item in styleGroup.styleList">
<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.precision!=undefined"
v-model="formModel[styleGroup.code][item.prop]"
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"
/>
<el-input-number
v-else
v-model="formModel[styleGroup.code][item.prop]"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
:step="isNaN(item.step) ? -Infinity : item.step"
/>
</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'"
/>
</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]"
style="margin-left:5px"
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, 'Points')">
<div class="point-section">
<template v-for="(point, j) in formModel[styleGroup.code][item.prop]">
<div :key="j" style="overflow: hidden;">
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.code],item.prop)" />
<span class="pointSplice">, </span>
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.code],item.prop)" />
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPoint(j,formModel[styleGroup.code],item.prop)"
/>
<el-button
icon="el-icon-minus"
:disabled="j <3"
circle
class="point-button"
style="margin-left: 4px;"
@click="delPoint(j,formModel[styleGroup.code],item.prop)"
/>
</div>
</template>
</div>
</template>
</el-form-item>
</template>
</div>
</template>
</el-form>
</template>
<script>
@ -111,8 +136,8 @@ export default {
checkFieldType(field, type) {
return field.type === type;
},
init() {
},
init() {
},
changeNumber(type, index, form, prop) {
if (form[prop][index][type] == undefined || parseFloat(form[prop][index][type])) {
const newForm = Object.assign([], form[prop]);