NEZ-3211 feat: 处理tooltip的位置 以及 同步光标和 dataLink
This commit is contained in:
@@ -480,7 +480,7 @@ td .nz-icon-gear:before {
|
|||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
border-color: rgb(255, 255, 255);
|
border-color: rgb(255, 255, 255);
|
||||||
z-index: 99999999;
|
z-index: 9998;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -376,6 +376,18 @@
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ml10{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb10{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr10{
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.p10 {
|
.p10 {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -303,7 +303,6 @@ export default {
|
|||||||
oldValue: ''
|
oldValue: ''
|
||||||
}
|
}
|
||||||
const display = this.globalVariablesReplace(column.display)
|
const display = this.globalVariablesReplace(column.display)
|
||||||
console.log(column, display, /\{\{.+\}\}/.test(display), params)
|
|
||||||
if (/\{\{.+\}\}/.test(display)) {
|
if (/\{\{.+\}\}/.test(display)) {
|
||||||
const labelValue = display.replace(/(\{\{.+?\}\})/g, function (i) {
|
const labelValue = display.replace(/(\{\{.+?\}\})/g, function (i) {
|
||||||
const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
|
const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
|
||||||
@@ -313,7 +312,6 @@ export default {
|
|||||||
if (label.indexOf('$value') !== -1) {
|
if (label.indexOf('$value') !== -1) {
|
||||||
value = chartDataFormat.getUnit(column.unit ? column.unit : 2).compute(value, null, -1, 2)
|
value = chartDataFormat.getUnit(column.unit ? column.unit : 2).compute(value, null, -1, 2)
|
||||||
}
|
}
|
||||||
console.log(value)
|
|
||||||
if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) {
|
if (!((typeof value) == 'string' && value.constructor == String) && isNaN(value)) {
|
||||||
let legend = ''
|
let legend = ''
|
||||||
if (value.__name__) {
|
if (value.__name__) {
|
||||||
@@ -363,7 +361,6 @@ export default {
|
|||||||
}
|
}
|
||||||
return value || ''
|
return value || ''
|
||||||
})
|
})
|
||||||
console.log(labelValue)
|
|
||||||
obj[column.title + 'display'] = {
|
obj[column.title + 'display'] = {
|
||||||
display: labelValue,
|
display: labelValue,
|
||||||
oldValue: oldLabelValue
|
oldValue: oldLabelValue
|
||||||
|
|||||||
@@ -166,7 +166,6 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
initChart (chartOptions = this.chartOption) {
|
initChart (chartOptions = this.chartOption) {
|
||||||
this.setDataLink()
|
this.setDataLink()
|
||||||
console.log(JSON.stringify(this.chartData))
|
|
||||||
try {
|
try {
|
||||||
this.isStack = this.chartInfo.param.stack
|
this.isStack = this.chartInfo.param.stack
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
|||||||
@@ -8,10 +8,6 @@
|
|||||||
>
|
>
|
||||||
<div class="chart__canvas" style="position:relative" :class="{'chart-cursor-default':cursorDefault}">
|
<div class="chart__canvas" style="position:relative" :class="{'chart-cursor-default':cursorDefault}">
|
||||||
<div :id="`chart-canvas-${chartId}`"></div>
|
<div :id="`chart-canvas-${chartId}`"></div>
|
||||||
<!-- <!– 右y轴name –>-->
|
|
||||||
<!-- <p class="rightYAxis-name" v-if="hasRightYAxis">-->
|
|
||||||
<!-- <span>{{chartInfo.param.rightYAxis.label}}</span>-->
|
|
||||||
<!-- </p>-->
|
|
||||||
</div>
|
</div>
|
||||||
<chart-legend
|
<chart-legend
|
||||||
ref="legend"
|
ref="legend"
|
||||||
@@ -161,7 +157,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart (chartOptions = this.chartOption) {
|
initChart (chartOptions = this.chartOption) {
|
||||||
console.log(this.chartData, this.chartInfo)
|
this.setDataLink()
|
||||||
const self = this
|
const self = this
|
||||||
const leftUnit = this.chartInfo.unit
|
const leftUnit = this.chartInfo.unit
|
||||||
const leftUnitCompute = chartDataFormat.getUnit(leftUnit)
|
const leftUnitCompute = chartDataFormat.getUnit(leftUnit)
|
||||||
@@ -169,10 +165,9 @@ export default {
|
|||||||
const rightUnitCompute = chartDataFormat.getUnit(rightUnit)
|
const rightUnitCompute = chartDataFormat.getUnit(rightUnit)
|
||||||
const incrs = leftUnitCompute.ascii == 1024 ? this.incrs : undefined
|
const incrs = leftUnitCompute.ascii == 1024 ? this.incrs : undefined
|
||||||
const rightIncrs = rightUnitCompute.ascii == 1024 ? this.incrs : undefined
|
const rightIncrs = rightUnitCompute.ascii == 1024 ? this.incrs : undefined
|
||||||
console.log(incrs, 'incrs')
|
|
||||||
const decimals = this.chartInfo.param.decimals || 2
|
const decimals = this.chartInfo.param.decimals || 2
|
||||||
let cursLeft = -10
|
const cursLeft = -10
|
||||||
let cursTop = -10
|
const cursTop = -10
|
||||||
const { seriesData, seriesAll } = this.initSeriesData(this.chartData)
|
const { seriesData, seriesAll } = this.initSeriesData(this.chartData)
|
||||||
// .compute(minusVal, null, -1, decimals)
|
// .compute(minusVal, null, -1, decimals)
|
||||||
const opts = {
|
const opts = {
|
||||||
@@ -184,8 +179,7 @@ export default {
|
|||||||
prox: 5
|
prox: 5
|
||||||
},
|
},
|
||||||
drag: {
|
drag: {
|
||||||
x: true,
|
x: true
|
||||||
y: true
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
@@ -203,7 +197,7 @@ export default {
|
|||||||
{}
|
{}
|
||||||
],
|
],
|
||||||
tzDate: ts => UPlot.tzDate(new Date(ts * 1e3), localStorage.getItem('nz-sys-timezone')),
|
tzDate: ts => UPlot.tzDate(new Date(ts * 1e3), localStorage.getItem('nz-sys-timezone')),
|
||||||
fmtDate: ()=> {
|
fmtDate: () => {
|
||||||
return self.xAxisLabelFormatter(seriesData[0][0], seriesData[0][seriesData[0].length - 1])
|
return self.xAxisLabelFormatter(seriesData[0][0], seriesData[0][seriesData[0].length - 1])
|
||||||
},
|
},
|
||||||
axes: [
|
axes: [
|
||||||
@@ -251,14 +245,18 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
console.log(seriesData, seriesAll)
|
if (this.isConnect !== 'none') {
|
||||||
|
opts.cursor.sync = {
|
||||||
|
key: 'nz' + this.isFullscreen,
|
||||||
|
setSeries: true
|
||||||
|
}
|
||||||
|
}
|
||||||
const data = seriesData
|
const data = seriesData
|
||||||
opts.series.push(...seriesAll)
|
opts.series.push(...seriesAll)
|
||||||
setTimeout(() => { // 延迟加载 保证legend的高度正常
|
setTimeout(() => { // 延迟加载 保证legend的高度正常
|
||||||
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
|
const dom = document.getElementById(`chart-canvas-${this.chartId}`)
|
||||||
const width = dom.offsetWidth
|
const width = dom.offsetWidth
|
||||||
const height = dom.offsetHeight
|
const height = dom.offsetHeight
|
||||||
console.log(width, height)
|
|
||||||
opts.width = width
|
opts.width = width
|
||||||
opts.height = height
|
opts.height = height
|
||||||
this.chart = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`))
|
this.chart = new UPlot(opts, data, document.getElementById(`chart-canvas-${this.chartId}`))
|
||||||
@@ -301,7 +299,7 @@ export default {
|
|||||||
const rightPlotEdge = leftPlotEdge + (self.bbox.width / devicePixelRatio)
|
const rightPlotEdge = leftPlotEdge + (self.bbox.width / devicePixelRatio)
|
||||||
const rightChartEdge = rightPlotEdge + self._padding[1]
|
const rightChartEdge = rightPlotEdge + self._padding[1]
|
||||||
|
|
||||||
const pxPerChar = 8
|
const pxPerChar = 15
|
||||||
const rightVal = xVals[xVals.length - 1] + ''
|
const rightVal = xVals[xVals.length - 1] + ''
|
||||||
const valHalfWidth = pxPerChar * (rightVal.length / 2)
|
const valHalfWidth = pxPerChar * (rightVal.length / 2)
|
||||||
|
|
||||||
@@ -313,7 +311,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// default size
|
// default size
|
||||||
return 8
|
return 15
|
||||||
},
|
},
|
||||||
clickout () {
|
clickout () {
|
||||||
if (this.toolbox.show) {
|
if (this.toolbox.show) {
|
||||||
@@ -321,62 +319,9 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
showAllSeries () {
|
showAllSeries () {
|
||||||
if (this.isConnect !== 'none') {
|
|
||||||
}
|
|
||||||
getChart(this.chartId).dispatchAction({
|
|
||||||
type: 'legendAllSelect'
|
|
||||||
})
|
|
||||||
this.isGrey = this.isGrey.map(() => false)
|
|
||||||
this.$refs.legend.isGrey = this.isGrey
|
|
||||||
|
|
||||||
// 点击后 处理Y轴的刻度边的
|
|
||||||
const chartInfo = this.chartInfo
|
|
||||||
const series = this.$lodash.cloneDeep(this.series)
|
|
||||||
const dataArg = series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
|
|
||||||
const option = this.renderYAxis(dataArg, chartInfo, 'legend')
|
|
||||||
getChart(this.chartId) && getChart(this.chartId).setOption({
|
|
||||||
yAxis: [
|
|
||||||
...option.yAxis
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
if (this.isConnect !== 'none') {
|
|
||||||
}
|
|
||||||
this.clickout()
|
this.clickout()
|
||||||
},
|
},
|
||||||
showSelectedSeries () {
|
showSelectedSeries () {
|
||||||
if (this.isConnect !== 'none') {
|
|
||||||
|
|
||||||
}
|
|
||||||
this.legends.forEach((item, index) => {
|
|
||||||
if (index == this.toolbox.clickIndex) {
|
|
||||||
getChart(this.chartId).dispatchAction({
|
|
||||||
type: 'legendSelect',
|
|
||||||
name: item.name
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
getChart(this.chartId).dispatchAction({
|
|
||||||
type: 'legendUnSelect',
|
|
||||||
name: item.name
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.isGrey = this.isGrey.map((g, i) => i !== this.toolbox.clickIndex)
|
|
||||||
this.$refs.legend.isGrey = this.isGrey
|
|
||||||
|
|
||||||
// 点击后 处理Y轴的刻度边的
|
|
||||||
const chartInfo = this.chartInfo
|
|
||||||
const series = this.$lodash.cloneDeep(this.series)
|
|
||||||
const dataArg = series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
|
|
||||||
const option = this.renderYAxis(dataArg, chartInfo, 'legend')
|
|
||||||
getChart(this.chartId) && getChart(this.chartId).setOption({
|
|
||||||
yAxis: [
|
|
||||||
...option.yAxis
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
if (this.isConnect !== 'none') {
|
|
||||||
}
|
|
||||||
this.clickout()
|
this.clickout()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -387,6 +332,14 @@ export default {
|
|||||||
this.isStack = this.chartInfo.param.stack
|
this.isStack = this.chartInfo.param.stack
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
this.chartInfo.loaded && this.initChart(this.chartOption)
|
this.chartInfo.loaded && this.initChart(this.chartOption)
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
const chart = getChart(this.chartId)
|
||||||
|
if (chart) {
|
||||||
|
const over = chart.over
|
||||||
|
over.removeEventListener()
|
||||||
|
chart.destroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -3,14 +3,31 @@ import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
|
|||||||
import chartDataFormat from '@/components/chart/chartDataFormat'
|
import chartDataFormat from '@/components/chart/chartDataFormat'
|
||||||
import lodash from 'lodash'
|
import lodash from 'lodash'
|
||||||
import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
|
import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
|
||||||
import uPlot, {Points} from 'uplot'
|
import uPlot, { Points } from 'uplot'
|
||||||
import bus from '@/libs/bus'
|
import bus from '@/libs/bus'
|
||||||
import moment from "moment-timezone";
|
import moment from 'moment-timezone'
|
||||||
|
import { getChart } from '@/components/common/js/common'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
seriesColor: initColor(),
|
seriesColor: initColor(),
|
||||||
incrs: Incrs
|
incrs: Incrs,
|
||||||
|
dataIdx: null,
|
||||||
|
seriesIdx: null,
|
||||||
|
mousePosition: {
|
||||||
|
top: 0,
|
||||||
|
left: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// timeSeries类型图表联动
|
||||||
|
isConnect () {
|
||||||
|
return this.$store.state.panel.isConnect
|
||||||
|
},
|
||||||
|
// timeSeries类型图表联动
|
||||||
|
currentMousemove () {
|
||||||
|
return this.$store.state.panel.currentMousemove
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -110,47 +127,45 @@ export default {
|
|||||||
let tooltipTopOffset = 0
|
let tooltipTopOffset = 0
|
||||||
const self = this
|
const self = this
|
||||||
const tooltip = document.createElement('div')
|
const tooltip = document.createElement('div')
|
||||||
let seriesIdx = null
|
tooltip.className = 'nz-uplot-tooltip'
|
||||||
let dataIdx = null
|
|
||||||
let over
|
let over
|
||||||
let tooltipVisible = false
|
|
||||||
let isRender = false
|
let isRender = false
|
||||||
function showTooltip () {
|
function setTooltip (u, e) { // 生成tooltip内容
|
||||||
if (!tooltipVisible) {
|
|
||||||
tooltip.style.display = 'block'
|
|
||||||
over.style.cursor = 'pointer'
|
|
||||||
tooltipVisible = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideTooltip () {
|
|
||||||
if (tooltipVisible) {
|
|
||||||
tooltip.style.display = 'none'
|
tooltip.style.display = 'none'
|
||||||
over.style.cursor = null
|
over.style.cursor = null
|
||||||
tooltipVisible = false
|
isRender = false
|
||||||
|
const { top } = u.cursor
|
||||||
|
const lft = u.valToPos(u.data[0][self.dataIdx], 'x')
|
||||||
|
const windowWidth = window.innerWidth// 窗口宽度
|
||||||
|
const windowHeight = window.innerHeight// 窗口高度
|
||||||
|
const boxWidth = tooltip.offsetWidth
|
||||||
|
const boxHeight = tooltip.offsetHeight
|
||||||
|
let x = 0
|
||||||
|
let y = 0
|
||||||
|
if (self.mousePosition.left < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||||
|
tooltip.style.left = (tooltipLeftOffset + lft + shiftX) + 'px'
|
||||||
|
} else {
|
||||||
|
tooltip.style.left = (tooltipLeftOffset + lft - shiftX) + 'px'
|
||||||
|
x = '-100%'
|
||||||
}
|
}
|
||||||
|
if (self.mousePosition.top + 50 < windowHeight / 2) { // 说明鼠标上面放不下提示框
|
||||||
|
tooltip.style.top = (tooltipTopOffset + top + shiftY) + 'px'
|
||||||
|
} else {
|
||||||
|
tooltip.style.top = (tooltipTopOffset + top - shiftY) + 'px'
|
||||||
|
y = '-100%'
|
||||||
}
|
}
|
||||||
|
tooltip.style.transform = `translate(${x},${y})`
|
||||||
function setTooltip (u) { // 生成tooltip内容
|
|
||||||
showTooltip()
|
|
||||||
if (!self.$lodash.get(self.chartInfo, 'param.enable.tooltip', false)) {
|
if (!self.$lodash.get(self.chartInfo, 'param.enable.tooltip', false)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
isRender = false
|
|
||||||
console.log(self.chartInfo, seriesIdx, dataIdx, u)
|
|
||||||
const { left, top } = u.cursor
|
|
||||||
const lft = u.valToPos(u.data[0][dataIdx], 'x')
|
|
||||||
tooltip.style.top = (tooltipTopOffset + top + shiftX) + 'px'
|
|
||||||
tooltip.style.left = (tooltipLeftOffset + lft + shiftY) + 'px'
|
|
||||||
let params = []
|
let params = []
|
||||||
const tooltipModel = self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'single')
|
const tooltipModel = self.$lodash.get(self.chartInfo, 'param.tooltip.mode', 'single')
|
||||||
console.log(tooltipModel)
|
|
||||||
if (self.chartInfo.param && !(tooltipModel == 'single')) {
|
if (self.chartInfo.param && !(tooltipModel == 'single')) {
|
||||||
params = u.series.map((s, i) => {
|
params = u.series.map((s, i) => {
|
||||||
return {
|
return {
|
||||||
seriesIndex: i - 1,
|
seriesIndex: i - 1,
|
||||||
yAxisIndex: s.yAxisIndex,
|
yAxisIndex: s.yAxisIndex,
|
||||||
value: [u.data[0][dataIdx], u.data[i][dataIdx]],
|
value: [u.data[0][self.dataIdx], u.data[i][self.dataIdx]],
|
||||||
seriesName: s.label,
|
seriesName: s.label,
|
||||||
show: s.show
|
show: s.show
|
||||||
}
|
}
|
||||||
@@ -159,30 +174,32 @@ export default {
|
|||||||
if (!item || !item.seriesIndex || !item.show) {
|
if (!item || !item.seriesIndex || !item.show) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
console.log(item.value[1], typeof (item.value[1]) == 'undefined')
|
|
||||||
const flag = typeof (item.value[1]) == 'undefined'
|
const flag = typeof (item.value[1]) == 'undefined'
|
||||||
return !flag
|
return !flag
|
||||||
})
|
})
|
||||||
} else if (seriesIdx) {
|
} else if (self.seriesIdx) {
|
||||||
const obj = self.series[seriesIdx - 1]
|
const obj = self.series[self.seriesIdx - 1]
|
||||||
params = [{
|
params = [{
|
||||||
seriesIndex: seriesIdx - 1,
|
seriesIndex: self.seriesIdx - 1,
|
||||||
yAxisIndex: obj.yAxisIndex,
|
yAxisIndex: obj.yAxisIndex,
|
||||||
value: [u.data[0][dataIdx], u.data[seriesIdx][dataIdx]],
|
value: [u.data[0][self.dataIdx], u.data[self.seriesIdx][self.dataIdx]],
|
||||||
seriesName: obj.label
|
seriesName: obj.label
|
||||||
}]
|
}]
|
||||||
}
|
}
|
||||||
isRender = !!params.length
|
isRender = !!params.length
|
||||||
console.log(isRender, 'isRender')
|
|
||||||
if (!isRender) {
|
if (!isRender) {
|
||||||
tooltip.style.display = 'none'
|
tooltip.style.display = 'none'
|
||||||
over.style.cursor = null
|
|
||||||
return
|
return
|
||||||
} else {
|
} else {
|
||||||
tooltip.style.display = 'block'
|
tooltip.style.display = 'block'
|
||||||
|
}
|
||||||
|
if (self.isConnect == 'crosshair' && self.chartId !== self.currentMousemove) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (self.seriesIdx) {
|
||||||
over.style.cursor = 'pointer'
|
over.style.cursor = 'pointer'
|
||||||
}
|
}
|
||||||
tooltip.className = 'chart-time-series-tooltip'
|
tooltip.className += ' chart-time-series-tooltip'
|
||||||
let str = '<div class="nz-tooltip nz-chart__tooltip">'
|
let str = '<div class="nz-tooltip nz-chart__tooltip">'
|
||||||
const hasTotal = self.isStack
|
const hasTotal = self.isStack
|
||||||
const decimals = self.chartInfo.param.decimals || 2
|
const decimals = self.chartInfo.param.decimals || 2
|
||||||
@@ -207,7 +224,6 @@ export default {
|
|||||||
handler(leftYAxis, 'left')
|
handler(leftYAxis, 'left')
|
||||||
handler(rightYAxis, 'right')
|
handler(rightYAxis, 'right')
|
||||||
function handler (arr, type) {
|
function handler (arr, type) {
|
||||||
console.log(arr, type)
|
|
||||||
if (!arr.length) {
|
if (!arr.length) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -318,7 +334,7 @@ export default {
|
|||||||
|
|
||||||
// 鼠标悬浮 series data symbol 时,tooltip 中相应的legend 高亮显示
|
// 鼠标悬浮 series data symbol 时,tooltip 中相应的legend 高亮显示
|
||||||
str += `
|
str += `
|
||||||
<div class="${(seriesIdx - 1 == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}" title="${seriesName}">
|
<div class="${(self.seriesIdx - 1 == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}" title="${seriesName}">
|
||||||
<div class="row__label">
|
<div class="row__label">
|
||||||
<span class="${className}" style="background-color: ${color};color: ${color}"></span>
|
<span class="${className}" style="background-color: ${color};color: ${color}"></span>
|
||||||
<span>${seriesName}</span>
|
<span>${seriesName}</span>
|
||||||
@@ -377,41 +393,27 @@ export default {
|
|||||||
tooltipLeftOffset = parseFloat(over.style.left)
|
tooltipLeftOffset = parseFloat(over.style.left)
|
||||||
tooltipTopOffset = parseFloat(over.style.top)
|
tooltipTopOffset = parseFloat(over.style.top)
|
||||||
u.root.querySelector('.u-wrap').appendChild(tooltip)
|
u.root.querySelector('.u-wrap').appendChild(tooltip)
|
||||||
|
over.addEventListener('mouseenter', self.uplotMouseenter)
|
||||||
let clientX
|
// over.addEventListener('mouseleave', self.uplotMouseleave.bind(self, hideTooltip, over)) 放入mouseenter 减少绑定事件数量
|
||||||
let clientY
|
// over.addEventListener('mousemove', self.uplotMousemove)
|
||||||
over.addEventListener('mouseleave', () => {
|
// over.addEventListener('mousedown', self.uplotMousedown)
|
||||||
if (!u.cursor._lock) {
|
// over.addEventListener('mouseup', self.uplotMouseup.bind(self, nodeInfo))
|
||||||
hideTooltip()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
over.addEventListener('mousedown', e => {
|
|
||||||
clientX = e.clientX
|
|
||||||
clientY = e.clientY
|
|
||||||
})
|
|
||||||
over.addEventListener('mouseup', e => {
|
|
||||||
if (e.clientX == clientX && e.clientY == clientY) {
|
|
||||||
if (seriesIdx != null && dataIdx != null) {
|
|
||||||
onclick(u, seriesIdx, dataIdx)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
setCursor: [
|
setCursor: [
|
||||||
u => {
|
u => {
|
||||||
const c = u.cursor
|
const c = u.cursor
|
||||||
if (dataIdx != c.idx) {
|
if (self.dataIdx != c.idx) {
|
||||||
dataIdx = c.idx
|
self.dataIdx = c.idx
|
||||||
setTooltip(u)
|
setTooltip(u)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
setSeries: [
|
setSeries: [
|
||||||
(u, sidx) => {
|
(u, sidx) => {
|
||||||
if (seriesIdx != sidx) {
|
if (self.seriesIdx != sidx) {
|
||||||
seriesIdx = sidx
|
this.seriesIdx = sidx
|
||||||
if (dataIdx != null) { setTooltip(u) }
|
if (self.dataIdx != null) { setTooltip(u) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -422,7 +424,6 @@ export default {
|
|||||||
const self = this
|
const self = this
|
||||||
return function (val, index) {
|
return function (val, index) {
|
||||||
const value = self.momentStrToTimestamp(self.momentTz(val))
|
const value = self.momentStrToTimestamp(self.momentTz(val))
|
||||||
console.log(value)
|
|
||||||
let offset = localStorage.getItem('nz-sys-timezone')
|
let offset = localStorage.getItem('nz-sys-timezone')
|
||||||
offset = moment.tz(offset).format('Z')
|
offset = moment.tz(offset).format('Z')
|
||||||
offset = Number.parseInt(offset)
|
offset = Number.parseInt(offset)
|
||||||
@@ -462,5 +463,127 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
uplotMouseenter () {
|
||||||
|
const chart = getChart(this.chartId)
|
||||||
|
const over = chart.over
|
||||||
|
over.addEventListener('mouseleave', this.uplotMouseleave)
|
||||||
|
over.addEventListener('mousemove', this.uplotMousemove)
|
||||||
|
over.addEventListener('mousedown', this.uplotMousedown)
|
||||||
|
over.addEventListener('mouseup', this.uplotMouseup)
|
||||||
|
this.$store.commit('setCurrentMousemove', this.chartId)
|
||||||
|
},
|
||||||
|
uplotMouseleave () {
|
||||||
|
const chart = getChart(this.chartId)
|
||||||
|
const over = chart.over
|
||||||
|
over.removeEventListener('mouseleave', this.uplotMouseleave)
|
||||||
|
over.removeEventListener('mousemove', this.uplotMousemove)
|
||||||
|
over.removeEventListener('mousedown', this.uplotMousedown)
|
||||||
|
over.removeEventListener('mouseup', this.uplotMouseup)
|
||||||
|
},
|
||||||
|
uplotMousemove (e) {
|
||||||
|
this.mousePosition = {
|
||||||
|
left: e.pageX,
|
||||||
|
top: e.pageY
|
||||||
|
}
|
||||||
|
},
|
||||||
|
uplotMousedown (e) {
|
||||||
|
this.toolbox.x = e.clientX
|
||||||
|
this.toolbox.y = e.clientY
|
||||||
|
},
|
||||||
|
uplotMouseup (e) {
|
||||||
|
if (e.clientX == this.toolbox.x && e.clientY == this.toolbox.y) {
|
||||||
|
if (this.seriesIdx) {
|
||||||
|
this.toolbox.show = true
|
||||||
|
this.datalinkClick(this.seriesIdx, this.dataIdx)
|
||||||
|
const windowWidth = window.innerWidth// 窗口宽度
|
||||||
|
const windowHeight = window.innerHeight// 窗口高度
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const box = document.getElementById(`chart-toolbox-${this.chartId}`)
|
||||||
|
const left = e.pageX - this.$refs['timeSeries-chart-box'].getBoundingClientRect().left
|
||||||
|
const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top
|
||||||
|
if (box) {
|
||||||
|
const boxWidth = box.offsetWidth
|
||||||
|
const boxHeight = box.offsetHeight
|
||||||
|
if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
|
||||||
|
this.toolbox.x = left + 15
|
||||||
|
} else {
|
||||||
|
this.toolbox.x = left - boxWidth - 15
|
||||||
|
}
|
||||||
|
if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
|
||||||
|
this.toolbox.y = top + 15
|
||||||
|
} else {
|
||||||
|
this.toolbox.y = top - boxHeight - 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.toolbox.show = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
datalinkClick (seriesIdx, dataIdx, e) { // 处理datalink数据
|
||||||
|
const obj = this.series[seriesIdx - 1]
|
||||||
|
const chart = getChart(this.chartId)
|
||||||
|
const params = {
|
||||||
|
seriesIndex: seriesIdx - 1,
|
||||||
|
yAxisIndex: obj.yAxisIndex,
|
||||||
|
value: [chart.data[0][dataIdx], chart.data[seriesIdx][dataIdx]],
|
||||||
|
seriesName: obj.label
|
||||||
|
}
|
||||||
|
console.log(params)
|
||||||
|
if (!params.seriesName) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const nameArr = params.seriesName.split('-')
|
||||||
|
if (nameArr.length > 1) {
|
||||||
|
nameArr.splice(nameArr.length - 1, 1)
|
||||||
|
}
|
||||||
|
const seriesName = nameArr.join('-')
|
||||||
|
if (this.series[params.seriesIndex]) {
|
||||||
|
params.yAxisIndex = this.series[params.seriesIndex].yAxisIndex
|
||||||
|
}
|
||||||
|
const decimals = this.chartInfo.param.decimals || 2
|
||||||
|
let unit = this.chartInfo.unit ? this.chartInfo.unit : 2
|
||||||
|
if (params.yAxisIndex == 1) {
|
||||||
|
unit = lodash.get(this, 'chartInfo.param.rightYAxis.unit', 2)
|
||||||
|
}
|
||||||
|
// title
|
||||||
|
const value = bus.computeTimezone(params.value[0] * 1000)
|
||||||
|
const tData = new Date(value)
|
||||||
|
// value
|
||||||
|
let paramsDot = bus.countDecimals(params.value[1])
|
||||||
|
if (paramsDot < this.chartDot) {
|
||||||
|
paramsDot = this.chartDot
|
||||||
|
} else if (paramsDot > 6) {
|
||||||
|
paramsDot = 6
|
||||||
|
}
|
||||||
|
const val = formatScientificNotation(params.value[1], paramsDot)
|
||||||
|
// 根据左右轴设置图标
|
||||||
|
let className = 'row__color-block'
|
||||||
|
if (params.yAxisIndex == 0) {
|
||||||
|
className = 'yAxis-icon nz-icon nz-icon-zuozongzhou'
|
||||||
|
} else if (params.yAxisIndex == 1) {
|
||||||
|
className = 'yAxis-icon nz-icon nz-icon-youzongzhou'
|
||||||
|
}
|
||||||
|
const color = this.colorList[params.seriesIndex]
|
||||||
|
this.toolbox.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="${className}" style="background-color: ${color};color: ${color}"></span>
|
||||||
|
<span>${seriesName}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row__value">
|
||||||
|
<span>${chartDataFormat.getUnit(unit).compute(val, null, -1, decimals)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
this.toolbox.show = true
|
||||||
|
this.toolbox.metric.labels = this.series[params.seriesIndex].labels
|
||||||
|
this.toolbox.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex
|
||||||
|
this.toolbox.clickIndex = params.seriesIndex
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -189,7 +189,6 @@ export default {
|
|||||||
},
|
},
|
||||||
// 单个legend
|
// 单个legend
|
||||||
handleLegend (chartInfo, data, expressionIndexs, dataIndex, colorIndex) {
|
handleLegend (chartInfo, data, expressionIndexs, dataIndex, colorIndex) {
|
||||||
console.log(chartInfo, data, expressionIndexs, dataIndex, colorIndex)
|
|
||||||
let expressionIndex = expressionIndexs
|
let expressionIndex = expressionIndexs
|
||||||
let legend = '' // up
|
let legend = '' // up
|
||||||
let alias = ''
|
let alias = ''
|
||||||
|
|||||||
@@ -583,7 +583,6 @@ export default {
|
|||||||
routePathParams.body.startAt = this.searchTimeHeader[0] ? this.momentStrToTimestamp(this.searchTimeHeader[0]) : ''
|
routePathParams.body.startAt = this.searchTimeHeader[0] ? this.momentStrToTimestamp(this.searchTimeHeader[0]) : ''
|
||||||
routePathParams.body.endAt = this.searchTimeHeader[1] ? this.momentStrToTimestamp(this.searchTimeHeader[1]) : ''
|
routePathParams.body.endAt = this.searchTimeHeader[1] ? this.momentStrToTimestamp(this.searchTimeHeader[1]) : ''
|
||||||
routePathParams.body.timeType = this.searchTimeHeader[2]
|
routePathParams.body.timeType = this.searchTimeHeader[2]
|
||||||
console.log(this.$route, this.$router)
|
|
||||||
if (!this.searchTimeHeader[2]) {
|
if (!this.searchTimeHeader[2]) {
|
||||||
routePathParams.body.startAt = this.searchTimeHeader[0] ? this.momentStrToTimestamp(this.searchTimeHeader[0]) : ''
|
routePathParams.body.startAt = this.searchTimeHeader[0] ? this.momentStrToTimestamp(this.searchTimeHeader[0]) : ''
|
||||||
routePathParams.body.endAt = this.searchTimeHeader[1] ? this.momentStrToTimestamp(this.searchTimeHeader[1]) : ''
|
routePathParams.body.endAt = this.searchTimeHeader[1] ? this.momentStrToTimestamp(this.searchTimeHeader[1]) : ''
|
||||||
|
|||||||
@@ -223,7 +223,6 @@ export default {
|
|||||||
this.nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
|
this.nowTimeType = nowType || this.$refs.pickTime.$refs.timePicker.nowTimeType
|
||||||
const type = nowTimeType.type
|
const type = nowTimeType.type
|
||||||
const val = nowTimeType.value
|
const val = nowTimeType.value
|
||||||
console.log(val)
|
|
||||||
const oneDTimestamp = 24 * 60 * 60 * 1000
|
const oneDTimestamp = 24 * 60 * 60 * 1000
|
||||||
if (type === 'relative') {
|
if (type === 'relative') {
|
||||||
const now = new Date(bus.computeTimezone(new Date().getTime()))
|
const now = new Date(bus.computeTimezone(new Date().getTime()))
|
||||||
|
|||||||
@@ -246,7 +246,6 @@ export default {
|
|||||||
this.getUtcStr()
|
this.getUtcStr()
|
||||||
this.getRangeHistoryArr()
|
this.getRangeHistoryArr()
|
||||||
const timeTemp = this.$lodash.cloneDeep(this.searchTime)
|
const timeTemp = this.$lodash.cloneDeep(this.searchTime)
|
||||||
console.log(this.searchTime)
|
|
||||||
this.oldSearchTime[0] = timeTemp[0] || ''
|
this.oldSearchTime[0] = timeTemp[0] || ''
|
||||||
this.oldSearchTime[1] = timeTemp[1] || ''
|
this.oldSearchTime[1] = timeTemp[1] || ''
|
||||||
// 监听dateFormat变化 改变日期格式
|
// 监听dateFormat变化 改变日期格式
|
||||||
|
|||||||
@@ -937,7 +937,6 @@ export default {
|
|||||||
const path = this.fromRoute.alertMessage
|
const path = this.fromRoute.alertMessage
|
||||||
const routePathParams = JSON.parse(JSON.stringify(param))
|
const routePathParams = JSON.parse(JSON.stringify(param))
|
||||||
delete routePathParams.statistics
|
delete routePathParams.statistics
|
||||||
console.log(this.searchTime[2])
|
|
||||||
if (!this.searchTime[2]) {
|
if (!this.searchTime[2]) {
|
||||||
routePathParams.body.startAt = this.searchTime[0] ? this.momentStrToTimestamp(this.searchTime[0]) : ''
|
routePathParams.body.startAt = this.searchTime[0] ? this.momentStrToTimestamp(this.searchTime[0]) : ''
|
||||||
routePathParams.body.endAt = this.searchTime[1] ? this.momentStrToTimestamp(this.searchTime[1]) : ''
|
routePathParams.body.endAt = this.searchTime[1] ? this.momentStrToTimestamp(this.searchTime[1]) : ''
|
||||||
@@ -952,7 +951,6 @@ export default {
|
|||||||
...this.searchLabel,
|
...this.searchLabel,
|
||||||
body: encodeURIComponent(JSON.stringify(this.searchLabel.body))
|
body: encodeURIComponent(JSON.stringify(this.searchLabel.body))
|
||||||
}
|
}
|
||||||
console.log(this.searchLabel.body)
|
|
||||||
this.$get('/alert/message/query', { ...queryParams }).then(response => {
|
this.$get('/alert/message/query', { ...queryParams }).then(response => {
|
||||||
this.tools.loading = false
|
this.tools.loading = false
|
||||||
if (response.code == 200) {
|
if (response.code == 200) {
|
||||||
|
|||||||
@@ -3898,7 +3898,6 @@ export default {
|
|||||||
this.saveDisabled = false
|
this.saveDisabled = false
|
||||||
}
|
}
|
||||||
axios.all(requestArr).then(res => {
|
axios.all(requestArr).then(res => {
|
||||||
console.log(res)
|
|
||||||
this.chartLoading = false
|
this.chartLoading = false
|
||||||
const errorRowIndex = []
|
const errorRowIndex = []
|
||||||
res.forEach((r, i) => {
|
res.forEach((r, i) => {
|
||||||
@@ -4593,7 +4592,6 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
postArr = postArr.filter(item => item.queryValue)
|
postArr = postArr.filter(item => item.queryValue)
|
||||||
console.log(postArr)
|
|
||||||
this.$post('/sys/user/queryHistory', postArr).then(res => {
|
this.$post('/sys/user/queryHistory', postArr).then(res => {
|
||||||
this.lastHistory = this.$lodash.cloneDeep(postArr)
|
this.lastHistory = this.$lodash.cloneDeep(postArr)
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user