智慧场景-智能源，空调、照明缺少策略页；缺少多选内容，包括卡片点击多选；策略配置页侧边显示；样式还原UI；

src/components/scene/energy/common/deviceCardLight.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>
 
@@ -20,14 +32,9 @@
     <!--</div>-->
 
     <div class="deviceCardAir-bottom">
-      <span class="anticon" >
-        <a-icon type="setting" />
-      </span>
-      <span style="margin-left: 15px">
-        {{ item.name }}
-      </span>
+      <span class="anticon" @click.stop="click"> <a-icon type="setting" /> </span>
+      <span style="margin-left: 15px"> {{ item.name }} </span>
     </div>
-
   </div>
 </template>
 
@@ -35,33 +42,34 @@
 export default {
   data() {
     return {
-      color: '',
-    }
+      color: ""
+    };
   },
   props: {
     item: Object,
-    toggle: Function
+    activeList: Array,
+    click: Function,
+    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>
@@ -91,6 +99,5 @@ export default {
   .anticon {
     //padding: 6px;
   }
-
 }
-</style>
+</style>

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

@@ -3,6 +3,12 @@
     <div class="sceneCard-query">
       <Query :query-data.sync="queryData" :search="search" :reset="reset">
         <template #extraItem>
+          <a-form-model-item label="楼层：" class="formItem">
+            <a-select default-value="0" style="width: 120px" v-model="queryData.floorId">
+              <a-select-option value="0"> 全部 </a-select-option>
+              <a-select-option v-for="i in 9" :key="'floor' + i" :value="i"> {{ i + "F" }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
           <a-form-model-item label="开关：" class="formItem">
             <a-select default-value="0" style="width: 120px" v-model="queryData.switch">
               <a-select-option value="0"> 全部 </a-select-option>
@@ -42,20 +48,24 @@
         </template>
       </Query>
     </div>
-
     <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-button style="font-size: 12px" size="small"
+              ><a-icon type="poweroff" />{{ activeList.length > 0 ? "选中" : "" }}全开</a-button
+            >
           </a-popconfirm>
           <a-popconfirm title="确定要执行吗?" ok-text="是" cancel-text="否" @confirm="allPowerOn">
-            <a-button style="font-size: 12px" size="small"><a-icon type="poweroff" />全关</a-button>
+            <a-button style="font-size: 12px" size="small"
+              ><a-icon type="poweroff" />{{ activeList.length > 0 ? "选中" : "" }}全关</a-button
+            >
           </a-popconfirm>
           <a-button
             type="primary"
             size="small"
             style="font-size: 12px"
+            :disabled="activeList.length == 0"
             @click="
               () => {
                 this.showBatchCL = true;
@@ -84,15 +94,19 @@
         </a-button>
       </div>
 
-      <a-alert type="success" show-icon v-if="selectedRowKeys.length > 0" closeText="取消选择" @close="clearSelectRow">
+      <a-alert type="success" show-icon v-if="activeList.length > 0" closeText="取消选择" @close="clearSelectRow">
         <template #message>
-          已选择{{ selectedRowKeys.length }}台设备
+          已选择<span style="font-size: 16px;font-weight: bold;color:#19b955;margin: 0 5px;">{{ activeList.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">
@@ -118,7 +132,7 @@
             </div>
           </a-anchor>
         </div>
-      </div>
+      </div> -->
       <div class="airContainer-right" ref="airContainerRight">
         <template v-for="item in floors">
           <template v-if="showCard">
@@ -129,7 +143,13 @@
               <div style="padding: 0 15px">
                 <a-row :gutter="[30, 12]">
                   <a-col v-for="device in item.devices" :key="device.id" :span="6">
-                    <DeviceCardAir :click="handleCardClick" :item="device" :toggle="toggleOnline" />
+                    <DeviceCardAir
+                      :click="handleCardClick"
+                      :domClick="domClick"
+                      :item="device"
+                      :toggle="toggleOnline"
+                      :activeList="activeList"
+                    />
                   </a-col>
                 </a-row>
               </div>
@@ -139,7 +159,7 @@
             <div :key="item.value" :id="item.label" v-show="currFloor == item.label">
               <a-table
                 :rowKey="(record, index) => record.id"
-                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+                :row-selection="{ selectedRowKeys: activeList, onChange: onSelectChange }"
                 :columns="columns"
                 :show-header="true"
                 :data-source="item.devices"
@@ -343,7 +363,9 @@ export default {
       currFloor: "1F",
       showCard: true,
       showBatchCL: false,
+      activeList: [],
       queryData: {
+        floorId: "0",
         switch: "0",
         mode: "0",
         tm: "0"
@@ -597,7 +619,7 @@ export default {
   },
   methods: {
     clearSelectRow() {
-      this.selectedRowKeys = [];
+      this.activeList = [];
     },
     reset() {
       this.floors = JSON.parse(JSON.stringify(this.oriFloors));
@@ -611,6 +633,13 @@ export default {
       this.showBatchCL = true;
       this.formData = {};
     },
+    domClick(id) {
+      if (this.activeList.indexOf(id) != -1) {
+        this.activeList.splice(this.activeList.indexOf(id), 1);
+      } else {
+        this.activeList.push(id);
+      }
+    },
     search() {
       let objarr = JSON.parse(JSON.stringify(this.oriFloors));
       let app = this;
@@ -636,7 +665,7 @@ export default {
       this.floors = objarr;
     },
     onSelectChange(val) {
-      this.selectedRowKeys = val;
+      this.activeList = val;
     },
     toggleOnline(device) {
       device.online = !device.online;
@@ -654,32 +683,51 @@ 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;
+              console.log(that.activeList.indexOf(i.id));
+              if (!that.activeList || that.activeList.length == 0 || that.activeList.indexOf(i.id) != -1) {
+                i.online = false;
+              }
             });
           }
         });
         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;
+              console.log(that.activeList.indexOf(i.id));
+              if (!that.activeList || that.activeList.length == 0 || that.activeList.indexOf(i.id) != -1) {
+                i.online = true;
+              }
             });
           }
         });
         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;
     }
   }
 };
@@ -712,7 +760,7 @@ export default {
     }
     .airContainer-right {
       display: inline-block;
-      width: 85%;
+      width: 100%;
       height: 100%;
       vertical-align: top;
       padding: 12px 20px;

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

@@ -1,10 +1,14 @@
 <template>
   <div class="sceneCard">
-
     <div class="sceneCard-query">
-      <Query :query-data.sync="queryData" :search="search" :reset="reset" >
+      <Query :query-data.sync="queryData" :search="search" :reset="reset">
         <template #extraItem>
-
+          <a-form-model-item label="楼层：" class="formItem">
+            <a-select default-value="0" style="width: 120px" v-model="queryData.floorId">
+              <a-select-option value="0"> 全部 </a-select-option>
+              <a-select-option v-for="i in 9" :key="'floor' + i" :value="i"> {{ i + "F" }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
           <a-form-model-item label="开关：" class="formItem">
             <a-select default-value="0" style="width: 120px" v-model="queryData.switch">
               <a-select-option value="0"> 全部 </a-select-option>
@@ -22,40 +26,36 @@
           <!--<a-form-model-item label="设备编号：" class="formItem">-->
           <!--  <a-input v-model="queryData.deviceNo" placeholder="请输入设备编号" />-->
           <!--</a-form-model-item>-->
-
         </template>
       </Query>
     </div>
 
     <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="allPowerOff">
+            <a-button style="font-size: 12px" size="small"><a-icon type="poweroff" />全开</a-button>
           </a-popconfirm>
-          <a-popconfirm
-              title="确定要执行吗?"
-              ok-text="是"
-              cancel-text="否"
-              @confirm="allPowerOff"
-          >
+          <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-popconfirm>
-          <a-button type="primary" size="small" style="font-size: 12px" @click="()=>{this.showBatchCL=true}">批量执行策略</a-button>
+          <a-button
+            type="primary"
+            size="small"
+            style="font-size: 12px"
+            @click="
+              () => {
+                this.showBatchCL = true;
+              }
+            "
+            >批量执行策略</a-button
+          >
         </a-space>
       </div>
 
       <div style="display: inline-block;width: 50%;text-align: right">
         <a-select default-value="0">
-          <a-select-option value="0">
-            按楼层显示
-          </a-select-option>
+          <a-select-option value="0"> 按楼层显示 </a-select-option>
           <!--<a-select-option value="1">-->
           <!--  按公司-->
           <!--</a-select-option>-->
@@ -66,85 +66,99 @@
           <!--  按分组-->
           <!--</a-select-option>-->
         </a-select>
-        <a-button type="link" @click="toggleShowCard"><a-icon type="unordered-list" />
-          <span v-if="showCard">列表模式</span>
-          <span v-if="!showCard">卡片模式</span>
+        <a-button type="link" @click="toggleShowCard"
+          ><a-icon type="unordered-list" /> <span v-if="showCard">列表模式</span> <span v-if="!showCard">卡片模式</span>
         </a-button>
       </div>
 
-
-      <a-alert type="success" show-icon v-if="selectedRowKeys.length>0" closeText="取消选择" @close="clearSelectRow">
+      <a-alert type="success" show-icon v-if="selectedRowKeys.length > 0" closeText="取消选择" @close="clearSelectRow">
         <template #message>
           已选择{{ selectedRowKeys.length }}台设备
         </template>
       </a-alert>
-
     </div>
 
     <div class="airContainer">
       <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">
-            <template v-for="item in floors" >
-              <a-anchor-link :href="'#'+item.label" :key="item.value" >
+          <a-anchor :getContainer="getContainer" :target-offset="100" style="margin-top: 12px" @change="floorChange">
+            <div v-for="item in floors" :key="item.value">
+              <a-anchor-link :href="'#' + item.label">
                 <template #title>
-                  <span style="display: inline-block;margin-left: 25px; width: 30px;overflow: hidden;vertical-align: middle" >
-                    <div style="width: 30px;height: 20px;border-bottom: 1px dashed #2EA8E6;" :style="index!==0?{borderLeft: '1px dashed #2EA8E6'}:{}" ></div>
-                    <div style="width: 30px;height: 20px;border-left: 1px dashed #2EA8E6" :style="index===floors.length-1?{}:{borderLeft: '1px dashed #2EA8E6'}" ></div>
-                    <div style="position: absolute;top: 18.5px;left:23px;padding-left: 2px;width: 5px;height: 5px;border-radius: 2.5px;background-color: #2EA8E6"></div>
+                  <span style="display: inline-block;margin-left: 25px; width: 30px;overflow: hidden;vertical-align: middle">
+                    <div
+                      style="width: 30px;height: 20px;border-bottom: 1px dashed #2EA8E6;"
+                      :style="index !== 0 ? { borderLeft: '1px dashed #2EA8E6' } : {}"
+                    ></div>
+                    <div
+                      style="width: 30px;height: 20px;border-left: 1px dashed #2EA8E6"
+                      :style="index === floors.length - 1 ? {} : { borderLeft: '1px dashed #2EA8E6' }"
+                    ></div>
+                    <div
+                      style="position: absolute;top: 18.5px;left:23px;padding-left: 2px;width: 5px;height: 5px;border-radius: 2.5px;background-color: #2EA8E6"
+                    ></div>
                   </span>
                   {{ item.label }}
                 </template>
               </a-anchor-link>
-            </template>
+            </div>
           </a-anchor>
-
         </div>
       </div>
       <div class="airContainer-right" ref="airContainerRight">
         <template v-for="item in floors">
           <template v-if="showCard">
             <div :key="item.value" style="margin-bottom: 15px">
-              <a-divider :id="item.label" style="margin: 0 0 15px;padding: 0" orientation="left" dashed >{{ item.label }}</a-divider>
+              <a-divider :id="item.label" style="margin: 0 0 15px;padding: 0" orientation="left" dashed>{{
+                item.label
+              }}</a-divider>
               <div style="padding: 0 15px">
-                <a-row :gutter="[30,12]">
+                <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" />
                   </a-col>
                 </a-row>
               </div>
             </div>
           </template>
           <template v-if="!showCard">
-            <div :key="item.value" :id="item.label" v-show="currFloor==item.label">
-              <a-table :rowKey=" (record, index) => record.id"
-                       :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-                       :columns="columns"
-                       :show-header="true"
-                       :data-source="item.devices"
-                       :pagination="false"
-                       :scroll="{ y: 400 }"
+            <div :key="item.value" :id="item.label" v-show="currFloor == item.label">
+              <a-table
+                :rowKey="(record, index) => record.id"
+                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+                :columns="columns"
+                :show-header="true"
+                :data-source="item.devices"
+                :pagination="false"
+                :scroll="{ y: 400 }"
               >
                 <template #name="text, record">
                   <span>{{ record.id }}</span>
                 </template>
                 <template #mode="text, record">
-                  <span v-if="text=='hot'">制热</span>
-                  <span v-if="text=='cold'">制冷</span>
+                  <span v-if="text == 'hot'">制热</span> <span v-if="text == 'cold'">制冷</span>
                 </template>
                 <template #tm="text, record">
-                  <span>{{text}}°C</span>
+                  <span>{{ text }}°C</span>
                 </template>
                 <template #isControl="text, record">
                   <span>是</span>
                 </template>
                 <template #online="text, record">
                   <span v-if="text">
-                    <span style="color: #19b955;background-color: #19b955;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle">•</span> 在线
+                    <span
+                      style="color: #19b955;background-color: #19b955;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle"
+                      >•</span
+                    >
+                    在线
                   </span>
                   <span v-if="!text">
-                    <span style="color: gray;background-color: gray;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle">•</span> 离线
+                    <span
+                      style="color: gray;background-color: gray;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle"
+                      >•</span
+                    >
+                    离线
                   </span>
                 </template>
                 <template #strategy="text, record">
@@ -153,23 +167,21 @@
               </a-table>
             </div>
           </template>
-
         </template>
       </div>
     </div>
 
-    <a-modal title="策略配置" v-if="showBatchCL" v-model="showBatchCL" width="500" height="300" centered style="max-height: 300px;overflow-y: auto" @ok="handleOk">
-      <a-form-model :form="formData" :label-col="{span:6}" :wrapperCol="{span:16}" style="overflow-y: auto;height: 450px">
-
-        <a-form-item label="选择策略：" class="formItem" >
+    <a-drawer title="策略配置" :visible="showBatchCL" width="500" @close="handleOk">
+      <a-form-model :form="formData" :label-col="{ span: 6 }" :wrapperCol="{ span: 16 }" style="overflow-y: auto;">
+        <a-form-item label="选择策略：" class="formItem">
           <a-radio-group v-model="formData.resource">
             <a-radio value="1">已有策略</a-radio>
             <a-radio value="2">自定义</a-radio>
           </a-radio-group>
         </a-form-item>
 
-        <a-form-item label="策略名称：" class="formItem" >
-          <template v-if="formData.resource=='1'">
+        <a-form-item label="策略名称：" class="formItem">
+          <template v-if="formData.resource == '1'">
             <a-select default-value="0" style="width: 200px" v-model="formData.clId">
               <a-select-option value="0"> 策略1 </a-select-option>
               <!--<a-select-option v-for="item in companyData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>-->
@@ -180,53 +192,50 @@
           </template>
         </a-form-item>
 
-        <a-form-item label="执行方式：" class="formItem" >
-          <a-select default-value="0" style="width: 200px" v-model="formData.method" >
+        <a-form-item label="执行方式：" class="formItem">
+          <a-select default-value="0" style="width: 200px" v-model="formData.method">
             <a-select-option value="1"> 每日执行 </a-select-option>
             <a-select-option value="2"> 工作日与非工作日区别执行 </a-select-option>
           </a-select>
         </a-form-item>
 
-        <a-form-item label="执行时间：" class="formItem" >
+        <a-form-item label="执行时间：" class="formItem">
           <timeRange time-format="yyyy/MM/DD" :time-range="formData.timeRange" />
         </a-form-item>
 
-        <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" v-if="formData.method=='2'" >工作日策略 -</div>
+        <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" v-if="formData.method == '2'">工作日策略 -</div>
 
-        <a-form-item label="开机策略：" class="formItem" >
+        <a-form-item label="开机策略：" class="formItem">
           <a-select default-value="0" style="width: 200px" v-model="formData.openCl">
             <a-select-option value="0"> 定时开关机 </a-select-option>
             <a-select-option value="1"> 24小时开机 </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item label="开机时间：" class="formItem" >
-          <a-time-picker use24-hours v-model="formData.openTime" :disabled="!(formData.openCl=='0')" />
+        <a-form-item label="开机时间：" class="formItem">
+          <a-time-picker use24-hours v-model="formData.openTime" :disabled="!(formData.openCl == '0')" />
         </a-form-item>
-        <a-form-item label="关机时间：" class="formItem" >
-          <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0')" />
+        <a-form-item label="关机时间：" class="formItem">
+          <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl == '0')" />
         </a-form-item>
 
-        <div v-if="formData.method=='2'">
-
-          <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" >非工作日策略 -</div>
+        <div v-if="formData.method == '2'">
+          <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px">非工作日策略 -</div>
 
-          <a-form-item label="开机策略：" class="formItem" >
+          <a-form-item label="开机策略：" class="formItem">
             <a-select default-value="0" style="width: 200px" v-model="formData.openCl">
               <a-select-option value="0"> 定时开关机 </a-select-option>
               <a-select-option value="1"> 24小时开机 </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="开机时间：" class="formItem" >
-            <a-time-picker use24-hours v-model="formData.openTime"  :disabled="!(formData.openCl=='0')"/>
+          <a-form-item label="开机时间：" class="formItem">
+            <a-time-picker use24-hours v-model="formData.openTime" :disabled="!(formData.openCl == '0')" />
           </a-form-item>
-          <a-form-item label="关机时间：" class="formItem" >
-            <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0')" />
+          <a-form-item label="关机时间：" class="formItem">
+            <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl == '0')" />
           </a-form-item>
         </div>
-
       </a-form-model>
-    </a-modal>
-
+    </a-drawer>
   </div>
 </template>
 
@@ -238,362 +247,374 @@ export default {
   components: {
     Query,
     deviceCardWater,
-    timeRange,
+    timeRange
   },
   data() {
     return {
       formData: {},
-      currFloor: '1F',
+      currFloor: "1F",
       showCard: true,
       showBatchCL: false,
       queryData: {
-        switch: '0',
-        mode: '0',
-        tm: '0'
+        floorId: "0",
+        switch: "0",
+        mode: "0",
+        tm: "0"
       },
       selectedRowKeys: [],
 
       columns: [
         {
-          title: '名称',
-          dataIndex: 'name',
-          key: 'name',
-          scopedSlots: { customRender: 'name' },
+          title: "名称",
+          dataIndex: "name",
+          key: "name",
+          scopedSlots: { customRender: "name" }
         },
         {
-          title: '人体感应',
-          dataIndex: 'sensor',
-          key: 'sensor',
+          title: "人体感应",
+          dataIndex: "sensor",
+          key: "sensor"
         },
         {
-          title: '是否支持调控',
-          dataIndex: 'isControl',
-          key: 'isControl',
-          scopedSlots: { customRender: 'isControl' },
+          title: "是否支持调控",
+          dataIndex: "isControl",
+          key: "isControl",
+          scopedSlots: { customRender: "isControl" }
         },
         {
-          title: '状态',
-          dataIndex: 'online',
-          key: 'online',
-          scopedSlots: { customRender: 'online' },
+          title: "状态",
+          dataIndex: "online",
+          key: "online",
+          scopedSlots: { customRender: "online" }
         },
         {
-          title: '执行策略',
-          dataIndex: 'strategy',
-          key: 'strategy',
-          scopedSlots: { customRender: 'strategy' },
-        },
+          title: "执行策略",
+          dataIndex: "strategy",
+          key: "strategy",
+          scopedSlots: { customRender: "strategy" }
+        }
       ],
       oriFloors: [],
       floors: [
         {
-          label: '1F',
-          value: '1',
+          label: "1F",
+          value: "1",
           devices: [
             {
-              id: '1101-1',
-              name: '饮水机#1',
-              sensor: '无',
-              waterNum: '654',
-              tm: '78',
-              status: '1',
-              online: true
-            },{
-              id: '1101-2',
-              name: '饮水机#2',
-              sensor: '无',
-              waterNum: '700',
-              tm: '95',
-              status: '2',
+              id: "1101-1",
+              name: "饮水机#1",
+              sensor: "无",
+              waterNum: "654",
+              tm: "78",
+              status: "1",
               online: true
-            },{
-              id: '1102-1',
-              name: '饮水机#3',
-              sensor: '无',
-              waterNum: '700',
-              tm: '95',
-              status: '2',
+            },
+            {
+              id: "1101-2",
+              name: "饮水机#2",
+              sensor: "无",
+              waterNum: "700",
+              tm: "95",
+              status: "2",
               online: true
-            },{
-              id: '1102-2',
-              name: '饮水机#4',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "1102-1",
+              name: "饮水机#3",
+              sensor: "无",
+              waterNum: "700",
+              tm: "95",
+              status: "2",
               online: true
             },
+            {
+              id: "1102-2",
+              name: "饮水机#4",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
+              online: true
+            }
           ]
         },
         {
-          label: '2F',
-          value: '2',
+          label: "2F",
+          value: "2",
           devices: [
             {
-              id: '2101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "2101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
-            },{
-              id: '2101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "2101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
         },
         {
-          label: '3F',
-          value: '3',
+          label: "3F",
+          value: "3",
           devices: [
             {
-              id: '3101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "3101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
-            },{
-              id: '3101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "3101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
         },
         {
-          label: '4F',
-          value: '4',
+          label: "4F",
+          value: "4",
           devices: [
             {
-              id: '4101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "4101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
-            },{
-              id: '4101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "4101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
         },
         {
-          label: '5F',
-          value: '5',
+          label: "5F",
+          value: "5",
           devices: [
             {
-              id: '5101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
-              online: true,
-            },{
-              id: '5101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "5101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
+              online: true
+            },
+            {
+              id: "5101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
         },
         {
-          label: '6F',
-          value: '6',
+          label: "6F",
+          value: "6",
           devices: [
             {
-              id: '6101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "6101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
-            },{
-              id: '6101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "6101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
         },
         {
-          label: '7F',
-          value: '7',
+          label: "7F",
+          value: "7",
           devices: [
             {
-              id: '7101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "7101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
-            },{
-              id: '7101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "7101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
         },
         {
-          label: '8F',
-          value: '8',
+          label: "8F",
+          value: "8",
           devices: [
             {
-              id: '8101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "8101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
-            },{
-              id: '8101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "8101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
         },
         {
-          label: '9F',
-          value: '9',
+          label: "9F",
+          value: "9",
           devices: [
             {
-              id: '9101-1',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+              id: "9101-1",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
-            },{
-              id: '9101-2',
-              name: '饮水机',
-              sensor: '无',
-              waterNum: '700',
-              tm: '100',
-              status: '2',
+            },
+            {
+              id: "9101-2",
+              name: "饮水机",
+              sensor: "无",
+              waterNum: "700",
+              tm: "100",
+              status: "2",
               online: true
             }
           ]
-        },
+        }
       ]
-    }
+    };
   },
   mounted() {
     this.oriFloors = JSON.parse(JSON.stringify(this.floors));
   },
   methods: {
     clearSelectRow() {
-      this.selectedRowKeys = []
+      this.selectedRowKeys = [];
     },
     reset() {
       this.floors = JSON.parse(JSON.stringify(this.oriFloors));
     },
     handleOk() {
       this.showBatchCL = false;
-      this.$message.success('设置成功')
+      this.$message.success("设置成功");
     },
     handleCardClick() {
       this.showBatchCL = true;
-      this.formData = {}
+      this.formData = {};
     },
     search() {
       let objarr = JSON.parse(JSON.stringify(this.oriFloors));
-      let app = this
-      objarr.forEach(item=>{
+      let app = this;
+      objarr.forEach(item => {
         if (item.devices) {
-          item.devices = item.devices.filter(item=>{
-            if (!app.queryData.switch || app.queryData.switch=='0') {
+          item.devices = item.devices.filter(item => {
+            if (!app.queryData.switch || app.queryData.switch == "0") {
             } else {
-              return app.queryData.switch==item.online
+              return app.queryData.switch == item.online;
             }
             return true;
-          })
+          });
         }
-      })
-      this.floors = objarr
+      });
+      this.floors = objarr;
     },
     onSelectChange(val) {
-      this.selectedRowKeys = val
+      this.selectedRowKeys = val;
     },
     toggleOnline(device) {
-      device.online=!device.online;
+      device.online = !device.online;
     },
     floorChange(val) {
-      let obj = val.replace('#','')
+      let obj = val.replace("#", "");
       this.currFloor = obj;
     },
     getContainer() {
-      return this.$refs.airContainerRight
+      return this.$refs.airContainerRight;
     },
     toggleShowCard() {
       this.showCard = !this.showCard;
     },
     allPowerOn() {
       let app = this;
-      this.$store.loadingStore().open()
-      setTimeout(function () {
-        app.floors.forEach(item=>{
+      this.$store.loadingStore().open();
+      setTimeout(function() {
+        app.floors.forEach(item => {
           if (item.devices) {
-            item.devices.forEach(i=>{
-              i.online = false
-            })
+            item.devices.forEach(i => {
+              i.online = false;
+            });
           }
-        })
-        app.$store.loadingStore().close()
-        app.$message.success('执行成功')
-      },2000)
+        });
+        app.$store.loadingStore().close();
+        app.$message.success("执行成功");
+      }, 2000);
     },
     allPowerOff() {
       let app = this;
-      this.$store.loadingStore().open()
-      setTimeout(function () {
-        app.floors.forEach(item=>{
+      this.$store.loadingStore().open();
+      setTimeout(function() {
+        app.floors.forEach(item => {
           if (item.devices) {
-            item.devices.forEach(i=>{
-              i.online = true
-            })
+            item.devices.forEach(i => {
+              i.online = true;
+            });
           }
-        })
-        app.$store.loadingStore().close()
-        app.$message.success('执行成功')
-      },2000)
+        });
+        app.$store.loadingStore().close();
+        app.$message.success("执行成功");
+      }, 2000);
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -604,7 +625,6 @@ export default {
   width: 100%;
   height: 100%;
   .sceneCard-query {
-
   }
   .sceneCard-control {
     margin-top: 12px;
@@ -646,4 +666,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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

@@ -1,10 +1,14 @@
 <template>
   <div class="sceneCard">
-
     <div class="sceneCard-query">
-      <Query :query-data.sync="queryData" :search="search" :reset="reset" >
+      <Query :query-data.sync="queryData" :search="search" :reset="reset">
         <template #extraItem>
-
+          <a-form-model-item label="楼层：" class="formItem">
+            <a-select default-value="0" style="width: 120px" v-model="queryData.floorId">
+              <a-select-option value="0"> 全部 </a-select-option>
+              <a-select-option v-for="i in 9" :key="'floor' + i" :value="i"> {{ i + "F" }}</a-select-option>
+            </a-select>
+          </a-form-model-item>
           <a-form-model-item label="开关：" class="formItem">
             <a-select default-value="0" style="width: 120px" v-model="queryData.switch">
               <a-select-option value="0"> 全部 </a-select-option>
@@ -22,42 +26,42 @@
           <!--<a-form-model-item label="设备编号：" class="formItem">-->
           <!--  <a-input v-model="queryData.deviceNo" placeholder="请输入设备编号" />-->
           <!--</a-form-model-item>-->
-
         </template>
       </Query>
     </div>
 
     <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-popconfirm title="确定要执行吗?" ok-text="是" cancel-text="否" @confirm="allPowerOff">
+            <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"  @click="()=>{this.showBatchCL=true}">批量执行策略</a-button>
+          <a-button
+            type="primary"
+            size="small"
+            style="font-size: 12px"
+            :disabled="selectedRowKeys.length == 0"
+            @click="
+              () => {
+                this.showBatchCL = true;
+              }
+            "
+            >批量执行策略</a-button
+          >
         </a-space>
       </div>
 
       <div style="display: inline-block;width: 50%;text-align: right">
         <a-select default-value="0">
-          <a-select-option value="0">
-            按楼层显示
-          </a-select-option>
+          <a-select-option value="0"> 按楼层显示 </a-select-option>
           <!--<a-select-option value="1">-->
           <!--  按公司-->
           <!--</a-select-option>-->
@@ -68,23 +72,24 @@
           <!--  按分组-->
           <!--</a-select-option>-->
         </a-select>
-        <a-button type="link" @click="toggleShowCard"><a-icon type="unordered-list" />
-          <span v-if="showCard">列表模式</span>
-          <span v-if="!showCard">卡片模式</span>
+        <a-button type="link" @click="toggleShowCard"
+          ><a-icon type="unordered-list" /> <span v-if="showCard">列表模式</span> <span v-if="!showCard">卡片模式</span>
         </a-button>
       </div>
 
-
-      <a-alert type="success" show-icon v-if="selectedRowKeys.length>0" closeText="取消选择" @close="clearSelectRow">
+      <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">
@@ -103,50 +108,66 @@
           </a-anchor>
 
         </div>
-      </div>
+      </div> -->
       <div class="airContainer-right" ref="airContainerRight">
         <template v-for="item in floors">
           <template v-if="showCard">
             <div :key="item.value" style="margin-bottom: 15px">
-              <a-divider :id="item.label" style="margin: 0 0 15px;padding: 0" orientation="left" dashed >{{ item.label }}</a-divider>
+              <a-divider :id="item.label" style="margin: 0 0 15px;padding: 0" orientation="left" dashed>{{
+                item.label
+              }}</a-divider>
               <div style="padding: 0 15px">
-                <a-row :gutter="[30,12]">
+                <a-row :gutter="[30, 12]">
                   <a-col v-for="device in item.devices" :key="device.id" :span="6">
-                    <deviceCardLight :click="handleCardClick" :item="device" :toggle="toggleOnline"  />
+                    <deviceCardLight
+                      :click="handleCardClick"
+                      :domClick="domClick"
+                      :item="device"
+                      :toggle="toggleOnline"
+                      :activeList="selectedRowKeys"
+                    />
                   </a-col>
                 </a-row>
               </div>
             </div>
           </template>
           <template v-if="!showCard">
-            <div :key="item.value" :id="item.label" v-show="currFloor==item.label">
-              <a-table :rowKey=" (record, index) => record.id"
-                       :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
-                       :columns="columns"
-                       :show-header="true"
-                       :data-source="item.devices"
-                       :pagination="false"
-                       :scroll="{ y: 400 }"
+            <div :key="item.value" :id="item.label" v-show="currFloor == item.label">
+              <a-table
+                :rowKey="(record, index) => record.id"
+                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+                :columns="columns"
+                :show-header="true"
+                :data-source="item.devices"
+                :pagination="false"
+                :scroll="{ y: 400 }"
               >
                 <template #name="text, record">
                   <span>{{ record.id }}</span>
                 </template>
                 <template #mode="text, record">
-                  <span v-if="text=='hot'">制热</span>
-                  <span v-if="text=='cold'">制冷</span>
+                  <span v-if="text == 'hot'">制热</span> <span v-if="text == 'cold'">制冷</span>
                 </template>
                 <template #tm="text, record">
-                  <span>{{text}}°C</span>
+                  <span>{{ text }}°C</span>
                 </template>
                 <template #isControl="text, record">
                   <span>是</span>
                 </template>
                 <template #online="text, record">
                   <span v-if="text">
-                    <span style="color: #19b955;background-color: #19b955;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle">•</span> 在线
+                    <span
+                      style="color: #19b955;background-color: #19b955;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle"
+                      >•</span
+                    >
+                    在线
                   </span>
                   <span v-if="!text">
-                    <span style="color: gray;background-color: gray;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle">•</span> 离线
+                    <span
+                      style="color: gray;background-color: gray;width: 15px;height: 15px;display: inline-block;border-radius: 8px;vertical-align: middle"
+                      >•</span
+                    >
+                    离线
                   </span>
                 </template>
                 <template #strategy="text, record">
@@ -155,23 +176,21 @@
               </a-table>
             </div>
           </template>
-
         </template>
       </div>
     </div>
 
-    <a-modal title="策略配置" v-if="showBatchCL" v-model="showBatchCL" width="500" height="300" centered style="max-height: 300px;overflow-y: auto" @ok="handleOk">
-      <a-form-model :form="formData" :label-col="{span:6}" :wrapperCol="{span:16}" style="overflow-y: auto;height: 450px">
-
-        <a-form-item label="选择策略：" class="formItem" >
+    <a-drawer title="策略配置" :visible="showBatchCL" width="500" @close="handleOk">
+      <a-form-model :form="formData" :label-col="{ span: 6 }" :wrapperCol="{ span: 16 }" style="overflow-y: auto;">
+        <a-form-item label="选择策略：" class="formItem">
           <a-radio-group v-model="formData.resource">
             <a-radio value="1">已有策略</a-radio>
             <a-radio value="2">自定义</a-radio>
           </a-radio-group>
         </a-form-item>
 
-        <a-form-item label="策略名称：" class="formItem" >
-          <template v-if="formData.resource=='1'">
+        <a-form-item label="策略名称：" class="formItem">
+          <template v-if="formData.resource == '1'">
             <a-select default-value="0" style="width: 200px" v-model="formData.clId">
               <a-select-option value="0"> 策略1 </a-select-option>
               <!--<a-select-option v-for="item in companyData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>-->
@@ -182,39 +201,39 @@
           </template>
         </a-form-item>
 
-        <a-form-item label="执行方式：" class="formItem" >
-          <a-select default-value="0" style="width: 200px" v-model="formData.method" >
+        <a-form-item label="执行方式：" class="formItem">
+          <a-select default-value="0" style="width: 200px" v-model="formData.method">
             <a-select-option value="1"> 每日执行 </a-select-option>
             <a-select-option value="2"> 工作日与非工作日区别执行 </a-select-option>
           </a-select>
         </a-form-item>
 
-        <a-form-item label="执行时间：" class="formItem" >
+        <a-form-item label="执行时间：" class="formItem">
           <timeRange time-format="yyyy/MM/DD" :time-range="formData.timeRange" />
         </a-form-item>
 
-        <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" v-if="formData.method=='2'" >工作日策略 -</div>
+        <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" v-if="formData.method == '2'">工作日策略 -</div>
 
-        <a-form-item label="开机策略：" class="formItem" >
+        <a-form-item label="开机策略：" class="formItem">
           <a-select default-value="0" style="width: 200px" v-model="formData.openCl">
             <a-select-option value="0"> 定时开关机 </a-select-option>
             <a-select-option value="1"> 24小时开机 </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item label="开机时间：" class="formItem" >
-          <a-time-picker use24-hours v-model="formData.openTime" :disabled="!(formData.openCl=='0')" />
+        <a-form-item label="开机时间：" class="formItem">
+          <a-time-picker use24-hours v-model="formData.openTime" :disabled="!(formData.openCl == '0')" />
         </a-form-item>
-        <a-form-item label="关机时间：" class="formItem" >
-          <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0')" />
+        <a-form-item label="关机时间：" class="formItem">
+          <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl == '0')" />
         </a-form-item>
-        <a-form-item label="空调模式：" class="formItem" >
+        <a-form-item label="空调模式：" class="formItem">
           <a-select style="width: 200px" v-model="formData.mode">
             <a-select-option value="1"> 制冷 </a-select-option>
             <a-select-option value="2"> 制热 </a-select-option>
           </a-select>
         </a-form-item>
 
-        <a-form-item label="空调风速：" class="formItem" >
+        <a-form-item label="空调风速：" class="formItem">
           <a-select style="width: 200px" v-model="formData.wind">
             <a-select-option value="1"> 一级 </a-select-option>
             <a-select-option value="2"> 二级 </a-select-option>
@@ -223,7 +242,7 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item label="设置温度：" class="formItem" >
+        <a-form-item label="设置温度：" class="formItem">
           <a-select style="width: 200px" v-model="formData.tm">
             <a-select-option value="18"> 18°C </a-select-option>
             <a-select-option value="19"> 19°C </a-select-option>
@@ -239,48 +258,39 @@
           </a-select>
         </a-form-item>
 
-        <a-form-item label="人体感应：" class="formItem" >
+        <a-form-item label="人体感应：" class="formItem">
           <a-select default-value="0" style="width: 200px" v-model="formData.sensor">
             <a-select-option value="0"> 无 </a-select-option>
           </a-select>
         </a-form-item>
 
-        <div v-if="formData.method=='2'">
+        <div v-if="formData.method == '2'">
+          <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px">非工作日策略 -</div>
 
-          <div style="margin-left: 8%;font-weight: bold;margin-bottom: 15px" >非工作日策略 -</div>
-
-          <a-form-item label="开机策略：" class="formItem" >
+          <a-form-item label="开机策略：" class="formItem">
             <a-select default-value="0" style="width: 200px" v-model="formData.openCl">
               <a-select-option value="0"> 定时开关机 </a-select-option>
               <a-select-option value="1"> 24小时开机 </a-select-option>
             </a-select>
           </a-form-item>
-          <a-form-item label="开机时间：" class="formItem" >
-            <a-time-picker use24-hours v-model="formData.openTime"  :disabled="!(formData.openCl=='0')"/>
-          </a-form-item>
-          <a-form-item label="关机时间：" class="formItem" >
-            <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl=='0')" />
+          <a-form-item label="开机时间：" class="formItem">
+            <a-time-picker use24-hours v-model="formData.openTime" :disabled="!(formData.openCl == '0')" />
           </a-form-item>
-          <a-form-item label="灯光亮度：" class="formItem" >
-            <a-slider id="test" v-model:value="formData.brightness"  />
-          </a-form-item>
-
-          <a-form-item label="灯光色温：" class="formItem" >
-            <a-slider id="test" v-model:value="formData.color"  />
+          <a-form-item label="关机时间：" class="formItem">
+            <a-time-picker use24-hours v-model="formData.closeTime" :disabled="!(formData.openCl == '0')" />
           </a-form-item>
+          <a-form-item label="灯光亮度：" class="formItem"> <a-slider id="test" v-model="formData.brightness" /> </a-form-item>
 
+          <a-form-item label="灯光色温：" class="formItem"> <a-slider id="test" v-model="formData.color" /> </a-form-item>
 
-
-          <a-form-item label="人体感应：" class="formItem" >
+          <a-form-item label="人体感应：" class="formItem">
             <a-select default-value="0" style="width: 200px" v-model="formData.sensor">
               <a-select-option value="0"> 无 </a-select-option>
             </a-select>
           </a-form-item>
         </div>
-
       </a-form-model>
-    </a-modal>
-
+    </a-drawer>
   </div>
 </template>
 
@@ -292,302 +302,339 @@ export default {
   components: {
     Query,
     deviceCardLight,
-    timeRange,
+    timeRange
   },
   data() {
     return {
       formData: {},
-      currFloor: '1F',
+      currFloor: "1F",
       showCard: true,
       showBatchCL: false,
       queryData: {
-        switch: '0',
-        mode: '0',
-        tm: '0'
+        floorId: "0",
+        switch: "0",
+        mode: "0",
+        tm: "0"
       },
       selectedRowKeys: [],
 
       columns: [
         {
-          title: '名称',
-          dataIndex: 'name',
-          key: 'name',
-          scopedSlots: { customRender: 'name' },
+          title: "名称",
+          dataIndex: "name",
+          key: "name",
+          scopedSlots: { customRender: "name" }
         },
         {
-          title: '人体感应',
-          dataIndex: 'sensor',
-          key: 'sensor',
+          title: "人体感应",
+          dataIndex: "sensor",
+          key: "sensor"
         },
         {
-          title: '是否支持调控',
-          dataIndex: 'isControl',
-          key: 'isControl',
-          scopedSlots: { customRender: 'isControl' },
+          title: "是否支持调控",
+          dataIndex: "isControl",
+          key: "isControl",
+          scopedSlots: { customRender: "isControl" }
         },
         {
-          title: '状态',
-          dataIndex: 'online',
-          key: 'online',
-          scopedSlots: { customRender: 'online' },
+          title: "状态",
+          dataIndex: "online",
+          key: "online",
+          scopedSlots: { customRender: "online" }
         },
         {
-          title: '执行策略',
-          dataIndex: 'strategy',
-          key: 'strategy',
-          scopedSlots: { customRender: 'strategy' },
-        },
+          title: "执行策略",
+          dataIndex: "strategy",
+          key: "strategy",
+          scopedSlots: { customRender: "strategy" }
+        }
       ],
       oriFloors: [],
       floors: [
         {
-          label: '1F',
-          value: '1',
+          label: "1F",
+          value: "1",
           devices: [
             {
-              id: '1101-1',
-              name: '环形灯#1',
-              sensor: '无',
-              online: true
-            },{
-              id: '1101-2',
-              name: '环形灯#2',
-              sensor: '无',
+              id: "1101-1",
+              name: "环形灯#1",
+              sensor: "无",
               online: true
-            },{
-              id: '1102-1',
-              name: '环形灯#3',
-              sensor: '无',
+            },
+            {
+              id: "1101-2",
+              name: "环形灯#2",
+              sensor: "无",
               online: true
-            },{
-              id: '1102-2',
-              name: '环形灯#4',
-              sensor: '无',
+            },
+            {
+              id: "1102-1",
+              name: "环形灯#3",
+              sensor: "无",
               online: true
             },
+            {
+              id: "1102-2",
+              name: "环形灯#4",
+              sensor: "无",
+              online: true
+            }
           ]
         },
         {
-          label: '2F',
-          value: '2',
+          label: "2F",
+          value: "2",
           devices: [
             {
-              id: '2101-1',
-              name: '环形灯',
-              sensor: '无',
+              id: "2101-1",
+              name: "环形灯",
+              sensor: "无",
               online: true
-            },{
-              id: '2101-2',
-              name: '环形灯',
-              sensor: '无',
+            },
+            {
+              id: "2101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
         },
         {
-          label: '3F',
-          value: '3',
+          label: "3F",
+          value: "3",
           devices: [
             {
-              id: '3101-1',
-              name: '环形灯',
-              sensor: '无',
+              id: "3101-1",
+              name: "环形灯",
+              sensor: "无",
               online: true
-            },{
-              id: '3101-2',
-              name: '环形灯',
-              sensor: '无',
+            },
+            {
+              id: "3101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
         },
         {
-          label: '4F',
-          value: '4',
+          label: "4F",
+          value: "4",
           devices: [
             {
-              id: '4101-1',
-              name: '环形灯',
-              sensor: '无',
+              id: "4101-1",
+              name: "环形灯",
+              sensor: "无",
               online: true
-            },{
-              id: '4101-2',
-              name: '环形灯',
-              sensor: '无',
+            },
+            {
+              id: "4101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
         },
         {
-          label: '5F',
-          value: '5',
+          label: "5F",
+          value: "5",
           devices: [
             {
-              id: '5101-1',
-              name: '环形灯',
-              sensor: '无',
-              online: true,
-            },{
-              id: '5101-2',
-              name: '环形灯',
-              sensor: '无',
+              id: "5101-1",
+              name: "环形灯",
+              sensor: "无",
+              online: true
+            },
+            {
+              id: "5101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
         },
         {
-          label: '6F',
-          value: '6',
+          label: "6F",
+          value: "6",
           devices: [
             {
-              id: '6101-1',
-              name: '环形灯',
-              sensor: '无',
+              id: "6101-1",
+              name: "环形灯",
+              sensor: "无",
               online: true
-            },{
-              id: '6101-2',
-              name: '环形灯',
-              sensor: '无',
+            },
+            {
+              id: "6101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
         },
         {
-          label: '7F',
-          value: '7',
+          label: "7F",
+          value: "7",
           devices: [
             {
-              id: '7101-1',
-              name: '环形灯',
-              sensor: '无',
+              id: "7101-1",
+              name: "环形灯",
+              sensor: "无",
               online: true
-            },{
-              id: '7101-2',
-              name: '环形灯',
-              sensor: '无',
+            },
+            {
+              id: "7101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
         },
         {
-          label: '8F',
-          value: '8',
+          label: "8F",
+          value: "8",
           devices: [
             {
-              id: '8101-1',
-              name: '环形灯',
-              sensor: '无',
+              id: "8101-1",
+              name: "环形灯",
+              sensor: "无",
               online: true
-            },{
-              id: '8101-2',
-              name: '环形灯',
-              sensor: '无',
+            },
+            {
+              id: "8101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
         },
         {
-          label: '9F',
-          value: '9',
+          label: "9F",
+          value: "9",
           devices: [
             {
-              id: '9101-1',
-              name: '环形灯',
-              sensor: '无',
+              id: "9101-1",
+              name: "环形灯",
+              sensor: "无",
               online: true
-            },{
-              id: '9101-2',
-              name: '环形灯',
-              sensor: '无',
+            },
+            {
+              id: "9101-2",
+              name: "环形灯",
+              sensor: "无",
               online: true
             }
           ]
-        },
+        }
       ]
-    }
+    };
   },
   mounted() {
     this.oriFloors = JSON.parse(JSON.stringify(this.floors));
   },
   methods: {
     clearSelectRow() {
-      this.selectedRowKeys = []
+      this.selectedRowKeys = [];
     },
     reset() {
       this.floors = JSON.parse(JSON.stringify(this.oriFloors));
     },
     handleOk() {
       this.showBatchCL = false;
-      this.$message.success('设置成功')
+      // this.$message.success("设置成功");
     },
     handleCardClick() {
       this.showBatchCL = true;
-      this.formData = {}
+      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
-      objarr.forEach(item=>{
+      let app = this;
+      objarr.forEach(item => {
         if (item.devices) {
-          item.devices = item.devices.filter(item=>{
-            if (!app.queryData.switch || app.queryData.switch=='0') {
+          item.devices = item.devices.filter(item => {
+            if (!app.queryData.switch || app.queryData.switch == "0") {
             } else {
-              return app.queryData.switch==item.online
+              return app.queryData.switch == item.online;
             }
             return true;
-          })
+          });
         }
-      })
-      this.floors = objarr
+      });
+      this.floors = objarr;
     },
     onSelectChange(val) {
-      this.selectedRowKeys = val
+      this.selectedRowKeys = val;
     },
     toggleOnline(device) {
-      device.online=!device.online;
+      device.online = !device.online;
     },
     floorChange(val) {
-      let obj = val.replace('#','')
+      let obj = val.replace("#", "");
       this.currFloor = obj;
     },
     getContainer() {
-      return this.$refs.airContainerRight
+      return this.$refs.airContainerRight;
     },
     toggleShowCard() {
       this.showCard = !this.showCard;
     },
     allPowerOn() {
       let app = this;
-      this.$store.loadingStore().open()
-      setTimeout(function () {
-        app.floors.forEach(item=>{
+      this.$store.loadingStore().open();
+      let that = this;
+      setTimeout(function() {
+        app.floors.forEach(item => {
           if (item.devices) {
-            item.devices.forEach(i=>{
-              i.online = false
-            })
+            item.devices.forEach(i => {
+              if (!that.selectedRowKeys || that.selectedRowKeys.length == 0 || that.selectedRowKeys.indexOf(i.id) != -1) {
+                i.online = true;
+              }
+            });
           }
-        })
-        app.$store.loadingStore().close()
-        app.$message.success('执行成功')
-      },2000)
+        });
+        app.$store.loadingStore().close();
+        app.$message.success("执行成功");
+      }, 1000);
     },
     allPowerOff() {
       let app = this;
-      this.$store.loadingStore().open()
-      setTimeout(function () {
-        app.floors.forEach(item=>{
+      this.$store.loadingStore().open();
+      let that = this;
+      setTimeout(function() {
+        app.floors.forEach(item => {
           if (item.devices) {
-            item.devices.forEach(i=>{
-              i.online = true
-            })
+            item.devices.forEach(i => {
+              if (!that.selectedRowKeys || that.selectedRowKeys.length == 0 || that.selectedRowKeys.indexOf(i.id) != -1) {
+                i.online = false;
+              }
+            });
           }
-        })
-        app.$store.loadingStore().close()
-        app.$message.success('执行成功')
-      },2000)
+        });
+        app.$store.loadingStore().close();
+        app.$message.success("执行成功");
+      }, 1000);
+    },
+    floorsDevicesAll() {
+      let size = 0;
+      this.floors.forEach(item => {
+        if (item.devices) {
+          item.devices.forEach(i => {
+            size++;
+          });
+        }
+      });
+      return size;
     }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -598,7 +645,6 @@ export default {
   width: 100%;
   height: 100%;
   .sceneCard-query {
-
   }
   .sceneCard-control {
     margin-top: 12px;
@@ -618,7 +664,7 @@ export default {
     }
     .airContainer-right {
       display: inline-block;
-      width: 85%;
+      width: 100%;
       height: 100%;
       vertical-align: top;
       padding: 12px 20px;
@@ -640,4 +686,4 @@ export default {
     }
   }
 }
-</style>
+</style>