right.htm 78 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>main</title>
  6. <meta name="description" content="登录">
  7. <meta name="viewport"
  8. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  9. <link href="views/htclient/css/index.css" rel="stylesheet">
  10. <style type="text/css">
  11. .player > div{
  12. width: 100% !important;
  13. height: 100% !important;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class='grid-common right-grid'>
  19. <div class='grid-common right-grid-r1'>
  20. <div class='wrapper'>
  21. <div class='tab'>
  22. <div class='tab-bid'>牧场数据对比</div>
  23. </div>
  24. <div class="wrapper-content">
  25. <div class="content-container flex-zztt">
  26. <div class='zhejiao zhejiao-1'></div>
  27. <div class='zhejiao zhejiao-2'></div>
  28. <div class='zhejiao zhejiao-3'></div>
  29. <div class='zhejiao zhejiao-4'></div>
  30. <div class='charts-mclist-area'>
  31. <ul id='charts-mclist'>
  32. <li class='chart-mcsjdb-area'></li>
  33. <li class='chart-mcsjdb-area'></li>
  34. <li class='chart-mcsjdb-area'></li>
  35. <li class='chart-mcsjdb-area'></li>
  36. </ul>
  37. </div>
  38. <div class='lengred-tabs'>
  39. <div class='lend-items'><div class='doc-tip pzs-tip'></div><div class='lend-value'>配种数</div></div>
  40. <div class='lend-items'><div class='doc-tip mfs-tip'></div><div class='lend-value'>分娩数</div></div>
  41. <div class='lend-items'><div class='doc-tip czl-tip'></div><div class='lend-value'>产仔量</div></div>
  42. <div class='lend-items'><div class='doc-tip ttl-tip'></div><div class='lend-value'>淘汰量</div></div>
  43. <div class='lend-items'><div class='doc-tip xsl-tip'></div><div class='lend-value'>销售量</div></div>
  44. </div>
  45. <!-- <div id='chart-mcsjdb'></div> -->
  46. </div>
  47. </div>
  48. </div>
  49. <div class='wrapper-content chart-area'>
  50. <div class='content-container flex_wrap'>
  51. <div class='zhejiao zhejiao-1'></div>
  52. <div class='zhejiao zhejiao-2'></div>
  53. <div class='zhejiao zhejiao-3'></div>
  54. <div class='zhejiao zhejiao-4'></div>
  55. <div id='chart-container1'></div>
  56. <div id='chart-container2'></div>
  57. <div id='chart-container3'></div>
  58. <div id='chart-container4'></div>
  59. </div>
  60. </div>
  61. <div class='wrapper'>
  62. <div class='tab'>
  63. <div class='tab-bid'>$!mcmc1</div>
  64. </div>
  65. <div class="wrapper-content">
  66. <div class="content-container">
  67. <div class='zhejiao zhejiao-1'></div>
  68. <div class='zhejiao zhejiao-2'></div>
  69. <div class='zhejiao zhejiao-3'></div>
  70. <div class='zhejiao zhejiao-4'></div>
  71. <div class='chart-none-title'><div class='chart-new-title'>温度/湿度/氨气</div><div id='chart-wdsdaq'></div></div>
  72. <div class='chart-none-title'><div class='chart-new-title'>PH</div><div id='chart-ph'></div></div>
  73. <div class='chart-none-title'><div class='chart-new-title'>能耗</div><div id='chart-nh'></div></div>
  74. </div>
  75. </div>
  76. </div>
  77. <div class='build-wrapper'>
  78. <input type="hidden" id="zsqy" value="" /><input type="hidden" id="qylq" value="" />
  79. <div class='single' style='height:100%;width:100%;position:relative;' id='BoxUl'>
  80. <ul class='list build-container'>
  81. #set($count = 1)
  82. #foreach($obj in $!zsdaList)<li data-lqid="$!obj.dqlq" data-zsqy="$!obj.zsqy" data-qylq="$!obj.qylq" #if ($count ==1) class='active' #end>
  83. <div class='build-contain'>
  84. <div class='zhejiao zhejiao-1'></div>
  85. <div class='zhejiao zhejiao-2'></div>
  86. <div class='zhejiao zhejiao-3'></div>
  87. <div class='zhejiao zhejiao-4'></div>
  88. <div class='leftbar'>
  89. <div class='row-num'>$!obj.zsmc</div>
  90. </div>
  91. <div class='cont'>
  92. <div class='cont-item'>
  93. <img src='views/htclient/images/wd.png' />温度<span
  94. class='cont-value'>$!{obj.dqwd}℃</span>
  95. </div>
  96. <div class='cont-item'>
  97. <img src='views/htclient/images/sd.png' />湿度<span
  98. class='cont-value'>$!{obj.dqsd}%Rh</span>
  99. </div>
  100. <div class='cont-item'>
  101. <img src='views/htclient/images/aq.png' />氨气<span
  102. class='cont-value'>$!{obj.dqaq}ppm</span>
  103. </div>
  104. <div class='cont-item'>
  105. <img src='views/htclient/images/fj.png' />风机<span
  106. class='cont-status_t'>运行正常</span>
  107. </div>
  108. </div></div>#set($count = $count + 1)
  109. </li>#end
  110. </ul>
  111. </div>
  112. </div>
  113. </div>
  114. <div class='grid-common right-grid-r2'>
  115. <div class='grid-common right-grid-r2-top'>
  116. <div class='wrapper'>
  117. <div class='tab'>
  118. <div class='tab-bid'>视频监控</div>
  119. </div>
  120. <div class="wrapper-content">
  121. <div class="content-container flex_wrap">
  122. <div class='zhejiao zhejiao-1'></div>
  123. <div class='zhejiao zhejiao-2'></div>
  124. <div class='zhejiao zhejiao-3'></div>
  125. <div class='zhejiao zhejiao-4'></div>
  126. <div class='video-box'>
  127. <div class='video-title'>$!zsmc1</div>
  128. <div class='video-container player' id="player1"></div>
  129. </div>
  130. <div class='video-box'>
  131. <div class='video-title'>$!zsmc2</div>
  132. <div class='video-container player' id="player2"></div>
  133. </div>
  134. <div class='video-box'>
  135. <div class='video-title'>$!zsmc3</div>
  136. <div class='video-container player' id="player3"></div>
  137. </div>
  138. <div class='video-box'>
  139. <div class='video-title'>$!zsmc4</div>
  140. <div class='video-container player' id="player4"></div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. <div class='wrapper'>
  146. <div class='tab'>
  147. <div class='tab-bid'>故障报警</div>
  148. </div>
  149. <div class="wrapper-content">
  150. <div class="content-container flex_wrap">
  151. <div class='zhejiao zhejiao-1'></div>
  152. <div class='zhejiao zhejiao-2'></div>
  153. <div class='zhejiao zhejiao-3'></div>
  154. <div class='zhejiao zhejiao-4'></div>
  155. <div id='chart-sbgz'></div>
  156. <div id='chart-bjlx'></div>
  157. <div id='chart-bjfx'></div>
  158. <div id='chart-sbgzphb'></div>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <div class='grid-common right-grid-r2-bottom'>
  164. <div class='wrapper'>
  165. <div class='tab'>
  166. <div class='tab-bid'>粪污处理</div>
  167. </div>
  168. <div class='wrapper-content'>
  169. <div class='content-container flex-zztt'>
  170. <div class='zhejiao zhejiao-1'></div>
  171. <div class='zhejiao zhejiao-2'></div>
  172. <div class='zhejiao zhejiao-3'></div>
  173. <div class='zhejiao zhejiao-4'></div>
  174. <div class='chart-left'>
  175. <div class='chartyxzt'>
  176. <div class='chart-title'>运行状态</div>
  177. <div id='chart-yxzt'></div>
  178. </div>
  179. <div class='warning-count'>
  180. <div class='warning-count-title'>故障报警</div>
  181. <div class='warning-count-list'>
  182. <div class='warning-count-item'>
  183. <img src='views/htclient/images/warn_o.png'>
  184. <div class='warning-count-name'>
  185. 设备数量<span class='warning-count-value'>1</span>
  186. </div>
  187. </div>
  188. <div class='warning-count-item'>
  189. <img src='views/htclient/images/warn_o.png'>
  190. <div class='warning-count-name'>
  191. 预警数量<span class='warning-count-value'>$!yjsl</span>
  192. </div>
  193. </div>
  194. <div class='warning-count-item'>
  195. <img src='views/htclient/images/warn_o.png'>
  196. <div class='warning-count-name'>
  197. 待检修数量<span class='warning-count-value'>$!yjsl</span>
  198. </div>
  199. </div>
  200. <div class='warning-count-item'>
  201. <img src='views/htclient/images/warn_o.png'>
  202. <div class='warning-count-name'>
  203. 待保养数量<span class='warning-count-value'>#if("$!dpSjlrsbbj" == "") 0 #else $!dpSjlrsbbj.gzbjdbysl #end</span>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. <div class='warning-count-msglist'>
  209. <div class='warning-count-msglist-container'>
  210. <div class='warning-count-msglist-title'>运维报警</div>
  211. <div class='warning-count-msglist-box' id='ywbj-box'>
  212. #foreach($obj in $!sbgzList)
  213. <div class='warning-count-msglist-item'>
  214. <span class='type'>【检修】</span><span class='warning-count-msglist-content'>$!obj.gzlx $!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.fssj)</span>
  215. </div>
  216. #end
  217. </div>
  218. </div>
  219. <div class='warning-count-msglist-container'>
  220. <div class='warning-count-msglist-title'>维修保障</div>
  221. <div class='warning-count-msglist-box' id='wxbz-box'>
  222. #foreach($obj in $!wxlist)
  223. <div class='warning-count-msglist-item'>
  224. <span class='type'>【保养】</span> <span class='warning-count-msglist-content'>$!obj</span>
  225. </div>
  226. #end
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. <div class='wrapper flex-bottom'>
  235. <div class='wrapper-content'>
  236. <div class='content-container flex-zztt'>
  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="map-top">
  242. <div class='map-right' style='position:relative'>
  243. <div style='width:50px;height:50px;position:absolute;right:0px;bottom:6px;z-index:10'><img src='views/htclient/images/nhmap.png' width='100%'/></div>
  244. <div class='map-right-data'>
  245. <div class='map-right-item'>
  246. 累计处理:<span class='map-right-value'>#if('$!dpSjlrsbbj' == "") 0 #else $!dpSjlrsbbj.wfcllj #end</span>吨
  247. </div>
  248. <div class='map-right-item'>
  249. 今日处理:<span class='map-right-value'>#if('$!dpSjlrsbbj' == "") 0 #else $!dpSjlrsbbj.wfcljr #end</span>吨
  250. </div>
  251. </div>
  252. <div id='map-right-container'></div>
  253. </div>
  254. <div class='map-data'>
  255. <div class='mcjc-top'>
  256. <div class='mcjc-top-title'>$!mcmc1牧场-检测</div>
  257. <div class='mcjc-top-datetime'>数据采集时间:$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!sjcjsj)</div>
  258. <div class='mcjc-top-datalist'>
  259. <div class='mcjc-top-item'>
  260. <div class='mcjc-top-itemname'>固液分离单元</div>
  261. <div class='mcjc-top-itemname'>沼液浓缩单元1区</div>
  262. <div class='mcjc-top-itemname'>沼液浓缩单元2区</div>
  263. </div>
  264. <div class='mcjc-top-status'>
  265. <div class='mcjc-top-statusvalue #if ($!gyzt == "在线") #else leave#end'>$!gyzt</div>
  266. <div class='mcjc-top-statusvalue #if ($!zy1 == "在线") #else leave#end'>$!zy1</div>
  267. <div class='mcjc-top-statusvalue #if ($!zy2 == "在线") #else leave#end'>$!zy2</div>
  268. </div>
  269. <div class='mcjc-top-style'>
  270. <div class='mcjc-top-stylevalue #if ($!gyztStr == "正常运行") #else stop #end'>$!gyztStr</div>
  271. <div class='mcjc-top-stylevalue #if ($!zy1Str == "正常运行") #else stop #end'>$!zy1Str</div>
  272. <div class='mcjc-top-stylevalue #if ($!zy2Str == "正常运行") #else stop #end'>$!zy2Str</div>
  273. </div>
  274. </div>
  275. <div class='mcjc-top-count'>
  276. <div class='mcjc-top-count-part'>
  277. <div class='mcjc-top-count-part-value'>$!sbbj.aqyxts 天</div>
  278. <div class='mcjc-top-count-part-line'></div>
  279. <div class='mcjc-top-count-part-name'>安全运行天数</div>
  280. </div>
  281. <div class='mcjc-top-count-part'>
  282. <div class='mcjc-top-count-part-value'>$!sbbj.rcll 吨</div>
  283. <div class='mcjc-top-count-part-line'></div>
  284. <div class='mcjc-top-count-part-name'>日处理量</div>
  285. </div>
  286. </div>
  287. </div>
  288. <div id='chart-psssjc'></div>
  289. </div>
  290. </div>
  291. <div class="map-bottom">
  292. <div class='map-bottom-chart' id='chart-codbodqx'></div>
  293. <div class='map-bottom-chart' id='chart-nh3ssqx'></div>
  294. <div class='map-bottom-chart' id='chart-zlphqx'></div>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  303. <div id='step-warn-set'>
  304. <div class='zhejiao zhejiao-1'></div>
  305. <div class='zhejiao zhejiao-2'></div>
  306. <div class='zhejiao zhejiao-3'></div>
  307. <div class='zhejiao zhejiao-4'></div>
  308. <div class='step-warn-title'>设备控制</div>
  309. <div class='step-warn-controlarea'>
  310. <div class='step-set-area'>
  311. <div class="step-set-area-title">档位设置</div>
  312. <div class='step-set-container'>
  313. <div class='step-set-tabs'>
  314. <div class='step-set-tatitle selected'>一档</div>
  315. <div class='step-set-tatitle'>二档</div>
  316. <div class='step-set-tatitle'>三档</div>
  317. <div class='step-set-tatitle'>四档</div>
  318. <div class='step-set-tatitle'>五档</div>
  319. </div>
  320. <div class='tempcontrol-area'>
  321. <div class='tempcontrol-area-tab'>
  322. <div class='min'>min</div>
  323. <div class='tempcontrol-box'><div class='tempcontrol-value'><input type='text' name='' value='0' class='tempchange'/><span class='tempvalue'>0</span></div>℃</div>
  324. </div>
  325. <div class='tempcontrol-area-tab'>
  326. <div class='tempcontrol-box'><div class='tempcontrol-value'><input type='text' name='' value='16.5' class='tempchange'/><span class='tempvalue'>16.5</span></div>℃</div>
  327. <div class='max'>max</div>
  328. </div>
  329. </div>
  330. <div class='fengji-control'>
  331. <table id='fengji-table' cellpadding='0' cellspacing='0' border='0'>
  332. <tr>
  333. <td></td>
  334. <td><div class='fengji-control-head'>运行时间</div></td>
  335. <td><div class='fengji-control-head'>停止时间</div></td>
  336. <td><div class='fengji-control-head'>风速</div></td>
  337. <td></td>
  338. </tr>
  339. <tr>
  340. <td>风机1</td>
  341. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  342. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  343. <td></td>
  344. <td><input type="checkbox" class="checke"></td>
  345. </tr>
  346. <tr>
  347. <td>风机2</td>
  348. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  349. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  350. <td></td>
  351. <td><input type="checkbox" class="checke" /></td>
  352. </tr>
  353. <tr>
  354. <td>风机3</td>
  355. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  356. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  357. <td></td>
  358. <td><input type="checkbox" class="checke"></td>
  359. </tr>
  360. <tr>
  361. <td>风机4</td>
  362. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  363. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  364. <td></td>
  365. <td><input type="checkbox" class="checke" /></td>
  366. </tr>
  367. <tr>
  368. <td>风机5</td>
  369. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  370. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  371. <td></td>
  372. <td><input type="checkbox" class="checke"></td>
  373. </tr>
  374. <tr>
  375. <td>风机6</td>
  376. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  377. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  378. <td></td>
  379. <td><input type="checkbox" class="checke" /></td>
  380. </tr>
  381. <tr>
  382. <td>风机7</td>
  383. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  384. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  385. <td></td>
  386. <td><input type="checkbox" class="checke" checked/></td>
  387. </tr>
  388. <tr>
  389. <td>变频风机1</td>
  390. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  391. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  392. <td><input type='text' name='' value='80' class='fengji-control-input' /></td>
  393. <td><input type="checkbox" class="checke" checked/></td>
  394. </tr>
  395. <tr>
  396. <td>变频风机2</td>
  397. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  398. <td><input type='text' name='' value='1110' class='fengji-control-input' /></td>
  399. <td><input type='text' name='' value='80' class='fengji-control-input' /></td>
  400. <td><input type="checkbox" class="checke" checked/></td>
  401. </tr>
  402. </table>
  403. </div>
  404. </div>
  405. </div>
  406. <div class='step-set-area'>
  407. <div class="step-set-area-title">报警设置</div>
  408. <div class='warn-set-page'>
  409. <table id='warnset-table' cellpadding='0' cellspacing='0' border='0'>
  410. <tr>
  411. <td width='50'>开关</td>
  412. <td>内容</td>
  413. <td>行为</td>
  414. </tr>
  415. <tr>
  416. <td><img src='views/htclient/images/warn_o.png' /></td>
  417. <td><span>断电</span></td>
  418. <td><span class='warnaction'>声光</span><span class='warnaction checked'>电话</span><span class='warnaction'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  419. </tr>
  420. <tr>
  421. <td><img src='views/htclient/images/warn_o.png' /></td>
  422. <td><span>设备故障</span></td>
  423. <td><span class='warnaction'>声光</span><span class='warnaction'>电话</span><span class='warnaction checked'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  424. </tr>
  425. <tr>
  426. <td><img src='views/htclient/images/warn_o.png' /></td>
  427. <td><span>高温报警</span></td>
  428. <td><span class='warnaction'>声光</span><span class='warnaction checked'>电话</span><span class='warnaction checked'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  429. </tr>
  430. <tr>
  431. <td><img src='views/htclient/images/warn_o.png' /></td>
  432. <td><span>低温报警</span></td>
  433. <td><span class='warnaction'>声光</span><span class='warnaction'>电话</span><span class='warnaction'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  434. </tr>
  435. <tr>
  436. <td><img src='views/htclient/images/warn_o.png' /></td>
  437. <td><span>断网报警</span></td>
  438. <td><span class='warnaction'>声光</span><span class='warnaction checked'>电话</span><span class='warnaction checked'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  439. </tr>
  440. <tr>
  441. <td><img src='views/htclient/images/warn_o.png' /></td>
  442. <td><span>温差过大</span></td>
  443. <td><span class='warnaction checked'>声光</span><span class='warnaction'>电话</span><span class='warnaction'>短信</span><span class='warnaction checked'>蜂鸣器</span></td>
  444. </tr>
  445. <tr>
  446. <td><img src='views/htclient/images/warn_o.png' /></td>
  447. <td><span>温度传感器故障</span></td>
  448. <td><span class='warnaction checked'>声光</span><span class='warnaction'>电话</span><span class='warnaction'>短信</span><span class='warnaction checked'>蜂鸣器</span></td>
  449. </tr>
  450. <tr>
  451. <td><img src='views/htclient/images/warn_o.png' /></td>
  452. <td><span>湿度传感器故障</span></td>
  453. <td><span class='warnaction'>声光</span><span class='warnaction'>电话</span><span class='warnaction checked'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  454. </tr>
  455. <tr>
  456. <td><img src='views/htclient/images/warn_o.png' /></td>
  457. <td><span>氨气传感器故障</span></td>
  458. <td><span class='warnaction'>声光</span><span class='warnaction checked'>电话</span><span class='warnaction'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  459. </tr>
  460. <tr>
  461. <td><img src='views/htclient/images/warn_o.png' /></td>
  462. <td><span>PH传感器故障</span></td>
  463. <td><span class='warnaction'>声光</span><span class='warnaction'>电话</span><span class='warnaction'>短信</span><span class='warnaction'>蜂鸣器</span></td>
  464. </tr>
  465. </table>
  466. </div>
  467. </div>
  468. </div>
  469. </div>
  470. <script>
  471. var myChart_chart_ph, myChart_chart_mcsjdb, myChart_chart_container1, myChart_chart_container2, myChart_chart_container3;
  472. var myChart_chart_container4, myChart_chart_wdsdaq, myChart_chart_nh, myChart_chart_sbgz, myChart_chart_bjlx, myChart_chart_nh3ssqx;
  473. var myChart_chart_bjfx, myChart_chart_sbgzphb, myChart_chart_yxzt, myChart_chart_psssjc, myChart_chart_codbodqx, myChart_chart_zlphqx;
  474. //切換選中
  475. var timer2;
  476. var mctimer2;
  477. var mctimer3;
  478. window.clearInterval(timer2);
  479. window.clearInterval(mctimer2);
  480. window.clearInterval(mctimer3);
  481. //地图全国
  482. var map_qg = new AMap.Map('map-right-container', {
  483. zoomEnable : true,
  484. dragEnable : true,
  485. center : [ 104.960988, 38.037648 ],
  486. zoom : 1,
  487. mapStyle : 'amap://styles/a19dfc1da7101e0ae585747500c879a5'
  488. });
  489. //渲染全国颜色
  490. map_qg.plugin([ "AMap.DistrictLayer" ], function() {
  491. disProvince = new AMap.DistrictLayer.Country({
  492. zIndex : 12,
  493. SOC : 'CHN',
  494. depth : 1,
  495. styles : {
  496. 'province-stroke' : 'white',
  497. 'nation-stroke' : '#22ffff',
  498. 'fill' : '#0084cf',
  499. 'coastline-stroke' : [ 0.8, 0.63, 0.94, 1 ],
  500. }
  501. });
  502. disProvince.setMap(map_qg);
  503. });
  504. var markers1 = [ {
  505. position : [ 115.1563, 38.382945 ],
  506. content : '',
  507. }, {
  508. position : [ 114.453175, 33.034392 ],
  509. content : '',
  510. }, {
  511. position : [ 118.408253, 29.733788 ],
  512. icon : 'views/htclient/images/cap_g.png',
  513. content : '',
  514. }, {
  515. position : [ 119.902394, 32.442966 ],
  516. content : '',
  517. } ];
  518. for (var j = 0, len = markers1.length; j < len; ++j) {
  519. var maker = new AMap.Marker({
  520. map : map_qg,
  521. icon : markers1[j].icon ? markers1[j].icon : 'views/htclient/images/cap_w.png', //不设置使用默认
  522. position : markers1[j].position,
  523. offset : new AMap.Pixel(-7, -7)
  524. });
  525. maker.setTitle(markers1[j].content);
  526. maker.setLabel({
  527. // offset: new AMap.Pixel(-7, -7), //设置文本标注偏移量
  528. //content: "<div class='info'>"+markers1[j].content+"</div>", //设置文本标注内容
  529. // direction: 'bottom' ,//设置文本标注方位
  530. //animation:"AMAP_ANIMATION_DROP"
  531. });
  532. }
  533. // 统计图刷新
  534. function getSsqxSj(lqid, type) {
  535. switch (type) {
  536. case "snwd":
  537. jqAjax("getHaifmvSnwdTjt.htm", lqid, type);
  538. break;
  539. case "snsd":
  540. jqAjax("getHaifmvSnsdTjt.htm", lqid, type);
  541. break;
  542. case "snaq":
  543. jqAjax("getHaifmvSnaqTjt.htm", lqid, type);
  544. break;
  545. case "snph":
  546. jqAjax("getHaifmvSnphTjt.htm", lqid, type);
  547. break;
  548. case "sldl":
  549. jqAjax("getHkClientNhsjTjt.htm", lqid, type);
  550. break;
  551. }
  552. }
  553. //请求图表
  554. //ztType = snwd snsd snaq
  555. function jqAjax(url, lqid, ztType) {
  556. var option_chart_wdsdaq;
  557. if (ztType == "snph") {
  558. /* */
  559. }
  560. if (ztType == "snwd" || ztType == "snsd" || ztType == "snaq") {
  561. }
  562. jQuery.ajax({
  563. type : "get",
  564. url : url,
  565. data : {
  566. "lqid" : lqid,
  567. "type" : ztType,
  568. "jsms" : "1", // 曲线为日均曲线
  569. "qyid" : lqid
  570. },
  571. dataType : "json",
  572. async : true,
  573. success : function(data) {
  574. //option_chart_ph
  575. var series = [];
  576. var series2 = [];
  577. var yAxis = [];
  578. if (ztType == "sldl") {
  579. if (data.h) {
  580. series = [];
  581. series2 = [];
  582. yAxis = [];
  583. for (var i = 0; i < data.h.length; i++) {
  584. series[i] = data.dl[i];
  585. series2[i] = data.sl[i];
  586. yAxis[i] = data.h[i];
  587. }
  588. }
  589. if (data.dl[data.h.length - 1] > 0) {
  590. var option_chart_nh = myChart_chart_nh.getOption();
  591. option_chart_nh.series[0].data = series;
  592. option_chart_nh.series[1].data = series2;
  593. option_chart_nh.xAxis[0].data = yAxis;
  594. myChart_chart_nh.setOption(option_chart_nh, true);
  595. }
  596. } else {
  597. var flag = 0;
  598. if (data.values[0]) {
  599. series = [];
  600. yAxis = [];
  601. for (var i = 0; i < data.values[0].length; i++) {
  602. series[i] = {
  603. name : data.ydw,
  604. value : data.values[0][i].y
  605. };
  606. yAxis[i] = formatDate(data.values[0][i].x);
  607. }
  608. if (data.values[0][data.values[0].length - 1].y > 0) {
  609. flag = 0;
  610. } else {
  611. flag = 1;
  612. }
  613. }
  614. if (ztType == "snph" && flag == 0) {
  615. var option_chart_ph = myChart_chart_ph.getOption();
  616. myChart_chart_ph.clear();
  617. option_chart_ph.series[0].data = series;
  618. option_chart_ph.xAxis[0].data = yAxis;
  619. myChart_chart_ph.setOption(option_chart_ph, true);
  620. }
  621. if (ztType == "snwd" && flag == 0) {
  622. option_chart_wdsdaq = myChart_chart_wdsdaq.getOption();
  623. myChart_chart_wdsdaq.clear();
  624. //var option_chart_wdsdaq = myChart_chart_wdsdaq.getOption();
  625. option_chart_wdsdaq.series[0].data = series;
  626. option_chart_wdsdaq.xAxis[0].data = yAxis;
  627. myChart_chart_wdsdaq.setOption(option_chart_wdsdaq, true);
  628. }
  629. if (ztType == "snsd" && flag == 0) {
  630. option_chart_wdsdaq = myChart_chart_wdsdaq.getOption();
  631. myChart_chart_wdsdaq.clear();
  632. //var option_chart_wdsdaq = myChart_chart_wdsdaq.getOption();
  633. option_chart_wdsdaq.series[1].data = series;
  634. option_chart_wdsdaq.xAxis[0].data = yAxis;
  635. myChart_chart_wdsdaq.setOption(option_chart_wdsdaq, true);
  636. }
  637. if (ztType == "snaq" && flag == 0) {
  638. option_chart_wdsdaq = myChart_chart_wdsdaq.getOption();
  639. myChart_chart_wdsdaq.clear();
  640. //var option_chart_wdsdaq = myChart_chart_wdsdaq.getOption();
  641. option_chart_wdsdaq.series[2].data = series;
  642. option_chart_wdsdaq.xAxis[0].data = yAxis;
  643. myChart_chart_wdsdaq.setOption(option_chart_wdsdaq, true);
  644. }
  645. }
  646. }
  647. });
  648. }
  649. var dom_chart_mcsjdb = document.getElementsByClassName("chart-mcsjdb-area");
  650. var dom_chart_container1 = document.getElementById("chart-container1");
  651. var dom_chart_container2 = document.getElementById("chart-container2");
  652. var dom_chart_container3 = document.getElementById("chart-container3");
  653. var dom_chart_container4 = document.getElementById("chart-container4");
  654. var dom_chart_wdsdaq = document.getElementById("chart-wdsdaq");
  655. var dom_chart_ph = document.getElementById("chart-ph");
  656. var dom_chart_nh = document.getElementById("chart-nh");
  657. var dom_chart_sbgz = document.getElementById("chart-sbgz");
  658. var dom_chart_bjlx = document.getElementById("chart-bjlx");
  659. var dom_chart_bjfx = document.getElementById("chart-bjfx");
  660. var dom_chart_sbgzphb = document.getElementById("chart-sbgzphb");
  661. var dom_chart_yxzt = document.getElementById("chart-yxzt");
  662. var dom_chart_psssjc = document.getElementById("chart-psssjc");
  663. var dom_chart_codbodqx = document.getElementById("chart-codbodqx");
  664. var dom_chart_nh3ssqx = document.getElementById("chart-nh3ssqx");
  665. var dom_chart_zlphqx = document.getElementById("chart-zlphqx");
  666. /* $(window).load(function() {
  667. //window.onload = function(){
  668. $("#ywbj-box").slimScroll({
  669. size : 0,
  670. width : $(".warning-count-msglist-box#ywbj-box").width(),
  671. height : $(".warning-count-msglist-box#ywbj-box").height()
  672. });
  673. $("#wxbz-box").slimScroll({
  674. size : 0,
  675. width : $(".warning-count-msglist-box#wxbz-box").width(),
  676. height : $(".warning-count-msglist-box#wxbz-box").height()
  677. });
  678. })
  679. */
  680. var sit1 = setTimeout(function (){
  681. $("#ywbj-box").slimScroll({
  682. size : 0,
  683. width : $(".warning-count-msglist-box#ywbj-box").width(),
  684. height : $(".warning-count-msglist-box#ywbj-box").height()
  685. });
  686. $("#wxbz-box").slimScroll({
  687. size : 0,
  688. width : $(".warning-count-msglist-box#wxbz-box").width(),
  689. height : $(".warning-count-msglist-box#wxbz-box").height()
  690. });
  691. var options = {
  692. horizontal: 1,
  693. itemNav: 'centered',
  694. smart: 1,
  695. activateOn: 'click',
  696. mouseDragging: 1,
  697. touchDragging: 1,
  698. speed: 200,
  699. moveBy: 600,
  700. //自动循环
  701. cycleBy: "items",
  702. cycleInterval: 6000,
  703. }
  704. sly = new Sly($('#BoxUl'), options).init();
  705. sly.next();
  706. sly.on('active', function (eventName, itemIndex) {
  707. var lqid = $(".single li.active").attr("data-lqid");
  708. var zsqy = $(".single li.active").attr("data-zsqy");
  709. var qylq = $(".single li.active").attr("data-qylq");
  710. var lqid = $(".single li.active").attr("data-lqid");
  711. var o = myChart_chart_wdsdaq.getOption();
  712. //for(var i=0;i<3;++i){
  713. for(var i in o.legend[0].selected){
  714. if(o.legend[0].selected[i]){
  715. if(i=='温度'){
  716. getSsqxSj(lqid, "snwd");
  717. }else if(i=='湿度'){
  718. getSsqxSj(lqid, "snsd");
  719. }else{
  720. getSsqxSj(lqid, "snaq");
  721. }
  722. }
  723. }
  724. //}
  725. var zsqyOld = $("#zsqy").val();
  726. var qylqOld = $("#qylq").val();
  727. if (zsqyOld == "" || zsqyOld != zsqy) {
  728. $("#zsqy").val(zsqy);
  729. $("#qylq").val(qylq);
  730. getSsqxSj(zsqy, "sldl");
  731. getSsqxSj(qylq, "snph");
  732. }
  733. });
  734. /* $('#BoxUl').sly('on', 'active', function (eventName, itemIndex) {
  735. var lqid = $(".single li.active").attr("data-lqid");
  736. var zsqy = $(".single li.active").attr("data-zsqy");
  737. var qylq = $(".single li.active").attr("data-qylq");
  738. var o = myChart_chart_wdsdaq.getOption();
  739. //for(var i=0;i<3;++i){
  740. for(var i in o.legend[0].selected){
  741. if(o.legend[0].selected[i]){
  742. if(i=='温度'){
  743. getSsqxSj(lqid, "snwd");
  744. }else if(i=='湿度'){
  745. getSsqxSj(lqid, "snsd");
  746. }else{
  747. getSsqxSj(lqid, "snaq");
  748. }
  749. }
  750. }
  751. //}
  752. var zsqyOld = $("#zsqy").val();
  753. var qylqOld = $("#qylq").val();
  754. if (zsqyOld == "" || zsqyOld != zsqy) {
  755. $("#zsqy").val(zsqy);
  756. $("#qylq").val(qylq);
  757. getSsqxSj(zsqy, "sldl");
  758. getSsqxSj(qylq, "snph");
  759. }
  760. console.log('move')
  761. }); */
  762. var mcscroll = $('.charts-mclist-area').mySingleScroll({
  763. speed : 4000
  764. });
  765. //图表区域
  766. var myChart_chart_mcsjdb1 = echarts.init(dom_chart_mcsjdb[0]);//循环出来
  767. var myChart_chart_mcsjdb2 = echarts.init(dom_chart_mcsjdb[1]);//循环出来
  768. var myChart_chart_mcsjdb3 = echarts.init(dom_chart_mcsjdb[2]);//循环出来
  769. var myChart_chart_mcsjdb4 = echarts.init(dom_chart_mcsjdb[3]);//循环出来
  770. myChart_chart_container1 = echarts.init(dom_chart_container1);
  771. myChart_chart_container2 = echarts.init(dom_chart_container2);
  772. myChart_chart_container3 = echarts.init(dom_chart_container3);
  773. myChart_chart_container4 = echarts.init(dom_chart_container4);
  774. myChart_chart_wdsdaq = echarts.init(dom_chart_wdsdaq);
  775. myChart_chart_ph = echarts.init(dom_chart_ph);
  776. myChart_chart_nh = echarts.init(dom_chart_nh);
  777. myChart_chart_sbgz = echarts.init(dom_chart_sbgz);
  778. myChart_chart_bjlx = echarts.init(dom_chart_bjlx);
  779. myChart_chart_bjfx = echarts.init(dom_chart_bjfx);
  780. myChart_chart_sbgzphb = echarts.init(dom_chart_sbgzphb);
  781. myChart_chart_yxzt = echarts.init(dom_chart_yxzt);
  782. myChart_chart_psssjc = echarts.init(dom_chart_psssjc);
  783. myChart_chart_codbodqx = echarts.init(dom_chart_codbodqx);
  784. myChart_chart_nh3ssqx = echarts.init(dom_chart_nh3ssqx);
  785. myChart_chart_zlphqx = echarts.init(dom_chart_zlphqx);
  786. var app = {};
  787. var option_chart_mcsjdb1 = null,option_chart_mcsjdb2 = null,option_chart_mcsjdb3 = null,option_chart_mcsjdb4 = null,
  788. option_chart_container1 = null,
  789. option_chart_container2 = null,
  790. option_chart_container3 = null,
  791. option_chart_container4 = null;
  792. var option_chart_wdsdaq = null,
  793. option_chart_ph = null,
  794. option_chart_nh = null,
  795. option_chart_sbgz = null,
  796. option_chart_bjlx = null,
  797. option_chart_bjfx = null,
  798. option_chart_sbgzphb = null;
  799. var option_chart_yxzt = null,
  800. option_chart_psssjc = null,
  801. option_chart_codbodqx = null,
  802. option_chart_nh3ssqx = null,
  803. option_chart_zlphqx = null;
  804. //牧场数据对比饼状图
  805. option_chart_mcsjdb1 = {
  806. title : {
  807. text : '$!mcmc1',
  808. top : '3%',
  809. left : 'center',
  810. textStyle : {
  811. fontWeight : 'normal',
  812. fontSize : '14',
  813. color : '#ccf5f9',
  814. }
  815. },
  816. color : [ '#f09954', '#e62963', '#6b2db2', '#3422b4', '#e75e66', '#912aaf', '#6a2cba', '#e45e65' ],
  817. tooltip : {
  818. trigger : 'item',
  819. formatter : "{a}<br>{b} : {c} ({d}%)"
  820. },
  821. legend : {
  822. icon : 'circle',
  823. itemGap : 6,
  824. itemWidth : 10,
  825. x : 'center',
  826. bottom : '-50%',
  827. textStyle : {
  828. color : '#ccf5f9',
  829. },
  830. selected:{
  831. '配种数':true,
  832. '分娩数':true,
  833. '产仔量':true,
  834. '淘汰量':true,
  835. '销售量':true,
  836. },
  837. },
  838. series : [
  839. {
  840. name : '$!mcmc1',
  841. type : 'pie',
  842. radius : [ '20%', '70%' ],
  843. center : [ '50%', '55%' ],
  844. data : [
  845. {
  846. value : "$!pzs1",
  847. name : '配种数'
  848. },
  849. {
  850. value : "$!fms1",
  851. name : '分娩数'
  852. },
  853. {
  854. value : "$!czs1",
  855. name : '产仔量'
  856. },
  857. {
  858. value : "$!tts1",
  859. name : '淘汰量'
  860. },
  861. {
  862. value : "$!xss1",
  863. name : '销售量'
  864. },
  865. ],
  866. label : {
  867. normal : {
  868. show : true,
  869. position : 'inner', //标签的位置
  870. textStyle : {
  871. fontWeight : 300,
  872. color : '#ccf5f9',
  873. fontSize : 12 //文字的字体大小
  874. },
  875. formatter : '{d}%'
  876. }
  877. },
  878. labelLine : {
  879. normal : {
  880. show : false,
  881. length : 0,
  882. length2 : 4,
  883. }
  884. },
  885. itemStyle : {
  886. emphasis : {
  887. shadowBlur : 10,
  888. shadowOffsetX : 0,
  889. shadowColor : 'rgba(0, 0, 0, 0.5)'
  890. }
  891. }
  892. }
  893. ]
  894. };
  895. option_chart_mcsjdb2 = {
  896. title : {
  897. text : '$!mcmc2',
  898. top : '3%',
  899. left : 'center',
  900. textStyle : {
  901. fontWeight : 'normal',
  902. fontSize : '14',
  903. color : '#ccf5f9',
  904. }
  905. },
  906. color : [ '#f09954', '#e62963', '#6b2db2', '#3422b4', '#e75e66', '#912aaf', '#6a2cba', '#e45e65' ],
  907. tooltip : {
  908. trigger : 'item',
  909. formatter : "{a}<br>{b} : {c} ({d}%)"
  910. },
  911. legend : {
  912. icon : 'circle',
  913. itemGap : 6,
  914. itemWidth : 10,
  915. x : 'center',
  916. bottom : '-50%',
  917. textStyle : {
  918. color : '#ccf5f9',
  919. },
  920. selected:{
  921. '配种数':true,
  922. '分娩数':true,
  923. '产仔量':true,
  924. '淘汰量':true,
  925. '销售量':true,
  926. },
  927. },
  928. series : [
  929. {
  930. name : '$!mcmc1',
  931. type : 'pie',
  932. radius : [ '20%', '70%' ],
  933. center : [ '50%', '55%' ],
  934. data : [
  935. {
  936. value : "$!pzs2",
  937. name : '配种数'
  938. },
  939. {
  940. value : "$!fms2",
  941. name : '分娩数'
  942. },
  943. {
  944. value : "$!czs2",
  945. name : '产仔量'
  946. },
  947. {
  948. value : "$!tts2",
  949. name : '淘汰量'
  950. },
  951. {
  952. value : "$!xss2",
  953. name : '销售量'
  954. },
  955. ],
  956. label : {
  957. normal : {
  958. show : true,
  959. position : 'inner', //标签的位置
  960. textStyle : {
  961. fontWeight : 300,
  962. color : '#ccf5f9',
  963. fontSize : 12 //文字的字体大小
  964. },
  965. formatter : '{d}%'
  966. }
  967. },
  968. labelLine : {
  969. normal : {
  970. show : false,
  971. length : 0,
  972. length2 : 4,
  973. }
  974. },
  975. itemStyle : {
  976. emphasis : {
  977. shadowBlur : 10,
  978. shadowOffsetX : 0,
  979. shadowColor : 'rgba(0, 0, 0, 0.5)'
  980. }
  981. }
  982. }
  983. ]
  984. };
  985. option_chart_mcsjdb3 = {
  986. title : {
  987. text : '$!mcmc3',
  988. top : '3%',
  989. left : 'center',
  990. textStyle : {
  991. fontWeight : 'normal',
  992. fontSize : '14',
  993. color : '#ccf5f9',
  994. }
  995. },
  996. color : [ '#f09954', '#e62963', '#6b2db2', '#3422b4', '#e75e66', '#912aaf', '#6a2cba', '#e45e65' ],
  997. tooltip : {
  998. trigger : 'item',
  999. formatter : "{a}<br>{b} : {c} ({d}%)"
  1000. },
  1001. legend : {
  1002. icon : 'circle',
  1003. itemGap : 6,
  1004. itemWidth : 10,
  1005. x : 'center',
  1006. bottom : '-50%',
  1007. textStyle : {
  1008. color : '#ccf5f9',
  1009. },
  1010. selected:{
  1011. '配种数':true,
  1012. '分娩数':true,
  1013. '产仔量':true,
  1014. '淘汰量':true,
  1015. '销售量':true,
  1016. },
  1017. },
  1018. series : [
  1019. {
  1020. name : '$!mcmc1',
  1021. type : 'pie',
  1022. radius : [ '20%', '70%' ],
  1023. center : [ '50%', '55%' ],
  1024. data : [
  1025. {
  1026. value : "$!pzs3",
  1027. name : '配种数'
  1028. },
  1029. {
  1030. value : "$!fms3",
  1031. name : '分娩数'
  1032. },
  1033. {
  1034. value : "$!czs3",
  1035. name : '产仔量'
  1036. },
  1037. {
  1038. value : "$!tts3",
  1039. name : '淘汰量'
  1040. },
  1041. {
  1042. value : "$!xss3",
  1043. name : '销售量'
  1044. },
  1045. ],
  1046. label : {
  1047. normal : {
  1048. show : true,
  1049. position : 'inner', //标签的位置
  1050. textStyle : {
  1051. fontWeight : 300,
  1052. color : '#ccf5f9',
  1053. fontSize : 12 //文字的字体大小
  1054. },
  1055. formatter : '{d}%'
  1056. }
  1057. },
  1058. labelLine : {
  1059. normal : {
  1060. show : false,
  1061. length : 0,
  1062. length2 : 4,
  1063. }
  1064. },
  1065. itemStyle : {
  1066. emphasis : {
  1067. shadowBlur : 10,
  1068. shadowOffsetX : 0,
  1069. shadowColor : 'rgba(0, 0, 0, 0.5)'
  1070. }
  1071. }
  1072. }
  1073. ]
  1074. };
  1075. option_chart_mcsjdb4 = {
  1076. title : {
  1077. text : '$!mcmc4',
  1078. top : '3%',
  1079. left : 'center',
  1080. textStyle : {
  1081. fontWeight : 'normal',
  1082. fontSize : '14',
  1083. color : '#ccf5f9',
  1084. }
  1085. },
  1086. color : [ '#f09954', '#e62963', '#6b2db2', '#3422b4', '#e75e66', '#912aaf', '#6a2cba', '#e45e65' ],
  1087. tooltip : {
  1088. trigger : 'item',
  1089. formatter : "{a}<br>{b} : {c} ({d}%)"
  1090. },
  1091. legend : {
  1092. icon : 'circle',
  1093. itemGap : 6,
  1094. itemWidth : 10,
  1095. x : 'center',
  1096. bottom : '-50%',
  1097. textStyle : {
  1098. color : '#ccf5f9',
  1099. },
  1100. selected:{
  1101. '配种数':true,
  1102. '分娩数':true,
  1103. '产仔量':true,
  1104. '淘汰量':true,
  1105. '销售量':true,
  1106. },
  1107. },
  1108. series : [
  1109. {
  1110. name : '$!mcmc1',
  1111. type : 'pie',
  1112. radius : [ '20%', '70%' ],
  1113. center : [ '50%', '55%' ],
  1114. data : [
  1115. {
  1116. value : "$!pzs4",
  1117. name : '配种数'
  1118. },
  1119. {
  1120. value : "$!fms4",
  1121. name : '分娩数'
  1122. },
  1123. {
  1124. value : "$!czs4",
  1125. name : '产仔量'
  1126. },
  1127. {
  1128. value : "$!tts4",
  1129. name : '淘汰量'
  1130. },
  1131. {
  1132. value : "$!xss4",
  1133. name : '销售量'
  1134. },
  1135. ],
  1136. label : {
  1137. normal : {
  1138. show : true,
  1139. position : 'inner', //标签的位置
  1140. textStyle : {
  1141. fontWeight : 300,
  1142. color : '#ccf5f9',
  1143. fontSize : 12 //文字的字体大小
  1144. },
  1145. formatter : '{d}%'
  1146. }
  1147. },
  1148. labelLine : {
  1149. normal : {
  1150. show : false,
  1151. length : 0,
  1152. length2 : 4,
  1153. }
  1154. },
  1155. itemStyle : {
  1156. emphasis : {
  1157. shadowBlur : 10,
  1158. shadowOffsetX : 0,
  1159. shadowColor : 'rgba(0, 0, 0, 0.5)'
  1160. }
  1161. }
  1162. }
  1163. ]
  1164. };
  1165. //牧场配种分娩率比较
  1166. option_chart_container1 = {
  1167. title : {
  1168. text : '配种分娩率',
  1169. top : '5%',
  1170. left : '3%',
  1171. textStyle : {
  1172. fontWeight : 'normal',
  1173. fontSize : '14',
  1174. color : '#ccf5f9',
  1175. }
  1176. },
  1177. tooltip : {
  1178. trigger : 'axis',
  1179. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  1180. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1181. },
  1182. formatter : '{b}:{c}%'
  1183. },
  1184. grid : {
  1185. x : '3%',
  1186. y : '30%',
  1187. x2 : '10%',
  1188. y2 : '3%',
  1189. containLabel : true
  1190. },
  1191. xAxis : {
  1192. type : 'category',
  1193. data : [ '$!mcmc1', '$!mcmc2', '$!mcmc3', '$!mcmc4' ],
  1194. axisTick : {
  1195. alignWithLabel : true
  1196. },
  1197. axisLine : {
  1198. show : true,
  1199. lineStyle : {
  1200. type : 'solid',
  1201. color : '#4865e3', //左边线的颜色
  1202. width : '1' //坐标线的宽度
  1203. }
  1204. },
  1205. axisLabel : {
  1206. textStyle : {
  1207. color : '#ccf5f9',
  1208. },
  1209. }
  1210. },
  1211. yAxis : {
  1212. type : 'value',
  1213. axisLine : {
  1214. show : true,
  1215. lineStyle : {
  1216. type : 'solid',
  1217. color : '#4865e3', //左边线的颜色
  1218. width : '1' //坐标线的宽度
  1219. }
  1220. },
  1221. axisLabel : {
  1222. textStyle : {
  1223. color : '#ccf5f9',
  1224. },
  1225. },
  1226. splitLine : {
  1227. lineStyle : {
  1228. type : 'solid',
  1229. color : 'rgba(72,101,227,0.7)',
  1230. width : '1'
  1231. }
  1232. }
  1233. },
  1234. series : [
  1235. {
  1236. name : '配种分娩率',
  1237. type : 'bar',
  1238. barWidth : '40%',
  1239. data : [ "$!pzfml1", "$!pzfml2", "$!pzfml3", "$!pzfml4"],
  1240. itemStyle : {
  1241. normal : {
  1242. color : function(params) {
  1243. var colorList = [ '#0b86b2', '#8724cd', '#c5386d', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB' ];
  1244. return colorList[params.dataIndex]
  1245. },
  1246. label : {
  1247. show : true, //开启显示
  1248. position : 'top', //在上方显示
  1249. textStyle : { //数值样式
  1250. color : '#ccf5f9',
  1251. fontSize : 12
  1252. },
  1253. formatter : '{c}%'
  1254. },
  1255. }
  1256. },
  1257. }
  1258. ]
  1259. };
  1260. //牧场窝均活仔数-分娩活仔率比较
  1261. option_chart_container2 = {
  1262. title : {
  1263. text : '窝均活仔数-分娩活仔率',
  1264. top : '5%',
  1265. left : '3%',
  1266. textStyle : {
  1267. fontWeight : 'normal',
  1268. fontSize : '14',
  1269. color : '#ccf5f9',
  1270. }
  1271. },
  1272. tooltip : {
  1273. trigger : 'axis',
  1274. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  1275. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1276. },
  1277. },
  1278. grid : {
  1279. x : '3%',
  1280. y : '30%',
  1281. x2 : '10%',
  1282. y2 : '3%',
  1283. containLabel : true
  1284. },
  1285. xAxis : {
  1286. type : 'category',
  1287. data : [ '$!mcmc1', '$!mcmc2', '$!mcmc3', '$!mcmc4' ],
  1288. axisTick : {
  1289. alignWithLabel : true
  1290. },
  1291. axisLine : {
  1292. show : true,
  1293. lineStyle : {
  1294. type : 'solid',
  1295. color : '#4865e3', //左边线的颜色
  1296. width : '1' //坐标线的宽度
  1297. }
  1298. },
  1299. axisLabel : {
  1300. textStyle : {
  1301. color : '#ccf5f9',
  1302. },
  1303. }
  1304. },
  1305. yAxis : [ {
  1306. type : 'value',
  1307. name : '窝均活仔数',
  1308. scale : true,
  1309. axisLine : {
  1310. show : true,
  1311. lineStyle : {
  1312. type : 'solid',
  1313. color : '#4865e3', //左边线的颜色
  1314. width : '1' //坐标线的宽度
  1315. }
  1316. },
  1317. splitLine : {
  1318. lineStyle : {
  1319. type : 'solid',
  1320. color : 'rgba(72,101,227,0.8)',
  1321. width : '1'
  1322. }
  1323. },
  1324. axisLabel : {
  1325. textStyle : {
  1326. color : '#ccf5f9',
  1327. },
  1328. }
  1329. }, {
  1330. type : 'value',
  1331. name : '分娩活仔率',
  1332. scale : true,
  1333. min : 0,
  1334. max : 100,
  1335. axisLine : {
  1336. show : true,
  1337. lineStyle : {
  1338. type : 'solid',
  1339. color : '#4865e3', //左边线的颜色
  1340. width : '1' //坐标线的宽度
  1341. }
  1342. },
  1343. splitLine : {
  1344. lineStyle : {
  1345. type : 'solid',
  1346. color : 'rgba(72,101,227,0.8)',
  1347. width : '1'
  1348. }
  1349. },
  1350. axisLabel : {
  1351. textStyle : {
  1352. color : '#ccf5f9',
  1353. },
  1354. }
  1355. } ],
  1356. series : [
  1357. {
  1358. name : '窝均活仔数',
  1359. type : 'bar',
  1360. barWidth : '40%',
  1361. data : [ "$!wjhzs1", "$!wjhzs2", "$!wjhzs3", "$!wjhzs4" ],
  1362. yAxisIndex : 0,
  1363. itemStyle : {
  1364. normal : {
  1365. color : function(params) {
  1366. var colorList = [ '#0b86b2', '#8724cd', '#c5386d', '#EE9201', '#29AAE3', '#B74AE5', '#0AAF9F', '#E89589', '#16A085', '#4A235A', '#C39BD3 ', '#F9E79F', '#BA4A00', '#ECF0F1', '#616A6B', '#EAF2F8', '#4A235A', '#3498DB' ];
  1367. return colorList[params.dataIndex]
  1368. },
  1369. label : {
  1370. show : true, //开启显示
  1371. position : 'top', //在上方显示
  1372. textStyle : { //数值样式
  1373. color : '#ccf5f9',
  1374. fontSize : 12
  1375. },
  1376. formatter : '{c}'
  1377. },
  1378. }
  1379. },
  1380. },
  1381. {
  1382. name : '分娩活仔率',
  1383. type : 'bar',
  1384. barWidth : '40%',
  1385. data : [ "$!fmhzl1", "$!fmhzl2", "$!fmhzl3", "$!fmhzl4" ],
  1386. yAxisIndex : 1,
  1387. itemStyle : {
  1388. normal : {
  1389. color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
  1390. offset : 0,
  1391. color : '#e18f91'
  1392. },
  1393. {
  1394. offset : 1,
  1395. color : '#3824aa'
  1396. } ]),
  1397. label : {
  1398. show : true, //开启显示
  1399. position : 'top', //在上方显示
  1400. textStyle : { //数值样式
  1401. color : '#ccf5f9',
  1402. fontSize : 12
  1403. },
  1404. formatter : '{c}%'
  1405. }
  1406. }
  1407. },
  1408. }
  1409. ]
  1410. };
  1411. //保育猪淘汰数(上月)比较
  1412. option_chart_container3 = {
  1413. title : {
  1414. text : '种猪淘汰数(上月)',
  1415. top : '5%',
  1416. left : '3%',
  1417. textStyle : {
  1418. fontWeight : 'normal',
  1419. fontSize : '14',
  1420. color : '#ccf5f9',
  1421. }
  1422. },
  1423. color : [ '#207bc4', '#b93b6a' ],
  1424. tooltip : {
  1425. trigger : 'axis',
  1426. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  1427. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1428. },
  1429. },
  1430. grid : {
  1431. x : '3%',
  1432. y : '30%',
  1433. x2 : '10%',
  1434. y2 : '3%',
  1435. containLabel : true
  1436. },
  1437. xAxis : {
  1438. type : 'category',
  1439. data : [ '$!mcmc1', '$!mcmc2', '$!mcmc3', '$!mcmc4' ],
  1440. axisTick : {
  1441. alignWithLabel : true
  1442. },
  1443. axisLine : {
  1444. show : true,
  1445. lineStyle : {
  1446. type : 'solid',
  1447. color : '#4865e3', //左边线的颜色
  1448. width : '1' //坐标线的宽度
  1449. }
  1450. },
  1451. axisLabel : {
  1452. textStyle : {
  1453. color : '#ccf5f9',
  1454. },
  1455. }
  1456. },
  1457. yAxis : {
  1458. type : 'value',
  1459. scale : true,
  1460. axisLine : {
  1461. show : true,
  1462. lineStyle : {
  1463. type : 'solid',
  1464. color : '#4865e3', //左边线的颜色
  1465. width : '1' //坐标线的宽度
  1466. }
  1467. },
  1468. splitLine : {
  1469. lineStyle : {
  1470. type : 'solid',
  1471. color : 'rgba(72,101,227,0.7)',
  1472. width : '1'
  1473. }
  1474. },
  1475. axisLabel : {
  1476. textStyle : {
  1477. color : '#ccf5f9',
  1478. },
  1479. }
  1480. },
  1481. series : [
  1482. {
  1483. type : 'bar',
  1484. barWidth : '30%',
  1485. name : '母猪淘汰数',
  1486. data : ["$!mztt1", "$!mztt2", "$!mztt3", "$!mztt4" ],
  1487. itemStyle : {
  1488. normal : {
  1489. label : {
  1490. show : true, //开启显示
  1491. position : 'top', //在上方显示
  1492. textStyle : { //数值样式
  1493. color : '#ccf5f9',
  1494. fontSize : 12
  1495. },
  1496. formatter : '{c}'
  1497. },
  1498. }
  1499. },
  1500. }, {
  1501. type : 'bar',
  1502. barWidth : '30%',
  1503. name : '公猪淘汰数',
  1504. data : ["$!gztt1", "$!gztt2", "$!gztt3", "$!gztt4" ],
  1505. itemStyle : {
  1506. normal : {
  1507. label : {
  1508. show : true, //开启显示
  1509. position : 'top', //在上方显示
  1510. textStyle : { //数值样式
  1511. color : '#ccf5f9',
  1512. fontSize : 12
  1513. },
  1514. formatter : '{c}'
  1515. },
  1516. }
  1517. },
  1518. }
  1519. ]
  1520. };
  1521. //肥猪淘汰数(上月)比较
  1522. option_chart_container4 = {
  1523. title : {
  1524. text : '肥猪淘汰数(上月)',
  1525. top : '5%',
  1526. left : '3%',
  1527. textStyle : {
  1528. fontWeight : 'normal',
  1529. fontSize : '14',
  1530. color : '#ccf5f9',
  1531. }
  1532. },
  1533. color : [ '#207bc4', '#b93b6a' ],
  1534. tooltip : {
  1535. trigger : 'axis',
  1536. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  1537. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1538. },
  1539. },
  1540. grid : {
  1541. x : '3%',
  1542. y : '30%',
  1543. x2 : '10%',
  1544. y2 : '3%',
  1545. containLabel : true
  1546. },
  1547. xAxis : {
  1548. type : 'category',
  1549. data : [ '$!mcmc1', '$!mcmc2', '$!mcmc3', '$!mcmc4' ],
  1550. axisTick : {
  1551. alignWithLabel : true
  1552. },
  1553. axisLine : {
  1554. show : true,
  1555. lineStyle : {
  1556. type : 'solid',
  1557. color : '#4865e3', //左边线的颜色
  1558. width : '1' //坐标线的宽度
  1559. }
  1560. },
  1561. axisLabel : {
  1562. textStyle : {
  1563. color : '#ccf5f9',
  1564. },
  1565. }
  1566. },
  1567. yAxis : {
  1568. type : 'value',
  1569. scale : true,
  1570. axisLine : {
  1571. show : true,
  1572. lineStyle : {
  1573. type : 'solid',
  1574. color : '#4865e3', //左边线的颜色
  1575. width : '1' //坐标线的宽度
  1576. }
  1577. },
  1578. splitLine : {
  1579. lineStyle : {
  1580. type : 'solid',
  1581. color : 'rgba(72,101,227,0.7)',
  1582. width : '1'
  1583. }
  1584. },
  1585. axisLabel : {
  1586. textStyle : {
  1587. color : '#ccf5f9',
  1588. },
  1589. }
  1590. },
  1591. series : [
  1592. {
  1593. type : 'bar',
  1594. barWidth : '30%',
  1595. name : '保育淘汰数',
  1596. data : ["$!bytt1", "$!bytt2", "$!bytt3", "$!bytt4" ],
  1597. itemStyle : {
  1598. normal : {
  1599. label : {
  1600. show : true, //开启显示
  1601. position : 'top', //在上方显示
  1602. textStyle : { //数值样式
  1603. color : '#ccf5f9',
  1604. fontSize : 12
  1605. },
  1606. formatter : '{c}'
  1607. },
  1608. }
  1609. },
  1610. }, {
  1611. type : 'bar',
  1612. barWidth : '30%',
  1613. name : '育肥淘汰数',
  1614. data : ["$!yftt1", "$!yftt2", "$!yftt3", "$!yftt4"],
  1615. itemStyle : {
  1616. normal : {
  1617. label : {
  1618. show : true, //开启显示
  1619. position : 'top', //在上方显示
  1620. textStyle : { //数值样式
  1621. color : '#ccf5f9',
  1622. fontSize : 12
  1623. },
  1624. formatter : '{c}'
  1625. },
  1626. }
  1627. },
  1628. }
  1629. ]
  1630. };
  1631. //温度湿度氨气折线图
  1632. option_chart_wdsdaq = {
  1633. color:['#ef1a0f','#0fc6ef','#07a504','#caae1f'],
  1634. grid:{
  1635. x:'10%',
  1636. y:'18%',
  1637. x2:'6%',
  1638. y2:'15%',
  1639. //containLabel:true
  1640. },
  1641. tooltip: {
  1642. trigger: 'axis'
  1643. },
  1644. legend: {
  1645. data:['温度','湿度','氨气'],
  1646. selectedMode: 'single',
  1647. textStyle:{
  1648. color:"#fff",
  1649. fontSize:10
  1650. },
  1651. top:0,
  1652. right:10,
  1653. selected:{
  1654. '温度':true,
  1655. '湿度':false,
  1656. '氨气':false,
  1657. }
  1658. },
  1659. xAxis: {
  1660. type: 'category',
  1661. data: [],
  1662. axisLine: {
  1663. show: true,
  1664. lineStyle: {
  1665. type: 'solid',
  1666. color: '#4865e3',//左边线的颜色
  1667. width:'1'//坐标线的宽度
  1668. }
  1669. },
  1670. axisLabel: {
  1671. textStyle: {
  1672. color: '#ccf5f9',
  1673. },
  1674. },
  1675. axisTick:{
  1676. alignWithLabel:true
  1677. }
  1678. },
  1679. yAxis: {
  1680. type : 'value',
  1681. min: function(value) {
  1682. return value.min - 1;
  1683. },
  1684. axisLine: {
  1685. show: true,
  1686. lineStyle: {
  1687. type: 'solid',
  1688. color: '#4865e3',//左边线的颜色
  1689. width:'1'//坐标线的宽度
  1690. }
  1691. },
  1692. splitLine:{
  1693. lineStyle: {
  1694. type: 'solid',
  1695. color: 'rgba(72,101,227,0.8)',
  1696. width:'1'
  1697. }
  1698. },
  1699. axisLabel: {
  1700. textStyle: {
  1701. color: '#ccf5f9',
  1702. },
  1703. }
  1704. },
  1705. series: [{
  1706. name:'温度',
  1707. type:'line',
  1708. smooth: true,
  1709. data:[{value:"$!snwdDto.value[0]",name:'℃'}, {value:"$!snwdDto.value[1]",name:'℃'},{value:"$!$!snwdDto.value[2]",name:'℃'} ,{value:"$!$!snwdDto.value[3]",name:'℃'} ,{value:"$!$!snwdDto.value[4]",name:'℃'} ,{value:"$!$!snwdDto.value[5]",name:'℃'} ,{value:"$!$!snwdDto.value[6]",name:'℃'} ],
  1710. lineStyle:{
  1711. normal:{
  1712. color:'#ef1a0f'
  1713. }
  1714. }
  1715. },
  1716. {
  1717. name:'湿度',
  1718. type:'line',
  1719. smooth: true,
  1720. data:[{value:"$!zsda0.dqsd",name:'RH'},{value:"$!zsda1.dqsd",name:'RH'} ,{value:"$!zsda2.dqsd",name:'RH'} ,{value:"$!zsda3.dqsd",name:'RH'} ,{value:"$!zsda4.dqsd",name:'RH'} ,{value:"$!zsda5.dqsd",name:'RH'} ,{value:"$!zsda6.dqsd",name:'RH'} ],
  1721. lineStyle:{
  1722. normal:{
  1723. color:'#0fc6ef'
  1724. }
  1725. }
  1726. },
  1727. {
  1728. name:'氨气',
  1729. type:'line',
  1730. smooth: true,
  1731. data:[{value:"$!zsda0.dqaq",name:'ppm'},{value:"$!zsda1.dqaq",name:'ppm'} ,{value:"$!zsda2.dqaq",name:'ppm'} ,{value:"$!zsda3.dqaq",name:'ppm'} ,{value:"$!zsda4.dqaq",name:'ppm'} ,{value:"$!zsda5.dqaq",name:'ppm'} ,{value:"$!zsda6.dqaq",name:'ppm'} ],
  1732. lineStyle:{
  1733. normal:{
  1734. color:'#07a504'
  1735. }
  1736. }
  1737. }]
  1738. };
  1739. //ph折线图
  1740. option_chart_ph = {
  1741. color : [ '#3cb2cc' ],
  1742. grid : {
  1743. x:'10%',
  1744. y:'18%',
  1745. x2:'6%',
  1746. y2:'15%',
  1747. },
  1748. tooltip : {
  1749. trigger : 'axis'
  1750. },
  1751. xAxis : {
  1752. type : 'category',
  1753. data : [],
  1754. axisLine : {
  1755. show : true,
  1756. lineStyle : {
  1757. type : 'solid',
  1758. color : '#4865e3', //左边线的颜色
  1759. width : '1' //坐标线的宽度
  1760. }
  1761. },
  1762. axisLabel : {
  1763. textStyle : {
  1764. color : '#ccf5f9',
  1765. },
  1766. }
  1767. },
  1768. yAxis : {
  1769. type : 'value',
  1770. min : function(value) {
  1771. return value.min - 1;
  1772. },
  1773. axisLine : {
  1774. show : true,
  1775. lineStyle : {
  1776. type : 'solid',
  1777. color : '#4865e3', //左边线的颜色
  1778. width : '1' //坐标线的宽度
  1779. }
  1780. },
  1781. splitLine : {
  1782. lineStyle : {
  1783. type : 'solid',
  1784. color : 'rgba(72,101,227,0.8)',
  1785. width : '1'
  1786. }
  1787. },
  1788. axisLabel : {
  1789. textStyle : {
  1790. color : '#ccf5f9',
  1791. },
  1792. }
  1793. },
  1794. series : [ {
  1795. data : [],
  1796. type : 'line',
  1797. smooth : true
  1798. } ]
  1799. };
  1800. //能耗柱状图
  1801. option_chart_nh = {
  1802. color : [ '#a12993', '#ba9739' ],
  1803. tooltip : {
  1804. trigger : 'axis',
  1805. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  1806. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  1807. },
  1808. },
  1809. grid : {
  1810. x:'10%',
  1811. y:'18%',
  1812. x2:'10%',
  1813. y2:'15%',
  1814. },
  1815. legend : {
  1816. data : [ '电量(度)', '水量(吨)' ],
  1817. icon : 'circle',
  1818. itemGap : 5,
  1819. itemWidth : 10,
  1820. top : '0',
  1821. x : 'center',
  1822. textStyle : {
  1823. color : '#ccf5f9',
  1824. },
  1825. },
  1826. xAxis : {
  1827. type : 'category',
  1828. data : [],
  1829. axisTick : {
  1830. alignWithLabel : true
  1831. },
  1832. axisLine : {
  1833. show : true,
  1834. lineStyle : {
  1835. type : 'solid',
  1836. color : '#4865e3', //左边线的颜色
  1837. width : '1' //坐标线的宽度
  1838. }
  1839. },
  1840. axisLabel : {
  1841. textStyle : {
  1842. color : '#ccf5f9',
  1843. },
  1844. }
  1845. },
  1846. yAxis : [ {
  1847. type : 'value',
  1848. scale : true,
  1849. axisLine : {
  1850. show : true,
  1851. lineStyle : {
  1852. type : 'solid',
  1853. color : '#4865e3', //左边线的颜色
  1854. width : '1' //坐标线的宽度
  1855. }
  1856. },
  1857. splitLine : {
  1858. lineStyle : {
  1859. type : 'solid',
  1860. color : 'rgba(72,101,227,0.7)',
  1861. width : '1'
  1862. }
  1863. },
  1864. axisLabel : {
  1865. textStyle : {
  1866. color : '#ccf5f9',
  1867. },
  1868. }
  1869. }, {
  1870. type : 'value',
  1871. scale : true,
  1872. axisLine : {
  1873. show : true,
  1874. lineStyle : {
  1875. type : 'solid',
  1876. color : '#4865e3', //左边线的颜色
  1877. width : '1' //坐标线的宽度
  1878. }
  1879. },
  1880. splitLine : {
  1881. show : false,
  1882. lineStyle : {
  1883. type : 'solid',
  1884. color : 'rgba(72,101,227,0.7)',
  1885. width : '1'
  1886. }
  1887. },
  1888. axisLabel : {
  1889. textStyle : {
  1890. color : '#ccf5f9',
  1891. },
  1892. }
  1893. }, ],
  1894. series : [
  1895. {
  1896. type : 'bar',
  1897. barWidth : '30%',
  1898. name : '电量(度)',
  1899. yAxisIndex : 0,
  1900. data : [],
  1901. },
  1902. {
  1903. type : 'bar',
  1904. barWidth : '30%',
  1905. name : '水量(吨)',
  1906. yAxisIndex : 1,
  1907. data : [],
  1908. }
  1909. ]
  1910. };
  1911. //设备故障饼状图
  1912. option_chart_sbgz = {
  1913. title : {
  1914. text : '设备故障',
  1915. x : 'center',
  1916. y : '3%',
  1917. textStyle : {
  1918. color : '#ccf5f9',
  1919. fontWeight : 'normal',
  1920. fontSize : '12'
  1921. }
  1922. },
  1923. color : [ '#319ce0', '#ea175c', '#fdb628' ],
  1924. tooltip : {
  1925. trigger : 'item',
  1926. formatter : "{a} <br/>{b} : {c} ({d}%)"
  1927. },
  1928. legend : {
  1929. icon : 'circle',
  1930. itemGap : 15,
  1931. itemWidth : 10,
  1932. orient : 'vertical',
  1933. right : '3%',
  1934. top : 'center',
  1935. textStyle : {
  1936. color : '#ccf5f9',
  1937. },
  1938. data : [ '正常', '报警', '离线' ]
  1939. },
  1940. series : [
  1941. {
  1942. name : '设备故障',
  1943. type : 'pie',
  1944. radius : '70%',
  1945. center : [ '50%', '60%' ],
  1946. data : [
  1947. {
  1948. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzzc' #end,
  1949. name : '正常'
  1950. },
  1951. {
  1952. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzbj' #end,
  1953. name : '报警'
  1954. },
  1955. {
  1956. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzlx' #end,
  1957. name : '离线'
  1958. },
  1959. ],
  1960. label : {
  1961. normal : {
  1962. show : true,
  1963. position : 'outside', //标签的位置
  1964. textStyle : {
  1965. fontWeight : 300,
  1966. fontSize : 12 //文字的字体大小
  1967. },
  1968. formatter : '{d}%'
  1969. }
  1970. },
  1971. labelLine : {
  1972. normal : {
  1973. show : false,
  1974. length : 0,
  1975. length2 : 4,
  1976. }
  1977. },
  1978. itemStyle : {
  1979. emphasis : {
  1980. shadowBlur : 10,
  1981. shadowOffsetX : 0,
  1982. shadowColor : 'rgba(0, 0, 0, 0.5)'
  1983. }
  1984. }
  1985. }
  1986. ]
  1987. };
  1988. //报警类型饼状图
  1989. option_chart_bjlx = {
  1990. title : {
  1991. text : '报警类型',
  1992. x : 'center',
  1993. y : '3%',
  1994. textStyle : {
  1995. color : '#ccf5f9',
  1996. fontWeight : 'normal',
  1997. fontSize : '12'
  1998. }
  1999. },
  2000. color : [ '#319ce0', '#ea175c', '#fdb628', '#07aab9' ],
  2001. tooltip : {
  2002. trigger : 'item',
  2003. formatter : "{a} <br/>{b} : {c} ({d}%)"
  2004. },
  2005. legend : {
  2006. icon : 'circle',
  2007. itemGap : 15,
  2008. itemWidth : 10,
  2009. orient : 'vertical',
  2010. right : '3%',
  2011. top : 'center',
  2012. textStyle : {
  2013. color : '#ccf5f9',
  2014. },
  2015. data : [ '断电报警', '风机故障', '舍栏环境', '设备故障' ]
  2016. },
  2017. series : [
  2018. {
  2019. name : '报警类型',
  2020. type : 'pie',
  2021. radius : '70%',
  2022. center : [ '50%', '60%' ],
  2023. data : [
  2024. {
  2025. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.bjlxdd' #end,
  2026. name : '断电报警'
  2027. },
  2028. {
  2029. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.bjlxfj' #end,
  2030. name : '风机故障'
  2031. },
  2032. {
  2033. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.bjlxsl' #end,
  2034. name : '舍栏环境'
  2035. },
  2036. {
  2037. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.bjlxsb' #end,
  2038. name : '设备故障'
  2039. },
  2040. ],
  2041. label : {
  2042. normal : {
  2043. show : true,
  2044. position : 'outside', //标签的位置
  2045. textStyle : {
  2046. fontWeight : 300,
  2047. fontSize : 12 //文字的字体大小
  2048. },
  2049. formatter : '{d}%'
  2050. }
  2051. },
  2052. labelLine : {
  2053. normal : {
  2054. show : false,
  2055. length : 0,
  2056. length2 : 4,
  2057. }
  2058. },
  2059. itemStyle : {
  2060. emphasis : {
  2061. shadowBlur : 10,
  2062. shadowOffsetX : 0,
  2063. shadowColor : 'rgba(0, 0, 0, 0.5)'
  2064. }
  2065. }
  2066. }
  2067. ]
  2068. };
  2069. //报警分析柱状图
  2070. option_chart_bjfx = {
  2071. title : {
  2072. text : '报警分析',
  2073. top : '5%',
  2074. left : 'center',
  2075. textStyle : {
  2076. fontWeight : 'normal',
  2077. fontSize : '14',
  2078. color : '#ccf5f9',
  2079. }
  2080. },
  2081. color : [ '#e43e70', '#3a25ae' ],
  2082. tooltip : {
  2083. trigger : 'axis',
  2084. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  2085. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  2086. },
  2087. },
  2088. grid : {
  2089. x : '3%',
  2090. y : '20%',
  2091. x2 : '3%',
  2092. y2 : '10%',
  2093. containLabel : true
  2094. },
  2095. legend : {
  2096. data : [ '报警总次数', '已处理报警' ],
  2097. icon : 'circle',
  2098. itemGap : 5,
  2099. itemWidth : 10,
  2100. bottom : '2%',
  2101. x : 'center',
  2102. textStyle : {
  2103. color : '#ccf5f9',
  2104. },
  2105. },
  2106. xAxis : {
  2107. type : 'category',
  2108. data : [ "$!day0", "$!day1", "$!day2", "$!day3", "$!day4", "$!day5", "$!day6"],
  2109. axisTick : {
  2110. alignWithLabel : true
  2111. },
  2112. axisLine : {
  2113. show : true,
  2114. lineStyle : {
  2115. type : 'solid',
  2116. color : '#4865e3', //左边线的颜色
  2117. width : '1' //坐标线的宽度
  2118. }
  2119. },
  2120. axisLabel : {
  2121. textStyle : {
  2122. color : '#ccf5f9',
  2123. fontSize : 10
  2124. },
  2125. rotate : 30,
  2126. }
  2127. },
  2128. yAxis : {
  2129. type : 'value',
  2130. axisLine : {
  2131. show : true,
  2132. lineStyle : {
  2133. type : 'solid',
  2134. color : '#4865e3', //左边线的颜色
  2135. width : '1' //坐标线的宽度
  2136. }
  2137. },
  2138. splitLine : {
  2139. lineStyle : {
  2140. type : 'solid',
  2141. color : 'rgba(72,101,227,0.7)',
  2142. width : '1'
  2143. }
  2144. },
  2145. axisLabel : {
  2146. textStyle : {
  2147. color : '#ccf5f9',
  2148. },
  2149. }
  2150. },
  2151. series : [
  2152. {
  2153. type : 'bar',
  2154. barWidth : '30%',
  2155. name : '报警总次数',
  2156. data : [ #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekbj1' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekbj2' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekbj3' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekbj4' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekbj5' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekbj6' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekbj7' #end ],
  2157. },
  2158. {
  2159. type : 'bar',
  2160. barWidth : '30%',
  2161. name : '已处理报警',
  2162. data : [ #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekcl1' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekcl2' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekcl3' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekcl4' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekcl5' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekcl6' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.weekcl7' #end ],
  2163. }
  2164. ]
  2165. };
  2166. //设备故障排行榜 柱状图
  2167. option_chart_sbgzphb = {
  2168. title : {
  2169. text : '设备故障排行榜',
  2170. top : '5%',
  2171. left : 'center',
  2172. textStyle : {
  2173. fontWeight : 'normal',
  2174. fontSize : '14',
  2175. color : '#ccf5f9',
  2176. }
  2177. },
  2178. tooltip : {
  2179. trigger : 'axis',
  2180. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  2181. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  2182. },
  2183. },
  2184. grid : {
  2185. x : '3%',
  2186. y : '20%',
  2187. x2 : '10%',
  2188. y2 : '10%',
  2189. containLabel : true
  2190. },
  2191. yAxis : {
  2192. type : 'category',
  2193. data : [ '排水阀', '上排阀', '下排阀', '增加泵', '加药泵', '高压泵', '冲洗泵' ],
  2194. axisLine : {
  2195. show : true,
  2196. lineStyle : {
  2197. type : 'solid',
  2198. color : '#4865e3', //左边线的颜色
  2199. width : '1' //坐标线的宽度
  2200. }
  2201. },
  2202. axisLabel : {
  2203. textStyle : {
  2204. color : '#ccf5f9',
  2205. fontSize : 12
  2206. },
  2207. },
  2208. splitLine : {
  2209. lineStyle : {
  2210. type : 'solid',
  2211. color : 'rgba(72,101,227,0.7)',
  2212. width : '1'
  2213. }
  2214. },
  2215. },
  2216. xAxis : {
  2217. type : 'value',
  2218. axisLine : {
  2219. show : true,
  2220. lineStyle : {
  2221. type : 'solid',
  2222. color : '#4865e3', //左边线的颜色
  2223. width : '1' //坐标线的宽度
  2224. }
  2225. },
  2226. axisLabel : {
  2227. textStyle : {
  2228. color : '#ccf5f9',
  2229. },
  2230. },
  2231. splitLine : {
  2232. show : false
  2233. }
  2234. },
  2235. series : [
  2236. {
  2237. type : 'bar',
  2238. barWidth : '50%',
  2239. name : '设备故障排行榜',
  2240. data : [ #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzph1' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzph2' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzph3' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzph4' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzph5' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzph6' #end, #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbgzph7' #end ],
  2241. itemStyle : {
  2242. normal : {
  2243. color : new echarts.graphic.LinearGradient(1, 0, 0, 0, [ {
  2244. offset : 0,
  2245. color : '#e18f91'
  2246. },
  2247. {
  2248. offset : 1,
  2249. color : '#3824aa'
  2250. } ]),
  2251. label : {
  2252. show : true, //开启显示
  2253. position : 'right', //在上方显示
  2254. textStyle : { //数值样式
  2255. color : '#ccf5f9',
  2256. fontSize : 12
  2257. },
  2258. formatter : '{c}'
  2259. }
  2260. }
  2261. }
  2262. }
  2263. ]
  2264. };
  2265. //运行状态饼状图
  2266. option_chart_yxzt = {
  2267. color : [ '#19c4cc', '#df253a', '#dbc500', '#6a2eb2' ],
  2268. tooltip : {
  2269. trigger : 'item',
  2270. formatter : "{b} : {c} ({d}%)"
  2271. },
  2272. series : [
  2273. {
  2274. name : '运行状态',
  2275. type : 'pie',
  2276. radius : '70%',
  2277. center : [ '50%', '50%' ],
  2278. data : [
  2279. {
  2280. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbyxztzc' #end,
  2281. name : '正常'
  2282. },
  2283. {
  2284. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbyxztbj' #end,
  2285. name : '报警'
  2286. },
  2287. {
  2288. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbyxztlx' #end,
  2289. name : '离线'
  2290. },
  2291. {
  2292. value : #if("$!dpSjlrsbbj" == "") 0 #else '$!dpSjlrsbbj.sbyxztgz' #end,
  2293. name : '故障'
  2294. },
  2295. ],
  2296. label : {
  2297. normal : {
  2298. show : true,
  2299. position : 'outside', //标签的位置
  2300. textStyle : {
  2301. fontWeight : 300,
  2302. fontSize : 12 //文字的字体大小
  2303. },
  2304. formatter : '{b}\n{d}%'
  2305. }
  2306. },
  2307. labelLine : {
  2308. normal : {
  2309. show : false,
  2310. length : 0,
  2311. length2 : 10,
  2312. }
  2313. },
  2314. itemStyle : {
  2315. emphasis : {
  2316. shadowBlur : 10,
  2317. shadowOffsetX : 0,
  2318. shadowColor : 'rgba(0, 0, 0, 0.5)'
  2319. }
  2320. }
  2321. }
  2322. ]
  2323. };
  2324. //排出水实时检测
  2325. option_chart_psssjc = {
  2326. title : {
  2327. text : '排水实时监测',
  2328. top : '5%',
  2329. right : '3%',
  2330. textStyle : {
  2331. fontWeight : 'normal',
  2332. fontSize : '14',
  2333. color : '#ccf5f9',
  2334. }
  2335. },
  2336. tooltip : {
  2337. trigger : 'axis',
  2338. axisPointer : { // 坐标轴指示器,坐标轴触发有效
  2339. type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
  2340. },
  2341. },
  2342. grid : {
  2343. x : '3%',
  2344. y : '30%',
  2345. x2 : '10%',
  2346. y2 : '3%',
  2347. containLabel : true
  2348. },
  2349. xAxis : {
  2350. type : 'category',
  2351. data : [ 'NH3', 'COD', 'BOD', 'SS', '总磷', 'PH' ],
  2352. axisTick : {
  2353. alignWithLabel : true
  2354. },
  2355. axisLine : {
  2356. show : true,
  2357. lineStyle : {
  2358. type : 'solid',
  2359. color : '#4865e3', //左边线的颜色
  2360. width : '1' //坐标线的宽度
  2361. }
  2362. },
  2363. axisLabel : {
  2364. textStyle : {
  2365. color : '#ccf5f9',
  2366. },
  2367. }
  2368. },
  2369. yAxis : [ {
  2370. type : 'value',
  2371. name : 'mg/L',
  2372. scale : true,
  2373. axisLine : {
  2374. show : true,
  2375. lineStyle : {
  2376. type : 'solid',
  2377. color : '#4865e3', //左边线的颜色
  2378. width : '1' //坐标线的宽度
  2379. }
  2380. },
  2381. splitLine : {
  2382. lineStyle : {
  2383. type : 'solid',
  2384. color : 'rgba(72,101,227,0.8)',
  2385. width : '1'
  2386. }
  2387. },
  2388. axisLabel : {
  2389. textStyle : {
  2390. color : '#ccf5f9',
  2391. },
  2392. }
  2393. } ],
  2394. series : [
  2395. {
  2396. name : '排水实时监测',
  2397. type : 'bar',
  2398. barWidth : '40%',
  2399. data : ['$!sbbj.nh3', '$!sbbj.cod', '$!sbbj.bod', '$!sbbj.ss', '$!sbbj.zl', '$!sbbj.ph'],
  2400. itemStyle : {
  2401. normal : {
  2402. color : new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
  2403. offset : 0,
  2404. color : '#851c9d'
  2405. },
  2406. {
  2407. offset : 1,
  2408. color : '#4805ad'
  2409. } ]),
  2410. label : {
  2411. show : true, //开启显示
  2412. position : 'top', //在上方显示
  2413. textStyle : { //数值样式
  2414. color : '#ccf5f9',
  2415. fontSize : 12
  2416. },
  2417. formatter : '{c}'
  2418. }
  2419. }
  2420. },
  2421. }
  2422. ]
  2423. };
  2424. //codbod曲线
  2425. option_chart_codbodqx = {
  2426. title : {
  2427. text : 'COD/BOD曲线',
  2428. top : '2%',
  2429. left : '3%',
  2430. textStyle : {
  2431. fontWeight : 'normal',
  2432. fontSize : '14',
  2433. color : '#ccf5f9',
  2434. }
  2435. },
  2436. color : [ '#d3aa54', '#d15533' ],
  2437. grid : {
  2438. x : '3%',
  2439. y : '30%',
  2440. x2 : '3%',
  2441. y2 : '10%',
  2442. containLabel : true
  2443. },
  2444. tooltip : {
  2445. trigger : 'axis'
  2446. },
  2447. xAxis : {
  2448. type : 'category',
  2449. data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
  2450. axisLine : {
  2451. show : true,
  2452. lineStyle : {
  2453. type : 'solid',
  2454. color : '#4865e3', //左边线的颜色
  2455. width : '1' //坐标线的宽度
  2456. }
  2457. },
  2458. axisLabel : {
  2459. textStyle : {
  2460. color : '#ccf5f9',
  2461. },
  2462. }
  2463. },
  2464. yAxis : {
  2465. type : 'value',
  2466. name : 'mg/L',
  2467. axisLine : {
  2468. show : true,
  2469. lineStyle : {
  2470. type : 'solid',
  2471. color : '#4865e3', //左边线的颜色
  2472. width : '1' //坐标线的宽度
  2473. }
  2474. },
  2475. splitLine : {
  2476. lineStyle : {
  2477. type : 'solid',
  2478. color : 'rgba(72,101,227,0.8)',
  2479. width : '1'
  2480. }
  2481. },
  2482. axisLabel : {
  2483. textStyle : {
  2484. color : '#ccf5f9',
  2485. },
  2486. }
  2487. },
  2488. series : [ {
  2489. data : [ 221.2, 156.3, 119.1, 217.6, 252.1, 221.7, 127.9 ],
  2490. type : 'line',
  2491. name : 'COD'
  2492. }, {
  2493. data : [ 120.3, 72.7, 69.9, 89.8, 78.3, 64.9, 54.9 ],
  2494. type : 'line',
  2495. name : 'BOD'
  2496. } ]
  2497. };
  2498. //NH3/SS曲线
  2499. option_chart_nh3ssqx = {
  2500. title : {
  2501. text : 'NH3/SS曲线',
  2502. top : '2%',
  2503. left : '3%',
  2504. textStyle : {
  2505. fontWeight : 'normal',
  2506. fontSize : '14',
  2507. color : '#ccf5f9',
  2508. }
  2509. },
  2510. color : [ '#d3aa54', '#d15533' ],
  2511. grid : {
  2512. x : '3%',
  2513. y : '30%',
  2514. x2 : '3%',
  2515. y2 : '10%',
  2516. containLabel : true
  2517. },
  2518. tooltip : {
  2519. trigger : 'axis'
  2520. },
  2521. xAxis : {
  2522. type : 'category',
  2523. data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
  2524. axisLine : {
  2525. show : true,
  2526. lineStyle : {
  2527. type : 'solid',
  2528. color : '#4865e3', //左边线的颜色
  2529. width : '1' //坐标线的宽度
  2530. }
  2531. },
  2532. axisLabel : {
  2533. textStyle : {
  2534. color : '#ccf5f9',
  2535. },
  2536. }
  2537. },
  2538. yAxis : {
  2539. type : 'value',
  2540. name : 'mg/L',
  2541. axisLine : {
  2542. show : true,
  2543. lineStyle : {
  2544. type : 'solid',
  2545. color : '#4865e3', //左边线的颜色
  2546. width : '1' //坐标线的宽度
  2547. }
  2548. },
  2549. splitLine : {
  2550. lineStyle : {
  2551. type : 'solid',
  2552. color : 'rgba(72,101,227,0.8)',
  2553. width : '1'
  2554. }
  2555. },
  2556. axisLabel : {
  2557. textStyle : {
  2558. color : '#ccf5f9',
  2559. },
  2560. }
  2561. },
  2562. series : [ {
  2563. data : [ 73.1, 66.8, 54.8, 69.3, 57.8, 44.9, 79.1 ],
  2564. type : 'line',
  2565. name : 'NH3'
  2566. }, {
  2567. data : [ 120.1, 112.7, 119.7, 88.9, 134.2, 122.8, 155.3 ],
  2568. type : 'line',
  2569. name : 'SS'
  2570. } ]
  2571. };
  2572. //总磷/PH曲线
  2573. option_chart_zlphqx = {
  2574. title : {
  2575. text : '总磷/PH曲线',
  2576. top : '2%',
  2577. left : '3%',
  2578. textStyle : {
  2579. fontWeight : 'normal',
  2580. fontSize : '14',
  2581. color : '#ccf5f9',
  2582. }
  2583. },
  2584. color : [ '#d3aa54', '#d15533' ],
  2585. grid : {
  2586. x : '3%',
  2587. y : '30%',
  2588. x2 : '3%',
  2589. y2 : '10%',
  2590. containLabel : true
  2591. },
  2592. tooltip : {
  2593. trigger : 'axis'
  2594. },
  2595. xAxis : {
  2596. type : 'category',
  2597. data : [ '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45' ],
  2598. axisLine : {
  2599. show : true,
  2600. lineStyle : {
  2601. type : 'solid',
  2602. color : '#4865e3', //左边线的颜色
  2603. width : '1' //坐标线的宽度
  2604. }
  2605. },
  2606. axisLabel : {
  2607. textStyle : {
  2608. color : '#ccf5f9',
  2609. },
  2610. }
  2611. },
  2612. yAxis : {
  2613. type : 'value',
  2614. min : function(value) {
  2615. return value.min - 1;
  2616. },
  2617. axisLine : {
  2618. show : true,
  2619. lineStyle : {
  2620. type : 'solid',
  2621. color : '#4865e3', //左边线的颜色
  2622. width : '1' //坐标线的宽度
  2623. }
  2624. },
  2625. splitLine : {
  2626. lineStyle : {
  2627. type : 'solid',
  2628. color : 'rgba(72,101,227,0.8)',
  2629. width : '1'
  2630. }
  2631. },
  2632. axisLabel : {
  2633. textStyle : {
  2634. color : '#ccf5f9',
  2635. },
  2636. }
  2637. },
  2638. series : [ {
  2639. data : [ 6.5, 6.3, 7.8, 7.2, 8.3, 6.3, 8.0 ],
  2640. type : 'line',
  2641. name : '总磷'
  2642. }, {
  2643. data : [ 5.6, 6.7, 6.1, 6.4, 7.4, 8.3, 8.9 ],
  2644. type : 'line',
  2645. name : 'PH'
  2646. } ]
  2647. };
  2648. if (option_chart_mcsjdb1 && typeof option_chart_mcsjdb1 === "object") {
  2649. myChart_chart_mcsjdb1.setOption(option_chart_mcsjdb1, true);
  2650. }
  2651. if (option_chart_mcsjdb2 && typeof option_chart_mcsjdb2 === "object") {
  2652. myChart_chart_mcsjdb2.setOption(option_chart_mcsjdb2, true);
  2653. }
  2654. if (option_chart_mcsjdb3 && typeof option_chart_mcsjdb3 === "object") {
  2655. myChart_chart_mcsjdb3.setOption(option_chart_mcsjdb3, true);
  2656. }
  2657. if (option_chart_mcsjdb4 && typeof option_chart_mcsjdb4 === "object") {
  2658. myChart_chart_mcsjdb4.setOption(option_chart_mcsjdb4, true);
  2659. }
  2660. if (option_chart_container1 && typeof option_chart_container1 === "object") {
  2661. myChart_chart_container1.setOption(option_chart_container1, true);
  2662. }
  2663. if (option_chart_container2 && typeof option_chart_container2 === "object") {
  2664. myChart_chart_container2.setOption(option_chart_container2, true);
  2665. }
  2666. if (option_chart_container3 && typeof option_chart_container3 === "object") {
  2667. myChart_chart_container3.setOption(option_chart_container3, true);
  2668. }
  2669. if (option_chart_container4 && typeof option_chart_container4 === "object") {
  2670. myChart_chart_container4.setOption(option_chart_container4, true);
  2671. }
  2672. if (option_chart_wdsdaq && typeof option_chart_wdsdaq === "object") {
  2673. myChart_chart_wdsdaq.setOption(option_chart_wdsdaq, true);
  2674. }
  2675. if (option_chart_ph && typeof option_chart_ph === "object") {
  2676. myChart_chart_ph.setOption(option_chart_ph, true);
  2677. }
  2678. if (option_chart_nh && typeof option_chart_nh === "object") {
  2679. myChart_chart_nh.setOption(option_chart_nh, true);
  2680. }
  2681. if (option_chart_sbgz && typeof option_chart_sbgz === "object") {
  2682. myChart_chart_sbgz.setOption(option_chart_sbgz, true);
  2683. }
  2684. if (option_chart_bjlx && typeof option_chart_bjlx === "object") {
  2685. myChart_chart_bjlx.setOption(option_chart_bjlx, true);
  2686. }
  2687. if (option_chart_bjfx && typeof option_chart_bjfx === "object") {
  2688. myChart_chart_bjfx.setOption(option_chart_bjfx, true);
  2689. }
  2690. if (option_chart_sbgzphb && typeof option_chart_sbgzphb === "object") {
  2691. myChart_chart_sbgzphb.setOption(option_chart_sbgzphb, true);
  2692. }
  2693. if (option_chart_yxzt && typeof option_chart_yxzt === "object") {
  2694. myChart_chart_yxzt.setOption(option_chart_yxzt, true);
  2695. }
  2696. if (option_chart_psssjc && typeof option_chart_psssjc === "object") {
  2697. myChart_chart_psssjc.setOption(option_chart_psssjc, true);
  2698. }
  2699. if (option_chart_codbodqx && typeof option_chart_codbodqx === "object") {
  2700. myChart_chart_codbodqx.setOption(option_chart_codbodqx, true);
  2701. }
  2702. if (option_chart_nh3ssqx && typeof option_chart_nh3ssqx === "object") {
  2703. myChart_chart_nh3ssqx.setOption(option_chart_nh3ssqx, true);
  2704. }
  2705. if (option_chart_zlphqx && typeof option_chart_zlphqx === "object") {
  2706. myChart_chart_zlphqx.setOption(option_chart_zlphqx, true);
  2707. }
  2708. var playerElement1 = document.getElementById("player1");
  2709. var player1 = new Clappr.Player({
  2710. source: '$!spjk1',
  2711. //poster: 'http://clappr.io/poster.png',
  2712. mute: true
  2713. });
  2714. player1.attachTo(playerElement1);
  2715. player1.play();
  2716. var playerElement2 = document.getElementById("player2");
  2717. var player2 = new Clappr.Player({
  2718. source: '$!spjk2',
  2719. //poster: 'http://clappr.io/poster.png',
  2720. mute: true
  2721. });
  2722. player2.attachTo(playerElement2);
  2723. player2.play();
  2724. var playerElement3 = document.getElementById("player3");
  2725. var player3 = new Clappr.Player({
  2726. source: '$!spjk3',
  2727. //poster: 'http://clappr.io/poster.png',
  2728. mute: true
  2729. });
  2730. player3.attachTo(playerElement3);
  2731. player3.play();
  2732. var playerElement4 = document.getElementById("player4");
  2733. var player4 = new Clappr.Player({
  2734. source: '$!spjk4',
  2735. //poster: 'http://clappr.io/poster.png',
  2736. mute: true
  2737. });
  2738. player4.attachTo(playerElement4);
  2739. player4.play();
  2740. $('.lend-items').click(function(){
  2741. var selected = $(this).find('.lend-value').text();
  2742. var option_chart_mcsjdb1 = myChart_chart_mcsjdb1.getOption();
  2743. var option_chart_mcsjdb2 = myChart_chart_mcsjdb2.getOption();
  2744. var option_chart_mcsjdb3 = myChart_chart_mcsjdb3.getOption();
  2745. var option_chart_mcsjdb4 = myChart_chart_mcsjdb4.getOption();
  2746. if($(this).find('.doc-tip').hasClass('unable')){
  2747. $(this).find('.doc-tip').removeClass('unable');
  2748. for(var i in option_chart_mcsjdb1.legend[0].selected){
  2749. if(selected==i){
  2750. option_chart_mcsjdb1.legend[0].selected[i] = true;
  2751. option_chart_mcsjdb2.legend[0].selected[i] = true;
  2752. option_chart_mcsjdb3.legend[0].selected[i] = true;
  2753. option_chart_mcsjdb4.legend[0].selected[i] = true;
  2754. }
  2755. }
  2756. }else{
  2757. $(this).find('.doc-tip').addClass('unable');
  2758. for(var i in option_chart_mcsjdb1.legend[0].selected){
  2759. if(selected==i){
  2760. option_chart_mcsjdb1.legend[0].selected[i] = false;
  2761. option_chart_mcsjdb2.legend[0].selected[i] = false;
  2762. option_chart_mcsjdb3.legend[0].selected[i] = false;
  2763. option_chart_mcsjdb4.legend[0].selected[i] = false;
  2764. }
  2765. }
  2766. }
  2767. //console.log(option_chart_mcsjdb1)
  2768. myChart_chart_mcsjdb1.setOption(option_chart_mcsjdb1,true);
  2769. myChart_chart_mcsjdb2.setOption(option_chart_mcsjdb2,true)
  2770. myChart_chart_mcsjdb3.setOption(option_chart_mcsjdb3,true)
  2771. myChart_chart_mcsjdb4.setOption(option_chart_mcsjdb4,true)
  2772. //console.log(selected)
  2773. })
  2774. getSsqxSj('480', "snwd");
  2775. getSsqxSj('14', "sldl");
  2776. getSsqxSj('482', "snph");
  2777. getSsqxSj('480', "snsd");
  2778. getSsqxSj('480', "snaq");
  2779. },1000);
  2780. //})
  2781. </script>
  2782. </body>
  2783. </html>