修改代码

src/iscs_new/animateHandle.js

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

src/iscs_new/core/abstractShape.js

@@ -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) {
+	setInvisible(hide) {
-		sightless ? this.hide(): this.show();
+		hide ? this.hide(): this.show();
 	}
 
 	// 设置高亮

src/iscs_new/core/form/form2Base.js

@@ -1,16 +1,16 @@
 import types from './types';
 
 export default [
-	{
+	// {
-		prop: 'name',
+	// 	prop: 'name',
-        label: '名称',
+    //     label: '名称',
-        type: types.String,
+    //     type: types.String,
-        rules:[
+    //     rules:[
-            { required: true, message:'请输入名称', trigger: 'blur' }
+    //         { required: true, message:'请输入名称', trigger: 'blur' }
-        ],
+    //     ],
-        value: '<名称>',
+    //     value: '<名称>',
-        description: '控制图形的前后顺序。'
+    //     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:[

src/iscs_new/factory/compose.js

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

src/iscs_new/factory/element.js

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

src/iscs_new/transformHandle.js

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

src/views/iscs_new/iscsDesign/index.vue

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

src/views/iscs_new/iscsDraw/index.vue

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

src/views/test/index.vue

@@ -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: 'st1', hide: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
-								{ status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', 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: 'st1', hide: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
-								{ status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', 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],
+						base: {
-						position: [0, 0],
+							scale: [1, 1],
-						rotation: 0,
+							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],
+						base: {
-						position: [0, 0],
+							scale: [1, 1],
-						rotation: 0,
+							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],
+						base: {
-						position: [0, 0],
+							scale: [1, 1],
-						rotation: Math.PI/4,
+							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],
+						base: {
-						position: [0, 0],
+							scale: [1, 1],
-						rotation: 0,
+							position: [0, 0],
-						scale: [0.5, 0.5],
+							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],
+						base: {
-						position: [0, 0],
+							scale: [0.5, 0.5],
-						rotation: 0,
+							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],
+						base: {
-						position: [0, 0],
+							scale: [1, 1],
-						rotation: Math.PI/2,
+							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],
+						base: {
-						position: [100, 0],
+							scale: [1, 1],
-						rotation: Math.PI/2,
+							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],
+						base: {
-						position: [100, 100],
+							scale: [0.5, 0.5],
-						rotation: Math.PI/2,
+							position: [100, 100],
-						sightless: false,
+							rotation: Math.PI/2,
+							hide: false,
+						},
 						composeCode: '1000',
 					},
 					{
 						code: '101',
 						type: 'Device',
 						elementCodes: ['3', '4'],
-						scale: [1, 1],
+						base: {
-						position: [200, 0],
+							scale: [1, 1],
-						rotation: 0,
+							position: [200, 0],
-						sightless: false,
+							rotation: 0,
+							hide: false,
+						},
 						composeCode: '1000'
 					},
 					{
 						code: '1000',
 						type: 'Device',
-						scale: [1, 1],
+						base: {
-						position: [0, 0],
+							scale: [1, 1],
-						rotation: 0,
+							position: [0, 0],
+							rotation: 0,
+							hide: false
+						},
 						elementCodes: ['100', '101'],
-						sightless: false,
 						composeCode: ''
 					}
 				]