修改代码
This commit is contained in:
parent
8ad81f244f
commit
54eef21574
@ -67,7 +67,7 @@ class Animate {
|
||||
const state = mapShape[name]
|
||||
const view = mapView[name];
|
||||
if (view) {
|
||||
shape.setInvisible(shape.model.sightless);
|
||||
shape.setInvisible(shape.model.base.hide);
|
||||
view.attr({shape: state.default.shape, style: state.default.style});
|
||||
view.dirty();
|
||||
}
|
||||
@ -78,7 +78,7 @@ class Animate {
|
||||
const view = mapView[name];
|
||||
const model = frame[name];
|
||||
if (view && model) {
|
||||
shape.setInvisible(shape.model.sightless||model.sightless);
|
||||
shape.setInvisible(model.hide);
|
||||
view.attr({shape: model.shape, style: model.style});
|
||||
view.dirty();
|
||||
}
|
||||
|
@ -44,6 +44,7 @@ class AbstractShape extends Group {
|
||||
this.model.base.position[1] = this.model.base.position[1] + dy;
|
||||
this.instance.origin = utils.createOrigin(this.instance);
|
||||
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
|
||||
this.setInvisible(this.model.base.hide)
|
||||
}
|
||||
|
||||
// 修改属性
|
||||
@ -56,8 +57,8 @@ class AbstractShape extends Group {
|
||||
}
|
||||
|
||||
// 设置显隐
|
||||
setInvisible(sightless) {
|
||||
sightless ? this.hide(): this.show();
|
||||
setInvisible(hide) {
|
||||
hide ? this.hide(): this.show();
|
||||
}
|
||||
|
||||
// 设置高亮
|
||||
|
@ -1,16 +1,16 @@
|
||||
import types from './types';
|
||||
|
||||
export default [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '名称',
|
||||
type: types.String,
|
||||
rules:[
|
||||
{ required: true, message:'请输入名称', trigger: 'blur' }
|
||||
],
|
||||
value: '<名称>',
|
||||
description: '控制图形的前后顺序。'
|
||||
},
|
||||
// {
|
||||
// prop: 'name',
|
||||
// label: '名称',
|
||||
// type: types.String,
|
||||
// rules:[
|
||||
// { required: true, message:'请输入名称', trigger: 'blur' }
|
||||
// ],
|
||||
// value: '<名称>',
|
||||
// description: '控制图形的前后顺序。'
|
||||
// },
|
||||
{
|
||||
prop: 'z1',
|
||||
label: '层级z1',
|
||||
@ -40,7 +40,7 @@ export default [
|
||||
description: '控制图形的前后顺序。z2 值小的图形会被 z2 值大的图形覆盖。z2 相比 z1 优先级更低。'
|
||||
},
|
||||
{
|
||||
prop: 'sightless',
|
||||
prop: 'hide',
|
||||
label: '是否隐藏',
|
||||
type: types.Boolean,
|
||||
rules:[
|
||||
|
@ -52,7 +52,7 @@ class Compose extends AbstractShape {
|
||||
this.instance.origin = utils.createOrigin(this.instance);
|
||||
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
|
||||
this.add(this.instance);
|
||||
this.setInvisible(this.model.sightless)
|
||||
this.setInvisible(this.model.base.hide)
|
||||
}
|
||||
|
||||
// 设置高亮
|
||||
@ -81,7 +81,7 @@ class Compose extends AbstractShape {
|
||||
el.model) {
|
||||
this.shapeFactory.removeFromLayer(el.type)(el);
|
||||
this.instance.add(el);
|
||||
el.model.composeCode = this.type;
|
||||
el.model.composeCode = this.code;
|
||||
el.attr(el.model);
|
||||
}
|
||||
})
|
||||
|
@ -48,7 +48,7 @@ class Element extends AbstractShape {
|
||||
this.instance.origin = utils.createOrigin(this.instance);
|
||||
this.instance.transform = utils.createTransform({scale: this.model.base.scale, position: this.model.base.position, rotation: this.model.base.rotation*Math.PI/180});
|
||||
this.add(this.instance);
|
||||
this.setInvisible(this.model.sightless)
|
||||
this.setInvisible(this.model.base.hide);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,7 @@ export default class TransformHandle {
|
||||
|
||||
// 检查显隐
|
||||
checkVisible(shape) {
|
||||
return shape.model && !shape.model.sightless || utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
|
||||
return shape.model && !shape.model.base.hide || utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
|
||||
}
|
||||
|
||||
// 重新计算显隐
|
||||
|
@ -3,31 +3,20 @@
|
||||
<div class="left-card" :class="{'hide': viewShow}">
|
||||
<div class="btn_right_box" @click="clickLeftBtn"><i :class="viewShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
|
||||
<div class="examList" style="width:100%">
|
||||
<!-- <demon-list ref="demonList" @createMap="createMap" /> -->
|
||||
</div>
|
||||
</div>
|
||||
<transition>
|
||||
<router-view />
|
||||
</transition>
|
||||
<!-- <context-menu /> -->
|
||||
<!-- <map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import demonList from './demonList';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
||||
// import MapCreate from './mapmanage/create';
|
||||
// import ContextMenu from './contextMenu';
|
||||
|
||||
export default {
|
||||
name: 'DesignPlatform',
|
||||
components: {
|
||||
// demonList,
|
||||
// MapCreate,
|
||||
// ContextMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineCode: '',
|
||||
@ -59,9 +48,6 @@ export default {
|
||||
refresh() {
|
||||
this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
|
||||
},
|
||||
// createMap() {
|
||||
// this.$refs.mapCreate.show();
|
||||
// },
|
||||
resize() {
|
||||
const width = this.$store.state.app.width;
|
||||
const height = this.$store.state.app.height - 90;
|
||||
|
@ -81,7 +81,40 @@ export default {
|
||||
// this.$refs.iscsPlate.show(mode, system, part);
|
||||
// this.$refs.iscsPlate.drawIscsInit();
|
||||
},
|
||||
onSave(data) {
|
||||
onSave() {
|
||||
const id = this.$route.query.id;
|
||||
const name = this.$route.query.name;
|
||||
const type = this.$route.query.type;
|
||||
const source = this.$iscs.getSource();
|
||||
if (id && source) {
|
||||
const shapeList = source.elementList.map(el => {
|
||||
return this.$iscs.getShapeByCode(el.code);
|
||||
});
|
||||
const rect = shapeList.reduce(
|
||||
(temp,el) => el&&temp? temp.union(el.getBoundingRect().clone()): el.getBoundingRect(), null);
|
||||
const dx = (rect.x + rect.width)/2;
|
||||
const dy = (rect.y + rect.height)/2;
|
||||
const computed = (prop, shape, n) => shape.hasOwnProperty(prop)? shape[prop] = shape[prop] - n: null;
|
||||
shapeList.map(el => {
|
||||
const shape = el.model.shape;
|
||||
computed('x', shape, dx);
|
||||
computed('y', shape, dy);
|
||||
computed('x1', shape, dx);
|
||||
computed('y1', shape, dy);
|
||||
computed('x2', shape, dx);
|
||||
computed('y2', shape, dy);
|
||||
computed('cx', shape, dx);
|
||||
computed('cy', shape, dy);
|
||||
if (shape.hasOwnProperty('point')) {
|
||||
shape.point = [shape.point[0] - dx, shape.point[1] - dy];
|
||||
}
|
||||
if (shape.hasOwnProperty('points')) {
|
||||
shape.points = shape.points.map(([point,i]) => [point[0] - dx, point[1] - dy]);
|
||||
}
|
||||
})
|
||||
console.log(shapeList)
|
||||
// const model = { id, name, type, shapeList };
|
||||
}
|
||||
},
|
||||
onSelectTab() {
|
||||
this.selected = null;
|
||||
|
@ -108,7 +108,8 @@ export default {
|
||||
isActive: false,
|
||||
isFocus: false,
|
||||
shapeList: [
|
||||
{ name: 'a',
|
||||
{
|
||||
name: 'a',
|
||||
type: 'Rect',
|
||||
shape: {},
|
||||
style: {
|
||||
@ -116,11 +117,12 @@ export default {
|
||||
stroke: 'black'
|
||||
},
|
||||
stateList: [
|
||||
{ status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
{ status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
{ status: 'st1', hide: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
{ status: 'st2', hide: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
]
|
||||
},
|
||||
{ name: 'b',
|
||||
{
|
||||
name: 'b',
|
||||
type: 'Circle',
|
||||
shape: {},
|
||||
style: {
|
||||
@ -128,8 +130,8 @@ export default {
|
||||
stroke: 'black'
|
||||
},
|
||||
stateList: [
|
||||
{ status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
{ status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
{ status: 'st1', hide: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
|
||||
{ status: 'st2', hide: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
|
||||
]
|
||||
},
|
||||
],
|
||||
@ -144,9 +146,12 @@ export default {
|
||||
code: '1',
|
||||
name: 'a',
|
||||
type: 'Rect',
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
hide: false,
|
||||
},
|
||||
shape: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
@ -157,16 +162,18 @@ export default {
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
},
|
||||
sightless: false,
|
||||
composeCode: '100'
|
||||
},
|
||||
{
|
||||
code: '2',
|
||||
name: 'b',
|
||||
type: 'Circle',
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
hide: false,
|
||||
},
|
||||
shape: {
|
||||
cx: 100,
|
||||
cy: 100,
|
||||
@ -176,16 +183,18 @@ export default {
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
},
|
||||
sightless: false,
|
||||
composeCode: '100'
|
||||
},
|
||||
{
|
||||
code: '3',
|
||||
name: 'a',
|
||||
type: 'Rect',
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: Math.PI/4,
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: Math.PI/4,
|
||||
hide: false,
|
||||
},
|
||||
shape: {
|
||||
x: 200,
|
||||
y: 100,
|
||||
@ -196,17 +205,19 @@ export default {
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
},
|
||||
sightless: false,
|
||||
composeCode: '101'
|
||||
},
|
||||
{
|
||||
code: '4',
|
||||
name: 'b',
|
||||
type: 'Circle',
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
scale: [0.5, 0.5],
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
scale: [0.5, 0.5],
|
||||
hide: false,
|
||||
},
|
||||
shape: {
|
||||
cx: 200,
|
||||
cy: 100,
|
||||
@ -216,16 +227,18 @@ export default {
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
},
|
||||
sightless: false,
|
||||
composeCode: '101'
|
||||
},
|
||||
{
|
||||
code: '5',
|
||||
name: 'c',
|
||||
type: 'Droplet',
|
||||
scale: [0.5, 0.5],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
base: {
|
||||
scale: [0.5, 0.5],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
hide: false,
|
||||
},
|
||||
shape: {
|
||||
cx: 300,
|
||||
cy: 200,
|
||||
@ -236,16 +249,18 @@ export default {
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
},
|
||||
sightless: false,
|
||||
composeCode: ''
|
||||
},
|
||||
{
|
||||
code: '6',
|
||||
name: 'd',
|
||||
type: 'Droplet',
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: Math.PI/2,
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: Math.PI/2,
|
||||
hide: false,
|
||||
},
|
||||
shape: {
|
||||
cx: 400,
|
||||
cy: 200,
|
||||
@ -256,16 +271,18 @@ export default {
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
},
|
||||
sightless: false,
|
||||
composeCode: ''
|
||||
},
|
||||
{
|
||||
code: '7',
|
||||
name: 'a',
|
||||
type: 'Rect',
|
||||
scale: [1, 1],
|
||||
position: [100, 0],
|
||||
rotation: Math.PI/2,
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [100, 0],
|
||||
rotation: Math.PI/2,
|
||||
hide: false,
|
||||
},
|
||||
shape: {
|
||||
x: 100,
|
||||
y: 100,
|
||||
@ -276,7 +293,6 @@ export default {
|
||||
fill: 'red',
|
||||
stroke: 'black'
|
||||
},
|
||||
sightless: false,
|
||||
composeCode: ''
|
||||
},
|
||||
],
|
||||
@ -285,30 +301,36 @@ export default {
|
||||
code: '100',
|
||||
type: 'Device',
|
||||
elementCodes: ['1', '2'],
|
||||
scale: [0.5, 0.5],
|
||||
position: [100, 100],
|
||||
rotation: Math.PI/2,
|
||||
sightless: false,
|
||||
base: {
|
||||
scale: [0.5, 0.5],
|
||||
position: [100, 100],
|
||||
rotation: Math.PI/2,
|
||||
hide: false,
|
||||
},
|
||||
composeCode: '1000',
|
||||
},
|
||||
{
|
||||
code: '101',
|
||||
type: 'Device',
|
||||
elementCodes: ['3', '4'],
|
||||
scale: [1, 1],
|
||||
position: [200, 0],
|
||||
rotation: 0,
|
||||
sightless: false,
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [200, 0],
|
||||
rotation: 0,
|
||||
hide: false,
|
||||
},
|
||||
composeCode: '1000'
|
||||
},
|
||||
{
|
||||
code: '1000',
|
||||
type: 'Device',
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
base: {
|
||||
scale: [1, 1],
|
||||
position: [0, 0],
|
||||
rotation: 0,
|
||||
hide: false
|
||||
},
|
||||
elementCodes: ['100', '101'],
|
||||
sightless: false,
|
||||
composeCode: ''
|
||||
}
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user