目錄

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

系統(tǒng)背景

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

系統(tǒng)介紹

首先來到首頁，即監(jiān)控區(qū)域以及監(jiān)控區(qū)域的情況，剛開始沒選擇想要監(jiān)控的地點(diǎn)時(shí)顯示如下；

接著點(diǎn)擊確定想要查看的區(qū)域，點(diǎn)擊書房，此時(shí)書房的情況如下：

還可以點(diǎn)擊別的監(jiān)控地點(diǎn)，比如車庫，也可以對(duì)車庫的地圖進(jìn)行放大；

現(xiàn)在我們想看看書房的各項(xiàng)屬性值的具體數(shù)值，于是點(diǎn)擊書房對(duì)應(yīng)的顯示圖表，可以看到對(duì)應(yīng)生成的實(shí)時(shí)屬性值；

當(dāng)然可以跨大時(shí)間間隔來看看，把握一個(gè)總體趨勢(shì)總是比較好的，但是數(shù)據(jù)太密集了，可以選擇放大窗口；

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

如果想要進(jìn)一步研究，可以導(dǎo)出Excel進(jìn)行研究，從而提高家里的安全性能。也可以同時(shí)查看不同監(jiān)控地點(diǎn)的圖表，方便做出比較以及快速的安全判斷，因?yàn)橛疫叺谋O(jiān)控區(qū)域情況一次只能顯示一個(gè)監(jiān)控地點(diǎn)的具體情況，打開圖表過多的話可以直接點(diǎn)擊全部關(guān)閉按鈕。

前端

SVG

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

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

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

瀏覽效果圖

• 響應(yīng)式局部放大功能
  對(duì)7個(gè)不同的監(jiān)控區(qū)域分別設(shè)置了一個(gè)div：

放大區(qū)域：
Step1：click()函數(shù)：先通過document.getElementById()先獲得所點(diǎn)擊區(qū)域?qū)?yīng)的id；
Step2：發(fā)送對(duì)應(yīng)的位置數(shù)據(jù)請(qǐng)求ajax，然后返回相應(yīng)的viewbox中的四個(gè)參數(shù)值xylocation數(shù)組；
Step3：調(diào)用svg.setAttribute(“viewBox”,xylocation)。

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

監(jiān)控情況

• 不同監(jiān)控區(qū)域響應(yīng)式顯示監(jiān)控情況
  因?qū)?個(gè)不同的監(jiān)控區(qū)域分別設(shè)置了一個(gè)div，當(dāng)點(diǎn)擊想要了解的監(jiān)控區(qū)域部分情況時(shí)，右半部分則顯示對(duì)應(yīng)的監(jiān)控情況。
• 定位文本框的響應(yīng)式顯示
  通過發(fā)送ajax得到后臺(tái)的定位信息字符串，將字符串的value賦值給定位文本框的text來顯示。
• 定義動(dòng)態(tài)attr_box
  其中包含五個(gè)元素，可以根據(jù)需要進(jìn)行動(dòng)態(tài)地通過對(duì)attr_box添加新 li 進(jìn)monitor_box中。

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

彈出窗口

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

圖表

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

將數(shù)據(jù)視圖轉(zhuǎn)換為表格實(shí)現(xiàn)過程：

數(shù)據(jù)視圖：

• 圖表實(shí)時(shí)顯示以及歷史數(shù)據(jù)顯示
  后臺(tái)一直生成數(shù)據(jù)，相應(yīng)圖表顯示此刻的屬性值，在輸入框中輸入你想知道的多久之前的數(shù)據(jù)后，則可以顯示歷史數(shù)據(jù)。
  實(shí)時(shí)數(shù)據(jù)顯示：

歷史數(shù)據(jù)顯示：

后端

表格處理

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

Servlet類

• AddcolumnServlet.java
  
• QianQianXiaoNvWang.java
  

數(shù)據(jù)處理類

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

前后端的數(shù)據(jù)交互內(nèi)容及設(shè)計(jì)

采用Servlet技術(shù)

Servlet能夠交互式地瀏覽和生成數(shù)據(jù)并且生成動(dòng)態(tài)Web內(nèi)容，Java中的HttpServlet 是運(yùn)行在 Web 服務(wù)器或應(yīng)用服務(wù)器上的程序，它是作為來自 Web 瀏覽器或其他 HTTP 客戶端的請(qǐng)求和 HTTP 服務(wù)器上的數(shù)據(jù)庫或應(yīng)用程序之間的中間層。

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

采用Ajax技術(shù)

Ajax 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)，通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換使網(wǎng)頁實(shí)現(xiàn)異步更新，無需重新加載整個(gè)網(wǎng)頁而能夠更新部分網(wǎng)頁。此處采用了在前端jsp中的 $.ajax()方法向后端請(qǐng)求數(shù)據(jù)。
在前端jsp中定義了一個(gè)sendAjax的函數(shù)，在瀏覽器頁面上點(diǎn)擊到相應(yīng)的監(jiān)控區(qū)域，則調(diào)用send()函數(shù)相對(duì)應(yīng)的 $.ajax()方法進(jìn)行發(fā)送請(qǐng)求。
PS：下方的 $.這里都省略。。。方便操作。

前后端數(shù)據(jù)交互操作

前端通過Ajax將請(qǐng)求信息以及數(shù)據(jù)傳輸?shù)胶蠖?#xff0c;后端獲取到請(qǐng)求信息以及數(shù)據(jù)后，通過Java中的HttpServlet，對(duì)數(shù)據(jù)進(jìn)行處理，響應(yīng)請(qǐng)求信息，并返回處理結(jié)果給前端。

• 書房數(shù)據(jù)交互操作
  在前端頁面上點(diǎn)擊監(jiān)控區(qū)域的書房，則調(diào)用sendAjax部分的send()函數(shù)中對(duì)應(yīng)書房的 ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發(fā)送請(qǐng)求，后端的Servlet收到請(qǐng)求后，進(jìn)行數(shù)據(jù)的處理，通過先動(dòng)態(tài)生成書房所對(duì)應(yīng)的屬性以及隨機(jī)屬性值，將其寫入Excel中，并將表格中書房相關(guān)的數(shù)據(jù)轉(zhuǎn)換成json格式返回給前端請(qǐng)求書房信息的 ajax()。

• 臥室數(shù)據(jù)交互操作
  在前端頁面上點(diǎn)擊監(jiān)控區(qū)域的臥室，則調(diào)用sendAjax部分的send()函數(shù)中對(duì)應(yīng)臥室的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發(fā)送請(qǐng)求，后端的Servlet收到請(qǐng)求后，進(jìn)行數(shù)據(jù)的處理，通過先動(dòng)態(tài)生成臥室所對(duì)應(yīng)的屬性以及隨機(jī)屬性值，將其寫入Excel中，并將表格中臥室相關(guān)的數(shù)據(jù)轉(zhuǎn)換成json格式返回給前端請(qǐng)求臥室信息的ajax()。

• 起居室數(shù)據(jù)交互操作
  在前端頁面上點(diǎn)擊監(jiān)控區(qū)域的起居室，則調(diào)用sendAjax部分的send()函數(shù)中對(duì)應(yīng)起居室的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發(fā)送請(qǐng)求，后端的Servlet收到請(qǐng)求后，進(jìn)行數(shù)據(jù)的處理，通過先動(dòng)態(tài)生成起居室所對(duì)應(yīng)的屬性以及隨機(jī)屬性值，將其寫入Excel中，并將表格中起居室相關(guān)的數(shù)據(jù)轉(zhuǎn)換成json格式返回給前端請(qǐng)求起居室信息的ajax()。

• 客廳數(shù)據(jù)交互操作
  在前端頁面上點(diǎn)擊監(jiān)控區(qū)域的客廳，則調(diào)用sendAjax部分的send()函數(shù)中對(duì)應(yīng)客廳的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發(fā)送請(qǐng)求，后端的Servlet收到請(qǐng)求后，進(jìn)行數(shù)據(jù)的處理，通過先動(dòng)態(tài)生成客廳所對(duì)應(yīng)的屬性以及隨機(jī)屬性值，將其寫入Excel中，并將表格中客廳相關(guān)的數(shù)據(jù)轉(zhuǎn)換成json格式返回給前端請(qǐng)求客廳信息的ajax()。

• 浴室數(shù)據(jù)交互操作
  在前端頁面上點(diǎn)擊監(jiān)控區(qū)域的浴室，則調(diào)用sendAjax部分的send()函數(shù)中對(duì)應(yīng)浴室的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發(fā)送請(qǐng)求，后端的Servlet收到請(qǐng)求后，進(jìn)行數(shù)據(jù)的處理，通過先動(dòng)態(tài)生成浴室所對(duì)應(yīng)的屬性以及隨機(jī)屬性值，將其寫入Excel中，并將表格中浴室相關(guān)的數(shù)據(jù)轉(zhuǎn)換成json格式返回給前端請(qǐng)求浴室信息的ajax()。

• 車庫數(shù)據(jù)交互操作
  在前端頁面上點(diǎn)擊監(jiān)控區(qū)域的車庫，則調(diào)用sendAjax部分的send()函數(shù)中對(duì)應(yīng)車庫的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發(fā)送請(qǐng)求，后端的Servlet收到請(qǐng)求后，進(jìn)行數(shù)據(jù)的處理，通過先動(dòng)態(tài)生成車庫所對(duì)應(yīng)的屬性以及隨機(jī)屬性值，將其寫入Excel中，并將表格中車庫相關(guān)的數(shù)據(jù)轉(zhuǎn)換成json格式返回給前端請(qǐng)求車庫信息的ajax()。

• 廚房數(shù)據(jù)交互操作
  在前端頁面上點(diǎn)擊監(jiān)控區(qū)域的廚房，則調(diào)用sendAjax部分的send()函數(shù)中對(duì)應(yīng)廚房的ajax()方法，則向"/Monitor/QianQianXiaoNvWang"發(fā)送請(qǐng)求，后端的Servlet收到請(qǐng)求后，進(jìn)行數(shù)據(jù)的處理，通過先動(dòng)態(tài)生成廚房所對(duì)應(yīng)的屬性以及隨機(jī)屬性值，將其寫入Excel中，并將表格中廚房相關(guān)的數(shù)據(jù)轉(zhuǎn)換成json格式返回給前端請(qǐng)求廚房信息的ajax()。
  書房對(duì)應(yīng)的ajax請(qǐng)求：
  
  書房對(duì)應(yīng)的Servlet請(qǐng)求：
  
  書房交互數(shù)據(jù)結(jié)果圖：
  

前端第三方庫介紹

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

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

• Jquery.table2excel
  是一個(gè)將表格導(dǎo)出為Excel的插件。在彈窗中顯示的Echarts的數(shù)據(jù)視圖中，生成的實(shí)時(shí)表格，引入此插件，點(diǎn)擊導(dǎo)出Excel即可將表格導(dǎo)出為Excel。
  Jquery.table2excel插件使用圖：
  

• Jquery
  是一個(gè)具有獨(dú)特的鏈?zhǔn)秸Z法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展，擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。Layui插件以及其他插件依賴于它。需要通過‘script src=‘js/jquery-3.4.1.min.js’’‘/script’引入。

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

• Anime
  作為一個(gè)可視化工具，可以實(shí)現(xiàn)動(dòng)態(tài)效果，即完成自己名字與系統(tǒng)標(biāo)題動(dòng)態(tài)變化；同時(shí)當(dāng)監(jiān)控屬性數(shù)值找過預(yù)定的數(shù)值時(shí)，會(huì)進(jìn)行報(bào)警處理，報(bào)警時(shí)、平常安全時(shí)以及提醒時(shí)，燈的閃爍也是由此插件。利用anime插件設(shè)置一個(gè)樣式.twinkleLight，其中內(nèi)部設(shè)置為：{animation: fade 600ms infinite;-webkit-animation: fade 600ms infinite;}。

• Bootstrap
  是一個(gè)基于HTML、CSS、JavaScript 開發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的前端開發(fā)框架，利用其進(jìn)行了監(jiān)控區(qū)域?qū)傩浴傩灾狄约氨O(jiān)控區(qū)域狀態(tài)的排版，修改其中CSS樣式，美化。在右邊監(jiān)控情況區(qū)域?qū)傩浴傩灾怠⒁约皩?duì)應(yīng)燈的排布，調(diào)用了該插件里面的clearfix。
  Bootstrap插件使用圖：

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

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

一些小特色

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

總結(jié)

首先學(xué)習(xí)了一點(diǎn)html、css、js方面的內(nèi)容，完成了簡(jiǎn)歷的制作、不同排序算法的界面化、電影票選座等后，然后再學(xué)習(xí)了一定的java，實(shí)現(xiàn)了上面的一個(gè)小項(xiàng)目，單純?yōu)榱藢?shí)現(xiàn)上述功能，而對(duì)界面的美化等沒有太多的考慮。獻(xiàn)丑了~~

一些有用的參考鏈接

17素材網(wǎng)
jquery布局插件
viewbox的動(dòng)態(tài)用法-超級(jí)推薦

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。