web 页面 statistics 页面结构改造
This commit is contained in:
parent
2e8795ccb3
commit
2bcb6611fc
|
|
@ -92,13 +92,28 @@
|
|||
</div>
|
||||
<div class="layout-chart">
|
||||
<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"
|
||||
:key="item"
|
||||
:style="{ height: stationIds.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">
|
||||
<!-- <div v-if="!isCharts" class="layout-chart-one">
|
||||
<BoxTitle :title="titleOne" />
|
||||
<div class="layout-chart-one-one" id="chartOne"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 两个台站 -->
|
||||
<template v-if="isCharts">
|
||||
<!-- <template v-if="isCharts">
|
||||
<div class="layout-chart-left">
|
||||
<BoxTitle :title="titleLeft" />
|
||||
<div class="layout-chart-left-left" id="chartLeft"></div>
|
||||
|
|
@ -107,7 +122,7 @@
|
|||
<BoxTitle :title="titleRight" />
|
||||
<div class="layout-chart-right-right" id="chartRight"></div>
|
||||
</div>
|
||||
</template>
|
||||
</template> -->
|
||||
</a-spin>
|
||||
</div>
|
||||
</a-card>
|
||||
|
|
@ -141,7 +156,7 @@ const commonOptions = {
|
|||
textStyle: {
|
||||
color: '#9ab1bc',
|
||||
},
|
||||
data: [],
|
||||
// data: [],
|
||||
},
|
||||
toolbox: {
|
||||
// showTitle: false,
|
||||
|
|
@ -229,9 +244,9 @@ export default {
|
|||
BoxTitle,
|
||||
},
|
||||
data() {
|
||||
this.chartOneOption = cloneDeep(commonOptions)
|
||||
this.chartLeftOption = cloneDeep(commonOptions)
|
||||
this.chartRightOption = cloneDeep(commonOptions)
|
||||
// this.chartOneOption = cloneDeep(commonOptions)
|
||||
// this.chartLeftOption = cloneDeep(commonOptions)
|
||||
// this.chartRightOption = cloneDeep(commonOptions)
|
||||
return {
|
||||
typeOptions: [
|
||||
{
|
||||
|
|
@ -269,13 +284,16 @@ export default {
|
|||
endDate: moment().format('YYYY-MM-DD'),
|
||||
},
|
||||
menuName: '',
|
||||
titleOne: 'Nuclide History',
|
||||
titleLeft: 'Nuclide History',
|
||||
titleRight: 'Nuclide History',
|
||||
chartOne: null,
|
||||
chartLeft: null,
|
||||
chartRight: null,
|
||||
// titleOne: 'Nuclide History',
|
||||
// titleLeft: 'Nuclide History',
|
||||
// titleRight: 'Nuclide History',
|
||||
// chartOne: null,
|
||||
// chartLeft: null,
|
||||
// chartRight: null,
|
||||
spinning: false,
|
||||
isDefault: true,
|
||||
chartInitList: [],
|
||||
itemTitle: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -286,7 +304,8 @@ export default {
|
|||
methods: {
|
||||
moment,
|
||||
typeChange(val) {
|
||||
this.disposeCharts()
|
||||
this.isDefault = true
|
||||
// this.disposeCharts()
|
||||
this.stationIds = []
|
||||
// this.queryParams.dbName = undefined
|
||||
this.queryParams.nuclideNames = []
|
||||
|
|
@ -328,10 +347,13 @@ export default {
|
|||
})
|
||||
},
|
||||
stationChange(val) {
|
||||
if (this.chartOne) this.chartOne.dispose()
|
||||
if (this.chartLeft) this.chartLeft.dispose()
|
||||
if (this.chartRight) this.chartRight.dispose()
|
||||
this.stationIds = val
|
||||
if (val.length != 0) {
|
||||
this.isDefault = false
|
||||
this.$nextTick(() => {
|
||||
this.chartInitList.forEach((item) => {
|
||||
item.resize()
|
||||
})
|
||||
})
|
||||
if (val.length == 2) {
|
||||
this.stationOptions.forEach((item) => {
|
||||
if (!val.includes(item.value)) {
|
||||
|
|
@ -343,6 +365,25 @@ export default {
|
|||
} else {
|
||||
this.stationOptions.forEach((item) => (item.disabled = false))
|
||||
}
|
||||
} 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
|
||||
|
|
@ -351,6 +392,29 @@ export default {
|
|||
this.queryParams.endDate = dateString
|
||||
},
|
||||
handleSearch() {
|
||||
this.chartInitList = []
|
||||
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()
|
||||
|
|
@ -380,9 +444,9 @@ export default {
|
|||
this.getChartDate(params, this.chartRight, this.chartRightOption, 'right')
|
||||
}
|
||||
})
|
||||
}
|
||||
}*/
|
||||
},
|
||||
async getChartDate(params, chart, option, type) {
|
||||
async getChartDate(params, chart, option, id) {
|
||||
this.spinning = true
|
||||
let { legend, xAxis, series, toolbox } = option
|
||||
const { success, message, result } = await getAction('/webStatistics/findNuclideStatistics', {
|
||||
|
|
@ -390,9 +454,13 @@ export default {
|
|||
})
|
||||
if (success) {
|
||||
this.spinning = false
|
||||
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`
|
||||
this.$set(this.itemTitle, id, result.STATION_NAME)
|
||||
if (result.CollectStart.length < 1) {
|
||||
this.$message.warning('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')
|
||||
xAxis.data = result.CollectStart
|
||||
xDataLength = result.CollectStart.length
|
||||
|
|
@ -441,6 +509,7 @@ export default {
|
|||
this.$message.warning('No downloadable data')
|
||||
}
|
||||
},
|
||||
/**
|
||||
// 清除图表
|
||||
disposeCharts() {
|
||||
if (this.chartOne) this.chartOne.dispose()
|
||||
|
|
@ -448,6 +517,7 @@ export default {
|
|||
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
|
||||
|
|
@ -527,5 +597,29 @@ export default {
|
|||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
&-top {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
&-top {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
&-bottom {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
&-box {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
&-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user