2020-08-18 update 优化样式：实现每个核心温度占表格的一行，显示更加直观、美观

20220619200544

每个核心温度占表格的一行，显示更加直观、美观

安装 sed 捕捉 sensors 输出的文本的指定某行的信息到终端。sensors |sed -n 11p 可将 sensors 输出的第 11 行的内容输出到终端，这样可以实现一个核心的温度数据占表格一行的需求

opkg install sed

一开始修改 index.htm 文件如下，能够得到正确的样式，但是发现温度数据是静态的，说明不能将命令写在 html 中，必须写出独立的函数，在 html tr td 标签中调用对应的函数才能使温度动态显示

<tr><td width="33%"><%:CPU Temperature%></td><td><%=luci.sys.exec("sensors |sed -n 11p") or "?"%></td></tr>
<tr><td width="33%"><%: %></td><td><%=luci.sys.exec("sensors |sed -n 12p") or "?"%></td></tr>
<tr><td width="33%"><%: %></td><td><%=luci.sys.exec("sensors |sed -n 13p") or "?"%></td></tr>
<tr><td width="33%"><%: %></td><td><%=luci.sys.exec("sensors |sed -n 14p") or "?"%></td></tr>

后面将获取 每个 core 的温度数据写成独立的函数 实现了目的（就是写起来有点繁琐，若有更好的办法欢迎你分享）

将后面补充的代码全都贴在下面

local cpu_temperature1 = luci.sys.exec("sensors |sed -n 11p")

local cpu_temperature2 = luci.sys.exec("sensors |sed -n 12p")

local cpu_temperature3 = luci.sys.exec("sensors |sed -n 13p")

local cpu_temperature4 = luci.sys.exec("sensors |sed -n 14p")

cputemp1    = cpu_temperature1,

cputemp2    = cpu_temperature2,

cputemp3    = cpu_temperature3,

cputemp4    = cpu_temperature4,

if (e = document.getElementById('cputemp1'))
                                e.innerHTML = info.cputemp1;

if (e = document.getElementById('cputemp2'))
                                e.innerHTML = info.cputemp2;

if (e = document.getElementById('cputemp3'))
                                e.innerHTML = info.cputemp3;

if (e = document.getElementById('cputemp4'))
                                e.innerHTML = info.cputemp4;                            

<tr><td width="33%"><%:CPU Temperature%></td><td id="cputemp1">-</td></tr>  

<tr><td width="33%"><%: %></td><td id="cputemp2">-</td></tr>

<tr><td width="33%"><%: %></td><td id="cputemp3">-</td></tr>

<tr><td width="33%"><%: %></td><td id="cputemp4">-</td></tr>

以下是原文

改造首页前，我的首页状态展示了大部分有用的信息，其中 CPU信息 中有温度信息但是展示的不够全，我希望能够按照 CPU 核心数 分别展示每个核心的温度情况（请看下文）

20220619200649

一开始没有 cpu 详细的温度信息

一、安装 lm-sensors 采集 CPU 温度信息

需要安装 lm-sensors、lm-sensors-detect 两个程序

opkg update
opkg install lm-sensors lm-sensors-detect

如果正确安装，在 terminal 中执行 sensors 能得到相关信息
20220619200910

二、下面开始 把相关信息 写入到 首页的 index.htm 文件中

首页的 index.htm 文件位于 /usr/lib/lua/luci/view/admin_status/index.htm
通过观察这个文件的规律可以修改这个文件以实现我们的目标

友情提醒: 备份 index.htm 文件

cp /usr/lib/lua/luci/view/admin_status/index.htm /usr/lib/lua/luci/view/admin_status/index-original.htm

1.新增函数收集 cpu 四个核心的温度信息 (linux 命令执行后的结果赋予 cpu_temperature)

local cpu_temperature = luci.sys.exec("sensors | tail -n 5")

sensors | tail -n 5 是为了收集我们需要的最后 5 行信息

2.将收集到的 cpu_temperature 赋予 cputemp 变量 并赋给 rv

local rv = {
                        cpuusage    = cpu_usage,
                        cpuinfo    = cpu_info,
                        cputemp    = cpu_temperature,
                        ethinfo    = eth_info,
                        userinfo    = user_info,
                        uptime     = sysinfo.uptime or 0,
                        localtime  = os.date(),
                        loadavg    = sysinfo.load or { 0, 0, 0 },
                        memory     = meminfo,
                        memcached  = mem_cached,
                        swap       = swapinfo,
                        connmax    = conn_max,
                        conncount  = conn_count,
                        leases     = stat.dhcp_leases(),
                        leases6    = stat.dhcp6_leases(),
                        wifinets   = stat.wifi_networks()
                }

3.在 DOM 层操作 将元素值赋给 innerHTML

if (e = document.getElementById('cputemp'))
                                e.innerHTML = info.cputemp;

4.在 html 表格里渲染 cpu温度 这一条目

<tr><td width="33%"><%:CPU Temperature%></td><td id="cputemp">-</td></tr>

完整的表格类似于这样（如果你不太知道怎么找这部分代码 可以参考下面这段 然后 善用检索功能）

<fieldset class="cbi-section">
        <legend><%:System%></legend>

        <table width="100%" cellspacing="10">
                <tr><td width="33%"><%:Hostname%></td><td><%=luci.sys.hostname() or "?"%></td></tr>
                <tr><td width="33%"><%:Model%></td><td><%=pcdata(boardinfo.model or "?")%> <%=luci.sys.exec("cat /etc/bench.log") or " "%></td><
                <tr><td width="33%"><%:CPU Info%></td><td id="cpuinfo">-</td></tr>
                <tr><td width="33%"><%:Firmware Version%></td><td>
                        <%=pcdata(ver.distname)%> <%=pcdata(ver.distversion)%> /
                        <%=pcdata(ver.luciname)%> (<%=pcdata(ver.luciversion)%>)
                </td></tr>
                <tr><td width="33%"><%:Kernel Version%></td><td><%=unameinfo.release or "?"%></td></tr>
                <tr><td width="33%"><%:Local Time%></td><td id="localtime">-</td></tr>
                <tr><td width="33%"><%:Uptime%></td><td id="uptime">-</td></tr>
                <tr><td width="33%"><%:Load Average%></td><td id="loadavg">-</td></tr>
                <tr><td width="33%"><%:CPU usage (%)%></td><td id="cpuusage">-</td></tr>
                <tr><td width="33%"><%:CPU Temperature%></td><td id="cputemp">-</td></tr>
        </table>
</fieldset>

十分实用的一次改动。最后的效果图
20220619200950

end.