data.html 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. {%set loadUrl = data['url']['data'] + '&ajax=1' %}
  2. {% if data['ajax'] == False %}
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. {%include '../inc/header.html'%}
  7. {% if 'camera' in data and data['camera'] %}
  8. <link href="{{static_url('pc/lib/player/video-js.min.css')}}" rel="stylesheet">
  9. {% end %}
  10. <style>
  11. .btn-switch {
  12. cursor: pointer;
  13. }
  14. .button dt {
  15. margin-top: -9px;
  16. padding-bottom: 9px;
  17. }
  18. .button .btn-switch {
  19. border-radius: 0px;
  20. height:32px;
  21. width: 40px;
  22. font-size:12px;
  23. cursor: pointer;
  24. outline:none;
  25. margin-left:-9px;
  26. }
  27. .button .open {
  28. color:white;
  29. }
  30. .button .disabled {
  31. color:#bababa;
  32. }
  33. .button .loading {
  34. background-image: url(data:image/gif;base64,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);
  35. background-position: 50%;
  36. background-repeat: no-repeat;
  37. background-size: 15px 15px;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div class="wrapper clearfix">
  43. {%include '../inc/nav.html'%}
  44. <div class="right-cont">
  45. {%include '../inc/top.html'%}
  46. <div class="main">
  47. {%include '../inc/msg.html'%}
  48. {%include 'inc/menu.html'%}
  49. {% if 'stat' in data and data['stat'] %}
  50. <div>
  51. <div class="pannel" name="chart" id="chart">
  52. <h2>今日(<span class="name">{{data['stat']['name']}}</span>)数据趋势</h2>
  53. <div class="box" id="main" style="width: 100%;height:405px;"></div>
  54. </div>
  55. </div>
  56. {% end %}
  57. {% if 'camera' in data and data['camera'] %}
  58. {% for k,v in enumerate(data['camera']) %}
  59. <div class="{% if k%2 == 0 %}left{% else %}right{% end %} w-half">
  60. <div class="pannel">
  61. <h2>{{v['name']}}</h2>
  62. <video id="player-{{k}}" class="player video-js vjs-default-skin" controls>
  63. <source
  64. src="{{v['value']}}"
  65. type="application/x-mpegURL">
  66. </video>
  67. </div>
  68. </div>
  69. {% end %}
  70. {% end %}
  71. <div id="loadMain">
  72. {% end %}
  73. {% if 'pic' in data and data['pic'] %}
  74. {% if 'camera' in data and data['camera'] %}
  75. {%set index = 0 %}
  76. {% for v in data['camera'] %}
  77. {%set index = index+1 %}
  78. {% end %}
  79. {% else %}
  80. {%set index = 0 %}
  81. {% end %}
  82. {% for k,v in enumerate(data['pic']) %}
  83. <div class="{% if index%2 == 0 %}left{% else %}right{% end %} w-half">
  84. <div class="pannel">
  85. <h2>{{v['name']}}</h2>
  86. <div class="box">
  87. <a href="{{data['url']['pic']}}&device={{v['id']}}"><img src="{{v['value']}}" width="100%" style="display: block;" />
  88. </div>
  89. </div>
  90. </div>
  91. {%set index = index+1 %}
  92. {% end %}
  93. {% end %}
  94. {%include 'inc/data.html'%}
  95. {% if data['ajax'] == False %}
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. {%include '../inc/footer.html'%}
  101. {%include '../inc/script.html'%}
  102. {% end %}
  103. {% if 'stat' not in data %}
  104. {% else %}
  105. {% if data['ajax'] == False %}
  106. {%include 'chart/simple.html'%}
  107. {% else %}
  108. {%include 'chart/ajax.html'%}
  109. {% end %}
  110. {% end %}
  111. {% if data['ajax'] == False %}
  112. {%include 'inc/load.html'%}
  113. </body>
  114. </html>
  115. {% end %}