设备交互

src/components/security/device/securityDevice.vue

@@ -52,6 +52,13 @@ export default {
           name: '空调设备#1',
           online: true,
           type: 'air',
+          tm: 24,
+        },
+        {
+          name: '空调设备#2',
+          online: true,
+          type: 'air',
+          tm: 26,
         },
 
       ],

src/components/security/device/securityDeviceItem.vue

@@ -22,7 +22,33 @@
         <div class="securityDeviceItem-line">
           <span class="securityDeviceItem-line-label">功能交互：</span>
           <div style="">
-            <a-switch :style="{backgroundColor: item.online?'#3CC2AC':'#b9bcbf'}" size="small" v-model="item.online" @change="changeStatus"/>
+            <a-switch :style="{backgroundColor: item.online?'#3CC2AC':'#b9bcbf'}" class="anticon" size="small" v-model="item.online" @change="changeStatus"/>
+            <a-tooltip placement="bottom" title="实时摄像" v-if="item.type!='air'">
+              <span class="anticon"><a-icon type="camera" /></span>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="录像" v-if="item.type!='air'">
+              <span class="anticon"><a-icon type="video-camera" /></span>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="安全" v-if="item.type=='door'">
+              <span class="anticon"><a-icon type="security-scan" /></span>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="电量" v-if="item.type=='door'">
+              <span class="anticon" style="vertical-align: text-top"><i-icon-park-outline-battery-working-one /></span>
+            </a-tooltip>
+
+            <a-tooltip placement="bottom" title="吹风" v-if="item.type=='air'">
+              <span class="anticon" style="vertical-align: middle;margin: 0 3px"><i-icon-park-outline-air-conditioning /></span>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="模式" v-if="item.type=='air'">
+              <span class="anticon" style="vertical-align: middle;margin: 0 3px"><i-icon-park-outline-sun-one /></span>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="风速" v-if="item.type=='air'">
+              <span class="anticon" style=";margin: 0 3px"><a-avatar shape="square" :size="20" :src="requireImg('security/icon/fengsu.png')"></a-avatar></span>
+            </a-tooltip>
+            <a-tooltip placement="bottom" title="温度" v-if="item.type=='air'">
+              <span class="anticon" style="margin-right: 0"><img width="12px" :src="requireImg('security/icon/wenduji.png')" /></span>
+              <a-input-number size="small" style="width: 65px;background-color: transparent;border: none" v-model="item.tm" :min="18" :max="30" :formatter="value => `${value}°C`"></a-input-number>
+            </a-tooltip>
           </div>
         </div>
       </a-col>
@@ -74,4 +100,9 @@ export default {
     }
   }
 }
+.anticon {
+  display: inline-block;
+  margin: 0 2px;
+  vertical-align: middle;
+}
 </style>