449 lines
11 KiB
Vue
449 lines
11 KiB
Vue
<template>
|
||
<view>
|
||
<view class="flex items-center h-[60px] mx-3 font-bold">
|
||
<view>日期：</view>
|
||
<view class="bg-[rgba(0,0,0,0.5)] rounded-full px-2 py-1.5 mr-5">
|
||
<picker :value="timeText" mode="date" @change="changeDate">
|
||
<up-icon
|
||
:label="timeText"
|
||
color="#ffffff"
|
||
label-color="#ffffff"
|
||
labelPos="left"
|
||
name="arrow-down-fill"
|
||
size="32rpx"
|
||
space="16rpx"
|
||
></up-icon>
|
||
</picker>
|
||
</view>
|
||
<view>事件：</view>
|
||
<view class="bg-[rgba(0,0,0,0.5)] rounded-full px-2 py-1.5 mr-1">
|
||
<picker
|
||
:value="index"
|
||
mode="selector"
|
||
:range="range"
|
||
range-key="name"
|
||
@change="changeEvent"
|
||
>
|
||
<up-icon
|
||
:label="range[index].name"
|
||
color="#ffffff"
|
||
label-color="#ffffff"
|
||
labelPos="left"
|
||
name="arrow-down-fill"
|
||
size="32rpx"
|
||
space="16rpx"
|
||
></up-icon>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<scroll-view
|
||
v-if="deviceInfo"
|
||
scroll-y="true"
|
||
:style="{ height: `calc(${deviceInfo.screenHeight - deviceInfo.safeArea.top - 60}px)` }"
|
||
lower-threshold="100"
|
||
@refresherrefresh="refresherList"
|
||
:refresher-enabled="true"
|
||
@scrolltolower="nextPage"
|
||
:refresher-triggered="refresherTriggered"
|
||
>
|
||
<view style="padding: 0 0 calc(env(safe-area-inset-bottom) + 250rpx) 0">
|
||
<view v-if="list.length === 0 && requestFinished">
|
||
<image
|
||
class="empty-list"
|
||
src="/static/images/background_empty_list.png"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view class="empty-list-text">暂无数据</view>
|
||
</view>
|
||
<view v-else>
|
||
<div class="flex flex-col relative pl-5 text-base">
|
||
<div
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
class="relative flex items-start pb-10 last:pb-0"
|
||
@click="toDetail(item)"
|
||
>
|
||
<div class="w-16 h-16 bg-#eeeeee rounded-full absolute left-0 top-2"></div>
|
||
<div
|
||
v-if="index !== list.length - 1"
|
||
class="absolute left-4 top-16 w-8 h-full bg-#eeeeee"
|
||
></div>
|
||
<div class="ml-5">
|
||
<div class="font-bold pb-3">{{ item.recordStr }}</div>
|
||
<view v-if="item.videoUrl !== ''" @click.stop="playFullScreen(index)">
|
||
<video
|
||
:id="`video${index}`"
|
||
class="w-300 h-225"
|
||
object-fit="cover"
|
||
:src="item.videoUrl"
|
||
></video>
|
||
</view>
|
||
<image
|
||
class="w-300 h-225"
|
||
v-else-if="item.imagesUrl"
|
||
:src="item.imagesUrl"
|
||
mode="aspectFill"
|
||
@click.stop="previewImage(item.imagesUrl)"
|
||
></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="button">
|
||
<view class="button-reset" @click="reset">清空记录</view>
|
||
<view class="button-create" @click="syncRecord">同步记录</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref } from 'vue'
|
||
import { timeFormat } from 'uview-plus'
|
||
import { useBasicStore } from '@/stores/basic'
|
||
import { useBluetoothStore } from '@/stores/bluetooth'
|
||
import { clearRecordRequest, getEventRecordListRequest } from '@/api/record'
|
||
import { useUserStore } from '@/stores/user'
|
||
|
||
const $basic = useBasicStore()
|
||
const $bluetooth = useBluetoothStore()
|
||
const $user = useUserStore()
|
||
|
||
const list = ref([])
|
||
const pageNo = ref(1)
|
||
const pageSize = 50
|
||
const total = ref(0)
|
||
const lockId = ref(null)
|
||
const startDate = ref(0)
|
||
const endDate = ref(0)
|
||
|
||
const range = ref([
|
||
{ name: '全部事件', lockEventType: 0 },
|
||
{ name: '开锁事件', lockEventType: 10 },
|
||
{ name: '异常事件', lockEventType: 20 },
|
||
{ name: '门铃事件', lockEventType: 30 },
|
||
{ name: '视频事件', lockEventType: 40 }
|
||
])
|
||
|
||
const timeText = ref('今天')
|
||
const index = ref(0)
|
||
|
||
const deviceInfo = ref(null)
|
||
const requestFinished = ref(false)
|
||
const refresherTriggered = ref(false)
|
||
|
||
const playFullScreen = index => {
|
||
const videoContext = uni.createVideoContext(`video${index}`)
|
||
videoContext.requestFullScreen({ direction: 0 })
|
||
}
|
||
|
||
const previewImage = url => {
|
||
uni.previewImage({
|
||
urls: [url]
|
||
})
|
||
}
|
||
|
||
const changeDate = async value => {
|
||
if (value.detail.value === timeFormat(new Date(), 'yyyy-mm-dd')) {
|
||
timeText.value = '今天'
|
||
} else {
|
||
timeText.value = value.detail.value
|
||
}
|
||
startDate.value = new Date(value.detail.value).setHours(0, 0, 0, 0)
|
||
endDate.value = startDate.value + 24 * 60 * 60 * 1000 - 1
|
||
pageNo.value = 1
|
||
const { code, message } = await getList({
|
||
pageNo: pageNo.value
|
||
})
|
||
if (code !== 0) {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
const changeEvent = async value => {
|
||
index.value = Number(value.detail.value)
|
||
pageNo.value = 1
|
||
const { code, message } = await getList({
|
||
pageNo: pageNo.value
|
||
})
|
||
if (code !== 0) {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
uni.showLoading({
|
||
title: '加载中',
|
||
mask: true
|
||
})
|
||
deviceInfo.value = await $basic.getDeviceInfo()
|
||
lockId.value = $bluetooth.currentLockInfo.lockId
|
||
startDate.value = new Date().setHours(0, 0, 0, 0)
|
||
endDate.value = startDate.value + 24 * 60 * 60 * 1000 - 1
|
||
const { code, message } = await getList({
|
||
pageNo: pageNo.value
|
||
})
|
||
requestFinished.value = true
|
||
uni.hideLoading()
|
||
if (code !== 0) {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
|
||
const reset = async () => {
|
||
uni.showModal({
|
||
title: '是否要删除操作记录？',
|
||
content: '被删除的记录不能恢复',
|
||
async success(res) {
|
||
if (res.confirm) {
|
||
const netWork = await $basic.getNetworkType()
|
||
if (!netWork) {
|
||
return
|
||
}
|
||
await deleteData()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const deleteData = async () => {
|
||
uni.showLoading({
|
||
title: '删除中'
|
||
})
|
||
|
||
const { code: requestCode, message } = await clearRecordRequest({
|
||
lockId: lockId.value
|
||
})
|
||
if (requestCode === 0) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: `删除成功`,
|
||
icon: 'none'
|
||
})
|
||
pageNo.value = 1
|
||
await getList({
|
||
pageNo: pageNo.value
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
const refresherList = async () => {
|
||
refresherTriggered.value = true
|
||
pageNo.value = 1
|
||
const { code, message } = await getList({
|
||
pageNo: pageNo.value
|
||
})
|
||
if (code === 0) {
|
||
uni.showToast({
|
||
title: '刷新成功',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
refresherTriggered.value = false
|
||
}
|
||
|
||
const nextPage = async () => {
|
||
if (total.value <= pageNo.value * pageSize) {
|
||
return
|
||
}
|
||
const page = pageNo.value + 1
|
||
const params = {
|
||
pageNo: page
|
||
}
|
||
const { code, message } = await getList(params)
|
||
if (code === 0) {
|
||
pageNo.value = page
|
||
} else {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
const getList = async params => {
|
||
const { code, data, message } = await getEventRecordListRequest({
|
||
...params,
|
||
pageNo: params.pageNo,
|
||
lockId: lockId.value,
|
||
startDate: startDate.value,
|
||
endDate: endDate.value,
|
||
lockEventType: range.value[index.value].lockEventType,
|
||
pageSize
|
||
})
|
||
if (code === 0) {
|
||
total.value = data.total
|
||
if (params.pageNo === 1) {
|
||
list.value = data.list
|
||
} else {
|
||
list.value = list.value.concat(data.list)
|
||
}
|
||
return { code }
|
||
}
|
||
return { code, message }
|
||
}
|
||
|
||
const syncRecord = async () => {
|
||
uni.showLoading({
|
||
title: '同步中'
|
||
})
|
||
const { code, message } = await $bluetooth.syncRecord({
|
||
keyId: $bluetooth.keyId.toString(),
|
||
uid: $user.userInfo.uid.toString()
|
||
})
|
||
$bluetooth.closeBluetoothConnection()
|
||
uni.hideLoading()
|
||
if (code === 0) {
|
||
uni.showToast({
|
||
title: '同步成功',
|
||
icon: 'none'
|
||
})
|
||
pageNo.value = 1
|
||
await getList({
|
||
pageNo: pageNo.value
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
const toDetail = item => {
|
||
$basic.routeJump({
|
||
name: 'recordDetail',
|
||
params: {
|
||
info: JSON.stringify({
|
||
operateDate: item.operateDate,
|
||
recordDetailStr: item.recordDetailStr
|
||
})
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $uni-bg-color;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.search {
|
||
padding: 32rpx;
|
||
width: 686rpx !important;
|
||
}
|
||
|
||
.button {
|
||
display: flex;
|
||
align-items: center;
|
||
position: fixed;
|
||
bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
||
font-weight: bold;
|
||
|
||
.button-reset {
|
||
margin-left: 50rpx;
|
||
width: 300rpx;
|
||
height: 88rpx;
|
||
background-color: #df282d;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 88rpx;
|
||
border-radius: 44rpx;
|
||
}
|
||
|
||
.button-create {
|
||
margin-left: 50rpx;
|
||
width: 300rpx;
|
||
height: 88rpx;
|
||
background-color: #63b8af;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 88rpx;
|
||
border-radius: 44rpx;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
height: 120rpx;
|
||
width: 750rpx;
|
||
|
||
.item-left {
|
||
margin-left: 32rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.item-right {
|
||
margin-right: 32rpx;
|
||
margin-left: 32rpx;
|
||
width: 574rpx;
|
||
|
||
.item-right-top {
|
||
max-width: 400rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
padding-bottom: 6rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.item-right-bottom {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background: #ebebeb;
|
||
}
|
||
|
||
.empty-list {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
margin: 300rpx auto 20rpx 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.empty-list-text {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.status {
|
||
margin-left: auto;
|
||
font-size: 26rpx;
|
||
color: #df282d;
|
||
}
|
||
</style>
|