代码调整

This commit is contained in:
joylink_cuiweidong 2021-04-22 14:55:11 +08:00
parent f34617b7db
commit c1356549ec
4 changed files with 92 additions and 63 deletions

View File

@ -2,7 +2,7 @@
<transition name="el-zoom-in-center"> <transition name="el-zoom-in-center">
<div class="mapPaint"> <div class="mapPaint">
<div class="map-view"> <div class="map-view">
<iscs-canvas ref="iscsCanvas" @selected="onSelected" /> <iscs-canvas ref="iscsCanvas" @selected="onSelected" @setStateList="setStateList" />
</div> </div>
<div class="right-card" :class="{'hide': draftShow}"> <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> <div class="btn_draft_box" @click="draftShow = !draftShow"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
@ -58,7 +58,7 @@
</el-tabs> </el-tabs>
</el-card> </el-card>
</div> </div>
<status-list ref="statusList" /> <status-list ref="statusList" @setStateList="setStateList" />
</div> </div>
</transition> </transition>
</template> </template>
@ -162,9 +162,8 @@ export default {
onSelectCardTab() { onSelectCardTab() {
}, },
saveStateList(stateList) { setStateList(stateList) {
this.stateList = stateList; this.stateList = stateList;
this.onSave();
}, },
onSelected(em) { onSelected(em) {
if (em.model) { if (em.model) {

View File

@ -63,7 +63,7 @@ export default {
this.destroy(); this.destroy();
}, },
methods: { methods: {
// //
init() { init() {
document.getElementById(this.iscsId).oncontextmenu = function (e) { document.getElementById(this.iscsId).oncontextmenu = function (e) {
return false; return false;
@ -82,55 +82,56 @@ export default {
offsetX: 0, offsetX: 0,
offsetY: 0 offsetY: 0
}, },
plugins: [ plugins: [
ShapeBuilder, ShapeBuilder,
// ShapeProperty, // ShapeProperty,
ShapeContextMenu ShapeContextMenu
] ]
}); });
const option = { const option = {
panEnable: true, panEnable: true,
zoomEnable: true, zoomEnable: true,
keyEnable: true, keyEnable: true,
draggle: true, draggle: true,
selecting: true, selecting: true,
selectable: true, selectable: true,
reflect: true reflect: true
} };
if (this.$route.query.id) { if (this.$route.query.id) {
setTimeout(_ => { setTimeout(_ => {
Idb.select('composeTemplateList', this.$route.query.id).then(resp => { Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
this.$iscs.setMap([], { this.$iscs.setMap([], {
elementList: resp.shapeList||[], elementList: resp.shapeList || [],
composeList: resp.composeList||[] composeList: resp.composeList || []
}, option); }, option);
EventBus.$emit('getComposeElemList'); EventBus.$emit('getComposeElemList');
}).catch(error => { this.$emit('setStateList', resp.stateList);
this.$iscs.setMap([], { }).catch(error => {
elementList: [], this.$iscs.setMap([], {
composeList: [] elementList: [],
}, option); composeList: []
}) }, option);
}, 1000) });
} else { }, 1000);
this.$iscs.setMap([], { } else {
elementList: [], this.$iscs.setMap([], {
composeList: [] elementList: [],
}, option); composeList: []
} }, option);
}
Vue.prototype.$iscs = this.$iscs; Vue.prototype.$iscs = this.$iscs;
this.$iscs.on('viewLoaded', this.onViewLoaded, this); this.$iscs.on('viewLoaded', this.onViewLoaded, this);
this.$iscs.on('contextmenu', this.onContextMenu, this); this.$iscs.on('contextmenu', this.onContextMenu, this);
this.$iscs.on('click', this.onClick, this); this.$iscs.on('click', this.onClick, this);
this.$iscs.on('reflect', this.onReflect, this); this.$iscs.on('reflect', this.onReflect, this);
this.$iscs.on('keyboard', this.onKeyboard, this); this.$iscs.on('keyboard', this.onKeyboard, this);
window.document.oncontextmenu = function () { window.document.oncontextmenu = function () {
return false; return false;
}; };
}, },
// //
onViewLoaded(e) { onViewLoaded(e) {
}, },
// //
@ -138,38 +139,38 @@ export default {
console.log(hook); console.log(hook);
}, },
// //
onClick(em={}) { onClick(em = {}) {
this.$emit('selected', em); this.$emit('selected', em);
},
onReflect(em = {}) {
this.$emit('selected', this.$iscs.getShapeByCode(em.code));
}, },
onReflect(em={}) {
this.$emit('selected', this.$iscs.getShapeByCode(em.code));
},
// //
onContextMenu(em={}) { onContextMenu(em = {}) {
this.$emit('contextMenu', em.model); this.$emit('contextMenu', em.model);
}, },
// //
doAction(list) { doAction(list) {
this.$iscs && this.$iscs.render(list); this.$iscs && this.$iscs.render(list);
}, },
// //
stateMessage(val) { stateMessage(val) {
this.$iscs && this.$iscs.setDeviceStatus(val); this.$iscs && this.$iscs.setDeviceStatus(val);
}, },
// //
resize() { resize() {
this.$nextTick(() => { this.$nextTick(() => {
this.$iscs && this.$iscs.resize({ width: this.width, height: this.height }); this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
}); });
}, },
// //
destroy() { destroy() {
if (this.$iscs) { if (this.$iscs) {
this.$iscs.destroy(); this.$iscs.destroy();
this.$iscs = null; this.$iscs = null;
Vue.prototype.$iscs = null; Vue.prototype.$iscs = null;
} }
}, }
} }
}; };
</script> </script>

View File

@ -66,6 +66,7 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button> <el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
<el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button> <el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
<el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(scope.$index,scope.row)">预览</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -133,15 +134,16 @@
<!-- 元素 --> <!-- 元素 -->
<!-- <div /> --> <!-- <div /> -->
<div v-if="scope.row.loop" style="margin-bottom:10px"> <div v-if="scope.row.loop" style="margin-bottom:10px">
<div style="display:inline-block">当前动画帧</div> <!-- <div style="display:inline-block">当前动画帧{{ scope.row.frameId }}</div> -->
<el-input-number <el-button type="primary" size="mini" class="addStyle" @click="addElementFrameId(scope.$index,scope.row.frameId)">添加帧</el-button>
<!-- <el-input-number
v-model="scope.row.frameId" v-model="scope.row.frameId"
:min="1" :min="1"
:max="10" :max="10"
size="mini" size="mini"
:step="1" :step="1"
:precision="0" :precision="0"
/> /> -->
</div> </div>
<el-select <el-select
v-model="scope.row.selectedElement" v-model="scope.row.selectedElement"
@ -238,6 +240,8 @@ export default {
this.model.stateList = that.formModel.stateList; this.model.stateList = that.formModel.stateList;
Idb.delete('composeTemplateList', this.model.id); Idb.delete('composeTemplateList', this.model.id);
Idb.write('composeTemplateList', this.model); Idb.write('composeTemplateList', this.model);
that.show = false;
this.$emit('setStateList', that.formModel.stateList);
} }
}); });
}, },
@ -257,7 +261,7 @@ export default {
}, },
addCovertStatus() { addCovertStatus() {
if (this.defaultLoop) { if (this.defaultLoop) {
this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[], selectedElement:'', selectedElementStatus:'', frameId:1 }); this.statusModel.covertStatusList.push({loop:this.defaultLoop, delay:2, animateTime:10, frameList:[], statusList:[], selectedElement:'', selectedElementStatus:'', frameId:null });
} else { } else {
this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[], selectedElementStatus:'', selectedElement:'' }); this.statusModel.covertStatusList.push({loop:this.defaultLoop, frameList:[], statusList:[], selectedElementStatus:'', selectedElement:'' });
} }
@ -276,6 +280,14 @@ export default {
deleteCovertStatus(index, row) { deleteCovertStatus(index, row) {
this.statusModel.covertStatusList.splice(index, 1); this.statusModel.covertStatusList.splice(index, 1);
}, },
addElementFrameId(index, frameId) {
if (frameId) {
this.statusModel.covertStatusList[index].frameId = frameId + 1;
} else {
this.statusModel.covertStatusList[index].frameId = 1;
}
this.statusModel.covertStatusList[index].frameList.push([]);
},
addElementStatus(index, loop) { addElementStatus(index, loop) {
const frameList = this.statusModel.covertStatusList[index].frameList || []; const frameList = this.statusModel.covertStatusList[index].frameList || [];
const temp = this.statusModel.covertStatusList[index]; const temp = this.statusModel.covertStatusList[index];
@ -290,7 +302,7 @@ export default {
}); });
} }
if (curFrameIndex < 0) { if (curFrameIndex < 0) {
this.statusModel.covertStatusList[index].frameList.push([]); // this.statusModel.covertStatusList[index].frameList.push([]);
this.statusModel.covertStatusList[index].frameList[temp.frameId - 1].push({name:this.statusModel.covertStatusList[index].selectedElement, this.statusModel.covertStatusList[index].frameList[temp.frameId - 1].push({name:this.statusModel.covertStatusList[index].selectedElement,
status:this.statusModel.covertStatusList[index].selectedElementStatus}); status:this.statusModel.covertStatusList[index].selectedElementStatus});
} }
@ -321,6 +333,24 @@ export default {
}); });
} }
},
previewStatus(index, row) {
// const that = this;
// if(needDefault)
const list = Object.values(row.covertStatusList);
list.forEach(each=>{
if (each.loop) {
} else {
const frameList = each.frameList;
frameList.forEach(frame=>{
// frame.name;
// frame.status;
// this.$iscs.
});
}
});
// this.show = false;
} }
} }
}; };

View File

@ -56,7 +56,6 @@ export default {
source.elementList.length) { source.elementList.length) {
this.composeElemList = source.elementList; this.composeElemList = source.elementList;
this.statusTab = this.composeElemList[0].code; this.statusTab = this.composeElemList[0].code;
debugger;
} else { } else {
this.composeElemList = []; this.composeElemList = [];
} }