From 663f8e1b4f170df75707c0650e63b6c62a707499 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Fri, 10 Jan 2020 17:13:41 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=201.panel=E5=9B=BE=E8=A1=A8=E6=9B=B2=E7=BA=BF=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F=E5=A2=9E=E5=8A=A0=E6=97=B6=E9=97=B4=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=202.panel=E5=9B=BE=E8=A1=A8=E7=9A=84=E5=AE=9A=E6=9C=9F?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0=203.panel=E5=9B=BE=E8=A1=A8=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E8=8E=B7=E5=8F=96=E5=8F=82=E6=95=B0step=E6=8C=89?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=8C=87=E5=AE=9A=E4=B8=8D=E5=90=8C=E5=80=BC?=
 =?UTF-8?q?=204.panel=E5=9B=BE=E8=A1=A8=E5=85=A8=E5=B1=8F=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E6=96=87=E5=AD=97=E5=9B=BD=E9=99=85=E5=8C=96=20fix:?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9BUG=201.panel=E5=9B=BE=E8=A1=A8=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A22=E6=AC=A1=202.panel=E5=9B=BE=E8=A1=A8=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=BA=95=E9=83=A8=E6=98=BE=E7=A4=BA=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E7=9A=84=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chart-list.vue      |  18 +-
 .../src/components/charts/chart-table.vue     |  10 +-
 .../components/charts/line-chart-block.vue    | 278 ++++++++++++++++--
 .../src/components/common/language/cn.js      |   5 +-
 .../src/components/common/language/en.js      |   7 +-
 .../src/components/page/dashboard/panel.vue   |  40 ++-
 nezha-fronted/src/libs/bus.js                 |  21 +-
 7 files changed, 327 insertions(+), 52 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 8fcbcb3ca..5e8271314 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -7,10 +7,13 @@
   .noData{
     text-align: center
   }
+  .list-width{
+    width:98%;
+  }
 </style>
 <template>
 
-  <div>
+  <div class="list-width">
     <div class="chartBox" v-for="(item, index) in dataList" :key="item.id">
 
       <line-chart-block v-if="item.type === 'line' || item.type === 'bar' || item.type === 4" :key="'inner' + item.id"
@@ -69,11 +72,6 @@ export default {
     },
     // 获取panel详情数据,获取panel下所有chart列表
     getData(params) {
-      if (this.dataList.length > 0) {
-        this.$refs.editChart.forEach((item) => {
-          //item.showLoad();//之后要实现
-        });
-      }
       //param   目前没有用
       const param = {
         panelId: params.panelId,
@@ -92,6 +90,11 @@ export default {
           }else {
             this.dataList = response.data;
           }
+          if (this.dataList.length > 0) {
+            this.$refs.editChart.forEach((item) => {
+              item.showLoad();//之后要实现
+            });
+          }
           //alert(JSON.stringify(response)); 查着，返回的内容就没有图表表达式了？？
           this.dataSetFirst(this.dataList);
         }
@@ -136,10 +139,11 @@ export default {
            startTime = this.filter.start_time;
            endTime = this.filter.end_time;
         }
+        let step = bus.getStep(startTime,endTime);
         this.$nextTick(() => {
           const axiosArr = chartItem.elements.map((ele) => {
             const filterItem = ele;
-            return  this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step=3600s');
+            return  this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
           });
           // 一个图表的所有element单独获取数据
           axios.all(axiosArr).then((res) => {
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 3131b2ca1..e4e9da6f0 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -38,7 +38,7 @@
       </el-table>
     </div>
     <!--全屏-->
-    <el-dialog title="查看" :visible.sync="screenModal" width="96%"  :before-close="handleClose">
+    <el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%"  :before-close="handleClose">
       <div class="clearfix element-top-border">
         <div class="float-left table-title">
           {{data.title}}
@@ -59,8 +59,8 @@
       </div>
       <div class=" element-bottom-border" ></div>
       <span slot="footer" class="dialog-footer" >
-        <el-button @click="screenModal = false">取 消</el-button>
-        <el-button type="primary" @click="screenModal = false">确 定</el-button>
+        <el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
+        <el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -130,7 +130,9 @@ export default {
   },
   watch: {},
   methods: {
-    showLoad() {},
+    showLoad() {
+      this.tableLoading = true;
+    },
     // 展示图表编辑区
     showTool() {
       this.toolbox = !this.toolbox;
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index 1e0b30433..8d3be48dc 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -25,15 +25,13 @@
     <!--
     <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
     <el-dialog class="line-chart-block-modal"
-      title="查看"
+      :title="$t('dashboard.panel.view')"
       :visible.sync="screenModal"
       width="90%"
       :before-close="handleClose"
        @opened="initDialog">
      <el-row class="element-top-border" >
-        <div class="float-right">
-          <div class="block">
-            <!--
+        <div class="float-right" style="padding-top:10px;">
             <el-date-picker size="small" ref="calendar"
                             format="yyyy/MM/dd HH:mm"
                             @change="dateChange"
@@ -45,15 +43,13 @@
                             :end-placeholder="$t('dashboard.panel.endTime')"
                             align="right">
             </el-date-picker>
-            -->
-          </div>
         </div>
       </el-row>
       <div class="line-area " ref="screenShowArea" ></div>
       <div class=" element-bottom-border" ></div>
       <span slot="footer" class="dialog-footer" >
-        <el-button @click="screenModal = false">取 消</el-button>
-        <el-button type="primary" @click="screenModal = false">确 定</el-button>
+        <el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
+        <el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
       </span>
 
     </el-dialog>
@@ -62,13 +58,8 @@
 </template>
 <script>
 import axios from 'axios';
-//import highstock from 'highcharts/highstock';
 import echarts from 'echarts';
 import bus from '../../libs/bus';
-//import calendarSelect from '../page/calendar-select';
-//import { getQueryChart } from '../../models/service';
-
-//require('highcharts/modules/no-data-to-display')(highstock);
 
 export default {
   name: 'lineChartBlock',
@@ -107,7 +98,7 @@ export default {
       firstLoad: false, // 是否第一次加载
       highchartStore: null, // 保存图表数据
       echartStore:null,// 保存图表数据
-      highchartModalStore: null, // 全屏查看时数据
+      echartModalStore: null, // 全屏查看时数据
       chartType: 'line', // 图表类型
       screenModal: false,
       // 查询数据使用
@@ -116,8 +107,90 @@ export default {
         end_time: '',
       },
       stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-      legend:[]
+      legend:[],
      // firstShow: false, // 默认不显示操作按钮,
+      searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text:  this.$t("dashboard.panel.recOne"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setHours(start.getHours() - 1);
+              picker.$emit('pick', [start, end]);
+            }
+          },{
+            text: this.$t("dashboard.panel.recFour"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setHours(start.getHours() - 4);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.recOneDay"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(start.getDate() - 1);
+              picker.$emit('pick', [start, end]);
+            }
+          },  {
+            text: this.$t("dashboard.panel.yesterday"),
+            onClick(picker) {
+              const start = new Date();
+              const end = new Date();
+              start.setDate(start.getDate() - 1);
+              start.setHours(0);
+              start.setMinutes(0);
+              start.setSeconds(0);
+              end.setDate(end.getDate() - 1);
+              end.setHours(23);
+              end.setMinutes(59);
+              end.setSeconds(59);
+              picker.$emit('pick', [start, end]);
+            }
+          },{
+            text: this.$t("dashboard.panel.recSevenDay"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(start.getDate() - 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.recOneMonth"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(start.getDate() - 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: this.$t("dashboard.panel.curMonth"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(1);
+              start.setHours(0);
+              start.setMinutes(0);
+              picker.$emit('pick', [start, end]);
+            }
+          },{
+            text: this.$t("dashboard.panel.lastMonth"),
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setDate(1);
+              start.setMonth(start.getMonth() - 1);
+              end.setDate(0);
+              start.setStart();
+              end.setEnd();
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+      },
     };
   },
   computed: {
@@ -140,7 +213,11 @@ export default {
       if ( chartInfo.type === 4) {//line,bar
         this.chartType = 'line';
       }
-      this.echartStore = echarts.init(ele);
+      if (chartSite === 'local') {
+        this.echartStore = echarts.init(ele);
+      }else if (chartSite === 'screen') {
+        this.echartModalStore = echarts.init(ele);
+      }
       var chartWidth = ele.clientWidth;
       var option = {
         title: {
@@ -331,6 +408,7 @@ export default {
         */
         this.echartStore.setOption(option);//创建图表
         this.echartStore.hideLoading();
+        this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
       } else if (chartSite === 'screen') { // 全屏显示
         /*
         option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
@@ -378,10 +456,11 @@ export default {
         });
         */
         // eslint-disable-next-line
-        this.echartStore.setOption(option);//显示全屏界面
-        this.echartStore.hideLoading();
+        this.echartModalStore.clear();
+        this.echartModalStore.setOption(option);//显示全屏界面
+        this.echartModalStore.hideLoading();
+        this.echartModalStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
       }
-      this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
     },
     // 设置数据, filter区分
     setData(chartItem, seriesItem, panelId, filter,legend) {
@@ -392,6 +471,8 @@ export default {
       this.panelIdInner = panelId;
       this.data = chartItem;
       this.seriesItem = seriesItem;
+      this.searchTime[0] = filter.start_time;
+      this.searchTime[1] = filter.end_time;
       this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
       /*
       if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
@@ -432,15 +513,161 @@ export default {
       this.screenModal = true;
     },
     dateChange(time) {
-      /*
-      this.filter.start_time = `${time[0]}:00`;
-      this.filter.end_time = `${time[1]}:59`;
+      this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+      this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
       if (this.showSetting) {
         this.getQueryChart('list');
       } else {
         this.getQueryChart('dashboard');
       }
-      */
+    },
+    // 查询数据,修改日期查询全屏数据
+    getQueryChart(type) {
+      if (this.echartModalStore) {
+        this.echartModalStore.showLoading();
+      }
+      let axiosArr = [];
+      this.$nextTick(() => {
+        if (type === 'list') { // 普通模式,主控台使用
+          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+          if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
+            let now = new Date();
+            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+            endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
+            this.searchTime[0] = startTime;
+            this.searchTime[1] = endTime;
+          }
+          let step = bus.getStep(startTime,endTime);
+          axiosArr = this.data.elements.map((ele) => {
+            const filterItem = ele;
+            return  this.$get('/prom/api/v1/query_range?query='+filterItem.expression+"&start="+startTime+"&end="+endTime+'&step='+step);
+          });
+        } else if (type === 'dashboard') { // 概览模式,指标概览中使用
+          /*
+          // 概览模式,需要区分单独一个和多个
+          if (this.stableFilter.chartCount === 'multiple') {
+            // 所有tag标签
+            const tagAllArr = this.proTags(this.data.tags);
+            // 根据title格式化的标签
+            const titles = this.data.title.split(',');
+            const titleArr = titles.map(item => item.trim());
+            // 获取所需标签
+            const tagArr = this.getCompilation(tagAllArr, titleArr);
+            axiosArr = [getQueryChart({
+              product_id: this.productId,
+              metric: this.data.metric,
+              tags: tagArr.toString(),
+              start: this.filter.start_time,
+              end: this.filter.end_time,
+            })];
+          } else {
+            axiosArr = [getQueryChart({
+              product_id: this.productId,
+              metric: this.data.metric,
+              tags: this.data.tags,
+              start: this.filter.start_time,
+              end: this.filter.end_time,
+            })];
+          }
+          */
+        }
+        // 一个图表
+        axios.all(axiosArr).then((res) => {
+          if (res.length > 0) {
+            const series = [];
+            const legend = [];
+            const sumData = {
+              name: 'sum',
+              data: [],
+              visible: true,
+              threshold: null,
+            };
+            res.forEach((response) => {
+              if (response.status === 'success') {
+                if (response.data.result) {
+                  // 循环处理每个elements下获取的数据列
+                  response.data.result.forEach((queryItem,innerPos) => {
+                    const seriesItem = {
+                      theData: {
+                        name: '',
+                        data: [],
+                        type:this.data.type,
+                        //visible: true,
+                        //threshold: null,
+                      },
+                      metric_name: '',
+                    };
+                    // 图表中每条线的名字,后半部分
+                    let host = `${queryItem.metric.__name__}{`;//up,
+                    const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+                    // 设置时间-数据格式对
+                    const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                    // 判断是否有数据
+                    if (dpsArr.length > 0 && tagsArr.length > 0) {
+                      tagsArr.forEach((tag, i) => {
+                        if (tag !== '__name__') {
+                          host += `${tag}="${queryItem.metric[tag]}",`;
+                        }
+                      });
+                      if(host.endsWith(',')){host = host.substr(0,host.length-1);}
+                      host +="}";
+                      legend.push(host);
+                      // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                      seriesItem.theData.name = host;
+                      seriesItem.metric_name = seriesItem.theData.name;
+                      // 将秒改为毫秒
+                      //alert('table=='+JSON.stringify(queryItem))
+                      seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                        /*曲线汇总暂不需要
+                        if (sumData.data[dpsIndex]) {
+                          const sumNum = sumData.data[dpsIndex][1] || 0;
+                          sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                        } else {
+                          sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                        }
+                        */
+                        return [dpsItem[0] * 1000, dpsItem[1]];
+                      });
+                      series.push(seriesItem.theData);
+
+                    } else if (this.data.elements && this.data.elements[innerPos]) {
+                      // 无数据提示
+                      /*
+                      const currentInfo = chartItem.elements[innerPos];
+                      const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                      this.$message.warning({
+                        duration: 15,
+                        content: errorMsg,
+                        closable: true,
+                      });
+                      */
+                    }
+                  });
+                }
+              }
+            });
+            /*
+            if (series.length && this.data.type === 4) {
+              series.push(sumData);
+            }
+            */
+            this.initChart(this.data, series, this.$refs.screenShowArea, 'screen',legend);
+          }
+        }).catch((error) => {
+          if (error) {
+            this.$message.warning({
+              content: this.$t("tip.refreshLater"),//'Please refesh later',//请稍后刷新
+              duration: 3,
+            });
+          }
+        });
+      });
+    },
+    showLoad() {
+      if (this.echartStore) {
+        this.echartStore.showLoading();
+      }
     },
     /*
     handleClose(done) {
@@ -589,11 +816,6 @@ export default {
       });
     },
 
-    showLoad() {
-      if (this.highchartStore) {
-        this.highchartStore.showLoading();
-      }
-    },
     // 获取格式
     getNumStr(num) {
       if (num >= 1000) {
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 4b7d66219..b4651f040 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -77,7 +77,10 @@ const cn = {
         threeMinutes:'3分钟',
         fiveMinutes:'5分钟',
         tenMinutes:'10分钟',
-      }
+      },
+      view:'查看',
+      confirm:'确 定',
+      cancel:'取 消'
     },
     metric:{
       name:"指标名称",
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 618ca52bb..85f1f7fe6 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -30,7 +30,7 @@ const en = {
     panel:{
       title:'Panel',
       searchItem:{
-        name:'Title'
+        name:'name'
       },
       //面板-侧滑框
       createPanelTitle: "Create Panel",
@@ -86,7 +86,10 @@ const en = {
         threeMinutes:'3 mins',
         fiveMinutes:'5 mins',
         tenMinutes:'10 mins',
-      }
+      },
+      view:'View',
+      confirm:'Ok',
+      cancel:'Cancel'
     },
     metric:{
       name:"Metric",
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index a2448a860..e0be400f7 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -253,6 +253,7 @@
             }]
         },
         searchTime: [new Date().setHours(new Date().getHours()-1),new Date()],
+        intervalTimer: null,
         intervalList: [{
           value: 0,
           name: this.$t("dashboard.panel.refreshInterval.never"),
@@ -299,16 +300,15 @@
         panelData: [],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
-          searchLabelList: [
-            /*
+          searchLabelList: [/*
             {
             id: 1,
             name: this.$t("dashboard.panel.searchItem.name"),
             type: 'input',
             label: 'name',
             disabled: false
-          }
-          */],
+          }*/
+          ],
         },
         searchLabel: {}, //搜索参数
         //---图表相关参数--start
@@ -334,8 +334,7 @@
     methods: {
       //面板相关操作
       panelChange(){
-        //alert(JSON.stringify(this.$refs.searchInput.select_list));
-        this.$refs.searchInput.select();
+        //this.$refs.searchInput.select();
         this.filter.panelId = this.showPanel.id;
         this.getData(this.filter);
       },
@@ -443,7 +442,7 @@
       /*时间条件查询--start*/
       // 选择日期变化
       dateChange() {
-        this.$refs.searchInput.select();
+        //this.$refs.searchInput.select();
         this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
         this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
         this.filter.panelId = this.showPanel.id;
@@ -482,7 +481,32 @@
             }
           }
         })
-
+      },
+      //定期刷新
+      selectInterval(val) {
+        clearInterval(this.intervalTimer);
+        if (val) {
+          const start = new Date(this.searchTime[1]);
+          const now = new Date();
+          const interval = Math.floor((now.getTime() - start.getTime()) / 1000);//计算当前结束时间到现在的间隔（秒）
+          if (interval >= 60) {//如果结束时间到现在超过1分钟，则
+            this.getIntervalData(interval);
+          }
+          this.intervalTimer = setInterval(() => {
+            this.getIntervalData(this.interval);
+          }, val * 1000);
+        }
+      },
+      getIntervalData(interval) {//interval:结束时间到现在的秒数
+        const start = new Date(this.searchTime[0]);
+        const end = new Date(this.searchTime[1]);
+        start.setSeconds(start.getSeconds() + interval);
+        end.setSeconds(end.getSeconds() + interval);
+        const startTime = bus.timeFormate(start, 'yyyy-MM-dd hh:mm');
+        const endTime = bus.timeFormate(end, 'yyyy-MM-dd hh:mm');
+        this.searchTime = [startTime, endTime];
+        //刷新数据
+        this.dateChange();
       },
       pageNo(val) {
         this.pageObj.pageNo = val;
diff --git a/nezha-fronted/src/libs/bus.js b/nezha-fronted/src/libs/bus.js
index 87e73370b..bf4f78753 100644
--- a/nezha-fronted/src/libs/bus.js
+++ b/nezha-fronted/src/libs/bus.js
@@ -1,6 +1,4 @@
 import Vue from 'vue';
-//import Cookies from 'js-cookie';
-//import md5 from 'md5';
 
 Date.prototype.setStart = function() {
   this.setHours(0);
@@ -120,6 +118,25 @@ export default new Vue({
       });
       return fm;
     },
+    getStep(startTime,endTime){
+      const start = new Date(startTime);
+      const end = new Date(endTime);
+      let step='15s';
+      const numInterval = end.getTime()-start.getTime();
+      let oneDay = 86400000;
+      let sevenDay = 604800000;
+      let thirtyDay = 2592000000;
+      if (numInterval < oneDay) {//小于1天，step为15s
+        step='15s';
+      }else if(numInterval<sevenDay){
+        step='5m';
+      }else if(numInterval<thirtyDay){
+        step='10m';
+      }else {
+        step='30m';
+      }
+      return step;
+    },
     isEmptyObject(obj) {
       if (obj) {
         let name = '';

From cda2dd7dafbd6e57c9d37478e930655342e9368e Mon Sep 17 00:00:00 2001
From: wangwenrui <wangwenrui@zdjizhi.com>
Date: Fri, 10 Jan 2020 18:16:25 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:asset=20=E5=88=97=E8=A1=A8=E6=9C=BA?=
 =?UTF-8?q?=E6=88=BF=E5=BC=B9=E6=A1=86=20=E5=8F=8A=E5=85=B6=E4=BB=96?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.机房配置抽取组件
2.idc配置组件增加详情查看
3.idc配置组件增加联动更新
---
 .../src/components/common/header.vue          |  11 +-
 .../common/popBox/cabinetConfig.vue           | 202 ++++++++++++++++
 .../common/{ => popBox}/dcConfig.vue          |  59 +++--
 .../components/page/asset/accountConfig.vue   |  18 +-
 .../src/components/page/asset/asset.vue       |  25 +-
 .../components/page/asset/assetAddUnit.vue    | 217 +-----------------
 .../components/page/asset/assetEditUnit.vue   | 214 +----------------
 .../src/components/page/config/promServer.vue |  15 +-
 nezha-fronted/src/main.js                     |   4 +-
 9 files changed, 312 insertions(+), 453 deletions(-)
 create mode 100644 nezha-fronted/src/components/common/popBox/cabinetConfig.vue
 rename nezha-fronted/src/components/common/{ => popBox}/dcConfig.vue (74%)

diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 54824185b..1041b229e 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -57,9 +57,11 @@
             <el-menu-item :index="'3-' + index">
               <div @click="jumpToAsset('asset',item.id)">
                 <span>{{item.name}}</span>
-                <idc-config-box :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
+                <idc-config-box :post-idc="item" ref="idcConfigBox" placement="left" @after="getIDCOptionData" :button-class="'menu-edit'">
                   <template v-slot:optionZone>
-                    <i class="el-icon-edit-outline" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
+                    <div @click="closeAllPop">
+                      <i class="el-icon-edit-outline" @click="getIDCOptionData(item.id)" style="color: inherit"></i>
+                    </div>
                   </template>
                 </idc-config-box>
                 <!--<el-popover
@@ -425,6 +427,11 @@
           window.location.reload();
         }
       },
+      closeAllPop:function(){
+        this.$refs.idcConfigBox.forEach((item)=>{
+          item.show(false)
+        })
+      },
       getProjectList() {
         this.$get('project', {}).then(response => {
           if (response.code == 200) {
diff --git a/nezha-fronted/src/components/common/popBox/cabinetConfig.vue b/nezha-fronted/src/components/common/popBox/cabinetConfig.vue
new file mode 100644
index 000000000..bc7d4c1b1
--- /dev/null
+++ b/nezha-fronted/src/components/common/popBox/cabinetConfig.vue
@@ -0,0 +1,202 @@
+<template>
+  <el-popover :placement="placement"  width="400" @hide="hidePop"  ref="popBox" v-model="popBox.show">
+    <div class="">
+      <div class="pop-window-assetType-content">
+        <div class="pop-top-btns">
+          <button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-small nz-btn-style-normal">
+            <span class="top-tool-btn-txt" v-if="popBox.isEdit">{{$t('overall.save')}}</span>
+            <span class="top-tool-btn-txt" v-else>{{$t('overall.edit')}}</span>
+          </button>
+          <button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
+            <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
+          </button>
+        </div>
+        <!--标题-->
+        <div class="pop-title">{{title}}</div>
+        <!--表单内容-->
+        <el-form class="pop-item-wider" :model="cabinet" ref="cabinetForm" :rules="rules">
+          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
+            <el-input size='mini' v-model="cabinet.name" v-if="popBox.isEdit"/>
+            <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.name}}</div>
+          </el-form-item>
+          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
+            <div :class="{'right-box-form-content-txt':!popBox.isEdit}" >{{cabinet.uSize}}</div>
+            <el-slider v-model.number="cabinet.uSize" :max="47" v-if="popBox.isEdit"></el-slider>
+          </el-form-item>
+          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
+            <el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="popBox.isEdit"/>
+            <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{cabinet.remark}}</div>
+          </el-form-item>
+          <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
+            <el-select size='mini' v-model="cabinet.idcId" clearable style="width: 100%;" placeholder="" v-if="popBox.isEdit">
+              <el-option v-for="item in idcDatas" :key="item.key" :label="item.name" :value="item.id">
+                <span>{{ item.name }}</span>
+              </el-option>
+            </el-select>
+            <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc?idc.name:''}}</div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <span :class="buttonClass" @click.prevent.stop="" slot="reference">
+      <slot name="optionZone">
+        <i class="el-icon-plus"></i>
+      </slot>
+    </span>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  name: "cabinetConfig",
+  props:{
+    postCabinet:{type:Object},
+    placement:{type:String},
+    buttonClass:{type:String},
+    isEdit:{type:Boolean,default:true}
+  },
+  created() {
+    this.init();
+  },
+  data(){
+    return {
+      title:"",
+      rules:{
+        name: [
+          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+        ],
+        uSize: [
+          {required: true, type: 'number', min: 1, max: 47, message: this.$t('validate.required'), trigger: 'blur'}
+        ],
+        idcId: [
+          {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+        ]
+      },
+      cabinet:{},
+      popBox:{isEdit:false,show:false},
+      idcDatas:[],
+      idc:null
+    }
+  },
+  methods:{
+    init:function(){
+      this.getIdcDatas();
+    },
+    resetData:function(){
+      let temp=this;
+      temp.cabinet={
+        name:'',
+        uSize:0,
+        idcId:null,
+        remark:''
+      }
+    },
+    saveOrToEdit(){
+      if (!this.popBox.isEdit) {
+        this.toEdit(this.cabinet);
+      } else {
+        this.save();
+      }
+    },
+    save:function(){
+      let temp=this;
+      temp.$refs.cabinetForm.validate((valid => {
+        if(valid){
+          if (temp.cabinet.id) {
+            this.$put('cabinet', temp.cabinet).then(res => {
+              const h = temp.$createElement;
+              if (res.code === 200) {
+                temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
+                temp.$emit("after",temp.cabinet.idcId);
+                temp.esc();
+              } else {
+                temp.$message.error(res.msg);
+              }
+            })
+          } else {
+            temp.$post('cabinet', temp.cabinet).then(res => {
+              const h = temp.$createElement;
+              if (res.code === 200) {
+                temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
+                temp.$emit("after",temp.cabinet.idcId);
+                temp.esc();
+              } else {
+                temp.$message.error(res.msg);
+              }
+            })
+          }
+        }else{
+          return false;
+        }
+      }))
+    },
+    show:function(isShow,isEdit){
+      this.popBox.show=isShow;
+      this.popBox.isEdit=isEdit;
+    },
+    toEdit:function(u){
+      this.cabinet = Object.assign({}, u);
+      this.popBox.isEdit = true;
+      this.title = this.$t('asset.createAssetTab.editCabinetTab.title') + "  ID：" + this.cabinet.id;
+      this.popBox.show = true;
+    },
+    getIdcDatas:function(){
+      let temp=this;
+      temp.$get('idc').then(response => {
+        if (response.code === 200) {
+          temp.idcDatas = response.data.list;
+          for (let i in temp.idcDatas){
+            let item=temp.idcDatas[i];
+            if(item.id==temp.cabinet.idcId){
+             temp.idc=item;
+              break;
+            }
+          }
+        }
+      })
+    },
+    openBox:function(){
+      this.popBox.show=true;
+    },
+    esc:function(){
+      this.popBox.show=false;
+    },
+    hidePop:function(){//隐藏事件触发方法
+      if(this.postCabinet&&this.postCabinet.id){
+        this.cabinet=this.postCabinet;
+      }else{
+        this.resetData();
+      }
+      this.clearValidate();
+    },
+    clearValidate:function(){
+      this.$refs.cabinetForm.clearValidate();
+    }
+  },
+  watch:{
+    postCabinet: {
+      immediate: true,
+      deep: true,
+      handler(n, o) {
+        if (n && n.id) {
+          this.title =this.popBox.isEdit? this.$t('asset.createAssetTab.editCabinetTab.title') + "  ID：" + n.id : this.$t('asset.createAssetTab.cabinet') + "  ID：" + n.id;
+          this.cabinet=n;
+        } else {
+          this.title = this.$t('asset.createAssetTab.AddCabinetTab.title');
+          this.resetData();
+        }
+      }
+    },
+    isEdit:{
+      immediate: true,
+      handler(n, o) {
+        this.popBox.isEdit=n;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/dcConfig.vue b/nezha-fronted/src/components/common/popBox/dcConfig.vue
similarity index 74%
rename from nezha-fronted/src/components/common/dcConfig.vue
rename to nezha-fronted/src/components/common/popBox/dcConfig.vue
index c4bad16eb..643c8bfbf 100644
--- a/nezha-fronted/src/components/common/dcConfig.vue
+++ b/nezha-fronted/src/components/common/popBox/dcConfig.vue
@@ -1,13 +1,14 @@
 <template>
-  <el-popover :placement="placement"    width="400" @hide="hidePop"  ref="popBox" v-model="popBox.show">
+  <el-popover :placement="placement"   width="400" @hide="hidePop"  ref="popBox" v-model="popBox.show">
     <div class="">
       <!-- begin--顶部按钮-->
       <div class="pop-top-btns">
-        <button type="button" v-if="popBox.isEdit && idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
+        <button type="button" v-if="idc.id != ''" @click="del" class="nz-btn nz-btn-size-small nz-btn-style-light">
           <span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
         </button>
-        <button type="button" @click="save" class="nz-btn nz-btn-size-small nz-btn-style-normal">
-          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
+        <button type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-small nz-btn-style-normal">
+          <span class="top-tool-btn-txt" v-if="popBox.isEdit">{{$t('overall.save')}}</span>
+          <span class="top-tool-btn-txt" v-else>{{$t('overall.edit')}}</span>
         </button>
 
         <button type="button" @click="esc" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
@@ -20,18 +21,22 @@
       <div class="pop-item-wider">
         <el-form class="right-box-form" :model="idc" label-position="left" label-width="150px"  :rules="rules" ref="idcForm">
           <el-form-item :label="$t('asset.createAssetTab.dcName')" prop="name">
-            <el-input type="text"  placeholder="" v-model="idc.name" size="mini" maxlength="64"></el-input>
+            <el-input type="text"  placeholder="" v-model="idc.name" size="mini" maxlength="64" v-if="popBox.isEdit"></el-input>
+            <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.name}}</div>
           </el-form-item>
           <el-form-item :label="$t('asset.createAssetTab.location')" prop="location">
-            <el-input type="text"  placeholder="" v-model="idc.location" size="mini"></el-input>
+            <el-input type="text"  placeholder="" v-model="idc.location" size="mini" v-if="popBox.isEdit"></el-input>
+            <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.location}}</div>
           </el-form-item>
           <el-form-item :label="$t('asset.createAssetTab.principal')" prop="principal">
-            <el-select v-model="idc.principal" clearable size="mini" placeholder="">
+            <el-select v-model="idc.principal" clearable size="mini" placeholder="" v-if="popBox.isEdit">
               <el-option v-for="item in principals" :key="item.id" :label="item.username" :value="item.userId"></el-option>
             </el-select>
+            <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.principal}}</div>
           </el-form-item>
-          <el-form-item :label="$t('asset.createAssetTab.tel')" prop="tel">
-            <el-input type="text"  placeholder="" v-model="idc.tel" size="mini"></el-input>
+          <el-form-item :label="$t('asset.createAssetTab.tel')" prop="tel" >
+            <el-input type="text"  placeholder="" v-model="idc.tel" size="mini" v-if="popBox.isEdit"></el-input>
+            <div class="right-box-form-content-txt" v-if="!popBox.isEdit">{{idc.tel}}</div>
           </el-form-item>
         </el-form>
       </div>
@@ -50,7 +55,8 @@
       props:{
         postIdc:{type:Object},
         placement:{type:String},
-        buttonClass:{type:String}
+        buttonClass:{type:String},
+        isEdit:{type:Boolean,default:true}
       },
       created() {
         this.init();
@@ -90,7 +96,7 @@
           },
           idc:{},
           principals:[],
-          popBox:{isEdit:false,show:false}
+          popBox:{isEdit:true,show:false}
         }
       },
       methods:{
@@ -118,6 +124,13 @@
             }
           })
         },
+        saveOrToEdit:function(){
+          if (!this.popBox.isEdit) {
+            this.toEdit(this.idc);
+          } else {
+            this.save();
+          }
+        },
         save:function(){
           let temp=this;
           temp.$refs.idcForm.validate((valide)=>{
@@ -126,8 +139,9 @@
               if(!temp.idc.id){
                 temp.$post('idc', temp.idc).then(response => {
                   if (response.code === 200) {
-                    temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.deleteSuccess")});
+                    temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
                     temp.$emit("after");
+                    temp.$store.commit('assetDcListChange');
                     temp.esc();
                   } else {
                     this.$message.error(response.msg);
@@ -136,8 +150,9 @@
               }else{
                 this.$put('idc', temp.idc).then(response => {
                   if (response.code === 200) {
-                    temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.deleteSuccess")});
+                    temp.$message({duration: 1000, type: 'success', message: temp.$t("tip.saveSuccess")});
                     temp.$emit("after");
+                    temp.$store.commit('assetDcListChange');
                     temp.esc();
                   } else {
                     this.$message.error(response.msg);
@@ -150,6 +165,16 @@
             }
           });
         },
+        toEdit:function(u){
+          this.idc = Object.assign({}, u);
+          this.popBox.isEdit = true;
+          this.title = this.$t('asset.createAssetTab.editIdcTab.title') + "  ID：" + this.idc.id
+          this.popBox.show = true;
+        },
+        show:function(isShow,isEdit){
+          this.popBox.show=isShow;
+          this.popBox.isEdit=isEdit;
+        },
         esc:function(){
           this.popBox.show=false;
         },
@@ -191,16 +216,20 @@
           handler(n, o) {
             if (n && n.id) {
               this.title = this.$t('asset.createAssetTab.editIdcTab.title') + "  ID：" + n.id;
-              this.popBox.isEdit=true;
               this.idc=n;
 
             } else {
               this.title = this.$t('asset.createAssetTab.AddIdcTab.title');
-              this.popBox.isEdit=false;
               this.resetData();
             }
           }
         },
+        isEdit:{
+          immediate: true,
+          handler(n, o) {
+            this.popBox.isEdit=n;
+          }
+        }
       }
     }
 </script>
diff --git a/nezha-fronted/src/components/page/asset/accountConfig.vue b/nezha-fronted/src/components/page/asset/accountConfig.vue
index 091482156..99e69552b 100644
--- a/nezha-fronted/src/components/page/asset/accountConfig.vue
+++ b/nezha-fronted/src/components/page/asset/accountConfig.vue
@@ -2,7 +2,7 @@
     <div>
       <el-form class="pop-item-wider" :model="account" :rules="rules" ref="accountForm">
         <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini">
-          <div class="nz-btn-group float-left" style="padding-top: 4px;">
+          <div class="nz-btn-group float-left" style="padding-top: 4px;" v-if="isEdit">
             <button type="button" @click="changeLoginType(1)"
                     class="nz-btn nz-btn-size-small float-left"
                     :class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
@@ -14,17 +14,20 @@
               <span>{{$t('asset.createAssetTab.ssh')}}</span>
             </button>
           </div>
+          <div class="right-box-form-content-txt" v-if="!isEdit">{{account.authType}}</div>
         </el-form-item>
         <el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
-          <el-input size="mini" v-model="account.user"/>
+          <el-input size="mini" v-model="account.user" v-if="isEdit"/>
+          <div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
         </el-form-item>
-        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" >
+        <el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" v-if="isEdit">
           <el-input size="mini" type="password" v-model="account.pwd"/>
         </el-form-item>
-        <el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
-          <el-input size="mini" v-model="account.port"/>
+        <el-form-item :label="$t('asset.createAssetTab.port')" prop="port" >
+          <el-input size="mini" v-model="account.port" v-if="isEdit"/>
+          <div class="right-box-form-content-txt" v-if="!isEdit">{{account.port}}</div>
         </el-form-item>
-        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file">
+        <el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file" v-if="isEdit">
           <el-upload class="upload-demo" ref="upload" action="" :file-list="uploadFileList" :on-change="handleChange"  :auto-upload="false">
             <div slot="tip" class="el-upload__tip" v-if="account.privateKey" >{{$t('asset.createAssetTab.sshKeyWasConfig')}}</div>
             <button type="button" class="nz-btn nz-btn-size-small nz-btn-style-normal">
@@ -42,7 +45,8 @@ export default {
     name: "accountConfig",
     props:{
       account:{type:Object},
-      asComponent:{type:Boolean,default:false}
+      asComponent:{type:Boolean,default:false},
+      isEdit:{type:Boolean,default:true}
     },
     created() {
     },
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 19c43baa7..94f7959c6 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -8,9 +8,12 @@
           <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': checkList.indexOf(item.id) != -1}"
                        v-for="(item,key) in checkListData" :key="key" :label=item.id>
             <span>{{item.name}}</span>
-            <idc-config-box :post-idc="addIdcData" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
+            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'">
               <template v-slot:optionZone>
-                <i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit')"></i>
+                <span @click="closeAllPop">
+                  <i class="el-icon-edit-outline" @click="getSingleIDCData(item.id,'edit')"></i>
+                </span>
+
               </template>
             </idc-config-box>
             <!--<el-popover
@@ -139,15 +142,19 @@
               <div class="tab-input-square link">{{scope.row.alertNum}}</div>
             </div>
             <div v-if="item.prop=='dataCenter'">
-              <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'">
+              <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'">
                 <template v-slot:optionZone>
-                  <span class="link">{{scope.row.idc.name}}</span>
+                  <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>
                 </template>
               </idc-config-box>
               <!--<span class="link">{{scope.row.idc.name}}</span>-->
             </div>
             <div v-if="item.prop=='cabinet'">
-              <span class="link">{{returnData(scope.row.cabinet)}}</span>
+              <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)">
+                <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>
+              </cabinet-config-box>
+              <span v-else>{{returnData(scope.row.cabinet)}}</span>
+
             </div>
             <div v-if="item.prop=='model'">
               <span>{{scope.row.model.name}}</span>
@@ -623,6 +630,14 @@
         this.getAssetData();
         this.getIDCOptionData();
       },
+      closeAllPop:function(){
+        this.$refs.idcConfigBox.forEach((item)=>{
+          item.show(false)
+        })
+        this.$refs.cabinetConfigBox.forEach((item)=>{
+          item.show(false)
+        })
+      },
       search(searchObj) {
         this.searchLabel = {};
         this.pageObj.pageNo = 1;
diff --git a/nezha-fronted/src/components/page/asset/assetAddUnit.vue b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
index 948dc4a5f..757c8af87 100644
--- a/nezha-fronted/src/components/page/asset/assetAddUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetAddUnit.vue
@@ -94,7 +94,7 @@
                                   <el-input class="input-x-mini" v-model="item.value"/>
                                 </span>
                                 <span class="config-dropdown-btn" @click.stop="editOptionData(item,'type',index)">
-                                  <i class="el-icon-edit-outline"v-if="!item.isEdit"></i>
+                                  <i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
                                   <i class="el-icon-check" v-if="item.isEdit" @click="editData('sys/dict/update',item)"></i>
                                 </span>
                                 <span class="config-dropdown-btn config-dropdown-btn-delete"
@@ -387,113 +387,9 @@
                 :value="item.id"
               >
                 <span>{{ item.name }}</span>
-                <el-popover
-                  placement="left"
-                  trigger="manual"
-                  v-model="item[item.name]"
-                  width="400"
-                >
-                  <div class="pop-window-assetType-content">
-                    <div class="pop-top-btns">
-                      <button type="button" @click="editData('cabinet',item)" class="nz-btn nz-btn-size-small nz-btn-style-normal">
-                        <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-                      </button>
-                      <button type="button" @click="item[item.name] = false" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
-                        <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
-                      </button>
-                    </div>
-                    <!--标题-->
-                    <div class="pop-title">{{$t('asset.createAssetTab.editCabinetTab.title')}}</div>
-                    <!--表单内容-->
-                    <el-form class="pop-item-wider" :model="popCabinetData" ref="cabEditForm" :rules="cabRules">
-                      <el-form-item :label="$t('asset.createAssetTab.editCabinetTab.name')" prop="name">
-                        <el-input size="mini" v-model="popCabinetData.name"/>
-                      </el-form-item>
-                      <el-form-item :label="$t('asset.createAssetTab.editCabinetTab.uSize')" prop="uSize">
-                        <div>{{popCabinetData.uSize}}</div>
-                        <el-slider v-model.number="popCabinetData.uSize" :max="47"></el-slider>
-                      </el-form-item>
-                      <el-form-item :label="$t('asset.createAssetTab.editCabinetTab.remark')">
-                        <el-input v-model="popCabinetData.remark"
-                                  type="textarea"
-                                  size="mini"
-                                  :rows="2"/>
-                      </el-form-item>
-                      <el-form-item :label="$t('asset.createAssetTab.editCabinetTab.DC')">
-                        <el-select v-model="popCabinetData.idcId" clearable placeholder="" size="mini" style="width: 100%;" prop="idcId">
-                          <el-option
-                            v-for="item in IDCOptionData"
-                            :key="item.key"
-                            :label="item.name"
-                            :value="item.id"
-                          >
-                            <span>{{ item.name }}</span>
-                            <!--                                                            <el-popover-->
-                            <!--                                                                    placement="top"-->
-                            <!--                                                                    v-model="item[item.name+item.id]"-->
-                            <!--                                                            >-->
-                            <!--                                                                <div class="pop-window-assetType-content">-->
-                            <!--                                                                    <div class="right-box-top-btns">-->
-                            <!--                                                                        <div class="right-box-top-btn right-box-top-btn-full"-->
-                            <!--                                                                             @click="item[item.name+item.id] = false">-->
-                            <!--                                                                            <div class="right-box-btn-icon">-->
-                            <!--                                                                                <i class="el-icon-close"></i>-->
-                            <!--                                                                            </div>-->
-                            <!--                                                                            <span>{{$t('overall.esc')}}</span>-->
-                            <!--                                                                        </div>-->
-                            <!--                                                                    </div>-->
-                            <!--                                                                    <div class="pop-window">-->
-                            <!--                                                                        <span style="display: block;padding-bottom: 20px">标题</span>-->
-                            <!--                                                                        <el-form-item label="DC Name">-->
-                            <!--                                                                            <el-input v-model="addCabIDCData.name"/>-->
-                            <!--                                                                        </el-form-item>-->
-                            <!--                                                                        <el-form-item label="Location">-->
-                            <!--                                                                            <el-input v-model="addCabIDCData.location"/>-->
-                            <!--                                                                        </el-form-item>-->
-                            <!--                                                                        <el-form-item label="负责人">-->
-                            <!--                                                                            <el-select v-model="addCabIDCData.principal"-->
-                            <!--                                                                                       clearable>-->
-                            <!--                                                                                <el-option-->
-                            <!--                                                                                        v-for="item in idcUserData"-->
-                            <!--                                                                                        :key="item.key"-->
-                            <!--                                                                                        :label="item.username"-->
-                            <!--                                                                                        :value="item.userId"-->
-                            <!--                                                                                >-->
-                            <!--                                                                                </el-option>-->
-                            <!--                                                                            </el-select>-->
-                            <!--                                                                        </el-form-item>-->
-                            <!--                                                                        <el-form-item label="Tel">-->
-                            <!--                                                                            <el-input v-model="addCabIDCData.tel"/>-->
-                            <!--                                                                        </el-form-item>-->
-                            <!--                                                                    </div>-->
-                            <!--                                                                </div>-->
-                            <!--                                                                <div class="right-box-bottom-btns">-->
-                            <!--                                                                    <div class="right-box-bottom-btn right-box-bottom-btn-cancel"-->
-                            <!--                                                                         @click.stop="item[item.name+item.id]= false">-->
-                            <!--                                                                        {{$t('overall.cancel')}}-->
-                            <!--                                                                    </div>-->
-                            <!--                                                                    <div class="right-box-bottom-btn right-box-bottom-btn-50"-->
-                            <!--                                                                         @click="editData('idc',item,'CabIDC')">-->
-                            <!--                                                                        {{$t('overall.save')}}-->
-                            <!--                                                                    </div>-->
-                            <!--                                                                </div>-->
-                            <!--                                                                <span class="config-dropdown-btn" slot="reference"-->
-                            <!--                                                                      @click="getSingleIDCData(item.id,'edit')"><i-->
-                            <!--                                                                        class="el-icon-edit-outline"></i></span>-->
-                            <!--                                                            </el-popover>-->
-                            <!--                                                            <span class="config-dropdown-btn config-dropdown-btn-delete"-->
-                            <!--                                                                  @click.stop="deleteData('idc',item.id)"><i-->
-                            <!--                                                                    class="el-icon-delete"></i></span>-->
-                          </el-option>
-                        </el-select>
-                      </el-form-item>
-                    </el-form>
-                  </div>
-                  <span class="config-dropdown-btn" slot="reference"
-                      @click.stop="getSingleCabinetData(item.id,'edit',item)">
-                    <i class="el-icon-edit-outline"></i>
-                  </span>
-                </el-popover>
+                <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
+                  <i slot="optionZone" class="el-icon-edit-outline"></i>
+                </cabinet-config-box>
 
                 <span class="config-dropdown-btn config-dropdown-btn-delete"
                       @click.stop="deleteData('cabinet',item.id)">
@@ -503,107 +399,7 @@
             </el-select>
 
             <div class="right-box-row-btn right-box-row-btn-small">
-              <el-popover
-                placement="left"
-                trigger="click"
-                v-model="popCabinetVisible"
-                width="400"
-              >
-                <div class="pop-window-assetType-content">
-                  <div class="pop-top-btns">
-                    <button type="button" @click="addNewData('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-normal">
-                      <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-                    </button>
-                    <button type="button" @click="popoverClose('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
-                      <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
-                    </button>
-                  </div>
-                  <!--标题-->
-                  <div class="pop-title">{{$t('asset.createAssetTab.AddCabinetTab.title')}}</div>
-                  <!--表单内容-->
-                  <el-form class="pop-item-wider" :model="addCabinetData" ref="cabAddForm" :rules="cabRules">
-                    <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.name')" prop="name">
-                      <el-input size='mini' v-model="addCabinetData.name"/>
-                    </el-form-item>
-                    <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.uSize')" prop="uSize">
-                      <div>{{addCabinetData.uSize}}</div>
-                      <el-slider v-model.number="addCabinetData.uSize" :max="47"></el-slider>
-                    </el-form-item>
-                    <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.remark')">
-                      <el-input size='mini' v-model="addCabinetData.remark" type="textarea" :rows="2"/>
-                    </el-form-item>
-                    <el-form-item :label="this.$t('asset.createAssetTab.AddCabinetTab.DC')" prop="idcId">
-                      <el-select size='mini' v-model="addCabinetData.idcId" clearable style="width: 100%;" placeholder="">
-                        <el-option
-                          v-for="item in IDCOptionData"
-                          :key="item.key"
-                          :label="item.name"
-                          :value="item.id"
-                        >
-                          <span>{{ item.name }}</span>
-                          <!--<el-popover
-                            placement="left"
-                            v-model="item[item.id+item.name]"
-                          >
-                            <div class="pop-window-assetType-content">
-                              <div class="right-box-top-btns">
-                                <div class="right-box-top-btn right-box-top-btn-full"
-                                     @click="item[item.id+item.name] = false">
-                                  <div class="right-box-btn-icon">
-                                    <i class="el-icon-close"></i>
-                                  </div>
-                                  <span>{{$t('overall.esc')}}</span>
-                                </div>
-                              </div>
-                              <div class="pop-window">
-                                <span style="display: block;padding-bottom: 20px">{{$t('asset.createAssetTab.editIdcTab.title')}}</span>
-                                <el-form-item :label="$t('asset.createAssetTab.editIdcTab.dcName')">
-                                  <el-input v-model="addCabIDCData.name"/>
-                                </el-form-item>
-                                <el-form-item :label="$t('asset.createAssetTab.editIdcTab.location')">
-                                  <el-input v-model="addCabIDCData.location"/>
-                                </el-form-item>
-                                <el-form-item :label="$t('asset.createAssetTab.editIdcTab.principal')">
-                                  <el-select v-model="addCabIDCData.principal"
-                                             clearable>
-                                    <el-option
-                                      v-for="item in idcUserData"
-                                      :key="item.key"
-                                      :label="item.username"
-                                      :value="item.userId"
-                                    >
-                                    </el-option>
-                                  </el-select>
-                                </el-form-item>
-                                <el-form-item :label="$t('asset.createAssetTab.editIdcTab.tel')">
-                                  <el-input v-model="addCabIDCData.tel"/>
-                                </el-form-item>
-                              </div>
-                            </div>
-                            <div class="right-box-bottom-btns">
-                              <div class="right-box-bottom-btn right-box-bottom-btn-cancel"
-                                   @click.stop="item[item.id+item.name]= false">
-                                {{$t('overall.cancel')}}
-                              </div>
-                              <div class="right-box-bottom-btn right-box-bottom-btn-50"
-                                   @click="editData('idc',item,'CabIDC')">
-                                {{$t('overall.save')}}
-                              </div>
-                            </div>
-                            <span class="config-dropdown-btn" slot="reference"
-                                  @click="getSingleIDCData(item.id,'edit',item)"><i
-                              class="el-icon-edit-outline"></i></span>
-                          </el-popover>
-                          <span class="config-dropdown-btn config-dropdown-btn-delete"
-                                @click.stop="deleteData('idc',item.id)"><i
-                            class="el-icon-delete"></i></span>-->
-                        </el-option>
-                      </el-select>
-                    </el-form-item>
-                  </el-form>
-                </div>
-                <div slot="reference"><i class="el-icon-plus"></i></div>
-              </el-popover>
+              <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')">
@@ -1032,8 +828,6 @@
               form.append("idcId", this.assetData.idcId);
               form.append("cabinetId", this.assetData.cabinetId);
               form.append("modelId", modelId);
-              debugger
-              console.log(this.assetData.accounts)
               for(let i in this.assetData.accounts){
                 let account=this.assetData.accounts[i];
                 if(account.user){
@@ -1105,7 +899,6 @@
         }
       },
       uploadFile:function(file){
-        console.log(file)
         this.assetData.accounts[0].file=file.file;
       },
       clearFile:function(){
diff --git a/nezha-fronted/src/components/page/asset/assetEditUnit.vue b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
index 5c3d92fc1..3582cd972 100644
--- a/nezha-fronted/src/components/page/asset/assetEditUnit.vue
+++ b/nezha-fronted/src/components/page/asset/assetEditUnit.vue
@@ -416,112 +416,9 @@
                   :value="item.id"
                 >
                   <span>{{ item.name }}</span>
-                  <el-popover
-                    placement="left"
-                    trigger="manual"
-                    v-model="item[item.name]"
-                    width="400"
-                  >
-                    <div class="pop-window-assetType-content">
-                      <div class="pop-top-btns">
-                        <button type="button" @click="editData('cabinet',item)" class="nz-btn nz-btn-size-small nz-btn-style-normal">
-                          <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-                        </button>
-                        <button type="button" @click="item[item.name] = false" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
-                          <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
-                        </button>
-                      </div>
-                      <!--标题-->
-                      <div class="pop-title">{{$t('asset.createAssetTab.editCabinetTab.title')}}</div>
-                      <!--表单内容-->
-                      <el-form class="pop-item-wider" :model="popCabinetData" ref="cabEditForm" :rules="cabRules">
-                        <el-form-item :label="$t('asset.editAssetTab.editCabinetTab.name')" prop="name">
-                          <el-input size="mini" v-model="popCabinetData.name"/>
-                        </el-form-item>
-                        <el-form-item :label="$t('asset.editAssetTab.editCabinetTab.uSize')" prop="uSize">
-                          <div>{{popCabinetData.uSize}}</div>
-                          <el-slider v-model.number="popCabinetData.uSize" :max="47"></el-slider>
-                        </el-form-item>
-                        <el-form-item :label="$t('asset.editAssetTab.editCabinetTab.remark')">
-                          <el-input v-model="popCabinetData.remark"
-                                    type="textarea"
-                                    :rows="2"/>
-                        </el-form-item>
-                        <el-form-item :label="$t('asset.editAssetTab.editCabinetTab.DC')" prop="idcId">
-                          <el-select v-model="popCabinetData.idcId" clearable placeholder="" size="mini" style="width: 100%;">
-                            <el-option
-                              v-for="ite in item.children"
-                              :key="ite.id"
-                              :label="ite.name"
-                              :value="ite.id"
-                            >
-                              <span>{{ ite.name }}</span>
-                              <!--<el-popover
-                                placement="left"
-                                v-model="ite[ite.name+ite.id]"
-                              >
-                                <div class="pop-window-assetType-content">
-                                  <div class="right-box-top-btns">
-                                    <div class="right-box-top-btn right-box-top-btn-full"
-                                         @click="ite[ite.name+ite.id] = false">
-                                      <div class="right-box-btn-icon">
-                                        <i class="el-icon-close"></i>
-                                      </div>
-                                      <span>{{$t('overall.esc')}}</span>
-                                    </div>
-                                  </div>
-                                  <div class="pop-window">
-                                    <span style="display: block;padding-bottom: 20px">标题</span>
-                                    <el-form-item label="DC Name">
-                                      <el-input v-model="addCabIDCData.name"/>
-                                    </el-form-item>
-                                    <el-form-item label="Location">
-                                      <el-input v-model="addCabIDCData.location"/>
-                                    </el-form-item>
-                                    <el-form-item label="负责人">
-                                      <el-select v-model="addCabIDCData.principal"
-                                                 clearable>
-                                        <el-option
-                                          v-for="item in idcUserData"
-                                          :key="item.key"
-                                          :label="item.username"
-                                          :value="item.userId"
-                                        >
-                                        </el-option>
-                                      </el-select>
-                                    </el-form-item>
-                                    <el-form-item label="Tel">
-                                      <el-input v-model="addCabIDCData.tel"/>
-                                    </el-form-item>
-                                  </div>
-                                </div>
-                                <div class="right-box-bottom-btns">
-                                  <div class="right-box-bottom-btn right-box-bottom-btn-cancel"
-                                       @click="ite[ite.name+ite.id]= false">
-                                    {{$t('overall.cancel')}}
-                                  </div>
-                                  <div class="right-box-bottom-btn right-box-bottom-btn-50"
-                                       @click="editData('idc',ite,'CabIDC')">
-                                    {{$t('overall.save')}}
-                                  </div>
-                                </div>
-                                <span class="config-dropdown-btn" slot="reference"
-                                      @click="getSingleIDCData(ite.id,'edit',ite)">11<i
-                                  class="el-icon-edit-outline"></i></span>
-                              </el-popover>
-                              <span class="config-dropdown-btn config-dropdown-btn-delete"
-                                    @click.stop="deleteData('idc',ite.id)"><i
-                                class="el-icon-delete"></i></span>-->
-                            </el-option>
-                          </el-select>
-                        </el-form-item>
-                      </el-form>
-                    </div>
-                    <span class="config-dropdown-btn" slot="reference"
-                          @click.stop="getSingleCabinetData(item.id,'edit',item)">
-                      <i class="el-icon-edit-outline"></i>
-                    </span>
-                  </el-popover>
+                  <cabinet-config-box placement="left" :post-cabinet="item" button-class="config-dropdown-btn" @after="getCabinetOptionData">
+                    <i slot="optionZone" class="el-icon-edit-outline"></i>
+                  </cabinet-config-box>
 
                   <span class="config-dropdown-btn config-dropdown-btn-delete"
                         @click.stop="deleteData('cabinet',item.id)">
@@ -531,99 +428,7 @@
               </el-select>
 
               <div class="right-box-row-btn right-box-row-btn-small">
-                <el-popover
-                  placement="left"
-                  trigger="click"
-                  v-model="editPopCabinetVisible"
-                  width="400"
-                >
-                  <div class="pop-window-assetType-content">
-                    <div class="pop-top-btns">
-                      <button type="button" @click="addNewData('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-normal">
-                        <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
-                      </button>
-                      <button type="button" @click="editPopoverClose('cabinet')" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square">
-                        <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
-                      </button>
-                    </div>
-                    <!--标题-->
-                    <div class="pop-title">{{$t('asset.createAssetTab.AddCabinetTab.title')}}</div>
-                    <!--表单内容-->
-                    <el-form class="pop-item-wider" :model="addCabinetData" ref="cabAddForm" :rules="cabRules">
-                      <el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.name')" prop="name">
-                        <el-input size="mini" v-model="addCabinetData.name"/>
-                      </el-form-item>
-                      <el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.uSize')" prop="uSize">
-                        <div>{{addCabinetData.uSize}}</div>
-                        <el-slider v-model.number="addCabinetData.uSize"></el-slider>
-                      </el-form-item>
-                      <el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.remark')">
-                        <el-input v-model="addCabinetData.remark"
-                                  type="textarea" size='mini'
-                                  :rows="1"/>
-                      </el-form-item>
-                      <el-form-item :label="this.$t('asset.editAssetTab.AddCabinetTab.DC')" prop="idcId">
-                        <el-select size='mini' v-model="addCabinetData.idcId" clearable style="width: 100%;" placeholder="">
-                          <el-option
-                            v-for="item in IDCOptionData"
-                            :key="item.key"
-                            :label="item.name"
-                            :value="item.id"
-                          >
-                            <span>{{ item.name }}</span>
-                            <!--<el-popover
-                              placement="left"
-                              v-model="item[item.id+item.name]"
-                            >
-                              <div class="pop-window-assetType-content">
-                                <div class="right-box-top-btns">
-                                  <div class="right-box-top-btn right-box-top-btn-full"
-                                       @click="item[item.id+item.name] = false">
-                                    <div class="right-box-btn-icon">
-                                      <i class="el-icon-close"></i>
-                                    </div>
-                                    <span>{{$t('overall.esc')}}</span>
-                                  </div>
-                                </div>
-                                <div class="pop-window">
-                                  <span style="display: block;padding-bottom: 20px">{{$t('asset.editAssetTab.editIdcTab.title')}}</span>
-                                  <el-form-item :label="$t('asset.editAssetTab.editIdcTab.dcName')">
-                                    <el-input v-model="addCabIDCData.name"/>
-                                  </el-form-item>
-                                  <el-form-item :label="$t('asset.editAssetTab.editIdcTab.location')">
-                                    <el-input v-model="addCabIDCData.location"/>
-                                  </el-form-item>
-                                  <el-form-item :label="$t('asset.editAssetTab.editIdcTab.principal')">
-                                    <el-select v-model="addCabIDCData.principal"
-                                               clearable>
-                                      <el-option
-                                        v-for="item in idcUserData"
-                                        :key="item.key"
-                                        :label="item.username"
-                                        :value="item.userId"
-                                      >
-                                      </el-option>
-                                    </el-select>
-                                  </el-form-item>
-                                  <el-form-item :label="$t('asset.editAssetTab.editIdcTab.tel')">
-                                    <el-input v-model="addCabIDCData.tel"/>
-                                  </el-form-item>
-                                </div>
-                              </div>
-                              <span class="config-dropdown-btn" slot="reference"
-                                    @click="getSingleIDCData(item.id,'edit',item)"><i
-                                class="el-icon-edit-outline"></i></span>
-                            </el-popover>
-                            <span class="config-dropdown-btn config-dropdown-btn-delete"
-                                  @click.stop="deleteData('idc',item.id)"><i
-                              class="el-icon-delete"></i></span>-->
-                          </el-option>
-                        </el-select>
-                      </el-form-item>
-                    </el-form>
-                  </div>
-                  <div slot="reference"><i class="el-icon-plus"></i></div>
-                </el-popover>
+                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>
               </div>
             </template>
             <span v-if="tabView">{{assetViewData.cabinetName}}</span>
@@ -637,7 +442,7 @@
           <!--cli-->
           <div class="asset-sub-title">{{$t('asset.createAssetTab.cli')}}</div>
           <div class="line-100 asset-line"></div>
-          <account-config-box v-for="(item,index) in assetData.accounts" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
+          <account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox"></account-config-box>
         </el-form>
       </el-scrollbar>
     </div>
@@ -1118,16 +923,7 @@
           })
         }
       },
-      uploadFile:function(file){
 
-      },
-      clearFile:function(){
-        if(this.$refs.upload){
-          this.$refs.upload.clearFiles();
-        }
-        this.uploadFileList=[];
-        this.assetData.accounts[0].privateKey='';
-      },
       addNewData(type) {
         if (type === 'IDC') {
           const h = this.$createElement;
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 0f81d2126..95b9424e5 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -33,7 +33,13 @@
                         </div>
                     </template>
                     <template slot-scope="scope" :column="item">
-                        <span v-if="item.prop == 'idc'" class="link">{{scope.row[item.prop].name}}</span>
+                      <idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox" :post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false" placement="left" @after="getIdcData" :button-class="'checkbox-edit'">
+                        <template v-slot:optionZone>
+                          <span  class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span>
+                        </template>
+                      </idc-config-box>
+
+
                         <span v-else-if="item.prop == 'type'">
                             {{scope.row[item.prop] == '1' ? 'Global' : ''}}
                             {{scope.row[item.prop] == '2' ? 'Per-Datacenter' : ''}}
@@ -466,6 +472,7 @@ export default {
       });
     },
     getTableData: function() {
+      this.tableData=[];
       this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
       this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
       this.$get('promServer', this.searchLabel).then(response => {
@@ -541,7 +548,6 @@ export default {
       } else {
         this.idcData.forEach(item => {
           if (item.id === data) {
-            console.log(item)
             this.popIdcData.name = item.name
             this.popIdcData.location = item.location
             this.popIdcData.principal = item.principal
@@ -576,6 +582,11 @@ export default {
           }
         })
     },
+    closeAllPop:function(){
+      this.$refs.idcConfigBox.forEach((item)=>{
+        item.show(false)
+      })
+    },
   },
   mounted: function() {
     this.getIdcData();
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 083af5676..4db10194c 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -26,9 +26,10 @@ import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endp
 import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
 import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
 import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
-import dcConfigBox from "./components/common/dcConfig"; //idc配置弹框组件
+import dcConfigBox from "./components/common/popBox/dcConfig"; //idc配置弹框组件
 import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
 import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
+import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -43,6 +44,7 @@ Vue.component("alert-config-box", alertConfigBox);
 Vue.component("idc-config-box", dcConfigBox);
 Vue.component("panel-box", panelBox);
 Vue.component("module-list-pop", moduleListPop);
+Vue.component("cabinet-config-box", cabinetConfigBox);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;