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

Merge branch 'dev-3.4-crosshair' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.4

Browse Source 
# Conflicts:
#	nezha-fronted/src/assets/css/common.scss
#	nezha-fronted/src/store/panel.js
This commit is contained in:
zhangyu
2022-06-24 16:28:24 +08:00
parent e113a6a32b 17ccc04942
commit 4528a5dfec
11 changed files with 630 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/assets/css/common.scss
View File

@@ -453,6 +453,7 @@ textarea {
font-weight: 600;
}
}
.document-copy-block {
display: flex;
flex-wrap: nowrap;
@@ -484,3 +485,6 @@ textarea {
outline: none;
}
}
.chart-time-series.hide{
display: none !important;
}

5
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -88,12 +88,15 @@
background-color: $--background-color-empty;
transition:all .2s;
color: $--button-icon-color;
i {
font-size: 14px;
color: $--button-icon-color;
}
}
.top-tool-btn.active{
background-color: $--button-icon-active-background-color;
border: 1px solid $--button-icon-active-border-color !important;
}
.top-tool-btn.top-tool-btn--text {
padding: 0 8px;
width: unset;

153
nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss Normal file
View File

@@ -0,0 +1,153 @@
.right-box-panel{
.item-receivers{
.el-select.el-select--small{
width: 100%;
}
.item-receivers-text{
color: $--color-text-secondary;
}
}
.el-input--suffix.el-date-editor--datetime .el-input__inner{
padding-left: 15px;
}
.form-items--half-width-group{
.item-receivers{
width: 100%;
.el-select.el-select--small{
width: 100%;
}
}
.form-item--half-width{
.el-date-editor.el-date-editor--datetime{
width: 100%;
.el-input__inner{
height: 32px;
}
}
}
.check-month_box{
.el-checkbox-group{
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
.el-checkbox-button{
display: flex;
justify-content: center;
align-items: center;
width: calc(100% / 7);
margin-right: -2px;
margin-bottom: -1px;
border: 1px solid $--border-color-light;
.el-checkbox-button__inner{
border: 0px;
border-left: 0px !important;
border-bottom: 0px !important;
display: block;
width: 100%;
height: 100%;
background-color: $--background-color-empty;
border-radius: 0;
}
}
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
}
}
.range-time{
width: 100%;
.el-form-item__content{
height: 41px;
.el-radio-group{
height: 100%;
border-left: 1px solid $--border-color-light;
.el-radio-button__inner{
height: 100%;
line-height: 1.5;
font-size: 14px;
color: $--color-text-primary;
}
}
.el-checkbox-group{
height: 100%;
.el-checkbox-button{
margin-right: -2px;
.el-checkbox-button__inner{
background-color: $--background-color-empty;
border:1px solid $--border-color-light;
}
}
}
}
.el-radio-group{
display: flex;
border-left: 0;
.el-radio-button{
flex: 1;
}
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
border: 1px solid $--color-primary !important;
// margin-right: -1px;
}
}
.form-tabs{
width: 100%;
.el-tabs__nav{
display: flex;
.el-tabs__item{
flex: 1;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
border: 1px solid $--color-primary !important;
// margin-right: -1px;
}
}
}
.form-day-week{
width: 100%;
.el-input-group__append{
border: 1px solid $--border-color-light;
background-color: $--right-box-sub-title-background-color;
}
}
}
}
.el-form-item__content{
text-align: unset !important;
.el-checkbox-button{
width: calc(100% / 7) !important;
.el-checkbox-button__inner{
width: 100%;
padding: 11px 3px;
}
}
.el-checkbox-button.is-focus .el-checkbox-button__inner{
border-color: $--border-color-base;
}
.el-tabs__item.is-top.is-active{
color: #fff !important;
background-color: $--color-primary !important;
}
.el-radio-button.el-radio-button--small.is-active{
.el-radio-button__inner{
color: #fff !important;
}
}
}

1
nezha-fronted/src/assets/css/components/index.scss
View File

@@ -51,6 +51,7 @@
@import './common/rightBox/chartRightBox/chartRightBox.scss';
@import './common/rightBox/mibBox.scss';
@import './common/rightBox/assetBactchEditBox.scss';
@import './common/rightBox/panelBox.scss';
@import './common/table/alert/alertMessageTable.scss';
@import './common/table/alert/alertRuleTable.scss';
@import './common/table/alert/alertSilenceTable.scss';

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

@@ -26,7 +26,7 @@ import { formatScientificNotation } from '@/components/common/js/tools'
import chartDataFormat from '@/components/chart/chartDataFormat'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import { chartLegendPlacement } from '@/components/common/js/constants'
import { getChart, setChart } from '@/components/common/js/common'
import { getChart, setChart, chartCache } from '@/components/common/js/common'
import { initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash'
@@ -69,6 +69,36 @@ export default {
}
}
},
watch: {
// 监听当前鼠标所在的图表id变化
'$store.state.panel.currentMousemove': {
handler (n) {
// 判断是否是当前鼠标所在的图表
if (n === this.chartId) {
let option = {}
for (const key in chartCache) {
if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
continue
}
if (chartCache[key] === getChart(this.chartId)) {
option = {
tooltip: {
className: 'chart-time-series'
}
}
} else {
option = {
tooltip: {
className: 'chart-time-series hide'
}
}
}
chartCache[key].setOption(option)
}
}
}
}
},
methods: {
initChart (chartOptions = this.chartOption) {
try {
@@ -122,6 +152,22 @@ export default {
}
myChart.setOption(chartOption)
this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
this.$store.commit('setCurrentMousemove', 0)
if (this.isInit) {
// timeSeries类型图表设置group 用于多表联动
myChart.group = 'timeSeriesGroup'
myChart.getZr().on('mousemove', params => {
if (this.$store.state.panel.isConnect !== 'crosshair') {
return false
}
// crosshair 模式才会执行
if (this.$store.state.panel.currentMousemove !== this.chartId) {
this.$store.commit('setCurrentMousemove', this.chartId)
}
})
}
this.isInit = false
}, 200)
},
@@ -191,7 +237,7 @@ export default {
return { minTime, maxTime, minValue, maxValue, copies, unit, dot }
},
xAxisLabelFormatter (minTime, maxTime) {
let self = this
const self = this
return function (val, index) {
const value = val * 1000
let offset = localStorage.getItem('nz-sys-timezone')

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

@@ -44,6 +44,8 @@ import lodash from 'lodash'
import { getChart } from '@/components/common/js/common'
import chartDataFormat from '@/components/chart/chartDataFormat'
import { statisticsList } from '@/components/common/js/constants'
import * as chart from 'echarts'
import { isTimeSeries } from './tools'
export default {
name: 'chartLegend',
props: {
@@ -65,6 +67,10 @@ export default {
computed: {
isStatistics () {
return !lodash.isEmpty(this.chartInfo.param.legend.values)
},
// timeSeries类型图表联动
isConnect () {
return this.$store.state.panel.isConnect
}
},
methods: {
@@ -94,6 +100,10 @@ export default {
}
if (echarts) {
// 判断timeSeries类型图表 先取消多表联动
if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) {
chart.disconnect('timeSeriesGroup')
}
if (!hasGrey) { // 1.除当前legend外全置灰
echarts.dispatchAction({
type: 'legendInverseSelect'
@@ -116,6 +126,10 @@ export default {
})
this.$set(this.isGrey, index, !this.isGrey[index])
}
// 判断timeSeries类型图表 建立多表联动
if (isTimeSeries(this.chartInfo.type) && (this.isConnect && this.isConnect !== 'none')) {
chart.connect('timeSeriesGroup')
}
if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') {
// 处理点击后的 Y轴
const chartInfo = this.chartInfo

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

@@ -32,14 +32,20 @@ export const chartTimeSeriesLineOption = {
}
},
tooltip: {
show: true,
trigger: 'axis',
confine: false,
extraCssText: 'z-index:99999999;',
z: 9,
animation: false,
appendToBody: true,
className: 'chart-time-series'
// formatter: 动态生成
className: 'chart-time-series',
axisPointer: {
type: 'cross', // 十字准星指示器,表示启用两个正交的轴的 axisPointer
label: {
show: false
}
}
},
color: initColor(),
grid: {
@@ -61,9 +67,9 @@ export const chartTimeSeriesLineOption = {
fontSize: 10
// formatter: 动态生成
},
axisPointer: { // y轴上显示指针对应的值
show: true
},
// axisPointer: { // y轴上显示指针对应的值
// show: true
// },
splitLine: {
show: true,
lineStyle: {

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

@@ -16,7 +16,7 @@ export function getUUID () {
return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
}
const chartCache = {}
export const chartCache = {}
export function getChart (key) {
return chartCache[`chart${key}`]

291
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -14,6 +14,148 @@
<el-form-item :label='$t("overall.name")' prop="name">
<el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
</el-form-item>
<!--remark-->
<el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
<el-input
v-model="editPanel.remark"
maxlength="256"
size="small" :rows="2"
show-word-limit
type="textarea">
</el-input>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartTooltip')" class="item-receivers" prop="chartShare">
<el-select v-model="editPanel.param.chartShare" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option value="none" label="Default">
<span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
</el-option>
<el-option value="crosshair" label="Share crosshair">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
</el-option>
<el-option value="tooltip" label="Share tooltip">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
</el-option>
</el-select>
<div class="item-receivers-text">{{$t('dashboard.panel.chartTooltipText')}}</div>
</el-form-item>
<!-- Report -->
<div>
<el-form-item >
<div class="form__sub-title">
<span>{{$t('dashboard.panel.report')}}</span>
<el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
</div>
</el-form-item>
<div v-if="editPanel.param.report.enable">
<transition name="el-zoom-in-top" >
<div class="form-items--half-width-group">
<el-form-item
:label="$t('backup.start')"
class="form-item--half-width"
prop="param.report.schedule.stime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.stime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.endAt')"
class="form-item--half-width"
prop="param.report.schedule.etime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.etime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.period")' class="range-time" prop="param.report.range.unit">
<el-radio-group v-model="editPanel.param.report.range.unit" size="small">
<el-radio-button label="day">{{ $t("dashboard.panel.prevDay") }}</el-radio-button>
<el-radio-button label="week">{{ $t("dashboard.panel.prevWeek") }}</el-radio-button>
<el-radio-button label="month">{{ $t("dashboard.panel.prevMonth") }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('backup.schedule')"
prop="param.report.schedule.type"
class="form-tabs">
<el-tabs
v-model="editPanel.param.report.schedule.type"
type="card"
@tab-click="datasourceChange"
class="backups-info-tab"
>
<el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
<el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
<el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
</el-tabs>
</el-form-item>
<el-form-item
v-if="isShow === 2 || isShow === 3 ? true :false"
:label="$t('backup.RepeatEvery')"
prop="param.report.schedule.repeat"
class="form-day-week">
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 3 ? true :false">
<template slot="append">{{ $t("backup.week") }}</template>
</el-input>
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 2 ? true :false">
<template slot="append">{{ $t("backup.day") }}</template>
</el-input>
</el-form-item>
<el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
<el-checkbox-group
v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item,index) in week"
:label="index + 1"
:key="index"
>{{item}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item
v-show="isShow === 4 ? true : false"
:label="$t('backup.DayOfMonth')"
prop="nums"
class="check-month_box"
id="day-of-month"
>
<el-checkbox-group v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item, index) in month"
:label="index === 31 ? -1 : index + 1"
:key="item"
>{{ item }}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="param.report.receivers">
<el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</div>
</el-form>
</div>
</div>
@@ -32,6 +174,8 @@
<script>
import editRigthBox from '../mixin/editRigthBox'
import bus from '@/libs/bus'
import { arrLength, datePicker } from '@/components/common/js/validate'
export default {
name: 'panelBox',
props: {
@@ -44,14 +188,116 @@ export default {
return {
url: 'visual/panel',
editPanel: {},
isShow: 0,
userData: [],
rules: {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
'param.report.range.unit': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
'param.report.schedule.type': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
'param.report.schedule.repeat': [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
'param.report.schedule.stime': [{
required: true,
message: this.$t('validate.required')
}, { validator: datePicker, trigger: 'blur' }],
'param.report.receivers': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' },
{ validator: arrLength }
]
},
week: [
this.$t('week.Mon'),
this.$t('week.Tue'),
this.$t('week.Wed'),
this.$t('week.Thu'),
this.$t('week.Fri'),
this.$t('week.Sat'),
this.$t('week.Sun')
],
month: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
'Last'
],
dateFormatStr: localStorage.getItem('nz-default-dateFormat')
? localStorage.getItem('nz-default-dateFormat')
: 'YYYY-MM-DD HH:ss:mm'
}
},
created () {
this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
if (this.editPanel.id) {
this.isShow = Number(this.editPanel.param.report.schedule.type)
this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
if (this.editPanel.param.report.schedule.stime !== '') {
this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
} else {
this.editPanel.param.report.schedule.stime = ''
}
if (this.editPanel.param.report.schedule.etime !== '') {
this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
} else {
this.editPanel.param.report.schedule.etime = ''
}
}
},
mounted () {
this.getUserData()
},
methods: {
getUserData () {
return new Promise(resolve => {
this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
resolve()
})
})
},
datasourceChange (tab) {
this.isShow = Number(tab.name)
if (this.editPanel.param.report.schedule.nums) {
this.editPanel.param.report.schedule.nums = []
this.editPanel.param.report.schedule.repeat = 1
}
},
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
@@ -63,6 +309,33 @@ export default {
/* 保存 */
save () {
const params = {
id: this.editPanel.id ? this.editPanel.id : '',
name: this.editPanel.name,
type: 'dashboard',
pid: 0,
remark: this.editPanel.remark,
param: {
report: {
enable: this.editPanel.param.report.enable,
range: {
type: 'previous',
interval: 1,
unit: this.editPanel.param.report.range.unit
},
schedule: {
type: Number(this.editPanel.param.report.schedule.type),
repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
nums: this.editPanel.param.report.schedule.nums,
stime: this.editPanel.param.report.schedule.stime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime) : this.editPanel.param.report.schedule.stime,
etime: this.editPanel.param.report.schedule.etime !== '' ? this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime) : this.editPanel.param.report.schedule.etime
},
receivers: this.editPanel.param.report.receivers
},
chartShare: this.editPanel.param.chartShare
}
}
const editParam = JSON.parse(JSON.stringify(params))
if (this.prevent_opt.save) {
return
}
@@ -70,7 +343,7 @@ export default {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.editPanel.id) {
this.$put(this.url, this.editPanel).then(response => {
this.$put(this.url, editParam).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -80,7 +353,7 @@ export default {
}
})
} else {
this.$post(this.url, this.editPanel).then(response => {
this.$post(this.url, editParam).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -127,6 +400,20 @@ export default {
this.isEdit = true
this.editPanel = JSON.parse(JSON.stringify(n))
}
},
'editPanel.param.report.schedule.stime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.stime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
},
'editPanel.param.report.schedule.etime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.etime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
}
}
}

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

@@ -34,11 +34,11 @@
</div>
<div class="top-tool-right">
<!-- <div class="top-tool-search margin-r-20">-->
<!-- <el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive" clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">-->
<!-- <i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>-->
<!-- </el-input>-->
<!-- </div>-->
<!-- <div class="top-tool-search margin-r-20">
<el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive" clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
</el-input>
</div> -->
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="showPanel.id"></pick-time>
@@ -144,6 +144,7 @@
</template>
<script>
import { chartCache } from '@/components/common/js/common'
import chartRightBox from '@/components/common/rightBox/chart/chartRightBox'
import bus from '../../../libs/bus'
import pickTime from '../../common/pickTime'
@@ -156,7 +157,8 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import routerPathParams from '@/components/common/mixin/routerPathParams'
import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
import exportHtmlMixin from '@/components/common/mixin/exportHtml'
import FileSaver from 'file-saver'
import * as echarts from 'echarts'
// import FileSaver from 'file-saver'
// import chartData from './testData'
export default {
name: 'panel',
@@ -189,7 +191,21 @@ export default {
},
panel: { // 新增panel
id: '',
name: ''
name: '',
remark: '',
param: {
report: {
enable: false,
range: {
unit: ''
},
schedule: {
repeat: 0,
nums: [],
type: 0
}
}
}
},
chart: {},
blankChart: {
@@ -376,6 +392,28 @@ export default {
},
edit (u) {
this.panel = Object.assign({}, u)
if (!this.panel.param.report) {
this.panel = {
...u,
param: {
report: {
enable: false,
range: {
unit: ''
},
schedule: {
type: '0',
repeat: 1,
nums: [],
stime: '',
etime: ''
},
receivers: []
},
chartShare: 'none'
}
}
}
this.rightBox.panel.show = true
},
toAdd () {
@@ -386,7 +424,24 @@ export default {
// this.$refs.panelBox.show(true)
this.panel = {
id: '',
name: ''
name: '',
remark: '',
param: {
report: {
enable: false,
range: {
unit: ''
},
schedule: {
stime: '',
etime: '',
nums: [],
type: 0 + '',
repeat: 1
}
},
chartShare: 'none'
}
}
// this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
},
@@ -999,6 +1054,30 @@ export default {
}
},
watch: {
'showPanel.param.chartShare': {
handler (value) {
// 每次切换联动模式 tooltip设置显示
const option = {
tooltip: {
className: 'chart-time-series'
}
}
for (const key in chartCache) {
if (!chartCache[key] || chartCache[key].group !== 'timeSeriesGroup') {
continue
}
chartCache[key].setOption(option)
}
this.$store.commit('setCurrentMousemove', 0)
if (value && value !== 'none') {
this.$store.commit('setConnect', value)
echarts.connect('timeSeriesGroup')
} else {
this.$store.commit('setConnect', value)
echarts.disconnect('timeSeriesGroup')
}
}
},
'filter.searchName': function (n, o) {
const temp = this
setTimeout(function () {
@@ -1063,6 +1142,11 @@ export default {
if (!document.onmousemove) { // 添加鼠标移动事件监听
document.onmousemove = null
}
// 页面销毁 清除图表联动
this.$store.commit('setCurrentMousemove', 0)
this.$store.commit('setConnect', 'none')
echarts.disconnect('timeSeriesGroup')
}
}
</script>

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

@@ -20,7 +20,11 @@ const panel = {
topologyChartInfo: {},
// 查看模式
mode: '',
addCabinetBoxParams: { dcid: '', cabinetBoxShow: false }
addCabinetBoxParams: { dcid: '', cabinetBoxShow: false },
// timeSeries类型图表联动
isConnect: 'none',
// 当前鼠标所在的图表id
currentMousemove: 0
},
mutations: {
setShowRightBox (state, flag) {
@@ -77,6 +81,14 @@ const panel = {
// 设置查看模式
setMode (state, mode) {
state.mode = mode
},
// 设置timeSeries类型图表联动
setConnect (state, value) {
state.isConnect = value
},
// 设置当前鼠标所在的图表id (timeSeries类型图表联动)
setCurrentMousemove (state, value) {
state.currentMousemove = value
}
},
getters: {