xuqianhao/pblvue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
赵正易 2025-02-06 13:19:49 +08:00
parent cf4303232e
commit 761ad3d66d
2 changed files with 78 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/PBL/TVScreen/components/BoardTable.vue
View File

@ -1,19 +1,24 @@
<template>
<div>
<!-- <div class="title">货架操作</div> -->
<el-table height="240" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
<el-table-column type="index" width="50" align="center" />
<el-table-column prop="shelfCode" label="货架号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="lightOperation" label="操作类别" :show-overflow-tooltip="true">
<template #default="scope">
<el-tag v-if="scope.row.lightOperation === 1" type="success">亮灯</el-tag>
<el-tag v-if="scope.row.lightOperation === 2" type="info">灭灯</el-tag>
</template>
</el-table-column>
<!-- <el-table-column prop="operationer" label="操作来源" align="center" :show-overflow-tooltip="true" /> -->
<el-table-column prop="createdTime" label="操作时间" align="center" :show-overflow-tooltip="true" />
</el-table>
</div>
<div>
<!-- <div class="title">货架操作</div> -->
<el-table height="240" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
<el-table-column type="index" width="50" align="center" />
<el-table-column prop="shelfCode" label="货架号" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="layerNum" label="层号" :show-overflow-tooltip="true">
<template #default="scope">
<span>{{ scope.row.layerNum === '1' ? '上层' : '中层' }}</span>
</template>
</el-table-column>
<el-table-column prop="lightOperation" label="操作类别" :show-overflow-tooltip="true">
<template #default="scope">
<el-tag v-if="scope.row.lightOperation === 1" type="success">亮灯</el-tag>
<el-tag v-if="scope.row.lightOperation === 2" type="info">灭灯</el-tag>
</template>
</el-table-column>
<!-- <el-table-column prop="operationer" label="操作来源" align="center" :show-overflow-tooltip="true" /> -->
<el-table-column prop="createdTime" label="操作时间" align="center" :show-overflow-tooltip="true" />
</el-table>
</div>
</template>
<script setup>
@ -22,36 +27,36 @@ import { listLightLog } from '@/api/PBL/lightlog.js'
const loading = ref(false)
const dataList = ref([])
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
timeRange: [proxy.dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), proxy.dayjs().add(1, 'day').format('YYYY-MM-DD 23:59:59')],
sort: 'createdTime',
sortType: 'desc'
pageNum: 1,
pageSize: 10,
timeRange: [proxy.dayjs().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), proxy.dayjs().add(1, 'day').format('YYYY-MM-DD 23:59:59')],
sort: 'createdTime',
sortType: 'desc'
})
function getList() {
listLightLog(queryParams).then((res) => {
const { code, data } = res
if (code == 200) {
dataList.value = data.result
}
})
listLightLog(queryParams).then((res) => {
const { code, data } = res
if (code == 200) {
dataList.value = data.result
}
})
}
// 查询
function handleQuery() {
getList()
getList()
}
handleQuery()
// 自动获取数据
let timer1 = null
const clearSearchTimer = () => {
clearInterval(timer1)
timer1 = null
clearInterval(timer1)
timer1 = null
}
const createSearchTimer = () => {
clearSearchTimer()
timer1 = setInterval(() => {
handleQuery()
}, 1000 * 5)
clearSearchTimer()
timer1 = setInterval(() => {
handleQuery()
}, 1000 * 5)
}
// 自动滚动
@ -59,31 +64,31 @@ let timer2 = null
let tableRef = ref(null)
const clearScroll = () => {
clearInterval(timer2)
timer2 = null
clearInterval(timer2)
timer2 = null
}
const createScroll = () => {
clearScroll()
// 拿到 table
const _table = tableRef.value.layout.table.refs
// // 拿到可以滚动的元素
const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
timer2 = setInterval(() => {
tableWrapper.scrollTop += 1
// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
tableWrapper.scrollTop = 0
}
}, 100)
clearScroll()
// 拿到 table
const _table = tableRef.value.layout.table.refs
// // 拿到可以滚动的元素
const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
timer2 = setInterval(() => {
tableWrapper.scrollTop += 1
// 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
tableWrapper.scrollTop = 0
}
}, 100)
}
onMounted(() => {
createSearchTimer()
createScroll()
createSearchTimer()
createScroll()
})
onUnmounted(() => {
clearScroll()
clearSearchTimer()
clearScroll()
clearSearchTimer()
})
</script>

24
src/views/PBL/TVScreen/index.vue
View File

@ -201,9 +201,29 @@ onMounted(() => {
// 播放音频
const audioSource = '@/assets/voice/test.wav'
const audioPlayer = ref(null)
let isAudioWait = ref(false)
let endTimeDelayId = null
function loadAudio() {
audioPlayer.value.src = new URL(audioSource, import.meta.url).href
if (audioPlayer.value) {
audioPlayer.value.src = new URL(audioSource, import.meta.url).href
}
}
function playAudio() {
if (!isAudioWait.value) {
isAudioWait.value = true
audioPlayer.value.play().catch((error) => {
console.error('播放音频时发生错误:', error)
isAudioWait.value = false
})
audioPlayer.value.addEventListener('ended', onEnded)
}
}
function onEnded() {
audioPlayer.value.removeEventListener('ended', onEnded)
// 自动定时延迟 1分钟
endTimeDelayId = setTimeout(() => {
isAudioWait.value = false
}, 1000 * 60 * 1)
}
onMounted(loadAudio)