目錄

• • 系統背景
  • 系統介紹
  • 前端
  • • SVG
    • 監控情況
    • 彈出窗口
    • 圖表
  • 后端
  • • 表格處理
    • Servlet類
    • 數據處理類
  • 前后端的數據交互內容及設計
  • • 采用Servlet技術
    • 采用Ajax技術
    • 前后端數據交互操作
  • 前端第三方庫介紹
  • 后端用的第三方JAR包的介紹
  • 一些小特色
  • 總結
  • 一些有用的參考鏈接

系統背景

隨著人們生活水平的提高以及計算機網絡的普及,尤其是近年來信息技術的發展和人們生活條件的改善,有更多的家庭都希望能夠通過電腦、手機等網絡設備實現家庭設備的遠程監控。目前大部分的家庭監控系統都是以攝像頭作為載體,一般僅僅用于監視,而在控制方面幾乎沒有,或者是比較復雜,需要擁有一定的計算機能力才能操作,難以普及。對于大眾化而言,擁有可視化界面,操作簡單的家庭遠程監控系統將是目前家庭遠程監控系統的發展趨勢。通過使用SVG構建家庭遠程監控系統,用戶使用電腦、手機等設備只需要通過瀏覽器而不需要安裝專用客戶端,并且操作都是基于高清的圖形界面,具有操作簡單,視覺效果好的特點。

系統介紹

首先來到首頁，即監控區域以及監控區域的情況，剛開始沒選擇想要監控的地點時顯示如下；

接著點擊確定想要查看的區域，點擊書房，此時書房的情況如下：

還可以點擊別的監控地點，比如車庫，也可以對車庫的地圖進行放大；

現在我們想看看書房的各項屬性值的具體數值，于是點擊書房對應的顯示圖表，可以看到對應生成的實時屬性值；

當然可以跨大時間間隔來看看，把握一個總體趨勢總是比較好的，但是數據太密集了，可以選擇放大窗口；

圖表顯示太快了，可視化的效果有待加強，我們可以選擇表格，這樣便一目了然；

如果想要進一步研究，可以導出Excel進行研究，從而提高家里的安全性能。也可以同時查看不同監控地點的圖表，方便做出比較以及快速的安全判斷，因為右邊的監控區域情況一次只能顯示一個監控地點的具體情況，打開圖表過多的話可以直接點擊全部關閉按鈕。

前端

SVG

• 名字與系統標題變化
  
  PS：頭像下使用SVG顯示的自己的名字，這里我就隱身了~

• 監控區域的整體瀏覽
  瀏覽開始：
  Step1：通過document.getElementById()得到監控區域svg的標簽”house”；
  Step2：通過document.querySelector()得到瀏覽開始的按鈕”begin”；
  Step3：通過click()函數，調用插件Tweenmax里面的函數；
  Step4：通過延時函數delay()進行部分區域的停留時間控制，其中利用對viewbox賦不同的參數的值，進行監控區域的定位。其中viewBox 的四個參數分別代表：最小X軸數值，最小y軸數值，寬度，高度。

瀏覽結束：
Step1: 通過document.getElementById()得到監控區域svg的標簽”house”；
Step2: 通過document.querySelector()得到瀏覽開始的按鈕”over”；
Step3: 通過click()函數，調用插件Tweenmax里面的函數；
Step4: 通過svg.setAttribute(“viewBox”, “0 0 757.8 534.8”)，將區域顯示為原始狀態；
Step5: 通過TweenMax.killAll()函數結束調用的動態插件功能。

瀏覽效果圖

• 響應式局部放大功能
  對7個不同的監控區域分別設置了一個div：

放大區域：
Step1：click()函數：先通過document.getElementById()先獲得所點擊區域對應的id；
Step2：發送對應的位置數據請求ajax，然后返回相應的viewbox中的四個參數值xylocation數組；
Step3：調用svg.setAttribute(“viewBox”,xylocation)。

縮小區域：
Step1：通過document.getElementById()得到”ensmall”的標簽；
Step2：通過svg.setAttribute(“viewBox”, “0 0 757.8 534.8”)，即可將區域顯示為原始狀態。

監控情況

• 不同監控區域響應式顯示監控情況
  因對7個不同的監控區域分別設置了一個div，當點擊想要了解的監控區域部分情況時，右半部分則顯示對應的監控情況。
• 定位文本框的響應式顯示
  通過發送ajax得到后臺的定位信息字符串，將字符串的value賦值給定位文本框的text來顯示。
• 定義動態attr_box
  其中包含五個元素，可以根據需要進行動態地通過對attr_box添加新 li 進monitor_box中。

• 屬性值的實時顯示
  通過發送ajax請求到相應區域的監控情況后，會根據從Excel表中讀到的相對應的屬性值進行不斷更新。
• 實現報警功能
  對上述三個狀態進行值的劃分，確定安全、預警、報警的屬性值范圍，對后臺生成的數據進行判斷，值所對應的范圍即此刻監控區域的狀態。
  利用anime插件設置一個樣式.twinkleLight，其中內部設置為：{animation: fade 600ms infinite;-webkit-animation: fade 600ms infinite;}，同時設置為三個燈設置三個樣式，即.twinkleG、.twinkleY、.twinkleR，對圖表中此刻顯示的最大值進行判斷，對不同的屬性設置三個不同的值域，不同的值域對應不同的樣式，若此刻的最大值落在了Warning的區間內，則將.twinkleLight的樣式賦給.twinkleR，則對應的紅燈即會閃爍。

彈出窗口

利用layui插件里面的彈出層模塊的多窗口模式，層疊置頂部分。此彈窗可實現放大、縮小、關閉、拖拽等功能；顯示為非模態彈窗，可以懸浮；關閉時可以單獨關閉也可以一次性關閉彈窗。在觸發事件中，可根據需要修改下面的主要參數：
1：type：基本層類型。此處設置為1；
2：area：窗口的大小。此處設置為[‘650px’, ‘500px’]；
3：content ：內容。此處我設置了一個div；
4：offset ：坐標。默認：垂直水平居中；
5：btn：按鈕。此處設置了btn為 [ ‘全部關閉’]；
6：layer.setTop(layero)：置頂當前窗口。當頁面有多個layer窗口，利用setTop，則點擊某個窗口，該窗體就置頂在上面。

圖表

• 二維圖
  因不同的屬性有不同的值域范圍，所以需要通過不同的坐標軸來顯示，其中坐標軸的位置通過屬性offset進行調整，左右均可顯示。
• 數據視圖中顯示自定義實時表格數據，并可導出為Excel
  利用echart本來存在的數據視圖，將其中的格式轉換為表格顯示，并添加導出Excel的功能。通過修改圖表option參數中的toolbox，在feature中數據視圖中添加內容，并在optionToContent中添加表格顯示函數。
  其中導出為Excel實現過程：

將數據視圖轉換為表格實現過程：

數據視圖：

• 圖表實時顯示以及歷史數據顯示
  后臺一直生成數據，相應圖表顯示此刻的屬性值，在輸入框中輸入你想知道的多久之前的數據后，則可以顯示歷史數據。
  實時數據顯示：

歷史數據顯示：

后端

表格處理

• InitExcel.java
  
• Addcolumn.java
  
• ExportExcel.java
  
• ExceltoJson.java
  

Servlet類

• AddcolumnServlet.java
  
• QianQianXiaoNvWang.java
  

數據處理類

• GenerateAttrs.java
  
• Attrs.java
  
• Attr_Value.java
  
• Data.java

前后端的數據交互內容及設計

采用Servlet技術

Servlet能夠交互式地瀏覽和生成數據并且生成動態Web內容，Java中的HttpServlet 是運行在 Web 服務器或應用服務器上的程序，它是作為來自 Web 瀏覽器或其他 HTTP 客戶端的請求和 HTTP 服務器上的數據庫或應用程序之間的中間層。

Servlet 執行以下主要任務：
1：讀取瀏覽器發送的顯式的數據，包括網頁上的 HTML 表單以及自定義的HTTP客戶端的表單，即初始化時發送各個監控區域的Excel中sheet相對應的名稱以及在此監控區域中想要檢測的屬性值。
2：讀取瀏覽器發送的隱式的 HTTP 請求數據，包括 cookies、媒體類型和瀏覽器能理解的壓縮格式等，即讀取向后端請求的各個監控區域相對應的坐標數組、屬性以及屬性值。
3：處理數據并生成結果。即需要從EXCEL讀取數據，這里指的是各個監控區域的不同的屬性以及屬性值或向Excel中寫入相應的監控地點、屬性以及相應的屬性值。
4：發送顯式的數據到瀏覽器，此處則指前端所需要的此刻所監控區域的坐標數組，所包含的相關檢測屬性以及相對應的屬性值。
5：發送隱式的 HTTP 響應到瀏覽器，包括告訴瀏覽器或其他客戶端被返回的文檔類型、設置 cookies 和緩存參數等。
Servlet技術原理圖：

采用Ajax技術

Ajax 是一種用于創建快速動態網頁的技術，通過在后臺與服務器進行少量數據交換使網頁實現異步更新，無需重新加載整個網頁而能夠更新部分網頁。此處采用了在前端jsp中的 $.ajax()方法向后端請求數據。
在前端jsp中定義了一個sendAjax的函數，在瀏覽器頁面上點擊到相應的監控區域，則調用send()函數相對應的 $.ajax()方法進行發送請求。
PS：下方的 $.這里都省略。。。方便操作。

前后端數據交互操作

前端通過Ajax將請求信息以及數據傳輸到后端，后端獲取到請求信息以及數據后，通過Java中的HttpServlet，對數據進行處理，響應請求信息，并返回處理結果給前端。

• 書房數據交互操作
  在前端頁面上點擊監控區域的書房，則調用sendAjax部分的send()函數中對應書房的 ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發送請求，后端的Servlet收到請求后，進行數據的處理，通過先動態生成書房所對應的屬性以及隨機屬性值，將其寫入Excel中，并將表格中書房相關的數據轉換成json格式返回給前端請求書房信息的 ajax()。

• 臥室數據交互操作
  在前端頁面上點擊監控區域的臥室，則調用sendAjax部分的send()函數中對應臥室的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發送請求，后端的Servlet收到請求后，進行數據的處理，通過先動態生成臥室所對應的屬性以及隨機屬性值，將其寫入Excel中，并將表格中臥室相關的數據轉換成json格式返回給前端請求臥室信息的ajax()。

• 起居室數據交互操作
  在前端頁面上點擊監控區域的起居室，則調用sendAjax部分的send()函數中對應起居室的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發送請求，后端的Servlet收到請求后，進行數據的處理，通過先動態生成起居室所對應的屬性以及隨機屬性值，將其寫入Excel中，并將表格中起居室相關的數據轉換成json格式返回給前端請求起居室信息的ajax()。

• 客廳數據交互操作
  在前端頁面上點擊監控區域的客廳，則調用sendAjax部分的send()函數中對應客廳的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發送請求，后端的Servlet收到請求后，進行數據的處理，通過先動態生成客廳所對應的屬性以及隨機屬性值，將其寫入Excel中，并將表格中客廳相關的數據轉換成json格式返回給前端請求客廳信息的ajax()。

• 浴室數據交互操作
  在前端頁面上點擊監控區域的浴室，則調用sendAjax部分的send()函數中對應浴室的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發送請求，后端的Servlet收到請求后，進行數據的處理，通過先動態生成浴室所對應的屬性以及隨機屬性值，將其寫入Excel中，并將表格中浴室相關的數據轉換成json格式返回給前端請求浴室信息的ajax()。

• 車庫數據交互操作
  在前端頁面上點擊監控區域的車庫，則調用sendAjax部分的send()函數中對應車庫的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發送請求，后端的Servlet收到請求后，進行數據的處理，通過先動態生成車庫所對應的屬性以及隨機屬性值，將其寫入Excel中，并將表格中車庫相關的數據轉換成json格式返回給前端請求車庫信息的ajax()。

• 廚房數據交互操作
  在前端頁面上點擊監控區域的廚房，則調用sendAjax部分的send()函數中對應廚房的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發送請求，后端的Servlet收到請求后，進行數據的處理，通過先動態生成廚房所對應的屬性以及隨機屬性值，將其寫入Excel中，并將表格中廚房相關的數據轉換成json格式返回給前端請求廚房信息的ajax()。
  書房對應的ajax請求：
  
  書房對應的Servlet請求：
  
  書房交互數據結果圖：
  

前端第三方庫介紹

• Layui
  這是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，適合界面的快速開發。這里使用了Layui中彈出層的iFrame模塊，對area的大小進行了設置，同時在content進行了自定義，即加入了輸入框，按鈕以及圖表模塊。
  Layui插件使用圖：

• Echarts
  來源于Echarts官網，是一個純JS腳本圖表庫，下載好合適的Echarts版本之后，通過‘ script src=“js/echarts.js”’‘ /script ’引入，在準備好的DOM容器中進行創建圖表。通過前端顯示圖標按鈕，觸發彈出窗口事件之后，進一步創建圖表，將當前時間作為x軸，不同y軸顯示不同的屬性，不同的y軸的數值則對應不同時刻的屬性值。利用數據視圖，對數據視圖進行改進，可修改成表格的形式。
  Echarts插件使用圖：
  

• Jquery.table2excel
  是一個將表格導出為Excel的插件。在彈窗中顯示的Echarts的數據視圖中，生成的實時表格，引入此插件，點擊導出Excel即可將表格導出為Excel。
  Jquery.table2excel插件使用圖：
  

• Jquery
  是一個具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展，擁有便捷的插件擴展機制和豐富的插件。Layui插件以及其他插件依賴于它。需要通過‘script src=‘js/jquery-3.4.1.min.js’’‘/script’引入。

• Tweenmax
  是一個適用于移動端和現代互聯網的超高性能專業級動畫插件，GreenSock動畫平臺的核心。用于完成監控區域的瀏覽，即點擊瀏覽開始，則可以按照設定的時間依次放大掃過各個區域，讓用戶了解監控區域的具體構造。其中注意viewbox參數的設置，以及delay()函數的巧妙使用，以下代碼時瀏覽具體情況的代碼，不僅包括放大，還包括了動畫效果。
  Tweenmax插件使用圖：
  

• Anime
  作為一個可視化工具，可以實現動態效果，即完成自己名字與系統標題動態變化；同時當監控屬性數值找過預定的數值時，會進行報警處理，報警時、平常安全時以及提醒時，燈的閃爍也是由此插件。利用anime插件設置一個樣式.twinkleLight，其中內部設置為：{animation: fade 600ms infinite;-webkit-animation: fade 600ms infinite;}。

• Bootstrap
  是一個基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，利用其進行了監控區域屬性、屬性值以及監控區域狀態的排版，修改其中CSS樣式，美化。在右邊監控情況區域屬性、屬性值、以及對應燈的排布，調用了該插件里面的clearfix。
  Bootstrap插件使用圖：

后端用的第三方JAR包的介紹

• Fastjson
  前后端數據傳輸交互中，會遇到字符串(String)與json，XML等格式相互轉換與解析，其中json以跨語言，跨前后端的優點在開發中被頻繁使用，基本上可以說是標準的數據交換格式。fastjson是一個java語言編寫的高性能且功能完善的JSON庫，它采用一種“假定有序快速匹配”的算法，把JSON Parse 的性能提升到了極致。它的接口簡單易用，已經被廣泛使用在緩存序列化，協議交互，Web輸出等各種應用場景中。
  在ajax()方法中請求的數據等是json格式的，即監控地點名稱、監控地點的數組、屬性和屬性值構成的鍵值對。都是以json的形式傳送的，體現在ajax()方法中的：data: JSON.stringify(list)上，同時Excel表格中的sheetname、屬性和屬性值數據也需要轉換成json格式才可以傳送，則體現在ExceltoJson.java上。
• Poi
  Apache POI是Apache軟件基金會的開放源碼函式庫，POI提供API給Java程序對Microsoft Office格式檔案讀和寫的功能。用到了其中的HSSF：提供讀寫Microsoft Excel格式檔案的功能。可以用純Java代碼來讀取、寫入、修改Excel文件。HSSF 為讀取操作提供了兩類API：usermodel和eventusermodel，即“用戶模型”和“事件-用戶模型”。體現在InitExcel.java、Addcolumn.java、AddcolumnServlet.java和ExportExcel.java中。
  此處使用的是HSSF，即提供讀寫Microsoft Excel格式檔案的功能。通過建議對應監控區域的HSSFSheet，初始化時，先給每一個sheet添加一個time標簽，即第一列，同時在生成的每一個sheet中添加一個屬性：溫度。

一些小特色

• 監測屬性可以自定義添加
  首先InitExcel.java是對Excel表進行初始化，即創建了相對應的7個不同監控地點的sheet，并在每一個sheet中添加了一個time列，同時設置了一個相同的屬性：溫度。
  起初在瀏覽器里面輸入http://localhost:8080/Monitor/InitExcel來進行表格初始化（表格不刪除，以后可以不必進行初始化），在桌面上生成一個data.xls。
  在后臺編寫了Addcolumn.java、AddcolumnServlet.java，此時想要添加一個屬性需要向Excel里面添加新的一列，是通過瀏覽器發送請求Servlet來進行的，在瀏覽器里面輸入http://localhost:8080/Monitor/AddcolumnServlet?sheetname=shufang&attrname=CO2（其中sheetname是從七個監控區域中選擇的一個，attrname則是自己想添加的屬性），這樣就可以從Excel中讀出新的一列新的屬性值的值，轉換為json數據格式后再傳給ajax即可。
• viewbox的動態瀏覽
  利用Tweenmax插件，結合在viewbox中設置參數以及delay()函數，完成svg的動態放大瀏覽。
• 利用Echart的數據視圖部分添加自定義表格
  在Echarts的toolbox里面dataView中的optionToContent: function (opt)()函數，添加自定義表格樣式，再利用插件實現導出Excel的功能。

總結

首先學習了一點html、css、js方面的內容，完成了簡歷的制作、不同排序算法的界面化、電影票選座等后，然后再學習了一定的java，實現了上面的一個小項目，單純為了實現上述功能，而對界面的美化等沒有太多的考慮。獻丑了~~

一些有用的參考鏈接

17素材網
jquery布局插件
viewbox的動態用法-超級推薦

總結

以上是生活随笔為你收集整理的智慧家安监控系统——用Java + html、css、js实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。