<!--
 * @Description: 系统指标仪表盘组件
 * @Author: laoliu
 * @Date: 2021-09-9 9:43:52
-->
<template>
  <div class="gauge-main-body">
    <!-- 仪表盘 -->
    <div class="gauge-area">
      <div id="cpu-gauge" class="gauge"></div>
      <div id="memory-gauge" class="gauge"></div>
      <div id="disk-gauge" class="gauge"></div>
      <div id="jvm-gauge" class="gauge"></div>
    </div>
    <!-- 仪表盘文字  -->
    <div class="gauge-area">
      <div class="gauge-text-block">
        <div class="gauge-text" style="padding-left:50px">
          <p><b>服&ensp;务&ensp;器：</b>{{lowerSystem.serverName}}</p>
          <p><b>运行时长：</b>{{lowerSystem.sysDuration}}</p>
          <p><b>操作系统：</b>{{lowerSystem.osName}}</p>
          <p><b>线程总数：</b>{{lowerSystem.totalThread}}</p>
        </div>
      </div>
      <div class="gauge-text-block">
        <div class="gauge-text" style="padding-left:65px">
          <p><b>总&ensp;内&ensp;存：</b>{{lowerSystem.osMemory.totalMemory}}M</p>
          <p><b>已用内存：</b>{{lowerSystem.osMemory.usedMemory}}M</p>
          <p><b>剩余内存：</b>{{lowerSystem.osMemory.freeMemory}}M</p>
        </div>
      </div>
      <div class="gauge-text-block">
        <div class="gauge-text" style="padding-left:60px">
          <p><b>总&ensp;容&ensp;量：</b>{{lowerSystem.disk.totalDiskSpace}}M</p>
          <p><b>已用空间：</b>{{lowerSystem.disk.usedDiskSpace}}M</p>
          <p><b>剩余空间：</b>{{lowerSystem.disk.freeDiskSpace}}M</p>
        </div>
      </div>
      <div class="gauge-text-block">
        <div class="gauge-text" style="padding-left:70px">
          <p><b>最大内存：</b>{{lowerSystem.jvmMemory.maxMemory}}M</p>
          <p><b>总&ensp;内&ensp;存：</b>{{lowerSystem.jvmMemory.totalMemory}}M</p>
          <p><b>已用内存：</b>{{lowerSystem.jvmMemory.usedMemory}}M</p>
          <p><b>剩余内存：</b>{{lowerSystem.jvmMemory.freeMemory}}M</p>
        </div>
      </div>
    </div>
    <div class="hr-line"></div>
    <!-- 用户访问指标 -->
    <app-subpanel v-if="appType=='app'" :curServer="curServer"/>
    <!-- 数据库访问指标 -->
    <db-subpanel v-if="appType=='sql+mongo'" :curServer="curServer"/>
  </div>
</template>

<script>
import Constant from '../../global/CommonConst.js'
import Util from '../../global/CommonUtil.js'
import AppSubpanel from "./AppSubpanel.vue";
import DbSubpanel from "./DbSubpanel.vue";

export default {
  name: 'GaugePanel',
  props: ["curServer"],
  components: { 
     'app-subpanel': AppSubpanel,
     'db-subpanel': DbSubpanel,
  },
  
  data() {
    return {
      // 仪表盘相关变量
      lowerSystem: {
        osMemory: {},
        disk: {},
        jvmMemory: {}
      },

      refreshGaugeTimer: null,
      echartCpu: null,
      echartMemory: null,
      echartDisk: null,
      echartJvm: null,

      //标记浏览器窗口大小是否发生变化
      isWindowResizing: 0
    }
  },

  computed: {
    appType() {
      return this.curServer ? this.curServer.appType : '';
    }
  },

  methods:{
    showGauges() {
      this.echartCpu = this.echarts.init(document.getElementById('cpu-gauge'));
      this.echartCpu.setOption(this.buildGaugeOption("CPU", 0));

      this.echartMemory = this.echarts.init(document.getElementById('memory-gauge'));
      this.echartMemory.setOption(this.buildGaugeOption("内存", 0));
      
      this.echartDisk = this.echarts.init(document.getElementById('disk-gauge'));
      this.echartDisk.setOption(this.buildGaugeOption("硬盘", 0));

      this.echartJvm = this.echarts.init(document.getElementById('jvm-gauge'));
      this.echartJvm.setOption(this.buildGaugeOption("JVM", 0));
      
      this.refreshGauges();
    },

    buildGaugeOption(text, dataValue) {
      return {
        series: [{
          type: 'gauge',
          // center:['50%','50%'],  
          radius: "100%",
          axisLine: {
              lineStyle: {width: 6, color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']]}
          },
          pointer: {itemStyle: {color: 'auto'}},
          axisTick: {distance: -10, length: 3, lineStyle: {color: '#fff', width: 2}},
          splitLine: {distance: -40, length: 10, lineStyle: {color: '#fff', width: 4}},
          axisLabel: {color: 'auto', distance: 5, fontSize: 14},
          detail: {valueAnimation: true, formatter: text + ' {value}%', color: 'auto', fontSize: 18},
          data: [{value: dataValue}]
        }]
      };
    },

    refreshGauges() {
      if (!this.curServer) return;
      
      let url = Util.fillUrlArgments(this.commonUrl.URL_GET_LOWER_SYSTEM_INFO, 
        this.curServer.serverId, this.curServer.appId);
      this.appAxios("GET", url).then(result => {
        if (result != null) {
          this.lowerSystem = result.data;

          this.echartCpu.setOption(this.buildGaugeOption(
            "CPU", this.lowerSystem.cpuUsageRate), true);
          this.echartMemory.setOption(this.buildGaugeOption(
            "内存", this.lowerSystem.osMemory.memoryUsageRate), true);
          this.echartDisk.setOption(this.buildGaugeOption(
            "硬盘", this.lowerSystem.disk.diskUsageRate), true);
          this.echartJvm.setOption(this.buildGaugeOption(
            "JVM", this.lowerSystem.jvmMemory.memoryUsageRate), true);
        }
      })
    },
  },

  watch: {
    isWindowResizing: {
      handler(_newName, _oldName) {
        this.echartCpu.resize();
        this.echartMemory.resize();
        this.echartDisk.resize();
        this.echartJvm.resize();
      },
      immediate: false
    },

    curServer: {
      handler(_newName, _oldName) {
        this.refreshGauges();
      },
      immediate: false
    }    
  },

  mounted() {
    window.onresize = () => {
      this.isWindowResizing++;
    };

    this.showGauges();

    //设置仪表盘数据刷新定时器
    this.refreshGaugeTimer = setInterval(() => {
      this.refreshGauges();
    }, Constant.INTERVAL_SYSTEM_INDEX);
  },

  destroyed() {
    clearInterval(this.refreshGaugeTimer);
  }
}
</script>

<style scoped>
.gauge-main-body {
  margin: 0 20px;
  border: solid 0px;
}
.gauge-area {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content : space-between;
  border: solid blue 0px;
}
.gauge {
  width: 20%;
  height: 250px;
  border: solid green 0px;
}
.gauge-text-block {
  margin-top: -40px;
  width: 20%;
  border: solid blue 0px;
}
.gauge-text {
  text-align: left;
  overflow: hidden;
  font-size: 14px;
  border: solid red 0px;
}
.hr-line {
  margin-top:10px;
	height: 5px;
	background-color: #f0f0f0;
}
</style>