wscl.htm 71 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>污水处理系统</title>
  6. <link href="views/htclient/css/wscl.css" rel="stylesheet">
  7. <link href="views/htclient/css/ios6switch.css" rel="stylesheet">
  8. <script type="text/javascript" src="views/htclient/js/digitalScroll.js"></script>
  9. <script type="text/javascript" src="views/htclient/js/ios6switch.js"></script>
  10. <script src="views/htclient/js/three.min.js"></script>
  11. <script src="views/htclient/js/inflate.min.js"></script>
  12. <script src="views/htclient/js/FBXLoader.js"></script>
  13. <script src="views/htclient/js/OrbitControls.js"></script>
  14. <script src="views/htclient/js/NURBSCurve.js"></script>
  15. <script src="views/htclient/js/NURBSUtils.js"></script>
  16. <!-- <script src="views/htclient/js/Stats.min.js"></script> -->
  17. <script src="views/htclient/js/dat.gui.min.js"></script>
  18. <script src="views/htclient/js/Detector.js"></script>
  19. <script src="views/htclient/js/CSS2DRenderer.js"></script>
  20. <style>
  21. #player6>div{
  22. width:454px !important;
  23. height:185px !important;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class='grid-common right-grid'>
  29. <div class="grid-common right-grid-left">
  30. <div class='wrapper'>
  31. <div class='tab'>
  32. <div class='tab-bid'>污水排放标准</div>
  33. </div>
  34. <div class="wrapper-content">
  35. <div class="content-container flex-column-table">
  36. <div class='zhejiao zhejiao-1'></div>
  37. <div class='zhejiao zhejiao-2'></div>
  38. <div class='zhejiao zhejiao-3'></div>
  39. <div class='zhejiao zhejiao-4'></div>
  40. <div class='table-wspf'>
  41. <div class='table-wspf-head'>畜禽养殖业污染物排放标准(GB18596-2001)</div>
  42. <table cellpadding='0' cellspacing='0' border='0'>
  43. <tbody>
  44. <tr>
  45. <th>BOD(mg/L)</th>
  46. <th>COD(mg/L)</th>
  47. <th>SS(mg/L)</th>
  48. <th>NH3(mg/L)</th>
  49. </tr>
  50. <tr>
  51. <td>150</td>
  52. <td>400</td>
  53. <td>200</td>
  54. <td>80</td>
  55. </tr>
  56. <tr>
  57. <th>总磷(mg/L)</th>
  58. <th>粪大肠菌群数(个/100mL)</th>
  59. <th>蛔虫卵(个/L)</th>
  60. <th>PH</th>
  61. </tr>
  62. <tr>
  63. <td>8.0</td>
  64. <td>1000</td>
  65. <td>2.0</td>
  66. <td>6~9</td>
  67. </tr>
  68. </tbody>
  69. </table>
  70. </div>
  71. <div class='table-wspf'>
  72. <div class='table-wspf-head'>工业污水排放标准(GB18466-2005、GB20426-2006、GB20425-2006)</div>
  73. <div class='scroll-table-wspf'>
  74. <table cellpadding='0' cellspacing='0' border='0'>
  75. <tbody>
  76. <tr>
  77. <th>污染物</th>
  78. <th>一级</th>
  79. <th>二级</th>
  80. <th>三级</th>
  81. </tr>
  82. <tr>
  83. <td>BOD(mg/L)</td>
  84. <td>30</td>
  85. <td>60</td>
  86. <td>300</td>
  87. </tr>
  88. <tr>
  89. <td>COD(mg/L)</td>
  90. <td>100</td>
  91. <td>150</td>
  92. <td>500</td>
  93. </tr>
  94. <tr>
  95. <td>SS(mg/L)</td>
  96. <td>70</td>
  97. <td>200</td>
  98. <td>400</td>
  99. </tr>
  100. <tr>
  101. <td>NH3(mg/L)</td>
  102. <td>15</td>
  103. <td>25</td>
  104. <td>-</td>
  105. </tr>
  106. </tbody>
  107. </table>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. <div class='wrapper'>
  114. <div class='tab'>
  115. <div class='tab-bid'>故障分布情况</div>
  116. </div>
  117. <div class="wrapper-content">
  118. <div class="content-container">
  119. <div class='zhejiao zhejiao-1'></div>
  120. <div class='zhejiao zhejiao-2'></div>
  121. <div class='zhejiao zhejiao-3'></div>
  122. <div class='zhejiao zhejiao-4'></div>
  123. <div id='chart-gzfbqk'></div>
  124. </div>
  125. </div>
  126. </div>
  127. <div class='wrapper'>
  128. <div class='tab'>
  129. <div class='tab-bid'>报警分析</div>
  130. </div>
  131. <div class="wrapper-content">
  132. <div class="content-container">
  133. <div class='zhejiao zhejiao-1'></div>
  134. <div class='zhejiao zhejiao-2'></div>
  135. <div class='zhejiao zhejiao-3'></div>
  136. <div class='zhejiao zhejiao-4'></div>
  137. <div id='chart-bjfx'></div>
  138. </div>
  139. </div>
  140. </div>
  141. <div class='wrapper'>
  142. <div class='tab'>
  143. <div class='tab-bid'>设备故障排行榜</div>
  144. </div>
  145. <div class="wrapper-content">
  146. <div class="content-container">
  147. <div class='zhejiao zhejiao-1'></div>
  148. <div class='zhejiao zhejiao-2'></div>
  149. <div class='zhejiao zhejiao-3'></div>
  150. <div class='zhejiao zhejiao-4'></div>
  151. <div id='chart-sbgzphb'></div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. <div class="grid-common right-grid-center">
  157. <div class='wrapper'>
  158. <div class="wrapper-content chart-area">
  159. <div class="content-container">
  160. <div class="zhejiao zhejiao-1"></div>
  161. <div class="zhejiao zhejiao-2"></div>
  162. <div class="zhejiao zhejiao-3"></div>
  163. <div class="zhejiao zhejiao-4"></div>
  164. <div class='wscl-3dcontent'>
  165. <div class='wscl-datadetail'>
  166. <span class='day_handle_count'>当日处理量:</span>
  167. <span class="t_num t_num1"></span>
  168. <span class='num_dot'>.</span>
  169. <span class="t_num t_num2"></span>
  170. <span class='all_handle_count'>总处理量:</span>
  171. <span class="t_num t_num3"></span>
  172. <span class='num_dot'>.</span>
  173. <span class="t_num t_num4"></span>
  174. </div>
  175. <div id='WebGL-output'></div>
  176. <div class="right-wsclset">
  177. <div class="wsclset-item set-itembottom">固液分离单元组件<img src="views/htclient/images/set.png" /></div>
  178. <div class="wsclset-item set-itembottom">沼液浓缩单元组件<img src="views/htclient/images/set.png" /></div>
  179. <div class="wsclset-item">沼液浓缩单元参数<img src="views/htclient/images/set.png" /></div>
  180. <div class="wsclset-item" style="display:none;">参数设置中...<img src="views/htclient/images/set.png" /></div>
  181. </div>
  182. <div id='chart-ws-data'>
  183. <div id='chart-center1'></div>
  184. <div id='chart-center2'></div>
  185. <div id='chart-center3'></div>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <div class='wrapper pding-2'>
  192. <div class='content-container justify-around'>
  193. <div class="zhejiao zhejiao-1"></div>
  194. <div class="zhejiao zhejiao-2"></div>
  195. <div class="zhejiao zhejiao-3"></div>
  196. <div class="zhejiao zhejiao-4"></div>
  197. <div class='data-statis'>
  198. <div class="zhejiao zhejiao-1"></div>
  199. <div class="zhejiao zhejiao-2"></div>
  200. <div class="zhejiao zhejiao-3"></div>
  201. <div class="zhejiao zhejiao-4"></div>
  202. <div class='data-circle'>
  203. <div class='data-circle-num'>22</div>
  204. <div class='data-circle-line'></div>
  205. <div class='data-circle-item'>合作客户数</div>
  206. <div class='data-circle-name'>新客户</div>
  207. <div class='data-circle-value'>浙江慧牧科技有限公司</div>
  208. </div>
  209. </div>
  210. <div class='data-statis'>
  211. <div class="zhejiao zhejiao-1"></div>
  212. <div class="zhejiao zhejiao-2"></div>
  213. <div class="zhejiao zhejiao-3"></div>
  214. <div class="zhejiao zhejiao-4"></div>
  215. <div class='data-circle'>
  216. <div class='data-circle-num'>22</div>
  217. <div class='data-circle-line'></div>
  218. <div class='data-circle-item'>系统销售总数</div>
  219. <div class='data-circle-name'>新销售量</div>
  220. <div class='data-circle-value'>4套</div>
  221. </div>
  222. </div>
  223. <div class='data-statis'>
  224. <div class="zhejiao zhejiao-1"></div>
  225. <div class="zhejiao zhejiao-2"></div>
  226. <div class="zhejiao zhejiao-3"></div>
  227. <div class="zhejiao zhejiao-4"></div>
  228. <div class='data-circle'>
  229. <div class='data-circle-num'>124</div>
  230. <div class='data-circle-line'></div>
  231. <div class='data-circle-item'>销售金额(万元)</div>
  232. <div class='data-circle-name'>销售额</div>
  233. <div class='data-circle-value'>110万</div>
  234. </div>
  235. </div>
  236. <div class='data-statis'>
  237. <div class="zhejiao zhejiao-1"></div>
  238. <div class="zhejiao zhejiao-2"></div>
  239. <div class="zhejiao zhejiao-3"></div>
  240. <div class="zhejiao zhejiao-4"></div>
  241. <div class='data-circle'>
  242. <div class='data-circle-num'>124</div>
  243. <div class='data-circle-line'></div>
  244. <div class='data-circle-item'>污水处理总量(吨)</div>
  245. <div class='data-circle-name'>今日处理量</div>
  246. <div class='data-circle-value'>34吨</div>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. <div class="grid-common right-grid-right">
  253. <div class='wrapper'>
  254. <div class='tab'>
  255. <div class='tab-bid widther-tab clickable-tab'>嘉兴嘉华粪污处理系统</div>
  256. </div>
  257. <div class="wrapper-content">
  258. <div class="content-container flex-column-table justify-around">
  259. <div class='zhejiao zhejiao-1'></div>
  260. <div class='zhejiao zhejiao-2'></div>
  261. <div class='zhejiao zhejiao-3'></div>
  262. <div class='zhejiao zhejiao-4'></div>
  263. <div class="mcjc-top-datetime">数据采集时间:$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!sjcjsj)</div>
  264. <div class="mcjc-top-datalist">
  265. <div class="mcjc-top-item">
  266. <div class="mcjc-top-itemname">固液分离单元</div>
  267. <div class="mcjc-top-itemname">沼液浓缩单元1区</div>
  268. <div class="mcjc-top-itemname">沼液浓缩单元2区</div>
  269. </div>
  270. <div class="mcjc-top-status">
  271. <div #if("$!gyzt" == "在线") class="mcjc-top-statusvalue" #else class="mcjc-top-statusvalue leave" #end>$!gyzt</div>
  272. <div #if("$!zy1" == "在线") class="mcjc-top-statusvalue" #else class="mcjc-top-statusvalue leave" #end>$!zy1</div>
  273. <div #if("$!zy2" == "在线") class="mcjc-top-statusvalue" #else class="mcjc-top-statusvalue leave" #end>$!zy2</div>
  274. </div>
  275. <div class="mcjc-top-style">
  276. <div #if("$!gyztStr" == "正常运行") class="mcjc-top-stylevalue" #else class="mcjc-top-stylevalue waiting" #end>$!{gyztStr}&nbsp;</div>
  277. <div #if("$!zy1Str" == "正常运行") class="mcjc-top-stylevalue" #else class="mcjc-top-stylevalue waiting" #end>$!{zy1Str}&nbsp;</div>
  278. <div #if("$!zy2Str" == "正常运行") class="mcjc-top-stylevalue" #else class="mcjc-top-stylevalue waiting" #end>$!{zy2Str}&nbsp;</div>
  279. </div>
  280. </div>
  281. <div class="mcjc-top-count">
  282. <div class="mcjc-top-count-part">
  283. <div class="mcjc-top-count-part-value">22天</div>
  284. <div class="mcjc-top-count-part-line"></div>
  285. <div class="mcjc-top-count-part-name">安全运行天数</div>
  286. </div>
  287. <div class="mcjc-top-count-part">
  288. <div class="mcjc-top-count-part-value">22吨</div>
  289. <div class="mcjc-top-count-part-line"></div>
  290. <div class="mcjc-top-count-part-name">日处理量</div>
  291. </div>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. <div class='wrapper'>
  297. <div class='tab'>
  298. <div class='tab-bid clickable-tab'>排出水实时监测</div>
  299. </div>
  300. <div class="wrapper-content">
  301. <div class="content-container">
  302. <div class='zhejiao zhejiao-1'></div>
  303. <div class='zhejiao zhejiao-2'></div>
  304. <div class='zhejiao zhejiao-3'></div>
  305. <div class='zhejiao zhejiao-4'></div>
  306. <div id='chart-pcsssjc'></div>
  307. </div>
  308. </div>
  309. </div>
  310. <div class='wrapper'>
  311. <div class='tab'>
  312. <div class='tab-bid clickable-tab'>排出水视频监控</div>
  313. </div>
  314. <div class="wrapper-content">
  315. <div class="content-container">
  316. <div class='zhejiao zhejiao-1'></div>
  317. <div class='zhejiao zhejiao-2'></div>
  318. <div class='zhejiao zhejiao-3'></div>
  319. <div class='zhejiao zhejiao-4'></div>
  320. <div id='video-box'>
  321. <div class='video-container player' id="player6"></div>
  322. </div>
  323. </div>
  324. </div>
  325. </div>
  326. <div class='wrapper'>
  327. <div class='tab'>
  328. <div class='tab-bid clickable-tab'>系统运行提醒</div>
  329. </div>
  330. <div class="wrapper-content">
  331. <div class="content-container">
  332. <div class='zhejiao zhejiao-1'></div>
  333. <div class='zhejiao zhejiao-2'></div>
  334. <div class='zhejiao zhejiao-3'></div>
  335. <div class='zhejiao zhejiao-4'></div>
  336. <div id='system-runing-msg'>
  337. #foreach($!obj in $!sbgzList)
  338. <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>
  339. #end
  340. <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>
  341. </div>
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. <div class='open-box-container'>
  348. <div class='open-lauer-box'>
  349. <div class="open-box-head">排出水水质监测图</div>
  350. <div class="open-box-body">
  351. <div class='open-box-chart-area' id='chart-codbod'></div>
  352. <div class='open-box-chart-area' id='chart-nh3ss'></div>
  353. <div class='open-box-chart-area' id='chart-zlph'></div>
  354. <div class='open-box-chart-area' id='chart-rhdl'></div>
  355. </div>
  356. </div>
  357. </div>
  358. <div class='open-box-container'>
  359. <div class='open-lauer-box'>
  360. <div class="open-box-head">排出水视频监控</div>
  361. <div class="open-box-body">
  362. <video autoplay="autoplay" muted loop style="object-fit: fill">
  363. <source src="views/htclient/source/video1.mp4" type="video/mp4" />
  364. </video>
  365. </div>
  366. </div>
  367. </div>
  368. <div class='open-box-container'>
  369. <div class='open-lauer-box'>
  370. <div class="open-box-head">系统运行提醒</div>
  371. <div class="open-box-body">
  372. <div class='open-box-msg-area left-line'>
  373. <div class='msg-area-header'>运维报警</div>
  374. <div class='msg-area-count'>
  375. <div class='left-count'>
  376. <img src='views/htclient/images/aq.png' />
  377. <div class='left-count-item'>
  378. <div class='left-count-name'>设备故障</div>
  379. <div class='left-count-value'>5</div>
  380. </div>
  381. </div>
  382. <div class='left-count'>
  383. <img src='views/htclient/images/aq.png' />
  384. <div class='left-count-item'>
  385. <div class='left-count-name'>预警总数</div>
  386. <div class='left-count-value'>25</div>
  387. </div>
  388. </div>
  389. </div>
  390. <div class='msg-area-list'>
  391. <div class='msg-area-content'>
  392. <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>
  393. <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>
  394. <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>
  395. <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>
  396. <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>
  397. <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>
  398. <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>
  399. <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>
  400. <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>
  401. <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>
  402. <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>
  403. <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>
  404. <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>
  405. <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>
  406. <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>
  407. <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>
  408. <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>
  409. <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>
  410. <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>
  411. <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>
  412. <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>
  413. <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>
  414. <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>
  415. <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>
  416. <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>
  417. <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>
  418. <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>
  419. <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>
  420. </div>
  421. </div>
  422. </div>
  423. <div class='open-box-msg-area'>
  424. <div class='msg-area-header'>维修保障</div>
  425. <div class='msg-area-count'>
  426. <div class='left-count'>
  427. <img src='views/htclient/images/warn_o.png' />
  428. <div class='left-count-item'>
  429. <div class='left-count-name'>待检修数</div>
  430. <div class='left-count-value'>5</div>
  431. </div>
  432. </div>
  433. <div class='left-count'>
  434. <img src='views/htclient/images/warn_o.png' />
  435. <div class='left-count-item'>
  436. <div class='left-count-name'>待保养数</div>
  437. <div class='left-count-value'>5</div>
  438. </div>
  439. </div>
  440. </div>
  441. <div class='msg-area-list'>
  442. <div class='msg-area-content'>
  443. <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>
  444. <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>
  445. <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>
  446. <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>
  447. <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>
  448. <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>
  449. <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>
  450. <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>
  451. <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>
  452. <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>
  453. <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>
  454. <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>
  455. <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>
  456. <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>
  457. <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>
  458. <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>
  459. <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>
  460. <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>
  461. <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>
  462. <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>
  463. <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>
  464. <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>
  465. <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>
  466. <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>
  467. <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>
  468. <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>
  469. <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>
  470. <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>
  471. </div>
  472. </div>
  473. </div>
  474. </div>
  475. </div>
  476. </div>
  477. <input type="hidden" id="pdbz1" value="$!pdbz1" />
  478. <input type="hidden" id="pdbz2" value="$!pdbz2" />
  479. <input type="hidden" id="pdbz3" value="$!pdbz3" />
  480. <input type="hidden" id="pdbz4" value="$!pdbz4" />
  481. <input type="hidden" id="gyzt" value="$!gyzt" />
  482. <input type="hidden" id="zy" value="$!zy" />
  483. <input type="hidden" id="mcid" value="$!mcid" />
  484. <input type="hidden" id="gyflid" value="$!wsclGyfldy.id" />
  485. <input type="hidden" id="zyfl1id" value="$!wsclZyns1.id" />
  486. <input type="hidden" id="zyfl2id" value="$!wsclZyns2.id" />
  487. <input type="hidden" id="yjqd" />
  488. <input type="hidden" id="yjtj" />
  489. <input type="hidden" id="uf1qd" />
  490. <input type="hidden" id="uf1tj" />
  491. <input type="hidden" id="nfqd" />
  492. <input type="hidden" id="nftj" />
  493. <input type="hidden" id="uf2qd" />
  494. <input type="hidden" id="uf2tj" />
  495. <input type="hidden" id="roqd" />
  496. <input type="hidden" id="rotj" />
  497. <input type="hidden" id="sfz0" />
  498. <div class="wscl-dataset-container">
  499. <div class="wscl-dataset-box">
  500. <div class="open-box-head">固液分离单元设置</div>
  501. <div class="open-box-body">
  502. <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="gyflsz">
  503. <tr>
  504. <td colspan="2" class="top-system-set">运行状态</td>
  505. <td class="top-system-set switch-block"><input type="checkbox" class="mycheckbox1" #if($!wsclGyfldy.zdyxkg == 1) checked #end/></td>
  506. </tr>
  507. <tr>
  508. <td class="table-real-head">设备</td>
  509. <td class="table-real-head">状态</td>
  510. <td class="table-real-head">开关</td>
  511. </tr>
  512. <tr>
  513. <td>原料泵</td>
  514. <td>#if("$!{wsclGyfldy.scylb}" == "1")打开#else关闭 #end</td>
  515. <td class="switch-block">
  516. <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scylb == 1) checked #end />
  517. </td>
  518. </tr>
  519. <tr>
  520. <td>挤出机</td>
  521. <td>#if("$!{wsclGyfldy.scjcj}" == "1")打开#else关闭 #end</td>
  522. <td class="switch-block">
  523. <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scjcj == 1) checked #end />
  524. </td>
  525. </tr>
  526. <tr>
  527. <td>振动电机</td>
  528. <td>#if("$!{wsclGyfldy.sczddj}" == "1")打开#else关闭 #end</td>
  529. <td class="switch-block">
  530. <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.sczddj == 1) checked #end />
  531. </td>
  532. </tr>
  533. <tr>
  534. <td>振荡筛</td>
  535. <td>#if("$!{wsclGyfldy.sczds}" == "1")打开#else关闭 #end</td>
  536. <td class="switch-block">
  537. <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.sczds == 1) checked #end />
  538. </td>
  539. </tr>
  540. <tr>
  541. <td>上料泵</td>
  542. <td>#if("$!{wsclGyfldy.scslb}" == "1")打开#else关闭 #end</td>
  543. <td class="switch-block">
  544. <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scslb == 1) checked #end />
  545. </td>
  546. </tr>
  547. <tr>
  548. <td>排污泵</td>
  549. <td>#if("$!{wsclGyfldy.scpwb}" == "1")打开#else关闭 #end</td>
  550. <td class="switch-block">
  551. <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.scpwb == 1) checked #end />
  552. </td>
  553. </tr>
  554. <tr>
  555. <td>滤液泵</td>
  556. <td>#if("$!{wsclGyfldy.sclyb}" == "1")打开#else关闭 #end</td>
  557. <td class="switch-block">
  558. <input type="checkbox" class="mycheckbox" #if($!wsclGyfldy.sclyb == 1) checked #end />
  559. </td>
  560. </tr>
  561. </table>
  562. <div class="savewsclset" onclick="saveWsclYckz(1)">保存</div>
  563. </div>
  564. </div>
  565. </div>
  566. <div class="wscl-dataset-container">
  567. <div class="wscl-dataset-box">
  568. <div class="open-box-head">沼液浓缩单元组件</div>
  569. <div class="open-box-body">
  570. <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="zynsdyzj">
  571. <tr>
  572. <td colspan="2" class="top-system-set">一键启动</td>
  573. <td class="top-system-set switch-block"><input type="checkbox" class="mycheckbox" #if($!wsclZyns1.xtqd == 1) checked #end/></td>
  574. </tr>
  575. <tr>
  576. <td colspan="2" class="top-system-set">一键停机</td>
  577. <td class="top-system-set switch-block"><input type="checkbox" class="mycheckbox" #if($!wsclZyns1.xttz == 1) checked #end/></td>
  578. </tr>
  579. <tr>
  580. <td class="table-real-head">系统</td>
  581. <td class="table-real-head">状态</td>
  582. <td class="table-real-head">开关</td>
  583. </tr>
  584. <tr>
  585. <td>UF1控制系统</td>
  586. <td>#if("$!{wsclZyns1.uf1qd}" == "1") 启动 #elseif("$!{wsclZyns1.uf1tj}" == "1") 停机#end</td>
  587. <td class="switch-block">
  588. <input type="checkbox" class="mycheckbox" #if($!wsclZyns1.uf1qd == 1) checked #end />
  589. </td>
  590. </tr>
  591. <tr>
  592. <td>NF控制系统</td>
  593. <td>#if($!{wsclZyns1.nfqd} == 1) 启动 #elseif($!{wsclZyns1.nftj} == 1) 停机#end</td>
  594. <td class="switch-block">
  595. <input type="checkbox" class="mycheckbox" #if($!wsclZyns1.nfqd == 1) checked #end />
  596. </td>
  597. </tr>
  598. <tr>
  599. <td>UF2控制系统</td>
  600. <td>#if("$!{wsclZyns2.uf2qd}" == "1") 启动 #elseif("$!{wsclZyns2.uf2tj}" == "1") 停机#end</td>
  601. <td class="switch-block">
  602. <input type="checkbox" class="mycheckbox" #if($!wsclZyns2.uf2qd == 1) checked #end />
  603. </td>
  604. </tr>
  605. <tr>
  606. <td>RO控制系统</td>
  607. <td>#if("$!{wsclZyns2.roqd}" == "1") 启动 #elseif("$!{wsclZyns2.rotj}" == "1") 停机#end</td>
  608. <td class="switch-block">
  609. <input type="checkbox" class="mycheckbox" #if($!wsclZyns2.roqd == 1) checked #end />
  610. </td>
  611. </tr>
  612. </table>
  613. <div class="savewsclset" onclick="saveWsclYckz(2)">保存</div>
  614. </div>
  615. </div>
  616. </div>
  617. <div class="wscl-dataset-container">
  618. <div class="wscl-dataset-box">
  619. <div class="open-box-head">沼液浓缩单元参数</div>
  620. <div class="open-box-body">
  621. <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="zynsdysz1">
  622. <tr>
  623. <td colspan="4" class="top-system-set">沼液浓缩单元1参数设置</td>
  624. </tr>
  625. <tr>
  626. <td class="table-real-head">参数</td>
  627. <td class="table-real-head">值</td>
  628. <td class="table-real-head">参数</td>
  629. <td class="table-real-head">值</td>
  630. </tr>
  631. <tr>
  632. <td>UF1运行时间(S)</td>
  633. <td><input type="text" id="uf1yxsj1" class="param-dataset" onBlur="check3(this)" value="$!wsclZyns1.uf1yxsj"/></td>
  634. <td>UF1上反洗时间(S)</td>
  635. <td><input type="text" id="uf1sfxsj1" class="param-dataset" onBlur="check(this)" value="$!wsclZyns1.uf1sfxsj"/></td>
  636. </tr>
  637. <tr>
  638. <td>UF1正洗时间(S)</td>
  639. <td><input type="text" id="uf1zxsj1" class="param-dataset" onBlur="check(this)" value="$!wsclZyns1.uf1zxsj"/></td>
  640. <td>UF1下反洗时间(S)</td>
  641. <td><input type="text" id="uf1xfxsj1" class="param-dataset" onBlur="check(this)" value="$!wsclZyns1.uf1xfxsj"/></td>
  642. </tr>
  643. <tr>
  644. <td>NF运行时间(M)</td>
  645. <td><input type="text" id="nfyxsj1" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns1.nfyxsj"/></td>
  646. <td>NF开机冲洗时间(S)</td>
  647. <td><input type="text" id="nfkjcxsj1" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns1.nfkjcxsj"/></td>
  648. </tr>
  649. <tr>
  650. <td>NF停机冲洗时间(S)</td>
  651. <td><input type="text" id="nftjcxsj1" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns1.nftjcxsj"/></td>
  652. <td>NF高压泵频率(HZ)</td>
  653. <td><input type="text" id="nfgybpl1" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns1.nfgybpl"/></td>
  654. </tr>
  655. <tr>
  656. <td>UF1增压泵频率(HZ)</td>
  657. <td><input type="text" id="ufzybpl1" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns1.ufzybpl"/></td>
  658. <td>UF1膜冲洗泵频率(HZ)</td>
  659. <td><input type="text" id="mcxbpl1" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns1.mcxbpl"/></td>
  660. </tr>
  661. </table>
  662. <table cellpadding="0" cellspacing="0" class="wsclset-dataTable" id="zynsdysz2">
  663. <tr>
  664. <td colspan="4" class="top-system-set">沼液浓缩单元2参数设置</td>
  665. </tr>
  666. <tr>
  667. <td class="table-real-head">参数</td>
  668. <td class="table-real-head">值</td>
  669. <td class="table-real-head">参数</td>
  670. <td class="table-real-head">值</td>
  671. </tr>
  672. <tr>
  673. <td>UF2运行时间(S)</td>
  674. <td><input type="text" id="uf2yxsj2" class="param-dataset" onBlur="check3(this)" value="$!wsclZyns2.uf2yxsj" /></td>
  675. <td>UF2上反洗时间(S)</td>
  676. <td><input type="text" id="uf2sfxsj2" class="param-dataset" onBlur="check(this)" value="$!wsclZyns2.uf2sfxsj" /></td>
  677. </tr>
  678. <tr>
  679. <td>UF2正洗时间(S)</td>
  680. <td><input type="text" id="uf2zxsj2" class="param-dataset" onBlur="check(this)" value="$!wsclZyns2.uf2zxsj" /></td>
  681. <td>UF2下反洗时间(S)</td>
  682. <td><input type="text" id="uf2xfxsj2" class="param-dataset" onBlur="check(this)" value="$!wsclZyns2.uf2xfxsj" /></td>
  683. </tr>
  684. <tr>
  685. <td>RO运行时间(M)</td>
  686. <td><input type="text" id="royxsj2" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns2.royxsj" /></td>
  687. <td>RO开机冲洗时间(S)</td>
  688. <td><input type="text" id="rokjcxsj2" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns2.rokjcxsj" /></td>
  689. </tr>
  690. <tr>
  691. <td>RO停机冲洗时间(S)</td>
  692. <td><input type="text" id="rotjcxsj2" class="param-dataset" onBlur="check2(this)" value="$!wsclZyns2.rotjcxsj" /></td>
  693. <td>RO高压泵频率(HZ)</td>
  694. <td><input type="text" id="rogybpl2" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns2.rogybpl" /></td>
  695. </tr>
  696. <tr>
  697. <td>UF2增压泵频率(HZ)</td>
  698. <td><input type="text" id="ufzybpl2" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns2.ufzybpl" /></td>
  699. <td>UF2膜冲洗泵频率(HZ)</td>
  700. <td><input type="text" id="mcxbpl2" class="param-dataset" onBlur="check1(this)" value="$!wsclZyns2.mcxbpl" /></td>
  701. </tr>
  702. </table>
  703. <div class="savewsclset" onclick="saveWsclYckz(3)">保存</div>
  704. </div>
  705. </div>
  706. </div>
  707. <script>
  708. //console.log($("#video-box video").height())
  709. var video_height = $("#video-box").height();
  710. var video_width = $("#video-box").width();
  711. $("#video-box video").css('width',video_width);
  712. $("#video-box video").css('height',video_height);
  713. </script>
  714. <script>
  715. var sit1 = setTimeout(function (){
  716. $(".scroll-table-wspf").slimScroll({ size:0,width: $(".scroll-table-wspf").width(),height: $(".scroll-table-wspf").height()});
  717. $("#system-runing-msg").slimScroll({ size:0,width: $("#system-runing-msg").width(),height: $("#system-runing-msg").height()});
  718. /*右侧图表*/
  719. var dom_chart_gzfbqk = document.getElementById("chart-gzfbqk");
  720. var dom_chart_bjfx = document.getElementById("chart-bjfx");
  721. var dom_chart_sbgzphb = document.getElementById("chart-sbgzphb");
  722. var dom_chart_pcsssjc = document.getElementById("chart-pcsssjc");
  723. var dom_chart_codbod = document.getElementById("chart-codbod");
  724. var dom_chart_nh3ss = document.getElementById("chart-nh3ss");
  725. var dom_chart_zlph = document.getElementById("chart-zlph");
  726. var dom_chart_rhdl = document.getElementById("chart-rhdl");
  727. //污水
  728. var dom_chart_center1 = document.getElementById("chart-center1");
  729. var dom_chart_center2 = document.getElementById("chart-center2");
  730. var dom_chart_center3 = document.getElementById("chart-center3");
  731. var myChart_chart_gzfbqk = echarts.init(dom_chart_gzfbqk);
  732. var myChart_chart_bjfx = echarts.init(dom_chart_bjfx);
  733. var myChart_chart_sbgzphb = echarts.init(dom_chart_sbgzphb);
  734. var myChart_chart_pcsssjc = echarts.init(dom_chart_pcsssjc);
  735. var myChart_chart_codbod = echarts.init(dom_chart_codbod);
  736. var myChart_chart_nh3ss = echarts.init(dom_chart_nh3ss);
  737. var myChart_chart_zlph = echarts.init(dom_chart_zlph);
  738. var myChart_chart_rhdl = echarts.init(dom_chart_rhdl);
  739. var myChart_chart_center1 = echarts.init(dom_chart_center1);
  740. var myChart_chart_center2 = echarts.init(dom_chart_center2);
  741. var myChart_chart_center3 = echarts.init(dom_chart_center3);
  742. var app = {};
  743. 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;
  744. //故障分布情况饼状图
  745. option_chart_gzfbqk = {
  746. title : {
  747. text: '故\n障\n分\n布\n情\n况',
  748. top:'middle',
  749. left:'10%',
  750. textStyle:{
  751. fontWeight:'normal',
  752. fontSize:'14',
  753. color:'#ccf5f9',
  754. }
  755. },
  756. color: ['#6f3ed5', '#cfb838', '#a92149','#da215b','#ea5e69'], //环形图每块的颜色
  757. tooltip : {
  758. trigger: 'item',
  759. formatter: "{a} <br/>{b} : {c} ({d}%)"
  760. },
  761. series : [
  762. {
  763. name:'故障分布情况',
  764. type:'pie',
  765. radius : ['20%', '70%'],
  766. center : ['55%', '50%'],
  767. data:[
  768. {value:'${zc}', name:'正常'},
  769. {value:'${bj}', name:'报警'},
  770. {value:'${lx}', name:'离线'},
  771. {value:'${gz}', name:'故障'},
  772. ],
  773. label: {
  774. normal: {
  775. show: true,
  776. position:'outside', //标签的位置
  777. textStyle : {
  778. fontSize : 12 ,
  779. color:'#ccf5f9'
  780. },
  781. formatter:'{b}\n{d}%'
  782. }
  783. },
  784. labelLine: {
  785. normal: {
  786. show: true
  787. }
  788. },
  789. }
  790. ]
  791. };
  792. //报警分析柱状图
  793. option_chart_bjfx = {
  794. color:['#e43e70','#3a25ae'],
  795. tooltip : {
  796. trigger: 'axis',
  797. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  798. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  799. },
  800. },
  801. grid: {
  802. x: '10%',
  803. y: '10%',
  804. x2: '10%',
  805. y2: '10%',
  806. containLabel: true
  807. },
  808. legend: {
  809. data: ['报警总次数', '已处理报警'],
  810. icon:'circle',
  811. itemGap: 5,
  812. itemWidth:10,
  813. bottom: '2%',
  814. x:'center',
  815. textStyle:{
  816. color:'#ccf5f9',
  817. },
  818. },
  819. xAxis :{
  820. type : 'category',
  821. data : ['06.12', '06.13', '06.14','06.15','06.16','06.17','06.18'],
  822. axisTick: {
  823. alignWithLabel: true
  824. },
  825. axisLine: {
  826. show: true,
  827. lineStyle: {
  828. type: 'solid',
  829. color: '#4865e3',//左边线的颜色
  830. width:'1'//坐标线的宽度
  831. }
  832. },
  833. axisLabel: {
  834. textStyle: {
  835. color: '#ccf5f9',
  836. fontSize:10
  837. },
  838. rotate: 30,
  839. }
  840. },
  841. yAxis :{
  842. type : 'value',
  843. axisLine: {
  844. show: true,
  845. lineStyle: {
  846. type: 'solid',
  847. color: '#4865e3',//左边线的颜色
  848. width:'1'//坐标线的宽度
  849. }
  850. },
  851. splitLine:{
  852. lineStyle: {
  853. type: 'solid',
  854. color: 'rgba(72,101,227,0.7)',
  855. width:'1'
  856. }
  857. },
  858. axisLabel: {
  859. textStyle: {
  860. color: '#ccf5f9',
  861. },
  862. }
  863. },
  864. series : [
  865. {
  866. type:'bar',
  867. barWidth: '30%',
  868. name:'报警总次数',
  869. data:[45,56, 66,34,23,67,34],
  870. },
  871. {
  872. type:'bar',
  873. barWidth: '30%',
  874. name:'已处理报警',
  875. data:[26, 18, 46,32,10,28,24],
  876. }
  877. ]
  878. };
  879. //设备故障排行榜 柱状图
  880. option_chart_sbgzphb = {
  881. tooltip : {
  882. trigger: 'axis',
  883. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  884. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  885. },
  886. },
  887. grid: {
  888. x: '10%',
  889. y: '10%',
  890. x2: '10%',
  891. y2: '10%',
  892. containLabel: true
  893. },
  894. yAxis :{
  895. type : 'category',
  896. data : ['排水阀', '上排阀', '下排阀','增加泵','加药泵','高压泵','冲洗泵'],
  897. axisLine: {
  898. show: true,
  899. lineStyle: {
  900. type: 'solid',
  901. color: '#4865e3',//左边线的颜色
  902. width:'1'//坐标线的宽度
  903. }
  904. },
  905. axisLabel: {
  906. textStyle: {
  907. color: '#ccf5f9',
  908. fontSize:12
  909. },
  910. },
  911. splitLine:{
  912. lineStyle: {
  913. type: 'solid',
  914. color: 'rgba(72,101,227,0.7)',
  915. width:'1'
  916. }
  917. },
  918. },
  919. xAxis :{
  920. type : 'value',
  921. axisLine: {
  922. show: true,
  923. lineStyle: {
  924. type: 'solid',
  925. color: '#4865e3',//左边线的颜色
  926. width:'1'//坐标线的宽度
  927. }
  928. },
  929. axisLabel: {
  930. textStyle: {
  931. color: '#ccf5f9',
  932. },
  933. },
  934. splitLine:{
  935. show:false
  936. }
  937. },
  938. series : [
  939. {
  940. type:'bar',
  941. barWidth: '50%',
  942. name:'设备故障排行榜',
  943. data:[34,45, 56,69,79,87,98],
  944. itemStyle: {
  945. normal: {
  946. color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
  947. offset: 0,
  948. color: '#e18f91'
  949. },
  950. {
  951. offset: 1,
  952. color: '#3824aa'
  953. }]),
  954. label: {
  955. show: true, //开启显示
  956. position: 'right', //在上方显示
  957. textStyle: { //数值样式
  958. color: '#ccf5f9',
  959. fontSize: 12
  960. },
  961. formatter: '{c}'
  962. }
  963. }
  964. }
  965. }
  966. ]
  967. };
  968. //排出水实时监测 柱状图
  969. option_chart_pcsssjc = {
  970. tooltip : {
  971. trigger: 'axis',
  972. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  973. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  974. },
  975. },
  976. grid: {
  977. x: '10%',
  978. y: '30%',
  979. x2: '10%',
  980. y2: '3%',
  981. containLabel: true
  982. },
  983. xAxis :{
  984. type : 'category',
  985. data : ['NH3', 'COD', 'BOD','SS','总磷','PH'],
  986. axisTick: {
  987. alignWithLabel: true
  988. },
  989. axisLine: {
  990. show: true,
  991. lineStyle: {
  992. type: 'solid',
  993. color: '#4865e3',//左边线的颜色
  994. width:'1'//坐标线的宽度
  995. }
  996. },
  997. axisLabel: {
  998. textStyle: {
  999. color: '#ccf5f9',
  1000. },
  1001. }
  1002. },
  1003. yAxis :[{
  1004. type : 'value',
  1005. name: 'mg/L',
  1006. scale: true,
  1007. axisLine: {
  1008. show: true,
  1009. lineStyle: {
  1010. type: 'solid',
  1011. color: '#4865e3',//左边线的颜色
  1012. width:'1'//坐标线的宽度
  1013. }
  1014. },
  1015. splitLine:{
  1016. lineStyle: {
  1017. type: 'solid',
  1018. color: 'rgba(72,101,227,0.8)',
  1019. width:'1'
  1020. }
  1021. },
  1022. axisLabel: {
  1023. textStyle: {
  1024. color: '#ccf5f9',
  1025. },
  1026. }
  1027. }],
  1028. series : [
  1029. {
  1030. name:'排水实时监测',
  1031. type:'bar',
  1032. barWidth: '40%',
  1033. data:[56, 79, 93,62,58,23],
  1034. itemStyle: {
  1035. normal: {
  1036. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1037. offset: 0,
  1038. color: '#851c9d'
  1039. },
  1040. {
  1041. offset: 1,
  1042. color: '#4805ad'
  1043. }]),
  1044. label: {
  1045. show: true, //开启显示
  1046. position: 'top', //在上方显示
  1047. textStyle: { //数值样式
  1048. color: '#ccf5f9',
  1049. fontSize: 12
  1050. },
  1051. formatter: '{c}'
  1052. }
  1053. }
  1054. },
  1055. }
  1056. ]
  1057. };
  1058. //codbod曲线
  1059. option_chart_codbod = {
  1060. title : {
  1061. text: 'COD/BOD曲线',
  1062. top:'2%',
  1063. left:'3%',
  1064. textStyle:{
  1065. fontWeight:'normal',
  1066. fontSize:'14',
  1067. color:'#ccf5f9',
  1068. }
  1069. },
  1070. color:['#d3aa54','#d15533'],
  1071. grid:{
  1072. x:'5%',
  1073. y:'20%',
  1074. x2:'5%',
  1075. y2:'10%',
  1076. containLabel:true
  1077. },
  1078. tooltip: {
  1079. trigger: 'axis'
  1080. },
  1081. xAxis: {
  1082. type: 'category',
  1083. data: ['08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45'],
  1084. axisLine: {
  1085. show: true,
  1086. lineStyle: {
  1087. type: 'solid',
  1088. color: '#4865e3',//左边线的颜色
  1089. width:'1'//坐标线的宽度
  1090. }
  1091. },
  1092. axisLabel: {
  1093. textStyle: {
  1094. color: '#ccf5f9',
  1095. },
  1096. }
  1097. },
  1098. yAxis: {
  1099. type : 'value',
  1100. name:'mg/L',
  1101. axisLine: {
  1102. show: true,
  1103. lineStyle: {
  1104. type: 'solid',
  1105. color: '#4865e3',//左边线的颜色
  1106. width:'1'//坐标线的宽度
  1107. }
  1108. },
  1109. splitLine:{
  1110. lineStyle: {
  1111. type: 'solid',
  1112. color: 'rgba(72,101,227,0.8)',
  1113. width:'1'
  1114. }
  1115. },
  1116. axisLabel: {
  1117. textStyle: {
  1118. color: '#ccf5f9',
  1119. },
  1120. }
  1121. },
  1122. series: [{
  1123. data: [82, 92, 34, 48, 24, 69, 49],
  1124. type: 'line',
  1125. name:'COD'
  1126. },{
  1127. data: [12, 22, 34, 48, 52, 36, 43],
  1128. type: 'line',
  1129. name:'BOD'
  1130. }]
  1131. };
  1132. //NH3/SS曲线
  1133. option_chart_nh3ss = {
  1134. title : {
  1135. text: 'NH3/SS曲线',
  1136. top:'2%',
  1137. left:'3%',
  1138. textStyle:{
  1139. fontWeight:'normal',
  1140. fontSize:'14',
  1141. color:'#ccf5f9',
  1142. }
  1143. },
  1144. color:['#d3aa54','#d15533'],
  1145. grid:{
  1146. x:'5%',
  1147. y:'20%',
  1148. x2:'5%',
  1149. y2:'10%',
  1150. containLabel:true
  1151. },
  1152. tooltip: {
  1153. trigger: 'axis'
  1154. },
  1155. xAxis: {
  1156. type: 'category',
  1157. data: ['08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45'],
  1158. axisLine: {
  1159. show: true,
  1160. lineStyle: {
  1161. type: 'solid',
  1162. color: '#4865e3',//左边线的颜色
  1163. width:'1'//坐标线的宽度
  1164. }
  1165. },
  1166. axisLabel: {
  1167. textStyle: {
  1168. color: '#ccf5f9',
  1169. },
  1170. }
  1171. },
  1172. yAxis: {
  1173. type : 'value',
  1174. name:'mg/L',
  1175. axisLine: {
  1176. show: true,
  1177. lineStyle: {
  1178. type: 'solid',
  1179. color: '#4865e3',//左边线的颜色
  1180. width:'1'//坐标线的宽度
  1181. }
  1182. },
  1183. splitLine:{
  1184. lineStyle: {
  1185. type: 'solid',
  1186. color: 'rgba(72,101,227,0.8)',
  1187. width:'1'
  1188. }
  1189. },
  1190. axisLabel: {
  1191. textStyle: {
  1192. color: '#ccf5f9',
  1193. },
  1194. }
  1195. },
  1196. series: [{
  1197. data: [82, 92, 34, 48, 24, 69, 49],
  1198. type: 'line',
  1199. name:'NH3'
  1200. },{
  1201. data: [12, 22, 34, 48, 52, 36, 43],
  1202. type: 'line',
  1203. name:'SS'
  1204. }]
  1205. };
  1206. //总磷/PH曲线
  1207. option_chart_zlph = {
  1208. title : {
  1209. text: '总磷/PH曲线',
  1210. top:'2%',
  1211. left:'3%',
  1212. textStyle:{
  1213. fontWeight:'normal',
  1214. fontSize:'14',
  1215. color:'#ccf5f9',
  1216. }
  1217. },
  1218. color:['#d3aa54','#d15533'],
  1219. grid:{
  1220. x:'5%',
  1221. y:'20%',
  1222. x2:'5%',
  1223. y2:'10%',
  1224. containLabel:true
  1225. },
  1226. tooltip: {
  1227. trigger: 'axis'
  1228. },
  1229. xAxis: {
  1230. type: 'category',
  1231. data: ['08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45'],
  1232. axisLine: {
  1233. show: true,
  1234. lineStyle: {
  1235. type: 'solid',
  1236. color: '#4865e3',//左边线的颜色
  1237. width:'1'//坐标线的宽度
  1238. }
  1239. },
  1240. axisLabel: {
  1241. textStyle: {
  1242. color: '#ccf5f9',
  1243. },
  1244. }
  1245. },
  1246. yAxis: {
  1247. type : 'value',
  1248. min: function(value) {
  1249. return value.min - 1;
  1250. },
  1251. axisLine: {
  1252. show: true,
  1253. lineStyle: {
  1254. type: 'solid',
  1255. color: '#4865e3',//左边线的颜色
  1256. width:'1'//坐标线的宽度
  1257. }
  1258. },
  1259. splitLine:{
  1260. lineStyle: {
  1261. type: 'solid',
  1262. color: 'rgba(72,101,227,0.8)',
  1263. width:'1'
  1264. }
  1265. },
  1266. axisLabel: {
  1267. textStyle: {
  1268. color: '#ccf5f9',
  1269. },
  1270. }
  1271. },
  1272. series: [{
  1273. data: [6.5, 6.3, 7.8, 7.2, 8.3, 6.3, 9.0],
  1274. type: 'line',
  1275. name:'总磷'
  1276. },{
  1277. data: [5.6, 6.7, 6.1, 6.4,7.4, 8.3, 8.9],
  1278. type: 'line',
  1279. name:'PH'
  1280. }]
  1281. };
  1282. //日耗电量曲线
  1283. option_chart_rhdl = {
  1284. title : {
  1285. text: '日耗电量',
  1286. top:'2%',
  1287. left:'3%',
  1288. textStyle:{
  1289. fontWeight:'normal',
  1290. fontSize:'14',
  1291. color:'#ccf5f9',
  1292. }
  1293. },
  1294. color:['#d3aa54','#d15533'],
  1295. grid:{
  1296. x:'5%',
  1297. y:'20%',
  1298. x2:'5%',
  1299. y2:'10%',
  1300. containLabel:true
  1301. },
  1302. tooltip: {
  1303. trigger: 'axis'
  1304. },
  1305. xAxis: {
  1306. type: 'category',
  1307. data: ['06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21'],
  1308. axisLine: {
  1309. show: true,
  1310. lineStyle: {
  1311. type: 'solid',
  1312. color: '#4865e3',//左边线的颜色
  1313. width:'1'//坐标线的宽度
  1314. }
  1315. },
  1316. axisLabel: {
  1317. textStyle: {
  1318. color: '#ccf5f9',
  1319. },
  1320. }
  1321. },
  1322. yAxis: {
  1323. type : 'value',
  1324. min: function(value) {
  1325. return value.min - 1;
  1326. },
  1327. axisLine: {
  1328. show: true,
  1329. lineStyle: {
  1330. type: 'solid',
  1331. color: '#4865e3',//左边线的颜色
  1332. width:'1'//坐标线的宽度
  1333. }
  1334. },
  1335. splitLine:{
  1336. lineStyle: {
  1337. type: 'solid',
  1338. color: 'rgba(72,101,227,0.8)',
  1339. width:'1'
  1340. }
  1341. },
  1342. axisLabel: {
  1343. textStyle: {
  1344. color: '#ccf5f9',
  1345. },
  1346. }
  1347. },
  1348. series: [{
  1349. data: [6.5, 6.3, 7.8, 7.2, 8.3, 6.3, 9.0],
  1350. type: 'line',
  1351. name:'总磷'
  1352. },{
  1353. data: [5.6, 6.7, 6.1, 6.4,7.4, 8.3, 8.9],
  1354. type: 'line',
  1355. name:'PH'
  1356. }]
  1357. };
  1358. if (option_chart_gzfbqk && typeof option_chart_gzfbqk === "object") {
  1359. myChart_chart_gzfbqk.setOption(option_chart_gzfbqk, true);
  1360. }
  1361. if (option_chart_bjfx && typeof option_chart_bjfx === "object") {
  1362. myChart_chart_bjfx.setOption(option_chart_bjfx, true);
  1363. }
  1364. if (option_chart_sbgzphb && typeof option_chart_sbgzphb === "object") {
  1365. myChart_chart_sbgzphb.setOption(option_chart_sbgzphb, true);
  1366. }
  1367. if (option_chart_pcsssjc && typeof option_chart_pcsssjc === "object") {
  1368. myChart_chart_pcsssjc.setOption(option_chart_pcsssjc, true);
  1369. }
  1370. //污水处理3D相关图表
  1371. //每日污水处理量 柱状图
  1372. option_chart_center1 = {
  1373. title : {
  1374. text : 'COD/BOD曲线',
  1375. top : '2%',
  1376. left : '3%',
  1377. textStyle : {
  1378. fontWeight : 'normal',
  1379. fontSize : '14',
  1380. color : '#ccf5f9',
  1381. }
  1382. },
  1383. color : [ '#d3aa54', '#d15533' ],
  1384. grid : {
  1385. x : '3%',
  1386. y : '30%',
  1387. x2 : '3%',
  1388. y2 : '10%',
  1389. containLabel : true
  1390. },
  1391. tooltip : {
  1392. trigger : 'axis'
  1393. },
  1394. xAxis : {
  1395. type : 'category',
  1396. data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
  1397. axisLine : {
  1398. show : true,
  1399. lineStyle : {
  1400. type : 'solid',
  1401. color : '#4865e3', //左边线的颜色
  1402. width : '1' //坐标线的宽度
  1403. }
  1404. },
  1405. axisLabel : {
  1406. textStyle : {
  1407. color : '#ccf5f9',
  1408. },
  1409. }
  1410. },
  1411. yAxis : {
  1412. type : 'value',
  1413. name : 'mg/L',
  1414. axisLine : {
  1415. show : true,
  1416. lineStyle : {
  1417. type : 'solid',
  1418. color : '#4865e3', //左边线的颜色
  1419. width : '1' //坐标线的宽度
  1420. }
  1421. },
  1422. splitLine : {
  1423. lineStyle : {
  1424. type : 'solid',
  1425. color : 'rgba(72,101,227,0.8)',
  1426. width : '1'
  1427. }
  1428. },
  1429. axisLabel : {
  1430. textStyle : {
  1431. color : '#ccf5f9',
  1432. },
  1433. }
  1434. },
  1435. series : [ {
  1436. data : [ 221.2, 156.3, 119.1, 217.6, 252.1, 221.7, 127.9 ],
  1437. type : 'line',
  1438. name : 'COD'
  1439. }, {
  1440. data : [ 120.3, 72.7, 69.9, 89.8, 78.3, 64.9, 54.9 ],
  1441. type : 'line',
  1442. name : 'BOD'
  1443. } ]
  1444. };
  1445. //每日能耗 柱状图
  1446. option_chart_center2 = {
  1447. title : {
  1448. text : 'NH3/SS曲线',
  1449. top : '2%',
  1450. left : '3%',
  1451. textStyle : {
  1452. fontWeight : 'normal',
  1453. fontSize : '14',
  1454. color : '#ccf5f9',
  1455. }
  1456. },
  1457. color : [ '#d3aa54', '#d15533' ],
  1458. grid : {
  1459. x : '3%',
  1460. y : '30%',
  1461. x2 : '3%',
  1462. y2 : '10%',
  1463. containLabel : true
  1464. },
  1465. tooltip : {
  1466. trigger : 'axis'
  1467. },
  1468. xAxis : {
  1469. type : 'category',
  1470. data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
  1471. axisLine : {
  1472. show : true,
  1473. lineStyle : {
  1474. type : 'solid',
  1475. color : '#4865e3', //左边线的颜色
  1476. width : '1' //坐标线的宽度
  1477. }
  1478. },
  1479. axisLabel : {
  1480. textStyle : {
  1481. color : '#ccf5f9',
  1482. },
  1483. }
  1484. },
  1485. yAxis : {
  1486. type : 'value',
  1487. name : 'mg/L',
  1488. axisLine : {
  1489. show : true,
  1490. lineStyle : {
  1491. type : 'solid',
  1492. color : '#4865e3', //左边线的颜色
  1493. width : '1' //坐标线的宽度
  1494. }
  1495. },
  1496. splitLine : {
  1497. lineStyle : {
  1498. type : 'solid',
  1499. color : 'rgba(72,101,227,0.8)',
  1500. width : '1'
  1501. }
  1502. },
  1503. axisLabel : {
  1504. textStyle : {
  1505. color : '#ccf5f9',
  1506. },
  1507. }
  1508. },
  1509. series : [ {
  1510. data : [ 73.1, 66.8, 54.8, 69.3, 57.8, 44.9, 79.1 ],
  1511. type : 'line',
  1512. name : 'NH3'
  1513. }, {
  1514. data : [ 120.1, 112.7, 119.7, 88.9, 134.2, 122.8, 155.3 ],
  1515. type : 'line',
  1516. name : 'SS'
  1517. } ]
  1518. };
  1519. //温度
  1520. option_chart_center3 = {
  1521. title : {
  1522. text : '总磷/PH曲线',
  1523. top : '2%',
  1524. left : '3%',
  1525. textStyle : {
  1526. fontWeight : 'normal',
  1527. fontSize : '14',
  1528. color : '#ccf5f9',
  1529. }
  1530. },
  1531. color : [ '#d3aa54', '#d15533' ],
  1532. grid : {
  1533. x : '3%',
  1534. y : '30%',
  1535. x2 : '3%',
  1536. y2 : '10%',
  1537. containLabel : true
  1538. },
  1539. tooltip : {
  1540. trigger : 'axis'
  1541. },
  1542. xAxis : {
  1543. type : 'category',
  1544. data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
  1545. axisLine : {
  1546. show : true,
  1547. lineStyle : {
  1548. type : 'solid',
  1549. color : '#4865e3', //左边线的颜色
  1550. width : '1' //坐标线的宽度
  1551. }
  1552. },
  1553. axisLabel : {
  1554. textStyle : {
  1555. color : '#ccf5f9',
  1556. },
  1557. }
  1558. },
  1559. yAxis : {
  1560. type : 'value',
  1561. min : function(value) {
  1562. return value.min - 1;
  1563. },
  1564. axisLine : {
  1565. show : true,
  1566. lineStyle : {
  1567. type : 'solid',
  1568. color : '#4865e3', //左边线的颜色
  1569. width : '1' //坐标线的宽度
  1570. }
  1571. },
  1572. splitLine : {
  1573. lineStyle : {
  1574. type : 'solid',
  1575. color : 'rgba(72,101,227,0.8)',
  1576. width : '1'
  1577. }
  1578. },
  1579. axisLabel : {
  1580. textStyle : {
  1581. color : '#ccf5f9',
  1582. },
  1583. }
  1584. },
  1585. series : [ {
  1586. data : [ 6.5, 6.3, 7.8, 7.2, 8.3, 6.3, 8.0 ],
  1587. type : 'line',
  1588. name : '总磷'
  1589. }, {
  1590. data : [ 5.6, 6.7, 6.1, 6.4, 7.4, 8.3, 8.9 ],
  1591. type : 'line',
  1592. name : 'PH'
  1593. } ]
  1594. };
  1595. if (option_chart_center1 && typeof option_chart_center1 === "object") {
  1596. myChart_chart_center1.setOption(option_chart_center1, true);
  1597. }
  1598. if (option_chart_center2 && typeof option_chart_center2 === "object") {
  1599. myChart_chart_center2.setOption(option_chart_center2, true);
  1600. }
  1601. if (option_chart_center3 && typeof option_chart_center3 === "object") {
  1602. myChart_chart_center3.setOption(option_chart_center3, true);
  1603. }
  1604. //污水处理3D效果部分
  1605. function randomNum(maxNum, minNum, decimalNum) {
  1606. var max = 0, min = 0;
  1607. minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
  1608. switch (arguments.length) {
  1609. case 1:
  1610. return Math.floor(Math.random() * (max + 1));
  1611. break;
  1612. case 2:
  1613. return Math.floor(Math.random() * (max - min + 1) + min);
  1614. break;
  1615. case 3:
  1616. return (Math.random() * (max - min) + min).toFixed(decimalNum);
  1617. break;
  1618. default:
  1619. return Math.random();
  1620. break;
  1621. }
  1622. }
  1623. var renderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action,datGui,labelRenderer;
  1624. var clock = new THREE.Clock();
  1625. function initRender() {
  1626. renderer = new THREE.WebGLRenderer({antialias: true});
  1627. renderer.setPixelRatio(window.devicePixelRatio);
  1628. renderer.setSize($('#WebGL-output').width(),$('#WebGL-output').height());
  1629. renderer.setClearColor(0xeeeeee);
  1630. renderer.shadowMap.enabled = true;
  1631. //告诉渲染器需要阴影效果
  1632. $("#WebGL-output").append(renderer.domElement);
  1633. labelRenderer = new THREE.CSS2DRenderer();
  1634. labelRenderer.setSize( $("#WebGL-output").width(), $("#WebGL-output").height() );
  1635. labelRenderer.domElement.style.position = 'absolute';
  1636. labelRenderer.domElement.style.top = 0;
  1637. $("#WebGL-output").append( labelRenderer.domElement );
  1638. }
  1639. function initCamera() {
  1640. var fov = 40;//拍摄距离
  1641. var near = 1;//最小范围
  1642. var far = 1000;//最大范围
  1643. camera = new THREE.PerspectiveCamera(fov,$('#WebGL-output').width()/$('#WebGL-output').height(),near,far);//相机构建
  1644. //camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
  1645. camera.position.set(600, 300, 300 );
  1646. }
  1647. function initScene() {
  1648. scene = new THREE.Scene();
  1649. scene.background = new THREE.Color( 0xa0a0a0 );
  1650. scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
  1651. }
  1652. //初始化dat.GUI简化试验流程
  1653. function initGui() {
  1654. //声明一个保存需求修改的相关数据的对象
  1655. gui = {
  1656. helper:true //模型辅助线
  1657. };
  1658. //datGui = new dat.GUI();
  1659. //将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)
  1660. /* datGui.add(gui, "helper").onChange(function (e) {
  1661. meshHelper.visible = e;
  1662. }) */
  1663. }
  1664. function initLight() {
  1665. scene.add(new THREE.AmbientLight(0x444444));
  1666. light = new THREE.DirectionalLight(0xffffff);
  1667. light.position.set(0, 200, 100 );
  1668. light.castShadow = true;
  1669. light.shadow.camera.top = 180;
  1670. light.shadow.camera.bottom = -100;
  1671. light.shadow.camera.left = -120;
  1672. light.shadow.camera.right = 120;
  1673. //告诉平行光需要开启阴影投射
  1674. light.castShadow = true;
  1675. scene.add(light);
  1676. }
  1677. function initModel() {
  1678. //辅助工具
  1679. //var helper = new THREE.AxesHelper(50);
  1680. //scene.add(helper);
  1681. // 地板
  1682. /*var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) );
  1683. mesh.rotation.x = - Math.PI / 2;
  1684. mesh.receiveShadow = true;
  1685. scene.add( mesh );
  1686. //添加地板割线
  1687. var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
  1688. grid.material.opacity = 0.2;
  1689. grid.material.transparent = true;
  1690. scene.add( grid );*/
  1691. //加载模型
  1692. var loader = new THREE.FBXLoader();
  1693. loader.load("views/htclient/source/污水处理16.FBX", function (mesh) {
  1694. console.log(mesh);
  1695. //添加骨骼辅助
  1696. //meshHelper = new THREE.SkeletonHelper(mesh);
  1697. //scene.add(meshHelper);
  1698. //设置模型的每个部位都可以投影
  1699. /* mesh.traverse( function ( child ) {
  1700. if ( child.isMesh ) {
  1701. child.castShadow = true;
  1702. child.receiveShadow = true;
  1703. }
  1704. } );*/
  1705. //AnimationMixer是场景中特定对象的动画播放器。当场景中的多个对象独立动画时,可以为每个对象使用一个AnimationMixer
  1706. mixer = mesh.mixer = new THREE.AnimationMixer(mesh);
  1707. console.log(mesh.animations.length)
  1708. //mixer.clipAction 返回一个可以控制动画的AnimationAction对象 参数需要一个AnimationClip 对象
  1709. //AnimationAction.setDuration 设置一个循环所需要的时间,当前设置了一秒
  1710. //告诉AnimationAction启动该动作
  1711. //action = mixer.clipAction(mesh.animations[0]);
  1712. //action.play();
  1713. var actions = []; //所有的动画数组
  1714. //var animations = datGui.addFolder("animations");
  1715. for(var i=0; i<mesh.animations.length; i++){
  1716. createAction(i);
  1717. }
  1718. #if("$!zxzt" == "0")
  1719. actions[0].play();
  1720. #else
  1721. actions[0].stop();
  1722. #end
  1723. function createAction(i){
  1724. actions[i] = mixer.clipAction(mesh.animations[i]);
  1725. gui["action"+i] = function () {
  1726. for(var j=0; j<actions.length; j++){
  1727. if(j === i){
  1728. actions[j].play();
  1729. }
  1730. else{
  1731. actions[j].stop();
  1732. }
  1733. }
  1734. };
  1735. //animations.add(gui, "action"+i);
  1736. }
  1737. //添加暂停所有动画的按键
  1738. /* gui.stop = function(){
  1739. for(var i=0; i<actions.length; i++){
  1740. actions[i].stop();
  1741. }
  1742. }; */
  1743. //datGui.add(gui, "stop");
  1744. //mesh.position.y += 100;
  1745. scene.add(mesh);
  1746. //标注1
  1747. var geometry1 = new THREE.Geometry();
  1748. geometry1.vertices.push(
  1749. new THREE.Vector3(2, 1, 5),
  1750. new THREE.Vector3(2, 3, 5)
  1751. );
  1752. geometry1.colors.push(
  1753. new THREE.Color( 0x3c92f5 )
  1754. )
  1755. var material1 = new THREE.LineBasicMaterial({ vertexColors: true });
  1756. var line1 = new THREE.Line(geometry1, material1);
  1757. mesh.add( line1 );
  1758. var labelDiv1 = document.createElement( 'div' );
  1759. labelDiv1.className = 'label label1';
  1760. labelDiv1.textContent = '0.0m³/h';
  1761. labelDiv1.style.marginTop = '-1em';
  1762. labelDiv1.style.color = '#fff';
  1763. var dataLabel1 = new THREE.CSS2DObject( labelDiv1 );
  1764. dataLabel1.position.set( 2, 3, 5 );
  1765. mesh.add( dataLabel1 );
  1766. //标注2
  1767. var geometry2 = new THREE.Geometry();
  1768. geometry2.vertices.push(
  1769. new THREE.Vector3(-2, 0, 1.8),
  1770. new THREE.Vector3(-2, 3, 1.8)
  1771. );
  1772. geometry2.colors.push(
  1773. new THREE.Color( 0x3c92f5 )
  1774. )
  1775. var material2 = new THREE.LineBasicMaterial({ vertexColors: true });
  1776. var line2 = new THREE.Line(geometry2, material2);
  1777. mesh.add( line2 );
  1778. var labelDiv2 = document.createElement( 'div' );
  1779. labelDiv2.className = 'label label2';
  1780. labelDiv2.textContent = '0.0m³/h';
  1781. labelDiv2.style.marginTop = '-1em';
  1782. labelDiv2.style.color = '#fff';
  1783. var dataLabel2 = new THREE.CSS2DObject( labelDiv2 );
  1784. dataLabel2.position.set( -2, 3, 1.8 );
  1785. mesh.add( dataLabel2 );
  1786. //标注3
  1787. var geometry3 = new THREE.Geometry();
  1788. geometry3.vertices.push(
  1789. new THREE.Vector3(-0.3, 0.3, -6.5),
  1790. new THREE.Vector3(-0.3, 3, -6.5)
  1791. );
  1792. geometry3.colors.push(
  1793. new THREE.Color( 0x3c92f5 )
  1794. )
  1795. var material3 = new THREE.LineBasicMaterial({ vertexColors: true });
  1796. var line3 = new THREE.Line(geometry3, material3);
  1797. mesh.add( line3 );
  1798. var labelDiv3 = document.createElement( 'div' );
  1799. labelDiv3.className = 'label label3';
  1800. labelDiv3.textContent = '0.0m³/h';
  1801. labelDiv3.style.marginTop = '-1em';
  1802. labelDiv3.style.color = '#fff';
  1803. var dataLabel3 = new THREE.CSS2DObject( labelDiv3 );
  1804. dataLabel3.position.set( -0.3, 3, -6.5 );
  1805. mesh.add( dataLabel3 );
  1806. //标注4
  1807. var geometry4 = new THREE.Geometry();
  1808. geometry4.vertices.push(
  1809. new THREE.Vector3(0.9, 0.6, -6.2),
  1810. new THREE.Vector3(0.9, 2, -6.2)
  1811. );
  1812. geometry4.colors.push(
  1813. new THREE.Color( 0x3c92f5 )
  1814. )
  1815. var material4 = new THREE.LineBasicMaterial({ vertexColors: true });
  1816. var line4 = new THREE.Line(geometry4, material4);
  1817. mesh.add( line4 );
  1818. var labelDiv4 = document.createElement( 'div' );
  1819. labelDiv4.className = 'label label4';
  1820. labelDiv4.textContent = '0.0m³/h';
  1821. labelDiv4.style.marginTop = '-1em';
  1822. labelDiv4.style.color = '#fff';
  1823. var dataLabel4 = new THREE.CSS2DObject( labelDiv4 );
  1824. dataLabel4.position.set( 0.9, 2, -6.2 );
  1825. mesh.add( dataLabel4 );
  1826. });
  1827. }
  1828. //初始化性能插件
  1829. /* function initStats() {
  1830. stats = new Stats();
  1831. $("#WebGL-output").append(stats.dom);
  1832. }
  1833. */
  1834. function initControls() {
  1835. //controls = new THREE.OrbitControls(camera, renderer.domElement);
  1836. controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
  1837. //设置控制器的中心点
  1838. //controls.target.set( 0, 100, 0 );
  1839. // 如果使用animate方法时,将此函数删除
  1840. //controls.addEventListener( 'change', render );
  1841. // 使动画循环使用时阻尼或自转 意思是否有惯性
  1842. controls.enableDamping = true;
  1843. //动态阻尼系数 就是鼠标拖拽旋转灵敏度
  1844. //controls.dampingFactor = 0.25;
  1845. //是否可以缩放
  1846. controls.enableZoom = true;
  1847. //是否自动旋转
  1848. controls.autoRotate = false;
  1849. controls.autoRotateSpeed = 0.5;
  1850. //设置相机距离原点的最远距离
  1851. controls.minDistance = 1;
  1852. //设置相机距离原点的最远距离
  1853. controls.maxDistance = 30;
  1854. //是否开启右键拖拽
  1855. controls.enablePan = true;
  1856. }
  1857. function render() {
  1858. var time = clock.getDelta();
  1859. if (mixer) {
  1860. mixer.update(time);
  1861. }
  1862. controls.update();
  1863. }
  1864. //窗口变动触发的函数
  1865. function onWindowResize() {
  1866. camera.aspect = $('#WebGL-output').width() / $('#WebGL-output').height();
  1867. camera.updateProjectionMatrix();
  1868. renderer.setSize($('#WebGL-output').width(), $('#WebGL-output').height());
  1869. }
  1870. function animate() {
  1871. //更新控制器
  1872. render();
  1873. //更新性能插件
  1874. //stats.update();
  1875. renderer.render(scene, camera);
  1876. labelRenderer.render(scene, camera);
  1877. requestAnimationFrame(animate);
  1878. }
  1879. function draw() {
  1880. //兼容性判断
  1881. if (!Detector.webgl) Detector.addGetWebGLMessage();
  1882. initGui();
  1883. initRender();
  1884. initScene();
  1885. initCamera();
  1886. initLight();
  1887. initModel();
  1888. initControls();
  1889. //initStats();
  1890. animate();
  1891. window.onresize = onWindowResize;
  1892. }
  1893. draw();
  1894. #if("$!zxzt" == "0")
  1895. window.setInterval(function(){
  1896. var data1 = randomNum(0.8,0.5,1);
  1897. var data2 = randomNum(0.8,0.5,1);
  1898. var data3 = randomNum(0.8,0.5,1);
  1899. var data4 = randomNum(0.8,0.5,1);
  1900. $(".label1").text(data1+"m³/h");
  1901. $(".label2").text(data2+"m³/h");
  1902. $(".label3").text(data3+"m³/h");
  1903. $(".label4").text(data4+"m³/h");
  1904. },3000);
  1905. #end
  1906. ////////
  1907. //数字滚动
  1908. var day_sum = 50.51;
  1909. var sum = 13000.01;
  1910. show_num1(day_sum,sum);
  1911. $(function() {
  1912. setInterval(function(){
  1913. show_num1(day_sum,sum);
  1914. var addn = 3.5;
  1915. day_sum=(parseFloat(day_sum)+addn).toFixed(2);
  1916. //sum+=day_sum;
  1917. },86400);
  1918. });
  1919. function show_num1(n,m) {
  1920. var numArr = String(n).split('.');
  1921. var sumArr = String(m).split('.');
  1922. addHt('.t_num1',numArr[0]);
  1923. addHt('.t_num2',numArr[1]);
  1924. addHt('.t_num3',sumArr[0]);
  1925. addHt('.t_num4',sumArr[1]);
  1926. //$("#cur_num").val(n);
  1927. }
  1928. function addHt(h,t){
  1929. var it = $(h+" i");
  1930. var len1 = t.length;
  1931. for(var i = 0; i < len1; i++) {
  1932. if(it.length <= i) {
  1933. $(h).append("<i></i>");
  1934. }
  1935. var num = t.charAt(i);
  1936. //根据数字图片的高度设置相应的值
  1937. var y = -parseInt(num) * 29;
  1938. var obj = $(h+" i").eq(i);
  1939. obj.animate({
  1940. backgroundPosition: '(0 ' + String(y) + 'px)'
  1941. }, 'slow', 'swing', function() {});
  1942. }
  1943. }
  1944. var playerElement6 = document.getElementById("player6");
  1945. var player6 = new Clappr.Player({
  1946. source: 'http://hls01open.ys7.com/openlive/dfc96f55e0914fecad4f02b7fae67227.m3u8',
  1947. //poster: 'http://clappr.io/poster.png',
  1948. mute: true
  1949. });
  1950. player6.attachTo(playerElement6);
  1951. player6.play();
  1952. },1000);
  1953. </script>
  1954. <script type="text/javascript" src="views/htclient/wscl/wscl.js"></script>
  1955. </body>
  1956. </html>