123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>首页</title>
- <script src="./js/jquery-1.11.2.js"></script>
- <script src="./js/handlebars-v4.0.11.js"></script>
- <script src="./js/util.js"></script>
- <script src="./js/echarts.js"></script>
- <style>
- *{margin:0;padding:0}
- a{text-decoration: none;}
- a:hover, a:active{text-decoration: none;}
- ul,li{list-style:none;}
- h2{font-size: 100%; font-weight: normal}
- img{vertical-align:top;border:none}
- input{outline:none}
- :-moz-placeholder {color: #999; opacity:1; }
- ::-moz-placeholder {color: #999;opacity:1;}
- input:-ms-input-placeholder{color: #999;opacity:1;}
- input::-webkit-input-placeholder{color: #999;opacity:1;}
- html {font-size: 12px;height:100%;font-family:"Microsoft YaHei";}
- .f-cb:before,.f-cb:after {content: " ";display: block;}
- .f-cb:after {clear: both;}
- .f-cb { *zoom:1; }
- .f-fl{float:left;}
- .f-fr{float:right;}
- .f-ttr{text-align:right;}
- .z-hide{display: none;}
- .z-show{display: block;}
- .blue{color:#63869e}
- .green{color:#91c7ae}
- .yellow{color:#ebdf57}
- .red{color:#d5605d}
- .red-deep{color:#990b07}
- .bg-wrap{width:100%;height:auto;padding-top:20px;padding-left:20px;background-color:#f5f5f5;box-sizing: border-box;}
- .card-bx{background:#fff;display:inline-block;float:left;margin-right:20px;margin-bottom:20px;}
- .card-hd{height:34px;line-height:34px;background:#1767a6;color:#fff;font-size:14px;font-weight:bold;padding-left:14px;}
- .card-bd{background:#fff;}
- .bx1{height:460px;overflow:hidden;}
- .bx1-l{width:50%;height:420px;display:inline-block;float:left;}
- .bx1-r{width:50%;padding-top:50px;display:inline-block;float:left;}
- .bx1-r li{height:42px;line-height:42px;}
- .bx1-r li span{width:80px;text-align:center;display:inline-block;color:#666666;font-size: 20px;font-weight: bold}
- .bx1-li-tt span{color:#000000;}
- .bx1-r li.bx1-li-red span{color:#d5605d;font-size: 24px;}
- .bx2{height:460px;overflow:hidden;}
- .bx2-t{height:100px;padding:0px 10px;}
- .bx2-wea-des{height:40px;line-height:40px;}
- .bx2-wea{display: inline-block;color:#5286b1;font-size:12px;text-align:center;width:13.5%;}
- .wea-img{width:20px;height:20px;display:inline-block;background:url('./img/wea-img.png') no-repeat;}
- .wea-sunny{background-position:0px 0px;}
- .wea-rain{background-position:-20px 0px;}
- .wea-thunder{background-position:-40px 0px;}
- .wea-cloudy{background-position:-60px 0px;}
- .wea-snow{background-position:-80px 0px;}
- .wea-wind{background-position:-100px 0px;}
- .wea-fog{background-position:-120px 0px;}
- .bx2-b{height:300px;width:100%;}
- .bx3{height:460px;}
- .bx3-bd{padding:10px 30px;height:400px;overflow-y: hidden;}
- .bx3-li{height:38px;line-height:38px;border-bottom:1px solid #f3f3f3;}
- .bx3-tt{display:inline-block;font-size:14px;color:#666666;float:left;width:80px;}
- .bx3-num {font-weight:bold;float: left;display:inline-block;font-size:14px;color:#666666;width:18%}
- .bx3-warn{display:inline-block;font-size:14px;float:right;font-weight:bold;}
- .bx4{height:460px;overflow:hidden;}
- .bx4-bd{width:100%;height:420px}
- .bx5{height:460px;overflow:hidden;}
- .bx5-bd{width:100%;height:420px}
- .bx6{height:460px;overflow:hidden;}
- .bx6-bd{width:100%;height:420px}
- .bx7{width:96.5%;height:330px;overflow:hidden;}
- .bx7-bd{width:100%;height:290px}
- @media screen and (max-width:1600px){
- .bg-wrap{min-width:1140px;}
- .bx1{min-width:670px;width:61%;}
- .bx2{min-width:380px;width:34%;}
- .bx3{min-width:380px;width:34%;}
- .bx4{min-width:670px;width:61%;}
- .bx5{min-width:616px;width:56%;}
- .bx6{min-width:429px;width:39%;}
- .bx7{min-width:1060px;}
- }
- @media screen and (min-width:1600px){
- .bg-wrap{min-width:1600px;}
- .bx1{min-width:710px;width:44%;}
- .bx2{min-width:410px;width:25%;}
- .bx3{min-width:410px;width:25%;}
- .bx4{min-width:460px;width:29%;}
- .bx5{min-width:655px;width:40%;}
- .bx6{min-width:410px;width:25%;}
- .bx7{min-width:1570px;}
- }
- </style>
- </head>
- <body>
- <div class="bg-wrap f-cb">
- <div class="card-bx bx1">
- <div class="card-hd">温湿度指数</div>
- <div class="card-bd">
- <div class="bx1-l" id="bx1gauge1"></div>
- <div class="bx1-r" id="bx1rightBox">
- <script type="text/template" id="bx1rightTemplate">
- <li class="bx1-li-tt">
- <span> 24小时</span>
- <span>℃</span>
- <span>%RH</span>
- <span>THI</span>
- </li>
- <li class="bx1-li-red">
- <span class="bx1-li-red">最高</span>
- <span> {{max_temp}} </span>
- <span> {{max_humi}} </span>
- <span> {{max_thi}} </span>
- </li>
- <li>
- <span class="f-ttr">最低</span>
- <span> {{min_temp}} </span>
- <span> {{min_humi}} </span>
- <span> {{min_thi}} </span>
- </li>
- <li>
- <span class="f-ttr">平均</span>
- <span> {{avg_temp}} </span>
- <span> {{avg_humi}} </span>
- <span> {{avg_thi}} </span>
- </li>
- </script>
- </div>
- </div>
- </div>
- <div class="card-bx bx2">
- <div class="card-hd">
- 未来一周温度和最近24小时喷淋时间比较
- </div>
- <div class="card-bd">
- <div class="bx2-t" id="bx2Box">
- <script type="text/template" id="bx2Template">
- <p class="bx2-wea-des">数据来源新浪天气(测试数据)</p>
- <!-- 太阳 wea-sunny 雨天 wea-rain 打雷 wea-thunder 多云 wea-cloudy 下雪 wea-snow 风 wea-wind 雾 wea-fog -->
- {{#each list}}
- <li class="bx2-wea">
- <span class="wea-img {{wea}}"></span><p>{{num}}</p>
- </li>
- {{/each}}
- </script>
- </div>
- <div class="bx2-b" id="bx2line1"></div>
- </div>
- </div>
- <div class="card-bx bx3">
- <div class="card-hd">
- 喷头打开时间分析
- </div>
- <div class="card-bd">
- <div class="bx6-bd" id="bx6pie1">
- </div>
- </div>
-
- </div>
- <div class="card-bx bx4">
- <div class="card-hd">
- 当月THI分布情况(测试数据)
- </div>
- <div class="card-bd">
- <div class="bx4-bd" id="bx4calendar1">
- </div>
- </div>
- </div>
- <div class="card-bx bx5">
- <div class="card-hd">月THI变化</div>
- <div class="card-bd">
- <div class="bx5-bd" id="bx5line1">
- </div>
- </div>
- </div>
- <div class="card-bx bx6">
- <div class="card-hd">
- 各牛舍最近24小时最高THI
- </div>
- <div class="card-bd">
- <div class="bx3-bd" id="bx3Box">
-
- <script type="text/template" id="bx3Template">
- <li class="bx3-li" ">
- <span class="bx3-tt"> 牛舍 </span>
- <span class="bx3-num"> 温度 </span>
- <span class="bx3-num"> 湿度 </span>
- <span class="bx3-num"> 指数 </span>
- <span class="bx3-num"> 时间点</span>
- </li>
- {{#each lists}}
- <li class="bx3-li" ">
- <span class="bx3-tt"> {{no}} </span>
- <span class="bx3-num"> {{max_temp}} </span>
- <span class="bx3-num"> {{max_humi}} </span>
- <span class="bx3-num"> {{max_thi}} </span>
- <span class="bx3-num"> {{maxtime}} </span>
- </li>
- {{/each}}
- </script>
- </div>
- </div>
- </div>
- <div class="card-bx bx7">
- <div class="card-hd">最近一年THI变化(测试数据)</div>
- <div class="card-bd">
- <div class="bx7-bd" id="bx7calendar1">
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- /* BEGIN ----------------------------------------------- 数据 ----------------------------------------------- */
- //接口 - 温湿度指数
- var url_get_bx1gauge1_data = util.g_url + "/data/getTempHumi"
- var url_get_bx1right_data = util.g_url + "/data/GetTempHumi24MinMax"
- //接口 - 未来一周温度和THI变化
- var url_get_bx2line1_data = util.g_url + "/data/GetPriByHour"
- //接口 - 预警
- var url_get_bx3_data = util.g_url + "/data/GetTempHumi24MinMaxByNo"
- //接口 - 当月THI分布情况
- var url_get_bx4calendar1_data = util.g_url + "/data/GetFutureMonthTemp"
- //接口 - 月THI变化
- var url_get_bx5line1_data = util.g_url + "/data/GetTempHumi24MaxByNo"
- //接口 - 最近一年THI变化 - 饼图
- var url_get_bx6pie1_data = util.g_url + "/data/GetPriByEQ"
- //接口 - 最近一年THI变化 - 日历
- var url_get_bx7calendar1_data = util.g_url + "/data/getYearCalendar"
-
- var url_get_all_data = util.g_url + "/data/GetDataByNames"
- //初始化
- var first_road_data = [{"sqlname":"GetTempHumi","offset":0,"pagecount":0,"returntype":"map","params":[]},
- {"sqlname":"GetTempHumi24MinMax","offset":0,"pagecount":0,"returntype":"map","params":[]},
- {"sqlname":"GetTempHumi24MinMaxByNo","offset":0,"pagecount":0,"returntype":"map","params":[]},
- {"sqlname":"GetTempHumi30dayByNo","offset":0,"pagecount":0,"returntype":"list","params":[]},
- {"sqlname":"GetPriByHour","offset":0,"pagecount":0,"returntype":"list","params":[]},
- {"sqlname":"GetPriByEQ","offset":0,"pagecount":0,"returntype":"list","params":[]},
- {"sqlname":"GetFutureMonthTemp","offset":0,"pagecount":0,"returntype":"list","params":[]}
- ]
- //数据 - 温湿度指数
- var bx1gauge1_data = {}
- var bx1right_data = {
- list1: ['20','82','60'],
- list2: ['20','82','60'],
- list3: ['20','82','60'],
- list4: ['20','82','60'],
- }
- //数据 - 未来一周温度和THI变化
- //太阳 wea-sunny 雨天 wea-rain 打雷 wea-thunder 多云 wea-cloudy 下雪 wea-snow 风 wea-wind 雾 wea-fog
- var bx2_data = {
- list: [
- {wea: "wea-sunny",num: "4-12°C"},
- {wea: "wea-thunder",num: "4-12°C"},
- {wea: "wea-sunny",num: "4-12°C"},
- {wea: "wea-rain",num: "4-12°C"},
- {wea: "wea-snow",num: "4-12°C"},
- {wea: "wea-fog",num: "4-12°C"},
- {wea: "wea-cloudy",num: "4-12°C"},
- ]
- }
- var bx2line1_data = {
- monthdate:['06-27','06-28','06-29','06-30','06-31','07-01','07-02'],
- temperature:[35, 32, 18, 15, 22, 22, 10],
- humidity:[6, 7, 8, 9, 10, 22, 9, 1, 3],
- }
- //数据 - 预警
- var bx3_data = {
- }
-
- //数据 - 最近一个月THI分布情况
- var bx4calendar1_data ={
- rangeAll:['2018-10-01', '2018-10-30'],
- 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]],
- range71:[["2018-10-03", 70]],
- range79:[["2018-10-04", 73],["2018-10-05", 78],["2018-10-12",74],["2018-10-18", 75],["2018-10-20", 76]],
- 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]],
- range90:[["2018-10-14", 93],["2018-10-16", 92]]
- }
- //数据 - 月THI变化
- var bx5line1_data ={
- 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'],
- 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],
- 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],
- 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],
- 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],
- }
- //数据 - 最近一年THI变化 - 饼图
- var bx6pie1_data ={num1:30,num2:20,num3:20,num4:30,num5:30,}
- //数据 - 最近一年THI变化 - 日历
- var bx7calendar1_data = [
- ["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]
- ]
- // var bx1gauge1_data ={}
- // var bx1right_data ={}
- // var bx2_data ={}
- // var bx3_data ={}
- // var dialog_data ={}
- // var bx4calendar1_data ={}
- // var bx5line1_data ={}
- // var bx6pie1_data ={}
- // var bx7calendar1_data = []
-
- //图表实例
- var bx1gauge1 = null
- var bx2line1 = null
- var dialog_chart = null
- var bx4calendar1 = null
- var bx5line1 = null
- var bx6pie1 = null
- var bx7calendar1 = null
-
- var rowid = null
- /* END ----------------------------------------------- 数据 ----------------------------------------------- */
- /* BEGIN ---------------------------------------------- 事件 & 渲染 ----------------------------------------------- */
- //事件 - 温湿度指数 - 仪表盘
- function road_bx1gauge1_temp(bx1gauge1_data){
- bx1gauge1 = echarts.init(document.getElementById('bx1gauge1'));
- var option = {
- series: [
- {
- name: '温湿度指数',
- type: 'gauge',
- axisLine: {
- show:true,
- lineStyle: {
- width: 20,
- color:[[0.67, '#63869e'], [0.71, '#91c7ae'], [0.79, '#ebdf57'],[0.89, '#d5605d'],[1, '#990b07']]
- }
- },
- detail: {
- formatter: [
- '{c| }',
- '{a|'+ bx1gauge1_data.thi +'}',
- '{b|'+ bx1gauge1_data.title + ' 温度°C:' +bx1gauge1_data.temp+ ' 湿度%RH:'+bx1gauge1_data.humi+'}'
- ].join('\n'),
- rich: {
- a: {
- fontSize: 26,
- fontWeight:'bold',
- lineHeight: 70,
- },
- b: { fontSize: 20},
- c: { lineHeight: 100}
- }
- },
- data: [{value: bx1gauge1_data.thi , name: '温湿度指数'}]
- }
- ]
- };
- bx1gauge1.setOption(option);
- }
- //事件 - 温湿度指数 - 表格
- function road_bx1right_temp(bx1right_data){
- var template = Handlebars.compile($("#bx1rightTemplate").html());
- var context = template(bx1right_data);
- $('#bx1rightBox').html(context);
- }
- //事件 - 未来一周温度和THI变化 - 表格
- function road_bx2_temp(bx2_data){
- var template = Handlebars.compile($("#bx2Template").html());
- var context = template(bx2_data);
- $('#bx2Box').html(context);
- }
- //事件 - 未来一周温度和THI变化 - 折线
- function road_bx2line1_temp(bx2line1_data){
- bx2line1 = echarts.init(document.getElementById('bx2line1'));
- var option = {
- xAxis: [
- {
- type: 'category',
- show: true,
- data: bx2line1_data.hours
- }
- ],
- yAxis: [
- {
- type: 'value',
- show: false
- }
- ],
- series: [
- {
- type: 'bar',
- itemStyle: {
- normal: {
- color: function(params) {
- // build a color map as your need.
- var colorList = [
- '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
- '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
- '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
- ];
- return colorList[params.dataIndex]
- },
- label: {
- show: true,
- position: 'top',
- formatter: '{c}'
- }
- }
- },
- data: bx2line1_data.openmins
- }
- ]
- };
- bx2line1.setOption(option);
- }
- //事件 - 预警
- function road_bx3_temp(bx3_data){
- var template = Handlebars.compile($("#bx3Template").html());
- var context = template(bx3_data);
- $('#bx3Box').html(context);
- }
- //事件 - 最近一个月THI分布情况
- function road_bx4calendar1_temp(bx4calendar1_data){
- bx4calendar1 = echarts.init(document.getElementById('bx4calendar1'));
- var option = {
- tooltip : {
- trigger: 'item'
- },
- legend: {
- top: '30',
- left: '100',
- data:['THI0-67', 'THI67-71','THI72-79','THI80-89','THI90以上']
- },
- calendar: [{
- top: 120,
- orient: 'vertical',
- left: 'center',
- range: bx4calendar1_data.rangeAll,
- cellSize: 50,
- dayLabel: {
- nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
- },
- monthLabel: {
- nameMap: 'cn',
- },
- }],
- series : [
- {
- name: 'THI0-67',
- type: 'effectScatter',
- coordinateSystem: 'calendar',
- data: bx4calendar1_data.range67,
- symbolSize: function (val) {
- return val[1] / 4;
- },
- itemStyle: {normal: {color: '#63869e'}
- }
- },
- {
- name: 'THI67-71',
- type: 'effectScatter',
- coordinateSystem: 'calendar',
- data: bx4calendar1_data.range71,
- symbolSize: function (val) {
- return val[1] / 4;
- },
- itemStyle: {normal: {
- color: '#91c7ae'
- }
- }
- },
- {
- name: 'THI72-79',
- type: 'effectScatter',
- coordinateSystem: 'calendar',
- data: bx4calendar1_data.range79,
- symbolSize: function (val) {
- return val[1] / 4;
- },
- itemStyle: {
- normal: {
- color: '#ebdf57'
- }
- }
- },
- {
- name: 'THI80-89',
- type: 'effectScatter',
- coordinateSystem: 'calendar',
- data: bx4calendar1_data.range89,
- symbolSize: function (val) {
- return val[1] / 4;
- },
- itemStyle: {
- normal: {
- color: '#d5605d'
- }
- }
- },
- {
- name: 'THI90以上',
- type: 'effectScatter',
- coordinateSystem: 'calendar',
- data: bx4calendar1_data.range90,
- symbolSize: function (val) {
- return val[1] / 4;
- },
- itemStyle: {
- normal: {
- color: '#990b07'
- }
- }
- },
-
- ]
- };
- bx4calendar1.setOption(option);
- }
-
- //事件 - 月THI变化
- function road_bx5line1_temp(bx5line1_data){
- bx5line1 = echarts.init(document.getElementById('bx5line1'));
- var option = {
- tooltip: {
- trigger: 'axis'
- },
-
- dataZoom: [
- {start: 0},
- {type: 'inside'}
- ],
- legend: {
- data:['温湿度指数','温度','湿度']
-
- },
- color:['#63869e','#fcc267','#1ea868'],
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: bx5line1_data.receivetime
- },
- yAxis: {
- type: 'value'
- },
- visualMap: {
- type: 'piecewise',
- top:'20px',
- right:'10px',
- seriesIndex:0,
- pieces: [
- {gte: 0,lte: 67,color: '#63869e'},
- {gte: 67,lte: 71,color: '#91c7ae'},
- {gte: 72,lte: 79,color: '#ebdf57'},
- {gte: 80,lte: 89,color: '#d5605d'},
- {gte: 90,color: '#d5605d'}
- ],
- outOfRange: {color: '#999'}
- },
- series: [
- {
- name:'温湿度指数',
- type:'line',
- smooth:true,
- data:bx5line1_data.thi
- },
- {
- name:'温度',
- type:'line',
- lineStyle:{'color':"#fcc267" },
- smooth:true,
- data:bx5line1_data.temp
- },
- {
- name:'湿度',
- type:'line',
- lineStyle:{'color':"#1ea868",'type':'dotted'},
- smooth:true,
- data:bx5line1_data.humi
- }
- ]
- };
- bx5line1.setOption(option);
- }
- //事件 - 最近一年THI变化 - 饼图
- function road_bx6pie1_temp(bx6pie1_data){
- bx6pie1 = echarts.init(document.getElementById('bx6pie1'));
- var option = {
- tooltip: {
- trigger: 'axis'
- },
-
- xAxis: {
- data: bx6pie1_data.eqcode,
- axisLabel: {
- inside: true,
- textStyle: {
- color: '#fff'
- }
- },
- axisTick: {
- show: false
- },
- axisLine: {
- show: false
- },
- z: 10
- },
- yAxis: {
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- textStyle: {
- color: '#999'
- }
- }
- },
- dataZoom: [
- {
- type: 'inside'
- }
- ],
- series: [
- {
- type: 'bar',
-
- data: bx6pie1_data.openmins
- }
- ]
- };
- bx6pie1.setOption(option);
- }
- //事件 - 最近一年THI变化 - 日历
- function road_bx7calendar1_temp(bx7calendar1_data){
- bx7calendar1 = echarts.init(document.getElementById('bx7calendar1'));
- var option = {
- visualMap: {
- top: '20px',
- left: '30%',
- type: 'piecewise',
- orient: 'horizontal',
- pieces: [
- {gte: 0,lte: 67,color: '#63869e'},
- {gte: 67,lte: 71,color: '#91c7ae'},
- {gte: 72,lte: 79,color: '#ebdf57'},
- {gte: 80,lte: 89,color: '#d5605d'},
- {gte: 90,color: '#d5605d'}
- ]
- },
-
- calendar: {
- top: 120,
- left: 30,
- right: 30,
- cellSize: ['auto', 13],
- range: ['2018-01-01', '2018-12-31'],
- itemStyle: {
- normal: {borderWidth: 0.5}
- },
- yearLabel: {show: false}
- },
- series: {
- type: 'heatmap',
- coordinateSystem: 'calendar',
- data: bx7calendar1_data
- }
- };
- bx7calendar1.setOption(option);
- }
- window.onresize = function(){
- bx1gauge1.resize();
- bx2line1.resize();
- bx4calendar1.resize();
- bx5line1.resize();
- bx6pie1.resize();
- bx7calendar1.resize();
- }
- //AJAX事件 - 温湿度指数
- function get_bx1gauge1_data(e){
- // console.log('温湿度指数gauge',e)
- bx1gauge1_data = e.lists[0]
- road_bx1gauge1_temp(bx1gauge1_data)
- }
- //AJAX事件 - 温湿度指数
- function get_bx1right_data(e){
- // console.log('温湿度指数right',e)
- bx1right_data = e.lists[0]
- road_bx1right_temp(bx1right_data)
- }
- //AJAX事件 - 未来一周温度和THI变化
- function get_bx2line1_data(e){
- // console.log('未来一周温度和THI变化',e)
- // bx2_data = e.lists
- bx2line1_data = e.lists
- // road_bx2_temp(bx2_data)
- road_bx2line1_temp(bx2line1_data)
- }
- //AJAX事件 - 预警
- function get_bx3_data(e){
- // console.log('预警',e)
- bx3_data = e
- road_bx3_temp(bx3_data)
- }
- //AJAX事件 - 最近一个月THI分布情况
- function get_bx4calendar1_data(e){
- // console.log('最近一个月THI分布情况',e)
- bx4calendar1_data = e.data.lists
- road_bx4calendar1_temp(bx4calendar1_data)
- }
- //AJAX事件 - 月THI变化
- function get_bx5line1_data(e){
- // console.log('月THI变化',e)
- bx5line1_data = e.lists
- road_bx5line1_temp(bx5line1_data)
- }
- //AJAX事件 - 最近一年THI变化 - 饼图
- function get_bx6pie1_data(e){
- // console.log('最近一年THI变化 - 饼图',e)
- bx6pie1_data = e.lists
- road_bx6pie1_temp(bx6pie1_data)
- }
- //AJAX事件 - 最近一年THI变化 - 日历
- function get_bx7calendar1_data(e){
- // console.log('最近一年THI变化 - 日历',e)
- bx7calendar1_data = e.data_list
- road_bx7calendar1_temp(bx7calendar1_data)
- }
- //AJAX事件 - 最近一年THI变化 - 日历
- function get_All_data(e){
-
- All_data = e.data
- var url_get_bx1gauge1_data = util.g_url + "/data/getTempHumi"
- var url_get_bx1right_data = util.g_url + "/data/GetTempHumi24MinMax"
- //接口 - 未来一周温度和THI变化
- var url_get_bx2line1_data = util.g_url + "/data/GetPriByHour"
- //接口 - 预警
- var url_get_bx3_data = util.g_url + "/data/GetTempHumi24MinMaxByNo"
- //接口 - 当月THI分布情况
- var url_get_bx4calendar1_data = util.g_url + "/data/GetFutureMonthTemp"
- //接口 - 月THI变化
- var url_get_bx5line1_data = util.g_url + "/data/GetTempHumi24MaxByNo"
- //接口 - 最近一年THI变化 - 饼图
- var url_get_bx6pie1_data = util.g_url + "/data/GetPriByEQ"
- //接口 - 最近一年THI变化 - 日历
- var url_get_bx7calendar1_data = util.g_url + "/data/getYearCalendar"
-
- var url_get_all_data = util.g_url + "/data/GetDataByNames"
-
- get_bx1gauge1_data(All_data.GetTempHumi)
- get_bx1right_data(All_data.GetTempHumi24MinMax)
- get_bx5line1_data(All_data.GetTempHumi30dayByNo)
- get_bx6pie1_data(All_data.GetPriByEQ)
- get_bx2line1_data(All_data.GetPriByHour)
- get_bx3_data(All_data.GetTempHumi24MinMaxByNo)
- // road_bx7calendar1_temp(bx7calendar1_data)
- }
- /* END ---------------------------------------------- 事件 & 渲染 ----------------------------------------------- */
- /* BEGIN ----------------------------------------------- 首屏启动 ----------------------------------------------- */
-
- //加载 - 温湿度指数
- // util.ajax_arr(url_get_bx1gauge1_data, first_road_data, 'GET', get_bx1gauge1_data)
- // road_bx1gauge1_temp(bx1gauge1_data)
- // road_bx1right_temp(bx1right_data)
- // util.ajax_arr(url_get_bx1right_data, first_road_data, 'GET', get_bx1right_data)
-
- // //加载 - 未来一周温度和THI变化
- // util.ajax_arr(url_get_bx2line1_data, first_road_data, 'GET', get_bx2line1_data)
- // road_bx2line1_temp(bx2line1_data)
- road_bx2_temp(bx2_data)
- // //加载 - 预警
- // util.ajax_arr(url_get_bx3_data, first_road_data, 'GET', get_bx3_data)
- // road_bx3_temp(url_get_bx4calendar1_databx3_data)
- // //加载 - 最近一个月THI分布情况
- // util.ajax_arr(url_get_bx4calendar1_data, first_road_data, 'GET', get_bx4calendar1_data)
- road_bx4calendar1_temp(bx4calendar1_data)
- // //加载 - 月THI变化
- // util.ajax_arr(url_get_bx5line1_data, first_road_data, 'GET', get_bx5line1_data)
- // road_bx5line1_temp(bx5line1_data)
- // //加载 - 最近一年THI变化 - 饼图
- // util.ajax_arr(url_get_bx6pie1_data, first_road_data, 'GET', get_bx6pie1_data)
- // road_bx6pie1_temp(bx6pie1_data)
- // //加载 - 最近一年THI变化 - 日历
- // util.ajax_arr(url_get_bx7calendar1_data, first_road_data, 'POST', get_bx7calendar1_data)
- road_bx7calendar1_temp(bx7calendar1_data)
-
- util.ajax_arr(url_get_all_data, first_road_data, 'POST', get_All_data)
- /* END ----------------------------------------------- 首屏启动 ----------------------------------------------- */
- </script>
- </body>
- </html>
|