Enhance traffic analysis dashboard with device statistics and improved data visualization

- Added new components for displaying device statistics: DeviceStatsUV and DeviceStatsPV.
- Integrated device statistics into the traffic analysis view, providing insights on user and page view distribution by device.
- Implemented a new API call to fetch device statistics data.
- Updated the layout to include new cards for device distribution and top accessed pages, enhancing overall user experience and data accessibility.

src/views/adweb/data/components/DeviceStatsPV.vue

@@ -0,0 +1,144 @@
+<template>
+        <!-- 图表视图 -->
+        <div ref="chartRef" style="height: 550px"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps({
+    deviceStats: {
+        type: Object,
+        required: true
+    }
+});
+
+const chartRef = ref(null);
+const loading = ref(false);
+const viewMode = ref('chart');
+let chart = null;
+
+
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chart = echarts.init(chartRef.value);
+    updateChart();
+};
+
+// 格式化整数
+const formatNumber = (num: string | number) => {
+    return Number(num).toLocaleString();
+};
+
+
+const updateChart = () => {
+    if (!chart || !props.deviceStats) return;
+
+    // 获取前10个数据并计算总数
+    const data = props.deviceStats
+        .sort((a, b) => Number(b.pageViews) - Number(a.pageViews));
+    
+    const total = data.reduce((sum, item) => sum + Number(item.pageViews), 0);
+
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: (params) => {
+                const percent = ((params.value / total) * 100).toFixed(2);
+                return `${params.name}<br/>浏览量: ${formatNumber(params.value)}<br/>占比: ${percent}%`;
+            }
+        },
+        legend: {
+            orient: 'vertical',
+            right: 10,
+            top: 'center',
+            type: 'scroll'
+        },
+        series: [
+            {
+                name: '浏览量',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: true,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: true,
+                    formatter: (params) => {
+                        const percent = ((params.value / total) * 100).toFixed(2);
+                        return `${params.name}\n${percent}%`;
+                    }
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 14,
+                        fontWeight: 'bold'
+                    }
+                },
+                data: data.map(item => ({
+                    name: item.device,
+                    value: item.pageViews
+                }))
+            }
+        ]
+    };
+
+    chart.setOption(option);
+};
+
+// 监听数据变化
+watch(
+    () => props.deviceStats,
+    () => {
+        updateChart();
+    },
+    { deep: true }
+);
+
+// 监听视图模式变化
+watch(viewMode, (newValue) => {
+    if (newValue === 'chart') {
+        // 在下一个 tick 后初始化图表，确保 DOM 已更新
+        nextTick(() => {
+            initChart();
+        });
+    }
+});
+
+onMounted(() => {
+    if (viewMode.value === 'chart') {
+        initChart();
+    }
+});
+
+// 监听窗口大小变化
+window.addEventListener('resize', () => {
+    if (viewMode.value === 'chart') {
+        chart?.resize();
+    }
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+    chart?.dispose();
+    window.removeEventListener('resize', () => {
+        chart?.resize();
+    });
+});
+</script>
+
+<style scoped>
+.ant-card {
+    margin-bottom: 24px;
+}
+
+:deep(.ant-table-pagination) {
+    margin: 16px 0;
+}
+</style>

src/views/adweb/data/components/DeviceStatsUV.vue

@@ -0,0 +1,145 @@
+<template>
+        <!-- 图表视图 -->
+        <div ref="chartRef" style="height: 550px"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed, nextTick, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const props = defineProps({
+    deviceStats: {
+        type: Object,
+        required: true
+    }
+});
+
+const chartRef = ref(null);
+const loading = ref(false);
+const viewMode = ref('chart');
+let chart = null;
+
+
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    chart = echarts.init(chartRef.value);
+    updateChart();
+};
+
+// 格式化整数
+const formatNumber = (num: string | number) => {
+    return Number(num).toLocaleString();
+};
+
+
+const updateChart = () => {
+    if (!chart || !props.deviceStats) return;
+
+    // 获取前数据并计算总数
+    const data = props.deviceStats
+        .sort((a, b) => Number(b.totalUsers) - Number(a.totalUsers));
+    
+    const total = data.reduce((sum, item) => sum + Number(item.totalUsers), 0);
+
+    console.log(total, data)
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: (params) => {
+                const percent = ((params.value / total) * 100).toFixed(2);
+                return `${params.name}<br/>访客数: ${formatNumber(params.value)}<br/>占比: ${percent}%`;
+            }
+        },
+        legend: {
+            orient: 'vertical',
+            right: 10,
+            top: 'center',
+            type: 'scroll'
+        },
+        series: [
+            {
+                name: '用户数',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: true,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: '#fff',
+                    borderWidth: 2
+                },
+                label: {
+                    show: true,
+                    formatter: (params) => {
+                        const percent = ((params.value / total) * 100).toFixed(2);
+                        return `${params.name}\n${percent}%`;
+                    }
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 14,
+                        fontWeight: 'bold'
+                    }
+                },
+                data: data.map(item => ({
+                    name: item.device,
+                    value: item.totalUsers
+                }))
+            }
+        ]
+    };
+
+    chart.setOption(option);
+};
+
+// 监听数据变化
+watch(
+    () => props.deviceStats,
+    () => {
+        updateChart();
+    },
+    { deep: true }
+);
+
+// 监听视图模式变化
+watch(viewMode, (newValue) => {
+    if (newValue === 'chart') {
+        // 在下一个 tick 后初始化图表，确保 DOM 已更新
+        nextTick(() => {
+            initChart();
+        });
+    }
+});
+
+onMounted(() => {
+    if (viewMode.value === 'chart') {
+        initChart();
+    }
+});
+
+// 监听窗口大小变化
+window.addEventListener('resize', () => {
+    if (viewMode.value === 'chart') {
+        chart?.resize();
+    }
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+    chart?.dispose();
+    window.removeEventListener('resize', () => {
+        chart?.resize();
+    });
+});
+</script>
+
+<style scoped>
+.ant-card {
+    margin-bottom: 24px;
+}
+
+:deep(.ant-table-pagination) {
+    margin: 16px 0;
+}
+</style>

src/views/adweb/data/trafficAnalysis.vue

@@ -114,6 +114,65 @@
           </a-row>
         </a-card>
       </a-col>
+
+      <a-col :span="12">
+        <a-card style="margin: 10px" title="访客数设备分布">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-col :span="24">
+              <DeviceStatsUV :deviceStats="deviceStats"></DeviceStatsUV>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="12">
+        <a-card style="margin: 10px" title="浏览量设备分布">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-col :span="24">
+              <DeviceStatsPV :deviceStats="deviceStats"></DeviceStatsPV>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+
+      <!-- 最多访问TOP10 -->
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="最多访问TOP10">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-col :span="24">
+              <a-table
+                :columns="mostAccessColumns"
+                :data-source="mostAccessDatasource"
+                size="middle"
+                rowKey="type"
+                :pagination="false">
+                <template #bodyCell="{ column, record, index, text }">
+                  <template v-if="column.key ==='pagePathSlot' ">
+                    <a-popover>
+                      <template slot="content">
+                        {{ text }}
+                      </template>
+                      <a :href="text" target="_blank">
+                        <div
+                          style="width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                          {{ text }}
+                        </div>
+                      </a>
+                    </a-popover>
+                  </template>
+                  <template v-if="column.key ==='centerSlot' ">
+                    <span style="margin-left: 20px;">{{ text }}</span>
+                  </template>
+                  <template v-if="column.key ==='avgTimeOnPageSlot' ">
+                    <span style="margin-left: 30px;">{{ text }} s</span>
+                  </template>
+                </template>
+              </a-table>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+
+      <!-- 来源媒介 -->
       <a-col :span="24">
         <a-card style="margin: 10px" title="来源媒介">
           <a-row class="r5" :gutter="[20,20]">
@@ -169,42 +228,6 @@
           </a-row>
         </a-card>
       </a-col>
-      <a-col :span="24">
-        <a-card style="margin: 10px" title="最多访问TOP10">
-          <a-row class="r5" :gutter="[20,20]">
-            <a-col :span="24">
-              <a-table
-                :columns="mostAccessColumns"
-                :data-source="mostAccessDatasource"
-                size="middle"
-                rowKey="type"
-                :pagination="false">
-                <template #bodyCell="{ column, record, index, text }">
-                  <template v-if="column.key ==='pagePathSlot' ">
-                    <a-popover>
-                      <template slot="content">
-                        {{ text }}
-                      </template>
-                      <a :href="text" target="_blank">
-                        <div
-                          style="width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-                          {{ text }}
-                        </div>
-                      </a>
-                    </a-popover>
-                  </template>
-                  <template v-if="column.key ==='centerSlot' ">
-                    <span style="margin-left: 20px;">{{ text }}</span>
-                  </template>
-                  <template v-if="column.key ==='avgTimeOnPageSlot' ">
-                    <span style="margin-left: 30px;">{{ text }} s</span>
-                  </template>
-                </template>
-              </a-table>
-            </a-col>
-          </a-row>
-        </a-card>
-      </a-col>
     </a-row>
   </a-spin>
 </template>
@@ -212,9 +235,11 @@
 <script lang="ts" name="data-trafficAnalysis" setup>
 import selectSite from "@/components/Adweb/selectSite.vue";
 import areaChart from "./chart/areaChart.vue";
-import { reactive, ref } from "vue";
+import { computed, reactive, ref } from "vue";
 import { getAction } from "@/api/manage/manage";
 import MapAdweb from "@/components/chart/mapAdweb.vue";
+import DeviceStatsPV from "./components/DeviceStatsPV.vue";
+import DeviceStatsUV from "./components/DeviceStatsUV.vue";
 import "flag-icon-css/css/flag-icons.css";
 import dayjs from 'dayjs';
 
@@ -354,6 +379,7 @@ function reloadData() {
   getCountryMapData();
   getMediaList();
   getMostAccessList();
+  getDeviceStats();
 }
 
 const flowIndexNums = ref({
@@ -446,7 +472,6 @@ const getCountryMapData = async () => {
         name: entry.countryName,
         value: entry.totalUsers
       }));
-      console.log("countryMapData", countryMapData.value);
     }
   } catch (error) {
     console.error(error);
@@ -454,6 +479,22 @@ const getCountryMapData = async () => {
 };
 const mediaDatasource = ref([]);
 
+const deviceStats = ref([]); // 设备统计数据
+
+// 新增获取设备统计数据的函数
+const getDeviceStats = async () => {
+  try {
+    const res = await getAction("/dmp-data/device/stats", queryParam);
+    if (res.code === 200) {
+      deviceStats.value = res.result; // Update the deviceStats with the response
+    } else {
+      deviceStats.value = []; // Reset if there's an error
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
 //来源媒介列表、最多访问top10列表
 const getMediaList = async () => {
   try {
@@ -487,9 +528,7 @@ const rangeDate = ref([]);
 
 const onChangeDatePicker = (date, dateString) => {
   if (dateString.length > 0) {
-    console.log("rangeDate:", rangeDate.value);
     rangeDate.value = date;
-    console.log("date:", date);
     queryParam.start = dateString[0];
     queryParam.end = dateString[1];
     queryParam.dateType = undefined;