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文件；