feat: 拖拽改版、内存优化(chartBox)等

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

@@ -146,7 +146,7 @@
       </div>
    </draggable>
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
-    <div class="page-shadow" v-if="showShadow"></div>
+    <!--<div class="page-shadow" v-if="showShadow"></div>-->
   </div>
 </template>
 
@@ -205,11 +205,11 @@
         lineNum:3,//每页加载的行数
         pagePanelId:'',//当前分页的panelId
         dragging: null,
-        chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
+        //chartDataCacheGroup:new Map,//图表数据缓存，用于查询：id:{}
         stepHeight: 50,
 
         tempDom: {height: "", width: ""},
-        showShadow:false,
+        //showShadow:false,
       };
     },
     methods: {
@@ -229,129 +229,19 @@
         }
         this.dataListDragTmp = [...this.dataList];
       },
-      end (event) {
+      end(event) {
-        //console.info("end event:", event)
+        if (event.oldIndex !== event.newIndex) {
-        if(this.dataList.length===1){return}//解决当元素只有一个移动会报错的问题
+          let newWeights = [];
-        let item = event.item;
+          this.dataList.forEach((item, index) => {
-        let oldIndex = event.oldIndex;
+            item.weight = index;
-        let newIndex = event.newIndex;
+            newWeights.push({id: item.id, weight: index});
-        let newItem = this.dataList[newIndex];
-        //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--start
-        let len = this.dataListDragTmp.length;//移动之前的元素列表
-        let endIndex = len-1;
-        if(oldIndex===0){//挪动之前为第一个元素
-          let oldNextItem = this.dataListDragTmp[oldIndex+1];
-          let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
-          nextItem.prev = 0;
-        }else if(oldIndex===endIndex){//挪动之前为最后一个元素
-          let oldPrevItem = this.dataListDragTmp[oldIndex-1];
-          let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
-          prevItem.next = -1;
-        }else{//挪动之前为中间元素
-          let oldPrevItem = this.dataListDragTmp[oldIndex-1];
-          let oldNextItem = this.dataListDragTmp[oldIndex+1];
-          let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
-          let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
-          prevItem.next = oldNextItem.id;
-          nextItem.prev = oldPrevItem.id;
-        }
-
-        if(newIndex===0){//挪动之后为第一个元素
-          let newNextItem = this.dataList[newIndex+1];
-          newNextItem.prev = newItem.id;
-        }else if(newIndex===endIndex){//挪动之后为最后一个元素
-          let newPrevItem = this.dataList[newIndex-1];
-          newPrevItem.next =newItem.id;
-        }else{//挪动之后为中间元素
-          let newPrevItem = this.dataList[newIndex-1];
-          let newNextItem = this.dataList[newIndex+1];
-          newPrevItem.next = newItem.id;
-          newNextItem.prev = newItem.id;
-        }
-        //移动前，移动元素前后元素next及prev修改；移动后，移动元素前后元素next及prev修改--end
-
-        //前台总列表中的顺序也得修改（dataTotalList及dataTotalListBak），后台接口也得调用
-        if(newIndex<oldIndex){//从后往前移动：
-          //console.log('从后往前移动：oldIndex='+oldIndex+',newIndex='+newIndex)
-          let newNextItem = this.dataList[newIndex+1];
-          newItem.next = newNextItem.id;
-
-          let nextItemIndexInTotal = -1;
-          this.dataTotalListBak.forEach((item,index)=>{
-            if(item.id===newNextItem.id){
-              nextItemIndexInTotal = index;
-            }
-          })
-          // console.log('从后往前移动：next元素在总列表中之前的元素的index='+nextItemIndexInTotal)
-          if(nextItemIndexInTotal>0){//总列表中：移动之后的当前元素后面的元素之前有元素
-            let prevItem = this.dataTotalListBak[nextItemIndexInTotal-1];
-            newItem.prev = prevItem.id;
-          }else{//之前无元素
-            newItem.prev = 0;
-          }
-        }else if(newIndex>oldIndex){//从前往后移动
-          //console.log('从前往后移动：oldIndex='+oldIndex+',newIndex='+newIndex)
-          let newPrevItem = this.dataList[newIndex-1];
-          newItem.prev = newPrevItem.id;
-
-          let prevItemIndexInTotal = -1;
-          this.dataTotalListBak.forEach((item,index)=>{
-            if(item.id===newPrevItem.id){
-              prevItemIndexInTotal = index;
-            }
           });
-          //console.log('从前往后移动：prev元素在总列表中之后的元素的index='+prevItemIndexInTotal)
+          this.$put('panel/'+ this.pagePanelId+'/charts/weights', newWeights).then(response => {
-          if(prevItemIndexInTotal<this.dataTotalListBak.length-1){//总列表中：移动之后的当前元素前面的元素之后有元素
+            if (response.code !== 200) {
-            let nextItem = this.dataTotalListBak[prevItemIndexInTotal+1];
-            newItem.next = nextItem.id;
-          }else{//之后无元素
-            newItem.next = -1;
-          }
-        }else {//oldIndex = newIndex
 
             }
-        //更新图表prev和next
-        const modifyParams = {
-          id:newItem.id,
-          span:newItem.span,
-          height:newItem.height,
-          prev:newItem.prev,
-          next:newItem.next,
-        };
-
-        if(this.dataList.length>1 && oldIndex !== newIndex){
-          this.showShadow=true;
-          this.$put('panel/'+ this.pagePanelId+'/charts/modify',modifyParams).then(response => {
-            if (response.code === 200) {
-              //修改前台列表中元素的顺序
-              let curItem = this.dataTotalListBak.find((item,index)=>{return newItem.id===item.id});
-              let curIndex = this.dataTotalListBak.indexOf(curItem);
-              this.dataTotalListBak.splice(curIndex,1);
-
-              let nextItemTmp = this.dataTotalListBak.find((item)=>{return item.id===newItem.next});
-              if(nextItemTmp){
-                let nextIndex = this.dataTotalListBak.indexOf(nextItemTmp);
-                this.dataTotalListBak.splice(nextIndex,0,newItem);
-              }else{//移动到最后一个元素
-                this.dataTotalListBak.push(newItem);
-              }
-              this.dataList = this.dataTotalListBak;
-              this.$nextTick(()=>{
-                this.showShadow=false;
-              })
-            }else {
-              if(response.msg){
-                this.$message.error(response.msg);
-              }else if(response.error){
-                this.$message.error(response.error);
-              }else {
-                this.$message.error(response);
-              }
-            }
           });
         }
-        let chartTitle = item.querySelector('.chartTitle');
-        chartTitle.style.background = '';
       },
       move(event, orgin) {
         let dragClass = document.querySelector('.drag-chart-class');//drag-chart-class:yellow chart-ghost:green  fallback-class choose-class:purple
@@ -654,26 +544,27 @@
             });
 
             if(response.data.list){
-              this.dataTotalList =  response.data.list;
+              this.dataTotalListBak =  response.data.list;
             }else {
-              this.dataTotalList = response.data;
+              this.dataTotalListBak = response.data;
             }
-            this.dataTotalListBak = [...this.dataTotalList];
 
+            let chartListTmp = [];
             //查询条件带name
             if(this.filter.searchName&&this.filter.searchName!=''){
-              let chartListTmp = [];
               let searchTitleStr = this.filter.searchName;
               this.dataTotalListBak.forEach((item)=>{
                 if(item.title.indexOf(searchTitleStr)>-1){
                   chartListTmp.push(item);
                 }
               });
-              this.dataTotalList = chartListTmp;
+            } else {
+              chartListTmp = this.dataTotalListBak;
             }
+            this.dataTotalList = [...chartListTmp];
 
             this.dataList = [...this.dataTotalList];
-            this.showShadow=false;
+            //this.showShadow=false;
             this.$nextTick(() => {
               if (this.dataList.length > 0 ) {
                 this.dataList.forEach((item,index) => {
@@ -791,6 +682,7 @@
         }else {
           this.getChartData(chartItem, realIndex);
         }
+        chartData = null;
       },
       // 获取一个图表具体数据,图表信息，图表位置index
       getChartData(chartInfo, pos, filterType) {
@@ -886,16 +778,16 @@
               // 一个图表的所有element单独获取数据
               axios.all(axiosArr).then((res) => {
                 if (res.length > 0) {
-                  const series = [];
+                  let series = [];
                   let singleStatRlt = '';
-                  const legend = [];
+                  let legend = [];
-                  const tableData = [];
+                  let tableData = [];
-                  const sumData = {
+                  /*let sumData = {
                     name: 'sum',
                     data: [],
                     visible: true,
                     threshold: null,
-                  };
+                  };*/
                   let errorMsg = "";
                   res.forEach((response, innerPos) => {
                     if (response.status === 'success') {
@@ -913,7 +805,7 @@
                           }
                         } else {
                           response.data.result.forEach((queryItem, resIndex) => {
-                            const seriesItem = {
+                            let seriesItem = {
                               theData: {
                                 name: '',
                                 symbol: 'emptyCircle',  //去掉点
@@ -1020,7 +912,7 @@
                                 return [dpsItem[0] * 1000, dpsItem[1]];
                               });
                               series.push(seriesItem.theData);
-
+                              seriesItem = null;
                             } else if (chartItem.elements && chartItem.elements[innerPos]) {
                               // 无数据提示
                               /*
@@ -1555,6 +1447,7 @@
       },
       //复制图表
       duplicateChart(chartId,duplicateChartBack){
+        console.info(chartId, duplicateChartBack);
         let duplicateChartId = duplicateChartBack.id;
         let chart;
         let chartIndex = -1;
@@ -1661,6 +1554,7 @@
           }
         });
       },
+      //懒加载，判断网页区域，加载可见区的prom数据
       handleElementInViewport(ele,scrollTop,item,index,isSearch) {
         /*
         网页被卷去的高：document.body.scrollTop
@@ -1705,6 +1599,9 @@
         }, 100);
       },
     },
+    created() {
+      this.chartDataCacheGroup = new Map;
+    },
     mounted() {
       this.tempDomInit();
     },

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

@@ -379,8 +379,8 @@
         }
         this.data = chartItem;
         this.unit = chartDataFormat.getUnit(this.data.unit);
-        seriesItem=seriesItem.map(item=>{
+        seriesItem && (seriesItem = seriesItem.map(item=>{
-          if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
+          if(chartItem.param && chartItem.param.valueMapping && chartItem.param.valueMapping.type){
             let type=chartItem.param.valueMapping.type;
             let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
             let value = item.value;
@@ -394,7 +394,7 @@
             item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
           }
           return item;
-        })
+        }));
         if (area === 'showFullScreen') {//全屏按时间查询
 
           this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间

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

@@ -643,7 +643,7 @@
 .chart-text-preview .ql-container.ql-snow {
   border: unset !important;
 }
-.page-shadow{
+/*.page-shadow{
   position: absolute;
   top: 0px;
   left: 0px;
@@ -651,4 +651,4 @@
   width: 100%;
   background-color: rgba(0,0,0,.1);
   z-index: 100;
-}
+}*/

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

@@ -222,9 +222,9 @@
       return {
         data: {}, // 该图表信息,chartItem
         noData:false,
+        seriesLength:20,
         /*seriesItem: [], // 保存信息
         seriesItemArr:[],// 初次加载的数据
-        seriesLength:20,
         seriesItemScreen:[],
         seriesItemArrScreen:[],*/
         /*legendListMore:[],
@@ -1054,8 +1054,8 @@
       },
       // 设置数据, filter区分
       setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
-        this.setColor(legend.length);
+        legend && this.setColor(legend.length);
-        legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
+        legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
         this.filter.from = filter.from;
         if(errorMsg && errorMsg!==''){
           this.isError = true;
@@ -1098,7 +1098,7 @@
             this.oldSearchTime[0] = this.searchTime[0];
             this.oldSearchTime[1] = this.searchTime[1];
           }
-          this.seriesItem=seriesItem;
+          //this.seriesItem=seriesItem;
           let seriesItemArr=seriesItem;
           if(seriesItem.length>this.seriesLength){
             seriesItemArr=seriesItem.filter((item,index)=>index<this.seriesLength); // 只查看前seriesLength条
@@ -1199,7 +1199,7 @@
               type: 'success',
               message: this.$t("tip.duplicateSuccess")
             });
-            this.$emit('on-duplicate-chart-block', this.data.id,response.data);
+            this.$emit('on-duplicate-chart-block', this.data.id, response.data);
           }else {
             if(response.msg){
               this.$message.error(response.msg);
@@ -1721,7 +1721,6 @@
       this.chartInfo = {};
       this.seriesItem = []; // 保存信息
       this.seriesItemArr = [];// 初次加载的数据
-      this.seriesLength = 20;
       this.seriesItemScreen = [];
       this.seriesItemArrScreen = [];
       this.legend = [];

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

@@ -4,7 +4,7 @@
       <slot name="optionZone"></slot><button @mouseenter="exportMenuHandler(true)" @mouseleave="exportMenuHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go" style="padding: 0">
         <i class="nz-icon nz-icon-arrow-down"></i>
         <transition name="el-zoom-in-top">
-          <ul class="el-dropdown-menu el-popper el-dropdown-menu--mini export-dropdown" v-show="exportShow">
+          <ul class="el-dropdown-menu el-popper el-dropdown-menu--mini export-dropdown" style="z-index: 101" v-show="exportShow">
             <li @click="showImportBox(1)" class="el-dropdown-menu__item dropdown-content"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</li>
             <li @click="showImportBox(2)" class="el-dropdown-menu__item dropdown-content"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</li>
           </ul>

nezha-fronted/src/components/common/language/en.js

@@ -757,7 +757,7 @@ const en = {
       notification: {
         notification:'Notification',
         name: "Name",
-        filePath: "filePath",
+        filePath: "File path",
         operation: "Operation",
         add: "Add",
         update: "Update",

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

@@ -363,7 +363,7 @@
           searchMsg:{
             immediate: true,
             handler(n){
-             console.log(n);
+             //console.log(n);
              if(n){
                n.searchLabelList.forEach(item=>{
                  if(item.id===27&&item.type==='idc'&&item.label==='idcId'){
@@ -857,7 +857,7 @@
             },
             // input框监听是按删除还是回车
             enter(val, e) {
-                console.log(val);
+                //console.log(val);
               var keyCode = window.event ? e.keyCode : e.which;
               if(val == 'ID'&&keyCode == 13){
                 let id = /^[0-9]*$/

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

@@ -462,7 +462,7 @@
               ],
               filePath:[
                 { required: true, message: this.$t('validate.required'), trigger: 'blur' },
-                { pattern: /^\/(\w+\/?)+$/, message: this.$t('config.system.notification.filePathReg') }
+                { pattern: /^\/(.*\.*.+\/?)+$/, message: this.$t('config.system.notification.filePathReg') }
                 // { type: 'url', message: this.$t('config.system.link.uriRequired'), trigger: 'blur' } /*检验网址是否正确*/
               ]
             },

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

@@ -193,6 +193,8 @@
             :id="promqlKeys[index-1]"
             :key="promqlKeys[index-1]"
             :expression-list="expressions"
+            :metric-options="metricOptions"
+            :metric-store="metricStore"
             :index="index-1"
             :styleType="2"
             :plugins="['metric-selector', 'metric-input', 'remove']"
@@ -443,7 +445,9 @@
         heightSuggestions:['300','400','500','600'],
         unitOptions:chartDataFormat.unitOptions(),
         sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
-        textShow:false
+        textShow:false,
+        metricOptions: [],
+        metricStore: []
       }
     },
     components:{
@@ -1368,9 +1372,47 @@
       delMapping:function(index){
         this.editChart.param.valueMapping.mapping.splice(index,1)
       },
+      queryMetrics() {
+        this.metricOptions = [];
+        this.$get('prom/api/v1/label/__name__/values').then(response=>{
+          if(response.status == 'success'){
+            let metrics=response.data.sort();
+            let metricMap=new Map();
+            metrics.forEach((item)=>{
+              let key='';
+              if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
+                key=item.split('_')[0];
+              }else if(/^_\w*/.test(item)){
+                key='      ';
+              }else{
+                key=item;
+              }
+              if(metricMap.get(key)){
+                let values=metricMap.get(key);
+                values.push({label:item,value:item});
+              }else{
+                let values=[{label:item,value:item}];
+                metricMap.set(key,values);
+              }
+              this.metricStore.push({label:item,value:item,insertText:item})
+            });
+            for(let key of metricMap.keys()){
+              let option={
+                label:key,
+                value:key,
+              }
+              if(metricMap.get(key) && metricMap.get(key).length>1){
+                option.children=metricMap.get(key);
+              }
+              this.metricOptions.push(option);
+            }
+          }
+        })
+      },
     },
     created() {
       this.getSuggestMetric();
+      this.queryMetrics();
     },
     watch: {
       chart: {
@@ -1425,26 +1467,6 @@
           }
         }
       }
-      /*panelData: {
-        deep: true,
-        immediate: true,
-        handler(n, o) {
-          if(this.showPanel){
-            if (!this.showPanel.type) {
-              if (this.selectFirstPanel) {
-                this.selectFirstPanel = false;
-                this.panelId = n[0].id;
-              } else if (this.panelName) {
-                for (let i = 0; i < n.length; i++) {
-                  if (n[i].name == this.panelName) {
-                    this.panelId = n[i].id;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }*/
     },
     beforeDestroy() {
       if(this.$refs.chartTag){

nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue

@@ -67,13 +67,15 @@
         styleType: Number,
         historyParam:{type:Object},
         showRemove:{type:Boolean,default:true},
-        projectRightBox:{type:Boolean,default:false}
+        projectRightBox:{type:Boolean,default:false},
+        metricOptions: {type: Array},
+        metricStore: {type: Array}
       },
       data(){
         return {
           dropDownVisible:false,
-          metricStore:[],
+          //metricStore:[],
-          metricOptions:[],
+          //metricOptions:[],
           cascaderValue:'',
           errorMsg:null,
           appendMsg:null,
@@ -81,9 +83,9 @@
           firstAddEvent:true
         }
       },
-      created() {
+      /*created() {
         this.queryMetrics();
-      },
+      },*/
       methods:{
         closeDropdown() {
           this.dropDownVisible = false;
@@ -101,17 +103,12 @@
         toggleDropdown() {
           this.dropDownVisible = !this.dropDownVisible;
         },
-        queryMetrics:function(){
+        /*queryMetrics:function(){
-          this.metricOptions=[];
+          this.metrics.forEach((item)=>{
-          this.$get('prom/api/v1/label/__name__/values').then(response=>{
-            if(response.status == 'success'){
-              let metrics=response.data.sort();
-              let metricMap=new Map();
-              metrics.forEach((item)=>{
             let key='';
-                if(/^[a-zA-Z]+?_[a-zA-Z]*/.test(item)){
+            if(/^[a-zA-Z]+?_[a-zA-Z]*!/.test(item)){
               key=item.split('_')[0];
-                }else if(/^_\w*/.test(item)){
+            }else if(/^_\w*!/.test(item)){
               key='      ';
             }else{
               key=item;
@@ -125,19 +122,7 @@
             }
             this.metricStore.push({label:item,value:item,insertText:item})
           })
-              for(let key of metricMap.keys()){
+        },*/
-                let option={
-                  label:key,
-                  value:key,
-                }
-                if(metricMap.get(key) && metricMap.get(key).length>1){
-                  option.children=metricMap.get(key);
-                }
-                this.metricOptions.push(option);
-              }
-            }
-          })
-        },
         filterInput:function(queryString, cb){
           let metrics=Object.assign([],this.metricStore);
           let result=queryString?metrics.filter((item)=>{

nezha-fronted/src/libs/bus.js

@@ -255,6 +255,7 @@ export default new Vue({
           statisticsRlt = dataArray[dataArray.length-1]-dataArray[0];
         }
       }
+      dataArray = null;
       return statisticsRlt;
     },
     //将本地时区转为系统配置的时区