主控台接入接口

src/api/home/home-panel.ts

@@ -0,0 +1,38 @@
+import { http } from '@/utils/http/axios';
+
+/** 面板统计 */
+export type CountType = {
+  /** 在线相机数量 */
+  onlineCameraCount: number;
+  /** 在线相机数量 */
+  totalCameraCount: number;
+  /** 算法总量 */
+  algoCount: number;
+  /** 用户总量 */
+  userCount: number;
+};
+
+/** 用户点击数统计 */
+export type RecordType = {
+  /** 总点击数 */
+  allClicks: number;
+  /** 今日点击数 */
+  todayClicks: number;
+  /** 昨日点击数 */
+  yesterdayClicks: number;
+};
+
+/** 面板数据 */
+export const getCount = () => {
+  return http.request<CountType>({
+    url: '/dataPreview/getCount',
+    method: 'get',
+  });
+};
+
+export const getUserRecord = () => {
+  return http.request<RecordType>({
+    url: '/userRecord/overview',
+    method: 'get',
+  });
+};

src/views/dashboard/home/components/ClickShow.vue

@@ -6,26 +6,44 @@
     </div>
     <el-divider />
     <div>
-      <div class="click-number">126560</div>
+      <div class="click-number">{{ clickData?.todayClicks }}</div>
       <div class="click-compare">
         <div class="click-detail">日同比</div>
-        <div>12%</div>
-        <el-icon v-if="ratio > 0" class="ratio-ico-up"><Top /></el-icon>
-        <el-icon v-else class="ratio-ico-down"><Bottom /></el-icon>
+        <div>{{ ratio }}%</div>
+        <el-icon v-if="Number(ratio) > 0" class="ratio-ico-up"><Top /></el-icon>
+        <el-icon v-else-if="Number(ratio) < 0" class="ratio-ico-down"><Bottom /></el-icon>
       </div>
     </div>
     <el-divider />
     <div class="click-total">
       <div class="click-detail">总点击量</div>
-      <div style="margin-left: 22px">12423</div>
+      <div style="margin-left: 22px">{{ clickData?.allClicks }}</div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
   import { Top, Bottom } from '@element-plus/icons-vue';
-  import { ref } from 'vue';
-  const ratio = ref(1);
+  import { computed, onMounted } from 'vue';
+  import usePanel from '../hooks/usePanel';
+
+  const usePanelInfo = usePanel();
+  const { getPanelUserRecord, clickData } = usePanelInfo;
+  onMounted(() => {
+    getPanelUserRecord();
+  });
+  const ratio = computed(() => {
+    if (clickData.value?.yesterdayClicks! === 0 && clickData.value?.todayClicks! !== 0) {
+      return 100;
+    } else if (clickData.value?.yesterdayClicks! === 0 && clickData.value?.todayClicks! === 0) {
+      return 0;
+    } else {
+      return Number(
+        ((clickData.value?.todayClicks! - clickData.value?.yesterdayClicks!) * 100) /
+          clickData.value?.yesterdayClicks!,
+      ).toFixed(2);
+    }
+  });
 </script>
 
 <style scoped>
@@ -74,6 +92,10 @@
     margin-top: 4px;
   }
 
+  .ratio-ico-right {
+    margin-top: 4px;
+  }
+
   .ratio-ico-down {
     color: green;
     margin-top: 3px;

src/views/dashboard/home/components/Header.vue

@@ -3,20 +3,20 @@
     <div class="header-data">
       <div>
         <div class="data-title">算法总量</div>
-        <div class="algorithm-total">7</div>
+        <div class="algorithm-total">{{ panelData?.algoCount }}</div>
       </div>
       <el-divider direction="vertical" border-style="solid" />
       <div>
         <div class="data-title">在线相机</div>
         <div class="camera-data">
-          <div class="camera-online">0</div>
-          <div class="camera-total">/0</div>
+          <div class="camera-online">{{ panelData?.onlineCameraCount }}</div>
+          <div class="camera-total">/{{ panelData?.totalCameraCount }}</div>
         </div>
       </div>
       <el-divider direction="vertical" border-style="solid" />
       <div>
         <div style="margin-left: 20px" class="data-title">用户总量</div>
-        <div class="user-total">0</div>
+        <div class="user-total">{{ panelData?.userCount }}</div>
       </div>
     </div>
     <div class="header-user">
@@ -31,7 +31,15 @@
 
 <script setup lang="ts">
   import { useUserStore } from '@/store/modules/user';
-  import { computed } from 'vue';
+  import { computed, onMounted } from 'vue';
+  import usePanel from '../hooks/usePanel';
+
+  const usePanelInfo = usePanel();
+  const { panelData, getPanelCount } = usePanelInfo;
+  onMounted(() => {
+    getPanelCount();
+  });
+
   const userStore = useUserStore();
 
   const getUsername = computed(() => {

src/views/dashboard/home/hooks/usePanel.ts

@@ -0,0 +1,33 @@
+import { onMounted, ref } from 'vue';
+import { CountType, RecordType, getCount, getUserRecord } from '@/api/home/home-panel';
+
+export function usePanelInfo() {
+  const panelData = ref<CountType>();
+  const clickData = ref<RecordType>();
+
+  const getPanelCount = () => {
+    getCount().then((res) => {
+      panelData.value = res;
+    });
+  };
+
+  const getPanelUserRecord = () => {
+    getUserRecord().then((res) => {
+      clickData.value = res;
+    });
+  };
+
+  // onMounted(() => {
+  //   getPanelCount();
+  //   getPanelUserRecord();
+  // });
+
+  return {
+    panelData,
+    clickData,
+    getPanelCount,
+    getPanelUserRecord,
+  };
+}
+
+export default usePanelInfo;