修改代码

src/iscs_new/core/abstractShape.js

@@ -58,7 +58,12 @@ class AbstractShape extends Group {
 
 	// 设置显隐
 	setInvisible(hide) {
-		hide ? this.hide(): this.show();
+		if (hide) {
+			super.hide()
+		} else {
+			super.show();
+		}
+		super.dirty();
 	}
 
 	// 设置高亮

src/iscs_new/core/form/elementConst.js

@@ -253,7 +253,7 @@ export const elementConst = {
                     rules:[
                         { required: true, message:'请输入坐标集合', trigger: 'blur' }
                     ],
-                    value: 10,
+                    value: 0,
                     description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑'
                 }
             ]

src/iscs_new/plugins/shapeBuilder/shapeTypeSelect.vue

@@ -14,7 +14,6 @@ export default {
         };
     },
 	mounted() {
-		console.log('xxxxxxxxxxx');
 		this.$emit('change', {shapeType: 'Rect'});
 	}
 };

src/iscs_new/transformHandle.js

@@ -15,7 +15,7 @@ export default class TransformHandle {
 
 	// 检查显隐
 	checkVisible(shape) {
-		return shape.model && !shape.model.base.hide || utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
+		return (!shape.model || !shape.model.base.hide) && utils.createBoundingRectCheckVisible(shape, this.transform).intersect(this.rect);
 	}
 
 	// 重新计算显隐

src/router/index.js

@@ -1148,31 +1148,22 @@ export const asyncRouter = [
         ]
     },
     {
-        path: '/iscs_new',
+		path:'/iscs_new/design/compose/edit',
-        component: Layout,
 		hidden: true,
-        meta: {
-            i18n: 'router.iscsSystem',
-            roles: [admin]
-        },
-        children: [
-            {
-                path:'design',
-                redirect: '/iscs/design/edit',
 		component: IscsNewDesign,
 		meta: {
 			i18n: 'router.iscsDraw',
 			roles: [admin]
+		}
     },
-                children: [
 	{
-                        path: 'edit',
+		path:'/iscs_new/design/map/edit',
+		hidden: true,
 		component: IscsNewDraw,
-                        hidden: true
+		meta: {
+			i18n: 'router.iscsDraw',
+			roles: [admin]
 		}
-                ]
-            }
-        ]
     },
     { // iscs系统
         path: '/iscs',

src/views/iscs_new/iscsDesign/index.vue

@@ -1,86 +1,192 @@
 <template>
-  <div class="app-wrapper">
+  <transition name="el-zoom-in-center">
-    <div class="left-card" :class="{'hide': viewShow}">
+    <div class="mapPaint">
-      <div class="btn_right_box" @click="clickLeftBtn"><i :class="viewShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
+      <div class="map-view">
-      <div class="examList" style="width:100%">
+        <iscs-canvas ref="iscsCanvas" @selected="onSelected" />
+      </div>
+      <div class="right-card" :class="{'hide': draftShow}">
+        <div class="btn_draft_box" @click="draftShow = !draftShow"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
+        <el-card type="border-card" class="heightClass">
+          <div slot="header" class="clearfix">
+            <el-button
+              type="text"
+              style="float: right; padding: 3px 0; margin-right: 5px;"
+              @click="onSave"
+            >保存</el-button>
+          </div>
+          <el-tabs v-model="enabledTab" class="card" type="card" @tab-click="onSelectTab">
+            <el-tab-pane v-for="(element,index) in elementList" :key="index" :label="element.name" :name="element.code" :lazy="true">
+              <data-form :ref="'dataform'+element.code" :form="element" :form-model="element.model" :rules="element.rules" />
+            </el-tab-pane>
+          </el-tabs>
+          <div class="bottomBtnGroup">
+            <el-button v-show="!selected" type="primary" size="small" @click="onSubmit">添加</el-button>
+            <el-button v-show="selected" type="warning" size="small" @click="onModify">修改</el-button>
+            <el-button v-show="selected" type="danger" size="small" @click="onDelete">删除</el-button>
+          </div>
+        </el-card>
       </div>
     </div>
-    <transition>
-      <router-view />
   </transition>
-  </div>
 </template>
-
 <script>
-import { launchFullscreen } from '@/utils/screen';
+import localStore from 'storejs';
-import { getSessionStorage, setSessionStorage } from '@/utils/auth';
+import iscsCanvas from './iscsCanvas';
+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 shapeType from '@/iscs_new/constant/shapeType.js';
 
 export default {
-    name: 'DesignPlatform',
+    name: 'IscsView',
+    components: {
+        iscsCanvas,
+        DataForm
+    },
     data() {
         return {
-            lineCode: '',
+            size: {
-            viewShow: false,
+                width: this.$store.state.app.width - 521,
-            widthLeft: 450
+                height: this.$store.state.app.height - 60
+            },
+            widthLeft: Number(localStore.get('LeftWidth')) || 450,
+            draftShow: false,
+            selected: null,
+            enabledTab:'',
+            showDeleteButton:false,
+            elementList:[]
         };
     },
-    computed: {
+    computed:{
-        width() {
+        iscsMode() {
-            return this.$store.state.app.width;
+            return this.$route.query.mode;
         }
     },
     watch: {
-        '$store.state.app.windowSizeCount': function() {
+        $route(val) {
-            this.resize();
+            this.onIscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
         }
     },
-    created() {
-        this.resize();
-    },
     mounted() {
-        const againEnter = getSessionStorage('againEnter') || null;
+        this.composeName = this.$route.query.composeName;
-        if (!againEnter) {
+        this.elementList = new BuilderFactory().getFormList();
-            launchFullscreen();
+        this.enabledTab = this.elementList[0].code;
-            setSessionStorage('againEnter', true);
+    },
-        }
+    beforeDestroy() {
+
     },
     methods: {
-        refresh() {
+        onIscsChange(mode, system, part) {
-            this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
+            // this.$refs.iscsPlate.show(mode, system, part);
+            // this.$refs.iscsPlate.drawIscsInit();
         },
-        resize() {
+        onSave() {
-            const width = this.$store.state.app.width;
+			const id = this.$route.query.id;
-            const height = this.$store.state.app.height - 90;
+			const name = this.$route.query.name||"<模型名称>";
-            this.$store.dispatch('config/resize', { width: width, height: height });
+			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 position = [(rect.x + rect.width)/2, (rect.y + rect.height)/2];
+				const model = { id, name, type, shapeList, position };
+				console.log(model)
+			}
         },
-        setMapResize(LeftWidth) {
+        onSelectTab() {
-            const width = this.$store.state.app.width;
+			this.selected = null;
-            const height = this.$store.state.app.height - 90;
-            this.$store.dispatch('config/resize', { width: width, height: height });
         },
-        clickLeftBtn() {
+		onSelected(em) {
-            this.viewShow = !this.viewShow;
+			if (em.model) {
+				this.selected = JSON.parse(JSON.stringify(em.model));
+				const elem = this.elementList.find(el => el.code == this.selected.type);
+				if (elem) {
+					elem.model = this.selected;
+				}
+			} else {
+				this.selected = null;
+			}
+		},
+        onSubmit(){
+          this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
+                if (valid) {
+                    const formModel = this.$refs['dataform' + this.enabledTab][0].formModel;
+                    const newModel = JSON.parse(JSON.stringify(formModel));
+					newModel.code = utils.getUID(this.enabledTab);
+                    newModel.type = this.enabledTab;
+					newModel.name = '<名称>';
+					newModel.stateList = [];
+                    this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
+					this.clear(this.enabledTab);
+                }
+            });
+        },
+        onModify() {
+            this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
+                if (valid) {
+                    const model = this.$refs['dataform' + this.enabledTab][0].formModel;
+                    model.code = this.selected.code;
+                    model.type = this.selected.type;
+					model.name = this.selected.name;
+                    this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
+					this.clear(this.enabledTab);
+                }
+            });
+        },
+        onDelete() {
+            this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
+                if (valid) {
+                    const model = this.$refs['dataform' + this.enabledTab][0].formModel;
+                    model.code = this.selected.code;
+                    model.type = this.selected.type;
+					model.name = this.selected.name;
+                    this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
+					this.clear(this.enabledTab);
+                }
+            });
+        },
+		clear(enabledTab) {
+			this.$refs['dataform' + enabledTab][0].init();
+			this.selected = null;
 		}
     }
 };
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
     @import "src/styles/mixin.scss";
-
+    .card{
-    .app-wrapper {
-        @include clearfix;
-        position: relative;
         height: 100%;
+        display:flex;width: 100%;flex-direction: column
+    }
+
+    .card .el-tab-pane{
+      flex:1;
+      height: 100%;
+      overflow: auto;
+      padding-bottom:30px;
+    }
+
+    .map-view {
+        float: left;
         width: 100%;
+    }
+    .heightClass{height:100%;overflow:hidden;display:flex;width: 100%;flex-direction: column;}
+
+    .mapPaint{
+        height: 100%;
         overflow: hidden;
     }
 
-	.left-card{
+    .right-card{
-		width: 470px;
+      width: 550px;
       height: 100%;
       position: absolute;
-		left: 0;
+      right: 0;
-		transform: translateX(-470px);
+      transform: translateX(550px);
       transition: all 0.5s;
       background: #fff;
       z-index: 9;
@@ -89,26 +195,58 @@ export default {
           opacity: 0;
         }
       }
-
       &.hide{
         transform: translateX(0);
     }
 
-		.examList {
+    .btn_draft_box{
-			float: left;
-			height: 100%;
-		}
-
-		.btn_right_box{
       position: absolute;
-			right: 0;
+      left: 0;
       top: 50%;
       padding: 8px 3px;
       background: #fff;
       z-index: 10;
-			transform: translateX(22px);
+      transform: translateX(-22px);
       cursor: pointer;
-			border-radius: 0 5px 05px 0;
+      border-radius: 5px 0 0 5px;
+            box-shadow: -2px 0px 2px #000000;
     }
+
+    .btn_table_box {
+      position: absolute;
+      left: 0;
+      top: calc(50% +  50px);
+      padding: 8px 3px;
+      background: #fff;
+      z-index: 10;
+      transform: translateX(-22px);
+      cursor: pointer;
+      border-radius: 5px 0 0 5px;
+            box-shadow: -2px 0px 2px #000000;
+    }
+  }
+  .bottomBtnGroup{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 43px;
+    text-align: right;
+    right: 0px;
+    background: #fff;
+    z-index: 2;
+    padding-top: 5px;
+    border-bottom: 1px #dedede solid;
+    box-shadow: 2px -3px 5px #dedede;
+  }
+  .bottomBtnGroup button{
+    display: inline-block;
+    margin-right:10px;
+  }
+</style>
+<style lang="scss">
+  .heightClass .el-card__body{
+    flex:1;
+    height: 100%;
+    overflow: hidden;
   }
 </style>

src/views/iscs_new/iscsDesign/iscsCanvas.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Iscs from '@/iscs_new/map';
+import { mapGetters } from 'vuex';
+
+export default {
+    data() {
+        return {
+            dataZoom: {
+                offsetX: '0',
+                offsetY: '0',
+                scaleRate: '1'
+            },
+            config: {
+                scaleRate: '1',
+                origin: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            loading: false
+        };
+    },
+    computed: {
+        ...mapGetters('iscs', [
+            'iscs'
+        ]),
+        iscsId() {
+            return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
+        },
+        width() {
+            return document.documentElement.clientWidth;
+        },
+        height() {
+            return document.documentElement.clientHeight;
+        }
+    },
+    watch: {
+        '$store.state.config.canvasSizeCount': function (val) {
+            this.resize();
+        },
+        '$store.state.socket.equipmentStatus': function (val) {
+            if (val.length) {
+                this.stateMessage(val);
+            }
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    beforeDestroy() {
+        this.destroy();
+    },
+    methods: {
+		// 初始化窗口
+        init() {
+            document.getElementById(this.iscsId).oncontextmenu = function (e) {
+                return false;
+            };
+
+            this.$iscs = new Iscs({
+                dom: document.getElementById(this.iscsId),
+                draw: true,
+                config: {
+                    renderer: 'canvas',
+                    width: this.width,
+                    height: this.height
+                },
+                options: {
+                    scaleRate: 1,
+                    offsetX: 0,
+                    offsetY: 0
+                }
+            });
+
+			this.$iscs.setMap([], {
+				elementList: [],
+				composeList: []
+			}, {
+				panEnable: true,
+				zoomEnable: true,
+				keyEnable: true,
+				draggle: true,
+				selecting: true,
+				selectable: true,
+				reflect: true
+			});
+
+            Vue.prototype.$iscs = this.$iscs;
+            this.$iscs.on('viewLoaded', this.onViewLoaded, this);
+            this.$iscs.on('contextmenu', this.onContextMenu, this);
+            this.$iscs.on('selected', this.onSelected, this);
+			this.$iscs.on('reflect', this.onReflect, this);
+            this.$iscs.on('keyboard', this.onKeyboard, this);
+            window.document.oncontextmenu = function () {
+                return false;
+            };
+        },
+		// 视图加载完成
+        onViewLoaded(e) {
+        },
+        // 键盘快捷键事件
+        onKeyboard(hook) {
+            console.log(hook);
+        },
+        // 点击选择事件
+        onSelected(em={}) {
+			this.$emit('selected', em);
+        },
+		onReflect(em={}) {
+			this.$emit('selected', this.$iscs.getShapeByCode(em.code));
+		},
+        // 右键点击事件
+        onContextMenu(em={}) {
+			this.$emit('contextMenu', em.model);
+        },
+		// 执行操作
+		doAction(list) {
+			this.$iscs && this.$iscs.render(list);
+		},
+		// 消息处理
+		stateMessage(val) {
+            this.$iscs && this.$iscs.setDeviceStatus(val);
+        },
+		// 充值窗口大小
+        resize() {
+            this.$nextTick(() => {
+                this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
+            });
+        },
+		// 销毁
+        destroy() {
+            if (this.$iscs) {
+                this.$iscs.destroy();
+                this.$iscs = null;
+                Vue.prototype.$iscs = null;
+            }
+        },
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .iscs-button{
+        position: absolute;
+        float: right;
+        right: 20px;
+        bottom: 15px;
+    }
+    .iscs-canvas{
+    }
+</style>

src/views/iscs_new/iscsDraw/index.vue

@@ -36,6 +36,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 shapeType from '@/iscs_new/constant/shapeType.js';
 
 export default {
@@ -69,6 +70,8 @@ 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;
@@ -83,8 +86,8 @@ export default {
         },
         onSave() {
 			const id = this.$route.query.id;
-			const name = this.$route.query.name;
+			const name = this.$route.query.name||"<模型名称>";
-			const type = this.$route.query.type;
+			const type = this.$route.query.type||"<模型类型>";
 			const source = this.$iscs.getSource();
 			if (id && source) {
 				const shapeList = source.elementList.map(el => {
@@ -92,28 +95,9 @@ export default {
 				});
 				const rect = shapeList.reduce(
 					(temp,el) => el&&temp? temp.union(el.getBoundingRect().clone()): el.getBoundingRect(), null);
-				const dx = (rect.x + rect.width)/2;
+				const position = [(rect.x + rect.width)/2, (rect.y + rect.height)/2];
-				const dy = (rect.y + rect.height)/2;
+				const model = { id, name, type, shapeList, position };
-				const computed = (prop, shape, n) => shape.hasOwnProperty(prop)? shape[prop] = shape[prop] - n: null;
+				console.log(model)
-				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() {
@@ -135,8 +119,9 @@ export default {
                 if (valid) {
                     const formModel = this.$refs['dataform' + this.enabledTab][0].formModel;
                     const newModel = JSON.parse(JSON.stringify(formModel));
-                    newModel.type = this.enabledTab;
 					newModel.code = utils.getUID(this.enabledTab);
+                    newModel.type = this.enabledTab;
+					newModel.name = '<名称>';
 					newModel.stateList = [];
                     this.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.ADD}}]);
 					this.clear(this.enabledTab);
@@ -149,6 +134,7 @@ export default {
                     const model = this.$refs['dataform' + this.enabledTab][0].formModel;
                     model.code = this.selected.code;
                     model.type = this.selected.type;
+					model.name = this.selected.name;
                     this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.UPDATE}}]);
 					this.clear(this.enabledTab);
                 }
@@ -160,6 +146,7 @@ export default {
                     const model = this.$refs['dataform' + this.enabledTab][0].formModel;
                     model.code = this.selected.code;
                     model.type = this.selected.type;
+					model.name = this.selected.name;
                     this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.DELETE}}]);
 					this.clear(this.enabledTab);
                 }

src/views/iscs_new/utils/indexedDb.js

@@ -0,0 +1,112 @@
+
+import { getBaseUrl } from '@/utils/baseUrl'
+
+let db = null;
+
+class IndexedDb {
+	constructor(tableList) {
+		this.open(tableList);
+	}
+
+	init(tableList) {
+		const baseUrl = getBaseUrl();
+		const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, "$1");
+		const request = window.indexedDB.open(indexedDBName, 1);
+		request.onerror = function (e) {
+			console.log('数据库打开报错');
+		};
+
+		request.onsuccess = function (e) {
+			db = request.result;
+		};
+		request.onupgradeneeded = function (e) {
+			if (db) {
+				tableList.forEach(name => {
+					db.createObjectStore(name, { keyPath: 'id' });
+				})
+			}
+		};
+	}
+
+	add(tableName, data) {
+		return new Promise((resolve, reject) => {
+			if (db) {
+				const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data);
+				request.onsuccess = function(e) {
+					console.log('数据写入成功');
+					resolve(request.result);
+				};
+				request.onerror = function(e) {
+					console.log('数据写入失败');
+					reject(e);
+				};
+			} else {
+				this.open();
+				reject({message: '数据库未打开！'});
+			}
+		});
+	}
+
+	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) {
+				const request = db.transaction([tableName], 'readwrite').objectStore(tableName).delete(key);
+				request.onsuccess = function(event) {
+					console.log('数据删除成功');
+					resolve(request.result);
+				};
+				request.onerror = function(event) {
+					console.log('数据删除失败');
+					reject(event);
+				};
+			} else {
+				this.open();
+				reject({message: '数据库未打开！'});
+			}
+		});
+	}
+
+	query(tableName, key) {
+		return new Promise((resolve, reject) => {
+			if (db) {
+				const request = db.transaction([tableName]).objectStore(tableName).get(key);
+				request.onsuccess = function(e) {
+					console.log('数据读取成功');
+					resolve(request.result);
+				};
+				request.onerror = function(e) {
+					console.log('数据读取失败');
+					reject(e);
+				};
+			} else {
+				this.open();
+				reject({message: '数据库未打开！'});
+			}
+		});
+	}
+
+	destroy() {
+	}
+}
+
+export default IndexedDb;
+