本文是在“外舍三月三广场北”的基础上对主要的3种情形进行了轻量的封装,符合这4种情形的下,只需在相应的 html 元素上增加若干定义。
约定
:与测点对应的 HTML 元素必须将 id 设置为测点ID [monitoringId]
直接将测点的实际值写到在元素的 outHTML 属性上
<div id="..." data-format="text"></div>
根据测点的值显示不同的图片
<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
的内容是测点值和对应图像相对路径的键值对, 不同的值显示不同的图像.
根据测点的值赋予元素不同的 CSS 样式(类选择符
), 使用 CSS 样式可以实现一些较为复杂的效果,比如动画
<img id="..." data-format="class" data-map='{"0":"off", "1":"on", "2":"err"}'/>
data-map
的内容是测点值和对应CSS样式的键值对, 如果不指定 data-map
时默认值是
{"0":"off", "1":"on"}`
解决某些需要通过减差值获取的数据,如今日水量、今日电量等。 通过/api/link/monitoring/{monitoringId}/today接口获取今日起始数据,由最新值减去起始值得出。 定时刷新当日起始值,保证下一天数据的正确。
<div id="..." data-format="text_today"></div>
注意:1.因接口返回时间不同可能会出现最新数据先于起始数据加载完成,出现显示最新数据而不是今日数据的情况,当数据下次更新时该情况解决;
2.每日凌晨因数据更新频率可能会出现短时间(约5分钟)的数据错误现象;
3.若同一个测点需要显示累计数据何今日数据,为避免元素id相同,今日数据的元素id可采用`m_monitoringId`。