图标添加拖拽功能，接口对接，参数调整
This commit is contained in:
parent
73250bd1c2
commit
82f707971a
|
|
@ -176,8 +176,9 @@ export default {
|
|||
this.currIdx = val
|
||||
},
|
||||
async handleDetalSelfStationCache() {
|
||||
const { inputFileName } = this.sample
|
||||
let params = {
|
||||
sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
|
||||
sampleFileName: inputFileName,
|
||||
}
|
||||
try {
|
||||
const { success, result, message } = await deleteAction('/selfStation/deleteSelfStationCache', params)
|
||||
|
|
@ -188,9 +189,10 @@ export default {
|
|||
async getSelfStationSampleDetail() {
|
||||
const { inputFileName, detFileName } = this.sample
|
||||
let params = {
|
||||
// sampleFileName: inputFileName,
|
||||
sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
|
||||
detFileName: detFileName || 'ABC01_001-20240108_1327_D_FULL_381505.PHD',
|
||||
sampleFileName: inputFileName,
|
||||
detFileName: detFileName,
|
||||
// sampleFileName: 'ABC01_001-20240108_1405_S_FULL_40186.0.PHD',
|
||||
// detFileName: detFileName || 'ABC01_001-20240108_1327_D_FULL_381505.PHD',
|
||||
}
|
||||
try {
|
||||
this.isLoading = true
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
<div class="beta-gamma-spectrum-chart-main">
|
||||
<!-- 2D 图表，为了相应Unzoom采用的v-show -->
|
||||
<div class="_2d-chart" v-show="active == 0">
|
||||
<div class="_2d-chart" ref="TwoChartRef" v-show="active == 0">
|
||||
<CustomChart
|
||||
ref="chartTwoDRef"
|
||||
:option="twoDOption"
|
||||
|
|
@ -43,6 +43,8 @@
|
|||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import ColorPalette from './ColorPalette.vue'
|
||||
import { getXAxisAndYAxisByPosition, rangeNumber } from '@/utils/chartHelper.js'
|
||||
import { getAction, postAction, deleteAction } from '../../../api/manage'
|
||||
import SampleDataMixin from '../SampleDataMixin'
|
||||
const buttons = ['Beta-Gamma', 'Gamma', 'Beta']
|
||||
// Beta-Gamma 的配置
|
||||
const twoDOption = {
|
||||
|
|
@ -67,6 +69,7 @@ const twoDOption = {
|
|||
},
|
||||
},
|
||||
xAxis: {
|
||||
id: '2',
|
||||
name: 'Beta Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
|
|
@ -97,6 +100,7 @@ const twoDOption = {
|
|||
interval: 128,
|
||||
},
|
||||
yAxis: {
|
||||
id: '3',
|
||||
name: 'Gamma Channel',
|
||||
nameTextStyle: {
|
||||
color: '#5b9cba',
|
||||
|
|
@ -128,6 +132,7 @@ const twoDOption = {
|
|||
},
|
||||
series: {
|
||||
type: 'scatterGL',
|
||||
z: 100,
|
||||
symbolSize: 4,
|
||||
data: [],
|
||||
itemStyle: {
|
||||
|
|
@ -147,6 +152,53 @@ const twoDOption = {
|
|||
brush: {},
|
||||
animation: false,
|
||||
}
|
||||
|
||||
const dragOption = {
|
||||
// 绘制阈值的graphic line
|
||||
graphic: [
|
||||
{
|
||||
type: 'rect',
|
||||
// rotation: Math.PI/2,
|
||||
z: 1000,
|
||||
shape: {
|
||||
width: 5,
|
||||
height: 0,
|
||||
},
|
||||
|
||||
//构造坐标扔进去
|
||||
position: [],
|
||||
draggable: true,
|
||||
style: {
|
||||
fill: 'rgba(255,0,255,0.3)', // fill: 'rgba(0,0,0,0.03)', 方便观察
|
||||
stroke: 'rgba(255,0,255,0.3)', // stroke: 'rgba(0,0,0,0.03)', 方便观察
|
||||
lineWidth: 10,
|
||||
},
|
||||
cursor: 'move',
|
||||
ondrag: null,
|
||||
},
|
||||
{
|
||||
type: 'rect',
|
||||
// rotation: Math.PI/2,
|
||||
z: 1000,
|
||||
shape: {
|
||||
width: 5,
|
||||
height: 0,
|
||||
},
|
||||
|
||||
//构造坐标扔进去
|
||||
position: [],
|
||||
draggable: true,
|
||||
style: {
|
||||
fill: 'rgba(255,0,255,0.3)', // fill: 'rgba(0,0,0,0.03)', 方便观察
|
||||
stroke: 'rgba(255,0,255,0.3)', // stroke: 'rgba(0,0,0,0.03)', 方便观察
|
||||
lineWidth: 10,
|
||||
},
|
||||
cursor: 'move',
|
||||
ondrag: null,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
// Gamma 的配置
|
||||
const gammaOption = {
|
||||
grid: {
|
||||
|
|
@ -292,6 +344,7 @@ const betaOption = {
|
|||
},
|
||||
}
|
||||
export default {
|
||||
mixins: [SampleDataMixin],
|
||||
components: {
|
||||
CustomChart,
|
||||
ColorPalette,
|
||||
|
|
@ -362,22 +415,106 @@ export default {
|
|||
},
|
||||
// immediate: true,
|
||||
},
|
||||
boundaryData: {
|
||||
handler(newVal) {
|
||||
const { minX, maxX, minY, maxY, color } = newVal
|
||||
const [graphic1, graphic2] = this.dragOption.graphic
|
||||
const _this = this
|
||||
this.myChart = this.$refs.chartTwoDRef.getChartInstance()
|
||||
let graphicHeight = this.$refs.TwoChartRef.clientHeight
|
||||
graphic1.shape.height = graphicHeight
|
||||
graphic1.position = [
|
||||
this.myChart.convertToPixel({ xAxisId: '2' }, minX),
|
||||
this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
graphic1.ondrag = function () {
|
||||
const rectList = []
|
||||
this.startChannel = _this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0])
|
||||
const rect = [
|
||||
[this.startChannel, minY],
|
||||
[maxX, minY],
|
||||
[maxX, maxY],
|
||||
[this.startChannel, maxY],
|
||||
]
|
||||
rectList.push(..._this.drawOneRect(rect, color))
|
||||
console.log(rectList)
|
||||
_this.myChart.setOption({
|
||||
series: {
|
||||
markLine: {
|
||||
data: rectList,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
graphic2.shape.height = graphicHeight
|
||||
graphic2.position = [
|
||||
this.myChart.convertToPixel({ xAxisId: '2' }, maxX),
|
||||
this.myChart.convertToPixel({ yAxisId: '3' }, maxY),
|
||||
]
|
||||
graphic2.ondrag = function () {
|
||||
const rectList = []
|
||||
this.endChannel = _this.myChart.convertFromPixel({ xAxisId: '2' }, this.position[0])
|
||||
const rect = [
|
||||
[minX, minY],
|
||||
[this.endChannel, minY],
|
||||
[this.endChannel, maxY],
|
||||
[minX, maxY],
|
||||
]
|
||||
rectList.push(..._this.drawOneRect(rect, color))
|
||||
console.log(rectList)
|
||||
_this.myChart.setOption({
|
||||
series: {
|
||||
markLine: {
|
||||
data: rectList,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
this.myChart.setOption(this.dragOption)
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
this.buttons = buttons
|
||||
return {
|
||||
active: 0,
|
||||
twoDOption,
|
||||
dragOption,
|
||||
gammaOption,
|
||||
betaOption,
|
||||
currCount: 50,
|
||||
boundaryData: [],
|
||||
showROI: true,
|
||||
myChart: null,
|
||||
startChannel: null,
|
||||
endChannel: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.twoDOption.brush = { toolbox: [] }
|
||||
},
|
||||
methods: {
|
||||
// onLineDragging(position, data) {
|
||||
// const { minX, maxX, minY, maxY, color } = data
|
||||
// console.log(this)
|
||||
// const rectList = []
|
||||
// let xAxis = this.myChart.convertFromPixel({ xAxisId: '2' }, position[0])
|
||||
// const rect = [
|
||||
// [xAxis, minY],
|
||||
// [maxX, minY],
|
||||
// [maxX, maxY],
|
||||
// [xAxis, maxY],
|
||||
// ]
|
||||
// rectList.push(...this.drawOneRect(rect, color))
|
||||
// console.log(rectList)
|
||||
// this.myChart.setOption({
|
||||
// series: {
|
||||
// markLine: {
|
||||
// data: rectList,
|
||||
// },
|
||||
// },
|
||||
// })
|
||||
// },
|
||||
// Gamma 的折线图数据
|
||||
buildGammaLineList(val) {
|
||||
const gammaSeries = this.gammaOption.series
|
||||
|
|
@ -398,7 +535,6 @@ export default {
|
|||
this.twoDOption.series.data = this.histogramDataList
|
||||
.filter(({ b, g, c }) => c && b >= minX && b <= maxX && g >= minY && g <= maxY)
|
||||
.map(({ b, g, c }) => this.buildScatterItem(b, g, c))
|
||||
console.log('this.twoDOption.series.data', this.twoDOption.series.data)
|
||||
},
|
||||
|
||||
// 构造一个scatter 的点
|
||||
|
|
@ -702,7 +838,20 @@ export default {
|
|||
this.reDrawRect()
|
||||
},
|
||||
// 点击Update
|
||||
handleUpdate() {},
|
||||
async handleUpdate() {
|
||||
const { inputFileName } = this.sampleData
|
||||
let params = {
|
||||
sampleFileName: inputFileName,
|
||||
startChannel: this.startChannel,
|
||||
endChannel: this.endChannel,
|
||||
ROINum: this.currCount + 1,
|
||||
}
|
||||
try {
|
||||
const { success, result, message } = await postAction('/selfStation/updateROI', params)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
},
|
||||
|
||||
// 颜色插值算法
|
||||
interpolateColor(percentage) {
|
||||
|
|
|
|||
|
|
@ -566,6 +566,8 @@ export default {
|
|||
return item
|
||||
} else if (!item.gasFileName && !item.detFileName && !item.qcFileName) {
|
||||
return item
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user