web 模块 statistics 新页面开发，及相关逻辑接口对接
This commit is contained in:
parent
900abc7adc
commit
20a868d203
486
src/views/statistics/Statistics/statistics/index.vue
Normal file
486
src/views/statistics/Statistics/statistics/index.vue
Normal file
|
|
@ -0,0 +1,486 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
<a-card :bordered="false" style="margin-left: 20px; height: 100%">
|
||||
<div class="layout-header">
|
||||
<a-row type="flex" :gutter="20" style="margin-bottom: 20px">
|
||||
<a-col>
|
||||
<span class="item-label">Type</span>
|
||||
<a-select
|
||||
style="width: 234px"
|
||||
v-model="queryParams.systemType"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="typeOptions"
|
||||
@change="typeChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="item-label" style="width: 60px">Stations</span>
|
||||
<a-select
|
||||
style="width: 234px"
|
||||
v-model="stationIds"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="stationOptions"
|
||||
@change="stationChange"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="item-label">Nuclide</span>
|
||||
<a-select
|
||||
style="width: 234px"
|
||||
v-model="queryParams.nuclideNames"
|
||||
mode="multiple"
|
||||
:maxTagCount="1"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="nuclideOptions"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="item-label">Data Source</span>
|
||||
<a-select
|
||||
style="width: 237px"
|
||||
v-model="queryParams.dbName"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:options="sourceOptions"
|
||||
>
|
||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
||||
</a-select>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row type="flex" :gutter="20">
|
||||
<a-col>
|
||||
<span class="item-label">Time</span>
|
||||
<a-date-picker style="width: 234px" :value="moment(queryParams.startDate)" @change="startDateChange" />
|
||||
</a-col>
|
||||
<a-col>
|
||||
<span class="item-label" style="width: 60px; text-align: right">to</span>
|
||||
<a-date-picker style="width: 234px" :value="moment(queryParams.endDate)" @change="endDateChange" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="layout-header-btns">
|
||||
<a-button class="search-btn" type="primary" @click="handleSearch">
|
||||
<img src="@/assets/images/global/search.png" alt="" />
|
||||
Search
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleExport">
|
||||
<img src="@/assets/images/spectrum/download.png" />
|
||||
Export to Excel
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-chart">
|
||||
<a-spin :spinning="spinning" style="height: 100%; width: 100%">
|
||||
<!-- 一个台站 -->
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import BoxTitle from '@/views/abnormalAlarm/components/boxTitle.vue'
|
||||
import { getAction, getFileAction } from '../../../../api/manage'
|
||||
import { saveAs } from 'file-saver'
|
||||
import moment from 'moment'
|
||||
const commonOptions = {
|
||||
grid: {
|
||||
top: 30,
|
||||
left: 20,
|
||||
right: 18,
|
||||
bottom: 35,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
inactiveColor: '#333',
|
||||
lineStyle: {
|
||||
inactiveColor: '#333',
|
||||
},
|
||||
textStyle: {
|
||||
color: '#9ab1bc',
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: 'Collect Start',
|
||||
nameLocation: 'middle',
|
||||
nameTextStyle: {
|
||||
fontSize: 18,
|
||||
},
|
||||
nameGap: 35,
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
interval: 'auto',
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(119, 181, 213, .3)',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: '#ade6ee',
|
||||
},
|
||||
},
|
||||
series: [],
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
},
|
||||
data() {
|
||||
this.chartOneOption = cloneDeep(commonOptions)
|
||||
this.chartLeftOption = cloneDeep(commonOptions)
|
||||
this.chartRightOption = cloneDeep(commonOptions)
|
||||
return {
|
||||
typeOptions: [
|
||||
{
|
||||
label: 'Particulate',
|
||||
value: 'Particulate',
|
||||
},
|
||||
{
|
||||
label: 'Noble Gas HPGe',
|
||||
value: 'gamma',
|
||||
},
|
||||
{
|
||||
label: 'Noble Gas Beta-Gamma',
|
||||
value: 'beta',
|
||||
},
|
||||
],
|
||||
sourceOptions: [
|
||||
{
|
||||
label: ' Auto DB',
|
||||
value: 'auto',
|
||||
},
|
||||
{
|
||||
label: 'Interactive DB',
|
||||
value: 'interactive',
|
||||
},
|
||||
],
|
||||
stationOptions: [],
|
||||
nuclideOptions: [],
|
||||
dataSouceOptions: [],
|
||||
stationIds: undefined,
|
||||
queryParams: {
|
||||
systemType: undefined,
|
||||
nuclideNames: undefined,
|
||||
dbName: undefined,
|
||||
startDate: moment().format('YYYY-MM-DD'),
|
||||
endDate: moment().format('YYYY-MM-DD'),
|
||||
},
|
||||
menuName: '',
|
||||
titleOne: 'Nuclide History',
|
||||
titleLeft: 'Nuclide History',
|
||||
titleRight: 'Nuclide History',
|
||||
chartOne: null,
|
||||
chartLeft: null,
|
||||
chartRight: null,
|
||||
spinning: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isCharts() {
|
||||
return Array.isArray(this.stationIds) && this.stationIds.length == 2 ? true : false
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
moment,
|
||||
typeChange(val) {
|
||||
this.queryParams.systemType = val
|
||||
if ('Particulate') this.menuName = 'Particulate'
|
||||
if ('gamma') this.menuName = 'Noble Gas HPGe'
|
||||
if ('beta') this.menuName = 'Noble Gas Beta-Gamma'
|
||||
this.getStations()
|
||||
this.getNuclide()
|
||||
},
|
||||
getStations() {
|
||||
getAction('/webStatistics/findStationList', { menuName: this.menuName }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.length > 0) {
|
||||
this.stationOptions = res.result.map((res) => ({
|
||||
label: res.stationCode,
|
||||
value: res.stationId,
|
||||
disabled: false,
|
||||
}))
|
||||
} else {
|
||||
this.stationList = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
getNuclide() {
|
||||
getAction('/webStatistics/findNuclideList', { systemType: this.queryParams.systemType }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.length > 0) {
|
||||
this.nuclideOptions = res.result.map((res) => ({ label: res.nuclideName, value: res.nuclideName }))
|
||||
} else {
|
||||
this.nuclideOptions = []
|
||||
}
|
||||
} else {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
})
|
||||
},
|
||||
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 == 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
|
||||
},
|
||||
endDateChange(date, dateString) {
|
||||
this.queryParams.endDate = dateString
|
||||
},
|
||||
handleSearch() {
|
||||
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
|
||||
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')
|
||||
} else {
|
||||
this.chartRightOption.series = []
|
||||
this.chartRight = echarts.init(document.getElementById('chartRight'))
|
||||
this.getChartDate(params, this.chartRight, this.chartRightOption, 'right')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
async getChartDate(params, chart, option, type) {
|
||||
this.spinning = true
|
||||
let { legend, xAxis, series, toolbox } = option
|
||||
const { success, message, result } = await getAction('/webStatistics/findNuclideStatistics', {
|
||||
...params,
|
||||
})
|
||||
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`
|
||||
legend.data = Object.keys(result).filter((item) => item !== 'CollectStart')
|
||||
xAxis.data = result.CollectStart
|
||||
toolbox.feature.saveAsImage.name = `${result.STATION_NAME}：Nuclide History`
|
||||
for (const key in result) {
|
||||
let param = null
|
||||
if (Object.hasOwnProperty.call(result, key) && key !== 'CollectStart') {
|
||||
const element = result[key]
|
||||
param = {
|
||||
type: 'line',
|
||||
name: key,
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
animation: false,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
},
|
||||
},
|
||||
data: element,
|
||||
}
|
||||
series.push(param)
|
||||
}
|
||||
}
|
||||
chart.setOption(option)
|
||||
} else {
|
||||
this.spinning = false
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
}
|
||||
},
|
||||
handleExport() {
|
||||
if (this.stationIds && this.stationIds.length > 0) {
|
||||
let params = {
|
||||
stationIds: this.stationIds,
|
||||
...this.queryParams,
|
||||
}
|
||||
getFileAction('/webStatistics/exportNuclideStatistics', params).then((res) => {
|
||||
if (res.code && res.code == 500) {
|
||||
this.$message.warning('This operation fails. Contact your system administrator')
|
||||
} else {
|
||||
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
|
||||
saveAs(blob, `Statistics-${moment().format('YYYY-MM-DD hh:mm:ss')}`)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.warning('No downloadable data')
|
||||
}
|
||||
},
|
||||
|
||||
filterOption(input, option) {
|
||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-select {
|
||||
.ant-select-arrow-icon {
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
&-open {
|
||||
.ant-select-arrow-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-header {
|
||||
padding: 10px;
|
||||
height: 106px;
|
||||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
||||
background-color: rgba(12, 235, 201, 0.05);
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
.item-label {
|
||||
display: inline-block;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
letter-spacing: 1px;
|
||||
color: #ade6ee;
|
||||
}
|
||||
&-btns {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
.search-btn {
|
||||
margin-right: 20px;
|
||||
}
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-chart {
|
||||
height: calc(100% - 126px);
|
||||
// display: flex;
|
||||
// gap: 20px;
|
||||
/deep/.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&-one {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&-one {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
&-left {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
&-right {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user