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

feat：Data link编辑页面开发

Browse Source
This commit is contained in:
zyh
2023-05-26 18:01:27 +08:00
parent 3e0139dea1
commit 7df20d9a37
14 changed files with 477 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -653,6 +653,65 @@
justify-content: space-between;
align-items: center;
}
.chart-dataLink-tooltip{
position: fixed;
min-width: 150px;
max-width: 600px;
display: block;
white-space: nowrap;
will-change: transform;
transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
border-radius: 4px;
font: 14 px/ 21px "Microsoft YaHei";
padding-top: 10px;
z-index: 9999999999;
overflow: hidden;
background-color: $--tooltip-background-color !important;
border: 2px solid $--tooltip-border-color !important;
border-color: $--tooltip-border-color !important;
color: $--color-text-regular !important;
box-shadow: none !important;
.chart-dataLink-title{
margin-bottom: 5px;
padding: 0 10px;
box-sizing: border-box;
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
color: $--color-text-primary !important;
font-weight: 600;
}
.chart-dataLink-content{
padding: 0 10px;
box-sizing: border-box;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chart-dataLink-list{
margin-top: 10px;
border-top: 1px solid $--border-color-light;
.chart-dataLink-item{
padding: 0 10px;
height: 32px;
line-height: 32px;
font-size: 14px;
cursor: pointer;
&:hover{
background: $--background-color-base;
color: $--color-primary !important;
}
.nz-icon{
margin-right: 2px;
}
}
}
}
.graph-icon-info-box{
position: absolute;
top: 50%;

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

@@ -175,7 +175,7 @@ export default {
})
.style('font-size', function (d) {
let fontSize
fontSize = d.r / 4 > 10 ? d.r / 4 : 0
fontSize = d.r / 3 > 10 ? d.r / 3 : 0
fontSize = fontSize > 30 ? 30 : fontSize
return fontSize
})

12
nezha-fronted/src/components/chart/chart/chartDoughnut.vue
View File

@@ -26,6 +26,10 @@
<div style="display: inline-block">{{tooltip.value}}</div>
</div>
</div>
<div class="chart-canvas-tooltip-content">
<div>percent</div>
<div>{{tooltip.percent}}%</div>
</div>
</div>
</div>
</template>
@@ -87,6 +91,7 @@ export default {
y: 0,
title: 0,
value: 0,
percent: 0,
mapping: {},
show: false
},
@@ -181,6 +186,12 @@ export default {
.value(d => d.value)
const arcs = pie(doughnutData)
// 计算百分比
arcs.forEach(function (d) {
const percentage = (d.data.value / d3.sum(doughnutData, function (d) { return d.value })) * 100
d.percent = percentage.toFixed(2)
})
function doughnutOver (e, d) {
chart.select('.path-' + d.index)
.transition()
@@ -297,6 +308,7 @@ export default {
doughnutEnter (e, node) { // 移入气泡
this.tooltip.title = node.data.alias
this.tooltip.value = node.data.showValue
this.tooltip.percent = node.percent
this.tooltip.mapping = node.data.mapping
this.tooltip.show = true
this.setPosition(e)

12
nezha-fronted/src/components/chart/chart/chartRose.vue
View File

@@ -26,6 +26,10 @@
<div style="display: inline-block">{{tooltip.value}}</div>
</div>
</div>
<div class="chart-canvas-tooltip-content">
<div>percent</div>
<div>{{tooltip.percent}}%</div>
</div>
</div>
</div>
</template>
@@ -87,6 +91,7 @@ export default {
y: 0,
title: 0,
value: 0,
percent: 0,
mapping: {},
show: false
},
@@ -193,6 +198,12 @@ export default {
const arcs = pie(roseData)
// 计算百分比
arcs.forEach(function (d) {
const percentage = (d.data.value / d3.sum(roseData, function (d) { return d.value })) * 100
d.percent = percentage.toFixed(2)
})
function roseOver (e, d) {
chart.select('.path-' + d.index)
.transition()
@@ -312,6 +323,7 @@ export default {
roseEnter (e, node) { // 移入气泡
this.tooltip.title = node.data.alias
this.tooltip.value = node.data.showValue
this.tooltip.percent = node.percent
this.tooltip.mapping = node.data.mapping
this.tooltip.show = true
this.setPosition(e)

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

@@ -537,6 +537,9 @@ export default {
this.isStack = this.chartInfo.param.stack
} catch (e) {}
this.chartInfo.loaded && this.initChart(this.chartOption)
},
beforeDestroy () {
getChart(this.chartId) && getChart(this.chartId).getZr().off('mousemove')
}
}
</script>

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

@@ -715,6 +715,7 @@ export default {
bus.$off('creat-chart-success', this.createChartSuccess)
bus.$off('groupChildMove', this.moveChart)
window.removeEventListener('resize', this.resize)
document.onmousemove = null
},
watch: {
isShrink: {

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

@@ -115,6 +115,7 @@ export default {
}
if (chartInfo.param.enable && chartInfo.param.enable.thresholds && !lodash.isEmpty(chartInfo.param.thresholds) && chartInfo.param.thresholds.length) { // 阈值
s.markLine = {
silent: true,
symbol: 'circle',
symbolSize: 5
}
@@ -481,9 +482,6 @@ export default {
this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
},
beforeDestroy () {
try {
getChart(this.chartId) && getChart(this.chartId).getZr().off('mousemove')
} catch (error) {}
getChart(this.chartId) && setChart(this.chartId, null)
}
}

50
nezha-fronted/src/components/common/bottomBox/tabs/dashboardTab.vue
View File

@@ -240,7 +240,8 @@ export default {
label: '',
min: undefined,
max: undefined
}
},
dataLink: []
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
panel: '',
@@ -274,12 +275,7 @@ export default {
type: this.from,
id: null
},
blankChartTemp: {
varType: 1,
pid: '',
dashboardId: null,
varIds: []
},
// removeModal: false, // 删除弹出
// deleteObj: {}, // 删除对象
// ---图表相关参数--end
@@ -368,17 +364,7 @@ export default {
this.$refs.addChartModal.isStable = 'stable'
})
},
addChartByTemp () {
this.chart = JSON.parse(JSON.stringify(this.blankChartTemp))
this.chart.dashboardId = this.showPanel.id
if (this.from === fromRoute.endpoint) {
this.chart.varType = 2
}
if (this.from === fromRoute.asset || this.from === fromRoute.endpoint) {
this.chart.varIds.push(this.obj.id)
}
this.rightBox.chartTemp.show = true
},
newChart () {
return JSON.parse(JSON.stringify(this.blankChart))
},
@@ -435,6 +421,23 @@ export default {
if (!this.chart.groupId || this.chart.groupId == -1) {
this.chart.groupId = ''
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
unit: 2,
label: '',
min: undefined,
max: undefined
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
}
if (!this.chart.param.dataLink) {
this.chart.param.dataLink = []
}
} else {
this.rightBox.loading = true
this.$get('visual/dashboard/chart/' + data.id).then(res => {
@@ -449,7 +452,10 @@ export default {
} else {
this.chart.param = {}
}
if (!this.chart.param.rightYAxis) {
if (!this.chart.groupId || this.chart.groupId == -1) {
this.chart.groupId = ''
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
@@ -459,13 +465,13 @@ export default {
max: undefined
}
}
if (!this.chart.groupId || this.chart.groupId == -1) {
this.chart.groupId = ''
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
}
if (!this.chart.param.dataLink) {
this.chart.param.dataLink = []
}
if (this.chart.type == 'table') {
const arr = this.chart.param.indexs ? this.chart.param.indexs.split(',') : []
this.chart.param.tags = arr.map((item) => {

100
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -1092,6 +1092,91 @@
</transition>
</div>
<!--Data link-->
<div class="form__sub-title" >
<span>{{$t('dashboard.dashboard.chartForm.dataLink')}}</span>
</div>
<draggable
v-model="chartConfig.param.dataLink"
@start="start"
@end="onEnd"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-dataLink-class',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
animation: 150,
handle: '.drag-sort'
}">
<div v-for="(item,index) in chartConfig.param.dataLink" :key="index" :class="item.error? 'is-item-box-error' : ''">
<div class="chart-title chart-title-config">
<span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showDataLink(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span>
{{item.title}}
</span>
</span>
</span>
<span>
<span @click="addDataLink()" :title="$t('tip.add')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span style="margin-right: 5px" :title="$t('overall.duplicate')">
<i @click="copyDataLink(index)" class="nz-icon nz-icon-override"></i>
</span>
<span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')">
<i @click="removeDataLink(index)" class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.dashboard.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row class="thresholds-item" v-show="item.show" :key="1">
<div>
<div class='mapping-display'>{{$t("dashboard.dashboard.chartForm.title")}}</div>
</div>
<!-- Title -->
<el-form-item :prop="'param.dataLink.' + index + '.title'" class="thresholds-from-item">
<el-input size="small" v-model="item.title" @change="change"></el-input>
</el-form-item>
<div>
<div class='mapping-display'>{{$t('dashboard.dashboard.chartForm.openIn')}}</div>
</div>
<!-- Open in -->
<el-form-item :prop="'param.dataLink.' + index + '.openIn'" class="thresholds-from-item">
<el-select
v-model="item.openIn"
size="small"
@change="change"
>
<el-option value="newTab" :label="$t('dashboard.dashboard.chartForm.newTab')"></el-option>
<el-option value="currentTab" :label="$t('dashboard.dashboard.chartForm.currentTab')"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2">
<div>
<div class='mapping-display'>{{$t('dashboard.dashboard.chartForm.dataLinkUrl')}}</div>
</div>
<!-- url -->
<el-form-item :prop="'param.dataLink.' + index + '.url'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.url" size="small" @change="change('dataLink',index)"/>
</el-form-item>
</el-row>
</transition-group>
</div>
</draggable>
<div @click="addDataLink" class="thresholds-add">
{{$t('overall.addDataLink')}}
</div>
</el-form>
</div>
</template>
@@ -1224,7 +1309,8 @@ export default {
label: '',
min: undefined,
max: undefined
}
},
dataLink: this.chartConfig.param.dataLink
}
this.$nextTick(() => {
this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })
@@ -1266,7 +1352,8 @@ export default {
result: 'show'
},
sparklineMode: 'line',
comparison: 'none'
comparison: 'none',
dataLink: this.chartConfig.param.dataLink
}
break
case 'bar':
@@ -1298,7 +1385,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'table':
@@ -1325,7 +1413,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'log':
@@ -1347,7 +1436,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
}

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

@@ -233,8 +233,14 @@ export default {
delete item.uid
})
}
if (params.param.dataLink) {
params.param.dataLink.forEach(item => {
delete item.error
})
}
if (params.type === 'group') {
params.height = 1
delete params.param.dataLink
}
if (!params.groupId) {
params.groupId = 0
@@ -389,7 +395,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.editChart.param.dataLink
}
}
}
@@ -415,7 +422,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.editChart.param.dataLink
}
}
}
@@ -456,7 +464,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.editChart.param.dataLink
}
}
delete this.editChart.elements
@@ -481,7 +490,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.editChart.param.dataLink
}
}
delete this.editChart.elements

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

@@ -289,6 +289,93 @@
</transition>
</div>
<!--Data link-->
<template v-if="chartConfig.type!=='group'">
<div class="form__sub-title" >
<span>{{$t('dashboard.dashboard.chartForm.dataLink')}}</span>
</div>
<draggable
v-model="chartConfig.param.dataLink"
@start="start"
@end="onEnd"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-dataLink-class',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
animation: 150,
handle: '.drag-sort'
}">
<div v-for="(item,index) in chartConfig.param.dataLink" :key="index" :class="item.error? 'is-item-box-error' : ''">
<div class="chart-title chart-title-config">
<span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showDataLink(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span>
{{item.title}}
</span>
</span>
</span>
<span>
<span @click="addDataLink()" :title="$t('tip.add')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span style="margin-right: 5px" :title="$t('overall.duplicate')">
<i @click="copyDataLink(index)" class="nz-icon nz-icon-override"></i>
</span>
<span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')">
<i @click="removeDataLink(index)" class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.dashboard.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row class="thresholds-item" v-show="item.show" :key="1">
<div>
<div class='mapping-display'>{{$t("dashboard.dashboard.chartForm.title")}}</div>
</div>
<!-- Title -->
<el-form-item :prop="'param.dataLink.' + index + '.title'" class="thresholds-from-item">
<el-input size="small" v-model="item.title" @change="change"></el-input>
</el-form-item>
<div>
<div class='mapping-display'>{{$t('dashboard.dashboard.chartForm.openIn')}}</div>
</div>
<!-- Open in -->
<el-form-item :prop="'param.dataLink.' + index + '.openIn'" class="thresholds-from-item">
<el-select
v-model="item.openIn"
size="small"
@change="change"
>
<el-option value="newTab" :label="$t('dashboard.dashboard.chartForm.newTab')"></el-option>
<el-option value="currentTab" :label="$t('dashboard.dashboard.chartForm.currentTab')"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2">
<div>
<div class='mapping-display'>{{$t('dashboard.dashboard.chartForm.dataLinkUrl')}}</div>
</div>
<!-- url -->
<el-form-item :prop="'param.dataLink.' + index + '.url'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.url" size="small" @change="change('dataLink',index)"/>
</el-form-item>
</el-row>
</transition-group>
</div>
</draggable>
<div @click="addDataLink" class="thresholds-add">
{{$t('overall.addDataLink')}}
</div>
</template>
</el-form>
</div>
</template>
@@ -298,12 +385,14 @@ import publicConfig from '@/components/common/rightBox/chart/publicConfig'
import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
import diagram from '@/components/common/ChartDiagram/diagram'
import richTextEditor from '@/components/chart/richTextEditor'
import draggable from 'vuedraggable'
export default {
name: 'otherChartConfig',
mixins: [publicConfig, chartTypeShow],
components: {
diagram,
richTextEditor
richTextEditor,
draggable
},
watch: {
// 'chartConfig.param.text': {
@@ -373,7 +462,8 @@ export default {
},
repeat: {
variable: ''
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'text':
@@ -389,7 +479,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'diagram':
@@ -405,7 +496,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'url':
@@ -421,7 +513,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'clock':
@@ -437,7 +530,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
}
@@ -455,6 +549,13 @@ export default {
this.chartConfig.param.text = html
this.$refs.chartForm.validateField('param.text')
this.change()
},
start () {
document.body.classList.add('isDrag')
},
onEnd () {
this.change()
document.body.classList.remove('isDrag')
}
},
created () {

27
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -685,6 +685,11 @@ export default {
this.$emit('change', this.chartConfig)
})
},
tagsChange (newTags) {
this.chartConfig.param.tags = newTags
this.chartConfig.param.indexs = newTags.map(item => item.text).join(',')
this.change()
},
addColumns () {
this.chartConfig.param.columns.push({
title: '',
@@ -706,9 +711,25 @@ export default {
this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
this.change()
},
tagsChange (newTags) {
this.chartConfig.param.tags = newTags
this.chartConfig.param.indexs = newTags.map(item => item.text).join(',')
addDataLink () {
this.chartConfig.param.dataLink.push({
show: true,
title: '',
url: '',
openIn: 'newTab'
})
this.change()
},
copyDataLink (index) {
this.chartConfig.param.dataLink.push({ ...this.chartConfig.param.dataLink[index] })
this.change()
},
removeDataLink (index) {
this.chartConfig.param.dataLink.splice(index, 1)
this.change()
},
showDataLink (index) {
this.chartConfig.param.dataLink[index].show = !this.chartConfig.param.dataLink[index].show
this.change()
},
enableChange (type) {

100
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -440,7 +440,7 @@
<draggable
v-model="chartConfig.param.columns"
@start="start"
@end="end"
@end="onEnd"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-columns-class',
@@ -542,7 +542,7 @@
<draggable
v-model="chartConfig.param.valueMapping"
@start="start"
@end="end"
@end="onEnd"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-valueMapping-class',
@@ -839,6 +839,91 @@
</transition>
</div>
<!--Data link-->
<div class="form__sub-title" >
<span>{{$t('dashboard.dashboard.chartForm.dataLink')}}</span>
</div>
<draggable
v-model="chartConfig.param.dataLink"
@start="start"
@end="onEnd"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-dataLink-class',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-ghost',
chosenClass:'choose-class',
scroll:true,
filter: '.drag-disabled',
animation: 150,
handle: '.drag-sort'
}">
<div v-for="(item,index) in chartConfig.param.dataLink" :key="index" :class="item.error? 'is-item-box-error' : ''">
<div class="chart-title chart-title-config">
<span class="chart-title-content">
<i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showDataLink(index)"></i>
<span v-show="!item.show" class="title-content-left">
<span>
{{item.title}}
</span>
</span>
</span>
<span>
<span @click="addDataLink()" :title="$t('tip.add')">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
<span style="margin-right: 5px" :title="$t('overall.duplicate')">
<i @click="copyDataLink(index)" class="nz-icon nz-icon-override"></i>
</span>
<span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')">
<i @click="removeDataLink(index)" class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.dashboard.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
<transition-group appear tag="div" name="el-zoom-in-top">
<el-row class="thresholds-item" v-show="item.show" :key="1">
<div>
<div class='mapping-display'>{{$t("dashboard.dashboard.chartForm.title")}}</div>
</div>
<!-- Title -->
<el-form-item :prop="'param.dataLink.' + index + '.title'" class="thresholds-from-item">
<el-input size="small" v-model="item.title" @change="change"></el-input>
</el-form-item>
<div>
<div class='mapping-display'>{{$t('dashboard.dashboard.chartForm.openIn')}}</div>
</div>
<!-- Open in -->
<el-form-item :prop="'param.dataLink.' + index + '.openIn'" class="thresholds-from-item">
<el-select
v-model="item.openIn"
size="small"
@change="change"
>
<el-option value="newTab" :label="$t('dashboard.dashboard.chartForm.newTab')"></el-option>
<el-option value="currentTab" :label="$t('dashboard.dashboard.chartForm.currentTab')"></el-option>
</el-select>
</el-form-item>
</el-row>
<el-row class="thresholds-item" v-show="item.show" :key="2">
<div>
<div class='mapping-display'>{{$t('dashboard.dashboard.chartForm.dataLinkUrl')}}</div>
</div>
<!-- url -->
<el-form-item :prop="'param.dataLink.' + index + '.url'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.url" size="small" @change="change('dataLink',index)"/>
</el-form-item>
</el-row>
</transition-group>
</div>
</draggable>
<div @click="addDataLink" class="thresholds-add">
{{$t('overall.addDataLink')}}
</div>
</el-form>
</div>
</template>
@@ -1005,7 +1090,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'bar':
@@ -1038,7 +1124,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
case 'table':
@@ -1065,7 +1152,8 @@ export default {
operator: 'equal',
varValue: '',
result: 'show'
}
},
dataLink: this.chartConfig.param.dataLink
}
break
}
@@ -1127,7 +1215,7 @@ export default {
start () {
document.body.classList.add('isDrag')
},
end () {
onEnd () {
this.change()
document.body.classList.remove('isDrag')
}

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

@@ -261,7 +261,8 @@ export default {
label: '',
min: undefined,
max: undefined
}
},
dataLink: []
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
panel: '',
@@ -275,12 +276,6 @@ export default {
pageSize: -1, // 此处获取所有数据
total: 0
},
blankChartTemp: {
varType: 1,
pid: '',
dashboardId: '',
varIds: []
},
panelData: [],
panelDataDragTmp: [],
searchMsg: { // 给搜索框子组件传递的信息
@@ -566,11 +561,6 @@ export default {
this.$refs.addChartModal.isStable = 'stable'
})
},
addChartByTemp () {
this.chart = JSON.parse(JSON.stringify(this.blankChartTemp))
this.chart.dashboardId = this.showPanel.id
this.rightBox.chartTemp.show = true
},
addGroupItem (groupId) {
this.chart = this.newChart()
this.chart.groupId = groupId
@@ -604,6 +594,23 @@ export default {
if (!this.chart.groupId || this.chart.groupId == -1) {
this.chart.groupId = ''
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
unit: 2,
label: '',
min: undefined,
max: undefined
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
}
if (!this.chart.param.dataLink) {
this.chart.param.dataLink = []
}
} else {
this.rightBox.loading = true
this.$get('visual/dashboard/chart/' + data.id).then(res => {
@@ -618,7 +625,10 @@ export default {
} else {
this.chart.param = {}
}
if (!this.chart.param.rightYAxis) {
if (!this.chart.groupId || this.chart.groupId == -1) {
this.chart.groupId = ''
}
if ((this.chart.type === 'line' || this.chart.type === 'area' || this.chart.type === 'point') && !this.chart.param.rightYAxis) {
this.chart.param.rightYAxis = {
elementNames: [],
style: 'line',
@@ -628,13 +638,13 @@ export default {
max: undefined
}
}
if (!this.chart.groupId || this.chart.groupId == -1) {
this.chart.groupId = ''
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
if (!this.chart.param.comparison) { this.chart.param.comparison = 'none' }
}
if (!this.chart.param.dataLink) {
this.chart.param.dataLink = []
}
if (this.chart.type == 'table') {
const arr = this.chart.param.indexs ? this.chart.param.indexs.split(',') : []
this.chart.param.tags = arr.map((item) => {