yxk-storeroom-system/src/views/system/archiveStatistics/index.vue

<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>