对接系统监控

src/api/analysis.js

@@ -0,0 +1,15 @@
+import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
+
+const serverInfo = (params)=>getAction("/systemMonitor/getServerInfo",params);
+const fillCpuInfo = (params)=>getAction("/systemMonitor/fillCpuInfo",params);
+const fillMemoryInfo = (params)=>getAction("/systemMonitor/fillMemoryInfo",params);
+const fillJvmInfo = (params)=>getAction("/systemMonitor/fillJvmInfo",params);
+const fillDiskInfo = (params)=>getAction("/systemMonitor/fillDiskInfo",params);
+
+export {
+    serverInfo,
+    fillCpuInfo,
+    fillMemoryInfo,
+    fillJvmInfo,
+    fillDiskInfo
+}

src/views/dashboard/Analysis.vue

@@ -1,95 +1,595 @@
 <template>
-  <div class="analysisBG">
-    <div class="buttonBG">
-      <a-row :gutter="20">
-        <a-col :span="4" class="clickbutton" @click="openlink('/#/task/index')">
-          <div class="buttontext">任务管理</div> 
-          <div class="buttonicon"><img src="~@/assets/img/任务管理.png"></div>
+  <a-card :bordered="false">
+    <div style="height:85px;background: #e6e9f1;padding: 10px;">
+      <a-row :gutter="6">
+        <a-col :span="6">
+          <div class="gutter-box">
+            <a-row>
+              <a-cel :span="1" style="display: inline-block;width: 64px;">
+                <img src="~@/assets/img/serverName.png" />
+              </a-cel>
+              <a-cel :span="2" style="display: inline-block;width: 106px; padding-left: 10px;">
+                <span class="infoTitle">服务器名称：</span>
+              </a-cel>
+              <a-cel :span="21" style="display: inline-block;position: relative;">
+                <div class="infoName">{{ serverInfoForm.hostName }}</div>
+              </a-cel>
+            </a-row>
+          </div>
         </a-col>
-        <a-col :span="4" class="clickbutton" @click="openlink('sjsxybs://test')">
-          <div class="buttontext">数据筛选与报送</div> 
-          <div class="buttonicon"><img src="~@/assets/img/数据接入.png"></div>
+        <a-col :span="1">
+          <div class="splitLine"></div>
         </a-col>
-        <a-col :span="4" class="clickbutton" @click="openlink('/#/datalink/dblink')">
-          <div class="buttontext">数据接入</div> 
-          <div class="buttonicon"><img src="~@/assets/img/数据导入.png"></div>
+        <a-col :span="6">
+          <div class="gutter-box">
+            <a-row>
+              <a-cel :span="1" style="display: inline-block;width: 64px;">
+                <img src="~@/assets/img/serverSystem.png" />
+              </a-cel>
+              <a-cel :span="2" style="display: inline-block;width: 90px; padding-left: 10px;">
+                <span class="infoTitle">操作系统：</span>
+              </a-cel>
+              <a-cel :span="21" style="display: inline-block;position: relative;">
+                <div class="infoName">{{ serverInfoForm.osName }}</div>
+              </a-cel>
+            </a-row>
+          </div>
         </a-col>
-        <a-col :span="4" class="clickbutton" @click="openlink('/#/data/statistics')">
-          <div class="buttontext">数据统计</div> 
-          <div class="buttonicon"><img src="~@/assets/img/数据统计.png"></div>
+        <a-col :span="1">
+          <div class="splitLine"></div>
         </a-col>
-        <a-col :span="4" class="clickbutton" @click="openlink('/#/isystem/user')">
-          <div class="buttontext">系统管理</div> 
-          <div class="buttonicon"><img src="~@/assets/img/系统管理.png"></div>
+        <a-col :span="5">
+          <div class="gutter-box">
+            <a-row>
+              <a-cel :span="1" style="display: inline-block;width: 64px;">
+                <img src="~@/assets/img/serverIP.png" />
+              </a-cel>
+              <a-cel :span="2" style="display: inline-block;width: 90px; padding-left: 10px;">
+                <span class="infoTitle">服务器IP：</span>
+              </a-cel>
+              <a-cel :span="21" style="display: inline-block;position: relative;">
+                <div class="infoName">{{ serverInfoForm.ipAddress }}</div>
+              </a-cel>
+            </a-row>
+          </div>
+        </a-col>
+        <a-col :span="1">
+          <div class="splitLine"></div>
+        </a-col>
+        <a-col :span="4">
+          <div class="gutter-box">
+            <a-row>
+              <a-cel :span="1" style="display: inline-block;width: 64px;">
+                <img src="~@/assets/img/serverOrg.png" />
+              </a-cel>
+              <a-cel :span="2" style="display: inline-block;width: 90px; padding-left: 10px;">
+                <span class="infoTitle">系统架构：</span>
+              </a-cel>
+              <a-cel :span="21" style="display: inline-block;position: relative;">
+                <div class="infoName">{{ serverInfoForm.architecture }}</div>
+              </a-cel>
+            </a-row>
+          </div>
         </a-col>
       </a-row>
     </div>
+    <a-row :gutter="20">
+      <a-col :md="16" :sm="1" style="height:calc(50vh - 125px);">
+        <div class="linese"></div>
+        <div class="echartsTitle" style="position: relative">
+          <div class="ecicon"></div>CPU
+          <div class="subinfo">
+            <span class="subTitle">核心数：</span>
+            <span class="clore1">{{ cpuInfo.cpuCoreCount }}</span>
+            <span class="subTitle">当前应用使用率：</span>
+            <span class="clore2">{{ cpuInfo.userCpuUsage }}%</span>
+            <span class="subTitle">系统使用率：</span>
+            <span class="clore3">{{ cpuInfo.systemCpuUsage }}%</span>
+            <span class="subTitle">当前空闲率：</span>
+            <span class="clore4">{{ cpuInfo.idleCpuUsage }}%</span>
           </div>
+
+        </div>
+        <div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance"
+          style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
+        <div class="linese"></div>
+      </a-col>
+      <a-col :md="8" :sm="2" style="height:calc(50vh - 125px);">
+        <div class="linese"></div>
+        <div class="echartsTitle">
+          <div class="ecicon"></div>磁盘
+        </div>
+        <div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"
+          style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); ">
+          <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="diskInfo"
+            :pagination="false" :scroll="{ y: 'calc(50vh - 246px)' }">
+          </a-table>
+        </div>
+        <div class="linese"></div>
+      </a-col>
+      <a-col :md="12" :sm="3" style="height:calc(50vh - 185px);">
+        <div class="linese"></div>
+        <div class="echartsTitle" style="position: relative">
+          <div class="ecicon"></div>内存
+          <div class="subinfo">
+            <span class="subTitle">总内存：</span>
+            <span class="clore5">{{ memoryInfo.totalMemory }}</span>
+            <span class="subTitle">已用内存：</span>
+            <span class="clore6">{{ memoryInfo.usedMemory }}% </span>
+            <span class="subTitle">剩余内存：</span>
+            <span class="clore7">{{ memoryInfo.freeMemory }}%</span>
+            <span class="subTitle">使用率：</span>
+            <span class="clore8">{{ memoryInfo.memoryUsage }}%</span>
+          </div>
+        </div>
+        <div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage"
+          style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
+        <div class="linese"></div>
+      </a-col>
+      <a-col :md="12" :sm="4" style="height:calc(50vh - 185px);">
+        <div class="linese"></div>
+        <div class="echartsTitle" style="position: relative">
+          <div class="ecicon"></div>JVM
+          <div class="subinfo">
+            <span class="subTitle">总内存：</span>
+            <span class="clore5">{{ jvmInfo.jvmTotalMemory }}</span>
+            <span class="subTitle">已用内存：</span>
+            <span class="clore6">{{ jvmInfo.jvmUsedMemory }}% </span>
+            <span class="subTitle">剩余内存：</span>
+            <span class="clore7">{{ jvmInfo.jvmFreeMemory }}%</span>
+            <span class="subTitle">使用率：</span>
+            <span class="clore8">{{ jvmInfo.jvmMemoryUsage }}%</span>
+          </div>
+        </div>
+        <div id="typeStorage" class="typeStorage" ref="typeStorage"
+          style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
+        <div class="linese"></div>
+      </a-col>
+    </a-row>
+  </a-card>
 </template>
 
 <script>
+import { serverInfo, fillCpuInfo, fillMemoryInfo, fillJvmInfo, fillDiskInfo } from '@/api/analysis'
 export default {
   name: 'Analysis',
   components: {},
   data() {
     return {
-      
+      myTimer: null,
+      serverInfoForm: {
+        osName: null,
+        hostName: null,
+        ipAddress: null,
+        architecture: null
+      },
+      cpuInfo: {
+        cpuCoreCount: null,
+        userCpuUsage: null,
+        systemCpuUsage: null,
+        idleCpuUsage: null,
+        chartDate: {
+          xData: [],
+          y1Data: [],
+          y2Data: []
+        }
+      },
+      memoryInfo: {
+        totalMemory: null,
+        usedMemory: null,
+        freeMemory: null,
+        memoryUsage: null,
+        chartDate: {
+          xData: [],
+          yData: [],
+        }
+      },
+      jvmInfo: {
+        jvmTotalMemory: null,
+        jvmUsedMemory: null,
+        jvmFreeMemory: null,
+        jvmMemoryUsage: null,
+        chartDate: {
+          xData: [],
+          yData: [],
+        }
+      },
+      diskInfo: [],
+      columns: [
+        {
+          title: '序号',
+          width: 70,
+          customRender: (text, record, index) => `${index + 1}`,
+        },
+        {
+          title: '磁盘地址',
+          align: "center",
+          dataIndex: 'name',
+        },
+        {
+          title: '总大小(M)',
+          align: "center",
+          dataIndex: 'totalSize',
+        },
+        {
+          title: '已使用(M)',
+          align: "center",
+          dataIndex: 'used',
+        },
+        {
+          title: '挂载地',
+          align: "center",
+          dataIndex: 'mount',
+        }
+      ]
     }
   },
   mounted() {
 
   },
-  created() {},
-  methods: {
-    openlink(url){
-      window.location.href = url;
+  destroyed: function () { // 离开页面生命周期函数
+    clearInterval(this.myTimer);
   },
+  created() {
+    this.getServerInfo()
+    this.getFillDiskInfo()
+    this.myTimer = setInterval(() => {
+      this.getFillCpuInfo()
+      this.getFillMemoryInfo()
+      this.getFillJvmInfo()
+    }, 3000)
+  },
+  methods: {
+    getServerInfo() {
+      serverInfo().then(res => {
+        if (res.code == 200) {
+          this.serverInfoForm = {
+            osName: res.result.osName,
+            hostName: res.result.hostName,
+            ipAddress: res.result.ipAddress,
+            architecture: res.result.architecture
+          }
+        }
+      })
+    },
+    getFillDiskInfo() {
+      fillDiskInfo().then(res => {
+        if (res.code == 200) {
+          this.diskInfo = res.result
+        }
+      })
+    },
+    getFillCpuInfo() {
+      fillCpuInfo().then(res => {
+        if (res.code == 200) {
+          let date = new Date(res.timestamp);
+          let hours = date.getHours();
+          let minutes = date.getMinutes();
+          let xlable = hours + ':' + minutes
+          this.cpuInfo.cpuCoreCount = res.result.cpuCoreCount
+          this.userCpuUsage = res.result.userCpuUsage
+          this.systemCpuUsage = res.result.systemCpuUsage
+          this.idleCpuUsage = res.result.idleCpuUsage
+          this.cpuInfo.chartDate.xData.push(xlable)
+          this.cpuInfo.chartDate.y1Data.push(res.result.userCpuUsage)
+          this.cpuInfo.chartDate.y2Data.push(res.result.systemCpuUsage)
+          // 初始化图
+          this.initCPUChart()
+        }
+      })
+    },
+    initCPUChart() {
+      var myChart = this.$echarts.init(this.$refs.cleaningVariance);
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          data: ['当前应用使用率', '系统使用率']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: this.cpuInfo.chartDate.xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '当前应用使用率',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              color: '#407BF3',
+              opacity: 0.2
+            },
+            lineStyle: {
+              color: '#407BF3' //改变折线颜色
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.cpuInfo.chartDate.y1Data
+          },
+          {
+            name: '系统使用率',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              color: '#D8971A',
+              opacity: 0.2
+            },
+            lineStyle: {
+              color: '#D8971A' //改变折线颜色
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.cpuInfo.chartDate.y2Data
+          },
+        ]
+      };
+      myChart.setOption(option);
+    },
+    getFillMemoryInfo() {
+      fillMemoryInfo().then(res => {
+        if (res.code == 200) {
+          let date = new Date(res.timestamp);
+          let hours = date.getHours();
+          let minutes = date.getMinutes();
+          let xlable = hours + ':' + minutes
+          this.memoryInfo.totalMemory = res.result.totalMemory
+          this.memoryInfo.usedMemory = res.result.usedMemory
+          this.memoryInfo.freeMemory = res.result.freeMemory
+          this.memoryInfo.memoryUsage = res.result.memoryUsage
+
+          this.memoryInfo.chartDate.xData.push(xlable)
+          this.memoryInfo.chartDate.yData.push(res.result.usedMemory)
+          // 初始化图
+          this.initMemoryChart()
+        }
+      })
+    },
+    initMemoryChart() {
+      var myChart = this.$echarts.init(this.$refs.catalogingStorage);
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: this.memoryInfo.chartDate.xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              color: '#138B4E',
+              opacity: 0.2
+            },
+            lineStyle: {
+              color: '#138B4E' //改变折线颜色
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.memoryInfo.chartDate.yData
+          }
+        ]
+      };
+      myChart.setOption(option);
+    },
+    getFillJvmInfo() {
+      fillJvmInfo().then(res => {
+        if (res.code == 200) {
+          let date = new Date(res.timestamp);
+          let hours = date.getHours();
+          let minutes = date.getMinutes();
+          let xlable = hours + ':' + minutes
+          this.jvmInfo.jvmTotalMemory = res.result.jvmTotalMemory
+          this.jvmInfo.jvmUsedMemory = res.result.jvmUsedMemory
+          this.jvmInfo.jvmFreeMemory = res.result.jvmFreeMemory
+          this.jvmInfojvmMemoryUsage = res.result.jvmMemoryUsage
+          this.jvmInfo.chartDate.xData.push(xlable)
+          this.jvmInfo.chartDate.yData.push(res.result.jvmUsedMemory)
+          // 初始化图
+          this.initJvmChart()
+        }
+      })
+    },
+    initJvmChart() {
+      var myChart = this.$echarts.init(this.$refs.typeStorage);
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: this.jvmInfo.chartDate.xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {
+              color: '#23B0CE',
+              opacity: 0.2
+            },
+            lineStyle: {
+              color: '#23B0CE' //改变折线颜色
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.jvmInfo.chartDate.yData
+          }
+        ]
+      };
+      myChart.setOption(option);
+    }
   },
 }
 </script>
 
 <style scoped>
-.analysisBG {
-  background-image: url('~@/assets/img/analysisBG.png');
-  background-repeat: no-repeat;
-  margin-left: -20px;
-  width: 1920px;
-  height: 930px;
+.gutter-box {
+  padding: 0 0 0 20px;
+  height: 64px;
 }
-.buttonBG{
-  margin-top: 12px;
-  margin-left: 30px;
-  height: 900px;
 
+.splitLine {
+  width: 1px;
+  height: 36px;
+  background: #9098A9;
+  margin: 14px auto;
+  text-align: center;
 }
-.clickbutton {
-  margin-top: 5%;
-  background-image: url('~@/assets/img/buttonbg.png');
-  background-repeat: no-repeat;
-  background-position: center top;
-  height: 447px;
-  width: 366px;
-  cursor: pointer;
+
+.infomo {
+  display: inline-block;
+  margin-left: 10px;
+  width: calc(100% - 74px);
 }
-.button:hover {
-  background-color: #0056b3;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-  transform: translateY(1px); 
+
+.infoTitle {
+  font-family: REEJI-ZhenyanGB2.0;
+  font-weight: 400;
+  font-size: 16px;
+  color: #1964C6;
 }
-.buttonicon {
-  display: flex;
-  justify-content: center; 
-  align-items: center;    
-  margin-top: 22%; 
+
+.infoName {
+  position: absolute;
+  top: -16px;
+  width: 200px;
+  font-family: REEJI-ZhenyanGB2.0;
+  font-weight: 400;
+  font-size: 16px;
+  color: #363F56;
+  overflow: hidden;
+  /* 超出部分隐藏 */
+  white-space: nowrap;
+  /* 文本不换行 */
+  text-overflow: ellipsis;
+  /* 超出部分显示省略号 */
 }
-.buttontext{
-  margin-top: 16%;
-  display: flex;
-  justify-content: center; 
-  align-items: center;
-  font-size: 24px;
-  color: white;    
-  line-height: 1.8;
-  letter-spacing: 5px;
+
+.subinfo {
+  position: absolute;
+  top: 0;
+  right: 14px;
+}
+
+.subTitle {
+  font-weight: 400;
+  font-size: 14px;
+  color: #363F56;
+  padding-left: 20px;
+}
+
+.clore1 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #D25C23;
+}
+
+.clore2 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #0BBAC5;
+}
+
+.clore3 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #2E3DFF;
+}
+
+.clore4 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #05AE54;
+}
+
+.clore5 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #23E2CE;
+}
+
+.clore6 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #D38E15;
+}
+
+.clore7 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #10ABFC;
+}
+
+.clore8 {
+  font-weight: 400;
+  font-size: 14px;
+  color: #129754;
 }
 </style>

src/views/data/dataSearch.vue

@@ -168,11 +168,12 @@ export default {
       },
     }
   },
-  created() {},
+  created() { 
+    // this.getDirList()
+    // this.getcountFileNum()
+    // this.calculateScrollY();
+  },
   mounted() {
-    this.getDirList()
-    this.getcountFileNum()
-    this.calculateScrollY();
   },
   computed: {},
   methods: {