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.
110 lines
3.7 KiB
110 lines
3.7 KiB
<template>
|
|
<div class="app-container" style="background-color: #031435;">
|
|
<div>
|
|
<el-row :gutter="20" style="height:296px;">
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案借阅</p>
|
|
</h3>
|
|
<div class="chart-wrapper">
|
|
<lend-across :lend-data="lendData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案类别</p>
|
|
</h3>
|
|
<div class="chart-wrapper">
|
|
<cate-pie :cate-data="cateData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
<div class="top-row container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案类型</p>
|
|
</h3>
|
|
<div class="chart-wrapper">
|
|
<type-pie :type-data="typeData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 中间 -->
|
|
<el-row :gutter="20" style="width:100%;padding:20px 0 20px 10px;" class="dpflex">
|
|
<el-col :xs="24" :sm="24" :lg="12" style="padding:0;margin-right:20px">
|
|
<div class="container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">出入库管理情况</p>
|
|
</h3>
|
|
<BarEcharts />
|
|
</div>
|
|
</el-col>
|
|
<el-col :xs="24" :sm="24" :lg="12" style="padding:0;margin-right: -10px">
|
|
<div class=" container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案检索排名</p>
|
|
</h3>
|
|
<AcrossBar />
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
<!-- 底部 -->
|
|
<el-row :gutter="20" style="height:296px;">
|
|
<el-col :xs="24" :sm="24" :lg="25">
|
|
<div class=" container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">档案实际情况</p>
|
|
</h3>
|
|
<LineEchart />
|
|
</div>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import RadarChart from '@/components/Echarts/RadarChart'
|
|
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 PieChart from '@/components/Echarts/PieChart'
|
|
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) ;
|
|
}
|
|
</style>
|