Merge branch 'iscs' of https://git.code.tencent.com/lian-cbtc/jl-client into iscs
# Conflicts: # src/views/iscs_new/iscsDraw/index.vue
This commit is contained in:
commit
4d37cc9267
@ -14,7 +14,7 @@ class MouseEvent {
|
|||||||
this.clientX = e.event.clientX;
|
this.clientX = e.event.clientX;
|
||||||
this.clientY = e.event.clientY;
|
this.clientY = e.event.clientY;
|
||||||
|
|
||||||
if (shape && !['@selecting', '@border', '@drag'].includes(shape.subType)) {
|
if (shape && !['@ignore', '@selecting', '@border', '@drag'].includes(shape.subType)) {
|
||||||
if (shape.code) {
|
if (shape.code) {
|
||||||
let composeCode = shape.composeCode;
|
let composeCode = shape.composeCode;
|
||||||
let compose = null;
|
let compose = null;
|
||||||
@ -143,7 +143,7 @@ export default class Controller extends Eventful {
|
|||||||
}
|
}
|
||||||
|
|
||||||
isSpecialSubType(e) {
|
isSpecialSubType(e) {
|
||||||
return ['@drag', '@border', '@selecting'].includes(e.subType);
|
return ['@ignore', '@selecting', '@drag', '@border'].includes(e.subType);
|
||||||
}
|
}
|
||||||
|
|
||||||
isSelected(code) {
|
isSelected(code) {
|
||||||
|
@ -1,132 +0,0 @@
|
|||||||
|
|
||||||
import _ from 'lodash';
|
|
||||||
import * as graphic from '../core/graphic';
|
|
||||||
import * as eventTool from 'zrender/src/core/event';
|
|
||||||
import Group from 'zrender/src/container/Group';
|
|
||||||
import shapeRender from '../constant/shapeRender';
|
|
||||||
|
|
||||||
function shapeStyleBuilder({subType, shape}) {
|
|
||||||
return {
|
|
||||||
...shapeRender,
|
|
||||||
subType,
|
|
||||||
z: 9998,
|
|
||||||
draggable: false,
|
|
||||||
cursor: 'crosshair',
|
|
||||||
shape,
|
|
||||||
style: {
|
|
||||||
fill: `rgba(200,200,200,0.5)`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default class ImageDraggable extends Group {
|
|
||||||
constructor(handle, draggle=false) {
|
|
||||||
super();
|
|
||||||
this.draggle = draggle;
|
|
||||||
this.handle = handle;
|
|
||||||
this.style = handle.$map.getDefaultStyleDict();
|
|
||||||
this.invTransform = [1, 0, 0, 1, 0, 0];
|
|
||||||
this.target = null;
|
|
||||||
this.shapes = [];
|
|
||||||
this.offset = null;
|
|
||||||
this.r = 2;
|
|
||||||
|
|
||||||
if (this.draggle &&
|
|
||||||
this.handle.e.target &&
|
|
||||||
this.handle.e.target.instance) {
|
|
||||||
const bound = this.handle.e.target.instance.getBoundingRect();
|
|
||||||
const r = (this.handle.e.target.model.width||this.r)+3;
|
|
||||||
this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y, r}));
|
|
||||||
this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y, r}));
|
|
||||||
this.shapes.push(this.createShape({ cx: bound.x+bound.width, cy: bound.y+bound.height, r}));
|
|
||||||
this.shapes.push(this.createShape({ cx: bound.x, cy: bound.y+bound.height, r}));
|
|
||||||
this.shapes.forEach(shape => { this.add(shape); });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
createShape(shape) {
|
|
||||||
return new graphic.Circle({
|
|
||||||
...shapeStyleBuilder({subType: '@drag', shape}),
|
|
||||||
onmousedown: this.mousedown.bind(this),
|
|
||||||
onmousemove: _.throttle(this.mousemove.bind(this), 100),
|
|
||||||
onmouseup: this.mouseup.bind(this)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
updateShapeRect(dx, dy) {
|
|
||||||
const index = this.shapes.indexOf(this.target);
|
|
||||||
if (index >= 0) {
|
|
||||||
this.shapes[(3-index)%4].setShape({cx: this.shapes[(3-index)%4].shape.cx+dx});
|
|
||||||
this.shapes[(5-index)%4].setShape({cy: this.shapes[(5-index)%4].shape.cy+dy});
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.getBoundingRect().clone();
|
|
||||||
}
|
|
||||||
|
|
||||||
updateModel(target, bound) {
|
|
||||||
target.model.width = bound.width-this.r*2;
|
|
||||||
target.model.height = bound.height-this.r*2;
|
|
||||||
}
|
|
||||||
|
|
||||||
setShape(dx, dy) {
|
|
||||||
const bound = this.updateShapeRect(dx, dy);
|
|
||||||
|
|
||||||
if (this.handle.e.target &&
|
|
||||||
this.handle.e.target.instance) {
|
|
||||||
this.handle.e.target.model.point = { x: bound.x+this.r, y: bound.y+this.r };
|
|
||||||
|
|
||||||
this.handle.e.target.instance.inactive(this.handle.$zr);
|
|
||||||
this.handle.e.target.instance.setShape(this.handle.e.target.model);
|
|
||||||
this.handle.e.target.instance.active(this.handle.$zr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mousedown(e) {
|
|
||||||
if (e.target && ['@selecting', '@border', '@drag'].includes(e.target.subType)) {
|
|
||||||
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
|
|
||||||
this.target = e.target;
|
|
||||||
this.offset = {x: e.offsetX, y: e.offsetY};
|
|
||||||
this.setDraggable(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mousemove(e) {
|
|
||||||
eventTool.stop(e.event);
|
|
||||||
if (this.target &&
|
|
||||||
this.handle.e.target &&
|
|
||||||
this.offset) {
|
|
||||||
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
|
|
||||||
const type = this.handle.e.target.type;
|
|
||||||
const dx = Math.round(e.offsetX-this.offset.x);
|
|
||||||
const dy = Math.round(e.offsetY-this.offset.y);
|
|
||||||
|
|
||||||
this.setShape(...this.handle.normalizedDiff(dx, dy));
|
|
||||||
this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy});
|
|
||||||
|
|
||||||
this.offset = {x: e.offsetX, y: e.offsetY};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mouseup(e) {
|
|
||||||
if (this.target &&
|
|
||||||
this.handle.e.target &&
|
|
||||||
this.offset) {
|
|
||||||
const type = this.handle.e.target.type;
|
|
||||||
const dx = Math.round(e.offsetX-this.offset.x);
|
|
||||||
const dy = Math.round(e.offsetY-this.offset.y);
|
|
||||||
this.setShape(...this.handle.normalizedDiff(dx, dy));
|
|
||||||
this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy});
|
|
||||||
|
|
||||||
this.setDraggable(false);
|
|
||||||
this.offset = null;
|
|
||||||
this.target = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setDraggable(draggable) {
|
|
||||||
this.shapes.forEach(shape => {
|
|
||||||
shape.attr('draggable', draggable);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,126 +0,0 @@
|
|||||||
import _ from 'lodash';
|
|
||||||
import * as graphic from '../core/graphic';
|
|
||||||
import * as eventTool from 'zrender/src/core/event';
|
|
||||||
import shapeRender from '../constant/shapeRender';
|
|
||||||
|
|
||||||
function lineStyleBuilder({subType}) {
|
|
||||||
return {
|
|
||||||
...shapeRender,
|
|
||||||
subType,
|
|
||||||
z: 9998,
|
|
||||||
shape: {x1: 0, y1: 0, x2: 0, y2: 0 },
|
|
||||||
style: {
|
|
||||||
lineWidth: 2,
|
|
||||||
stroke: `rgba(200,200,200,0.8)`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function circleStyleBuilder({subType, shape}) {
|
|
||||||
return {
|
|
||||||
...shapeRender,
|
|
||||||
subType,
|
|
||||||
z: 9999,
|
|
||||||
draggable: false,
|
|
||||||
cursor: 'crosshair',
|
|
||||||
shape,
|
|
||||||
style: {
|
|
||||||
opacity: 0.5,
|
|
||||||
fill: `rgba(200,200,200,0.3)`
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default class LineDraggable extends graphic.Group {
|
|
||||||
constructor(handle, draggle=true) {
|
|
||||||
super();
|
|
||||||
this.draggle = draggle;
|
|
||||||
this.handle = handle;
|
|
||||||
this.style = handle.$map.getDefaultStyleDict();
|
|
||||||
this.invTransform = [1, 0, 0, 1, 0, 0];
|
|
||||||
this.target = null;
|
|
||||||
this.shapes = [];
|
|
||||||
this.line = null;
|
|
||||||
this.r = 2;
|
|
||||||
this.offset = null;
|
|
||||||
|
|
||||||
if (this.draggle && this.handle.e.target && this.handle.e.target.model.points) {
|
|
||||||
this.handle.e.target.model.points.forEach((elem, index) => {
|
|
||||||
const r = (this.handle.e.target.model.width||this.r)+1;
|
|
||||||
this.shapes.push(this.createShape({ cx: elem.x, cy: elem.y, r }));
|
|
||||||
this.add(this.shapes[index]);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.line = new graphic.Line(lineStyleBuilder({subType: '@drag'}));
|
|
||||||
this.add(this.line);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
createShape(shape) {
|
|
||||||
return new graphic.Circle({
|
|
||||||
...circleStyleBuilder({subType: '@drag', shape}),
|
|
||||||
onmousedown: this.mousedown.bind(this),
|
|
||||||
onmousemove: _.throttle(this.mousemove.bind(this), 100),
|
|
||||||
onmouseup: this.mouseup.bind(this)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setShape(e) {
|
|
||||||
const dx = Math.round(e.offsetX-this.offset.x);
|
|
||||||
const dy = Math.round(e.offsetY-this.offset.y);
|
|
||||||
|
|
||||||
if (this.handle.e.target && this.handle.e.target.instance) {
|
|
||||||
this.offset = {x: e.offsetX, y: e.offsetY};
|
|
||||||
this.handle.e.target.instance.inactive(this.handle.$zr);
|
|
||||||
this.handle.e.target.instance.setShape(this.handle.e.target.model);
|
|
||||||
this.handle.e.target.instance.active(this.handle.$zr);
|
|
||||||
this.handle.$controller.trigger(this.handle.$controller.events.Reflect, {dx, dy});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mousedown(e) {
|
|
||||||
this.offset = {x: e.offsetX, y: e.offsetY};
|
|
||||||
if (e.target && ['@drag'].includes(e.target.subType)) {
|
|
||||||
this.target = e.target;
|
|
||||||
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
|
|
||||||
this.setDraggable(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mousemove(e) {
|
|
||||||
eventTool.stop(e.event);
|
|
||||||
if (this.target && this.handle.e.target) {
|
|
||||||
if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e) ) {
|
|
||||||
this.handle.e.target.model.points = this.shapes.map(elem => {
|
|
||||||
const position = elem.position || [0, 0];
|
|
||||||
const x = elem.shape.cx + position[0];
|
|
||||||
const y = elem.shape.cy + position[1];
|
|
||||||
return {x, y};
|
|
||||||
});
|
|
||||||
|
|
||||||
this.setShape(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
mouseup(e) {
|
|
||||||
if (this.target && this.handle.e.target) {
|
|
||||||
this.handle.e.target.model.points = this.shapes.map(elem => {
|
|
||||||
const position = elem.position || [0, 0];
|
|
||||||
const x = elem.shape.cx + position[0];
|
|
||||||
const y = elem.shape.cy + position[1];
|
|
||||||
return {x, y};
|
|
||||||
});
|
|
||||||
this.setShape(e);
|
|
||||||
this.setDraggable(false);
|
|
||||||
this.line.setShape({x1: 0, y1: 0, x2: 0, y2: 0 });
|
|
||||||
this.target = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setDraggable(draggable) {
|
|
||||||
this.shapes.forEach(shape => {
|
|
||||||
shape.attr('draggable', draggable);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
@ -17,52 +17,51 @@ const shapeBuilderMap = {
|
|||||||
[shapeType.Element]: Element,
|
[shapeType.Element]: Element,
|
||||||
[shapeType.Compose]: Compose
|
[shapeType.Compose]: Compose
|
||||||
}
|
}
|
||||||
|
const shapeSensitizeStyle = {
|
||||||
function shapeStyleBuilder({subType}) {
|
border: {
|
||||||
return {
|
borderStyle: {
|
||||||
...shapeRender,
|
lineDash: [4, 4],
|
||||||
subType,
|
lineWidth: 1,
|
||||||
z: 9999,
|
stroke: '#000',
|
||||||
silent: true,
|
fill: 'transparent'
|
||||||
shape: {
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
width: 0,
|
|
||||||
height: 0
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
lineDash: defaultStyle.borderDash,
|
|
||||||
lineWidth: defaultStyle.borderWidth,
|
|
||||||
stroke: defaultStyle.borderColor,
|
|
||||||
fill: defaultStyle.transparentColor
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
class Perspective extends graphic.Group {
|
||||||
function update2List(source, model, action, name='') {
|
constructor(args) {
|
||||||
const list = source[name];
|
super(args);
|
||||||
|
|
||||||
if (!list) { source[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);
|
|
||||||
break;
|
|
||||||
case orders.UNBINDING:
|
|
||||||
case orders.DELETE:
|
|
||||||
i >= 0 && list.splice(i, 1);
|
|
||||||
break;
|
|
||||||
case orders.UPDATE:
|
|
||||||
updateModel = Object.assign(list[i]||{}, model)
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return updateModel;
|
_createBorder(rect) {
|
||||||
}
|
this._border = new graphic.Rect({
|
||||||
|
...shapeRender,
|
||||||
|
subType: '@border',
|
||||||
|
z: 9999,
|
||||||
|
silent: true,
|
||||||
|
shape: {
|
||||||
|
...rect
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
...shapeSensitizeStyle.border.borderStyle
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.add(this._border);
|
||||||
|
}
|
||||||
|
|
||||||
|
_createAngles() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render(rect) {
|
||||||
|
this.removeAll();
|
||||||
|
this._createBorder(rect);
|
||||||
|
this._createAngles();
|
||||||
|
}
|
||||||
|
|
||||||
|
setShape(rect) {
|
||||||
|
this.render(rect);
|
||||||
|
}
|
||||||
|
}
|
||||||
class ShapeFactory extends Eventful {
|
class ShapeFactory extends Eventful {
|
||||||
constructor(map) {
|
constructor(map) {
|
||||||
super();
|
super();
|
||||||
@ -70,7 +69,7 @@ class ShapeFactory extends Eventful {
|
|||||||
this.$painter = map.getPainter();
|
this.$painter = map.getPainter();
|
||||||
this.$controller = map.getController();
|
this.$controller = map.getController();
|
||||||
|
|
||||||
this.border = new graphic.Rect(shapeStyleBuilder({subType: '@border'}));
|
this.sensitize = new Perspective({subType: '@ignore'});
|
||||||
|
|
||||||
this.tipsHandle = new TipsHandle(map);
|
this.tipsHandle = new TipsHandle(map);
|
||||||
|
|
||||||
@ -105,7 +104,6 @@ class ShapeFactory extends Eventful {
|
|||||||
list.forEach(el => {
|
list.forEach(el => {
|
||||||
this.mapTemplate[el.type] = templateParser.parse(el);
|
this.mapTemplate[el.type] = templateParser.parse(el);
|
||||||
})
|
})
|
||||||
console.log(this.mapTemplate);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
parse(source={}, take=None) {
|
parse(source={}, take=None) {
|
||||||
@ -189,12 +187,12 @@ class ShapeFactory extends Eventful {
|
|||||||
}
|
}
|
||||||
|
|
||||||
showBorder(shape) {
|
showBorder(shape) {
|
||||||
this.border.setShape(shape.getBoundingRect());
|
this.sensitize.setShape(shape.getBoundingRect());
|
||||||
this.$painter.addToLayer(shapeLayer.HightLight)(this.border);
|
this.$painter.addToLayer(shapeLayer.HightLight)(this.sensitize);
|
||||||
}
|
}
|
||||||
|
|
||||||
hideBorder(shape) {
|
hideBorder(shape) {
|
||||||
this.$painter.removeFromLayer(shapeLayer.HightLight)(this.border);
|
this.$painter.removeFromLayer(shapeLayer.HightLight)(this.sensitize);
|
||||||
}
|
}
|
||||||
|
|
||||||
addToLayer(level) {
|
addToLayer(level) {
|
||||||
@ -237,4 +235,28 @@ class ShapeFactory extends Eventful {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function update2List(source, model, action, name='') {
|
||||||
|
const list = source[name];
|
||||||
|
|
||||||
|
if (!list) { source[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);
|
||||||
|
break;
|
||||||
|
case orders.UNBINDING:
|
||||||
|
case orders.DELETE:
|
||||||
|
i >= 0 && list.splice(i, 1);
|
||||||
|
break;
|
||||||
|
case orders.UPDATE:
|
||||||
|
updateModel = Object.assign(list[i]||{}, model)
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return updateModel;
|
||||||
|
}
|
||||||
|
|
||||||
export default ShapeFactory;
|
export default ShapeFactory;
|
||||||
|
@ -35,10 +35,13 @@ const vernierStyle = {
|
|||||||
textVerticalAlign: 'center'
|
textVerticalAlign: 'center'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class Vernier extends graphic.Group {
|
class Vernier extends graphic.Group {
|
||||||
constructor({subType}) {
|
constructor(args) {
|
||||||
super({subType});
|
super(args);
|
||||||
this._scaleRate = 1;
|
this._scaleRate = 1;
|
||||||
this._area = null;
|
this._area = null;
|
||||||
this._axisLineX = null;
|
this._axisLineX = null;
|
||||||
@ -47,10 +50,13 @@ class Vernier extends graphic.Group {
|
|||||||
|
|
||||||
_createArea(rect) {
|
_createArea(rect) {
|
||||||
this._area = new graphic.Rect({
|
this._area = new graphic.Rect({
|
||||||
|
subType: '@ignore',
|
||||||
...shapeRender,
|
...shapeRender,
|
||||||
z: 9999,
|
z: 9999,
|
||||||
silent: true,
|
silent: true,
|
||||||
shape: { ...rect },
|
shape: {
|
||||||
|
...rect
|
||||||
|
},
|
||||||
style: {
|
style: {
|
||||||
...vernierStyle.area.areaStyle
|
...vernierStyle.area.areaStyle
|
||||||
}
|
}
|
||||||
@ -89,7 +95,7 @@ class Vernier extends graphic.Group {
|
|||||||
for(var i = 0; i in new Array(count+1).fill(0); i++) {
|
for(var i = 0; i in new Array(count+1).fill(0); i++) {
|
||||||
const offset = step * i * directionX;
|
const offset = step * i * directionX;
|
||||||
const tick = i % vernierStyle.axisTick.length == 0
|
const tick = i % vernierStyle.axisTick.length == 0
|
||||||
const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5;
|
const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.4;
|
||||||
if (tick) {
|
if (tick) {
|
||||||
this.add(new graphic.Line({
|
this.add(new graphic.Line({
|
||||||
...shapeRender,
|
...shapeRender,
|
||||||
@ -162,7 +168,7 @@ class Vernier extends graphic.Group {
|
|||||||
for(var i = 0; i in new Array(count+1).fill(0); i++) {
|
for(var i = 0; i in new Array(count+1).fill(0); i++) {
|
||||||
const offset = step * i * directionY;
|
const offset = step * i * directionY;
|
||||||
const tick = i % vernierStyle.axisTick.length == 0;
|
const tick = i % vernierStyle.axisTick.length == 0;
|
||||||
const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.5;
|
const len = tick? vernierStyle.axisTick.distance*0.7: vernierStyle.axisTick.distance*0.4;
|
||||||
if (tick) {
|
if (tick) {
|
||||||
this.add(new graphic.Line({
|
this.add(new graphic.Line({
|
||||||
...shapeRender,
|
...shapeRender,
|
||||||
@ -212,24 +218,6 @@ class Vernier extends graphic.Group {
|
|||||||
this.render(rect);
|
this.render(rect);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// function shapeStyleBuilder({subType}) {
|
|
||||||
// return {
|
|
||||||
// subType,
|
|
||||||
// ...shapeRender,
|
|
||||||
// z: 9999,
|
|
||||||
// shape: {
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// width: 0,
|
|
||||||
// height: 0
|
|
||||||
// },
|
|
||||||
// style: {
|
|
||||||
// fill: `rgba(200,200,200,0.3)`
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
export default class SelectingHandle {
|
export default class SelectingHandle {
|
||||||
constructor(map, controller) {
|
constructor(map, controller) {
|
||||||
this.$map = map;
|
this.$map = map;
|
||||||
@ -239,7 +227,6 @@ export default class SelectingHandle {
|
|||||||
|
|
||||||
this.begPoint = null;
|
this.begPoint = null;
|
||||||
this.endPoint = null;
|
this.endPoint = null;
|
||||||
// this.selecting = new graphic.Rect(shapeStyleBuilder({subType: '@selecting'}));
|
|
||||||
this.selecting = new Vernier({subType: '@selecting'});
|
this.selecting = new Vernier({subType: '@selecting'});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,6 +18,7 @@ export function openIndexedDB() {
|
|||||||
Vue.prototype.$db = event.target.result;
|
Vue.prototype.$db = event.target.result;
|
||||||
Vue.prototype.$db.createObjectStore('mapData', { keyPath: 'id' });
|
Vue.prototype.$db.createObjectStore('mapData', { keyPath: 'id' });
|
||||||
Vue.prototype.$db.createObjectStore('runPlan', { keyPath: 'templateId' });
|
Vue.prototype.$db.createObjectStore('runPlan', { keyPath: 'templateId' });
|
||||||
|
Vue.prototype.$db.createObjectStore('composeList', { keyPath: 'id' });
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 新增数据
|
// 新增数据
|
||||||
|
@ -37,7 +37,7 @@ import BuilderFactory from '@/iscs_new/core/form/builderFactory';
|
|||||||
import DataForm from '../components/dataForm';
|
import DataForm from '../components/dataForm';
|
||||||
import orders from '@/iscs_new/utils/orders';
|
import orders from '@/iscs_new/utils/orders';
|
||||||
import * as utils from '@/iscs_new/utils/utils';
|
import * as utils from '@/iscs_new/utils/utils';
|
||||||
import IndexedDb from '../utils/indexedDb.js';
|
import idb from '../utils/indexedDb.js';
|
||||||
import shapeType from '@/iscs_new/constant/shapeType.js';
|
import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -71,14 +71,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.db = new IndexedDb(['composeList']);
|
|
||||||
console.log(this.db, 11111111111);
|
|
||||||
this.composeName = this.$route.query.composeName;
|
this.composeName = this.$route.query.composeName;
|
||||||
this.elementList = new BuilderFactory().getFormList();
|
this.elementList = new BuilderFactory().getFormList();
|
||||||
this.enabledTab = this.elementList[0].code;
|
this.enabledTab = this.elementList[0].code;
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onIscsChange(mode, system, part) {
|
onIscsChange(mode, system, part) {
|
||||||
@ -91,14 +86,19 @@ export default {
|
|||||||
const type = this.$route.query.type || '<模型类型>';
|
const type = this.$route.query.type || '<模型类型>';
|
||||||
const source = this.$iscs.getSource();
|
const source = this.$iscs.getSource();
|
||||||
if (id && source) {
|
if (id && source) {
|
||||||
const shapeList = source.elementList.map(el => {
|
const elementList = source.elementList.map(el => {
|
||||||
return this.$iscs.getShapeByCode(el.code);
|
return this.$iscs.getShapeByCode(el.code);
|
||||||
});
|
});
|
||||||
const rect = shapeList.reduce(
|
const shapeList = elementList.map(el => el.model);
|
||||||
|
const rect = elementList.reduce(
|
||||||
(temp, el) => el && temp ? temp.union(el.getBoundingRect().clone()) : el.getBoundingRect(), null);
|
(temp, el) => el && temp ? temp.union(el.getBoundingRect().clone()) : el.getBoundingRect(), null);
|
||||||
const position = [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2];
|
const position = rect ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0];
|
||||||
const model = { id, name, type, shapeList, position };
|
const model = { id, name, type, shapeList, position };
|
||||||
console.log(model);
|
idb.delete('composeList', model.id);
|
||||||
|
idb.write('composeList', model);
|
||||||
|
idb.list('composeList').then(list => {
|
||||||
|
console.log(list);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onSelectTab() {
|
onSelectTab() {
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import Iscs from '@/iscs_new/map';
|
import Iscs from '@/iscs_new/map';
|
||||||
|
import idb from '../utils/indexedDb.js';
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -79,10 +80,7 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$iscs.setMap([], {
|
const option = {
|
||||||
elementList: [],
|
|
||||||
composeList: []
|
|
||||||
}, {
|
|
||||||
panEnable: true,
|
panEnable: true,
|
||||||
zoomEnable: true,
|
zoomEnable: true,
|
||||||
keyEnable: true,
|
keyEnable: true,
|
||||||
@ -90,7 +88,27 @@ export default {
|
|||||||
selecting: true,
|
selecting: true,
|
||||||
selectable: true,
|
selectable: true,
|
||||||
reflect: true
|
reflect: true
|
||||||
});
|
}
|
||||||
|
if (this.$route.query.id) {
|
||||||
|
setTimeout(_ => {
|
||||||
|
idb.select('composeList', this.$route.query.id).then(resp => {
|
||||||
|
this.$iscs.setMap([], {
|
||||||
|
elementList: resp.shapeList||[],
|
||||||
|
composeList: []
|
||||||
|
}, option);
|
||||||
|
}).catch(error => {
|
||||||
|
this.$iscs.setMap([], {
|
||||||
|
elementList: [],
|
||||||
|
composeList: []
|
||||||
|
}, option);
|
||||||
|
})
|
||||||
|
}, 1000)
|
||||||
|
} else {
|
||||||
|
this.$iscs.setMap([], {
|
||||||
|
elementList: [],
|
||||||
|
composeList: []
|
||||||
|
}, option);
|
||||||
|
}
|
||||||
|
|
||||||
Vue.prototype.$iscs = this.$iscs;
|
Vue.prototype.$iscs = this.$iscs;
|
||||||
this.$iscs.on('viewLoaded', this.onViewLoaded, this);
|
this.$iscs.on('viewLoaded', this.onViewLoaded, this);
|
||||||
|
@ -2,13 +2,12 @@
|
|||||||
import { getBaseUrl } from '@/utils/baseUrl'
|
import { getBaseUrl } from '@/utils/baseUrl'
|
||||||
|
|
||||||
let db = null;
|
let db = null;
|
||||||
|
|
||||||
class IndexedDb {
|
class IndexedDb {
|
||||||
constructor(tableList) {
|
constructor(nameList) {
|
||||||
this.open(tableList);
|
this.open(nameList);
|
||||||
}
|
}
|
||||||
|
|
||||||
open(tableList) {
|
open(nameList) {
|
||||||
const baseUrl = getBaseUrl();
|
const baseUrl = getBaseUrl();
|
||||||
const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, "$1");
|
const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, "$1");
|
||||||
const request = window.indexedDB.open(indexedDBName, 1);
|
const request = window.indexedDB.open(indexedDBName, 1);
|
||||||
@ -18,17 +17,19 @@ class IndexedDb {
|
|||||||
|
|
||||||
request.onsuccess = function (e) {
|
request.onsuccess = function (e) {
|
||||||
db = request.result;
|
db = request.result;
|
||||||
|
console.log('数据库打开成功');
|
||||||
};
|
};
|
||||||
|
|
||||||
request.onupgradeneeded = function (e) {
|
request.onupgradeneeded = function (e) {
|
||||||
if (db) {
|
db = e.target.result;
|
||||||
tableList.forEach(name => {
|
nameList.forEach(name => {
|
||||||
db.createObjectStore(name, { keyPath: 'id' });
|
db.createObjectStore(name, { keyPath: 'id' });
|
||||||
})
|
console.log(name);
|
||||||
}
|
})
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
add(tableName, data) {
|
write(tableName, data) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if (db) {
|
if (db) {
|
||||||
const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data);
|
const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data);
|
||||||
@ -47,25 +48,6 @@ class IndexedDb {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
modify(tableName, data) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (db) {
|
|
||||||
const request = db.transaction([tableName], 'readwrite').objectStore(tableName).put(data);
|
|
||||||
request.onsuccess = function(e) {
|
|
||||||
console.log('数据更新成功');
|
|
||||||
resolve(request.result);
|
|
||||||
};
|
|
||||||
request.onerror = function(e) {
|
|
||||||
console.log('数据更新失败');
|
|
||||||
reject(e);
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
this.open();
|
|
||||||
reject({message: '数据库未打开!'});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
delete(tableName, key) {
|
delete(tableName, key) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if (db) {
|
if (db) {
|
||||||
@ -85,14 +67,60 @@ class IndexedDb {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
query(tableName, key) {
|
modify(tableName, data) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (db) {
|
||||||
|
const request = db.transaction([tableName], 'readwrite').objectStore(tableName).put(data);
|
||||||
|
request.onsuccess = function(e) {
|
||||||
|
console.log('数据修改成功');
|
||||||
|
resolve(request.result);
|
||||||
|
};
|
||||||
|
request.onerror = function(e) {
|
||||||
|
console.log('数据修改失败');
|
||||||
|
reject(e);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.open();
|
||||||
|
reject({message: '数据库未打开!'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
select(tableName, key) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
if (db) {
|
if (db) {
|
||||||
const request = db.transaction([tableName]).objectStore(tableName).get(key);
|
const request = db.transaction([tableName]).objectStore(tableName).get(key);
|
||||||
request.onsuccess = function(e) {
|
request.onsuccess = function(e) {
|
||||||
console.log('数据读取成功');
|
console.log('数据查询成功');
|
||||||
resolve(request.result);
|
resolve(request.result);
|
||||||
};
|
};
|
||||||
|
request.onerror = function(e) {
|
||||||
|
console.log('数据查询失败');
|
||||||
|
reject(e);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
this.open();
|
||||||
|
reject({message: '数据库未打开!'});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
list(tableName) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (db) {
|
||||||
|
const store = db.transaction([tableName]).objectStore(tableName);
|
||||||
|
|
||||||
|
var request = store.openCursor();
|
||||||
|
var list = [];
|
||||||
|
request.onsuccess = function(e) {
|
||||||
|
var c = e.target.result;
|
||||||
|
if (c) {
|
||||||
|
list.push(c.value);
|
||||||
|
c.continue();
|
||||||
|
} else {
|
||||||
|
resolve(list);
|
||||||
|
}
|
||||||
|
};
|
||||||
request.onerror = function(e) {
|
request.onerror = function(e) {
|
||||||
console.log('数据读取失败');
|
console.log('数据读取失败');
|
||||||
reject(e);
|
reject(e);
|
||||||
@ -108,5 +136,5 @@ class IndexedDb {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default IndexedDb;
|
export default new IndexedDb(['composeList']);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user