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

feat:chart添加group

Browse Source
This commit is contained in:
zhangyu
2021-04-07 16:41:11 +08:00
parent 9198219262
commit 37491595bb
16 changed files with 169 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,7 @@
<el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartInfo.title}}</span>
<span class="chart-title-text">{{chartInfo.name}}</span>
<span class="chart-title-icon" v-if="data.editable"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" v-if="data.editable" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -60,7 +60,7 @@
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenDialogClose" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<span class="nz-dialog-title">{{data.name}}</span>
<div class="float-right panel-calendar dialog-tool">
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :show-time-picker="false" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="alert-chart"></pick-time>
</div>

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

@@ -20,7 +20,7 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span></span>
<span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.name}}</span></span>
</div>
<div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>

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

@@ -11,7 +11,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -30,7 +30,7 @@
</div>
<div :id="'chartUrl'+chartIndex" class="mt-10 url-container">
<chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter" :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId"></chart-list-group>
<chart-list-group :groupList.sync="chartData.children" :panel-lock="panelLock" :filterParent="filter" :class="{'show-top':false}" :hasGroup="false" :from="from" ref="listGroup" :panelId="panelId" @on-edit-group-chart="editGroupItem" @on-remove-chart="removeChartGroup" @moveGroupItem="moveGroupItem"></chart-list-group>
</div>
<div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
<div :id="'staticContainer'+chartIndex" class="center-content"></div>
@@ -104,6 +104,9 @@ export default {
const chartBox = document.getElementById('chartUrlDiv' + this.chartIndex)
chartBox.querySelector('.url-container').style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`
},
setData (chartItem) {
this.data = chartItem
},
showLoad (chartItem) {
this.data = chartItem
this.panelIdInner = this.panelId
@@ -196,11 +199,18 @@ export default {
this.dropdownMenuShow = false
this.$emit('on-edit-chart-block', this.data.id)
},
editGroupItem (chart) {
this.$emit('on-edit-group-chart', chart)
},
// 删除该图表
removeChart () {
this.dropdownMenuShow = false
this.$emit('on-remove-chart-block', this.data.id)
},
// 删除该图表
removeChartGroup (chart) {
this.$emit('on-remove-group-chart', chart)
},
clickos () {
this.dropdownMenuShow = false
},
@@ -237,6 +247,9 @@ export default {
})
})
},
moveGroupItem (groupList) {
this.$emit('moveGroupItem', { groupId: this.data.id, children: groupList })
},
setLoadFrameFull () {
const that = this
this.$nextTick(() => {

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

@@ -57,7 +57,7 @@
dragClass:'drag-chart-class',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-group-ghost',
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
@@ -66,7 +66,7 @@
handle: '.chart-title'
}"
style="width: 100%;height: 100%">
<div :class="{'drag-disabled': !draggable,'chartBox':true}" :id="'chart-group-' + 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.title" :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.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
:from="from" :ref="'editChart'+item.id" :temp-dom="tempDom"
@on-refresh-data="refreshChart"
@@ -220,14 +220,15 @@ export default {
},
watch: {
groupList: {
immediate: true,
handler (n) {
this.dataList = [...n]
console.log(this.dataList)
this.$nextTick(() => {
this.dataList.forEach((item, index) => {
if (item.type === 'text') {
console.log(item)
}
console.log(item, index, this.filter)
this.getChartData(item, index, this.filter)
this.setChartSize(item, index)
})
@@ -303,12 +304,7 @@ export default {
},
end (event) {
if (event.oldIndex !== event.newIndex) {
const newWeights = []
this.dataList.forEach((item, index) => {
item.weight = index
newWeights.push({ id: item.id, weight: index })
})
this.$put('panel/' + this.pagePanelId + '/charts/weights', newWeights)
this.$emit('moveGroupItem', this.dataList)
// 处理所有group数据后 调用上层移动 保存
}
},
@@ -430,7 +426,7 @@ export default {
this.setChartSize(item.span, index)// 设置该图表宽度
if (!item.isLoaded) {
// 获得当前显示在浏览器的图表，从后台获取数据
const chartBox = document.getElementById('chart-group-' + 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)
}
})
@@ -536,7 +532,7 @@ export default {
this.dataList.forEach((item, index) => {
this.$set(item, 'from', params.from)
this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-group-' + item.id)
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
})
})
@@ -595,7 +591,7 @@ export default {
this.dataList.forEach((item, index) => {
this.$set(item, 'from', params.from)
this.setChartSize(item, index)// 设置该图表宽度
const chartBox = document.getElementById('chart-group-' + item.id)
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
})
})
@@ -665,7 +661,7 @@ export default {
}
if (!item.isLoaded) {
// 获得当前显示在浏览器的图表，从后台获取数据
const chartBox = document.getElementById('chart-group-' + item.id)
const chartBox = document.getElementById('chart-' + item.id)
this.handleElementInViewport(chartBox, 0, item, index)
}
})
@@ -679,7 +675,7 @@ export default {
this.dataList.forEach((item, index) => {
if (!item.isLoaded) {
// 获得当前显示在浏览器的图表，从后台获取数据
const chartBox = document.getElementById('chart-group-' + 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)
}
})
@@ -1536,7 +1532,7 @@ export default {
// 设置图表的尺寸
setChartSize (item, index) {
this.$nextTick(() => {
const chartBox = document.getElementById('chart-group-' + item.id)
const chartBox = document.getElementById('chart-' + item.id)
if (chartBox) {
chartBox.style.width = `${(item.span / 12) * 100}%`
chartBox.style.height = `${item.height}px`
@@ -1639,8 +1635,9 @@ export default {
editData (chartId) {
// 获取该id下chart的相关信息
const chart = this.dataList.find(item => item.id === chartId)
console.log(chart)
if (chart) {
this.$emit('on-edit-chart', chart)
this.$emit('on-edit-group-chart', chart)
}
},

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

@@ -180,6 +180,9 @@
:panelLock="panelLock"
:filter="filter"
@on-edit-chart-block="editData"
@on-edit-group-chart="editDataGroup"
@on-remove-group-chart="removeChartGroup"
@moveGroupItem="moveGroupItem"
:panel-id="filter.panelId"
:chart-data="item"
:dataList='dataList'
@@ -293,12 +296,41 @@ export default {
end (event) {
if (event.oldIndex !== event.newIndex) {
const newWeights = []
let i = 0
this.dataList.forEach((item, index) => {
item.weight = index
newWeights.push({ id: item.id, weight: index })
if (item.type === 'group') {
item.children.forEach(chart => {
i++
newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
})
this.$put('panel/' + this.pagePanelId + '/charts/weights', newWeights)
}
})
const panelId = this.pagePanelId
this.$put('/visual/panel/chart/weights', { panelId, charts: newWeights })
}
},
moveGroupItem (group) {
const newWeights = []
let i = 0
this.dataList.forEach((item, index) => {
item.weight = index
newWeights.push({ id: item.id, weight: index })
if (item.type === 'group' && group.groupId!==item.id) {
item.children.forEach(chart => {
i++
newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
})
} else if (item.type === 'group' && group.groupId == item.id){
group.children.forEach(chart => {
i++
newWeights.push({ id: chart.id, groupId: item.id, weight: this.dataList.length + i })
})
}
})
const panelId = this.pagePanelId
this.$put('/visual/panel/chart/weights', { panelId, charts: newWeights })
},
move (event, orgin) {
const dragClass = document.querySelector('.drag-chart-class')// drag-chart-class:yellow chart-ghost:green fallback-class choose-class:purple
@@ -591,12 +623,19 @@ export default {
}
if (!param.query) delete param.query
// 根据panelId获得panel下的所有图表
this.$get('visual/panel/chart?id=' + params.panelId).then(response => {
this.$get('visual/panel/chart?panelId=' + params.panelId).then(response => {
if (response.code === 200) {
response.data.list.forEach((item, index) => {
item.isLoaded = false
})
response.data.list.forEach((item, index) => { // 把chart放入对应的group
if (item.type === 'group') {
item.children = response.data.list.filter(item1 => item1.groupId === item.id)
}
})
response.data.list = response.data.list.filter((item) => item.groupId === -1 || !item.groupId) // 处理外层存在的groupItem
console.log(response.data.list)
if (response.data.list) {
this.dataTotalListBak = response.data.list
} else {
@@ -762,6 +801,7 @@ export default {
getChartData (chartInfo, pos, filterType) {
const chartItem = chartInfo
if (chartItem.type === 'group') {
this.$refs['editChart' + chartItem.id][0].setData(chartItem)
return
}
if (chartItem.type === 'assetInfo') {
@@ -1559,6 +1599,12 @@ export default {
this.$emit('on-remove-chart', chart)
}
},
// 删除图表
removeChartGroup (chart) { // from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
if (chart) {
this.$emit('on-remove-chart', chart)
}
},
// 复制图表
duplicateChart (chartId, duplicateChartBack) {
const duplicateChartId = duplicateChartBack.id
@@ -1642,12 +1688,19 @@ export default {
// 编辑图表
editData (chartId) {
// 获取该id下chart的相关信息
const chart = this.dataList.find(item => item.id === chartId)
const chart = this.dataList.find(item => {
return item.id === chartId
})
if (chart) {
this.$emit('on-edit-chart', chart)
}
},
// 编辑 group下的图表
editDataGroup (chart) {
if (chart) {
this.$emit('on-edit-chart', chart)
}
},
editChartForDrag (chartItem) {
const chart = this.dataList.find(item => item.id === chartItem.id)
chart.span = chartItem.span

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

@@ -23,7 +23,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -52,7 +52,7 @@
:visible.sync="screenModal"
width="96%" @close="screenModal = false" :modal-append-to-body="false">
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<span class="nz-dialog-title">{{data.name}}</span>
<div class="float-right panel-calendar dialog-tool">
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
@@ -423,10 +423,10 @@ export default {
const boxWidth = size.contentSize[0]
const boxHeight = size.contentSize[1]
if (!self.screenModal) { // 本地显示
const chartDom = document.getElementById(self.chartData.title + '_' + self.chartData.id)
const chartDom = document.getElementById(self.chartData.name + '_' + self.chartData.id)
if (chartDom) {
// const parTop = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetTop
const parleft = document.getElementById(self.chartData.title + '_' + self.chartData.id).offsetLeft
const parleft = document.getElementById(self.chartData.name + '_' + self.chartData.id).offsetLeft
const parent = document.getElementById('tableList')
// const parClientHeight = parent.clientHeight// 可视高度

4
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -23,7 +23,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -51,7 +51,7 @@
:visible.sync="screenModal"
width="96%" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<span class="nz-dialog-title">{{data.name}}</span>
<div class="float-right panel-calendar dialog-tool">
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>

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

@@ -24,7 +24,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze "
:class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
@@ -78,7 +78,7 @@
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal"
width="96%" @close="screenModal = false">
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<span class="nz-dialog-title">{{data.name}}</span>
<div class="float-right panel-calendar dialog-tool">
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"-->
<!-- @change="dateChange"></time-picker>-->

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

@@ -11,7 +11,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -40,7 +40,7 @@
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @opened="initDialog" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{chartData.title}}</span>
<span class="nz-dialog-title">{{chartData.name}}</span>
</div>
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
style="z-index:5000;padding-bottom:6px;"

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

@@ -54,7 +54,7 @@
</span>
</el-popover>
<div slot="title" class="chart-title">
<span class="nz-dialog-title chart-title-text">{{chart.title}}</span>
<span class="nz-dialog-title chart-title-text">{{chart.name}}</span>
<div class="float-right panel-calendar dialog-tool" v-if="chart.type!=='url' && chart.type !=='alertList'">
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange" v-if="chart.type !='text'"></time-picker>-->
@@ -473,7 +473,7 @@ export default {
}
if (chartItem.type === 'stackArea') {
seriesItem.theData.type = 'line'
seriesItem.theData.stack = chartItem.title
seriesItem.theData.stack = chartItem.name
seriesItem.theData.areaStyle = { opacity: 0.3 }
}
if (chartItem.type === 'endpointInfo') {
@@ -1411,7 +1411,7 @@ export default {
}
if (this.chart.type === 'stackArea') {
seriesItem.theData.type = 'line'
seriesItem.theData.stack = this.chart.title
seriesItem.theData.stack = this.chart.name
seriesItem.theData.areaStyle = { opacity: 0.3 }
}
// 图表中每条线的名字,后半部分

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

@@ -37,7 +37,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze "></i></span>
</span>
<ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow" v-show="dropdownMenuShow" >
@@ -1555,7 +1555,7 @@ export default {
} else if (type === 'dashboard') { // 概览模式,指标概览中使用
// 概览模式,需要区分单独一个和多个
if (this.stableFilter.chartCount === 'multiple') {
let query = encodeURIComponent(this.data.title)
let query = encodeURIComponent(this.data.name)
if (this.chartInfo.type === 'line' || this.chartInfo.type === 'bar' || this.chartInfo.type === 'stackArea') { // 如果是这三个 默认给connected
this.chartInfo.param.nullType = this.chartInfo.param.nullType || 'connected'
query += '&nullType=' + this.chartInfo.param.nullType

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

@@ -11,7 +11,7 @@
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.name}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
@@ -40,7 +40,7 @@
:visible.sync="screenModal"
width="96%" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<span class="nz-dialog-title">{{data.name}}</span>
</div>
<div class="rich-text-screen-container" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="text-content" >

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

@@ -31,8 +31,8 @@
<export-excel
id="panel-tab"
export-file-name="chart"
export-url="/panel/export"
import-url="/panel/import"
export-url="/visual/panel/export"
import-url="/visual/panel/import"
:params="filter"
:from="$CONSTANTS.fromRoute.asset"
:link="obj"

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

@@ -402,7 +402,7 @@ export const chartResizeTool = {
if (data.height != originalData.height || data.span != originalData.span) {
originalData.height = data.height
originalData.span = data.span
vm.$put('panel/' + vm.panelIdInner + '/charts/modify', originalData)
vm.$put('/visual/panel/chart/modify', originalData)
}
// 关闭背景阴影
shadow.classList.remove('resize-shadow-active')

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

@@ -199,15 +199,15 @@
</el-form-item>
<!--group-->
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="type">
<el-select @change="chartTypeChange" class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.type" value-key="chartType" id="chart-box-group">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList">
<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-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>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text' && editChart.type !=='url'">
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'">
<el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected" filterable id="chart-box-unit"
placeholder=""
popper-class="dc-dropdown"
@@ -220,7 +220,7 @@
<!--type unit end-->
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
<el-select class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
<el-select class="right-box-row-with-btn" :disabled="isGroup" placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
<el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
@@ -232,6 +232,7 @@
id="chart-box-height"
:fetch-suggestions="querySearch"
@select="handleSelect"
:disabled="isGroup"
placeholder=""
popper-class="popper-z-index no-style-class"
size="mini"
@@ -273,7 +274,7 @@
<el-input type="textarea" v-model="editChart.remark"/>
</el-form-item>
<div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'">
<div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'">
<span>{{$t('alert.config.expr')}}</span>
<span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="!isSingleStat">
<span class="create-square-box">
@@ -291,7 +292,7 @@
<alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
</el-row>
<div id="chart-box-expression-box" style="margin-bottom: 20px">
<el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'">
<el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'&& editChart.type != 'group'">
<promql-input
:expression-list="expressions"
:id="promqlKeys[index-1]"
@@ -488,7 +489,10 @@ export default {
optionBtn: {
save: false
},
editChart: {},
editChart: {
name: '',
remark: ''
},
filterPanel: '',
statisticsList: this.$CONSTANTS.statisticsList,
@@ -503,6 +507,7 @@ export default {
isUrl: false,
isSingleStat: false,
isAlert: false,
isGroup: false,
rules: {
panelName: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
@@ -870,12 +875,20 @@ export default {
chartParams.groupId = -1
}
delete chartParams.panel
if (chartParams.type === 'group') {
chartParams.elements = [{
expression: 'Hadoop_DataNode_BlockChecksumOpNumOps',
id: '',
legend: '',
type: 'expert'
}]
}
this.$post('visual/panel/chart', chartParams).then(response => {
if (response.code === 200) {
this.esc()
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
this.$refs.chartForm.resetFields()// 清空表单
// this.$refs.chartForm.resetFields()// 清空表单
this.$emit('on-create-success', 'create', response.data, chartParams, { id: this.panelId, name: this.panelName })
this.esc()
} else {
if (response.msg) {
this.$message.error(response.msg)
@@ -1195,21 +1208,31 @@ export default {
this.isUrl = true
this.isSingleStat = false
this.isAlert = false
this.isGroup = false
},
setIsSingleStat () {
this.isUrl = false
this.isSingleStat = true
this.isAlert = false
this.isGroup = false
},
setIsAlertList () {
this.isAlert = true
this.isUrl = false
this.isSingleStat = false
this.isGroup = false
},
setIsOtherChart () {
this.isSingleStat = false
this.isUrl = false
this.isAlert = false
this.isGroup = false
},
setIsGroup () {
this.isSingleStat = false
this.isUrl = false
this.isAlert = false
this.isGroup = true
},
// 编辑chart时使用, set_tdata
editData (data, panelId) {
@@ -1355,6 +1378,10 @@ export default {
}
}
this.showPicker = [{ bac: false, text: false }]
} else if (chartType === 'group') {
this.editChart.span = 12
this.editChart.height = -1
this.setIsGroup()
} else {
this.setIsOtherChart()
if (chartType === 'bar' || chartType === 'line' || chartType === 'stackArea') {
@@ -1669,9 +1696,13 @@ export default {
}
this.editChart = JSON.parse(JSON.stringify(n))
this.editChart.name = this.editChart.name || ''
if (!n.groupId || n.groupId == -1) {
this.editChart.groupId = ''
}
if (typeof (this.editChart.param) === 'string') {
this.editChart.param = JSON.parse(this.editChart.param)
}
if (!n.param.nullType) {
this.editChart.param.nullType = 'connected'
}
@@ -1699,6 +1730,16 @@ export default {
if (this.showPanel.id) {
this.panelId = this.showPanel.id
}
this.$get('visual/panel/chart?id= ' + this.panelId).then(response => {
if (response.code === 200) {
this.groupArr = []
response.data.list.forEach((item, index) => {
if (item.type === 'group') {
this.groupArr.push({ id: item.id, name: item.name })
}
})
}
})
if (n.id) {
this.editData(this.editChart, this.showPanel.id)
} else {

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

@@ -7,7 +7,7 @@
<template v-else>
<div class="top-tool-main-left">
<select-panel :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'" :show-panel="showPanel"
@deletePanel="del" @editPanel="edit" @selectPanel="panelChange" ref="selectPanel" style="width: 300px;">
@deletePanel="del" @editPanel="edit" @selectPanel="panelChange" ref="selectPanel" style="width: 300px;display: inline-block">
<template v-slot:header>
<div class="panel-select-header">
<el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px; margin-right: 5px;" v-model="filterPanel" id="panel-list-search"></el-input>
@@ -74,8 +74,8 @@
<export-excel
id="panel"
export-file-name="chart"
export-url="/panel/export"
import-url="/panel/import"
export-url="/visual/panel/export"
import-url="/visual/panel/import"
:params="filter"
:permissions="{
import: 'panel_chart_import',
@@ -149,18 +149,17 @@ export default {
chart: {},
blankChart: {
id: '',
title: '',
name: '',
type: 'line',
span: 12,
height: '400',
unit: 2,
param: {
url: '',
threshold: ''
},
param: { url: '', threshold: '' },
elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
panel: '',
sync: 0
sync: 0,
remark: '',
groupId: -1
},
pageObj: {
pageNo: 1,
@@ -286,6 +285,7 @@ export default {
addChart () {
this.chart = this.newChart()
this.rightBox.chart.show = true
console.log(123123123)
},
newChart () {
return JSON.parse(JSON.stringify(this.blankChart))