refactor(dashboard): display style of department filtering

src/components/tree/DepartmentTree/index.vue

@@ -29,6 +29,12 @@ import { getDepartmentTree } from '@/api/user'
 
 export default {
   name: 'DepartmentTree',
+  props: {
+    treeData: {
+      type: Array,
+      default: null
+    }
+  },
   data () {
     return {
       loading: true,
@@ -40,7 +46,14 @@ export default {
     }
   },
   created () {
-    this.getTree()
+    if (this.treeData) {
+      this.loading = false
+      this.groups = this.treeData
+      this.expandedKeys = [this.groups[0].path]
+      this.group = this.groups[0]
+    } else {
+      this.getTree()
+    }
   },
   methods: {
     getTree () {

src/views/dashboard/Dashboard.vue

@@ -2,119 +2,130 @@
   <wrapper
     fill
     margin
-    horizontal
   >
-    <department-tree
-      v-if="multi"
-      class="c-sibling-item c-department-tree"
-      :class="{ 'c-sidebar u-width--md': loaded, 'l-flex__auto': !loaded }"
-      @change="onGroupChanged"
-    />
-    <div
-      v-if="loaded"
-      class="l-flex__fill l-flex--col c-sibling-item"
-    >
+    <div class="l-flex__none l-flex--row c-sibling-item--v c-count">
       <div
-        class="l-flex__none l-flex--row c-sibling-item--v c-count u-pointer"
-        @click="onClickMineDevices"
+        class="l-flex__none c-count__title u-color--black u-bold u-ellipsis"
+        :class="{ 'has-active u-pointer': multi }"
+        @click="onChooseDepartment"
       >
-        <div class="l-flex__none u-color--black u-bold">我的设备</div>
-        <div class="l-flex__none c-count__item u-color--black u-bold u-text--center">
-          <div>总数</div>
-          <i
-            v-if="monitor.loading"
-            class="el-icon-loading"
-          />
-          <div v-else>{{ monitor.total }}</div>
-        </div>
-        <div class="l-flex__none c-count__item u-color--success dark u-bold u-text--center">
-          <div>● 在线</div>
-          <i
-            v-if="monitor.loading"
-            class="el-icon-loading"
-          />
-          <div v-else>{{ monitor.online }}</div>
-        </div>
-        <div class="l-flex__none c-count__item u-color--error dark u-bold u-text--center">
-          <div>● 离线</div>
-          <i
-            v-if="monitor.loading"
-            class="el-icon-loading"
-          />
-          <div v-else>{{ monitor.offline }}</div>
-        </div>
-        <div class="l-flex__none c-count__item u-color--info u-bold u-text--center">
-          <div>● 未启用</div>
-          <i
-            v-if="monitor.loading"
-            class="el-icon-loading"
-          />
-          <div v-else>{{ monitor.inactive }}</div>
-        </div>
         <i
-          class="el-icon-refresh o-icon md u-color--blue has-active"
-          @click.stop="onRefresh"
+          v-if="loading"
+          class="el-icon-loading"
         />
+        {{ group.name }}
       </div>
-      <div
-        v-if="__PLACEHOLDER__"
-        class="l-flex__none c-sibling-item--v far c-cards"
-      >
-        <card
-          class="c-cards__item"
-          type="info"
-          title="总次数"
-          tip="100"
-        />
-        <card
-          class="c-cards__item"
-          type="safety"
-          title="安全异常"
-          desc="累计异常数：30"
-        />
-        <card
-          class="c-cards__item"
-          type="performance"
-          title="性能异常"
-          desc="累计异常数：30"
-          count="3"
-        />
-        <card
-          class="c-cards__item"
-          type="log"
-          title="日志异常"
-          desc="累计异常数：30"
-          count="10"
+      <div class="l-flex__none c-count__item u-color--black u-bold u-text--center">
+        <div>总数</div>
+        <i
+          v-if="monitor.loading"
+          class="el-icon-loading"
         />
-        <card
-          class="c-cards__item"
-          type="date"
-          title="即将空闲排期"
-          count="100"
+        <div v-else>{{ monitor.total }}</div>
+      </div>
+      <div class="l-flex__none c-count__item u-color--success dark u-bold u-text--center">
+        <div>● 在线</div>
+        <i
+          v-if="monitor.loading"
+          class="el-icon-loading"
         />
+        <div v-else>{{ monitor.online }}</div>
       </div>
-      <div class="l-flex__auto l-grid--info c-sibling-item--v far u-overflow-y--auto">
-        <device
-          v-for="item in deviceOptions.list"
-          :key="item.id"
-          :device="item"
+      <div class="l-flex__none c-count__item u-color--error dark u-bold u-text--center">
+        <div>● 离线</div>
+        <i
+          v-if="monitor.loading"
+          class="el-icon-loading"
         />
+        <div v-else>{{ monitor.offline }}</div>
       </div>
-      <div
-        v-if="!deviceOptions.loaded"
-        class="c-sibling-item--v far u-text--center"
-      >
-        <i class="el-icon-loading" />
+      <div class="l-flex__none c-count__item u-color--info u-bold u-text--center">
+        <div>● 未启用</div>
+        <i
+          v-if="monitor.loading"
+          class="el-icon-loading"
+        />
+        <div v-else>{{ monitor.inactive }}</div>
       </div>
+      <i
+        class="el-icon-refresh o-icon md u-color--blue has-active u-pointer"
+        @click="onRefresh"
+      />
+    </div>
+    <div
+      v-if="__PLACEHOLDER__"
+      class="l-flex__none c-sibling-item--v far c-cards"
+    >
+      <card
+        class="c-cards__item"
+        type="info"
+        title="总次数"
+        tip="100"
+      />
+      <card
+        class="c-cards__item"
+        type="safety"
+        title="安全异常"
+        desc="累计异常数：30"
+      />
+      <card
+        class="c-cards__item"
+        type="performance"
+        title="性能异常"
+        desc="累计异常数：30"
+        count="3"
+      />
+      <card
+        class="c-cards__item"
+        type="log"
+        title="日志异常"
+        desc="累计异常数：30"
+        count="10"
+      />
+      <card
+        class="c-cards__item"
+        type="date"
+        title="即将空闲排期"
+        count="100"
+      />
+    </div>
+    <div class="l-flex__auto l-grid--info c-sibling-item--v far u-overflow-y--auto">
+      <device
+        v-for="item in deviceOptions.list"
+        :key="item.id"
+        :device="item"
+      />
+    </div>
+    <div
+      v-if="!deviceOptions.loaded"
+      class="c-sibling-item--v far u-text--center"
+    >
+      <i class="el-icon-loading" />
     </div>
+    <el-drawer
+      title="个人设置"
+      :visible.sync="drawer"
+      direction="ltr"
+      :size="480"
+      :with-header="false"
+      append-to-body
+    >
+      <department-tree
+        class="c-department-tree"
+        :tree-data="groups"
+        @change="onGroupChanged"
+      />
+    </el-drawer>
   </wrapper>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import {
   subscribe,
   unsubscribe
 } from '@/utils/mqtt'
+import { getDepartmentTree } from '@/api/user'
 import {
   getDevicesByAdmin,
   getDeviceStatisticsByCustom
@@ -130,15 +141,22 @@ export default {
   },
   data () {
     return {
-      multi: true,
-      loaded: false,
       monitor: { loading: true },
       deviceOptions: {
         list: [],
         loaded: false
-      }
+      },
+      loading: true,
+      loaded: false,
+      multi: true,
+      drawer: false,
+      groups: null,
+      group: null
     }
   },
+  computed: {
+    ...mapGetters(['tenant', 'org', 'isTopGroup'])
+  },
   created () {
     this.$timer = -1
     subscribe([
@@ -146,6 +164,9 @@ export default {
       '+/+/offline',
       '+/+/calendar/update'
     ], this.onMessage)
+    this.getDepartmentTree()
+    this.group = { path: this.org, name: '我的设备' }
+    this.refreshDevices(true)
   },
   beforeDestroy () {
     clearTimeout(this.$timer)
@@ -157,13 +178,28 @@ export default {
     ], this.onMessage)
   },
   methods: {
-    onGroupChanged ({ id, path, children }) {
-      if (!this.loaded) {
-        this.multi = !!children?.length
+    getDepartmentTree (isClick) {
+      this.loading = true
+      getDepartmentTree().finally(() => {
+        this.loading = false
+      }).then(({ data }) => {
         this.loaded = true
+        if (data[0]?.children?.length) {
+          this.groups = data
+          if (isClick) {
+            this.drawer = true
+          }
+        } else {
+          this.multi = false
+        }
+      })
+    },
+    onGroupChanged ({ path, name }) {
+      if (this.group.path !== path) {
+        this.group = { path, name: path === this.org ? '我的设备' : name }
+        this.refreshDevices(true)
+        this.drawer = false
       }
-      this.$group = { id, path }
-      this.refreshDevices(true)
     },
     onMessage (topic) {
       if (!this.deviceOptions.loaded) {
@@ -188,9 +224,6 @@ export default {
       this.refreshDevices()
     },
     refreshDevices (force) {
-      if (!this.$group) {
-        return
-      }
       if (!force && this.monitor.loading) {
         return
       }
@@ -204,7 +237,11 @@ export default {
       this.monitor = monitor
       clearTimeout(this.$timer)
       this.deviceOptions = { loaded: false }
-      getDeviceStatisticsByCustom(this.$group.id ? { org: this.$group.path } : { tenant: this.$group.path }).then(({ data }) => {
+      getDeviceStatisticsByCustom(
+        this.group.path === this.tenant
+          ? { tenant: this.group.path }
+          : { org: this.group.path }
+      ).then(({ data }) => {
         const { deactivatedTotal, notConnectedTotal, offLineTotal, onLineTotal, total } = data
         monitor.total = total
         monitor.online = onLineTotal
@@ -235,10 +272,10 @@ export default {
         pageSize: total,
         activate: 1
       }
-      if (this.$group.id) {
-        query.org = this.$group.path
+      if (this.group.path === this.tenant) {
+        query.tenant = this.group.path
       } else {
-        query.tenant = this.$group.path
+        query.org = this.group.path
       }
       getDevicesByAdmin(query, { custom: true }).then(
         ({ data }) => {
@@ -254,10 +291,14 @@ export default {
         }
       )
     },
-    onClickMineDevices () {
-      this.$router.push({
-        name: 'device-list'
-      })
+    onChooseDepartment () {
+      if (this.loaded) {
+        if (this.multi) {
+          this.drawer = true
+        }
+      } else if (!this.loading) {
+        this.getDepartmentTree(true)
+      }
     }
   }
 }
@@ -265,9 +306,8 @@ export default {
 
 <style lang="scss" scoped>
 .c-department-tree {
+  height: 100%;
   padding: $spacing--xs;
-  border-radius: $radius;
-  background-color: #fff;
 }
 
 .c-count {
@@ -276,6 +316,10 @@ export default {
   border-radius: $radius;
   background-color: #fff;
 
+  &__title {
+    max-width: 200px;
+  }
+
   &__item > div:first-child {
     margin-bottom: 10px;
   }