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

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

@ -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
src/iscs_new/core/form/form2Base.js
View File

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

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

@ -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: '阴影模糊大小。'
},

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

@ -203,7 +203,7 @@ export default [
{ required: true, message:'请输入文字阴影颜色', trigger: 'blur' }
],
value: '',
description: "文字阴影颜色。"
description: '文字阴影颜色。'
},
{
prop: 'textShadowBlur',
@ -255,7 +255,7 @@ export default [
{ required: true, message:'请输入文字包围盒阴影颜色', trigger: 'blur' }
],
value: 'transparent',
description: "文字包围盒阴影颜色。"
description: '文字包围盒阴影颜色。'
},
{
prop: 'textBoxShadowBlur',
@ -307,7 +307,7 @@ export default [
{ required: true, message:'请选择文字是否跟随变换效果', trigger: 'blur' }
],
value: false,
description: "文字是否跟随变换效果，仅对 Path 或 Image 元素有效"
description: '文字是否跟随变换效果，仅对 Path 或 Image 元素有效'
},
{
prop: 'textRotation',
@ -345,7 +345,7 @@ export default [
{ required: true, message:'请输入文字包围盒颜色', trigger: 'blur' }
],
value: '',
description: "文字包围盒颜色。"
description: '文字包围盒颜色。'
},
{
prop: 'textBorderColor',
@ -355,7 +355,7 @@ export default [
{ required: true, message:'请输入文字包围盒描边颜色', trigger: 'blur' }
],
value: '',
description: "文字包围盒描边颜色。"
description: '文字包围盒描边颜色。'
},
{
prop: 'textBorderWidth',
@ -397,6 +397,6 @@ export default [
{ 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，单位是像素。'
}
]
];

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

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

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

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