# Conflicts:
#	src/views/iscs_new/iscsDraw/index.vue
This commit is contained in:
joylink_cuiweidong 2021-04-09 11:30:04 +08:00
commit 4d37cc9267
9 changed files with 174 additions and 376 deletions

View File

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

View File

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

View File

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

View File

@ -17,52 +17,51 @@ const shapeBuilderMap = {
[shapeType.Element]: Element, [shapeType.Element]: Element,
[shapeType.Compose]: Compose [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}) { _createBorder(rect) {
return { this._border = new graphic.Rect({
...shapeRender, ...shapeRender,
subType, subType: '@border',
z: 9999, z: 9999,
silent: true, silent: true,
shape: { shape: {
x: 0, ...rect
y: 0,
width: 0,
height: 0
}, },
style: { style: {
lineDash: defaultStyle.borderDash, ...shapeSensitizeStyle.border.borderStyle
lineWidth: defaultStyle.borderWidth,
stroke: defaultStyle.borderColor,
fill: defaultStyle.transparentColor
}
} }
})
this.add(this._border);
} }
function update2List(source, model, action, name='') { _createAngles() {
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; 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;

View File

@ -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'});
} }

View File

@ -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' });
}; };
} }
// 新增数据 // 新增数据

View File

@ -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() {

View File

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

View File

@ -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']);