Merge remote-tracking branch 'origin/master-dev' into feature-Beta-dev-renpy
This commit is contained in:
commit
38e2111e0e
|
@ -1,5 +1,5 @@
|
|||
<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">
|
||||
<div class="nuclide-review-search">
|
||||
<span @click="handleNuclideChange('prev')"><</span>
|
||||
|
|
|
@ -1,6 +1,14 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1280" title="Interactive Analyse Tools" :footer="null" destroy-on-close>
|
||||
<a-spin :spinning="isLoading">
|
||||
<custom-modal
|
||||
v-model="visible"
|
||||
:width="1280"
|
||||
class="interactive-analysis-tools-dialog"
|
||||
:enableFullScreen="true"
|
||||
title="Interactive Analyse Tools"
|
||||
:footer="null"
|
||||
destroy-on-close
|
||||
@fullscreen="handleFullScreenChange"
|
||||
>
|
||||
<div class="interactive-analysis-tools">
|
||||
<div class="interactive-analysis-tools-left">
|
||||
<div class="chart">
|
||||
|
@ -24,7 +32,7 @@
|
|||
</div>
|
||||
<!-- 缩略图 -->
|
||||
<div class="thumbnail">
|
||||
<CustomChart :option="thumbnailOption" />
|
||||
<CustomChart ref="thumbnailRef" :option="thumbnailOption" />
|
||||
</div>
|
||||
<!-- 缩略图结束 -->
|
||||
|
||||
|
@ -55,11 +63,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 表格结束 -->
|
||||
|
||||
<resize-observer @notify="handleResize" />
|
||||
</div>
|
||||
|
||||
<!-- 右侧 -->
|
||||
<div class="interactive-analysis-tools-right">
|
||||
<title-over-border :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
|
||||
<title-over-border class="peak-box-container" :title="btnGroupType == 1 ? 'Peak' : 'Baseline Control Points'">
|
||||
<div class="peak-box">
|
||||
<!-- 按钮组1 -->
|
||||
<template v-if="btnGroupType == 1">
|
||||
|
@ -91,11 +101,7 @@
|
|||
<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"
|
||||
<a-button type="primary" key="modify-btn" :class="{ 'is-modify': isModifying }" @click="handleModifyCP"
|
||||
>(M)odify CP</a-button
|
||||
>
|
||||
</div>
|
||||
|
@ -176,7 +182,6 @@
|
|||
</div>
|
||||
<!-- 右侧结束 -->
|
||||
</div>
|
||||
</a-spin>
|
||||
<!-- Peak Comment弹窗 开始 -->
|
||||
<peak-comment-modal v-model="peakCommentModalVisible" :curRow="curRow" />
|
||||
<!-- Peak Comment弹窗 结束 -->
|
||||
|
@ -450,8 +455,8 @@ export default {
|
|||
},
|
||||
},
|
||||
data() {
|
||||
this.columns = columns
|
||||
return {
|
||||
columns,
|
||||
searchParam: {
|
||||
energy: '',
|
||||
tolerance: '',
|
||||
|
@ -459,9 +464,6 @@ export default {
|
|||
option: cloneDeep(initialOption),
|
||||
opts: { notMerge: false },
|
||||
thumbnailOption: cloneDeep(thumbnailOption),
|
||||
|
||||
isLoading: false,
|
||||
|
||||
channelBaseCPChart: [],
|
||||
channelBaseLineChart: [],
|
||||
channelCountChart: [],
|
||||
|
@ -1703,6 +1705,15 @@ export default {
|
|||
clearOperationStack() {
|
||||
this.operationStack = []
|
||||
},
|
||||
|
||||
handleResize() {
|
||||
this.$refs.chartRef.resize()
|
||||
this.$refs.thumbnailRef.resize()
|
||||
},
|
||||
|
||||
handleFullScreenChange(isFullScreen) {
|
||||
this.columns[7].width = isFullScreen ? 180 : 120
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
curRow() {
|
||||
|
@ -1721,11 +1732,12 @@ export default {
|
|||
<style lang="less" scoped>
|
||||
.interactive-analysis-tools {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
gap: 20px;
|
||||
|
||||
&-left {
|
||||
width: 75%;
|
||||
margin-right: 20px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.chart {
|
||||
height: 331px;
|
||||
|
@ -1785,6 +1797,9 @@ export default {
|
|||
}
|
||||
|
||||
&-right {
|
||||
width: 290px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.peak-box {
|
||||
height: 326px;
|
||||
|
||||
|
@ -1836,6 +1851,8 @@ export default {
|
|||
}
|
||||
|
||||
.identify-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.title {
|
||||
background-color: #497e9d;
|
||||
height: 30px;
|
||||
|
@ -1847,7 +1864,7 @@ export default {
|
|||
.content {
|
||||
height: 80px;
|
||||
background-color: #275466;
|
||||
margin: 10px 0;
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
overflow: auto;
|
||||
|
||||
|
@ -1897,3 +1914,78 @@ export default {
|
|||
color: #f00;
|
||||
}
|
||||
</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>
|
||||
|
|
|
@ -29,8 +29,10 @@
|
|||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
import * as echarts from 'echarts'
|
||||
import dayjs from 'dayjs'
|
||||
import utc from 'dayjs/plugin/utc'
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
dayjs.extend(utc)
|
||||
const typeList = ['MET', 'SOH', 'QC', 'PHD'] //
|
||||
|
||||
// 自定义图例列表
|
||||
|
@ -71,10 +73,15 @@ const legendList = [
|
|||
const initialOption = {
|
||||
tooltip: {
|
||||
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 `
|
||||
<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>
|
||||
<div>START:${dayjs.utc(params.value[4]).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: {
|
||||
show: true,
|
||||
formatter: (val) => {
|
||||
let dateTime = new Date(val)
|
||||
return dayjs(dateTime).format('HH:mm\nMM/DD')
|
||||
// let dateTime = new Date(val)
|
||||
// return dayjs.utc(dateTime).format('HH:mm\nMM/DD')
|
||||
return dayjs.utc(val).format('HH:mm\nMM/DD')
|
||||
},
|
||||
color: '#ade6ee',
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue
Block a user