gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
陈劲松
2020-11-22 16:51:30 +08:00
committed by chenjinsong
parent cd72aee673
commit 82a4c75d3c
11 changed files with 115 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -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: {
@@ -230,128 +230,18 @@
this.dataListDragTmp = [...this.dataList];
},
end(event) {
//console.info("end event:", event)
if(this.dataList.length===1){return}//解决当元素只有一个移动会报错的问题
let item = event.item;
let oldIndex = event.oldIndex;
let newIndex = event.newIndex;
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;
}
if (event.oldIndex !== event.newIndex) {
let newWeights = [];
this.dataList.forEach((item, index) => {
item.weight = index;
newWeights.push({id: item.id, weight: index});
});
//console.log('从前往后移动：prev元素在总列表中之后的元素的index='+prevItemIndexInTotal)
if(prevItemIndexInTotal<this.dataTotalListBak.length-1){//总列表中：移动之后的当前元素前面的元素之后有元素
let nextItem = this.dataTotalListBak[prevItemIndexInTotal+1];
newItem.next = nextItem.id;
}else{//之后无元素
newItem.next = -1;
}
}else {//oldIndex = newIndex
this.$put('panel/'+ this.pagePanelId+'/charts/weights', newWeights).then(response => {
if (response.code !== 200) {
}
//更新图表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 = [];
const tableData = [];
const sumData = {
let legend = [];
let tableData = [];
/*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();
},

6
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -379,8 +379,8 @@
}
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
seriesItem=seriesItem.map(item=>{
if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
seriesItem && (seriesItem = seriesItem.map(item=>{
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;//将列表的查询时间复制给全屏的查询时间

4
nezha-fronted/src/components/charts/chart.scss
View File

@@ -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;
}
}*/

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

@@ -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.forEach((t,i)=>{t.color = this.bgColorList[i]});
legend && this.setColor(legend.length);
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条
@@ -1721,7 +1721,6 @@
this.chartInfo = {};
this.seriesItem = []; // 保存信息
this.seriesItemArr = [];// 初次加载的数据
this.seriesLength = 20;
this.seriesItemScreen = [];
this.seriesItemArrScreen = [];
this.legend = [];

2
nezha-fronted/src/components/common/exportXLSX.vue
View File

@@ -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>

2
nezha-fronted/src/components/common/language/en.js
View File

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

4
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -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]*$/

2
nezha-fronted/src/components/page/config/system.vue
View File

@@ -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' } /*检验网址是否正确*/
]
},

64
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -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){

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

@@ -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:[],
metricOptions:[],
//metricStore:[],
//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(){
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)=>{
/*queryMetrics:function(){
this.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)=>{

1
nezha-fronted/src/libs/bus.js
View File

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