Merge branch 'iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into iscs
This commit is contained in:
ival
commit
97c4aaf20c
@ -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,33 @@ 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;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
|
||||
import * as graphic from '../../core/graphic';
|
||||
|
||||
import form2ShapeStyle from './form2ShapeStyle';
|
||||
const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
|
||||
|
||||
export const elementConst = {
|
||||
@ -9,10 +9,14 @@ export const elementConst = {
|
||||
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 已显示的百分比，用于绘制动画。
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -33,7 +37,7 @@ export const elementConst = {
|
||||
name:'矩形',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
@ -45,7 +49,7 @@ export const elementConst = {
|
||||
name:'圆形',
|
||||
formList:{
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
@ -57,7 +61,7 @@ export const elementConst = {
|
||||
name:'多边形',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
@ -81,7 +85,7 @@ export const elementConst = {
|
||||
name:'多边形折线段',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
@ -93,7 +97,7 @@ export const elementConst = {
|
||||
name:'正多边形',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape:[
|
||||
|
||||
@ -105,7 +109,7 @@ export const elementConst = {
|
||||
name:'椭圆',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape:[
|
||||
|
||||
@ -117,7 +121,7 @@ export const elementConst = {
|
||||
name:'圆弧',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
@ -129,7 +133,7 @@ export const elementConst = {
|
||||
name:'扇形',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
@ -141,7 +145,7 @@ export const elementConst = {
|
||||
name:'心形',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
@ -153,7 +157,7 @@ export const elementConst = {
|
||||
name:'水滴',
|
||||
formList: {
|
||||
style: [
|
||||
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
|
||||
@ -1,29 +1,33 @@
|
||||
import types from './types';
|
||||
|
||||
export default [
|
||||
{
|
||||
prop: 'lineWidth',
|
||||
label: '线宽',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入线宽', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '线宽'
|
||||
},
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.String,
|
||||
type: types.Color,
|
||||
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: '描边样式',
|
||||
label: '不透明度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 1,
|
||||
@ -36,9 +40,20 @@ export default [
|
||||
description: '不透明度。'
|
||||
},
|
||||
{
|
||||
prop: 'lineDash',
|
||||
prop: 'stroke',
|
||||
label: '描边样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '描边样式。'
|
||||
},
|
||||
{
|
||||
prop: 'lineDash',
|
||||
label: '描边虚线',
|
||||
type: types.NumberArray,
|
||||
length:2,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
@ -46,13 +61,13 @@ export default [
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边虚线样式', trigger: 'blur' }
|
||||
],
|
||||
value: 1,
|
||||
value: [0, 0],
|
||||
description: '描边虚线样式，参考 SVG stroke-dasharray。'
|
||||
},
|
||||
{
|
||||
prop: 'lineDashOffset',
|
||||
label: '描边虚线偏移',
|
||||
type: types.Point,
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
@ -63,24 +78,10 @@ export default [
|
||||
value: [0, 0],
|
||||
description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
|
||||
},
|
||||
{
|
||||
prop: 'shadowBlur',
|
||||
label: '阴影模糊大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'shadowColor',
|
||||
label: '阴影颜色',
|
||||
type: types.String,
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
@ -116,18 +117,18 @@ export default [
|
||||
description: '阴影纵向偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'lineWidth',
|
||||
label: '线宽',
|
||||
prop: 'shadowBlur',
|
||||
label: '阴影模糊大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入线宽', trigger: 'blur' }
|
||||
{ required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '线宽。'
|
||||
description: '阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'strokeNoScale',
|
||||
@ -138,15 +139,15 @@ export default [
|
||||
],
|
||||
value: false,
|
||||
description: '描边粗细不随缩放而改变，不选中时则会根据缩放同比例缩放描边粗细。'
|
||||
},
|
||||
{
|
||||
prop: 'blend',
|
||||
label: '混合模式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入混合模式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '混合模式，同 Canvas globalCompositeOperation。'
|
||||
}
|
||||
]
|
||||
// {
|
||||
// prop: 'blend',
|
||||
// label: '混合模式',
|
||||
// type: types.String,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入混合模式', trigger: 'blur' }
|
||||
// ],
|
||||
// value: '',
|
||||
// description: '混合模式，同 Canvas globalCompositeOperation。'
|
||||
// }
|
||||
];
|
||||
|
||||
@ -5,12 +5,13 @@
|
||||
{{ 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">
|
||||
<!-- {{ 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]"
|
||||
size="mini"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
:max="isNaN(item.max)? Infinity : item.max"
|
||||
:step="isNaN(item.step) ? -Infinity : item.step"
|
||||
@ -19,22 +20,45 @@
|
||||
<el-input-number
|
||||
v-else
|
||||
v-model="formModel[styleGroup.code][item.prop]"
|
||||
size="mini"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
: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 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'"
|
||||
/>
|
||||
</el-form-item>
|
||||
</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>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
@ -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,11 +110,22 @@ 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{
|
||||
height: 100%;
|
||||
@ -169,3 +177,10 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.heightClass .el-card__body{
|
||||
flex:1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user