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-07 13:54:55 +08:00
parent e1a75e68a1
commit 8e13a2190b
6 changed files with 382 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

48
src/iscs_new/core/form/form2Base.js
View File

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

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

@ -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。'
}
];

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

@ -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>

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

@ -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>