refactor: some styles

src/components/tree/DeviceGroupTree/index.vue

@@ -22,7 +22,13 @@
       @click="getDevices"
     />
     <template v-else>
-      <template v-if="groups.length">
+      <div
+        v-if="isEmpty"
+        class="c-tree__empty"
+      >
+        暂无设备
+      </div>
+      <template v-else>
         <div class="l-flex__none l-flex--row has-bottom-padding">
           <div class="l-flex__auto" />
           <search-input
@@ -39,72 +45,73 @@
           </button>
         </div>
         <div
-          class="l-flex__none l-flex--row c-tree__title c-tree__content u-pointer"
-          @click="onAllToggle"
+          v-if="isEmptySeach"
+          class="c-tree__empty"
         >
-          <span class="l-flex__auto">全部设备</span>
-          <el-checkbox
-            :value="isAll"
-            :indeterminate="isIndeterminate"
-            class="l-flex__none c-tree__checkbox"
-          />
+          暂无设备
         </div>
-        <div class="l-flex__auto l-flex--col c-tree__list u-overflow-y--auto">
+        <template v-else>
           <div
-            v-for="group in groups"
-            :key="group.id"
-            class="l-flex__none"
+            class="l-flex__none l-flex--row c-tree__title c-tree__content u-pointer"
+            @click="onAllToggle"
           >
+            <span class="l-flex__auto">全部设备</span>
+            <el-checkbox
+              :value="isAll"
+              :indeterminate="isIndeterminate"
+              class="l-flex__none c-tree__checkbox"
+            />
+          </div>
+          <div class="l-flex__auto l-flex--col u-overflow-y--auto">
             <div
-              class="c-tree__content u-pointer"
-              @click="onGroupToggle(group)"
-            >
-              <i
-                class="c-tree__expand el-icon-arrow-right"
-                :class="{ expand: group.expand }"
-              />
-              <span class="c-tree__label">{{ group.name }}</span>
-              <el-checkbox
-                v-model="group.all"
-                class="l-flex__none"
-                :indeterminate="group.indeterminate"
-                :disabled="group.empty"
-                @change="onGroupAllChange(group)"
-                @click.native.stop
-              />
-            </div>
-            <div
-              v-show="group.expand"
-              class="c-tree__list"
+              v-for="group in groups"
+              :key="group.id"
+              class="l-flex__none"
             >
               <div
-                v-if="group.empty"
-                class="c-tree__list-empty"
-              >
-                暂无设备
-              </div>
-              <div
-                v-for="device in group.list"
-                :key="device.id"
+                v-if="!onlyOneGroup"
                 class="c-tree__content u-pointer"
-                @click="onDeviceToggle(group, device)"
+                @click="onGroupToggle(group)"
               >
-                <span class="c-tree__label">{{ device.name }} {{ showRatio ? device.resolutionRatio : '' }}</span>
+                <i
+                  class="c-tree__expand el-icon-arrow-right"
+                  :class="{ expand: group.expand }"
+                />
+                <span class="c-tree__label">{{ group.name }}</span>
                 <el-checkbox
-                  :value="device.checked"
-                  class="l-flex__none c-tree__checkbox"
+                  v-model="group.all"
+                  class="l-flex__none"
+                  :indeterminate="group.indeterminate"
+                  :disabled="group.empty"
+                  @change="onGroupAllChange(group)"
+                  @click.native.stop
                 />
               </div>
+              <div v-show="onlyOneGroup || group.expand">
+                <div
+                  v-if="group.empty"
+                  class="c-tree__empty--content"
+                >
+                  暂无设备
+                </div>
+                <div
+                  v-for="device in group.list"
+                  :key="device.id"
+                  class="c-tree__content u-pointer"
+                  :class="{ sub: !onlyOneGroup }"
+                  @click="onDeviceToggle(group, device)"
+                >
+                  <span class="c-tree__label">{{ device.name }} {{ isGroupTab ? device.resolutionRatio : '' }}</span>
+                  <el-checkbox
+                    :value="device.checked"
+                    class="l-flex__none c-tree__checkbox"
+                  />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </template>
       </template>
-      <div
-        v-else
-        class="c-tree__empty"
-      >
-        暂无设备
-      </div>
     </template>
   </div>
 </template>
@@ -118,16 +125,26 @@ export default {
     return {
       loading: false,
       error: false,
+      active: 'group',
       deviceName: '',
+      isEmpty: true,
       isAll: false,
       isIndeterminate: false,
-      groups: [],
-      active: 'group'
+      groups: []
     }
   },
   computed: {
-    showRatio () {
+    isGroupTab () {
       return this.active === 'group'
+    },
+    isEmptySeach () {
+      return !this.groups.some(({ empty }) => !empty)
+    },
+    onlyOneGroup () {
+      if (this.isGroupTab) {
+        return this.groups.length < 2
+      }
+      return false
     }
   },
   watch: {
@@ -211,7 +228,13 @@ export default {
       this.getDevicesByActive().then(
         data => {
           this.$groups = data
-          this.onSearch()
+          const { length } = data
+          if (length === 0 || !data.some(({ list }) => list.length)) {
+            this.isEmpty = true
+          } else {
+            this.isEmpty = false
+            this.onSearch()
+          }
         },
         () => {
           this.error = true

src/scss/bem/_component.scss

@@ -191,10 +191,6 @@
       text-align: left;
       line-height: 1;
     }
-
-    .c-grid-form__label ~ .c-grid-form__label {
-      padding-top: 2px;
-    }
   }
 
   &__row {
@@ -424,15 +420,15 @@
     align-items: center;
     padding: 6px 6px 6px 0;
 
+    &.sub {
+      padding-left: 30px;
+    }
+
     &:hover {
       background-color: $blue--light;
     }
   }
 
-  &__list > &__content {
-    padding-left: 30px;
-  }
-
   &__expand {
     flex: none;
     display: inline-flex;
@@ -455,12 +451,6 @@
     pointer-events: none;
   }
 
-  &__list-empty {
-    padding: 6px 0 6px 30px;
-    color: $info;
-    font-size: 12px;
-  }
-
   &__empty {
     padding: $spacing;
     color: $black;
@@ -468,6 +458,12 @@
     font-weight: bold;
     text-align: center;
   }
+
+  &__empty--content {
+    padding: 6px 0 6px 30px;
+    color: $info;
+    font-size: 12px;
+  }
 }
 
 .c-footer {

src/views/device/detail/components/DeviceInvoke/mixins/TaskDialog.vue

@@ -115,25 +115,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.o-program {
-  position: relative;
-  height: 48px;
-  margin-top: 10px;
-  color: $blue;
-  font-size: 16px;
-  line-height: 1;
-  border-radius: $radius--mini;
-  border: 1px solid $gray;
-
-  &__name {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/device/timeline/index.vue

@@ -193,7 +193,7 @@ import {
 } from '@/api/device'
 import {
   EventFreq,
-  ScheduleType
+  EventTarget
 } from '@/constant'
 import { createListOptions } from '@/utils'
 import {
@@ -483,13 +483,13 @@ export default {
     onView () {
       if (this.programProxy) {
         switch (this.programProxy.event.target.type) {
-          case ScheduleType.CALENDAR:
+          case EventTarget.PROGRAM:
             window.open(this.$router.resolve({
               name: 'program',
               params: { id: this.programProxy.event.target.id }
             }).href, '_blank')
             break
-          case ScheduleType.RECUR:
+          case EventTarget.RECUR:
             this.$refs.scheduleDialog.show(this.programProxy.event.target.id)
             break
           default: