feat: 视频中心仪表盘

src/api/media/home.ts

@@ -2,8 +2,8 @@ import server from '@/utils/request'
 
 export default {
     // 设备数量
-    deviceCount: () => server.get<number>(`/media/device/_count`),
+    deviceCount: (params: any) => server.get<number>(`/media/device/_count`, params),
     // 通道数量
-    channelCount: () => server.post<number>(`/media/channel/_count`),
+    channelCount: (data: any) => server.post<number>(`/media/channel/_count`, data),
 
 }

src/utils/utils.ts

@@ -84,3 +84,34 @@ export const randomString = (length?: number) => {
   }
   return pwd;
 };
+
+/**
+ * 时间戳转时分秒文本
+ * @param time 
+ * @returns 
+ */
+export const timestampFormat = (time: number) => {
+    let hour = 0;
+    let minute = 0;
+    let second = 0;
+    const timeStr = 'hh小时mm分钟ss秒';
+    
+    if (time) {
+        if (time >= 60 * 60 * 1000) {
+            hour = Math.trunc(time / (60 * 60 * 1000));
+        }
+
+        if (time >= 60 * 1000) {
+            minute = Math.trunc((time - hour * 60 * 60 * 1000) / (60 * 1000));
+        }
+
+        second = Math.trunc(
+            (time - hour * (60 * 60 * 1000) - minute * 60 * 1000) / 1000,
+        );
+    }
+
+    return timeStr
+        .replace('hh', hour.toString())
+        .replace('mm', minute.toString())
+        .replace('ss', second.toString());
+};

src/views/media/DashBoard/components/TopCard.vue

@@ -19,7 +19,8 @@
         </div>
         <div class="top-card-footer">
             <template v-for="(item, index) in footer" :key="index">
-                <a-badge :text="item.title" :status="item.status" />
+                <span v-if="!item.status">{{ item.title }}</span>
+                <a-badge v-else :text="item.title" :status="item.status" />
                 <div class="footer-item-value">{{ item.value }}</div>
             </template>
         </div>

src/views/media/DashBoard/index.vue

@@ -39,19 +39,40 @@
 </template>
 
 <script setup lang="ts">
-import TopCard from '@/views/media/DashBoard/components/TopCard.vue'
+import TopCard from '@/views/media/DashBoard/components/TopCard.vue';
 import { getImage } from '@/utils/comm';
 import homeApi from '@/api/media/home';
 import dashboardApi from '@/api/media/dashboard';
 import type { Footer } from '@/views/media/DashBoard/typings';
+import encodeQuery from '@/utils/encodeQuery';
+import { timestampFormat } from '@/utils/utils';
 
 // 设备
 const deviceFooter = ref<Footer[]>([]);
 const deviceTotal = ref(0);
 const getDeviceData = () => {
-    homeApi.deviceCount().then((res) => {
+    homeApi.deviceCount({}).then((res) => {
         deviceTotal.value = res.result;
     });
+
+    homeApi
+        .deviceCount(encodeQuery({ terms: { state: 'online' } }))
+        .then((res) => {
+            deviceFooter.value[0] = {
+                title: '在线',
+                value: res.result,
+                status: 'success',
+            };
+        });
+    homeApi
+        .deviceCount(encodeQuery({ terms: { state: 'offline' } }))
+        .then((res) => {
+            deviceFooter.value[1] = {
+                title: '离线',
+                value: res.result,
+                status: 'error',
+            };
+        });
 };
 getDeviceData();
 
@@ -59,9 +80,27 @@ getDeviceData();
 const channelFooter = ref<Footer[]>([]);
 const channelTotal = ref(0);
 const getChannelData = () => {
-    homeApi.channelCount().then((res) => {
+    homeApi.channelCount({}).then((res) => {
         channelTotal.value = res.result;
     });
+    homeApi
+        .channelCount({ terms: [{ column: 'status', value: 'online' }] })
+        .then((res) => {
+            channelFooter.value[0] = {
+                title: '在线',
+                value: res.result,
+                status: 'success',
+            };
+        });
+    homeApi
+        .channelCount({ terms: [{ column: 'status$not', value: 'online' }] })
+        .then((res) => {
+            channelFooter.value[1] = {
+                title: '离线',
+                value: res.result,
+                status: 'error',
+            };
+        });
 };
 getChannelData();
 
@@ -71,6 +110,10 @@ const aggTotal = ref(0);
 const getAggData = () => {
     dashboardApi.agg().then((res) => {
         aggTotal.value = res.result.total;
+        aggFooter.value.push({
+            title: '总时长',
+            value: timestampFormat(res.result.duration),
+        });
     });
 };
 getAggData();
@@ -81,6 +124,10 @@ const aggPlayingTotal = ref(0);
 const getAggPlayingData = () => {
     dashboardApi.aggPlaying().then((res) => {
         aggTotal.value = res.result.playingTotal;
+        aggPlayingFooter.value.push({
+            title: '播放人数',
+            value: res.result.playerTotal,
+        });
     });
 };
 getAggPlayingData();

src/views/media/DashBoard/typings.d.ts

@@ -10,7 +10,7 @@ export type AggPlaying = {
 
 export type Footer = {
     title: string;
-    value: number;
+    value: number | string;
     status?: "default" | "error" | "success" | "warning" | "processing"
 }