智能照明和智能饮水机同步智能空调逻辑。

src/components/scene/energy/common/deviceCardLight.vue

@@ -73,6 +73,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
+* {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
 .deviceCardAir {
   width: 100%;
   height: 10rem;
@@ -97,7 +102,7 @@ export default {
     font-size: 23px;
   }
   .anticon {
-    //padding: 6px;
+    cursor: pointer;
   }
 }
 </style>

src/components/scene/energy/common/deviceCardWater.vue

@@ -1,10 +1,22 @@
 <template>
-  <div class="deviceCardAir" :style="{backgroundColor: color}">
-
+  <div
+    class="deviceCardAir"
+    :style="{
+      backgroundColor: color,
+      border: activeList.length > 0 && activeList.indexOf(item.id) != -1 ? '1px solid #000' : '1px solid #00000000',
+      boxShadow:
+        activeList.length > 0 && activeList.indexOf(item.id) != -1 ? '0 1px 2px ' + color : '0 1px 2px rgba(0, 0, 0, 0.15)'
+    }"
+    @click="domClick(item.id)"
+  >
     <div class="deviceCardAir-top">
       <span>#{{ item.id }}</span>
-      <span @click="toggle(item)" class="anticon" style="float: right;border-radius: 15px;cursor: pointer;padding: 6px 8px 7px;margin-right: 15px">
-        <a-icon type="poweroff"  />
+      <span
+        @click.stop="toggle(item)"
+        class="anticon"
+        style="float: right;border-radius: 15px;cursor: pointer;padding: 6px 8px 7px;margin-right: 15px"
+      >
+        <a-icon type="poweroff" />
       </span>
     </div>
 
@@ -12,7 +24,10 @@
       <a-row>
         <a-col :span="8">
           <div style="height: 8px"></div>
-          <div :style="{backgroundColor: item.online?'#2eb8e6':'#bebebe'}" style="font-size: 14px;text-align: center;width: 60px;padding: 3px 0;vertical-align: top;">
+          <div
+            :style="{ backgroundColor: item.online ? '#2eb8e6' : '#bebebe' }"
+            style="font-size: 14px;text-align: center;width: 60px;padding: 3px 0;vertical-align: top;"
+          >
             <div>净水量</div>
             <div v-if="item.online && item.waterNum">{{ item.waterNum }}m²</div>
             <div v-else>-</div>
@@ -21,11 +36,11 @@
         <a-col :span="8"></a-col>
         <a-col :span="8">
           <div>
-            <div v-if="item.online && item.tm">{{ item.tm + '℃' }}</div>
+            <div v-if="item.online && item.tm">{{ item.tm + "℃" }}</div>
             <div v-else>-</div>
             <div>
-              <span v-if="item.online && item.status=='1'">加水中</span>
-              <span v-if="item.online && item.status=='2'">保温中</span>
+              <span v-if="item.online && item.status == '1'">加水中</span>
+              <span v-if="item.online && item.status == '2'">保温中</span>
             </div>
           </div>
         </a-col>
@@ -34,7 +49,9 @@
       <!--  {{ item.name }}-->
       <!--</span>-->
     </div>
-
+    <div class="deviceCardAir-setting">
+      <span class="anticon" @click.stop="click"> <a-icon type="setting" /> </span>
+    </div>
   </div>
 </template>
 
@@ -42,36 +59,42 @@
 export default {
   data() {
     return {
-      color: '',
-    }
+      color: ""
+    };
   },
   props: {
     item: Object,
-    toggle: Function
+    click: Function,
+    activeList: Array,
+    toggle: Function,
+    domClick: Function
   },
   watch: {
-    "item.online": function (val) {
+    "item.online": function(val) {
       if (this.item.online) {
-        this.color='#2ea8e5';
+        this.color = "#2ea8e5";
       } else {
-        this.color='#bebebe'
+        this.color = "#bebebe";
       }
-    },
+    }
   },
   mounted() {
     if (this.item.online) {
-      this.color='#2ea8e5';
+      this.color = "#2ea8e5";
     } else {
-      this.color='#bebebe'
+      this.color = "#bebebe";
     }
   },
-  methods: {
-
-  }
-}
+  methods: {}
+};
 </script>
 
 <style lang="less" scoped>
+* {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
 .deviceCardAir {
   width: 100%;
   height: 10rem;
@@ -82,6 +105,7 @@ export default {
   background-repeat: no-repeat;
   background-position: 47% 70%;
   background-size: 25%;
+  position: relative;
   .deviceCardAir-top {
     padding-top: 14px;
     padding-left: 20px;
@@ -95,9 +119,16 @@ export default {
     margin-left: 18px;
     font-size: 23px;
   }
+
+  .deviceCardAir-setting {
+    position: absolute;
+    bottom: 14px;
+    left: 20px;
+    font-size: 23px;
+    cursor: pointer;
+  }
   .anticon {
     //padding: 6px;
   }
-
 }
-</style>
+</style>

src/components/scene/energy/sceneEnergyAircondition/sceneWaterCard.vue

@@ -33,16 +33,21 @@
     <div class="sceneCard-control">
       <div style="display: inline-block;width: 50%;text-align: left">
         <a-space>
-          <a-popconfirm title="确定要执行吗?" ok-text="是" cancel-text="否" @confirm="allPowerOff">
-            <a-button style="font-size: 12px" size="small"><a-icon type="poweroff" />全开</a-button>
+          <a-popconfirm title="确定要执行吗?" ok-text="是" cancel-text="否" @confirm="allPowerOn">
+            <a-button style="font-size: 12px" size="small"
+              ><a-icon type="poweroff" />{{ selectedRowKeys.length > 0 ? "选中" : "" }}全开</a-button
+            >
           </a-popconfirm>
           <a-popconfirm title="确定要执行吗?" ok-text="是" cancel-text="否" @confirm="allPowerOff">
-            <a-button style="font-size: 12px" size="small" @click="allPowerOn"><a-icon type="poweroff" />全关</a-button>
+            <a-button style="font-size: 12px" size="small"
+              ><a-icon type="poweroff" />{{ selectedRowKeys.length > 0 ? "选中" : "" }}全关</a-button
+            >
           </a-popconfirm>
           <a-button
             type="primary"
             size="small"
             style="font-size: 12px"
+            :disabled="selectedRowKeys.length == 0"
             @click="
               () => {
                 this.showBatchCL = true;
@@ -73,13 +78,17 @@
 
       <a-alert type="success" show-icon v-if="selectedRowKeys.length > 0" closeText="取消选择" @close="clearSelectRow">
         <template #message>
-          已选择{{ selectedRowKeys.length }}台设备
+          已选择<span style="font-size: 16px;font-weight: bold;color:#19b955;margin: 0 5px;">{{ selectedRowKeys.length }}</span
+          >台设备,设备总计:<span style="font-size: 16px;font-weight: bold;color:#000;margin: 0 5px;">{{
+            floorsDevicesAll()
+          }}</span
+          >台。
         </template>
       </a-alert>
     </div>
 
     <div class="airContainer">
-      <div class="airContainer-left">
+      <!-- <div class="airContainer-left">
         <div class="deviceFloorIndex">
           <a-input-search placeholder="请输入楼层"></a-input-search>
           <a-anchor :getContainer="getContainer" :target-offset="100" style="margin-top: 12px" @change="floorChange">
@@ -105,7 +114,7 @@
             </div>
           </a-anchor>
         </div>
-      </div>
+      </div> -->
       <div class="airContainer-right" ref="airContainerRight">
         <template v-for="item in floors">
           <template v-if="showCard">
@@ -116,7 +125,13 @@
               <div style="padding: 0 15px">
                 <a-row :gutter="[30, 12]">
                   <a-col v-for="device in item.devices" :key="device.id" :span="6">
-                    <deviceCardWater :click="handleCardClick" :item="device" :toggle="toggleOnline" />
+                    <deviceCardWater
+                      :click="handleCardClick"
+                      :item="device"
+                      :toggle="toggleOnline"
+                      :domClick="domClick"
+                      :activeList="selectedRowKeys"
+                    />
                   </a-col>
                 </a-row>
               </div>
@@ -545,12 +560,19 @@ export default {
     },
     handleOk() {
       this.showBatchCL = false;
-      this.$message.success("设置成功");
+      // this.$message.success("设置成功");
     },
     handleCardClick() {
       this.showBatchCL = true;
       this.formData = {};
     },
+    domClick(id) {
+      if (this.selectedRowKeys.indexOf(id) != -1) {
+        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(id), 1);
+      } else {
+        this.selectedRowKeys.push(id);
+      }
+    },
     search() {
       let objarr = JSON.parse(JSON.stringify(this.oriFloors));
       let app = this;
@@ -586,32 +608,49 @@ export default {
     allPowerOn() {
       let app = this;
       this.$store.loadingStore().open();
+      let that = this;
       setTimeout(function() {
         app.floors.forEach(item => {
           if (item.devices) {
             item.devices.forEach(i => {
-              i.online = false;
+              if (!that.selectedRowKeys || that.selectedRowKeys.length == 0 || that.selectedRowKeys.indexOf(i.id) != -1) {
+                i.online = true;
+              }
             });
           }
         });
         app.$store.loadingStore().close();
         app.$message.success("执行成功");
-      }, 2000);
+      }, 1000);
     },
     allPowerOff() {
       let app = this;
       this.$store.loadingStore().open();
+      let that = this;
       setTimeout(function() {
         app.floors.forEach(item => {
           if (item.devices) {
             item.devices.forEach(i => {
-              i.online = true;
+              if (!that.selectedRowKeys || that.selectedRowKeys.length == 0 || that.selectedRowKeys.indexOf(i.id) != -1) {
+                i.online = false;
+              }
             });
           }
         });
         app.$store.loadingStore().close();
         app.$message.success("执行成功");
-      }, 2000);
+      }, 1000);
+    },
+    floorsDevicesAll() {
+      let size = 0;
+      this.floors.forEach(item => {
+        if (item.devices) {
+          item.devices.forEach(i => {
+            size++;
+          });
+        }
+      });
+      return size;
     }
   }
 };
@@ -644,7 +683,7 @@ export default {
     }
     .airContainer-right {
       display: inline-block;
-      width: 85%;
+      width: 100%;
       height: 100%;
       vertical-align: top;
       padding: 12px 20px;