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": { "dependencies": {
"axios": "^1.8.3", "axios": "^1.8.3",
"echarts": "^5.6.0", "echarts": "^5.6.0",
"lodash": "^4.17.21",
"moment": "^2.30.1", "moment": "^2.30.1",
"postcss-scss": "^4.0.9", "postcss-scss": "^4.0.9",
"sass": "^1.85.1", "sass": "^1.85.1",

3
pnpm-lock.yaml
Unescape Escape View File

@ -14,6 +14,9 @@ importers:
echarts: echarts:
specifier: ^5.6.0 specifier: ^5.6.0
version: 5.6.0 version: 5.6.0
lodash:
specifier: ^4.17.21
version: 4.17.21
moment: moment:
specifier: ^2.30.1 specifier: ^2.30.1
version: 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 * @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-12 13:48:53 * @Date: 2025-03-12 13:48:53
* @LastEditors: donghao donghao@supervision.ltd * @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 * @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 * @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> <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> --> <!-- <iframe src="http://192.168.10.113:8889/cam/" frameborder="0"></iframe> -->
</div> </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=""> <img src="@/assets/common/player_icon_1.png" alt="">
</div> </div>
<!-- http://192.168.10.113:8889/cam/ --> <!-- http://192.168.10.113:8889/cam/ -->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { playRtspApi, stopRtspApi } from '@/api/dashboard'; import { playRtspApi, stopRtspApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi"; import { isSuccessApi } from "@/utils/forApi";
import { nextTick } from 'vue'; import { throttle } from 'lodash';
interface Props { interface Props {
show: boolean; // 是否关闭 show: boolean; // 是否关闭
@ -84,6 +86,8 @@ async function stopPlayer() {
} }
} }
watch(() => props.show, (newVal) => { watch(() => props.show, (newVal) => {
if (!newVal) { if (!newVal) {
stopPlayer() stopPlayer()
@ -106,6 +110,11 @@ function openReal() {
console.log("开启") console.log("开启")
} }
// 使用 throttle 函数创建节流函数
const handleOpen = throttle(() => {
openReal();
}, 1000); // 节流时间为 1000 毫秒（即 1 秒）
defineExpose({ defineExpose({
initPlayer 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="px-[16px] device-status-content-box">
<div class="mt-[16px] bg-transparent baseTable_wrap full_table"> <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" <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true" :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange"> :columns="columns" :page="pagination.currentPage" @change="handleTableChange">
<template v-slot:actionBar="{ row }"> <template v-slot:actionBar="{ row }">
<ul class="flex table_action_box"> <ul class="flex table_action_box">
<li class="flex items-center mr-[16px]" @click="openCurrent(row)"> <li class="flex items-center mr-[16px]" @click="openCurrent(row)">
<el-button text> <el-button text>
<span :style="{ <span :style="{
fontSize: '14px', fontSize: '14px',
color: '#37DBFF' color: '#37DBFF'
}"> }">
即时视频 即时视频
</span> </span>
</el-button> </el-button>
</li> </li>
<li class="flex items-center" @click="openHistory(row)"> <li class="flex items-center" @click="openHistory(row)">
<el-button text> <el-button text>
<span :style="{ <span :style="{
fontSize: '14px', fontSize: '14px',
color: '#37DBFF' color: '#37DBFF'
}"> }">
历史视频 历史视频
</span> </span>
</el-button> </el-button>
</li> </li>
</ul> </ul>
</template> </template>
</BaseTable> </BaseTable>
</template>
</div> </div>
</div> </div>
<RealVideoModal v-model:value="isRealOpen" :info="currentRow" @close="isRealOpen = false" /> <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 errorIcon from '@/assets/common/error_icon.png';
import { getDeviceStatusApi } from '@/api/dashboard'; import { getDeviceStatusApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi"; import { isSuccessApi } from "@/utils/forApi";
defineOptions({ defineOptions({
name: "DeviceStatusIndex" name: "DeviceStatusIndex"
}); });

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

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

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

@ -60,7 +60,7 @@
:observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange"> :observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
<swiper-slide v-for="(file, index) in currFileList" :key="index" <swiper-slide v-for="(file, index) in currFileList" :key="index"
@click="handleSlideClick(index)" :class="{ 'active-slide': activeIndex === 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" <SwiperPlayer class="cursor-pointer" :videoUrl="file?.video_url"
v-else-if="file?.video_url" :isPlaying="isPlaying && (activeIndex === index)" /> v-else-if="file?.video_url" :isPlaying="isPlaying && (activeIndex === index)" />
<div v-else> <div v-else>
@ -74,13 +74,11 @@
<!-- 右侧表格区域 --> <!-- 右侧表格区域 -->
<div class="flex-1 right-panel"> <div class="flex-1 right-panel">
<div class="bg-transparent baseTable_wrap"> <div class="bg-transparent baseTable_wrap">
<template v-if="pagination.total > 0"> <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage" @change="handleTableChange"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange" :row-class-name="handleRowClassName" @row-click="handleRowClick">
:row-class-name="handleRowClassName" @row-click="handleRowClick"> </BaseTable>
</BaseTable>
</template>
</div> </div>
</div> </div>
</div> </div>
@ -240,11 +238,14 @@ const getList = async () => {
console.log(res.data, 'getList_data') console.log(res.data, 'getList_data')
if (isSuccessApi(res)) { if (isSuccessApi(res)) {
listData.value = res.data.data; listData.value = res.data.data;
loadDetail() if (listData.value?.length > 0) {
pagination.value = { loadDetail()
...pagination.value, pagination.value = {
total: res.data.total ...pagination.value,
}; total: res.data.total
};
}
} }
} catch (error) { } catch (error) {
console.error('获取数据失败:', 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"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
defineOptions({ defineOptions({
@ -59,13 +67,13 @@ const deviceStatusOptions = ref<Record<string, any>[]>([
<div class="flex flex-col flex-1"> <div class="flex flex-col flex-1">
<div class="flex justify-between" style="margin-bottom: 4px"> <div class="flex justify-between" style="margin-bottom: 4px">
<span>{{ v.label }}</span> <span>{{ v.label }}</span>
<span>{{ deviceStatus[v.valueKey] }}</span> <span>{{ deviceStatus?.[v.valueKey] }}</span>
</div> </div>
<div class="w-full"> <div class="w-full">
<el-progress <el-progress
:show-text="false" :show-text="false"
:stroke-width="8" :stroke-width="8"
:percentage="deviceStatus[v.valueKey]" :percentage="deviceStatus?.[v.valueKey]"
:color="v.color" :color="v.color"
/> />
</div> </div>

Write Preview
Loading…
Cancel
Save