首頁 探索 說明
註冊 登入
chenzhiguang
/
scene_wisdom
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

0511

tremble 4 年之前
父節點
609b750ed4
當前提交
e091cc63fc
共有 5 個文件被更改，包括 253 次插入 和 6 次删除
統一視圖 顯示文件統計
  1. 112 0
      css/hardware.css
  2. 34 1
      index.html
  3. 8 0
      js/lib/hls.min.js
  4. 1 1
      js/selectHardware.js
  5. 98 4
      js/showHardware.js

+ 112 - 0
css/hardware.css
查看文件 

@@ -48,4 +48,116 @@
 
 #temperature{
 
 #temperature{
 
   width: 360px;
 
   width: 360px;
 
   height: 400px;
 
   height: 400px;
 
+}
 
+
 
+.ac-con{
 
+  background: #363F51;
 
+  position: relative;
 
+  width: 360px;
 
+  height: 330px;
 
+  color: #24E8CF;
 
+  padding-top: 20px;
 
+  text-align: center;
 
+  border-radius: 5px;
 
+}
 
+#air-conditioner{
 
+  width: 50%;
 
+  height: 50%;
 
+  margin: 0 auto;
 
+}
 
+
 
+.ac-title{
 
+  text-align: center;
 
+  margin-bottom: 10px;
 
+}
 
+.ac-con .ac-btn{
 
+  color: #fff;
 
+  background: #2EC2AE;
 
+  display: inline-block;
 
+  padding: 0 10px;
 
+  line-height: 36px;
 
+  height: 36px;
 
+  border-radius: 5px;
 
+  cursor: pointer;
 
+}
 
+
 
+.ac-left{
 
+  position: absolute;
 
+  top: 46px;
 
+  left: 12px;
 
+}
 
+
 
+.ac-left li{
 
+  margin: 16px 0;
 
+}
 
+
 
+.ac-left li i{
 
+  font-size: 24px;
 
+}
 
+
 
+.ac-con .iconquxiao{
 
+  position: absolute;
 
+  top: 24px;
 
+  right: 20px;
 
+  color: #F5F5F5;
 
+  font-size: 10px;
 
+  cursor: pointer;
 
+}
 
+.ac-con .ac-close{
 
+  position: absolute;
 
+  top: 64px;
 
+  right: 20px;
 
+  color: #fff;
 
+  font-size: 10px;
 
+  cursor: pointer;
 
+  min-width: 50px;
 
+}
 
+
 
+
 
+
 
+.btm-con{
 
+  margin-top: -15px;
 
+}
 
+
 
+
 
+.btm-con > div{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  width: calc(100% - 24px);
 
+  margin: 0 auto;
 
+}
 
+
 
+.btm-con >div .ac-btn{
 
+  width: 50%;
 
+  margin-top: 12px;
 
+}
 
+.btm-con >div .ac-btn:last-of-type{
 
+  margin-left: 12px;
 
+}
 
+
 
+
 
+.btm-con >div:first-of-type span{
 
+  color: #fff;
 
+  display: inline-block;
 
+}
 
+.btm-con >div:first-of-type span:last-of-type{
 
+  margin-left: 12px;
 
+}
 
+
 
+
 
+.btm-con >div:first-of-type i{
 
+  color: #2EC2AE;
 
+}
 
+.btm-con .minbtn .ac-btn{
 
+  max-width: 100px;
 
+}
 
+
 
+.m-con{
 
+  width: 600px;
 
+}
 
+
 
+#monitor{
 
+  width: 100%;
 
+  background: #262729;
 
 }
 
 }

+ 34 - 1
index.html
查看文件 

@@ -16,6 +16,7 @@
 
     <link rel="stylesheet" href="./css/main.css?v=2.25">
 
     <link rel="stylesheet" href="./css/main.css?v=2.25">
 
     <link rel="stylesheet" type="text/css" href="./js/GridManager_2.15.1/css/gm.css"/>
 
     <link rel="stylesheet" type="text/css" href="./js/GridManager_2.15.1/css/gm.css"/>
 
     <link rel="stylesheet" href="./css/hardware.css">
 
     <link rel="stylesheet" href="./css/hardware.css">
 
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2539811_gi2x21gsvse.css">
 
 
 
     <script>
 
     <script>
 
         var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
 
         var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
 
@@ -51,6 +52,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
+
 
     <div id="hot"> 
     <div id="hot"> 
     </div>
 
     </div>
 
     <div id="hotPannel">
 
     <div id="hotPannel">
 
@@ -66,7 +68,36 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <div id="temperature" class='hide'>
 
         <div id="temperature" class='hide'>
 
-        
+        </div>
 
+        <div class="ac-con">
 
+            <div class="ac-title">二楼-大会议室-04-空调</div>
 
+            <i class="iconfont iconquxiao"></i>
 
+            <span class="ac-btn ac-close">关</span>
 
+            <div id="air-conditioner"></div>
 
+            <ul class="ac-left">
 
+                <li><i class="iconfont iconfengsu1"></i></li>
 
+                <li><i class="iconfont iconfengsu31"></i></li>
 
+                <li><i class="iconfont iconfengsu2"></i></li>
 
+                <li><i class="iconfont iconfengsu11"></i></li>
 
+                <li><i class="iconfont iconfengsu"></i></li>
 
+            </ul>
 
+            <div class="btm-con">
 
+                <div>
 
+                    <span><i class="iconfont iconfengsu3"></i>风速</span>
 
+                    <span><i class="iconfont iconfengxiang"></i>风向上</span>
 
+                </div>
 
+                <div class="minbtn">
 
+                    <span class="ac-btn"><i class="iconfont iconjianqu"></i></span>
 
+                    <span class="ac-btn"><i class="iconfont iconjia"></i></span>
 
+                </div>
 
+                <div>
 
+                    <span class="ac-btn">风向</span>
 
+                    <span class="ac-btn">模式</span>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="m-con">
 
+            <video id="monitor" controls></video>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <div id="popup">
 
     <div id="popup">
 
@@ -837,6 +868,7 @@
 
     </script>
 
     </script>
 
     <script src="./js/lib/jquery-2.1.1.min.js" class="build keep"></script>
 
     <script src="./js/lib/jquery-2.1.1.min.js" class="build keep"></script>
 
     <script src="./js/lib/player-0.0.12.min.js" class="build keep"></script>
 
     <script src="./js/lib/player-0.0.12.min.js" class="build keep"></script>
 
+    <script src="./js/lib/hls.min.js"></script>
 
     <script src="./js/echarts.min.js"></script>
 
     <script src="./js/echarts.min.js"></script>
 
 
 
     <script src="./js/Tween.js"></script>
 
     <script src="./js/Tween.js"></script>
 
@@ -847,6 +879,7 @@
 
     <script src="./js/overlay.js"></script>
 
     <script src="./js/overlay.js"></script>
 
     <script src="./js/main_2020_show.js"></script>
 
     <script src="./js/main_2020_show.js"></script>
 
     <script type="text/javascript" src="./js/GridManager_2.15.1/js/gm.js"></script>
 
     <script type="text/javascript" src="./js/GridManager_2.15.1/js/gm.js"></script>
 
+    
     <script src="./js/showHardware.js"></script>
 
     <script src="./js/showHardware.js"></script>
 
 
 
 </body>
 
 </body>

文件差異過大導致無法顯示
+ 8 - 0
js/lib/hls.min.js


+ 1 - 1
js/selectHardware.js
查看文件 

@@ -96,7 +96,7 @@ $(function () {
 
           "pageNum": params.cPage,
 
           "pageNum": params.cPage,
 
           "pageSize": params.pSize,
 
           "pageSize": params.pSize,
 
           "searchKey": "",
 
           "searchKey": "",
 
-          "userId": ""
 
+          "userId": "77547f7af360c5d8e14932866b844d53"
 
         }),
 
         }),
 
         headers: {
 
         headers: {
 
           "Content-Type": "application/json",
 
           "Content-Type": "application/json",

+ 98 - 4
js/showHardware.js
查看文件 

@@ -81,7 +81,7 @@ $(function () {
 
           "pageNum": params.cPage,
 
           "pageNum": params.cPage,
 
           "pageSize": params.pSize,
 
           "pageSize": params.pSize,
 
           "searchKey": "",
 
           "searchKey": "",
 
-          "userId": ""
 
+          "userId": "77547f7af360c5d8e14932866b844d53"
 
         }),
 
         }),
 
         headers: {
 
         headers: {
 
           "Content-Type": "application/json",
 
           "Content-Type": "application/json",
 
@@ -235,9 +235,103 @@ $(function () {
 
     option && myChart.setOption(option, true);
 
     option && myChart.setOption(option, true);
 
   }
 
   }
 
 
 
-  loadTemperature({
 
-    id:"temperature",//dom Id
 
-    val:50 //度数
 
+  window.loadAirConditioner = function (params={}) {
 
+    let {id="air-conditioner",val,type} = params
 
+       //加载温度计
 
+    var chartDom = document.getElementById(id);
 
+    var myChart = echarts.init(chartDom);
 
+    
+    
+    let option = {
 
+      series: [
 
+      {
 
+        name: "Indicator",
 
+        type: "gauge",
 
+        data: [{
 
+          value: val,
 
+          name:type,
 
+          itemStyle:{
 
+            color: "#23EACF",
 
+            fontSize:14
 
+          },
 
+          detail: {
 
+            offsetCenter: ['0%', '0'],
 
+            formatter: "{value}℃",
 
+            color: "#fff",
 
+            fontSize:22
 
+          },
 
+          title: {
 
+            offsetCenter: ['0%', '26%'],
 
+            color: "#fff",
 
+            fontSize:16
 
+          }
 
+        }],
 
+        radius: "100%",
 
+        startAngle: 220,
 
+        endAngle: -40,
 
+        progress: {
 
+          show: true,
 
+          roundCap:true,
 
+          itemStyle:{
 
+            color: "#23EACF"
 
+          }
 
+        },
 
+        axisLine: {
 
+          show: true,
 
+          roundCap:true,
 
+          lineStyle:{
 
+            color: [[1, '#ffffff']]
 
+          }
 
+        },
 
+        axisTick:{
 
+          show: false
 
+        },
 
+        splitLine: {
 
+          show: false
 
+        },
 
+        axisLabel: {
 
+          show: false,
 
+        },
 
+        pointer: {
 
+          show: false,
 
+        }
 
+      }
 
+    ]
 
+    }
 
+    option && myChart.setOption(option, true);
 
+  }
 
+
 
+  window.loadMonitor = function (params={}) {
 
+    let {id,url} = params 
+    console.log(id,url);
 
+    var video = document.getElementById(id);
 
+      if (Hls.isSupported()) {
 
+        var hls = new Hls();
 
+        hls.loadSource(url||'http://14.215.216.123:18080/rtp/00A153DF/hls.m3u8');
 
+        hls.attachMedia(video);
 
+        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
 
+          video.play();
 
+        });
 
+      }
 
+      // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 
+      // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 
+      // This is using the built-in support of the plain video element, without using hls.js.
 
+      else if (video.canPlayType('application/vnd.apple.mpegurl')) {
 
+        video.src = url||'http://14.215.216.123:18080/rtp/00A153DF/hls.m3u8';
 
+        video.addEventListener('canplay', function () {
 
+          video.play();
 
+        });
 
+      }
 
+  }
 
+
 
+  loadMonitor({
 
+      id:"monitor",
 
+      url:'http://14.215.216.123:18080/rtp/00A153DF/hls.m3u8'
 
   })
 
   })
 
 
 
+  loadAirConditioner({
 
+    id:"air-conditioner",
 
+    val:50,
 
+    type:'冷风'
 
+  })
 
 });
 
 });