仿海康網頁版做一個在線的實時監控網站（1）-- 側邊欄站點選擇

本文轉載自查看原文 2017-09-21 09:12 2951 海康威視/ javaweb/ CSS+DIV布局

目前的漁政網頁版的開發已經接近尾聲，目前要做的是一個網頁版的在線視頻實時監控的功能，仿照海康的網頁版示例，整個頁面做下來有點心得體會，所以寫一篇博文記錄下，方便自己以后翻閱，也希望可以給別人提供幫助

首先搭建頁面，用css+div布局生成頁面，如何用js生成div在我前面的博客中有提過

這篇博客我准備寫兩篇，第一篇講側邊欄的生成過程，第二遍講海康視頻插件的添加和雲台的操作

因為獲取數據的原因，側邊欄的生成比我預計的多花了好幾天的時間，當然了這么幾天我也學到了很多新的知識，這更主要的是對於數組有了一個更深刻的理論

首先獲取到所有的設備，里面的數據包括所有的設備和設備編號，相當於所有數據的總框，我需要根據這個總框編寫一個字典函數，根據其其他接口獲取到得設備，得到設備名稱顯示在節點中，關於字典函數的編寫和數據的層級關系在上一篇博客里。

然后根據接口，獲取所有的IRST設備，將從接口獲取的LIST格式的數據整理成LIst{IRST,LIST{}}的格式，獲取完畢之后拼接字符串，在寫的時候出現了兩處錯誤，一處是遍歷數組添加數據的時候，后面的數據替換了之前的存儲數據，二是之前寫的字典函數沒有應用上去，該顯示站點名稱的地方寫的是未定義

我們依次解決這些問題

第一個問題，首先看一段代碼

 1   //設置站點設備的索引
 2             var nationindex = 0;
 3             var irstindex = 0;
 4             var index = 0;
 5             //獲取第一個站點名稱
 6             var IRSTnation = nodelist[0].szDeviceID;
 7 
 8             //數組用來存儲所有的IRST設備信息
 9             var IRSTlist = new Array(IRST);
10 
11             //數組用來存儲站點名稱以及對應的IRST設備信息
12             var list = new Array(IRSTnation, IRSTlist);
13 
14 
15             for (var i = 0; i < nodelength; i++) {
16                 if (nodelist[i].szDeviceID === IRSTnation) {
17                     //數組用來存儲單個的IRST設備信息
18                     var IRST = new Array();
19                     IRST[irstindex] = new Array();
20                     IRST[irstindex] = [nodelist[i].szName, nodelist[i].szIP, nodelist[i].NPort, nodelist[i].szUser, nodelist[i].szPassword, nodelist[i].NChannel, nodelist[i].szName, nodelist[i].szStation, nodelist[i].NDeviceType];
21                     IRSTlist[nationindex] = new Array();
22                     IRSTlist[nationindex].push(IRST);
23                     list[index] = new Array();
24                     var copyIRSTlist = IRSTlist;
25                     list[index].push(IRSTnation, copyIRSTlist[nationindex]);
26                     irstindex++;
27                 }
28                 if (nodelist[i].szDeviceID !== IRSTnation) {
29                     index++;
30                     nationindex++;
31                     irstindex = 0;
32                     IRSTnation = nodelist[i].szDeviceID;
33                     //數組用來存儲單個的IRST設備信息
34                     var IRST = new Array();
35                     IRST[irstindex] = new Array();
36                     IRST[irstindex] = [nodelist[i].szName, nodelist[i].szIP, nodelist[i].NPort, nodelist[i].szUser, nodelist[i].szPassword, nodelist[i].NChannel, nodelist[i].szName, nodelist[i].szStation, nodelist[i].NDeviceType];
37                     IRSTlist[nationindex] = new Array();
38                     IRSTlist[nationindex].push(IRST);
39                     list[index] = new Array();
40                     var copyIRSTlist = IRSTlist;
41                     list[index].push(IRSTnation, copyIRSTlist[nationindex]);
42                     irstindex++;
43                 }
44             }

View Code

這段代碼看起來比較復雜，其實邏輯比較好理解，IRST存儲每個攝像頭的信息，IRSTList存儲IRST數據，list存儲站點和對應的攝像頭數據，我在第一個循環執行完之后，切換站點，重置IRSTList的索引為0時，后面生成的數據就把前面的數據覆蓋了，我試了很久沒找到一個好的解決方法，后來在網上找到一個別人用js寫的Map方法，達成了我想要的數據格式

從thrift獲取數據，用map函數變成我想要的數據格式，然后拼接字符串，代碼如下：

  1     //獲取所有IRST設備
  2     $.ajax({
  3         contentType: "application/x-www-form-urlencoded; charset=utf-8",
  4         type: "POST",
  5         url: "/getit",  //servlet路徑
  6         statusCode: {
  7             404: function () {
  8                 alert('獲取IRST設備失敗，請刷新');
  9             }
 10         },
 11         success: function (data) {
 12             nodelist = eval(data);
 13             var areas = new Map();
 14             for (var i = 0; i < nodelist.length; i++) {
 15                 var deviceid = nodelist[i].szDeviceID;
 16                 //獲取站點編號
 17                 var stationid = deviceid.substring(0, 6);
 18                 //獲取湖區編號
 19                 var areaid = deviceid.substring(0, 4);
 20 
 21                 //添加湖區信息
 22                 if (!areas.containsKey(areaid))
 23                     areas.put(areaid, new Map());
 24 
 25                 //添加站點信息
 26                 var area =areas.get(areaid);
 27                 if (!area.containsKey(stationid))
 28                     area.put(stationid,new Map());
 29 
 30                 //添加設備信息
 31                 var station = area.get(stationid);
 32                 if (!station.containsKey(deviceid))
 33                     station.put(deviceid,new Map());
 34 
 35                 station.get(deviceid).put(nodelist[i].szName,nodelist[i]);
 36 
 37             }
 38 
 39             var keys = areas.keys();
 40 
 41             var i = 0;
 42             var ii = 0;
 43             var iii = 0;
 44             var iiii = 0;
 45             var station = "";
 46             var device = "";
 47             var IRST = "";
 48             var str = "";
 49 
 50             //拼接字符串
 51             str = "[";
 52 
 53             for ( i = 0; i < keys.length; i++) {
 54                 //根據湖區名稱找站點名稱
 55                 var allinfo = areas.get(keys);
 56                 station = allinfo.elements;
 57                 //如果有站點信息
 58                 if(station.length > 0){
 59                     for (ii = 0; ii < station.length; ii++) {
 60                         if (ii + 1 === station.length) {
 61                             str += "{id:'" + station[ii].key + "',text:'" + adddevide.find(station[ii].key) + "'";
 62                             alldevice();
 63                             break;
 64                         }
 65                         else {
 66                             str += "{id:'" + station[ii].key  + "',text:'" + adddevide.find(station[ii].key) + "'";
 67                             alldevice();
 68                             str += "},";
 69                         }
 70                     }
 71                 }
 72             }
 73 
 74             str += "}];";
 75 
 76             //獲取不同的設備
 77             function alldevice() {
 78                 device = station[ii].value.elements;
 79                 if(device.length > 0){
 80                     for (iii = 0; iii < device.length; iii++) {
 81                         if (str.charAt(str.length - 1) !== ",") {
 82                             str += ",nodes:[";
 83                         }
 84                         //如果是節點的最后一位
 85                         if (iii + 1 === device.length) {
 86                             str += "{id:'" + device[iii].key  + "',text:'" + adddevide.find(device[iii].key)+ "'";
 87                             IRSTType();
 88                             str +=  "}]";
 89                             return 0;
 90                         }
 91                         else {
 92                             str += "{id:'" + device[iii].key  + "',text:'" + adddevide.find(device[iii].key)+ "'";
 93                             IRSTType();
 94                             str +=  "},";
 95                         }
 96                     }
 97                 }
 98                 return 0;
 99             }
100 
101             //獲取設備上不同的攝像頭
102             function IRSTType() {
103                 var info = new Array();
104                 var index = 0;
105                 IRST = device[iii].value.elements;
106                 if(IRST.length > 0){
107                     for (iiii = 0; iiii < IRST.length; iiii++) {
108                         if (str.charAt(str.length - 1) !== ",") {
109                             str += ",nodes:[";
110                         }
111                         //如果是節點的最后一位
112                         if (iiii + 1 === IRST.length) {
113                             //定義數組，存儲用戶登錄信息
114                             info[index] = new Array();
115                             info[index].push(IRST[iiii].value.szIP,IRST[iiii].value.szUser,IRST[iiii].value.szPassword,IRST[iiii].value.NPort,IRST[iiii].value.NChannel);
116                             str += "{id:'" + IRST[iiii].value.szIP + IRST[iiii].value.NChannel   + "',tags:['"  +  info[index] +  "'],text:'" + IRST[iiii].key +  "'}]";
117                             index++;
118                             return 0;
119                         }
120                         else {
121                             info[index] = new Array();
122                             info[index].push(IRST[iiii].value.szIP,IRST[iiii].value.szUser,IRST[iiii].value.szPassword,IRST[iiii].value.NPort,IRST[iiii].value.NChannel);
123                             str += "{id:'" + IRST[iiii].value.szIP + IRST[iiii].value.NChannel   + "',tags:['"  +  info[index] +  "'],text:'" + IRST[iiii].key + "'},";
124                             index++;
125                         }
126                     }
127                 }
128                 return 0;
129             }
130 
131             var nodedata = eval(str);
132 
133             $("#nationselect").treeview({
134                 //默認只顯示第一層級的數據
135                 levels: 1,
136                 data: nodedata
137             });
138 
139             $('#nationselect').on('nodeSelected', function (event, data) {
140                 //數組轉字符串
141                 var IRSTinfo = data.tags.toString();
142                 //字符串拼接數組
143                 var abcArray = IRSTinfo.split(',');
144                 //用戶登陸IP
145                 var IRSTIP = abcArray[0];
146                 //用戶登陸名
147                 var IRSTUSER = abcArray[1];
148                 //用戶登陸密碼
149                 var IRSTPSW = abcArray[2];
150                 //用戶登陸端口號
151                 var IRSTPort = abcArray[3];
152                 //攝像頭的通道號
153                 var IRSTChannel = abcArray[4];
154                 var a = new NationInfo(IRSTIP, IRSTPort, IRSTUSER, IRSTPSW, IRSTChannel);
155                 openvideo(a);
156                 clickLogin();
157             });
158 
159         }
160     });

View Code

下面就出現了第二個問題，servlet的調用順序問題，我發現有時候運行的時候，顯示的是未定義數據，說明先運行的是獲取IRST的servlet，雖然我寫的是獲取所有設備的servlet的函數在前，於是我將獲取所有站點的ajax放在了獲取所有IRST的ajax里面的success函數里，完成效果如下：

在node的click時間里添加 clickLogin()函數，點擊站點，完成登錄

好，獲取了站點信息，完成了登陸之后，下面就是安放視頻插件個控制按鈕，下一篇博客會詳細說一下這個流程

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 仿海康網頁版做一個在線的實時監控網站（2）-- 視屏顯示和雲台控制做一個自動隱藏的側邊欄吧！ Android實現仿qq側邊欄效果案例：仿淘寶固定右側側邊欄的功能 jquery實現仿京東側邊欄 jQuery實際案例⑤——仿京東側邊欄（樓層）側邊欄導航網頁側邊欄導航設計優缺點 JS網站廣告實現側邊欄滾動至div頂部后固定、鼠標滾動下拉側邊欄DIV固定 jquery隱藏側邊欄和折疊側邊欄方法