diff --git a/src/views/statistics/Statistics/statistics/index.vue b/src/views/statistics/Statistics/statistics/index.vue
index af89a82..0c060bb 100644
--- a/src/views/statistics/Statistics/statistics/index.vue
+++ b/src/views/statistics/Statistics/statistics/index.vue
@@ -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"
>
@@ -94,35 +96,18 @@
-
-
-
-
-
@@ -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