From 807ec2f61d7096fe6d3ea5ebb3ce95db002c6b55 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 30 Sep 2024 15:58:36 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=B3=BB=E7=BB=9F=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E4=BF=A1=E6=81=AF/=E5=9B=9B=E6=80=A7=E6=A3=80?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home/cpu/index.js                     |  11 ++
 src/assets/styles/index.scss                  |  26 +++
 .../module/archivesInfo/index.vue             |   6 +-
 .../module/fourTestInfo/index.vue             |  94 +++++-----
 .../module/fourTest/index.vue                 |  11 ++
 .../module/fourTestInfo/index.vue             |   8 +
 .../components/echarts/serverProgress.vue     |  17 +-
 src/views/fourTestReport/index.vue            | 172 ++++++++++++------
 src/views/home.vue                            |  39 +++-
 9 files changed, 272 insertions(+), 112 deletions(-)
 create mode 100644 src/api/home/cpu/index.js

diff --git a/src/api/home/cpu/index.js b/src/api/home/cpu/index.js
new file mode 100644
index 0000000..109c73d
--- /dev/null
+++ b/src/api/home/cpu/index.js
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 获取服务器基础信息
+export function FetchSystemInfo(params) {
+  return request({
+    url: '/api/home/getSystemInfo',
+    params,
+    method: 'get'
+  })
+}
+export default { FetchSystemInfo }
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 41ad0cd..8f181de 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -289,4 +289,30 @@ ul{
       }
     }
   }
+}
+
+
+.previewHeader{
+  position: relative;
+  padding: 0 20px !important;
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
+}
+.previewClose{
+  top: 50% !important;
+  transform: translateY(-50%);
+}
+.previewBodyUtil{
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 40px !important;
+}
+.previewBodyUtilPrintBtn{
+  position: static !important;
+  top: 0 !important;
+  left: 0 !important;
+  margin-top: 0 !important;
+  margin-right: 30px !important;
 }
\ No newline at end of file
diff --git a/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue b/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue
index 112f88e..bee33c0 100644
--- a/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue
+++ b/src/views/archivesManage/managementLibrary/module/archivesInfo/index.vue
@@ -39,7 +39,7 @@
             </code>
           </pre>
         </div>
-        <FourTestInfo v-if="archivesTabIndex===3" />
+        <FourTestInfo v-show="archivesTabIndex===3" ref="fourTestInfoRefs" />
         <HandleInfo v-if="archivesTabIndex===4" />
         <ArchivesListModule v-show="archivesTabIndex===5" ref="archivesListModuleRef" :selected-category="selectedCategory" :is-title-type="isTitleType" :is-collect="isCollect" />
       </div>
@@ -151,6 +151,10 @@ export default {
       this.archivesTabIndex = index
       if (this.archivesTabIndex === 2) {
         this.setXml()
+      } else if (this.archivesTabIndex === 3) {
+        console.log(this.$refs.fourTestInfoRefs)
+        this.$refs.fourTestInfoRefs.currentArcId = this.arcId
+        this.$refs.fourTestInfoRefs.getFourCheckRecord(this.arcId)
       } else if (this.archivesTabIndex === 5) {
         if (this.isTitleType === 2) {
           this.$refs.archivesListModuleRef.detailLevel = 2
diff --git a/src/views/archivesManage/managementLibrary/module/fourTestInfo/index.vue b/src/views/archivesManage/managementLibrary/module/fourTestInfo/index.vue
index 234f59e..b76886e 100644
--- a/src/views/archivesManage/managementLibrary/module/fourTestInfo/index.vue
+++ b/src/views/archivesManage/managementLibrary/module/fourTestInfo/index.vue
@@ -1,16 +1,17 @@
 <template>
   <!--四性检测-档案详情内-->
   <div class="fourTest-container">
-    <el-table :data="tableData" style="min-width: 100%" height="calc(100vh - 440px)">
-      <el-table-column prop="admin" label="检测人" min-width="60" />
-      <el-table-column prop="createTime" label="检测时间" min-width="180">
+    <div class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看报告详情</span></div>
+    <el-table :data="tableData" style="min-width: 100%" height="calc(100vh - 440px)" @cell-dblclick="tableDoubleClick">
+      <el-table-column prop="create_by" label="检测人" min-width="80" />
+      <el-table-column prop="create_time" label="检测时间" min-width="150">
         <template slot-scope="scope">
-          <div>{{ scope.row.createTime | parseTime }}</div>
+          <div>{{ scope.row.create_time | parseTime }}</div>
         </template>
       </el-table-column>
-      <el-table-column prop="truth" label="真实性" align="center">
+      <el-table-column prop="authenticity" label="真实性" align="center">
         <template slot-scope="scope">
-          <span v-if="scope.row.truth===1" class="four-icon iconfont icon-zhengque" />
+          <span v-if="scope.row.authenticity===1" class="four-icon iconfont icon-zhengque" />
           <span v-else class="four-icon iconfont icon-cuowu" />
         </template>
       </el-table-column>
@@ -20,9 +21,9 @@
           <span v-else class="four-icon iconfont icon-cuowu" />
         </template>
       </el-table-column>
-      <el-table-column prop="availability" label="可用性" align="center">
+      <el-table-column prop="usability" label="可用性" align="center">
         <template slot-scope="scope">
-          <span v-if="scope.row.availability===1" class="four-icon iconfont icon-zhengque" />
+          <span v-if="scope.row.usability===1" class="four-icon iconfont icon-zhengque" />
           <span v-else class="four-icon iconfont icon-cuowu" />
         </template>
       </el-table-column>
@@ -32,14 +33,15 @@
           <span v-else class="four-icon iconfont icon-cuowu" />
         </template>
       </el-table-column>
-      <el-table-column prop="createDate" label="检测结果" min-width="220">
+      <el-table-column label="检测结果" min-width="250">
         <template slot-scope="scope">
-          <div>共检测{{ scope.row.totalNum }}项，<span class="testSuccess">通过{{ scope.row.successNum }}条</span>，<span class="testError">未通过{{ scope.row.errorNum }}条</span></div>
+          <div>共检测{{ scope.row.checkNum }}项，<span class="testSuccess">通过{{ scope.row.passNum }}条</span>，<span class="testError">未通过{{ scope.row.failNum }}条</span></div>
         </template>
       </el-table-column>
     </el-table>
     <!--分页组件-->
     <el-pagination
+      v-if="tableData.length !== 0"
       :current-page="page.page"
       :total="page.total"
       :page-size="page.size"
@@ -52,45 +54,17 @@
 </template>
 
 <script>
-const data = [
-  {
-    'id': '005E76FEC5A2AAB368CA1F',
-    'admin': 'admin',
-    'archive_no': 'YXK-2022-JJ-001 ',
-    'maintitle': '文书档案001',
-    'createTime': 1660706815000,
-    'truth': 0,
-    'integrity': 1,
-    'availability': 0,
-    'safety': 0,
-    'totalNum': 5,
-    'successNum': 1,
-    'errorNum': 0
-  },
-  {
-    'id': '005E76FEC5A2AAB368CA1F2',
-    'admin': 'admin',
-    'archive_no': 'YXK-2022-JJ-002 ',
-    'maintitle': '文书档案001',
-    'createTime': 1660706815000,
-    'truth': 0,
-    'integrity': 1,
-    'availability': 1,
-    'safety': 0,
-    'totalNum': 5,
-    'successNum': 1,
-    'errorNum': 0
-  }
-]
+import { FetchFourCheckRecord } from '@/api/collect/collect'
 export default {
   name: 'FourTestInfo',
   components: { },
   mixins: [],
   data() {
     return {
-      tableData: [{}, {}],
+      currentArcId: null,
+      tableData: [],
       page: {
-        page: 1,
+        page: 0,
         size: 10,
         total: 0
       }
@@ -100,15 +74,40 @@ export default {
 
   },
   mounted() {
-    this.tableData = data
   },
   methods: {
+    getFourCheckRecord(arcId) {
+      const params = {
+        'archivesId': arcId,
+        'page': this.page.page,
+        'size': this.page.size
+      }
+      FetchFourCheckRecord(params).then(data => {
+        if (data.content && data.content.length !== 0) {
+          this.tableData = data.content
+          this.page.total = data.totalElements
+        } else {
+          this.tableData = []
+          this.page.total = 0
+        }
+      })
+    },
     handleSizeChange(size) {
       this.page.size = size
-      this.page.page = 1
+      this.page.page = 0
+      this.getFourCheckRecord(this.currentArcId)
     },
     handleCurrentPage(val) {
       this.page.page = val
+      this.getFourCheckRecord(this.currentArcId)
+    },
+    tableDoubleClick(row) {
+      const routeData = this.$router.resolve({
+        path: '/fourTestReport',
+        query: {}
+      })
+      localStorage.setItem('fourTestStorage', JSON.stringify(row))
+      window.open(routeData.href, '_blank')
     }
   }
 }
@@ -116,4 +115,11 @@ export default {
 
 <style lang='scss' scoped>
 @import "~@/assets/styles/collect-reorganizi.scss";
+.double-click-btn{
+  position: static;
+  right: 0;
+  top: 0;
+  justify-content: flex-end;
+  margin: -6px 0 4px 0;
+}
 </style>
diff --git a/src/views/collectReorganizi/collectionLibrary/module/fourTest/index.vue b/src/views/collectReorganizi/collectionLibrary/module/fourTest/index.vue
index 32c2957..dd5d0ed 100644
--- a/src/views/collectReorganizi/collectionLibrary/module/fourTest/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/module/fourTest/index.vue
@@ -3,6 +3,7 @@
   <el-dialog v-loading="loading" class="fileUpload-dialog" title="四性检测" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="fourTestVisible" :before-close="handleCloseDialog">
     <div class="setting-dialog">
       <div class="fourTest-container">
+        <div v-if="isCheck" class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看报告详情</span></div>
         <el-table :data="tableData" @cell-dblclick="tableDoubleClick">
           <el-table-column type="index" label="序号" width="55" align="center" />
           <el-table-column prop="archive_no" label="档号" min-width="220" show-overflow-tooltip />
@@ -123,6 +124,9 @@ export default {
       })
     },
     tableDoubleClick(row) {
+      if (!this.isCheck) {
+        return false
+      }
       const routeData = this.$router.resolve({
         path: '/fourTestReport',
         query: {}
@@ -146,4 +150,11 @@ export default {
 ::v-deep .el-dialog{
   width: 815px;
 }
+.double-click-btn{
+  position: static;
+  right: 0;
+  top: 0;
+  justify-content: flex-end;
+  margin-bottom: 4px;
+}
 </style>
diff --git a/src/views/collectReorganizi/collectionLibrary/module/fourTestInfo/index.vue b/src/views/collectReorganizi/collectionLibrary/module/fourTestInfo/index.vue
index b353177..b76886e 100644
--- a/src/views/collectReorganizi/collectionLibrary/module/fourTestInfo/index.vue
+++ b/src/views/collectReorganizi/collectionLibrary/module/fourTestInfo/index.vue
@@ -1,6 +1,7 @@
 <template>
   <!--四性检测-档案详情内-->
   <div class="fourTest-container">
+    <div class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看报告详情</span></div>
     <el-table :data="tableData" style="min-width: 100%" height="calc(100vh - 440px)" @cell-dblclick="tableDoubleClick">
       <el-table-column prop="create_by" label="检测人" min-width="80" />
       <el-table-column prop="create_time" label="检测时间" min-width="150">
@@ -114,4 +115,11 @@ export default {
 
 <style lang='scss' scoped>
 @import "~@/assets/styles/collect-reorganizi.scss";
+.double-click-btn{
+  position: static;
+  right: 0;
+  top: 0;
+  justify-content: flex-end;
+  margin: -6px 0 4px 0;
+}
 </style>
diff --git a/src/views/components/echarts/serverProgress.vue b/src/views/components/echarts/serverProgress.vue
index f420694..1c47d64 100644
--- a/src/views/components/echarts/serverProgress.vue
+++ b/src/views/components/echarts/serverProgress.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="chart-wrapper" style="display: flex; justify-content: space-between; align-items: center; overflow: hidden; margin-top: -20px;">
     <div class="progress-class">
-      <el-progress class="differ" type="circle" stroke-linecap="butt" :percentage="21" :stroke-width="30" :width="200" :format="formatterSame" />
+      <el-progress class="differ" type="circle" stroke-linecap="butt" :percentage="systemData.cpuPercentage" :stroke-width="30" :width="200" :format="formatterSame" />
       <svg width="100%" height="100%">
         <defs>
           <linearGradient id="red" x1="1" y1="0" x2="0.3" y2="1">
@@ -23,10 +23,10 @@
       <div class="progress-right-item">
         <div class="progress-right-txt right-txt1">
           <p>内存占比</p>
-          <span>65<i>%</i></span>
+          <span>{{ systemData.memPercentage }}<i>%</i></span>
         </div>
         <div class="progress-class2">
-          <el-progress :show-text="false" type="circle" stroke-linecap="butt" :percentage="65" :stroke-width="20" :width="100" :format="formatterSame" />
+          <el-progress :show-text="false" type="circle" stroke-linecap="butt" :percentage="systemData.memPercentage" :stroke-width="20" :width="100" :format="formatterSame" />
           <svg width="100%" height="100%">
             <defs>
               <linearGradient id="yellow" x1="1" y1="0" x2="0.3" y2="1">
@@ -49,10 +49,10 @@
       <div class="progress-right-item">
         <div class="progress-right-txt right-txt2">
           <p>磁盘占比</p>
-          <span>38<i>%</i></span>
+          <span>{{ systemData.sysFilesPercentage }}<i>%</i></span>
         </div>
         <div class="progress-class3">
-          <el-progress :show-text="false" type="circle" stroke-linecap="butt" :percentage="38" :stroke-width="20" :width="100" :format="formatterSame" />
+          <el-progress :show-text="false" type="circle" stroke-linecap="butt" :percentage="systemData.sysFilesPercentage" :stroke-width="20" :width="100" :format="formatterSame" />
           <svg width="100%" height="100%">
             <defs>
               <linearGradient id="green" x1="1" y1="0" x2="0.3" y2="1">
@@ -81,6 +81,13 @@ export default {
   name: 'ServerProgress',
   mixins: [],
   props: {
+    systemData: {
+      type: Object,
+      require: true,
+      default: function() {
+        return {}
+      }
+    }
   },
   data() {
     return {
diff --git a/src/views/fourTestReport/index.vue b/src/views/fourTestReport/index.vue
index 43bf7d7..2891686 100644
--- a/src/views/fourTestReport/index.vue
+++ b/src/views/fourTestReport/index.vue
@@ -3,7 +3,7 @@
     <div class="collect-header" style="display: flex; justify-content: space-between;">
       <h4 class="is-file">四性检测详情</h4>
       <div class="preview-btn" style="margin-right: 20px;">
-        <el-button class="iconfont icon-xiazai" @click="downloadFile(fileCurrent)">导出</el-button>
+        <el-button v-if="currentReportInfo.categoryLevel === 3" class="iconfont icon-xiazai" @click="doExport()">导出</el-button>
         <el-button v-print="printObj" class="iconfont icon-dayin">打印</el-button>
       </div>
     </div>
@@ -26,10 +26,16 @@
           :default-expand-all="true"
           :expand-on-click-node="false"
           @node-click="handleNodeClick"
-        />
+        >
+          <span slot-scope="{ node }" class="custom-tree-node">
+            <el-tooltip class="item" effect="dark" placement="top-start" :content="node.label">
+              <span>{{ node.label }}</span>
+            </el-tooltip>
+          </span>
+        </el-tree>
         <el-empty v-else :image-size="100" />
       </div>
-      <div id="printArea" ref="output" v-loading="loading" class="content-right">
+      <div id="printArea" ref="output" v-loading.body="loading" class="content-right">
         <div class="report-header">
           <h5>四性检测报告</h5>
           <p>报告编号：{{ currentReportInfo && currentReportInfo.reportNo }}</p>
@@ -79,10 +85,10 @@
 
           </ul>
         </div>
-        <div v-if="currentReportInfo && currentReportInfo.categoryLevel === 3">
+        <div v-if="currentReportInfo && currentReportInfo.categoryLevel === 3" class="report-table-all">
           <div class="report-checkItem">
             <div class="report-title"><span>真实性检测</span></div>
-            <el-table ref="table" class="fixed-table" :data="checkItemAllData.authenticity">
+            <el-table ref="table" class="fixed-table" :data="checkItemAllData.authenticity" style="width: 100%;">
               <el-table-column type="index" label="序号" width="55" align="center" />
               <el-table-column :show-overflow-tooltip="true" prop="secondaryClassId" label="分类" min-width="150" />
               <el-table-column :show-overflow-tooltip="true" prop="detectionCode" label="检测编号" min-width="100" />
@@ -212,7 +218,8 @@
 
 <script>
 import { FetchFourCheckRecordTreeByReportId } from '@/api/collect/collect'
-import { downloadFile } from '@/utils/index'
+import qs from 'qs'
+import { exportFile } from '@/utils/index'
 import { mapGetters } from 'vuex'
 // import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
 // import printJS from 'print-js'
@@ -287,6 +294,7 @@ export default {
   },
   mounted() {
     this.getFourCheckRecordTreeByReportId()
+    // window.addEventListener('scroll', this.handleScroll, true)
   },
   methods: {
     handleNodeClick(data) {
@@ -295,6 +303,13 @@ export default {
       this.getFourCheckRecordTreeByReportId()
     },
     getFourCheckRecordTreeByReportId() {
+      this.checkItemAllData = {
+        authenticity: [],
+        integrity: [],
+        usability: [],
+        safety: []
+      }
+      this.goToTop()
       this.loading = true
       const params = {
         'reportId': this.currentReportInfo.id
@@ -352,7 +367,6 @@ export default {
     getArchivesSubet(archivesId) {
       if (this.currentReportInfo.categoryLevel !== 2) {
         const matchedSubset = this.reportData.subset.find(subsetItem => subsetItem.archivesId === archivesId)
-        console.log('matchedSubset', matchedSubset)
         return matchedSubset || null
       }
     },
@@ -361,12 +375,29 @@ export default {
         this.$refs.tree.setCurrentKey(key)
       }
     },
-    downloadFile(row) {
-      const url = this.baseApi + '/downloadFile' + row.file_path
-      fetch(url).then(res => res.blob()).then(blob => {
-        downloadFile(blob, row.file_name.split('.')[0], row.file_type)
+    goToTop() {
+      let scrolltop = document.getElementById('printArea').scrollTop
+      // 定时器平滑滚动
+      const time = setInterval(() => {
+        document.getElementById('printArea').scrollTop = scrolltop -= 40
+        if (scrolltop <= 0) {
+          clearInterval(time)
+        }
+      }, 10)
+    },
+    doExport(data) {
+      this.$confirm('此操作将导出当前报告' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        const params = {
+          'reportId': this.currentReportInfo.id
+        }
+        exportFile(this.baseApi + '/api/collect/exportFourCheckReport?' + qs.stringify(params, { indices: false }))
       }).catch(() => {
-        this.$message({ message: '下载文件失败!', type: 'error', offset: 8 })
+        console.log('取消')
       })
     }
   }
@@ -393,9 +424,22 @@ export default {
 .el-popover[x-placement^=top] .popper__arrow::after{
   border-top-color: #303133;
 }
+
 </style>
 <style lang="scss" scoped>
 @import "~@/assets/styles/mixin.scss";
+
+.el-tree{
+  .custom-tree-node span {
+    width: 260px;
+    display: block;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .preview-wrapper{
   width: 100%;
   height: 100%;
@@ -458,60 +502,68 @@ export default {
     padding-bottom: 20px;
     overflow: hidden;
     overflow-y: scroll;
-    .report-header{
-      padding: 10px 20px;
-      height: 200px;
-      background-color: #1890ff;
-      color: #fff;
-      h5{
-        font-size: 24px;
-        line-height: 48px;
-      }
-    }
-    .report-baseInfo{
-      margin: -100px 20px 0 20px;
-      background-color: #fff;
-      padding: 20px;
-      border-radius: 10px;
-      overflow: hidden;
-      .baseInfo-txt{
-        display: flex;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        li{
-          width: 40%;
-          font-size: 14px;
-          line-height: 28px;
-          color:#606266;
-          span{
-            color: #0c0e1e;
-          }
-          .row-state{
-            @include process-status-style;
-          }
-        }
-      }
-    }
-    .report-title{
-      margin-bottom: 20px;
-      border-bottom: 1px solid #edeff3;
+  }
+}
+
+.report-header{
+  padding: 10px 20px;
+  height: 200px;
+  background-color: #1890ff;
+  color: #fff;
+  h5{
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+
+.report-baseInfo{
+  margin: -100px 20px 0 20px;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  overflow: hidden;
+  .baseInfo-txt{
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    li{
+      width: 40%;
+      font-size: 14px;
+      line-height: 28px;
+      color:#606266;
       span{
-        display: inline-block;
-        padding-bottom: 10px;
-        font-weight: 600;
-        border-bottom: 3px solid #0348f3;
+        color: #0c0e1e;
+      }
+      .row-state{
+        @include process-status-style;
       }
     }
-    .report-checkItem{
-      background-color: #fff;
-      padding: 20px;
-      border-radius: 10px;
-      margin: 20px 20px 0 20px;
-      overflow: hidden;
-    }
   }
 }
 
+.report-checkItem{
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 20px 20px 0 20px;
+  overflow: hidden;
+}
+
+.report-title{
+  margin-bottom: 20px;
+  border-bottom: 1px solid #edeff3;
+  span{
+    display: inline-block;
+    padding-bottom: 10px;
+    font-weight: 600;
+    border-bottom: 3px solid #0348f3;
+  }
+}
+
+.report-table-all{
+  padding-bottom: 60px;
+}
+
 ::v-deep .el-popover__reference{
   max-width: 200px;
   white-space: nowrap;
diff --git a/src/views/home.vue b/src/views/home.vue
index b7d3ef9..ddeaa67 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -41,7 +41,7 @@
               服务器监控
             </h3>
             <!-- <div class="chart-wrapper"> -->
-            <serverProgress />
+            <serverProgress :system-data="systemData" />
             <!-- </div> -->
           </div>
         </el-col>
@@ -106,6 +106,7 @@ import catePie from '@/views/components/echarts/catePie.vue'
 import typePie from '@/views/components/echarts/typePie.vue'
 import serverProgress from '@/views/components/echarts/serverProgress.vue'
 import { FetchMainData } from '@/api/archivesManage/library'
+import { FetchSystemInfo } from '@/api/home/cpu/index'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -141,7 +142,13 @@ export default {
         addArcivesNumFile: []
       },
       echartsTimer: null,
-      refreshtime: 10000
+      refreshtime: 10000,
+      systemTimer: null,
+      systemData: {
+        cpuPercentage: 0,
+        memPercentage: 0,
+        sysFilesPercentage: 0
+      }
     }
   },
   computed: {
@@ -151,6 +158,7 @@ export default {
   },
   created() {
     this.handleMainData()
+    this.getSystemInfo()
     // this.get()
   },
   mounted() {
@@ -171,9 +179,36 @@ export default {
     //   }
     //   _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)
 
+        // 磁盘占比  多个磁盘  使用总和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)
+      })
+    },
     toMoreProcess() {
       this.$router.push({ path: '/user/center?activeIndex=2' })
     },