feat: 自建台站gamma和beta弹窗增加最大化按钮，里面的图表增加缩放功能
This commit is contained in:
parent
a858b4df7f
commit
4e90224756
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" title="Beta" width="800px" destroy-on-close>
|
||||
<custom-modal v-model="visible" title="Beta" width="800px" destroy-on-close enable-full-screen>
|
||||
<div class="beta-modal">
|
||||
<div class="beta-modal__header">
|
||||
<span class="count">Channel: {{ axisInfo.channel }}</span>
|
||||
|
|
@ -7,15 +7,31 @@
|
|||
<span class="energy">Energy: {{ axisInfo.energy }}</span>
|
||||
</div>
|
||||
<div class="beta-modal__content">
|
||||
<custom-chart :option="option" autoresize />
|
||||
<CustomChart
|
||||
ref="chartRef"
|
||||
:option="option"
|
||||
:opts="opts"
|
||||
autoresize
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template slot="custom-footer">
|
||||
<div style="text-align: center">
|
||||
<a-space>
|
||||
<a-button type="success" @click="handleUnzoom">Unzoom</a-button>
|
||||
<a-button type="warn" @click="visible = false">Cancel</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import { buildLineSeries } from '@/utils/chartHelper'
|
||||
import { buildLineSeries, getAxisMax, rangeNumber } from '@/utils/chartHelper'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const initialOption = {
|
||||
|
|
@ -96,6 +112,7 @@ const initialOption = {
|
|||
max: 'dataMax',
|
||||
},
|
||||
series: buildLineSeries('Line', [], 'yellow'),
|
||||
brush: {},
|
||||
}
|
||||
|
||||
const initialAxisInfo = {
|
||||
|
|
@ -113,6 +130,10 @@ export default {
|
|||
visible: false,
|
||||
option: cloneDeep(initialOption),
|
||||
axisInfo: cloneDeep(initialAxisInfo),
|
||||
|
||||
opts: {
|
||||
notMerge: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -124,6 +145,17 @@ export default {
|
|||
this.energys = energys || []
|
||||
this.axisInfo = cloneDeep(initialAxisInfo)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.option.brush = { toolbox: [] }
|
||||
this.handleUnzoom()
|
||||
})
|
||||
},
|
||||
|
||||
handleUnzoom() {
|
||||
this.option.xAxis.min = 0
|
||||
this.option.xAxis.max = 512
|
||||
this.option.yAxis.min = 1
|
||||
this.option.yAxis.max = 'dataMax'
|
||||
},
|
||||
|
||||
handleTooltipFormat(params) {
|
||||
|
|
@ -134,6 +166,81 @@ export default {
|
|||
energy: (this.energys[channel] || 0).toFixed(3),
|
||||
}
|
||||
},
|
||||
|
||||
getChart() {
|
||||
return this.$refs.chartRef.getChartInstance()
|
||||
},
|
||||
|
||||
// 鼠标按下时开启可刷选状态
|
||||
handleMouseDown() {
|
||||
const chart = this.getChart()
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
|
||||
key: 'brush',
|
||||
brushOption: {
|
||||
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
|
||||
brushType: 'rect',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
this.$nextTick(() => {
|
||||
this.clearBrush()
|
||||
})
|
||||
},
|
||||
|
||||
clearBrush() {
|
||||
const chart = this.getChart()
|
||||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
areas: [],
|
||||
})
|
||||
|
||||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
})
|
||||
},
|
||||
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
const chart = this.getChart()
|
||||
const areas = param.areas[0]
|
||||
if (areas) {
|
||||
const range = areas.range
|
||||
const [[minX, maxX], [minY, maxY]] = range
|
||||
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
|
||||
|
||||
// 拿到之前的最大值
|
||||
const xAxisMax = getAxisMax(chart, 'xAxis')
|
||||
const yAxisMax = getAxisMax(chart, 'yAxis')
|
||||
|
||||
// 拿到之前的最小值
|
||||
const xAxisMin = this.option.xAxis.min
|
||||
const yAxisMin = this.option.yAxis.min
|
||||
|
||||
let [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
|
||||
|
||||
const xAxisLimit = rangeNumber(xAxisMin, xAxisMax)
|
||||
const yAxisLimit = rangeNumber(yAxisMin, yAxisMax)
|
||||
|
||||
x1 = xAxisLimit(x1)
|
||||
x2 = xAxisLimit(x2)
|
||||
|
||||
y1 = yAxisLimit(y1)
|
||||
y2 = yAxisLimit(y2)
|
||||
|
||||
this.option.xAxis.min = x1
|
||||
this.option.xAxis.max = x2
|
||||
this.option.yAxis.min = y1
|
||||
this.option.yAxis.max = y2
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -169,4 +276,16 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
::v-deep {
|
||||
.ant-modal-body {
|
||||
height: calc(100% - 93px);
|
||||
|
||||
.beta-modal {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" title="Gamma" width="800px" destroy-on-close>
|
||||
<custom-modal v-model="visible" title="Gamma" width="800px" destroy-on-close enable-full-screen>
|
||||
<div class="gamma-modal">
|
||||
<div class="gamma-modal__header">
|
||||
<span class="count">Channel: {{ axisInfo.channel }}</span>
|
||||
|
|
@ -7,15 +7,31 @@
|
|||
<span class="energy">Energy: {{ axisInfo.energy }}</span>
|
||||
</div>
|
||||
<div class="gamma-modal__content">
|
||||
<custom-chart :option="option" autoresize />
|
||||
<CustomChart
|
||||
ref="chartRef"
|
||||
:option="option"
|
||||
:opts="opts"
|
||||
autoresize
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<template slot="custom-footer">
|
||||
<div style="text-align: center">
|
||||
<a-space>
|
||||
<a-button type="success" @click="handleUnzoom">Unzoom</a-button>
|
||||
<a-button type="warn" @click="visible = false">Cancel</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import { buildLineSeries } from '@/utils/chartHelper'
|
||||
import { buildLineSeries, getAxisMax, rangeNumber } from '@/utils/chartHelper'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
const initialOption = {
|
||||
|
|
@ -96,6 +112,7 @@ const initialOption = {
|
|||
max: 'dataMax',
|
||||
},
|
||||
series: buildLineSeries('Line', [], 'yellow'),
|
||||
brush: {},
|
||||
}
|
||||
|
||||
const initialAxisInfo = {
|
||||
|
|
@ -113,6 +130,10 @@ export default {
|
|||
visible: false,
|
||||
option: cloneDeep(initialOption),
|
||||
axisInfo: cloneDeep(initialAxisInfo),
|
||||
|
||||
opts: {
|
||||
notMerge: false,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -124,6 +145,17 @@ export default {
|
|||
this.energys = energys || []
|
||||
this.axisInfo = cloneDeep(initialAxisInfo)
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.option.brush = { toolbox: [] }
|
||||
this.handleUnzoom()
|
||||
})
|
||||
},
|
||||
|
||||
handleUnzoom() {
|
||||
this.option.xAxis.min = 0
|
||||
this.option.xAxis.max = 4096
|
||||
this.option.yAxis.min = 1
|
||||
this.option.yAxis.max = 'dataMax'
|
||||
},
|
||||
|
||||
handleTooltipFormat(params) {
|
||||
|
|
@ -134,6 +166,81 @@ export default {
|
|||
energy: (this.energys[channel] || 0).toFixed(3),
|
||||
}
|
||||
},
|
||||
|
||||
getChart() {
|
||||
return this.$refs.chartRef.getChartInstance()
|
||||
},
|
||||
|
||||
// 鼠标按下时开启可刷选状态
|
||||
handleMouseDown() {
|
||||
const chart = this.getChart()
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
|
||||
key: 'brush',
|
||||
brushOption: {
|
||||
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
|
||||
brushType: 'rect',
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
this.$nextTick(() => {
|
||||
this.clearBrush()
|
||||
})
|
||||
},
|
||||
|
||||
clearBrush() {
|
||||
const chart = this.getChart()
|
||||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
areas: [],
|
||||
})
|
||||
|
||||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
})
|
||||
},
|
||||
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
const chart = this.getChart()
|
||||
const areas = param.areas[0]
|
||||
if (areas) {
|
||||
const range = areas.range
|
||||
const [[minX, maxX], [minY, maxY]] = range
|
||||
|
||||
const point1 = chart.convertFromPixel({ seriesIndex: 0 }, [minX, minY]).map((num) => parseInt(num.toFixed()))
|
||||
const point2 = chart.convertFromPixel({ seriesIndex: 0 }, [maxX, maxY]).map((num) => parseInt(num.toFixed()))
|
||||
|
||||
// 拿到之前的最大值
|
||||
const xAxisMax = getAxisMax(chart, 'xAxis')
|
||||
const yAxisMax = getAxisMax(chart, 'yAxis')
|
||||
|
||||
// 拿到之前的最小值
|
||||
const xAxisMin = this.option.xAxis.min
|
||||
const yAxisMin = this.option.yAxis.min
|
||||
|
||||
let [x1, y2, x2, y1] = [...point1, ...point2] // 根据解析出的数据确定真实的范围
|
||||
|
||||
const xAxisLimit = rangeNumber(xAxisMin, xAxisMax)
|
||||
const yAxisLimit = rangeNumber(yAxisMin, yAxisMax)
|
||||
|
||||
x1 = xAxisLimit(x1)
|
||||
x2 = xAxisLimit(x2)
|
||||
|
||||
y1 = yAxisLimit(y1)
|
||||
y2 = yAxisLimit(y2)
|
||||
|
||||
this.option.xAxis.min = x1
|
||||
this.option.xAxis.max = x2
|
||||
this.option.yAxis.min = y1
|
||||
this.option.yAxis.max = y2
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -169,4 +276,16 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
::v-deep {
|
||||
.ant-modal-body {
|
||||
height: calc(100% - 93px);
|
||||
|
||||
.gamma-modal {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user