dataControl/src/views/Home.vue

<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" @click="getTime">时间校对</el-button>
        <el-button type="primary" @click="getTime">时间校对</el-button>

      </div>
      <div class="top-div">
        <div class="left-div">
          <h3>设备信息</h3>
          <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>
        </div>
        <div class="right-div">
          <h3>内存信息</h3>
          <div id="echartDiv" class="echartDiv"></div>
        </div>
      </div>
      <div class="bottom-div">
        <div class="left-div">
          <h3>磁盘信息</h3>
          <div class="process-div">
            <div v-for="(item, index) in deviceData.diskinfo" :key="index">
              <div :id="'echartDiv' + index" class="echartDiv"></div>
            </div>
          </div>
        </div>
        <div class="right-div">
          <h3>网卡信息</h3>
          <div v-for="(item, index) of deviceData.netinfo" :key="index">
            <p>网卡{{ 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>
        </div>
      </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'
export default {
  name: "home",
  setup() {
    const state = reactive({
      deviceData: {
        basicinfo: {},
        hostinfo: {},
        diskinfo: [],
        netinfo: [],
        meminfo: [],
      },
    });

    onMounted(() => {
      getSys();
    });
    const getSys = async () => {
      const res = await infoApi.getSys();
      // 解析返回数据
      const ret = response.decode(new Uint8Array(res)); 
      console.log(ret)
       
      if (ret.code == 0) {
        // 解析数据
        state.deviceData = info.decode(ret.data);
        console.log(44, state.deviceData);
        nextTick(() => {
          drawEchart();
        });
      }
       
      
    };

    const drawEchart = () => {
      let dom = document.getElementById("echartDiv");
      let data = {
        name: "内存使用比",
        usedPercent: state.deviceData.meminfo.usedPercent.toFixed(2),
        used: state.deviceData.meminfo.usedPercent.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.usedPercent.toFixed(2),
          used: ele.usedPercent.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: "40%",
                top: "middle",
                style: {
                  text: data.name + "\n" + "    " + data.usedPercent + "%",
                  fill: "#000",
                  fontSize: 16,
                },
              },
            ],
          },
          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: 20px;
  border: 1px solid #c3c3c3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 15px;
  >span {
    padding: 0 15px;
  }
}
.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 {
  height: 100%;
  width: 65%;
  border: 1px solid #c3c3c3;
  border-radius: 20px;
  flex-direction: column;
  justify-content: space-around;
  display: flex;
  padding: 20px;
  > div {
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  .name {
    width: 25%;
    border: 1px solid #c3c3c3;
    height: 100%;
  }
  .value {
    width: 73%;
    border: 1px solid #c3c3c3;
  }
  .process {
    width: 73%;
    padding: 15px 0;
  }
  .process-div {
    height: 100%;
    justify-content: space-around;
    align-items: center;
    > div {
      width: 48%;
      height: 100%;
    }
  }
}
.right-div {
  height: 100%;
  width: 34%;
  border: 1px solid #c3c3c3;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 20px;
  display: flex;
  padding: 25px;
  > div {
    height: 49%;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    align-items: center;
  }
  .data {
    width: 70%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    >span {
      height: 45%;
      display: flex;
      align-items: center;
      .name {
        width: 20%;
      }
      .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: 10px 0;
          color: #098658
        }
        .recv {
          background: #f8cecc;
        }
        .sent {
          background: #dae8fc;
        }
      }
    }
  }
}
.echartDiv {
  width: 70% !important;
  height: 100% !important;
  margin: 0 auto;
}
</style>