Merge branch 'dev' of ssh://git.cestong.com.cn:8162/cecf/observe-front into dev

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

@@ -6,67 +6,74 @@
           <div class="box system-left-content">
             <!-- 基本信息 -->
             <div class="system-basic-info">
-              <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><p class="service-header-p" ><span class="service-span-right">所属服务：</span><el-tooltip class="item" effect="dark" :content="getServiceName" placement="top"><span class="service-span-left" style="color: #165DFF;"> {{getServiceName}} </span></el-tooltip></p></div>
+              <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>
             <!-- 性能指标概述 -->
@@ -121,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>
@@ -495,6 +506,9 @@ export default {
 </script>
 
 <style scoped lang='scss'>
+.el-icon-question{
+  color:#9a9191;
+}
 .fontSize14{
   font-size: 14px;
   font-weight: bold;
@@ -554,19 +568,19 @@ export default {
         font-weight: bold;
         font-size:14px;;
         margin-bottom: 0;
-        margin-top:10px;
+        margin-top:20px;
         display: flex;
         align-items: center;
         span{
           display: inline-block;
         }
         .service-span-right{
-          text-align: right;
-          width:30%;
+          text-align: left;
+          width:44px;
         }
         .service-span-left{
           text-align: left;
-          width:70%;
+          // width:85%;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -575,9 +589,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;
@@ -590,6 +605,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;
         }
@@ -606,6 +629,10 @@ export default {
           margin-top:10px;
           text-align: center;
         }
+        .panel-item-day-rate{
+          font-size:10px;
+          opacity: 0.9;
+        }
       }
     }
     .performance-box{
@@ -664,6 +691,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;
@@ -676,6 +704,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;
         }

src/views/business-analysis/topology/index.vue

@@ -203,7 +203,7 @@ export default {
       appName: '',
       appId: '',
       appItem: {},
-      collapsed: false,
+      collapsed: true,
       ApdexNum: 1,
       apdex: 0,
       item: {
@@ -756,7 +756,7 @@ export default {
       width:8px;
       height: 100%;
       position:absolute;
-      right:-4px;
+      right:0px;
       top:0;
       // transform: translate(-50%,0);
       z-index: 4;