feat:新功能

1.dashboard模块：图表标题居中，删除右侧4个按钮，图表标题增加向下箭头，默认不显示，鼠标悬浮显示，将右侧的4个按钮放到图表的下拉列表中

nezha-fronted/src/components/charts/chart-table.scss

@@ -13,6 +13,25 @@
 .dialog-tool {
   margin-right: 40px;
 }
+.hidden{
+  visibility: hidden;
+}
+.visible{
+  visibility: visible;
+}
+.nz-chart-dropdown {
+  height: 147px;
+  li {
+    /*padding: 0 20px !important;*/
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
 .chart-table {
   width: calc(100% - 18px);
   height: 100%;//calc(100% - 40px);
@@ -22,12 +41,24 @@
   border: 1px solid #d8dce1;
   padding: 20px 8px 3px;
   margin-bottom: 10px;
-  .table-title {
+  .chartTitle {
-    margin: -3px 0 3px 10px;
+    text-align: center;
-    font-weight: bold;
+    width: 100%;
-    font-size: 18px;
+    .nz-chart-top{
-    line-height: 26px;
+    }
-    color: #333;
+    .el-dropdown-link {
+      cursor: pointer;
+    }
+    .el-icon-arrow-down {
+      font-size: 12px;
+    }
+    .chart-title {
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 26px;
+      color: #333;
+      margin: -3px 0 3px 10px;
+    }
   }
   .edit:after{
     display: block;

nezha-fronted/src/components/charts/chart-table.vue

@@ -7,7 +7,7 @@
   }
 </style>
 <template>
-    <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
+    <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
         <loading  :ref="'localLoading'+chartIndex"></loading>
       <!--
         <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
@@ -17,16 +17,23 @@
           </div>
         </div>
         -->
-        <div class="clearfix">
+        <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex">
-            <div class="table-title" v-show="firstShow">
+
-                {{data.title}}
+          <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
-            </div>
+            <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-            <div class="nz-btn-group nz-btn-group-light edit button-panel-height"  v-show="firstShow">
+              {{data.title}}<i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i>
-              <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
+            </span>
-              @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" ><i class="nz-icon nz-icon-edit"></i></button><button
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: 0px; transform-origin: center top; z-index: 1000;" >
-              @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-delete"></i></button><button
+              <li  @click="refreshChart"  class="el-dropdown-menu__item">
-              @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
+                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
-            </div>
+              <li  @click="editChart"  class="el-dropdown-menu__item">
+                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+              <li  @click="removeChart"  class="el-dropdown-menu__item">
+                <i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
+                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
+            </ul>
+          </el-dropdown>
 
         </div>
         <div class="mt-10" v-cloak  v-show="firstShow">
@@ -153,6 +160,8 @@ export default {
             },
             stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
             firstShow: false, // 默认不显示操作按钮,
+            caretShow:false,
+            dropdownMenuShow:false,
             divFirstShow:false,
             //tableLoading: false,
             columns: [
@@ -355,16 +364,19 @@ export default {
         */
         // 重新请求数据 刷新操作-local
         refreshChart() {
+            this.dropdownMenuShow=false;
             this.startLoading();
             this.firstShow = false;
             this.$emit('on-refresh-data', this.data.id);
         },
         // 编辑图表
         editChart() {
+            this.dropdownMenuShow=false;
             this.$emit('on-edit-chart-block', this.data.id);
         },
         // 删除该图表
         removeChart() {
+            this.dropdownMenuShow=false;
             this.$emit('on-remove-chart-block', this.data.id);
         },
         //全屏时间条件查询
@@ -387,8 +399,12 @@ export default {
             //this.firstShow = false;
             this.$emit('on-search-data', this.data.id, this.searchTime);
         },
+        clickos() {
+          this.dropdownMenuShow=false;
+        },
         // 全屏查看
         showAllScreen() {
+            this.dropdownMenuShow=false;
             // 初始化同步时间
             //this.searchTime = this.oldSearchTime;
           //alert(JSON.stringify(this.oldSearchTime));

nezha-fronted/src/components/charts/line-chart-block.scss

@@ -7,6 +7,12 @@
 .clearfix{
   margin-bottom: 7px;
 }
+.hidden{
+  visibility: hidden;
+}
+.visible{
+  visibility: visible;
+}
 .legend-shape{
   display:inline-block;
   margin-right:5px;
@@ -41,6 +47,19 @@
   float:left;
   line-height: 20px;
 }
+.nz-chart-dropdown {
+  height: 147px;
+  li {
+    /*padding: 0 20px !important;*/
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
 .line-chart-block {
   height: 100%;
   //min-height: 0px;
@@ -50,13 +69,26 @@
   padding: 20px 8px;
   margin-bottom: 10px;
   padding-bottom: 3px;
-  .chart-title {
+  .chartTitle {
-    font-weight: bold;
+     text-align: center;
-    font-size: 18px;
+     width: 100%;
-    line-height: 26px;
+    .nz-chart-top{
-    color: #333;
+    }
-    margin: -3px 0 3px 10px;
+    .el-dropdown-link {
+      cursor: pointer;
+    }
+    .el-icon-arrow-down {
+      font-size: 12px;
+    }
+    .chart-title {
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 26px;
+      color: #333;
+      margin: -3px 0 3px 10px;
+    }
   }
+
   .line-area {
     box-sizing: border-box;
     background: #FFF;

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -2,7 +2,7 @@
   @import './line-chart-block.scss';
 </style>
 <template>
-  <div class="line-chart-block"   :id="'lineChartDiv'+chartIndex" v-show="divFirstShow">
+  <div class="line-chart-block"   :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
     <loading  :ref="'localLoading'+chartIndex"></loading>
     <!--<div class="edit">
 
@@ -21,16 +21,45 @@
         </span>
       </div>
     </div>-->
-    <div class="clearfix">
+
-      <div class="chart-title" v-show="firstShow">
+    <div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
-        {{data.title}}
+
-      </div>
+      <el-dropdown trigger="click" v-show="firstShow"   class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
-      <div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
+          <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
-        <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
+            {{data.title}}<i class="el-icon-caret-bottom el-icon--right"  :class="{'visible':caretShow,'hidden':!caretShow}"></i>
-        @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button><button
+          </span>
-        @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button><button
+        <!--
-        @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
+          <el-dropdown-menu slot="dropdown"  class="nz-chart-dropdown" :popper-append-to-body="false">
-      </div>
+            <el-dropdown-item @click.native="refreshChart" ><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i>{{$t('dashboard.refresh')}}</el-dropdown-item>
+            <el-dropdown-item @click.native="editChart"><i style="font-size: 14px;margin-right: 11px;margin-left: 1px;" class="nz-icon nz-icon-edit"></i>{{$t('dashboard.edit')}}</el-dropdown-item>
+            <el-dropdown-item @click.native="removeChart" ><i style="font-size: 16px;" class="el-icon-delete"></i>{{$t('dashboard.delete')}}</el-dropdown-item>
+            <el-dropdown-item @click.native="showAllScreen"  ><i style="font-size: 16px;" class="el-icon-full-screen"></i>{{$t('dashboard.screen')}}</el-dropdown-item>
+          </el-dropdown-menu>
+          -->
+        <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: 0px; transform-origin: center top; z-index: 1000;" >
+          <li  @click="refreshChart"  class="el-dropdown-menu__item">
+            <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
+          <li  @click="editChart"  class="el-dropdown-menu__item">
+            <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+          <li  @click="removeChart"  class="el-dropdown-menu__item">
+            <i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+          <li  @click="showAllScreen"  class="el-dropdown-menu__item">
+            <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
+        </ul>
+      </el-dropdown>
+    <!--
+   <div class="chart-title" v-show="firstShow">
+     {{data.title}}
+   </div>
+
+   <div class="nz-btn-group nz-btn-group-light edit button-panel-height" v-show="firstShow">
+     <button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button>
+     <button @click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button>
+     <button  @click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button>
+     <button
+     @click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
+   </div>
+   -->
     </div>
 
     <div class="line-area"  ref="lineChartArea"  id="lineChartArea" v-show="firstShow"></div>
@@ -157,6 +186,8 @@
           '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
         ],
         firstShow: false, // 默认不显示操作按钮,
+        caretShow:false,
+        dropdownMenuShow:false,
         showLegend:true,
         searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
         oldSearchTime:[],
@@ -919,16 +950,22 @@
           this.echartModalStore.clear();
         }
       },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
       // 删除该图表
       removeChart() {
+        this.dropdownMenuShow=false;
         this.$emit('on-remove-chart-block', this.data.id);
       },
       // 编辑图表
       editChart() {
+        this.dropdownMenuShow=false;
         this.$emit('on-edit-chart-block', this.data.id);
       },
       // 重新请求数据 刷新操作
       refreshChart() {
+        this.dropdownMenuShow=false;
         this.clearChart();
         this.$refs['localLoading'+this.chartIndex].startLoading();
         this.firstShow = false;
@@ -953,6 +990,7 @@
       },
       // 全屏查看
       showAllScreen() {
+        this.dropdownMenuShow=false;
         // 初始化同步时间
         this.filter.start_time = this.stableFilter.start_time;
         this.filter.end_time = this.stableFilter.end_time;