From 181281f39d67dadb3a37c95a5f0b3999dc80e373 Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Tue, 18 Mar 2025 14:50:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Elodash=E8=8A=82?=
 =?UTF-8?q?=E6=B5=81=EF=BC=8C=E8=A1=A8=E6=A0=BC=E6=97=A0=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=B8=BA=E7=A9=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  3 +
 src/components/videoPlayer/RealPlayer.vue     | 15 ++++-
 src/views/dashboard/DeviceStatus.vue          | 60 +++++++++----------
 src/views/dashboard/PoleMonitor.scss          |  5 +-
 src/views/dashboard/PoleMonitor.vue           | 27 +++++----
 .../dashboard/components/DeviceStatus.vue     | 12 +++-
 7 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/package.json b/package.json
index d0cdd6b..32dde1c 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7cfe04c..6404fb0 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/components/videoPlayer/RealPlayer.vue b/src/components/videoPlayer/RealPlayer.vue
index b1df9b5..f21ed06 100644
--- a/src/components/videoPlayer/RealPlayer.vue
+++ b/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
 })
diff --git a/src/views/dashboard/DeviceStatus.vue b/src/views/dashboard/DeviceStatus.vue
index f498b45..b22c8b3 100644
--- a/src/views/dashboard/DeviceStatus.vue
+++ b/src/views/dashboard/DeviceStatus.vue
@@ -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"
 });
diff --git a/src/views/dashboard/PoleMonitor.scss b/src/views/dashboard/PoleMonitor.scss
index 1db5dea..cd87ea3 100644
--- a/src/views/dashboard/PoleMonitor.scss
+++ b/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,
diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue
index 23bdaa8..d59befd 100644
--- a/src/views/dashboard/PoleMonitor.vue
+++ b/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>
+                        <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)
diff --git a/src/views/dashboard/components/DeviceStatus.vue b/src/views/dashboard/components/DeviceStatus.vue
index e3cb7b7..6d65719 100644
--- a/src/views/dashboard/components/DeviceStatus.vue
+++ b/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>