-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathload.html
481 lines (458 loc) · 15.7 KB
/
load.html
1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>汕头微电网大屏</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/source.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .progress_content{ width:50px; height:10px; border-radius:26px; background-color:#86FFFC; display:block; position:relative; } .parentBox{ width:100px; height:10px; border-radius:26px; background:#9DD0FF; margin-top:4px; } .contentLoad .animates, .contentLoad .animates ul { opacity: 0; } .actionImg{ display: inline-block; position:absolute; width: 3712px; height: 1536px; right: -31.6%; top: -9px; background: url('./images/load_scriptes.png') -10px -10px no-repeat; animation: testanimations 1s steps(1,start) 0s infinite; } @keyframes testanimations{ from{ opacity: 0.2; background-position: -10px -1566px; } 5%{ opacity: 0.4; background-position:-10px -3122px ; } 10%{ opacity: 0.6; background-position: -10px -4678px; } 15%{ opacity: 0.8; background-position: -10px -6234px; } 20%{ opacity: 0.2; background-position: -10px -7790px; } 25%{ opacity: 0.4; background-position: -10px -9346px; } 30%{ opacity: 0.6; background-position: -10px -10902px; } 35%{ opacity: 0.8; background-position: -10px -12458px; } 40%{ opacity: 0.9; background-position: -10px -14014px; } 45%{ opacity: 0.2; background-position: -10px -15570px; } 50%{ opacity: 0.4; background-position: -10px -17126px; } 55%{ opacity: 0.6; background-position: -10px -18682px; } 60%{ opacity: 0.8; background-position: -10px -20238px; } 65%{ opacity: 0.9; background-position: -10px -21794px; } 70%{ opacity: 0.9; background-position: -10px -23350px; } 75%{ opacity: 0.9; background-position: -10px -24906px; } 80%{ opacity: 0.9; background-position: -10px -26462px; } 85%{ opacity: 0.9; background-position: -10px -28018px; } 90%{ opacity: 0.9; background-position: -10px -29574px; } 95%{ opacity: 0.9; background-position: -10px -31130px; } to{ opacity: 0.6; background-position: -10px -10px; } } </style> <script src="js/storage.js"></script></head><body><div class="sourceLeftMask"></div><div class="sourceLeft"> <div class="sourceSloganDIv"> <div class="sourceSlogan"> <p>智慧园区能源系统</p> </div> </div> <ul class="rightChartlist loadLeft"> <li> <div class="rightChart"> <div class="chartHeader"><p>装配基地内空调实时温度曲线</p><p>单位：℃</p></div> <div id="rightChartContentOne"> </div> </div> </li> <li> <div class="rightChart"> <div class="chartHeader"><p>装配基地内空调实时湿度曲线</p><p>单位：%</p></div> <div id="rightChartContentTwo"> </div> </div> </li> <li> <div class="rightChart"> <div class="chartHeader loadLeftP"><p>充电桩实时功率曲线</p><p>单位：kW</p></div> <div id="rightChartContentThree"> </div> </div> </li> </ul></div><div class="contentLoad"> <div class="actionImg"></div> <div class="mainHeader"> <div class="mainNav"> <div class="nav"></div> <div class="navNow"> <img src="images/load.png" alt=""><p>荷/load</p> </div> </div> <div class="KPI first loadKpi"> <p>园区日用电量</p> <h2> <span>MWh</span></h2> </div> <div class="KPI kpiProgress"> <div id="KPIProgressChartOne"></div> <div> <p>装配基地</p> <h2><span>MWh</span></h2> </div> </div> <div class="KPI kpiProgress"> <div id="KPIProgressChartTwo"></div> <div> <p>其他</p> <h2><span>MWh</span></h2> </div> </div> <div class="KPI secondKpi loadKpi"> <p>累计总用电量</p> <h2><span>MWh</span></h2> </div> <div class="KPI kpiProgress"> <div id="KPIProgressChartThree"></div> <div> <p>装配基地</p> <h2><span>MWh</span></h2> </div> </div> <div class="KPI kpiProgress"> <div id="KPIProgressChartFour"></div> <div> <p>其他</p> <h2><span>MWh</span></h2> </div> </div> </div> <div class="loadCharge animates"> <div class="rel cd"> <div class="turbineHeader"> <h2>充电桩</h2> <p class="statusTurbine">正常</p> </div> <ul> <li> <p class="indexMainInfoTitle">功率</p> <p> kW</p> </li> <li> <p class="indexMainInfoTitle">负荷占比</p> <div class="buildingStatus "> <h2 class="parentBox"> <span class="progress"></span> </h2> </div> </li> </ul> <ul> <li> <p class="indexMainInfoTitle">控制方式</p> <p></p> </li> </ul> </div> </div> <div class="loadAssemble animates"> <div class="rel cd"> <div class="turbineHeader"> <h2>装配基地</h2> </div> <ul> <li> <p class="indexMainInfoTitle">温度</p> <p></p> </li> <li> <p class="indexMainInfoTitle">负荷占比</p> <div class="buildingStatus "> <h2 class="parentBox"> <span class="progress_content"></span> </h2> </div> </li> </ul> <ul> <li> <p class="indexMainInfoTitle">湿度</p> <p> %</p> </li> </ul> </div> </div> <div class="loadBuilding animates"> <div class="rel cd"> <div class="turbineHeader"> <h2>综合楼</h2> </div> <ul> <li> <p class="indexMainInfoTitle">功率</p> <p> kW</p> </li> <li> <p class="indexMainInfoTitle">负荷占比</p> <!--statusMiddle--> <div class="buildingStatus "> <h2 class="parentBox"> <span class="progress"></span> </h2> </div> </li> </ul> </div> </div> <ul class="sourceBottomChart" id="sourceBottomChart"> <li> <div class="loadChart loadChartOne"> <div class="chartHeader"><p>装配基地日用电量趋势曲线</p><p>单位：KW</p></div> <div id="loadContentOne"> </div> </div> </li> <li> <div class="loadChart loadChartTwo"> <div class="chartHeader"><p>近7日装配基地日总负荷</p><p>单位：MWh</p></div> <div id="loadContentTwo"> </div> </div> </li> </ul></div><div class="sourceRight"> <div class="rightHeader"> <p class="BeiJingTime"></p> <p class="ExactlyTime"></p> </div> <div class="sourceRightContent bottomLine"> <div class="sourceRightContentHeader"> <h2 class="loadH2Short">充电桩日用电量</h2> </div> <div class="NetworkRightContentList"> <div class="NetworkRightPie" id="NetworkRightPieOne"> </div> <div class="NetworkRightCon"> <ul> <li> <p class="indexMainInfoTitle">直流充电桩 | </p> <p><span>万元</span></p> </li> <li> <p class="indexMainInfoTitle">交流充电桩 | </p> <p><span>万元</span></p> </li> </ul> </div> </div> </div> <div class="sourceRightContent"> <div class="sourceRightContentHeader"> <h2 class="loadH2Long">充电桩累计用电量</h2> </div> <div class="NetworkRightContentList"> <div class="NetworkRightPie" id="NetworkRightPieTwo"> </div> <div class="NetworkRightCon"> <ul> <li> <p class="indexMainInfoTitle">直流充电桩 | </p> <p><span>万元</span></p> </li> <li> <p class="indexMainInfoTitle">交流充电桩 | </p> <p><span>万元</span></p> </li> </ul> </div> </div> </div></div><div class="rightMask"></div></body><script src="js/jquery.js"></script><script src="js/echart.js"></script><script src="js/ajax.js"></script><script src="js/chartOption.js"></script><script src="js/load.js"></script><script src="js/base.js"></script><!--<script SRC="js/soket.js"></script>--><script> $(function() { // function titleData(response) { // response = (response instanceof Array) && response[0]&&response[0]['position'] == 'top' ? response[0].value : response; // var {Today_Load_Energy, Day_ElecCons_AsseBase, Today_Other, Total_Load_Energy, Total_ElecCons_AsseBase, Total_Other} = response; // var titleArr = [ Day_ElecCons_AsseBase, Today_Other, Total_ElecCons_AsseBase, Total_Other]; // var totalArr = [Today_Load_Energy, Total_Load_Energy]; // $('.mainHeader .kpiProgress div h2').html(''); // $('.mainHeader .loadKpi h2').html(''); // $('.mainHeader .kpiProgress').each(function(i,item){ // $(($(item).children())[1]).find('h2').prepend(titleArr[i]+'<span>MWh</span>'); // }) // $('.mainHeader .loadKpi').each(function(i,item){ // $(($(item).children())[1]).prepend(totalArr[i]+'<span>MWh</span>'); // }) // } // function topTitleReq(){ // var obj = {} // HttpRequest({ // type: 'get', // url: 'http://172.172.33.34:8088/v1/lotus/getTopData', // success:function(response){ // if(response){ // obj = response; // } // } // }) // return obj; // } function renderMiddleCon(){ HttpRequest({ type: 'get', url: 'http://172.172.33.34:8088/v1/lotus/getCentralData', success: function (response) { if (response) { const {CDZ, ZPDL, ZHL } = response; renderData( $('.loadCharge .rel ul li'), CDZ); renderData( $('.loadAssemble .rel ul li'), ZPDL); renderData( $('.loadBuilding .rel ul li'), ZHL); } } }) } function renderData(dom, arr){ dom.each(function(i,item){ if(i ==1 ) { $(item).find('.parentBox .progress').css('width',parseInt(arr[i])*100/100) } else{ console.log(typeof arr[i]) if(typeof arr[i] == 'number'){ ($(item).children())[1].prepend(parseInt(arr[i])); } else{ ($(item).children())[1].prepend(arr[i]); } } }) } function rightContentData(){ HttpRequest({ type: 'get', url: 'http://172.172.33.34:8088/v1/lotus/getRightData', success: function (response) { if (response) { var {CDZ_Today_Direct, CDZ_Today_Exchange,CDZ_Total_Direct, CDZ_Total_Exchange, CDZ_Today_Direct_Percentage,CDZ_Today_Exchange_Percentage, CDZ_Total_Direct_Percentage, CDZ_Total_Exchange_Percentage } = response; var arr = [CDZ_Today_Direct, CDZ_Today_Exchange,CDZ_Total_Direct, CDZ_Total_Exchange]; var percentageArr = [CDZ_Today_Direct_Percentage,CDZ_Today_Exchange_Percentage, CDZ_Total_Direct_Percentage, CDZ_Total_Exchange_Percentage]; $('.NetworkRightContentList .NetworkRightCon ul li').each(function(i,item){ $(item).children()[0].append(percentageArr[i] + '%'); $(item).children()[1].prepend(arr[i]); }) } } }) } renderMiddleCon(); //中间数据 rightContentData(); //右侧的数据 $('.contentLoad .loadCharge').animate({opacity:1},1000,function(){ $(this).find('ul').each(function(index,v){ $(v).animate({opacity:1},index*1000+500,function(){ $('.contentLoad .loadAssemble ').animate({opacity:1},1000,function(){ $(this).find('ul').each(function(index,v) { $(v).animate({opacity: 1}, index * 1000 + 500,function(){ $('.contentLoad .loadBuilding').animate({opacity:1},1000,function() { $(this).find('ul').each(function(index,v) { $(v).animate({opacity: 1}, index * 1000 + 500) }) }) }) }) }) }) }) }) })</script></html>