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

package.json

@@ -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",

pnpm-lock.yaml

@@ -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

src/components/videoPlayer/RealPlayer.vue

@@ -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
 })

src/views/dashboard/DeviceStatus.vue

@@ -12,7 +12,7 @@
             <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">
@@ -41,7 +41,6 @@
                             </ul>
                         </template>
                     </BaseTable>
-                    </template>
                 </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"
 });

src/views/dashboard/PoleMonitor.scss

@@ -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,

src/views/dashboard/PoleMonitor.vue

@@ -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>
                     </div>
                 </div>
             </div>
@@ -240,12 +238,15 @@ const getList = async () => {
         console.log(res.data, 'getList_data')
         if (isSuccessApi(res)) {
             listData.value = res.data.data;
+            if (listData.value?.length > 0) {
                 loadDetail()
                 pagination.value = {
                     ...pagination.value,
                     total: res.data.total
                 };
             }
+
+        }
     } catch (error) {
         console.error('获取数据失败:', error)
     }

src/views/dashboard/components/DeviceStatus.vue

@@ -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>