From 15a0e803f85e2bcd3a0907d07fbe4672d2473c9a Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Fri, 17 Jan 2020 10:25:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9BUG=201.metric=E6=8C=87?=
 =?UTF-8?q?=E6=A0=87=E5=90=8D=E7=A7=B0=E8=BF=87=E9=95=BF=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E8=A6=86=E7=9B=96=E5=8F=B3=E4=BE=A7=E7=9A=84label=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0(=E6=96=B0=E5=A2=9E=E5=9B=BE=E8=A1=A8=E5=92=8C?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E9=A2=84=E8=A7=88=E4=B8=AD)=202.=E6=8C=87?=
 =?UTF-8?q?=E6=A0=87=E9=A2=84=E8=A7=88=E4=B8=AD=EF=BC=8C=E4=B8=8D=E5=8F=AF?=
 =?UTF-8?q?=E7=94=A8=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=203.=E6=8C=87=E6=A0=87=E9=A2=84=E8=A7=88=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7label=E5=80=BC=E9=80=89=E6=8B=A9=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=88=97=E8=A1=A8=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/page/dashboard/chartMetric.vue |  8 +++---
 .../page/dashboard/chartMetricForPreview.vue  | 11 ++++----
 .../components/page/dashboard/metricSet.scss  |  8 ++++--
 .../components/page/dashboard/metricSet.vue   | 25 +++++++++++++------
 4 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index 674b2fc74..06c001601 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -30,10 +30,10 @@
    }
     .li-list-part-label-val-list {
       width: 100%;
-      height: 165px;
+      height: 145px;
       border: 1px solid #cfcfcf;
       overflow-y: auto;
-      margin-top: -10px;/*21*/
+      margin-top: 20px;/*21*/
       border: 0px;
     }
   .no-list-style{
@@ -75,12 +75,12 @@
           <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </button>
-          <button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
+          <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
             <span>{{$t('dashboard.metric.expert')}}</span>
           </button>
         </div>
         <div class="nz-btn-group float-left"  v-show="tableShow == 1">
-          <button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
+          <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </button>
           <button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index 0aa8d3ef2..2b5dcee94 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -30,10 +30,10 @@
    }
     .li-list-part-label-val-list {
       width: 100%;
-      height: 165px;
+      height: 145px;
       border: 1px solid #cfcfcf;
       overflow-y: auto;
-      margin-top: -10px;/*21*/
+      margin-top: 20px;/*21*/
       border: 0px;
     }
   .no-list-style{
@@ -75,12 +75,12 @@
           <button @click="clickTabelShow(1,'normal')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </button>
-          <button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
+          <button @click="" class="nz-btn nz-btn-size-small nz-btn-style-normal float-left">
             <span>{{$t('dashboard.metric.expert')}}</span>
           </button>
         </div>
         <div class="nz-btn-group float-left"  v-show="tableShow == 1">
-          <button @click="" class="nz-btn nz-btn-size-small nz-btn-disabled nz-btn-style-normal float-left">
+          <button @click="" class="nz-btn nz-btn-size-small  nz-btn-style-normal float-left">
             <span>{{$t('dashboard.metric.normal')}}</span>
           </button>
           <button @click="clickTabelShow(2,'expert')" class="nz-btn nz-btn-size-small nz-btn-style-light float-left">
@@ -132,7 +132,8 @@
       </el-col>
       <el-col span="12">
         <div class="li-list-part-label-val-list" >
-          <el-form-item class="metric-title-position"   v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+          <el-form-item class="metric-title-position"   v-for="(item, index) in elementInfo.selectedTagList" :key="index"  :label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+            <el-row >{{item.name}}</el-row>
             <el-row class="metric-title-row-position" >
             <!--多选列表 -->
               <el-col span="20" >
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.scss b/nezha-fronted/src/components/page/dashboard/metricSet.scss
index d0177524a..9400d8de0 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.scss
@@ -21,6 +21,7 @@
     border-top: 1px solid #dfe7f2;
     border-bottom: 1px solid #dfe7f2;
     padding: 5px 0;
+    margin-left:3px;
     .operate-area-title {
       padding: 5px 0;
       font-size: 14px;
@@ -48,8 +49,11 @@
   .mt-10{
     margin-top:10px;
   }
-  .nx-btn-disabled{
-    cursor:not-allowed;
+  .ml-3{
+    margin-left:3px;
+  }
+  .btn-disabled-cursor-not-allowed{
+    cursor:not-allowed !important;
   }
   .w-select{
     width:130px;
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index 089703a6c..df90b0be1 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -11,20 +11,20 @@
           @on-change-condition="getCondition"
           ></chart-metric>
       </el-row>
-      <el-row class="pt-5 pb-5">
+      <el-row class="pt-5 pb-5 ml-3">
         <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-normal nz-btn-style-normal ">{{$t('dashboard.metric.previewChart')}}</button>
         <button :disabled="saveDisabled || loading" type="primary" @click="preview('change')"
-                :class="{'nz-btn nx-btn-disabled' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !(saveDisabled || loading)}"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !(saveDisabled || loading)}"
         >{{chartSwitchWord}}</button>
         <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
       </el-row>
       <el-row class="operate-area">
         <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div>
         <button :disabled="saveDisabled" type="primary" @click="createNew"
-                :class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light  btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
         >{{$t('dashboard.metric.createPanel')}}</button>
         <button :disabled="saveDisabled" type="primary" @click="selectPanel"
-                :class="{'nz-btn nx-btn-disabled' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
+                :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
         >{{$t('dashboard.metric.selectPanel')}}</button>
       </el-row>
       <el-row class="mt-10">
@@ -33,7 +33,7 @@
       <el-form :model="chartInfo" ref="chartInfo" v-show="isSave">
         <el-row>
           <div class="common-float-left">
-            <el-form-item :label-width="80" :label="$t('dashboard.panel.chartForm.width')" prop="span"
+            <el-form-item  :label-width="80" :label="$t('dashboard.panel.chartForm.width')" prop="span"
             :rules="{ required: true, type: 'number', trigger: 'change' }">
               <el-select class="w-select" size="small" v-model="chartInfo.span" transfer>
                 <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
@@ -71,7 +71,7 @@
   </div>
 </template>
 <script>
-import axios from 'axios';
+//import axios from 'axios';
 import bus from '../../../libs/bus';
 import chartMetric from "./chartMetricForPreview";
 import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
@@ -158,8 +158,6 @@ export default {
     reload(){
       this.saveDisabled = true;
       this.elementTarget = {};
-
-
     },
     // 创建看板
     createNew() {
@@ -177,6 +175,7 @@ export default {
       this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
       this.$refs.panelBox.getTableData();
     },
+    /*
     // 取消创建modal
     cancel() {
       this.panelList = [];
@@ -190,16 +189,20 @@ export default {
       }
       this.createModal = false;
     },
+    */
+    /*
     // 重置已选择的看板
     initSaveInfo() {
       this.chartSaveInfo.name = ''; // panel名称创建
       this.chartSaveInfo.panelId = ''; // 选择panel
     },
+
     close() {
       this.elementTarget = {}; // 初始化清空参数
       this.initInfo();
       this.chartModal = false;
     },
+    */
     // 初始化信息
     initInfo() {
       this.chartInfo.title = '';
@@ -260,6 +263,7 @@ export default {
         }
       });
     },
+    /*
     // 确认创建图表
     createConfirm() {
       this.$refs.chartInfo.validate((valid) => {
@@ -292,6 +296,7 @@ export default {
         }
       });
     },
+
     // 选择看板
     panelSelect(id) {
       if (id) {
@@ -301,6 +306,8 @@ export default {
         }
       }
     },
+    */
+    /*
     // 生成图表的时候,使用该函数,汇总创建图表参数
     getOptions() {
       this.$refs.chartInfo.validate((valid) => {
@@ -431,10 +438,12 @@ export default {
         });
       }
     },
+
     // 增加指标,tarNum
     addTarget() {
       this.elements.push(1);
     },
+    */
     // 获取metric列表
     getSuggestMetric(id) {
       this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {