|
|
@@ -1,26 +1,16 @@
|
|
|
<template>
|
|
|
- <wrapper
|
|
|
- class="c-dashboard"
|
|
|
- margin
|
|
|
- >
|
|
|
- <div class="l-flex--row c-dashboard__block c-count">
|
|
|
- <div class="l-flex__none l-flex--row">
|
|
|
- 设备分类:
|
|
|
- <schema-select
|
|
|
- v-model="product"
|
|
|
- :schema="productSelectSchema"
|
|
|
- @change="onProductChange"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="l-flex__none c-count__item u-color--black u-text-center">
|
|
|
- <div>设备总数</div>
|
|
|
+ <wrapper margin>
|
|
|
+ <div class="l-flex--row c-sibling-item--v c-count">
|
|
|
+ <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-text-center">
|
|
|
+ <div class="l-flex__none c-count__item u-color--success dark u-bold u-text-center">
|
|
|
<div>● 在线</div>
|
|
|
<i
|
|
|
v-if="monitor.loading"
|
|
|
@@ -28,7 +18,7 @@
|
|
|
/>
|
|
|
<div v-else>{{ monitor.online }}</div>
|
|
|
</div>
|
|
|
- <div class="l-flex__none c-count__item u-color--error light u-text-center">
|
|
|
+ <div class="l-flex__none c-count__item u-color--error dark u-bold u-text-center">
|
|
|
<div>● 离线</div>
|
|
|
<i
|
|
|
v-if="monitor.loading"
|
|
|
@@ -36,7 +26,7 @@
|
|
|
/>
|
|
|
<div v-else>{{ monitor.offline }}</div>
|
|
|
</div>
|
|
|
- <div class="l-flex__none c-count__item u-color--info u-text-center">
|
|
|
+ <div class="l-flex__none c-count__item u-color--info u-bold u-text-center">
|
|
|
<div>● 未启用</div>
|
|
|
<i
|
|
|
v-if="monitor.loading"
|
|
|
@@ -45,13 +35,13 @@
|
|
|
<div v-else>{{ monitor.inactive }}</div>
|
|
|
</div>
|
|
|
<i
|
|
|
- class="c-count__refresh el-icon-refresh u-pointer"
|
|
|
+ class="c-count__refresh o-icon--active el-icon-refresh u-pointer"
|
|
|
@click="onRefresh"
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="__PLACEHOLDER__"
|
|
|
- class="c-dashboard__block c-cards"
|
|
|
+ class="c-sibling-item--v far c-cards"
|
|
|
>
|
|
|
<card
|
|
|
class="c-cards__item"
|
|
|
@@ -86,7 +76,7 @@
|
|
|
count="100"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div class="l-grid--info c-dashboard__block">
|
|
|
+ <div class="l-grid--info c-sibling-item--v far">
|
|
|
<device
|
|
|
v-for="item in deviceOptions.list"
|
|
|
:key="item.id"
|
|
|
@@ -95,13 +85,13 @@
|
|
|
</div>
|
|
|
<div
|
|
|
v-if="!deviceOptions.loaded"
|
|
|
- class="c-dashboard__block u-text-center"
|
|
|
+ class="c-sibling-item--v far u-text-center"
|
|
|
>
|
|
|
<i class="el-icon-loading" />
|
|
|
</div>
|
|
|
<iframe
|
|
|
v-if="elk"
|
|
|
- class="c-dashboard__block"
|
|
|
+ class="c-sibling-item--v far"
|
|
|
style="height: 850px; border: none;"
|
|
|
:src="elk"
|
|
|
/>
|
|
|
@@ -115,7 +105,6 @@ import {
|
|
|
} from '@/utils/mqtt'
|
|
|
import {
|
|
|
getDevices,
|
|
|
- getProducts,
|
|
|
getDeviceStatistics
|
|
|
} from '@/api/device'
|
|
|
import Card from './components/Card'
|
|
|
@@ -129,14 +118,6 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
- productSelectSchema: {
|
|
|
- remote: getProducts,
|
|
|
- pagination: true,
|
|
|
- placeholder: '全部产品',
|
|
|
- value: 'id',
|
|
|
- label: 'name'
|
|
|
- },
|
|
|
- product: void 0,
|
|
|
monitor: { loading: true },
|
|
|
deviceOptions: {
|
|
|
list: [],
|
|
|
@@ -165,22 +146,25 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
onMessage (topic) {
|
|
|
- const result = /^(\d+)\/(\d+)\/(online|offline)$/.exec(topic)
|
|
|
- if (result && (!this.product || this.product === result[1]) && this.deviceOptions.loaded) {
|
|
|
- const deviceId = result[2]
|
|
|
- const device = this.deviceOptions.list.find(({ id }) => id === deviceId)
|
|
|
- if (device) {
|
|
|
- const status = result[3]
|
|
|
- const onlineStatus = device.onlineStatus === 1 ? 'online' : 'offline'
|
|
|
- if (status === onlineStatus) {
|
|
|
- return
|
|
|
- }
|
|
|
+ if (this.deviceOptions.loaded) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const result = /^\d+\/(\d+)\/(online|offline)$/.exec(topic)
|
|
|
+ if (!result) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const deviceId = result[1]
|
|
|
+ const status = result[2]
|
|
|
+ const device = this.deviceOptions.list.find(({ id }) => id === deviceId)
|
|
|
+ if (device) {
|
|
|
+ const onlineStatus = device.onlineStatus === 1 ? 'online' : 'offline'
|
|
|
+ if (status === onlineStatus) {
|
|
|
+ return
|
|
|
}
|
|
|
- this.onRefresh()
|
|
|
+ } else if (status === 'offline') {
|
|
|
+ return
|
|
|
}
|
|
|
- },
|
|
|
- onProductChange () {
|
|
|
- this.refreshDevices(true)
|
|
|
+ this.refreshDevices()
|
|
|
},
|
|
|
onRefresh () {
|
|
|
this.refreshDevices()
|
|
|
@@ -199,7 +183,7 @@ export default {
|
|
|
this.monitor = monitor
|
|
|
clearTimeout(this.$timer)
|
|
|
this.deviceOptions = { loaded: false }
|
|
|
- getDeviceStatistics(this.product).then(({ data }) => {
|
|
|
+ getDeviceStatistics().then(({ data }) => {
|
|
|
const { notEnabledTotal, offLineTotal, onLineTotal, total } = data
|
|
|
monitor.total = total || 0
|
|
|
monitor.online = onLineTotal || 0
|
|
|
@@ -228,7 +212,6 @@ export default {
|
|
|
getDevices({
|
|
|
pageNum: 1,
|
|
|
pageSize: total,
|
|
|
- productId: this.product,
|
|
|
activate: 2
|
|
|
}, { custom: true }).then(
|
|
|
({ data }) => {
|
|
|
@@ -249,16 +232,9 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.c-dashboard {
|
|
|
- &__block + &__block {
|
|
|
- margin-top: $spacing;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
.c-count {
|
|
|
justify-content: space-between;
|
|
|
- padding: 8px 16px;
|
|
|
- font-weight: bold;
|
|
|
+ padding: 8px $spacing;
|
|
|
border-radius: $radius;
|
|
|
background-color: #fff;
|
|
|
|
|
|
@@ -267,8 +243,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
&__refresh {
|
|
|
- font-size: 24px;
|
|
|
color: $blue;
|
|
|
+ font-size: 24px;
|
|
|
}
|
|
|
}
|
|
|
|