This commit is contained in:
joylink_cuiweidong 2021-04-08 15:27:43 +08:00
commit bd70771cf5
9 changed files with 123 additions and 81 deletions

View File

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

View File

@ -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();
}
// 设置高亮

View File

@ -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:[

View File

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

View File

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

View File

@ -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);
}
// 重新计算显隐

View File

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

View File

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

View File

@ -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: ''
}
]