12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063 |
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="utf-8">
- <title>污水处理系统</title>
- <link href="views/htclient/css/wscl.css" rel="stylesheet">
- <link href="views/htclient/css/ios6switch.css" rel="stylesheet">
- <script type="text/javascript" src="views/htclient/js/digitalScroll.js"></script>
- <script type="text/javascript" src="views/htclient/js/ios6switch.js"></script>
- <script src="views/htclient/js/three.min.js"></script>
- <script src="views/htclient/js/inflate.min.js"></script>
- <script src="views/htclient/js/FBXLoader.js"></script>
- <script src="views/htclient/js/OrbitControls.js"></script>
- <script src="views/htclient/js/NURBSCurve.js"></script>
- <script src="views/htclient/js/NURBSUtils.js"></script>
- <!-- <script src="views/htclient/js/Stats.min.js"></script> -->
- <script src="views/htclient/js/dat.gui.min.js"></script>
- <script src="views/htclient/js/Detector.js"></script>
- <script src="views/htclient/js/CSS2DRenderer.js"></script>
- <style>
- #player6>div{
- width:454px !important;
- height:185px !important;
- }
- </style>
- </head>
- <body>
- <div class='grid-common right-grid'>
- <div class="grid-common right-grid-left">
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid'>污水排放标准</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container flex-column-table">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div class='table-wspf'>
- <div class='table-wspf-head'>畜禽养殖业污染物排放标准(GB18596-2001)</div>
-
- <table cellpadding='0' cellspacing='0' border='0'>
- <tbody>
- <tr>
- <th>BOD(mg/L)</th>
- <th>COD(mg/L)</th>
- <th>SS(mg/L)</th>
- <th>NH3(mg/L)</th>
- </tr>
- <tr>
- <td>150</td>
- <td>400</td>
- <td>200</td>
- <td>80</td>
- </tr>
- <tr>
- <th>总磷(mg/L)</th>
- <th>粪大肠菌群数(个/100mL)</th>
- <th>蛔虫卵(个/L)</th>
- <th>PH</th>
- </tr>
- <tr>
- <td>8.0</td>
- <td>1000</td>
- <td>2.0</td>
- <td>6~9</td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class='table-wspf'>
- <div class='table-wspf-head'>工业污水排放标准(GB18466-2005、GB20426-2006、GB20425-2006)</div>
- <div class='scroll-table-wspf'>
- <table cellpadding='0' cellspacing='0' border='0'>
- <tbody>
- <tr>
- <th>污染物</th>
- <th>一级</th>
- <th>二级</th>
- <th>三级</th>
- </tr>
- <tr>
- <td>BOD(mg/L)</td>
- <td>30</td>
- <td>60</td>
- <td>300</td>
- </tr>
- <tr>
- <td>COD(mg/L)</td>
- <td>100</td>
- <td>150</td>
- <td>500</td>
- </tr>
- <tr>
- <td>SS(mg/L)</td>
- <td>70</td>
- <td>200</td>
- <td>400</td>
- </tr>
- <tr>
- <td>NH3(mg/L)</td>
- <td>15</td>
- <td>25</td>
- <td>-</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid'>故障分布情况</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div id='chart-gzfbqk'></div>
- </div>
- </div>
- </div>
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid'>报警分析</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div id='chart-bjfx'></div>
- </div>
- </div>
- </div>
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid'>设备故障排行榜</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div id='chart-sbgzphb'></div>
- </div>
- </div>
- </div>
- </div>
- <div class="grid-common right-grid-center">
- <div class='wrapper'>
- <div class="wrapper-content chart-area">
- <div class="content-container">
- <div class="zhejiao zhejiao-1"></div>
- <div class="zhejiao zhejiao-2"></div>
- <div class="zhejiao zhejiao-3"></div>
- <div class="zhejiao zhejiao-4"></div>
- <div class='wscl-3dcontent'>
- <div class='wscl-datadetail'>
- <span class='day_handle_count'>当日处理量:</span>
- <span class="t_num t_num1"></span>
- <span class='num_dot'>.</span>
- <span class="t_num t_num2"></span>
- <span class='all_handle_count'>总处理量:</span>
- <span class="t_num t_num3"></span>
- <span class='num_dot'>.</span>
- <span class="t_num t_num4"></span>
- </div>
- <div id='WebGL-output'></div>
- <div class="right-wsclset">
- <div class="wsclset-item set-itembottom">固液分离单元组件<img src="views/htclient/images/set.png" /></div>
- <div class="wsclset-item set-itembottom">沼液浓缩单元组件<img src="views/htclient/images/set.png" /></div>
- <div class="wsclset-item">沼液浓缩单元参数<img src="views/htclient/images/set.png" /></div>
- <div class="wsclset-item" style="display:none;">参数设置中...<img src="views/htclient/images/set.png" /></div>
- </div>
- <div id='chart-ws-data'>
- <div id='chart-center1'></div>
- <div id='chart-center2'></div>
- <div id='chart-center3'></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class='wrapper pding-2'>
- <div class='content-container justify-around'>
- <div class="zhejiao zhejiao-1"></div>
- <div class="zhejiao zhejiao-2"></div>
- <div class="zhejiao zhejiao-3"></div>
- <div class="zhejiao zhejiao-4"></div>
- <div class='data-statis'>
- <div class="zhejiao zhejiao-1"></div>
- <div class="zhejiao zhejiao-2"></div>
- <div class="zhejiao zhejiao-3"></div>
- <div class="zhejiao zhejiao-4"></div>
- <div class='data-circle'>
- <div class='data-circle-num'>22</div>
- <div class='data-circle-line'></div>
- <div class='data-circle-item'>合作客户数</div>
- <div class='data-circle-name'>新客户</div>
- <div class='data-circle-value'>浙江慧牧科技有限公司</div>
- </div>
- </div>
- <div class='data-statis'>
- <div class="zhejiao zhejiao-1"></div>
- <div class="zhejiao zhejiao-2"></div>
- <div class="zhejiao zhejiao-3"></div>
- <div class="zhejiao zhejiao-4"></div>
- <div class='data-circle'>
- <div class='data-circle-num'>22</div>
- <div class='data-circle-line'></div>
- <div class='data-circle-item'>系统销售总数</div>
- <div class='data-circle-name'>新销售量</div>
- <div class='data-circle-value'>4套</div>
- </div>
- </div>
- <div class='data-statis'>
- <div class="zhejiao zhejiao-1"></div>
- <div class="zhejiao zhejiao-2"></div>
- <div class="zhejiao zhejiao-3"></div>
- <div class="zhejiao zhejiao-4"></div>
- <div class='data-circle'>
- <div class='data-circle-num'>124</div>
- <div class='data-circle-line'></div>
- <div class='data-circle-item'>销售金额(万元)</div>
- <div class='data-circle-name'>销售额</div>
- <div class='data-circle-value'>110万</div>
- </div>
- </div>
- <div class='data-statis'>
- <div class="zhejiao zhejiao-1"></div>
- <div class="zhejiao zhejiao-2"></div>
- <div class="zhejiao zhejiao-3"></div>
- <div class="zhejiao zhejiao-4"></div>
- <div class='data-circle'>
- <div class='data-circle-num'>124</div>
- <div class='data-circle-line'></div>
- <div class='data-circle-item'>污水处理总量(吨)</div>
- <div class='data-circle-name'>今日处理量</div>
- <div class='data-circle-value'>34吨</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="grid-common right-grid-right">
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid widther-tab clickable-tab'>嘉兴嘉华粪污处理系统</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container flex-column-table justify-around">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div class="mcjc-top-datetime">数据采集时间:$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!sjcjsj)</div>
- <div class="mcjc-top-datalist">
- <div class="mcjc-top-item">
- <div class="mcjc-top-itemname">固液分离单元</div>
- <div class="mcjc-top-itemname">沼液浓缩单元1区</div>
- <div class="mcjc-top-itemname">沼液浓缩单元2区</div>
- </div>
- <div class="mcjc-top-status">
- <div #if("$!gyzt" == "在线") class="mcjc-top-statusvalue" #else class="mcjc-top-statusvalue leave" #end>$!gyzt</div>
- <div #if("$!zy1" == "在线") class="mcjc-top-statusvalue" #else class="mcjc-top-statusvalue leave" #end>$!zy1</div>
- <div #if("$!zy2" == "在线") class="mcjc-top-statusvalue" #else class="mcjc-top-statusvalue leave" #end>$!zy2</div>
- </div>
- <div class="mcjc-top-style">
- <div #if("$!gyztStr" == "正常运行") class="mcjc-top-stylevalue" #else class="mcjc-top-stylevalue waiting" #end>$!{gyztStr} </div>
- <div #if("$!zy1Str" == "正常运行") class="mcjc-top-stylevalue" #else class="mcjc-top-stylevalue waiting" #end>$!{zy1Str} </div>
- <div #if("$!zy2Str" == "正常运行") class="mcjc-top-stylevalue" #else class="mcjc-top-stylevalue waiting" #end>$!{zy2Str} </div>
- </div>
- </div>
- <div class="mcjc-top-count">
- <div class="mcjc-top-count-part">
- <div class="mcjc-top-count-part-value">22天</div>
- <div class="mcjc-top-count-part-line"></div>
- <div class="mcjc-top-count-part-name">安全运行天数</div>
- </div>
- <div class="mcjc-top-count-part">
- <div class="mcjc-top-count-part-value">22吨</div>
- <div class="mcjc-top-count-part-line"></div>
- <div class="mcjc-top-count-part-name">日处理量</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid clickable-tab'>排出水实时监测</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div id='chart-pcsssjc'></div>
- </div>
- </div>
- </div>
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid clickable-tab'>排出水视频监控</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div id='video-box'>
- <div class='video-container player' id="player6"></div>
- </div>
- </div>
- </div>
- </div>
- <div class='wrapper'>
- <div class='tab'>
- <div class='tab-bid clickable-tab'>系统运行提醒</div>
- </div>
- <div class="wrapper-content">
- <div class="content-container">
- <div class='zhejiao zhejiao-1'></div>
- <div class='zhejiao zhejiao-2'></div>
- <div class='zhejiao zhejiao-3'></div>
- <div class='zhejiao zhejiao-4'></div>
- <div id='system-runing-msg'>
- #foreach($!obj in $!sbgzList)
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.fssj) $!obj.gzlx</span></div>
- #end
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
-
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class='open-box-container'>
- <div class='open-lauer-box'>
- <div class="open-box-head">排出水水质监测图</div>
- <div class="open-box-body">
- <div class='open-box-chart-area' id='chart-codbod'></div>
- <div class='open-box-chart-area' id='chart-nh3ss'></div>
- <div class='open-box-chart-area' id='chart-zlph'></div>
- <div class='open-box-chart-area' id='chart-rhdl'></div>
- </div>
- </div>
- </div>
- <div class='open-box-container'>
- <div class='open-lauer-box'>
- <div class="open-box-head">排出水视频监控</div>
- <div class="open-box-body">
- <video autoplay="autoplay" muted loop style="object-fit: fill">
- <source src="views/htclient/source/video1.mp4" type="video/mp4" />
- </video>
- </div>
- </div>
- </div>
- <div class='open-box-container'>
- <div class='open-lauer-box'>
- <div class="open-box-head">系统运行提醒</div>
- <div class="open-box-body">
- <div class='open-box-msg-area left-line'>
- <div class='msg-area-header'>运维报警</div>
- <div class='msg-area-count'>
- <div class='left-count'>
- <img src='views/htclient/images/aq.png' />
- <div class='left-count-item'>
- <div class='left-count-name'>设备故障</div>
- <div class='left-count-value'>5</div>
- </div>
-
- </div>
- <div class='left-count'>
- <img src='views/htclient/images/aq.png' />
- <div class='left-count-item'>
- <div class='left-count-name'>预警总数</div>
- <div class='left-count-value'>25</div>
- </div>
-
- </div>
- </div>
- <div class='msg-area-list'>
- <div class='msg-area-content'>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- </div>
- </div>
- </div>
- <div class='open-box-msg-area'>
- <div class='msg-area-header'>维修保障</div>
- <div class='msg-area-count'>
- <div class='left-count'>
- <img src='views/htclient/images/warn_o.png' />
- <div class='left-count-item'>
- <div class='left-count-name'>待检修数</div>
- <div class='left-count-value'>5</div>
- </div>
-
- </div>
- <div class='left-count'>
- <img src='views/htclient/images/warn_o.png' />
- <div class='left-count-item'>
- <div class='left-count-name'>待保养数</div>
- <div class='left-count-value'>5</div>
- </div>
-
- </div>
- </div>
- <div class='msg-area-list'>
- <div class='msg-area-content'>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【检修】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type warning-type">【报警】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type recover-type">【恢复】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type cure-type">【治疗】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- <div class="system-count-msglist-item"><span class="type repair-type">【维保】</span><span class="system-count-msglist-content">2019.06.07 14:00 安兴牧场增压泵检修安兴牧场增压泵检修安兴牧场增压泵检修</span></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <input type="hidden" id="pdbz1" value="$!pdbz1" />
- <input type="hidden" id="pdbz2" value="$!pdbz2" />
- <input type="hidden" id="pdbz3" value="$!pdbz3" />
- <input type="hidden" id="pdbz4" value="$!pdbz4" />
- <input type="hidden" id="gyzt" value="$!gyzt" />
- <input type="hidden" id="zy" value="$!zy" />
- <input type="hidden" id="mcid" value="$!mcid" />
- <input type="hidden" id="gyflid" value="$!wsclGyfldy.id" />
- <input type="hidden" id="zyfl1id" value="$!wsclZyns1.id" />
- <input type="hidden" id="zyfl2id" value="$!wsclZyns2.id" />
- <input type="hidden" id="yjqd" />
- <input type="hidden" id="yjtj" />
- <input type="hidden" id="uf1qd" />
- <input type="hidden" id="uf1tj" />
- <input type="hidden" id="nfqd" />
- <input type="hidden" id="nftj" />
- <input type="hidden" id="uf2qd" />
- <input type="hidden" id="uf2tj" />
- <input type="hidden" id="roqd" />
- <input type="hidden" id="rotj" />
- <input type="hidden" id="sfz0" />
- <div class="wscl-dataset-container">
- <div class="wscl-dataset-box">
- <div class="open-box-head">固液分离单元设置</div>
- <div class="open-box-body">
- <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="gyflsz">
- <tr>
- <td colspan="2" class="top-system-set">运行状态</td>
- <td class="top-system-set switch-block"><input type="checkbox" class="mycheckbox1" #if($!wsclGyfldy.zdyxkg == 1) checked #end/></td>
- </tr>
- <tr>
- <td class="table-real-head">设备</td>
- <td class="table-real-head">状态</td>
- <td class="table-real-head">开关</td>
- </tr>
- <tr>
- <td>原料泵</td>
- <td>#if("$!{wsclGyfldy.scylb}" == "1")打开#else关闭 #end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scylb == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>挤出机</td>
- <td>#if("$!{wsclGyfldy.scjcj}" == "1")打开#else关闭 #end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scjcj == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>振动电机</td>
- <td>#if("$!{wsclGyfldy.sczddj}" == "1")打开#else关闭 #end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.sczddj == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>振荡筛</td>
- <td>#if("$!{wsclGyfldy.sczds}" == "1")打开#else关闭 #end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.sczds == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>上料泵</td>
- <td>#if("$!{wsclGyfldy.scslb}" == "1")打开#else关闭 #end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scslb == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>排污泵</td>
- <td>#if("$!{wsclGyfldy.scpwb}" == "1")打开#else关闭 #end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scpwb == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>滤液泵</td>
- <td>#if("$!{wsclGyfldy.sclyb}" == "1")打开#else关闭 #end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.sclyb == 1) checked #end />
- </td>
- </tr>
- </table>
- <div class="savewsclset" onclick="saveWsclYckz(1)">保存</div>
- </div>
- </div>
-
-
- </div>
- <div class="wscl-dataset-container">
- <div class="wscl-dataset-box">
- <div class="open-box-head">沼液浓缩单元组件</div>
- <div class="open-box-body">
- <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="zynsdyzj">
- <tr>
- <td colspan="2" class="top-system-set">一键启动</td>
- <td class="top-system-set switch-block"><input type="checkbox" class="mycheckbox" #if($!wsclZyns1.xtqd == 1) checked #end/></td>
- </tr>
- <tr>
- <td colspan="2" class="top-system-set">一键停机</td>
- <td class="top-system-set switch-block"><input type="checkbox" class="mycheckbox" #if($!wsclZyns1.xttz == 1) checked #end/></td>
- </tr>
- <tr>
- <td class="table-real-head">系统</td>
- <td class="table-real-head">状态</td>
- <td class="table-real-head">开关</td>
- </tr>
- <tr>
- <td>UF1控制系统</td>
- <td>#if("$!{wsclZyns1.uf1qd}" == "1") 启动 #elseif("$!{wsclZyns1.uf1tj}" == "1") 停机#end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclZyns1.uf1qd == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>NF控制系统</td>
- <td>#if($!{wsclZyns1.nfqd} == 1) 启动 #elseif($!{wsclZyns1.nftj} == 1) 停机#end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclZyns1.nfqd == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>UF2控制系统</td>
- <td>#if("$!{wsclZyns2.uf2qd}" == "1") 启动 #elseif("$!{wsclZyns2.uf2tj}" == "1") 停机#end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclZyns2.uf2qd == 1) checked #end />
- </td>
- </tr>
- <tr>
- <td>RO控制系统</td>
- <td>#if("$!{wsclZyns2.roqd}" == "1") 启动 #elseif("$!{wsclZyns2.rotj}" == "1") 停机#end</td>
- <td class="switch-block">
- <input type="checkbox" class="mycheckbox" #if($!wsclZyns2.roqd == 1) checked #end />
- </td>
- </tr>
- </table>
- <div class="savewsclset" onclick="saveWsclYckz(2)">保存</div>
- </div>
- </div>
- </div>
- <div class="wscl-dataset-container">
- <div class="wscl-dataset-box">
- <div class="open-box-head">沼液浓缩单元参数</div>
- <div class="open-box-body">
- <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="zynsdysz1">
- <tr>
- <td colspan="4" class="top-system-set">沼液浓缩单元1参数设置</td>
-
- </tr>
- <tr>
- <td class="table-real-head">参数</td>
- <td class="table-real-head">值</td>
- <td class="table-real-head">参数</td>
- <td class="table-real-head">值</td>
- </tr>
- <tr>
- <td>UF1运行时间(S)</td>
- <td><input type="text" id="uf1yxsj1" class="param-dataset" onBlur="check3(this)" value="$!wsclZyns1.uf1yxsj"/></td>
- <td>UF1上反洗时间(S)</td>
- <td><input type="text" id="uf1sfxsj1" class="param-dataset" onBlur="check(this)" value="$!wsclZyns1.uf1sfxsj"/></td>
- </tr>
- <tr>
- <td>UF1正洗时间(S)</td>
- <td><input type="text" id="uf1zxsj1" class="param-dataset" onBlur="check(this)" value="$!wsclZyns1.uf1zxsj"/></td>
- <td>UF1下反洗时间(S)</td>
- <td><input type="text" id="uf1xfxsj1" class="param-dataset" onBlur="check(this)" value="$!wsclZyns1.uf1xfxsj"/></td>
- </tr>
- <tr>
- <td>NF运行时间(M)</td>
- <td><input type="text" id="nfyxsj1" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns1.nfyxsj"/></td>
- <td>NF开机冲洗时间(S)</td>
- <td><input type="text" id="nfkjcxsj1" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns1.nfkjcxsj"/></td>
- </tr>
- <tr>
- <td>NF停机冲洗时间(S)</td>
- <td><input type="text" id="nftjcxsj1" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns1.nftjcxsj"/></td>
- <td>NF高压泵频率(HZ)</td>
- <td><input type="text" id="nfgybpl1" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns1.nfgybpl"/></td>
- </tr>
- <tr>
- <td>UF1增压泵频率(HZ)</td>
- <td><input type="text" id="ufzybpl1" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns1.ufzybpl"/></td>
- <td>UF1膜冲洗泵频率(HZ)</td>
- <td><input type="text" id="mcxbpl1" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns1.mcxbpl"/></td>
- </tr>
- </table>
- <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="zynsdysz2">
- <tr>
- <td colspan="4" class="top-system-set">沼液浓缩单元2参数设置</td>
-
- </tr>
- <tr>
- <td class="table-real-head">参数</td>
- <td class="table-real-head">值</td>
- <td class="table-real-head">参数</td>
- <td class="table-real-head">值</td>
- </tr>
- <tr>
- <td>UF2运行时间(S)</td>
- <td><input type="text" id="uf2yxsj2" class="param-dataset" onBlur="check3(this)" value="$!wsclZyns2.uf2yxsj" /></td>
- <td>UF2上反洗时间(S)</td>
- <td><input type="text" id="uf2sfxsj2" class="param-dataset" onBlur="check(this)" value="$!wsclZyns2.uf2sfxsj" /></td>
- </tr>
- <tr>
- <td>UF2正洗时间(S)</td>
- <td><input type="text" id="uf2zxsj2" class="param-dataset" onBlur="check(this)" value="$!wsclZyns2.uf2zxsj" /></td>
- <td>UF2下反洗时间(S)</td>
- <td><input type="text" id="uf2xfxsj2" class="param-dataset" onBlur="check(this)" value="$!wsclZyns2.uf2xfxsj" /></td>
- </tr>
- <tr>
- <td>RO运行时间(M)</td>
- <td><input type="text" id="royxsj2" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns2.royxsj" /></td>
- <td>RO开机冲洗时间(S)</td>
- <td><input type="text" id="rokjcxsj2" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns2.rokjcxsj" /></td>
- </tr>
- <tr>
- <td>RO停机冲洗时间(S)</td>
- <td><input type="text" id="rotjcxsj2" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns2.rotjcxsj" /></td>
- <td>RO高压泵频率(HZ)</td>
- <td><input type="text" id="rogybpl2" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns2.rogybpl" /></td>
- </tr>
- <tr>
- <td>UF2增压泵频率(HZ)</td>
- <td><input type="text" id="ufzybpl2" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns2.ufzybpl" /></td>
- <td>UF2膜冲洗泵频率(HZ)</td>
- <td><input type="text" id="mcxbpl2" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns2.mcxbpl" /></td>
- </tr>
- </table>
- <div class="savewsclset" onclick="saveWsclYckz(3)">保存</div>
- </div>
- </div>
- </div>
- <script>
- //console.log($("#video-box video").height())
- var video_height = $("#video-box").height();
- var video_width = $("#video-box").width();
- $("#video-box video").css('width',video_width);
- $("#video-box video").css('height',video_height);
- </script>
- <script>
- var sit1 = setTimeout(function (){
-
- $(".scroll-table-wspf").slimScroll({ size:0,width: $(".scroll-table-wspf").width(),height: $(".scroll-table-wspf").height()});
- $("#system-runing-msg").slimScroll({ size:0,width: $("#system-runing-msg").width(),height: $("#system-runing-msg").height()});
- /*右侧图表*/
- var dom_chart_gzfbqk = document.getElementById("chart-gzfbqk");
- var dom_chart_bjfx = document.getElementById("chart-bjfx");
- var dom_chart_sbgzphb = document.getElementById("chart-sbgzphb");
- var dom_chart_pcsssjc = document.getElementById("chart-pcsssjc");
- var dom_chart_codbod = document.getElementById("chart-codbod");
- var dom_chart_nh3ss = document.getElementById("chart-nh3ss");
- var dom_chart_zlph = document.getElementById("chart-zlph");
- var dom_chart_rhdl = document.getElementById("chart-rhdl");
- //污水
- var dom_chart_center1 = document.getElementById("chart-center1");
- var dom_chart_center2 = document.getElementById("chart-center2");
- var dom_chart_center3 = document.getElementById("chart-center3");
- var myChart_chart_gzfbqk = echarts.init(dom_chart_gzfbqk);
- var myChart_chart_bjfx = echarts.init(dom_chart_bjfx);
- var myChart_chart_sbgzphb = echarts.init(dom_chart_sbgzphb);
- var myChart_chart_pcsssjc = echarts.init(dom_chart_pcsssjc);
- var myChart_chart_codbod = echarts.init(dom_chart_codbod);
- var myChart_chart_nh3ss = echarts.init(dom_chart_nh3ss);
- var myChart_chart_zlph = echarts.init(dom_chart_zlph);
- var myChart_chart_rhdl = echarts.init(dom_chart_rhdl);
- var myChart_chart_center1 = echarts.init(dom_chart_center1);
- var myChart_chart_center2 = echarts.init(dom_chart_center2);
- var myChart_chart_center3 = echarts.init(dom_chart_center3);
- var app = {};
- var option_chart_gzfbqk = null,option_chart_bjfx = null,option_chart_sbgzphb = null,option_chart_pcsssjc = null,option_chart_codbod = null,option_chart_nh3ss = null,option_chart_zlph = null,option_chart_rhdl = null,option_chart_center1 = null,option_chart_center2 = null,option_chart_center3 = null;
- //故障分布情况饼状图
- option_chart_gzfbqk = {
- title : {
- text: '故\n障\n分\n布\n情\n况',
- top:'middle',
- left:'10%',
- textStyle:{
- fontWeight:'normal',
- fontSize:'14',
- color:'#ccf5f9',
- }
- },
- color: ['#6f3ed5', '#cfb838', '#a92149','#da215b','#ea5e69'], //环形图每块的颜色
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- series : [
- {
- name:'故障分布情况',
- type:'pie',
- radius : ['20%', '70%'],
- center : ['55%', '50%'],
- data:[
- {value:'${zc}', name:'正常'},
- {value:'${bj}', name:'报警'},
- {value:'${lx}', name:'离线'},
- {value:'${gz}', name:'故障'},
- ],
- label: {
- normal: {
- show: true,
- position:'outside', //标签的位置
- textStyle : {
- fontSize : 12 ,
- color:'#ccf5f9'
- },
- formatter:'{b}\n{d}%'
- }
- },
- labelLine: {
- normal: {
- show: true
- }
- },
- }
- ]
- };
- //报警分析柱状图
- option_chart_bjfx = {
- color:['#e43e70','#3a25ae'],
- tooltip : {
- trigger: 'axis',
- axisPointer : { // 坐标轴指示器,坐标轴触发有效
- type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- },
-
-
- },
- grid: {
- x: '10%',
- y: '10%',
- x2: '10%',
- y2: '10%',
- containLabel: true
-
- },
- legend: {
- data: ['报警总次数', '已处理报警'],
- icon:'circle',
- itemGap: 5,
- itemWidth:10,
- bottom: '2%',
- x:'center',
- textStyle:{
- color:'#ccf5f9',
- },
- },
- xAxis :{
- type : 'category',
- data : ['06.12', '06.13', '06.14','06.15','06.16','06.17','06.18'],
- axisTick: {
- alignWithLabel: true
- },
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
- fontSize:10
- },
- rotate: 30,
- }
-
- },
- yAxis :{
- type : 'value',
-
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- splitLine:{
- lineStyle: {
- type: 'solid',
- color: 'rgba(72,101,227,0.7)',
- width:'1'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- }
- },
- series : [
- {
-
- type:'bar',
- barWidth: '30%',
- name:'报警总次数',
- data:[45,56, 66,34,23,67,34],
-
- },
- {
-
- type:'bar',
- barWidth: '30%',
- name:'已处理报警',
- data:[26, 18, 46,32,10,28,24],
-
- }
- ]
- };
- //设备故障排行榜 柱状图
- option_chart_sbgzphb = {
- tooltip : {
- trigger: 'axis',
- axisPointer : { // 坐标轴指示器,坐标轴触发有效
- type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- },
- },
- grid: {
- x: '10%',
- y: '10%',
- x2: '10%',
- y2: '10%',
- containLabel: true
-
- },
- yAxis :{
- type : 'category',
- data : ['排水阀', '上排阀', '下排阀','增加泵','加药泵','高压泵','冲洗泵'],
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
- fontSize:12
- },
-
- },
- splitLine:{
- lineStyle: {
- type: 'solid',
- color: 'rgba(72,101,227,0.7)',
- width:'1'
- }
- },
-
- },
- xAxis :{
- type : 'value',
-
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- },
- splitLine:{
- show:false
- }
- },
- series : [
- {
-
- type:'bar',
- barWidth: '50%',
- name:'设备故障排行榜',
- data:[34,45, 56,69,79,87,98],
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
- offset: 0,
- color: '#e18f91'
- },
- {
- offset: 1,
- color: '#3824aa'
- }]),
- label: {
- show: true, //开启显示
- position: 'right', //在上方显示
- textStyle: { //数值样式
- color: '#ccf5f9',
- fontSize: 12
- },
- formatter: '{c}'
- }
- }
- }
- }
- ]
- };
- //排出水实时监测 柱状图
- option_chart_pcsssjc = {
- tooltip : {
- trigger: 'axis',
- axisPointer : { // 坐标轴指示器,坐标轴触发有效
- type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
- },
-
-
- },
- grid: {
- x: '10%',
- y: '30%',
- x2: '10%',
- y2: '3%',
- containLabel: true
-
- },
- xAxis :{
- type : 'category',
- data : ['NH3', 'COD', 'BOD','SS','总磷','PH'],
- axisTick: {
- alignWithLabel: true
- },
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- }
-
- },
- yAxis :[{
- type : 'value',
- name: 'mg/L',
- scale: true,
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- splitLine:{
- lineStyle: {
- type: 'solid',
- color: 'rgba(72,101,227,0.8)',
- width:'1'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- }
- }],
- series : [
- {
- name:'排水实时监测',
- type:'bar',
- barWidth: '40%',
- data:[56, 79, 93,62,58,23],
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: '#851c9d'
- },
- {
- offset: 1,
- color: '#4805ad'
- }]),
- label: {
- show: true, //开启显示
- position: 'top', //在上方显示
- textStyle: { //数值样式
- color: '#ccf5f9',
- fontSize: 12
- },
- formatter: '{c}'
- }
- }
- },
- }
- ]
- };
- //codbod曲线
- option_chart_codbod = {
- title : {
- text: 'COD/BOD曲线',
- top:'2%',
- left:'3%',
- textStyle:{
- fontWeight:'normal',
- fontSize:'14',
- color:'#ccf5f9',
- }
- },
- color:['#d3aa54','#d15533'],
- grid:{
- x:'5%',
- y:'20%',
- x2:'5%',
- y2:'10%',
- containLabel:true
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45'],
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
- }
- },
- yAxis: {
- type : 'value',
- name:'mg/L',
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- splitLine:{
- lineStyle: {
- type: 'solid',
- color: 'rgba(72,101,227,0.8)',
- width:'1'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- }
- },
- series: [{
- data: [82, 92, 34, 48, 24, 69, 49],
- type: 'line',
- name:'COD'
- },{
- data: [12, 22, 34, 48, 52, 36, 43],
- type: 'line',
- name:'BOD'
- }]
- };
- //NH3/SS曲线
- option_chart_nh3ss = {
- title : {
- text: 'NH3/SS曲线',
- top:'2%',
- left:'3%',
- textStyle:{
- fontWeight:'normal',
- fontSize:'14',
- color:'#ccf5f9',
- }
- },
- color:['#d3aa54','#d15533'],
- grid:{
- x:'5%',
- y:'20%',
- x2:'5%',
- y2:'10%',
- containLabel:true
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45'],
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
- }
- },
- yAxis: {
- type : 'value',
- name:'mg/L',
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- splitLine:{
- lineStyle: {
- type: 'solid',
- color: 'rgba(72,101,227,0.8)',
- width:'1'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- }
- },
- series: [{
- data: [82, 92, 34, 48, 24, 69, 49],
- type: 'line',
- name:'NH3'
- },{
- data: [12, 22, 34, 48, 52, 36, 43],
- type: 'line',
- name:'SS'
- }]
- };
- //总磷/PH曲线
- option_chart_zlph = {
- title : {
- text: '总磷/PH曲线',
- top:'2%',
- left:'3%',
- textStyle:{
- fontWeight:'normal',
- fontSize:'14',
- color:'#ccf5f9',
- }
- },
- color:['#d3aa54','#d15533'],
- grid:{
- x:'5%',
- y:'20%',
- x2:'5%',
- y2:'10%',
- containLabel:true
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45'],
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
- }
- },
- yAxis: {
- type : 'value',
- min: function(value) {
- return value.min - 1;
- },
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- splitLine:{
- lineStyle: {
- type: 'solid',
- color: 'rgba(72,101,227,0.8)',
- width:'1'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- }
- },
- series: [{
- data: [6.5, 6.3, 7.8, 7.2, 8.3, 6.3, 9.0],
- type: 'line',
- name:'总磷'
- },{
- data: [5.6, 6.7, 6.1, 6.4,7.4, 8.3, 8.9],
- type: 'line',
- name:'PH'
- }]
- };
- //日耗电量曲线
- option_chart_rhdl = {
- title : {
- text: '日耗电量',
- top:'2%',
- left:'3%',
- textStyle:{
- fontWeight:'normal',
- fontSize:'14',
- color:'#ccf5f9',
- }
- },
- color:['#d3aa54','#d15533'],
- grid:{
- x:'5%',
- y:'20%',
- x2:'5%',
- y2:'10%',
- containLabel:true
- },
- tooltip: {
- trigger: 'axis'
- },
- xAxis: {
- type: 'category',
- data: ['06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21'],
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
- }
- },
- yAxis: {
- type : 'value',
- min: function(value) {
- return value.min - 1;
- },
- axisLine: {
- show: true,
- lineStyle: {
- type: 'solid',
- color: '#4865e3',//左边线的颜色
- width:'1'//坐标线的宽度
- }
- },
- splitLine:{
- lineStyle: {
- type: 'solid',
- color: 'rgba(72,101,227,0.8)',
- width:'1'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#ccf5f9',
-
- },
-
- }
- },
- series: [{
- data: [6.5, 6.3, 7.8, 7.2, 8.3, 6.3, 9.0],
- type: 'line',
- name:'总磷'
- },{
- data: [5.6, 6.7, 6.1, 6.4,7.4, 8.3, 8.9],
- type: 'line',
- name:'PH'
- }]
- };
- if (option_chart_gzfbqk && typeof option_chart_gzfbqk === "object") {
- myChart_chart_gzfbqk.setOption(option_chart_gzfbqk, true);
- }
- if (option_chart_bjfx && typeof option_chart_bjfx === "object") {
- myChart_chart_bjfx.setOption(option_chart_bjfx, true);
- }
- if (option_chart_sbgzphb && typeof option_chart_sbgzphb === "object") {
- myChart_chart_sbgzphb.setOption(option_chart_sbgzphb, true);
- }
- if (option_chart_pcsssjc && typeof option_chart_pcsssjc === "object") {
- myChart_chart_pcsssjc.setOption(option_chart_pcsssjc, true);
- }
- //污水处理3D相关图表
- //每日污水处理量 柱状图
- option_chart_center1 = {
- title : {
- text : 'COD/BOD曲线',
- top : '2%',
- left : '3%',
- textStyle : {
- fontWeight : 'normal',
- fontSize : '14',
- color : '#ccf5f9',
- }
- },
- color : [ '#d3aa54', '#d15533' ],
- grid : {
- x : '3%',
- y : '30%',
- x2 : '3%',
- y2 : '10%',
- containLabel : true
- },
- tooltip : {
- trigger : 'axis'
- },
- xAxis : {
- type : 'category',
- data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
- axisLine : {
- show : true,
- lineStyle : {
- type : 'solid',
- color : '#4865e3', //左边线的颜色
- width : '1' //坐标线的宽度
- }
- },
- axisLabel : {
- textStyle : {
- color : '#ccf5f9',
- },
- }
- },
- yAxis : {
- type : 'value',
- name : 'mg/L',
- axisLine : {
- show : true,
- lineStyle : {
- type : 'solid',
- color : '#4865e3', //左边线的颜色
- width : '1' //坐标线的宽度
- }
- },
- splitLine : {
- lineStyle : {
- type : 'solid',
- color : 'rgba(72,101,227,0.8)',
- width : '1'
- }
- },
- axisLabel : {
- textStyle : {
- color : '#ccf5f9',
- },
- }
- },
- series : [ {
- data : [ 221.2, 156.3, 119.1, 217.6, 252.1, 221.7, 127.9 ],
- type : 'line',
- name : 'COD'
- }, {
- data : [ 120.3, 72.7, 69.9, 89.8, 78.3, 64.9, 54.9 ],
- type : 'line',
- name : 'BOD'
- } ]
- };
- //每日能耗 柱状图
- option_chart_center2 = {
- title : {
- text : 'NH3/SS曲线',
- top : '2%',
- left : '3%',
- textStyle : {
- fontWeight : 'normal',
- fontSize : '14',
- color : '#ccf5f9',
- }
- },
- color : [ '#d3aa54', '#d15533' ],
- grid : {
- x : '3%',
- y : '30%',
- x2 : '3%',
- y2 : '10%',
- containLabel : true
- },
- tooltip : {
- trigger : 'axis'
- },
- xAxis : {
- type : 'category',
- data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
- axisLine : {
- show : true,
- lineStyle : {
- type : 'solid',
- color : '#4865e3', //左边线的颜色
- width : '1' //坐标线的宽度
- }
- },
- axisLabel : {
- textStyle : {
- color : '#ccf5f9',
- },
- }
- },
- yAxis : {
- type : 'value',
- name : 'mg/L',
- axisLine : {
- show : true,
- lineStyle : {
- type : 'solid',
- color : '#4865e3', //左边线的颜色
- width : '1' //坐标线的宽度
- }
- },
- splitLine : {
- lineStyle : {
- type : 'solid',
- color : 'rgba(72,101,227,0.8)',
- width : '1'
- }
- },
- axisLabel : {
- textStyle : {
- color : '#ccf5f9',
- },
- }
- },
- series : [ {
- data : [ 73.1, 66.8, 54.8, 69.3, 57.8, 44.9, 79.1 ],
- type : 'line',
- name : 'NH3'
- }, {
- data : [ 120.1, 112.7, 119.7, 88.9, 134.2, 122.8, 155.3 ],
- type : 'line',
- name : 'SS'
- } ]
- };
- //温度
- option_chart_center3 = {
- title : {
- text : '总磷/PH曲线',
- top : '2%',
- left : '3%',
- textStyle : {
- fontWeight : 'normal',
- fontSize : '14',
- color : '#ccf5f9',
- }
- },
- color : [ '#d3aa54', '#d15533' ],
- grid : {
- x : '3%',
- y : '30%',
- x2 : '3%',
- y2 : '10%',
- containLabel : true
- },
- tooltip : {
- trigger : 'axis'
- },
- xAxis : {
- type : 'category',
- data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
- axisLine : {
- show : true,
- lineStyle : {
- type : 'solid',
- color : '#4865e3', //左边线的颜色
- width : '1' //坐标线的宽度
- }
- },
- axisLabel : {
- textStyle : {
- color : '#ccf5f9',
- },
- }
- },
- yAxis : {
- type : 'value',
- min : function(value) {
- return value.min - 1;
- },
- axisLine : {
- show : true,
- lineStyle : {
- type : 'solid',
- color : '#4865e3', //左边线的颜色
- width : '1' //坐标线的宽度
- }
- },
- splitLine : {
- lineStyle : {
- type : 'solid',
- color : 'rgba(72,101,227,0.8)',
- width : '1'
- }
- },
- axisLabel : {
- textStyle : {
- color : '#ccf5f9',
- },
- }
- },
- series : [ {
- data : [ 6.5, 6.3, 7.8, 7.2, 8.3, 6.3, 8.0 ],
- type : 'line',
- name : '总磷'
- }, {
- data : [ 5.6, 6.7, 6.1, 6.4, 7.4, 8.3, 8.9 ],
- type : 'line',
- name : 'PH'
- } ]
- };
- if (option_chart_center1 && typeof option_chart_center1 === "object") {
- myChart_chart_center1.setOption(option_chart_center1, true);
- }
- if (option_chart_center2 && typeof option_chart_center2 === "object") {
- myChart_chart_center2.setOption(option_chart_center2, true);
- }
- if (option_chart_center3 && typeof option_chart_center3 === "object") {
- myChart_chart_center3.setOption(option_chart_center3, true);
- }
- //污水处理3D效果部分
- function randomNum(maxNum, minNum, decimalNum) {
- var max = 0, min = 0;
- minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
- switch (arguments.length) {
- case 1:
- return Math.floor(Math.random() * (max + 1));
- break;
- case 2:
- return Math.floor(Math.random() * (max - min + 1) + min);
- break;
- case 3:
- return (Math.random() * (max - min) + min).toFixed(decimalNum);
- break;
- default:
- return Math.random();
- break;
- }
- }
- var renderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action,datGui,labelRenderer;
- var clock = new THREE.Clock();
- function initRender() {
- renderer = new THREE.WebGLRenderer({antialias: true});
- renderer.setPixelRatio(window.devicePixelRatio);
- renderer.setSize($('#WebGL-output').width(),$('#WebGL-output').height());
- renderer.setClearColor(0xeeeeee);
- renderer.shadowMap.enabled = true;
- //告诉渲染器需要阴影效果
- $("#WebGL-output").append(renderer.domElement);
- labelRenderer = new THREE.CSS2DRenderer();
- labelRenderer.setSize( $("#WebGL-output").width(), $("#WebGL-output").height() );
- labelRenderer.domElement.style.position = 'absolute';
- labelRenderer.domElement.style.top = 0;
- $("#WebGL-output").append( labelRenderer.domElement );
- }
- function initCamera() {
- var fov = 40;//拍摄距离
- var near = 1;//最小范围
- var far = 1000;//最大范围
- camera = new THREE.PerspectiveCamera(fov,$('#WebGL-output').width()/$('#WebGL-output').height(),near,far);//相机构建
- //camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
- camera.position.set(600, 300, 300 );
- }
- function initScene() {
- scene = new THREE.Scene();
- scene.background = new THREE.Color( 0xa0a0a0 );
- scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
-
- }
- //初始化dat.GUI简化试验流程
- function initGui() {
- //声明一个保存需求修改的相关数据的对象
- gui = {
- helper:true //模型辅助线
- };
- //datGui = new dat.GUI();
- //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
- /* datGui.add(gui, "helper").onChange(function (e) {
- meshHelper.visible = e;
- }) */
- }
- function initLight() {
- scene.add(new THREE.AmbientLight(0x444444));
- light = new THREE.DirectionalLight(0xffffff);
- light.position.set(0, 200, 100 );
- light.castShadow = true;
- light.shadow.camera.top = 180;
- light.shadow.camera.bottom = -100;
- light.shadow.camera.left = -120;
- light.shadow.camera.right = 120;
- //告诉平行光需要开启阴影投射
- light.castShadow = true;
- scene.add(light);
- }
- function initModel() {
- //辅助工具
- //var helper = new THREE.AxesHelper(50);
- //scene.add(helper);
- // 地板
- /*var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
- mesh.rotation.x = - Math.PI / 2;
- mesh.receiveShadow = true;
- scene.add( mesh );
- //添加地板割线
- var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
- grid.material.opacity = 0.2;
- grid.material.transparent = true;
- scene.add( grid );*/
-
- //加载模型
- var loader = new THREE.FBXLoader();
- loader.load("views/htclient/source/污水处理16.FBX", function (mesh) {
-
- console.log(mesh);
- //添加骨骼辅助
- //meshHelper = new THREE.SkeletonHelper(mesh);
- //scene.add(meshHelper);
-
- //设置模型的每个部位都可以投影
- /* mesh.traverse( function ( child ) {
- if ( child.isMesh ) {
- child.castShadow = true;
- child.receiveShadow = true;
- }
- } );*/
- //AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时,可以为每个对象使用一个AnimationMixer
- mixer = mesh.mixer = new THREE.AnimationMixer(mesh);
- console.log(mesh.animations.length)
- //mixer.clipAction 返回一个可以控制动画的AnimationAction对象 参数需要一个AnimationClip 对象
- //AnimationAction.setDuration 设置一个循环所需要的时间,当前设置了一秒
- //告诉AnimationAction启动该动作
- //action = mixer.clipAction(mesh.animations[0]);
- //action.play();
-
- var actions = []; //所有的动画数组
- //var animations = datGui.addFolder("animations");
- for(var i=0; i<mesh.animations.length; i++){
- createAction(i);
- }
-
- #if("$!zxzt" == "0")
- actions[0].play();
- #else
- actions[0].stop();
- #end
- function createAction(i){
- actions[i] = mixer.clipAction(mesh.animations[i]);
-
- gui["action"+i] = function () {
- for(var j=0; j<actions.length; j++){
- if(j === i){
- actions[j].play();
- }
- else{
- actions[j].stop();
- }
- }
- };
- //animations.add(gui, "action"+i);
-
- }
- //添加暂停所有动画的按键
- /* gui.stop = function(){
- for(var i=0; i<actions.length; i++){
- actions[i].stop();
- }
- }; */
- //datGui.add(gui, "stop");
- //mesh.position.y += 100;
- scene.add(mesh);
- //标注1
- var geometry1 = new THREE.Geometry();
- geometry1.vertices.push(
- new THREE.Vector3(2, 1, 5),
- new THREE.Vector3(2, 3, 5)
- );
- geometry1.colors.push(
- new THREE.Color( 0x3c92f5 )
- )
- var material1 = new THREE.LineBasicMaterial({ vertexColors: true });
- var line1 = new THREE.Line(geometry1, material1);
- mesh.add( line1 );
- var labelDiv1 = document.createElement( 'div' );
- labelDiv1.className = 'label label1';
- labelDiv1.textContent = '0.0m³/h';
- labelDiv1.style.marginTop = '-1em';
- labelDiv1.style.color = '#fff';
- var dataLabel1 = new THREE.CSS2DObject( labelDiv1 );
- dataLabel1.position.set( 2, 3, 5 );
- mesh.add( dataLabel1 );
- //标注2
- var geometry2 = new THREE.Geometry();
- geometry2.vertices.push(
- new THREE.Vector3(-2, 0, 1.8),
- new THREE.Vector3(-2, 3, 1.8)
- );
- geometry2.colors.push(
- new THREE.Color( 0x3c92f5 )
- )
- var material2 = new THREE.LineBasicMaterial({ vertexColors: true });
- var line2 = new THREE.Line(geometry2, material2);
- mesh.add( line2 );
- var labelDiv2 = document.createElement( 'div' );
- labelDiv2.className = 'label label2';
- labelDiv2.textContent = '0.0m³/h';
- labelDiv2.style.marginTop = '-1em';
- labelDiv2.style.color = '#fff';
- var dataLabel2 = new THREE.CSS2DObject( labelDiv2 );
- dataLabel2.position.set( -2, 3, 1.8 );
- mesh.add( dataLabel2 );
- //标注3
- var geometry3 = new THREE.Geometry();
- geometry3.vertices.push(
- new THREE.Vector3(-0.3, 0.3, -6.5),
- new THREE.Vector3(-0.3, 3, -6.5)
- );
- geometry3.colors.push(
- new THREE.Color( 0x3c92f5 )
- )
- var material3 = new THREE.LineBasicMaterial({ vertexColors: true });
- var line3 = new THREE.Line(geometry3, material3);
- mesh.add( line3 );
- var labelDiv3 = document.createElement( 'div' );
- labelDiv3.className = 'label label3';
- labelDiv3.textContent = '0.0m³/h';
- labelDiv3.style.marginTop = '-1em';
- labelDiv3.style.color = '#fff';
- var dataLabel3 = new THREE.CSS2DObject( labelDiv3 );
- dataLabel3.position.set( -0.3, 3, -6.5 );
- mesh.add( dataLabel3 );
- //标注4
- var geometry4 = new THREE.Geometry();
- geometry4.vertices.push(
- new THREE.Vector3(0.9, 0.6, -6.2),
- new THREE.Vector3(0.9, 2, -6.2)
- );
- geometry4.colors.push(
- new THREE.Color( 0x3c92f5 )
- )
- var material4 = new THREE.LineBasicMaterial({ vertexColors: true });
- var line4 = new THREE.Line(geometry4, material4);
- mesh.add( line4 );
- var labelDiv4 = document.createElement( 'div' );
- labelDiv4.className = 'label label4';
- labelDiv4.textContent = '0.0m³/h';
- labelDiv4.style.marginTop = '-1em';
- labelDiv4.style.color = '#fff';
- var dataLabel4 = new THREE.CSS2DObject( labelDiv4 );
- dataLabel4.position.set( 0.9, 2, -6.2 );
- mesh.add( dataLabel4 );
- });
- }
- //初始化性能插件
- /* function initStats() {
- stats = new Stats();
- $("#WebGL-output").append(stats.dom);
- }
- */
- function initControls() {
- //controls = new THREE.OrbitControls(camera, renderer.domElement);
- controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
- //设置控制器的中心点
- //controls.target.set( 0, 100, 0 );
- // 如果使用animate方法时,将此函数删除
- //controls.addEventListener( 'change', render );
- // 使动画循环使用时阻尼或自转 意思是否有惯性
- controls.enableDamping = true;
- //动态阻尼系数 就是鼠标拖拽旋转灵敏度
- //controls.dampingFactor = 0.25;
- //是否可以缩放
- controls.enableZoom = true;
- //是否自动旋转
- controls.autoRotate = false;
- controls.autoRotateSpeed = 0.5;
- //设置相机距离原点的最远距离
- controls.minDistance = 1;
- //设置相机距离原点的最远距离
- controls.maxDistance = 30;
- //是否开启右键拖拽
- controls.enablePan = true;
- }
- function render() {
- var time = clock.getDelta();
- if (mixer) {
- mixer.update(time);
- }
- controls.update();
- }
- //窗口变动触发的函数
- function onWindowResize() {
- camera.aspect = $('#WebGL-output').width() / $('#WebGL-output').height();
- camera.updateProjectionMatrix();
- renderer.setSize($('#WebGL-output').width(), $('#WebGL-output').height());
- }
- function animate() {
- //更新控制器
- render();
- //更新性能插件
- //stats.update();
- renderer.render(scene, camera);
- labelRenderer.render(scene, camera);
- requestAnimationFrame(animate);
- }
- function draw() {
- //兼容性判断
- if (!Detector.webgl) Detector.addGetWebGLMessage();
- initGui();
- initRender();
- initScene();
- initCamera();
- initLight();
- initModel();
- initControls();
- //initStats();
- animate();
- window.onresize = onWindowResize;
- }
- draw();
- #if("$!zxzt" == "0")
- window.setInterval(function(){
- var data1 = randomNum(0.8,0.5,1);
- var data2 = randomNum(0.8,0.5,1);
- var data3 = randomNum(0.8,0.5,1);
- var data4 = randomNum(0.8,0.5,1);
- $(".label1").text(data1+"m³/h");
- $(".label2").text(data2+"m³/h");
- $(".label3").text(data3+"m³/h");
- $(".label4").text(data4+"m³/h");
- },3000);
- #end
-
- ////////
- //数字滚动
- var day_sum = 50.51;
- var sum = 13000.01;
- show_num1(day_sum,sum);
- $(function() {
- setInterval(function(){
- show_num1(day_sum,sum);
- var addn = 3.5;
- day_sum=(parseFloat(day_sum)+addn).toFixed(2);
- //sum+=day_sum;
- },86400);
- });
- function show_num1(n,m) {
- var numArr = String(n).split('.');
- var sumArr = String(m).split('.');
- addHt('.t_num1',numArr[0]);
- addHt('.t_num2',numArr[1]);
- addHt('.t_num3',sumArr[0]);
- addHt('.t_num4',sumArr[1]);
- //$("#cur_num").val(n);
- }
- function addHt(h,t){
- var it = $(h+" i");
- var len1 = t.length;
- for(var i = 0; i < len1; i++) {
- if(it.length <= i) {
- $(h).append("<i></i>");
- }
- var num = t.charAt(i);
- //根据数字图片的高度设置相应的值
- var y = -parseInt(num) * 29;
- var obj = $(h+" i").eq(i);
- obj.animate({
- backgroundPosition: '(0 ' + String(y) + 'px)'
- }, 'slow', 'swing', function() {});
- }
- }
-
- var playerElement6 = document.getElementById("player6");
- var player6 = new Clappr.Player({
- source: 'http://hls01open.ys7.com/openlive/dfc96f55e0914fecad4f02b7fae67227.m3u8',
- //poster: 'http://clappr.io/poster.png',
- mute: true
- });
-
- player6.attachTo(playerElement6);
- player6.play();
-
-
-
- },1000);
-
- </script>
- <script type="text/javascript" src="views/htclient/wscl/wscl.js"></script>
- </body>
- </html>
|