index.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>首页</title>
  6. <script src="./js/jquery-1.11.2.js"></script>
  7. <script src="./js/handlebars-v4.0.11.js"></script>
  8. <script src="./js/util.js"></script>
  9. <script src="./js/echarts.js"></script>
  10. <style>
  11. *{margin:0;padding:0}
  12. a{text-decoration: none;}
  13. a:hover, a:active{text-decoration: none;}
  14. ul,li{list-style:none;}
  15. h2{font-size: 100%; font-weight: normal}
  16. img{vertical-align:top;border:none}
  17. input{outline:none}
  18. :-moz-placeholder {color: #999; opacity:1; }
  19. ::-moz-placeholder {color: #999;opacity:1;}
  20. input:-ms-input-placeholder{color: #999;opacity:1;}
  21. input::-webkit-input-placeholder{color: #999;opacity:1;}
  22. html {font-size: 12px;height:100%;font-family:"Microsoft YaHei";}
  23. .f-cb:before,.f-cb:after {content: " ";display: block;}
  24. .f-cb:after {clear: both;}
  25. .f-cb { *zoom:1; }
  26. .f-fl{float:left;}
  27. .f-fr{float:right;}
  28. .f-ttr{text-align:right;}
  29. .z-hide{display: none;}
  30. .z-show{display: block;}
  31. .blue{color:#63869e}
  32. .green{color:#91c7ae}
  33. .yellow{color:#ebdf57}
  34. .red{color:#d5605d}
  35. .red-deep{color:#990b07}
  36. .bg-wrap{width:100%;height:auto;padding-top:20px;padding-left:20px;background-color:#f5f5f5;box-sizing: border-box;}
  37. .card-bx{background:#fff;display:inline-block;float:left;margin-right:20px;margin-bottom:20px;}
  38. .card-hd{height:34px;line-height:34px;background:#1767a6;color:#fff;font-size:14px;font-weight:bold;padding-left:14px;}
  39. .card-bd{background:#fff;}
  40. .bx1{height:460px;overflow:hidden;}
  41. .bx1-l{width:50%;height:420px;display:inline-block;float:left;}
  42. .bx1-r{width:50%;padding-top:50px;display:inline-block;float:left;}
  43. .bx1-r li{height:42px;line-height:42px;}
  44. .bx1-r li span{width:80px;text-align:center;display:inline-block;color:#666666;font-size: 20px;font-weight: bold}
  45. .bx1-li-tt span{color:#000000;}
  46. .bx1-r li.bx1-li-red span{color:#d5605d;font-size: 24px;}
  47. .bx2{height:460px;overflow:hidden;}
  48. .bx2-t{height:100px;padding:0px 10px;}
  49. .bx2-wea-des{height:40px;line-height:40px;}
  50. .bx2-wea{display: inline-block;color:#5286b1;font-size:12px;text-align:center;width:13.5%;}
  51. .wea-img{width:20px;height:20px;display:inline-block;background:url('./img/wea-img.png') no-repeat;}
  52. .wea-sunny{background-position:0px 0px;}
  53. .wea-rain{background-position:-20px 0px;}
  54. .wea-thunder{background-position:-40px 0px;}
  55. .wea-cloudy{background-position:-60px 0px;}
  56. .wea-snow{background-position:-80px 0px;}
  57. .wea-wind{background-position:-100px 0px;}
  58. .wea-fog{background-position:-120px 0px;}
  59. .bx2-b{height:300px;width:100%;}
  60. .bx3{height:460px;}
  61. .bx3-bd{padding:10px 30px;height:400px;overflow-y: hidden;}
  62. .bx3-li{height:38px;line-height:38px;border-bottom:1px solid #f3f3f3;}
  63. .bx3-tt{display:inline-block;font-size:14px;color:#666666;float:left;width:80px;}
  64. .bx3-num {font-weight:bold;float: left;display:inline-block;font-size:14px;color:#666666;width:18%}
  65. .bx3-warn{display:inline-block;font-size:14px;float:right;font-weight:bold;}
  66. .bx4{height:460px;overflow:hidden;}
  67. .bx4-bd{width:100%;height:420px}
  68. .bx5{height:460px;overflow:hidden;}
  69. .bx5-bd{width:100%;height:420px}
  70. .bx6{height:460px;overflow:hidden;}
  71. .bx6-bd{width:100%;height:420px}
  72. .bx7{width:96.5%;height:330px;overflow:hidden;}
  73. .bx7-bd{width:100%;height:290px}
  74. @media screen and (max-width:1600px){
  75. .bg-wrap{min-width:1140px;}
  76. .bx1{min-width:670px;width:61%;}
  77. .bx2{min-width:380px;width:34%;}
  78. .bx3{min-width:380px;width:34%;}
  79. .bx4{min-width:670px;width:61%;}
  80. .bx5{min-width:616px;width:56%;}
  81. .bx6{min-width:429px;width:39%;}
  82. .bx7{min-width:1060px;}
  83. }
  84. @media screen and (min-width:1600px){
  85. .bg-wrap{min-width:1600px;}
  86. .bx1{min-width:710px;width:44%;}
  87. .bx2{min-width:410px;width:25%;}
  88. .bx3{min-width:410px;width:25%;}
  89. .bx4{min-width:460px;width:29%;}
  90. .bx5{min-width:655px;width:40%;}
  91. .bx6{min-width:410px;width:25%;}
  92. .bx7{min-width:1570px;}
  93. }
  94. </style>
  95. </head>
  96. <body>
  97. <div class="bg-wrap f-cb">
  98. <div class="card-bx bx1">
  99. <div class="card-hd">温湿度指数</div>
  100. <div class="card-bd">
  101. <div class="bx1-l" id="bx1gauge1"></div>
  102. <div class="bx1-r" id="bx1rightBox">
  103. <script type="text/template" id="bx1rightTemplate">
  104. <li class="bx1-li-tt">
  105. <span> 24小时</span>
  106. <span>℃</span>
  107. <span>%RH</span>
  108. <span>THI</span>
  109. </li>
  110. <li class="bx1-li-red">
  111. <span class="bx1-li-red">最高</span>
  112. <span> {{max_temp}} </span>
  113. <span> {{max_humi}} </span>
  114. <span> {{max_thi}} </span>
  115. </li>
  116. <li>
  117. <span class="f-ttr">最低</span>
  118. <span> {{min_temp}} </span>
  119. <span> {{min_humi}} </span>
  120. <span> {{min_thi}} </span>
  121. </li>
  122. <li>
  123. <span class="f-ttr">平均</span>
  124. <span> {{avg_temp}} </span>
  125. <span> {{avg_humi}} </span>
  126. <span> {{avg_thi}} </span>
  127. </li>
  128. </script>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="card-bx bx2">
  133. <div class="card-hd">
  134. 未来一周温度和最近24小时喷淋时间比较
  135. </div>
  136. <div class="card-bd">
  137. <div class="bx2-t" id="bx2Box">
  138. <script type="text/template" id="bx2Template">
  139. <p class="bx2-wea-des">数据来源新浪天气(测试数据)</p>
  140. <!-- 太阳 wea-sunny 雨天 wea-rain 打雷 wea-thunder 多云 wea-cloudy 下雪 wea-snow 风 wea-wind 雾 wea-fog -->
  141. {{#each list}}
  142. <li class="bx2-wea">
  143. <span class="wea-img {{wea}}"></span><p>{{num}}</p>
  144. </li>
  145. {{/each}}
  146. </script>
  147. </div>
  148. <div class="bx2-b" id="bx2line1"></div>
  149. </div>
  150. </div>
  151. <div class="card-bx bx3">
  152. <div class="card-hd">
  153. 喷头打开时间分析
  154. </div>
  155. <div class="card-bd">
  156. <div class="bx6-bd" id="bx6pie1">
  157. </div>
  158. </div>
  159. </div>
  160. <div class="card-bx bx4">
  161. <div class="card-hd">
  162. 当月THI分布情况(测试数据)
  163. </div>
  164. <div class="card-bd">
  165. <div class="bx4-bd" id="bx4calendar1">
  166. </div>
  167. </div>
  168. </div>
  169. <div class="card-bx bx5">
  170. <div class="card-hd">月THI变化</div>
  171. <div class="card-bd">
  172. <div class="bx5-bd" id="bx5line1">
  173. </div>
  174. </div>
  175. </div>
  176. <div class="card-bx bx6">
  177. <div class="card-hd">
  178. 各牛舍最近24小时最高THI
  179. </div>
  180. <div class="card-bd">
  181. <div class="bx3-bd" id="bx3Box">
  182. <script type="text/template" id="bx3Template">
  183. <li class="bx3-li" ">
  184. <span class="bx3-tt"> 牛舍 </span>
  185. <span class="bx3-num"> 温度 </span>
  186. <span class="bx3-num"> 湿度 </span>
  187. <span class="bx3-num"> 指数 </span>
  188. <span class="bx3-num"> 时间点</span>
  189. </li>
  190. {{#each lists}}
  191. <li class="bx3-li" ">
  192. <span class="bx3-tt"> {{no}} </span>
  193. <span class="bx3-num"> {{max_temp}} </span>
  194. <span class="bx3-num"> {{max_humi}} </span>
  195. <span class="bx3-num"> {{max_thi}} </span>
  196. <span class="bx3-num"> {{maxtime}} </span>
  197. </li>
  198. {{/each}}
  199. </script>
  200. </div>
  201. </div>
  202. </div>
  203. <div class="card-bx bx7">
  204. <div class="card-hd">最近一年THI变化(测试数据)</div>
  205. <div class="card-bd">
  206. <div class="bx7-bd" id="bx7calendar1">
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. <script type="text/javascript">
  212. /* BEGIN ----------------------------------------------- 数据 ----------------------------------------------- */
  213. //接口 - 温湿度指数
  214. var url_get_bx1gauge1_data = util.g_url + "/data/getTempHumi"
  215. var url_get_bx1right_data = util.g_url + "/data/GetTempHumi24MinMax"
  216. //接口 - 未来一周温度和THI变化
  217. var url_get_bx2line1_data = util.g_url + "/data/GetPriByHour"
  218. //接口 - 预警
  219. var url_get_bx3_data = util.g_url + "/data/GetTempHumi24MinMaxByNo"
  220. //接口 - 当月THI分布情况
  221. var url_get_bx4calendar1_data = util.g_url + "/data/GetFutureMonthTemp"
  222. //接口 - 月THI变化
  223. var url_get_bx5line1_data = util.g_url + "/data/GetTempHumi24MaxByNo"
  224. //接口 - 最近一年THI变化 - 饼图
  225. var url_get_bx6pie1_data = util.g_url + "/data/GetPriByEQ"
  226. //接口 - 最近一年THI变化 - 日历
  227. var url_get_bx7calendar1_data = util.g_url + "/data/getYearCalendar"
  228. var url_get_all_data = util.g_url + "/data/GetDataByNames"
  229. //初始化
  230. var first_road_data = [{"sqlname":"GetTempHumi","offset":0,"pagecount":0,"returntype":"map","params":[]},
  231. {"sqlname":"GetTempHumi24MinMax","offset":0,"pagecount":0,"returntype":"map","params":[]},
  232. {"sqlname":"GetTempHumi24MinMaxByNo","offset":0,"pagecount":0,"returntype":"map","params":[]},
  233. {"sqlname":"GetTempHumi30dayByNo","offset":0,"pagecount":0,"returntype":"list","params":[]},
  234. {"sqlname":"GetPriByHour","offset":0,"pagecount":0,"returntype":"list","params":[]},
  235. {"sqlname":"GetPriByEQ","offset":0,"pagecount":0,"returntype":"list","params":[]},
  236. {"sqlname":"GetFutureMonthTemp","offset":0,"pagecount":0,"returntype":"list","params":[]}
  237. ]
  238. //数据 - 温湿度指数
  239. var bx1gauge1_data = {}
  240. var bx1right_data = {
  241. list1: ['20','82','60'],
  242. list2: ['20','82','60'],
  243. list3: ['20','82','60'],
  244. list4: ['20','82','60'],
  245. }
  246. //数据 - 未来一周温度和THI变化
  247. //太阳 wea-sunny 雨天 wea-rain 打雷 wea-thunder 多云 wea-cloudy 下雪 wea-snow 风 wea-wind 雾 wea-fog
  248. var bx2_data = {
  249. list: [
  250. {wea: "wea-sunny",num: "4-12°C"},
  251. {wea: "wea-thunder",num: "4-12°C"},
  252. {wea: "wea-sunny",num: "4-12°C"},
  253. {wea: "wea-rain",num: "4-12°C"},
  254. {wea: "wea-snow",num: "4-12°C"},
  255. {wea: "wea-fog",num: "4-12°C"},
  256. {wea: "wea-cloudy",num: "4-12°C"},
  257. ]
  258. }
  259. var bx2line1_data = {
  260. monthdate:['06-27','06-28','06-29','06-30','06-31','07-01','07-02'],
  261. temperature:[35, 32, 18, 15, 22, 22, 10],
  262. humidity:[6, 7, 8, 9, 10, 22, 9, 1, 3],
  263. }
  264. //数据 - 预警
  265. var bx3_data = {
  266. }
  267. //数据 - 最近一个月THI分布情况
  268. var bx4calendar1_data ={
  269. rangeAll:['2018-10-01', '2018-10-30'],
  270. range67:[["2018-10-01", 29],["2018-10-02", 49],["2018-10-09", 44],["2018-10-10", 23],["2018-10-11", 32],["2018-10-13", 18],["2018-10-22", 33],["2018-10-23", 52],["2018-10-24", 58]],
  271. range71:[["2018-10-03", 70]],
  272. range79:[["2018-10-04", 73],["2018-10-05", 78],["2018-10-12",74],["2018-10-18", 75],["2018-10-20", 76]],
  273. range89:[["2018-10-06", 83],["2018-10-07", 88],["2018-10-08", 83],["2018-10-15", 85],["2018-10-17", 81],["2018-10-19", 88],["2018-10-21", 86]],
  274. range90:[["2018-10-14", 93],["2018-10-16", 92]]
  275. }
  276. //数据 - 月THI变化
  277. var bx5line1_data ={
  278. monthdate:['2018-01-01','2018-01-02','2018-01-03','2018-01-04','2018-01-05','2018-01-06','2018-01-07','2018-01-08','2018-01-09','2018-01-10','2018-01-11','2018-01-12','2018-01-13','2018-01-14','2018-01-15','2018-01-16','2018-01-17','2018-01-18','2018-01-19','2018-01-20','2018-01-21','2018-01-22','2018-01-23','2018-01-24','2018-01-25','2018-01-26','2018-01-27','2018-01-28','2018-01-29','2018-01-30','2018-01-31'],
  279. tempAndHum:[15, 23, 20, 15, 19, 20, 20, 15, 23, 20, 15, 19, 15, 10 ,15, 32, 20, 54, 100, 90, 20, 15, 22, 20, 15, 19, 33, 20, 19, 15, 20],
  280. temperature:[12, 13, 10, 13, 90, 23, 21 ,12, 12, 11, 13, 90, 20, 21 ,12, 13, 10, 14, 90, 20, 20 ,10, 13, 11, 13, 90, 23, 21, 19, 30, 41],
  281. humidity:[22, 82, 90, 24, 15, 30, 55 ,20, 12, 91, 34, 20, 30, 15 ,20, 18, 91, 34, 90, 30, 10 ,20, 18, 19, 24, 90, 55, 55, 10, 15, 40],
  282. hurdles:[1, 2, 3, 4, 5, 6, 6 ,6, 2, 1, 2, 4, 5, 11 ,2, 3, 4, 1, 1, 3, 4 ,5, 6, 9, 4, 9, 5, 5, 1, 1, 4],
  283. }
  284. //数据 - 最近一年THI变化 - 饼图
  285. var bx6pie1_data ={num1:30,num2:20,num3:20,num4:30,num5:30,}
  286. //数据 - 最近一年THI变化 - 日历
  287. var bx7calendar1_data = [
  288. ["2018-01-01",47],["2018-01-02",34],["2018-01-03",53],["2018-01-04",84],["2018-01-05",20],["2018-01-06",28],["2018-01-07",53],["2018-01-08",68],["2018-01-09",52],["2018-01-10",62],["2018-01-11",17],["2018-01-12",8],["2018-01-13",45],["2018-01-14",89],["2018-01-15",4],["2018-01-16",71],["2018-01-17",55],["2018-01-18",25],["2018-01-19",86],["2018-01-20",98],["2018-01-21",97],["2018-01-22",23],["2018-01-23",59],["2018-01-24",16],["2018-01-25",19],["2018-01-26",24],["2018-01-27",78],["2018-01-28",97],["2018-01-29",55],["2018-01-30",40],["2018-01-31",82],["2018-02-01",43],["2018-02-02",53],["2018-02-03",64],["2018-02-04",45],["2018-02-05",53],["2018-02-06",111],["2018-02-07",87],["2018-02-08",2],["2018-02-09",49],["2018-02-10",80],["2018-02-11",40],["2018-02-12",90],["2018-02-13",48],["2018-02-14",43],["2018-02-15",16],["2018-02-16",26],["2018-02-17",55],["2018-02-18",8],["2018-02-19",10],["2018-02-20",1],["2018-02-21",66],["2018-02-22",41],["2018-02-23",70],["2018-02-24",33],["2018-02-25",11],["2018-02-26",69],["2018-02-27",28],["2018-02-28",69],["2018-03-01",21],["2018-03-02",50],["2018-03-03",73],["2018-03-04",99],["2018-03-05",14],["2018-03-06",45],["2018-03-07",89],["2018-03-08",90],["2018-03-09",60],["2018-03-10",77],["2018-03-11",38],["2018-03-12",23],["2018-03-13",80],["2018-03-14",24],["2018-03-15",19],["2018-03-16",62],["2018-03-17",23],["2018-03-18",94],["2018-03-19",32],["2018-03-20",38],["2018-03-21",1],["2018-03-22",19],["2018-03-23",50],["2018-03-24",76],["2018-03-25",18],["2018-03-26",59],["2018-03-27",72],["2018-03-28",81],["2018-03-29",19],["2018-03-30",24],["2018-03-31",79],["2018-04-01",52],["2018-04-02",44],["2018-04-03",88],["2018-04-04",30],["2018-04-05",72],["2018-04-06",91],["2018-04-07",4],["2018-04-08",61],["2018-04-09",23],["2018-04-10",81],["2018-04-11",49],["2018-04-12",30],["2018-04-13",45],["2018-04-14",46],["2018-04-15",38],["2018-04-16",36],["2018-04-17",46],["2018-04-18",36],["2018-04-19",95],["2018-04-20",73],["2018-04-21",25],["2018-04-22",48],["2018-04-23",11],["2018-04-24",14],["2018-04-25",15],["2018-04-26",61],["2018-04-27",2],["2018-04-28",69],["2018-04-29",37],["2018-04-30",89],["2018-05-01",91],["2018-05-02",15],["2018-05-03",12],["2018-05-04",65],["2018-05-05",49],["2018-05-06",20],["2018-05-07",78],["2018-05-08",6],["2018-05-09",63],["2018-05-10",63],["2018-05-11",6],["2018-05-12",98],["2018-05-13",10],["2018-05-14",13],["2018-05-15",26],["2018-05-16",47],["2018-05-17",30],["2018-05-18",97],["2018-05-19",68],["2018-05-20",40],["2018-05-21",80],["2018-05-22",70],["2018-05-23",31],["2018-05-24",97],["2018-05-25",29],["2018-05-26",5],["2018-05-27",99],["2018-05-28",55],["2018-05-29",53],["2018-05-30",19],["2018-05-31",99],["2018-06-01",64],["2018-06-02",23],["2018-06-03",12],["2018-06-04",57],["2018-06-05",57],["2018-06-06",29],["2018-06-07",65],["2018-06-08",77],["2018-06-09",32],["2018-06-10",90],["2018-06-11",73],["2018-06-12",26],["2018-06-13",20],["2018-06-14",26],["2018-06-15",85],["2018-06-16",94],["2018-06-17",42],["2018-06-18",14],["2018-06-19",86],["2018-06-20",28],["2018-06-21",45],["2018-06-22",42],["2018-06-23",6],["2018-06-24",56],["2018-06-25",85],["2018-06-26",40],["2018-06-27",38],["2018-06-28",60],["2018-06-29",46],["2018-06-30",47],["2018-07-01",40],["2018-07-02",55],["2018-07-03",5],["2018-07-04",33],["2018-07-05",42],["2018-07-06",41],["2018-07-07",51],["2018-07-08",15],["2018-07-09",64],["2018-07-10",65],["2018-07-11",68],["2018-07-12",48],["2018-07-13",19],["2018-07-14",50],["2018-07-15",68],["2018-07-16",61],["2018-07-17",96],["2018-07-18",1],["2018-07-19",9],["2018-07-20",55],["2018-07-21",97],["2018-07-22",34],["2018-07-23",92],["2018-07-24",51],["2018-07-25",5],["2018-07-26",29],["2018-07-27",99],["2018-07-28",90],["2018-07-29",59],["2018-07-30",39],["2018-07-31",53],["2018-08-01",24],["2018-08-02",0],["2018-08-03",97],["2018-08-04",11],["2018-08-05",6],["2018-08-06",9],["2018-08-07",42],["2018-08-08",57],["2018-08-09",27],["2018-08-10",46],["2018-08-11",97],["2018-08-12",57],["2018-08-13",73],["2018-08-14",96],["2018-08-15",58],["2018-08-16",18],["2018-08-17",60],["2018-08-18",55],["2018-08-19",62],["2018-08-20",30],["2018-08-21",73],["2018-08-22",7],["2018-08-23",68],["2018-08-24",71],["2018-08-25",3],["2018-08-26",99],["2018-08-27",4],["2018-08-28",56],["2018-08-29",16],["2018-08-30",22],["2018-08-31",19],["2018-09-01",76],["2018-09-02",81],["2018-09-03",77],["2018-09-04",86],["2018-09-05",15],["2018-09-06",45],["2018-09-07",56],["2018-09-08",99],["2018-09-09",94],["2018-09-10",46],["2018-09-11",79],["2018-09-12",78],["2018-09-13",76],["2018-09-14",10],["2018-09-15",8],["2018-09-16",94],["2018-09-17",16],["2018-09-18",71],["2018-09-19",79],["2018-09-20",77],["2018-09-21",24],["2018-09-22",56],["2018-09-23",61],["2018-09-24",9],["2018-09-25",66],["2018-09-26",44],["2018-09-27",1],["2018-09-28",34],["2018-09-29",20],["2018-09-30",48],["2018-10-01",45],["2018-10-02",17],["2018-10-03",53],["2018-10-04",2],["2018-10-05",52],["2018-10-06",32],["2018-10-07",27],["2018-10-08",27],["2018-10-09",83],["2018-10-10",62],["2018-10-11",30],["2018-10-12",93],["2018-10-13",92],["2018-10-14",51],["2018-10-15",40],["2018-10-16",21],["2018-10-17",74],["2018-10-18",4],["2018-10-19",30],["2018-10-20",29],["2018-10-21",94],["2018-10-22",1],["2018-10-23",15],["2018-10-24",32],["2018-10-25",6],["2018-10-26",17],["2018-10-27",36],["2018-10-28",42],["2018-10-29",55],["2018-10-30",45],["2018-10-31",12],["2018-11-01",33],["2018-11-02",77],["2018-11-03",40],["2018-11-04",42],["2018-11-05",8],["2018-11-06",72],["2018-11-07",14],["2018-11-08",9],["2018-11-09",2],["2018-11-10",49],["2018-11-11",43],["2018-11-12",81],["2018-11-13",11],["2018-11-14",38],["2018-11-15",43],["2018-11-16",56],["2018-11-17",51],["2018-11-18",37],["2018-11-19",14],["2018-11-20",6],["2018-11-21",77],["2018-11-22",88],["2018-11-23",78],["2018-11-24",78],["2018-11-25",71],["2018-11-26",26],["2018-11-27",80],["2018-11-28",19],["2018-11-29",16],["2018-11-30",76],["2018-12-01",93],["2018-12-02",55],["2018-12-03",47],["2018-12-04",4],["2018-12-05",38],["2018-12-06",13],["2018-12-07",19],["2018-12-08",7],["2018-12-09",32],["2018-12-10",17],["2018-12-11",5],["2018-12-12",78],["2018-12-13",6],["2018-12-14",7],["2018-12-15",11],["2018-12-16",52],["2018-12-17",30],["2018-12-18",42],["2018-12-19",70],["2018-12-20",43],["2018-12-21",20],["2018-12-22",98],["2018-12-23",32],["2018-12-24",31],["2018-12-25",8],["2018-12-26",42],["2018-12-27",36],["2018-12-28",29],["2018-12-29",82],["2018-12-30",78],["2018-12-31",99]
  289. ]
  290. // var bx1gauge1_data ={}
  291. // var bx1right_data ={}
  292. // var bx2_data ={}
  293. // var bx3_data ={}
  294. // var dialog_data ={}
  295. // var bx4calendar1_data ={}
  296. // var bx5line1_data ={}
  297. // var bx6pie1_data ={}
  298. // var bx7calendar1_data = []
  299. //图表实例
  300. var bx1gauge1 = null
  301. var bx2line1 = null
  302. var dialog_chart = null
  303. var bx4calendar1 = null
  304. var bx5line1 = null
  305. var bx6pie1 = null
  306. var bx7calendar1 = null
  307. var rowid = null
  308. /* END ----------------------------------------------- 数据 ----------------------------------------------- */
  309. /* BEGIN ---------------------------------------------- 事件 & 渲染 ----------------------------------------------- */
  310. //事件 - 温湿度指数 - 仪表盘
  311. function road_bx1gauge1_temp(bx1gauge1_data){
  312. bx1gauge1 = echarts.init(document.getElementById('bx1gauge1'));
  313. var option = {
  314. series: [
  315. {
  316. name: '温湿度指数',
  317. type: 'gauge',
  318. axisLine: {
  319. show:true,
  320. lineStyle: {
  321. width: 20,
  322. color:[[0.67, '#63869e'], [0.71, '#91c7ae'], [0.79, '#ebdf57'],[0.89, '#d5605d'],[1, '#990b07']]
  323. }
  324. },
  325. detail: {
  326. formatter: [
  327. '{c| }',
  328. '{a|'+ bx1gauge1_data.thi +'}',
  329. '{b|'+ bx1gauge1_data.title + ' 温度°C:' +bx1gauge1_data.temp+ ' 湿度%RH:'+bx1gauge1_data.humi+'}'
  330. ].join('\n'),
  331. rich: {
  332. a: {
  333. fontSize: 26,
  334. fontWeight:'bold',
  335. lineHeight: 70,
  336. },
  337. b: { fontSize: 20},
  338. c: { lineHeight: 100}
  339. }
  340. },
  341. data: [{value: bx1gauge1_data.thi , name: '温湿度指数'}]
  342. }
  343. ]
  344. };
  345. bx1gauge1.setOption(option);
  346. }
  347. //事件 - 温湿度指数 - 表格
  348. function road_bx1right_temp(bx1right_data){
  349. var template = Handlebars.compile($("#bx1rightTemplate").html());
  350. var context = template(bx1right_data);
  351. $('#bx1rightBox').html(context);
  352. }
  353. //事件 - 未来一周温度和THI变化 - 表格
  354. function road_bx2_temp(bx2_data){
  355. var template = Handlebars.compile($("#bx2Template").html());
  356. var context = template(bx2_data);
  357. $('#bx2Box').html(context);
  358. }
  359. //事件 - 未来一周温度和THI变化 - 折线
  360. function road_bx2line1_temp(bx2line1_data){
  361. bx2line1 = echarts.init(document.getElementById('bx2line1'));
  362. var option = {
  363. xAxis: [
  364. {
  365. type: 'category',
  366. show: true,
  367. data: bx2line1_data.hours
  368. }
  369. ],
  370. yAxis: [
  371. {
  372. type: 'value',
  373. show: false
  374. }
  375. ],
  376. series: [
  377. {
  378. type: 'bar',
  379. itemStyle: {
  380. normal: {
  381. color: function(params) {
  382. // build a color map as your need.
  383. var colorList = [
  384. '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
  385. '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
  386. '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
  387. ];
  388. return colorList[params.dataIndex]
  389. },
  390. label: {
  391. show: true,
  392. position: 'top',
  393. formatter: '{c}'
  394. }
  395. }
  396. },
  397. data: bx2line1_data.openmins
  398. }
  399. ]
  400. };
  401. bx2line1.setOption(option);
  402. }
  403. //事件 - 预警
  404. function road_bx3_temp(bx3_data){
  405. var template = Handlebars.compile($("#bx3Template").html());
  406. var context = template(bx3_data);
  407. $('#bx3Box').html(context);
  408. }
  409. //事件 - 最近一个月THI分布情况
  410. function road_bx4calendar1_temp(bx4calendar1_data){
  411. bx4calendar1 = echarts.init(document.getElementById('bx4calendar1'));
  412. var option = {
  413. tooltip : {
  414. trigger: 'item'
  415. },
  416. legend: {
  417. top: '30',
  418. left: '100',
  419. data:['THI0-67', 'THI67-71','THI72-79','THI80-89','THI90以上']
  420. },
  421. calendar: [{
  422. top: 120,
  423. orient: 'vertical',
  424. left: 'center',
  425. range: bx4calendar1_data.rangeAll,
  426. cellSize: 50,
  427. dayLabel: {
  428. nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  429. },
  430. monthLabel: {
  431. nameMap: 'cn',
  432. },
  433. }],
  434. series : [
  435. {
  436. name: 'THI0-67',
  437. type: 'effectScatter',
  438. coordinateSystem: 'calendar',
  439. data: bx4calendar1_data.range67,
  440. symbolSize: function (val) {
  441. return val[1] / 4;
  442. },
  443. itemStyle: {normal: {color: '#63869e'}
  444. }
  445. },
  446. {
  447. name: 'THI67-71',
  448. type: 'effectScatter',
  449. coordinateSystem: 'calendar',
  450. data: bx4calendar1_data.range71,
  451. symbolSize: function (val) {
  452. return val[1] / 4;
  453. },
  454. itemStyle: {normal: {
  455. color: '#91c7ae'
  456. }
  457. }
  458. },
  459. {
  460. name: 'THI72-79',
  461. type: 'effectScatter',
  462. coordinateSystem: 'calendar',
  463. data: bx4calendar1_data.range79,
  464. symbolSize: function (val) {
  465. return val[1] / 4;
  466. },
  467. itemStyle: {
  468. normal: {
  469. color: '#ebdf57'
  470. }
  471. }
  472. },
  473. {
  474. name: 'THI80-89',
  475. type: 'effectScatter',
  476. coordinateSystem: 'calendar',
  477. data: bx4calendar1_data.range89,
  478. symbolSize: function (val) {
  479. return val[1] / 4;
  480. },
  481. itemStyle: {
  482. normal: {
  483. color: '#d5605d'
  484. }
  485. }
  486. },
  487. {
  488. name: 'THI90以上',
  489. type: 'effectScatter',
  490. coordinateSystem: 'calendar',
  491. data: bx4calendar1_data.range90,
  492. symbolSize: function (val) {
  493. return val[1] / 4;
  494. },
  495. itemStyle: {
  496. normal: {
  497. color: '#990b07'
  498. }
  499. }
  500. },
  501. ]
  502. };
  503. bx4calendar1.setOption(option);
  504. }
  505. //事件 - 月THI变化
  506. function road_bx5line1_temp(bx5line1_data){
  507. bx5line1 = echarts.init(document.getElementById('bx5line1'));
  508. var option = {
  509. tooltip: {
  510. trigger: 'axis'
  511. },
  512. dataZoom: [
  513. {start: 0},
  514. {type: 'inside'}
  515. ],
  516. legend: {
  517. data:['温湿度指数','温度','湿度']
  518. },
  519. color:['#63869e','#fcc267','#1ea868'],
  520. xAxis: {
  521. type: 'category',
  522. boundaryGap: false,
  523. data: bx5line1_data.receivetime
  524. },
  525. yAxis: {
  526. type: 'value'
  527. },
  528. visualMap: {
  529. type: 'piecewise',
  530. top:'20px',
  531. right:'10px',
  532. seriesIndex:0,
  533. pieces: [
  534. {gte: 0,lte: 67,color: '#63869e'},
  535. {gte: 67,lte: 71,color: '#91c7ae'},
  536. {gte: 72,lte: 79,color: '#ebdf57'},
  537. {gte: 80,lte: 89,color: '#d5605d'},
  538. {gte: 90,color: '#d5605d'}
  539. ],
  540. outOfRange: {color: '#999'}
  541. },
  542. series: [
  543. {
  544. name:'温湿度指数',
  545. type:'line',
  546. smooth:true,
  547. data:bx5line1_data.thi
  548. },
  549. {
  550. name:'温度',
  551. type:'line',
  552. lineStyle:{'color':"#fcc267" },
  553. smooth:true,
  554. data:bx5line1_data.temp
  555. },
  556. {
  557. name:'湿度',
  558. type:'line',
  559. lineStyle:{'color':"#1ea868",'type':'dotted'},
  560. smooth:true,
  561. data:bx5line1_data.humi
  562. }
  563. ]
  564. };
  565. bx5line1.setOption(option);
  566. }
  567. //事件 - 最近一年THI变化 - 饼图
  568. function road_bx6pie1_temp(bx6pie1_data){
  569. bx6pie1 = echarts.init(document.getElementById('bx6pie1'));
  570. var option = {
  571. tooltip: {
  572. trigger: 'axis'
  573. },
  574. xAxis: {
  575. data: bx6pie1_data.eqcode,
  576. axisLabel: {
  577. inside: true,
  578. textStyle: {
  579. color: '#fff'
  580. }
  581. },
  582. axisTick: {
  583. show: false
  584. },
  585. axisLine: {
  586. show: false
  587. },
  588. z: 10
  589. },
  590. yAxis: {
  591. axisLine: {
  592. show: false
  593. },
  594. axisTick: {
  595. show: false
  596. },
  597. axisLabel: {
  598. textStyle: {
  599. color: '#999'
  600. }
  601. }
  602. },
  603. dataZoom: [
  604. {
  605. type: 'inside'
  606. }
  607. ],
  608. series: [
  609. {
  610. type: 'bar',
  611. data: bx6pie1_data.openmins
  612. }
  613. ]
  614. };
  615. bx6pie1.setOption(option);
  616. }
  617. //事件 - 最近一年THI变化 - 日历
  618. function road_bx7calendar1_temp(bx7calendar1_data){
  619. bx7calendar1 = echarts.init(document.getElementById('bx7calendar1'));
  620. var option = {
  621. visualMap: {
  622. top: '20px',
  623. left: '30%',
  624. type: 'piecewise',
  625. orient: 'horizontal',
  626. pieces: [
  627. {gte: 0,lte: 67,color: '#63869e'},
  628. {gte: 67,lte: 71,color: '#91c7ae'},
  629. {gte: 72,lte: 79,color: '#ebdf57'},
  630. {gte: 80,lte: 89,color: '#d5605d'},
  631. {gte: 90,color: '#d5605d'}
  632. ]
  633. },
  634. calendar: {
  635. top: 120,
  636. left: 30,
  637. right: 30,
  638. cellSize: ['auto', 13],
  639. range: ['2018-01-01', '2018-12-31'],
  640. itemStyle: {
  641. normal: {borderWidth: 0.5}
  642. },
  643. yearLabel: {show: false}
  644. },
  645. series: {
  646. type: 'heatmap',
  647. coordinateSystem: 'calendar',
  648. data: bx7calendar1_data
  649. }
  650. };
  651. bx7calendar1.setOption(option);
  652. }
  653. window.onresize = function(){
  654. bx1gauge1.resize();
  655. bx2line1.resize();
  656. bx4calendar1.resize();
  657. bx5line1.resize();
  658. bx6pie1.resize();
  659. bx7calendar1.resize();
  660. }
  661. //AJAX事件 - 温湿度指数
  662. function get_bx1gauge1_data(e){
  663. // console.log('温湿度指数gauge',e)
  664. bx1gauge1_data = e.lists[0]
  665. road_bx1gauge1_temp(bx1gauge1_data)
  666. }
  667. //AJAX事件 - 温湿度指数
  668. function get_bx1right_data(e){
  669. // console.log('温湿度指数right',e)
  670. bx1right_data = e.lists[0]
  671. road_bx1right_temp(bx1right_data)
  672. }
  673. //AJAX事件 - 未来一周温度和THI变化
  674. function get_bx2line1_data(e){
  675. // console.log('未来一周温度和THI变化',e)
  676. // bx2_data = e.lists
  677. bx2line1_data = e.lists
  678. // road_bx2_temp(bx2_data)
  679. road_bx2line1_temp(bx2line1_data)
  680. }
  681. //AJAX事件 - 预警
  682. function get_bx3_data(e){
  683. // console.log('预警',e)
  684. bx3_data = e
  685. road_bx3_temp(bx3_data)
  686. }
  687. //AJAX事件 - 最近一个月THI分布情况
  688. function get_bx4calendar1_data(e){
  689. // console.log('最近一个月THI分布情况',e)
  690. bx4calendar1_data = e.data.lists
  691. road_bx4calendar1_temp(bx4calendar1_data)
  692. }
  693. //AJAX事件 - 月THI变化
  694. function get_bx5line1_data(e){
  695. // console.log('月THI变化',e)
  696. bx5line1_data = e.lists
  697. road_bx5line1_temp(bx5line1_data)
  698. }
  699. //AJAX事件 - 最近一年THI变化 - 饼图
  700. function get_bx6pie1_data(e){
  701. // console.log('最近一年THI变化 - 饼图',e)
  702. bx6pie1_data = e.lists
  703. road_bx6pie1_temp(bx6pie1_data)
  704. }
  705. //AJAX事件 - 最近一年THI变化 - 日历
  706. function get_bx7calendar1_data(e){
  707. // console.log('最近一年THI变化 - 日历',e)
  708. bx7calendar1_data = e.data_list
  709. road_bx7calendar1_temp(bx7calendar1_data)
  710. }
  711. //AJAX事件 - 最近一年THI变化 - 日历
  712. function get_All_data(e){
  713. All_data = e.data
  714. var url_get_bx1gauge1_data = util.g_url + "/data/getTempHumi"
  715. var url_get_bx1right_data = util.g_url + "/data/GetTempHumi24MinMax"
  716. //接口 - 未来一周温度和THI变化
  717. var url_get_bx2line1_data = util.g_url + "/data/GetPriByHour"
  718. //接口 - 预警
  719. var url_get_bx3_data = util.g_url + "/data/GetTempHumi24MinMaxByNo"
  720. //接口 - 当月THI分布情况
  721. var url_get_bx4calendar1_data = util.g_url + "/data/GetFutureMonthTemp"
  722. //接口 - 月THI变化
  723. var url_get_bx5line1_data = util.g_url + "/data/GetTempHumi24MaxByNo"
  724. //接口 - 最近一年THI变化 - 饼图
  725. var url_get_bx6pie1_data = util.g_url + "/data/GetPriByEQ"
  726. //接口 - 最近一年THI变化 - 日历
  727. var url_get_bx7calendar1_data = util.g_url + "/data/getYearCalendar"
  728. var url_get_all_data = util.g_url + "/data/GetDataByNames"
  729. get_bx1gauge1_data(All_data.GetTempHumi)
  730. get_bx1right_data(All_data.GetTempHumi24MinMax)
  731. get_bx5line1_data(All_data.GetTempHumi30dayByNo)
  732. get_bx6pie1_data(All_data.GetPriByEQ)
  733. get_bx2line1_data(All_data.GetPriByHour)
  734. get_bx3_data(All_data.GetTempHumi24MinMaxByNo)
  735. // road_bx7calendar1_temp(bx7calendar1_data)
  736. }
  737. /* END ---------------------------------------------- 事件 & 渲染 ----------------------------------------------- */
  738. /* BEGIN ----------------------------------------------- 首屏启动 ----------------------------------------------- */
  739. //加载 - 温湿度指数
  740. // util.ajax_arr(url_get_bx1gauge1_data, first_road_data, 'GET', get_bx1gauge1_data)
  741. // road_bx1gauge1_temp(bx1gauge1_data)
  742. // road_bx1right_temp(bx1right_data)
  743. // util.ajax_arr(url_get_bx1right_data, first_road_data, 'GET', get_bx1right_data)
  744. // //加载 - 未来一周温度和THI变化
  745. // util.ajax_arr(url_get_bx2line1_data, first_road_data, 'GET', get_bx2line1_data)
  746. // road_bx2line1_temp(bx2line1_data)
  747. road_bx2_temp(bx2_data)
  748. // //加载 - 预警
  749. // util.ajax_arr(url_get_bx3_data, first_road_data, 'GET', get_bx3_data)
  750. // road_bx3_temp(url_get_bx4calendar1_databx3_data)
  751. // //加载 - 最近一个月THI分布情况
  752. // util.ajax_arr(url_get_bx4calendar1_data, first_road_data, 'GET', get_bx4calendar1_data)
  753. road_bx4calendar1_temp(bx4calendar1_data)
  754. // //加载 - 月THI变化
  755. // util.ajax_arr(url_get_bx5line1_data, first_road_data, 'GET', get_bx5line1_data)
  756. // road_bx5line1_temp(bx5line1_data)
  757. // //加载 - 最近一年THI变化 - 饼图
  758. // util.ajax_arr(url_get_bx6pie1_data, first_road_data, 'GET', get_bx6pie1_data)
  759. // road_bx6pie1_temp(bx6pie1_data)
  760. // //加载 - 最近一年THI变化 - 日历
  761. // util.ajax_arr(url_get_bx7calendar1_data, first_road_data, 'POST', get_bx7calendar1_data)
  762. road_bx7calendar1_temp(bx7calendar1_data)
  763. util.ajax_arr(url_get_all_data, first_road_data, 'POST', get_All_data)
  764. /* END ----------------------------------------------- 首屏启动 ----------------------------------------------- */
  765. </script>
  766. </body>
  767. </html>