iscs前端绘制增加indexDb存储

src/iscs_new/factory/index.js

@@ -105,7 +105,6 @@ class ShapeFactory extends Eventful {
 		list.forEach(el => {
 			this.mapTemplate[el.type] = templateParser.parse(el);
 		})
-		console.log(this.mapTemplate);
 	}
 
 	parse(source={}, take=None) {

src/utils/indexedDb.js

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

src/views/iscs_new/iscsDraw/index.vue

@@ -36,7 +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 idb from '../utils/indexedDb.js';
 import shapeType from '@/iscs_new/constant/shapeType.js';
 
 export default {
@@ -70,14 +70,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) {
@@ -90,14 +85,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.remove('composeList', model.id);
+				idb.add('composeList', model);
+				idb.list('composeList').then(list => {
+					console.log(list)
+				})
 			}
         },
         onSelectTab() {
@@ -116,7 +116,7 @@ export default {
 			}
 		},
         onSubmit(){
-          this.$refs['dataform'+this.enabledTab][0].$refs['form'].validate((valid) => {
+          	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));

src/views/iscs_new/iscsDraw/iscsCanvas.vue

@@ -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([], {
+			const option = {
-				elementList: [],
-				composeList: []
-			}, {
 				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.query('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);

src/views/iscs_new/utils/indexedDb.js

@@ -2,13 +2,12 @@
 import { getBaseUrl } from '@/utils/baseUrl'
 
 let db = null;
-
 class IndexedDb {
-	constructor(tableList) {
+	constructor(nameList) {
-		this.open(tableList);
+		this.open(nameList);
 	}
 
-	open(tableList) {
+	open(nameList) {
 		const baseUrl = getBaseUrl();
 		const indexedDBName = baseUrl.replace(/http.?:\/\/(.*)[\/|:].*/, "$1");
 		const request = window.indexedDB.open(indexedDBName, 1);
@@ -18,13 +17,14 @@ class IndexedDb {
 
 		request.onsuccess = function (e) {
 			db = request.result;
+			console.log('数据库打开成功');
 		};
+
 		request.onupgradeneeded = function (e) {
-			if (db) {
+			db = e.target.result;
-				tableList.forEach(name => {
+			nameList.forEach(name => {
-					db.createObjectStore(name, { keyPath: 'id' });
+				db.createObjectStore(name, { keyPath: 'id' });
-				})
+			})
-			}
 		};
 	}
 
@@ -47,6 +47,25 @@ class IndexedDb {
 		});
 	}
 
+	remove(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: '数据库未打开！'});
+			}
+		});
+	}
+
 	modify(tableName, data) {
 		return new Promise((resolve, reject) => {
 			if (db) {
@@ -66,25 +85,6 @@ class IndexedDb {
 		});
 	}
 
-	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) {
@@ -104,9 +104,36 @@ class IndexedDb {
 		});
 	}
 
+	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);
+				};
+			} else {
+				this.open();
+				reject({message: '数据库未打开！'});
+			}
+		});
+	}
+
 	destroy() {
 	}
 }
 
-export default IndexedDb;
+export default new IndexedDb(['composeList']);