修改代码
This commit is contained in:
ival
parent
bd70771cf5
commit
a7b5057f9e
@ -58,7 +58,12 @@ class AbstractShape extends Group {
|
||||
|
||||
// 设置显隐
|
||||
setInvisible(hide) {
|
||||
hide ? this.hide(): this.show();
|
||||
if (hide) {
|
||||
super.hide()
|
||||
} else {
|
||||
super.show();
|
||||
}
|
||||
super.dirty();
|
||||
}
|
||||
|
||||
// 设置高亮
|
||||
|
||||
@ -253,7 +253,7 @@ export const elementConst = {
|
||||
rules:[
|
||||
{ required: true, message:'请输入坐标集合', trigger: 'blur' }
|
||||
],
|
||||
value: 10,
|
||||
value: 0,
|
||||
description: '取值范围为 0 到 1 之间的数字，0 表示不圆滑'
|
||||
}
|
||||
]
|
||||
|
||||
@ -14,7 +14,6 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log('xxxxxxxxxxx');
|
||||
this.$emit('change', {shapeType: 'Rect'});
|
||||
}
|
||||
};
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
// 重新计算显隐
|
||||
|
||||
@ -1148,31 +1148,22 @@ export const asyncRouter = [
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/iscs_new',
|
||||
component: Layout,
|
||||
path:'/iscs_new/design/compose/edit',
|
||||
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',
|
||||
|
||||
@ -1,86 +1,192 @@
|
||||
<template>
|
||||
<div class="app-wrapper">
|
||||
<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%">
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<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 { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
||||
import localStore from 'storejs';
|
||||
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: '',
|
||||
viewShow: false,
|
||||
widthLeft: 450
|
||||
size: {
|
||||
width: this.$store.state.app.width - 521,
|
||||
height: this.$store.state.app.height - 60
|
||||
},
|
||||
widthLeft: Number(localStore.get('LeftWidth')) || 450,
|
||||
draftShow: false,
|
||||
selected: null,
|
||||
enabledTab:'',
|
||||
showDeleteButton:false,
|
||||
elementList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
computed:{
|
||||
iscsMode() {
|
||||
return this.$route.query.mode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.resize();
|
||||
$route(val) {
|
||||
this.onIscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resize();
|
||||
},
|
||||
mounted() {
|
||||
const againEnter = getSessionStorage('againEnter') || null;
|
||||
if (!againEnter) {
|
||||
launchFullscreen();
|
||||
setSessionStorage('againEnter', true);
|
||||
}
|
||||
this.composeName = this.$route.query.composeName;
|
||||
this.elementList = new BuilderFactory().getFormList();
|
||||
this.enabledTab = this.elementList[0].code;
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
|
||||
onIscsChange(mode, system, part) {
|
||||
// this.$refs.iscsPlate.show(mode, system, part);
|
||||
// this.$refs.iscsPlate.drawIscsInit();
|
||||
},
|
||||
resize() {
|
||||
const width = this.$store.state.app.width;
|
||||
const height = this.$store.state.app.height - 90;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
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 position = [(rect.x + rect.width)/2, (rect.y + rect.height)/2];
|
||||
const model = { id, name, type, shapeList, position };
|
||||
console.log(model)
|
||||
}
|
||||
},
|
||||
setMapResize(LeftWidth) {
|
||||
const width = this.$store.state.app.width;
|
||||
const height = this.$store.state.app.height - 90;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
onSelectTab() {
|
||||
this.selected = null;
|
||||
},
|
||||
clickLeftBtn() {
|
||||
this.viewShow = !this.viewShow;
|
||||
onSelected(em) {
|
||||
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";
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
.card{
|
||||
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{
|
||||
width: 470px;
|
||||
.right-card{
|
||||
width: 550px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translateX(-470px);
|
||||
right: 0;
|
||||
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 {
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn_right_box{
|
||||
.btn_draft_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>
|
||||
|
||||
157
src/views/iscs_new/iscsDesign/iscsCanvas.vue
Normal file
157
src/views/iscs_new/iscsDesign/iscsCanvas.vue
Normal file
@ -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>
|
||||
@ -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 type = this.$route.query.type;
|
||||
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 => {
|
||||
@ -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 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 };
|
||||
const position = [(rect.x + rect.width)/2, (rect.y + rect.height)/2];
|
||||
const model = { id, name, type, shapeList, position };
|
||||
console.log(model)
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
|
||||
112
src/views/iscs_new/utils/indexedDb.js
Normal file
112
src/views/iscs_new/utils/indexedDb.js
Normal file
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user