equipmanage_qxz气象站.html 70 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  7. <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  8. <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  9. <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
  10. <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
  11. <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  12. <link rel="stylesheet" href="{% static '/lib/css/jquery-ui.css' %}" />
  13. <style type="text/css">
  14. body {
  15. background: #fff;
  16. }
  17. .row {
  18. margin: 0;
  19. }
  20. /* 菜单 */
  21. .menu_body .nulldata {
  22. line-height: 80px;
  23. text-align: center;
  24. height: 80px;
  25. background: #eee;
  26. }
  27. .menu_list {
  28. margin-top: 10px;
  29. }
  30. .menu_head {
  31. height: 30px;
  32. line-height: 30px;
  33. padding-left: 10px;
  34. font-size: 12px;
  35. color: #313131;
  36. cursor: pointer;
  37. border: 1px solid #e1e1e1;
  38. border-top: 0px solid #e1e1e1;
  39. position: relative;
  40. background: #f1f1f1 url(../static/img/jia.png) center right 5px no-repeat;
  41. margin: 0;
  42. word-break: keep-all;
  43. white-space: nowrap;
  44. overflow: hidden;
  45. text-overflow: ellipsis;
  46. }
  47. .menu_body {
  48. height: auto;
  49. overflow: hidden;
  50. line-height: 38px;
  51. border-left: 1px solid #e1e1e1;
  52. border-right: 1px solid #e1e1e1;
  53. }
  54. .menu_body a {
  55. display: block;
  56. height: 32px;
  57. line-height: 32px;
  58. padding-left: 10px;
  59. color: #525252;
  60. background: #fff;
  61. text-decoration: none;
  62. border-bottom: 1px solid #e1e1e1;
  63. overflow: hidden;
  64. text-overflow: ellipsis;
  65. white-space: nowrap;
  66. }
  67. .menu_body a span {
  68. display: inline-block;
  69. width: 8px;
  70. height: 8px;
  71. border-radius: 50%;
  72. margin-right: 6px;
  73. }
  74. .bjred {
  75. background: red;
  76. }
  77. .bjgreen {
  78. background: green;
  79. }
  80. .menu_list .current {
  81. background: #f1f1f1 url(../static/img/jian.png) center right 5px no-repeat;
  82. font-weight: bold;
  83. color: #313131;
  84. }
  85. .menu_body .menu-active {
  86. color: #00bcd4;
  87. border-left: solid 3px #00bcd4;
  88. }
  89. .currAstive {
  90. background-color: #00bcd4;
  91. color: #fff;
  92. }
  93. /* 主题标题 */
  94. .widget-box {
  95. background: none repeat scroll 0 0 #F9F9F9;
  96. clear: both;
  97. margin-top: 16px;
  98. margin-bottom: 16px;
  99. position: relative;
  100. border: none;
  101. }
  102. .widget-title {
  103. height: 36px;
  104. line-height: 36px;
  105. border-bottom: solid 1px #e5e5e5;
  106. padding-bottom: 1px;
  107. /* text-align: center; */
  108. }
  109. .widget-title .equipInfo {
  110. float: left;
  111. }
  112. .widget-title h5 {
  113. color: #666;
  114. float: left;
  115. font-size: 12px;
  116. font-weight: bold;
  117. padding: 12px;
  118. line-height: 12px;
  119. margin: 0;
  120. margin-bottom: 3px;
  121. border-bottom: solid 2px #38b0ec;
  122. }
  123. /*状态 */
  124. .dev:HOVER {
  125. background: #2E363F;
  126. }
  127. .dev {
  128. display: flex;
  129. justify-content: space-around;
  130. /* width: 215px;
  131. height: 88px;
  132. float: left; */
  133. /* margin: 0px; */
  134. color: #f2f2f2;
  135. margin-bottom: 15px;
  136. cursor: pointer;
  137. position: relative;
  138. }
  139. .bg_lb {
  140. background:
  141. /* #27a9e3 */
  142. #4ab8e8;
  143. }
  144. .dev .left {
  145. width: 80px;
  146. padding-top: 10px;
  147. /* float: left; */
  148. }
  149. .dev .left .img-dev {
  150. width: 45px;
  151. margin-left: 12px;
  152. /* margin-top: 8px; */
  153. }
  154. .dev .right {
  155. width: 120px;
  156. padding-top: 3px;
  157. /* float: left; */
  158. font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
  159. }
  160. .dev .right .name {
  161. font-size: 20px;
  162. line-height: 20px;
  163. text-align: left;
  164. padding-top: 10px;
  165. overflow: hidden;
  166. white-space: nowrap;
  167. text-overflow: ellipsis;
  168. }
  169. .dev .right .data {
  170. font-size: 14px;
  171. text-align: left;
  172. padding-top: 15px;
  173. }
  174. /* 项目 */
  175. .todo li {
  176. border-bottom: 1px solid #EBEBEB;
  177. margin-bottom: 0;
  178. padding: 10px 0;
  179. }
  180. .equipPage {
  181. line-height: 34px;
  182. text-align: center;
  183. }
  184. table tr td.nullData {
  185. text-align: center;
  186. line-height: 250px;
  187. }
  188. /* 状态块颜色 */
  189. .bg_lb {
  190. background:
  191. /* #27a9e3 */
  192. #4ab8e8;
  193. }
  194. .bg_ly {
  195. background:
  196. /* #ffb848 */
  197. #f5b761;
  198. }
  199. .bg_lg {
  200. background:
  201. /* #28b779 */
  202. #3eb984;
  203. }
  204. .bg_ls {
  205. background:
  206. /* #2255a4 */
  207. #4978c1;
  208. }
  209. .bg_lo {
  210. background:
  211. /* #da542e */
  212. #dc6442;
  213. }
  214. .bg_lr {
  215. background:
  216. /* #f74d4d */
  217. #f77979;
  218. }
  219. .aisle {
  220. position: absolute;
  221. left: 6px;
  222. bottom: 1px;
  223. font-size: 12px;
  224. }
  225. #uploadPhoto {
  226. display: none;
  227. }
  228. #viewPhoto {
  229. cursor: pointer;
  230. }
  231. /* 设备控制 */
  232. #ctrlBox>div {
  233. margin-bottom: 20px;
  234. }
  235. .handCtrlBox {
  236. margin-bottom: 20px;
  237. }
  238. input[type="checkbox"].ace.ace-switch.ace-switch-4+.lbl::before,
  239. input[type="checkbox"].ace.ace-switch.ace-switch-5+.lbl::before {
  240. text-indent: -39px;
  241. }
  242. .equipCtrl {
  243. border: 1px solid #cecece;
  244. padding: 15px 10px;
  245. background: #f5f5f5;
  246. box-shadow: 1px 1px 4px 1px #cecece;
  247. border-radius: 3px;
  248. cursor: pointer;
  249. }
  250. .equipCtrl:hover {
  251. border-color: #468fcd;
  252. box-shadow: 1px 2px 4px 0px #468fcd;
  253. }
  254. .equipCtrlInp {
  255. margin-top: 20px;
  256. text-align: right;
  257. }
  258. .isonlineicon {
  259. display: inline-block;
  260. width: 8px;
  261. height: 8px;
  262. border-radius: 50%;
  263. margin-right: 7px;
  264. }
  265. .isonlineicon.active {
  266. background: green;
  267. animation: 1s ease 0s infinite normal none running myfirst01;
  268. }
  269. .isonlineicon {
  270. background: #909090;
  271. animation: 1s ease 0s infinite normal none running myfirst02;
  272. }
  273. @keyframes myfirst01 {
  274. 0% {
  275. -moz-box-shadow: 0px 0px 6px 1px green;
  276. box-shadow: 0px 0px 6px 1px green;
  277. }
  278. 100% {
  279. -moz-box-shadow: 0px 0px 6px 1px green;
  280. box-shadow: 0px 0px 6px 1px green;
  281. }
  282. }
  283. @keyframes myfirst02 {
  284. 0% {
  285. -moz-box-shadow: 0px 0px 6px 1px #909090;
  286. box-shadow: 0px 0px 6px 1px #909090;
  287. }
  288. 100% {
  289. -moz-box-shadow: 0px 0px 6px 1px #909090;
  290. box-shadow: 0px 0px 6px 1px #909090;
  291. }
  292. }
  293. .ctrlLoading {
  294. position: absolute;
  295. bottom: 6px;
  296. }
  297. .equipCtrl .fa-cog {
  298. position: absolute;
  299. right: 26px;
  300. font-size: 20px;
  301. color: #3eb983;
  302. top: 11px;
  303. }
  304. .qxzDownCtrl {
  305. display: none;
  306. float: right;
  307. width: 53px;
  308. background: white;
  309. border: 1px solid #8aafce;
  310. color: #6688a6 !important;
  311. }
  312. .numName {
  313. display: inline-block;
  314. width: 70%;
  315. overflow: hidden;
  316. text-overflow: ellipsis;
  317. white-space: nowrap;
  318. vertical-align: middle;
  319. }
  320. /* 阈值控制 */
  321. #getthresholdDiv>div,
  322. #gettimingDiv>div {
  323. padding-bottom: 20px;
  324. }
  325. .thresholdCtrl {
  326. background: #4ab8e8;
  327. border-radius: 5px;
  328. color: #fff;
  329. box-shadow: 1px 1px 4px 1px #98dbf8;
  330. border: 1px solid #98dbf8;
  331. padding: 5px 10px;
  332. cursor: pointer;
  333. position: relative;
  334. }
  335. #gettimingDiv .thresholdCtrl {
  336. background: #65b83b;
  337. box-shadow: 1px 1px 4px 1px #d1ffba;
  338. border: 1px solid #65b83b;
  339. }
  340. .setthresholdBtn {
  341. position: absolute;
  342. right: 13px;
  343. top: 12px;
  344. font-size: 20px;
  345. }
  346. .setthresholdBtn:hover {
  347. color: #08ff46;
  348. }
  349. .thresholdCtrl::before {
  350. position: absolute;
  351. content: '';
  352. bottom: 0;
  353. left: 0;
  354. right: 0;
  355. height: 30%;
  356. background: rgba(255, 255, 255, 0.5);
  357. }
  358. .thresholdCtrlName {
  359. line-height: 30px;
  360. font-size: 16px;
  361. }
  362. .thresholdCtrlShowDiv {
  363. overflow: hidden;
  364. }
  365. .thresholdCtrlShowDiv>div {
  366. float: left;
  367. }
  368. .qxys img {
  369. width: 47px;
  370. }
  371. .maxminNum {
  372. font-size: 18px;
  373. line-height: 30px;
  374. margin-top: 11px;
  375. padding-left: 7%;
  376. }
  377. /* 色值阈值框 */
  378. .layui-form-item .layui-input-inline {
  379. width: 44%;
  380. }
  381. #Modal>div,
  382. #timingOnOffModal>div {
  383. margin-top: 20px;
  384. }
  385. .layui-form-mid.layui-word-aux span {
  386. color: red;
  387. }
  388. /* 定时设置 */
  389. #timingOnOffModal .layui-form-label {
  390. width: 100px;
  391. }
  392. /* .layui-body{overflow-y: scroll;} */
  393. .layui-layer-editName.layui-layer-page .layui-layer-content {
  394. overflow: hidden !important;
  395. overflow-y: scroll !important;
  396. }
  397. /* LED大屏样式 */
  398. .layui-layer-demo.layui-layer {
  399. background: transparent;
  400. box-shadow: none;
  401. color: #ff0000;
  402. }
  403. .layui-layer-demo .layui-layer-content {
  404. overflow-y: hidden !important;
  405. }
  406. .layui-layer-demo .qxzLedBj {
  407. padding-top: 115px;
  408. /* width: 684px;
  409. height: 781px; */
  410. width: 525px;
  411. height: 619px;
  412. background: url(../static/img/ledBj.png) no-repeat;
  413. background-size: 100% 100%;
  414. }
  415. .layui-layer-demo .qxzLedInfo {
  416. width: 95%;
  417. }
  418. .layui-layer-demo .qxzLedTitle {
  419. position: relative;
  420. height: 47px;
  421. /* white-space: nowrap; */
  422. overflow: hidden;
  423. width: 92%;
  424. margin: 16px auto;
  425. font-size: 36px;
  426. letter-spacing: 7px;
  427. text-shadow: 0rem 0rem 0.2rem rgba(240, 27, 27, 0.5), 0rem 0rem 0.15rem rgba(240, 27, 27, 0.5), 0rem 0rem 0.2rem rgba(240, 27, 27, 0.5), 0rem 0rem 0.2rem rgba(240, 27, 27, 0.5);
  428. box-sizing: border-box;
  429. word-break: break-all;
  430. }
  431. .layui-layer-demo .qxzLedTitle p {
  432. white-space: nowrap;
  433. /*position: absolute;
  434. left: -865px;
  435. top: 0; */
  436. /* display: inline-block; */
  437. text-align: center;
  438. }
  439. .layui-layer-demo .qxzLedTitle .qxzLedTitleLong {
  440. /* text-align: right; */
  441. padding-left: 100%;
  442. /* 从右至左开始滚动 */
  443. display: inline-block;
  444. animation: marqueeTransform 16s linear infinite;
  445. }
  446. @keyframes marqueeTransform {
  447. 0% {
  448. transform: translate(0, 0);
  449. }
  450. 100% {
  451. transform: translate(-100%, 0);
  452. }
  453. }
  454. .layui-layer-demo .eleContent {
  455. width: 82%;
  456. margin: 0 auto 0;
  457. height: 157px;
  458. overflow: hidden;
  459. }
  460. .layui-layer-demo .scrollUl {
  461. animation: scrollUlTransform 8s linear infinite;
  462. }
  463. @keyframes scrollUlTransform {
  464. 0% {
  465. transform: translate(0, 0);
  466. }
  467. 50% {
  468. transform: translate(0, 0);
  469. }
  470. 51% {
  471. transform: translate(0, -50%);
  472. }
  473. 100% {
  474. transform: translate(0, -50%);
  475. }
  476. }
  477. .layui-layer-demo .scrollUl li {
  478. line-height: 51px;
  479. font-size: 30px;
  480. text-shadow: 0rem 0rem 0.2rem rgba(240, 27, 27, 0.5), 0rem 0rem 0.15rem rgba(240, 27, 27, 0.5), 0rem 0rem 0.2rem rgba(240, 27, 27, 0.5), 0rem 0rem 0.2rem rgba(240, 27, 27, 0.5);
  481. }
  482. /* led标题更改 */
  483. .layui-layer.layui-layer-led {
  484. border-radius: 20px;
  485. overflow: hidden;
  486. }
  487. .layui-layer-led .layui-layer-content {
  488. overflow: hidden !important;
  489. box-sizing: border-box;
  490. /* padding: 10px 15px; */
  491. }
  492. .layui-layer-led .LEDTitle {
  493. line-height: 45px;
  494. background: #ececec;
  495. border-bottom: 1px solid #d1d1d1;
  496. padding: 0 15px;
  497. color: #797979;
  498. }
  499. .layui-layer-led .LEDContent {
  500. padding: 15px;
  501. }
  502. .layui-layer-led .LEDContent>div {
  503. margin-bottom: 20px;
  504. }
  505. .layui-layer-led .LEDBtns {
  506. text-align: center;
  507. }
  508. .layui-layer-led .LEDBtns button {
  509. margin: 0 20px;
  510. }
  511. textarea {
  512. resize: none;
  513. }
  514. /* 短信阈值下发 */
  515. .layui-form-switch {
  516. background-color: #00abf8;
  517. border-color: #00abf8;
  518. }
  519. .layui-form-switch em {
  520. color: #fff !important;
  521. }
  522. .layui-form-switch i {
  523. background-color: #fff;
  524. }
  525. .layui-form-onswitch {
  526. border-color: #5FB878;
  527. background-color: #5FB878;
  528. }
  529. .authInp {
  530. width: 100%;
  531. }
  532. /* 在线、所属公司筛选框 */
  533. .iptScreen {
  534. width: 75%;
  535. }
  536. .layui-input-block {
  537. margin-left: 0;
  538. }
  539. .input-group-btnA {
  540. display: inline-block;
  541. }
  542. </style>
  543. <body>
  544. <div class="content">
  545. <div class="row">
  546. <!-- 左菜单 -->
  547. <div class="col-xs-12 col-sm-3 col-md-2">
  548. <div class="input-group">
  549. <input type="text" class="form-control" id="searchImei" name="searchImei" placeholder="输入编号或名称查询">
  550. <div class="input-group-btn">
  551. <button type="button" id="searchBtn" class="btn btn-default no-border btn-sm">
  552. <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
  553. </button>
  554. </div>
  555. </div>
  556. <!-- 下拉框 -->
  557. <!-- 在线状态 -->
  558. <div class="layui-input-block">
  559. <p class="">在线状态:</p>
  560. <select name="status" lay-verify="required" id="selectId" class="iptScreen">
  561. <option value="" selected>全部</option>
  562. <option value="0">离线</option>
  563. <option value="1">在线</option>
  564. </select>
  565. </div>
  566. <div id="firstpane" class="menu_list">
  567. <p class="menu_head current" id="area_322">设备列表</p>
  568. <div class="menu_body">
  569. <!-- <a href="javascript:;" title="设备15112501" class="text-overflow" id="15112501" data-pid="322">设备15112501</a> -->
  570. </div>
  571. <div class="equipPage">
  572. <!-- <button class="btn btn-minier btn-yellow"><i class="fa fa-sort-up" aria-hidden="true"></i></button> -->
  573. <input type="button" class="btn btn-minier btn-yellow" onclick="gotofirstpage()" value="首页">
  574. <button class="btn btn-minier btn-yellow" id="jianPage"
  575. onclick="changePage('jian')">上一页</button>
  576. 第
  577. <span id="currentpage">1</span>页
  578. <button class="btn btn-minier btn-yellow" id="addPage" onclick="changePage('add')">下一页</button>
  579. 共<span id="totelpage">4</span>页
  580. </div>
  581. <div class="equipPage">
  582. 跳转 <input type="text" id="jumpPage" value="1"
  583. style="width: 60px;height: 30px;text-align: center;"
  584. onkeypress="if (event.keyCode == 13) changePage('jump');"> 页
  585. <button class="btn btn-minier btn-yellow" id="jianPage" onclick="changePage('jump')">确定</button>
  586. </div>
  587. </div>
  588. <div class="">
  589. <div class="widget-box" style="margin-top: 20px;">
  590. <div class="widget-title">
  591. <!-- <span class="icon"> <i class="icon-th"></i> </span> -->
  592. <h5>项目信息</h5>
  593. </div>
  594. </div>
  595. <div class="widget-content" style="padding: 0px;margin-top: 8px;">
  596. <div>
  597. <!-- <img src="www.yfzhwlw.com/qxz_photo/default.png" class="equip_photo" width="100%" height="100%" style=""> -->
  598. <form action="" method="post" id="userPhoto" class="form-horizontal"
  599. enctype="multipart/form-data">{% csrf_token %}
  600. <input type="hidden" value="" id="qxzPhotoId" name="id">
  601. <div class="personal-avatar">
  602. <div class="top-avatar" id="viewPhotoParent">
  603. <img id="viewPhoto" class="equip_photo" onclick="$('#uploadPhoto').click()"
  604. src="" width="100%" height="100%">
  605. </div>
  606. <a class="upload-avatar" href="javascript:;">
  607. <input class="upload-btn" name="upicture"
  608. onchange="previewImage(this,'viewPhotoParent','viewPhoto','uploadPhoto','100%',200)"
  609. type="file" id="uploadPhoto">
  610. </a>
  611. <!-- <input type="hidden" name="req" value="photo"> -->
  612. </div>
  613. </form>
  614. </div>
  615. <div class="todo" style="background: white;margin-top: 5px;" id="qxzInfoDiv">
  616. <ul>
  617. <li class="clearfix">
  618. <div class="txt equip_name">&nbsp;&nbsp;</div>
  619. </li>
  620. <li class="clearfix">
  621. <div class="txt equip_id">&nbsp;&nbsp;</div>
  622. </li>
  623. <li class="clearfix" id="isonline">
  624. <div class="txt">&nbsp;&nbsp;</div>
  625. </li>
  626. </ul>
  627. </div>
  628. </div>
  629. </div>
  630. </div>
  631. <!-- 右 -->
  632. <div class="col-xs-12 col-sm-9 col-md-10">
  633. <!-- 实时状态 -->
  634. <div class="currTimeStatus">
  635. <div class="widget-box" style="margin-top: 0px;">
  636. <div class="widget-title">
  637. <!-- <span class="icon"> <i class="icon-th"></i> </span> -->
  638. <h5>实时状态</h5>
  639. <div class="equipInfo" id="equipInfo"> </div>
  640. <div class="span5" id="equipCtrlDiv" style="float: right;">
  641. <button class="btn btn-white btn-primary" id="newDataRefresh" onclick="newDataRefresh()"
  642. type="button">
  643. <i class="fa fa-refresh" aria-hidden="true"></i>
  644. </button>
  645. <button class="btn btn-white btn-primary" id="setEleName" onclick="setEleName()"
  646. type="button">
  647. <i class="fa fa-cog" aria-hidden="true"></i>
  648. </button>
  649. <button class="btn btn-white btn-primary" id="updataTime" type="button">2020-03-12
  650. 13:48:15</button>
  651. </div>
  652. <div style="float: right;margin-right:5px;" id="sinCodeInquire">
  653. <!-- <button class="btn btn-white btn-primary" onclick="inquireSim('89860403101970072488')" id="" type="button">流量查询</button> -->
  654. </div>
  655. </div>
  656. </div>
  657. </div>
  658. <div class="body-content clearfix row" id="newStatusBox">
  659. <!-- <div class="dev col-xs-4 col-md-3 col-lg-2 bg_lb">
  660. <div class="left">
  661. <img class="img-dev" src="{% static '/img/switchBtnIcon.png' %}">
  662. </div>
  663. <div class="right">
  664. <div class="name">风速</div>
  665. <div class="data">
  666. <strong>
  667. <span style="font-size: 25px;">0.0</span>
  668. </strong>m/s</div>
  669. </div>
  670. </div> -->
  671. </div>
  672. <!-- 设备手动控制 -->
  673. <div id="ctrlBoxParentDiv">
  674. <div class="currTimeStatus">
  675. <div class="widget-box">
  676. <div class="widget-title">
  677. <!-- <span class="icon"> <i class="icon-th"></i> </span> -->
  678. <h5>设备手动控制</h5>
  679. <button class="btn btn-white btn-primary qxzDownCtrl" onclick="qxzDownCtrlFun()">
  680. <i class="fa fa-refresh" aria-hidden="true"></i>
  681. </button>
  682. </div>
  683. </div>
  684. </div>
  685. <div class="row handCtrlBox" id="ctrlBox">
  686. <!-- <div class="col-xs-2">
  687. <div class="equipCtrl">
  688. <input type="hidden" value="1">
  689. <div>
  690. <span class="isonlineicon active"></span>
  691. 控制1
  692. </div>
  693. <div class="equipCtrlInp">
  694. <label>
  695. <input name="switch-field-1" checked class="ace ace-switch ace-switch-4 btn-rotate" type="checkbox">
  696. <span class="lbl"></span>
  697. </label>
  698. </div>
  699. </div>
  700. </div> -->
  701. </div>
  702. </div>
  703. <!-- 设备阈值控制 -->
  704. <div id="getthresholdDivParentDiv">
  705. <div class="currTimeStatus">
  706. <div class="widget-box" style="margin-top: 0px;">
  707. <div class="widget-title">
  708. <!-- <span class="icon"> <i class="icon-th"></i> </span> -->
  709. <h5>设备阈值控制</h5>
  710. <button class="btn btn-white btn-primary qxzDownCtrl" id="" onclick="" type="button">
  711. <i class="fa fa-refresh" aria-hidden="true"></i>
  712. </button>
  713. </div>
  714. </div>
  715. </div>
  716. <div class="row" id="getthresholdDiv">
  717. <!-- <div class="col-xs-2 col-sm-3">
  718. <div class="thresholdCtrl">
  719. <div class="setthresholdBtn" onclick="setthresholdFun(this)">
  720. <i class="fa fa-cog setName" aria-hidden="true"></i>
  721. </div>
  722. <input type="hidden" class="currVal" value='{"JK":1,"eKey":1,"upper":700,"lower":300,"method":1}'>
  723. <div class="thresholdCtrlName">
  724. <p>开关1(e1)</p>
  725. </div>
  726. <div class="thresholdCtrlShowDiv">
  727. <div class="qxys">
  728. <div>
  729. <img src="{% static '/img/dev/icon_110.png' %}" alt="">
  730. </div>
  731. <div>雨量累计</div>
  732. </div>
  733. <div class="maxminNum">
  734. <p>最大值:
  735. <span>30</span>
  736. </p>
  737. <p>最小值:
  738. <span>10</span>
  739. </p>
  740. </div>
  741. </div>
  742. <div class="equipCtrlInp">
  743. <label>
  744. <input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox">
  745. <span class="lbl"></span>
  746. </label>
  747. </div>
  748. </div>
  749. </div> -->
  750. </div>
  751. </div>
  752. <!-- 设备定时控制 -->
  753. <div id="timingDivParentDiv">
  754. <div class="currTimeStatus">
  755. <div class="widget-box" style="margin-top: 0px;">
  756. <div class="widget-title">
  757. <!-- <span class="icon"> <i class="icon-th"></i> </span> -->
  758. <h5>设备定时控制</h5>
  759. <button class="btn btn-white btn-primary qxzDownCtrl" id="" onclick="" type="button">
  760. <i class="fa fa-refresh" aria-hidden="true"></i>
  761. </button>
  762. </div>
  763. </div>
  764. </div>
  765. <div class="row" id="gettimingDiv">
  766. <!-- <div class="col-xs-2 col-sm-3">
  767. <div class="thresholdCtrl">
  768. <div class="setthresholdBtn" onclick="timingOnOff(this)">
  769. <i class="fa fa-cog setName" aria-hidden="true"></i>
  770. </div>
  771. <input type="hidden" class="currVal" value='{"JK":1,"StartTime":12,"Duration":10}'>
  772. <div class="thresholdCtrlName">
  773. <p>开关1(e1)</p>
  774. </div>
  775. <div class="thresholdCtrlShowDiv">
  776. <div class="maxminNum">
  777. <p>起始时间:
  778. <span>12</span>
  779. 点
  780. </p>
  781. <p>工作时长:
  782. <span>10</span>
  783. 小时
  784. </p>
  785. </div>
  786. </div>
  787. <div class="equipCtrlInp">
  788. <label>
  789. <input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox">
  790. <span class="lbl"></span>
  791. </label>
  792. </div>
  793. </div>
  794. </div> -->
  795. </div>
  796. </div>
  797. <!-- 24小时数据 -->
  798. <div id="data24Div">
  799. <div class="currTimeStatus">
  800. <div class="widget-box">
  801. <div class="widget-title">
  802. <h5>24小时数据</h5>
  803. <div class="span5" id="equipCtrlDiv" style="float: right;">
  804. <button class="btn btn-white btn-primary" onclick="historyData()">历史数据 >></button>
  805. </div>
  806. </div>
  807. </div>
  808. </div>
  809. <div class="row">
  810. <div class="col-xs-12 col-md-12 col-lg-9">
  811. <table id="newtable" class="table table-striped table-hover">
  812. <tr>
  813. <td>传感器通道</td>
  814. <td>通道名称</td>
  815. <td>最小值</td>
  816. <td>最小值时间</td>
  817. <td>最大值</td>
  818. <td>最大值时间</td>
  819. </tr>
  820. <tbody>
  821. </tbody>
  822. </table>
  823. </div>
  824. </div>
  825. </div>
  826. </div>
  827. </div>
  828. </div>
  829. <!-- Modal -->
  830. <div id="Modal" class="model" style="display:none">
  831. <div>
  832. <form class="layui-form" action="" id="modelForm" lay-filter="formModel">
  833. <input type="hidden" value="" name="JK">
  834. <input type="hidden" value="" name="eKey">
  835. <div class="layui-form-item">
  836. <label class="layui-form-label">最大值</label>
  837. <div class="layui-input-inline">
  838. <input type="text" name="upper" id="upper" required lay-verify="required" placeholder="请输入最大值"
  839. autocomplete="off" class="layui-input">
  840. </div>
  841. </div>
  842. <div class="layui-form-item">
  843. <label class="layui-form-label">最小值</label>
  844. <div class="layui-input-inline">
  845. <input type="text" name="lower" required lay-verify="required" placeholder="请输入最小值"
  846. autocomplete="off" class="layui-input">
  847. </div>
  848. </div>
  849. <div class="layui-form-item">
  850. <label class="layui-form-label">规 则</label>
  851. <div class="layui-input-inline">
  852. <input type="radio" name="method" lay-filter="radioSwitch" value="1" title="程序一" checked="">
  853. <input type="radio" name="method" lay-filter="radioSwitch" value="0" title="程序二">
  854. </div>
  855. <div class="layui-form-mid layui-word-aux" id="hintDiv">低于下限
  856. <span>开启</span>,高于上限
  857. <span>关闭</span>
  858. </div>
  859. </div>
  860. </form>
  861. </div>
  862. </div>
  863. <!-- Modal2 -->
  864. <div id="timingOnOffModal" class="model" style="display:none">
  865. <div>
  866. <form class="layui-form" action="" id="modelForm" lay-filter="formModel">
  867. <input type="hidden" value="" name="JK">
  868. <div class="layui-form-item">
  869. <label class="layui-form-label">起始时间:</label>
  870. <div class="layui-input-inline">
  871. <input type="number" name="StartTime" id="starttime" required
  872. lay-verify="required|starttimeRegex" placeholder="请输入起始时间" autocomplete="off"
  873. class="layui-input">
  874. <!-- <select name="city" lay-verify="">
  875. <option value="">请选择一个城市</option>
  876. <option value="010">北京</option>
  877. <option value="021">上海</option>
  878. <option value="0571">杭州</option>
  879. </select>
  880. <select name="city" lay-verify="required">
  881. <option value=""></option>
  882. <option value="0">北京</option>
  883. <option value="1">上海</option>
  884. <option value="2">广州</option>
  885. <option value="3">深圳</option>
  886. <option value="4">杭州</option>
  887. </select> -->
  888. </div>
  889. <div class="layui-form-mid layui-word-aux">时间范围(0-23)</div>
  890. </div>
  891. <div class="layui-form-item">
  892. <label class="layui-form-label">工作时长:</label>
  893. <div class="layui-input-inline">
  894. <input type="number" name="Duration" id="Duration" required lay-verify="required|durationRegex"
  895. placeholder="请输入工作时长" autocomplete="off" class="layui-input">
  896. </div>
  897. <div class="layui-form-mid layui-word-aux">工作时长(1-24)</div>
  898. </div>
  899. </form>
  900. </div>
  901. </div>
  902. <!-- setEleName -->
  903. <div id="eleName" style="width:800px;display:none">
  904. <div style="width:95%;margin:0 auto;">
  905. <table class="layui-hide" id="eleTable" lay-filter="eleTable"></table>
  906. </div>
  907. </div>
  908. <!-- 管理员查看设备电压历史记录 -->
  909. <div id="record" style="display: none;">
  910. <div style="padding: 20px;width: 500px;float: left;">
  911. <table id="recordTable" lay-filter="recordTableFilter"></table>
  912. <div id="recordPage"></div>
  913. </div>
  914. <div style="margin-left: 480px;padding: 20px;">
  915. <div id="recordEcharts" style="height: 450px;width: 500px;"></div>
  916. </div>
  917. </div>
  918. {% verbatim %}
  919. <script type="text/html" id="switchTpl">
  920. <!-- 这里的 checked 的状态只是演示 -->
  921. <input type="checkbox" name="equipType" value="{{d.type}}" lay-skin="switch" lay-text="大于|小于"
  922. lay-filter="equipTypeDemo" {{ d.type == 1 ? 'checked' : '' }}>
  923. </script>
  924. {% endverbatim %}
  925. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  926. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  927. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  928. <script src="{% static '/js/common.js' %}?versions=0.5.4"></script>
  929. <script type="text/javascript"
  930. src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script>
  931. <script src="{% static '/lib/js/echarts.min.js' %}"></script>
  932. <script type="text/javascript">
  933. $.ajaxSetup({
  934. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  935. });
  936. </script>
  937. <script>
  938. //默认加载设备列表
  939. getEquipList(1, '');
  940. // 搜索
  941. $('#searchBtn').on('click', function () {
  942. getEquipList(1, $('#searchImei').val(), $('#selectId').val(), $('#selectIdA').val())
  943. });
  944. $('#searchImei').on('keyup', function (event) {
  945. if (event.keyCode == 13) {
  946. getEquipList(1, $('#searchImei').val(), $('#selectId').val(), $('#selectIdA').val())
  947. }
  948. })
  949. function getEquipList(page, filter, is_online, etype) {
  950. if (etype == undefined && is_online == undefined) {
  951. var etype = ''
  952. var is_online = ''
  953. }
  954. $.ajax({
  955. url: 'qxz_page',
  956. type: 'get',
  957. dataType: 'json',
  958. data: {
  959. page: page,
  960. f_id: filter,
  961. etype: etype, //所属公司
  962. is_online: is_online, //设备状态
  963. },
  964. beforeSend: function (XMLHttpRequest) {
  965. loadingFlag = layer.load();
  966. },
  967. success: function (data) {
  968. layer.close(loadingFlag);
  969. if (data.nums) {
  970. var html = '';
  971. var msg = data.ids
  972. var pagecount = Math.ceil(data.nums / 10);
  973. for (var i = 0; i < msg.length; i++) {
  974. if (msg[i].equip_name) {
  975. var equip_name = '设备:' + msg[i].equip_name;
  976. } else if (msg[i].equip_id.length == 15) {
  977. var equip_name = '设备:' + msg[i].equip_id.substring(msg[i].equip_id.length - 8);
  978. } else {
  979. var equip_name = '设备:' + msg[i].equip_id;
  980. }
  981. var offTime = msg[i].off_time || '';
  982. if (msg[i].is_online == 1) {
  983. var classStatic = 'bjgreen';
  984. } else if (msg[i].is_online == 0) {
  985. var classStatic = 'bjred';
  986. } else {
  987. var classStatic = '';
  988. }
  989. // var equip_name = msg[i].equip_name?'---设备名:'+msg[i].equip_name:'';
  990. html += '<a href="javascript:;" isonline="' + msg[i].is_online + '" offTime="' + offTime + '" title="设备' + msg[i].equip_id + '" class="text-overflow" id="' + msg[i].equip_id + '" name="' + msg[i].equip_name + '" data-pid="322"><span class="' + classStatic + '"></span>' + equip_name + '</a>'
  991. }
  992. $('#firstpane .menu_body').html(html);
  993. $('.equipPage').show();
  994. $('#totelpage').html(pagecount)
  995. // 菜单栏
  996. $("#firstpane .menu_body:eq(0) a:eq(0)").addClass('menu-active');
  997. $('.widget-content .equip_id').html('设备ID:' + msg[0].equip_id);
  998. $('.widget-content .equip_name').html('项目名称:' + (msg[0].equip_name || '设备' + msg[0].equip_id));
  999. $(".menu_body a").click(function () {
  1000. $(".menu_head").removeClass("currAstive");
  1001. $(".menu_body a").removeClass("menu-active");
  1002. $(this).addClass("menu-active");
  1003. $(this).parent().prev().addClass('currAstive');
  1004. // 名称切换
  1005. $('.widget-content .equip_id').html('设备ID:' + $(this).attr('id'));
  1006. $('.widget-content .equip_name').html('项目名称:' + ($(this).attr('name') || '设备' + $(this).attr('id')));
  1007. var facId = $(this).attr("id");
  1008. var currisonline = $(this).attr("isonline");
  1009. var curroffTime = $(this).attr("offTime");
  1010. if (currisonline == 0) {
  1011. $('#isonline').show();
  1012. $('#isonline div').html('离线时间:' + curroffTime);
  1013. } else {
  1014. $('#isonline').hide();
  1015. }
  1016. if (facId && facId != null && facId != "") {
  1017. loadProject(facId);
  1018. $('#qxzPhotoId').val(facId);
  1019. }
  1020. });
  1021. loadProject(msg[0].equip_id);
  1022. if (msg[0].is_online == 0) {
  1023. $('#isonline').show();
  1024. $('#isonline div').html('离线时间:' + (msg[0].off_time || ''));
  1025. } else {
  1026. $('#isonline').hide();
  1027. }
  1028. $('#qxzPhotoId').val(msg[0].equip_id)
  1029. } else {
  1030. $('.equipPage').hide();
  1031. var html = '<a href="javascript:;" class="text-overflow nulldata" data-pid="322">暂未设备</a>'
  1032. $('#firstpane .menu_body').html(html);
  1033. scrollBar()
  1034. }
  1035. },
  1036. error: function (type) {
  1037. layer.close(loadingFlag);
  1038. }
  1039. })
  1040. }
  1041. var nowledinfo;
  1042. // 查询SIM卡
  1043. function inquireSim(iccid) {
  1044. $.ajax({
  1045. url: 'siminfo',
  1046. type: 'post',
  1047. dataType: 'json',
  1048. data: {
  1049. simid: iccid,
  1050. },
  1051. beforeSend: function (XMLHttpRequest) {
  1052. //注意,layer.msg默认3秒自动关闭,如果数据加载耗时比较长,需要设置time
  1053. loadingFlag = layer.msg('请求中,请稍候……', { icon: 16, shade: 0.01, shadeClose: false, time: 60000 });
  1054. },
  1055. success: function (data) {
  1056. var dat = data.data;
  1057. if (data.code == 0) {
  1058. var status;
  1059. if (dat.account_status == "0") {
  1060. status = "未知";
  1061. } else if (dat.account_status == "1") {
  1062. status = "测试期";
  1063. } else if (dat.account_status == "2") {
  1064. status = "沉默期";
  1065. } else if (dat.account_status == "3") {
  1066. status = "使用中";
  1067. } else if (dat.account_status == "4") {
  1068. status = "停机";
  1069. } else if (dat.account_status == "5") {
  1070. status = "停机保号";
  1071. } else if (dat.account_status == "6") {
  1072. status = "预销号";
  1073. } else if (dat.account_status == "7") {
  1074. status = "销号";
  1075. }
  1076. var usage;
  1077. if (dat.iccid) {
  1078. usage = dat.data_usage;
  1079. } else {
  1080. usage.innerHTML = '--';
  1081. }
  1082. var balance;
  1083. if (dat.iccid) {
  1084. balance = dat.data_balance;
  1085. } else {
  1086. balance = '--';
  1087. }
  1088. var time;
  1089. if (dat.iccid) {
  1090. var timestamp4 = new Date(dat.expiry_date * 1000);//直接用 new Date(时间戳) 格式转化获得当前时间
  1091. time = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
  1092. } else {
  1093. time = '--';
  1094. }
  1095. layer.close(loadingFlag);
  1096. layer.open({
  1097. type: 1
  1098. , title: false //不显示标题栏
  1099. , skin: 'layui-layer-simCode' //样式类名
  1100. , closeBtn: false
  1101. , area: '300px;'
  1102. , shade: 0.8
  1103. , id: 'simCode' //设定一个id,防止重复弹出
  1104. , btn: ['我知道了']
  1105. , btnAlign: 'c'
  1106. , moveType: 1 //拖拽模式,0或者1
  1107. , content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">SIM卡查询结果<br>ICCID:' + iccid + '<br><br>状态:' + status + '<br>套餐:' + dat.data_plan + 'Mb<br>已用流量:' + usage + 'Mb<br>剩余流量:' + balance + 'Mb<br>到期时间:' + time + '</div>'
  1108. , success: function (layero) {
  1109. }
  1110. });
  1111. } else {
  1112. layer.msg(data.msg);
  1113. }
  1114. }
  1115. })
  1116. }
  1117. //在线状态筛选
  1118. $('#selectId').on('change', function () {
  1119. getEquipList(1, $('#searchImei').val(), $('#selectId').val(), $('#selectIdA').val())
  1120. })
  1121. //设备状态
  1122. function loadProject(facId) {
  1123. $.ajax({
  1124. url: 'qxz_status',
  1125. type: 'post',
  1126. dataType: 'json',
  1127. data: {
  1128. e_id: facId,
  1129. },
  1130. beforeSend: function (XMLHttpRequest) {
  1131. loadingFlag = layer.load();
  1132. },
  1133. success: function (data) {
  1134. layer.close(loadingFlag);
  1135. nowledinfo = data.ledinfo
  1136. // 实时状态
  1137. newStatus('newStatusBox', data, facId);
  1138. $('#updataTime').html(data.base.upl_time || '暂无上传数据');
  1139. if (data.base.qxz_picture) {
  1140. $('#viewPhoto').attr('src', 'http://120.27.222.26/' + data.base.qxz_picture);
  1141. } else {
  1142. $('#viewPhoto').attr('src', 'http://120.27.222.26/' + 'qxz_photo/default.jpg');
  1143. }
  1144. addCtrlBtn(data.qxz_switch, data.switch_name);
  1145. if (data.qxz_switch && (data.qxz_switch.length != 2)) {
  1146. $('#ctrlBoxParentDiv').show();
  1147. $('#getthresholdDivParentDiv').show();
  1148. $('#timingDivParentDiv').show();
  1149. $('#data24Div').hide();
  1150. gettimimgFun(data);
  1151. getthresholdFun(data);
  1152. scrollBar()
  1153. } else { // 无开关显示24小时数据
  1154. $('#ctrlBoxParentDiv').hide();
  1155. $('#getthresholdDivParentDiv').hide();
  1156. $('#timingDivParentDiv').hide();
  1157. $('#data24Div').show();
  1158. get24Data(facId)
  1159. scrollBar()
  1160. }
  1161. },
  1162. error: function (type) {
  1163. layer.close(loadingFlag);
  1164. }
  1165. })
  1166. }
  1167. // 阈值请求
  1168. function getthresholdFun(data) {
  1169. if (data.auto_list.length > 2) {
  1170. var switchData = eval('(' + data.auto_list + ')');
  1171. var qxz_switch = eval('(' + data.qxz_switch + ')');
  1172. // var qxz_list = data.new_data;
  1173. if (data.switch_name.length > 2) {
  1174. var switch_name = eval('(' + data.switch_name + ')');
  1175. } else {
  1176. var switch_name = [];
  1177. }
  1178. } else {
  1179. var switchData = [];
  1180. // var qxz_list = [];
  1181. var switch_name = [];
  1182. }
  1183. if (switchData.length) {
  1184. var html = '';
  1185. for (var i = 0; i < switchData.length; i++) {
  1186. if (switchData[i].JK != 255) {
  1187. if (switchData[i].upper == 32767 || switchData[i].lower == 32767) {
  1188. var check = false;
  1189. } else {
  1190. var check = true;
  1191. }
  1192. // 判断通道号
  1193. if (!isNaN(switchData[i].eKey)) {
  1194. var eknum = switchData[i].eKey + 1;
  1195. var ek = 'e' + eknum;
  1196. } else {
  1197. var ek = switchData[i].eKey;
  1198. }
  1199. // 开关名
  1200. if (switchData[i].JK == qxz_switch[i].JK) {
  1201. if (switch_name.length > 2) {
  1202. if (switch_name[i].name) {
  1203. var name = switch_name[i].name;
  1204. } else {
  1205. var name = '开关' + qxz_switch[i].JK;
  1206. }
  1207. } else {
  1208. var name = '开关' + qxz_switch[i].JK;
  1209. }
  1210. } else {
  1211. var name = timingData[i].JK;
  1212. }
  1213. if (data.dat[ek]) {
  1214. var eNum = data.dat[ek].split('#')[1];
  1215. var txt = data.conf[ek].split('#')[0];
  1216. html += '<div class="col-xs-6 col-sm-4"><div class="thresholdCtrl">' +
  1217. '<div class="setthresholdBtn" onclick="setthresholdFun(this)">' +
  1218. '<i class="fa fa-cog setName" aria-hidden="true"></i></div>' +
  1219. '<input type="hidden" class="currVal" value=\'' + JSON.stringify(switchData[i]) + '\'>' +
  1220. '<div class="thresholdCtrlName"><p>' + name + '(通道' + switchData[i].eKey + ')</p></div>' +
  1221. '<div class="thresholdCtrlShowDiv"><div class="qxys"><div>' +
  1222. '<img src="http://www.yfzhwlw.com/static/img/dev/icon_' + eNum + '.png" alt=""></div>' +
  1223. '<div>' + txt + data.conf[ek].split('#')[1] + '</div></div><div class="maxminNum"><p>最大值:<span>' + switchData[i].upper + '</span></p>' +
  1224. '<p>最小值:<span>' + switchData[i].lower + '</span></p></div></div><div class="equipCtrlInp">';
  1225. if (check) {
  1226. html += '<label><input name="switch-field-1" class="ace ace-switch ace-switch-6" checked="checked" type="checkbox">' +
  1227. '<span class="lbl"></span></label></div></div></div>';
  1228. } else {
  1229. html += '<label><input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox">' +
  1230. '<span class="lbl"></span></label></div></div></div>';
  1231. }
  1232. }
  1233. }
  1234. if (i == switchData.length - 1) {
  1235. if (html) {
  1236. $('#getthresholdDiv').html(html)
  1237. } else {
  1238. $('#getthresholdDiv').html('<div style="text-align:center">空</div>')
  1239. }
  1240. }
  1241. }
  1242. } else {
  1243. $('#getthresholdDiv').html('<div style="text-align:center">空</div>')
  1244. }
  1245. }
  1246. // 定时请求
  1247. function gettimimgFun(data) {
  1248. var switch_name = data.switch_name;
  1249. var qxz_switch = data.qxz_switch;
  1250. if (data.timing_list.length) {
  1251. var timingData = eval('(' + data.timing_list + ')');
  1252. var qxz_switch = eval('(' + data.qxz_switch + ')');
  1253. var qxz_list = data.qxz_list;
  1254. if (switch_name.length > 2) {
  1255. var switch_name = eval('(' + switch_name + ')');
  1256. } else {
  1257. var switch_name = [];
  1258. }
  1259. } else {
  1260. var timingData = [];
  1261. var qxz_list = [];
  1262. var switch_name = [];
  1263. }
  1264. if (timingData.length) {
  1265. var html = '';
  1266. for (var i = 0; i < timingData.length; i++) {
  1267. if (timingData[i].JK != 255) {
  1268. if (timingData[i].Duration == 32767 || timingData[i].StartTime == 32767) {
  1269. var check = false;
  1270. var curCheckedVal = {
  1271. JK: timingData[i].JK,
  1272. StartTime: '--',
  1273. Duration: '--'
  1274. }
  1275. var startTime = '--';
  1276. var duration = '--';
  1277. } else {
  1278. var check = true;
  1279. var curCheckedVal = {
  1280. JK: timingData[i].JK,
  1281. StartTime: timingData[i].StartTime,
  1282. Duration: timingData[i].Duration
  1283. }
  1284. var startTime = timingData[i].StartTime;
  1285. var duration = timingData[i].Duration;
  1286. }
  1287. if (timingData[i].JK == qxz_switch[i].JK) {
  1288. if (switch_name.length > 2) {
  1289. if (switch_name[i].name) {
  1290. var name = switch_name[i].name;
  1291. } else {
  1292. var name = '开关' + qxz_switch[i].JK;
  1293. }
  1294. } else {
  1295. var name = '开关' + qxz_switch[i].JK;
  1296. }
  1297. } else {
  1298. var name = timingData[i].JK;
  1299. }
  1300. html += '<div class="col-xs-6 col-sm-4"><div class="thresholdCtrl">' +
  1301. '<div class="setthresholdBtn" onclick="timingOnOff(this)">' +
  1302. '<i class="fa fa-cog setName" aria-hidden="true"></i></div>' +
  1303. '<input type="hidden" class="currVal" value=\'' + JSON.stringify(curCheckedVal) + '\'>' +
  1304. '<div class="thresholdCtrlName"><p>' + name + '</p></div>' +
  1305. '<div class="thresholdCtrlShowDiv"><div class="maxminNum">' +
  1306. '<p>起始时间:<span>' + startTime + '</span>点</p><p>工作时长:<span>' + duration + '</span>小时</p>' +
  1307. '</div></div><div class="equipCtrlInp"><label>';
  1308. if (check) {
  1309. html += '<input name="switch-field-1" checked class="ace ace-switch ace-switch-6" type="checkbox">' +
  1310. '<span class="lbl"></span></label></div></div></div>';
  1311. } else {
  1312. html += '<input name="switch-field-1" class="ace ace-switch ace-switch-6" type="checkbox">' +
  1313. '<span class="lbl"></span></label></div></div></div>';
  1314. }
  1315. }
  1316. if (i == timingData.length - 1) {
  1317. if (html) {
  1318. $('#gettimingDiv').html(html)
  1319. } else {
  1320. $('#gettimingDiv').html('<div style="text-align:center">空</div>')
  1321. }
  1322. }
  1323. }
  1324. } else {
  1325. $('#gettimingDiv').html('<div style="text-align:center">空</div>')
  1326. }
  1327. }
  1328. // 控制按钮
  1329. function addCtrlBtn(data, switch_name) {
  1330. if (data && switch_name.length > 2) {
  1331. var data = eval('(' + data + ')');
  1332. var ctrl_name = eval('(' + switch_name + ')');
  1333. $('.qxzDownCtrl').show();
  1334. } else if (data) {
  1335. var data = eval('(' + data + ')');
  1336. var ctrl_name = [];
  1337. } else {
  1338. var data = []
  1339. $('.qxzDownCtrl').hide();
  1340. }
  1341. if (data.length) {
  1342. var html = '';
  1343. for (var i = 0; i < data.length; i++) {
  1344. if (data[i].status == 0) {
  1345. var curClass = '';
  1346. } else {
  1347. var curClass = 'active';
  1348. }
  1349. if (data[i].status == 0) {
  1350. var curChecked = ''; //关
  1351. } else {
  1352. var curChecked = 'checked';
  1353. }
  1354. if (ctrl_name.length) {
  1355. if (ctrl_name[i].name != '') {
  1356. var switch_name = ctrl_name[i].name;
  1357. } else {
  1358. var switch_name = '开关' + ctrl_name[i].JK;
  1359. }
  1360. } else {
  1361. var switch_name = '开关' + data[i].JK;
  1362. }
  1363. html += '<div class="col-xs-2"><div class="equipCtrl"><input type="hidden" class="currStutas" value="' + data[i].JK + '">' +
  1364. '<i class="fa fa-cog setName" aria-hidden="true"></i><div><span class="isonlineicon ' + curClass + '"></span><span class="numName">' + switch_name + '</span></div><div class="equipCtrlInp">' +
  1365. '<label><input name="switch-field-1" ' + curChecked + ' class="ace ace-switch ace-switch-4 btn-rotate" type="checkbox">' +
  1366. '<span class="lbl"></span></label></div></div></div>';
  1367. if (i == data.length - 1) {
  1368. $('#ctrlBox').html(html);
  1369. }
  1370. }
  1371. } else {
  1372. $('#ctrlBox').html('<div style="text-align:center">空</div>');
  1373. }
  1374. }
  1375. $('#ctrlBox').on('click', '.btn-rotate', function () {
  1376. var _this = this;
  1377. $(this).parents('.equipCtrl').find('.ctrlLoading').remove()
  1378. $(this).attr('disabled', true);
  1379. $(this).parents('.equipCtrl').append('<div class="ctrlLoading"><img src="http://www.nyzhwlw.com/images/loading.gif" width="24">操作中...</div>');
  1380. var currWay = $(this).parents('.equipCtrl').find('.currStutas').val();
  1381. var imei = $('#qxzPhotoId').val();
  1382. if ($(this).is(":checked")) {
  1383. var oldStatus = 0;
  1384. var currStutas = 1;
  1385. } else {
  1386. var oldStatus = 1;
  1387. var currStutas = 0;
  1388. }
  1389. $.ajax({
  1390. url: 'qxz_switch',
  1391. type: 'post',
  1392. data: {
  1393. 'req': 'set',
  1394. 'imei': imei,
  1395. 'way': currWay,
  1396. 'switch': currStutas
  1397. },
  1398. success: function (data) {
  1399. setTimeout(function () {
  1400. var id = $('#firstpane .menu-active').attr('id')
  1401. loadProject(id);
  1402. }, 5000)
  1403. // $(_this).attr('disabled', false);
  1404. // $(_this).parents('.equipCtrl').find('.ctrlLoading').html('');
  1405. // if (currStutas) {
  1406. // $(_this).parents('.equipCtrl').find('.isonlineicon').addClass('active')
  1407. // } else {
  1408. // $(_this).parents('.equipCtrl').find('.isonlineicon').removeClass('active')
  1409. // }
  1410. },
  1411. error: function (type) {
  1412. layer.close(loadingFlag);
  1413. $(_this).parents('.equipCtrl').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
  1414. $(_this).attr('disabled', false);
  1415. if (oldStatus) {
  1416. $(_this).prop('checked', true);
  1417. $(_this).parents('.equipCtrl').find('.isonlineicon').addClass('active')
  1418. } else {
  1419. $(_this).prop('checked', '');
  1420. $(_this).parents('.equipCtrl').find('.isonlineicon').removeClass('active')
  1421. }
  1422. }
  1423. })
  1424. })
  1425. // 下发控制名称
  1426. $('#ctrlBox').on('click', '.setName', function () {
  1427. var _this = this;
  1428. var ele = $(this).parents('.equipCtrl').find('.numName');
  1429. var currWay = $(this).parents('.equipCtrl').find('.currStutas').val();
  1430. layui.use('layer', function () {
  1431. var layer = layui.layer;
  1432. layer.prompt({ title: '自定义名称', offset: '300px', formType: 0, value: ele.html(), maxlength: 10 }, function (text, index) {
  1433. if (text == ele.html()) {
  1434. return false;
  1435. layer.close(index);
  1436. layer.msg('演示完毕!您的口令:' + text);
  1437. ele.html(text)
  1438. }
  1439. $.ajax({
  1440. url: 'qxz_switch_name',
  1441. type: 'post',
  1442. data: {
  1443. 'imei': $('#qxzPhotoId').val(),
  1444. 'way': currWay,
  1445. 'sw_name': text
  1446. },
  1447. success: function (data) {
  1448. if (data == 0) {
  1449. ele.html(text)
  1450. }
  1451. layer.close(index);
  1452. },
  1453. error: function (type) {
  1454. $(_this).parents('.equipCtrl').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
  1455. $(_this).attr('disabled', false);
  1456. if (oldStatus) {
  1457. $(_this).prop('checked', true);
  1458. $(_this).parents('.equipCtrl').find('.isonlineicon').addClass('active')
  1459. } else {
  1460. $(_this).prop('checked', '');
  1461. $(_this).parents('.equipCtrl').find('.isonlineicon').removeClass('active')
  1462. }
  1463. }
  1464. })
  1465. });
  1466. });
  1467. })
  1468. // 获取最新控制按钮状态
  1469. function qxzDownCtrlFun() {
  1470. $.ajax({
  1471. url: 'qxz_switch',
  1472. type: 'post',
  1473. data: {
  1474. 'req': 'conf', //
  1475. 'imei': $('#qxzPhotoId').val(),
  1476. },
  1477. beforeSend: function () {
  1478. loadFlage = layer.load();
  1479. },
  1480. complete: function () {
  1481. setTimeout(function () {
  1482. layer.close(loadFlage);
  1483. }, 5000)
  1484. },
  1485. success: function (data) {
  1486. setTimeout(function () {
  1487. loadProject($('#qxzPhotoId').val())
  1488. }, 5000)
  1489. }
  1490. })
  1491. }
  1492. // 获取最新数据
  1493. function newDataRefresh() {
  1494. $.ajax({
  1495. url: 'qxz_switch',
  1496. type: 'post',
  1497. data: {
  1498. 'req': 'read',
  1499. 'imei': $('#qxzPhotoId').val(),
  1500. },
  1501. beforeSend: function () {
  1502. loadFlage = layer.load();
  1503. },
  1504. complete: function () {
  1505. setTimeout(function () {
  1506. layer.close(loadFlage);
  1507. }, 5000)
  1508. },
  1509. success: function (data) {
  1510. setTimeout(function () {
  1511. loadProject($('#qxzPhotoId').val())
  1512. }, 5000)
  1513. }
  1514. })
  1515. }
  1516. // 设备列表
  1517. var currpage = 1;
  1518. function changePage(symbol) {
  1519. var totelpage = Number($('#totelpage').html());
  1520. if (symbol == 'add') {
  1521. if (currpage < totelpage) {
  1522. currpage++;
  1523. $('#currentpage').html(currpage);
  1524. $('#jumpPage').val(currpage);
  1525. $('addPage').attr('disable', 'false')
  1526. } else {
  1527. $('addPage').attr('disable', 'true')
  1528. return false;
  1529. }
  1530. } else if (symbol == 'jian') {
  1531. if (currpage > 1) {
  1532. currpage--;
  1533. $('#currentpage').html(currpage);
  1534. $('#jumpPage').val(currpage);
  1535. $('jianPage').attr('disable', 'false')
  1536. } else {
  1537. $('jianPage').attr('disable', 'true')
  1538. return false;
  1539. }
  1540. } else if (symbol == 'jump') {
  1541. var jumpPage = $('#jumpPage').val();
  1542. if (jumpPage <= totelpage && jumpPage > 0) {
  1543. currpage = jumpPage;
  1544. } else if (jumpPage > totelpage) {
  1545. currpage = totelpage;
  1546. } else if (jumpPage < 0) {
  1547. currpage = 1;
  1548. }
  1549. $('#jumpPage').val(currpage);
  1550. $('#currentpage').html(currpage);
  1551. }
  1552. getEquipList(currpage, $('#searchImei').val(), $('#selectId').val(), $('#selectIdA').val())
  1553. }
  1554. // 首页
  1555. function gotofirstpage() {
  1556. currpage = 1;
  1557. $('#currentpage').html(1);
  1558. $('#jumpPage').val(1);
  1559. getEquipList(1, $('#searchImei').val())
  1560. }
  1561. // 定时刷新
  1562. // msgInterval = setInterval(function () {
  1563. // var currid = $('#firstpane .menu-active').attr('id');
  1564. // loadProject(currid);
  1565. // }, 60000);
  1566. var waterTempId = [16062009, 16062010, 16062011, 16062012, 16062013, 16062014, 16062015, 16062016, 16062017, 16062018, 16062019, 16062020, 16062021, 16062022, 16062023, 16062024, 16062025];
  1567. // 实时状态
  1568. function newStatus(statusBox, data, facId) {
  1569. var dat = data.dat;
  1570. var html = '';
  1571. $(document.getElementById(statusBox)).html('');
  1572. var random = ['bg_lb', 'bg_ly', 'bg_ls', 'bg_lg', 'bg_lo', 'bg_lr']; //颜色随机
  1573. if (Object.keys(dat).length) {
  1574. for (var i = 1; i < 31; i++) {
  1575. var ekeyNum = 'e' + i;
  1576. if (dat[ekeyNum] != '' && (parseInt(dat[ekeyNum].split('#')[1]) != 163)) {
  1577. if (dat[ekeyNum].split('#')[0] == -99.99) {
  1578. var eVal = 'N/A';
  1579. } else {
  1580. if(dat[ekeyNum].split('#')[1] == 117){ //判断是否是雨雪天气
  1581. var eVal = dat[ekeyNum].split('#')[0]?'有':'无';
  1582. }else{
  1583. var eVal = dat[ekeyNum].split('#')[0];
  1584. }
  1585. }
  1586. var eNum = dat[ekeyNum].split('#')[1];
  1587. var ekey = dat[ekeyNum].split('#')[2];
  1588. var colorClass = eNum % 4;
  1589. // if(Object.keys(data.conf).length){
  1590. var eTxtUnit = data.conf[ekeyNum].split('#')[0];
  1591. var eUnit = data.conf[ekeyNum].split('#')[1];
  1592. // }
  1593. html += '<div class=" col-xs-4 col-md-3 col-lg-2"><div class="dev ' + random[colorClass] + '"><div class="left">' +
  1594. '<img class="img-dev" src="/static/img/dev/icon_' + eNum + '.png">' +
  1595. '</div><div class="right"><div class="name">' + eTxtUnit + '</div>';
  1596. if(dat[ekeyNum].split('#')[1] == 117){
  1597. html += '<div class="data"><strong><span style="font-size: 22px;">' + eVal + '</span>';
  1598. }else{
  1599. html += '<div class="data"><strong><span style="font-size: 25px;">' + eVal + '</span>';
  1600. }
  1601. html += '</strong>' + eUnit + '</div></div><div class="aisle">通道' + ekey.substr(1) + '</div></div></div>';
  1602. }
  1603. }
  1604. }
  1605. if (html) {
  1606. $(document.getElementById(statusBox)).append(html);
  1607. } else {
  1608. html = '<div style="text-align:center">空</div>';
  1609. $(document.getElementById(statusBox)).append(html);
  1610. // $('.widget-content .equip_name').html('');
  1611. // var id = $('#firstpane .menu-active').attr('id')
  1612. // $('.widget-content .equip_id').html('设备ID:' + id);
  1613. // $('#viewPhoto').attr('src', 'qxz_photo/default.jpg');
  1614. // scrollBar()
  1615. }
  1616. scrollBar()
  1617. }
  1618. // 24小时数据
  1619. function get24Data(facId) {
  1620. $.ajax({
  1621. url: 'qxz_day_data',
  1622. type: 'post',
  1623. dataType: 'json',
  1624. data: {
  1625. e_id: facId,
  1626. },
  1627. beforeSend: function (XMLHttpRequest) {
  1628. loadingFlag = layer.load();
  1629. },
  1630. success: function (data) {
  1631. layer.close(loadingFlag);
  1632. $("#newtable tr:not(:first)").remove();
  1633. if (data.data.length) {
  1634. Fill_Table('newtable', data, facId)
  1635. } else {
  1636. Fill_null_Table('newtable', data, facId)
  1637. }
  1638. },
  1639. error: function (type) {
  1640. layer.close(loadingFlag);
  1641. layer.msg('请求失败');
  1642. $("#newtable tr:not(:first)").remove();
  1643. }
  1644. })
  1645. }
  1646. function Fill_Table(table_id, data, facId) {
  1647. var dat = data.data;
  1648. //js循环读取json数据
  1649. var table = document.getElementById(table_id).children[1];
  1650. for (var i = 0; i < dat.length; i++) {
  1651. var row = table.insertRow(table.rows.length);
  1652. var c1 = row.insertCell(0);
  1653. c1.innerHTML = dat[i].ekey;
  1654. var c2 = row.insertCell(1);
  1655. var eNum = dat[i].enum
  1656. var elementName = data.conf[dat[i].ekey].split('#');
  1657. c2.innerHTML = elementName[0] + '(' + elementName[1] + ')';
  1658. var c3 = row.insertCell(2);
  1659. if (dat[i].min == -99.99) {
  1660. c3.innerHTML = 'N/A';
  1661. } else {
  1662. if(eNum[0] == 117){
  1663. c3.innerHTML = dat[i].min?'有':'无';
  1664. }else{
  1665. c3.innerHTML = dat[i].min;
  1666. }
  1667. }
  1668. var c4 = row.insertCell(3);
  1669. var min_time = dat[i].mintime;
  1670. c4.innerHTML = min_time;
  1671. var c5 = row.insertCell(4);
  1672. if (dat[i].max == -99.99) {
  1673. c5.innerHTML = 'N/A';
  1674. } else {
  1675. if(eNum[0] == 117){
  1676. c5.innerHTML = dat[i].max?'有':'无';
  1677. }else{
  1678. c5.innerHTML = dat[i].max;
  1679. }
  1680. }
  1681. var c6 = row.insertCell(5);
  1682. var max_time = dat[i].maxtime;
  1683. c6.innerHTML = max_time;
  1684. if (i == dat.length - 1) {
  1685. scrollBar()
  1686. }
  1687. }
  1688. }
  1689. function Fill_null_Table(table_id) {
  1690. var table = document.getElementById(table_id).children[1];
  1691. var row = table.insertRow(table.rows.length);
  1692. var c1 = row.insertCell(0);
  1693. c1.setAttribute('colspan', '16');
  1694. c1.setAttribute('class', 'nullData');
  1695. c1.innerHTML = "暂无数据";
  1696. scrollBar()
  1697. }
  1698. window.onresize = function () {
  1699. scrollBar()
  1700. }
  1701. // file 文件
  1702. // divId div id
  1703. // imgId 图片id
  1704. // fileId 文件id
  1705. // width 图片宽
  1706. // height 图片高
  1707. function previewImage(file, divId, imgId, fileId, width, height) {
  1708. width = $('#viewPhotoParent').width();
  1709. var div = document.getElementById(divId);
  1710. if (file.files && file.files[0]) {
  1711. if (file.files[0].size / 1024 / 1024 < 4) {
  1712. sendUserPhoto();
  1713. div.innerHTML = '<img id=' + imgId + ' onclick=$("#' + fileId + '").click()>';
  1714. var img = document.getElementById(imgId);
  1715. img.onload = function () {
  1716. // var rect = clacImgZoomParam(width, height, img.offsetWidth, img.offsetHeight);
  1717. img.width = width;
  1718. img.height = height;
  1719. // img.style.marginTop = rect.top+'px';
  1720. }
  1721. var reader = new FileReader();
  1722. reader.onload = function (evt) {
  1723. img.src = evt.target.result;
  1724. // $(window.parent.document).find('.nav-user-photo').attr('src',evt.target.result);
  1725. }
  1726. reader.readAsDataURL(file.files[0]);
  1727. // $('#userPhoto').submit();
  1728. } else {
  1729. $(file).val('');
  1730. layer.alert("图片过大!");
  1731. }
  1732. } else {//兼容IE
  1733. var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
  1734. file.select();
  1735. if (document.selection != undefined) {
  1736. var src = document.selection.createRange().text;
  1737. div.innerHTML = '<img id=' + imgId + '>';
  1738. var img = document.getElementById(imgId);
  1739. img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
  1740. var rect = clacImgZoomParam(width, height, img.offsetWidth, img.offsetHeight);
  1741. status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
  1742. div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;" + sFilter + src + "\"'></div>";
  1743. }
  1744. }
  1745. }
  1746. function clacImgZoomParam(maxWidth, maxHeight, width, height) {
  1747. var param = { top: 0, left: 0, width: width, height: height };
  1748. if (width > maxWidth || height > maxHeight) {
  1749. var rateWidth = width / maxWidth;
  1750. var rateHeight = height / maxHeight;
  1751. if (rateWidth > rateHeight) {
  1752. param.width = maxWidth;
  1753. param.height = Math.round(height / rateWidth);
  1754. } else {
  1755. param.width = Math.round(width / rateHeight);
  1756. param.height = maxHeight;
  1757. }
  1758. }
  1759. param.left = Math.round((maxWidth - param.width) / 2);
  1760. param.top = Math.round((maxHeight - param.height) / 2);
  1761. return param;
  1762. }
  1763. // 上传图片
  1764. function sendUserPhoto() {
  1765. var formData = new FormData($("#userPhoto")[0]);
  1766. $.ajax({
  1767. url: 'qxz_photo',
  1768. type: 'POST',
  1769. data: formData,
  1770. contentType: false,
  1771. processData: false,
  1772. success: function (data) {
  1773. if (data == 0) {
  1774. $(window.parent.document).find('.nav-user-photo').attr('src', $('#viewPhoto').prop('src'));
  1775. $('#uploadPhoto').val('');
  1776. }
  1777. else { layer.msg("上传失败!"); return false; }
  1778. }
  1779. });
  1780. }
  1781. // 设置阈值
  1782. function setthresholdFun(ele) {
  1783. var obj = $(ele);
  1784. var currValstr = obj.next().val();
  1785. var currVal = eval('(' + currValstr + ')');
  1786. layui.use(['layer', 'form'], function () {
  1787. var rule0 = "低于下限<span>开启</span>,高于上限<span>关闭</span>";
  1788. var rule1 = "低于下限<span>关闭</span>,高于上限<span>开启</span>";
  1789. var layer = layui.layer;
  1790. var form = layui.form;
  1791. //给表单赋值
  1792. form.val("formModel", {
  1793. "JK": currVal.JK
  1794. , "eKey": currVal.eKey
  1795. , "upper": currVal.upper
  1796. , "lower": currVal.lower
  1797. , "method": currVal.method
  1798. });
  1799. if (currVal.method == 1) {
  1800. $('#hintDiv').html(rule1)
  1801. } else {
  1802. $('#hintDiv').html(rule0)
  1803. }
  1804. form.on('radio(radioSwitch)', function (data) {
  1805. if (data.value == 1) {
  1806. $('#hintDiv').html(rule1)
  1807. } else {
  1808. $('#hintDiv').html(rule0)
  1809. }
  1810. });
  1811. layer.open({
  1812. type: 1,
  1813. title: '阈值设置',
  1814. offset: '380px',
  1815. btn: ['确定', '取消'],
  1816. area: ['600px', '300px'], //宽高
  1817. content: $('#Modal'),
  1818. success: function (layero, index) { // 成功弹出后回调
  1819. // 添加form标识
  1820. layero.addClass('layui-form');
  1821. // 将保存按钮改变成提交按钮
  1822. layero.find('.layui-layer-btn0').attr({
  1823. 'lay-filter': 'setYuzhi',
  1824. 'lay-submit': ''
  1825. });
  1826. },
  1827. yes: function (index, layero) {
  1828. form.on('submit(setYuzhi)', function (data) {
  1829. var dat = data.field;
  1830. if (parseInt(data.field.upper) < parseInt(data.field.lower)) {
  1831. layer.tips('最大值不能小于最小值!', $('#upper'));
  1832. return false;
  1833. }
  1834. var hideVal = JSON.stringify(data.field)
  1835. var id = $('#firstpane .menu-active').attr('id')
  1836. data.field.equip_id = id;
  1837. var curinputBtn = obj.parent().find('.ace-switch');
  1838. if (curinputBtn.is(":checked")) {
  1839. var oldStatus = 0;
  1840. var currStutas = 1;
  1841. } else {
  1842. var oldStatus = 1;
  1843. var currStutas = 0;
  1844. }
  1845. obj.parents('.thresholdCtrl').append('<div class="ctrlLoading"><img src="http://www.nyzhwlw.com/images/loading.gif" width="24">操作中...</div>');
  1846. $.ajax({
  1847. url: 'qxz_value_mqtt',
  1848. type: 'post',
  1849. data: data.field,
  1850. success: function (data) {
  1851. setTimeout(function () {
  1852. curinputBtn.attr('disabled', false);
  1853. curinputBtn.parents('.thresholdCtrl').find('.ctrlLoading').html('');
  1854. obj.parent().find('.maxminNum').find('p').eq(0).find('span').html(dat.upper)//最大值
  1855. obj.parent().find('.maxminNum').find('p').eq(1).find('span').html(dat.lower)//最小值
  1856. obj.parents('.thresholdCtrl').find('.ace-switch').prop('checked', 'checked');//开启阈值
  1857. var id = $('#firstpane .menu-active').attr('id')
  1858. loadProject(id);
  1859. }, 5000)
  1860. },
  1861. error: function (type) {
  1862. curinputBtn.parents('.thresholdCtrl').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
  1863. curinputBtn.attr('disabled', false);
  1864. }
  1865. })
  1866. // $('.maxminNum')
  1867. layer.closeAll(); //疯狂模式,关闭所有层
  1868. return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
  1869. });
  1870. }
  1871. , btn2: function (index, layero) {
  1872. $('#Modal').hide()
  1873. //return false 开启该代码可禁止点击该按钮关闭
  1874. }
  1875. });
  1876. });
  1877. }
  1878. // 下发阈值控制
  1879. $('#getthresholdDiv').on('click', '.ace-switch', function () {
  1880. var _this = this;
  1881. $(this).parents('.thresholdCtrl').find('.ctrlLoading').remove()
  1882. $(this).attr('disabled', true);
  1883. $(this).parents('.thresholdCtrl').append('<div class="ctrlLoading"><img src="http://www.nyzhwlw.com/images/loading.gif" width="24">操作中...</div>');
  1884. var currVal = $(this).parents('.thresholdCtrl').find('.currVal').val();
  1885. var currWayjson = JSON.parse(currVal);
  1886. var id = $('#firstpane .menu-active').attr('id')
  1887. currWayjson.equip_id = id;
  1888. if ($(this).is(":checked")) { //开启
  1889. var oldStatus = 0;
  1890. var currStutas = 1;
  1891. } else { //关闭
  1892. var oldStatus = 1;
  1893. var currStutas = 0;
  1894. currWayjson.upper = '32767';
  1895. currWayjson.lower = '32767';
  1896. }
  1897. $.ajax({
  1898. url: 'qxz_value_mqtt',
  1899. type: 'post',
  1900. data: currWayjson,
  1901. success: function (data) {
  1902. setTimeout(function () {
  1903. $(_this).attr('disabled', false);
  1904. $(_this).parents('.thresholdCtrl').find('.ctrlLoading').html('');
  1905. var id = $('#firstpane .menu-active').attr('id')
  1906. loadProject(id);
  1907. }, 5000)
  1908. },
  1909. error: function (type) {
  1910. $(_this).parents('.thresholdCtrl').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
  1911. $(_this).attr('disabled', false);
  1912. if (oldStatus) {
  1913. $(_this).prop('checked', true);
  1914. } else {
  1915. $(_this).prop('checked', '');
  1916. }
  1917. }
  1918. })
  1919. })
  1920. // 定时开关
  1921. function timingOnOff(ele) {
  1922. var obj = $(ele);
  1923. var currValstr = obj.next().val();
  1924. var currVal = eval('(' + currValstr + ')');
  1925. layui.use(['layer', 'form'], function () {
  1926. var layer = layui.layer;
  1927. var form = layui.form;
  1928. form.verify({
  1929. starttimeRegex: function (value, item) { //value:表单的值、item:表单的DOM对象
  1930. if (value < 0 || value > 23) {
  1931. return '请输入范围内数值';
  1932. }
  1933. },
  1934. durationRegex: function (value, item) { //value:表单的值、item:表单的DOM对象
  1935. if (value < 1 || value > 24) {
  1936. return '请输入范围内数值';
  1937. }
  1938. }
  1939. });
  1940. //给表单赋值
  1941. form.val("formModel", {
  1942. "JK": currVal.JK
  1943. , "StartTime": currVal.StartTime
  1944. , "Duration": currVal.Duration
  1945. });
  1946. layer.open({
  1947. type: 1,
  1948. title: '阈值设置',
  1949. offset: '380px',
  1950. btn: ['确定', '取消'],
  1951. area: ['600px', '300px'], //宽高
  1952. content: $('#timingOnOffModal'),
  1953. success: function (layero, index) { // 成功弹出后回调
  1954. // 添加form标识
  1955. layero.addClass('layui-form');
  1956. // 将保存按钮改变成提交按钮
  1957. layero.find('.layui-layer-btn0').attr({
  1958. 'lay-filter': 'setdingshi',
  1959. 'lay-submit': ''
  1960. });
  1961. },
  1962. yes: function (index, layero) {
  1963. form.on('submit(setdingshi)', function (data) {
  1964. var hideVal = JSON.stringify(data.field)
  1965. var dat = data.field;
  1966. var curinputBtn = obj.parent().find('.ace-switch');
  1967. if (curinputBtn.is(":checked")) {
  1968. var oldStatus = 0;
  1969. var currStutas = 1;
  1970. } else {
  1971. var oldStatus = 1;
  1972. var currStutas = 0;
  1973. }
  1974. var id = $('#firstpane .menu-active').attr('id')
  1975. dat.equip_id = id;
  1976. obj.parents('.thresholdCtrl').append('<div class="ctrlLoading"><img src="http://www.nyzhwlw.com/images/loading.gif" width="24">操作中...</div>');
  1977. $.ajax({
  1978. url: 'qxz_timing_mqtt',
  1979. type: 'post',
  1980. data: dat,
  1981. success: function (data) {
  1982. setTimeout(function () {
  1983. obj.next().val(hideVal)
  1984. curinputBtn.attr('disabled', false);
  1985. curinputBtn.parents('.thresholdCtrl').find('.ctrlLoading').html('');
  1986. obj.parent().find('.maxminNum').find('p').eq(0).find('span').html(dat.StartTime)//最大值
  1987. obj.parent().find('.maxminNum').find('p').eq(1).find('span').html(dat.Duration)//最小值
  1988. obj.parents('.thresholdCtrl').find('.ace-switch').prop('checked', 'checked');//开启阈值
  1989. var id = $('#firstpane .menu-active').attr('id')
  1990. loadProject(id);
  1991. }, 5000)
  1992. },
  1993. error: function (type) {
  1994. curinputBtn.parents('.thresholdCtrl').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
  1995. curinputBtn.attr('disabled', false);
  1996. }
  1997. })
  1998. // $('.maxminNum')
  1999. layer.closeAll(); //疯狂模式,关闭所有层
  2000. return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
  2001. });
  2002. }
  2003. , btn2: function (index, layero) {
  2004. $('#Modal').hide()
  2005. //return false 开启该代码可禁止点击该按钮关闭
  2006. }
  2007. });
  2008. });
  2009. }
  2010. $('#starttime').on('blur', function () {
  2011. $(this).val(parseInt($(this).val()))
  2012. })
  2013. $('#Duration').on('blur', function () {
  2014. $(this).val(parseInt($(this).val()))
  2015. })
  2016. // 下发定时开关
  2017. $('#gettimingDiv').on('click', '.ace-switch', function () {
  2018. var _this = this;
  2019. var currVal = $(this).parents('.thresholdCtrl').find('.currVal').val();
  2020. var currWayjson = JSON.parse(currVal);
  2021. var id = $('#firstpane .menu-active').attr('id')
  2022. currWayjson.equip_id = id;
  2023. if (currWayjson.StartTime == '--' || currWayjson.Duration == '--') {
  2024. $(this).parents('.thresholdCtrl').find('.setthresholdBtn').click();
  2025. layer.msg('请先设置定时时间', { icon: 2 })
  2026. return false;
  2027. }
  2028. $(this).parents('.thresholdCtrl').find('.ctrlLoading').remove()
  2029. $(this).attr('disabled', true);
  2030. $(this).parents('.thresholdCtrl').append('<div class="ctrlLoading"><img src="http://www.nyzhwlw.com/images/loading.gif" width="24">操作中...</div>');
  2031. if ($(this).is(":checked")) { //开启
  2032. var oldStatus = 0;
  2033. var currStutas = 1;
  2034. } else { //关闭
  2035. var oldStatus = 1;
  2036. var currStutas = 0;
  2037. currWayjson.StartTime = '255';
  2038. currWayjson.Duration = '32767';
  2039. }
  2040. $.ajax({
  2041. url: 'qxz_timing_mqtt',
  2042. type: 'post',
  2043. data: currWayjson,
  2044. success: function (data) {
  2045. setTimeout(function () {
  2046. $(_this).attr('disabled', false);
  2047. $(_this).parents('.thresholdCtrl').find('.ctrlLoading').html('');
  2048. var id = $('#firstpane .menu-active').attr('id')
  2049. loadProject(id);
  2050. }, 5000)
  2051. },
  2052. error: function (type) {
  2053. $(_this).parents('.thresholdCtrl').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
  2054. $(_this).attr('disabled', false);
  2055. if (oldStatus) {
  2056. $(_this).prop('checked', true);
  2057. } else {
  2058. $(_this).prop('checked', '');
  2059. }
  2060. }
  2061. })
  2062. })
  2063. // 设置要素名称
  2064. function setEleName() {
  2065. var e_id = $('#firstpane .menu-active').attr('id')
  2066. $.ajax({
  2067. url: 'qxz_title_conf',
  2068. type: 'get',
  2069. data: {
  2070. e_id: e_id
  2071. },
  2072. dataType: 'json',
  2073. success: function (data) {
  2074. var dataa = [];
  2075. var len = Object.keys(data.default).length;
  2076. for (var i = 1; i <= len; i++) {
  2077. var key = 'e' + i;
  2078. if (data.default[key]) {
  2079. var detxt = data.default[key].split('#')[0];
  2080. var deunit = data.default[key].split('#')[1];
  2081. if (data.conf[key]) {
  2082. var conftxt = data.conf[key].split('#')[0];
  2083. } else {
  2084. var conftxt = '-';
  2085. }
  2086. dataa.push({
  2087. "ekey": key,
  2088. "name": conftxt,
  2089. "elementName": detxt,
  2090. "unit": deunit
  2091. })
  2092. }
  2093. if (i == len) {
  2094. // console.log(dataa)
  2095. //页面层
  2096. layer.open({
  2097. type: 1,
  2098. title: '修改要素名称',
  2099. area: ['800px', '540px'], //宽高
  2100. content: $('#eleName'),
  2101. skin: 'layui-layer-editName', //样式类名
  2102. success: function (layero, index) {
  2103. layui.use('table', function () {
  2104. var table = layui.table;
  2105. table.render({
  2106. elem: '#eleTable'
  2107. , data: dataa
  2108. , done: function (res, curr, count) {
  2109. $("table").css("width", "100%");
  2110. }
  2111. , limit: 30
  2112. , cols: [[
  2113. { field: 'ekey', width: '25%', align: 'center', title: '通道号' }
  2114. , { field: 'name', width: '35%', align: 'center', title: '<i class="layui-icon">&#xe642;</i>名称', event: 'cellClick' }
  2115. , { field: 'elementName', width: '40%', align: 'center', title: '要素' }
  2116. ]]
  2117. });
  2118. table.on('tool(eleTable)', function (obj) {
  2119. switch (obj.event) {
  2120. case 'cellClick':
  2121. CellClick(this, obj, e_id);
  2122. break;
  2123. };
  2124. });
  2125. });
  2126. },
  2127. cancel: function (index, layero) {
  2128. loadProject(e_id);
  2129. }
  2130. });
  2131. }
  2132. }
  2133. },
  2134. error: function (type) {
  2135. layer.msg('请求失败');
  2136. }
  2137. })
  2138. }
  2139. layui.use(['form'], function () {
  2140. var form = layui.form;
  2141. form.on('switch(equipTypeDemo)', function (obj) {
  2142. var state = obj.elem.checked ? 1 : 0;
  2143. //方法二取数据 (根据索引table.cache里面的行数据)
  2144. var index = obj.othis.parents('tr').attr("data-index");
  2145. datMsg[index].type = state;
  2146. });
  2147. })
  2148. function CellClick(that, obj, e_id) {
  2149. //当前点击字段
  2150. var field = $(that).data("field");
  2151. //判断是否需要添加编辑框
  2152. if (field == "edit") return true;
  2153. //当前行数据
  2154. var data = obj.data;
  2155. //当前单元格的值
  2156. var value = data[field];
  2157. //当前点击td的宽高
  2158. var height = $(that)[0].offsetHeight, width = $(that)[0].offsetWidth;
  2159. //当前点击td的坐标
  2160. var top = $(that).offset().top, left = $(that).offset().left;
  2161. //输入框 这里可以自定义表单内容
  2162. var input = '<input type="text" maxlength=10 class="layui-input" id="' + field + '_input" data-field="' + field + '" style="width:' + width + 'px;height:' + height + 'px">';
  2163. //弹出层
  2164. layer.open({
  2165. type: 1
  2166. , title: false
  2167. , page: true
  2168. , limit: 1
  2169. , closeBtn: 0
  2170. , area: [width + "px", height + "px"]
  2171. , shade: [0.01, '#fff']
  2172. , shadeClose: true
  2173. , content: input //这里content是一个普通的String
  2174. , offset: [top, left]
  2175. , success: function () {
  2176. //使弹出层相对定位
  2177. $(".layui-layer-page").css("position", "absolute")
  2178. //设置输入框的值
  2179. $("#" + field + "_input").val(value);
  2180. $("#" + field + "_input").blur(function () {
  2181. var dat = data;
  2182. var ekey = dat.ekey;
  2183. var conf = $(this).val();
  2184. var unit = data.unit;
  2185. $.ajax({
  2186. url: 'qxz_title_conf',
  2187. type: 'post',
  2188. data: {
  2189. e_id: e_id,
  2190. ekey: ekey,
  2191. conf: conf + '#' + unit
  2192. },
  2193. dataType: 'json',
  2194. success: function (data) {
  2195. if (data == 0) {
  2196. //同步更新缓存对应的值
  2197. dat[field] = conf;
  2198. obj.update(dat);
  2199. layer.msg('修改成功')
  2200. }
  2201. },
  2202. error: function (type) {
  2203. layer.msg('修改失败')
  2204. }
  2205. })
  2206. })
  2207. }
  2208. });
  2209. }
  2210. function thresholdClick(that, obj, e_id, form) {
  2211. //当前点击字段
  2212. var field = $(that).data("field");
  2213. // console.log(obj)
  2214. //判断是否需要添加编辑框
  2215. if (field == "edit") return true;
  2216. //当前行数据
  2217. var data = obj.data;
  2218. //当前单元格的值
  2219. var value = data[field];
  2220. //当前点击td的宽高
  2221. var height = $(that)[0].offsetHeight, width = $(that)[0].offsetWidth;
  2222. //当前点击td的坐标
  2223. var top = $(that).offset().top, left = $(that).offset().left;
  2224. //输入框 这里可以自定义表单内容
  2225. var input = '<input type="number" maxlength=10 autofocus="autofocus" class="layui-input" id="' + field + '_input" data-field="' + field + '" style="width:' + width + 'px;height:' + height + 'px">';
  2226. //弹出层
  2227. layer.open({
  2228. type: 1
  2229. , title: false
  2230. , page: true
  2231. , limit: 1
  2232. , closeBtn: 0
  2233. , area: [width + "px", height + "px"]
  2234. , shade: [0.01, '#fff']
  2235. , shadeClose: true
  2236. , content: input //这里content是一个普通的String
  2237. , offset: [top, left]
  2238. , success: function () {
  2239. //使弹出层相对定位
  2240. $(".layui-layer-page").css("position", "absolute")
  2241. //设置输入框的值
  2242. $("#" + field + "_input").val(value);
  2243. $("#" + field + "_input").focus()
  2244. $("#" + field + "_input").blur(function () {
  2245. var dat = data;
  2246. var ekey = dat.ekey;
  2247. var conf = $(this).val();
  2248. var unit = data.unit;
  2249. dat[field] = conf || "";
  2250. obj.update(dat);
  2251. form.render()
  2252. })
  2253. }
  2254. });
  2255. }
  2256. // 查看详情
  2257. function historyData(){
  2258. var id = $('#firstpane .menu-active').attr('id')
  2259. window.location.href = 'qxz_report?id='+id
  2260. }
  2261. </script>
  2262. </body>
  2263. </html>