NEZ-351 perf: 滑框重构完成(alertmsg预览还有小bug)

nezha-fronted/src/assets/stylus/main.scss

@@ -641,6 +641,7 @@ li{
 .main-list {
   height: 100%;
   position: relative;
+  z-index: 0;
 }
 .main-list.main-list-with-sub {
   height: 50%;

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -117,7 +117,7 @@
                 ps._ps_ && ps._ps_.update();
               });
             }
-            vm.$refs.panelTab.$refs.dashboardScrollbar.update();
+            vm.$refs.panelTab && vm.$refs.panelTab.$refs.dashboardScrollbar.update();
             clearInterval(intervalFunc);
           }
         }, 500);

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -83,25 +83,12 @@
             <span style="padding-left: 18px;" v-if="scope.row[item.prop] == 'medium'">{{severityData[0].value}}</span>
             <span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
           </span>
-          <!--<div v-else-if="item.prop == 'linkObject'">
-            <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link too-long-split"
-                  @click="viewAlertType(scope.row['type'],scope.row[item.prop])" style="max-width: 125px;"
-                  :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].name}}</span>
-            <span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" :class="{'link': from == 'alertRule'}"
-                  @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)"
-                  :id="'link-obj-'+scope.row['type']+'-'+scope.row[item.prop].id">{{scope.row[item.prop].host}}</span>
-            <span v-else>-</span>
-          </div>-->
           <template v-else-if="item.prop == 'labels'">
             <nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
                           :cursor-point="false"
                           :key="item.label"
                           v-if="item.label != 'alertname' && item.label != 'severity'"
                           v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
-            <!--<el-tag v-if="key != 'alertname' && key != 'severity'"
-                    :key="key"
-                    type="info"
-                    size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{tagValue(key, value)}}</el-tag>-->
           </template>
           <div v-else-if="item.prop == 'state'">
             <span class="">
@@ -137,9 +124,6 @@
     </el-table>
     <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
 
-    <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
-    <module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
-    <asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-box>
     <element-set
       v-if="showElementSet"
       v-clickoutside="elementsetHide"
@@ -357,9 +341,6 @@
           }
         ],
         tableData: [],
-        viewProjectData: {id: '', name: '', remark: ''},
-        viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
-        viewAssetState: false,
       }
     },
     computed: {
@@ -682,30 +663,6 @@
         localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
         this.getAlertList();
       },
-      viewAlertType(type, typeObj) {
-        this.closeViews();
-        switch (type) {
-          case 1:
-            this.viewProjectData = JSON.parse(JSON.stringify(typeObj));
-            this.$refs.projectBox.show(true);
-            break;
-          case 2:
-            let tempObj = JSON.parse(typeObj.param)
-            this.$set(typeObj, 'paramObj', []);
-            for (let k in tempObj) {
-              typeObj.paramObj.push({key: k, value: tempObj[k]});
-            }
-            this.viewModuleData = JSON.parse(JSON.stringify(typeObj));
-
-            this.$refs.moduleBox.show(true);
-            break;
-          case 3:
-            this.viewAssetState = true;
-            this.$refs.assetEditUnit.getAssetData(typeObj);
-            this.$refs.assetEditUnit.tabView = true;
-            break;
-        }
-      },
       labelsClassName(row) {
         if (row.column.label == this.$t("alert.list.labels")) {
           return "alert-message-list-labels";
@@ -720,12 +677,7 @@
           }
         })
       },
-      closeViews: function () {
+      search(searchObj) {
-        this.$refs.projectBox.show(false, false);
-        this.$refs.moduleBox.show(false, false);
-        this.viewAssetState = false;
-      },
-      search: function (searchObj) {
         this.searchLabel = {};
         let orderBy='';
         if(this.searchLabel.orderBy){
@@ -747,17 +699,6 @@
         }
         this.getAlertList();
       },
-      closeSubList() {
-        this.$emit("closeSubList");
-        this.tableData = [];
-      },
-      //asset弹框控制
-      tabControl(data) {
-        if (data === 'close') {
-          this.viewAssetState = false
-          this.$refs['assetEditUnit'].tabView = false
-        }
-      },
       //是否需要排序
       sortableShow(prop){
         switch(prop){

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -10,7 +10,7 @@
         <div class="top-tool-search">
           <search-input :searchMsg="searchMsg" @search="search"></search-input>
         </div>
-        <button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
+        <button type="button" @click="add" :title="$t('overall.createCabinet')"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
@@ -36,8 +36,8 @@
       >
         <template slot-scope="scope" :column="item">
           <div v-if="item.prop == 'option'" class="content-right-options">
-            <span :title="$t('overall.edit')" @click="editCabinet(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
+            <span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
-            <span :title="$t('overall.delete')" @click="delCabinet(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+            <span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
           </div>
           <template v-else-if="item.prop == 'assetStat'">
             <el-popover
@@ -72,7 +72,9 @@
         </template>
       </el-table-column>
     </el-table>
-    <cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
+    <transition name="right-box">
+      <cabinet-box v-if="rightBox.show" :cabinet="cabinet" :current-dc="currentDc" ref="cabinetEditBox" @close="closeRightBox"></cabinet-box>
+    </transition>
     <button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
   </span>
 </template>
@@ -89,7 +91,8 @@
     },
     data() {
       return {
-        currentCabinet: {
+        cabinet: {},
+        blankCabinet: {
           id:'',
           idcId:'',
           name:'',
@@ -97,6 +100,7 @@
           seq:'',
           uSize:1
         },
+        rightBox: {show: false},
         showTopBtn: false, //top按钮是否显示
         loading: false,
         currentDc: {},
@@ -173,16 +177,24 @@
       changeTab(tab) {
         this.$emit('changeTab', tab);
       },
-      toAddCabinet:function(){
+      add() {
-        this.$refs.cabinetEditBox.show(true,true);
+        this.cabinet = this.newCabinet();
-        this.$refs.cabinetEditBox.reset();
+        this.rightBox.show = true;
       },
-      editCabinet(cabinet) {
+      closeRightBox(refresh) {
-        this.currentCabinet = JSON.parse(JSON.stringify(cabinet));
+        this.rightBox.show = false;
-        console.info(this.$refs.cabinetEditBox)
+        if (refresh) {
-        this.$refs.cabinetEditBox.show(true, true);
+          this.getTableData();
+        }
       },
-      getCabinetList() {
+      newCabinet() {
+        return JSON.parse(JSON.stringify(this.blankCabinet));
+      },
+      edit(cabinet) {
+        this.cabinet = JSON.parse(JSON.stringify(cabinet));
+        this.rightBox.show = true;
+      },
+      getTableData() {
         this.tableData = [];
         this.loading = true;
         this.$set(this.searchLabel, "pageNo", 1);
@@ -194,18 +206,14 @@
           }
         });
       },
-      search: function (searchObj) {
+      search(searchObj) {
         this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
         for (let item in searchObj) {
           if (searchObj[item]) {
             this.$set(this.searchLabel, item, searchObj[item]);
           }
         }
-        this.getCabinetList();
+        this.getTableData();
-      },
-      closeSubList() {
-        this.$emit("closeSubList");
-        this.tableData = [];
       },
       assetStatClassName(param) {
         if (param.column.label == this.$t("config.model.assets") || param.column.label == this.$t("alert.alert")) {
@@ -213,7 +221,7 @@
         }
         return "";
       },
-      delCabinet:function(cabinet){
+      del:function(cabinet){
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
@@ -222,7 +230,7 @@
           this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
             if(response.code ==  200){
               this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-              this.getCabinetList();
+              this.getTableData();
             }else{
               this.$message.error(response.msg);
             }
@@ -238,7 +246,7 @@
           if (n) {
             this.currentDc = JSON.parse(JSON.stringify(n));
             this.searchLabel = {idcId: this.currentDc.id};
-            this.getCabinetList();
+            this.getTableData();
           }
         }
       }

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -96,6 +96,7 @@
                :title="$t('project.endpoint.dialogTitle')"
                :visible.sync="graphShow"
                width="90%"
+               :modal-append-to-body="false"
                id="viewGraphDialog"
                @close="dialogClose">
       <div slot="title">
@@ -108,7 +109,7 @@
       <chart ref="endpointChart" :unit="chartUnit"></chart>
     </el-dialog>
     <transition name="right-box">
-      <chart-box v-if="rightBox.show" @close="rightBox.show = false" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
+      <chart-box v-if="rightBox.show" @close="rightBox.show = false" :chart="chart" ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData" :show-panel="{}"></chart-box>
     </transition>
   </span>
 </template>
@@ -137,6 +138,7 @@
     data() {
       let temp = this;
       return {
+        chart: {},
         tableShow: true,
         tableHover: false,
         dropdownShow: false,
@@ -168,7 +170,6 @@
       saveChart() { //新增chart
         this.rightBox.show = true;
         this.$nextTick(() => {
-          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
           let chart = {
             id:'',
             title: '',
@@ -176,9 +177,9 @@
             span:12,
             height:'400',
             unit: this.chartUnit,
-            param:{
+            param: {
               url:'',
-              threshold:'',
+              threshold: '',
             },
             elements:[],
             panel: '',
@@ -189,7 +190,7 @@
               chart.elements.push({chartId: "", expression: this.selectedEndpoints[i].element, type: 'expert'});
             }
           }
-          this.$refs.addChartModal.editData(chart);
+          this.chart = chart;
         });
       },
       dropdownHandler(show) {

nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue

@@ -242,18 +242,12 @@
         this.$refs.addEndpointBox.show(true);
         this.$refs.addEndpointBox.clearEndpoints();
       },
-      search: function (searchObj) {
+      search(searchObj) {
-        /*this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
+        let orderBy = '';
-        for (let item in searchObj) {
-          if (searchObj[item]) {
-            this.$set(this.searchLabel, item, searchObj[item]);
-          }
-        }*/
-        let orderBy='';
         if(this.searchLabel.orderBy){
           orderBy=this.searchLabel.orderBy
         }
-        this.searchLabel={};
+        this.searchLabel = {};
         this.pageObj.pageNo = 1;
         for (let item in searchObj) {
           if (searchObj[item]) {
@@ -265,10 +259,6 @@
         }
         this.getTableData();
       },
-      closeSubList() {
-        this.tableData = [];
-        this.$emit("closeSubList");
-      },
       elementsetShow(s, e) {
         var eventfixed = {
           shezhi: 0,

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -27,7 +27,7 @@
           </el-input>
         </div>
         <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" v-if="from=='asset'"></pick-time>
-        <button @click="toAddChart" :title="$t('overall.createChart')" v-if="from != 'alertRule' && from != 'endpoint'"
+        <button @click="addChart" :title="$t('overall.createChart')" v-if="from != 'alertRule' && from != 'endpoint'"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
@@ -49,7 +49,7 @@
         </div>
 
         <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
-        <button @click="toAddChart" :title="$t('overall.createChart')"
+        <button @click="addChart" :title="$t('overall.createChart')"
                 class="nz-btn nz-btn-size-normal nz-btn-style-light ">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
@@ -60,14 +60,14 @@
     <div class="table-list" id="tableList">
       <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
         <div class="box-content">
-          <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" :draggable="draggable" :detail="detail"
+          <chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" :draggable="draggable" :detail="detail"
                       ref="chartList" :is-model="from == 'model'" :additional-info="obj"></chart-list>
         </div>
       </el-scrollbar>
     </div>
     <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
     <transition name="right-box">
-      <chart-box @close="closeRightBox" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
+      <chart-box @close="closeRightBox" :chart="chart" v-if="rightBox.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
     </transition>
   </div>
 </template>
@@ -92,7 +92,6 @@
         visible: false,
         rightBox: { //面板弹出框相关
           show: false,
-          title: this.$t('dashboard.panel.createPanelTitle')
         },
         tableHover: false,
         searchTime: [
@@ -121,17 +120,21 @@
           id: '',
           name: ''
         },
-        chart: {
+        chart: {},
-          id: '',
+        blankChart: {
+          id:'',
           title: '',
-          type: 'line',
+          type:'line',
-          span: 12,
+          span:12,
-          height: 400,
+          height:'400',
-          elements: {
+          unit:2,
-            id: '',
+          param:{
-            expression: '',
+            url:'',
-            type: ''
+            threshold:'',
-          }
+          },
+          elements:[],
+          panel: '',
+          sync: 0
         },
         pageObj: {
           pageNo: 1,
@@ -161,7 +164,6 @@
           type: this.from,
           id: ''
         },
-        panelId: 0,
         //removeModal: false, // 删除弹出
         //deleteObj: {}, // 删除对象
         //---图表相关参数--end
@@ -182,15 +184,16 @@
         const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
         this.searchTime = [startTime, endTime];
       },
-      panelReloadForDel: function () {
+      panelReloadForDel() {
         this.getTableData(this.obj.id);
       },
       /*图表相关操作--start*/
-      toAddChart: function () {
+      addChart() {
+        this.chart = this.newChart();
         this.rightBox.show = true;
-        this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+      },
-        //this.$refs.addChartModal.show(true);
+      newChart() {
-        this.$refs.addChartModal.createData(this.panelId); //初始化创建图表需要的初始数据
+        return JSON.parse(JSON.stringify(this.blankChart));
       },
       // 切换tab
       changeTab(tab) {
@@ -223,21 +226,21 @@
         }, 100);
       },
       // 编辑图表信息,打开编辑弹窗
-      editData(data) {
+      editChart(data) {
+        if (!data.param) {
+          data.param = {url: '', threshold: '',};
+        }
+        this.chart = JSON.parse(JSON.stringify(data));
         this.rightBox.show = true;
-        this.$nextTick(() => {
-          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
-          this.$refs.addChartModal.editData(data, this.panelId);
-        });
       },
       // 移除图表:弹出确认框询问
-      removeData(data,from) {
+      delChart(data,from) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("panel/" + this.panelId + "/charts?ids=" + data.id).then(response => {
+          this.$delete("panel/" + this.showPanel.id + "/charts?ids=" + data.id).then(response => {
             if (response.code === 200) {
               this.$message({
                 duration: 2000,
@@ -288,7 +291,7 @@
         // this.searchTime = [...val];
         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.panelId;
+        this.filter.panelId = this.showPanel.id;
         this.getData(this.filter);
       },
       /*时间条件查询--end*/
@@ -301,7 +304,7 @@
             if (response.code === 200) {
               this.panelData = response.data.list;
               if (this.panelData.length > 0) {
-                this.panelId = this.filter.panelId = this.panelData[0].id;
+                this.showPanel.id = this.filter.panelId = this.panelData[0].id;
                 this.getData(this.filter);
               }
             }else {

nezha-fronted/src/components/common/header.vue

@@ -64,7 +64,7 @@
           <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
           <template v-else>
             <el-menu-item :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
-              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item.id)" >
+              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': activeIndex == 'asset' && activeItemIndex == item.id}">
                 <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
               </div>
             </el-menu-item>
@@ -80,7 +80,7 @@
           <el-menu-item v-if="projectData.length == 0" index="2-0"><div @click="createBox({type: 1})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
           <template v-else>
             <el-menu-item :index="'2-' + index" v-for="(item, index) in projectData" :key="index">
-              <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" >
+              <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': activeIndex == 'project' && activeItemIndex == item.id}">
                 <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
                 <div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i class="nz-icon nz-icon-edit"></i></div>
               </div>
@@ -150,12 +150,21 @@
       </el-submenu>
     </el-menu>
 
-    <project-box v-if="rightBox.project.show" :project="editProject" ref="projectBox"></project-box>
+    <transition name="right-box">
-    <module-box v-if="rightBox.module.show" :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
+      <project-box v-if="rightBox.project.show" :project="editProject" ref="projectBox" @close="closeProjectRightBox"></project-box>
-    <add-endpoint-box v-if="rightBox.endpoint.show" :currentProject="currentProject" :currentModule="currentModule" @reload=""
+    </transition>
-                      ref="addEndpointBox"></add-endpoint-box>
+    <transition name="right-box">
-    <asset-box v-if="rightBox.asset.show" :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" ref="assetAddUnit"></asset-box>
+      <module-box v-if="rightBox.module.show" :currentProject="currentProject" :module="editModule" @close="closeModuleRightBox" ref="moduleBox"></module-box>
-    <alert-config-box v-if="rightBox.alertRule.show" :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
+    </transition>
+    <transition name="right-box">
+      <add-endpoint-box v-if="rightBox.endpoint.show" :currentProject="currentProject" :currentModule="currentModule" @close="closeEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
+    </transition>
+    <transition name="right-box">
+      <asset-box v-if="rightBox.asset.show" :asset="editAsset" @close="closeAssetRightBox" ref="assetAddUnit"></asset-box>
+    </transition>
+    <transition name="right-box">
+      <alert-config-box v-if="rightBox.alertRule.show" :alert-rule="editAlertRule" @close="closeAlertRuleRightBox" ref="alertConfigBox"></alert-config-box>
+    </transition>
     <change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
   </div>
 </template>
@@ -170,6 +179,18 @@
     },
     data() {
       return {
+        username: sessionStorage.getItem("nz-username"),
+        language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
+
+        //顶部菜单相关
+        activeIndex: '',
+        activeItemIndex: '',
+        activeItemIndexes: [],
+        hoverItemIndex: '',
+
+        assetData: [], //顶部菜单asset的下拉内容
+
+        //add侧滑相关
         rightBox: {
           project: {show: false},
           module: {show: false},
@@ -177,13 +198,6 @@
           asset: {show: false},
           alertRule: {show: false},
         },
-        username: sessionStorage.getItem("nz-username"),
-        language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
-        assetData: [],
-        activeIndex:'',
-        activeItemIndex:'',
-        activeItemIndexes: [],
-        hoverItemIndex: '',
         projectData: [], //顶部菜单project列表中的数据
         editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
         currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
@@ -201,12 +215,28 @@
           moduleId: '',
           assetId: ''
         },
-        alertRule: {
+        editAsset: {
-          id: null,
+          id: '',
+          sn: '',
+          host: '',
+          state: '',
+          purchaseDate: '',
+          idcId: '',
+          cabinetId: '',
+          modelId: '',
+          model: {type: {code: ""}},
+          assetType: '',
+          impi:{
+            host:'',
+            port:'',
+          },
+          tags: [],
+          accounts: [],
+        },
+        editAlertRule: {
+          id: "",
           alertName: '',
           type: '',
-          linkObject: {id: '', name: ''},
-          linkId: '',
           expr: '',
           last: '',
           severity: '',
@@ -241,17 +271,6 @@
             type: 5
           },
         ],
-        addIdcData: {
-          id: '',
-          name: '',
-          location: '',
-          principal: '',
-          tel: ''
-        },
-        IDCOptionData: [],
-        addUnitShow: false,
-        assetBoxShow: false,
-        userDatas:[],
         showChangePwd:false,
       }
     },
@@ -272,7 +291,11 @@
         });
         this.activeIndex = data;
       },
-
+      getLinkData(){
+        this.$get('link').then(response=>{
+          this.$store.commit('setLinkData', response.data);
+        });
+      },
       createBox(item) {
         if (item.type == 1) {
           this.rightBox.project.show = true;
@@ -305,82 +328,24 @@
             context_name: ''
           };
         } else if (item.type == 3) {
-          this.$refs.addEndpointBox.show(true);
+          this.rightBox.endpoint.show = true;
-          this.$refs.addEndpointBox.clearEndpoints();
-        } else if (item.type == 5) {
-          this.$refs.alertConfigBox.show(true, true);
         } else if (item.type == 4) {
-          this.assetBoxShow = true;
+          this.rightBox.asset.show = true;
-          this.$nextTick(() => {
+        } else if (item.type == 5) {
-            this.addUnitShow = true;
+          this.rightBox.alertRule.show = true;
-            this.$refs.assetAddUnit.resetAsset();
-          });
         }
       },
-      jumpToAsset(id) {
+      jumpToAsset(asset) {
-        let index = this.indOf(this.activeItemIndexes, id);
+        this.activeItemIndex = asset.id;
-        this.activeItemIndexes=[];//2020-02-25 修改为单选
+        this.$store.commit('currentAssetChange', asset);
-        this.activeItemIndexes.push(id);
-        this.$store.state.assetData = {selectedData: this.activeItemIndexes, step: this.$store.state.assetData.step+1, type: 1};
         this.jumpTo('asset');
       },
       jumpToProject(p) {
         this.currentProject = p;
-        this.$store.commit('setProject', p);
+        this.$store.commit('currentProjectChange', p);
         this.activeItemIndex = p.id;
         this.jumpTo('project');
       },
-      getIDCOptionData(data) {
-        this.$get('idc?id=' + data).then(response => {
-          if (response.code === 200) {
-            this.addIdcData = response.data.list[0];
-            this.clickFlush(this.addIdcData)
-          }
-        })
-      },
-      editData(data, Id) {
-        let idcData = {
-          id: '',
-          name: '',
-          location: '',
-          principal: '',
-          tel: ''
-        }
-        if (data === 'idc') {
-          idcData.id = Id
-          idcData.name = this.addIdcData.name
-          idcData.location = this.addIdcData.location
-          idcData.principal = this.addIdcData.principal
-          idcData.tel = this.addIdcData.tel
-        }
-        this.$put(data, idcData).then(res => {
-          const h = this.$createElement;
-          if (res.code === 200) {
-            this.$notify({
-              message: h('i', {style: 'color: teal'}, '修改成功'),
-              duration: 2000
-            })
-            this.$store.state.flushDataSign = true
-          } else {
-            this.$notify({
-              message: h('i', {style: 'color: teal'}, res.msg),
-              duration: 2000
-            })
-          }
-        })
-      },
-      clickFlush(itemData) {
-        for (let i = 0; i < this.assetData.length; i++) {
-          const element = this.assetData[i];
-          if (element.id === itemData.id) {
-            setTimeout(() => {
-              element[element.name] = true;
-            }, 100)
-          } else {
-            element[element.name] = false
-          }
-        }
-      },
       getAssetData() {
         this.$get('idc', {pageSize:-1}).then(response => {
           if (response.code == 200) {
@@ -398,11 +363,6 @@
           window.location.reload();
         }
       },
-      closeAllPop:function(){
-        this.$refs.idcConfigBox.forEach((item)=>{
-          item.show(false)
-        })
-      },
       getProjectList() {
         this.$get('project', {pageSize:-1}).then(response => {
           if (response.code == 200) {
@@ -418,38 +378,49 @@
             if (!flag && this.projectData.length > 0) {
               this.currentProject = this.projectData[0];
               this.activeItemIndex = this.currentProject.id;
-              this.$store.commit('setProject', this.currentProject);
+              this.$store.commit('currentProjectChange', this.currentProject);
             }
           }
         })
       },
+      closeProjectRightBox(refresh) {
+        this.rightBox.project.show = false;
+        if (refresh) {
+          this.$store.commit("projectListChange");
+        }
+      },
+      closeModuleRightBox(refresh) {
+        this.rightBox.module.show = false;
+        if (refresh) {
+          this.$store.commit("moduleListChange");
+        }
+      },
+      closeEndpointRightBox(refresh) {
+        this.rightBox.endpoint.show = false;
+        if (refresh) {
+          this.$store.commit("endpointListChange");
+        }
+      },
+      closeAssetRightBox(refresh) {
+        this.rightBox.asset.show = false;
+        if (refresh) {
+          this.$store.commit("assetListChange");
+        }
+      },
+      closeAlertRuleRightBox(refresh) {
+        this.rightBox.alertRule.show = false;
+        if (refresh) {
+          this.$store.commit("alertConfigListChange");
+        }
+      },
       toEditProject(p) {
         this.editProject = Object.assign({}, p);
         this.rightBox.project.show = true;
       },
-      indOf(a, b) {
-        let c = [];
-        for (let i = 0; i < a.length; i++) {
-          c.push(a[i]);
-        }
-        return c.indexOf(b);
-      },
-      panelListReload(){
-        if(this.$route.path==='/panel'){
-          this.$store.commit('panelListChange',true);//新增panel之后,且当前页面为panel页面，则更新panel列表
-        }
-      },
       logout() {
         this.$get('logout');
         this.jumpTo('login');
       },
-      getUserData() {
-        this.$get('sys/user/list').then(response => {
-          if (response.code === 200) {
-            this.userDatas = response.data.list
-          }
-        })
-      },
       refreshLang() {
         this.language = localStorage.getItem("nz-language");
         this.$i18n.locale = this.language;
@@ -457,30 +428,18 @@
           window.location.reload();
         });
       },
-      showPwdDialog:function(){
+      showPwdDialog() {
-        this.showChangePwd=true;
+        this.showChangePwd = true;
       },
-      dialogClosed:function(){
+      dialogClosed() {
-        this.showChangePwd=false;
+        this.showChangePwd = false;
       },
-      cancel: function() {
+      cancel() {
         this.activeIndex = this.$route.path.slice(1, this.$route.path.length);
-        console.info(this.activeIndex)
-        //this.$router.go(-1);
-      },
-      getLinkData(){
-        //console.log('aaa');
-        this.$get('link').then(response=>{
-          //console.log(response);
-          // this.linkData=response.data;
-          this.$store.commit('setLinkData',response.data);
-          //console.log(this.$store)
-        });
       },
     },
     mounted() {
       this.$i18n.locale = this.language;
-      this.getUserData();
       this.getAssetData();
       this.getProjectList();
       this.getLinkData();
@@ -499,47 +458,37 @@
       if (window.history && window.history.pushState) {
         history.pushState(null, null, document.URL);
         window.addEventListener('popstate', this.cancel, false);
-      };
+      }
     },
     computed: {
-      projectListReloadWatch() {
+      projectListChange() {
         return this.$store.state.projectListChange;
       },
-      getIdcData() {
+      dcListChange() {
-        return this.$store.state.assetDcList;
+        return this.$store.state.dcListChange;
       },
-      getAssetDcData() {
+      currentProjectChange(){
-        return this.$store.state.assetData;
-      },
-      currentProjectWatch(){
         return this.$store.state.currentProject;
       },
       linkData(){
-        return this.$store.getters.getlinkData
+        return this.$store.getters.getLinkData;
       }
     },
     watch: {
-      getAssetDcData: {
+      projectListChange(n) {
-        handler(newVal) {
-          if (newVal.type == 0) {
-            this.activeItemIndexes = newVal.selectedData;
-          }
-        },
-        deep: true,
-        immediate: true
-      },
-      getIdcData: {
-        handler(newVal, oldVal) {
-          this.getAssetData()
-        },
-        deep: true,
-      },
-      projectListReloadWatch(n, o) {
         this.getProjectList();
       },
-      currentProjectWatch(n,o){
+      dcListChange(n) {
-        this.currentProject=n;
+        console.info(n)
-        this.activeItemIndex=n.id;
+        this.getAssetData();
+      },
+      currentProjectChange(n, o) {
+        if (n.id != this.currentProject.id) {
+          this.currentProject = this.projectData.find(p => {
+            return p.id == n.id;
+          });
+          this.activeItemIndex = n.id;
+        }
       },
     },
     destroyed() {

nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="right-box right-box-alert-config" v-clickoutside="clickOutside" v-if="rightBox.show">
+  <div class="right-box right-box-alert-config" v-clickoutside="clickOutside">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns">
-      <button type="button" v-if="editAlertRule&&editAlertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
+      <button type="button" v-if="alertRule.id" id="alert-box-del" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
         <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>
@@ -121,9 +121,6 @@
     },
     data() {
       return {
-        rightBox:{
-          show:false
-        },
         promqlCount: 1,
         promqlKeys: [0],
         expressions: [''],
@@ -217,16 +214,11 @@
       }
     },
     methods: {
-      show:function(){
-        this.rightBox.show=true;
-      },
       clickOutside() {
         this.esc(false);
-        this.rightBox.show=false;
       },
       esc(refresh) {
         this.$emit("close", refresh);
-        this.rightBox.show=false;
       },
       save() {
         this.editAlertRule.expr = this.expressions[0];
@@ -287,10 +279,10 @@
     watch: {
       alertRule: {
         deep: true,
+        immediate: true,
         handler(n, o) {
-          console.info(n)
           this.editAlertRule = JSON.parse(JSON.stringify(n));
-          if (this.editAlertRule&&this.editAlertRule.id) {
+          if (this.editAlertRule.id) {
             this.expressions = [this.editAlertRule.expr];
             this.$nextTick(() => {
               this.expressions.forEach((ex, index) => {

nezha-fronted/src/components/common/rightBox/assetBox.vue

@@ -259,14 +259,23 @@
         deep: true,
         immediate: true,
         handler(n) {
+          //console.info(n);
           this.editAsset = JSON.parse(JSON.stringify(n));
           if (!this.editAsset.accounts) {
             this.$set(this.editAsset, "accounts", []);
           } else {
             this.editAsset.accounts.length > 0 && (this.accountType = this.editAsset.accounts[0].protocol);
           }
-          console.info(n)
+          this.$set(this.editAsset, "modelId", n.model.id);
+          let initLocationData={
+            idc: n.idc,
+            cabinet: n.cabinet,
+            u: [n.cabinetStart, n.cabinetEnd]
+          };
+          this.$nextTick(() => {
+            this.$refs.locationCascader.initComponet(initLocationData);
             this.getVendorAndModelOptionData(n.model.type.code);
+          });
         }
       },
       'editAsset.accounts': {

nezha-fronted/src/components/common/rightBox/cabinetBox.vue

@@ -1,41 +1,32 @@
 <template>
-  <transition name="right-box">
+  <div class="right-box right-box-cabinet" v-clickoutside="clickOutside">
-    <div class="right-box right-box-cabinet" v-if="rightBox.show" v-clickoutside="esc">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns">
-        <button id="cab-del" type="button" v-if="curCabinet.id != '' && rightBox.isEdit" @click="delCabinet" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+      <button id="cab-del" type="button" v-if="!editCabinet.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
         <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>
-        <button v-if="!rightBox.isEdit" id="cab-save" type="button" @click="" 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="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
     </div>
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
+    <div class="right-box-title">{{editCabinet.id ? $t("asset.editCabinet") + " ID: " + editCabinet.id : $t("overall.createCabinet")}}</div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="cabinet" ref="cabinetForm" :rules="rules">
+      <el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="editCabinet" ref="cabinetForm" :rules="rules">
-          <el-form-item :label="$t('asset.name')" prop="name">
+        <el-form-item :label="$t('overall.name')" prop="name">
-            <el-input size='mini' v-model="cabinet.name" v-if="rightBox.isEdit"/>
+          <el-input size='mini' v-model="editCabinet.name"/>
-            <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.name}}</div>
         </el-form-item>
-          <el-form-item :label="$t('asset.DC')" prop="idcId">
+        <el-form-item :label="$t('config.dc.dc')" prop="idcId">
-            <el-input size='mini' v-model="curIdc.name" v-if="rightBox.isEdit" disabled/>
+          <el-input size='mini' v-model="currentDc.name" disabled/>
-            <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{idc?idc.name:''}}</div>
         </el-form-item>
         <el-form-item :label="$t('asset.uSize')" prop="uSize">
-            <el-input v-model.number="cabinet.uSize" :max="47" ></el-input>
+          <el-input v-model.number="editCabinet.uSize" :max="47" ></el-input>
-<!--            <el-slider v-model.number="cabinet.uSize" :max="47" v-if="rightBox.isEdit"></el-slider>-->
         </el-form-item>
         <el-form-item :label="$t('config.dc.remark')">
-            <el-input size='mini' v-model="cabinet.remark" type="textarea" :rows="2" v-if="rightBox.isEdit"/>
+          <el-input size='mini' v-model="editCabinet.remark" type="textarea" :rows="2"/>
-            <div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{cabinet.remark}}</div>
         </el-form-item>
       </el-form>
     </el-scrollbar>
@@ -45,33 +36,23 @@
       <button @click="esc" id="cab-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="saveOrEdit" id="cab-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+      <button @click="save" id="cab-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>
-  </transition>
 </template>
 
 <script>
     export default {
       name: "cabinetBox",
       props:{
-        curCabinet:{type:Object},
+        cabinet: {type:Object},
-        curIdc:{type:Object}
+        currentDc: {type:Object}
       },
       data(){
         return {
-          rightBox:{show:false,title:'',isEdit:true},
+          editCabinet:{},
-          cabinet:{
-            id:'',
-            idcId:'',
-            name:'',
-            remark:'',
-            seq:'',
-            uSize:1
-          },
           rules:{
             name: [
               {required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -83,78 +64,33 @@
           },
         }
       },
-      created() {
-        this.getIdcDatas();
-      },
       methods:{
-        reset:function(){
+        clickOutside() {
-          this.cabinet={
+          this.esc(false);
-              id:null,
-              idcId:this.curIdc.id,
-              name:'',
-              remark:'',
-              seq:'',
-              uSize:1
-          };
         },
-        show(show, isEdit) {
+        esc(refresh) {
-          this.rightBox.show = show;
+          this.$emit("close", refresh);
-          this.rightBox.isEdit = isEdit;
         },
-        getIdcDatas:function(){
+        save() {
-          let temp=this;
+          this.$refs.cabinetForm.validate((valid => {
-          if(temp.postIdcDatas&&temp.postIdcDatas.length>0){
-            temp.idcDatas=temp.postIdcDatas;
-            for (let i in temp.idcDatas){
-              let item=temp.idcDatas[i];
-              if(item.id==temp.cabinet.idcId){
-                temp.idc=item;
-                break;
-              }
-            }
-            return;
-          }
-          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;
-                }
-              }
-            }
-          })
-        },
-        esc() {
-          this.rightBox.show = false;
-        },
-        saveOrEdit:function(){
-          let temp=this;
-          temp.$refs.cabinetForm.validate((valid => {
             if(valid){
-              temp.cabinet.idcId=temp.curIdc.id;
+              this.editCabinet.idcId = this.currentDc.id;
-              if (temp.cabinet.id) {
+              if (this.editCabinet.id) {
-                this.$put('cabinet', temp.cabinet).then(res => {
+                this.$put('cabinet', this.editCabinet).then(res => {
-                  const h = temp.$createElement;
                   if (res.code === 200) {
-                    temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    temp.$emit("after",temp.cabinet.idcId);
+                    this.esc(true);
-                    temp.esc();
                   } else {
-                    temp.$message.error(res.msg);
+                    this.$message.error(res.msg);
                   }
                 })
               } else {
-                temp.$post('cabinet', temp.cabinet).then(res => {
+                this.$post('cabinet', this.editCabinet).then(res => {
-                  const h = temp.$createElement;
                   if (res.code === 200) {
-                    temp.$message({duration: 2000, type: 'success', message: temp.$t("tip.saveSuccess")});
+                    this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                    temp.$emit("after",temp.cabinet.idcId);
+                    this.esc(true);
-                    temp.esc();
                   } else {
-                    temp.$message.error(res.msg);
+                    this.$message.error(res.msg);
                   }
                 })
               }
@@ -163,18 +99,16 @@
             }
           }))
         },
-        delCabinet:function(){
+        del() {
-          let temp=this;
           this.$confirm(this.$t("tip.confirmDelete"), {
             confirmButtonText: this.$t("tip.yes"),
             cancelButtonText: this.$t("tip.no"),
             type: 'warning'
           }).then(() => {
-            this.$delete('/cabinet?ids='+temp.cabinet.id).then(response=>{
+            this.$delete('/cabinet?ids=' + this.editCabinet.id).then(response=>{
               if(response.code ==  200){
-                this.esc();
                 this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
-                this.$emit('after',this.cabinet.idcId)
+                this.esc(true);
               }else{
                 this.$message.error(response.msg);
               }
@@ -183,22 +117,15 @@
         }
       },
       watch:{
-        curCabinet:{
-          deep:true,
-          immediate:true,
-          handler:function(n,o){
-            if (n) {
-              this.cabinet=JSON.parse(JSON.stringify(n));
-            }
-          }
-        },
         cabinet:{
           deep:true,
           immediate:true,
           handler:function(n,o){
-            this.rightBox.title = n && n.id ? this.$t('asset.title') + "  ID：" + n.id : this.$t('asset.cabinet');
+            if (n) {
+              this.editCabinet = JSON.parse(JSON.stringify(n));
             }
           }
+        },
       }
     }
 </script>

nezha-fronted/src/components/common/rightBox/projectBox.vue

@@ -1,31 +1,24 @@
 <template>
-  <transition name="right-box">
+  <div class="right-box right-box-project" v-clickoutside="clickOutside">
-    <div class="right-box right-box-project" v-if="rightBox.show" v-clickoutside="clickos">
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns">
-        <button id="project-del" type="button" v-if="project.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
+      <button id="project-del" type="button" v-if="!project.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
         <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>
-        <button v-if="!rightBox.isEdit && project.buildIn != 1" id="project-edit" type="button" @click="saveOrToEdit" 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="nz-icon nz-icon-edit"></i></span>
-          <span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
-        </button>
     </div>
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
+    <div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + "  ID：" + editProject.id : $t("overall.createProject")}}</div>
     <!-- end--标题-->
     <el-scrollbar class="right-box-form-box">
-        <el-form class="right-box-form right-box-form-left" :model="project" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
+      <el-form class="right-box-form right-box-form-left" :model="editProject" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
         <el-form-item :label='$t("project.project.projectName")' prop="name">
-            <el-input v-if="rightBox.isEdit" size="mini" maxlength="64" show-word-limit v-model="project.name"></el-input>
+          <el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{project.name}}</div>
         </el-form-item>
         <el-form-item :label='$t("project.project.description")'>
-            <el-input v-if="rightBox.isEdit" size="mini" type="textarea" maxlength="1024" show-word-limit v-model="project.remark"></el-input>
+          <el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{project.remark}}</div>
         </el-form-item>
       </el-form>
     </el-scrollbar>
@@ -35,12 +28,11 @@
       <button @click="esc" id="project-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-        <button v-if="rightBox.isEdit" @click="saveOrToEdit" id="project-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+      <button @click="save" id="project-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>
-  </transition>
 </template>
 <script>
   import {noSpecialChar} from '../../common/js/validate';
@@ -57,6 +49,7 @@
           isCreate: false,
           isEdit:false
         },
+        editProject: {},
         rules: {
           name: [
             {required: true, message: this.$t('validate.required'), trigger: 'blur'},
@@ -66,42 +59,36 @@
       }
     },
     methods: {
-      show(show,isEdit) {
+      clickOutside() {
-        this.rightBox.show = show;
+        this.esc(false);
-        this.rightBox.isEdit=isEdit;
-      },
-
-      clickos() {
-        this.esc();
       },
 
       /*关闭弹框*/
-      esc() {
+      esc(refresh) {
-        this.rightBox.show = false;
+        this.$emit("close", refresh);
       },
 
       /*保存*/
       save() {
         this.$refs['projectForm'].validate((valid) => {
           if (valid) {
-            if (this.project.id) {
+            if (this.editProject.id) {
-              this.$put('project', this.project).then(response => {
+              this.$put('project', this.editProject).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
-                  this.rightBox.show = false;
                   this.$store.commit('projectListChange');
                   this.$store.commit('setProject', this.project);
-                  this.$emit('reload');
+                  this.esc(true);
                 } else {
                   this.$message.error(response.msg);
                 }
               });
             } else {
-              this.$post('project', this.project).then(response => {
+              this.$post('project', this.editProject).then(response => {
                 if (response.code === 200) {
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
                   this.$store.commit('projectListChange');
-                  this.rightBox.show = false;
+                  this.esc(true);
                 } else {
                   this.$message.error(response.msg);
                 }
@@ -113,14 +100,6 @@
           }
         });
       },
-      saveOrToEdit: function() {
-        if (!this.rightBox.isEdit) {
-          this.rightBox.isEdit = true;
-          this.rightBox.title = this.$t("project.project.editProject") + "  ID：" + this.project.id;
-        } else {
-          this.save();
-        }
-      },
       /*删除*/
       del() {
         this.$confirm(this.$t("tip.confirmDelete"), {
@@ -128,11 +107,11 @@
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("project?ids=" + this.project.id).then(response => {
+          this.$delete("project?ids=" + this.editProject.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.rightBox.show = false;
               this.$store.commit('projectListChange');
+              this.esc(true);
             } else {
               this.$message.error(response.msg);
             }
@@ -144,11 +123,7 @@
       project: {
         immediate: true,
         handler(n, o) {
-          if (n && n.id) {
+          this.editProject = JSON.parse(JSON.stringify(n));
-            this.rightBox.title =this.rightBox.isEdit? this.$t("project.project.editProject") + "  ID：" + n.id : this.$t("project.project.project") + "  ID：" + n.id;
-          } else {
-            this.rightBox.title = this.$t("project.project.createProject");
-          }
         }
       }
     }

nezha-fronted/src/components/page/alert/config.vue

@@ -53,9 +53,9 @@
               :label="item.label"
               show-overflow-tooltip
               min-width="110px"
+              :sort-orders="['ascending', 'descending']"
               :sortable="sortableShow(item.prop)"
               :prop="propTitle(item.prop)"
-            :sort-orders="['ascending', 'descending']"
             >
               <template slot-scope="scope" :column="item">
                 <div v-if="item.prop == 'option'" class="content-right-options">
@@ -103,7 +103,7 @@
       </div>
     </left-menu>
     <transition name="right-box">
-      <alert-config-box  :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
+      <alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
     </transition>
     <element-set
       v-if="tools.showElementSet"
@@ -124,6 +124,10 @@
     name: "alert-config",
     data() {
       return {
+        //侧滑
+        rightBox: {
+          show: false,
+        },
         /*二级页面相关*/
         bottomBox: {
           ruleDetail: {},
@@ -329,9 +333,10 @@
       },
       edit(u) {
         this.alertRule = JSON.parse(JSON.stringify(u));
-        this.$refs.alertConfigBox.show();
+        this.rightBox.show = true;
       },
       closeRightBox(refresh) {
+        this.rightBox.show = false;
         if (refresh) {
           this.getTableData();
         }
@@ -362,7 +367,7 @@
       },
       add() {
         this.alertRule = this.newAlertRule();
-        this.$refs.alertConfigBox.show();
+        this.rightBox.show = true;
       },
       newAlertRule() {
         return JSON.parse(JSON.stringify(this.blankAlertRule));
@@ -556,7 +561,15 @@
         this.getTableData();
       },
     },
+    computed: {
+      alertConfigListChange() {
+        return this.$store.state.alertConfigListChange;
+      },
+    },
     watch: {
+      alertConfigListChange(n) {
+        this.getTableData();
+      },
       'bottomBox.showSubList': function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);

nezha-fronted/src/components/page/asset/asset.vue

@@ -443,34 +443,19 @@
       }
     },
     computed: {
-      getData() {
+      assetListChange() {
-        return this.$store.state.assetData
+        return this.$store.state.assetListChange;
+      },
+      currentAssetChange() {
+        return this.$store.state.currentAsset;
       },
-      getFlushData() {
-        return this.$store.state.flushDataSign
-      }
     },
     watch: {
-      getData: {
+      assetListChange(n) {
-        handler(newVal) {
+        this.getTableData();
-          if (newVal.type == 1) {
-            this.activeType = 'dataCenter';
-            this.checkList = newVal.selectedData;
-            this.assetClick = false;
-          }
       },
-        immediate: true,
+      currentAssetChange(n) {
-        deep: true,
+        this.dcCheckList = [n.id];
-      },
-      getFlushData: {
-        handler(newVal, oldVal) {
-          if (newVal === true) {
-            this.getDcData();
-            this.getTableData()
-            /*this.getLeftMenuList();
-            this.getAssetData()*/
-          }
-        }
       },
       dcCheckList(n, o) {
         setTimeout(()=>{
@@ -526,6 +511,17 @@
           }
         }
       },
+      indOf(a, b) {
+        let c = [];
+        for (let i = 0; i < a.length; i++) {
+          c.push(a[i]);
+        }
+        if (c.indexOf(b) > -1) {
+          return true;
+        } else {
+          return false;
+        }
+      },
       elementsetShow(s, e) {
         this.tools.showElementSet = true;
         this.$nextTick(() => {

nezha-fronted/src/components/page/config/dc.vue

@@ -133,7 +133,7 @@
         </div>
       </div>
       <transition name="el-zoom-in-bottom">
-        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-bab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
+        <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :obj="bottomBox.dc" :is-full-screen="bottomBox.isFullScreen" :from="'dc'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.dcDetail"
                      @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
       </transition>
     </div>
@@ -351,7 +351,9 @@
         this.$bottomBoxWindow.listResize(vm, e);
       },
       convertToDetail(obj) {
-        let detail = [];
+        let detail = JSON.parse(JSON.stringify(obj));
+        return detail;
+        /*let detail = [];
         detail.push({label: this.$t("overall.name"), value: obj.name});
         detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
         detail.push({label: this.$t("asset.location"), value: obj.location});
@@ -367,7 +369,7 @@
           }
         }
         detail.push({label: this.$t("asset.principal"), value: principal});
-        return detail;
+        return detail;*/
       },
       add() {
         this.dc = this.newDc();
@@ -380,6 +382,7 @@
         this.rightBox.dc.show = false;
         if (refresh) {
           this.getTableData();
+          this.$store.commit("dcListChange");
         }
       },
       closeTrafficBox(refresh) {
@@ -398,6 +401,7 @@
             if (response.code === 200) {
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
               this.getTableData();
+              this.$store.commit("dcListChange");
             } else {
               this.$message.error(response.msg);
             }

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -53,13 +53,14 @@
   }
 </style>
 <template key="chartBox">
-  <div v-clickoutside="clickOutside">
+  <div v-clickoutside="clickOutside" class="right-box right-box-add-chart z-top right-box-chart">
+    <transition name="right-box">
       <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
+    </transition>
 
-    <div class="right-box right-box-add-chart z-top right-box-chart">
     <!-- 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">
+      <button id="chart-box-delete" type="button" v-if="editChart.id" @click="del" 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>
@@ -67,45 +68,28 @@
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-      <div class="right-box-title">{{rightBox.title}}</div>
+    <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
     <el-scrollbar class="right-box-form-box" ref="scrollbar">
-        <el-form class="right-box-form  right-box-form-left" :model="chart" label-width="120px" label-position="right"  :rules="rules" ref="chartForm">
+      <el-form class="right-box-form  right-box-form-left" :model="editChart" label-width="120px" label-position="right" :rules="rules" ref="chartForm">
-          <el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="!showPanel.type">
+        <!--<el-form-item :label="$t('dashboard.panel.title')" prop="panel" v-if="!showPanel.type">
           <el-autocomplete
             :fetch-suggestions="panelSuggestion"
             v-model.trim="panelName2"
             placeholder=""
             size="small"
             value-key="name"
-              v-if="!chart.id"
+            v-if="!editChart.id"
             popper-class="chart-box-autocomplete no-style-class"
           >
           </el-autocomplete>
-            <el-input size="small" v-if="chart.id" readonly="readonly" :value="panelName2"></el-input>
+          <el-input size="small" v-if="editChart.id" readonly="readonly" :value="panelName2"></el-input>
-            <!--<el-select 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>
 
-            <div class="right-box-row-btn" v-if="rightBox.show" @click="toAddPanel">
+        </el-form-item>-->
-              <i class="el-icon-plus" id="chart-box-panel-plus"></i>
-            </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-input size="small" maxlength="64" show-word-limit v-model="editChart.title"></el-input>
         </el-form-item>
 
         <div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
@@ -113,7 +97,7 @@
 
         <!-- type unit start-->
         <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="type" class="half-form-item">
-            <el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-small" v-model="chart.type" placeholder="" size="mini">
+          <el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-small" v-model="editChart.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>
@@ -125,7 +109,7 @@
                        :options="unitOptions"
                        :props="{ expandTrigger: 'hover',emitPath:false }"
                        :show-all-levels="false"
-                         v-model="chart.unit"
+                       v-model="editChart.unit"
                        @change="unitSelected"
           >
           </el-cascader>
@@ -142,7 +126,7 @@
 
         <el-form-item :label="$t('dashboard.panel.chartForm.high')" prop="hight"  class="half-form-item" style="width: 415px;">
           <el-autocomplete
-              v-model="chart.height"
+            v-model="editChart.height"
             :fetch-suggestions="querySearch"
             placeholder=""
             size="mini"
@@ -161,11 +145,11 @@
         </el-form-item>
 
         <el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }">
-            <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="chart.param.url"></el-input>
+          <el-input size="small" type="textarea" maxlength="1024" show-word-limit v-model="editChart.param.url"></el-input>
         </el-form-item>
 
-          <el-form-item v-if="chart.type == 'line' || chart.type == 'bar' || chart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold"  class="half-form-item">
+        <el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' prop="param.threshold"  class="half-form-item">
-            <el-input size="mini" type="input"  v-model="chart.param.threshold"></el-input>
+          <el-input size="mini" type="input" v-model="editChart.param.threshold"></el-input>
         </el-form-item>
 
         <div v-if="!isUrl&&!isAlert" class="right-box-sub-title">
@@ -180,16 +164,6 @@
         </el-row>
 
         <el-row v-if="!isUrl &&!isAlert" class="element-item" style="" v-for="index of promqlKeys.length" :key="'ele' + index">
-            <!--<chart-metric ref="chartTag"
-                          :pointer="index"
-                          :metric-list="metricList"
-                          :metricCascaderList="metricCascaderList"
-                          :metricAllData="metricAllData"
-                          :count-total="elements.length"
-                          @on-delete-target="deleteTarget"
-                          @sub-save-ok="subOk"
-                          @on-add-target-success="getTarget"
-            ></chart-metric>-->
           <promql-input
             :ref="'promql-'+(index-1)"
             :id="promqlKeys[index-1]"
@@ -202,7 +176,7 @@
             @removeExpression="removeExpression"
           ></promql-input>
           <el-row>
-              <template v-if="chart.type != 'singleStat'">
+            <template v-if="editChart.type != 'singleStat'">
               <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
                 {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                 <el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">
@@ -242,7 +216,6 @@
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
-    </div>
     <!--preview -->
     <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
   </div>
@@ -262,17 +235,19 @@
         resetZIndex(e);
       }
     }
-  }
+  };
   export default {
     name: "chartBox",
     props: {
       panelData: Array,
-      showPanel: Object
+      showPanel: Object,
+      chart: Object
     },
     mixins: [rz],
     data() {
       return {
-        rightBox: {title: ""},
+        editChart: {},
+
         statisticsList:[
           {
             id:"min",
@@ -307,6 +282,7 @@
             name:this.$t("dashboard.panel.chartForm.statisticsVal.different")
           },
         ],
+
         promqlCount: 1,
         promqlKeys: [],
         elementIds: [],
@@ -315,21 +291,6 @@
         statistics: "",
 
         editInfo: {},
-        chart: {
-          id:'',
-          title: '',
-          type:'line',
-          span:12,
-          height:'400',
-          unit:2,
-          param:{
-            url:'',
-            threshold:'',
-          },
-          elements:[],
-          panel: '',
-          sync: 0
-        },
         isUrl:false,
         isSingleStat:false,
         isAlert:false,
@@ -413,7 +374,7 @@
     },
     methods: {
       clickOutside() {
-        this.esc();
+        this.esc(false);
       },
       toAddPanel() {
         this.$refs.panelBox2.show(true);
@@ -455,11 +416,8 @@
         this.panel = Object.assign({}, panel);
         this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.editPanelTitle"));
       },
-      setTitle(title) {
+      setUnit(unit) {
-        this.rightBox.title = title;
+        this.$set(this.editChart,'unit',Number.parseInt(unit))
-      },
-      setUnit:function(unit){
-        this.$set(this.chart,'unit',Number.parseInt(unit))
       },
       expressionChange: function () {
 
@@ -471,8 +429,8 @@
         this.elementIds.push("");
         this.promqlCount++;
       },
-      removeExpression: function (index) {
+      removeExpression(index) {
-        if (this.promqlCount > 1) {
+        if (this.promqlCount > 0) {
           this.expressions.splice(index, 1);
           this.legends.splice(index, 1);
           this.promqlKeys.splice(index, 1);
@@ -491,20 +449,20 @@
       save() {
         this.$refs['chartForm'].validate((valid) => {
           if (valid) {
-            if (this.chart.id) {//修改
+            if (this.editChart.id) {//修改
-              this.$put('panel/'+this.chart.id+'/charts').then(response => {
+              this.$put('panel/'+this.editChart.id+'/charts').then(response => {
                 if (response.code === 200) {
-                  this.esc();
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
                 } else {
                   this.$message.error(response.msg);
                 }
               });
             } else {//新增
-              this.$post('panel/charts', this.chart).then(response => {
+              this.$post('panel/charts', this.editChart).then(response => {
                 if (response.code === 200) {
-                  this.esc();
                   this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                  this.esc(true);
                 } else {
                   this.$message.error(response.msg);
                 }
@@ -516,24 +474,20 @@
           }
         });
       },
-      del: function(u) {
+      del(u) {
-        let cloneChart=JSON.parse(JSON.stringify(u))
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
           type: 'warning'
         }).then(() => {
-          this.$delete("panel/"+this.panelId+"/charts?ids="+cloneChart.id).then(response => {
+          this.$delete("panel/" + this.panelId + "/charts?ids=" + u.id).then(response => {
             if (response.code === 200) {
               if(this.$refs.chartForm){
                 this.$refs.chartForm.resetFields();//清空表单
                 this.panelName2 = '';
               }
-              this.esc();
               this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              //this.getTableData();//删除相关图表后，刷新面板数据---调用panel的方法刷新
+              this.esc(true);
-              this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
-              this.$emit('on-delete-success');
             } else {
               this.$message.error(response.msg);
             }
@@ -543,8 +497,8 @@
       //----------------------------------
 
       /*关闭弹框*/
-      esc() {
+      esc(refresh) {
-        this.$emit("close");
+        this.$emit("close", refresh);
       },
 
       /*metric部分相关方法--begin*/
@@ -664,7 +618,7 @@
         let interval = setInterval(() => {
           if (panelId) {
             this.panelId = panelId;
-            this.$post('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response => {
+            this.$post('panel/' + this.panelId + '/charts', params ? params : this.editChart).then(response => {
               if (response.code === 200) {
                 this.esc();
                 this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -691,7 +645,7 @@
       },
       // 更新图表
       updateCharts(params) {
-        this.$put('panel/' + this.panelId + '/charts', params ? params : this.chart).then(response2 => {
+        this.$put('panel/' + this.panelId + '/charts', params ? params : this.editChart).then(response2 => {
           if (response2.code === 200) {
             this.esc();
             this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
@@ -715,23 +669,23 @@
             const params = {
               // productId: this.productId,
               //panelId: this.panelId,
-              title: this.chart.title,//this.chart
+              title: this.editChart.title,//this.editChart
-              span: this.chart.span,
+              span: this.editChart.span,
-              height: this.chart.height,
+              height: this.editChart.height,
-              type: this.chart.type,
+              type: this.editChart.type,
-              unit:this.chart.unit,
+              unit:this.editChart.unit,
               param:{
 
               },
-              sync: this.chart.sync
+              sync: this.editChart.sync
             };
-            if(this.chart.type === 'singleStat'){
+            if(this.editChart.type === 'singleStat'){
               params.param.statistics=this.statistics;
             } else {
               delete params.param.statistics;
             }
-            if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){
+            if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
-              params.param.threshold=this.chart.param.threshold;
+              params.param.threshold=this.editChart.param.threshold;
             } else {
               delete params.param.threshold;
             }
@@ -761,12 +715,12 @@
             if (valid) {
               if(optType==='preview') {
                 if (this.isedit) {
-                  params.id = this.chart.id;
+                  params.id = this.editChart.id;
                 }
                 this.$refs.chartsPreview.show(params);
               }else{
                 if (this.isedit) {
-                  params.id = this.chart.id;
+                  params.id = this.editChart.id;
                   this.updateCharts(params);
                 } else {
                   this.addCharts(params);
@@ -779,23 +733,23 @@
       getAlertParam:function(param,opType){
         this.$refs.chartForm.validate((valid) => {
           const params = {
-            title: this.chart.title,//this.chart
+            title: this.editChart.title,//this.editChart
-            span: this.chart.span,
+            span: this.editChart.span,
-            height: this.chart.height,
+            height: this.editChart.height,
-            type: this.chart.type,
+            type: this.editChart.type,
-            unit:this.chart.unit,
+            unit:this.editChart.unit,
             param:param,
-            sync: this.chart.sync
+            sync: this.editChart.sync
           };
           if (valid) {
             if(opType==='preview') {
               if (this.isedit) {
-                params.id = this.chart.id;
+                params.id = this.editChart.id;
               }
               this.$refs.chartsPreview.show(params);
             }else{
               if (this.isedit) {
-                params.id = this.chart.id;
+                params.id = this.editChart.id;
                 this.updateCharts(params);
               } else {
                 this.addCharts(params);
@@ -806,8 +760,8 @@
       },
       confirmAdd() {
         this.elementTarget = []; // 初始化清空参数
-        if(this.chart.type!=='url'){
+        if(this.editChart.type!=='url'){
-          /*if(this.chart.type == 'alertList'){
+          /*if(this.editChart.type == 'alertList'){
             this.$refs.alertParamBox.saveParam();
           }else{
             this.$refs.chartTag.forEach((item, index) => {//循环指标列表
@@ -815,18 +769,18 @@
               item.saveTarget(index);
             });
           }*/
-          if(this.chart.type == 'singleStat'){
+          if(this.editChart.type == 'singleStat'){
-            this.$set(this.chart.param, "statistics", this.statistics);
+            this.$set(this.editChart.param, "statistics", this.statistics);
           } else {
-            delete this.chart.param.statistics;
+            delete this.editChart.param.statistics;
           }
           if (this.expressions[0]) {
-            this.chart.elements = [];
+            this.editChart.elements = [];
             this.expressions.forEach((expr, i) => {
-              this.chart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
+              this.editChart.elements.push({id: this.elementIds[i], expression: expr, type: "expert", legend: this.legends[i]});
             });
           }
-          if (this.chart.id) {
+          if (this.editChart.id) {
             this.updateCharts();
           } else {
             this.addCharts();
@@ -834,21 +788,21 @@
         }else {
           this.$refs.chartForm.validate((valid) => {
             const params = {
-              title: this.chart.title,//this.chart
+              title: this.editChart.title,//this.editChart
-              span: this.chart.span,
+              span: this.editChart.span,
-              height: this.chart.height,
+              height: this.editChart.height,
-              type: this.chart.type,
+              type: this.editChart.type,
-              unit:this.chart.unit,
+              unit:this.editChart.unit,
               param:{
-                url:this.chart.param.url,
+                url:this.editChart.param.url,
               },
-              sync: this.chart.sync
+              sync: this.editChart.sync
             };
 
             if (valid) {
               params.elements = [];
               if (this.isedit) {
-                params.id = this.chart.id;
+                params.id = this.editChart.id;
                 this.updateCharts(params);
               } else {
                 this.addCharts(params);
@@ -942,7 +896,7 @@
         }
         this.isedit = false;
         this.initInfo(); // 初始化图表信息
-        //this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
+        //this.editChartModal = true;//????控制弹出框显示和隐藏的，不需要了
         this.initOpen(); // 获取metric, productId数据
       },
       setIsUrl(){
@@ -967,7 +921,6 @@
       },
       // 编辑chart时使用, set_tdata
       editData(data, panelId) {
-        //alert('data='+JSON.stringify(data)+"=="+panelId);
         if (!panelId) {
           this.panelId = 0;
           this.panelName2 = "";
@@ -979,30 +932,29 @@
           this.panelName2 = temp[0].name;
         }
         this.isedit = true;
-        //this.chartModal = true;
         this.editInfo = data;
         // 图表信息获取
-        this.chart.id = data.id;
+        this.editChart.id = data.id;
-        this.chart.title = data.title;
+        this.editChart.title = data.title;
-        this.chart.span = data.span;
+        this.editChart.span = data.span;
-        this.chart.height = data.height+'';
+        this.editChart.height = data.height+'';
-        this.chart.type = data.type;
+        this.editChart.type = data.type;
-        this.chart.unit=data.unit;
+        this.editChart.unit=data.unit;
-        this.chart.elements = data.elements;
+        this.editChart.elements = data.elements;
-        if(this.chart.type==='url'){
+        if(this.editChart.type==='url'){
-          this.chart.param.url = data.param.url;
+          this.editChart.param.url = data.param.url;
           this.setIsUrl();
           //this.elements = [1];
-        }else if(this.chart.type==='alertLine'){
+        }else if(this.editChart.type==='alertLine'){
-          this.chart.param=data.param;
+          this.editChart.param = data.param;
           this.setIsAlertList();
           //this.elements=[1];
         }else{
-          if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'||this.chart.type==='singleStat')&&data.param){
+          if((this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='singleStat')&&data.param){
-            this.chart.param.threshold=data.param.threshold;
+            this.editChart.param.threshold=data.param.threshold;
-            this.chart.param.statistics = this.statistics = data.param.statistics;
+            this.editChart.param.statistics = this.statistics = data.param.statistics;
           }else{
-            this.chart.param.threshold='';
+            this.editChart.param.threshold='';
           }
           this.setIsOtherChart();
           //this.getSuggestMetric();//获得指标列表
@@ -1013,7 +965,7 @@
             this.elements.push(index);
           });
           this.$nextTick(() => {
-            if(this.chart.type==='alertList'){
+            if(this.editChart.type==='alertList'){
               this.setIsAlertList();
               this.$nextTick(()=>{
                 this.$refs.alertParamBox.setData(data);
@@ -1031,13 +983,14 @@
 
       // 初始化信息
       initInfo() {
-        this.chart.title = '';
+        this.editChart.title = '';
-        this.chart.type = 'line';
+        this.editChart.type = 'line';
-        this.chart.span = 12;
+        this.editChart.span = 12;
-        this.chart.height = 400+'';
+        this.editChart.height = 400+'';
-        this.chart.unit=2;
+        this.editChart.unit=2;
-        this.chart.param.url='';
+        !this.editChart.param && (this.$set(this.editChart, "param", []));
-        this.chart.param.threshold='';
+        this.editChart.param.url='';
+        this.editChart.param.threshold='';
         this.elements = [1];
         this.elementTarget = [];
         bus.chartAddInfo.metricTarget = [];
@@ -1066,14 +1019,14 @@
         };
       },
       handleSelect:function(item){
-        this.chart.height=item;
+        this.editChart.height=item;
       },
       unitSelected:function(value){
-        //this.chart.unit=value[value.length-1];
+        //this.editChart.unit=value[value.length-1];
       },
       chartTypeChange(){
-        let chartType = this.chart.type;
+        let chartType = this.editChart.type;
-        this.chart.param.url='';
+        this.editChart.param.url='';
         if(chartType==='url'){
           this.setIsUrl();
           /*if(this.$refs.chartTag){
@@ -1089,7 +1042,7 @@
         }else {
           this.setIsOtherChart();
           if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
-            this.chart.param={threshold:''}
+            this.editChart.param={threshold:''}
           }
           /*if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
@@ -1125,8 +1078,8 @@
         //验证图表数据是否合法？？，合法了再显示预览窗口
         this.elementTarget = []; // 初始化清空参数
         this.alertParams={};
-        if(this.chart.type!=='url'){
+        if(this.editChart.type!=='url'){
-          if(this.chart.type == 'alertList'){
+          if(this.editChart.type == 'alertList'){
             this.$refs.alertParamBox.saveParam('preview');
           }else{
             /*this.$refs.chartTag.forEach((item, index) => {//循环指标列表
@@ -1137,23 +1090,23 @@
               const params = {
                 // productId: this.productId,
                 //panelId: this.panelId,
-                title: this.chart.title,//this.chart
+                title: this.editChart.title,//this.editChart
-                span: this.chart.span,
+                span: this.editChart.span,
-                height: this.chart.height,
+                height: this.editChart.height,
-                type: this.chart.type,
+                type: this.editChart.type,
-                unit:this.chart.unit,
+                unit:this.editChart.unit,
                 param:{
 
                 },
-                sync: this.chart.sync
+                sync: this.editChart.sync
               };
-              if(this.chart.type === 'singleStat'){
+              if(this.editChart.type === 'singleStat'){
                 params.param.statistics=this.statistics;
               } else {
                 delete params.param.statistics;
               }
-              if(this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea'){
+              if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'){
-                params.param.threshold=this.chart.param.threshold;
+                params.param.threshold=this.editChart.param.threshold;
               } else {
                 delete params.param.threshold;
               }
@@ -1196,24 +1149,24 @@
         }else {
           this.$refs.chartForm.validate((valid) => {
             const params = {
-              title: this.chart.title,//this.chart
+              title: this.editChart.title,//this.editChart
-              span: this.chart.span,
+              span: this.editChart.span,
-              height: this.chart.height,
+              height: this.editChart.height,
-              type: this.chart.type,
+              type: this.editChart.type,
-              unit:this.chart.unit,
+              unit:this.editChart.unit,
               param:{
-                url:this.chart.param.url,
+                url:this.editChart.param.url,
               }
             };
 
             if (valid) {
               if (this.isedit) {
-                params.id = this.chart.id;
+                params.id = this.editChart.id;
               }
               this.$refs.chartsPreview.show(params);
               /*
                 if (this.isedit) {
-                  params.id = this.chart.id;
+                  params.id = this.editChart.id;
                   this.updateCharts(params);
                 } else {
                   this.addCharts(params);
@@ -1226,10 +1179,10 @@
       },
       //preview--end
       initElements() {
-        if (!this.chart.elements || this.chart.elements.length == 0) {
+        if (!this.editChart.elements || this.editChart.elements.length == 0) {
-          this.chart.elements = [{expression: "", legend: "", type: "expert", id: ""}];
+          this.editChart.elements = [{expression: "", legend: "", type: "expert", id: ""}];
         }
-        this.chart.elements.forEach(element => {
+        this.editChart.elements.forEach(element => {
           this.promqlKeys.push(getUUID());
           this.expressions.push(element.expression);
           this.legends.push(element.legend);
@@ -1248,7 +1201,19 @@
       this.getSuggestMetric();
     },
     watch: {
-      panelData: {
+      chart: {
+        deep: true,
+        immediate: true,
+        handler(n) {
+          this.editChart = JSON.parse(JSON.stringify(n));
+          if (n.id) {
+            this.editData(this.editChart, this.showPanel.id);
+          } else {
+            this.createData(this.showPanel.id);
+          }
+        }
+      },
+      /*panelData: {
         deep: true,
         immediate: true,
         handler(n, o) {
@@ -1267,7 +1232,7 @@
             }
           }
         }
-      }
+      }*/
     },
     beforeDestroy() {
       if(this.$refs.chartTag){

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -45,7 +45,7 @@
                       <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
                       <el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
                       <el-col :span="1">&nbsp;</el-col>
-                      <el-col :span="1"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
+                      <el-col :span="1"><span class="panel-dropdown-btn" @click.stop="edit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
                     </el-row>
                   </el-dropdown-item>
                 </draggable>
@@ -59,32 +59,8 @@
               </el-input>
             </div>
 
-            <!--<div class="panel-calendar margin-r-20">
-              <div class="block">
-                <time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
-              </div>
-            </div>-->
-
-            <!--<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
-              <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
-                      class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
-                <i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
-              </button><el-popover
-              v-model="visible" placement="bottom-start" width="200" trigger="click">
-              <ul class="popover_ul">
-                <li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name"
-                    @click="selectInterval(i.value)">
-                  {{i.name}}
-                </li>
-              </ul>
-              <button type="button" style="border-radius: 0 4px 4px 0"
-                      class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
-                <i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
-              </button>
-            </el-popover>
-            </div>-->
             <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
-            <button @click="toAddChart" :title="$t('overall.createChart')"
+            <button @click="addChart" :title="$t('overall.createChart')"
                     class="nz-btn nz-btn-size-normal nz-btn-style-light ">
               <i class="nz-icon-create-square nz-icon"></i>
             </button>
@@ -94,7 +70,7 @@
       <div class="table-list" id="tableList">
         <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
           <div class="box-content">
-            <chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
+            <chart-list @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart"
                         ref="chartList"></chart-list>
           </div>
         </el-scrollbar>
@@ -103,8 +79,12 @@
     </div>
     </left-menu>
 
-    <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
+    <transition name="right-box">
-    <chart-box @close="rightBox.show = false" v-if="rightBox.show" ref="addChartModal" :showPanel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
+      <chart-box @close="closeChartBox" :chart="chart" v-if="rightBox.chart.show" ref="addChartModal" :show-panel="showPanel" :panel-data="panelData" @reload="panelReload" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reloadOnlyPanel="panelReloadOnlyPanel"></chart-box>
+    </transition>
+    <transition name="right-box">
+      <panel-box v-if="closePanelBox" :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
+    </transition>
   </div>
 </template>
 
@@ -122,8 +102,8 @@
         showTopBtn: false, //top按钮
         visible: false,
         rightBox: { //面板弹出框相关
-          show: false,
+          chart: {show: false},
-          title: this.$t('dashboard.panel.createPanelTitle')
+          panel: {show: false},
         },
         tableHover: false,
         searchTime: [
@@ -156,17 +136,21 @@
           id: '',
           name: ''
         },
-        chart: {
+        chart: {},
-          id: '',
+        blankChart: {
+          id:'',
           title: '',
-          type: 'line',
+          type:'line',
-          span: 12,
+          span:12,
-          height: 400,
+          height:'400',
-          elements: {
+          unit:2,
-            id: '',
+          param:{
-            expression: '',
+            url:'',
-            type: ''
+            threshold:'',
-          }
+          },
+          elements:[],
+          panel: '',
+          sync: 0
         },
         pageObj: {
           pageNo: 1,
@@ -237,7 +221,7 @@
         this.getData(this.filter);
 
       },
-      del: function (u) {
+      del(u) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
@@ -254,19 +238,18 @@
                 this.showPanel.id = '';
               }
               this.getTableData();
-              this.rightBox.show = false;
             } else {
               this.$message.error(response.msg);
             }
           })
         });
       },
-      toEdit: function (u) {
+      edit(u) {
         this.panel = Object.assign({}, u);
         this.$refs.panelBox.setTitle(this.$t("dashboard.panel.editPanelTitle"));
         this.$refs.panelBox.show(true);
       },
-      toAdd: function () {
+      toAdd() {
         this.$refs.panelBox.show(true);
         this.panel = {
           id: '',
@@ -289,12 +272,12 @@
         this.getTableData();
       },
       /*图表相关操作--start*/
-      toAddChart: function () {
+      addChart() {
-        this.rightBox.show = true;
+        this.chart = this.newChart();
-        this.$nextTick(() => {
+        this.rightBox.chart.show = true;
-          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
+      },
-          this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
+      newChart() {
-        });
+        return JSON.parse(JSON.stringify(this.blankChart));
       },
       scrollbarHeightHandler() {
         setTimeout(() => {
@@ -317,15 +300,27 @@
         }, 100);
       },
       // 编辑图表信息,打开编辑弹窗
-      editData(data) {
+      editChart(data) {
-        this.rightBox.show = true;
+        if (!data.param) {
-        this.$nextTick(() => {
+          data.param = {url: '', threshold: '',};
-          this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.editChartTitle"));
+        }
-          this.$refs.addChartModal.editData(data, this.showPanel.id);
+        this.chart = JSON.parse(JSON.stringify(data));
-        });
+        this.rightBox.chart.show = true;
+      },
+      closeChartBox(refresh) {
+        this.rightBox.chart.show = false;
+        if (refresh) {
+
+        }
+      },
+      closePanelBox(refresh) {
+        this.rightBox.panel.show = false;
+        if (refresh) {
+
+        }
       },
       // 移除图表:弹出确认框询问
-      removeData(data,from) {
+      delChart(data,from) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),
           cancelButtonText: this.$t("tip.no"),
@@ -358,16 +353,6 @@
       },
       // 图表创建成功，回调panel页面，进行图表的刷新
       createSuccess(msg, data, params) {
-        /*
-   if (data && data.code === 200) {
-
-     if (msg === 'create') {
-       //this.$message.success('添加成功');
-     } else {
-       //this.$message.success('编辑成功');
-     }
-    }
-     */
         this.filter.panelId = this.showPanel.id;
         this.getData(this.filter);
       },
@@ -389,9 +374,6 @@
       /*时间条件查询--start*/
       // 选择日期变化
       dateChange(val) {
-        // if(val){
-        //   this.searchTime = [...val];
-        // }
         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;
@@ -505,28 +487,7 @@
         this.pageObj.pageSize = val;
         this.getTableData();
       },
-      // search: function (searchObj) {
-      //   this.searchLabel = {};
-      //   let containTitle = false;
-      //   for (let item in searchObj) {
-      //     if (searchObj[item]) {
-      //       this.$set(this.searchLabel, item, searchObj[item]);
-      //       if (item === 'name') {
-      //         this.filter.searchName = searchObj[item]; //此处就一个条件
-      //         containTitle = true;
-      //       }
-      //     }
-      //   }
-      //   if (!containTitle) {
-      //     this.filter.searchName = '';
-      //   }
-      //   this.filter.panelId = this.showPanel.id;
-      //   this.getData(this.filter);
-      // },
       search:function(){
-        //this.filter.panelId=this.showPanel.id;
-        //this.getData(this.filter);
-
         if(this.$refs.chartList){
           this.$refs.chartList.searchCharts(this.filter.searchName);
         }
@@ -548,13 +509,13 @@
           //}
         },300);
       },
-      focusInput:function(){
+      focusInput() {
         let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
         classVal=classVal.replace('query-input-inactive','query-input-active');
         document.getElementById('queryPanel').parentElement.setAttribute("class",classVal );
         this.$refs.queryPanel.focus();
       },
-      blurInput:function(){
+      blurInput() {
         if(!this.filter.searchName || this.filter.searchName == ''){
           setTimeout(function(){
             let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
@@ -563,7 +524,7 @@
           },100)
         }
       },
-      clearInput:function(){
+      clearInput() {
         this.$refs.queryPanel.focus();
       },
       start (event) {

nezha-fronted/src/components/page/project/project.vue

@@ -368,8 +368,8 @@
         this.tools.tablelable = data;
       },
       getEndpointTableData() {
-        if(this.currentModule&&this.currentModule.id){
+        if(this.currentModule && this.currentModule.id) {
-          this.pageType='endpoint'
+          this.pageType = 'endpoint';
           this.endpointSearchLabel.moduleId = this.currentModule.id;
           this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
           this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
@@ -404,59 +404,10 @@
         this.getEndpointTableData();
       },
 
-      // 获取左侧module列表数据
+      getProjectList() {
-      getModuleList() {
+        this.$get('project', {pageSize:-1}).then(response=>{
-        //若currentProject不存在（如页面刷新了），默认取project列表的第一个
-        if (this.currentProject && this.currentProject.id) {
-          this.$get('module', {projectId: this.currentProject.id, pageSize: -1, pageNo: 1}).then(response => {
-            if (response.code === 200) {
-              this.moduleList = response.data.list;
-              for (let i = 0; i < this.moduleList.length; i++) {
-                try {
-                  let tempObj = JSON.parse(this.moduleList[i].param);
-                  this.$set(this.moduleList[i], 'paramObj', []);
-                  for (let k in tempObj) {
-                    this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
-                  }
-                } catch (err) {
-                  //console.error(response.data.list[i], err);
-                }
-              }
-              if (this.moduleList.length > 0) {
-                this.currentModule = this.moduleList[0];
-              } else {
-                this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
-              }
-            }
-          });
-        } else {
-          if (this.projectList && this.projectList.length > 0) {
-            this.$store.commit('setProject', this.projectList[0]);
-          } else {
-            this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
-              if (response.code == 200) {
-                this.projectList = response.data.list;
-                if (this.projectList.length > 0) {
-                  this.getModuleList();
-                } else {
-                  return;
-                }
-              }
-            });
-          }
-        }
-      },
-      getProjectList(reload) {
-        this.$get('project',{pageSize:-1}).then(response=>{
           if(response.code == 200){
             this.projectList = response.data.list;
-            if (reload) {
-              if (this.projectList.length > 0) {
-                this.currentProject = this.projectList[0];
-              } else {
-                this.currentProject = {};
-              }
-            }
           }
         })
       },
@@ -473,14 +424,14 @@
             this.currentProject = project;
           }
         } else {
-          this.currentProjectTitle = this.currentProject.name + "-" + this.currentProject.id;
+          this.currentProjectTitle = project.id + "";
         }
         this.currentModule = {};
       },
       closeModuleRightBox(refresh) {
         this.rightBox.module.show = false;
         if (refresh) {
-          this.getAllModuleList();
+          this.getModuleList();
         }
       },
       closeAddEndpointRightBox(refresh) {
@@ -495,7 +446,7 @@
           this.getEndpointTableData();
         }
       },
-      getAllModuleList() {
+      getModuleList() {
         this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
           if (response.code === 200) {
             this.moduleList = response.data.list;
@@ -656,13 +607,6 @@
           path: obj.path,
           param: obj.param
         };
-        /*detail.push({label: this.$t('project.project.project'), value: obj.project.name});
-        detail.push({label: this.$t("project.module.module"), value: obj.module.name});
-        detail.push({label: this.$t("asset.asset"), value: obj.asset.host});
-        detail.push({label: this.$t("project.endpoint.host"), value: obj.host});
-        detail.push({label: this.$t("project.endpoint.port"), value: obj.port});
-        detail.push({label: this.$t("project.endpoint.path"), value: obj.path});
-        detail.push({label: this.$t("project.endpoint.param"), value: obj.param});*/
         return detail;
       },
       formatUpdateTime:function(date){
@@ -672,8 +616,8 @@
 
         return hours+':'+minutes;
       },
-      getStateErrorMsg:function(row){
+      getStateErrorMsg(row) {
-        let errCodes=[230009,230010,230011];
+        let errCodes = [230009, 230010, 230011];
         if(row){
           if(row.state == 0){
             if(errCodes.find((item)=>{return row.stateInfo.code == item})){
@@ -697,6 +641,7 @@
         detail.cabinet = obj.cabinet ? obj.cabinet.name : "";
         detail.uSize = obj.cabinet ? obj.cabinet.uSize : "";
         detail.remark = obj.idc ? obj.idc.remark : "";
+        !obj.accounts && (obj.accounts = []);
         if (obj.accounts.length > 0) {
           let account = obj.accounts[0];
           detail.protocol = account.protocol;
@@ -710,41 +655,6 @@
           detail.loginType = loginType;
           detail.port = account.port;
         }
-        /*detail.push({label: this.$t("asset.sn"), value: obj.sn});
-        detail.push({label: this.$t("asset.host"), value: obj.host});
-        detail.push({label: this.$t("asset.state"), value: obj.state == 1 ? this.$t('asset.inStock'): this.$t('asset.notInStock')});
-        detail.push({label: this.$t("asset.tableTitle.modules"), value: obj.endpointNum});
-        detail.push({label: this.$t("asset.tableTitle.alerts"), value: obj.alertNum});
-        detail.push({label: this.$t("asset.assetType"), value: obj.model.type.value});
-        detail.push({label: this.$t("asset.vendorModel"), value: obj.model.vendor.value + " " + obj.model.name});
-        detail.push({label: this.$t("asset.assetType"), value: obj.model.type.value});
-        detail.push({label: this.$t("asset.purchaseDate"), value: obj.purchaseDate});
-        detail.push({label: this.$t("asset.dcName"), value: obj.idc ? obj.idc.name : ""});
-        detail.push({label: this.$t("asset.location"), value: obj.idc ? obj.idc.location : ""});
-        detail.push({label: this.$t("asset.principal"), value: obj.idc ? this.getPrincipalName(obj.idc.principal) : ""});
-        detail.push({label: this.$t("asset.location"), value: obj.idc ? obj.idc.location : ""});
-        detail.push({label: this.$t("asset.tel"), value: obj.idc ? obj.idc.tel : ""});
-        detail.push({label: this.$t("asset.cabinet"), value: obj.cabinet ? obj.cabinet.name : ""});
-        detail.push({label: this.$t("asset.editAssetTab.uSize"), value: obj.cabinet ? obj.cabinet.uSize : ""});
-        detail.push({label: this.$t("asset.editAssetTab.remark"), value: obj.idc ? obj.idc.remark : ""});
-        if (obj.accounts.length > 0) {
-          let account = obj.accounts[0];
-          if (account.protocol == 'SSH') {
-            detail.push({label: this.$t("asset.protocol"), value: 'SSH'});
-            detail.push({label: this.$t("asset.account"), value: account.user});
-            let loginType = "";
-            if (account.authType == 1) {
-              loginType = this.$t('asset.password');
-            } else if (account.authType == 2) {
-              loginType = this.$t('asset.ssh');
-            }
-            detail.push({label: this.$t("asset.loginType"), value: loginType});
-          } else if (account.protocol == 'TELNET') {
-            detail.push({label: this.$t("asset.protocol"), value: 'TELNET'});
-            detail.push({label: this.$t("asset.account"), value: account.user});
-          }
-          detail.push({label: this.$t("asset.port"), value: account.port});
-        }*/
         return detail;
       },
       getPrincipalName(data) {
@@ -797,8 +707,7 @@
     },
     created() {
       this.currentProject = this.$store.state.currentProject;
-      // this.getModuleList();
+      this.getModuleList();
-      this.getAllModuleList();
       this.getUserData();
       this.getProjectList();
     },
@@ -832,9 +741,9 @@
         }
       });
       //resize时刷新左侧列表滚动条
-      let _this = this;
+      let vm = this;
       window.onresize = function() {
-        _this.$refs.leftScrollbar.update();
+        vm.$refs.leftScrollbar.update();
       }
 
       this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
@@ -846,15 +755,18 @@
 
     },
     computed: {
-      currentProjectChange() {
+      projectListChange() {
-        return this.$store.state.currentProject;
-      },
-      projectListChange(){
         return this.$store.state.projectListChange;
       },
-      moduleListReloadWatch() {
+      moduleListChange() {
         return this.$store.state.moduleListChange;
       },
+      endpointListChange() {
+        return this.$store.state.endpointListChange;
+      },
+      currentProjectChange() {
+        return this.$store.state.currentProject;
+      },
       itemTip() {
         return function(id, content, ready) {
           let className = "item-tip-show";
@@ -874,19 +786,28 @@
       },
     },
     watch: {
-      currentProjectChange:{
+      projectListChange(n) {
+        this.getProjectList();
+      },
+      moduleListChange(n) {
+        this.getModuleList();
+      },
+      endpointListChange(n) {
+        this.getEndpointTableData();
+      },
+      currentProjectChange: {
         immediate:true,
         handler(n, o) {
-          this.currentProject = Object.assign({}, n);
+          if (n.id != this.currentProject.id) {
-          this.detailProject();
+            this.currentProject = this.projectList.find(p => {
+              return p.id == n.id;
+            });
+            this.detailProject(null, this.currentProject);
           }
         },
-      projectListChange:function(n,o){
-        this.getProjectList(true);
       },
       currentProject(n, o) {
-        // this.getModuleList();
+        this.$store.commit("currentProjectChange", Object.assign({}, n));
-        // this.$store.commit('setProject',n)
       },
       currentModule(n, o) {
         this.endpointPageObj.pageNo = 1;
@@ -896,10 +817,7 @@
           this.endpointTableData = [];
         }
       },
-      moduleListReloadWatch(n, o) {
+      
-        // this.getModuleList(this.currentProject.id);
-        this.getAllModuleList();
-      },
       "bottomBox.showSubList": function(n) {
         let vm = this;
         this.$bottomBoxWindow.showSubListWatch(vm, n);

nezha-fronted/src/store/index.js

@@ -9,19 +9,23 @@ const store = new Vuex.Store({
       step: 0,
       type: -1  //0: asset  1: header
     },
-    assetDcList: 0, //监听此值，改变则刷新dc列表
+    
     assetForAlertList: 0, //asset页跳转alertList时传递的assetId
-    currentProject: {
+
-      id: '',
-      name: '',
-      remark: ''
-    },
     assetItemId:''  ,   //复选框ID
     assetAllId:[]  ,   //复选框allID
+
+    dcList: 0, //监听此值，改变则刷新dc列表
+    /* 监听对象变化，用于顶部菜单与底部内容的同步 */
+    currentProject: {id: "", name: "", remark: ""},
+    currentAsset: {id: ""},
     projectListChange: 0,
     moduleListChange: 0,
-    flushDataSign: false,
+    endpointListChange: 0,
-    panelListReload:false,
+    assetListChange: 0,
+    dcListChange: 0,
+    alertConfigListChange: 0,
+
     eventfixed: {
       shezhi: 0,
       screen: 0
@@ -44,29 +48,38 @@ const store = new Vuex.Store({
     linkData:[],//导航数据
   },
   getters: {
-    getlinkData(state){
+    getLinkData(state){
       return state.linkData
     }
   },
   mutations: {
-    setProject(state, project) {
+    /* 监听对象变化，用于顶部菜单与底部内容的同步 */
-      state.currentProject = Object.assign({}, project);
-    },
-    projectRightBoxShow(state, show) {
-      state.projectBoxShow = show;
-    },
     projectListChange(state) {
-      state.projectListChange = state.projectListChange + 1;
+      state.projectListChange++;
     },
     moduleListChange(state) {
-      state.moduleListChange = state.moduleListChange + 1;
+      state.moduleListChange++;
     },
-    panelListChange(state,status){
+    endpointListChange(state) {
-      state.panelListReload = status;
+      state.endpointListChange++;
     },
-    assetDcListChange(state) {
+    assetListChange(state) {
-      state.assetDcList++;
+      state.assetListChange++;
     },
+    alertConfigListChange(state) {
+      state.alertConfigListChange++;
+    },
+    dcListChange(state) {
+      state.dcListChange++;
+    },
+    currentProjectChange(state, project) {
+      state.currentProject = project;
+    },
+    currentAssetChange(state, asset) {
+      state.currentAsset = asset;
+    },
+
+
     setHeaderTable(state, data) { //设置table头部
       state.tablelable = data;
     },
@@ -118,10 +131,10 @@ const store = new Vuex.Store({
       state.consoleShow=false;
     },
     setLeftMenuStat:function(state,data){
-      state.leftMenuStat=data
+      state.leftMenuStat = data;
     },
     setLinkData:function(state,data){
-      state.linkData=data
+      state.linkData = data;
     },
   },
   actions: {