代码调整
This commit is contained in:
parent
f34617b7db
commit
c1356549ec
@ -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) {
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -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 = [];
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user