<template>
|
<div class="d-flex align-items-stretch flex-grow-1 pr">
|
<div class="bg-white home-sidenav border-right" :class="isOpenTree?'w-20':'w-0'">
|
<div class="pl-2 pr-2" style="min-width:200px">
|
<org-tree ref="tree" :data="treeList" @currentNode="currentNode" @toggleOpen="toggleOpen"/>
|
</div>
|
</div>
|
<div class="flex-grow-1 bg-lighter" :class="isOpenTree?'w-80':''">
|
<div class="pt50 pb30 bg-white border-bottom mb-4"></div>
|
<div class="container-p-x ">
|
<div class="row bg-white pt-4 pb-4 pl-3 pr-3">
|
<div class="col-md-12 col-lg-12" >
|
<div class="bg-white" >
|
<div class="row">
|
<div class="col-md-12 col-lg-3">
|
<div style="height: 22vh;" class="border pb-4">
|
<!-- 教师今日考勤 -->
|
<AnalysisPieChart/>
|
</div>
|
</div>
|
<div class="col-md-12 col-lg-9">
|
<div style="height: 22vh;" class="pt-4 pb-4 border flex-center">
|
<!-- 统计数量 -->
|
<AnalysisStudentCount/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-md-12 col-lg-12" >
|
<div style="margin-top:1vh;height: 22vh;" >
|
<!-- 学生考勤 -->
|
<TodayAttend/>
|
</div>
|
</div>
|
<div class="col-md-12 col-lg-12" >
|
<!-- 人员进出流量趋势 -->
|
<div style="margin-top:1vh;height: 25vh;">
|
<AnalysisLineChart/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 侧边栏按钮 start -->
|
<div class="toggleOpen-btn bg-dark" :class="!isOpenTree?'isShow':''" v-if="!isOpenTree">
|
<b-button variant="link" class="tree-btn" @click="isOpenTree = !isOpenTree">
|
<i class="ion ion-md-swap f20 text-white"></i>
|
</b-button>
|
</div>
|
<!-- 侧边栏按钮 end -->
|
</div>
|
</template>
|
|
<script>
|
import { isOrg } from '../../components/common/util.js'
|
import { getOrgTree } from '../../server/project.js'
|
import OrgTree from './components/OrgTree'
|
// import { mapActions } from 'vuex'
|
// import { getApplicationList } from '@/server/common.js'
|
import AnalysisPieChart from './components/AnalysisPieChart'
|
import AnalysisStudentCount from './components/AnalysisStudentCount'
|
import AnalysisLineChart from './components/AnalysisLineChart'
|
import TodayAttend from './components/TodayAttend'
|
|
export default {
|
name: 'application-center',
|
components: {
|
AnalysisPieChart,
|
AnalysisStudentCount,
|
AnalysisLineChart,
|
TodayAttend,
|
orgTree: OrgTree
|
},
|
metaInfo: {
|
title: '统计分析'
|
},
|
data() {
|
return {
|
noneImg: 'this.src="' + require('@/assets/img/noneImg.png') + '"',
|
userInfo: this.$store.getters.basicUserInfo,
|
/* 树形结构 */
|
treeList: [],
|
isOpenTree: true,
|
currentItem: null,
|
currentId: '',
|
currentName: ''
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
}
|
},
|
methods: {
|
/* 树形函数 start */
|
/* 获取业务组织的OrgId */
|
getRealOrgId() {
|
let orgId = this.orgId
|
if (this.currentItem) {
|
const isOrgResult = isOrg(this.currentItem.type)
|
orgId = isOrgResult ? this.currentItem.id : this.currentItem.orgId
|
}
|
return orgId
|
},
|
// * 获取树
|
async _initTreeData() {
|
let res = await getOrgTree({ orgById: this.orgId })
|
if (res) {
|
this.treeList = res
|
if (this.$route.query.currentId) {
|
this.$refs.tree.setCurrentKey(this.$route.query.currentId)
|
this.currentId = this.$route.query.currentId
|
this.$nextTick(() => {
|
this.currentItem = this.$refs.tree.getCurrentNode()
|
this.currentName = this.currentItem.name
|
})
|
} else {
|
const { child, ...item } = res[0]
|
this.currentItem = item
|
this.$refs.tree.setCurrentKey(item.id)
|
this.currentId = item.id
|
this.currentName = this.currentItem.name
|
}
|
}
|
},
|
currentNode(node) {
|
console.log(node, 'node---树形')
|
this.currentItem = node
|
this.currentId = node.id
|
this.currentName = node.name
|
// this._initData()
|
},
|
toggleOpen() {
|
this.isOpenTree = !this.isOpenTree
|
}
|
/* 树形函数 end */
|
},
|
created() {
|
this._initTreeData()
|
}
|
}
|
</script>
|
<style lang="scss">
|
.ui-icon-lg {
|
font-size: 30px;
|
width: 60px;
|
height: 60px;
|
line-height: 60px !important;
|
}
|
.home-sidenav {
|
transition: all 0.5s;
|
overflow: hidden;
|
}
|
.w-20 {
|
width: 20%;
|
}
|
.w-80 {
|
width: 80%;
|
}
|
.w-0 {
|
width: 0%;
|
}
|
.toggleOpen-btn {
|
border-radius: 5px;
|
position: absolute;
|
left: -8px;
|
top: 1.5rem;
|
transition: all 2s;
|
opacity: 0;
|
}
|
.toggleOpen-btn.isShow {
|
opacity: 1;
|
}
|
</style>
|
