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

iscs 代码调整

Browse Source
This commit is contained in:
joylink_cuiweidong 2021-04-09 11:27:47 +08:00
parent 001a963b04
commit 760c683e3e
6 changed files with 82 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/iscs_new/core/form/builderFactory.js
View File

@ -12,6 +12,7 @@ class BuilderFactory {
temp.name = element.name;
temp.formGroup = [];
temp.model = {};
temp.model['name'] = '<名称>';
// 添加通用配置
temp.model['base'] = {};
form2Base.forEach(each=>{

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

@ -24,7 +24,7 @@ export const elementConst = {
{ required: true, message:'请输入起始点横坐标', trigger: 'blur' }
],
value: 0,
description: '起始点横坐标'
description: ''
},
{
prop: 'y1',
@ -36,7 +36,7 @@ export const elementConst = {
{ required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
],
value: 100,
description: '起始点纵坐标'
description: ''
},
{
prop: 'x2',
@ -48,7 +48,7 @@ export const elementConst = {
{ required: true, message:'请输入终止点横坐标', trigger: 'blur' }
],
value: 100,
description: '终止点横坐标'
description: ''
},
{
prop: 'y2',
@ -60,7 +60,7 @@ export const elementConst = {
{ required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
],
value: 0,
description: '终止点纵坐标'}
description: ''}
// opts.shape.percent number 1 已显示的百分比，用于绘制动画。
]
}
@ -104,7 +104,7 @@ export const elementConst = {
{ required: true, message:'请输入左上角横坐标', trigger: 'blur' }
],
value: 0,
description: '左上角横坐标'
description: ''
},
{
prop: 'y',
@ -116,7 +116,7 @@ export const elementConst = {
{ required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
],
value: 0,
description: '左上角纵坐标'
description: ''
},
{
prop: 'width',
@ -128,7 +128,7 @@ export const elementConst = {
{ required: true, message:'请输入宽度', trigger: 'blur' }
],
value: 50,
description: '宽度'
description: ''
},
{
prop: 'height',
@ -140,7 +140,7 @@ export const elementConst = {
{ required: true, message:'请输入高度', trigger: 'blur' }
],
value: 50,
description: '高度'
description: ''
},
{
prop: 'r',
@ -288,7 +288,7 @@ export const elementConst = {
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
],
value: [[0, 0], [100, 100], [100, 200]],
description: '每个元素是一个横纵坐标的数组'
description: ''
},
{
prop: 'smooth',

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

@ -13,7 +13,7 @@ export default [
{ required: true, message:'请输入线宽', trigger: 'blur' }
],
value: 1,
description: '线宽'
description: ''
},
{
prop: 'opacity',
@ -27,14 +27,14 @@ export default [
{ required: true, message:'请输入不透明度', trigger: 'blur' }
],
value: 1,
description: '不透明度。'
description: ''
},
{
prop: 'stroke',
label: '描边样式',
type: types.Color,
value: '#000',
description: '描边样式。'
description: ''
},
{
prop: 'lineDash',
@ -64,7 +64,7 @@ export default [
label: '阴影颜色',
type: types.Color,
value: 'rgba(0,0,0,0)',
description: '阴影颜色。'
description: ''
},
{
prop: 'shadowOffsetX',
@ -75,7 +75,7 @@ export default [
step: 1,
precision: 0,
value: 0,
description: '阴影横向偏移。'
description: ''
},
{
prop: 'shadowOffsetY',
@ -86,7 +86,7 @@ export default [
step: 1,
precision: 0,
value: 0,
description: '阴影纵向偏移。'
description: ''
},
{
prop: 'shadowBlur',
@ -97,14 +97,15 @@ export default [
step: 1,
precision: 0,
value: 0,
description: '阴影模糊大小。'
description: ''
},
{
prop: 'strokeNoScale',
label: '描边不缩放',
type: types.Boolean,
value: false,
description: '描边粗细不随缩放而改变，不选中时则会根据缩放同比例缩放描边粗细。'
description: '不选中时则会根据缩放同比例缩放描边粗细。'
// 描边粗细不随缩放而改变，
}
// {
// prop: 'blend',

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

@ -10,7 +10,7 @@ export default [
],
value: '内容',
maxlength:1000,
description: '在图形中显示的文字。'
description: ''
},
// {
// prop: 'font',
@ -34,7 +34,7 @@ export default [
// },
{
prop: 'fontWeight',
label: '文字粗细',
label: '粗细',
type: types.Number,
rules:[
{ required: true, message:'请输入文字粗细', trigger: 'blur' }
@ -44,11 +44,11 @@ export default [
step: 100,
precisionFlag: 0,
value: 300,
description: '同 CSS font-weight。'
description: ''
},
{
prop: 'fontSize',
label: '文字大小',
label: '大小',
type: types.Number,
min: 8,
max: 30,
@ -58,7 +58,7 @@ export default [
{ required: true, message:'请输入文字大小', trigger: 'blur' }
],
value: 16,
description: '同 CSS font-size。'
description: ''
},
// {
// prop: 'fontFamily',
@ -72,27 +72,27 @@ export default [
// },
{
prop: 'textFill',
label: '文字填充样式',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入文字填充样式', trigger: 'blur' }
],
value: '#000',
description: '文字填充样式。'
description: ''
},
{
prop: 'textStroke',
label: '文字描边样式',
label: '描边样式',
type: types.Color,
rules:[
{ required: true, message:'请输入文字描边样式', trigger: 'blur' }
],
value: '#fff',
description: '文字描边样式。'
description: ''
},
{
prop: 'textStrokeWidth',
label: '文字描边宽度',
label: '描边宽度',
type: types.Number,
min: 0,
max: 100,
@ -102,7 +102,7 @@ export default [
{ required: true, message:'请输入文字描边宽度', trigger: 'blur' }
],
value: 2,
description: '文字描边宽度。'
description: ''
},
// {
// prop: 'textWidth',
@ -172,25 +172,27 @@ export default [
// },
{
prop: 'textAlign',
label: '文字水平对齐方式',
label: '水平对齐方式',
type: types.Select,
rules:[
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
],
value: 'left',
optionList:[{value:'left', label:'左对齐'}, {value:'center', label:'居中对齐'}, {value:'right', label:'右对齐'}],
description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
// 文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。
description: ''
},
{
prop: 'textVerticalAlign',
label: '文字垂直对齐方式',
label: '垂直对齐方式',
type: types.Select,
rules:[
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
],
value: 'top',
optionList:[{value:'top', label:'顶对齐'}, {value:'middle', label:'居中对齐'}, {value:'bottom', label:'底对齐'}],
description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
// 文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。
description: ''
},
// {
// prop: 'textDistance',
@ -208,7 +210,7 @@ export default [
// },
{
prop: 'textShadowColor',
label: '文字阴影颜色',
label: '阴影颜色',
type: types.Color,
rules:[
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
@ -218,7 +220,7 @@ export default [
},
{
prop: 'textShadowBlur',
label: '文字阴影模糊大小',
label: '阴影模糊大小',
type: types.Number,
min: 0,
max: 10000,
@ -232,7 +234,7 @@ export default [
},
{
prop: 'textShadowOffsetX',
label: '文字阴影水平偏移',
label: '阴影水平偏移',
type: types.Number,
min: 0,
max: 1000,
@ -246,7 +248,7 @@ export default [
},
{
prop: 'textShadowOffsetY',
label: '文字阴影垂直偏移',
label: '阴影垂直偏移',
type: types.Number,
min: 0,
max: 1000,
@ -260,7 +262,7 @@ export default [
},
{
prop: 'textBoxShadowColor',
label: '文字包围盒阴影颜色',
label: '包围盒阴影颜色',
type: types.Color,
rules:[
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
@ -270,7 +272,7 @@ export default [
},
{
prop: 'textBoxShadowBlur',
label: '文字包围盒阴影模糊大小',
label: '包围盒阴影模糊大小',
type: types.Number,
min: 0,
max: 1000,
@ -284,7 +286,7 @@ export default [
},
{
prop: 'textBoxShadowOffsetX',
label: '文字包围盒阴影水平偏移',
label: '包围盒阴影水平偏移',
type: types.Number,
min: 0,
max: 1000,
@ -298,7 +300,7 @@ export default [
},
{
prop: 'textBoxShadowOffsetY',
label: '文字包围盒阴影垂直偏移',
label: '包围盒阴影垂直偏移',
type: types.Number,
min: 0,
max: 1000,
@ -350,7 +352,7 @@ export default [
// },
{
prop: 'textBackgroundColor',
label: '文字包围盒颜色',
label: '包围盒颜色',
type: types.Color,
rules:[
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
@ -370,7 +372,7 @@ export default [
},
{
prop: 'textBorderWidth',
label: '文字包围盒描边宽度',
label: '包围盒描边宽度',
type: types.Number,
min: 0,
max: 1000,
@ -384,7 +386,7 @@ export default [
},
{
prop: 'textBorderRadius',
label: '文字圆角大小',
label: '圆角大小',
type: types.Number,
min: 0,
max: 360,
@ -394,7 +396,7 @@ export default [
{ required: true, message:'请输入文字圆角大小', trigger: 'blur' }
],
value: 0,
description: '文字圆角大小。'
description: ''
},
{
prop: 'textPadding',
@ -409,6 +411,6 @@ export default [
{ required: true, message:'请输入文字内边距', trigger: 'blur' }
],
value: [0, 0, 0, 0],
description: '文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。'
description: '文字内边距，[2, 3, 4, 5] 的形式，单位是像素。'
}
];

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

@ -1,5 +1,15 @@
<template>
<el-form ref="form" :model="formModel" class="composeForm" label-width="110px">
<!-- name -->
<el-form-item prop="name" label="元素名称" class="formName" :rules="[ { required: true, message:'请输入名称', trigger: 'blur' }]">
<el-input
v-model="formModel.name"
size="small"
type="text"
style="width:200px"
:maxlength="200"
/>
</el-form-item>
<template v-for="(styleGroup,index) in form.formGroup">
<div v-if="styleGroup.styleList.length>0" :key="index" class="styleGroup">
<div class="styleGroupName">
@ -8,6 +18,17 @@
<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 }} -->
<el-tooltip
v-if="item.description"
:id="item.prop"
effect="dark"
:content="item.description"
:popper-options="{removeOnDestroy:true}"
placement="bottom-start"
popper-class="composeItemTooltip"
>
<span class="el-icon-info itemTips" />
</el-tooltip>
<template v-if="checkFieldType(item, 'Number')">
<el-input-number
v-if="item.precision!=undefined"
@ -48,7 +69,7 @@
v-for="count in item.length"
:key="count"
v-model="formModel[styleGroup.code][item.prop][count-1]"
style="margin-left:5px"
style="margin:6px 0px 0px 5px"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
@ -100,6 +121,7 @@
v-model="formModel[styleGroup.code][item.prop]"
size="small"
type="text"
style="width:200px"
:maxlength="item.maxlength"
/>
</template>
@ -162,13 +184,15 @@ export default {
.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:25px}
.point-section {float:left;display: inline-block;}
.point-section {float:left;display: inline-block;margin-top:8px}
.pointSplice{display: inline-block;margin-left: 4px;margin-right:4px;line-height: 28px;font-size:14px}
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
.point-button {width:28px;height:28px;display:inline-block;margin-left:5px;text-align:center;padding:0px;}
.itemTips{display: inline-block;font-size: 18px;vertical-align: top;margin-left: -8px;margin-right: 5px;cursor: pointer;color: #dde0e3;}
// align-items: center;justify-content: center;
</style>
<style lang="scss">
.composeForm .el-form-item__label{line-height:20px;}
.composeForm .el-form-item__content{font-size: 0px;}
.composeForm .el-form-item__label{line-height:20px;margin-top: 20px;transform: translateY(-50%);}
.composeForm .el-form-item__content{font-size: 0px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;min-height: 40px;flex-wrap: wrap;justify-content: flex-start;}
.composeItemTooltip{max-width:300px}
</style>

4
src/views/iscs_new/iscsDraw/index.vue
View File

@ -8,6 +8,7 @@
<div class="btn_draft_box" @click="draftShow = !draftShow"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
<el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix">
<div style="display:inline-block">组件id：{{ $route.query.id }}</div>
<el-button
type="text"
style="float: right; padding: 3px 0; margin-right: 5px;"
@ -123,8 +124,9 @@ export default {
const newModel = JSON.parse(JSON.stringify(formModel));
newModel.code = utils.getUID(this.enabledTab);
newModel.type = this.enabledTab;
newModel.name = '<名称>';
// newModel.name = '<名称>';
newModel.stateList = [];
debugger;
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
this.clear(this.enabledTab);
}