<template>
  <div class="bigBox">
    <div class="titleBox">
      <div class="titlel clor">缓存监控</div>
    </div>

    <div class="information">
      <div class="top_box">
        <div class="left_box">
          <div class="title">
            系统相关配置
          </div>
          <div class="list_box">
            <ul>
              <li>
                <span>服务器名称：</span><span>{{ listQuery.sys.computerName }}</span>
              </li>
              <li>
                <span>服务器IP：</span><span>{{ listQuery.sys.computerIp }}</span>
              </li>
              <li>
                <span>项目路径：</span><span>{{ listQuery.sys.userDir }}</span>
              </li>
              <li>
                <span>操作系统：</span><span>{{ listQuery.sys.osName }}</span>
              </li>
              <li>
                <span>系统架构：</span><span>{{ listQuery.sys.osArch }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="right_box">
          <div class="title">
            内存相关信息
          </div>
          <div class="dig_box">
            <div class="list_box">
              <ul>
                <li>
                  <span>内存总量：</span><span>{{ listQuery.mem.total ? listQuery.mem.total : 0 }}GB</span>
                </li>
                <li>
                  <span>使用内存：</span><span>{{ listQuery.mem.used ? listQuery.mem.used : 0 }}GB</span>
                </li>
                <li>
                  <span>剩余内容：</span><span>{{ listQuery.mem.free ? listQuery.mem.free : 0 }}GB</span>
                </li>
                <li>
                  <span>使用率：</span><span>{{ listQuery.mem.usage ? listQuery.mem.usage : 0 }}%</span>
                </li>
              </ul>
            </div>
            <div class="char_box">
              <Linecharts v-if="showchart" :barNum="barNum" :barTitle='barTitle' :lineKey="lineKey" />
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="bottom_box">
      <div class="bot_box">
        <div class="title">
          磁盘相关信息
        </div>
        <div class="wi_scol">
          <div class="wi_box" v-for="item in listQuery.sysFiles " :key="item">
            <ul class="jdt_box" :class="bgcolor(item.usage)">
              <li>
                <span>盘符路径：</span><span>{{ item.dirName }}</span>
              </li>
              <li>
                <span>盘符类型：</span><span>{{ item.typeName }}</span>
              </li>
              <li>
                <span>文件类型：</span><span>{{ item.sysTypeName }}</span>
              </li>
              <li>
                <span>总大小：</span><span>{{ item.total }}</span>
              </li>
              <li>
                <span>剩余大小：</span><span>{{ item.free }}</span>
              </li>
              <li>
                <span>已使用量：</span><span>{{ item.used }}</span>
              </li>
            </ul>
            <div class="demo-progress">
              <el-progress :text-inside="true" :stroke-width="24" :percentage="item.usage" :color="customColor"
                status="success" />
            </div>

          </div>
        </div>


      </div>
      <div class="botri_box">
        <div class="right div_eit">
          <div class="title">
            CPU相关信息
          </div>
          <div class="flx">
            <div class="left_box" style=" width: 50%;">
              <div class="list_box">
                <ul style="margin-top: 30px;">
                  <li>
                    <span>核心数：</span><span>{{ listQuery.cpu.cpuNum ? listQuery.cpu.cpuNum : 0 }}核</span>
                  </li>
                  <li>
                    <span>系统使用率：</span><span>{{ listQuery.cpu.sys ? listQuery.cpu.sys : 0.0 }}%</span>
                  </li>
                  <li>
                    <span>用户使用率：</span><span>{{ listQuery.cpu.used ? listQuery.cpu.used : 0.0 }}%</span>
                  </li>
                  <li>
                    <span>当前等待率：</span><span>{{ listQuery.cpu.wait ? listQuery.cpu.wait : 0.0 }}%</span>
                  </li>
                  <li>
                    <span>当前空闲率：</span><span>{{ listQuery.cpu.free ? listQuery.cpu.free : 0.0 }}%</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="right_cpu">
              <div class="demo-progress">
                <el-progress type="circle" :percentage="listQuery.cpu.sys" :stroke-width='15' :color="colors" />
                <span class="clor">系统使用率</span>
              </div>
              <div class="demo-progress">
                <el-progress type="circle" :percentage="listQuery.cpu.used" :stroke-width='15' :color="colors" />
                <span class="clor">用户使用率</span>
              </div>
              <div class="demo-progress">
                <el-progress type="circle" :percentage="listQuery.cpu.wait" :stroke-width='15' :color="colors" />
                <span class="clor">当前等待率</span>
              </div>
              <div class="demo-progress">
                <el-progress type="circle" :percentage="listQuery.cpu.free" :stroke-width='15' :color="colors" />
                <span class="clor">当前空闲率</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right div_hei" style="margin-top: 10px;">
          <div class="title">
            JVM相关信息
          </div>

          <div class="flx hesol">
            <div class="le_box">
              <Piecharts v-if="pieData" :pieData="pieData" />
            </div>
            <div class="left_box" style=" width: 55%;">
              <div class="list_box">
                <ul style="margin-top: 10px;">
                  <li>
                    <span>占用内存总数：</span><span>{{ listQuery.jvm.total ? listQuery.jvm.total : 0.0 }}M</span>
                  </li>
                  <li>
                    <span>最大可用内存数：</span><span>{{ listQuery.jvm.max ? listQuery.jvm.max : 0.0 }}M</span>
                  </li>
                  <li>
                    <span>空闲内存：</span><span>{{ listQuery.jvm.free ? listQuery.jvm.free : 0.0 }}M</span>
                  </li>
                  <li>
                    <span>JDK版本：</span><span>{{ listQuery.jvm.version }}</span>
                  </li>
                  <li>
                    <span>JDK路径：</span><span>{{ listQuery.jvm.home }}</span>
                  </li>
                </ul>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<script setup>

import { onMounted, ref, onBeforeUnmount, reactive } from 'vue';

import Linecharts from './linecharts.vue';
import { dateFormat } from "@/utils/tools.js";
import Piecharts from './piecharts.vue';
import { postApi, } from "@/api/tobAcco_api.js";
const lineKey = ref(10)
const listQuery = reactive({
  sys: {},//系统相关配置
  mem: {},//内存相关信息
  sysFiles: [],//磁盘相关信息
  cpu: {},//CPU相关信息
  jvm: {}//JVM相关信息
})
const barNum = ref([
  10, 20, 30, 40, 10, 20
])
const barTitle = ref([])
const pieData = ref([]);//饼图数据
const percentage = ref(50);//进度条的值
const percentage2 = ref(0)
//进度条颜色（环形）
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]
//进度条颜色
const customColor = (percentage) => {
  if (percentage < 30) {
    return '#f10e0e'
  }
  if (percentage < 60) {
    return '#028d14'
  }
  return '#03560d'
}
const bgcolor = (val) => {
  if (val < 30) {
    return 'reed'
  }
  if (val < 60) {
    return 'gren'
  }
  return 'qtcolor'
}
const showchart = ref(false)
// mem.usage
//获取系统相关配置  
function getStystomData() {
  postApi({}, '/mosty-base/monitor/server').then((res) => {

    listQuery.sys = res.sys
    listQuery.mem = res.mem
    listQuery.sysFiles = res.sysFiles
    listQuery.cpu = res.cpu
    listQuery.jvm = res.jvm

    pieData.value = [{ value: (res.jvm.max - res.jvm.free), name: '剩余内存' }, { value: res.jvm.free, name: '空闲内存' }]

    barTitle.value.push(dateFormat({ type: 'sfm', time: Date.now() }))
    barNum.value.push(res.mem.usage)
    lineKey.value++
    if (barNum.value.length > 6) {
      barNum.value.shift();
    }
    if (barTitle.value.length > 6) {
      showchart.value = true
      barTitle.value.shift()
    }
  })
}
const timer = ref(null)
onMounted(() => {
  getStystomData()
  timer.value = setInterval(() => {
    getStystomData()
  }, 3000)

}),
  onBeforeUnmount(() => {
    clearInterval(timer.value);
    timer.value = null
  })

</script>

<style lang="scss" scoped>
.clor {
  color: #000;
}

.titleBox {
  height: 40px;

  .titlel {
    font-size: 18px;
    margin-left: 10px;
    line-height: 40px;
  }
}

.chart {
  display: flex;
  justify-content: space-around;
}

.top_box {
  display: flex;
  justify-content: space-between;
  height: 22vh;
  //padding: 0 10px;

  >div {
    border: 1px solid #837d7d;
  }
}

.title {
  color: red;
  font-size: 16px;
  padding: 7px;
  border-bottom: 1px solid #837d7d;
}

.left_box {
  width: 30%;

  .list_box {
    padding: 10px;

    ul>li {
      padding: 5px 0px;
      font-size: 16px;

      span:first-child {
        color: #272727;
      }

      span:last-child {
        color: #15b5f9;
      }
    }
  }
}

.right_box {
  width: 65%;

  .dig_box {
    display: flex;
    justify-content: space-between;

    .list_box {
      padding: 0 10px;

      ul>li {
        padding: 5px 0px;
        font-size: 17px;

        span:first-child {
          color: #403f3f;
        }

        span:last-child {
          color: #262525;
          font-weight: 600;
        }
      }
    }
  }
}

.bottom_box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  // height: calc(100vh - 50vh);

  .bot_box {
    width: 55%;
    height: calc(100vh - 44vh);
    border: 1px solid #837d7d;
  }

  .botri_box {
    width: 40%;
  }
}

.wi_scol {
  height: calc(100vh - 48vh);
  overflow-y: scroll;
}

.wi_box {
  padding: 10px;


  .demo-progress .el-progress--line {
    margin-bottom: 15px;
    width: 100%;
  }
}

.jdt_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  margin-bottom: 10px;

  >li {
    width: 30%;
    padding: 0 10px;
    line-height: 34px;

    >span {
      font-size: 17px;
    }

    span:first-child {
      color: #1c1b1b;
    }

    span:last-child {
      color: #15b5f9;
    }
  }
}

.right {
  border: 1px solid #837d7d;
}

.div_eit {
  height: 300px;
}

.div_hei {
  height: calc(100vh - 44vh - 310px);
}

.flx {

  display: flex;
  justify-content: space-between;
}

.hesol {
  height: calc(100vh - 48vh - 310px);
  overflow-y: scroll;
}

.right_cpu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .demo-progress {
    text-align: center;
    margin: 10px;
    width: 39%;

    >span {
      margin-top: 10px;
      margin-right: 20px;
      display: block;
    }
  }

  // .demo-progress .el-progress--line {
  //   margin-bottom: 15px;
  //   width: 350px;
  // }

  .demo-progress .el-progress--circle {
    margin-right: 15px;
  }
}

::v-deep .el-progress-circle {
  width: 80px !important;
  height: 80px !important;
}

.le_box {
  width: 50%;
}

.char_box {
  width: 80%;
}

.reed {
  border-left: 4px solid #f10e0e;
}

.gren {
  border-left: 4px solid #028d14;
}

.qtcolor {
  border-left: 4px solid #03560d;
}
</style>