修改代码
This commit is contained in:
ival
parent
3739fcc4ac
commit
1375fc4fbc
@ -93,6 +93,17 @@ class AbstractShape extends Group {
|
||||
|
||||
// 设置状态
|
||||
setState(state) {}
|
||||
|
||||
// 遍历执行
|
||||
traverse(cb) {
|
||||
this.eachChild(el => {
|
||||
if (el.traverse) {
|
||||
el.traverse(cb, el);
|
||||
} else {
|
||||
cb.call(el);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default AbstractShape;
|
||||
|
||||
@ -167,7 +167,9 @@ class ShapeFactory extends Eventful {
|
||||
this.showBorder(shape);
|
||||
}
|
||||
|
||||
shape.attr({ z: shapeRender.z + 9 })
|
||||
shape.traverse(el => {
|
||||
el.attr({ z: shapeRender.z + 9 })
|
||||
});
|
||||
|
||||
shape.active();
|
||||
}
|
||||
@ -182,7 +184,9 @@ class ShapeFactory extends Eventful {
|
||||
this.hideBorder(shape);
|
||||
}
|
||||
|
||||
shape.attr({ z: shapeRender.z })
|
||||
shape.traverse(el => {
|
||||
el.attr({ z: shapeRender.z })
|
||||
});
|
||||
|
||||
shape.inactive();
|
||||
}
|
||||
|
||||
@ -26,43 +26,48 @@ export default {
|
||||
},
|
||||
clipboardList: [],
|
||||
menus: [],
|
||||
list: [
|
||||
{
|
||||
label: '组合',
|
||||
handler: this.doBinding,
|
||||
disabledCb: selected => {
|
||||
const storage = this.$iscs.getController().getStorage();
|
||||
return storage.values().length <= 1;
|
||||
menusMap: {
|
||||
Normal: [
|
||||
{
|
||||
label: '组合',
|
||||
handler: this.doBinding,
|
||||
disabledCb: selected => {
|
||||
const storage = this.$iscs.getController().getStorage();
|
||||
return storage.values().length <= 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '解组',
|
||||
handler: this.unBinding,
|
||||
disabledCb: selected => {
|
||||
return selected.shapeType != shapeType.Compose;
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '复制',
|
||||
handler: this.doCopy,
|
||||
disabledCb: selected => {
|
||||
const storage = this.$iscs.getController().getStorage();
|
||||
return !storage.values().length;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '解组',
|
||||
handler: this.unBinding,
|
||||
disabledCb: selected => {
|
||||
return selected.shapeType != shapeType.Compose;
|
||||
],
|
||||
None: [
|
||||
{
|
||||
label: '粘贴',
|
||||
handler: this.doParse,
|
||||
disabledCb: selected => {
|
||||
return !this.clipboardList.length;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '复制',
|
||||
handler: this.doCopy,
|
||||
disabledCb: selected => {
|
||||
const storage = this.$iscs.getController().getStorage();
|
||||
return !storage.values().length;
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '粘贴',
|
||||
handler: this.doParse,
|
||||
disabledCb: selected => {
|
||||
return !this.clipboardList.length;
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doShow(point) {
|
||||
this.menus = this.list.map(el => { el.disabled = el.disabledCb(this.selected); return el} );
|
||||
doShow(point, code) {
|
||||
const list = code ? this.menusMap.Normal: this.menusMap.None;
|
||||
this.menus = list.map(el => { el.disabled = el.disabledCb(this.selected); return el} );
|
||||
if (this.menus &&
|
||||
this.menus.length) {
|
||||
this.position = {...point}
|
||||
@ -70,6 +75,7 @@ export default {
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.selected = null;
|
||||
this.position = {x: 0, y: 0};
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
@ -4,27 +4,15 @@ import entry from './entry.vue';
|
||||
|
||||
const elPage = Vue.extend(entry);
|
||||
|
||||
const toggling = (page, e) => {
|
||||
if (e&&e.code) {
|
||||
Vue.nextTick(() => {
|
||||
page.doShow({x: e.clientX, y: e.clientY});
|
||||
});
|
||||
} else {
|
||||
page.doClose();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handle = {
|
||||
onClick(e) {
|
||||
if (this.page) {
|
||||
this.page.selected = e;
|
||||
toggling(this.page, {});
|
||||
this.page.doClose()
|
||||
}
|
||||
},
|
||||
onContextMenu(e) {
|
||||
if (this.page) {
|
||||
toggling(this.page, e);
|
||||
this.page.doShow({x: e.clientX, y: e.clientY}, e.code);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,16 +14,27 @@
|
||||
@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-tabs id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
|
||||
<el-tab-pane label="元素绘制" name="first">
|
||||
<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.type" :lazy="true">
|
||||
<data-form :ref="'dataform'+element.type" :form="element" :form-model="element.model" />
|
||||
</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-tab-pane>
|
||||
<el-tab-pane label="状态编辑" name="second">
|
||||
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab">
|
||||
<el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true">
|
||||
<table-form :ref="'tableform'+composeElem.code" :state-list="composeElem.stateList" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</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>
|
||||
@ -34,15 +45,18 @@ import localStore from 'storejs';
|
||||
import iscsCanvas from './iscsCanvas';
|
||||
import formBuilder from '@/iscs_new/core/form/formBuilder';
|
||||
import DataForm from '../components/dataForm';
|
||||
import TableForm from '../components/tableForm';
|
||||
import orders from '@/iscs_new/utils/orders';
|
||||
import * as utils from '@/iscs_new/utils/utils';
|
||||
import Idb from '../utils/indexedDb.js';
|
||||
import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||
|
||||
export default {
|
||||
name: 'IscsView',
|
||||
components: {
|
||||
iscsCanvas,
|
||||
DataForm
|
||||
DataForm,
|
||||
TableForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -54,8 +68,11 @@ export default {
|
||||
draftShow: false,
|
||||
selected: null,
|
||||
enabledTab:'',
|
||||
cardTab:'first',
|
||||
statusTab:'',
|
||||
showDeleteButton:false,
|
||||
elementList:[]
|
||||
elementList:[],
|
||||
composeElemList:[]
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
@ -71,10 +88,8 @@ export default {
|
||||
mounted() {
|
||||
this.composeName = this.$route.query.composeName;
|
||||
this.elementList = formBuilder.buildFormList();
|
||||
this.enabledTab = this.elementList[0].code;
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
this.enabledTab = this.elementList[0].type;
|
||||
this.getComposeElemList();
|
||||
},
|
||||
methods: {
|
||||
onIscsChange(mode, system, part) {
|
||||
@ -87,52 +102,63 @@ 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.delete('composeList', model.id);
|
||||
Idb.write('composeList', model);
|
||||
Idb.list('composeList').then(list => {
|
||||
console.log(list);
|
||||
});
|
||||
}
|
||||
},
|
||||
onSelectTab() {
|
||||
this.selected = null;
|
||||
},
|
||||
onSelectCardTab() {
|
||||
|
||||
},
|
||||
onSelected(em) {
|
||||
if (em.model) {
|
||||
this.selected = JSON.parse(JSON.stringify(em.model));
|
||||
const elem = this.elementList.find(el => el.code == this.selected.type);
|
||||
const elem = this.elementList.find(el => el.type == this.selected.type);
|
||||
if (elem) {
|
||||
elem.model = this.selected;
|
||||
this.enabledTab = this.selected.type;
|
||||
}
|
||||
} else {
|
||||
this.selected = null;
|
||||
this.clear(this.enabledTab);
|
||||
}
|
||||
},
|
||||
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));
|
||||
const newModel = utils.deepClone(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.$refs.iscsCanvas.doAction([{model: newModel, action: {shapeType: shapeType.Element, order: orders.Add}}]);
|
||||
this.clear(this.enabledTab);
|
||||
this.getComposeElemList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onModify() {
|
||||
this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const model = this.$refs['dataform' + this.enabledTab][0].formModel;
|
||||
const model = utils.deepClone(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.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Update}}]);
|
||||
this.clear(this.enabledTab);
|
||||
}
|
||||
});
|
||||
@ -140,18 +166,27 @@ export default {
|
||||
onDelete() {
|
||||
this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const model = this.$refs['dataform' + this.enabledTab][0].formModel;
|
||||
const model = utils.deepClone(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.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.Delete}}]);
|
||||
this.clear(this.enabledTab);
|
||||
this.getComposeElemList();
|
||||
}
|
||||
});
|
||||
},
|
||||
clear(enabledTab) {
|
||||
this.$refs['dataform' + enabledTab][0].init();
|
||||
this.selected = null;
|
||||
},
|
||||
getComposeElemList() {
|
||||
const source = this.$iscs.getSource();
|
||||
if (source.elementList) {
|
||||
this.composeElemList = source.elementList;
|
||||
this.statusTab = this.composeElemList[0].code;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -168,6 +203,28 @@ export default {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom:30px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// height: 110px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 5px;
|
||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.map-view {
|
||||
@ -252,4 +309,7 @@ export default {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#cardTab .el-tabs__content{
|
||||
padding:0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,157 +1,315 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
|
||||
</div>
|
||||
<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 id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
|
||||
<el-tab-pane label="元素绘制" name="first">
|
||||
<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.type" :lazy="true">
|
||||
<data-form :ref="'dataform'+element.type" :form="element" :form-model="element.model" />
|
||||
</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-tab-pane>
|
||||
<el-tab-pane label="状态编辑" name="second">
|
||||
<el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab">
|
||||
<el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true">
|
||||
<table-form :ref="'tableform'+composeElem.code" :state-list="composeElem.stateList" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Iscs from '@/iscs_new/map';
|
||||
import { mapGetters } from 'vuex';
|
||||
import localStore from 'storejs';
|
||||
import iscsCanvas from './iscsCanvas';
|
||||
import formBuilder from '@/iscs_new/core/form/formBuilder';
|
||||
import DataForm from '../components/dataForm';
|
||||
import TableForm from '../components/tableForm';
|
||||
import orders from '@/iscs_new/utils/orders';
|
||||
import * as utils from '@/iscs_new/utils/utils';
|
||||
import Idb from '../utils/indexedDb.js';
|
||||
import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||
|
||||
export default {
|
||||
name: 'IscsView',
|
||||
components: {
|
||||
iscsCanvas,
|
||||
DataForm,
|
||||
TableForm
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataZoom: {
|
||||
offsetX: '0',
|
||||
offsetY: '0',
|
||||
scaleRate: '1'
|
||||
size: {
|
||||
width: this.$store.state.app.width - 521,
|
||||
height: this.$store.state.app.height - 60
|
||||
},
|
||||
config: {
|
||||
scaleRate: '1',
|
||||
origin: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
loading: false
|
||||
widthLeft: Number(localStore.get('LeftWidth')) || 450,
|
||||
draftShow: false,
|
||||
selected: null,
|
||||
enabledTab:'',
|
||||
cardTab:'first',
|
||||
statusTab:'',
|
||||
showDeleteButton:false,
|
||||
elementList:[],
|
||||
composeElemList:[]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('iscs', [
|
||||
'iscs'
|
||||
]),
|
||||
iscsId() {
|
||||
return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
|
||||
},
|
||||
width() {
|
||||
return document.documentElement.clientWidth;
|
||||
},
|
||||
height() {
|
||||
return document.documentElement.clientHeight;
|
||||
computed:{
|
||||
iscsMode() {
|
||||
return this.$route.query.mode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.config.canvasSizeCount': function (val) {
|
||||
this.resize();
|
||||
},
|
||||
'$store.state.socket.equipmentStatus': function (val) {
|
||||
if (val.length) {
|
||||
this.stateMessage(val);
|
||||
}
|
||||
$route(val) {
|
||||
this.onIscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroy();
|
||||
this.composeName = this.$route.query.composeName;
|
||||
this.elementList = formBuilder.buildFormList();
|
||||
this.enabledTab = this.elementList[0].type;
|
||||
this.getComposeElemList();
|
||||
},
|
||||
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;
|
||||
};
|
||||
onIscsChange(mode, system, part) {
|
||||
// this.$refs.iscsPlate.show(mode, system, part);
|
||||
// this.$refs.iscsPlate.drawIscsInit();
|
||||
},
|
||||
// 视图加载完成
|
||||
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;
|
||||
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 elementList = source.elementList.map(el => {
|
||||
return this.$iscs.getShapeByCode(el.code);
|
||||
});
|
||||
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 ? [(rect.x + rect.width) / 2, (rect.y + rect.height) / 2] : [0, 0];
|
||||
const model = { id, name, type, shapeList, position };
|
||||
Idb.delete('composeList', model.id);
|
||||
Idb.write('composeList', model);
|
||||
Idb.list('composeList').then(list => {
|
||||
console.log(list);
|
||||
});
|
||||
}
|
||||
},
|
||||
onSelectTab() {
|
||||
this.selected = null;
|
||||
},
|
||||
onSelectCardTab() {
|
||||
|
||||
},
|
||||
onSelected(em) {
|
||||
if (em.model) {
|
||||
this.selected = JSON.parse(JSON.stringify(em.model));
|
||||
const elem = this.elementList.find(el => el.type == this.selected.type);
|
||||
if (elem) {
|
||||
elem.model = this.selected;
|
||||
this.enabledTab = this.selected.type;
|
||||
}
|
||||
} else {
|
||||
this.selected = null;
|
||||
this.clear(this.enabledTab);
|
||||
}
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const formModel = this.$refs['dataform' + this.enabledTab][0].formModel;
|
||||
const newModel = utils.deepClone(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);
|
||||
this.getComposeElemList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onModify() {
|
||||
this.$refs['dataform' + this.enabledTab][0].$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
const model = utils.deepClone(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 = utils.deepClone(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);
|
||||
this.getComposeElemList();
|
||||
}
|
||||
});
|
||||
},
|
||||
clear(enabledTab) {
|
||||
this.$refs['dataform' + enabledTab][0].init();
|
||||
this.selected = null;
|
||||
},
|
||||
getComposeElemList() {
|
||||
const source = this.$iscs.getSource();
|
||||
if (source.elementList) {
|
||||
this.composeElemList = source.elementList;
|
||||
this.statusTab = this.composeElemList[0].code;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.iscs-button{
|
||||
position: absolute;
|
||||
float: right;
|
||||
right: 20px;
|
||||
bottom: 15px;
|
||||
@import "src/styles/mixin.scss";
|
||||
.card{
|
||||
height: 100%;
|
||||
display:flex;width: 100%;flex-direction: column
|
||||
}
|
||||
.iscs-canvas{
|
||||
|
||||
.card .el-tab-pane{
|
||||
flex:1;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding-bottom:30px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
// height: 110px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
border-radius: 5px;
|
||||
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||||
background: rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.map-view {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.heightClass{height:100%;overflow:hidden;display:flex;width: 100%;flex-direction: column;}
|
||||
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
left:0;top:0;
|
||||
}
|
||||
|
||||
.right-card{
|
||||
width: 550px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translateX(550px);
|
||||
transition: all 0.5s;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
/deep/{
|
||||
.v-modal{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.hide{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.btn_draft_box{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
#cardTab .el-tabs__content{
|
||||
padding:0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user