设备

packages/device/AppMediaManage/components/Play.vue

@@ -74,7 +74,7 @@
         width="1080px">
         <ai-detail style="background: #FFF;">
           <template #content>
-            <el-alert title="温馨提示：请先在设备管理中绑定行政区划" type="warning" show-icon :closable="false" style="margin-bottom: 12px;"></el-alert>
+            <el-alert title="温馨提示：请先在设备管理中绑定行政区划" type="warning" show-icon :closable="false" style="margin-bottom: 12px;padding: 4px;"></el-alert>
             <div class="container">
               <div class="item">
                 <div class="title">
@@ -92,22 +92,38 @@
               <div class="item">
                 <div class="title">
                   <div class="checkBox">
-                    <el-checkbox v-model="checked">全选</el-checkbox>
+                    <!-- <el-checkbox v-model="isAll">全选</el-checkbox> -->
+                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                   </div>
                   <div>
                     <el-input placeholder="请输入" v-model="input3" class="input-with-select" size="small">
-                      <el-button slot="append" icon="el-icon-search"></el-button>
+                      <el-button slot="append" icon="el-icon-search" @click="searchEquipment"></el-button>
                     </el-input>
                   </div>
                 </div>
-                <div class="content"></div>
+                <div class="content">
+                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+                    <el-checkbox v-for="city in cities" :label="city" :key="city" style="display: block;">{{city}}</el-checkbox>
+                  </el-checkbox-group>
+                </div>
               </div>
               <div class="item">
                 <div class="title">
                   <div>已选择</div>
-                  <el-button type="info" size="small">清空</el-button>
+                  <el-button type="info" size="mini" @click="emptyBtn">清空</el-button>
+                </div>
+                <div class="content">
+                  <el-tag
+                    v-for="tag in tags"
+                    :key="tag.name"
+                    size="mini"
+                    closable
+                    @close="closeTags(tag)"
+                    :type="tag.type"
+                    style="margin-right: 5px;margin-bottom: 5px;">
+                    {{tag.name}}
+                  </el-tag>
                 </div>
-                <div class="content"></div>
               </div>
             </div>
           </template>
@@ -211,11 +227,13 @@ export default {
       mediaList: [],
       equipmentList: [],
       detailDialog: false,
-      checked: false,
+      isAll: false,
+      input3: '',
       defaultProps: {
         children: 'children',
         label: 'label'
       },
+      // tree
       data: [{
         label: '一级 1',
         children: [{
@@ -251,6 +269,20 @@ export default {
           }]
         }]
       }],
+      // 复选框
+      checkAll: false,
+      checkedCities: [],
+      cities: ['上海', '北京', '广州', '深圳','湖北','湖南','河北','河南'],
+      isIndeterminate: true,
+      // 标签
+      tags: [
+        { name: '标签一', type: '' },
+        { name: '标签二', type: 'success' },
+        { name: '标签三', type: 'info' },
+        { name: '标签四', type: 'warning' },
+        { name: '标签五', type: 'danger' }
+      ],
+
 
     }
   },
@@ -292,6 +324,29 @@ export default {
         }
       })
     },
+    // 全选按钮
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    // 复选框
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount == this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    // 搜索设备
+    searchEquipment() {
+      console.log('搜索设备');
+    },
+    // 关闭标签
+    closeTags(tag) {
+      this.tags.splice(this.tags.indexOf(tag), 1);
+    },
+    // 清空标签
+    emptyBtn() {
+      this.tags = []
+    },
     handleNodeClick(data) {
       console.log(data);
     },
@@ -394,6 +449,10 @@ export default {
           align-self: center;
         }
       }
+      .content {
+        padding: 10px;
+        box-sizing: border-box;
+      }
     }
   }
 }