xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master-dev' into feature-Beta-dev-renpy

Browse Source
This commit is contained in:
orgin 2024-02-29 17:59:27 +08:00
commit 38e2111e0e
3 changed files with 276 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/components/NuclideReviewModal.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<custom-modal v-model="visible" :width="1280" title="Nuclide Review" :footer="null" @close="handleCancel"> <custom-modal v-model="visible" :width="1280" title="Nuclide Review" :footer="null">
<a-spin :spinning="isLoading"> <a-spin :spinning="isLoading">
<div class="nuclide-review-search"> <div class="nuclide-review-search">
<span @click="handleNuclideChange('prev')">&lt;</span> <span @click="handleNuclideChange('prev')">&lt;</span>

434
src/views/spectrumAnalysis/components/Modals/AnalyzeInteractiveToolModal/index.vue
View File

@ -1,182 +1,187 @@
<template> <template>
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null" destroy-on-close> <custom-modal
<a-spin :spinning="isLoading"> v-model="visible"
<div class="interactive-analysis-tools"> :width="1280"
<div class="interactive-analysis-tools-left"> class="interactive-analysis-tools-dialog"
<div class="chart"> :enableFullScreen="true"
<CustomChart title="Interactive Analyse Tools"
ref="chartRef" :footer="null"
:option="option" destroy-on-close
:opts="opts" @fullscreen="handleFullScreenChange"
@zr:mousedown="handleMouseDown" >
@zr:mouseup="handleMouseUp" <div class="interactive-analysis-tools">
@brushEnd="handleBrushEnd" <div class="interactive-analysis-tools-left">
@zr:click="handleChartClick" <div class="chart">
/> <CustomChart
<rect-list ref="chartRef"
ref="rectListRef" :option="option"
:chartRef="$refs.chartRef" :opts="opts"
:baseControls="baseCtrls_Copy" @zr:mousedown="handleMouseDown"
:draggable="isModifying" @zr:mouseup="handleMouseUp"
@move="handleMove" @brushEnd="handleBrushEnd"
@moveEnd="handleMoveEnd" @zr:click="handleChartClick"
/> />
</div> <rect-list
<!-- 缩略图 --> ref="rectListRef"
<div class="thumbnail"> :chartRef="$refs.chartRef"
<CustomChart :option="thumbnailOption" /> :baseControls="baseCtrls_Copy"
</div> :draggable="isModifying"
<!-- 缩略图结束 --> @move="handleMove"
@moveEnd="handleMoveEnd"
<!-- 表格 --> />
<div class="table">
<p class="title">
<span @click="handleChangeMarkLine('prev')">&lt; </span>
6 Peaks with Anthro.Nuclides
<span @click="handleChangeMarkLine('next')">&gt;</span>
</p>
<custom-table
ref="tableRef"
size="small"
:class="list.length ? 'has-data' : ''"
:list="list"
:columns="columns"
:scroll="{ y: 288 }"
:selectedRowKeys.sync="selectedKeys"
rowKey="index"
:canDeselect="false"
@rowClick="handleTableRowClick"
>
</custom-table>
<div class="operators">
<a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
<a-button type="primary" @click="handleAddPeakComment()">Add Peak Comment</a-button>
<a-button type="primary" @click="handleAddGeneralComment()">Add General Comment</a-button>
</div>
</div>
<!-- 表格结束 -->
</div> </div>
<!-- 缩略图 -->
<div class="thumbnail">
<CustomChart ref="thumbnailRef" :option="thumbnailOption" />
</div>
<!-- 缩略图结束 -->
<!-- 右侧 --> <!-- 表格 -->
<div class="interactive-analysis-tools-right"> <div class="table">
<title-over-border :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'"> <p class="title">
<div class="peak-box"> <span @click="handleChangeMarkLine('prev')">&lt; </span>
<!-- 按钮组1 --> 6 Peaks with Anthro.Nuclides
<template v-if="btnGroupType == 1"> <span @click="handleChangeMarkLine('next')">&gt;</span>
<div class="peak-box-item"> </p>
<a-button type="primary" @click="handleInsert">Insert</a-button> <custom-table
</div> ref="tableRef"
<div class="peak-box-item"> size="small"
<a-button type="primary" @click="handleDel">Delete</a-button> :class="list.length ? 'has-data' : ''"
</div> :list="list"
<div class="peak-box-item"> :columns="columns"
<a-button type="primary" :class="{ 'is-fitting': isFitting }" @click="handleFit">Fit</a-button> :scroll="{ y: 288 }"
</div> :selectedRowKeys.sync="selectedKeys"
rowKey="index"
<div class="peak-box-item symbol" :key="4"> :canDeselect="false"
<a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button> @rowClick="handleTableRowClick"
<a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button> >
</div> </custom-table>
<div class="operators">
<div class="peak-box-item base-line"> <a-button type="primary" @click="nuclideReviewModalVisible = true">Nuclide Review Window</a-button>
<a-button type="primary" @click="handleSwitchOperation">BaseLine</a-button> <a-button type="primary" @click="handleAddPeakComment()">Add Peak Comment</a-button>
</div> <a-button type="primary" @click="handleAddGeneralComment()">Add General Comment</a-button>
</template>
<!-- 按钮组2 -->
<template v-if="btnGroupType == 2">
<div class="peak-box-item">
<a-button type="primary" @click="handleAddCP">(A)dd CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="handleRemoveCP">(R)emove CP</a-button>
</div>
<div class="peak-box-item">
<a-button
type="primary"
key="modify-btn"
:class="{ 'is-modify': isModifying }"
@click="handleModifyCP"
>(M)odify CP</a-button
>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="handleEditSlope">Edit (S)lope</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" :disabled="isOperationStackEmpty" @click="handleUndo">Undo</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" :loading="isReploting" @click="handleReplot">Replot</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" :loading="isAccepting" @click="handleAccept">Accept</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="handleSwitchOperation">Cancel</a-button>
</div>
</template>
</div>
</title-over-border>
<div class="reset-btn-box">
<a-button type="primary" @click="handleResetChart">Reset Chart</a-button>
</div> </div>
<div class="identify-box"> </div>
<title-over-border title="Nuclide Identify"> <!-- 表格结束 -->
<a-form-model class="tolerance">
<a-form-model-item label="Tolerance"> <resize-observer @notify="handleResize" />
<a-input-number </div>
v-model="model.tolerance"
:step="0.1" <!-- 右侧 -->
:min="0" <div class="interactive-analysis-tools-right">
@change="handleToleranceChange" <title-over-border class="peak-box-container" :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
></a-input-number> <div class="peak-box">
</a-form-model-item> <!-- 按钮组1 -->
</a-form-model> <template v-if="btnGroupType == 1">
<div class="identify-item"> <div class="peak-box-item">
<div class="title">Possible Nuclide</div> <a-button type="primary" @click="handleInsert">Insert</a-button>
<a-spin :spinning="!!(selectedTableItem && selectedTableItem._loading)">
<div class="content">
<template v-if="selectedTableItem && selectedTableItem._possible">
<div
class="item"
:class="{ active: possible == model.possibleNuclide }"
v-for="(possible, index) in selectedTableItem._possible"
:key="index"
@click="model.possibleNuclide = possible"
>
{{ possible }}
</div>
</template>
</div>
</a-spin>
</div> </div>
<div class="identify-item"> <div class="peak-box-item">
<div class="title">Nuclide Identified</div> <a-button type="primary" @click="handleDel">Delete</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" :class="{ 'is-fitting': isFitting }" @click="handleFit">Fit</a-button>
</div>
<div class="peak-box-item symbol" :key="4">
<a-button type="primary" @click="handleChangeMarkLine('prev')">&lt;</a-button>
<a-button type="primary" @click="handleChangeMarkLine('next')">&gt;</a-button>
</div>
<div class="peak-box-item base-line">
<a-button type="primary" @click="handleSwitchOperation">BaseLine</a-button>
</div>
</template>
<!-- 按钮组2 -->
<template v-if="btnGroupType == 2">
<div class="peak-box-item">
<a-button type="primary" @click="handleAddCP">(A)dd CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="handleRemoveCP">(R)emove CP</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" key="modify-btn" :class="{ 'is-modify': isModifying }" @click="handleModifyCP"
>(M)odify CP</a-button
>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="handleEditSlope">Edit (S)lope</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" :disabled="isOperationStackEmpty" @click="handleUndo">Undo</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" :loading="isReploting" @click="handleReplot">Replot</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" :loading="isAccepting" @click="handleAccept">Accept</a-button>
</div>
<div class="peak-box-item">
<a-button type="primary" @click="handleSwitchOperation">Cancel</a-button>
</div>
</template>
</div>
</title-over-border>
<div class="reset-btn-box">
<a-button type="primary" @click="handleResetChart">Reset Chart</a-button>
</div>
<div class="identify-box">
<title-over-border title="Nuclide Identify">
<a-form-model class="tolerance">
<a-form-model-item label="Tolerance">
<a-input-number
v-model="model.tolerance"
:step="0.1"
:min="0"
@change="handleToleranceChange"
></a-input-number>
</a-form-model-item>
</a-form-model>
<div class="identify-item">
<div class="title">Possible Nuclide</div>
<a-spin :spinning="!!(selectedTableItem && selectedTableItem._loading)">
<div class="content"> <div class="content">
<template v-if="selectedTableItem"> <template v-if="selectedTableItem && selectedTableItem._possible">
<div <div
class="item" class="item"
:class="{ active: identified == model.identifiedNuclide }" :class="{ active: possible == model.possibleNuclide }"
v-for="(identified, index) in selectedTableItem.nuclides" v-for="(possible, index) in selectedTableItem._possible"
:key="index" :key="index"
@click="model.identifiedNuclide = identified" @click="model.possibleNuclide = possible"
> >
{{ identified }} {{ possible }}
</div> </div>
</template> </template>
</div> </div>
</a-spin>
</div>
<div class="identify-item">
<div class="title">Nuclide Identified</div>
<div class="content">
<template v-if="selectedTableItem">
<div
class="item"
:class="{ active: identified == model.identifiedNuclide }"
v-for="(identified, index) in selectedTableItem.nuclides"
:key="index"
@click="model.identifiedNuclide = identified"
>
{{ identified }}
</div>
</template>
</div> </div>
<div class="identify-operators"> </div>
<span class="text">{{ model.possibleNuclide }}</span> <div class="identify-operators">
<a-button type="primary" :disabled="!model.possibleNuclide" @click="handleAddNuclide">Add</a-button> <span class="text">{{ model.possibleNuclide }}</span>
<a-button type="primary" @click="handleDelNuclide">Del</a-button> <a-button type="primary" :disabled="!model.possibleNuclide" @click="handleAddNuclide">Add</a-button>
</div> <a-button type="primary" @click="handleDelNuclide">Del</a-button>
</title-over-border> </div>
</div> </title-over-border>
</div> </div>
<!-- 右侧结束 -->
</div> </div>
</a-spin> <!-- 右侧结束 -->
</div>
<!-- Peak Comment弹窗 开始 --> <!-- Peak Comment弹窗 开始 -->
<peak-comment-modal v-model="peakCommentModalVisible" :curRow="curRow" /> <peak-comment-modal v-model="peakCommentModalVisible" :curRow="curRow" />
<!-- Peak Comment弹窗 结束 --> <!-- Peak Comment弹窗 结束 -->
@ -450,8 +455,8 @@ export default {
}, },
}, },
data() { data() {
this.columns = columns
return { return {
columns,
searchParam: { searchParam: {
energy: '', energy: '',
tolerance: '', tolerance: '',
@ -459,9 +464,6 @@ export default {
option: cloneDeep(initialOption), option: cloneDeep(initialOption),
opts: { notMerge: false }, opts: { notMerge: false },
thumbnailOption: cloneDeep(thumbnailOption), thumbnailOption: cloneDeep(thumbnailOption),
isLoading: false,
channelBaseCPChart: [], channelBaseCPChart: [],
channelBaseLineChart: [], channelBaseLineChart: [],
channelCountChart: [], channelCountChart: [],
@ -1703,6 +1705,15 @@ export default {
clearOperationStack() { clearOperationStack() {
this.operationStack = [] this.operationStack = []
}, },
handleResize() {
this.$refs.chartRef.resize()
this.$refs.thumbnailRef.resize()
},
handleFullScreenChange(isFullScreen) {
this.columns[7].width = isFullScreen ? 180 : 120
},
}, },
computed: { computed: {
curRow() { curRow() {
@ -1721,11 +1732,12 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.interactive-analysis-tools { .interactive-analysis-tools {
display: flex; display: flex;
margin-top: 5px; padding-top: 5px;
gap: 20px;
&-left { &-left {
width: 75%; flex: 1;
margin-right: 20px; overflow: hidden;
.chart { .chart {
height: 331px; height: 331px;
@ -1785,6 +1797,9 @@ export default {
} }
&-right { &-right {
width: 290px;
flex-shrink: 0;
.peak-box { .peak-box {
height: 326px; height: 326px;
@ -1836,6 +1851,8 @@ export default {
} }
.identify-item { .identify-item {
margin-bottom: 10px;
.title { .title {
background-color: #497e9d; background-color: #497e9d;
height: 30px; height: 30px;
@ -1847,7 +1864,7 @@ export default {
.content { .content {
height: 80px; height: 80px;
background-color: #275466; background-color: #275466;
margin: 10px 0; margin-top: 10px;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
@ -1897,3 +1914,78 @@ export default {
color: #f00; color: #f00;
} }
</style> </style>
<style lang="less">
.interactive-analysis-tools-dialog.fullscreen {
.interactive-analysis-tools {
height: calc(100vh - 90px);
&-left {
display: flex;
flex-direction: column;
.chart {
flex: 1;
}
.thumbnail {
height: 60px;
}
.table {
height: 397px;
.custom-table {
height: calc(100% - 82px);
.ant-spin-nested-loading,
.ant-spin-container,
.ant-table,
.ant-table-content,
.ant-table-scroll {
height: 100%;
}
.ant-table-body {
height: calc(100% - 25px) !important;
max-height: calc(100% - 25px) !important;
}
}
}
}
&-right {
display: flex;
flex-direction: column;
.identify-box {
flex: 1;
padding-top: 5px;
overflow: hidden;
.title-over-border {
height: 100%;
&-content {
display: flex;
flex-direction: column;
.identify-item {
flex: 1;
overflow: auto;
.ant-spin-nested-loading,
.content {
height: calc(100% - 40px);
.ant-spin-container,
.content {
height: 100%;
}
}
}
}
}
}
}
}
}
</style>

16
src/views/stationOperation/components/RealTimeDataChart.vue
View File

@ -29,8 +29,10 @@
import CustomChart from '@/components/CustomChart/index.vue' import CustomChart from '@/components/CustomChart/index.vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import { cloneDeep } from 'lodash' import { cloneDeep } from 'lodash'
dayjs.extend(utc)
const typeList = ['MET', 'SOH', 'QC', 'PHD'] // const typeList = ['MET', 'SOH', 'QC', 'PHD'] //
// 自定义图例列表 // 自定义图例列表
@ -71,10 +73,15 @@ const legendList = [
const initialOption = { const initialOption = {
tooltip: { tooltip: {
formatter: (params) => { formatter: (params) => {
// return `
// <div>${params.marker}${params.name}</div>
// <div>START：${dayjs(new Date(params.value[4])).format('YYYY-MM-DD HH:mm:ss')}</div>
// <div style="white-space: pre"> END：${dayjs(new Date(params.value[2])).format('YYYY-MM-DD HH:mm:ss')}</div>
// `
return ` return `
<div>${params.marker}${params.name}</div> <div>${params.marker}${params.name}</div>
<div>START：${dayjs(new Date(params.value[4])).format('YYYY-MM-DD HH:mm:ss')}</div> <div>START：${dayjs.utc(params.value[4]).format('YYYY-MM-DD HH:mm:ss')}</div>
<div style="white-space: pre"> END：${dayjs(new Date(params.value[2])).format('YYYY-MM-DD HH:mm:ss')}</div> <div style="white-space: pre"> END：${dayjs.utc(params.value[2]).format('YYYY-MM-DD HH:mm:ss')}</div>
` `
}, },
}, },
@ -203,8 +210,9 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
formatter: (val) => { formatter: (val) => {
let dateTime = new Date(val) // let dateTime = new Date(val)
return dayjs(dateTime).format('HH:mm\nMM/DD') // return dayjs.utc(dateTime).format('HH:mm\nMM/DD')
return dayjs.utc(val).format('HH:mm\nMM/DD')
}, },
color: '#ade6ee', color: '#ade6ee',
}, },