yxk-storeroom-system/src/views/home.vue

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <!-- <github-corner class="github-corner" /> -->
      <panel-group />
      <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row> -->
      <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="chart-wrapper">
            <pie-chart />
          </div> -->
          <div class="container-left" style="height: 100%;margin: 0; position: relative;">
            <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="home-floor-tab">
              <p :class="{ 'active-floor': floorIndex == 0 }" @click="changeFloorTab(0)">5楼</p>
              <p :class="{ 'active-floor': floorIndex == 1 }" @click="changeFloorTab(1)">7楼</p>
            </div>
            <el-carousel ref="carouselRef" trigger="click" :interval="4000" indicator-position="none" height="110px" arrow="never" @change="handleChange">
              <el-carousel-item>
                <div class="warehouse-tab">
                  <ul class="warehouse-nav">
                    <li @click="changeActiveTab(1,0)">
                      <span />
                      <p>全景图</p>
                    </li>
                    <li @click="changeActiveTab(1,1)">
                      <span />
                      <p>档案库</p>
                    </li>
                    <li @click="changeActiveTab(1,2)">
                      <span />
                      <p>整理室</p>
                    </li>
                    <li @click="changeActiveTab(1,3)">
                      <span />
                      <p>阅览室</p>
                    </li>
                  </ul>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="warehouse-tab">
                  <ul class="warehouse-nav">
                    <li @click="changeActiveTab(0,4)">
                      <span />
                      <p>全景图</p>
                    </li>
                    <li @click="changeActiveTab(0,5)">
                      <span />
                      <p>现行文件室</p>
                    </li>
                    <li @click="changeActiveTab(0,6)">
                      <span />
                      <p>待销文件室</p>
                    </li>
                  </ul>
                </div>
              </el-carousel-item>
            </el-carousel>
          </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: [],
      floorIndex: 0
    }
  },
  created() {
    this.getWaitBorrower()
  },
  mounted() {
  },
  methods: {
    handleChange(index) {
      this.floorIndex = index
    },
    changeFloorTab(index) {
      this.floorIndex = index
      const carousel = this.$refs.carouselRef
      carousel.setActiveItem(index)
    },
    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type]
    // },
    getWaitBorrower() {
      FetchWaitBorrower().then(data => {
        if (data) {
          this.waitBorrowerData = data
        }
      })
    },
    changeActiveTab(floorId, roomId) {
      this.$router.push({
        name: 'warehouse3D',
        params: {
          floorId: floorId,
          roomId: roomId
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/lend-manage.scss";
.dashboard-editor-container {
  padding: 20px;
  background-color: #031435;
  position: relative;

  .chart-wrapper {
    height: calc(100% - 40px);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.warehouse-tab {
  color: #fff;
  .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%;
  // overflow: hidden;
}
.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;
    }
  }
}
.home-floor-tab{
  position: absolute;
  right: 14px;
  top: 10px;
  color: #fff;
   display: flex;
   justify-self: flex-start;
  p{
    font-size: 14px;
    padding:2px 6px;
    margin-right: 6px;
    color: #339cff;
    border: 1px solid #339cff;
    border-radius: 4px;
    cursor: pointer;
    &.active-floor,
    &:hover{
      color: #fff;
      background-color: #113d72;
    }
  }
}
</style>