feat(dashboard): adjust some styles and interactions

department drawer display will be delayerd by 200ms, the default card style changes to medium

.env.development

@@ -13,9 +13,9 @@ VUE_APP_GATEWAY = 'isoc.artaplay.com:8443'
 # 71服务器
 # VUE_APP_GATEWAY = 'isoc.artaplay.com:7443'
 # VUE_APP_KEYCLOAK_OPTIONS_REALM = 'smsb-test'
-# 徐州
-# VUE_APP_GATEWAY = 'msr.rondochina.com:6443'
-# VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.rondochina.com:6443/auth'
 # 浪潮云
 # VUE_APP_GATEWAY = 'msr.inspur.com:8084'
 # VUE_APP_KEYCLOAK_OPTIONS_URL = 'https://msr.inspur.com:8084/auth'
+# 唐山
+# VUE_APP_GATEWAY = '103.89.225.99:9500'
+# VUE_APP_KEYCLOAK_OPTIONS_URL = 'http://103.89.225.99:9500/auth'

src/components/service/DepartmentDrawer/index.vue

@@ -88,6 +88,9 @@ export default {
       }
       return Promise.resolve(this.drawer)
     },
+    cancelShow () {
+      this.$needShow = false
+    },
     onOpened () {
       this.$opend = true
     },

src/views/dashboard/Dashboard.vue

@@ -47,6 +47,7 @@ export default {
   },
   methods: {
     onGroupChange (path) {
+      this.total = -1
       this.path = path
     },
     onStatusChange (status) {

src/views/dashboard/components/DeviceCard.vue

@@ -210,10 +210,13 @@ export default {
       return this.hasStatus && !this.isRealOnline
     },
     switchStatusClass () {
-      if (this.powerStatus === Status.WARNING) {
-        return 'el-icon-warning u-color--warning u-font-size--2xl'
-      }
-      return this.switchStatus === Power.ON ? 'on' : this.switchStatus === Power.OFF ? 'off' : 'other'
+      return this.powerStatus === Status.WARNING
+        ? 'el-icon-warning u-color--warning u-font-size--2xl'
+        : this.switchStatus === Power.ON
+          ? 'on'
+          : this.switchStatus === Power.OFF
+            ? 'off'
+            : 'other'
     },
     statusClass () {
       return this.isOnline ? 'u-color--success dark' : 'u-color--error dark'
@@ -564,7 +567,7 @@ export default {
     display: inline-block;
     position: relative;
     left: $padding--lg;
-    padding: $padding--2xs $padding--sm $padding--2xs $padding;
+    padding: $padding--2xs $padding--sm;
     margin-left: -$spacing--xs;
     border-radius: $radius--sm 0 0 $radius--sm;
     background-color: currentColor;

src/views/dashboard/components/DeviceCardRect.vue

@@ -6,7 +6,7 @@
   >
     <div>
       <div
-        class="l-flex--row c-sibling-item--v u-bold has-active"
+        class="l-flex--row c-sibling-item--v u-color--black u-bold has-active"
         @click="onClick"
       >
         <div class="l-flex__fill c-sibling-item">{{ name }}</div>
@@ -18,9 +18,17 @@
           class="l-flex__auto c-sibling-item nearest u-font-size--xs u-bold"
           :text="address"
         />
+      </div>
+      <div class="l-flex__none l-flex--row c-sibling-item--v near u-font-size--xs">
+        <div
+          class="l-flex__fill c-sibling-item o-device__info"
+          :class="statusInfoColorClass"
+        >
+          {{ statusInfo }}
+        </div>
         <div
           v-if="isOnline && volume > -1"
-          class="l-flex__none o-device__volume u-color--white u-font-size--sm has-active"
+          class="l-flex__none l-flex--row inline c-sibling-item near o-device__volume u-color--white has-active"
           @click.stop="onVolume"
         >
           <template v-if="volume === 0">
@@ -35,12 +43,6 @@
           </template>
         </div>
       </div>
-      <div
-        v-if="statusTip"
-        class="c-sibling-item--v"
-      >
-        {{ statusTip }}
-      </div>
     </div>
     <template #reference>
       <div
@@ -106,35 +108,52 @@ export default {
       return !this.hasPower || this.hasPowerRealStatus && (this.powerStatus === Status.OK && this.switchStatus !== Power.OFF)
     },
     switchStatusClass () {
-      if (this.powerStatus === Status.WARNING) {
-        return ''
-      }
-      return this.switchStatus === Power.ON ? 'on' : this.switchStatus === Power.OFF ? 'off' : 'other'
+      return this.powerStatus === Status.WARNING
+        ? ''
+        : this.switchStatus === Power.ON
+          ? 'on'
+          : this.switchStatus === Power.OFF
+            ? 'off'
+            : 'other'
     },
     statusClass () {
-      if (this.hasStatus) {
-        return this.isOnline
-          ? this.hasPower
-            ? this.powerStatus === Status.WARNING
-              ? 'u-color--warning'
-              : 'u-color--success dark'
+      return this.hasStatus
+        ? this.isOnline
+          ? this.hasPower && this.hasPowerRealStatus && this.powerStatus === Status.WARNING
+            ? 'u-color--warning'
             : 'u-color--success dark'
           : 'u-color--error dark'
-      }
-      return 'u-color--info light'
+        : 'u-color--info light'
+    },
+    statusInfo () {
+      return this.hasStatus
+        ? this.hasPower && this.hasPowerRealStatus
+          ? this.powerStatus === Status.WARNING
+            ? `电源状态${this.switchStatus === Power.LOADING ? '检测' : ''}异常 ${this.timestamp}`
+            : this.isPowerOpened
+              ? '屏幕已开启'
+              : '屏幕未开启'
+          : this.device.lastOnline
+            ? this.isOnline
+              ? `${this.device.lastOnline} 上线`
+              : `${this.device.lastOnline} 离线`
+            : this.isOnline
+              ? '播控器正常运行中'
+              : '当前播控器已离线'
+        : '检测中...'
     },
-    statusTip () {
-      return this.hasPower && this.hasPowerRealStatus
-        ? this.powerStatus === Status.WARNING
-          ? `电源状态异常，${this.switchStatus === Power.LOADING ? '检测' : '最后上报'}时间 ${this.timestamp}`
-          : this.isPowerOpened
-            ? '屏幕已开启'
-            : '屏幕未开启'
-        : this.device.lastOnline
-          ? this.isOnline
-            ? `${this.device.lastOnline} 上线`
-            : `${this.device.lastOnline} 离线`
-          : ''
+    statusInfoColorClass () {
+      return this.hasStatus
+        ? this.hasPower && this.hasPowerRealStatus
+          ? this.powerStatus === Status.WARNING
+            ? 'u-color--warning'
+            : this.isPowerOpened
+              ? 'u-color--success dark'
+              : 'u-color--warning'
+          : this.isOnline
+            ? 'u-color--info'
+            : 'u-color--error dark'
+        : 'u-color--info'
     },
     volumeTip () {
       if (this.volume > -1) {
@@ -225,8 +244,8 @@ export default {
   }
 
   &__volume {
-    display: inline-block;
     padding: $padding--2xs;
+    line-height: 1;
     border-radius: $radius--sm;
     background-color: $gray--dark;
   }

src/views/dashboard/components/DeviceCardSimple.vue

@@ -1,12 +1,20 @@
 <template>
   <div
     class="o-device u-pointer"
+    :class="statusColorClass"
     :data-id="device.id"
     @click="onClick"
   >
-    <div class="l-flex__none l-flex--row c-sibling-item--v o-device__block u-font-size u-bold">
+    <div class="l-flex__none l-flex--row c-sibling-item--v o-device__block">
+      <div class="l-flex__none l-flex--row center c-sibling-item o-device__status u-font-size">
+        <template v-if="hasStatus">●</template>
+        <i
+          v-else
+          class="el-icon-loading"
+        />
+      </div>
       <auto-text
-        class="l-flex__fill c-sibling-item"
+        class="l-flex__fill c-sibling-item nearest u-color--black u-font-size--sm u-bold"
         :text="name"
       />
       <template v-if="hasStatus">
@@ -16,35 +24,30 @@
         >
           <template #content>{{ powerStatusTip }}</template>
           <i
-            class="l-flex__none c-sibling-item near o-device__status"
+            class="l-flex__none c-sibling-item near o-device__power"
             :class="switchStatusClass"
             @click.stop
           />
         </el-tooltip>
-        <el-tooltip placement="top">
-          <template #content>{{ statusInfoTip }}</template>
-          <div
-            class="l-flex__none o-device__tip u-font-size--xs"
-            :class="statusClass"
-          >
-            <span class="u-color--white">{{ statusTip }}</span>
-          </div>
-        </el-tooltip>
       </template>
-      <i
-        v-else
-        class="l-flex__none c-sibling-item near el-icon-loading"
-      />
     </div>
-    <div class="l-flex__none l-flex--row c-sibling-item--v nearer o-device__block u-relative u-color--blue">
+    <div class="l-flex__none l-flex--row c-sibling-item--v nearest o-device__block u-relative u-color--blue">
       <i class="l-flex__none c-sibling-item el-icon-location-outline u-font-size" />
       <auto-text
         class="l-flex__auto c-sibling-item nearest u-font-size--xs u-bold"
         :text="address"
       />
+    </div>
+    <div class="l-flex__none l-flex--row c-sibling-item--v nearest u-font-size--xs">
+      <div
+        class="l-flex__fill c-sibling-item o-device__info"
+        :class="statusInfoColorClass"
+      >
+        {{ statusInfo }}
+      </div>
       <div
         v-if="isOnline && volume > -1"
-        class="l-flex__none o-device__volume u-color--white u-font-size--sm has-active"
+        class="l-flex__none l-flex--row inline c-sibling-item near o-device__volume u-color--white has-active"
         @click.stop="onVolume"
       >
         <template v-if="volume === 0">
@@ -99,7 +102,7 @@ export default {
       return this.device.address
     },
     powerStatusTip () {
-      return this.hasPower
+      return this.hasPower && this.hasPowerRealStatus
         ? this.powerStatus === Status.WARNING
           ? `电源状态异常，${this.switchStatus === Power.LOADING ? '检测' : '最后上报'}时间 ${this.timestamp}`
           : this.isPowerOpened
@@ -116,32 +119,47 @@ export default {
     isPowerOpened () {
       return !this.hasPower || this.hasPowerRealStatus && (this.powerStatus === Status.OK && this.switchStatus !== Power.OFF)
     },
-    isRealOnline () {
-      return this.hasStatus && this.isOnline && this.isPowerOpened
-    },
-    isRealOffline () {
-      return this.hasStatus && !this.isRealOnline
-    },
     switchStatusClass () {
-      if (this.powerStatus === Status.WARNING) {
-        return 'el-icon-warning u-color--warning u-font-size--2xl'
-      }
-      return this.switchStatus === Power.ON ? 'on' : this.switchStatus === Power.OFF ? 'off' : 'other'
+      return this.powerStatus === Status.WARNING
+        ? 'el-icon-warning u-color--warning u-font-size--xl'
+        : this.switchStatus === Power.ON
+          ? 'on'
+          : this.switchStatus === Power.OFF
+            ? 'off'
+            : 'other'
     },
-    statusClass () {
-      return this.isOnline ? 'u-color--success dark' : 'u-color--error dark'
+    statusColorClass () {
+      return this.hasStatus
+        ? this.isOnline
+          ? this.hasPower && this.hasPowerRealStatus && this.powerStatus === Status.WARNING
+            ? 'u-color--warning'
+            : 'u-color--success dark'
+          : 'u-color--error dark'
+        : 'u-color--info'
     },
-    statusTip () {
-      return this.isOnline ? '在线' : '离线'
+    statusInfo () {
+      return this.hasStatus
+        ? this.hasPower && this.hasPowerRealStatus
+          ? this.powerStatus === Status.WARNING
+            ? '电源状态异常'
+            : this.isPowerOpened
+              ? '屏幕已开启'
+              : '屏幕未开启'
+          : this.device.lastOnline
+            ? this.isOnline
+              ? `${this.device.lastOnline} 上线`
+              : `${this.device.lastOnline} 离线`
+            : this.isOnline
+              ? '播控器正常运行中'
+              : '当前播控器已离线'
+        : '检测中...'
     },
-    statusInfoTip () {
-      return this.device.lastOnline
-        ? this.isOnline
-          ? `${this.device.lastOnline} 上线`
-          : `${this.device.lastOnline} 离线`
-        : this.isOnline
-          ? '播控器正常运行中'
-          : '当前播控器离线了'
+    statusInfoColorClass () {
+      return this.hasPower && this.hasPowerRealStatus && !this.isPowerOpened
+        ? 'u-color--warning'
+        : this.isOnline && !this.hasPower
+          ? 'u-color--info'
+          : ''
     },
     volumeTip () {
       if (this.volume > -1) {
@@ -205,9 +223,8 @@ export default {
   display: inline-flex;
   flex-direction: column;
   padding: $padding--2xs $padding--xs;
-  color: $black;
   line-height: 1;
-  border-radius: $radius;
+  border-radius: $radius--sm;
   background-color: #fff;
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.1);
 
@@ -216,11 +233,15 @@ export default {
   }
 
   &__status {
+    width: 16px;
+  }
+
+  &__power {
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
 
     &.on {
       background: url("~@/assets/icon_on.svg") 0 0 / 100% 100% no-repeat;
@@ -231,26 +252,18 @@ export default {
     }
 
     &.other {
-      width: 54px;
+      width: 40px;
       background: url("~@/assets/icon_on_2.svg") 0 0 / 100% 100% no-repeat;
     }
   }
 
-  &__tip {
-    display: inline-block;
-    position: relative;
-    left: $padding--xs;
-    padding: $padding--2xs $padding--sm $padding--2xs $padding;
-    border-radius: $radius--sm 0 0 $radius--sm;
-    background-color: currentColor;
+  &__info {
+    padding: $padding--2xs 0;
   }
 
   &__volume {
-    display: inline-block;
-    position: relative;
-    left: $padding--xs;
     padding: $padding--2xs;
-    border-radius: $radius--sm 0 0 $radius--sm;
+    border-radius: $radius--sm;
     background-color: $gray--dark;
   }
 }

src/views/dashboard/components/DeviceDashboard.vue

@@ -9,6 +9,7 @@
         <div
           class="l-flex__self u-ellipsis has-active"
           @mouseenter="onChooseDepartment"
+          @mouseleave="onLeaveDepartment"
           @click="onChooseDepartment"
         >
           {{ group.name }}
@@ -97,8 +98,10 @@ export default {
   },
   created () {
     this.$timer = -1
+    this.$mouseTimer = -1
   },
   beforeDestroy () {
+    clearTimeout(this.$mouseTimer)
     this.onResetOptions()
   },
   methods: {
@@ -123,9 +126,15 @@ export default {
       }
     },
     onChooseDepartment () {
-      this.$refs.departmentDrawer.show().then(visible => {
-        this.loading = !visible
-      })
+      this.$mouseTimer = setTimeout(() => {
+        this.$refs.departmentDrawer.show().then(visible => {
+          this.loading = !visible
+        })
+      }, 200)
+    },
+    onLeaveDepartment () {
+      clearTimeout(this.$mouseTimer)
+      this.$refs.departmentDrawer.cancelShow()
     },
     onRefresh () {
       this.getDeviceStatisticsByPath()

src/views/dashboard/components/DeviceGroupLevel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="c-device-group-level">
+  <div>
     <template v-if="hasData">
       <device-group-level-item
         v-for="item in groupOptions.list"
@@ -64,9 +64,16 @@ export default {
       }
       this.onResetGroupOptions()
 
-      const groupOptions = this.createGroupOptions({ loading: true })
+      const groupOptions = this.createGroupOptions(
+        this.total === 0
+          ? { loaded: true }
+          : { loading: true }
+      )
       this.groupOptions = groupOptions
       this.onChanged()
+      if (this.total <= 0) {
+        return
+      }
 
       getDepartmentDeviceTreeByGroup(this.path, { custom: true }).then(
         ({ data }) => {
@@ -118,9 +125,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.c-device-group-level {
-  min-height: 400px;
-}
-</style>

src/views/dashboard/components/DeviceGroups.vue

@@ -90,7 +90,7 @@ import VolumeDrawer from './DrawerVolumeSettings.vue'
 const groupStyleCommands = new Set(['tile', 'level'])
 const defaultGroupStyle = 'tile'
 const cardStyleCommands = new Set(['big', 'medium', 'rect'])
-const defaultcardStyle = 'big'
+const defaultcardStyle = 'medium'
 
 export default {
   name: 'DeviceGroups',