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

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

@ -8,10 +8,11 @@ class BuilderFactory {
const elementList = Object.values(elementConst); const elementList = Object.values(elementConst);
elementList.forEach(element=>{ elementList.forEach(element=>{
const temp = {}; const temp = {};
temp.code = element.code; temp.code = element.code;
temp.name = element.name; temp.name = element.name;
temp.formGroup = []; temp.formGroup = [];
temp.model = {}; temp.model = {};
temp.model['name'] = '<名称>';
// 添加通用配置 // 添加通用配置
temp.model['base'] = {}; temp.model['base'] = {};
form2Base.forEach(each=>{ 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' } { required: true, message:'请输入起始点横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '起始点横坐标' description: ''
}, },
{ {
prop: 'y1', prop: 'y1',
@ -36,7 +36,7 @@ export const elementConst = {
{ required: true, message:'请输入起始点纵坐标', trigger: 'blur' } { required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
], ],
value: 100, value: 100,
description: '起始点纵坐标' description: ''
}, },
{ {
prop: 'x2', prop: 'x2',
@ -48,7 +48,7 @@ export const elementConst = {
{ required: true, message:'请输入终止点横坐标', trigger: 'blur' } { required: true, message:'请输入终止点横坐标', trigger: 'blur' }
], ],
value: 100, value: 100,
description: '终止点横坐标' description: ''
}, },
{ {
prop: 'y2', prop: 'y2',
@ -60,7 +60,7 @@ export const elementConst = {
{ required: true, message:'请输入终止点纵坐标', trigger: 'blur' } { required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '终止点纵坐标'} description: ''}
// opts.shape.percent number 1 已显示的百分比，用于绘制动画。 // opts.shape.percent number 1 已显示的百分比，用于绘制动画。
] ]
} }
@ -104,7 +104,7 @@ export const elementConst = {
{ required: true, message:'请输入左上角横坐标', trigger: 'blur' } { required: true, message:'请输入左上角横坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '左上角横坐标' description: ''
}, },
{ {
prop: 'y', prop: 'y',
@ -116,7 +116,7 @@ export const elementConst = {
{ required: true, message:'请输入左上角纵坐标', trigger: 'blur' } { required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '左上角纵坐标' description: ''
}, },
{ {
prop: 'width', prop: 'width',
@ -128,7 +128,7 @@ export const elementConst = {
{ required: true, message:'请输入宽度', trigger: 'blur' } { required: true, message:'请输入宽度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '宽度' description: ''
}, },
{ {
prop: 'height', prop: 'height',
@ -140,7 +140,7 @@ export const elementConst = {
{ required: true, message:'请输入高度', trigger: 'blur' } { required: true, message:'请输入高度', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '高度' description: ''
}, },
{ {
prop: 'r', prop: 'r',
@ -288,7 +288,7 @@ export const elementConst = {
{ required: true, message:'请输入坐标集合', trigger: 'blur' } { required: true, message:'请输入坐标集合', trigger: 'blur' }
], ],
value: [[0, 0], [100, 100], [100, 200]], value: [[0, 0], [100, 100], [100, 200]],
description: '每个元素是一个横纵坐标的数组' description: ''
}, },
{ {
prop: 'smooth', prop: 'smooth',

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

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

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

@ -10,7 +10,7 @@ export default [
], ],
value: '内容', value: '内容',
maxlength:1000, maxlength:1000,
description: '在图形中显示的文字。' description: ''
}, },
// { // {
// prop: 'font', // prop: 'font',
@ -34,7 +34,7 @@ export default [
// }, // },
{ {
prop: 'fontWeight', prop: 'fontWeight',
label: '文字粗细', label: '粗细',
type: types.Number, type: types.Number,
rules:[ rules:[
{ required: true, message:'请输入文字粗细', trigger: 'blur' } { required: true, message:'请输入文字粗细', trigger: 'blur' }
@ -44,11 +44,11 @@ export default [
step: 100, step: 100,
precisionFlag: 0, precisionFlag: 0,
value: 300, value: 300,
description: '同 CSS font-weight。' description: ''
}, },
{ {
prop: 'fontSize', prop: 'fontSize',
label: '文字大小', label: '大小',
type: types.Number, type: types.Number,
min: 8, min: 8,
max: 30, max: 30,
@ -58,7 +58,7 @@ export default [
{ required: true, message:'请输入文字大小', trigger: 'blur' } { required: true, message:'请输入文字大小', trigger: 'blur' }
], ],
value: 16, value: 16,
description: '同 CSS font-size。' description: ''
}, },
// { // {
// prop: 'fontFamily', // prop: 'fontFamily',
@ -72,27 +72,27 @@ export default [
// }, // },
{ {
prop: 'textFill', prop: 'textFill',
label: '文字填充样式', label: '填充样式',
type: types.Color, type: types.Color,
rules:[ rules:[
{ required: true, message:'请输入文字填充样式', trigger: 'blur' } { required: true, message:'请输入文字填充样式', trigger: 'blur' }
], ],
value: '#000', value: '#000',
description: '文字填充样式。' description: ''
}, },
{ {
prop: 'textStroke', prop: 'textStroke',
label: '文字描边样式', label: '描边样式',
type: types.Color, type: types.Color,
rules:[ rules:[
{ required: true, message:'请输入文字描边样式', trigger: 'blur' } { required: true, message:'请输入文字描边样式', trigger: 'blur' }
], ],
value: '#fff', value: '#fff',
description: '文字描边样式。' description: ''
}, },
{ {
prop: 'textStrokeWidth', prop: 'textStrokeWidth',
label: '文字描边宽度', label: '描边宽度',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 100, max: 100,
@ -102,7 +102,7 @@ export default [
{ required: true, message:'请输入文字描边宽度', trigger: 'blur' } { required: true, message:'请输入文字描边宽度', trigger: 'blur' }
], ],
value: 2, value: 2,
description: '文字描边宽度。' description: ''
}, },
// { // {
// prop: 'textWidth', // prop: 'textWidth',
@ -172,25 +172,27 @@ export default [
// }, // },
{ {
prop: 'textAlign', prop: 'textAlign',
label: '文字水平对齐方式', label: '水平对齐方式',
type: types.Select, type: types.Select,
rules:[ rules:[
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' } { required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
], ],
value: 'left', value: 'left',
optionList:[{value:'left', label:'左对齐'}, {value:'center', label:'居中对齐'}, {value:'right', label:'右对齐'}], optionList:[{value:'left', label:'左对齐'}, {value:'center', label:'居中对齐'}, {value:'right', label:'右对齐'}],
description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。" // 文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。
description: ''
}, },
{ {
prop: 'textVerticalAlign', prop: 'textVerticalAlign',
label: '文字垂直对齐方式', label: '垂直对齐方式',
type: types.Select, type: types.Select,
rules:[ rules:[
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' } { required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
], ],
value: 'top', value: 'top',
optionList:[{value:'top', label:'顶对齐'}, {value:'middle', label:'居中对齐'}, {value:'bottom', label:'底对齐'}], optionList:[{value:'top', label:'顶对齐'}, {value:'middle', label:'居中对齐'}, {value:'bottom', label:'底对齐'}],
description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。" // 文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。
description: ''
}, },
// { // {
// prop: 'textDistance', // prop: 'textDistance',
@ -208,7 +210,7 @@ export default [
// }, // },
{ {
prop: 'textShadowColor', prop: 'textShadowColor',
label: '文字阴影颜色', label: '阴影颜色',
type: types.Color, type: types.Color,
rules:[ rules:[
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' } { required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
@ -218,7 +220,7 @@ export default [
}, },
{ {
prop: 'textShadowBlur', prop: 'textShadowBlur',
label: '文字阴影模糊大小', label: '阴影模糊大小',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
@ -232,7 +234,7 @@ export default [
}, },
{ {
prop: 'textShadowOffsetX', prop: 'textShadowOffsetX',
label: '文字阴影水平偏移', label: '阴影水平偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 1000, max: 1000,
@ -246,7 +248,7 @@ export default [
}, },
{ {
prop: 'textShadowOffsetY', prop: 'textShadowOffsetY',
label: '文字阴影垂直偏移', label: '阴影垂直偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 1000, max: 1000,
@ -260,7 +262,7 @@ export default [
}, },
{ {
prop: 'textBoxShadowColor', prop: 'textBoxShadowColor',
label: '文字包围盒阴影颜色', label: '包围盒阴影颜色',
type: types.Color, type: types.Color,
rules:[ rules:[
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' } { required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
@ -270,7 +272,7 @@ export default [
}, },
{ {
prop: 'textBoxShadowBlur', prop: 'textBoxShadowBlur',
label: '文字包围盒阴影模糊大小', label: '包围盒阴影模糊大小',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 1000, max: 1000,
@ -284,7 +286,7 @@ export default [
}, },
{ {
prop: 'textBoxShadowOffsetX', prop: 'textBoxShadowOffsetX',
label: '文字包围盒阴影水平偏移', label: '包围盒阴影水平偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 1000, max: 1000,
@ -298,7 +300,7 @@ export default [
}, },
{ {
prop: 'textBoxShadowOffsetY', prop: 'textBoxShadowOffsetY',
label: '文字包围盒阴影垂直偏移', label: '包围盒阴影垂直偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 1000, max: 1000,
@ -350,7 +352,7 @@ export default [
// }, // },
{ {
prop: 'textBackgroundColor', prop: 'textBackgroundColor',
label: '文字包围盒颜色', label: '包围盒颜色',
type: types.Color, type: types.Color,
rules:[ rules:[
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' } { required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
@ -370,7 +372,7 @@ export default [
}, },
{ {
prop: 'textBorderWidth', prop: 'textBorderWidth',
label: '文字包围盒描边宽度', label: '包围盒描边宽度',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 1000, max: 1000,
@ -384,7 +386,7 @@ export default [
}, },
{ {
prop: 'textBorderRadius', prop: 'textBorderRadius',
label: '文字圆角大小', label: '圆角大小',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 360, max: 360,
@ -394,7 +396,7 @@ export default [
{ required: true, message:'请输入文字圆角大小', trigger: 'blur' } { required: true, message:'请输入文字圆角大小', trigger: 'blur' }
], ],
value: 0, value: 0,
description: '文字圆角大小。' description: ''
}, },
{ {
prop: 'textPadding', prop: 'textPadding',
@ -409,6 +411,6 @@ export default [
{ required: true, message:'请输入文字内边距', trigger: 'blur' } { required: true, message:'请输入文字内边距', trigger: 'blur' }
], ],
value: [0, 0, 0, 0], 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> <template>
<el-form ref="form" :model="formModel" class="composeForm" label-width="110px"> <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"> <template v-for="(styleGroup,index) in form.formGroup">
<div v-if="styleGroup.styleList.length>0" :key="index" class="styleGroup"> <div v-if="styleGroup.styleList.length>0" :key="index" class="styleGroup">
<div class="styleGroupName"> <div class="styleGroupName">
@ -8,6 +18,17 @@
<template v-for="item in styleGroup.styleList"> <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:[]"> <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 }} --> <!-- {{ 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')"> <template v-if="checkFieldType(item, 'Number')">
<el-input-number <el-input-number
v-if="item.precision!=undefined" v-if="item.precision!=undefined"
@ -48,7 +69,7 @@
v-for="count in item.length" v-for="count in item.length"
:key="count" :key="count"
v-model="formModel[styleGroup.code][item.prop][count-1]" v-model="formModel[styleGroup.code][item.prop][count-1]"
style="margin-left:5px" style="margin:6px 0px 0px 5px"
size="small" size="small"
:min="isNaN(item.min) ? -Infinity : item.min" :min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max" :max="isNaN(item.max)? Infinity : item.max"
@ -100,6 +121,7 @@
v-model="formModel[styleGroup.code][item.prop]" v-model="formModel[styleGroup.code][item.prop]"
size="small" size="small"
type="text" type="text"
style="width:200px"
:maxlength="item.maxlength" :maxlength="item.maxlength"
/> />
</template> </template>
@ -162,13 +184,15 @@ export default {
.styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;} .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__label {font-size:14px;}
.formName.el-form-item {margin-bottom:25px} .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} .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;} .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;} .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; // align-items: center;justify-content: center;
</style> </style>
<style lang="scss"> <style lang="scss">
.composeForm .el-form-item__label{line-height:20px;} .composeForm .el-form-item__label{line-height:20px;margin-top: 20px;transform: translateY(-50%);}
.composeForm .el-form-item__content{font-size: 0px;} .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> </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> <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"> <el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<div style="display:inline-block">组件id：{{ $route.query.id }}</div>
<el-button <el-button
type="text" type="text"
style="float: right; padding: 3px 0; margin-right: 5px;" style="float: right; padding: 3px 0; margin-right: 5px;"
@ -123,8 +124,9 @@ export default {
const newModel = JSON.parse(JSON.stringify(formModel)); const newModel = JSON.parse(JSON.stringify(formModel));
newModel.code = utils.getUID(this.enabledTab); newModel.code = utils.getUID(this.enabledTab);
newModel.type = this.enabledTab; newModel.type = this.enabledTab;
newModel.name = '<名称>'; // newModel.name = '<名称>';
newModel.stateList = []; newModel.stateList = [];
debugger;
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]); this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
this.clear(this.enabledTab); this.clear(this.enabledTab);
} }