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

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