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 
# Conflicts:
#	src/views/iscs_new/iscsDraw/index.vue
This commit is contained in:
joylink_cuiweidong 2021-04-09 17:05:09 +08:00
commit 14ecacf811
27 changed files with 873 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/iscs_new/controller.js
View File

@ -59,7 +59,7 @@ export default class Controller extends Eventful {
this.selectingHandle = new SelectingHandle(map, this);
this.selectHandle = new SelectHandle(map, this);
this.keyBoardHandle = new KeyBoardHandle(map, this);
this.storage = new Storage();
this._storage = new Storage();
}
initHandler(map) {
@ -147,7 +147,7 @@ export default class Controller extends Eventful {
}
isSelected(code) {
return this.storage.has(code)
return this._storage.has(code)
}
setTarget(target) {
@ -177,7 +177,7 @@ export default class Controller extends Eventful {
zr.dom.focus();
this._isNotLeftMouse = eventTool.isMiddleOrRightButtonOnMouseUpDown(e);
this.trigger(events.Selected, this._target);
this.trigger(events.Click, this._target);
this.selectingHandle.clear();
if (this._isNotLeftMouse) {
@ -324,12 +324,16 @@ export default class Controller extends Eventful {
}
clear() {
this.storage.clear();
this.storage.clearClipboard();
this._storage.clear();
this._storage.clearClipboard();
this._target = null;
this._pan = false;
}
getStorage() {
return this._storage;
}
getKeyStr() {
return this._shortcuts;
}

6
src/iscs_new/core/abstractShape.js
View File

@ -42,12 +42,16 @@ class AbstractShape extends Group {
drift({dx, dy}) {
this.model.base.position[0] = this.model.base.position[0] + dx;
this.model.base.position[1] = this.model.base.position[1] + dy;
this.instance.scale = this.model.base.scale;
this.instance.position = this.model.base.position;
this.instance.rotation = this.model.base.rotation*Math.PI/180;
this.instance.origin = utils.createOrigin(this.instance);
console.log(this.model.base.position, this.model.base.rotation);
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
this.setInvisible(this.model.base.hide)
}
// 修改属性
// 修改状态
attr(attrs) {
if (this.instance) {
this.instance.attr(attrs);

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

@ -1,38 +0,0 @@
import {elementConst} from './elementConst';
import form2Base from './form2Base';
class BuilderFactory {
constructor() {
this.formList = [];
}
getFormList() {
const elementList = Object.values(elementConst);
elementList.forEach(element=>{
const temp = {};
temp.code = element.code;
temp.name = element.name;
temp.formGroup = [];
temp.model = {};
temp.model['name'] = '<名称>';
// 添加通用配置
temp.model['base'] = {};
form2Base.forEach(each=>{
temp.model['base'][each.prop] = each.value;
});
temp.formGroup.push({name:'通用配置', code:'base', styleList:form2Base});
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});
});
this.formList.push(temp);
});
return this.formList;
}
}
export default BuilderFactory;

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

@ -5,9 +5,9 @@ import form2TextStyle from './form2TextStyle';
import types from './types';
const graphicType = Object.fromEntries(Object.keys(graphic).map(type => [type, type]));
export const elementConst = {
const elementConst = {
[graphicType.Line]: {
code: graphicType.Line,
type: graphicType.Line,
name:'线段',
formList: {
style: [
@ -66,7 +66,7 @@ export const elementConst = {
}
},
[graphicType.Text]: {
code: graphicType.Text,
type: graphicType.Text,
name:'文字',
formList: {
style: [
@ -77,7 +77,7 @@ export const elementConst = {
}
},
[graphicType.Rect]: {
code: graphicType.Rect,
type: graphicType.Rect,
name:'矩形',
formList: {
style: [
@ -158,7 +158,7 @@ export const elementConst = {
}
},
[graphicType.Circle]: {
code: graphicType.Circle,
type: graphicType.Circle,
name:'圆形',
formList:{
style: [
@ -214,7 +214,7 @@ export const elementConst = {
}
},
[graphicType.Polygon]: {
code: graphicType.Polygon,
type: graphicType.Polygon,
name:'多边形',
formList: {
style: [
@ -260,7 +260,7 @@ export const elementConst = {
}
},
[graphicType.Arrow]: {
code: graphicType.Arrow,
type: graphicType.Arrow,
name:'箭头',
formList: {
style: [
@ -272,7 +272,7 @@ export const elementConst = {
}
},
[graphicType.Polyline]: {
code: graphicType.Polyline,
type: graphicType.Polyline,
name:'多边形折线段',
formList: {
style: [
@ -308,7 +308,7 @@ export const elementConst = {
}
},
[graphicType.Isogon]: {
code: graphicType.Isogon,
type: graphicType.Isogon,
name:'正多边形',
formList: {
style: [
@ -377,7 +377,7 @@ export const elementConst = {
}
},
[graphicType.Ellipse]: {
code: graphicType.Ellipse,
type: graphicType.Ellipse,
name:'椭圆',
formList: {
style: [
@ -446,7 +446,7 @@ export const elementConst = {
}
},
[graphicType.Arc]: {
code: graphicType.Arc,
type: graphicType.Arc,
name:'圆弧',
formList: {
style: [
@ -531,7 +531,7 @@ export const elementConst = {
}
},
[graphicType.Sector]: {
code: graphicType.Sector,
type: graphicType.Sector,
name:'扇形',
formList: {
style: [
@ -638,7 +638,7 @@ export const elementConst = {
}
},
[graphicType.Heart]: {
code: graphicType.Heart,
type: graphicType.Heart,
name:'心形',
formList: {
style: [
@ -707,7 +707,7 @@ export const elementConst = {
}
},
[graphicType.Droplet]: {
code: graphicType.Droplet,
type: graphicType.Droplet,
name:'水滴',
formList: {
style: [
@ -775,3 +775,4 @@ export const elementConst = {
}
}
};
export default elementConst

67
src/iscs_new/core/form/formBuilder.js
View File

@ -1,37 +1,40 @@
class FormBuilder {
constructor(formStyle = {}) {
this.formStyle = {
style: {},
...JSON.parse(JSON.stringify(formStyle)),
}
}
import elementConst from './elementConst';
import form2Base from './form2Base';
setBase(base = {}) {
Object.assign(this.formStyle,
Object.fromEntries(
Object.entries(base).filter(el => !['style'].includes(el[0]))
)
);
return this;
}
const formBuilder = {
buildForm(el) {
const form = {};
form.type = el.type;
form.name = el.name;
form.formGroup = [];
form.model = {};
setStyle(style = {}) {
Object.assign(this.formStyle.style,
Object.fromEntries(
Object.entries(style).filter(el => !['truncate'].includes(el[0]))
)
);
return this;
}
// 添加通用配置
form.model['base'] = {};
form2Base.forEach(each=>{
form.model['base'][each.prop] = each.value;
});
form.formGroup.push({name:'通用配置', type:'base', styleList:form2Base});
setTruncate(truncate = {}) {
this.formStyle.style.truncate = { ...truncate }
return this;
}
build() {
return this.formStyle;
}
const list = [{name:'绘图配置', type:'shape'}, {name:'样式配置', type:'style'}];
list.forEach(eachType=>{
form.model[eachType.type] = {};
const eachList = el.formList[eachType.type];
eachList.forEach(each=>{
form.model[eachType.type][each.prop] = each.value;
});
form.formGroup.push({name:eachType.name, type: eachType.type, styleList:eachList});
});
return form;
},
buildFormList() {
const formList = [];
const elementList = Object.values(elementConst);
elementList.forEach(el=>{
formList.push(this.buildForm(el));
});
return formList;
}
}
export default FormBuilder;
export default formBuilder;

6
src/iscs_new/dragHandle.js
View File

@ -13,7 +13,8 @@ export default class DragHandle {
}
onDragStart(e) {
if (e.code && this.$controller.storage.has(e.code)) {
const storage = this.$controller.getStorage();
if (e.code && storage.has(e.code)) {
this._dragging = true;
}
}
@ -22,12 +23,13 @@ export default class DragHandle {
const dx = e.dx;
const dy = e.dy;
const scaleRate = this.$option.getScaleRate();
const storage = this.$controller.getStorage();
e.dx = dx / scaleRate;
e.dy = dy / scaleRate;
if (this._dragging) {
this.$controller.storage.values().forEach(target => {
storage.values().forEach(target => {
if (target) {
target.shapeFactory.hideHightLight(target);;
target.drift(e);

30
src/iscs_new/factory/compose.js
View File

@ -77,12 +77,14 @@ class Compose extends AbstractShape {
this.shapeFactory.hideHightLight(this);
this.model.elementCodes.forEach(code => {
const el = this.shapeFactory.getShapeByCode(code);
if (el &&
el.model) {
this.shapeFactory.removeFromLayer(el.type)(el);
this.instance.add(el);
el.model.composeCode = this.code;
el.attr(el.model);
if (el) {
this.shapeFactory.hideHightLight(el);
if (el.model) {
this.shapeFactory.removeFromLayer(el.type)(el);
this.instance.add(el);
el.model.composeCode = this.code;
el.attr(el.model);
}
}
})
}
@ -93,13 +95,15 @@ class Compose extends AbstractShape {
this.shapeFactory.hideHightLight(this);
this.model.elementCodes.forEach(code => {
const el = this.shapeFactory.getShapeByCode(code);
if (el &&
el.model &&
el.model.composeCode) {
this.instance.remove(el);
this.shapeFactory.addToLayer(el.type)(el);
el.model.composeCode = '';
el.attr(el.model);
if (el) {
this.shapeFactory.hideHightLight(el);
if (el.model &&
el.model.composeCode) {
this.instance.remove(el);
this.shapeFactory.addToLayer(el.type)(el);
el.model.composeCode = '';
el.attr(el.model);
}
}
})
this.model.elementCodes = [];

8
src/iscs_new/factory/element.js
View File

@ -76,11 +76,13 @@ class Element extends AbstractShape {
if (compose &&
compose.model &&
compose.model.elementCodes) {
this.shapeFactory.hideHightLight(compose);
const index = compose.model.elementCodes.findIndex(this.type);
if (index < 0) {
compose.model.elementCodes.push(this.type);
this.shapeFactory.removeFormLayer(el.type, this);
compose.add(this);
compose.instance.add(this);
compose.attr(compose.model);
}
}
}
@ -93,10 +95,12 @@ class Element extends AbstractShape {
if (compose &&
compose.model &&
compose.model.elementCodes) {
this.shapeFactory.hideHightLight(compose);
const index = compose.model.elementCodes.findIndex(this.type);
if (index >= 0) {
compose.model.elementCodes.splice(index, 1);
compose.remove(this);
compose.instance.remove(this);
compose.attr(compose.model);
this.shapeFactory.addToLayer(el.type)(this);
}
}

23
src/iscs_new/factory/index.js
View File

@ -110,11 +110,11 @@ class ShapeFactory extends Eventful {
try {
this.source = source;
zrUtil.each(source.elementList ||[], model => {
take(this.storageShape(this.createShape(model, shapeType.Element)));
take(this.addShape(this.createShape(model, shapeType.Element)));
}, this);
zrUtil.each(source.composeList ||[], model => {
take(this.storageShape(this.createShape(model, shapeType.Compose)));
take(this.addShape(this.createShape(model, shapeType.Compose)));
}, this);
} catch (error) {
console.error('[ERROR] ', error);
@ -126,14 +126,15 @@ class ShapeFactory extends Eventful {
const shapeBuilder = shapeBuilderMap[shapeType];
if (shapeBuilder) {
shape = new shapeBuilder({model, shapeType, shapeFactory: this});
shape.combine();
}
return shape;
}
storageShape(shape) {
addShape(shape) {
if (shape && shape.code) {
this.hideHightLight(shape);
this.mapShape[shape.code] = shape;
shape.combine();
}
return shape;
}
@ -141,7 +142,7 @@ class ShapeFactory extends Eventful {
removeShape(shape) {
if (shape && shape.code) {
this.hideHightLight(shape);
shape.uncouple(shape);
shape.uncouple();
delete this.mapShape[shape.code];
}
return shape;
@ -243,15 +244,15 @@ function update2List(source, model, action, name='') {
let updateModel = model;
const i = list.findIndex(elem => { return elem.code == model.code; })
switch(action.order) {
case orders.BINDING:
case orders.ADD:
list.push(model);
case orders.Binding:
case orders.Add:
i < 0 && list.push(model);
break;
case orders.UNBINDING:
case orders.DELETE:
case orders.Unbinding:
case orders.Delete:
i >= 0 && list.splice(i, 1);
break;
case orders.UPDATE:
case orders.Update:
updateModel = Object.assign(list[i]||{}, model)
break;
}

59
src/iscs_new/map.js
View File

@ -9,10 +9,10 @@ import Controller from './controller';
import StateHandle from './stateHandle';
import ShapeFactory from './factory';
import orders from './utils/orders';
import shapeType from './constant/shapeType';
const renderer = 'canvas';
const devicePixelRatio = 1;
class JMap {
constructor(opts) {
// 内部鼠标事件
@ -75,9 +75,8 @@ class JMap {
};
// 加载插件
if (opts.plugins) {
opts.plugins.forEach(el => { this.use(el); });
}
this.plugins = opts.plugins||[];
this.plugins.forEach(el => { this.use(el); });
}
setMap(templates=[], source={}, eventOpts={}) {
@ -151,7 +150,7 @@ class JMap {
repaint(source={}) {
this.$shapeFactory.parse(source, shape => {
if (shape) {
this.$painter.add(shape);
this.$painter.add(shape)
}
});
return this;
@ -168,13 +167,13 @@ class JMap {
if (updateModel) {
this.$controller.clear()
switch(action.order) {
case orders.BINDING:
case orders.ADD:
case orders.Binding:
case orders.Add:
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
this.$shapeFactory.storageShape(newShape)
this.$shapeFactory.addShape(newShape)
this.$painter.add(newShape);
break;
case orders.DELETE:
case orders.Delete:
deps = curShape.getDepShapes();
deps.forEach(el => {
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(el, {...action, shapeType: el.shapeType}): el;
@ -186,20 +185,21 @@ class JMap {
}
});
break;
case orders.UPDATE:
updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action): model;
case orders.Update:
oldShape = this.$shapeFactory.removeShape(curShape);
newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
this.$painter.removeFromLayer(oldShape.type, oldShape.instanceHightLight);
this.$painter.removeFromLayer(oldShape.type, newShape.instanceHightLight);
this.$painter.remove(oldShape);
this.$shapeFactory.storageShape(newShape)
this.$shapeFactory.addShape(newShape)
this.$painter.add(newShape);
break;
case orders.UNBINDING:
case orders.Unbinding:
oldShape = this.$shapeFactory.removeShape(curShape);
this.$painter.removeFromLayer(oldShape.type, oldShape.instanceHightLight);
this.$painter.remove(oldShape);
this.$shapeFactory.addShape(oldShape);
this.$painter.add(oldShape);
break;
}
}
@ -235,6 +235,10 @@ class JMap {
return this.$controller;
}
getStorage() {
return this.$controller.getStorage();
}
getShapeFactory() {
return this.$shapeFactory;
}
@ -275,8 +279,9 @@ class JMap {
this.$zr.refresh()
}
use(install) {
install(this);
use(el) {
this.plugins.includes(el)||this.plugins.push(el)
el.install(this);
}
destroy() {
@ -286,6 +291,10 @@ class JMap {
this.$controller.destroy();
this.$painter.destroy();
this.$zr && this.$zr.dispose();
this.plugins.forEach(el => {
el.uninstall(this);
})
this.plugins = [];
}
on(name, cb, context) {
@ -311,8 +320,8 @@ class JMap {
this.$eventEmitter.on(events.OptionUpdate, cb, context);
break;
case events.Selected:
this.$controller.on(events.Selected, cb, context);
case events.Click:
this.$controller.on(events.Click, cb, context);
break;
case events.ContextMenu:
this.$controller.on(events.ContextMenu, cb, context);
@ -332,9 +341,9 @@ class JMap {
case events.Keyup:
this.$controller.on(events.Keyup, cb, context);
break;
case events.BuildShape:
this.$controller.on(events.BuildShape, cb, context);
break;
// case events.BuildShape:
// this.$controller.on(events.BuildShape, cb, context);
// break;
}
}
}
@ -362,8 +371,8 @@ class JMap {
this.$eventEmitter.off(events.OptionUpdate, cb, context);
break;
case events.Selected:
this.$controller.off(events.Selected, cb);
case events.Click:
this.$controller.off(events.Click, cb);
break;
case events.ContextMenu:
this.$controller.off(events.ContextMenu, cb);
@ -383,9 +392,9 @@ class JMap {
case events.Keyup:
this.$controller.off(events.Keyup, cb);
break;
case events.BuildShape:
this.$controller.off(events.BuildShape, cb);
break;
// case events.BuildShape:
// this.$controller.off(events.BuildShape, cb);
// break;
}
}
}

52
src/iscs_new/plugins/shapeBuilder/entry.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<div class="builder" v-show="visible">
<div class="container">
<el-button-group>
<el-button v-for="(type,i) in graphicType" :key="i" @click="doBuilder(type)">
{{type}}
</el-button>
</el-button-group>
</div>
</div>
</template>
<script>
import * as graphic from '../../core/graphic';
import * as utils from '@/iscs_new/utils/utils';
import shapeType from '@/iscs_new/constant/shapeType.js';
import orders from '@/iscs_new/utils/orders';
import elementConst from '@/iscs_new/core/form/elementConst';
import formBuilder from '@/iscs_new/core/form/formBuilder';
export default {
data () {
return {
visible: true,
graphicType: Object.fromEntries(Object.keys(graphic).filter(type => !['Group'].includes(type)).map(type => [type, type]))
};
},
methods: {
doBuilder(type) {
console.log(elementConst, type)
const form = formBuilder.buildForm(elementConst[type]);
const model = utils.deepClone(form.model);
model.code = utils.getUID(type);
model.type = type;
model.name = '<名称>';
model.base.position = [300, 100];
model.stateList = [];
this.$iscs && this.$iscs.render([{model, action: {shapeType: shapeType.Element, order: orders.Add}}]);
}
}
};
</script>
<style lang="scss" scoped>
.builder {
background: #f1f1f1;
height: 100%;
width: 120px;
position: absolute;
top: 0;
}
</style>

89
src/iscs_new/plugins/shapeBuilder/index.js
View File

@ -1,80 +1,67 @@
import Vue from 'vue';
import shapeTypeSelect from './shapeTypeSelect.vue';
import events from '@/iscs_new/utils/events';
import entry from './entry.vue';
const GrSelect = Vue.extend(shapeTypeSelect);
const toggleVisible = (el, show) => {
if (show) {
Vue.nextTick(() => {
el.instance.visible = true;
});
} else {
el.instance.visible = false;
}
};
class Handle {
constructor() {
this._shapeType = '';
}
accept({shapeType}) {
console.log(111111111111111, 'accept')
this._shapeType = shapeType;
}
onSelect(e) {
// console.log('onSelect', e)
}
const VuePage = Vue.extend(entry);
const handle = {
onClick(e) {
if (!e) {
this.page.type = '';
}
},
onContextMenu(e) {
// console.log('onContextMenu', e)
}
onBuildShape(e) {
// console.log('onBuildShape', e)
if (!e) {
this.page.type = '';
}
}
}
class ShapeBuilder {
constructor(map, handle) {
constructor(map) {
this.zr = map.getZr();
this.map = map;
this.handle = handle;
this.initUI(map.getZr());
this.page = this.initUI();
}
initUI(zr) {
const el = zr.dom;
const grSelect = new GrSelect({
initUI() {
const el = this.zr.dom;
const page = new VuePage({
el: document.createElement('div'),
data () {}
});
el.instance = grSelect;
el.dom = grSelect.$el;
el.page = page;
el.dom = page.$el;
el.grSelectStyle = {};
el.appendChild(el.dom);
el.instance.$on('change', e => this.handle.accept(e));
this.grSelect = grSelect;
return page;
}
addEventListener() {
if (this.map) {
this.map.on(events.Select, this.handle.onSelect, this.handle);
this.map.on(events.ContextMenu, this.handle.onContextMenu, this.handle);
this.map.on(events.BuildShape, this.handle.onBuildShape, this.handle);
this.map.on(events.Click, handle.onClick, this);
this.map.on(events.ContextMenu, handle.onContextMenu, this);
}
}
removeEventListener() {
if (this.zr) {
this.map.off(events.Select, this.handle.onSelect, this.handle);
this.map.off(events.ContextMenu, this.handle.onContextMenu, this.handle);
this.map.off(events.BuildShape, this.handle.onBuildShape, this.handle);
if (this.map) {
this.map.off(events.Click, handle.onClick, this);
this.map.off(events.ContextMenu, handle.onContextMenu, this);
}
}
}
export default function install(map) {
const shapeBuilder = new ShapeBuilder(map, new Handle());
export default {
el: null,
install(map) {
this.el = new ShapeBuilder(map);
this.el.addEventListener();
},
uninstall(map) {
if (this.el) {
this.el.removeEventListener();
this.el = null;
}
}
}

24
src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue
View File

@ -1,24 +0,0 @@
<template>
<div v-show="visible">
<div class="loading__container">
111111111
</div>
</div>
</template>
<script>
export default {
data () {
return {
visible: true,
};
},
mounted() {
this.$emit('change', {shapeType: 'Rect'});
}
};
</script>
<style lang="scss" scoped>
</style>

121
src/iscs_new/plugins/shapeContextMenu/entry.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<div class="container">
<div v-if="visible" class="menus" :style="{ left: position.x+'px', top: position.y+'px' }">
<menu-item v-for="(el, i) in menus" :key="i" :option="el" @close="doClose" />
</div>
</div>
</template>
<script>
import MenuItem from './menu-item';
import shapeType from '@/iscs_new/constant/shapeType.js';
import orders from '@/iscs_new/utils/orders';
import * as utils from '@/iscs_new/utils/utils';
export default {
components: {
MenuItem
},
data () {
return {
visible: true,
selected: null,
position: {
x: 0,
y: 0
},
menus: [],
list: [
{
label: '组合',
handler: this.doBinding,
disabledCb: selected => {
const storage = this.$iscs.getController().getStorage();
return storage.values().length <= 1;
}
},
{
label: '解组',
handler: this.unBinding,
disabledCb: selected => {
return selected.shapeType != shapeType.Compose;
}
}
]
};
},
methods: {
doShow(point) {
this.menus = this.list.map(el => { el.disabled = el.disabledCb(this.selected); return el} );
if (this.menus &&
this.menus.length) {
this.position = {...point}
this.visible = true;
}
},
doClose() {
this.position = {x: 0, y: 0};
this.visible = false;
},
doBinding(el) {
const controller = this.$iscs.getController();
const storage = controller.getStorage()
const values = storage.values();
if (values.length > 1) {
const elem = {
model: {
code: utils.getUID('compose'),
type: 'Device',
elementCodes: values.map(el => el.model.code),
base: {
scale: [1, 1],
position: [0, 0],
rotation: 0,
hide: false,
},
composeCode: '',
},
action: { order: orders.Binding, shapeType: shapeType.Compose }
}
this.$iscs.render([elem]);
} else {
this.$message.info('请选择两个及其以上数目元素');
}
},
unBinding(el) {
console.log(this.selected);
if (this.selected) {
this.$iscs.render([
{
model: this.selected.model,
action: { order: orders.Unbinding, shapeType: shapeType.Compose }
}
]);
}
}
}
};
</script>
<style lang="scss" scoped>
.container {
position: absolute;
height: 100%;
width: 100%;
z-index: 2000;
top: 0;
left: 0;
pointer-events: none;
overflow: hidden;
.menus {
position: absolute;
pointer-events: all;
background: #f1f1f1;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
&::-webkit-scrollbar {
display:none;
}
}
</style>

79
src/iscs_new/plugins/shapeContextMenu/index.js Normal file
View File

@ -0,0 +1,79 @@
import Vue from 'vue';
import events from '@/iscs_new/utils/events';
import entry from './entry.vue';
const elPage = Vue.extend(entry);
const toggling = (page, e) => {
if (e&&e.code) {
Vue.nextTick(() => {
page.doShow({x: e.clientX, y: e.clientY});
});
} else {
page.doClose();
}
};
const handle = {
onClick(e) {
if (this.page) {
this.page.selected = e;
toggling(this.page, {});
}
},
onContextMenu(e) {
if (this.page) {
toggling(this.page, e);
}
}
}
class ShapeBuilder {
constructor(map) {
this.zr = map.getZr();
this.map = map;
this.page = this.initUI();
}
initUI() {
const el = this.zr.dom;
const page = new elPage({
el: document.createElement('div'),
data () {}
});
el.page = page;
el.dom = page.$el;
el.grSelectStyle = {};
el.appendChild(el.dom);
return page;
}
addEventListener() {
if (this.map) {
this.map.on(events.Click, handle.onClick, this);
this.map.on(events.ContextMenu, handle.onContextMenu, this);
}
}
removeEventListener() {
if (this.map) {
this.map.off(events.Click, handle.onClick, this);
this.map.off(events.ContextMenu, handle.onContextMenu, this);
}
}
}
export default {
el: null,
install(map) {
this.el = new ShapeBuilder(map);
this.el.addEventListener();
},
uninstall(map) {
if (this.el) {
this.el.removeEventListener();
this.el = null;
}
}
}

202
src/iscs_new/plugins/shapeContextMenu/menu-item.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<li v-if="option.children && option.children.length" class="menu-item" @mouseenter="enter($vnode.key)" @mouseleave="leave">
<div ref="flexBox" class="flex-box">
<el-button type="text" class="item" :disabled="checkDisabled(option)">
<el-link v-if="option.tipsType" :type="option.tipsType" :underline="false">{{ option.label }}</el-link>
<span v-else :style="{color: textColor(option) }">{{ option.label }}</span>
</el-button>
<i class="el-icon-arrow-right" />
</div>
<ul v-if="isPopup" ref="popup" class="menu" :style="{display: isShow? 'block': 'table', marginLeft: marginLeft+'px'}">
<div class="menu-pop pop-menu">
<div v-show="isShow" class="arrow el-icon-arrow-down" />
<pop-menu-item v-for="(el, i) in option.children" :key="i" :option="el" :allowedColor="allowedColor" :disabledColor="disabledColor" @close="close" />
<div v-show="isShow" class="arrow el-icon-arrow-up" />
</div>
</ul>
</li>
<li v-else-if="checkVisible(option)" class="menu-item" >
<div v-if="option.type === 'separator'" class="separator">&ensp;</div>
<el-button v-else-if="option.type ==='file'" type="text" class="uploadDemo item" :disabled="checkDisabled(option)">
<input :ref="option.label" type="file" class="file_box" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="doHandle(option, true)">
<el-link v-if="option.tipsType" :type="option.tipsType" :underline="false">{{ option.label }} </el-link>
<span v-else :style="{color: textColor(option) }">{{ option.label }}</span>
</el-button>
<el-button v-else type="text" class="item" :disabled="checkDisabled(option)" @click="doHandle(option, false)">
<el-link v-if="option.tipsType" :type="option.tipsType" :underline="false">{{ option.label }}</el-link>
<span v-else :style="{color: textColor(option) }">{{ option.label }}</span>
</el-button>
</li>
</template>
<script>
export default {
name: 'PopMenuItem',
props: {
option: {
type: Object,
default() {
return [];
}
},
disabled: {
type: Boolean,
default: false
},
disabledColor: {
type: String,
default: '#ccc',
},
allowedColor: {
type: String,
default: '#000'
}
},
data() {
return {
active: -1
};
},
computed: {
isPopup() {
return this.active == this.$vnode.key;
},
isShow() {
return this.option.children.length > 12;
},
marginLeft() {
return this.$refs.flexBox.offsetWidth;
}
},
methods: {
checkDisabled(option) {
return option.disabled || this.disabled;
},
checkVisible(option) {
if (typeof (option.show) === 'undefined') {
return true;
} else {
return option.show;
}
},
textColor(option) {
return this.checkDisabled(option) ? this.disabledColor : this.allowedColor;
},
doHandle(option, isFile) {
if (option.handler && !this.checkDisabled(option)) {
if (isFile) {
const obj = this.$refs[option.label][0];
if (obj.files) {
const file = obj.files[0];
option.handler(file);
obj.value = '';
}
} else {
option.handler(option);
}
this.close();
}
},
close() {
this.$emit('close');
},
enter(active) {
this.active = active;
},
leave(e) {
this.active = -1;
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #FFFFFF;
$item-hover: #CFE8FC;
$item-text: #606266;
$item-separator: #666;
$item-border: #909399;
$item-disabled: #cccccc;
$item-height: 30px;
/deep/ {
.el-button--text {
padding: 6px 15px;
text-align: left;
}
}
.menu {
padding: 0;
position: absolute;
margin-top: -$item-height - 1;
max-height: 360px;
overflow: auto;
&-pop {
display:table;
border: 1px solid $item-border;
.arrow {
display: flex;
justify-content: center;
background: $bg;
}
}
&::-webkit-scrollbar {
display:none;
}
}
.flex-box{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding-right: 3px;
}
.menu-item {
list-style: none;
min-width: 110px;
border-bottom: 1px solid #ebeef5;
box-sizing: content-box;
}
.menu-item:hover {
background: $item-hover;
}
.separator {
background: $item-separator;
width: 100%;
height: 1px;
position: relative;
}
.item {
color: $item-text;
height: $item-height;
width: 100%;
}
.uploadDemo {
position: relative;
overflow: hidden;
width: 100%;
cursor: pointer;
border: 1px solid transparent;
color: $item-text;
input {
opacity: 0;
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
}
}
</style>

36
src/iscs_new/plugins/shapeProperty/entry.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<el-drawer
class="property"
title="我是标题"
:modal="false"
:visible.sync="visible"
:with-header="false">
<div class="container">
<span>我来啦!</span>
</div>
</el-drawer>
</template>
<script>
export default {
data () {
return {
visible: true
};
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.property {
pointer-events: none;
position: absolute;
top: 0;
.container {
padding: 30px;
}
}
</style>

77
src/iscs_new/plugins/shapeProperty/index.js Normal file
View File

@ -0,0 +1,77 @@
import Vue from 'vue';
import events from '@/iscs_new/utils/events';
import entry from './entry.vue';
const elPage = Vue.extend(entry);
const toggling = (page, e) => {
if (!!e) {
Vue.nextTick(() => {
page.visible = true;
});
} else {
page.visible = false;
}
};
const handle = {
onClick(e) {
toggling(this.page, e);
},
onContextMenu(e) {
},
onModify(e) {
},
onDelete(e) {
}
}
class ShapeBuilder {
constructor(map) {
this.zr = map.getZr();
this.map = map;
this.page = this.initUI();
}
initUI() {
const el = this.zr.dom;
const page = new elPage({
el: document.createElement('div'),
data () {}
});
el.page = page;
el.dom = page.$el;
el.grSelectStyle = {};
el.appendChild(el.dom);
return page;
}
addEventListener() {
if (this.map) {
this.map.on(events.Click, handle.onClick, this);
this.map.on(events.ContextMenu, handle.onContextMenu, this);
}
}
removeEventListener() {
if (this.map) {
this.map.off(events.Click, handle.onClick, this);
this.map.off(events.ContextMenu, handle.onContextMenu, this);
}
}
}
export default {
el: null,
install(map) {
this.el = new ShapeBuilder(map);
this.el.addEventListener();
},
uninstall(map) {
if (this.el) {
this.el.removeEventListener();
this.el = null;
}
}
}

12
src/iscs_new/selectHandle.js
View File

@ -13,6 +13,7 @@ export default class SelectHandle {
onSelected(e) {
if (e.target) {
const storage = this.$controller.getStorage();
this.e = {...e};
if ([`Control`].includes(this.$controller.getKeyStr())) {
if (this.$controller.isSelected(e.target.code)) {
@ -21,7 +22,7 @@ export default class SelectHandle {
} else {
this.addSelected(e.target);
}
} else if (!this.$controller.storage.has(e.target.code)){
} else if (!storage.has(e.target.code)){
this.clear();
this.addSelected(e.target);
} else {
@ -31,17 +32,20 @@ export default class SelectHandle {
}
addSelected(target) {
this.$controller.storage.set(target.code, target);
const storage = this.$controller.getStorage();
storage.set(target.code, target);
target.shapeFactory.showHightLight(target);
}
delSelected(target) {
const storage = this.$controller.getStorage();
target.shapeFactory.hideHightLight(target);;
this.$controller.storage.delete(target.code);
storage.delete(target.code);
}
clear() {
this.$controller.storage.values().forEach(target => {
const storage = this.$controller.getStorage();
storage.values().forEach(target => {
this.delSelected(target);
});
}

9
src/iscs_new/selectingHandle.js
View File

@ -260,15 +260,16 @@ export default class SelectingHandle {
}
});
if (['Alt'].includes(keyStr)) {
this.$controller.trigger(events.BuildShape, {...selectingRect, option: this.$map.getOption()});
}
// if (['Alt'].includes(keyStr)) {
// this.$controller.trigger(events.BuildShape, {...selectingRect, option: this.$map.getOption()});
// }
this.clear();
}
setSelected(target) {
this.$controller.storage.set(target.code, target);
const storage = this.$controller.getStorage();
storage.set(target.code, target);
target.shapeFactory.showHightLight(target);
}

4
src/iscs_new/utils/events.js
View File

@ -1,6 +1,6 @@
export default {
Reflect: 'reflect',
Selected: 'selected',
Click: 'click',
ContextMenu: 'contextmenu',
DataZoom: 'dataZoom',
Keydown: 'keydown',
@ -12,5 +12,5 @@ export default {
ViewUpdate: 'viewUpdate',
StateUpdate: 'stateUpdate',
OptionUpdate: 'optionUpdate',
BuildShape: 'buildShape'
// BuildShape: 'buildShape'
}

10
src/iscs_new/utils/orders.js
View File

@ -1,7 +1,7 @@
export default {
ADD: '&ADD',
DELETE: '&DEL',
UPDATE: '&UPT',
BINDING: '&BINDING',
UNBINDING: '&UNBINDING',
Add: '&Add',
Delete: '&DEL',
Update: '&UPT',
Binding: '&Binding',
Unbinding: '&Unbinding',
}

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

@ -16,8 +16,8 @@
{{ styleGroup.name }}
</div>
<template v-for="item in styleGroup.styleList">
<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 }} -->
<el-form-item :key="item.prop" :prop="styleGroup.type+'.'+item.prop" :label="item.label" class="formName" :rules="item.rules?item.rules:[]">
<!-- {{ tempModel=styleGroup.type?formModel[styleGroup.type]:formModel }} -->
<el-tooltip
v-if="item.description"
:id="item.prop"
@ -32,7 +32,7 @@
<template v-if="checkFieldType(item, 'Number')">
<el-input-number
v-if="item.precision!=undefined"
v-model="formModel[styleGroup.code][item.prop]"
v-model="formModel[styleGroup.type][item.prop]"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
@ -41,7 +41,7 @@
/>
<el-input-number
v-else
v-model="formModel[styleGroup.code][item.prop]"
v-model="formModel[styleGroup.type][item.prop]"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
:max="isNaN(item.max)? Infinity : item.max"
@ -50,7 +50,7 @@
</template>
<template v-else-if="checkFieldType(item, 'Boolean')">
<el-switch
v-model="formModel[styleGroup.code][item.prop]"
v-model="formModel[styleGroup.type][item.prop]"
style="vertical-align: top;"
size="small"
:active-color="item.activeColor || '#409eff'"
@ -59,7 +59,7 @@
</template>
<template v-else-if="checkFieldType(item, 'Color')">
<el-color-picker
v-model="formModel[styleGroup.code][item.prop]"
v-model="formModel[styleGroup.type][item.prop]"
show-alpha
size="small"
/>
@ -68,7 +68,7 @@
<el-input-number
v-for="count in item.length"
:key="count"
v-model="formModel[styleGroup.code][item.prop][count-1]"
v-model="formModel[styleGroup.type][item.prop][count-1]"
style="margin:6px 0px 0px 5px"
size="small"
:min="isNaN(item.min) ? -Infinity : item.min"
@ -79,16 +79,16 @@
</template>
<template v-else-if="checkFieldType(item, 'Points')">
<div class="point-section">
<template v-for="(point, j) in formModel[styleGroup.code][item.prop]">
<template v-for="(point, j) in formModel[styleGroup.type][item.prop]">
<div :key="j" style="overflow: hidden;">
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.code],item.prop)" />
<el-input-number v-model="point[0]" size="mini" @blur="changeNumber(0,j,formModel[styleGroup.type],item.prop)" />
<span class="pointSplice">, </span>
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.code],item.prop)" />
<el-input-number v-model="point[1]" size="mini" @blur="changeNumber(1,j,formModel[styleGroup.type],item.prop)" />
<el-button
icon="el-icon-plus"
circle
class="point-button"
@click="addPoint(j,formModel[styleGroup.code],item.prop)"
@click="addPoint(j,formModel[styleGroup.type],item.prop)"
/>
<el-button
icon="el-icon-minus"
@ -96,7 +96,7 @@
circle
class="point-button"
style="margin-left: 4px;"
@click="delPoint(j,formModel[styleGroup.code],item.prop)"
@click="delPoint(j,formModel[styleGroup.type],item.prop)"
/>
</div>
</template>
@ -105,7 +105,7 @@
<template v-else-if="checkFieldType(item, 'Select')">
<el-select
:ref="'select_'+item.prop"
v-model="formModel[styleGroup.code][item.prop]"
v-model="formModel[styleGroup.type][item.prop]"
size="small"
>
<el-option
@ -118,7 +118,7 @@
</template>
<template v-else-if="checkFieldType(item, 'String')">
<el-input
v-model="formModel[styleGroup.code][item.prop]"
v-model="formModel[styleGroup.type][item.prop]"
size="small"
type="text"
style="width:200px"

4
src/views/iscs_new/iscsDesign/index.vue
View File

@ -32,7 +32,7 @@
<script>
import localStore from 'storejs';
import iscsCanvas from './iscsCanvas';
import BuilderFactory from '@/iscs_new/core/form/builderFactory';
import formBuilder from '@/iscs_new/core/form/formBuilder';
import DataForm from '../components/dataForm';
import orders from '@/iscs_new/utils/orders';
import * as utils from '@/iscs_new/utils/utils';
@ -70,7 +70,7 @@ export default {
},
mounted() {
this.composeName = this.$route.query.composeName;
this.elementList = new BuilderFactory().getFormList();
this.elementList = formBuilder.buildFormList();
this.enabledTab = this.elementList[0].code;
},
beforeDestroy() {

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

@ -8,7 +8,6 @@
<div class="btn_draft_box" @click="draftShow = !draftShow"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
<el-card type="border-card" class="heightClass">
<div slot="header" class="clearfix">
<div style="display:inline-block">组件id：{{ $route.query.id }}</div>
<el-button
type="text"
style="float: right; padding: 3px 0; margin-right: 5px;"
@ -44,12 +43,12 @@
<script>
import localStore from 'storejs';
import iscsCanvas from './iscsCanvas';
import BuilderFactory from '@/iscs_new/core/form/builderFactory';
import formBuilder from '@/iscs_new/core/form/formBuilder';
import DataForm from '../components/dataForm';
import TableForm from '../components/tableForm';
import orders from '@/iscs_new/utils/orders';
import * as utils from '@/iscs_new/utils/utils';
import idb from '../utils/indexedDb.js';
import Idb from '../utils/indexedDb.js';
import shapeType from '@/iscs_new/constant/shapeType.js';
export default {
@ -111,9 +110,9 @@ export default {
(temp, el) => el && temp ? temp.union(el.getBoundingRect().clone()) : el.getBoundingRect(), null);
const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0];
const model = { id, name, type, shapeList, position };
idb.delete('composeList', model.id);
idb.write('composeList', model);
idb.list('composeList').then(list => {
Idb.delete('composeList', model.id);
Idb.write('composeList', model);
Idb.list('composeList').then(list => {
console.log(list);
});
}
@ -141,12 +140,12 @@ export default {
this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) {
const formModel = this.$refs['dataform' + this.enabledTab][0].formModel;
const newModel = JSON.parse(JSON.stringify(formModel));
const newModel = utils.deepClone(formModel);
newModel.code = utils.getUID(this.enabledTab);
newModel.type = this.enabledTab;
// newModel.name = '<名称>';
newModel.name = '<名称>';
newModel.stateList = [];
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.Add}}]);
this.clear(this.enabledTab);
this.getComposeElemList();
}
@ -155,11 +154,11 @@ export default {
onModify() {
this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) {
const model = this.$refs['dataform' + this.enabledTab][0].formModel;
const model = utils.deepClone(this.$refs['dataform' + this.enabledTab][0].formModel);
model.code = this.selected.code;
model.type = this.selected.type;
model.name = this.selected.name;
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]);
this.clear(this.enabledTab);
}
});
@ -167,11 +166,11 @@ export default {
onDelete() {
this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
if (valid) {
const model = this.$refs['dataform' + this.enabledTab][0].formModel;
const model = utils.deepClone(this.$refs['dataform' + this.enabledTab][0].formModel);
model.code = this.selected.code;
model.type = this.selected.type;
model.name = this.selected.name;
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Delete}}]);
this.clear(this.enabledTab);
this.getComposeElemList();
}

19
src/views/iscs_new/iscsDraw/iscsCanvas.vue
View File

@ -7,7 +7,10 @@
<script>
import Vue from 'vue';
import Iscs from '@/iscs_new/map';
import idb from '../utils/indexedDb.js';
import Idb from '../utils/indexedDb.js';
import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
import ShapeContextMenu from '@/iscs_new/plugins/shapeContextMenu';
import { mapGetters } from 'vuex';
export default {
@ -77,7 +80,12 @@ export default {
scaleRate: 1,
offsetX: 0,
offsetY: 0
}
},
plugins: [
ShapeBuilder,
// ShapeProperty,
ShapeContextMenu
]
});
const option = {
@ -91,7 +99,7 @@ export default {
}
if (this.$route.query.id) {
setTimeout(_ => {
idb.select('composeList', this.$route.query.id).then(resp => {
Idb.select('composeList', this.$route.query.id).then(resp => {
this.$iscs.setMap([], {
elementList: resp.shapeList||[],
composeList: []
@ -113,7 +121,7 @@ export default {
Vue.prototype.$iscs = this.$iscs;
this.$iscs.on('viewLoaded', this.onViewLoaded, this);
this.$iscs.on('contextmenu', this.onContextMenu, this);
this.$iscs.on('selected', this.onSelected, this);
this.$iscs.on('click', this.onClick, this);
this.$iscs.on('reflect', this.onReflect, this);
this.$iscs.on('keyboard', this.onKeyboard, this);
window.document.oncontextmenu = function () {
@ -128,7 +136,8 @@ export default {
console.log(hook);
},
// 点击选择事件
onSelected(em={}) {
onClick(em={}) {
console.log(em);
this.$emit('selected', em);
},
onReflect(em={}) {

118
src/views/test/index.vue
View File

@ -1,14 +1,13 @@
<template>
<div>
<div>
<el-row>
<el-input type="textarea" :rows="4" v-model="json" />
<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" />
<el-button-group>
<el-button @click="doRemove"> 删除 </el-button>
<el-button @click="doBinding">绑定</el-button>
<el-button @click="doUnbinding">解绑</el-button>
<el-button @click="doSource"> 源数据 </el-button>
</el-button-group>
<el-input type="textarea" :rows="6" v-model="json" />
</div>
</template>
@ -17,10 +16,12 @@ 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 shapeBuilderPlugin from '@/iscs_new/plugins/shapeBuilder';
import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
import ShapeContextMenu from '@/iscs_new/plugins/shapeContextMenu';
import { mapGetters } from 'vuex';
import { exitFullscreen } from '@/utils/screen';
import * as utils from '@/iscs_new/utils/utils';
export default {
data() {
@ -92,15 +93,19 @@ export default {
offsetY: 0
},
plugins: [
shapeBuilderPlugin
ShapeBuilder,
ShapeProperty,
ShapeContextMenu
]
});
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('click', this.onClick, this);
this.$iscs.on('keyboard', this.onKeyboard, this);
const opts = { panEnable: true, zoomEnable: true, keyEnable: true, draggle: true, selecting: true, selectable: true, reflect: true }
this.$iscs.setMap([
{
type: 'Device',
@ -334,15 +339,7 @@ export default {
composeCode: ''
}
]
}, {
panEnable: true,
zoomEnable: true,
keyEnable: true,
draggle: true,
selecting: true,
selectable: true,
reflect: true
});
}, opts);
window.document.oncontextmenu = function () {
return false;
@ -365,15 +362,62 @@ export default {
console.log(hook);
},
// 点击选择事件
onSelected(em) {
onClick(em) {
this.selected = em;
console.log(em, 'selected');
},
// 右键点击事件
onContextMenu(em) {
this.selected = em;
console.log(em, 'contextMenu');
},
doRemove() {
if (this.selected) {
this.$iscs.render([
{
model: this.selected.model,
action: { order: orders.Delete, shapeType: shapeType.Compose }
}
]);
}
},
doBinding() {
const controller = this.$iscs.getController();
const storage = controller.getStorage()
const values = storage.values();
if (values.length > 1) {
const elem = {
model: {
code: utils.getUID('compose'),
type: 'Device',
elementCodes: values.map(el => el.model.code),
base: {
scale: [1, 1],
position: [0, 0],
rotation: 0,
hide: false,
},
composeCode: '',
},
action: { order: orders.Binding, shapeType: shapeType.Compose }
}
this.$iscs.render([elem]);
} else {
this.$message.info('请选择两个及其以上数目元素');
}
},
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())
},
resize() {
this.$nextTick(() => {
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
@ -398,31 +442,7 @@ export default {
},
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>