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

<template>
  <div class="dashboard-container">
    <!-- <div class="item-row" style="margin-top: 20px">
      <div class="item-col">
        <echarts-lesson id="lesson" ref="lesson" :size="{width: size.width, height: size.height}" />
      </div>
      <div class="item-col">
        <echarts-exam id="exam" ref="exam" :size="{width: size.width, height: size.height}" />
      </div>
    </div>
    <div class="item-flex">
      <echarts-demon id="demon" ref="demon" :size="{width: size.width * 2 + 4, height: size.height}" />
    </div> -->
    <echarts-permission ref="permission" class="perssmin-card" :size="{ width: size.width, height: size.height }" />
  </div>
</template>

<script>
// import EchartsExam from './echarts/exam';
// import EchartsLesson from './echarts/lesson';
// import EchartsDemon from './echarts/demonstration';
import EchartsPermission from './echarts/permission';

export default {
	name: 'Dashboard',
	components: {
		// EchartsExam,
		// EchartsLesson,
		// EchartsDemon,
		EchartsPermission
	},
	data() {
		return {
			size: {
				width: 0,
				height: 0
			}
		};
	},
	watch: {
		'$store.state.app.windowSizeCount': function() {
			this.resize();
		}
	},
	mounted() {
		this.resize();
	},
	methods: {
		resize() {
			// this.size = {
			// 	width: (this.$store.state.app.width - 60) / 2,
			// 	height: (this.$store.state.app.height - 100) / 2
			// };
			this.size = {
				width: (this.$store.state.app.width - 40),
				height: (this.$store.state.app.height - 100)
			};
		}
	}

};
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 0px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

.item-col {
	display: inline-block;
}

.item-row {
	left: 50%;
	right: 50%;
	text-align: center;
}

.item-flex {
	display: flex;
	justify-content: center;
}

.perssmin-card {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
</style>