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-12-13 20:30:33 +08:00
parent 86057f8cda
commit 03f11c8283
11 changed files with 157 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/components/chart/chart/chartGroup.vue
View File

@@ -10,6 +10,7 @@
:panel-lock="panelLock"
:isGroup="true"
:time-range="searchTime"
:groupInfo="chartInfo"
@on-refresh-time="refreshTime"
:loading="chartListLoading"
></chartList>
@@ -23,7 +24,7 @@ import chartFormat from '@/components/chart/chartFormat'
export default {
name: 'chart-group',
props: {
panelLock: Boolean
panelLock: Boolean,
},
mixins: [chartMixin, chartFormat],
computed: {

3
nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
View File

@@ -244,6 +244,9 @@ export default {
option.tooltip[0].formatter = self.tooltipFormatter(self.isStack)
myChart.setOption(option)
}
},
resize () {
getChart(this.chartId).resize()
}
},
mounted () {

1
nezha-fronted/src/components/chart/chart/options/chartTreemap.js
View File

@@ -22,6 +22,7 @@ const chartTreemapOption = {
type: 'treemap',
visibleMin: 40,
childrenVisibleMin: 40,
nodeClick: false,
label: {
show: true,
position: 'inside',

24
nezha-fronted/src/components/chart/chart/tools.js
View File

@@ -83,6 +83,30 @@ export function isGroup (type) {
return type === chartType.group
}
export function getGroupHeight (arr) {
if (arr.length) {
let lastItem = []
let maxY = 0
arr.forEach((children, index) => {
if (maxY == children.y) {
lastItem.push(children)
} else {
maxY = children.y
lastItem = [children]
}
})
let maxHeight = 0
lastItem.forEach(last => {
if (maxHeight < last.height) {
maxHeight = last.height
}
})
return maxHeight + maxY
} else {
return 1
}
}
export function initColor (colorNum = 20) {
const colorList = [
'#FF5200', '#3685FF', '#FF8D00', '#00DCA2',

10
nezha-fronted/src/components/chart/chartHeader.vue
View File

@@ -1,6 +1,7 @@
<template>
<div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header">
<div class="chart-header__title">{{chartInfo.name}}</div>
<div class="chart-header__title" v-if="!isGroup">{{chartInfo.name}}</div>
<div class="chart-header__title" v-else @click="groupShow"> > {{chartInfo.name}}</div>
<div class="chart-header__tools">
<span v-if="chartInfo.remark" class="chart-header__tool">
<el-tooltip :content="chartInfo.remark" effect="light" placement="top">
@@ -51,6 +52,10 @@ export default {
props: {
chartInfo: Object,
from: String,
isGroup: {
type: Boolean,
default: false
},
error: {
type: String,
default: ''
@@ -90,6 +95,9 @@ export default {
},
clickos () {
this.dropdownMenuShow = false
},
groupShow () {
this.$emit('groupShow', !this.chartInfo.param.collapse)
}
}
}

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

@@ -1,7 +1,7 @@
<template>
<div :id='`chartList${(isGroup ? "Group" : "") + timestamp}`' class="chart-list" :loading="gridLayoutLoading">
<grid-layout
v-if="gridLayoutShow"
ref="layout"
:col-num="12"
:is-draggable="!panelLock"
:is-resizable="!panelLock"
@@ -19,10 +19,13 @@
:w="item.w"
:x="item.x"
:y="item.y"
:minH="headerH"
dragAllowFrom=".chart-header"
dragIgnoreFrom=".chart-header__tools"
@resize="resizeEvent"
@resized="resizedEvent"
@moveEvent="moveEvent"
@movedEvent="movedEvent"
@container-resized="containerResizedEvent"
>
<panel-chart
@@ -66,7 +69,9 @@
<script>
import VueGridLayout from 'vue-grid-layout'
import { fromRoute } from '@/components/common/js/constants'
import { getGroupHeight } from './chart/tools'
import panelChart from '@/components/chart/panelChart'
import bus from '@/libs/bus'
export default {
name: 'chartList',
@@ -77,6 +82,7 @@ export default {
timeRange: Array, // 时间范围
panelLock: { type: Boolean, default: true },
isGroup: { type: Boolean, default: false },
groupInfo: {},
dataList: Array // 看板中所有图表信息
},
components: {
@@ -84,6 +90,14 @@ export default {
GridItem: VueGridLayout.GridItem,
panelChart
},
computed: {
headerH () {
return this.$store.getters.getHeaderH
},
headerHPadding () {
return this.$store.getters.getHeaderHPadding
}
},
data () {
return {
fromRoute,
@@ -112,6 +126,11 @@ export default {
}
if (dom) {
this.stepWidth = Math.floor(dom.offsetWidth / 12)
if (!this.isGroup) {
const headerH = 40 / this.stepWidth
const headerHPadding = 50 / this.stepWidth
this.$store.commit('setHeaderH', { headerH, headerHPadding })
}
const span = document.querySelector('.temp-dom')
this.tempDom.width = span.offsetWidth
}
@@ -128,6 +147,17 @@ export default {
this.$refs['chart' + i][0].resize()
}, 100)
},
moveEvent (i, newX, newY) {
console.log(i)
if (this.isGroup) {
}
},
movedEvent (i, newX, newY) {
if (this.isGroup) {
bus.$emit('groupMove', this.copyDataList)
}
},
containerResizedEvent (i, newH, newW, newHPx, newWPx) {
// TODO 重新渲染图表
// this.$refs['chart' + i].resize()
@@ -137,12 +167,31 @@ export default {
this.fullscreen.chartInfo = chartInfo
this.fullscreen.visible = show
},
changeGroupHeight (copyList, group, flag) {
const height = getGroupHeight(copyList)
console.log(this.$refs.layout)
const groupFind = this.copyDataList.find(item => item.id === group.id)
if (group) {
groupFind.height = groupFind.h = height + this.headerHPadding
this.copyDataList = [...this.copyDataList]
}
if (flag) {
this.copyDataList = [...this.copyDataList]
this.$refs.layout.layoutUpdate()
}
},
cleanData () {
}
},
created () {
},
mounted () {
this.init()
if (!this.isGroup) {
bus.$on('groupMove', this.changeGroupHeight)
}
},
watch: {
dataList: {
@@ -176,6 +225,15 @@ export default {
this.gridLayoutLoading = false
})
}
},
copyDataList: {
deep: true,
handler (n) {
console.log(n)
if (this.isGroup) {
bus.$emit('groupMove', n, this.groupInfo)
}
}
}
}
}
@@ -184,5 +242,6 @@ export default {
<style scoped>
.chart-list {
height: 100%;
width: 100%;
}
</style>

1
nezha-fronted/src/components/chart/chartMixin.js
View File

@@ -184,6 +184,7 @@ export default {
this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
},
beforeDestroy () {
getChart(this.chartId) && getChart(this.chartId).dispose()
setChart(this.chartId, null)
}
}

36
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -4,9 +4,11 @@
<!-- title和工具栏，支持浮动 -->
<chart-header
v-if="!isFullscreen"
:is-group="isGroup(chartInfo.type)"
:chart-info="chartInfo"
@edit-chart="$emit('edit-chart', chartInfo)"
@refresh="refresh"
@groupShow="groupShow"
@showFullscreen="showFullscreen"
></chart-header>
<!-- chart -->
@@ -18,6 +20,7 @@
:panelLock="panelLock"
:is-fullscreen="isFullscreen"
:loading="loading"
v-if="!isGroup(chartInfo.type) || chartInfo.param.collapse"
></chart>
</div>
</template>
@@ -25,7 +28,7 @@
<script>
import chartHeader from '@/components/chart/chartHeader'
import chart from '@/components/chart/chart'
import { isChartPie, isTimeSeries } from './chart/tools'
import { isChartPie, isTimeSeries, getGroupHeight, isGroup } from './chart/tools'
import { chartType, fromRoute } from '@/components/common/js/constants'
import bus from '@/libs/bus'
import axios from 'axios'
@@ -50,7 +53,16 @@ export default {
loading: true
}
},
computed: {
headerH () {
return this.$store.getters.getHeaderH
},
headerHPadding () {
return this.$store.getters.getHeaderHPadding
}
},
methods: {
isGroup,
// 参数 isRefresh 标识是否是刷新操作
getChartData (isRefresh) {
this.loading = true
@@ -144,6 +156,7 @@ export default {
this.chartData = [this.chartInfo.param.topo]
}
if (this.chartInfo.type === 'group') {
this.groupInit()
this.chartData = [...this.chartInfo.children]
}
break
@@ -193,8 +206,29 @@ export default {
})
})
},
groupInit () {
const height = getGroupHeight(this.chartInfo.children)
if (!this.chartInfo.param.collapse) {
this.chartInfo.height = this.headerH
this.chartInfo.h = this.headerH
return
}
if (this.chartInfo.children.length) {
this.chartInfo.height = height + this.headerHPadding
this.chartInfo.h = height + this.headerHPadding
} else {
console.log(this.headerH)
this.chartInfo.height = this.headerH + height
this.chartInfo.h = this.headerH + height
}
},
showFullscreen (show) {
this.$emit('showFullscreen', show, this.chartInfo)
},
groupShow (flag) {
this.chartInfo.param.collapse = flag
this.groupInit()
bus.$emit('groupMove', '', '', true)
}
},
watch: {

3
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -163,6 +163,9 @@ export default {
Promise.all(arr).then(res => {
this.editChart.panelId = this.panelId
const params = JSON.parse(JSON.stringify(this.editChart))
if (params.type === 'group') {
params.height = 1
}
if (!params.groupId) {
params.groupId = 0
}

3
nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
View File

@@ -43,6 +43,7 @@
v-model="chartConfig.param.collapse"
:active-value="true"
:inactive-value="false"
@change="change"
size="small"/>
</el-form-item>
</div>
@@ -177,7 +178,7 @@ export default {
case 'group':
this.chartConfig.span = 12
this.chartConfig.param = {
collapse: false
collapse: true
}
break
case 'text':

18
nezha-fronted/src/store/panel.js
View File

@@ -6,7 +6,9 @@ const panel = {
groupId: '',
type: '',
timeRange: [],
nowTimeType: {}
nowTimeType: {},
headerH: 0.5,
headerHPadding: 0.5
},
mutations: {
setShowRightBox (state, flag) {
@@ -30,6 +32,11 @@ const panel = {
setPanelNowTimeType (state, nowTimeType) {
state.nowTimeType = nowTimeType
},
setHeaderH (state, h) {
console.log(h)
state.headerH = h.headerH
state.headerHPadding = h.headerHPadding
},
cleanPanel (state) {
state.showRightBox = false
state.chart = ''
@@ -59,6 +66,12 @@ const panel = {
},
getDelChart (state) {
return state.delChart
},
getHeaderH (state) {
return state.headerH
},
getHeaderHPadding (state) {
return state.headerHPadding
}
},
actions: {
@@ -82,6 +95,9 @@ const panel = {
store.commit('setChart', playload.chart)
store.commit('setType', playload.type)
},
dispatchHeaderH (store, playload) {
store.commit('setHeaderH', playload.headerH)
},
clearPanel (store) {
store.commit('cleanPanel')
}