updata

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;
 }
 

index.html

@@ -77,7 +77,7 @@
         </div>
         <div id="temperature" class='hide'>
         </div>
-        <div class="ac-con">
+        <!-- <div class="ac-con">
             <div class="ac-body">
                 <div class="ac-title">二楼-大会议室-04-空调</div>
                 <i class="iconfont iconquxiao"></i>
@@ -124,7 +124,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div> -->
         <div class="m-con">
             <i class="iconfont iconquxiao"></i>
             <video id="monitor" controls></video>
@@ -873,7 +873,54 @@
         <div class="hard-body">
             <table id="gridtb"></table>
         </div>
-        
+       <div class="ac-con">
+            <div class="ac-body">
+                <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 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 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>
+                        <span class="ac-btn"><i class="iconfont iconjia"></i></span>
+                    </div>
+                    <div>
+                        <span class="ac-btn" id="fengxiang">风向</span>
+                        <span class="ac-btn" id="moshi">模式</span>
+                    </div>
+                </div>
+                <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">
+                    <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>
+                    <span class="ac-btn fixed right"><i class="iconfont iconbofang"></i></span>
+                    <div>
+                        <span class="ac-btn">运行</span>
+                        <span class="ac-btn">停止</span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <script>
         if(number == "TEST"){

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();
   }
@@ -253,12 +253,30 @@ $(function () {
   }
 
   window.loadAirConditioner = function (params={}) {
-    let {id="air-conditioner",val,type} = params
-       //加载温度计
+    let {id="air-conditioner",val,type,ifOn,windSpeed,fanPos,name,fanState} = params
+
+    //开关
+    $('.ac-close').text(ifOn?'开':'关')
+    $('.ac-close').addClass('activeTxt')
+
+    //名字
+    $('.ac-title').text(name)
+
+    //风向
+    $('#fxDom').text('风向' + fanPos)
+
+    //风速
+    $('#fsDom').text(windSpeed)
+    $(`.ac-left li[data-name='${windSpeed}']`).addClass("active").siblings().removeClass("active");
+    
+
+    //模式
+    $(`#airmode span[data-name='${type}']`).addClass("activeTxt").siblings().removeClass("activeTxt");
+
+      //加载温度计
     var chartDom = document.getElementById(id);
     var myChart = echarts.init(chartDom);
     
-    
     let option = {
       series: [
       {
@@ -351,9 +369,15 @@ $(function () {
     val:50,
     type:'冷风'
   }) */
+
   loadAirConditioner({
-    id:"air-conditioner",
+    name:'二楼-大会议室-04-空调',
     val:50,
-    type:'冷风'
+    id:"air-conditioner",
+    type:'冷风',
+    ifOn:true,//开关机
+    windSpeed : "低风",//风速
+    fanPos :  "上",//摆叶位置
+    fanState:  true//摆叶状态
   }) 
 });