feat:面板提示补充

src/views/business-analysis/system-space/index.vue

@@ -9,63 +9,71 @@
               <span class="fontSize14">基本信息</span>
               <div><p class="service-header-p"><span class="service-span-right">应用：</span><el-tooltip class="item" effect="dark" :content="baseInfoObj.app_name +'('+ appItem.alias +')'" placement="top"><span class="service-span-left">{{ baseInfoObj.app_name }} ({{ appItem.alias }})</span></el-tooltip></p></div>
             </div>
-            <!-- 面板数据 -->
+            <!-- 面板数据 暂时用接口详情页数据接口，真正接口出来替换为正确数据-->
             <div class="panel-box">
               <div class="panel-item">
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
                     <i class="dot" />
-                    <span>{{ total !=undefined? total:0 }}</span>
+                    <span>重点业务总数说明术语</span>
                   </div>
-                  <div>
-                    <div>
-                      <div class="panel-item-tit">重点业务总数</div>
-                      <div class="panel-item-con">{{ total !=undefined? total:0 }}</div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
-              </div>
+                <div>
+                  <div class="panel-item-tit">重点业务总数</div>
+                  <div class="panel-item-con">{{ total !=undefined? total:0 }}</div>
+                  <div class="panel-item-day-rate">日同比 <i class="el-icon-bottom goDownColor"></i> 30%</div>
+                </div>
+            </div>
               <div class="panel-item">
-                <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
+                <el-tooltip  effect="dark" :visible-arrow="false">
                   <div slot="content">
                     <i class="dot" />
-                    <span>{{ digitsObj.error_rate || 0 }}</span>
+                    <span>部署包总数说明术语</span>
                   </div>
-                  <div>
-                    <div>
-                      <div class="panel-item-tit">部署包总数</div>
-                      <div class="panel-item-con">{{ digitsObj.error_rate || 0 }}</div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
+                <div>
+                  <div class="panel-item-tit">部署包总数</div>
+                  <div class="panel-item-con">{{ digitsObj.error_rate || 0 }}</div>
+                  <div class="panel-item-day-rate">日同比<i class="el-icon-bottom goDownColor"></i> 30%</div>
+                </div>
               </div>
               <div class="panel-item">
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
                     <i class="dot" />
-                    <span>{{ digitsObj.qpm!=undefined?digitsObj.qpm:0 }}</span>
+                    <span>中间件总数说明术语</span>
                   </div>
-                  <div class="border-bottom">
-                    <div>
-                      <div class="panel-item-tit">请求频率/min</div>
-                      <div class="panel-item-con">{{ digitsObj.qpm!=undefined?Number(digitsObj.qpm).toFixed(2):0 }}</div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
+                <div>
+                  <div class="panel-item-tit">中间件总数</div>
+                  <div class="panel-item-con">{{ digitsObj.qpm!=undefined?Number(digitsObj.qpm):0 }}</div>
+                  <div class="panel-item-day-rate">日同比<i class="el-icon-bottom goDownColor"></i> 30%</div>
+                </div>
               </div>
               <div class="panel-item">
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
                     <i class="dot" />
-                    <span>{{ digitsObj.median_duration != undefined?digitsObj.median_duration:0 }}</span>
+                    <span>数据库总数说明术语</span>
                   </div>
-                  <div class="border-bottom">
-                    <div>
-                      <div class="panel-item-tit">中位时延 (ms)</div>
-                      <div class="panel-item-con" style="color:#F53F3F">{{ digitsObj.median_duration != undefined?Number(digitsObj.median_duration).toFixed(2):0 }}</div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
+                <div>
+                  <div class="panel-item-tit">数据库总数</div>
+                  <div class="panel-item-con" style="color:#F53F3F">{{ digitsObj.median_duration != undefined?Number(digitsObj.median_duration):0 }}</div>
+                  <div class="panel-item-day-rate">日同比<i class="el-icon-top goUpColor"></i> 30%</div>
+                </div>
               </div>
             </div>
             <!-- 性能指标概述 -->
@@ -120,73 +128,77 @@
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
                     <i class="dot" />
-                    <span>1200</span>
+                    <span>请求总数说明术语</span>
                   </div>
-                  <div>
-                    <div>
-                      <div class="performance-panel-item-tit">请求总数</div>
-                      <div class="performance-panel-item-con">1200</div>
-                      <div class="performance-panel-item-day-rate">日同比<i class="el-icon-top goUpColor"></i> 30%</div>
-                      <div class="inchart-box">
-                        <RequestInChart></RequestInChart>
-                      </div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
+                <div>
+                  <div class="performance-panel-item-tit">请求总数</div>
+                  <div class="performance-panel-item-con">1200</div>
+                  <div class="performance-panel-item-day-rate">日同比<i class="el-icon-top goUpColor"></i> 30%</div>
+                  <div class="inchart-box">
+                    <RequestInChart></RequestInChart>
+                  </div>
+                </div>
               </div>
               <div class="performance-panel-item">
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
-                    <i class="dot"></i>
-                    <span>12</span>
+                    <i class="dot" />
+                    <span>错误数说明术语</span>
                   </div>
-                  <div>
-                    <div>
-                      <div class="performance-panel-item-tit">错误数</div>
-                      <div class="performance-panel-item-con">12</div>
-                      <div class="performance-panel-item-day-rate">日同比 <i class="el-icon-bottom goDownColor"></i> 30%</div>
-                      <div class="inchart-box">
-                        <RequestInChart></RequestInChart>
-                      </div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
+                <div>
+                  <div class="performance-panel-item-tit">错误数</div>
+                  <div class="performance-panel-item-con">12</div>
+                  <div class="performance-panel-item-day-rate">日同比 <i class="el-icon-bottom goDownColor"></i> 30%</div>
+                  <div class="inchart-box">
+                    <RequestInChart></RequestInChart>
+                  </div>
+                </div>
               </div>
               <div class="performance-panel-item">
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
-                    <i class="dot"></i>
-                    <span>12</span>
+                    <i class="dot" />
+                    <span>实例数说明术语</span>
                   </div>
-                  <div>
-                    <div>
-                      <div class="performance-panel-item-tit">实例数</div>
-                      <div class="performance-panel-item-con">12</div>
-                      <div class="performance-panel-item-day-rate">日同比 <i class="el-icon-bottom goDownColor"></i> 30%</div>
-                      <div class="inchart-box">
-                        <RequestInChart></RequestInChart>
-                      </div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
+                <div>
+                  <div class="performance-panel-item-tit">实例数</div>
+                  <div class="performance-panel-item-con">12</div>
+                  <div class="performance-panel-item-day-rate">日同比 <i class="el-icon-bottom goDownColor"></i> 30%</div>
+                  <div class="inchart-box">
+                    <RequestInChart></RequestInChart>
+                  </div>
+                </div>
               </div>
               <div class="performance-panel-item">
                 <el-tooltip placement="bottom" effect="dark" :visible-arrow="false">
                   <div slot="content">
-                    <i class="dot"></i>
-                    <span>1200</span>
+                    <i class="dot" />
+                    <span>平均耗时说明术语</span>
                   </div>
-                  <div>
-                    <div>
-                      <div class="performance-panel-item-tit">平均耗时</div>
-                      <div class="performance-panel-item-con">1200ms</div>
-                      <div class="performance-panel-item-day-rate">日同比 <i class="el-icon-bottom goDownColor"></i> 30%</div>
-                      <div class="inchart-box">
-                        <RequestInChart></RequestInChart>
-                      </div>
-                    </div>
+                  <div class="icon-box">
+                    <i class="el-icon-question"></i>
                   </div>
                 </el-tooltip>
+                <div>
+                  <div class="performance-panel-item-tit">平均耗时</div>
+                  <div class="performance-panel-item-con">1200ms</div>
+                  <div class="performance-panel-item-day-rate">日同比 <i class="el-icon-bottom goDownColor"></i> 30%</div>
+                  <div class="inchart-box">
+                    <RequestInChart></RequestInChart>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -574,9 +586,10 @@ export default {
     };
     .panel-box{
       width: 100%;
-      font-size: 0;
+      // font-size: 0;
       padding-top: 20px;
       .panel-item{
+        position: relative;
         display: inline-flex;
         width: calc(50% - 5px);
         box-sizing: border-box;
@@ -589,6 +602,14 @@ export default {
         padding: 0 10px;
         border-radius: 8px;
         cursor: pointer;
+        .icon-box{
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          i{
+            font-size: 14px;
+          }
+        }
         &:nth-child(even){
           margin-right:0;
         }
@@ -605,6 +626,10 @@ export default {
           margin-top:10px;
           text-align: center;
         }
+        .panel-item-day-rate{
+          font-size:10px;
+          opacity: 0.9;
+        }
       }
     }
     .performance-box{
@@ -663,6 +688,7 @@ export default {
     .performance-panel-box{
       margin:10px 0;
       .performance-panel-item{
+        position: relative;
         display: inline-flex;
         width: calc(50% - 5px);
         box-sizing: border-box;
@@ -675,6 +701,14 @@ export default {
         padding: 0 10px;
         border-radius: 8px;
         cursor: pointer;
+        .icon-box{
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          i{
+            font-size: 14px;
+          }
+        }
         &:nth-child(even){
           margin-right:0;
         }