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

fix：解决冲突

Browse Source
This commit is contained in:
zyh
2023-09-07 10:37:43 +08:00
parent 8d95d012ee 2f6b349e80
commit 56ec2398f0
20 changed files with 528 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -507,6 +507,7 @@
font-weight: bold;
}
}
.endpoint-query-metrics.chart-fullscreen.nz-dialog,.recordRules-query-metrics.chart-fullscreen.nz-dialog {
.chart-screen-header .chart-header__tools #browser-go {
margin-left: 5px;
@@ -683,8 +684,8 @@
}
.chart-dataLink-tooltip{
position: absolute;
padding-bottom: 2px;
position: absolute !important;
padding-bottom: 2px !important;
z-index: 999999999;
pointer-events: auto;
.chart-dataLink-list{
@@ -717,6 +718,23 @@
}
}
.chart-expolre-tooltip{
display: block;
border-style: solid;
white-space: nowrap;
will-change: transform;
box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
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;
background-color: $--background-color-empty;
border-width: 1px;
border-radius: 4px;
color: rgb(0, 0, 0);
font: 14px / 21px "Microsoft YaHei";
padding: 10px;
border-color: rgb(221, 228, 237);
color: $--color-text-regular !important;
}
.graph-icon-info-box{
position: absolute;
top: 50%;

25
nezha-fronted/src/assets/css/components/cli/webSSHNew.scss
View File

@@ -312,8 +312,31 @@
.terminal-menu {
position: fixed;
width: 150px;
border-radius: 2px;
border-radius: 4px;
z-index: 1000;
padding: 10px 15px;
.nz-icon {
margin-right: 5px;
}
.terminal-menu-item-disabled {
//background: $--background-color-disabled;
cursor: not-allowed !important;
color: $--color-text-disabled;
}
}
}
.terminal-setting {
.system-title {
background: $--background-color-base;
padding: 7px 10px !important;
box-sizing: border-box;
border-radius: 2px;
}
.el-form-item__tip {
margin: 8px 0 15px 0;
}
.terminal-setting-item {
margin-bottom: 40px;
}
}

1
nezha-fronted/src/assets/css/components/page/dashboard/explore/explore.scss
View File

@@ -283,6 +283,7 @@
.chart-room {
width: 100%;
height: 300px;
position: relative;
}
.introduce-view {
.info-room {

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

@@ -179,6 +179,18 @@ export default {
this.legends = []
this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
const styleOption = this.$lodash.get(this.chartInfo, 'param.option')
if (styleOption) {
chartOption.series.forEach(item => {
if (item.lineStyle && styleOption.lineWidth != undefined) {
item.lineStyle.width = styleOption.lineWidth
}
if (styleOption.pointSize != undefined) {
item.symbolSize = styleOption.pointSize
}
})
}
this.isGrey = this.legends.map(() => false)
chartOption.color = this.colorList
if (!this.series.length) {
@@ -265,12 +277,11 @@ export default {
if (this.tooltip.activeIndex != params.seriesIndex) {
const option = myChart.getOption()
option.series[params.seriesIndex].symbol = 'circle'
option.series[params.seriesIndex].emphasis.itemStyle = {
opacity: 1,
option.series[params.seriesIndex].itemStyle = {
borderColor: this.hexToRgb(params.color, 0.4),
borderWidth: 6
borderWidth: 5
}
myChart.setOption(option, true)
myChart.setOption(option)
}
}
this.tooltip.activeIndex = params.seriesIndex
@@ -280,11 +291,8 @@ export default {
const option = myChart.getOption()
option.series.forEach(item => {
item.symbol = 'emptyCircle'
item.emphasis.itemStyle = {
opacity: 1
}
})
myChart.setOption(option, true)
myChart.setOption(option)
}
this.tooltip.activeIndex = undefined
})

5
nezha-fronted/src/components/chart/chart/legend.vue
View File

@@ -129,11 +129,6 @@ export default {
}
},
methods: {
onCopy (txt) {
this.$copyText(txt).then(() => {
this.$message.success({ message: this.$t('overall.copySuccess') })
})
},
clickLegend (legendName, index) {
/* 点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮

15
nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
View File

@@ -152,26 +152,23 @@ export const chartTimeSeriesLineOption = {
type: 'line',
symbol: 'emptyCircle', // 去掉点
connectNulls: true,
symbolSize: [6, 6],
symbolSize: 6,
smooth: 0.2, // 曲线变平滑
// showSymbol: false,
itemStyle: {
opacity: 0.001
},
showSymbol: false,
data: [],
lineStyle: {
width: 1,
opacity: 0.9
},
emphasis: {
focus: 'series',
itemStyle: {
opacity: 1
}
focus: 'series'
},
blur: {
lineStyle: {
opacity: 0.3
},
itemStyle: {
opacity: 1
}
}
}],

5
nezha-fronted/src/components/chart/renderChart.js
View File

@@ -45,7 +45,7 @@ export default {
if (!leftInfo.copies) {
chartOption.yAxis[0].min = 0
chartOption.yAxis[0].max = 1
} else {
} else if (!chartOption.yAxis[0].max) {
chartOption.yAxis[0].max = undefined
}
if (leftInfo.unit.type == 'Time' || chartOption.yAxis[0].maxInterval === 1) {
@@ -79,7 +79,7 @@ export default {
if (!rightInfo.copies) {
chartOption.yAxis[1].min = 0
chartOption.yAxis[1].max = 1
} else {
} else if (!chartOption.yAxis[1].max) {
chartOption.yAxis[1].max = undefined
}
if (rightInfo.unit.type == 'Time' || chartOption.yAxis[1].maxInterval === 1) {
@@ -92,6 +92,7 @@ export default {
delete chartOption.yAxis[1].max
}
}
console.log(chartOption)
return chartOption
},
getMinMaxFromData (originalDatas, chartUnit = 2, params) {

23
nezha-fronted/src/components/cli/consoleNew.vue
View File

@@ -10,21 +10,21 @@
top: menuPosition.top + 'px'
}"
>
<div>
<span @click="copySelection()">{{$t('overall.duplicate')}}</span>
<div class="terminal-menu-item">
<span @click="copySelection()"><i class="nz-icon nz-icon-override"/>{{$t('overall.duplicate')}}</span>
</div>
<div v-if="showPaste">
<span @click="paste()">{{$t('project.topology.paste')}}</span>
<div class="terminal-menu-item" :class="showPaste ? '': 'terminal-menu-item-disabled'">
<span @click="paste()"> <i class="nz-icon nz-icon-putongwenjianlianjie"/> {{$t('project.topology.paste')}}</span>
</div>
<div>
<span @click="clearTerminal()">{{$t('terminal.clear')}}</span>
<div class="terminal-menu-item">
<span @click="clearTerminal()"> <i class="nz-icon nz-icon-Clear"/> {{$t('terminal.clear')}}</span>
</div>
<div class="line"></div>
<div>
<span @click="showFileDir(true)">{{$t('terminal.sftp')}}</span>
<div class="terminal-menu-item">
<span @click="showFileDir(true)"> <i class="nz-icon nz-icon-SFTP"/> {{$t('terminal.sftp')}}</span>
</div>
<div>
<span @click="closeTerminal(true)"> {{$t('overall.close')}}</span>
<div class="terminal-menu-item">
<span @click="closeTerminal(true)"><i class="nz-icon nz-icon-guanbi2"/> {{$t('overall.close')}}</span>
</div>
</div>
</div>
@@ -400,6 +400,9 @@ export default {
}
},
async paste () {
if (!this.showPaste) {
return
}
if (!document.execCommand('paste')) {
const text = await navigator.clipboard.readText()
this.term.write(text)

36
nezha-fronted/src/components/cli/terminal.vue
View File

@@ -10,10 +10,10 @@
<div class="personal" id="personal">
<el-dropdown trigger="click">
<div class="personal-avatar"><span>{{name ? name.substr(0, 1) : ''}}</span>&nbsp;<i class="nz-icon nz-icon-arrow-down"></i></div>
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top" style="width: 142px; line-height: 36px;">
<el-dropdown-menu slot="dropdown" class="right-public-box-select-top right-public-box-dropdown-top" style="width: 210px; line-height: 36px;">
<div class="personal-dropdown">
<div class="personal-dropdown__username" :title="name">{{name}}</div>
<div class="personal-dropdown__name" :title="name">@{{name}}</div>
<div class="personal-dropdown__name" style="height: auto;line-height: 1" :title="name">@{{name}}</div>
</div>
<el-dropdown-item>
<div id="header-to-personalization" @click="showPersonalization"><i class="nz-icon nz-icon-personalization"></i>{{$t('terminal.personal')}}</div>
@@ -52,54 +52,54 @@
</transition>
</div>
<!--弹窗-->
<el-dialog :modal-append-to-body='false' :z-index="1000" :show-close="true" :visible.sync="personalization" @close="personalization = false" class="nz-dialog webshell-selectAsset" width="650px">
<el-dialog :modal-append-to-body='false' :z-index="1000" :show-close="true" :visible.sync="personalization" @close="personalization = false" class="nz-dialog terminal-setting webshell-selectAsset" width="650px">
<div slot="title">{{$t('terminal.personal')}}</div>
<div>
<el-form v-model="newTerminalSetting" label-width="180px" size="small" ref="terminalForm" :validate-on-rule-change="false">
<div class="system-title" style="padding-top: 15px">{{$t('terminal.render')}}</div>
<el-form-item :label="$t('terminal.waterMaker')" prop="watermark">
<div class="system-title" style="margin-top: 5px">{{$t('terminal.render')}}</div>
<el-form-item :label="$t('terminal.waterMaker')" class="terminal-setting-item" prop="watermark">
<el-switch v-model="newTerminalSetting.watermark" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change" size="small">
</el-switch>
<div class="el-form-item__tip" style="margin: 0">{{$t('terminal.waterMakerInfo')}}</div>
<div class="el-form-item__tip">{{$t('terminal.waterMakerInfo')}}</div>
</el-form-item>
<el-form-item :label="$t('terminal.scrollbackLines')" prop="scrollbackLines">
<el-form-item :label="$t('terminal.scrollbackLines')" class="terminal-setting-item" prop="scrollbackLines">
<el-input-number :min="1" :precision="0" :controls="false" :placeholder="'默认25000'" v-model="newTerminalSetting.scrollbackLines" size="small">
</el-input-number>
<div class="el-form-item__tip" style="margin: 0">{{$t('terminal.scrollbackLinesInfo')}}</div>
<div class="el-form-item__tip">{{$t('terminal.scrollbackLinesInfo')}}</div>
</el-form-item>
<div class="system-title system-title-border" style="width: 100%;margin-top: 50px">{{$t('terminal.mouse')}}</div>
<el-form-item :label="$t('terminal.rightClick')" prop="rightClick">
<div class="system-title system-title-border" style="width: 100%;">{{$t('terminal.mouse')}}</div>
<el-form-item :label="$t('terminal.rightClick')" class="terminal-setting-item" prop="rightClick">
<el-radio-group v-model="newTerminalSetting.rightClick" size="small">
<el-radio-button label="none">{{$t('project.topology.none')}}</el-radio-button>
<el-radio-button label="menu">{{$t('terminal.menu')}}</el-radio-button>
<el-radio-button label="paste">{{$t('terminal.paste')}}</el-radio-button>
</el-radio-group>
<div class="el-form-item__tip" style="margin: 0">{{$t('terminal.rightClickInfo')}}</div>
<div class="el-form-item__tip">{{$t('terminal.rightClickInfo')}}</div>
</el-form-item>
<el-form-item :label="$t('terminal.wordSeparator')" prop="wordSeparator">
<el-form-item :label="$t('terminal.wordSeparator')" class="terminal-setting-item" prop="wordSeparator">
<el-input size="small" v-model="newTerminalSetting.wordSeparator">
</el-input>
<div class="el-form-item__tip" style="margin: 0">{{$t('terminal.wordSeparatorInfo')}}</div>
<div class="el-form-item__tip">{{$t('terminal.wordSeparatorInfo')}}</div>
</el-form-item>
<div class="system-title system-title-border" style="width: 100%;margin-top: 50px">{{$t('terminal.clipboard')}}</div>
<div class="system-title system-title-border" style="width: 100%;">{{$t('terminal.clipboard')}}</div>
<el-form-item :label="$t('terminal.copySelect')" prop="copyOnSelect">
<el-switch v-model="newTerminalSetting.copyOnSelect" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
</el-switch>
<!-- <div class="el-form-item__tip" style="margin: 0">{{$t('config.system.basic.pinPolicyValue')}}</div>-->
<!-- <div class="el-form-item__tip">{{$t('config.system.basic.pinPolicyValue')}}</div>-->
</el-form-item>
<el-form-item :label="$t('terminal.copyFormatting')" prop="copyWithFormatting">
<el-switch v-model="newTerminalSetting.copyWithFormatting" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
</el-switch>
<!-- <div class="el-form-item__tip" style="margin: 0">{{$t('terminal.copyFormattingInfo')}}</div>-->
<!-- <div class="el-form-item__tip">{{$t('terminal.copyFormattingInfo')}}</div>-->
</el-form-item>
<el-form-item :label="$t('terminal.copyTrimEnd')" prop="copyTrimEnd">
<el-switch v-model="newTerminalSetting.copyTrimEnd" :active-value='true' :inactive-value='false' id="terminal-setting-watermark_change">
</el-switch>
<div class="el-form-item__tip" style="margin: 0">{{$t('terminal.copyTrimEndInfo')}}</div>
<div class="el-form-item__tip">{{$t('terminal.copyTrimEndInfo')}}</div>
</el-form-item>
</el-form>
</div>
<div slot="footer">
<div slot="footer" style="padding-bottom: 10px">
<button class="footer__btn footer__btn--light" @click="personalization = false">
<span>{{$t('overall.cancel')}}</span>
</button>

20
nezha-fronted/src/components/common/alert/alertMessageInfoTab.vue
View File

@@ -5,9 +5,9 @@
<div v-if="item.key === 'detail' && activeName === 'detail'">
<alert-message-info-detail :info-data="infoData"/>
</div>
<div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">
<dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" class="message-info-dashboard" :from="fromRoute.dashboard"></dashboard>
</div>
<!-- <div v-else-if="item.key === 'dashboard' && activeName === 'dashboard'" class="alert-message-info-dashboard">-->
<!-- <dashboard :temp-id="infoData.alertRule.dashboardId" :showImport="false" :showName="false" :url-type="'dashboard'" :time="timeRange" class="message-info-dashboard" :from="fromRoute.dashboard"></dashboard>-->
<!-- </div>-->
<div v-else-if="(activeName === item.key) && infoData[item.key]" class="no-position-alert-label">
<!-- <searchItemInfo :obj="findData(item.key)" :severityData="severityData" :fa-loading="false"></searchItemInfo>-->
<alertLabel
@@ -118,13 +118,13 @@ export default {
})
// && n.alertRule.dashboardId
// n.alertRule && (n.alertRule.dashboardId = 101534)
if (n.alertRule && n.alertRule.dashboardId && n.alertRule.dashboardId != -1) {
//
this.cardNames.push({
key: 'dashboard',
label: this.$t('overall.dashboard')
})
}
// if (n.alertRule && n.alertRule.dashboardId && n.alertRule.dashboardId != -1) {
// //
// this.cardNames.push({
// key: 'dashboard',
// label: this.$t('overall.dashboard')
// })
// }
if (n.alertRule && n.alertRule.trbShot && n.alertRule.trbShot != '<div class="editor-core ql-container ql-snow"><div class="ql-editor"><p><br></p></div></div>') {
this.cardNames.push({
key: 'trbShot',

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

@@ -255,6 +255,10 @@ export default {
tooltip: {
mode: 'all',
sort: 'none'
},
option: {
lineWidth: 1,
pointSize: 6
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
@@ -464,6 +468,12 @@ export default {
}
this.chart.param.enable.tooltip = true
}
if (!this.chart.param.option) {
this.chart.param.option = {
lineWidth: 1,
pointSize: 6
}
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
@@ -523,6 +533,12 @@ export default {
}
this.chart.param.enable.tooltip = true
}
if (!this.chart.param.option) {
this.chart.param.option = {
lineWidth: 1,
pointSize: 6
}
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }

44
nezha-fronted/src/components/common/rightBox/alertRuleBox.vue
View File

@@ -339,27 +339,27 @@
</el-time-picker>
</el-form-item>
<div class="alert-rule-split-title">{{ $t('overall.more') }}</div>
<!--panel-->
<el-form-item
class="form-item--half-width"
:label="$t('overall.associateDashboard')"
prop="dashboard"
>
<select-panel @setPanelName="setPanelName" ref="selectPanel" :disabled="false" :filter-panel="filterPanel" :chart-box="true" :panel-lock="true" :show-panel="showPanel" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel">
<template v-slot:header>
<div class="panel-select-header">
<el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>
</div>
</template>
<template v-slot:trigger>
<!-- <el-input placeholder="" size="small" clearable v-model="panelName" :disabled="false"></el-input>-->
<div class="alert-rule-box-dashboard">
<div class="text-ellipsis alert-rule-box-dashboard-name" :title="panelName">{{panelName}}</div>
<i class="nz-icon nz-icon-guanbi2" @click.stop="clearDashboard()"/>
</div>
</template>
</select-panel>
</el-form-item>
<!-- &lt;!&ndash;panel&ndash;&gt;-->
<!-- <el-form-item-->
<!-- class="form-item&#45;&#45;half-width"-->
<!-- :label="$t('overall.associateDashboard')"-->
<!-- prop="dashboard"-->
<!-- >-->
<!-- <select-panel @setPanelName="setPanelName" ref="selectPanel" :disabled="false" :filter-panel="filterPanel" :chart-box="true" :panel-lock="true" :show-panel="showPanel" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel">-->
<!-- <template v-slot:header>-->
<!-- <div class="panel-select-header">-->
<!-- <el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 596px"></el-input>-->
<!-- </div>-->
<!-- </template>-->
<!-- <template v-slot:trigger>-->
<!--&lt;!&ndash; <el-input placeholder="" size="small" clearable v-model="panelName" :disabled="false"></el-input>&ndash;&gt;-->
<!-- <div class="alert-rule-box-dashboard">-->
<!-- <div class="text-ellipsis alert-rule-box-dashboard-name" :title="panelName">{{panelName}}</div>-->
<!-- <i class="nz-icon nz-icon-guanbi2" @click.stop="clearDashboard()"/>-->
<!-- </div>-->
<!-- </template>-->
<!-- </select-panel>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('alert.config.trbShot')" prop="trbShot">
<rich-text-editor ref="richTextEditor" :edit-data="editAlertRule.trbShot" @after-init="afterInitRich"></rich-text-editor>
</el-form-item>
@@ -804,7 +804,7 @@ export default {
mounted () {
this.getUserList()
this.getNotifyData()
this.getDashboard()
// this.getDashboard()
},
watch: {
alertRule: {

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

@@ -447,6 +447,44 @@
</el-form-item>
</div>
<!-- option -->
<div v-if="isTimeSeries(chartConfig.type)">
<div class="form__sub-title">
<span>{{$t('dashboard.dashboard.chartForm.option')}}</span>
</div>
<div
class="form-items--half-width-group"
>
<!--lineWidth-->
<el-form-item
v-if="chartConfig.type!=='point'"
:label="$t('dashboard.dashboard.chartForm.lineWidth')"
class="form-item--half-width"
prop="param.option.lineWidth"
>
<el-input-number
size="small"
:controls="false"
@change="change"
show-word-limit
v-model="chartConfig.param.option.lineWidth"/>
</el-form-item>
<!--pointSize-->
<el-form-item
:label="$t('dashboard.dashboard.chartForm.pointSize')"
class="form-item--half-width"
prop="param.option.pointSize"
>
<el-input-number
size="small"
:controls="false"
@change="change"
show-word-limit
v-model="chartConfig.param.option.pointSize"/>
</el-form-item>
</div>
</div>
<!-- Right Y Axis -->
<div v-if="isTimeSeries(chartConfig.type)">
<div class="form__sub-title">
@@ -1458,6 +1496,10 @@ export default {
tooltip: {
mode: 'all',
sort: 'none'
},
option: {
lineWidth: 1,
pointSize: 6
}
}
this.$nextTick(() => {

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

@@ -400,11 +400,6 @@ export default {
varValue: '',
result: 'show'
},
dataLink: [],
tooltip: {
mode: 'all',
sort: 'none'
},
rightYAxis: {
elementNames: [],
style: 'line',
@@ -412,6 +407,15 @@ export default {
label: '',
min: undefined,
max: undefined
},
dataLink: [],
tooltip: {
mode: 'all',
sort: 'none'
},
option: {
lineWidth: 1,
pointSize: 6
}
}
}

1
nezha-fronted/src/components/layout/header.vue
View File

@@ -183,6 +183,7 @@ export default {
localStorage.setItem('nz-language', lang)
this.$store.commit('setLanguage', lang)
this.$i18n.locale = lang
this.$message.success(this.$t('tip.saveSuccess'))
setTimeout(() => {
window.location.reload()
}, 800)

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

@@ -271,6 +271,10 @@ export default {
tooltip: {
mode: 'all',
sort: 'none'
},
option: {
lineWidth: 1,
pointSize: 6
}
},
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A', state: 1, orderNum: 0 }],
@@ -638,6 +642,12 @@ export default {
}
this.chart.param.enable.tooltip = true
}
if (!this.chart.param.option) {
this.chart.param.option = {
lineWidth: 1,
pointSize: 6
}
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }
@@ -697,6 +707,12 @@ export default {
}
this.chart.param.enable.tooltip = true
}
if (!this.chart.param.option) {
this.chart.param.option = {
lineWidth: 1,
pointSize: 6
}
}
}
if (this.chart.type === 'stat') {
if (!this.chart.param.sparklineMode) { this.chart.param.sparklineMode = 'none' }

30
nezha-fronted/src/components/page/dashboard/explore/exploreItem.vue
View File

@@ -3845,9 +3845,10 @@ export default {
}
data.forEach((result, i) => {
const seriesItem = {
type: 'line',
name: '',
symbol: 'emptyCircle', // 去掉点
symbolSize: [2, 2],
symbolSize: [6, 6],
showSymbol: false,
smooth: 0.2, // 曲线变平滑
data: [],
@@ -3855,7 +3856,17 @@ export default {
width: 1,
opacity: 0.9
},
type: 'line'
emphasis: {
focus: 'series'
},
blur: {
lineStyle: {
opacity: 0.3
},
itemStyle: {
opacity: 1
}
}
}
let legendName = ''
seriesItem.data = result.values.map((item) => {
@@ -3927,9 +3938,10 @@ export default {
}
data.forEach((result, i) => {
const seriesItem = {
type: 'line',
name: '',
symbol: 'emptyCircle', // 去掉点
symbolSize: [2, 2],
symbolSize: [6, 6],
showSymbol: false,
smooth: 0.2, // 曲线变平滑
data: [],
@@ -3937,7 +3949,17 @@ export default {
width: 1,
opacity: 0.9
},
type: 'line'
emphasis: {
focus: 'series'
},
blur: {
lineStyle: {
opacity: 0.3
},
itemStyle: {
opacity: 1
}
}
}
let legendName = ''
seriesItem.data = result.values.map((item) => {

30
nezha-fronted/src/components/page/dashboard/explore/exploreItemHtml.vue
View File

@@ -426,9 +426,10 @@ export default {
}
data.forEach((result, i) => {
const seriesItem = {
type: 'line',
name: '',
symbol: 'emptyCircle', // 去掉点
symbolSize: [2, 2],
symbolSize: [6, 6],
showSymbol: false,
smooth: 0.2, // 曲线变平滑
data: [],
@@ -436,7 +437,17 @@ export default {
width: 1,
opacity: 0.9
},
type: 'line'
emphasis: {
focus: 'series'
},
blur: {
lineStyle: {
opacity: 0.3
},
itemStyle: {
opacity: 1
}
}
}
let legendName = ''
seriesItem.data = result.values.map((item) => {
@@ -632,9 +643,10 @@ export default {
}
data.forEach((result, i) => {
const seriesItem = {
type: 'line',
name: '',
symbol: 'emptyCircle', // 去掉点
symbolSize: [2, 2],
symbolSize: [6, 6],
showSymbol: false,
smooth: 0.2, // 曲线变平滑
data: [],
@@ -642,7 +654,17 @@ export default {
width: 1,
opacity: 0.9
},
type: 'line'
emphasis: {
focus: 'series'
},
blur: {
lineStyle: {
opacity: 0.3
},
itemStyle: {
opacity: 1
}
}
}
let legendName = ''
seriesItem.data = result.values.map((item) => {

3
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -580,7 +580,8 @@ export default {
remote: {
url: baseUrl + '/prom',
fetchFn: this.fetchFn
}
},
maxMetricsMetadata: 99999
}))
}
)

280
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -4,15 +4,40 @@
<div class="showMore" v-if="legendAll.length !== legend.length"><i class="nz-icon nz-icon-jinggao"></i>{{$t("dashboard.dashboard.moreTitle")}} <span class="moreChart" @click="showMore">{{$t("dashboard.dashboard.showAll")+legendAll.length}}</span></div>
<div class="chart-header">{{chartTitle}}</div>
<div class="chart-body" ref="chartBody" :id="chartId" ></div>
<div class="chart-body" ref="chartBody" :id="chartId" :class="{'chart-cursor-default':cursorDefault}"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
<div class="legend-container legend-container-screen" :id="'legendArea' + chartId" ref="legendArea" v-show="legend.length>0">
<div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.alias?item.alias:item.name}}
<div
v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"
:key="'legend_' + item.name+'_'+index"
class="legend-item"
:class="{'ft-gr':item.isGray}"
@click="clickLegend(item.name,index)"
@mouseenter="hoverLegend(item.name, index,'highlight')"
@mouseleave="hoverLegend(item.name, index,'downplay')"
>
<span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>
<span>{{item.alias?item.alias:item.name}}</span>
<i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias?item.alias:item.name)" :title="$t('overall.copyText')"></i>
</div>
</div>
<div :id="`chart-canvas-tooltip-${chartId}`" class="chart-expolre-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
<div v-html="tooltip.tooltipHtml"></div>
<div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
<!-- 只有一条数据时显示 -->
<div class="chart-dataLink-item" v-if="legend.filter(value => value.isGray === false).length==1" @click="showAllSeries">
<i class="nz-icon nz-icon-a-Showallseries"></i>
<span>{{$t('dashboard.showAllSeries')}}</span>
</div>
<!-- 有多条数据时显示 -->
<div class="chart-dataLink-item" v-else @click="showSelectedSeries">
<i class="nz-icon nz-icon-a-Showseletedseries"></i>
<span>{{$t('dashboard.showSelectedSeries')}}</span>
</div>
</div>
</div>
</div>
</template>
@@ -56,7 +81,21 @@ export default {
noData: false,
dataSize: 20,
chartDot: 2,
theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light'
theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light',
cursorDefault: false,
tooltip: {
x: 0,
y: 0,
title: 0,
value: 0,
mapping: {},
show: false,
dataLinkShow: '',
metric: {},
activeIndex: undefined,
clickIndex: undefined
},
isInit: true
}
},
created () {
@@ -174,6 +213,11 @@ export default {
} else {
this.option.yAxis.axisLabel.formatter = this.defaultYAxisFormatter
}
if (this.series.length == 1) {
this.series.forEach(item => {
item.cursor = 'default'
})
}
}
if (this.series && this.series.length) {
this.$set(this.option, 'series', this.series)
@@ -207,6 +251,60 @@ export default {
}
})
}
if (this.isInit) {
// 未设置dataLink的图表 鼠标样式为default
this.chart.getZr().on('mousemove', (params) => {
// 获取鼠标在图表中的坐标
const pointInPixel = [params.offsetX, params.offsetY]
const option = this.chart.getOption()
const zoomState = this.$lodash.get(option, 'toolbox[0].feature.dataZoom.iconStatus.zoom', 'normal')
// 判断鼠标在坐标轴中且zoom未被激活
if (this.chart.containPixel('grid', pointInPixel) && zoomState === 'normal') {
this.cursorDefault = true
} else {
this.cursorDefault = false
}
})
if (this.series.length > 1) {
this.chart.on('mousemove', () => {
this.cursorDefault = false
})
this.chart.on('click', this.chartClick)
this.chart.on('mousedown', (params) => {
if (this.tooltip.dataLinkShow) {
const e = params.event.event
e.stopPropagation()
}
})
}
this.chart.on('mouseover', (params) => {
if (this.tooltip.activeIndex != params.seriesIndex) {
const option = this.chart.getOption()
option.series[params.seriesIndex].symbol = 'circle'
option.series[params.seriesIndex].itemStyle = {
borderColor: this.hexToRgb(params.color, 0.4),
borderWidth: 5
}
this.chart.setOption(option)
}
this.tooltip.activeIndex = params.seriesIndex
})
this.chart.on('mouseout', (params) => {
const option = this.chart.getOption()
option.series.forEach(item => {
item.symbol = 'emptyCircle'
})
this.chart.setOption(option)
this.tooltip.activeIndex = undefined
})
}
this.isInit = false
this.resize()
},
chartRoomMouseMove (event, tooltipDom) {
@@ -252,6 +350,17 @@ export default {
const color = this.colors[index]
return color
},
hoverLegend (legendName, index, type) {
// legend 已经取消显示，鼠标悬浮，不开启 高亮效果
if (this.legend[index].isGray) {
return false
}
this.chart && this.chart.dispatchAction({
type: type,
seriesIndex: index,
name: legendName
})
},
clickLegend (legendName, index) {
/* 点击legend
* 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
@@ -350,35 +459,17 @@ export default {
// 当前鼠标位置
const pointX = point[0]
const pointY = point[1]
// 外层div大小
/* const viewWidth = size.viewSize[0]
const viewHeight = size.viewSize[1] */
// 提示框大小
const boxWidth = size.contentSize[0]
// const boxHeight = size.contentSize[1]
const chartDom = document.getElementById(this.chartId)
if (chartDom) {
// const parTop = chartDom.offsetTop
const parLeft = chartDom.offsetLeft
const parent = chartDom.parentElement
// const parClientHeight = parent.clientHeight// 可视高度
const parClientWidth = parent.clientWidth// 可视宽度
// const parScrollTop = parent.scrollTop
if ((parClientWidth - pointX - parLeft - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
if ((parClientWidth - pointX - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
x = pointX + 10
} else {
x = pointX - boxWidth
}
// if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
// y = pointY+10;
// }else {
// y = pointY-boxHeight;
// }
y = pointY + 10
return [x, y]
} else {
x = pointX - boxWidth
y = pointY + 10
return [x, y]
}
@@ -422,13 +513,15 @@ export default {
defaultTooltipFormatter: function (params) {
let showFlag = false
let minusFlag = true
let str = '<div>'
let str = '<div class="nz-chart__tooltip">'
params instanceof Array || (params = [params])
params.forEach((item, i) => {
const alias = this.queryAlias(item.seriesIndex)
if (i === 0 && alias.indexOf('Previous ') === -1) {
const value = item.data[0]
str += '<div class="tooltip-title" style="margin-bottom: 5px">'
str += bus.timeFormate(bus.computeTimezone(value))
str += '</div>'
}
if (alias.indexOf('Previous ') !== -1 && minusFlag) {
if (i !== 0) {
@@ -441,9 +534,12 @@ export default {
showFlag = showFlag || item.data[1]
if (!isNaN(item.data[1] + '')) {
const val = Number(item.data[1])
str += '<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">'
str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${alias || item.seriesName}: </div>`
str += '<div style="padding-left: 10px;">'
str += `<div class="${(this.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">`
str += `<div class="row__label">
<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>
<span>${alias || item.seriesName}</span>
</div>`
str += '<div class="row__value">'
let dot = bus.countDecimals(val)
if (dot < this.chartDot) {
dot = this.chartDot
@@ -611,6 +707,134 @@ export default {
unit,
oldDot
}
},
datalinkPosition (e) {
this.$nextTick(() => {
const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
if (box) {
const boxWidth = box.offsetWidth
const chartDom = document.getElementById(this.chartId)
const parent = chartDom.parentElement
const parClientWidth = parent.clientWidth// 可视宽度
if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
this.tooltip.x = left + 10
} else {
this.tooltip.x = left - boxWidth
}
this.tooltip.y = top + 10
}
})
},
chartClick (params) {
const option = {
tooltip: {
extraCssText: 'z-index:1000;visibility:hidden;transition:none;',
hideDelay: 0
}
}
this.chart.setOption(option)
this.chart.dispatchAction({
type: 'hideTip'
})
const nameArr = params.seriesName.split('-')
if (nameArr.length > 1) {
nameArr.splice(nameArr.length - 1, 1)
}
const seriesName = nameArr.join('-')
// title
const value = bus.computeTimezone(params.data[0])
const tData = new Date(value)
// value
let paramsDot = bus.countDecimals(params.data[1])
if (paramsDot < this.chartDot) {
paramsDot = this.chartDot
} else if (paramsDot > 6) {
paramsDot = 6
}
const val = formatScientificNotation(params.data[1], paramsDot)
const color = this.colors[params.seriesIndex]
this.tooltip.tooltipHtml = `
<div class="nz-chart__tooltip">
<div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
<div class="tooltip__row">
<div class="row__label" :title=">${seriesName}">
<span class="row__color-block" style="background-color: ${color};color: ${color}"></span>
<span>${seriesName}</span>
</div>
<div class="row__value">
<span>${chartDataFormat.getUnit(this.unit).compute(val, null, -1, paramsDot)}</span>
</div>
</div>
</div>
`
this.tooltip.show = true
this.tooltip.dataLinkShow = true
this.tooltip.clickIndex = params.seriesIndex
const e = params.event.event
this.datalinkPosition(e)
},
clickout () {
if (this.series.length > 1) {
this.tooltip.show = false
this.tooltip.dataLinkShow = false
const option = {
tooltip: {
extraCssText: 'z-index:1000;visibility:visible;'
}
}
this.chart.setOption(option)
}
},
showSelectedSeries () {
this.legend.forEach((item, index) => {
if (index == this.tooltip.clickIndex) {
this.chart.dispatchAction({
type: 'legendSelect',
name: item.name
})
} else {
this.chart.dispatchAction({
type: 'legendUnSelect',
name: item.name
})
}
})
this.legend = this.legend.map((item, index) => {
return {
...item,
isGray: index !== this.tooltip.clickIndex
}
})
this.clickout()
},
showAllSeries () {
this.chart.dispatchAction({
type: 'legendAllSelect'
})
this.legend = this.legend.map((item, index) => {
return {
...item,
isGray: false
}
})
this.clickout()
},
// 十六进制转为rgba
hexToRgb (hex, a = 1) {
/*
hex: {String}, "#333", "#AF0382"
*/
hex = hex.slice(1)
if (hex.length == 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
}
const r = parseInt(hex.slice(0, 2), 16)
const g = parseInt(hex.slice(2, 4), 16)
const b = parseInt(hex.slice(4, 6), 16)
return `rgba(${r}, ${g}, ${b}, ${a})`
}
},
mounted () {
@@ -623,7 +847,7 @@ export default {
beforeDestroy () {
this.$refs.chartRoom.removeEventListener('mousemove', this.chartRoomMouseMove)
if (this.chart) {
this.chart.clear()
this.chart.dispose()
}
}
}