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