我正在显示包含来自 Google Firestore 的数据的卡片。其中一个字段是“状态”。状态可以从应用程序外部远程打开和关闭。我希望状态在 5 分钟后或在 5 分钟没有更新文档后自动变为“关闭”。
如果用户失去连接并且无法再发送“状态”:“关闭”消息,我想这样做。我不希望卡片永远只说“开”。
我正在使用 Vue.js 并尝试了一些不同的东西,但我不太确定如何实现这一点。如果这个问题更适合不同的网站,我深表歉意。我查找了类似的问题,但找不到任何东西。
这是一个屏幕截图,可以可视化我在问什么。如果未在 5 分钟内更新,我希望状态变为“关闭”。或任何时间。



<div >
<div class="ma-4">
<div centered class="text-lg-center headline">
Live Middleware Status
<p v-bind="allig">{{ seconds }}</p>
</div>
</div>
<v-card slow v-bind="allig" :class="`mx-4 my-4 ${user.Status}`" v-for="user in users" :key="user.id">
<v-card-title flat class="pa-n3">
<v-flex class="mx-auto" xs6 sm4 md2 lg2>
<div class="caption grey--text">Location Site ID</div>
<div class="title">{{user.id}}</div>
</v-flex>
<v-flex class="mr-auto " xs6 sm4 md2 lg2>
<div class="caption grey--text">ID</div>
<div class=" ml-n12 title">{{user.CustomerID}}</div>
</v-flex>
<v-flex style :class="`mx-auto ${user.Status}`" xs6 sm4 md2 lg2>
<div class="caption grey--text">Current Status</div>
<div class="status title mx-2">{{user.Status}}</div>
</v-flex>
<v-flex style class="mx-auto caption green--text" xs6 sm4 md2 lg2>
<div class="caption grey--text">Last Message</div>
<div class="Green my-2 title">{{user.TimeStamp}}</div>
</v-flex>
</v-card-title>
</v-card>
</div>
</template>
<script>
// eslint-disable-next-line
import firestore from "firestore";
// eslint-disable-next-line
import db from "@/components/fbInit";
import firebase from "firebase";
export default {
// eslint-disable-next-line
components: { },
data() {
return {
wide: false,
ToggleDelete: false,
card: true,
light: true,
seconds: "",
users: [],
links: [{ route: "/logs" }]
};
},
};
</script>
宝慕林4294392
慕桂英4014372
随时随地看视频慕课网APP
相关分类