Statistics项目学习笔记
1、
http://218.244.157.0:55443/index.html
初始访问时,弹出的窗口为index.html文件,文件有html命令组成。html展现的UI界面用的是WIN10-UI,其介绍可在项目文件夹的README.md有所介绍。
Win10-UI是一款win10风格的后台UI,让您轻松搭建一个别具一格的后台界面。
本项目html文件中结构主要是head、body、script;map.html和chart.html用到了script;head:解释了该html文件用到的css和js文件等;body:解释了html UI操作响应;
script:解释了html中会执行的一些方法函数操作,。
index.html中body部分:
<div id="win10"> <div class="desktop"> <div id="win10-shortcuts" class="shortcuts-hidden"> <div class="shortcut" onclick="Win10.openUrl('/Template/map.html', '<img class=\' icon\' src=\'./img/icon/maps.png\' />设备位置')"> <img class="icon" src="./img/icon/maps.png" /> <div class="title">设备位置</div> </div> <div class="shortcut" onclick="Win10.openUrl('/Template/chart.html', '<img class=\' icon\' src=\'./img/icon/demo.png\' />统计报表')"> <img class="icon" src="./img/icon/demo.png" /> <div class="title">统计报表</div> </div> </div> <div id="win10-desktop-scene"></div> </div>
下面这部分解释了点击设备位置,会打开位于项目Template文件夹下的map.html文件
<div id="win10-shortcuts" class="shortcuts-hidden"> <div class="shortcut" onclick="Win10.openUrl('/Template/map.html', '<img class=\' icon\' src=\'./img/icon/maps.png\' />设备位置')"> <img class="icon" src="./img/icon/maps.png" /> <div class="title">设备位置</div> </div>
下面这部分解释了点击设备位置,会打开chart.html文件:
<div class="shortcut" onclick="Win10.openUrl('/Template/chart.html', '<img class=\' icon\' src=\'./img/icon/demo.png\' />统计报表')"> <img class="icon" src="./img/icon/demo.png" /> <div class="title">统计报表</div> </div>
存在问题1:该网址在IE浏览器和360浏览器都不能正常打开,在谷歌浏览器可以正常打开。
页面初始视图:设备位置、统计报表、Windows按键、ie浏览器按钮、时间显示、消息提示。
核心功能视图:设备位置、统计报表
上述两个视图按钮每次点击都会弹出相应的新窗口,多次点击弹出多个窗口。
点击‘统计报表’,弹出的窗口为/Template/chart.html 文件;
点击‘设备位置’,弹出的窗口为/Template/map.html文件;