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

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

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

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

@@ -133,15 +133,6 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.resize(chartItem) 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 this.divFirstShow = true
}, },
setStaticContent: function () { setStaticContent: function () {

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

@@ -66,7 +66,7 @@
handle: '.chart-title' handle: '.chart-title'
}" }"
style="width: 100%;height: 100%"> 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" <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" :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
@on-refresh-data="refreshChart" @on-refresh-data="refreshChart"
@@ -237,10 +237,13 @@ export default {
immediate: true, immediate: true,
handler (n) { handler (n) {
this.dataList = [...n] this.dataList = [...n]
this.dataTotalListBak = [...n]
this.$nextTick(() => { this.$nextTick(() => {
this.dataList.forEach((item, index) => { this.dataList.forEach((item, index) => {
this.getChartData(item, index, this.filter) // this.getChartData(item, index, this.filter)
this.setChartSize(item, index) 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 this.tempDom.width = span.offsetWidth
}, },
start (event) { start (event) {
// console.log('start', event, this.dataList);
event.item.querySelector('.chartTitle').style.background = '#d8dce1' event.item.querySelector('.chartTitle').style.background = '#d8dce1'
const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content') const projectAndAssetFeatureInfos = event.item.querySelectorAll('.feature-content')
if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) { if (projectAndAssetFeatureInfos && projectAndAssetFeatureInfos.length > 0) {
@@ -324,12 +326,9 @@ export default {
chartTitle.style.background = '#d8dce1' chartTitle.style.background = '#d8dce1'
}, },
clone (event) { clone (event) {
// console.log('clone',event );
const canvas = event.item.querySelector('canvas') const canvas = event.item.querySelector('canvas')
// console.log('clone-canvas',canvas);
const canvasclone = event.clone.querySelector('canvas') const canvasclone = event.clone.querySelector('canvas')
canvasclone.style.border = 'solid 1px yellow' canvasclone.style.border = 'solid 1px yellow'
// console.log('clone-canvasclone',canvasclone);
if (canvas && canvasclone) { if (canvas && canvasclone) {
const image = new Image() const image = new Image()
image.src = canvas.toDataURL() image.src = canvas.toDataURL()
@@ -407,7 +406,7 @@ export default {
const chartListTmp = [] const chartListTmp = []
if (searchName && searchName.trim() !== '') { if (searchName && searchName.trim() !== '') {
this.dataTotalListBak.forEach((item) => { this.dataTotalListBak.forEach((item) => {
if (item.title.indexOf(searchName) > -1) { if (item.name.indexOf(searchName) > -1) {
item.isLoaded = false item.isLoaded = false
item.isHide = false item.isHide = false
chartListTmp.push(item) chartListTmp.push(item)
@@ -496,186 +495,11 @@ export default {
// 获取panel详情数据,获取panel下所有chart列表 // 获取panel详情数据,获取panel下所有chart列表
getData (params) { getData (params) {
const param = { this.dataList.forEach((item, index) => {
panelId: params.panelId, // this.getChartData(item, index, this.filter)
query: params.query, this.setChartSize(item, index)
from: params.from const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
} this.handleElementInViewport(chartBox, 0, item, index, true)
// 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)
}
})
}
})
}
}) })
}, },
loadChartData (scrollTop) { loadChartData (scrollTop) {
@@ -780,7 +604,7 @@ export default {
return return
} }
if (chartItem.type == 'projectInfo') { if (chartItem.type == 'projectInfo') {
chartItem.title = this.$t('project.chart.projectInfo') chartItem.name = this.$t('project.chart.projectInfo')
this.getProjectInfoChartData(chartItem) this.getProjectInfoChartData(chartItem)
return return
} }
@@ -950,7 +774,7 @@ export default {
if (chartInfo.type === 'stackArea') { if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line' seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 } seriesItem.theData.areaStyle = { opacity: 0.3 }
} }
if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) { 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 currentInfo = chartItem.elements[innerPos];
const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`; const errorMsg = `图表 ${chartItem.name} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
this.$message.warning({ this.$message.warning({
duration: 15, duration: 15,
content: errorMsg, content: errorMsg,
@@ -1198,7 +1022,7 @@ export default {
} }
if (chartInfo.type === 'stackArea') { if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line' seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 } seriesItem.theData.areaStyle = { opacity: 0.3 }
} }
// 图表中每条线的名字,后半部分 // 图表中每条线的名字,后半部分
@@ -1298,7 +1122,7 @@ export default {
getEndpointInfoChartData (chartInfo) { getEndpointInfoChartData (chartInfo) {
const detail = [] const detail = []
this.$refs['editChart' + chartInfo.id][0].showLoad() 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 basicInfo = JSON.parse(JSON.stringify(this.detail))
const basicInfoReq = new Promise((resolve, reject) => { const basicInfoReq = new Promise((resolve, reject) => {
@@ -1378,7 +1202,7 @@ export default {
}, },
getAssetInfoChartData (chartInfo) { getAssetInfoChartData (chartInfo) {
const vm = this const vm = this
chartInfo.title = this.$t('asset.assetInfo') chartInfo.name = this.$t('asset.assetInfo')
const detail = [] const detail = []
if (!this.isModel) { if (!this.isModel) {
this.$refs['editChart' + chartInfo.id][0].showLoad() this.$refs['editChart' + chartInfo.id][0].showLoad()
@@ -1660,7 +1484,7 @@ export default {
console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变 console.log("___isInView____","元素高度mainHeight="+mainHeight)//不变
console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变 console.log("___isInView____","scrollTop页面滚动的距离windowScrollTop="+windowScrollTop)//变
console.log("___isInView____","浏览器可见区域高度windowHeight="+windowHeight)//不变 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)) { if ((mainOffsetTop + mainHeight / 3) < (windowScrollTop + windowHeight)) {
const chartType = item.type const chartType = item.type
item.isLoaded = true item.isLoaded = true

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

@@ -66,7 +66,7 @@
animation: 150, animation: 150,
handle: '.chart-title' 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" <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" :from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
@on-refresh-data="refreshChart" @on-refresh-data="refreshChart"
@@ -439,14 +439,24 @@ export default {
const chartListTmp = [] const chartListTmp = []
if (searchName && searchName.trim() !== '') { if (searchName && searchName.trim() !== '') {
this.dataTotalListBak.forEach((item) => { this.dataTotalListBak.forEach((item) => {
if (item.title.indexOf(searchName) > -1) { if (item.name.indexOf(searchName) > -1) {
item.isLoaded = false item.isLoaded = false
item.isHide = false item.isHide = false
chartListTmp.push(item) chartListTmp.push(item)
} else { } else {
item.isLoaded = true item.isLoaded = true
item.isHide = true item.isHide = true
chartListTmp.push(item) 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 { } else {
@@ -470,6 +480,9 @@ export default {
const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0]; const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
this.handleElementInViewport(chartBox, 0, item, index, true) 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)// 设置该图表宽度 this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-' + item.id) const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index) this.handleElementInViewport(chartBox, 0, item, index)
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
}
}) })
}) })
return return
@@ -634,6 +650,9 @@ export default {
this.setChartSize(item, index)// 设置该图表宽度 this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-' + item.id) const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index) this.handleElementInViewport(chartBox, 0, item, index)
if (item.type === 'group') {
this.$refs['editChart' + item.id][0].$refs.listGroup.getData(params)
}
}) })
}) })
return return
@@ -658,7 +677,7 @@ export default {
if (this.filter.searchName && this.filter.searchName != '') { if (this.filter.searchName && this.filter.searchName != '') {
const searchTitleStr = this.filter.searchName const searchTitleStr = this.filter.searchName
this.dataTotalListBak.forEach((item) => { this.dataTotalListBak.forEach((item) => {
if (item.title.indexOf(searchTitleStr) > -1) { if (item.name.indexOf(searchTitleStr) > -1) {
chartListTmp.push(item) chartListTmp.push(item)
} }
}) })
@@ -703,6 +722,9 @@ export default {
const chartBox = document.getElementById('chart-' + item.id) const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index) 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]; const chartBox = document.getElementById('chart-' + item.id)// this.$refs['editChart'+item.id][0];
this.handleElementInViewport(chartBox, scrollTop, item, index) 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 return
} }
if (chartItem.type == 'projectInfo') { if (chartItem.type == 'projectInfo') {
chartItem.title = this.$t('project.chart.projectInfo') chartItem.name = this.$t('project.chart.projectInfo')
this.getProjectInfoChartData(chartItem) this.getProjectInfoChartData(chartItem)
return return
} }
@@ -985,7 +1010,7 @@ export default {
if (chartInfo.type === 'stackArea') { if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line' seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 } seriesItem.theData.areaStyle = { opacity: 0.3 }
} }
if ((chartInfo.type === 'line' || chartInfo.type === 'stackArea' || chartInfo.type === 'bar') && chartInfo.param && chartInfo.param.threshold) { 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') { if (chartInfo.type === 'stackArea') {
seriesItem.theData.type = 'line' seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartInfo.title seriesItem.theData.stack = chartInfo.name
seriesItem.theData.areaStyle = { opacity: 0.3 } seriesItem.theData.areaStyle = { opacity: 0.3 }
} }
// 图表中每条线的名字,后半部分 // 图表中每条线的名字,后半部分
@@ -1336,7 +1361,7 @@ export default {
getEndpointInfoChartData (chartInfo) { getEndpointInfoChartData (chartInfo) {
const detail = [] const detail = []
this.$refs['editChart' + chartInfo.id][0].showLoad() 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 basicInfo = JSON.parse(JSON.stringify(this.detail))
const basicInfoReq = new Promise((resolve, reject) => { const basicInfoReq = new Promise((resolve, reject) => {
@@ -1416,7 +1441,7 @@ export default {
}, },
getAssetInfoChartData (chartInfo) { getAssetInfoChartData (chartInfo) {
const vm = this const vm = this
chartInfo.title = this.$t('asset.assetInfo') chartInfo.name = this.$t('asset.assetInfo')
const detail = [] const detail = []
if (!this.isModel) { if (!this.isModel) {
this.$refs['editChart' + chartInfo.id][0].showLoad() 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 const len = dataArg[0].data.length - 1
minTime = dataArg[0].data[0][0] minTime = dataArg[0].data[0][0]
maxTime = dataArg[0].data[len][0] maxTime = dataArg[0].data[len][0]
// console.log('time==========',minTime,maxTime)
} }
this.chartType = '' // 图表类型 this.chartType = '' // 图表类型
if (chartInfo.type === 4) { // line,bar 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 copies = maxValueCopies.copies
const unit = maxValueCopies.unit const unit = maxValueCopies.unit
const oldDot = maxValueCopies.oldDot const oldDot = maxValueCopies.oldDot
console.log(copies,maxValue,unit, chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5))
let option = { let option = {
title: { title: {
show: false show: false
@@ -1176,7 +1175,6 @@ export default {
let str = '<div>' let str = '<div>'
let sum = 0 let sum = 0
let minusFlag = true let minusFlag = true
// console.log(params ,legend);
params.forEach((item, i) => { params.forEach((item, i) => {
const tip = self.legendMagicType[item.seriesIndex] const tip = self.legendMagicType[item.seriesIndex]
const color = self.bgColorList[item.seriesIndex] const color = self.bgColorList[item.seriesIndex]
@@ -1899,7 +1897,6 @@ export default {
} }
const chartUnit = chartInfo.unit ? chartInfo.unit : 2 const chartUnit = chartInfo.unit ? chartInfo.unit : 2
const unit = chartDataFormat.getUnit(chartUnit) const unit = chartDataFormat.getUnit(chartUnit)
console.log(unit);
minValue = minValue > 0 ? 0 : minValue minValue = minValue > 0 ? 0 : minValue
maxValue = maxValue - minValue maxValue = maxValue - minValue
maxValue = chartDataFormat.formatDatas(maxValue, unit.type, 'ceil', unit.ascii) 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> </el-form-item>
<!--group--> <!--group-->
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="group" v-if="editChart.type!=='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"> <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"> <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> <span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option> </el-option>
@@ -896,7 +896,7 @@ export default {
const chartParams = params || this.editChart const chartParams = params || this.editChart
chartParams.panelId = panelId chartParams.panelId = panelId
if (!chartParams.groupId) { if (!chartParams.groupId) {
chartParams.groupId = -1 chartParams.groupId = 0
} }
delete chartParams.panel delete chartParams.panel
delete chartParams.children delete chartParams.children
@@ -1372,7 +1372,7 @@ export default {
this.showPicker = [{ bac: false, text: false }] this.showPicker = [{ bac: false, text: false }]
} else if (chartType === 'group') { } else if (chartType === 'group') {
this.editChart.span = 12 this.editChart.span = 12
this.editChart.height = '' this.editChart.height = 100
this.setIsGroup() this.setIsGroup()
} else { } else {
this.setIsOtherChart() this.setIsOtherChart()

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

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