refactor: 重构二级操作栏
This commit is contained in:
parent
34369b0544
commit
b9d8c7fb92
|
|
@ -7,17 +7,17 @@
|
|||
Detailed-Information
|
||||
<beta-gamma-detailed-infomation slot="content" :data="spectrumData" />
|
||||
</pop-over-with-icon>
|
||||
<pop-over-with-icon placement="bottomLeft">
|
||||
QC Flags
|
||||
<beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
|
||||
</pop-over-with-icon>
|
||||
<custom-select
|
||||
v-model="spectraType"
|
||||
:options="SampleType"
|
||||
@change="changeChartByType"
|
||||
style="width: 246px"
|
||||
style="width: 154px"
|
||||
class="sample-select"
|
||||
></custom-select>
|
||||
<pop-over-with-icon placement="right" v-model="qcFlagsVisible">
|
||||
QC Flags
|
||||
<beta-gamma-qc-flags slot="content" :data="qcFlags" @click="handleQcFlagClick" />
|
||||
</pop-over-with-icon>
|
||||
</div>
|
||||
|
||||
<!-- 二级交互栏结束 -->
|
||||
|
|
@ -228,14 +228,24 @@ export default {
|
|||
statisticsType: StatisticsType['Collection Time'],
|
||||
currSample: {},
|
||||
copyXeData: null,
|
||||
qcFlagsVisible: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$bus.$on('ReAnalyses', this.handleReAnalyse)
|
||||
},
|
||||
mounted() {
|
||||
this.qcFlagsTimer = setTimeout(() => {
|
||||
this.qcFlagsVisible = true
|
||||
}, 100)
|
||||
},
|
||||
destroyed() {
|
||||
this.cancelLastRequest()
|
||||
this.$bus.$off('ReAnalyses', this.handleReAnalyse)
|
||||
|
||||
if (this.qcFlagsTimer) {
|
||||
clearTimeout(this.qcFlagsTimer)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 重新绘制矩形框
|
||||
|
|
@ -702,6 +712,31 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 二级操作栏开始
|
||||
.spectrum-analysis-sub-operators {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 19px;
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
height: 46px;
|
||||
align-items: center;
|
||||
|
||||
.pop-over-with-icon {
|
||||
height: 32px;
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 224px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 二级操作栏结束
|
||||
|
||||
.sample-select {
|
||||
::v-deep {
|
||||
.ant-select-selection {
|
||||
|
|
@ -712,7 +747,7 @@ export default {
|
|||
}
|
||||
|
||||
&-main {
|
||||
height: calc(100% - 51px);
|
||||
height: calc(100% - 65px);
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
overflow: auto hidden;
|
||||
|
|
|
|||
|
|
@ -57,20 +57,23 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.qc-flags {
|
||||
display: flex;
|
||||
max-width: calc(100vw - 685px);
|
||||
overflow: auto;
|
||||
|
||||
&-item {
|
||||
background-color: #46738e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
padding: 0 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 20px;
|
||||
margin-right: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,21 @@
|
|||
<template>
|
||||
<a-popover :placement="placement" overlayClassName="popover-with-icon" v-model="innerVisible">
|
||||
<a-popover
|
||||
v-bind="$attrs"
|
||||
:placement="placement"
|
||||
overlayClassName="popover-with-icon"
|
||||
:visible="innerVisible"
|
||||
:getPopupContainer="(ele) => ele"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div class="pop-over-with-icon">
|
||||
<span class="text">
|
||||
<slot />
|
||||
</span>
|
||||
<img src="@/assets/images/global/select-down.png" alt="" />
|
||||
</div>
|
||||
<template slot="content">
|
||||
<div slot="content" @click.stop>
|
||||
<slot name="content" />
|
||||
</template>
|
||||
</div>
|
||||
</a-popover>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -16,27 +23,32 @@ export default {
|
|||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
default: 'bottom',
|
||||
},
|
||||
value: {
|
||||
type: Boolean
|
||||
}
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerVisible: false
|
||||
innerVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.innerVisible = !this.innerVisible
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.innerVisible = val
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
innerVisible(val) {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,31 +15,34 @@ export default {
|
|||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.items = items
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.qc-flags {
|
||||
display: flex;
|
||||
max-width: calc(100vw - 1120px);
|
||||
overflow: auto;
|
||||
|
||||
&-item {
|
||||
background-color: #46738e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 20px;
|
||||
margin-right: 5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
|
@ -58,7 +61,7 @@ export default {
|
|||
}
|
||||
|
||||
&.BLUE {
|
||||
background: radial-gradient(circle, #00E57D 0, #00E57D 100%);
|
||||
background: radial-gradient(circle, #00e57d 0, #00e57d 100%);
|
||||
}
|
||||
|
||||
&.YELLOW {
|
||||
|
|
|
|||
|
|
@ -7,10 +7,6 @@
|
|||
Detailed-Information
|
||||
<detailed-infomation slot="content" :data="detailedInfomation" />
|
||||
</pop-over-with-icon>
|
||||
<pop-over-with-icon placement="bottomLeft">
|
||||
QC Flags
|
||||
<qc-flags slot="content" :data="qcFlags" />
|
||||
</pop-over-with-icon>
|
||||
<pop-over-with-icon>
|
||||
Graph Assistance
|
||||
<graph-assistance
|
||||
|
|
@ -20,24 +16,20 @@
|
|||
@reset="handleResetChart"
|
||||
/>
|
||||
</pop-over-with-icon>
|
||||
<a-popover
|
||||
overlayClassName="popover-with-icon"
|
||||
:visible="nuclideLibraryVisible"
|
||||
@click="handleChangeNuclideVisible"
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="pop-over-with-icon">
|
||||
<span class="text"> Nuclide Library </span>
|
||||
<img src="@/assets/images/global/select-down.png" alt="" />
|
||||
</div>
|
||||
<pop-over-with-icon v-model="subOperatorsState.nuclideLibraryVisible">
|
||||
Nuclide Library
|
||||
<a-spin slot="content" :spinning="isLoadingNuclide">
|
||||
<nuclide-library :list="nuclideLibraryList" @dblclick="handleNuclideDblClick" />
|
||||
</a-spin>
|
||||
</a-popover>
|
||||
</pop-over-with-icon>
|
||||
|
||||
<div class="peak-info">
|
||||
<button-with-switch-icon @change="handlePeakInfoChange" @click="handleTogglePeak"></button-with-switch-icon>
|
||||
</div>
|
||||
<pop-over-with-icon placement="right" v-model="subOperatorsState.qcFlagsVisible">
|
||||
QC Flags
|
||||
<qc-flags slot="content" :data="qcFlags" />
|
||||
</pop-over-with-icon>
|
||||
</div>
|
||||
<!-- 二级交互栏结束 -->
|
||||
<!-- 主体部分 -->
|
||||
|
|
@ -184,7 +176,12 @@ export default {
|
|||
detailedInfomation: [],
|
||||
qcFlags: [],
|
||||
graphAssistance: cloneDeep(graphAssistance),
|
||||
nuclideLibraryVisible: false,
|
||||
|
||||
// 子菜单状态
|
||||
subOperatorsState: {
|
||||
nuclideLibraryVisible: false,
|
||||
qcFlagsVisible: false,
|
||||
},
|
||||
|
||||
channelData: {
|
||||
peakGroup: [],
|
||||
|
|
@ -263,13 +260,22 @@ export default {
|
|||
|
||||
window.removeEventListener('keydown', this.handleKeyboardEvent)
|
||||
window.removeEventListener('click', this.closePeakInfomationTooltip)
|
||||
|
||||
if (this.qcFlagsTimer) {
|
||||
clearTimeout(this.qcFlagsTimer)
|
||||
}
|
||||
},
|
||||
deactivated() {
|
||||
this.nuclideLibraryVisible = false
|
||||
// Object.keys(this.subOperatorsState).forEach(k => {
|
||||
// this.subOperatorsState[k] = false
|
||||
// })
|
||||
},
|
||||
mounted() {
|
||||
this.option.brush = { toolbox: [] }
|
||||
this.initWebSocket()
|
||||
this.qcFlagsTimer = setTimeout(() => {
|
||||
this.subOperatorsState.qcFlagsVisible = true
|
||||
}, 100)
|
||||
},
|
||||
methods: {
|
||||
// 键盘事件
|
||||
|
|
@ -900,7 +906,7 @@ export default {
|
|||
changeSeriesType() {},
|
||||
|
||||
handleChangeNuclideVisible() {
|
||||
this.nuclideLibraryVisible = !this.nuclideLibraryVisible
|
||||
this.subOperatorsState.nuclideLibraryVisible = !this.subOperatorsState.nuclideLibraryVisible
|
||||
},
|
||||
|
||||
// 根据seriesName重绘线
|
||||
|
|
@ -1024,7 +1030,7 @@ export default {
|
|||
sampleId,
|
||||
channel,
|
||||
fileName,
|
||||
energy
|
||||
energy,
|
||||
})
|
||||
if (success) {
|
||||
const { possible } = result
|
||||
|
|
@ -1042,7 +1048,7 @@ export default {
|
|||
|
||||
// Nuclide Library 单项双击
|
||||
handleNuclideDblClick(nuclide) {
|
||||
this.nuclideLibraryVisible = false
|
||||
this.subOperatorsState.nuclideLibraryVisible = false
|
||||
this.nuclideReview.nuclide = nuclide
|
||||
this.nuclideReview.visible = true
|
||||
},
|
||||
|
|
@ -2102,8 +2108,44 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
// 二级操作栏开始
|
||||
.spectrum-analysis-sub-operators {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 19px;
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
height: 46px;
|
||||
align-items: center;
|
||||
|
||||
.pop-over-with-icon {
|
||||
height: 32px;
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 216px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 182px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 170px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 156px;
|
||||
}
|
||||
}
|
||||
|
||||
.peak-info {
|
||||
width: 226px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
// 二级操作栏结束
|
||||
|
||||
&-main {
|
||||
height: calc(100% - 51px);
|
||||
height: calc(100% - 65px);
|
||||
display: flex;
|
||||
overflow: auto hidden;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1711,49 +1711,10 @@ export default {
|
|||
}
|
||||
// 顶部操作栏结束
|
||||
|
||||
::v-deep {
|
||||
// 二级操作栏开始
|
||||
.spectrum-analysis-sub-operators {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 19px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
.pop-over-with-icon {
|
||||
height: 32px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 256px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 186px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 246px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 246px;
|
||||
}
|
||||
}
|
||||
|
||||
.peak-info {
|
||||
width: 306px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
// 二级操作栏结束
|
||||
}
|
||||
|
||||
// 主体部分开始
|
||||
&-main {
|
||||
margin-top: 15px;
|
||||
height: calc(100% - 45px);
|
||||
padding-top: 5px;
|
||||
height: calc(100% - 15px);
|
||||
overflow: hidden;
|
||||
}
|
||||
// 主体部分结束
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user