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

fix：修改 chart搜索功能 以及 panel新增chart 可以选择panel的问题

Browse Source
This commit is contained in:
zhangyu
2021-04-09 15:12:07 +08:00
parent 474c9199a2
commit 57b8d2d4a8
9 changed files with 57 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nezha-fronted/src/components/charts/chart-bar-statistics.vue
View File

@@ -293,7 +293,6 @@ export default {
},
// 设置数据, filter区分
setData (chartItem, seriesItem, panelId, filter, legend, area, errorMsg) {
console.log(chartItem, seriesItem, this.option, this.chartIndex)
this.data = chartItem
const self = this
if (chartItem.type === 'bar') {
@@ -312,12 +311,9 @@ export default {
axisLabel: {
margin: 8,
formatter: function (params) {
console.log(self.chartIndex);
console.log(document.getElementById('chart-' + self.chartIndex))
const dataLength = seriesItem.length || 1
const chartWidth = (document.getElementById('chart-' + chartItem.id).offsetWidth - 80) / dataLength// 容器宽 - padding - 空余
const length = Math.ceil((chartWidth) / 16)
console.log(chartWidth, length, dataLength , seriesItem.length)
let val = ''
if (params.length > length) {
val = params.substr(0, length) + '...'
@@ -329,7 +325,6 @@ export default {
}
}
const maxValueCopies = this.getMaxValue(seriesItem, chartItem)
console.log(maxValueCopies)
let dot = maxValueCopies.dot
const maxValue = maxValueCopies.maxValue
const copies = maxValueCopies.copies
@@ -365,7 +360,6 @@ export default {
// boundaryGap:[0,0.2]
}
const nweSeriesItem = []
console.log(legend)
seriesItem[0].data.forEach((item, index) => {
const obj = { ...seriesItem[0] }
const legendShow = legend[index].alias ? legend[index].alias : legend[index].name
@@ -374,7 +368,6 @@ export default {
obj.stack = true
nweSeriesItem.push(obj)
})
console.log(nweSeriesItem)
seriesItem = nweSeriesItem
}
if (filter) {
@@ -545,7 +538,6 @@ export default {
if (self.pieData[0].data.length > 0) {
getChart(self.chartIndex).clear()
getChart(self.chartIndex).setOption(self.option)// 创建图表
console.log(self.option)
self.noData = false
} else {
self.noData = true

1
nezha-fronted/src/components/charts/chart-detail.vue
View File

@@ -397,7 +397,6 @@ export default {
show: true
}
})
// console.info(labels);
return labels
},
replaceSplit (key) {

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

@@ -133,15 +133,6 @@ export default {
this.$nextTick(() => {
this.resize(chartItem)
})
this.startLoading()
if (/\{\{.*?\}\}/g.test(this.data.param.url)) {
this.showStatic = true
this.setStaticContent()
} else {
this.showStatic = false
this.setLoadFrame()
}
this.divFirstShow = true
},
setStaticContent: function () {

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

@@ -66,7 +66,7 @@
handle: '.chart-title'
}"
style="width: 100%;height: 100%">
<div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.title" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
<div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.name" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
<line-chart-block v-if="item.type === 'line' || (item.type === 'bar' && (!item.param.statistics || item.param.statistics === 'null')) ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
:from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
@on-refresh-data="refreshChart"
@@ -237,10 +237,13 @@ export default {
immediate: true,
handler (n) {
this.dataList = [...n]
this.dataTotalListBak = [...n]
this.$nextTick(() => {
this.dataList.forEach((item, index) => {
this.getChartData(item, index, this.filter)
// this.getChartData(item, index, this.filter)
this.setChartSize(item, index)
const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
this.handleElementInViewport(chartBox, 0, item, index, true)
})
})
}
@@ -300,7 +303,6 @@ export default {
this.tempDom.width = span.offsetWidth
},
start (event) {
// console.log('start', event, this.dataList);
event.item.querySelector('.chartTitle').style.background = '#d8dce1'
const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
@@ -324,12 +326,9 @@ export default {
chartTitle.style.background = '#d8dce1'
},
clone (event) {
// console.log('clone',event );
const canvas = event.item.querySelector('canvas')
// console.log('clone-canvas',canvas);
const canvasclone = event.clone.querySelector('canvas')
canvasclone.style.border = 'solid 1px yellow'
// console.log('clone-canvasclone',canvasclone);
if (canvas && canvasclone) {
const image = new Image()
image.src = canvas.toDataURL()
@@ -407,7 +406,7 @@ export default {
const chartListTmp = []
if (searchName && searchName.trim() !== '') {
this.dataTotalListBak.forEach((item) => {
if (item.title.indexOf(searchName) > -1) {
if (item.name.indexOf(searchName) > -1) {
item.isLoaded = false
item.isHide = false
chartListTmp.push(item)
@@ -496,186 +495,11 @@ export default {
// 获取panel详情数据,获取panel下所有chart列表
getData (params) {
const param = {
panelId: params.panelId,
query: params.query,
from: params.from
}
// alert-rule单独处理
if (param.from == this.$CONSTANTS.fromRoute.rule) {
this.dataList = []
this.dataList.push({
id: -10,
panelId: 0,
title: this.$t('alert.config.chart.affectEntity'),
span: 4,
height: 350,
type: 'alertRuleInfo',
prev: 0,
next: -9,
buildIn: 1,
draggable: false,
resizable: false,
editable: false
})
this.dataList.push({
id: -9,
panelId: 0,
title: this.$t('alert.config.chart.alertNumTrend'),
span: 8,
height: 350,
type: 'line',
prev: -10,
next: -1,
unit: 1,
buildIn: 1,
elements: [{
id: '',
expression: `nz_alert_nums{id="${this.detail.id}"}`,
type: ''
}]
})
this.$set(this.filter, 'start_time', bus.timeFormate(new Date().getTime() - 24 * 60 * 60 * 1000, 'yyyy-MM-dd hh:mm:ss'))
this.$set(this.filter, 'end_time', bus.timeFormate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss'))
this.$nextTick(() => {
this.dataList.forEach((item, index) => {
this.$set(item, 'from', params.from)
this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
})
})
return
}
// endpoint单独处理
if (param.from == this.$CONSTANTS.fromRoute.endpoint) {
this.dataList = []
// this.dataList.push({
// id: -8,
// panelId: 0,
// title: this.$t("alert.alertList"),
// span: 8,
// height: 700,
// type: "alertList",
// prev: -9,
// next: -1,
// buildIn: 1,
// draggable: false,
// resizable: false,
// editable: false,
// });
this.dataList.push({
id: -10,
panelId: 0,
dataId: this.additionalInfo.id,
title: this.$t('project.chart.endpointInfo'),
span: 6,
height: 350,
type: 'endpointInfo',
prev: 0,
next: -9,
buildIn: 1,
elements: [{
expression: `up{endpoint="${this.additionalInfo.id}"}`
}],
draggable: false,
resizable: false,
editable: false
})
this.dataList.push({
id: -9,
panelId: 0,
title: this.$t('asset.assetInfo'),
span: 6,
height: 350,
type: 'assetInfo',
prev: -10,
next: -8,
buildIn: 1,
draggable: false,
resizable: false,
editable: false
})
this.$nextTick(() => {
this.dataList.forEach((item, index) => {
this.$set(item, 'from', params.from)
this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
})
})
return
}
if (!param.query) delete param.query
// 根据panelId获得panel下的所有图表
this.$get('panel/' + params.panelId + '/charts').then(response => {
if (response.code === 200) {
response.data.list.forEach((item, index) => {
item.isLoaded = false
})
if (response.data.list) {
this.dataTotalListBak = response.data.list
} else {
this.dataTotalListBak = response.data
}
let chartListTmp = []
// 查询条件带name
if (this.filter.searchName && this.filter.searchName != '') {
const searchTitleStr = this.filter.searchName
this.dataTotalListBak.forEach((item) => {
if (item.title.indexOf(searchTitleStr) > -1) {
chartListTmp.push(item)
}
})
} else {
chartListTmp = this.dataTotalListBak
}
this.dataTotalList = [...chartListTmp]
this.dataList = [...this.dataTotalList]
this.dataList.push({
...this.dataList[0],
group: {
id: 1,
name: 'chart group'
},
type: 'group',
span: 12,
height: -1,
children: [...this.dataList]
})
// this.showShadow=false;
this.$nextTick(() => {
if (this.dataList.length > 0) {
this.dataList.forEach((item, index) => {
this.setChartSize(item, index)// 设置该图表宽度
this.$set(item, 'from', params.from)
if (param.from == this.$CONSTANTS.fromRoute.asset) {
if (item.type == 'assetInfo') {
this.$set(item, 'draggable', true)
this.$set(item, 'resizable', true)
}
} else if (param.from == this.$CONSTANTS.fromRoute.project) {
if (item.type == 'projectInfo') {
this.$set(item, 'draggable', true)
this.$set(item, 'resizable', true)
}
} else if (!param.from) {
this.$set(item, 'draggable', true)
this.$set(item, 'resizable', true)
this.$set(item, 'editable', true)
}
if (!item.isLoaded) {
// 获得当前显示在浏览器的图表，从后台获取数据
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
}
})
}
})
}
// this.getChartData(item, index, this.filter)
this.setChartSize(item, index)
const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
this.handleElementInViewport(chartBox, 0, item, index, true)
})
},
loadChartData (scrollTop) {
@@ -780,7 +604,7 @@ export default {
return
}
if (chartItem.type == 'projectInfo') {
chartItem.title = this.$t('project.chart.projectInfo')
chartItem.name = this.$t('project.chart.projectInfo')
this.getProjectInfoChartData(chartItem)
return
}
@@ -950,7 +774,7 @@ export default {
if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title
seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 }
}
if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
@@ -1049,7 +873,7 @@ export default {
// 无数据提示
/*
const currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
const errorMsg = `图表 ${chartItem.name} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({
duration: 15,
content: errorMsg,
@@ -1198,7 +1022,7 @@ export default {
}
if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title
seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 }
}
// 图表中每条线的名字,后半部分
@@ -1298,7 +1122,7 @@ export default {
getEndpointInfoChartData (chartInfo) {
const detail = []
this.$refs['editChart' + chartInfo.id][0].showLoad()
chartInfo.title = this.$t('project.chart.endpointInfo')
chartInfo.name = this.$t('project.chart.endpointInfo')
const basicInfo = JSON.parse(JSON.stringify(this.detail))
const basicInfoReq = new Promise((resolve, reject) => {
@@ -1378,7 +1202,7 @@ export default {
},
getAssetInfoChartData (chartInfo) {
const vm = this
chartInfo.title = this.$t('asset.assetInfo')
chartInfo.name = this.$t('asset.assetInfo')
const detail = []
if (!this.isModel) {
this.$refs['editChart' + chartInfo.id][0].showLoad()
@@ -1660,7 +1484,7 @@ export default {
console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变
console.log(item.title,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
console.log(item.name,(mainOffsetTop+mainHeight/3),"<",(windowScrollTop+windowHeight),((mainOffsetTop+mainHeight/3) < (windowScrollTop+windowHeight))) */
if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
const chartType = item.type
item.isLoaded = true

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

@@ -66,7 +66,7 @@
animation: 150,
handle: '.chart-title'
}" >
<div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.title" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
<div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-' + item.id" :key="item.id" :name="item.name" :ref="'chart' + item.id" :style="{marginBottom: extraMarginBottom}" v-for="(item, index) in dataList" v-show="!item.isHide">
<line-chart-block v-if="item.type === 'line' || (item.type === 'bar' && (!item.param.statistics || item.param.statistics === 'null')) ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
:from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
@on-refresh-data="refreshChart"
@@ -439,16 +439,26 @@ export default {
const chartListTmp = []
if (searchName && searchName.trim() !== '') {
this.dataTotalListBak.forEach((item) => {
if (item.title.indexOf(searchName) > -1) {
if (item.name.indexOf(searchName) > -1) {
item.isLoaded = false
item.isHide = false
chartListTmp.push(item)
} else {
item.isLoaded = true
item.isHide = true
if (item.type === 'group') {
item.children.forEach(groupItem => {
if (groupItem.name.indexOf(searchName) > -1) {
item.isLoaded = false
item.isHide = false
chartListTmp.push(item)
}
})
} else {
chartListTmp.push(item)
}
}
})
} else {
this.dataTotalListBak.forEach((item) => {
item.isLoaded = false
@@ -470,6 +480,9 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
this.handleElementInViewport(chartBox, 0, item, index, true)
}
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.searchCharts(searchName)
}
})
}
})
@@ -575,6 +588,9 @@ export default {
this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
}
})
})
return
@@ -634,6 +650,9 @@ export default {
this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
}
})
})
return
@@ -658,7 +677,7 @@ export default {
if (this.filter.searchName && this.filter.searchName != '') {
const searchTitleStr = this.filter.searchName
this.dataTotalListBak.forEach((item) => {
if (item.title.indexOf(searchTitleStr) > -1) {
if (item.name.indexOf(searchTitleStr) > -1) {
chartListTmp.push(item)
}
})
@@ -703,6 +722,9 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
}
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
}
})
}
})
@@ -717,6 +739,9 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
this.handleElementInViewport(chartBox, scrollTop, item, index)
}
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.loadChartData(scrollTop)
}
})
}
},
@@ -815,7 +840,7 @@ export default {
return
}
if (chartItem.type == 'projectInfo') {
chartItem.title = this.$t('project.chart.projectInfo')
chartItem.name = this.$t('project.chart.projectInfo')
this.getProjectInfoChartData(chartItem)
return
}
@@ -985,7 +1010,7 @@ export default {
if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title
seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 }
}
if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) {
@@ -1236,7 +1261,7 @@ export default {
}
if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title
seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 }
}
// 图表中每条线的名字,后半部分
@@ -1336,7 +1361,7 @@ export default {
getEndpointInfoChartData (chartInfo) {
const detail = []
this.$refs['editChart' + chartInfo.id][0].showLoad()
chartInfo.title = this.$t('project.chart.endpointInfo')
chartInfo.name = this.$t('project.chart.endpointInfo')
const basicInfo = JSON.parse(JSON.stringify(this.detail))
const basicInfoReq = new Promise((resolve, reject) => {
@@ -1416,7 +1441,7 @@ export default {
},
getAssetInfoChartData (chartInfo) {
const vm = this
chartInfo.title = this.$t('asset.assetInfo')
chartInfo.name = this.$t('asset.assetInfo')
const detail = []
if (!this.isModel) {
this.$refs['editChart' + chartInfo.id][0].showLoad()

1
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -756,7 +756,6 @@ export default {
const len = dataArg[0].data.length - 1
minTime = dataArg[0].data[0][0]
maxTime = dataArg[0].data[len][0]
// console.log('time==========',minTime,maxTime)
}
this.chartType = '' // 图表类型
if (chartInfo.type === 4) { // line,bar

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

@@ -611,7 +611,6 @@ export default {
const copies = maxValueCopies.copies
const unit = maxValueCopies.unit
const oldDot = maxValueCopies.oldDot
console.log(copies,maxValue,unit, chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5))
let option = {
title: {
show: false
@@ -1176,7 +1175,6 @@ export default {
let str = '<div>'
let sum = 0
let minusFlag = true
// console.log(params ,legend);
params.forEach((item, i) => {
const tip = self.legendMagicType[item.seriesIndex]
const color = self.bgColorList[item.seriesIndex]
@@ -1899,7 +1897,6 @@ export default {
}
const chartUnit = chartInfo.unit ? chartInfo.unit : 2
const unit = chartDataFormat.getUnit(chartUnit)
console.log(unit);
minValue = minValue > 0 ? 0 : minValue
maxValue = maxValue - minValue
maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii)

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

@@ -193,8 +193,8 @@
</el-form-item>
<!--group-->
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="group" v-if="editChart.type!=='group'">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.groupId" value-key="chartType" id="chart-box-group">
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="group">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.groupId" value-key="chartType" id="chart-box-group" :disabled="editChart.type==='group'">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in groupArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -896,7 +896,7 @@ export default {
const chartParams = params || this.editChart
chartParams.panelId = panelId
if (!chartParams.groupId) {
chartParams.groupId = -1
chartParams.groupId = 0
}
delete chartParams.panel
delete chartParams.children
@@ -1372,7 +1372,7 @@ export default {
this.showPicker = [{ bac: false, text: false }]
} else if (chartType === 'group') {
this.editChart.span = 12
this.editChart.height = ''
this.editChart.height = 100
this.setIsGroup()
} else {
this.setIsOtherChart()

2
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -224,7 +224,7 @@ export default {
this.filter.searchName = ''
// this.$refs.searchInput.select();
this.showPanel = val
this.showPanel.type = 'panel'
this.showPanel.type = 'dashboard'
this.filter.panelId = this.showPanel.id
// let curTime = this.$refs.calendarPanel.getCurrentTime();
const curTime = this.searchTime