library-management-system/src/views/home.vue

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <panel-group :top-object-num="topObjectNum" />
      <el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 174px);">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="home-item-title">
              盘点日志
              <router-link :to="{ path: '/check/check/checkLog'}">
                <div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" />
              </router-link>
            </h3>
            <div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;">
              <div class="home-tab">
                <span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span>
                <span :class="{'home-tab-active': flowableTabIndex == 1}">已结束({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span>
                <!-- <span :class="{'home-tab-active': flowableTabIndex == 2}">已完成({{ flowableData.length !==0? flowableData.length: 0 }})</span>
                <span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多任务</span> -->
              </div>
              <div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
                <el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%">
                  <el-table-column prop="stockBill" label="盘点单号" />
                  <el-table-column prop="stockRegion" label="目标位置" min-width="180" />
                  <el-table-column prop="stockGridNum" label="目标数量" align="right">
                    <template slot-scope="scope">
                      <div>{{ scope.row.stockGridNum + ' / '+ (scope.row.totalGridNum?scope.row.totalGridNum:'0') +' 层位' }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="state" label="盘点状态" align="center">
                    <template slot-scope="scope">
                      <span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
                      <span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
                      <span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span>
                      <span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column prop="createTime" label="申请时间" width="180"> -->
                  <!-- <template slot-scope="scope"> -->
                  <!-- <div>{{ scope.row.createTime | parseTime }}</div> -->
                  <!-- </template> -->
                  <!-- </el-table-column> -->
                </el-table>
                <div v-else class="empty-main" style="height: 100%;">
                  <svg-icon icon-class="empty" class-name="empty-img" />
                  <p>暂无数据</p>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="home-item-title">
              服务器监控
              <div style="position: absolute; right: 20px; top: 20px;  color: #999; cursor: pointer;" class="el-icon-refresh" @click="refreshSystemData" />
            </h3>
            <!-- <div class="chart-wrapper"> -->
            <!-- <serverProgress :system-data="systemData" /> -->
            <!-- </div> -->
            <swiper
              ref="swiperServer"
              class="swiper-server"
              :options="swiperOptionServer"
              :auto-update="true"
              :auto-destroy="true"
              :delete-instance-on-destroy="true"
              :cleanup-styles-on-destroy="true"
            >
              <swiper-slide class="swiper-slide-server">
                <serverProgress :system-data="systemData" />
              </swiper-slide>
              <swiper-slide class="swiper-slide-server cpu-echarts">
                <serverGpuUse :utilization="utilization" />
                <div class="cpu-right">
                  <serverGpu :temperature="temperature" />
                  <serverGpuOther :memory-total="memoryTotal" :memory-free="memoryFree" />
                </div>
                <div style="position: absolute; bottom: 136px; right: 70px; font-weight: bold;">{{ GPUName }}</div>
              </swiper-slide>
              <swiper-slide class="swiper-slide-server">
                <serveTerminal ref="serveTerminalRefs" />
              </swiper-slide>
              <div slot="pagination" class="swiper-pagination" />
            </swiper>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="height:calc(50vh - 174px);">
        <el-col :xs="24" :sm="24" :lg="8">
          <!-- 档案借阅 -->
          <div class="container-wrap">
            <span class="right-top-line" />
            <span class="left-bottom-line" />
            <h3 class="home-item-title">
              盘点概况
            </h3>
            <div v-if="taskStockLogData.length !== 0" class="chart-wrapper">
              <taskStockLogEcharts :task-stock-log-data="taskStockLogData" />
            </div>
            <div v-else class="empty-main">
              <svg-icon icon-class="empty" class-name="empty-img" />
              <p>暂无数据</p>
            </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="home-item-title">
              盘点统计
            </h3>
            <div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
              <checkSwiper ref="checkSwiperRefs" />
            </div>
            <!-- <div v-else class="empty-main">
              <svg-icon icon-class="empty" class-name="empty-img" />
              <p>暂无数据</p>
            </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="home-item-title">
              流通统计
            </h3>
            <!-- <div class="refresh-date">2024-11-28 09:46</div> -->
            <div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
              <bookSwiper ref="bookSwiperRefs" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import taskStockLogEcharts from '@/views/components/echarts/taskStockLog.vue'
// 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 bookSwiper from '@/views/components/bookSwiper.vue'
import checkSwiper from '@/views/components/checkSwiper.vue'
import serverProgress from '@/views/components/echarts/serverProgress.vue'
import serverGpu from '@/views/components/echarts/serverGpu.vue'
import serverGpuUse from '@/views/components/echarts/serverGpuUse.vue'
import serverGpuOther from '@/views/components/echarts/serverGpuOther.vue'
import serveTerminal from '@/views/components/serveTerminal.vue'
import { FetchInitHomeInfo, FetchInitStockInfo } from '@/api/stockTask/index'
import { FetchInitStockLogList } from '@/api/stockTaskLog/index'
import { FetchSystemInfo } from '@/api/home/cpu/index'
import { mapGetters } from 'vuex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: 'Dashboard',
  components: {
    PanelGroup,
    // lendAcross,
    taskStockLogEcharts,
    // catePie,
    bookSwiper,
    checkSwiper,
    // typePie,
    serverProgress,
    serverGpu,
    serverGpuUse,
    serverGpuOther,
    serveTerminal,
    swiper,
    swiperSlide
  },
  data() {
    return {
      topObjectNum: {
        regionCount: 0,
        shelfCount: 0,
        gridCount: 0,
        deviceCount: 0,
        noStockGridCount: 0,
        deviceErrorCount: 0
      },
      taskStockLogData: [],
      echartsTimer: null,
      refreshtime: 10000,
      systemTimer: null,
      systemData: {
        cpuPercentage: 0,
        memPercentage: 0,
        sysFilesPercentage: 0
      },
      stockLogCompletedData: [],
      stockLogIncompleteData: [],

      archivesTotalNum: 0,
      flowableData: [],
      flowableTabIndex: 0,
      lendData: {
        archivesTotalNum: null,
        otherData: []
      },
      cateData: [],
      typeData: [],
      addArcivesData: {
        addArcivesMaxCount: null,
        addArcivesMonth: [],
        addArcivesNum: [],
        addArcivesNumFile: []
      },
      swiperActiveIndex: 0,
      swiperOptionServer: {
        autoplay: {
          delay: 8000,
          disableOnInteraction: false
        },
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      memoryFree: 0,
      memoryTotal: 0,
      GPUName: '',
      temperature: 0,
      utilization: 0
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ]),
    swiperServer() {
      return this.$refs.swiperServer.$el.swiper
    }
  },
  created() {
    this.handleMainData()
    this.getSystemInfo()
    this.getStockLog()
    this.handleInitStockInfo()
    this.$nextTick(() => {
      this.$refs.bookSwiperRefs.swiperParams = {}
      this.$refs.bookSwiperRefs.swiperShelfParams = {}
      if (this.$refs.bookSwiperRefs.swiperActiveIndex === 0) {
        this.$refs.bookSwiperRefs.getInitHotBookList()
      } else {
        this.$refs.bookSwiperRefs.getInitHotShelfList()
      }

      this.$refs.serveTerminalRefs.initData()
    })
  },
  mounted() {
    // const _this = this
    // // 每隔一分钟刷新档案借阅和档案类型的数据
    // this.echartsTimer = setInterval(() => {
    //   _this.lendData = {
    //     archivesTotalNum: null,
    //     otherData: []
    //   }
    //   _this.cateData = []
    //   _this.typeData = []
    //   _this.addArcivesData = {
    //     addArcivesMaxCount: null,
    //     addArcivesMonth: [],
    //     addArcivesNum: [],
    //     addArcivesNumFile: []
    //   }
    //   _this.handleMainData()
    // }, this.refreshtime)

    // 服务器监控定时更新
    // this.systemTimer = setInterval(() => {
    //   _this.systemData = {
    //     cpuPercentage: 0,
    //     memPercentage: 0,
    //     sysFilesPercentage: 0
    //   }
    //   this.getSystemInfo()
    // }, 3000)
  },
  methods: {
    getSystemInfo() {
      FetchSystemInfo().then(res => {
        // cpu 占有率 （总的cpuTotal-空闲的cpuFree）/总的cpuTotal
        this.systemData.cpuPercentage = Math.round((res.cpuTotal - res.cpuFree) / res.cpuTotal * 100)

        // 内存占比  使用的memUsed/总的memTotal
        this.systemData.memPercentage = Math.round(res.memUsed / res.memTotal * 100)

        this.memoryFree = res.memoryFree
        this.memoryTotal = res.memoryTotal
        this.GPUName = res.GPUName
        this.temperature = res.temperature
        this.utilization = res.utilization

        // 磁盘占比  多个磁盘  使用总和sysFiles[i].used的和/总的总和sysFiles[i].total的和
        let sysFilesTotalUsed = 0
        let sysFilesTotal = 0
        res.sysFiles.forEach(item => {
          sysFilesTotalUsed += parseFloat(item.used)
          sysFilesTotal += parseFloat(item.total)
        })
        this.systemData.sysFilesPercentage = Math.round((sysFilesTotalUsed / sysFilesTotal) * 100)
      })
    },
    refreshSystemData() {
      this.systemData = {
        cpuPercentage: 0,
        memPercentage: 0,
        sysFilesPercentage: 0
      }
      this.memoryFree = 0
      this.memoryTotal = 0
      this.GPUName = ''
      this.temperature = 0
      this.utilization = 0

      this.getSystemInfo()
      this.$refs.serveTerminalRefs.initData()
    },
    getStockLog() {
      FetchInitStockLogList().then(res => {
        this.stockLogCompletedData = res.content.filter(item => [0, 3].includes(item.state))
        this.stockLogIncompleteData = res.content.filter(item => [1, 2].includes(item.state))
      })
    },
    handleMainData() {
      FetchInitHomeInfo().then(data => {
        this.topObjectNum = {
          regionCount: data.regionCount,
          shelfCount: data.shelfCount,
          gridCount: data.gridCount,
          deviceCount: data.deviceCount,
          noStockGridCount: data.noStockGridCount,
          deviceErrorCount: data.deviceErrorCount
        }
      })
    },
    handleInitStockInfo(params) {
      FetchInitStockInfo(params).then(res => {
        this.taskStockLogData = [
          { value: res.onShelfNum - res.errorShelfNum - res.errorOrderNum, name: '正常在架' },
          { value: res.errorShelfNum, name: '错架' },
          { value: res.errorOrderNum, name: '错序' }
        ]
      }).catch(() => {
      })
    }
  }
}
</script>

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

  .chart-wrapper {
    height: calc(100% - 120px);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.el-col {
  height: 100%;
}
.container-left,
.container-right,
.container-wrap,
.el-card,
.header-container-wrap {
  min-height: 100%;
}
.container-wrap {
  min-height: auto;
  height: 100%;
}
.home-item-title{
  position: relative;
  padding: 18px 0 18px 15px;
  font-size: 16px;
  color: #0C0E1E;
  &::before{
    position: absolute;
    left: 0;
    top: 50%;
    content: "";
    width: 3px;
    height: 16px;
    background-color: #0348F3;
    transform: translateY(-50%);
  }
}
.home-flowable{
  padding: 0 20px;
}
.home-tab{
  display: flex;
  justify-content: flex-start;
  span{
    display: block;
    margin-right: 30px;
    padding-bottom: 3px;
    border-bottom: 3px solid #fff;
    &.home-tab-active{
      color: #0348F3;
      // border-bottom: 3px solid #0348F3;
    }
  }
}
::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background-color: #DDE8FB !important;
}

::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #4578F6 !important;
}

::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #4578F6 !important;
}

::v-deep .home-flowable-list .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: #DDE8FB !important;
}
.refresh-date{
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 12px;
  line-height: 30px;
}
.swiper-server{
  position: relative;
  height: 300px;
  ::v-deep .swiper-wrapper{
    height: 344px;
  }
  .swiper-pagination{
    bottom: 80px;
  }
}

.cpu-echarts{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // background-color: #000;
  .cpu-right{
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    // flex-direction: column;
    // flex-wrap: wrap;
  }
}
</style>