feat: 对接LoadFromDB接口，增加右侧四图表实时值显示，优化刷选时的逻辑，修改某些公共样式
This commit is contained in:
parent
24dacdb692
commit
a7248af1b4
|
|
@ -18,8 +18,15 @@
|
|||
|
||||
@modal-footer-border-color-split: @formInputBorderColor;
|
||||
|
||||
@disabled-color: rgba(255, 255, 255, .25);
|
||||
@background-color-base: darken(@primary-color, 20);
|
||||
@border-color-base: darken(@primary-color, 20);
|
||||
|
||||
@text-color: #fff;
|
||||
|
||||
.ant-btn:hover,
|
||||
.ant-btn:active {
|
||||
.ant-btn:active,
|
||||
.ant-btn:focus {
|
||||
color: #fff !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
:option="twoDOption"
|
||||
@zr:mousemove="handleMouseMove"
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
/>
|
||||
<div class="bar">
|
||||
|
|
@ -338,6 +339,22 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
setTimeout(() => {
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
areas: []
|
||||
})
|
||||
|
||||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor'
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<custom-modal v-model="visible" :width="1200" title="Load From Database" class="load-from-db-modal">
|
||||
<search-form :items="formItems" v-model="queryParam" @search="searchQuery"> </search-form>
|
||||
<custom-modal v-model="visible" :width="1280" title="Load From Database" class="load-from-db-modal">
|
||||
<search-form ref="searchFormRef" :items="formItems" v-model="queryParam">
|
||||
<a-space slot="additional">
|
||||
<a-button @click="handleReset">Reset</a-button>
|
||||
<a-button type="primary" @click="searchQuery">Search</a-button>
|
||||
</a-space>
|
||||
</search-form>
|
||||
<custom-table
|
||||
size="middle"
|
||||
rowKey="sampleId"
|
||||
|
|
@ -10,12 +15,19 @@
|
|||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
:selectedRowKeys.sync="selectedRowKeys"
|
||||
:selectionRows.sync="selectionRows"
|
||||
:multiple="true"
|
||||
>
|
||||
</custom-table>
|
||||
<!-- 底部操作栏 -->
|
||||
<template slot="custom-footer">
|
||||
<a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
|
||||
<a-space>
|
||||
<a-radio-group v-model="queryParam.dbName">
|
||||
<a-radio value="auto">From Auto DB</a-radio>
|
||||
<a-radio value="man">From Interactive DB</a-radio>
|
||||
</a-radio-group>
|
||||
<a-button type="primary" :loading="isLoadingSample" @click="handleLoad">Load</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</custom-modal>
|
||||
</template>
|
||||
|
|
@ -23,6 +35,7 @@
|
|||
<script>
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import { getAction } from '../../../../api/manage'
|
||||
import moment from 'moment'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -93,7 +106,17 @@ export default {
|
|||
this.columns = columns
|
||||
this.disableMixinCreated = true
|
||||
return {
|
||||
queryParam: {
|
||||
menuTypes: [],
|
||||
startDate: moment()
|
||||
.add(-7, 'd')
|
||||
.format('YYYY-MM-DD'),
|
||||
endDate: moment().format('YYYY-MM-DD'),
|
||||
dbName: 'auto'
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
selectionRows: [],
|
||||
|
||||
stationList: [],
|
||||
detectorList: [],
|
||||
url: {
|
||||
|
|
@ -105,12 +128,23 @@ export default {
|
|||
methods: {
|
||||
loadData(arg) {
|
||||
const params = this.getQueryParams() //查询条件
|
||||
if (!params.menuTypes || !params.menuTypes.length) {
|
||||
this.$message.warn('Please Select MenuTypes First')
|
||||
const { startDate, endDate, menuTypes } = params
|
||||
if (!menuTypes || !menuTypes.length) {
|
||||
this.$message.warn('Please Select SampleType First')
|
||||
return
|
||||
}
|
||||
|
||||
params.menuTypes = params.menuTypes.join(',')
|
||||
if(!startDate || !endDate) {
|
||||
this.$message.warn(`'From' Date And 'To' Date Cannot Be Null`)
|
||||
return
|
||||
}
|
||||
|
||||
if(moment(startDate).isAfter(moment(endDate))) {
|
||||
this.$message.warn(`'From' Date Cannot Be Late Than 'To' Date`)
|
||||
return
|
||||
}
|
||||
|
||||
params.menuTypes = menuTypes.join(',')
|
||||
|
||||
//加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
|
|
@ -153,26 +187,29 @@ export default {
|
|||
this.$message.warn('Please Select Databases To Load')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('%c [ ]-190', 'font-size:13px; background:pink; color:#bf2c9f;', this.selectionRows)
|
||||
this.isLoadingSample = true
|
||||
const res = await ''
|
||||
console.log('%c [ res ]-156', 'font-size:13px; background:pink; color:#bf2c9f;', res)
|
||||
this.selectedRowKeys = []
|
||||
this.isLoadingSample = false
|
||||
this.visible = false
|
||||
},
|
||||
|
||||
async getStationAndDetectorList() {
|
||||
const params = this.getQueryParams() //查询条件
|
||||
if (!params.menuTypes || !params.menuTypes.length) {
|
||||
// 获取台站和探测器列表
|
||||
async getStationAndDetectorList(value) {
|
||||
if (!value || !value.length) {
|
||||
return
|
||||
}
|
||||
params.menuTypes = params.menuTypes.join(',')
|
||||
|
||||
try {
|
||||
const { success, result, message } = await getAction('/spectrumAnalysis/getDBSearchList', {
|
||||
menuTypes: []
|
||||
menuTypes: value.join(',')
|
||||
})
|
||||
if (success) {
|
||||
this.stationList = result.records.map(record => ({ label: record.stationCode, value: record.stationId }))
|
||||
this.stationList = result.stationCode.map(item => ({ label: item, value: item }))
|
||||
this.detectorList = result.detectorCode.map(item => ({ label: item, value: item }))
|
||||
} else {
|
||||
this.$message.error(message)
|
||||
}
|
||||
|
|
@ -181,6 +218,11 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 重置搜索栏
|
||||
handleReset() {
|
||||
this.$refs.searchFormRef.$refs.form.resetFields()
|
||||
},
|
||||
|
||||
filterOption(input, option) {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
|
|
@ -197,7 +239,7 @@ export default {
|
|||
formItems() {
|
||||
return [
|
||||
{
|
||||
label: 'MenuType',
|
||||
label: 'SampleType',
|
||||
type: 'custom-select',
|
||||
name: 'menuTypes',
|
||||
props: {
|
||||
|
|
@ -211,61 +253,51 @@ export default {
|
|||
label: 'Beta',
|
||||
value: 'B'
|
||||
}
|
||||
]
|
||||
],
|
||||
maxTagCount: 1,
|
||||
maxTagPlaceholder: '...'
|
||||
},
|
||||
style: {
|
||||
width: '16.6%'
|
||||
width: '23%'
|
||||
},
|
||||
on: {
|
||||
change: () => {
|
||||
this.getStationAndDetectorList()
|
||||
change: event => {
|
||||
this.getStationAndDetectorList(event)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Station',
|
||||
type: 'custom-select',
|
||||
name: 'stationId',
|
||||
name: 'stationName',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'ALL',
|
||||
value: ''
|
||||
},
|
||||
...this.stationList
|
||||
],
|
||||
options: this.stationList,
|
||||
showSearch: true,
|
||||
filterOption: this.filterOption,
|
||||
allowClear: true
|
||||
},
|
||||
style: {
|
||||
width: '16.6%'
|
||||
width: '16%'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Detector',
|
||||
type: 'custom-select',
|
||||
name: 'detectorId',
|
||||
name: 'detectorsName',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
label: 'ALL',
|
||||
value: ''
|
||||
},
|
||||
...this.detectorList
|
||||
],
|
||||
options: this.detectorList,
|
||||
showSearch: true,
|
||||
filterOption: this.filterOption,
|
||||
allowClear: true
|
||||
},
|
||||
style: {
|
||||
width: '16.6%'
|
||||
width: '16%'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Sample',
|
||||
type: 'custom-select',
|
||||
name: 'sample',
|
||||
name: 'sampleType',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
|
|
@ -284,7 +316,7 @@ export default {
|
|||
allowClear: true
|
||||
},
|
||||
style: {
|
||||
width: '16.6%'
|
||||
width: '15%'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -321,13 +353,13 @@ export default {
|
|||
allowClear: true
|
||||
},
|
||||
style: {
|
||||
width: '16.6%'
|
||||
width: '15%'
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Qualifier',
|
||||
type: 'custom-select',
|
||||
name: 'dataType',
|
||||
name: 'spectralQualifie',
|
||||
props: {
|
||||
options: [
|
||||
{
|
||||
|
|
@ -342,7 +374,7 @@ export default {
|
|||
allowClear: true
|
||||
},
|
||||
style: {
|
||||
width: '16.6%'
|
||||
width: '15%'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -363,8 +395,8 @@ export default {
|
|||
props: {
|
||||
options: [
|
||||
{ label: 'All User', value: 'allUser' },
|
||||
{ label: 'Collect Stop', value: 'collectStop' },
|
||||
{ label: 'Acq.Start', value: 'acqDotStart' }
|
||||
{ label: 'Collect Stop', value: 'CollectStop' },
|
||||
{ label: 'Acq.Start', value: 'AcqStart' }
|
||||
]
|
||||
},
|
||||
style: {
|
||||
|
|
@ -376,15 +408,14 @@ export default {
|
|||
type: 'custom-date-picker',
|
||||
name: 'startDate',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
style: {
|
||||
minWidth: 'auto'
|
||||
}
|
||||
},
|
||||
style: {
|
||||
width: '20%'
|
||||
width: '19%'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -392,17 +423,16 @@ export default {
|
|||
type: 'custom-date-picker',
|
||||
name: 'endDate',
|
||||
props: {
|
||||
showTime: { format: 'HH:mm' },
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
style: {
|
||||
minWidth: 'auto'
|
||||
}
|
||||
},
|
||||
style: {
|
||||
paddingRight: 0,
|
||||
marginRight: '16px',
|
||||
width: '20%'
|
||||
marginRight: '22px',
|
||||
width: '19%'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -413,5 +443,10 @@ export default {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.load-from-db-modal {
|
||||
::v-deep {
|
||||
.search-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="spectrum-line-chart">
|
||||
<div class="calculation">
|
||||
<span>Channel: 136</span>
|
||||
<span>Count: 1475</span>
|
||||
<span class="error">Energy: 381.409</span>
|
||||
<div class="summary-text">
|
||||
<span>Channel: {{ summary.channel }}</span>
|
||||
<span>Count: {{ summary.count }}</span>
|
||||
<span class="error">Energy: {{ summary.energy }}</span>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="left-title">{{ title + ' Count' }}</div>
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
style="height: 100%"
|
||||
@zr:mousemove="handleMouseMove"
|
||||
@zr:mousedown="handleMouseDown"
|
||||
@zr:mouseup="handleMouseUp"
|
||||
@brushEnd="handleBrushEnd"
|
||||
></custom-chart>
|
||||
</div>
|
||||
|
|
@ -133,7 +134,13 @@ export default {
|
|||
option.series.itemStyle.color = this.color
|
||||
option.xAxis.name = this.title + ' Channel'
|
||||
return {
|
||||
option
|
||||
option,
|
||||
|
||||
summary: {
|
||||
channel: 0,
|
||||
count: 0,
|
||||
energy: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -149,8 +156,13 @@ export default {
|
|||
setTimeout(() => {
|
||||
if (xAxis) {
|
||||
this.option.series.markLine.data = [{ xAxis }]
|
||||
this.summary.channel = xAxis
|
||||
this.summary.count = this.option.series.data[xAxis][1]
|
||||
} else {
|
||||
this.option.series.markLine.data = []
|
||||
this.summary.channel = 0
|
||||
this.summary.count = 0
|
||||
this.summary.energy = 0
|
||||
}
|
||||
}, 0)
|
||||
},
|
||||
|
|
@ -182,6 +194,22 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
handleMouseUp() {
|
||||
setTimeout(() => {
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
// 清理刷选的范围
|
||||
chart.dispatchAction({
|
||||
type: 'brush',
|
||||
areas: []
|
||||
})
|
||||
|
||||
// 改为不可刷选状态
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor'
|
||||
})
|
||||
}, 0)
|
||||
},
|
||||
|
||||
// 刷选完毕时
|
||||
handleBrushEnd(param) {
|
||||
const chart = this.$refs.chartRef.getChartInstance()
|
||||
|
|
@ -224,10 +252,11 @@ export default {
|
|||
.spectrum-line-chart {
|
||||
height: 100%;
|
||||
|
||||
.calculation {
|
||||
.summary-text {
|
||||
line-height: 10px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
|
||||
.error {
|
||||
color: #ff5656;
|
||||
|
|
@ -270,6 +299,7 @@ export default {
|
|||
font-size: 14px;
|
||||
color: #5b9cba;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user