【米尔-全志T113-i开发板试用】5、编写系统信息显示的Web页面组件

上一节我们完成了获取系统信息的JSON接口，现在我们来编写Web页面，用于显示对应的内容。效果如下

1、编写更新系统信息的逻辑功能代码

1.1 首先我们需要导入需要用到的库
在home.vue文件的script setup字段下添加以下内容

import axios from 'axios'
import { onMounted, ref } from 'vue'

1.2 然后将模板里用到的几个变量声明成ref对象。
因为Vue的ref对象是响应式的，我们在使用axios获取json属性后，修改对象时，会同步更新视图里的内容。

var UpTime = ref(0.0)
var CPUUsage = ref(0.0)
var MemoryUsage = ref(0.0)
var MemoryA = ref(0)
var KernelVersion = ref("")
var ModelName = ref("")

1.3 然后编写更新系统信息的函数（这里我暂时用getSystemInfo）来命名，先做了再说。

function getSystemInfo() {
    axios.get('/getSystemInfo').then((res) => {
        // console.log(res.data)
        UpTime.value = res.data.UpTime
        CPUUsage.value = res.data.CPUAvgPercent
        MemoryUsage.value = res.data.MemUsed
        MemoryA.value = res.data.MemAvailable
        KernelVersion.value = res.data.KernelVersion
        ModelName.value = res.data.ModelName
    })
}

1.4 然后设置整个页面DOM加载完毕时，调用更新函数，并设置一个15秒运行一次更新函数的定时器

onMounted(() => {
    getSystemInfo()
    setInterval(getSystemInfo, 15000)
})

好了，这就是完整的JS代码了，接下来，我们要制作Web界面了。

1.5 使用Tailwind CSS，我们可以很轻松的创建这个界面，例如搜索一下网络上的进度条代码，再修改一下我们需要显示的内容和排版方式，颜色，最终的代码如下（完整的home.vue）

<template>
    <div class="p-2 bg-slate-200 text-gray-800 w-10/12 text-sm">
        <h1 class="m-1 p-1">CPU: <span class="float-right text-gray-500">{{ ModelName }}</span></h1>
        <h1 class="m-1 p-1">内核版本： <span class="float-right text-gray-500">{{ KernelVersion }}</span></h1>
        <h1 class="m-1 p-1">CPU使用率: {{ CPUUsage.toFixed(2) }}%<span class="float-right text-gray-500">已运行{{ UpTime.toFixed(2) }}小时</span>
        </h1>
        <div class="mb-5 h-2 rounded-full bg-gray-500">
            <div class="h-2 rounded-full bg-green-500" :style="{ width: `${CPUUsage}%` }" />
        </div>
        <h1 class="m-1 p-1">内存使用率: {{ MemoryUsage.toFixed(2) }}%<span class="float-right text-gray-500">空闲 {{
            MemoryA.toFixed(0) }}MB</span></h1>
        <div class="mb-5 h-2 rounded-full bg-gray-500">
            <div class="h-2 rounded-full bg-green-500" :style="{ width: `${MemoryUsage}%` }" />
        </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'

var UpTime = ref(0.0)
var CPUUsage = ref(0.0)
var MemoryUsage = ref(0.0)
var MemoryA = ref(0)
var KernelVersion = ref("")
var ModelName = ref("")

function getSystemInfo() {
    axios.get('/getSystemInfo').then((res) => {
        // console.log(res.data)
        UpTime.value = res.data.UpTime
        CPUUsage.value = res.data.CPUAvgPercent
        MemoryUsage.value = res.data.MemUsed
        MemoryA.value = res.data.MemAvailable
        KernelVersion.value = res.data.KernelVersion
        ModelName.value = res.data.ModelName
    })
}

onMounted(() => {
    getSystemInfo()
    setInterval(getSystemInfo, 15000)
})
</script>

代码量非常少，功能也是正常的。由于我们获取JSON的链接使用的是同一个网址下的，需要将web app打包到米尔开发板上运行。

可以看到板子处理这些简单任务并没有什么难度

在浏览器的调试窗口，查看对应功能的响应时间，也是很迅速的

而Gin的服务代码里，只需要增加这两行就可以了，一个是添加静态文件夹的服务地址（用于js文件和css文件），一个是添加主页的静态服务。

r.Static("/assets", "./assets")
r.StaticFile("/", "./index.html")

实现一个简单的web服务，使用Vue + Tailwind CSS，配合Gin做一些简单的功能，还是很方便的。

下一节，我们可以尝试添加一个设备（米尔开发板），并使用Web控制板子上的LED灯。