feat：增加用户数量相关，和设备日志更改

src/api/marketing/data.ts

@@ -16,4 +16,11 @@ export const getDataPage = (data) => {
     data: data,
 	});
 };
+//统计累计用户数和活跃用户数
+export const getUserNum = () => {
+	return request({
+		url: 'marketing/tcp/statistics/users',
+		method: 'get',
+	});
+};
 

src/views/home/user-info.vue

@@ -34,8 +34,8 @@
       </div>
       <div class="task-list">
         <div class="task-item">
-          <div class="task-title">{{t('home.pendingTasks')}}</div>
-          <div class="task-num">0</div>
+          <div class="task-title">全部用户</div>
+          <div class="task-num">{{ totalUsers }}</div>
           <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M3.125 11.875H26.875V25.625C26.875 26.3154 26.3154 26.875 25.625 26.875H4.375C3.68464 26.875 3.125 26.3154 3.125 25.625V11.875Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
             <path d="M3.125 6.25C3.125 5.55964 3.68464 5 4.375 5H25.625C26.3154 5 26.875 5.55964 26.875 6.25V11.875H3.125V6.25Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
@@ -45,8 +45,8 @@
           </svg>
         </div>
         <div class="task-item">
-          <div class="task-title">{{t('home.ccTasks')}}</div>
-          <div class="task-num">0</div>
+          <div class="task-title">在线用户</div>
+          <div class="task-num">{{ activeUsers }}</div>
           <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M26.875 3.125L18.5625 26.875L13.8125 16.1875L3.125 11.4375L26.875 3.125Z" stroke="#167AF0" stroke-width="2" stroke-linejoin="round"/>
             <path d="M26.8751 3.125L13.8126 16.1875" stroke="#167AF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -60,12 +60,32 @@
 <script setup lang="ts">
 import {useUserInfo} from '/@/stores/userInfo';
 import { useI18n } from 'vue-i18n';
+import { getUserNum } from '/@/api/marketing/data';
 
 const { t } = useI18n();
 
 const { user } = useUserInfo().userInfos;
 console.log('user', user);
 
+const getUserTime = ref(0);
+const totalUsers = ref('0')
+const activeUsers = ref('0')
+onMounted(() => {
+  getUserNum().then((res) => {
+    totalUsers.value = res.data.totalUsers;
+    activeUsers.value = res.data.activeUsers;
+  });
+  getUserTime.value = setInterval(() => {
+    getUserNum().then((res) => {
+      totalUsers.value = res.data.totalUsers;
+      activeUsers.value = res.data.activeUsers;
+    });
+  },  10* 60* 1000)
+});
+
+onUnmounted(() => {
+  clearInterval(getUserTime.value);
+})
 
 const errorHandler = () => {
   return './src/assets/avatar.png'

src/views/marketing/data/dataListModal.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 弹窗组件 -->
-  <el-dialog v-model="dialogVisible" title="数据信息（23）" width="860px" @close="onClose">
+  <el-dialog v-model="dialogVisible" :title="`数据信息（${pagination.total}）`" width="860px" @close="onClose">
     <!-- 弹窗头部：搜索区域 -->
     <div class="dialog-header">
       <el-form :inline="true" :model="searchForm" @keyup.enter="handleSearch">
@@ -40,7 +40,7 @@
           title="点击查看数据详情"
           @click="handleOpenDialog(item)"
         >
-          <div class="rich-content" v-html="item.msgData"></div>
+          <div class="rich-content" v-html="highlightKeyword(item.msgData, searchForm.keyWord)"></div>
           <div class="item-time">{{ formatTime(item.reportTime) }}</div>
         </div>
         
@@ -84,7 +84,12 @@ const handleOpenDialog = (item: any) => {
   }
 )
 }
-
+const highlightKeyword = (content: string, keyword: string) => {
+  if (!keyword) return content;
+  
+  const regex = new RegExp(`(${keyword})`, 'gi');
+  return content.replace(regex, '<span style="color: red">$1</span>');
+}
 // 弹窗可见性
 const dialogVisible = ref(false)
 
@@ -260,4 +265,10 @@ defineExpose({
 :deep(.el-pagination) {
   margin: 0;
 }
+.highlight-keyword {
+  background-color: #ffff00;
+  color: #000;
+  font-weight: bold;
+  padding: 1px 2px;
+}
 </style>

src/views/marketing/data/index.vue

@@ -27,7 +27,7 @@
         <el-table-column label="IP" prop="updateTime" show-overflow-tooltip>
           <template #default="{ row }">{{ getIp(row.deviceInfo || '{}') }}</template>
         </el-table-column>
-        <el-table-column label="设备信息" prop="deviceInfo" show-overflow-tooltip>
+        <el-table-column label="设备信息" min-width="150" prop="deviceInfo" show-overflow-tooltip>
           <template #header>
             <div class="header-wrapper">
               <span>设备信息</span>
@@ -42,7 +42,7 @@
           </template>
           <template #default="{ row }">
             <div @click="showJsonData(row.deviceInfo)">
-              {{ row.deviceInfo }}
+              {{ getDeviceName(row.deviceInfo) }}
             </div>
           </template>
         </el-table-column>
@@ -117,6 +117,14 @@ const getIp = (jsonString: string) => {
   return ipv4Match ? ipv4Match[1] : null;
 } 
 
+const getDeviceName = (jsonString: string) => {
+  const nameMatch = jsonString.match(/"name"\s*:\s*"([^"]+)"/);
+  const systemNameMatch = jsonString.match(/"systemName"\s*:\s*"([^"]+)"/);
+  const name = nameMatch ? nameMatch[1] : 'unKnown';
+  const systemName = systemNameMatch ? systemNameMatch[1] : 'unKnown';
+  return `设备名称：${name}； 系统名称：${systemName}`
+}
+
 const timeRange = computed({
   get() {
     return [state.queryForm.startTime, state.queryForm.endTime]