Statistics項目學習筆記

一、

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