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>
            <el-date-picker
              v-model="cateDate"
              type="year"
              placeholder="请选择"
              value-format="yyyy"
              :picker-options="pickerOptions"
              @change="handleCateDate"
            />
            <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>
            <el-date-picker
              v-model="typeDate"
              type="month"
              placeholder="请选择"
              value-format="yyyy-MM"
              @change="handleTypeDate"
            />
            <div v-if="typeData.length !== 0" class="chart-wrapper" style="height: calc(100% - 40px);">
              <type-pie :type-data="typeData" />
            </div>
            <div v-else class="empty-main">
              <svg-icon icon-class="empty" class-name="empty-img" />
              <p>暂无数据</p>
            </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>
            <el-date-picker
              v-model="inOutStorageDate"
              class="storageInput"
              type="year"
              placeholder="请选择"
              value-format="yyyy"
              :picker-options="pickerOptions"
              @change="handleStorageDate"
            />
            <div class="chart-wrapper" style="height: calc(100% - 40px);">
              <BarEcharts :storage-data="storageData" />
            </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>
            <el-date-picker
              v-model="arcSearchDate"
              type="month"
              placeholder="请选择"
              value-format="yyyy-MM"
              @change="handleSearchDate"
            />
            <div v-if="searchAcrivesData.searchName.length !==0 && searchAcrivesData.searchName.searchValue !==0" class="chart-wrapper" style="height: calc(100% - 40px);">
              <AcrossBar ref="searchCharts" :search-acrives-data="searchAcrivesData" />
            </div>
            <div v-else class="empty-main">
              <svg-icon icon-class="empty" class-name="empty-img" />
              <p>暂无数据</p>
            </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>
            <el-date-picker
              v-model="arcAddDate"
              type="year"
              placeholder="请选择"
              value-format="yyyy"
              :picker-options="pickerOptions"
              @change="handleArcAddSta"
            />
            <div class="chart-wrapper" style="height: calc(100% - 40px);">
              <LineEchart :add-arcives-data="addArcivesData" />
            </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'
import { statisticsCrud } from './mixins/statistics'
export default {
  components: { lendAcross, catePie, typePie, BarEcharts, AcrossBar, LineEchart },
  mixins: [statisticsCrud],
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
.container-wrap{
  position: relative;
  min-height:calc(100vh - 636px) ;
}
::v-deep .el-date-editor{
  position: absolute;
  right: 20px;
  top: 10px;
  width: 100px;
  z-index: 99;

  .el-input__inner{
    width: 100px;
    height: 30px;
    padding-left: 28px;
    padding-right: 10px;
    border: 1px solid #339cff;
    background-color: #021941;
    line-height: 30px;
    color: #fff;
  }
  .el-input__prefix{
    left: 3px;
  }
  .el-input__suffix{
    right: -2px;
  }
}
.center-box{
  margin:20px 0;
  display: flex;
  justify-content: space-between;
  .center-chart{
    padding:0;
    height:100%;
    flex: 1;
  }
}
</style>