109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<div class="homePage" id="dashboard">
|
|
<div class="container">
|
|
<!-- 上侧数据模块列表 -->
|
|
<div class="topModuleBox">
|
|
<div style="width: 78%;margin: 0 1%;height: 100%;">
|
|
<TopOne @getHomeData="getHomeData" @openDialog="handleDialog"></TopOne>
|
|
</div>
|
|
|
|
<div style="width: 20%;margin: 0 1%;height: 100%;">
|
|
<TopTwo :pageData="pageData.monthAbnormalBean" @openDialog="handleDialog"></TopTwo>
|
|
</div>
|
|
</div>
|
|
<!-- 下侧数据模块列表 -->
|
|
<div class="bottomModuleBox">
|
|
<div style="width: 48%;margin: 0 1%;height: 100%;">
|
|
<BottomOne :orgNumBean="pageData.orgNumBean"></BottomOne>
|
|
</div>
|
|
<div style="width: 48%;margin: 0 1%;height: 100%;">
|
|
<BottomTwo @openDialog="handleDialog" :pageData="pageData.monthAbnormalTypeBean"></BottomTwo>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 弹窗统一控制组件 -->
|
|
<common-dialog ref="dialogRef"></common-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import TopOne from './dashboard/topOne.vue';
|
|
import TopTwo from './dashboard/topTwo.vue';
|
|
import BottomOne from './dashboard/bottomOne.vue';
|
|
import BottomTwo from './dashboard/bottomTwo.vue';
|
|
import CommonDialog from './components/commonDialog.vue'
|
|
import { getHomePageData } from '@/api/dashboard'
|
|
export default {
|
|
components: {
|
|
TopOne,
|
|
TopTwo,
|
|
BottomOne,
|
|
BottomTwo,
|
|
CommonDialog
|
|
},
|
|
name: 'Dashboard',
|
|
data() {
|
|
return {
|
|
pageData:{}
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
|
|
mounted() {
|
|
// setTimeout(()=>{
|
|
// this.getHomePageData()
|
|
// },2000)
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
methods: {
|
|
getHomeData(data){
|
|
this.pageData = data;
|
|
this.$set(this,"pageData",data)
|
|
},
|
|
handleDialog(val) {
|
|
this.$refs.dialogRef.setOpen({
|
|
open: true,
|
|
param: val,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.homePage {
|
|
width: 100%;
|
|
height: auto;
|
|
// background: url(../../assets/img/bgd.png) no-repeat center;
|
|
// background-size: 100% 100%;
|
|
background: #F8F8F8;
|
|
color: #000;
|
|
position: relative;
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: auto;
|
|
// min-height: 100%;
|
|
background: #F8F8F8;
|
|
|
|
.topModuleBox {
|
|
width: 100%;
|
|
height: 320px;
|
|
display: flex;
|
|
}
|
|
.bottomModuleBox {
|
|
width: 100%;
|
|
height: 450px;
|
|
margin: 20px 0;
|
|
display: flex;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|