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

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

Browse Source
This commit is contained in:
ival 2021-04-07 15:39:41 +08:00
commit 97c4aaf20c
6 changed files with 423 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ class BuilderFactory {
this.formList = []; this.formList = [];
} }
getFormList() { getFormList() {
const elementList = elementConst.elementsList; const elementList = Object.values(elementConst);
elementList.forEach(element=>{ elementList.forEach(element=>{
const temp = Object.assign({}, element); const temp = Object.assign({}, element);
@ -14,13 +14,33 @@ class BuilderFactory {
temp.rules = {}; temp.rules = {};
// 添加通用配置 // 添加通用配置
temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base}); temp.model['base'] = {};
temp.rules['base'] = {};
form2Base.forEach(each=>{ form2Base.forEach(each=>{
temp.model[each.prop] = each.defValue; temp.model['base'][each.prop] = each.value;
temp.rules[each.prop] = each.rules; 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.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
// temp.rules // temp.rules
// let ClassName=element.code; // 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 * as graphic from '../../core/graphic';
import form2ShapeStyle from './form2ShapeStyle';
const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type])); const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
export const elementConst = { export const elementConst = {
[graphicType.Line]: { [graphicType.Line]: {
code: graphicType.Line, code: graphicType.Line,
name:'线段', name:'线段',
formList: { formList: {
style: [ 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]: { [graphicType.Rect]: {
code: graphicType.Text, code: graphicType.Rect,
name:'文字', name:'矩形',
formList: { formList: {
style: [ style: [
...form2ShapeStyle
],
shape: [
], ]
shape: [ }
},
[graphicType.Circle]: {
code: graphicType.Circle,
name:'圆形',
formList:{
style: [
...form2ShapeStyle
],
shape: [
] ]
} }
}, },
[graphicType.Rect]: { [graphicType.Polygon]: {
code: graphicType.Rect, code: graphicType.Polygon,
name:'矩形', name:'多边形',
formList: { formList: {
style: [ style: [
...form2ShapeStyle
],
shape: [
], ]
shape: [ }
},
[graphicType.Arrow]: {
code: graphicType.Arrow,
name:'箭头',
formList: {
style: [
] ],
} shape: [
},
[graphicType.Circle]: {
code: graphicType.Circle,
name:'圆形',
formList:{
style: [
], ]
shape: [ }
},
[graphicType.Polyline]: {
code: graphicType.Polyline,
name:'多边形折线段',
formList: {
style: [
...form2ShapeStyle
],
shape: [
] ]
} }
}, },
[graphicType.Polygon]: { [graphicType.Isogon]: {
code: graphicType.Polygon, code: graphicType.Isogon,
name:'多边形', name:'正多边形',
formList: { formList: {
style: [ style: [
...form2ShapeStyle
],
shape:[
], ]
shape: [ }
},
[graphicType.Ellipse]: {
code: graphicType.Ellipse,
name:'椭圆',
formList: {
style: [
...form2ShapeStyle
],
shape:[
] ]
} }
}, },
[graphicType.Arrow]: { [graphicType.Arc]: {
code: graphicType.Arrow, code: graphicType.Arc,
name:'箭头', name:'圆弧',
formList: { formList: {
style: [ style: [
...form2ShapeStyle
],
shape: [
], ]
shape: [ }
},
[graphicType.Sector]: {
code: graphicType.Sector,
name:'扇形',
formList: {
style: [
...form2ShapeStyle
],
shape: [
] ]
} }
}, },
[graphicType.Polyline]: { [graphicType.Heart]: {
code: graphicType.Polyline, code: graphicType.Heart,
name:'多边形折线段', name:'心形',
formList: { formList: {
style: [ 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 [ export default [
{ prop: 'z1', { prop: 'z1',
label: '层级z1', label: '层级z1',
type: types.Number, type: types.Number,
precisionFlag: 0, precisionFlag: 0,
min:0, min:0,
max:20, max:20,
step:1, step:1,
rules:[ rules:[
{ required: true, message:'请输入层级z', trigger: 'blur' } { required: true, message:'请输入层级z', trigger: 'blur' }
], ],
value: 10, value: 10,
description: '控制图形的前后顺序。' description: '控制图形的前后顺序。'
}, },
{ {
prop: 'z2', prop: 'z2',
label: '层级z2', label: '层级z2',
type: types.Number, type: types.Number,
precisionFlag: 0, precisionFlag: 0,
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,
rules:[ rules:[
{ required: true, message:'请输入层级z2', trigger: 'blur' } { required: true, message:'请输入层级z2', trigger: 'blur' }
], ],
value: 50, value: 50,
description: '控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低。' description: '控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低。'
}, },
{ {
prop: 'sightless', prop: 'sightless',
label: '图形是否不可见', label: '图形是否不可见',
type: types.Boolean, type: types.Boolean,
rules:[ rules:[
{ required: true, message:'请选择图形是否不可见', trigger: 'blur' } { required: true, message:'请选择图形是否不可见', trigger: 'blur' }
], ],
value: false, value: false,
description: '图形是否不可见，选中时不绘制图形。' description: '图形是否不可见，选中时不绘制图形。'
} }
]; ];

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

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

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

@ -5,12 +5,13 @@
{{ styleGroup.name }} {{ styleGroup.name }}
</div> </div>
<template v-for="item in styleGroup.styleList"> <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 <el-input-number
v-if="item.precisionFlag" v-if="item.precisionFlag"
v-model="formModel[styleGroup.code][item.prop]" v-model="formModel[styleGroup.code][item.prop]"
size="mini" 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"
:step="isNaN(item.step) ? -Infinity : item.step" :step="isNaN(item.step) ? -Infinity : item.step"
@ -19,22 +20,45 @@
<el-input-number <el-input-number
v-else v-else
v-model="formModel[styleGroup.code][item.prop]" v-model="formModel[styleGroup.code][item.prop]"
size="mini" 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"
:step="isNaN(item.step) ? -Infinity : item.step" :step="isNaN(item.step) ? -Infinity : item.step"
/> />
</el-form-item> </template>
</template> <template v-else-if="checkFieldType(item, 'Boolean')">
<template v-else-if="checkFieldType(item, 'switch')">
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
<el-switch <el-switch
v-model="formModel[styleGroup.code][item.prop]" v-model="formModel[styleGroup.code][item.prop]"
size="small"
:active-color="item.activeColor || '#409eff'" :active-color="item.activeColor || '#409eff'"
:inactive-color="item.inactiveColor || '#dcdfe6'" :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> </template>
</div> </div>
</el-form> </el-form>

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

@ -14,10 +14,7 @@
@click="handleSave" @click="handleSave"
>保存</el-button> >保存</el-button>
</div> </div>
<!-- <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">{{ element.name }}</el-tab-pane>
</el-tabs> -->
<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"> <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" /> <data-form :ref="'dataform'+index" :form="element" :form-model="element.model" :rules="element.rules" />
</el-tab-pane> </el-tab-pane>
@ -36,7 +33,7 @@ import IscsPlate from '@/views/iscsSystem/index';
// import {allElements} from '@/iscs_new/core/form/allElments'; // import {allElements} from '@/iscs_new/core/form/allElments';
import BuilderFactory from '@/iscs_new/core/form/builderFactory'; import BuilderFactory from '@/iscs_new/core/form/builderFactory';
import DataForm from '../components/dataForm'; import DataForm from '../components/dataForm';
import { saveIscsElement } from '@/api/iscs'; // import { saveIscsElement } from '@/api/iscs';
export default { export default {
name: 'IscsView', name: 'IscsView',
@ -113,59 +110,77 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss"; @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 { .map-view {
float: left; float: left;
width: 100%; width: 100%;
} }
.heightClass{height:100%;overflow:hidden;display:flex;width: 100%;flex-direction: column;}
.mapPaint{ .mapPaint{
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
.right-card{ .right-card{
width: 470px; width: 470px;
height: 100%; height: 100%;
position: absolute; position: absolute;
right: 0; right: 0;
transform: translateX(470px); transform: translateX(470px);
transition: all 0.5s; transition: all 0.5s;
background: #fff; background: #fff;
z-index: 9; z-index: 9;
/deep/{ /deep/{
.v-modal{ .v-modal{
opacity: 0; opacity: 0;
} }
} }
&.hide{ &.hide{
transform: translateX(0); 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;
}
} }
.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> </style>