yxk-electronic-archives/src/views/home.vue

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <panel-group />
      <el-row :gutter="20" style="margin-bottom:20px;height: 152px;">
        <el-col :xs="24" :sm="24" :lg="16">
          <div class="container-left search-area">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <SearchAcrives />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div class="container-left" style="height: 100%;margin: 0">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class=" table-title">
              <p class="title-arrow">
                <svg-icon icon-class="a-3Dkufang" class-name="warehouse-svg" />3D库房
              </p>
            </h3>
            <div class="warehouse-tab">
              <ul class="warehouse-nav">
                <li @click="changeActiveTab(0)">
                  <span />
                  <p>全景图</p>
                </li>
                <li @click="changeActiveTab(1)">
                  <span />
                  <p>档案库</p>
                </li>
                <li @click="changeActiveTab(2)">
                  <span />
                  <p>整理室</p>
                </li>
                <li @click="changeActiveTab(3)">
                  <span />
                  <p>阅览室</p>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 251px);">
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 待办事项 -->
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="table-title">
              <p class="title-arrow">
                <svg-icon icon-class="tongzhigonggao" class-name="warehouse-svg" />待办事项
              </p>
            </h3>
            <div style="height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;">
              <ul v-if="waitBorrowerData.length !== 0" class="todo-list">
                <li v-for="(item,index) in waitBorrowerData" :key="index">
                  <el-tooltip class="item" effect="dark" :content="item.title" :enterable="false" placement="top">
                    <p>{{ item.title }}</p>
                  </el-tooltip>
                  <span>{{ item.update_time | parseTime }}</span>
                </li>
              </ul>
              <div v-else class="empty-main" style="height: 100%;">
                <svg-icon icon-class="empty" class-name="empty-img" />
                <p>暂无数据</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 门禁记录 -->
          <security-door :height="'calc(100% - 40px)'" />
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 报警记录 -->
          <warehouse-warning :height="'calc(100% - 40px)'" />
        </el-col>
      </el-row>
      <el-row :gutter="20" style="height: calc(50vh - 251px);">
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 档案借阅 -->
          <div class="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="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="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="table-title">
              <p class="title-arrow">档案类型</p>
            </h3>
            <div v-if="typeData.length !== 0" class="chart-wrapper">
              <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>
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
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 WarehouseWarning from '@/views/components/WarehouseWarning'
import SecurityDoor from '@/views/components/SecurityDoor'
import SearchAcrives from '@/views/archivesManage/archivesSearch/index'
import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics'
import { FetchWaitBorrower } from '@/api/archivesManage/lendManage'

export default {
  name: 'Dashboard',
  components: {
    WarehouseWarning,
    SecurityDoor,
    PanelGroup,
    lendAcross,
    catePie,
    typePie,
    SearchAcrives
  },
  mixins: [statisticsCrud],
  data() {
    return {
      waitBorrowerData: []
    }
  },
  created() {
    this.getWaitBorrower()
  },
  methods: {
    getWaitBorrower() {
      FetchWaitBorrower().then(data => {
        if (data) {
          this.waitBorrowerData = data
        }
      })
    },
    changeActiveTab(id) {
      this.$router.push({
        name: 'warehouse3D',
        params: {
          roomId: id
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;
  position: relative;

  .chart-wrapper {
    height: calc(100% - 40px);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.warehouse-tab {
  .warehouse-nav {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 15px;
    z-index: 11;
    width: 100%;
    padding: 0;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      height: 90px;
      text-align: right;
      font-size: 14px;
      position: relative;
      &:hover {
        cursor: pointer;
      }
      span {
        width: 72px;
        height: 52px;
        margin-bottom: 7px;
      }
      p {
        text-align: left;
      }
      &:first-child span {
        background: url("~@/assets/images/tab_fullview_logo.png") no-repeat;
      }
      &:nth-child(2) span {
        background: url("~@/assets/images/tab_archives_logo.png") no-repeat;
      }
      &:nth-child(3) span {
        background: url("~@/assets/images/tab_collate_logo.png") no-repeat;
      }
      &:nth-child(4) span {
        background: url("~@/assets/images/tab_read_logo.png") no-repeat;
      }
    }
  }
}
.el-col {
  height: 100%;
}
.container-left,
.container-right,
.container-wrap,
.el-card,
.header-container-wrap {
  min-height: 100%;
}
.warehose-el-table ::v-deep .el-table__header-wrapper {
  box-shadow: inset 0px 0px 6px 1px #339cff;
  background: none !important;
}
.container-wrap {
  min-height: auto;
  height: 100%;
}
.todo-list {
  padding: 0 20px;
  & li {
    height: 42px;
    line-height: 42px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #ffffff;
    background: #02255f;
    box-shadow: inset 0px 0px 6px 1px #339cff;
    border-radius: 26px;
    opacity: 1;
    cursor: pointer;

    & p {
      display: inline-block;
      width: calc(100% - 140px);
      padding-left: 10px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
    }
    & span {
      float: right;
      padding-right: 10px;
    }
  }
}
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #02255f;
}
.search-area {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .search-main{
  padding: 0 62px;
  .head-container{
    padding: 0;
    width: 100% !important;
    .search-input {
      width: 100% !important;
    }
    .input-with-select{
      width: 100% !important;
    }
  }
}
</style>