rt-sim-training-client/src/views/designPlatform/index.vue

124 lines
3.8 KiB
Vue
Raw Normal View History

2019-09-25 14:52:21 +08:00
<template>
<div class="app-wrapper">
2019-09-26 15:51:22 +08:00
<map-create ref="mapCreate" :skin-code="skinCode" @refresh="refresh1" @editmap="handleNodeClick" />
2019-09-25 14:52:21 +08:00
<el-scrollbar wrap-class="scrollbar-wrapper">
<div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
2019-09-26 15:51:22 +08:00
<demon-list ref="demonList" :height="height" :width="widthLeft" @createMap="createMap"/>
2019-09-25 14:52:21 +08:00
</div>
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
<transition>
<router-view :style="{ position:'relative', left:widthLeft+'px', width: (width - widthLeft)+'px'}" :product-list="productList" />
</transition>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import demonList from './demonList';
import drapLeft from '@/views/components/drapLeft/index';
import { launchFullscreen } from '@/utils/screen';
import localStore from 'storejs';
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
2019-09-26 15:51:22 +08:00
import MapCreate from '@/views/map/mapdraft/mapmanage/create';
2019-09-25 14:52:21 +08:00
export default {
name: 'DesignPlatform',
components: {
demonList,
2019-09-26 15:51:22 +08:00
drapLeft,
MapCreate
2019-09-25 14:52:21 +08:00
},
data() {
return {
listShow: true,
widthLeft: 450,
2019-09-26 15:51:22 +08:00
productList: [],
skinCode: '',
2019-09-25 14:52:21 +08:00
};
},
computed: {
...mapGetters([
'lessonbar'
]),
height() {
return this.$store.state.app.height - 50;
},
width() {
return this.$store.state.app.width;
}
},
watch: {
'lessonbar.opened': function (val) {
this.listShow = val;
}
},
mounted() {
const againEnter = getSessionStorage('againEnter') || null;
if (!againEnter){
launchFullscreen();
setSessionStorage('againEnter',true);
}
this.widthLeft = Number(localStore.get('LeftWidth'));
},
methods: {
refresh() {
this.$refs && this.$refs.demonList && this.$refs.demonList.refresh();
},
drapWidth(width) {
this.widthLeft = Number(width);
2019-09-26 15:51:22 +08:00
},
createMap() {
this.$refs.mapCreate.show();
},
refresh1() {
},
getSkinCode(node) {
let next = node;
while (next) {
if (next.data && next.data.type == 'skin') {
this.skinCode = next.data.id;
break;
}
next = next.parent;
}
},
handleNodeClick(obj, node) {
this.getSkinCode(node);
if (obj && obj.type == 'map') {
this.editModel = obj;
this.$store.dispatch('menuOperation/setPopMenu', { position: null, menu: null });
this.mapSelected({ view: 'draft' });
}
},
mapSelected(data) {
if (data && this.editModel) {
this.$router.push({ path: `${UrlConfig.map.draft}/${this.editModel.id}/${data.view}`, query: { name: this.editModel.name } });
}
},
2019-09-25 14:52:21 +08:00
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.examList {
position: fixed;
top: 61px;
height: 100%;
}
</style>