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:
joylink_cuiweidong
commit
4d37cc9267
@ -14,7 +14,7 @@ class MouseEvent {
|
||||
this.clientX = e.event.clientX;
|
||||
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) {
|
||||
let composeCode = shape.composeCode;
|
||||
let compose = null;
|
||||
@ -143,7 +143,7 @@ export default class Controller extends Eventful {
|
||||
}
|
||||
|
||||
isSpecialSubType(e) {
|
||||
return ['@drag', '@border', '@selecting'].includes(e.subType);
|
||||
return ['@ignore', '@selecting', '@drag', '@border'].includes(e.subType);
|
||||
}
|
||||
|
||||
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.Compose]: Compose
|
||||
}
|
||||
const shapeSensitizeStyle = {
|
||||
border: {
|
||||
borderStyle: {
|
||||
lineDash: [4, 4],
|
||||
lineWidth: 1,
|
||||
stroke: '#000',
|
||||
fill: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
class Perspective extends graphic.Group {
|
||||
constructor(args) {
|
||||
super(args);
|
||||
}
|
||||
|
||||
function shapeStyleBuilder({subType}) {
|
||||
return {
|
||||
_createBorder(rect) {
|
||||
this._border = new graphic.Rect({
|
||||
...shapeRender,
|
||||
subType,
|
||||
subType: '@border',
|
||||
z: 9999,
|
||||
silent: true,
|
||||
shape: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0
|
||||
...rect
|
||||
},
|
||||
style: {
|
||||
lineDash: defaultStyle.borderDash,
|
||||
lineWidth: defaultStyle.borderWidth,
|
||||
stroke: defaultStyle.borderColor,
|
||||
fill: defaultStyle.transparentColor
|
||||
...shapeSensitizeStyle.border.borderStyle
|
||||
}
|
||||
})
|
||||
this.add(this._border);
|
||||
}
|
||||
|
||||
_createAngles() {
|
||||
|
||||
}
|
||||
|
||||
render(rect) {
|
||||
this.removeAll();
|
||||
this._createBorder(rect);
|
||||
this._createAngles();
|
||||
}
|
||||
|
||||
setShape(rect) {
|
||||
this.render(rect);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
class ShapeFactory extends Eventful {
|
||||
constructor(map) {
|
||||
super();
|
||||
@ -70,7 +69,7 @@ class ShapeFactory extends Eventful {
|
||||
this.$painter = map.getPainter();
|
||||
this.$controller = map.getController();
|
||||
|
||||
this.border = new graphic.Rect(shapeStyleBuilder({subType: '@border'}));
|
||||
this.sensitize = new Perspective({subType: '@ignore'});
|
||||
|
||||
this.tipsHandle = new TipsHandle(map);
|
||||
|
||||
@ -105,7 +104,6 @@ class ShapeFactory extends Eventful {
|
||||
list.forEach(el => {
|
||||
this.mapTemplate[el.type] = templateParser.parse(el);
|
||||
})
|
||||
console.log(this.mapTemplate);
|
||||
}
|
||||
|
||||
parse(source={}, take=None) {
|
||||
@ -189,12 +187,12 @@ class ShapeFactory extends Eventful {
|
||||
}
|
||||
|
||||
showBorder(shape) {
|
||||
this.border.setShape(shape.getBoundingRect());
|
||||
this.$painter.addToLayer(shapeLayer.HightLight)(this.border);
|
||||
this.sensitize.setShape(shape.getBoundingRect());
|
||||
this.$painter.addToLayer(shapeLayer.HightLight)(this.sensitize);
|
||||
}
|
||||
|
||||
hideBorder(shape) {
|
||||
this.$painter.removeFromLayer(shapeLayer.HightLight)(this.border);
|
||||
this.$painter.removeFromLayer(shapeLayer.HightLight)(this.sensitize);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@ -35,10 +35,13 @@ const vernierStyle = {
|
||||
textVerticalAlign: 'center'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
class Vernier extends graphic.Group {
|
||||
constructor({subType}) {
|
||||
super({subType});
|
||||
constructor(args) {
|
||||
super(args);
|
||||
this._scaleRate = 1;
|
||||
this._area = null;
|
||||
this._axisLineX = null;
|
||||
@ -47,10 +50,13 @@ class Vernier extends graphic.Group {
|
||||
|
||||
_createArea(rect) {
|
||||
this._area = new graphic.Rect({
|
||||
subType: '@ignore',
|
||||
...shapeRender,
|
||||
z: 9999,
|
||||
silent: true,
|
||||
shape: { ...rect },
|
||||
shape: {
|
||||
...rect
|
||||
},
|
||||
style: {
|
||||
...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++) {
|
||||
const offset = step * i * directionX;
|
||||
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) {
|
||||
this.add(new graphic.Line({
|
||||
...shapeRender,
|
||||
@ -162,7 +168,7 @@ class Vernier extends graphic.Group {
|
||||
for(var i = 0; i in new Array(count+1).fill(0); i++) {
|
||||
const offset = step * i * directionY;
|
||||
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) {
|
||||
this.add(new graphic.Line({
|
||||
...shapeRender,
|
||||
@ -212,24 +218,6 @@ class Vernier extends graphic.Group {
|
||||
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 {
|
||||
constructor(map, controller) {
|
||||
this.$map = map;
|
||||
@ -239,7 +227,6 @@ export default class SelectingHandle {
|
||||
|
||||
this.begPoint = null;
|
||||
this.endPoint = null;
|
||||
// this.selecting = new graphic.Rect(shapeStyleBuilder({subType: '@selecting'}));
|
||||
this.selecting = new Vernier({subType: '@selecting'});
|
||||
}
|
||||
|
||||
|
||||
@ -18,6 +18,7 @@ export function openIndexedDB() {
|
||||
Vue.prototype.$db = event.target.result;
|
||||
Vue.prototype.$db.createObjectStore('mapData', { keyPath: 'id' });
|
||||
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 orders from '@/iscs_new/utils/orders';
|
||||
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';
|
||||
|
||||
export default {
|
||||
@ -71,14 +71,9 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.db = new IndexedDb(['composeList']);
|
||||
console.log(this.db, 11111111111);
|
||||
this.composeName = this.$route.query.composeName;
|
||||
this.elementList = new BuilderFactory().getFormList();
|
||||
this.enabledTab = this.elementList[0].code;
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
onIscsChange(mode, system, part) {
|
||||
@ -91,14 +86,19 @@ export default {
|
||||
const type = this.$route.query.type || '<模型类型>';
|
||||
const source = this.$iscs.getSource();
|
||||
if (id && source) {
|
||||
const shapeList = source.elementList.map(el => {
|
||||
const elementList = source.elementList.map(el => {
|
||||
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);
|
||||
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 };
|
||||
console.log(model);
|
||||
idb.delete('composeList', model.id);
|
||||
idb.write('composeList', model);
|
||||
idb.list('composeList').then(list => {
|
||||
console.log(list);
|
||||
});
|
||||
}
|
||||
},
|
||||
onSelectTab() {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Iscs from '@/iscs_new/map';
|
||||
import idb from '../utils/indexedDb.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
@ -79,10 +80,7 @@ export default {
|
||||
}
|
||||
});
|
||||
|
||||
this.$iscs.setMap([], {
|
||||
elementList: [],
|
||||
composeList: []
|
||||
}, {
|
||||
const option = {
|
||||
panEnable: true,
|
||||
zoomEnable: true,
|
||||
keyEnable: true,
|
||||
@ -90,7 +88,27 @@ export default {
|
||||
selecting: true,
|
||||
selectable: 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;
|
||||
this.$iscs.on('viewLoaded', this.onViewLoaded, this);
|
||||
|
||||
@ -2,13 +2,12 @@
|
||||
import { getBaseUrl } from '@/utils/baseUrl'
|
||||
|
||||
let db = null;
|
||||
|
||||
class IndexedDb {
|
||||
constructor(tableList) {
|
||||
this.open(tableList);
|
||||
constructor(nameList) {
|
||||
this.open(nameList);
|
||||
}
|
||||
|
||||
open(tableList) {
|
||||
open(nameList) {
|
||||
const baseUrl = getBaseUrl();
|
||||
const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, "$1");
|
||||
const request = window.indexedDB.open(indexedDBName, 1);
|
||||
@ -18,17 +17,19 @@ class IndexedDb {
|
||||
|
||||
request.onsuccess = function (e) {
|
||||
db = request.result;
|
||||
console.log('数据库打开成功');
|
||||
};
|
||||
|
||||
request.onupgradeneeded = function (e) {
|
||||
if (db) {
|
||||
tableList.forEach(name => {
|
||||
db = e.target.result;
|
||||
nameList.forEach(name => {
|
||||
db.createObjectStore(name, { keyPath: 'id' });
|
||||
console.log(name);
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
add(tableName, data) {
|
||||
write(tableName, data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (db) {
|
||||
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) {
|
||||
return new Promise((resolve, reject) => {
|
||||
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) => {
|
||||
if (db) {
|
||||
const request = db.transaction([tableName]).objectStore(tableName).get(key);
|
||||
request.onsuccess = function(e) {
|
||||
console.log('数据读取成功');
|
||||
console.log('数据查询成功');
|
||||
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) {
|
||||
console.log('数据读取失败');
|
||||
reject(e);
|
||||
@ -108,5 +136,5 @@ class IndexedDb {
|
||||
}
|
||||
}
|
||||
|
||||
export default IndexedDb;
|
||||
export default new IndexedDb(['composeList']);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user