IDCDatasync-vue/src/views/dashboard/Analysis.vue

<template>
  <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="1">
          <div class="splitLine"></div>
        </a-col>
        <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="1">
          <div class="splitLine"></div>
        </a-col>
        <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 - 133px);">
        <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 - 133px);">
        <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 - 193px);">
        <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 - 193px);">
        <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() {

  },
  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.cpuInfo.userCpuUsage = res.result.userCpuUsage
          this.cpuInfo.systemCpuUsage = res.result.systemCpuUsage
          this.cpuInfo.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>
.gutter-box {
  padding: 0 0 0 20px;
  height: 64px;
}

.splitLine {
  width: 1px;
  height: 36px;
  background: #9098A9;
  margin: 14px auto;
  text-align: center;
}

.infomo {
  display: inline-block;
  margin-left: 10px;
  width: calc(100% - 74px);
}

.infoTitle {
  font-family: REEJI-ZhenyanGB2.0;
  font-weight: 400;
  font-size: 16px;
  color: #1964C6;
}

.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;
  /* 超出部分显示省略号 */
}

.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>