You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
4.2 KiB
125 lines
4.2 KiB
<template>
|
|
<div class="app-container" style="background-color: #031435;">
|
|
<div>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案借阅</p>
|
|
</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<lend-across :lend-data="lendData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案类别</p>
|
|
</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<cate-pie :cate-data="cateData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案类型</p>
|
|
</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<type-pie :type-data="typeData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 中间 -->
|
|
<el-row class="center-box">
|
|
<el-col class="center-chart" style="margin-right:20px">
|
|
<div class="container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">出入库管理情况</p>
|
|
</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<BarEcharts />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col class="center-chart">
|
|
<div class=" container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案检索排名</p>
|
|
</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<AcrossBar />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<!-- 底部 -->
|
|
<el-row :gutter="20">
|
|
<el-col :xs="24" :sm="24" :lg="25">
|
|
<div class="container-wrap" style="height:calc(25vh - 40px)">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案实际情况</p>
|
|
</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<LineEchart />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import lendAcross from '@/views/components/echarts/lendAcross.vue'
|
|
import catePie from '@/views/components/echarts/catePie.vue'
|
|
import typePie from '@/views/components/echarts/typePie.vue'
|
|
import BarEcharts from './module/barEcharts.vue'
|
|
import AcrossBar from './module/acrossBar.vue'
|
|
import LineEchart from './module/lineEchart.vue'
|
|
export default {
|
|
components: { lendAcross, catePie, typePie, BarEcharts, AcrossBar, LineEchart },
|
|
data() {
|
|
return {
|
|
lendData: [18203, 23489, 29034, 104970],
|
|
cateData: [1000, 700],
|
|
typeData: [1110, 2000, 800, 600, 900]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/assets/styles/lend-manage.scss';
|
|
.container-wrap{
|
|
min-height:calc(100vh - 636px) ;
|
|
}
|
|
|
|
.center-box{
|
|
// width:100%;
|
|
margin:20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.center-chart{
|
|
padding:0;
|
|
height:100%;
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|