67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="main">
|
||
|
|
<div class="list" :style="{width: widthLeft+'px'}">
|
||
|
|
<chart-list ref="list" :height="height"></chart-list>
|
||
|
|
</div>
|
||
|
|
<drap-left :widthLeft="widthLeft" @drapWidth="drapWidth"></drap-left>
|
||
|
|
<transition>
|
||
|
|
<router-view style="float: right;" :style="{width: width+'px'}"></router-view>
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
|
||
|
|
import DrapLeft from '@/views/components/drapLeft/index';
|
||
|
|
import ChartList from './manage/list';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'runPlan',
|
||
|
|
mixins: [WindowResizeHandler],
|
||
|
|
components: {
|
||
|
|
DrapLeft,
|
||
|
|
ChartList,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
width: 0,
|
||
|
|
height: 0,
|
||
|
|
widthLeft: 320,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
widthLeft(val) {
|
||
|
|
this.setRunPlanResize(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
drapWidth(width) {
|
||
|
|
this.widthLeft = Number(width);
|
||
|
|
},
|
||
|
|
setRunPlanResize(LeftWidth) {
|
||
|
|
if (this.$refs) {
|
||
|
|
this.width = this._clientWidth - LeftWidth;
|
||
|
|
this.height = this._clientHeight - 150;
|
||
|
|
this.$store.dispatch('runPlan/resize', { width: this.width, height: this.height + 90 });
|
||
|
|
} else {
|
||
|
|
setTimeout(() => { this.setRunPlanResize(LeftWidth); }, 300)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
resizeHandler() {
|
||
|
|
this.setRunPlanResize(this.widthLeft);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
|
|
@import "src/styles/mixin.scss";
|
||
|
|
|
||
|
|
.main {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.list {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|