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 18:14:27 +08:00
commit 50cb5b1ece
8 changed files with 1141 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,46 +8,24 @@ class BuilderFactory {
const elementList = Object.values(elementConst); const elementList = Object.values(elementConst);
elementList.forEach(element=>{ elementList.forEach(element=>{
const temp = Object.assign({}, element); const temp = Object.assign({}, element);
temp.formGroup = []; temp.formGroup = [];
temp.model = {}; temp.model = {};
temp.rules = {};
// 添加通用配置 // 添加通用配置
temp.model['base'] = {}; temp.model['base'] = {};
temp.rules['base'] = {};
form2Base.forEach(each=>{ form2Base.forEach(each=>{
temp.model['base'][each.prop] = each.value; 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.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
// 添加样式配置 样式 const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
temp.model['style'] = {}; list.forEach(eachType=>{
temp.rules['style'] = {}; temp.model[eachType.type] = {};
const styleList = element.formList.style; const eachList = element.formList[eachType.type];
styleList.forEach(each=>{ eachList.forEach(each=>{
temp.model['style'][each.prop] = each.value; temp.model[eachType.type][each.prop] = each.value;
if (each.rules) { });
each.required = true; temp.formGroup.push({name:eachType.name, code:eachType.type, styleList:eachList});
temp.rules['style'][each.prop] = each.rules;
}
}); });
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); this.formList.push(temp);
}); });
return this.formList; return this.formList;

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

@ -1,6 +1,7 @@
import * as graphic from '../../core/graphic'; import * as graphic from '../../core/graphic';
import form2ShapeStyle from './form2ShapeStyle'; import form2ShapeStyle from './form2ShapeStyle';
import types from './types';
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 = {
@ -12,10 +13,30 @@ export const elementConst = {
...form2ShapeStyle ...form2ShapeStyle
], ],
shape: [ shape: [
// opts.shape.x1 number 0 起始点横坐标。 {prop: 'x1', label: '起始点横坐标', type: types.Number, precision: 0, step:1,
// opts.shape.y1 number 0 起始点纵坐标。 rules:[
// opts.shape.x2 number 0 终止点横坐标。 { required: true, message:'请输入起始点横坐标', trigger: 'blur' }
// opts.shape.y2 number 0 终止点纵坐标。 ],
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 已显示的百分比，用于绘制动画。 // opts.shape.percent number 1 已显示的百分比，用于绘制动画。
] ]
} }
@ -37,11 +58,50 @@ export const elementConst = {
name:'矩形', name:'矩形',
formList: { formList: {
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape: [ 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]: { [graphicType.Circle]: {
@ -49,10 +109,37 @@ export const elementConst = {
name:'圆形', name:'圆形',
formList:{ formList:{
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape: [ 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:'多边形', name:'多边形',
formList: { formList: {
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape: [ shape: [
@ -97,10 +194,43 @@ export const elementConst = {
name:'正多边形', name:'正多边形',
formList: { formList: {
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape:[ 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:'椭圆', name:'椭圆',
formList: { formList: {
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape:[ 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 ...form2ShapeStyle
], ],
shape: [ 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:'扇形', name:'扇形',
formList: { formList: {
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape: [ 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:'心形', name:'心形',
formList: { formList: {
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape: [ 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:'水滴', name:'水滴',
formList: { formList: {
style: [ style: [
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
...form2ShapeStyle ...form2ShapeStyle
], ],
shape: [ 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
src/iscs_new/core/form/form2Base.js
View File

@ -4,7 +4,7 @@ export default [
{ prop: 'z1', { prop: 'z1',
label: '层级z1', label: '层级z1',
type: types.Number, type: types.Number,
precisionFlag: 0, precision: 0,
min:0, min:0,
max:20, max:20,
step:1, step:1,
@ -18,7 +18,7 @@ export default [
prop: 'z2', prop: 'z2',
label: '层级z2', label: '层级z2',
type: types.Number, type: types.Number,
precisionFlag: 0, precision: 0,
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,

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

@ -8,23 +8,13 @@ export default [
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,
precisionFlag: 0, precision: 0,
rules:[ rules:[
{ required: true, message:'请输入线宽', trigger: 'blur' } { required: true, message:'请输入线宽', trigger: 'blur' }
], ],
value: 0, value: 1,
description: '线宽' description: '线宽'
}, },
{
prop: 'fill',
label: '填充样式',
type: types.Color,
rules:[
{ required: true, message:'请输入填充样式', trigger: 'blur' }
],
value: '',
description: '填充样式。'
},
{ {
prop: 'opacity', prop: 'opacity',
label: '不透明度', label: '不透明度',
@ -32,7 +22,7 @@ export default [
min: 0, min: 0,
max: 1, max: 1,
step: 0.05, step: 0.05,
precisionFlag: 2, precision: 2,
rules:[ rules:[
{ required: true, message:'请输入不透明度', trigger: 'blur' } { required: true, message:'请输入不透明度', trigger: 'blur' }
], ],
@ -43,9 +33,9 @@ export default [
prop: 'stroke', prop: 'stroke',
label: '描边样式', label: '描边样式',
type: types.Color, type: types.Color,
rules:[ // rules:[
{ required: true, message:'请输入描边样式', trigger: 'blur' } // { required: true, message:'请输入描边样式', trigger: 'blur' }
], // ],
value: '', value: '',
description: '描边样式。' description: '描边样式。'
}, },
@ -57,10 +47,10 @@ export default [
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,
precisionFlag: 0, precision: 0,
rules:[ // rules:[
{ required: true, message:'请输入描边虚线样式', trigger: 'blur' } // { required: true, message:'请输入描边虚线样式', trigger: 'blur' }
], // ],
value: [0, 0], value: [0, 0],
description: '描边虚线样式，参考 SVG stroke-dasharray。' description: '描边虚线样式，参考 SVG stroke-dasharray。'
}, },
@ -71,10 +61,10 @@ export default [
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,
precisionFlag: 0, precision: 0,
rules:[ // rules:[
{ required: true, message:'请输入描边虚线偏移', trigger: 'blur' } // { required: true, message:'请输入描边虚线偏移', trigger: 'blur' }
], // ],
value: [0, 0], value: [0, 0],
description: '描边虚线偏移，参考 SVG stroke-dashoffset。' description: '描边虚线偏移，参考 SVG stroke-dashoffset。'
}, },
@ -82,9 +72,9 @@ export default [
prop: 'shadowColor', prop: 'shadowColor',
label: '阴影颜色', label: '阴影颜色',
type: types.Color, type: types.Color,
rules:[ // rules:[
{ required: true, message:'请输入阴影颜色', trigger: 'blur' } // { required: true, message:'请输入阴影颜色', trigger: 'blur' }
], // ],
value: '', value: '',
description: '阴影颜色。' description: '阴影颜色。'
}, },
@ -95,10 +85,10 @@ export default [
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,
precisionFlag: 0, precision: 0,
rules:[ // rules:[
{ required: true, message:'请输入阴影横向偏移', trigger: 'blur' } // { required: true, message:'请输入阴影横向偏移', trigger: 'blur' }
], // ],
value: 0, value: 0,
description: '阴影横向偏移。' description: '阴影横向偏移。'
}, },
@ -109,10 +99,10 @@ export default [
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,
precisionFlag: 0, precision: 0,
rules:[ // rules:[
{ required: true, message:'请输入阴影纵向偏移', trigger: 'blur' } // { required: true, message:'请输入阴影纵向偏移', trigger: 'blur' }
], // ],
value: 0, value: 0,
description: '阴影纵向偏移。' description: '阴影纵向偏移。'
}, },
@ -123,10 +113,10 @@ export default [
min: 0, min: 0,
max: 100, max: 100,
step: 1, step: 1,
precisionFlag: 0, precision: 0,
rules:[ // rules:[
{ required: true, message:'请输入阴影模糊大小', trigger: 'blur' } // { required: true, message:'请输入阴影模糊大小', trigger: 'blur' }
], // ],
value: 0, value: 0,
description: '阴影模糊大小。' description: '阴影模糊大小。'
}, },

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

@ -1,402 +1,402 @@
import types from './types'; import types from './types';
export default [ export default [
{ {
prop: 'text', prop: 'text',
label: '内容', label: '内容',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入内容', trigger: 'blur' } { required: true, message:'请输入内容', trigger: 'blur' }
], ],
value: 'context', value: 'context',
description: '在图形中显示的文字。' description: '在图形中显示的文字。'
}, },
// { // {
// prop: 'font', // prop: 'font',
// label: '文字样式', // label: '文字样式',
// type: types.String, // type: types.String,
// rules:[ // rules:[
// { required: true, message:'请输入文字样式', trigger: 'blur' } // { required: true, message:'请输入文字样式', trigger: 'blur' }
// ], // ],
// value: '', // value: '',
// description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。' // description: '文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。'
// }, // },
{ {
prop: 'fontStyle', prop: 'fontStyle',
label: '', label: '',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字样式', trigger: 'blur' } { required: true, message:'请输入文字样式', trigger: 'blur' }
], ],
value: 'normal', value: 'normal',
description: '同 CSS font-style。' description: '同 CSS font-style。'
}, },
{ {
prop: 'fontWeight', prop: 'fontWeight',
label: '文字粗细', label: '文字粗细',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字粗细', trigger: 'blur' } { required: true, message:'请输入文字粗细', trigger: 'blur' }
], ],
value: 'normal', value: 'normal',
description: '同 CSS font-weight。' description: '同 CSS font-weight。'
}, },
{ {
prop: 'fontSize', prop: 'fontSize',
label: '文字大小', label: '文字大小',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字大小', trigger: 'blur' } { required: true, message:'请输入文字大小', trigger: 'blur' }
], ],
value: '12px', value: '12px',
description: '同 CSS font-size。' description: '同 CSS font-size。'
}, },
{ {
prop: 'fontFamily', prop: 'fontFamily',
label: '文字族', label: '文字族',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字族', trigger: 'blur' } { required: true, message:'请输入文字族', trigger: 'blur' }
], ],
value: '文字样式', value: '文字样式',
description: '同 CSS font-family。' description: '同 CSS font-family。'
}, },
{ {
prop: 'textFill', prop: 'textFill',
label: '文字填充样式', label: '文字填充样式',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字填充样式', trigger: 'blur' } { required: true, message:'请输入文字填充样式', trigger: 'blur' }
], ],
value: '', value: '',
description: '文字填充样式。' description: '文字填充样式。'
}, },
{ {
prop: 'textStroke', prop: 'textStroke',
label: '文字描边样式', label: '文字描边样式',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字描边样式', trigger: 'blur' } { required: true, message:'请输入文字描边样式', trigger: 'blur' }
], ],
value: '', value: '',
description: '文字描边样式。' description: '文字描边样式。'
}, },
{ {
prop: 'textWidth', prop: 'textWidth',
label: '文字宽度', label: '文字宽度',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textHeight', prop: 'textHeight',
label: '文字高度', label: '文字高度',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textLineWidth', prop: 'textLineWidth',
label: '文字描边宽度', label: '文字描边宽度',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textLineHeight', prop: 'textLineHeight',
label: '文字行高', label: '文字行高',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textPosition', prop: 'textPosition',
label: '文字位置', label: '文字位置',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字位置', trigger: 'blur' } { required: true, message:'请输入文字位置', trigger: 'blur' }
], ],
value: '', value: '',
description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。" description: "文字位置，可以为 'inside'、 'left'、 'right'、 'top'、 'bottom'，或一个二维数组 [x, y] 表示相对形状的位置。"
}, },
{ {
prop: 'textOffset', prop: 'textOffset',
label: '文字行高', label: '文字行高',
type: types.Point, type: types.Point,
min: 0, min: 0,
max: 10000, max: 10000,
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: '文字位置偏移，包括 x、 y。' description: '文字位置偏移，包括 x、 y。'
}, },
{ {
prop: 'textAlign', prop: 'textAlign',
label: '文字水平对齐方式', label: '文字水平对齐方式',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字水平对齐方式', trigger: 'blur' } { required: true, message:'请输入文字水平对齐方式', trigger: 'blur' }
], ],
value: '', value: '',
description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。" description: "文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。"
}, },
{ {
prop: 'textVerticalAlign', prop: 'textVerticalAlign',
label: '文字垂直对齐方式', label: '文字垂直对齐方式',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' } { required: true, message:'请输入文字垂直对齐方式', trigger: 'blur' }
], ],
value: '', value: '',
description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。" description: "文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。"
}, },
{ {
prop: 'textDistance', prop: 'textDistance',
label: '文字与其对齐的边缘的距离', label: '文字与其对齐的边缘的距离',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。' description: '文字与其对齐的边缘的距离，如 textPosition 为 top 时，textDistance 表示与形状上方的距离。'
}, },
{ {
prop: 'textShadowColor', prop: 'textShadowColor',
label: '文字阴影颜色', label: '文字阴影颜色',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' } { required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
], ],
value: '', value: '',
description: "文字阴影颜色。" description: '文字阴影颜色。'
}, },
{ {
prop: 'textShadowBlur', prop: 'textShadowBlur',
label: '文字阴影模糊大小', label: '文字阴影模糊大小',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textShadowOffsetX', prop: 'textShadowOffsetX',
label: '文字阴影水平偏移', label: '文字阴影水平偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textShadowOffsetY', prop: 'textShadowOffsetY',
label: '文字阴影垂直偏移', label: '文字阴影垂直偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textBoxShadowColor', prop: 'textBoxShadowColor',
label: '文字包围盒阴影颜色', label: '文字包围盒阴影颜色',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' } { required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
], ],
value: 'transparent', value: 'transparent',
description: "文字包围盒阴影颜色。" description: '文字包围盒阴影颜色。'
}, },
{ {
prop: 'textBoxShadowBlur', prop: 'textBoxShadowBlur',
label: '文字包围盒阴影模糊大小', label: '文字包围盒阴影模糊大小',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textBoxShadowOffsetX', prop: 'textBoxShadowOffsetX',
label: '文字包围盒阴影水平偏移', label: '文字包围盒阴影水平偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'textBoxShadowOffsetY', prop: 'textBoxShadowOffsetY',
label: '文字包围盒阴影垂直偏移', label: '文字包围盒阴影垂直偏移',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 10000, max: 10000,
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: 'transformText', prop: 'transformText',
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: "文字是否跟随变换效果，仅对 Path 或 Image 元素有效" description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
}, },
{ {
prop: 'textRotation', prop: 'textRotation',
label: '文字旋转角度', label: '文字旋转角度',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 360, max: 360,
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: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。' description: '文字旋转角度，仅对 Path 或 Image 元素有效，并且 transformText 应设置为 false。'
}, },
{ {
prop: 'textOrigin', prop: 'textOrigin',
label: '文字变换中心', label: '文字变换中心',
type: types.Point, type: types.Point,
min: 0, min: 0,
max: 10000, max: 10000,
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: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。" description: "文字变换中心，可以是 'center' 或一个二维数组 [x, y] 表示相对形状的位置，默认值是 textPosition。"
}, },
{ {
prop: 'textBackgroundColor', prop: 'textBackgroundColor',
label: '文字包围盒颜色', label: '文字包围盒颜色',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' } { required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
], ],
value: '', value: '',
description: "文字包围盒颜色。" description: '文字包围盒颜色。'
}, },
{ {
prop: 'textBorderColor', prop: 'textBorderColor',
label: '文字包围盒描边颜色', label: '文字包围盒描边颜色',
type: types.String, type: types.String,
rules:[ rules:[
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' } { required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
], ],
value: '', value: '',
description: "文字包围盒描边颜色。" description: '文字包围盒描边颜色。'
}, },
{ {
prop: 'textBorderWidth', prop: 'textBorderWidth',
label: '文字包围盒描边宽度', label: '文字包围盒描边宽度',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 1000, max: 1000,
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: 'textBorderRadius', prop: 'textBorderRadius',
label: '文字圆角大小', label: '文字圆角大小',
type: types.Number, type: types.Number,
min: 0, min: 0,
max: 360, max: 360,
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: 'textPadding', prop: 'textPadding',
label: '文字内边距', label: '文字内边距',
type: types.Point, type: types.Point,
min: 0, min: 0,
max: 10000, max: 10000,
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: "文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。" description: '文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。'
} }
] ];

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

@ -1,15 +1,15 @@
<template> <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 v-for="(styleGroup,index) in form.formGroup" :key="index" class="styleGroup">
<div class="styleGroupName"> <div class="styleGroupName">
{{ styleGroup.name }} {{ styleGroup.name }}
</div> </div>
<template v-for="item in styleGroup.styleList"> <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 }} --> <!-- {{ tempModel=styleGroup.code?formModel[styleGroup.code]:formModel }} -->
<template v-if="checkFieldType(item, 'Number')"> <template v-if="checkFieldType(item, 'Number')">
<el-input-number <el-input-number
v-if="item.precisionFlag" v-if="item.precision!=undefined"
v-model="formModel[styleGroup.code][item.prop]" v-model="formModel[styleGroup.code][item.prop]"
size="small" size="small"
:min="isNaN(item.min) ? -Infinity : item.min" :min="isNaN(item.min) ? -Infinity : item.min"
@ -100,6 +100,6 @@ export default {
.composeForm{padding: 10px 15px;} .composeForm{padding: 10px 15px;}
.styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;} .styleGroup{border: 1px #ccc solid;padding:25px 20px 20px 20px;position: relative;margin-bottom: 30px;}
.formName .el-form-item__label {font-size:14px;} .formName .el-form-item__label {font-size:14px;}
.formName.el-form-item {margin-bottom: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;} .styleGroupName{font-size: 14px;position: absolute;max-width: 100px;height: 20px;background: #fff;left: 10px;top: -9px;text-align: center;padding: 0px 10px;}
</style> </style>

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

@ -2,7 +2,8 @@
<transition name="el-zoom-in-center"> <transition name="el-zoom-in-center">
<div class="mapPaint"> <div class="mapPaint">
<div class="map-view"> <div class="map-view">
<iscs-plate ref="iscsPlate" @iscsChange="iscsChange" /> <iscs-canvas ref="iscsCanvas" />
<!-- @iscsChange="iscsChange" -->
</div> </div>
<div class="right-card" :class="{'hide': draftShow}"> <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> <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> >保存</el-button>
</div> </div>
<el-tabs v-model="enabledTab" class="card" 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"> <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
<data-form :ref="'dataform'+index" :form="element" :form-model="element.model" :rules="element.rules" /> <data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
</el-tab-pane> </el-tab-pane>
</el-tabs> </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> </el-card>
</div> </div>
<!-- <div class="right-card" :class="{'hide': tableShow}"> <!-- <div class="right-card" :class="{'hide': tableShow}">
@ -29,7 +35,7 @@
</template> </template>
<script> <script>
import localStore from 'storejs'; import localStore from 'storejs';
import IscsPlate from '@/views/iscsSystem/index'; import iscsCanvas from './iscsCanvas';
// 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';
@ -38,7 +44,7 @@ import DataForm from '../components/dataForm';
export default { export default {
name: 'IscsView', name: 'IscsView',
components: { components: {
IscsPlate, iscsCanvas,
DataForm DataForm
}, },
data() { data() {
@ -51,6 +57,7 @@ export default {
draftShow: false, draftShow: false,
// tableShow: false, // tableShow: false,
enabledTab:'', enabledTab:'',
showDeleteButton:false,
elementList:[] elementList:[]
}; };
}, },
@ -104,7 +111,24 @@ export default {
}, },
handleTabClick() { 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> </script>
@ -119,6 +143,7 @@ export default {
flex:1; flex:1;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding-bottom:30px;
} }
.map-view { .map-view {
@ -176,6 +201,23 @@ export default {
box-shadow: -2px 0px 2px #000000; 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>
<style lang="scss"> <style lang="scss">
.heightClass .el-card__body{ .heightClass .el-card__body{

414
src/views/iscs_new/iscsDraw/iscsCanvas.vue Normal file
View 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>