style： 拓扑图 细节优化

nezha-fronted/src/components/common/project/popData/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="main-content">
     <div class="main-box">
-      <div class="main-box-title">Asset</div>
+      <div class="main-box-title">Assets</div>
       <div class="main-box-content">
         <div class="content-box">
           <span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
@@ -15,7 +15,7 @@
     </div>
 
     <div class="main-box">
-      <div class="main-box-title">Endpoint</div>
+      <div class="main-box-title">Endpoints</div>
       <div class="main-box-content">
         <div class="content-box">
           <span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
@@ -29,7 +29,7 @@
     </div>
 
     <div class="main-box">
-      <div class="main-box-title">Alert message</div>
+      <div class="main-box-title">Alert messages</div>
       <div class="main-box-content">
         <div class="content-box">
           <span class="content-title"><i class="nz-icon nz-icon-jiantou-top colorFFF bg23BF9A"></i>high</span>

nezha-fronted/src/components/common/project/popData/alertTable.vue

@@ -11,7 +11,7 @@
       <!-- end--顶部按钮-->
 
       <!-- begin--标题-->
-      <div class="right-box-title">Alert list</div>
+      <div class="right-box-title">Alert messages</div>
       <!-- end--标题-->
 
       <!-- begin--表格-->

nezha-fronted/src/components/common/project/popData/lineChart.vue

@@ -5,6 +5,12 @@
   .resize-box{
     border: none;
   }
+  .project-chart-title{
+    text-align: center;
+  }
+  .nz-chart-dropdown{
+    height: 75px;
+  }
 </style>
 <template>
   <div class="nz-chart-resize">
@@ -12,7 +18,7 @@
     <div class="resize-box resize-box-echarts" ref="resizeBox">
       <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
         <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle" :class="{'drag-disabled': this.filter.from == 'alertRule'}" :id="'chartTitle'+chartIndex" >
+        <div class="clearfix project-chart-title" :class="{'drag-disabled': this.filter.from == 'alertRule'}" :id="'chartTitle'+chartIndex" >
           <el-popover
             v-if="isError"
             placement="top-start"
@@ -41,7 +47,7 @@
           </span>
           <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
-            <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
+            <span class="el-dropdown-link" @click="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
               <span class="chart-title-icon" v-if="filter.from != 'alertRule'"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
             </span>

nezha-fronted/src/components/common/project/topology.vue

@@ -601,7 +601,7 @@
         })
       },
       //工具栏点击后显示对应内容
-      popDataShowUpdate(key){
+      popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
         // console.log(key);
         this.popDataShow={
           endpoint:false,
@@ -626,6 +626,9 @@
             this.popDataShow[key]=true;
           })
         }
+        if(this.selNodeId&&!flag){
+          this.setPopPosition(this.selNodeId);
+        }
       },
       //拓扑图放大缩小
       zoomChange(num){
@@ -653,7 +656,7 @@
            console.log(params);
            this_.networkPopClose();
            if(!params.edges.length&&!params.nodes.length){
-             this_.popDataShowUpdate();
+             this_.popDataShowUpdate('',true);
            }
          });
 

nezha-fronted/src/components/common/project/visNetwork.vue

@@ -4,7 +4,7 @@
     <div class="resize-box resize-box-table" ref="resizeBox">
       <div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix chartTitle text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+        <div class="clearfix text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
           <el-popover
             v-if="isError"
             :close-delay=10
@@ -23,11 +23,12 @@
                 <!--<span class="chart-title-text">{{chartData.title}}</span>-->
                 <!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon&#45;&#45;right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
               </span>
-              <span>
+              <div style="height: 24px">
-                <i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(true)"></i>
+                <i class="nz-icon nz-icon-edit float-right"  @click="editVisNetworkChange(true)" v-show="!editVisNetwork"></i>
+                <i class="nz-icon nz-icon-refresh float-right"  @click="reload" v-show="!editVisNetwork"></i>
                 <!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
                 <!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
-              </span>
+              </div>
             </span>
         </div>
         <div class="vis-network-content">
@@ -322,6 +323,10 @@
   .nz-icon-edit{
     margin-right: 5px;
   }
+  .vis-network .nz-icon-refresh{
+    margin-right: 15px;
+    color: #ee9d3f;
+  }
   .table-container{
     height: calc(100% - 30px);
   }