台站和核素下拉框 增加过滤
图标增加图形标志及逻辑优化
This commit is contained in:
parent
2bcb6611fc
commit
fa690f0153
|
|
@ -26,6 +26,7 @@
|
|||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:filterOption="filterOption"
|
||||
:options="stationOptions"
|
||||
@change="stationChange"
|
||||
>
|
||||
|
|
@ -42,6 +43,7 @@
|
|||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:filterOption="filterOption"
|
||||
:options="nuclideOptions"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
|
|
@ -94,35 +96,18 @@
|
|||
<a-spin :spinning="spinning" style="height: 100%; width: 100%">
|
||||
<div class="layout-chart-one" v-show="isDefault">
|
||||
<BoxTitle title="Nuclide History" />
|
||||
<!-- <div class="layout-chart-one-one" id="chartLeft"></div> -->
|
||||
</div>
|
||||
<template v-if="stationIds.length != 0">
|
||||
<div
|
||||
class="layout-chart-box"
|
||||
v-for="item in stationIds"
|
||||
v-for="item in chartLayout"
|
||||
:key="item"
|
||||
:style="{ height: stationIds.length == 1 ? '100%' : '50%' }"
|
||||
:style="{ height: chartLayout.length == 1 ? '100%' : '50%' }"
|
||||
>
|
||||
<BoxTitle :title="`${itemTitle[item] ? itemTitle[item] + '：' : ''}Nuclide History`" />
|
||||
<div class="layout-chart-box-box" :id="`chart_${item}`"></div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 一个台站 -->
|
||||
<!-- <div v-if="!isCharts" class="layout-chart-one">
|
||||
<BoxTitle :title="titleOne" />
|
||||
<div class="layout-chart-one-one" id="chartOne"></div>
|
||||
</div> -->
|
||||
<!-- 两个台站 -->
|
||||
<!-- <template v-if="isCharts">
|
||||
<div class="layout-chart-left">
|
||||
<BoxTitle :title="titleLeft" />
|
||||
<div class="layout-chart-left-left" id="chartLeft"></div>
|
||||
</div>
|
||||
<div class="layout-chart-right">
|
||||
<BoxTitle :title="titleRight" />
|
||||
<div class="layout-chart-right-right" id="chartRight"></div>
|
||||
</div>
|
||||
</template> -->
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-card>
|
||||
|
|
@ -137,7 +122,10 @@ import { getAction, getFileAction } from '../../../../api/manage'
|
|||
import { saveAs } from 'file-saver'
|
||||
import moment from 'moment'
|
||||
let xDataLength = 0
|
||||
const symbolList = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow']
|
||||
const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
const commonOptions = {
|
||||
color: colorList,
|
||||
grid: {
|
||||
top: 30,
|
||||
left: 20,
|
||||
|
|
@ -149,6 +137,8 @@ const commonOptions = {
|
|||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
width: '90%',
|
||||
inactiveColor: 'rgba(153, 177, 189,.5)',
|
||||
lineStyle: {
|
||||
inactiveColor: '#333',
|
||||
|
|
@ -156,10 +146,14 @@ const commonOptions = {
|
|||
textStyle: {
|
||||
color: '#9ab1bc',
|
||||
},
|
||||
pageIconColor: '#9ab1bc',
|
||||
pageIconInactiveColor: 'rgba(153, 177, 189,.5)',
|
||||
pageTextStyle: {
|
||||
color: '#9ab1bc',
|
||||
},
|
||||
// data: [],
|
||||
},
|
||||
toolbox: {
|
||||
// showTitle: false,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: 'Save The Image',
|
||||
|
|
@ -197,21 +191,24 @@ const commonOptions = {
|
|||
axisLabel: {
|
||||
color: '#ade6ee',
|
||||
formatter: (value, index) => {
|
||||
let val = value.split(' ').join('\n')
|
||||
// let val = value.split(' ').join('\n')
|
||||
let val = value.split(' ')[0]
|
||||
if (index === 0) {
|
||||
let arr = value.split(' ')
|
||||
arr[0] = ' ' + arr[0]
|
||||
arr[1] = ' ' + arr[1]
|
||||
let str = arr.join('\n')
|
||||
return str
|
||||
}
|
||||
if (index === xDataLength - 1) {
|
||||
let arr = value.split(' ')
|
||||
arr[0] = arr[0] + ' '
|
||||
arr[1] = arr[1] + ' '
|
||||
let str = arr.join('\n')
|
||||
// arr[1] = ' ' + arr[1]
|
||||
// let str = arr.join('\n')
|
||||
let str = arr[0]
|
||||
return str
|
||||
}
|
||||
// if (index === xDataLength - 1) {
|
||||
// let arr = value.split(' ')
|
||||
// arr[0] = arr[0] + ' '
|
||||
// // arr[1] = arr[1] + ' '
|
||||
// // let str = arr.join('\n')
|
||||
// let str = arr[0]
|
||||
// return str
|
||||
// }
|
||||
return val
|
||||
},
|
||||
},
|
||||
|
|
@ -244,9 +241,8 @@ export default {
|
|||
BoxTitle,
|
||||
},
|
||||
data() {
|
||||
// this.chartOneOption = cloneDeep(commonOptions)
|
||||
// this.chartLeftOption = cloneDeep(commonOptions)
|
||||
// this.chartRightOption = cloneDeep(commonOptions)
|
||||
this.symbolList = symbolList
|
||||
this.colorList = colorList
|
||||
return {
|
||||
typeOptions: [
|
||||
{
|
||||
|
|
@ -269,7 +265,7 @@ export default {
|
|||
},
|
||||
{
|
||||
label: 'Interactive DB',
|
||||
value: 'interactive',
|
||||
value: 'man',
|
||||
},
|
||||
],
|
||||
stationOptions: [],
|
||||
|
|
@ -284,37 +280,39 @@ export default {
|
|||
endDate: moment().format('YYYY-MM-DD'),
|
||||
},
|
||||
menuName: '',
|
||||
// titleOne: 'Nuclide History',
|
||||
// titleLeft: 'Nuclide History',
|
||||
// titleRight: 'Nuclide History',
|
||||
// chartOne: null,
|
||||
// chartLeft: null,
|
||||
// chartRight: null,
|
||||
spinning: false,
|
||||
isDefault: true,
|
||||
chartInitList: [],
|
||||
itemTitle: {},
|
||||
chartLayout: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isCharts() {
|
||||
return Array.isArray(this.stationIds) && this.stationIds.length == 2 ? true : false
|
||||
watch: {
|
||||
chartLayout: {
|
||||
handler(newVal) {
|
||||
this.$nextTick(() => {
|
||||
this.chartInitList.forEach((item) => {
|
||||
item.resize()
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
typeChange(val) {
|
||||
this.isDefault = true
|
||||
// this.disposeCharts()
|
||||
this.stationIds = []
|
||||
// this.queryParams.dbName = undefined
|
||||
this.chartLayout = []
|
||||
this.queryParams.nuclideNames = []
|
||||
this.queryParams.systemType = val
|
||||
if (val == 'Particulate') this.menuName = 'Particulate'
|
||||
if (val == 'gamma') this.menuName = 'Noble Gas HPGe'
|
||||
if (val == 'beta') this.menuName = 'Noble Gas Beta-Gamma'
|
||||
this.getStations()
|
||||
this.getNuclide()
|
||||
if (val.length > 0) {
|
||||
this.getStations()
|
||||
this.getNuclide()
|
||||
}
|
||||
},
|
||||
getStations() {
|
||||
getAction('/webStatistics/findStationList', { menuName: this.menuName }).then((res) => {
|
||||
|
|
@ -348,12 +346,7 @@ export default {
|
|||
},
|
||||
stationChange(val) {
|
||||
if (val.length != 0) {
|
||||
this.isDefault = false
|
||||
this.$nextTick(() => {
|
||||
this.chartInitList.forEach((item) => {
|
||||
item.resize()
|
||||
})
|
||||
})
|
||||
// this.isDefault = false
|
||||
if (val.length == 2) {
|
||||
this.stationOptions.forEach((item) => {
|
||||
if (!val.includes(item.value)) {
|
||||
|
|
@ -368,22 +361,6 @@ export default {
|
|||
} else {
|
||||
this.isDefault = true
|
||||
}
|
||||
|
||||
// if (this.chartOne) this.chartOne.dispose()
|
||||
// if (this.chartLeft) this.chartLeft.dispose()
|
||||
// if (this.chartRight) this.chartRight.dispose()
|
||||
// this.stationIds = val
|
||||
// if (val.length == 2) {
|
||||
// this.stationOptions.forEach((item) => {
|
||||
// if (!val.includes(item.value)) {
|
||||
// item.disabled = true
|
||||
// } else {
|
||||
// item.disabled = false
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// this.stationOptions.forEach((item) => (item.disabled = false))
|
||||
// }
|
||||
},
|
||||
startDateChange(date, dateString) {
|
||||
this.queryParams.startDate = dateString
|
||||
|
|
@ -392,59 +369,26 @@ export default {
|
|||
this.queryParams.endDate = dateString
|
||||
},
|
||||
handleSearch() {
|
||||
this.isDefault = false
|
||||
this.chartInitList = []
|
||||
this.chartLayout = []
|
||||
this.stationIds.forEach((id, index) => {
|
||||
// this.queryParams.stationId = id
|
||||
let currChartInit = echarts.init(document.getElementById(`chart_${id}`))
|
||||
this.chartInitList.push(currChartInit)
|
||||
let params = {
|
||||
...this.queryParams,
|
||||
stationId: id,
|
||||
}
|
||||
let options = cloneDeep(commonOptions)
|
||||
this.getChartDate(params, currChartInit, options, id)
|
||||
/**
|
||||
if (index == 0) {
|
||||
this.chartLeftOption.series = []
|
||||
this.chartLeft = echarts.init(document.getElementById('chartLeft'))
|
||||
this.getChartDate(params, this.chartLeft, this.chartLeftOption, 'left')
|
||||
} else {
|
||||
this.chartRightOption.series = []
|
||||
this.chartRight = echarts.init(document.getElementById('chartRight'))
|
||||
this.getChartDate(params, this.chartRight, this.chartRightOption, 'right')
|
||||
}*/
|
||||
})
|
||||
/**
|
||||
if (this.chartOne) this.chartOne.clear()
|
||||
if (this.chartLeft) this.chartLeft.clear()
|
||||
if (this.chartRight) this.chartRight.clear()
|
||||
if (this.stationIds.length == 1) {
|
||||
this.chartOne = echarts.init(document.getElementById('chartOne'))
|
||||
// this.queryParams.stationId = this.stationIds[0]
|
||||
let params = {
|
||||
...this.queryParams,
|
||||
stationId: this.stationIds[0],
|
||||
}
|
||||
this.chartOneOption.series = []
|
||||
this.getChartDate(params, this.chartOne, this.chartOneOption, 'one')
|
||||
} else {
|
||||
this.stationIds.forEach((id, index) => {
|
||||
// this.queryParams.stationId = id
|
||||
this.chartLayout.push(id)
|
||||
this.$nextTick(() => {
|
||||
let currChartInit = echarts.init(document.getElementById(`chart_${id}`))
|
||||
this.chartInitList.push(currChartInit)
|
||||
let params = {
|
||||
...this.queryParams,
|
||||
stationId: id,
|
||||
}
|
||||
if (index == 0) {
|
||||
this.chartLeftOption.series = []
|
||||
this.chartLeft = echarts.init(document.getElementById('chartLeft'))
|
||||
this.getChartDate(params, this.chartLeft, this.chartLeftOption, 'left')
|
||||
let options = cloneDeep(commonOptions)
|
||||
if (this.queryParams.nuclideNames.length > 0) {
|
||||
this.getChartDate(params, currChartInit, options, id)
|
||||
} else {
|
||||
this.chartRightOption.series = []
|
||||
this.chartRight = echarts.init(document.getElementById('chartRight'))
|
||||
this.getChartDate(params, this.chartRight, this.chartRightOption, 'right')
|
||||
this.$message.warning(`Please select nuclide!`)
|
||||
}
|
||||
})
|
||||
}*/
|
||||
})
|
||||
},
|
||||
async getChartDate(params, chart, option, id) {
|
||||
this.spinning = true
|
||||
|
|
@ -456,24 +400,32 @@ export default {
|
|||
this.spinning = false
|
||||
this.$set(this.itemTitle, id, result.STATION_NAME)
|
||||
if (result.CollectStart.length < 1) {
|
||||
this.$message.warning('No Data!')
|
||||
this.$message.warning(`${result.STATION_NAME} No Data!`)
|
||||
}
|
||||
// if (type === 'one') this.titleOne = `${result.STATION_NAME}：Nuclide History`
|
||||
// if (type === 'left') this.titleLeft = `${result.STATION_NAME}：Nuclide History`
|
||||
// if (type === 'right') this.titleRight = `${result.STATION_NAME}：Nuclide History`
|
||||
legend.data = Object.keys(result).filter((item) => item !== 'CollectStart')
|
||||
// legend.data = Object.keys(result).filter((item) => item !== 'CollectStart')
|
||||
xAxis.data = result.CollectStart
|
||||
xDataLength = result.CollectStart.length
|
||||
toolbox.feature.saveAsImage.name = `${result.STATION_NAME}：Nuclide History`
|
||||
let objKeys = Object.keys(result).filter(
|
||||
(item) => item !== 'CollectStart' && item !== 'STATION_NAME' && key !== 'AllDayTime'
|
||||
)
|
||||
for (const key in result) {
|
||||
let idx = objKeys.findIndex((item) => item == key)
|
||||
let num_symbol = idx % 7
|
||||
// let num_symbol = idx%7
|
||||
let param = null
|
||||
if (Object.hasOwnProperty.call(result, key) && key !== 'CollectStart' && key !== 'STATION_NAME') {
|
||||
if (
|
||||
Object.hasOwnProperty.call(result, key) &&
|
||||
key !== 'CollectStart' &&
|
||||
key !== 'STATION_NAME' &&
|
||||
key !== 'AllDayTime'
|
||||
) {
|
||||
const element = result[key]
|
||||
param = {
|
||||
type: 'line',
|
||||
name: key,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
symbol: this.symbolList[num_symbol],
|
||||
animation: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
|
|
@ -509,15 +461,6 @@ export default {
|
|||
this.$message.warning('No downloadable data')
|
||||
}
|
||||
},
|
||||
/**
|
||||
// 清除图表
|
||||
disposeCharts() {
|
||||
if (this.chartOne) this.chartOne.dispose()
|
||||
if (this.chartLeft) this.chartLeft.dispose()
|
||||
if (this.chartRight) this.chartRight.dispose()
|
||||
this.titleOne = this.titleLeft = this.titleRight = 'Nuclide History'
|
||||
},
|
||||
*/
|
||||
|
||||
filterOption(input, option) {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user