Yaxin
/
5G-Loading-Bay-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增lodash节流，表格无数据展示为空

Browse Source
main
donghao 2 months ago
parent 0cad00f421
commit 181281f39d
7 changed files with 73 additions and 50 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -15,6 +15,7 @@
"dependencies": {
"axios": "^1.8.3",
"echarts": "^5.6.0",
"lodash": "^4.17.21",
"moment": "^2.30.1",
"postcss-scss": "^4.0.9",
"sass": "^1.85.1",

3
pnpm-lock.yaml
Unescape Escape View File

@ -14,6 +14,9 @@ importers:
echarts:
specifier: ^5.6.0
version: 5.6.0
lodash:
specifier: ^4.17.21
version: 4.17.21
moment:
specifier: ^2.30.1
version: 2.30.1

15
src/components/videoPlayer/RealPlayer.vue
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-12 13:48:53
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-17 14:10:46
* @LastEditTime: 2025-03-18 14:38:33
* @FilePath: \5G-Loading-Bay-Web\src\components\videoPlayer\RealPlayer.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@ -11,17 +11,19 @@
<video ref="refPlayer" autoplay controls muted width="100%" height="100%" style="object-fit: fill;"></video>
<!-- <iframe src="http://192.168.10.113:8889/cam/" frameborder="0"></iframe> -->
</div>
<div class="flex items-center justify-center bg-black before-open-video" v-show="!isPlaying" @click.stop="openReal()">
<div class="flex items-center justify-center bg-black before-open-video" v-show="!isPlaying" @click.stop="handleOpen()">
<img src="@/assets/common/player_icon_1.png" alt="">
</div>
<!-- http://192.168.10.113:8889/cam/ -->
</template>
<script setup lang="ts">
import { playRtspApi, stopRtspApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi";
import { nextTick } from 'vue';
import { throttle } from 'lodash';
interface Props {
show: boolean; // 是否关闭
@ -84,6 +86,8 @@ async function stopPlayer() {
}
}
watch(() => props.show, (newVal) => {
if (!newVal) {
stopPlayer()
@ -106,6 +110,11 @@ function openReal() {
console.log("开启")
}
// 使用 throttle 函数创建节流函数
const handleOpen = throttle(() => {
openReal();
}, 1000); // 节流时间为 1000 毫秒（即 1 秒）
defineExpose({
initPlayer
})

60
src/views/dashboard/DeviceStatus.vue
Unescape Escape View File

@ -12,36 +12,35 @@
<div class="px-[16px] device-status-content-box">
<div class="mt-[16px] bg-transparent baseTable_wrap full_table">
<template v-if="pagination.total > 0">
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange">
<template v-slot:actionBar="{ row }">
<ul class="flex table_action_box">
<li class="flex items-center mr-[16px]" @click="openCurrent(row)">
<el-button text>
<span :style="{
fontSize: '14px',
color: '#37DBFF'
}">
即时视频
</span>
</el-button>
</li>
<li class="flex items-center" @click="openHistory(row)">
<el-button text>
<span :style="{
fontSize: '14px',
color: '#37DBFF'
}">
历史视频
</span>
</el-button>
</li>
</ul>
</template>
</BaseTable>
</template>
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange">
<template v-slot:actionBar="{ row }">
<ul class="flex table_action_box">
<li class="flex items-center mr-[16px]" @click="openCurrent(row)">
<el-button text>
<span :style="{
fontSize: '14px',
color: '#37DBFF'
}">
即时视频
</span>
</el-button>
</li>
<li class="flex items-center" @click="openHistory(row)">
<el-button text>
<span :style="{
fontSize: '14px',
color: '#37DBFF'
}">
历史视频
</span>
</el-button>
</li>
</ul>
</template>
</BaseTable>
</div>
</div>
<RealVideoModal v-model:value="isRealOpen" :info="currentRow" @close="isRealOpen = false" />
@ -62,6 +61,7 @@ import outLineIcon from '@/assets/common/outline_icon.png';
import errorIcon from '@/assets/common/error_icon.png';
import { getDeviceStatusApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi";
defineOptions({
name: "DeviceStatusIndex"
});

5
src/views/dashboard/PoleMonitor.scss
Unescape Escape View File

@ -28,6 +28,7 @@
width: 870px;
margin-right: 16px;
&.empty-bg {
height: 680px;
background-image: url("@/assets/common/emptyBg.png");
background-size: 312px 204px;
background-position: center;
@ -47,7 +48,7 @@
img {
max-width: 100%;
max-height: 460px;
object-fit: cover
object-fit: cover;
}
}
@ -81,7 +82,7 @@
width: 100%;
height: 144px;
border-radius: 4px;
object-fit: cover
object-fit: cover;
}
}
.active-slide img,

27
src/views/dashboard/PoleMonitor.vue
Unescape Escape View File

@ -60,7 +60,7 @@
:observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
<swiper-slide v-for="(file, index) in currFileList" :key="index"
@click="handleSlideClick(index)" :class="{ 'active-slide': activeIndex === index }">
<img :src="file?.image_url" v-if="file?.image_url" class="cursor-pointer"/>
<img :src="file?.image_url" v-if="file?.image_url" class="cursor-pointer" />
<SwiperPlayer class="cursor-pointer" :videoUrl="file?.video_url"
v-else-if="file?.video_url" :isPlaying="isPlaying && (activeIndex === index)" />
<div v-else>
@ -74,13 +74,11 @@
<!-- 右侧表格区域 -->
<div class="flex-1 right-panel">
<div class="bg-transparent baseTable_wrap">
<template v-if="pagination.total > 0">
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange"
:row-class-name="handleRowClassName" @row-click="handleRowClick">
</BaseTable>
</template>
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange"
:row-class-name="handleRowClassName" @row-click="handleRowClick">
</BaseTable>
</div>
</div>
</div>
@ -240,11 +238,14 @@ const getList = async () => {
console.log(res.data, 'getList_data')
if (isSuccessApi(res)) {
listData.value = res.data.data;
loadDetail()
pagination.value = {
...pagination.value,
total: res.data.total
};
if (listData.value?.length > 0) {
loadDetail()
pagination.value = {
...pagination.value,
total: res.data.total
};
}
}
} catch (error) {
console.error('获取数据失败:', error)

12
src/views/dashboard/components/DeviceStatus.vue
Unescape Escape View File

@ -1,3 +1,11 @@
<!--
* @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-10 18:00:44
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-18 11:31:05
* @FilePath: \5G-Loading-Bay-Web\src\views\dashboard\components\DeviceStatus.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref } from "vue";
defineOptions({
@ -59,13 +67,13 @@ const deviceStatusOptions = ref<Record<string, any>[]>([
<div class="flex flex-col flex-1">
<div class="flex justify-between" style="margin-bottom: 4px">
<span>{{ v.label }}</span>
<span>{{ deviceStatus[v.valueKey] }}</span>
<span>{{ deviceStatus?.[v.valueKey] }}</span>
</div>
<div class="w-full">
<el-progress
:show-text="false"
:stroke-width="8"
:percentage="deviceStatus[v.valueKey]"
:percentage="deviceStatus?.[v.valueKey]"
:color="v.color"
/>
</div>

Write Preview
Loading…
Cancel
Save