diff --git a/nezha-fronted/src/assets/css/font/iconfont.eot b/nezha-fronted/src/assets/css/font/iconfont.eot
index 2efab5faa..3d63d2610 100644
Binary files a/nezha-fronted/src/assets/css/font/iconfont.eot and b/nezha-fronted/src/assets/css/font/iconfont.eot differ
diff --git a/nezha-fronted/src/assets/css/font/iconfont.svg b/nezha-fronted/src/assets/css/font/iconfont.svg
index 7824c90c4..c8b215f5f 100644
--- a/nezha-fronted/src/assets/css/font/iconfont.svg
+++ b/nezha-fronted/src/assets/css/font/iconfont.svg
@@ -20,6 +20,9 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="duoxuan" unicode="&#59085;" d="M128 768v-768h768V768H128z m682.666667-682.666667H213.333333V682.666667h597.333334v-597.333334zM755.498667 496.896l-60.330667 60.373333L469.333333 331.434667 328.832 471.936l-60.330667-60.373333L469.333333 210.73066700000004z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="user" unicode="&#58924;" d="M507.845486 895.42656c185.607314 0 336.0768-150.469486 336.0768-336.0768 0-116.501943-59.274971-219.153554-149.310903-279.446674 153.76384-53.324069 291.986286-174.442789 323.9936-355.854629a43.844754 43.844754 0 0 0-35.55328-50.7904c-2.574629-0.468114-5.143406-0.684617-7.665372-0.684617a43.838903 43.838903 0 0 0-43.125028 36.226194c-40.023771 226.801371-272.582949 312.747154-412.882652 314.444069l-4.224731 0.023406a44.587886 44.587886 0 0 0-1.872457 0.04096l-4.01408-0.029258-1.427749-0.023405c-138.421394 0-371.95776-83.675429-415.837623-307.65056l-1.26976-6.828617c-3.744914-21.240686-22.252983-36.202789-43.125028-36.202789a43.844754 43.844754 0 0 0-43.224503 51.463314c31.691337 179.533531 167.397669 300.020297 319.24224 354.186972C232.155429 338.265234 171.762834 441.7536 171.762834 559.34976c0 185.607314 150.463634 336.0768 336.0768 336.0768z m0-87.666103c-136.981943 0-248.416549-111.440457-248.416549-248.410697S370.863543 310.939063 507.839634 310.939063s248.410697 111.440457 248.410697 248.410697S644.809874 807.760457 507.845486 807.760457z"  horiz-adv-x="1024" />
 
     
diff --git a/nezha-fronted/src/assets/css/font/iconfont.ttf b/nezha-fronted/src/assets/css/font/iconfont.ttf
index f18e4dd0e..29b257824 100644
Binary files a/nezha-fronted/src/assets/css/font/iconfont.ttf and b/nezha-fronted/src/assets/css/font/iconfont.ttf differ
diff --git a/nezha-fronted/src/assets/css/font/iconfont.woff b/nezha-fronted/src/assets/css/font/iconfont.woff
index 248b23381..c95e90d4c 100644
Binary files a/nezha-fronted/src/assets/css/font/iconfont.woff and b/nezha-fronted/src/assets/css/font/iconfont.woff differ
diff --git a/nezha-fronted/src/assets/css/font/iconfont.woff2 b/nezha-fronted/src/assets/css/font/iconfont.woff2
index 5ba0c8162..83d6316c8 100644
Binary files a/nezha-fronted/src/assets/css/font/iconfont.woff2 and b/nezha-fronted/src/assets/css/font/iconfont.woff2 differ
diff --git a/nezha-fronted/src/assets/css/nzIcon.css b/nezha-fronted/src/assets/css/nzIcon.css
index 3fccf0b99..9f7984682 100644
--- a/nezha-fronted/src/assets/css/nzIcon.css
+++ b/nezha-fronted/src/assets/css/nzIcon.css
@@ -1,10 +1,10 @@
 @font-face {font-family: "nz-icon";
-  src: url('font/iconfont.eot?t=1582165130203'); /* IE9 */
-  src: url('font/iconfont.eot?t=1582165130203#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('font/iconfont.woff?t=1582165130203') format('woff'),
-  url('font/iconfont.ttf?t=1582165130203') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('font/iconfont.svg?t=1582165130203#nz-icon') format('svg'); /* iOS 4.1- */
+  src: url('font/iconfont.eot?t=1582276820801'); /* IE9 */
+  src: url('font/iconfont.eot?t=1582276820801#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('font/iconfont.woff?t=1582276820801') format('woff'),
+  url('font/iconfont.ttf?t=1582276820801') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('font/iconfont.svg?t=1582276820801#nz-icon') format('svg'); /* iOS 4.1- */
 }
 
 .nz-icon {
@@ -15,6 +15,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-duoxuan:before {
+  content: "\e6cd";
+}
+
 .nz-icon-user:before {
   content: "\e62c";
 }
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index cab62355a..3ce6d65a9 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -3,12 +3,15 @@
 </style>
 <template>
     <div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
+        <loading  :ref="'localLoading'+chartIndex"></loading>
+      <!--
         <div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
           <div class="el-loading-spinner">
             <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
             <p class="el-loading-text loading-font">loading</p>
           </div>
         </div>
+        -->
         <div class="clearfix">
             <div class="table-title" v-show="firstShow">
                 {{data.title}}
@@ -46,12 +49,15 @@
                     <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
 
                 </el-table>
+                <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+            <!--
                 <div v-show="showLoadingScreen" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
                   <div class="el-loading-spinner">
                     <img width="42px" height="42px"  src="../../assets/img/loading.gif"/>
                     <p class="el-loading-text loading-font">loading</p>
                   </div>
                 </div>
+                -->
         </el-dialog>
     </div>
 </template>
@@ -59,10 +65,13 @@
 <script>
 import bus from '../../libs/bus';
 import {Loading} from 'element-ui';
+import loading from "../common/loading";
 
 export default {
     name: 'chartTable',
-    components: {},
+  components: {
+    'loading': loading,
+  },
     props: {
         // 看板id
         panelId: {
@@ -93,8 +102,8 @@ export default {
             },
             panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
             firstLoad: false, // 是否第一次加载
-            showLoading:true,
-            showLoadingScreen:false,
+            //showLoading:true,
+            //showLoadingScreen:false,
             //showTable:true,
             chartType: 'table', // 图表类型
             screenModal: false,
@@ -218,9 +227,11 @@ export default {
     methods: {
         startLoading(area){
           if(area==='screen'){
-            this.showLoadingScreen = true;
+            //this.showLoadingScreen = true;
+            this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
           }else {
-            this.showLoading = true;
+            //this.showLoading = true;
+            this.$refs['localLoading'+this.chartIndex].startLoading();
           }
 /*
           //this.loading = this.$loading({
@@ -236,9 +247,11 @@ export default {
         },
         endLoading(area){
           if(area==='screen'){
-            this.showLoadingScreen = false;
+            //this.showLoadingScreen = false;
+            this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
           }else {
-            this.showLoading = false;
+            //this.showLoading = false;
+            this.$refs['localLoading'+this.chartIndex].endLoading();
           }
         },
         clearData(){
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 2af598619..7beac3e68 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -243,6 +243,9 @@
     },
     watch: {},
     methods: {
+      setDivFirstShow(showDiv){
+        this.divFirstShow = showDiv;
+      },
       clickLegend(legendName,index){
         if (this.echartStore) {
           this.echartStore.dispatchAction({
@@ -654,7 +657,7 @@
           this.echartStore.setOption(option);//创建图表
           //this.echartStore.hideLoading();
           this.$refs['localLoading'+this.chartIndex].endLoading();
-          if(legend && legend.length>0){
+          if(legend){
             this.legendList = [];
             legend.forEach((item, i) => {
               const legend = {
@@ -721,14 +724,16 @@
           });
           */
           // eslint-disable-next-line
-          this.echartModalStore.clear();
+          if(this.echartModalStore){
+            this.echartModalStore.clear();
+          }
           option.title = {};
           this.echartModalStore.setOption(option);//显示全屏界面
           //this.echartModalStore.hideLoading();
           this.showLegend = true;
           this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
           //this.echartModalStore.resize({height:chartInfo.height});
-          if(legend && legend.length>0){
+          if(legend){
             this.screenLegendList = [];
             legend.forEach((item, i) => {
               const legend = {
@@ -950,6 +955,9 @@
                 visible: true,
                 threshold: null,
               };
+              if(!this.data.type){
+                this.data.type='line';
+              }
               res.forEach((response) => {
                 if (response.status === 'success') {
                   if (response.data.result) {
@@ -1029,10 +1037,7 @@
             }
           }).catch((error) => {
             if (error) {
-              this.$message.warning({
-                content: this.$t("tip.refreshLater"),//'Please refesh later',//请稍后刷新
-                duration: 3,
-              });
+              this.$message.error(error.toString());
             }
           });
         });
@@ -1050,6 +1055,8 @@
          // const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
           //tableBox.style.height = `${height-75}px`;
         });
+        this.clearData();
+        this.firstShow = false;
         this.$refs['localLoading'+this.chartIndex].startLoading();
         this.divFirstShow = true;
 
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 61d8f4910..45f0acdad 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -57,15 +57,16 @@
         </template>
         <template v-for="(item, index) in assetData">
           <el-menu-item :index="'3-' + index">
-            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">
+<!--            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" :class="{'menu-item-active' : (activeIndex == 'asset' && indOf(activeItemIndexes, item.id) > -1) }">-->
+            <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
               <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas">
-                <template v-slot:optionZone>
-                  <div v-show="hoverItemIndex == '3-' + index" @click="closeAllPop" class="menu-edit">
-                    <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
-                  </div>
-                </template>
-              </idc-config-box>
+<!--              <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :user-data="userDatas">-->
+<!--                <template v-slot:optionZone>-->
+<!--                  <div v-show="hoverItemIndex == '3-' + index" @click="closeAllPop" class="menu-edit">-->
+<!--                    <i class="nz-icon nz-icon-edit" @click="getIDCOptionData(item.id)" style="color: inherit"></i>-->
+<!--                  </div>-->
+<!--                </template>-->
+<!--              </idc-config-box>-->
             </div>
           </el-menu-item>
         </template>
@@ -109,6 +110,9 @@
           <div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
         </el-menu-item>
         <el-menu-item index="6-3">
+          <div @click="showPwdDialog">{{$t('overall.changePwd')}}</div>
+        </el-menu-item>
+        <el-menu-item index="6-4">
           <div @click="logout">{{$t('overall.signOut')}}</div>
         </el-menu-item>
       </el-submenu>
@@ -124,13 +128,16 @@
     <asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
                     @sendStateData="closeAsset"></asset-add-unit>
     <alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
+    <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
 
 <script>
   import bus from '../../libs/bus';
+  import changePwd from "../page/config/changePwd";
   export default {
     name: "Header",
+    components: {'change-password':changePwd},
     data() {
       return {
         username: sessionStorage.getItem("nz-username"),
@@ -216,7 +223,8 @@
         idcUserData: '',
         IDCOptionData: [],
         addUnitShow: false,
-        userDatas:[]
+        userDatas:[],
+        showChangePwd:false,
       }
     },
     methods: {
@@ -421,6 +429,12 @@
       refreshLang() {
         this.language = localStorage.getItem("nz-language-" + this.username);
         this.$i18n.locale = this.language;
+      },
+      showPwdDialog:function(){
+        this.showChangePwd=true;
+      },
+      dialogClosed:function(){
+        this.showChangePwd=false;
       }
     },
     created() {
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 289dfe891..33eddf520 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -34,7 +34,8 @@ const en = {
     query: 'Query', //查询
     back: 'Back', //返回
     unavailable: 'Unavailable',
-    available: 'Available'
+    available: 'Available',
+   changePwd:'Change Password',//修改密码
   },
   dashboard:{
     title:'Dashboard',
@@ -157,7 +158,7 @@ const en = {
     refreshLater:'Refresh later'//'请稍后刷新'
   },
   asset:{
-    asset: 'Asset',//'资产'
+    asset: 'Assets',//'资产'
     EditAsset:'Edit asset',//'编辑资产'
     pingActive: 'active',//可ping通
     pingInactive:'inactive',
@@ -340,7 +341,16 @@ const en = {
       createAccount: 'New account',//"新增用户"
       editAccount: 'Edit account',//"编辑用户"
       notCurrentlySupport: 'Not available',//'暂不支持'
-      password: 'Password'//'密码'
+      password: 'Password',//'密码'
+      oldPwd:'Old Password',
+      inputOldPwd:'Please input old password',
+      newPwd:'New password',
+      inputNewPwd:'Please input new password',
+      confirmPwd:'Confirm Password',
+      inputConfirmPwd:'Please input confirm password',
+      invalidPwd:'invalide password,the length at least 6',
+      confirmPwdErr:'The two passwords are inconsistent',
+      reinputPwd:'Enter password again'
     },
     promServer: {
       promServerList: 'Prometheus server',//"Prometheus Server"
@@ -357,10 +367,10 @@ const en = {
     }
   },
   alert: {
-    alert: 'Alert',//"告警"
+    alert: 'Alerts',//"告警"
     message: 'Message',//'信息'
     rule: 'Rule',//'规则'
-    alertList: 'Alert information',//"告警信息"
+    alertList: 'Alert message',//"告警信息"
     alertConfig: 'Alert rule',//"告警规则"
     alertName: 'Alert name',//"告警名称"
     severity: 'Level',//"等级"
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index d35c31cd3..a0463df7e 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="asset" ref="asset">
     <div class="content-left">
-      <div class="sidebar-title">Asset</div>
+      <div class="sidebar-title">{{$t('asset.asset')}}</div>
       <div class="sidebar-info">
         <!--<div class="sidebar-info-header">ALL</div>-->
         <el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" v-model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
@@ -17,13 +17,13 @@
               <span v-else>{{item.name}}</span>
             </div>
 
-            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">
-              <template v-slot:optionZone>
-                <span @click="closeAllPop">
-                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>
-                </span>
-              </template>
-            </idc-config-box>
+<!--            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
+<!--              <template v-slot:optionZone>-->
+<!--                <span @click="closeAllPop">-->
+<!--                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>-->
+<!--                </span>-->
+<!--              </template>-->
+<!--            </idc-config-box>-->
           </el-checkbox>
         </el-checkbox-group>
       </div>
@@ -107,20 +107,22 @@
               <span v-else class="unclickable">{{scope.row.alertNum}}</span>
             </template>
             <div v-if="item.prop=='dataCenter'">
-              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left"  @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">
-                <template v-slot:optionZone>
-<!--                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
-                  <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>
-                </template>
-              </idc-config-box>
+<!--              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left"  @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
+<!--                <template v-slot:optionZone>-->
+<!--&lt;!&ndash;                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>&ndash;&gt;-->
+<!--                  <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
+<!--                </template>-->
+<!--              </idc-config-box>-->
+              <span  >{{scope.row.idc.name}}</span>
             </div>
             <template v-if="item.prop=='cabinet'">
-              <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='--'" ref="cabinetConfigBox"  placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))"  @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">
-<!--                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>-->
-                <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>
-              </cabinet-config-box>
-              <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>
-
+<!--              <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='&#45;&#45;'" ref="cabinetConfigBox"  placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))"  @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">-->
+<!--&lt;!&ndash;                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>&ndash;&gt;-->
+<!--                <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>-->
+<!--              </cabinet-config-box>-->
+              <span   v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
+<!--              <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>-->
+              <span v-else >{{returnData(scope.row.cabinet)}}</span>
             </template>
             <div v-if="item.prop=='model'">
               <span>{{scope.row.model.name}}</span>
diff --git a/nezha-fronted/src/components/page/asset/assetAddUnit.vue b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
index be13c5326..759b89460 100644
--- a/nezha-fronted/src/components/page/asset/assetAddUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
@@ -256,7 +256,8 @@
           <div class="line-100 asset-line"></div>
           <!------------------------------------------IDC---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
-            <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
+<!--            <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
+            <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData"  placeholder="">
               <el-option
                 :id="'asset-add-idc-op'+item.key"
                 v-for="item in IDCOptionData"
@@ -265,22 +266,22 @@
                 :value="item.id"
               >
                 <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                <div class="config-dropdown-label-icons">
-                  <span class="config-dropdown-btn config-dropdown-btn-delete"
-                        @click.stop="deleteData('idc',item.id)" :id="'asset-add-idc-op-del-'+item.id"><i
-                    class="el-icon-delete"></i></span>
-                  <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
-                    <template v-slot:optionZone>
-                      <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
-                    </template>
-                  </idc-config-box>
-                </div>
+<!--                <div class="config-dropdown-label-icons">-->
+<!--                  <span class="config-dropdown-btn config-dropdown-btn-delete"-->
+<!--                        @click.stop="deleteData('idc',item.id)" :id="'asset-add-idc-op-del-'+item.id"><i-->
+<!--                    class="el-icon-delete"></i></span>-->
+<!--                  <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">-->
+<!--                    <template v-slot:optionZone>-->
+<!--                      <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>-->
+<!--                    </template>-->
+<!--                  </idc-config-box>-->
+<!--                </div>-->
               </el-option>
             </el-select>
-            <div class="right-box-row-btn right-box-row-btn-small">
-              <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
+<!--            <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
 
-            </div>
+<!--            </div>-->
           </el-form-item>
           <el-form-item :label="this.$t('asset.createAssetTab.location')">
             <span>{{idcSelectedData.location}}</span>
@@ -294,7 +295,8 @@
           <div class="line-100 asset-line"></div>
           <!------------------------------------------cabinet---------------------------------------------->
           <el-form-item :label="this.$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
-            <el-select v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
+<!--            <el-select v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
+            <el-select v-model="assetData.cabinetId" clearable popper-class="asset-dropdown"
                        :disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
                        @change="getSingleCabinetData">
               <el-option
@@ -305,21 +307,21 @@
                 :value="item.id"
               >
                 <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                <div class="config-dropdown-label-icons">
-                  <span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-add-cabinet-op-del-'+item.id"
-                        @click.stop="deleteData('cabinet',item.id)">
-                    <i class="el-icon-delete"></i>
-                  </span>
-                  <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
-                    <i slot="optionZone" class="nz-icon nz-icon-edit"></i>
-                  </cabinet-config-box>
-                </div>
+<!--                <div class="config-dropdown-label-icons">-->
+<!--                  <span class="config-dropdown-btn config-dropdown-btn-delete" :id="'asset-add-cabinet-op-del-'+item.id"-->
+<!--                        @click.stop="deleteData('cabinet',item.id)">-->
+<!--                    <i class="el-icon-delete"></i>-->
+<!--                  </span>-->
+<!--                  <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">-->
+<!--                    <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
+<!--                  </cabinet-config-box>-->
+<!--                </div>-->
               </el-option>
             </el-select>
 
-            <div class="right-box-row-btn right-box-row-btn-small">
-              <cabinet-config-box placement="left"  :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>
-            </div>
+<!--            <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <cabinet-config-box placement="left"  :post-cabinet="addCabinetData" @after="getCabinetOptionData"></cabinet-config-box>-->
+<!--            </div>-->
           </el-form-item>
           <el-form-item :label="this.$t('asset.createAssetTab.uSize')">
             <span>{{cabinetSelectedData.uSize}}</span>
diff --git a/nezha-fronted/src/components/page/asset/assetEditUnit.vue b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
index 67e1a1069..46442983b 100644
--- a/nezha-fronted/src/components/page/asset/assetEditUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
@@ -297,7 +297,8 @@
           <!------------------------------------------IDC---------------------------------------------->
           <el-form-item :label="this.$t('asset.createAssetTab.dcName')" class="right-box-form-content" prop="idcId">
             <template v-if="!tabView">
-              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">
+<!--              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData" class="right-box-row-with-btn" placeholder="">-->
+              <el-select popper-class="asset-dropdown" size="mini" v-model="assetData.idcId" clearable @change="getSingleIDCData"  placeholder="">
                 <el-option
                   :id="'asset-edit-idc-op-'+item.id"
                   v-for="item in IDCOptionData"
@@ -306,21 +307,21 @@
                   :value="item.id"
                 >
                   <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                  <div class="config-dropdown-label-icons">
-                    <span class="config-dropdown-btn config-dropdown-btn-delete"
-                          @click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i
-                      class="el-icon-delete"></i></span>
-                    <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">
-                      <template v-slot:optionZone>
-                        <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>
-                      </template>
-                    </idc-config-box>
-                  </div>
+<!--                  <div class="config-dropdown-label-icons">-->
+<!--                    <span class="config-dropdown-btn config-dropdown-btn-delete"-->
+<!--                          @click.stop="deleteData('idc',item.id)" :id="'asset-edit-idc-op-del-'+item.id"><i-->
+<!--                      class="el-icon-delete"></i></span>-->
+<!--                    <idc-config-box :post-idc="popIdcData" placement="left" @after="getIDCOptionData" :button-class="'config-dropdown-btn'">-->
+<!--                      <template v-slot:optionZone>-->
+<!--                        <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit', item)"></i>-->
+<!--                      </template>-->
+<!--                    </idc-config-box>-->
+<!--                  </div>-->
                 </el-option>
               </el-select>
-              <div class="right-box-row-btn right-box-row-btn-small">
-                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>
-              </div>
+<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
+<!--              </div>-->
             </template>
             <span v-if="tabView">{{assetViewData.idcName}}</span>
           </el-form-item>
@@ -339,7 +340,8 @@
           <!------------------------------------------cabinet---------------------------------------------->
           <el-form-item :label="$t('asset.createAssetTab.cabinet')" class="right-box-form-content">
             <template v-if="!tabView">
-              <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"
+<!--              <el-select clearable v-model="assetData.cabinetId" clearable class="right-box-row-with-btn" popper-class="asset-dropdown"-->
+              <el-select clearable v-model="assetData.cabinetId" clearable  popper-class="asset-dropdown"
                          :disabled="assetData.idcId==''?true:false" size="mini" placeholder=""
                          @change="getSingleCabinetData">
                 <el-option
@@ -350,21 +352,21 @@
                   :value="item.id"
                 >
                   <span class="config-dropdown-label-txt">{{ item.name }}</span>
-                  <div class="config-dropdown-label-icons">
-                    <span class="config-dropdown-btn config-dropdown-btn-delete"
-                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">
-                      <i class="el-icon-delete"></i>
-                    </span>
-                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
-                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>
-                    </cabinet-config-box>
-                  </div>
+<!--                  <div class="config-dropdown-label-icons">-->
+<!--                    <span class="config-dropdown-btn config-dropdown-btn-delete"-->
+<!--                          @click.stop="deleteData('cabinet',item.id)" :id="'asset-edit-cabinet-op-del-'+item.id">-->
+<!--                      <i class="el-icon-delete"></i>-->
+<!--                    </span>-->
+<!--                    <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">-->
+<!--                      <i slot="optionZone" class="nz-icon nz-icon-edit"></i>-->
+<!--                    </cabinet-config-box>-->
+<!--                  </div>-->
                 </el-option>
               </el-select>
 
-              <div class="right-box-row-btn right-box-row-btn-small">
-                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>
-              </div>
+<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>-->
+<!--              </div>-->
             </template>
             <span v-if="tabView">{{assetViewData.cabinetName}}</span>
           </el-form-item>
diff --git a/nezha-fronted/src/components/page/config/changePwd.vue b/nezha-fronted/src/components/page/config/changePwd.vue
new file mode 100644
index 000000000..49b7c22a2
--- /dev/null
+++ b/nezha-fronted/src/components/page/config/changePwd.vue
@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-dialog :title="$t('overall.changePwd')" :visible.sync="visible"  @open="dialogOpened"  :modal-append-to-body='false' @closed="dialogClosed" width="600px" :show-close="false" >
+      <el-form :model="user" label-position="right" label-width="135px" :rules="rules" ref="changePwdForm" size="mini">
+        <el-form-item :label="$t('config.account.account')" prop="username">
+          <el-input type="text" autocomplete="false" v-model="user.username" disabled></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.account.oldPwd')" prop="pwd">
+          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.pwd" maxlength="20" :placeholder="$t('config.account.inputOldPwd')"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.account.newPwd')" prop="newPwd">
+          <el-input type="password" autocomplete="false" :show-password="true" v-model="user.newPwd" maxlength="20" :placeholder="$t('config.account.inputNewPwd')"></el-input>
+        </el-form-item>
+        <el-form-item :label="$t('config.account.confirmPwd')" prop="confirmPwd">
+          <el-input type="password" autocomplete="false"  :show-password="true" v-model="user.confirmPwd" maxlength="20" :placeholder="$t('config.account.inputConfirmPwd')"></el-input>
+        </el-form-item>
+      </el-form>
+      <!--底部按钮-->
+      <template slot="footer">
+        <div class="right-box-bottom-btns" >
+          <button @click="close" id="account-esc"
+                  class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+            <span>{{$t('overall.cancel')}}</span>
+          </button>
+          <button  @click="changePwd" id="account-save"
+                   class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+            <span>{{$t('overall.save')}}</span>
+          </button>
+        </div>
+      </template>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: "changePwd",
+      props:{
+        curUser:{type:String},
+        showDialog:{type:Boolean,default:false}
+      },
+      data(){
+        let temp=this;
+        var validatePass = (rule, value, callback) => {
+          if(value && value != '' && value.length >= 6){
+            callback();
+          }else{
+            callback(new Error(temp.$t('config.account.invalidPwd')))
+          }
+        };
+        var validateConfirmPass=(rule,value,callback) => {
+          if(value && value != '' && value == temp.user.newPwd){
+            callback();
+          }else{
+            callback(new Error(temp.$t('config.account.confirmPwdErr')))
+          }
+        }
+        return {
+          user:{
+            username:'',
+            pwd:'',
+            newPwd:'',
+            confirmPwd:''
+          },
+          rules:{
+            pwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'}],
+            newPwd:[{required:true,message: this.$t('validate.required'), trigger: 'blur'},{validator:validatePass,trigger: 'blur'}],
+            confirmPwd:[{required:true,message: this.$t('config.account.reinputPwd'), trigger: 'blur'},{validator:validateConfirmPass,trigger: 'blur'}]
+          },
+          visible:false,
+        }
+      },
+      created() {
+        this.user.username=this.curUser && this.curUser != ''?this.curUser:sessionStorage.getItem("nz-username");
+      },
+      methods:{
+        dialogOpened:function(){
+          if(this.$refs.changePwdForm){
+            this.$refs.changePwdForm.resetFields();
+          }
+        },
+        dialogClosed:function(){
+          this.$emit('dialogClosed')
+        },
+        close:function(){
+          this.visible=false;
+        },
+        changePwd:function(){
+          this.$refs.changePwdForm.validate((valid)=>{
+            if(valid){
+              let paramObj={
+                password:this.user.pwd,
+                newPassword:this.user.newPwd
+              }
+              this.$get('/sys/user/password?password='+paramObj.password+"&newPassword="+paramObj.newPassword).then(response=>{
+                if(response && response.code == 200){
+                  this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.close();
+                }else{
+                  this.$message.error(response.msg);
+                }
+              })
+            }
+          })
+        }
+      },
+      watch:{
+        showDialog:function(n,o){
+          this.visible=n;
+        }
+      }
+    }
+</script>
+
+<style >
+  .el-dialog__footer {
+    margin-top: 30px;
+    padding: 10px 20px 20px;
+    text-align: right;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 6da83149c..c18228de4 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -44,7 +44,8 @@
   }
   /*metric样式--end*/
   .label-center{
-    margin-top:6px;
+    vertical-align: middle;
+    line-height: 34px;
   }
 
   .z-top {
@@ -52,140 +53,141 @@
   }
 </style>
 <template key="chartBox">
-<div>
-  <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
+  <div>
+    <panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
 
-  <transition name="right-box">
-    <div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
-      <!-- begin--顶部按钮-->
-      <div class="right-box-top-btns">
-        <button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
-          <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
-        </button>
-      </div>
-      <!-- end--顶部按钮-->
+    <transition name="right-box">
+      <div class="right-box right-box-add-chart z-top right-box-chart" v-if="rightBox.show" >
+        <!-- begin--顶部按钮-->
+        <div class="right-box-top-btns">
+          <button id="chart-box-delete" type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+            <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+            <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+          </button>
+        </div>
+        <!-- end--顶部按钮-->
 
-      <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
-      <!-- end--标题-->
+        <!-- begin--标题-->
+        <div class="right-box-title">{{rightBox.title}}</div>
+        <!-- end--标题-->
 
-      <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
-          <el-form-item :label="$t('dashboard.panel.title')">
-            <div class="right-box-form-content">
-              <el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown"
-                         v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
-                <el-option v-for="item in panelData" :key="item.id" :label="item.name"
-                           :value="item.id" :id="'chart-box-panel-'+item.id">
-                  <span class="config-dropdown-label-txt">{{item.name}}</span>
-                  <div class="config-dropdown-label-icons">
+        <!-- begin--表单-->
+        <el-scrollbar class="right-box-form-box">
+          <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
+            <el-form-item :label="$t('dashboard.panel.title')">
+              <div class="right-box-form-content">
+                <el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown"
+                           v-model="panelId" placeholder="" v-if="rightBox.show" size="small">
+                  <el-option v-for="item in panelData" :key="item.id" :label="item.name"
+                             :value="item.id" :id="'chart-box-panel-'+item.id">
+                    <span class="config-dropdown-label-txt">{{item.name}}</span>
+                    <div class="config-dropdown-label-icons">
                     <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)"
                           :id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
-                    <span class="config-dropdown-btn" @click.stop="editPanel(item)"
-                    :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
-                  </div>
-                </el-option>
-              </el-select>
+                      <span class="config-dropdown-btn" @click.stop="editPanel(item)"
+                            :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
+                    </div>
+                  </el-option>
+                </el-select>
 
-              <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
-                <i class="el-icon-plus" id="chart-box-panel-plus"></i>
+                <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
+                  <i class="el-icon-plus" id="chart-box-panel-plus"></i>
+                </div>
               </div>
-            </div>
-          </el-form-item>
-          <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
-            <el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
-          </el-form-item>
+            </el-form-item>
+            <el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
+              <el-input size="small" maxlength="64" show-word-limit v-model="chart.title"></el-input>
+            </el-form-item>
 
-          <el-row :gutter="10">
-            <el-col :span="3" >
-              <div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
-            </el-col>
-            <el-col :span="5">
-              <div class="grid-content ">
+            <el-row :gutter="10">
+              <el-col :span="2" >
+                <div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
+              </el-col>
+              <el-col :span="6" style="margin-left:-7px;">
+                <div class="grid-content ">
                   <el-form-item prop="type">
-                    <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown" v-model="chart.type" placeholder="" size="mini">
+                    <el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
                       <el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
                         <span class="panel-dropdown-label-txt" >{{item.name}}</span>
                       </el-option>
                     </el-select>
                   </el-form-item>
-              </div>
-            </el-col>
-            <el-col :span="3">
-              <div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div>
-            </el-col>
-            <el-col :span="5">
-              <div class="grid-content ">
-                <el-form-item prop="span">
-                  <el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
-                    <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
-                      <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-              </div>
-            </el-col>
-            <el-col :span="3">
-              <div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
-            </el-col><el-col :span="5">
-              <div class="grid-content ">
-                <el-form-item prop="heigh">
-<!--                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
-                  <el-autocomplete
-                    v-model="chart.height"
-                    :fetch-suggestions="querySearch"
-                    placeholder=""
-                    size="mini"
-                    popper-class="popper-z-index"
-                    @select="handleSelect">
-                    <template slot-scope="{ item }">
-                      <div class="name">{{ item }}</div>
-                    </template>
-                  </el-autocomplete>
-                  <span class="nz-input-append">px</span>
-                </el-form-item>
-              </div>
-            </el-col>
-          </el-row>
+                </div>
+              </el-col>
+              <el-col :span="2" style="margin-left: 7px;">
+                <div class="label-center"  >{{$t('dashboard.panel.chartForm.width')}}</div>
+              </el-col>
+              <el-col :span="6" style="margin-left:0px;">
+                <div class="grid-content ">
+                  <el-form-item prop="span">
+                    <el-select class="right-box-row-with-btn"  value-key="chartSpan" popper-class="chart-box-dropdown-mini" v-model="chart.span" placeholder="" size="mini">
+                      <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
+                        <span class="panel-dropdown-label-txt" > span-{{item}}</span>
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </div>
+              </el-col>
+              <el-col :span="2" style="padding-left: 10px;">
+                <div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
+              </el-col>
+              <el-col :span="6" style="margin-left: 0px;">
+                <div class="grid-content" >
+                  <el-form-item prop="heigh">
+                    <!--                  <el-input label="" v-model="chart.height" placeholder="" size="mini"></el-input>-->
+                    <el-autocomplete
+                      v-model="chart.height"
+                      :fetch-suggestions="querySearch"
+                      placeholder=""
+                      size="mini"
+                      popper-class="popper-z-index"
+                      @select="handleSelect">
+                      <template slot-scope="{ item }">
+                        <div class="name">{{ item }}</div>
+                      </template>
+                    </el-autocomplete>
+                    <span class="nz-input-append">px</span>
+                  </el-form-item>
+                </div>
+              </el-col>
+            </el-row>
 
-          <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
-          <div class="line-100"></div>
+            <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
+            <div class="line-100"></div>
 
-          <el-row  class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
-            <chart-metric ref="chartTag"
-                           :pointer="index"
-                           :metric-list="metricList"
-                          :metricCascaderList="metricCascaderList"
-                           :count-total="elements.length"
-                           @on-delete-target="deleteTarget"
-                           @sub-save-ok="subOk"
-                           @on-add-target-success="getTarget"
-                ></chart-metric>
+            <el-row  class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
+              <chart-metric ref="chartTag"
+                            :pointer="index"
+                            :metric-list="metricList"
+                            :metricCascaderList="metricCascaderList"
+                            :count-total="elements.length"
+                            @on-delete-target="deleteTarget"
+                            @sub-save-ok="subOk"
+                            @on-add-target-success="getTarget"
+              ></chart-metric>
 
-          </el-row>
+            </el-row>
 
-          <button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
-            <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
+            <button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
+              <span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
+            </button>
+
+          </el-form>
+        </el-scrollbar>
+
+        <!--底部按钮-->
+        <div class="right-box-bottom-btns">
+          <button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+            <span>{{$t('overall.cancel')}}</span>
           </button>
-
-        </el-form>
-      </el-scrollbar>
-
-      <!--底部按钮-->
-      <div class="right-box-bottom-btns">
-        <button @click="esc" id="chart-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
-          <span>{{$t('overall.cancel')}}</span>
-        </button>
-        <button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
-          <span>{{$t('overall.save')}}</span>
-        </button>
+          <button @click="confirmAdd" id="chart-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+            <span>{{$t('overall.save')}}</span>
+          </button>
+        </div>
       </div>
-    </div>
-  </transition>
+    </transition>
 
-</div>
+  </div>
 </template>
 
 <script>
@@ -221,11 +223,11 @@
           title: [
             {required: true,  message: this.$t('validate.required'),  trigger: 'blur'}
           ]
-         /*
-          heigh: [
-            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
-          ]
-          */
+          /*
+           heigh: [
+             {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+           ]
+           */
         },
         chartTypeList: [
           {
@@ -378,7 +380,7 @@
       deleteTarget(index) {
         //alert('box第一步，循环所有的metric，为什么要循环？？');
         this.deleteIndex = index;
-       // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
+        // alert('box第一步，循环所有的metric，循环前metric,循环次数='+this.$refs.chartTag.length);
         this.$refs.chartTag.forEach((item) => {
           // 子组件保存内容到bus
           item.subSave();
@@ -447,7 +449,6 @@
             this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
             this.$refs.chartForm.resetFields();//清空表单
             let panel = this.panelData.find(p => p.id === this.panelId);
-            //console.info("panel", panel)
             this.$emit('on-create-success', 'create', response.data,params, panel);
           } else {
             this.$message.error(response.msg);
@@ -473,7 +474,7 @@
         if (this.elementTarget.length === this.elements.length) {
           this.$refs.chartForm.validate((valid) => {
             const params = {
-             // productId: this.productId,
+              // productId: this.productId,
               //panelId: this.panelId,
               title: this.chart.title,//this.chart
               span: this.chart.span,
@@ -525,14 +526,17 @@
 
       // 获取metric列表
       getSuggestMetric() {
-        this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
-          if (response.code === 200) {
-            this.metricList = response.data.list;
+        //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
+        this.$get('/prom/api/v1/label/__name__/values').then(response => {
+          //if (response.code === 200) {
+          if (response.status === 'success') {
+            this.metricList = response.data;
             const cascaderMap = new Map();
             this.metricList.forEach((item,index) => {
               let arr = [];
               let par = '';//父value
-              let metricTmp = item.metric;//子value
+              //let metricTmp = item.metric;//子value
+              let metricTmp = item;//子value
               if(metricTmp){
                 arr  = metricTmp.split('_');
                 par = arr[0];
@@ -552,7 +556,7 @@
             let metricCascaderArr = [];
             cascaderMap.forEach(function(value,index){
               const option = {
-                value: index,
+                value: index+"_par",
                 label: index,
                 children:value,
               };
@@ -567,7 +571,6 @@
       },
       // 创建打开
       createData(panelId, elementInfo) {
-        //console.info('bbb', elementInfo)
         if (panelId == -1) {
           this.panelId = this.panelData[0].id;
         } else {
@@ -584,7 +587,6 @@
               let dSet = this.$refs.chartTag;
               this.$nextTick(() => {
                 dSet.forEach((item, index) => {
-                  //console.info('bbb', elementInfo.elements[index])
                   item.setMdata(elementInfo.elements[index]);
                 });
               });
@@ -653,10 +655,9 @@
 
       /*metric部分相关方法--end*/
       querySearch(queryString, cb) {
-        console.log(queryString)
         var suggestions = this.heightSuggestions;
-        var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
-        console.log(results)
+        // var results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
+        var results=queryString&&(suggestions.includes(queryString)||suggestions.filter(this.createFilter(queryString)).length>0)?suggestions:[];
         // 调用 callback 返回建议列表的数据
         cb(results);
       },
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetric.vue b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
index baaf24ac3..d93024200 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetric.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetric.vue
@@ -48,10 +48,12 @@
     color: #666;
    }
   .li-list-part-label-val-list {
-    height: 176px;
-    border: 1px solid #dcdfe6;
+    height: 248px;
+   /* border: 1px solid #dcdfe6;*/
     border-radius: 4px;
     padding: 0px 0 10px 15px;
+    margin-bottom:0px !important;
+    width:100%;
   }
   .li-cursor{
     cursor: pointer;
@@ -66,7 +68,7 @@
   }
 
   .metric-title-position{
-    margin-bottom: 2px;
+    margin-bottom: 8px;
   }
   .metric-title-row-position{
     margin-top:-10px;
@@ -91,8 +93,9 @@
     width: 100px;
   }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px) !important;
+    width: calc(100% - 15px) ;
   }
+
   .nz-tab-chart-item-box{
     padding:0;
     display: inline-block;
@@ -146,7 +149,7 @@
 
 <!-- create chart组件显示框 -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
-
+<!--
       <el-col :span="8">
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -161,20 +164,29 @@
       </el-col>
 
       <el-col :span="2" class="symbol-area"><span class="symbol-equal">=</span></el-col>
-
-      <el-col :span="14">
-        <div class="li-list-part-label-val-list" >
+-->
+      <el-col :span="24">
+        <div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
           <el-scrollbar style="height: 100%">
-            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
-              <el-select  v-model="item.value" ref="tagSelect" size="mini"
-                          placeholder=""
-                          collapse-tags
-                          popper-class="metric-dropdown"
-                          filterable
-                          multiple>
-                <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
-              </el-select>
-              <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+            <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index"  :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+              <el-row :gutter="10" >
+                <el-col :span="4" >
+                  <div style="text-align:right;padding-right:5px;">{{item.name}}</div>
+                </el-col>
+                <el-col :span="20" >
+                  <el-select  v-model="item.value" ref="tagSelect" size="mini"
+                              placeholder=""
+                              collapse-tags
+                              popper-class="metric-dropdown"
+                              filterable
+                              multiple>
+                    <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
+                  </el-select>
+                </el-col>
+                <!--
+                <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+                -->
+              </el-row>
             </el-form-item>
           </el-scrollbar>
         </div>
@@ -281,7 +293,19 @@ export default {
         });
       }
     },
+    setLabelDivHeight(count){
+        if (count === 0) {
+          const chartBox = document.getElementById('scrollDiv' + this.pointer);
+          chartBox.style.height = `${10}px`;
+        } else if (count < 6) {//小于6个需要调整容器的高度
+          const chartBox = document.getElementById('scrollDiv' + this.pointer);
+          chartBox.style.height = `${(248 / 6) * count + 10}px`;
+        } else {
+          const chartBox = document.getElementById('scrollDiv' + this.pointer);
+          chartBox.style.height = `${248}px`;
+        }
 
+    },
     // 选择metric
     selectMetric() {
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
@@ -289,6 +313,7 @@ export default {
         this.getSuggestTags(this.elementInfo.metric);
       } else {
         this.elementInfo.tagList = [];
+        this.setLabelDivHeight(0);
       }
     },
     // 选择主机
@@ -310,31 +335,25 @@ export default {
     */
     // 获取tags列表
     getSuggestTags(metric) {
-      this.$get('metric/labelName?metric='+metric).then(response => {
+      //this.$get('metric/labelName?metric='+metric).then(response => {
+      this.$get('/metric/series?match[]='+metric).then(response => {
         this.elementInfo.selectedTagList = [];
-        this.elementInfo.tagList = [];
+        //this.elementInfo.tagList = [];
         if (response.code === 200) {
-          if(response.data.list){
-            //this.elementInfo.tagList = response.data.list;
-            response.data.list.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false//当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }else{
-            response.data.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false //当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }
-          //this.elementInfo.tagList = response.data.list;
+          const objList = Object.entries(response.data);
+          objList.forEach((item) => {
+            const tagObj = {
+              name: item[0],
+              list:item[1],
+              value:[]//最终选择的值
+            };
+            this.elementInfo.selectedTagList.push(tagObj);
+          });
+          let tagNum = this.elementInfo.selectedTagList.length;
+          this.setLabelDivHeight(tagNum);
         }else {
-          this.elementInfo.tagList = [];
+          this.elementInfo.selectedTagList = [];
+          this.setLabelDivHeight(0);
         }
       });
     },
@@ -367,91 +386,102 @@ export default {
         }else {
           this.elementInfo.metric = expression;
         }
-
-        //alert(this.elementInfo.metric);
-        //this.selectMetric(); // 获取tag
-        this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
+        //this.$get('metric/labelName?metric='+this.elementInfo.metric).then(response => {
+        this.$get('/metric/series?match[]='+this.elementInfo.metric).then(response => {
           this.elementInfo.selectedTagList = [];
-          this.elementInfo.tagList = [];
+          //this.elementInfo.tagList = [];
           if (response.code === 200) {
-              //this.elementInfo.tagList = response.data.list;
-              if(response.data.list){
-                response.data.list.forEach((item) => {
-                  const tagObj = {
-                    name: item.name,
-                    isSelect:false//当前元素是否被选中，默认都未选中
-                  };
-                  this.elementInfo.tagList.push(tagObj);
+              const objList = Object.entries(response.data);
+              objList.forEach((item) => {
+                const tagObj = {
+                  name: item[0],
+                  list:item[1],
+                  value:[]//最终选择的值
+                };
+                let labelName = item[0];
+                let labelValList = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
+                let labArr = labelValList.split(',');
+                labArr.forEach((item, index) => {//b=~'1|2|3'
+                    let labNameTmp = item.substring(0,item.indexOf('='));
+                    if(labNameTmp===labelName){
+                      let labVal = item.substring(item.indexOf('=')+1,item.length);
+                      if(labVal.indexOf('~')!=-1){
+                        labVal = labVal.substring(2,labVal.length-1);
+                        let valArr = labVal.split('|');
+                        valArr.forEach((labItem, labIndex) => {
+                          tagObj.value.push(labItem);
+                        });
+                      }else {
+                        labVal = labVal.substring(1,labVal.length-1);
+                        tagObj.value.push(labVal);
+                      }
+                    }
                 });
-              }else {
-                response.data.forEach((item) => {
-                  const tagObj = {
-                    name: item.name,
-                    isSelect:false//当前元素是否被选中，默认都未选中
-                  };
-                  this.elementInfo.tagList.push(tagObj);
-                });
-              }
-            if(expression.indexOf('{')>-1){
-              let labValArrStr = expression.substring(expression.indexOf('{')+1,expression.indexOf('}'));
-              this.stringToTags(labValArrStr);
-            }
+
+                this.elementInfo.selectedTagList.push(tagObj);
+              });
+              let tagNum = this.elementInfo.selectedTagList.length;
+              this.setLabelDivHeight(tagNum);
           }else {
-            this.elementInfo.tagList = [];
+            this.elementInfo.selectedTagList = [];
+            this.setLabelDivHeight(0);
           }
         });
       }
     },
-    //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
-    stringToTags(str) {
-      let labArr = str.split(',');
-      labArr.forEach((item, index) => {//b=~'1|2|3'
-        let labName = item.substring(0,item.indexOf('='));
-        this.elementInfo.tagList.every((tagItem,index) => {
-          if(tagItem.name===labName){
-            tagItem.isSelect = true;
-            return false;
-          }else {
-            return true;
-          }
-        });
 
-        //查询metricLabel名称对应的LabelValue
-        this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
-          const tagObj = {
-            name:labName,//选中的metricLabel名称
-            list:[],//metricLabel名称对应的LabelValue
-            value:[]//最终选择的值
-          };
-          let labVal = item.substring(item.indexOf('=')+1,item.length);
-          if(labVal.indexOf('~')!=-1){
-            labVal = labVal.substring(2,labVal.length-1);
-            let valArr = labVal.split('|');
-            valArr.forEach((labItem, labIndex) => {
-              tagObj.value.push(labItem);
-            });
-          }else {
-            labVal = labVal.substring(1,labVal.length-1);
-            tagObj.value.push(labVal);
-          }
-          if (response.code === 200) {
-            if(response.data.list){
-              response.data.list.forEach((resItem) => {
-                tagObj.list.push(resItem.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
-            }else{
-              response.data.forEach((resItem) => {
-                tagObj.list.push(resItem.value)
-              });
-              this.elementInfo.selectedTagList.push(tagObj);
-            }
-          }else {
-            this.elementInfo.selectedTagList.push(tagObj);
-          }
-        });
-      });
-    },
+    /*
+   //字符串格式化为对象metric{a='1',b=~'2|3|4'}===>a='1',b=~'2|3|4'
+   stringToTags(str) {
+     let labArr = str.split(',');
+     labArr.forEach((item, index) => {//b=~'1|2|3'
+       let labName = item.substring(0,item.indexOf('='));
+       this.elementInfo.tagList.every((tagItem,index) => {
+         if(tagItem.name===labName){
+           tagItem.isSelect = true;
+           return false;
+         }else {
+           return true;
+         }
+       });
+
+       //查询metricLabel名称对应的LabelValue
+       this.$get('metric/labelVal?metric='+this.elementInfo.metric+"&name="+labName).then(response => {
+         const tagObj = {
+           name:labName,//选中的metricLabel名称
+           list:[],//metricLabel名称对应的LabelValue
+           value:[]//最终选择的值
+         };
+         let labVal = item.substring(item.indexOf('=')+1,item.length);
+         if(labVal.indexOf('~')!=-1){
+           labVal = labVal.substring(2,labVal.length-1);
+           let valArr = labVal.split('|');
+           valArr.forEach((labItem, labIndex) => {
+             tagObj.value.push(labItem);
+           });
+         }else {
+           labVal = labVal.substring(1,labVal.length-1);
+           tagObj.value.push(labVal);
+         }
+         if (response.code === 200) {
+           if(response.data.list){
+             response.data.list.forEach((resItem) => {
+               tagObj.list.push(resItem.value)
+             });
+             this.elementInfo.selectedTagList.push(tagObj);
+           }else{
+             response.data.forEach((resItem) => {
+               tagObj.list.push(resItem.value)
+             });
+             this.elementInfo.selectedTagList.push(tagObj);
+           }
+         }else {
+           this.elementInfo.selectedTagList.push(tagObj);
+         }
+       });
+     });
+   },
+   */
 
     clearHistory() {
       this.elementInfo.metric = '';
diff --git a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
index 0a4643a93..3fb7d35d7 100644
--- a/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
@@ -45,11 +45,12 @@
     width:90%;
    }
   .li-list-part-label-val-list {
-    height: 218px;
-    border: 1px solid #dcdfe6;
+    height: 280px;
+    /*border: 1px solid #dcdfe6;*/
     border-radius: 4px;
     box-sizing:border-box;
-    padding: 15px 0 10px 15px;
+    padding: 7px 0 10px 15px;
+    margin-bottom:0px !important;
   }
 
   .no-list-style{
@@ -103,6 +104,7 @@
     /* overflow: auto !important; */
     box-sizing:border-box;
     margin:0 auto;
+    margin-bottom:0px !important;
    }
   .el-input .el-input__inner{
     /* width:80%; */
@@ -133,7 +135,7 @@
 
 }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px);
+    width: calc(100% - 15px);/*calc(100% - 45px);*/
     margin:0 auto;
 
   } 
@@ -149,7 +151,13 @@
     width: 100px;
   }
   .li-list-part-label-val-list .el-select--mini {
-    width: calc(100% - 45px);
+    width: calc(100% - 15px);
+  }
+  .li-list-part-label-val-list .el-scrollbar__wrap{
+    /* overflow: auto !important; */
+    box-sizing:border-box;
+    margin:0 auto;
+    margin-bottom:0px !important;
   }
   .nz-tab-chart-item-box{
     padding:0;
@@ -195,7 +203,7 @@
     </el-row>
     <el-row  v-if="tableShow == 1">
       <el-col :span="24" >
-        <el-form-item label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
+        <el-form-item style="margin-bottom:0px;" label-width="80"  prop="metric" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }"><!--:rules="{ required: true, type: 'string', message: '', trigger: 'change' }"-->
               <!--
               <el-select  ref="metricSelect" class="full-width"  filterable placeholder="" popper-class="" size="small" v-model="elementInfo.metric"  @change="selectMetric">
                 <el-option v-for="(item, index) in metricShowList.arr" :key="item.metric + index"
@@ -214,6 +222,7 @@
     </el-row>
     <!--create chart组件显示框  -->
     <el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
+      <!--
       <el-col :span="9" style="margin-bottom: 20px;">
         <div class="li-list-part">
           <el-scrollbar style="height: 100%">
@@ -228,20 +237,28 @@
       </el-col>
 
       <el-col :span="1" class="symbol-area"><span class="symbol-equal">=</span></el-col>
-
-      <el-col :span="14">
-        <div class="li-list-part-label-val-list" >
+-->
+      <el-col :span="24">
+        <div class="li-list-part-label-val-list" id="scrollDiv">
           <el-scrollbar style="height: 100%">
-            <el-form-item class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index" :label="item.name" label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
-              <el-select  v-model="item.value" ref="tagSelect" size="mini"
-                          placeholder=""
-                          collapse-tags
-                          filterable
-                          @change="changeTag"
-                          multiple>
-                <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
-              </el-select>
+            <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index"  label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
+              <el-row :gutter="10" >
+                <el-col :span="4" >
+                  <div style="text-align:right;padding-right:5px;">{{item.name}}</div>
+                </el-col>
+                <el-col :span="20" >
+                  <el-select  v-model="item.value" ref="tagSelect" size="mini"
+                              placeholder=""
+                              filterable
+                              @change="changeTag"
+                              multiple>
+                    <el-option v-for="(op, j) in elementInfo.selectedTagList[index].list" :key="op + j"  :value="op">{{op}}</el-option>
+                  </el-select>
+                </el-col>
+              <!--
               <span class="symbol-delete" @click="deleteMetricLabel(item,index)"><i class="nz-icon nz-icon-minus-square"></i></span>
+              -->
+                </el-row>
             </el-form-item>
           </el-scrollbar>
         </div>
@@ -309,10 +326,6 @@ export default {
         }
       });
     },
-
-
-
-
     // 删除该选项,第一步,传递要删除的参数
     deleteTarget() {
       //alert('metric第一步，删除的指针，之后回调box的第一个步'+this.pointer);
@@ -349,43 +362,51 @@ export default {
       }
     },
 
+    setLabelDivHeight(count){
+      if(count===0){
+        const chartBox = document.getElementById('scrollDiv');
+        chartBox.style.height = `${10}px`;
+      }else if(count<6){//小于6个需要调整容器的高度
+        const chartBox = document.getElementById('scrollDiv');
+        chartBox.style.height = `${(280 / 6) * count+10}px`;
+      }else {
+        const chartBox = document.getElementById('scrollDiv');
+        chartBox.style.height = `${280}px`;
+      }
+    },
+
     // 选择metric
     selectMetric() {
       if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
         this.elementInfo.metric = this.elementInfo.metric[1];
         this.getSuggestTags(this.elementInfo.metric);
       } else {
-        this.elementInfo.tagList = [];
+        this.elementInfo.selectedTagList = [];
+        this.setLabelDivHeight(0);
       }
       this.$emit('on-change-condition');
     },
     // 获取tags列表
     getSuggestTags(metric) {
-      this.$get('metric/labelName?metric='+metric).then(response => {
+      //this.$get('metric/labelName?metric='+metric).then(response => {
+      this.$get('/metric/series?match[]='+metric).then(response => {
         this.elementInfo.selectedTagList = [];
-        this.elementInfo.tagList = [];
+        //this.elementInfo.tagList = [];
         if (response.code === 200) {
-          if(response.data.list){
-            //this.elementInfo.tagList = response.data.list;
-            response.data.list.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false//当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }else{
-            response.data.forEach((item) => {
-              const tagObj = {
-                name: item.name,
-                isSelect:false //当前元素是否被选中，默认都未选中
-              };
-              this.elementInfo.tagList.push(tagObj);
-            });
-          }
-          //this.elementInfo.tagList = response.data.list;
+          const objList = Object.entries(response.data);
+          objList.forEach((item) => {
+            const tagObj = {
+              name: item[0],
+              list:item[1],
+              value:[]//最终选择的值
+            };
+            this.elementInfo.selectedTagList.push(tagObj);
+          });
+          let tagNum = this.elementInfo.selectedTagList.length;
+          this.setLabelDivHeight(tagNum);
         }else {
-          this.elementInfo.tagList = [];
+          this.elementInfo.selectedTagList = [];
+          this.setLabelDivHeight(0);
         }
       });
     },
diff --git a/nezha-fronted/src/components/page/dashboard/metricPreview.vue b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
index c8b70de3f..86a4b2815 100644
--- a/nezha-fronted/src/components/page/dashboard/metricPreview.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricPreview.vue
@@ -214,6 +214,7 @@ export default {
       end.setSeconds(59);
       this.filter.start_time = bus.timeFormate(start, 'yyyy-MM-dd hh:mm:ss');
       this.filter.end_time = bus.timeFormate(end, 'yyyy-MM-dd hh:mm:ss');
+      this.$refs.editChartSingle.setDivFirstShow(true);
     },
     dateChange(time) {
       this.filter.start_time = `${time[0]}:00`;
@@ -263,6 +264,9 @@ export default {
             if (response.data.result.length === 1) {
               this.chartCount = 'single';
             }
+            if (response.data.result.length === 0) {
+              this.$refs.editChartSingle.setData(params, [], 0, this.filter,[]);
+            }
           }
           this.getChartData(response, params);
         }else {
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.scss b/nezha-fronted/src/components/page/dashboard/metricSet.scss
index 5a775c989..5131b1924 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.scss
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.scss
@@ -24,6 +24,7 @@
     // border-top: 1px solid #dfe7f2;
     // border-bottom: 1px solid #dfe7f2;
     padding-bottom: 20px;
+    padding-top:20px;
     text-align: right;
     .operate-area-title {
       padding: 5px 0;
diff --git a/nezha-fronted/src/components/page/dashboard/metricSet.vue b/nezha-fronted/src/components/page/dashboard/metricSet.vue
index fd197c0cf..e17b9ab5c 100644
--- a/nezha-fronted/src/components/page/dashboard/metricSet.vue
+++ b/nezha-fronted/src/components/page/dashboard/metricSet.vue
@@ -551,14 +551,17 @@ export default {
     */
     // 获取metric列表
     getSuggestMetric(id) {
-      this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
-        if (response.code === 200) {
-          this.metricList = response.data.list;
+      //this.$get('metric', {pageNo: 1, pageSize: -1}).then(response => {
+      this.$get('/prom/api/v1/label/__name__/values', {pageNo: 1, pageSize: -1}).then(response => {
+        //if (response.code === 200) {
+        if (response.status === 'success') {
+          this.metricList = response.data;
           const cascaderMap = new Map();
           this.metricList.forEach((item,index) => {
             let arr = [];
             let par = '';//父value
-            let metricTmp = item.metric;//子value
+            //let metricTmp = item.metric;//子value
+            let metricTmp = item;//子value
             if(metricTmp){
               arr  = metricTmp.split('_');
               par = arr[0];
@@ -578,7 +581,7 @@ export default {
           let metricCascaderArr = [];
           cascaderMap.forEach(function(value,index){
             const option = {
-              value: index,
+              value: index+"_par",//父节点和子节点的value相同，会出现点击与父节点label同名的子节点时，不显示选择的内容
               label: index,
               children:value,
             };
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 9435fd102..b3c6a119c 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -158,8 +158,8 @@
     </div>
 
     <!--endpoint query-->
-    <div class="content-right" v-show="tableShow == 3">
-      <div class="top-tools">
+    <div class="content-right" v-show="tableShow == 3" style="position: relative">
+      <div class="top-tools" >
         <div>
           <div @click="backToEdpTab">
             <button  class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
@@ -193,11 +193,12 @@
             <button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height"><i class="el-icon-d-arrow-right"></i></button>
           </div>
 
-          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120">
+          <button @click="viewGraph" slot="reference" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-120" :class="{'nz-btn-disabled':selectedEndpoints.length<1}">
             <span class='top-tool-btn-txt'>{{$t('project.endpoint.addGraph')}}</span>
           </button>
         </div>
       </div>
+      <div class="table-header-inner" @click="clearSelectedMetrics"><span><i class="nz-icon nz-icon-duoxuan " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
       <el-table
         v-loading="queryEdpLoading"
         :data="showTableData"
@@ -205,7 +206,8 @@
         class="nz-table"
         :header-cell-class-name="cellClass"
         height="calc(100% - 110px)"
-        @select="selectRow"
+        @selection-change="selectChange"
+        ref="metricInfoTab"
         style="width: 100%;">
         <el-table-column
           type="selection"
@@ -222,10 +224,10 @@
             <el-popover trigger="hover" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
               <div>
                 <ul>
-                  <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric}}</span></li>
-                  <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type}}</span></li>
-                  <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help}}</span></li>
-                  <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit}}</span></li>
+                  <li><span class="metirc-tip-list">metric&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.metric?scope.row.metricTip.metric:'--'}}</span></li>
+                  <li><span class="metirc-tip-list">type&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.type?scope.row.metricTip.type:'unknown'}}</span></li>
+                  <li><span class="metirc-tip-list">help&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.help?scope.row.metricTip.help:'--'}}</span></li>
+                  <li><span class="metirc-tip-list">unit&nbsp;:&nbsp;</span><span>{{scope.row.metricTip.unit?scope.row.metricTip.unit:'--'}}</span></li>
                 </ul>
               </div>
               <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
@@ -249,10 +251,11 @@
       ref="elementset"
     ></element-set>
 
-    <el-dialog class="line-chart-block-modal"
+    <el-dialog class="line-chart-block-modal nz-dialog"
       :title="$t('project.endpoint.dialogTitle')"
       :visible.sync="graphShow"
       width="90%"
+     id="viewGraphDialog"
       @close="dialogClose"
       @opened="initDialog">
       <div slot="title">
@@ -272,7 +275,13 @@
           <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
         </div>
       </div>
-      <div class="line-area " ref="viewGraphChart"  id="viewGraphChart"></div>
+      <div class="line-area " style="height: 300px"  ref="viewGraphChart"  id="viewGraphChart"></div>
+      <div class="legend-container"   id="legendArea" ref="legendArea">
+        <div v-for="(item, index) in legend" :title="item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
+          <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
+          <br/>
+        </div>
+      </div>
       <div class="line-100 margin-t-20 margin-b-30"></div>
       <div class="chart-bottom">
         <button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
@@ -422,7 +431,7 @@
         formatTime:'',//查询endpoint的时间，
         selectedEndpoints:[],//选中的metric{label='value'}
         chartDatas:[],//从query_range查询到的数据
-        lenged:[],//echart lenged
+        legend:[],//echart legend
         graphChart:null,//图标对象
         graphShow:false,
         searchTime:[],
@@ -509,6 +518,7 @@
             }]
         },
         chartOptions:{
+          color: this.bgColorList,
           title: {
             text: ""
           },
@@ -516,9 +526,9 @@
             trigger: 'axis',
           },
           legend: {
+            show:false,
             type:'scroll',
             height:80,
-            show:true,
             icon:"roundRect",
             itemHeight:5,
             itemWidth:15,
@@ -570,7 +580,7 @@
             //height:"50%",
             //top: '13%',
             containLabel: false,
-            bottom:156
+            bottom:70,//156
           },
           dataZoom: [{
             type: 'slider',
@@ -579,7 +589,7 @@
             start: 0,
             end: 100,
             height:25,
-            bottom:96
+            bottom:10//96
           }],
 
           xAxis: {
@@ -636,10 +646,64 @@
           useUTC: false,//使用本地时间
           series: []
         },
+        legendList:[],
+        screenLegendList:[],
+        isGrey:[],
+        isGreyScreen:[],
+        bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+          '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+          '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+          '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+          '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+          '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+          '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
+        ],
         panelData: [], //chart-box的panel下拉框数据
       }
     },
     methods: {
+      clickLegend(legendName,index){
+        if (this.graphChart) {
+          this.graphChart.dispatchAction({
+            type: 'legendToggleSelect',
+            name: legendName
+          });
+          let isGreyTmp = this.isGrey[index];
+          this.$set(this.isGrey, index, !isGreyTmp);
+        }
+      },
+      formatLegend(name,chartWidth){
+        if(!name){
+          return '';
+        }
+        if(!chartWidth){
+          this.$refs.viewGraphChart.clientWidth;
+        }
+        //计算宽度
+        var span = document.createElement("span");
+        var result = {};
+        result.width = span.offsetWidth;
+        result.height = span.offsetHeight;
+        span.style.visibility = "hidden";
+        span.style.fontSize = 14;
+        span.style.fontFamily = "Arial";
+        span.style.display = "inline-block";
+        document.body.appendChild(span);
+        if(typeof span.textContent != "undefined"){
+          span.textContent = name;
+        }else{
+          span.innerText = name;
+        }
+        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+        document.body.removeChild(span);
+
+        if(txtWidth < chartWidth){
+          return name;
+        }else {
+          var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+          return name.slice(0,charNum)+'...';
+        }
+      },
       saveChart() { //新增chart
         this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
         this.$refs.addChartModal.show(true);
@@ -947,12 +1011,14 @@
               for (let result of results){
                 // {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
                 let temp=result.metric.__name__;
-                let metricTip=null;
+                let metricTip={};
                 let queryInfos=(this.elementMetricDatas.filter((item)=>{
                   return item.metric===temp;
                 }));
                 if(queryInfos&&queryInfos.length>0){
                   metricTip=queryInfos[0];
+                }else{
+                  metricTip.metric=temp;
                 }
                 delete result.metric.__name__;
                 temp+="{";
@@ -1029,7 +1095,7 @@
         let current=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
         return current;
       },
-      selectRow:function(selection, row){//selection 选中的row的数组  row 选中的当前行
+      selectChange:function(selection){//selection 选中的row的数组
         this.selectedEndpoints=selection;
       },
       selectable:function(row,index){
@@ -1039,13 +1105,19 @@
           return true;
         }
       },
+      clearSelectedMetrics:function(){
+        this.$refs.metricInfoTab.clearSelection();
+      },
       viewGraph:function(){
+        if(this.selectedEndpoints.length<1){
+          return ;
+        }
         if(this.graphChart){
           this.graphChart.clear();
         }
 
         this.chartDatas=[];
-        this.lenged=[];
+        this.legend=[];
         this.queryChartDate();
         this.graphShow=true;
 
@@ -1093,7 +1165,13 @@
                 })
                 chartData.name=chartData.name.charAt(chartData.name.length-1) == ","?chartData.name.substr(0,chartData.name.length-1):chartData.name;
                 chartData.name+="}";
-                this.lenged.push(chartData.name);
+                let legend={
+                  name:chartData.name,
+                  showText:this.formatLegend(chartData.name)
+                }
+                this.legend.push(legend);
+                this.screenLegendList.push(legend);
+                this.isGreyScreen.push(false);
                 chartData.data=queryData.values.map((dpsItem, dpsIndex) => {
                   return [dpsItem[0] * 1000, Number(dpsItem[1])];
                 });
@@ -1107,15 +1185,24 @@
           this.graphChart.clear();
         }
         this.queryChartDate();
-        this.chartOptions.legend.data=this.lenged;
+        // this.chartOptions.legend.data=this.legend;
         this.chartOptions.series=this.chartDatas;
         this.graphChart.setOption(this.chartOptions);//创建图表
       },
       initDialog:function(){
         this.graphChart = echarts.init(document.getElementById('viewGraphChart'));
-        this.chartOptions.legend.data=this.lenged;
+        // this.chartOptions.legend.data=this.legend;
         this.chartOptions.series=this.chartDatas;
         this.graphChart.setOption(this.chartOptions);//创建图表
+        // let legendHeight = this.$refs.legendArea.offsetHeight;
+        // let dialogDom=document.getElementById('viewGraphDialog');
+        // let dialogWidth=dialogDom.offsetWidth
+        // let dialogHeight=dialogDom.offsetHeight
+        // console.log(legendHeight+":"+dialogWidth+":"+dialogHeight)
+        // let chartWidth=dialogWidth-130;
+        // let chartHeight=dialogHeight-58-legendHeight-60;
+        // console.log(chartWidth + ":"+chartHeight)
+        // this.graphChart.resize({height:300,width:chartWidth})
       },
       cellClass(row){ //给复选框那一列添加 类名为 ‘disabledCheck’
         if (row.columnIndex === 0) {
@@ -1275,6 +1362,7 @@
       this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.endpointTableTitle;
+
     },
     computed: {
       currentProjectChange() {
@@ -1549,7 +1637,8 @@
     display: none !important;
   }
   .el-table .disabledCheck .cell::before{
-    content: '';
+    /*content: '\e627';*/
+    /*font-family: 'nz-icon';*/
     text-align: center;
     line-height: 37px;
   }
@@ -1585,4 +1674,27 @@
     line-height: 26px;
     font-weight: bold;
   }
+  .table-header-inner{
+    position: absolute;
+    z-index: 1;
+    top: 60px;
+    left: 25px;
+  }
+  .control-icon-unchecked{
+    color: #e5e5e5;
+  }
+  .control-icon-checked{
+    color:#666;
+  }
+  .legend-container{
+    width: calc(100% - 335px);
+    max-height:80px;
+    min-height:40px;
+    overflow-y: auto;
+    font-size:12px;
+    text-align:left;
+    margin:0 auto;
+    line-height: 18px;
+    font-family: Roboto,Helvetica Neue,Arial,sans-serif;
+  }
 </style>