|
|
@@ -17,6 +17,11 @@
|
|
|
v-bind="getAttrs(item.key)"
|
|
|
>
|
|
|
<div class="o-link-device__name u-bold">{{ item.label }}</div>
|
|
|
+ <device-player
|
|
|
+ v-if="item.key === 'led'"
|
|
|
+ :device="device"
|
|
|
+ autoplay
|
|
|
+ />
|
|
|
</div>
|
|
|
<div
|
|
|
v-for="line in lines"
|
|
|
@@ -33,7 +38,6 @@
|
|
|
<script>
|
|
|
import { getBoundThirdPartyDevices } from '@/api/external'
|
|
|
import { ThirdPartyDevice } from '@/constant'
|
|
|
-import { ScreenshotCache } from '@/utils/cache'
|
|
|
|
|
|
const KeyMap = {
|
|
|
[ThirdPartyDevice.GATEWAY]: 'gateway',
|
|
|
@@ -115,8 +119,7 @@ export default {
|
|
|
receive_card: 2
|
|
|
},
|
|
|
loading: true,
|
|
|
- loaded: false,
|
|
|
- base64: null
|
|
|
+ loaded: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -143,18 +146,10 @@ export default {
|
|
|
this.$timer = setInterval(this.init, 10000)
|
|
|
},
|
|
|
beforeDestroy () {
|
|
|
- if (this.online) {
|
|
|
- ScreenshotCache.unwatch(this.device.id)
|
|
|
- }
|
|
|
clearInterval(this.$timer)
|
|
|
},
|
|
|
methods: {
|
|
|
init () {
|
|
|
- if (this.online) {
|
|
|
- ScreenshotCache.watch(this.device, this.onScreenshotUpdate, 10000)
|
|
|
- } else {
|
|
|
- this.base64 = null
|
|
|
- }
|
|
|
this.getBoundThirdPartyDevices()
|
|
|
},
|
|
|
onScreenshotUpdate ({ waiting, base64 }) {
|
|
|
@@ -188,18 +183,6 @@ export default {
|
|
|
},
|
|
|
getAttrs (key) {
|
|
|
const value = this.linkState[key]
|
|
|
- let style = null
|
|
|
- switch (key) {
|
|
|
- case 'led':
|
|
|
- if (value === 0 && this.base64) {
|
|
|
- style = {
|
|
|
- backgroundImage: `url("${this.base64}")`
|
|
|
- }
|
|
|
- }
|
|
|
- break
|
|
|
- default:
|
|
|
- break
|
|
|
- }
|
|
|
return {
|
|
|
'class': [
|
|
|
key,
|
|
|
@@ -208,8 +191,7 @@ export default {
|
|
|
: value === 1
|
|
|
? 'offline'
|
|
|
: 'unbind'
|
|
|
- ].join(' '),
|
|
|
- style
|
|
|
+ ].join(' ')
|
|
|
}
|
|
|
}
|
|
|
}
|