Merge branch 'iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into iscs
This commit is contained in:
commit
50cb5b1ece
@ -8,46 +8,24 @@ class BuilderFactory {
|
||||
const elementList = Object.values(elementConst);
|
||||
elementList.forEach(element=>{
|
||||
const temp = Object.assign({}, element);
|
||||
|
||||
temp.formGroup = [];
|
||||
temp.model = {};
|
||||
temp.rules = {};
|
||||
|
||||
// 添加通用配置
|
||||
temp.model['base'] = {};
|
||||
temp.rules['base'] = {};
|
||||
form2Base.forEach(each=>{
|
||||
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;
|
||||
}
|
||||
const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
|
||||
list.forEach(eachType=>{
|
||||
temp.model[eachType.type] = {};
|
||||
const eachList = element.formList[eachType.type];
|
||||
eachList.forEach(each=>{
|
||||
temp.model[eachType.type][each.prop] = each.value;
|
||||
});
|
||||
temp.formGroup.push({name:eachType.name, code:eachType.type, styleList:eachList});
|
||||
});
|
||||
temp.formGroup.push({name:'样式配置', code:'style', styleList:styleList});
|
||||
|
||||
// shape
|
||||
// element
|
||||
|
||||
// temp.formGroup.push({name:'绘图配置', code:'shape', styleList:form2Base});
|
||||
// temp.rules
|
||||
// let ClassName=element.code;
|
||||
// const = elementTypeList[element];
|
||||
// temp.formStyle=new ClassName();
|
||||
// 添加样式配置 style
|
||||
|
||||
this.formList.push(temp);
|
||||
});
|
||||
return this.formList;
|
||||
|
@ -1,6 +1,7 @@
|
||||
|
||||
import * as graphic from '../../core/graphic';
|
||||
import form2ShapeStyle from './form2ShapeStyle';
|
||||
import types from './types';
|
||||
const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
|
||||
|
||||
export const elementConst = {
|
||||
@ -12,10 +13,30 @@ export const elementConst = {
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
// opts.shape.x1 number 0 起始点横坐标。
|
||||
// opts.shape.y1 number 0 起始点纵坐标。
|
||||
// opts.shape.x2 number 0 终止点横坐标。
|
||||
// opts.shape.y2 number 0 终止点纵坐标。
|
||||
{prop: 'x1', label: '起始点横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始点横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '起始点横坐标'},
|
||||
{prop: 'y1', label: '起始点纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始点纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '起始点纵坐标'},
|
||||
{prop: 'x2', label: '终止点横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止点横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '终止点横坐标'},
|
||||
{prop: 'y2', label: '终止点纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止点纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '终止点纵坐标'}
|
||||
// opts.shape.percent number 1 已显示的百分比,用于绘制动画。
|
||||
]
|
||||
}
|
||||
@ -37,11 +58,50 @@ export const elementConst = {
|
||||
name:'矩形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
]
|
||||
{prop: 'x', label: '左上角横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入左上角横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '左上角横坐标'},
|
||||
{prop: 'y', label: '左上角纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入左上角纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '左上角纵坐标'},
|
||||
{prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '宽度'},
|
||||
{prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'},
|
||||
{prop: 'r', label: '圆角矩形半径', type: types.NumberArray, precision: 0, step:1, length:4,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆角矩形半径', trigger: 'blur' }
|
||||
],
|
||||
value: [5, 5, 5, 5],
|
||||
description: '用于创建圆角矩形。左上、右上、右下、左下角的半径依次为 r1、 r2、 r3、 r4。[1, 1, 1, 1]'
|
||||
}]
|
||||
}
|
||||
},
|
||||
[graphicType.Circle]: {
|
||||
@ -49,10 +109,37 @@ export const elementConst = {
|
||||
name:'圆形',
|
||||
formList:{
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -61,6 +148,16 @@ export const elementConst = {
|
||||
name:'多边形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
@ -97,10 +194,43 @@ export const elementConst = {
|
||||
name:'正多边形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape:[
|
||||
|
||||
{prop: 'x', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'y', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'},
|
||||
{prop: 'n', label: '边数', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入边数', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '边数'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -109,10 +239,43 @@ export const elementConst = {
|
||||
name:'椭圆',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape:[
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'rx', label: '横向半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入横向半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '横向半径'},
|
||||
{prop: 'ry', label: '纵向半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入纵向半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '纵向半径'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -124,7 +287,46 @@ export const elementConst = {
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'},
|
||||
{prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '起始弧度'},
|
||||
{prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '终止弧度'},
|
||||
{
|
||||
prop: 'clockwise',
|
||||
label: '顺时针方向',
|
||||
type: types.Boolean,
|
||||
rules:[
|
||||
{ required: true, message:'请选择图形是否不可见', trigger: 'change' }
|
||||
],
|
||||
value: true,
|
||||
description: '顺时针方向。'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -133,10 +335,65 @@ export const elementConst = {
|
||||
name:'扇形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'r', label: '半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '半径'},
|
||||
{prop: 'r0', label: '内半径', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入内半径', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '内半径'},
|
||||
{prop: 'startAngle', label: '起始弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入起始弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '起始弧度'},
|
||||
{prop: 'endAngle', label: '终止弧度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入终止弧度', trigger: 'blur' }
|
||||
],
|
||||
value: 20,
|
||||
description: '终止弧度'},
|
||||
{
|
||||
prop: 'clockwise',
|
||||
label: '顺时针方向',
|
||||
type: types.Boolean,
|
||||
rules:[
|
||||
{ required: true, message:'请选择图形是否不可见', trigger: 'change' }
|
||||
],
|
||||
value: true,
|
||||
description: '顺时针方向。'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -145,10 +402,43 @@ export const elementConst = {
|
||||
name:'心形',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '宽度'},
|
||||
{prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'}
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -157,10 +447,43 @@ export const elementConst = {
|
||||
name:'水滴',
|
||||
formList: {
|
||||
style: [
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
...form2ShapeStyle
|
||||
],
|
||||
shape: [
|
||||
|
||||
{prop: 'cx', label: '圆心横坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心横坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心横坐标'},
|
||||
{prop: 'cy', label: '圆心纵坐标', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入圆心纵坐标', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
description: '圆心纵坐标'},
|
||||
{prop: 'width', label: '宽度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '宽度'},
|
||||
{prop: 'height', label: '高度', type: types.Number, precision: 0, step:1,
|
||||
rules:[
|
||||
{ required: true, message:'请输入高度', trigger: 'blur' }
|
||||
],
|
||||
value: 50,
|
||||
description: '高度'}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ export default [
|
||||
{ prop: 'z1',
|
||||
label: '层级z1',
|
||||
type: types.Number,
|
||||
precisionFlag: 0,
|
||||
precision: 0,
|
||||
min:0,
|
||||
max:20,
|
||||
step:1,
|
||||
@ -18,7 +18,7 @@ export default [
|
||||
prop: 'z2',
|
||||
label: '层级z2',
|
||||
type: types.Number,
|
||||
precisionFlag: 0,
|
||||
precision: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
|
@ -8,23 +8,13 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
precision: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入线宽', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
value: 1,
|
||||
description: '线宽'
|
||||
},
|
||||
{
|
||||
prop: 'fill',
|
||||
label: '填充样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '填充样式。'
|
||||
},
|
||||
{
|
||||
prop: 'opacity',
|
||||
label: '不透明度',
|
||||
@ -32,7 +22,7 @@ export default [
|
||||
min: 0,
|
||||
max: 1,
|
||||
step: 0.05,
|
||||
precisionFlag: 2,
|
||||
precision: 2,
|
||||
rules:[
|
||||
{ required: true, message:'请输入不透明度', trigger: 'blur' }
|
||||
],
|
||||
@ -43,9 +33,9 @@ export default [
|
||||
prop: 'stroke',
|
||||
label: '描边样式',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边样式', trigger: 'blur' }
|
||||
],
|
||||
// rules:[
|
||||
// { required: true, message:'请输入描边样式', trigger: 'blur' }
|
||||
// ],
|
||||
value: '',
|
||||
description: '描边样式。'
|
||||
},
|
||||
@ -57,10 +47,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边虚线样式', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
|
||||
// ],
|
||||
value: [0, 0],
|
||||
description: '描边虚线样式,参考 SVG stroke-dasharray。'
|
||||
},
|
||||
@ -71,10 +61,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
|
||||
// ],
|
||||
value: [0, 0],
|
||||
description: '描边虚线偏移,参考 SVG stroke-dashoffset。'
|
||||
},
|
||||
@ -82,9 +72,9 @@ export default [
|
||||
prop: 'shadowColor',
|
||||
label: '阴影颜色',
|
||||
type: types.Color,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影颜色', trigger: 'blur' }
|
||||
// ],
|
||||
value: '',
|
||||
description: '阴影颜色。'
|
||||
},
|
||||
@ -95,10 +85,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
|
||||
// ],
|
||||
value: 0,
|
||||
description: '阴影横向偏移。'
|
||||
},
|
||||
@ -109,10 +99,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
|
||||
// ],
|
||||
value: 0,
|
||||
description: '阴影纵向偏移。'
|
||||
},
|
||||
@ -123,10 +113,10 @@ export default [
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
precision: 0,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
|
||||
// ],
|
||||
value: 0,
|
||||
description: '阴影模糊大小。'
|
||||
},
|
||||
|
@ -1,402 +1,402 @@
|
||||
import types from './types';
|
||||
|
||||
export default [
|
||||
{
|
||||
prop: 'text',
|
||||
label: '内容',
|
||||
{
|
||||
prop: 'text',
|
||||
label: '内容',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入内容', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入内容', trigger: 'blur' }
|
||||
],
|
||||
value: 'context',
|
||||
description: '在图形中显示的文字。'
|
||||
},
|
||||
// {
|
||||
// prop: 'font',
|
||||
// label: '文字样式',
|
||||
description: '在图形中显示的文字。'
|
||||
},
|
||||
// {
|
||||
// prop: 'font',
|
||||
// label: '文字样式',
|
||||
// type: types.String,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
// ],
|
||||
// { required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
// ],
|
||||
// value: '',
|
||||
// description: '文字样式,由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成,建议分别设置这几项而非直接设置 font。'
|
||||
// },
|
||||
{
|
||||
prop: 'fontStyle',
|
||||
label: '',
|
||||
// description: '文字样式,由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成,建议分别设置这几项而非直接设置 font。'
|
||||
// },
|
||||
{
|
||||
prop: 'fontStyle',
|
||||
label: '',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字样式', trigger: 'blur' }
|
||||
],
|
||||
value: 'normal',
|
||||
description: '同 CSS font-style。'
|
||||
},
|
||||
{
|
||||
prop: 'fontWeight',
|
||||
label: '文字粗细',
|
||||
description: '同 CSS font-style。'
|
||||
},
|
||||
{
|
||||
prop: 'fontWeight',
|
||||
label: '文字粗细',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字粗细', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字粗细', trigger: 'blur' }
|
||||
],
|
||||
value: 'normal',
|
||||
description: '同 CSS font-weight。'
|
||||
},
|
||||
{
|
||||
prop: 'fontSize',
|
||||
label: '文字大小',
|
||||
description: '同 CSS font-weight。'
|
||||
},
|
||||
{
|
||||
prop: 'fontSize',
|
||||
label: '文字大小',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字大小', trigger: 'blur' }
|
||||
],
|
||||
value: '12px',
|
||||
description: '同 CSS font-size。'
|
||||
},
|
||||
{
|
||||
prop: 'fontFamily',
|
||||
label: '文字族',
|
||||
description: '同 CSS font-size。'
|
||||
},
|
||||
{
|
||||
prop: 'fontFamily',
|
||||
label: '文字族',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字族', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字族', trigger: 'blur' }
|
||||
],
|
||||
value: '文字样式',
|
||||
description: '同 CSS font-family。'
|
||||
},
|
||||
{
|
||||
prop: 'textFill',
|
||||
label: '文字填充样式',
|
||||
description: '同 CSS font-family。'
|
||||
},
|
||||
{
|
||||
prop: 'textFill',
|
||||
label: '文字填充样式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字填充样式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字填充样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '文字填充样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textStroke',
|
||||
label: '文字描边样式',
|
||||
description: '文字填充样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textStroke',
|
||||
label: '文字描边样式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字描边样式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字描边样式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: '文字描边样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textWidth',
|
||||
label: '文字宽度',
|
||||
description: '文字描边样式。'
|
||||
},
|
||||
{
|
||||
prop: 'textWidth',
|
||||
label: '文字宽度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字宽度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textHeight',
|
||||
label: '文字高度',
|
||||
description: '文字宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textHeight',
|
||||
label: '文字高度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字高度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字高度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字高度,仅用于设置背景色时需要设置。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineWidth',
|
||||
label: '文字描边宽度',
|
||||
description: '文字高度,仅用于设置背景色时需要设置。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineWidth',
|
||||
label: '文字描边宽度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字描边宽度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字描边宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineHeight',
|
||||
label: '文字行高',
|
||||
description: '文字描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textLineHeight',
|
||||
label: '文字行高',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字行高', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字行高', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字行高。'
|
||||
},
|
||||
{
|
||||
prop: 'textPosition',
|
||||
label: '文字位置',
|
||||
description: '文字行高。'
|
||||
},
|
||||
{
|
||||
prop: 'textPosition',
|
||||
label: '文字位置',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字位置', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字位置', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字位置,可以为 'inside'、 'left'、 'right'、 'top'、 'bottom',或一个二维数组 [x, y] 表示相对形状的位置。"
|
||||
},
|
||||
{
|
||||
prop: 'textOffset',
|
||||
label: '文字行高',
|
||||
description: "文字位置,可以为 'inside'、 'left'、 'right'、 'top'、 'bottom',或一个二维数组 [x, y] 表示相对形状的位置。"
|
||||
},
|
||||
{
|
||||
prop: 'textOffset',
|
||||
label: '文字行高',
|
||||
type: types.Point,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字位置偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字位置偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字位置偏移,包括 x、 y。'
|
||||
},
|
||||
{
|
||||
prop: 'textAlign',
|
||||
label: '文字水平对齐方式',
|
||||
description: '文字位置偏移,包括 x、 y。'
|
||||
},
|
||||
{
|
||||
prop: 'textAlign',
|
||||
label: '文字水平对齐方式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字水平对齐方式,可取值:'left'、 'center'、 'right',默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textVerticalAlign',
|
||||
label: '文字垂直对齐方式',
|
||||
description: "文字水平对齐方式,可取值:'left'、 'center'、 'right',默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textVerticalAlign',
|
||||
label: '文字垂直对齐方式',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字垂直对齐方式,可取值:'top'、 'middle'、 'bottom',默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textDistance',
|
||||
label: '文字与其对齐的边缘的距离',
|
||||
description: "文字垂直对齐方式,可取值:'top'、 'middle'、 'bottom',默认根据 textPosition 计算。"
|
||||
},
|
||||
{
|
||||
prop: 'textDistance',
|
||||
label: '文字与其对齐的边缘的距离',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字与其对齐的边缘的距离', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字与其对齐的边缘的距离,如 textPosition 为 top 时,textDistance 表示与形状上方的距离。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowColor',
|
||||
label: '文字阴影颜色',
|
||||
description: '文字与其对齐的边缘的距离,如 textPosition 为 top 时,textDistance 表示与形状上方的距离。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowColor',
|
||||
label: '文字阴影颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字阴影颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textShadowBlur',
|
||||
label: '文字阴影模糊大小',
|
||||
description: '文字阴影颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowBlur',
|
||||
label: '文字阴影模糊大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetX',
|
||||
label: '文字阴影水平偏移',
|
||||
description: '文字阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetX',
|
||||
label: '文字阴影水平偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetY',
|
||||
label: '文字阴影垂直偏移',
|
||||
description: '文字阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textShadowOffsetY',
|
||||
label: '文字阴影垂直偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字阴影垂直偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字阴影垂直偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowColor',
|
||||
label: '文字包围盒阴影颜色',
|
||||
description: '文字阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowColor',
|
||||
label: '文字包围盒阴影颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
|
||||
],
|
||||
value: 'transparent',
|
||||
description: "文字包围盒阴影颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowBlur',
|
||||
label: '文字包围盒阴影模糊大小',
|
||||
description: '文字包围盒阴影颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowBlur',
|
||||
label: '文字包围盒阴影模糊大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影模糊大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetX',
|
||||
label: '文字包围盒阴影水平偏移',
|
||||
description: '文字包围盒阴影模糊大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetX',
|
||||
label: '文字包围盒阴影水平偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影水平偏移', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetY',
|
||||
label: '文字包围盒阴影垂直偏移',
|
||||
description: '文字包围盒阴影水平偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'textBoxShadowOffsetY',
|
||||
label: '文字包围盒阴影垂直偏移',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒阴影垂直偏移。', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒阴影垂直偏移。', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'transformText',
|
||||
label: '文字是否跟随变换效果',
|
||||
description: '文字包围盒阴影垂直偏移。'
|
||||
},
|
||||
{
|
||||
prop: 'transformText',
|
||||
label: '文字是否跟随变换效果',
|
||||
type: types.Boolean,
|
||||
rules:[
|
||||
{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
|
||||
],
|
||||
value: false,
|
||||
description: "文字是否跟随变换效果,仅对 Path 或 Image 元素有效"
|
||||
},
|
||||
{
|
||||
prop: 'textRotation',
|
||||
label: '文字旋转角度',
|
||||
description: '文字是否跟随变换效果,仅对 Path 或 Image 元素有效'
|
||||
},
|
||||
{
|
||||
prop: 'textRotation',
|
||||
label: '文字旋转角度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字旋转角度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字旋转角度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字旋转角度,仅对 Path 或 Image 元素有效,并且 transformText 应设置为 false。'
|
||||
},
|
||||
{
|
||||
prop: 'textOrigin',
|
||||
label: '文字变换中心',
|
||||
description: '文字旋转角度,仅对 Path 或 Image 元素有效,并且 transformText 应设置为 false。'
|
||||
},
|
||||
{
|
||||
prop: 'textOrigin',
|
||||
label: '文字变换中心',
|
||||
type: types.Point,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字变换中心', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字变换中心', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: "文字变换中心,可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置,默认值是 textPosition。"
|
||||
},
|
||||
{
|
||||
prop: 'textBackgroundColor',
|
||||
label: '文字包围盒颜色',
|
||||
description: "文字变换中心,可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置,默认值是 textPosition。"
|
||||
},
|
||||
{
|
||||
prop: 'textBackgroundColor',
|
||||
label: '文字包围盒颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字包围盒颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textBorderColor',
|
||||
label: '文字包围盒描边颜色',
|
||||
description: '文字包围盒颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderColor',
|
||||
label: '文字包围盒描边颜色',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
|
||||
],
|
||||
value: '',
|
||||
description: "文字包围盒描边颜色。"
|
||||
},
|
||||
{
|
||||
prop: 'textBorderWidth',
|
||||
label: '文字包围盒描边宽度',
|
||||
description: '文字包围盒描边颜色。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderWidth',
|
||||
label: '文字包围盒描边宽度',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字包围盒描边宽度', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字包围盒描边宽度', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字包围盒描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderRadius',
|
||||
label: '文字圆角大小',
|
||||
description: '文字包围盒描边宽度。'
|
||||
},
|
||||
{
|
||||
prop: 'textBorderRadius',
|
||||
label: '文字圆角大小',
|
||||
type: types.Number,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 360,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字圆角大小', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字圆角大小', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: '文字圆角大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textPadding',
|
||||
label: '文字内边距',
|
||||
description: '文字圆角大小。'
|
||||
},
|
||||
{
|
||||
prop: 'textPadding',
|
||||
label: '文字内边距',
|
||||
type: types.Point,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
min: 0,
|
||||
max: 10000,
|
||||
step: 1,
|
||||
precisionFlag: 0,
|
||||
rules:[
|
||||
{ required: true, message:'请输入文字内边距', trigger: 'blur' }
|
||||
],
|
||||
{ required: true, message:'请输入文字内边距', trigger: 'blur' }
|
||||
],
|
||||
value: 0,
|
||||
description: "文字内边距,可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式,同 CSS Padding,单位是像素。"
|
||||
}
|
||||
]
|
||||
description: '文字内边距,可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式,同 CSS Padding,单位是像素。'
|
||||
}
|
||||
];
|
||||
|
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="formModel" :rules="rules" class="composeForm" label-width="auto">
|
||||
<el-form ref="form" :model="formModel" class="composeForm" label-width="180px">
|
||||
<div v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
|
||||
<div class="styleGroupName">
|
||||
{{ styleGroup.name }}
|
||||
</div>
|
||||
<template v-for="item in styleGroup.styleList">
|
||||
<el-form-item :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required" class="formName">
|
||||
<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 }} -->
|
||||
<template v-if="checkFieldType(item, 'Number')">
|
||||
<el-input-number
|
||||
v-if="item.precisionFlag"
|
||||
v-if="item.precision!=undefined"
|
||||
v-model="formModel[styleGroup.code][item.prop]"
|
||||
size="small"
|
||||
:min="isNaN(item.min) ? -Infinity : item.min"
|
||||
@ -100,6 +100,6 @@ export default {
|
||||
.composeForm{padding: 10px 15px;}
|
||||
.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:12px}
|
||||
.formName.el-form-item {margin-bottom:25px}
|
||||
.styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
|
||||
</style>
|
||||
|
@ -2,7 +2,8 @@
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<iscs-plate ref="iscsPlate" @iscsChange="iscsChange" />
|
||||
<iscs-canvas ref="iscsCanvas" />
|
||||
<!-- @iscsChange="iscsChange" -->
|
||||
</div>
|
||||
<div class="right-card" :class="{'hide': draftShow}">
|
||||
<div class="btn_draft_box" @click="clickDraftBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
|
||||
@ -15,10 +16,15 @@
|
||||
>保存</el-button>
|
||||
</div>
|
||||
<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 v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
|
||||
<data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="bottomBtnGroup">
|
||||
<el-button type="primary" size="small" @click="onSubmit">添加</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" type="danger" @click="deleteDevice">删除</el-button>
|
||||
<el-button v-show="showDeleteButton" size="small" @click="initPage">取消</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- <div class="right-card" :class="{'hide': tableShow}">
|
||||
@ -29,7 +35,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import localStore from 'storejs';
|
||||
import IscsPlate from '@/views/iscsSystem/index';
|
||||
import iscsCanvas from './iscsCanvas';
|
||||
// import {allElements} from '@/iscs_new/core/form/allElments';
|
||||
import BuilderFactory from '@/iscs_new/core/form/builderFactory';
|
||||
import DataForm from '../components/dataForm';
|
||||
@ -38,7 +44,7 @@ import DataForm from '../components/dataForm';
|
||||
export default {
|
||||
name: 'IscsView',
|
||||
components: {
|
||||
IscsPlate,
|
||||
iscsCanvas,
|
||||
DataForm
|
||||
},
|
||||
data() {
|
||||
@ -51,6 +57,7 @@ export default {
|
||||
draftShow: false,
|
||||
// tableShow: false,
|
||||
enabledTab:'',
|
||||
showDeleteButton:false,
|
||||
elementList:[]
|
||||
};
|
||||
},
|
||||
@ -104,7 +111,24 @@ export default {
|
||||
},
|
||||
handleTabClick() {
|
||||
|
||||
}
|
||||
},
|
||||
onSubmit(){
|
||||
let that=this;
|
||||
that.$refs['dataform'+that.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let formModel=that.$refs['dataform'+that.enabledTab][0].formModel;
|
||||
let newModel=Object.assign({},formModel.base);
|
||||
newModel.style=Object.assign({},formModel.style);
|
||||
newModel.shape=Object.assign({},formModel.shape);
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteDevice(){
|
||||
|
||||
},
|
||||
initPage(){
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -119,6 +143,7 @@ export default {
|
||||
flex:1;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom:30px;
|
||||
}
|
||||
|
||||
.map-view {
|
||||
@ -176,6 +201,23 @@ export default {
|
||||
box-shadow: -2px 0px 2px #000000;
|
||||
}
|
||||
}
|
||||
.bottomBtnGroup{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
text-align: right;
|
||||
right: 0px;
|
||||
background: #fff;
|
||||
z-index: 2;
|
||||
padding-top: 5px;
|
||||
border-bottom: 1px #dedede solid;
|
||||
box-shadow: 2px -3px 5px #dedede;
|
||||
}
|
||||
.bottomBtnGroup button{
|
||||
display: inline-block;
|
||||
margin-right:10px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.heightClass .el-card__body{
|
||||
|
414
src/views/iscs_new/iscsDraw/iscsCanvas.vue
Normal file
414
src/views/iscs_new/iscsDraw/iscsCanvas.vue
Normal file
@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <div>
|
||||
<el-row>
|
||||
<el-input v-model="json" type="textarea" :rows="4" />
|
||||
<el-button @click="doRemove"> 删除 </el-button>
|
||||
<el-button @click="doUnbinding">解绑</el-button>
|
||||
<el-button @click="doSource"> 源数据 </el-button>
|
||||
</el-row>
|
||||
</div> -->
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Iscs from '@/iscs_new/map';
|
||||
// import orders from '@/iscs_new/utils/orders';
|
||||
// import shapeType from '@/iscs_new/constant/shapeType';
|
||||
import { mapGetters } from 'vuex';
|
||||
// import { exitFullscreen } from '@/utils/screen';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
json: '{}',
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
},
|
||||
config: {
|
||||
scaleRate: '1',
|
||||
origin: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
selected: null, // 选择复制元素
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('iscs', [
|
||||
'iscs'
|
||||
]),
|
||||
iscsId() {
|
||||
return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
},
|
||||
width() {
|
||||
return document.documentElement.clientWidth;
|
||||
},
|
||||
height() {
|
||||
return document.documentElement.clientHeight;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.resize();
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.stateMessage(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.$iscs.modelBuilder.addEventListener();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$iscs.modelBuilder.removeEventListener();
|
||||
this.destroy();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
document.getElementById(this.iscsId).oncontextmenu = function (e) {
|
||||
return false;
|
||||
};
|
||||
|
||||
this.$iscs = new Iscs({
|
||||
dom: document.getElementById(this.iscsId),
|
||||
draw: true,
|
||||
config: {
|
||||
renderer: 'canvas',
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
options: {
|
||||
scaleRate: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
}
|
||||
});
|
||||
|
||||
Vue.prototype.$iscs = this.$iscs;
|
||||
this.$iscs.on('viewLoaded', this.onUpdate, this);
|
||||
this.$iscs.on('contextmenu', this.onContextMenu, this);
|
||||
this.$iscs.on('selected', this.onSelected, this);
|
||||
this.$iscs.on('keyboard', this.onKeyboard, this);
|
||||
|
||||
// this.$iscs.setMap([
|
||||
// {
|
||||
// type: 'Device',
|
||||
// name: 'test',
|
||||
// isActive: false,
|
||||
// isFocus: false,
|
||||
// shapeList: [
|
||||
// { name: 'a',
|
||||
// type: 'Rect',
|
||||
// shape: {},
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// stateList: [
|
||||
// { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
// { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
// ]
|
||||
// },
|
||||
// { name: 'b',
|
||||
// type: 'Circle',
|
||||
// shape: {},
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// stateList: [
|
||||
// { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
// { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
// ]
|
||||
// }
|
||||
// ],
|
||||
// stateList: [
|
||||
// { status: 's1', frameList: [[{name: 'a', status: 'st1'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st2'}]], weight: 2, loop: true, delay: 2000, time: 200, needDefault: true },
|
||||
// { status: 's2', frameList: [[{name: 'a', status: 'st2'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st1'}, {name: 'b', status: 'st2'}]], weight: 1, loop: true, delay: 5000, time: 500, needDefault: false }
|
||||
// ]
|
||||
// }
|
||||
// ], {
|
||||
// elementList: [
|
||||
// {
|
||||
// code: '1',
|
||||
// name: 'a',
|
||||
// type: 'Rect',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// shape: {
|
||||
// x: 100,
|
||||
// y: 100,
|
||||
// width: 30,
|
||||
// height: 30
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '100'
|
||||
// },
|
||||
// {
|
||||
// code: '2',
|
||||
// name: 'b',
|
||||
// type: 'Circle',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// shape: {
|
||||
// cx: 100,
|
||||
// cy: 100,
|
||||
// r: 10
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '100'
|
||||
// },
|
||||
// {
|
||||
// code: '3',
|
||||
// name: 'a',
|
||||
// type: 'Rect',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: Math.PI / 4,
|
||||
// shape: {
|
||||
// x: 200,
|
||||
// y: 100,
|
||||
// width: 30,
|
||||
// height: 30
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '101'
|
||||
// },
|
||||
// {
|
||||
// code: '4',
|
||||
// name: 'b',
|
||||
// type: 'Circle',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// scale: [0.5, 0.5],
|
||||
// shape: {
|
||||
// cx: 200,
|
||||
// cy: 100,
|
||||
// r: 10
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: '101'
|
||||
// },
|
||||
// {
|
||||
// code: '5',
|
||||
// name: 'c',
|
||||
// type: 'Droplet',
|
||||
// scale: [0.5, 0.5],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// shape: {
|
||||
// cx: 300,
|
||||
// cy: 200,
|
||||
// width: 30,
|
||||
// height: 30
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// },
|
||||
// {
|
||||
// code: '6',
|
||||
// name: 'd',
|
||||
// type: 'Droplet',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: Math.PI / 2,
|
||||
// shape: {
|
||||
// cx: 400,
|
||||
// cy: 200,
|
||||
// width: 20,
|
||||
// height: 20
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// },
|
||||
// {
|
||||
// code: '7',
|
||||
// name: 'a',
|
||||
// type: 'Rect',
|
||||
// scale: [1, 1],
|
||||
// position: [100, 0],
|
||||
// rotation: Math.PI / 2,
|
||||
// shape: {
|
||||
// x: 100,
|
||||
// y: 100,
|
||||
// width: 30,
|
||||
// height: 60
|
||||
// },
|
||||
// style: {
|
||||
// fill: 'red',
|
||||
// stroke: 'black'
|
||||
// },
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// }
|
||||
// ],
|
||||
// composeList: [
|
||||
// {
|
||||
// code: '100',
|
||||
// type: 'Device',
|
||||
// elementCodes: ['1', '2'],
|
||||
// scale: [0.5, 0.5],
|
||||
// position: [100, 100],
|
||||
// rotation: Math.PI / 2,
|
||||
// sightless: false,
|
||||
// composeCode: '1000'
|
||||
// },
|
||||
// {
|
||||
// code: '101',
|
||||
// type: 'Device',
|
||||
// elementCodes: ['3', '4'],
|
||||
// scale: [1, 1],
|
||||
// position: [200, 0],
|
||||
// rotation: 0,
|
||||
// sightless: false,
|
||||
// composeCode: '1000'
|
||||
// },
|
||||
// {
|
||||
// code: '1000',
|
||||
// type: 'Device',
|
||||
// scale: [1, 1],
|
||||
// position: [0, 0],
|
||||
// rotation: 0,
|
||||
// elementCodes: ['100', '101'],
|
||||
// sightless: false,
|
||||
// composeCode: ''
|
||||
// }
|
||||
// ]
|
||||
// }, {
|
||||
// panEnable: true,
|
||||
// zoomEnable: true,
|
||||
// keyEnable: true,
|
||||
// draggle: true,
|
||||
// selecting: true,
|
||||
// selectable: true,
|
||||
// reflect: true
|
||||
// });
|
||||
|
||||
window.document.oncontextmenu = function () {
|
||||
return false;
|
||||
};
|
||||
},
|
||||
onUpdate(e) {
|
||||
// this.$iscs.update([
|
||||
// { status: 's1', code: '100', type: 'Device' },
|
||||
// { status: 's2', code: '101', type: 'Device' }
|
||||
// ]);
|
||||
setTimeout(e => {
|
||||
// this.$iscs.update([
|
||||
// { status: 's0', code: '100', type: 'Device' },
|
||||
// { status: 's0', code: '101', type: 'Device' },
|
||||
// ])
|
||||
}, 15000);
|
||||
},
|
||||
// 键盘快捷键事件
|
||||
onKeyboard(hook) {
|
||||
console.log(hook);
|
||||
},
|
||||
// 点击选择事件
|
||||
onSelected(em) {
|
||||
this.selected = em;
|
||||
console.log(em, 'selected');
|
||||
},
|
||||
// 右键点击事件
|
||||
onContextMenu(em) {
|
||||
this.selected = em;
|
||||
console.log(em, 'contextMenu');
|
||||
},
|
||||
resize() {
|
||||
this.$nextTick(() => {
|
||||
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
|
||||
});
|
||||
},
|
||||
// back() {
|
||||
// this.group = this.$route.query.group;
|
||||
// this.$store.dispatch('training/over').then(() => {
|
||||
// putJointTrainingSimulationUserNew(this.group).then(() => {
|
||||
// this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
|
||||
// exitFullscreen();
|
||||
// });
|
||||
|
||||
// });
|
||||
// },
|
||||
destroy() {
|
||||
if (this.$iscs) {
|
||||
this.$iscs.destroy();
|
||||
this.$iscs = null;
|
||||
Vue.prototype.$iscs = null;
|
||||
}
|
||||
},
|
||||
stateMessage(val) {
|
||||
this.$iscs && this.$iscs.setDeviceStatus(val);
|
||||
}
|
||||
// doRemove() {
|
||||
// if (this.selected) {
|
||||
// this.$iscs.render([
|
||||
// {
|
||||
// model: this.selected.model,
|
||||
// action: { order: orders.DELETE, shapeType: shapeType.Compose }
|
||||
// }
|
||||
// ]);
|
||||
// }
|
||||
// },
|
||||
// doUnbinding() {
|
||||
// if (this.selected) {
|
||||
// this.$iscs.render([
|
||||
// {
|
||||
// model: this.selected.model,
|
||||
// action: { order: orders.UNBINDING, shapeType: shapeType.Compose }
|
||||
// }
|
||||
// ]);
|
||||
// }
|
||||
// },
|
||||
// doSource() {
|
||||
// console.log(this.$iscs.getSource());
|
||||
// this.json = JSON.stringify(this.$iscs.getSource());
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.iscs-button{
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 20px;
|
||||
bottom: 15px;
|
||||
}
|
||||
.iscs-canvas{
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user