Prechádzať zdrojové kódy

Merge branch 'master' of http://192.168.0.115:3000/chenzhiguang/scene_wisdom

# Conflicts:
#	index.html
xzw 4 rokov pred
rodič
commit
5f9619b7c3
3 zmenil súbory, kde vykonal 97 pridanie a 25 odobranie
  1. 27 1
      css/hardware.css
  2. 15 14
      index.html
  3. 55 10
      js/showHardware.js

+ 27 - 1
css/hardware.css

@@ -89,6 +89,10 @@
   cursor: pointer;
 }
 
+.activeTxt{
+  color: #006558!important;
+}
+
 .ac-left{
   position: absolute;
   top: 46px;
@@ -99,10 +103,32 @@
   margin: 16px 0;
 }
 
+.ac-left li:not(:first-of-type),.ac-left li:not(:last-of-type){
+  cursor: pointer;
+}
+
+
+
 .ac-left li i{
   font-size: 24px;
+  color: #fff;
+}
+
+.ac-left li .iconfengsu1{
+  color: #2EC2AE;
+}
+
+
+.ac-left .active i{
+  color: #2EC2AE;
 }
 
+.ac-left li .iconfengsu{
+  font-size: 18px;
+}
+
+
+
 .ac-con .iconquxiao{
   position: absolute;
   top: 24px;
@@ -149,7 +175,7 @@
   color: #fff;
   display: inline-block;
 }
-.btm-con >div:first-of-type span:last-of-type{
+.btm-con >div:first-of-type > span:last-of-type{
   margin-left: 12px;
 }
 

+ 15 - 14
index.html

@@ -85,15 +85,15 @@
                 <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 data-name="高风"><i class="iconfont iconfengsu31"></i></li>
+                    <li data-name="中风"><i class="iconfont iconfengsu2"></i></li>
+                    <li data-name="低风"><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>
+                        <span><i class="iconfont iconfengsu3"></i><span id="fsDom">风速</span></span>
+                        <span><i class="iconfont iconfengxiang"></i><span id="fxDom">风向上</span></span>
                     </div>
                     <div class="minbtn">
                         <span class="ac-btn"><i class="iconfont iconjianqu"></i></span>
@@ -104,16 +104,17 @@
                         <span class="ac-btn" id="moshi">模式</span>
                     </div>
                 </div>
-                <div class="oper-con hide">
-                    <div>
-                        <span class="ac-btn">自动</span>
-                        <span class="ac-btn">除湿</span>
-                        <span class="ac-btn">冷风</span>
-                        <span class="ac-btn">送风</span>
-                        <span class="ac-btn">暖风</span>
+
+                <div class="oper-con">
+                    <div id="airmode">
+                        <span class="ac-btn" data-name="自动">自动</span>
+                        <span class="ac-btn" data-name="除湿">除湿</span>
+                        <span class="ac-btn" data-name="冷风">冷风</span>
+                        <span class="ac-btn" data-name="送风">送风</span>
+                        <span class="ac-btn" data-name="暖风">暖风</span>
                     </div>
                 </div>
-                <div class="air-con hide">
+                <div class="air-con">
                     <span class="ac-btn fixed up"><i class="iconfont iconbofang"></i></span>
                     <span class="ac-btn fixed down"><i class="iconfont iconbofang"></i></span>
                     <span class="ac-btn fixed left"><i class="iconfont iconbofang"></i></span>
@@ -873,7 +874,7 @@
         <div class="hard-body">
             <table id="gridtb"></table>
         </div>
-        
+       
     </div>
     <script>
         if(number == "TEST"){

+ 55 - 10
js/showHardware.js

@@ -72,13 +72,13 @@ $(function () {
   )
 
   
-  $("#fengxiang").click(function () {
+  $("#moshi").click(function () {
       $(".air-con").hide();
       $(".oper-con").fadeToggle();
     }
   )
 
-  $("#moshi").click(function () {
+  $("#fengxiang").click(function () {
     $(".oper-con").hide();
     $(".air-con").fadeToggle();
   }
@@ -255,12 +255,51 @@ $(function () {
   }
 
   window.loadAirConditioner = function (params={}) {
-    let {id="air-conditioner",val,type} = params
-       //加载温度计
+    let {id="air-conditioner",
+    val='unset',
+    type='unset',
+    ifOn='unset',
+    windSpeed='unset',
+    fanPos='unset',
+    name='unset',
+    fanState='unset'} = params
+
+    //开关
+    if (ifOn!='unset') {
+      $('.ac-close').text(ifOn?'开':'关')
+      $('.ac-close').addClass('activeTxt')
+    }
+
+
+    //名字
+    if (name!='unset') {
+      $('.ac-title').text(name)
+    }
+
+    //风向
+    if (fanPos!='unset') {
+      $('#fxDom').text('风向' + fanPos)
+    }
+
+    //风速
+    if (windSpeed!='unset') {
+      $('#fsDom').text(windSpeed)
+      $(`.ac-left li[data-name='${windSpeed}']`).addClass("active").siblings().removeClass("active");
+    }
+
+
+    //模式
+    if (type!='unset') {
+      $(`#airmode span[data-name='${type}']`).addClass("activeTxt").siblings().removeClass("activeTxt");
+    }
+
+    if (val=='unset') {
+      return
+    }
+    //加载温度计
     var chartDom = document.getElementById(id);
     var myChart = echarts.init(chartDom);
     
-    
     let option = {
       series: [
       {
@@ -353,9 +392,15 @@ $(function () {
     val:50,
     type:'冷风'
   }) */
-  loadAirConditioner({
-    id:"air-conditioner",
-    val:50,
-    type:'冷风'
-  }) 
+
+  // loadAirConditioner({
+  //   name:'二楼-大会议室-04-空调',
+  //   val:50,
+  //   id:"air-conditioner",
+  //   type:'冷风',
+  //   ifOn:true,//开关机
+  //   windSpeed : "低风",//风速
+  //   fanPos :  "上",//摆叶位置
+  //   fanState:  true//摆叶状态
+  // }) 
 });