Merge branch 'perf/dashboard-statistics' into 'main_dev'

perf: 优化首页消息统计和告警数统计tooltip提示

See merge request yunteng/thingskit-front!616

@@ -6,8 +6,24 @@
     @tabChange="onTabChange"
     @tabChange="onTabChange"
     v-if="!isAdmin(role)"
     v-if="!isAdmin(role)"
   >
   >
+    <template #alarm>
+      <div>告警数统计</div>
+    </template>
     <template #tabBarExtraContent>
     <template #tabBarExtraContent>
       <div class="extra-date">
       <div class="extra-date">
+        <Tooltip overlay-class-name="!max-w-80 w-80">
+          <template #title>
+            <div> 30天: 查询最近30天的数据,间隔时间为1天.</div>
+            <div>7天: 查询最近7天的数据,间隔时间为2小时.</div>
+            <div>1天: 查询最近1天的数据,间隔时间为30分钟.</div>
+            <div>1小时: 查询最近1小时的数据,间隔时间为5分钟.</div>
+            <div>
+              间隔时间:
+              以当前时间作为结束时间,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
+            </div>
+          </template>
+          <QuestionCircleOutlined class="!mr-1" />
+        </Tooltip>
         <template v-for="(item, index) in dateList" :key="item.value">
         <template v-for="(item, index) in dateList" :key="item.value">
           <span
           <span
             @click="
             @click="
@@ -99,7 +115,7 @@
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ref, reactive } from 'vue';
   import { ref, reactive } from 'vue';
-  import { Card, DatePicker } from 'ant-design-vue';
+  import { Card, DatePicker, Tooltip } from 'ant-design-vue';
   import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
   import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
   import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
@@ -113,6 +129,7 @@
   import { useDate } from '../hooks/useDate';
   import { useDate } from '../hooks/useDate';
   import { getTrendData } from '/@/api/dashboard';
   import { getTrendData } from '/@/api/dashboard';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 
 
   defineExpose({
   defineExpose({
     isAdmin,
     isAdmin,
@@ -126,7 +143,7 @@
   const tabListTitle = [
   const tabListTitle = [
     {
     {
       key: '1',
       key: '1',
-      tab: '告警数统计',
+      slots: { tab: 'alarm' },
     },
     },
     // {
     // {
     //   key: '2',
     //   key: '2',

@@ -8,7 +8,7 @@
   >
   >
     <template #messageStatistics>
     <template #messageStatistics>
       <span>消息量统计</span>
       <span>消息量统计</span>
-      <Tooltip>
+      <Tooltip overlay-class-name="!max-w-120 w-120">
         <template #title>
         <template #title>
           <div>传输消息量: 即设备上报的消息数量,设备每上报一次数据量+1.</div>
           <div>传输消息量: 即设备上报的消息数量,设备每上报一次数据量+1.</div>
           <div class="mt-1">
           <div class="mt-1">
@@ -21,7 +21,7 @@
     </template>
     </template>
     <template #tabBarExtraContent>
     <template #tabBarExtraContent>
       <div class="extra-date">
       <div class="extra-date">
-        <Tooltip>
+        <Tooltip overlay-class-name="!max-w-80 w-80">
           <template #title>
           <template #title>
             <div> 30天: 查询最近30天的数据,间隔时间为1天.</div>
             <div> 30天: 查询最近30天的数据,间隔时间为1天.</div>
             <div>7天: 查询最近7天的数据,间隔时间为2小时.</div>
             <div>7天: 查询最近7天的数据,间隔时间为2小时.</div>

@@ -40,7 +40,7 @@
       legend: {
       legend: {
         data: ['告警数'],
         data: ['告警数'],
         left: 'center',
         left: 'center',
-        formatter: (name) => `${name} ${alarmTotal}`,
+        formatter: (name) => `汇总${name} ${alarmTotal}`,
       },
       },
       xAxis: {
       xAxis: {
         type: 'time',
         type: 'time',
@@ -80,7 +80,7 @@
         legend: {
         legend: {
           data: ['告警数'],
           data: ['告警数'],
           left: 'center',
           left: 'center',
-          formatter: (name) => `${name} ${alarmTotal}`,
+          formatter: (name) => `汇总${name} ${alarmTotal}`,
         },
         },
         xAxis: {
         xAxis: {
           type: 'time',
           type: 'time',

@@ -44,10 +44,12 @@
         type: 'time',
         type: 'time',
       },
       },
       legend: {
       legend: {
-        data: ['总计传输数据点', '总计传输消息量'],
+        data: ['传输数据点', '传输消息量'],
         left: 'center',
         left: 'center',
         formatter: (name) => {
         formatter: (name) => {
-          return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
+          return name === '传输数据点'
+            ? `汇总${name} ${dataPointTotal}`
+            : `汇总${name} ${messageTotal}`;
         },
         },
       },
       },
 
 
@@ -60,7 +62,7 @@
       },
       },
       series: [
       series: [
         {
         {
-          name: '总计传输数据点',
+          name: '传输数据点',
           type: 'line',
           type: 'line',
           stack: 'total',
           stack: 'total',
           data: props.dataPointList,
           data: props.dataPointList,
@@ -68,7 +70,7 @@
           color: '#5AEEED',
           color: '#5AEEED',
         },
         },
         {
         {
-          name: '总计传输消息量',
+          name: '传输消息量',
           type: 'line',
           type: 'line',
           stack: 'total',
           stack: 'total',
           // barWidth: '10%',
           // barWidth: '10%',
@@ -105,7 +107,9 @@
           data: ['传输数据点', '传输消息量'],
           data: ['传输数据点', '传输消息量'],
           left: 'center',
           left: 'center',
           formatter: (name) => {
           formatter: (name) => {
-            return name === '传输数据点' ? `${name} ${dataPointTotal}` : `${name} ${messageTotal}`;
+            return name === '传输数据点'
+              ? `汇总${name} ${dataPointTotal}`
+              : `汇总${name} ${messageTotal}`;
           },
           },
         },
         },