<template>
  <el-card class="content-div">
    <div class="all-content">
      <div class="time-div">
        <span>2023年08月23日 星期三 09:57:11</span>
        <el-button type="primary" size="large" @click="getTime">时间校对</el-button>
        <el-button type="primary" size="large" @click="getTime">时间校对</el-button>

      </div>
      <div class="top-div">
        <fieldset class="left-div  box2">
          <legend class="box-ht">设备信息</legend>
          <div>
            <span class="name">型号</span>
            <span class="value">{{ deviceData.basicinfo.model }}</span>
          </div>
          <div>
            <span class="name">序列号</span>
            <span class="value">{{ deviceData.basicinfo.sn }}</span>
          </div>
          <div>
            <span class="name">开机时间</span>
            <span class="value">{{ deviceData.hostinfo.boottime }}</span>
          </div>
          <div>
            <span class="name">运行时长</span>
            <span class="value">{{ deviceData.hostinfo.uptime }}</span>
          </div>
        </fieldset>
        <fieldset class="right-div box2">
            <legend class="box-ht">内存信息</legend>
          <div id="echartDiv" class="echartDiv"></div>
        </fieldset>
      </div>
      <div class="bottom-div">
          <fieldset class="left-div1 box2">
            <legend class="box-ht">磁盘信息</legend>
            <div class="process-div">
              <div v-for="(item, index) in deviceData.diskinfo" :key="index">
                <div :id="'echartDiv' + index" class="echartDiv"></div>
              </div>
            </div>
          </fieldset>
 
          <fieldset class="right-div1 box2">
            <legend class="box-ht">网卡信息</legend>
            <div v-for="(item, index) of deviceData.netinfo" :key="index" class="all-con">
              <p class="title">网卡{{ item.name }}的使用情况</p>
              <div class="data">
                <span>
                  <span class="name">字节</span>
                  <span class="dataValue">
                    <span class="recv">{{ item.bytesRecv }}↓</span>
                    <span class="sent">{{ item.bytesSent }}↑</span>
                  </span>
                </span>
                <span>
                  <span  class="name">包</span>
                  <span class="dataValue">
                    <span class="recv">{{ item.packetsRecv }}↓</span>
                    <span class="sent">{{ item.packetsSent }}↑</span>
                  </span>
                </span>
              </div>
            </div>
          </fieldset>
      </div>
    </div>
  </el-card>
</template>

<script>
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
import infoApi from "@/api/infoApi.js";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
import { user, token, response, info } from '../proto/data/pd';
import myApi from "@/api/myApi.js";
export default {
  name: "home",
  setup() {
    const state = reactive({
      deviceData: {
        basicinfo: {},
        hostinfo: {},
        diskinfo: [],
        netinfo: [],
        meminfo: [],
      },
    });

    onMounted(async () => {
      getSys(); 
    });
    const getSys = async () => {
      const res = await infoApi.getSys();
      if (res.code == 0) {
        state.deviceData = res.data;
        nextTick(() => {
          drawEchart();
        });
      }
    };

    const drawEchart = () => {
      let dom = document.getElementById("echartDiv");
      let data = {
        name: "内存使用比",
        usedPercent: state.deviceData.meminfo.used_percent.toFixed(2),
        used: state.deviceData.meminfo.used_percent.toFixed(2),
        total: 100,
      };
      getEchart(dom, data);
      state.deviceData.diskinfo.forEach((ele, index) => {
        let domItem = document.getElementById("echartDiv" + index);
        let dataItem = {
          name: ele.name.split("/")[2],
          usedPercent: ele.used_percent.toFixed(2),
          used: ele.used_percent.toFixed(2),
          total: 100,
        };
        getEchart(domItem, dataItem);
      });
    };

    const getEchart = (dom, data) => {
      if (dom) {
        var myChart = echarts.init(dom);
        var option = {
          tooltip: {
            trigger: "item",
            show: false
          },
          graphic: {
            elements: [
              {
                type: "text",
                left: "center",
                top: "40%",
                style: {
                  text: data.name + "\n",
                  fill: "#000",
                  fontSize: 18,
                },
              },
              {
                type: "text",
                left: "center",
                top: "55%",
                style: {
                  text: data.usedPercent + "%",
                  fill: "#000",
                  fontSize: 18,
                },
              }
            ],
          },
          series: [
            {
              name: data.name,
              type: "pie",
              radius: ["60%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: data.used, name: "使用" },
                { value: data.total - data.used, name: "未使用" },
              ],
            },
          ],
        };

        option && myChart.setOption(option);
      }
    };

    return {
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss" scoped>
.all-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.time-div {
  height: 8%;
  width: 100%;
  border-radius: 10px;
  // border: 1px solid #006b3b;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 15px;
  >span {
    padding: 0 15px;
    font-size: 26px;
  }
}
.top-div {
  height: 39%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.bottom-div {
  height: 49%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.left-div, .left-div1 {
  height: 100%;
  width: 65%;
  border: 1px solid #006b3b;
  border-radius: 10px;
  flex-direction: column;
  justify-content: space-around;
  display: flex;
  padding: 20px;
  > div {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  .name {
    width: 25%;
    border: 1px solid #c3c3c3;
    height: 100%;
    font-size: 18px;
  }
  .value {
    width: 73%;
    border: 1px solid #c3c3c3;
    font-size: 18px;
  }
  .process {
    width: 73%;
    padding: 15px 0;
  }
  .process-div {
    height: 100%;
    justify-content: space-around;
    align-items: center;
    > div {
      width: 48%;
      height: 100%;
    }
  }
}

.right-div, .right-div1 {
  height: 100%;
  width: 34%;
  border: 1px solid #006b3b;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 10px;
  display: flex;
  padding: 10px;
  > div {
    height: 49%;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    align-items: center;
  }
  .all-con {
    width: 100%;
    height: 50%;
    // border: 1px solid red;
  }
  .data {
    padding: 5px 0;
    width: 70%;
    height: calc(100% - 30px);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    // border: 1px solid greenyellow;
    >span {
      height: 30px;
      display: flex;
      align-items: center;
      // border: 1px solid red;
      .name {
        width: 20%;
        font-size: 18px;
      }
      .dataValue {
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          width: 40%;
          border: 1px solid #c3c3c3;
          text-align: center;
          border-radius: 10px;
          padding: 8px 0;
          color: #098658;
          font-size: 16px;
        }
        .recv {
          background: #f8cecc;
        }
        .sent {
          background: #dae8fc;
        }
      }
    }
  }
  .title {
    // border: 1px solid red;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    background: #e2f4e5;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
  }
}
.left-div1, .right-div1 {
  width: 49.5%;
}
.echartDiv {
  width: 70% !important;
  height: 100% !important;
  margin: 0 auto;
}
</style>
