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 11:30:04 +08:00
commit 4d37cc9267
9 changed files with 174 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/iscs_new/controller.js
View File

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

132
src/iscs_new/draggable/Image.js
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);
});
}
}

126
src/iscs_new/draggable/Line.js
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);
});
}
}

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

@ -17,52 +17,51 @@ const shapeBuilderMap = {
[shapeType.Element]: Element,
[shapeType.Compose]: Compose
}
function shapeStyleBuilder({subType}) {
return {
...shapeRender,
subType,
z: 9999,
silent: true,
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
style: {
lineDash: defaultStyle.borderDash,
lineWidth: defaultStyle.borderWidth,
stroke: defaultStyle.borderColor,
fill: defaultStyle.transparentColor
const shapeSensitizeStyle = {
border: {
borderStyle: {
lineDash: [4, 4],
lineWidth: 1,
stroke: '#000',
fill: 'transparent'
}
}
}
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;
class Perspective extends graphic.Group {
constructor(args) {
super(args);
}
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 {
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
src/iscs_new/selectingHandle.js
View File

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

1
src/utils/indexedDb.js
View File

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

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

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

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

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

92
src/views/iscs_new/utils/indexedDb.js
View File

@ -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.createObjectStore(name, { keyPath: 'id' });
})
}
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']);