toilet-tv

公厕 Android TV 展示端编码说明

本文是在“外舍三月三广场北”的基础上对主要的3种情形进行了轻量的封装，符合这4种情形的下，只需在相应的 html 元素上增加若干定义。

约定：与测点对应的 HTML 元素必须将 id 设置为测点ID [monitoringId]

四种情形

1. 文本显示 [data-format="text"]

直接将测点的实际值写到在元素的 outHTML 属性上

<div id="..." data-format="text"></div>

2. 图像切换 [data-format="image"]

根据测点的值显示不同的图片

<img id="..." data-format="image" data-map='{"0":"img/0.png", "1":"img/2.png", "2":"img/2.png"}'/>

注意 data-map 属性值使用了单引号, 这是因为 JSON 规范里的键名只能使用双引号, 因此将外层的HTML属性值改为单引号, 否则会导致JS出错.
data-map 的内容是测点值和对应图像相对路径的键值对, 不同的值显示不同的图像.

3. 样式切换 [data-format="class"]

根据测点的值赋予元素不同的 CSS 样式(类选择符)， 使用 CSS 样式可以实现一些较为复杂的效果，比如动画

<img id="..." data-format="class" data-map='{"0":"off", "1":"on", "2":"err"}'/>

data-map 的内容是测点值和对应CSS样式的键值对, 如果不指定 data-map 时默认值是

{"0":"off", "1":"on"}`

4. 今日数据 [data-format="text_today"]

解决某些需要通过减差值获取的数据，如今日水量、今日电量等。 通过/api/link/monitoring/{monitoringId}/today接口获取今日起始数据，由最新值减去起始值得出。 定时刷新当日起始值，保证下一天数据的正确。

<div id="..." data-format="text_today"></div>

注意：1.因接口返回时间不同可能会出现最新数据先于起始数据加载完成，出现显示最新数据而不是今日数据的情况，当数据下次更新时该情况解决；

 2.每日凌晨因数据更新频率可能会出现短时间（约5分钟）的数据错误现象；
 3.若同一个测点需要显示累计数据何今日数据，为避免元素id相同，今日数据的元素id可采用`m_monitoringId`。

其它说明

• 注意 main.js 中对应平台的 WebSocket 的路径
• 注意 main.js 中对应平台的 API 接口的路径和 key
• 除地图外，HTML 其它元素都是用绝对定位
• 为方便进调试，可以使用基于 node.js 的工具 live-server, 或者使用 VSCode 并安装“Live Server”扩展