feat: 大屏可视化tips提示

src/views/screen/components/common/item-wrap/item-wrap.vue

@@ -7,6 +7,22 @@
             <div class="zuo"></div>
             <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
             <div class="you"></div>
+            <el-tooltip
+                v-if="tips"
+                popper-class="tooltip-bg"
+                effect="dark"
+                placement="bottom"
+            >
+                <template #content>
+                    <pre>{{ tips }}</pre>
+                </template>
+                <iconify-icon-offline
+                    class="question-icon"
+                    width="20"
+                    height="20"
+                    :icon="Question"
+                />
+            </el-tooltip>
         </div>
         <div :class="title !== '' ? 'item_title_content' : 'item_title_content_def'">
             <slot></slot>
@@ -16,13 +32,16 @@
 
 <script setup lang="ts">
 import BorderBox13 from '../datav/border-box-13';
+import Question from '@iconify-icons/ep/question-filled';
 const props = withDefaults(
     defineProps<{
         // 标题
         title: number | string;
+        tips: string;
     }>(),
     {
         title: '',
+        tips: '',
     }
 );
 </script>
@@ -62,6 +81,12 @@ $item_title_content-height: calc(100% - 60px);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }
+
+    .question-icon {
+        position: absolute;
+        right: 20px;
+        z-index: 999;
+    }
 }
 
 :deep(.dv-border-box-content) {
@@ -78,3 +103,8 @@ $item_title_content-height: calc(100% - 60px);
     height: 100%;
 }
 </style>
+<style>
+.tooltip-bg {
+    background: #081135 !important;
+}
+</style>

src/views/screen/index.vue

@@ -23,6 +23,7 @@
                         :key="item.componentName"
                         :class="[getComponentClass(item.componentName)]"
                         :title="item.title"
+                        :tips="getComponentTips(item.componentName)"
                     >
                         <component
                             :is="item.component"
@@ -44,6 +45,7 @@
                             v-else
                             :class="[getComponentClass(item.componentName)]"
                             :title="item.title"
+                            :tips="getComponentTips(item.componentName)"
                         >
                             <component
                                 :is="item.component"
@@ -59,6 +61,7 @@
                         :key="item.componentName"
                         :class="[getComponentClass(item.componentName)]"
                         :title="item.title"
+                        :tips="getComponentTips(item.componentName)"
                     >
                         <component
                             :is="item.component"
@@ -173,6 +176,39 @@ const getComponentClass = computed(() => (componentName) => {
     }
     return className;
 });
+const getComponentTips = computed(() => (componentName) => {
+    let tips = '';
+    switch (componentName) {
+        case 'AccessStatus':
+            tips = '全网接入情况';
+            break;
+        case 'MajorSystemHealthStatus':
+            tips = '重要系统健康状态';
+            break;
+        case 'MajorAlert':
+            tips = '重要告警';
+            break;
+        case 'AccessSituation':
+            tips = 'IT资源接入情况';
+            break;
+        case 'AlarmDynamic':
+            tips = '实时告警动态';
+            break;
+        case 'AccessUsageStatus':
+            tips = '各资源接入及使用情况';
+            break;
+        case 'ResourceType':
+            tips = '资源类型';
+            break;
+        case 'AlarmTrend':
+            tips = '告警趋势图';
+            break;
+        case 'AlarmStatistics':
+            tips = '告警级别统计';
+            break;
+    }
+    return tips;
+});
 const getLayout = (id) => {
     return new Promise((resolve) => {
         setTimeout(() => {