revert: 还原BLANKPDH，并将之前的更改应用到Statistics文件
This commit is contained in:
parent
e51a2cd267
commit
657f9facd2
|
|
@ -1,606 +1,416 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="height: 100%; overflow: hidden">
|
<div class="blankphd">
|
||||||
<a-card :bordered="false" style="margin-left: 20px; height: 100%">
|
<search-form :items="formItems" v-model="queryParam" @search="searchQueryData"> </search-form>
|
||||||
<div class="layout-header">
|
<a-spin :spinning="loading" class="content">
|
||||||
<a-row type="flex" :gutter="20" style="margin-bottom: 20px">
|
<div class="item" v-for="(item, index) in list" :key="index">
|
||||||
<a-col :span="6">
|
<div class="item-title">{{ item.stationCode }}</div>
|
||||||
<span class="item-label" style="width: 60px; text-align: right">Type</span>
|
<div class="item-table">
|
||||||
<a-select
|
<custom-table bordered :can-select="false" :list="item.tableData" :columns="columns"> </custom-table>
|
||||||
style="width: calc(100% - 70px)"
|
</div>
|
||||||
v-model="queryParams.systemType"
|
<div class="item-chart">
|
||||||
placeholder="select..."
|
<chart-item
|
||||||
show-arrow
|
v-for="(column, index) in item.tableData"
|
||||||
allowClear
|
:key="index"
|
||||||
:options="typeOptions"
|
:outer="{
|
||||||
@change="typeChange"
|
name: `${item.stationCode}-${column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType}-DA`,
|
||||||
>
|
value: column.da,
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
color: column.color1,
|
||||||
</a-select>
|
}"
|
||||||
</a-col>
|
:inner="{
|
||||||
<a-col :span="6">
|
name: `${item.stationCode}-${column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType}-SPI`,
|
||||||
<span class="item-label" style="width: 60px">Stations</span>
|
value: column.spi,
|
||||||
<a-select
|
color: column.color2,
|
||||||
style="width: calc(100% - 70px)"
|
}"
|
||||||
v-model="stationIds"
|
/>
|
||||||
mode="multiple"
|
</div>
|
||||||
placeholder="select..."
|
<div class="item-legend">
|
||||||
show-arrow
|
<div class="item-legend-item" v-for="(column, index) in item.tableData" :key="index">
|
||||||
allowClear
|
<div>
|
||||||
:filterOption="filterOption"
|
<Ring :color="column.color1" />
|
||||||
:options="stationOptions"
|
<span>{{ item.stationCode }}-{{ column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType }}-DA</span>
|
||||||
@change="stationChange"
|
</div>
|
||||||
>
|
<div v-if="column.spi">
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
<Ring :color="column.color2" />
|
||||||
</a-select>
|
<span>{{ item.stationCode }}-{{ column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType }}-SPI</span>
|
||||||
</a-col>
|
</div>
|
||||||
<a-col :span="6">
|
</div>
|
||||||
<span class="item-label" style="width: 60px">Nuclide</span>
|
|
||||||
<a-select
|
|
||||||
style="width: calc(100% - 70px)"
|
|
||||||
v-model="queryParams.nuclideNames"
|
|
||||||
mode="multiple"
|
|
||||||
:maxTagCount="1"
|
|
||||||
placeholder="select..."
|
|
||||||
show-arrow
|
|
||||||
allowClear
|
|
||||||
:filterOption="filterOption"
|
|
||||||
:options="nuclideOptions"
|
|
||||||
>
|
|
||||||
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
|
||||||
</a-select>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="6">
|
|
||||||
<span class="item-label" style="width: 95px">Data Source</span>
|
|
||||||
<a-select
|
|
||||||
style="width: calc(100% - 105px)"
|
|
||||||
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="6">
|
|
||||||
<span class="item-label" style="width: 60px; text-align: right">Time</span>
|
|
||||||
<custom-date-picker
|
|
||||||
style="width: calc(100% - 70px)"
|
|
||||||
:value="moment(queryParams.startDate)"
|
|
||||||
@change="startDateChange"
|
|
||||||
/>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="6">
|
|
||||||
<span class="item-label" style="width: 60px; text-align: right">to</span>
|
|
||||||
<custom-date-picker
|
|
||||||
style="width: calc(100% - 70px)"
|
|
||||||
: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>
|
</div>
|
||||||
<div class="layout-chart">
|
<a-empty v-if="!list.length" style="margin-top: 50px" description="Please Select Stations"></a-empty>
|
||||||
<a-spin :spinning="spinning" style="height: 100%; width: 100%">
|
</a-spin>
|
||||||
<div class="layout-chart-one" v-show="isDefault">
|
|
||||||
<BoxTitle title="Nuclide History" />
|
|
||||||
</div>
|
|
||||||
<template v-if="stationIds.length != 0">
|
|
||||||
<div
|
|
||||||
class="layout-chart-box"
|
|
||||||
v-for="item in chartLayout"
|
|
||||||
:key="item"
|
|
||||||
: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>
|
|
||||||
</a-spin>
|
|
||||||
</div>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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'
|
import moment from 'moment'
|
||||||
let xDataLength = 0
|
import { getAction } from '@/api/manage'
|
||||||
const symbolList = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow']
|
import ImgStation from '@/assets/images/web-statistics/station.png'
|
||||||
const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
import ChartItem from './components/ChartItem.vue'
|
||||||
const commonOptions = {
|
import Ring from '@/components/svg/ring.vue'
|
||||||
color: colorList,
|
|
||||||
grid: {
|
const DataTypes = ['PHDF', 'PHD', 'MET', 'SOH', 'PHD+MET+SOH']
|
||||||
top: 30,
|
// 返回数据的key
|
||||||
left: 20,
|
const RateKeys = [
|
||||||
right: 40,
|
['phdfOfferedNumber', 'phdfDataNumber', 'phdfOffered', 'phdfEfficient'],
|
||||||
bottom: 60,
|
['phdOfferedNumber', 'phdDataNumber', 'phdOffered', 'phdEfficient'],
|
||||||
containLabel: true,
|
['metOfferedNumber', 'metDataNumber', 'met', 'metEfficient'],
|
||||||
},
|
['sohOfferedNumber', 'sohDataNumber', 'soh', 'sohEfficient'],
|
||||||
tooltip: {
|
['pmtOfferedNumber', 'pmtDataNumber', 'phdMetSoh', 'pmtEfficient'],
|
||||||
trigger: 'axis',
|
]
|
||||||
},
|
// 最终结果的key
|
||||||
legend: {
|
const ResultKeys = ['count', 'validateCount', 'da', 'spi']
|
||||||
type: 'scroll',
|
|
||||||
width: '90%',
|
const Colors = [
|
||||||
inactiveColor: 'rgba(153, 177, 189,.5)',
|
['#e4681d', '#1080c0'], // PHDF
|
||||||
lineStyle: {
|
['#db43f7', '#289b4e'], // PHD
|
||||||
inactiveColor: '#333',
|
['#606ef8', '#add8e6'], // MET
|
||||||
},
|
['#f86c6f', '#90ee90'], // SOH
|
||||||
textStyle: {
|
['#9043f7', '#d8bfd8'], // PHD+MET+SOH
|
||||||
color: '#9ab1bc',
|
]
|
||||||
},
|
|
||||||
pageIconColor: '#9ab1bc',
|
|
||||||
pageIconInactiveColor: 'rgba(153, 177, 189,.5)',
|
|
||||||
pageTextStyle: {
|
|
||||||
color: '#9ab1bc',
|
|
||||||
},
|
|
||||||
// data: [],
|
|
||||||
},
|
|
||||||
toolbox: {
|
|
||||||
feature: {
|
|
||||||
saveAsImage: {
|
|
||||||
title: 'Save The Image',
|
|
||||||
iconStyle: {
|
|
||||||
borderColor: '#ade6ee',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
name: 'Collect Start',
|
|
||||||
nameLocation: 'middle',
|
|
||||||
nameTextStyle: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: '#5b9cba',
|
|
||||||
},
|
|
||||||
nameGap: 60,
|
|
||||||
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: {
|
|
||||||
color: '#ade6ee',
|
|
||||||
formatter: (value, index) => {
|
|
||||||
let val = value.split(' ')[0]
|
|
||||||
if (index === 0) {
|
|
||||||
let arr = value.split(' ')
|
|
||||||
arr[0] = ' ' + arr[0]
|
|
||||||
let str = arr[0]
|
|
||||||
return str
|
|
||||||
}
|
|
||||||
// if (index === xDataLength - 1) {
|
|
||||||
// let arr = value.split(' ')
|
|
||||||
// arr[0] = arr[0] + ' '
|
|
||||||
// let str = arr[0]
|
|
||||||
// return str
|
|
||||||
// }
|
|
||||||
return val
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataZoom: [
|
|
||||||
{
|
|
||||||
type: 'inside',
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
height: 16,
|
|
||||||
bottom: 35,
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [],
|
|
||||||
}
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: { ChartItem, Ring },
|
||||||
BoxTitle,
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
this.symbolList = symbolList
|
|
||||||
this.colorList = colorList
|
|
||||||
return {
|
return {
|
||||||
typeOptions: [
|
columns: [
|
||||||
{
|
{
|
||||||
label: 'Particulate',
|
title: '台站名称',
|
||||||
value: 'Particulate',
|
dataIndex: 'stationCode',
|
||||||
|
width: 233,
|
||||||
|
align: 'center',
|
||||||
|
customRender: (value, row, index) => {
|
||||||
|
return {
|
||||||
|
children: (
|
||||||
|
<div class="station-name">
|
||||||
|
<img src={ImgStation} />
|
||||||
|
<span>{value}</span>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
attrs: {
|
||||||
|
rowSpan: index === 0 ? 5 : 0,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Noble Gas HPGe',
|
title: '数据类型',
|
||||||
value: 'gamma',
|
dataIndex: 'dataType',
|
||||||
|
align: 'center',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Noble Gas Beta-Gamma',
|
title: '数据提供数目',
|
||||||
value: 'beta',
|
dataIndex: 'count',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据有效数目',
|
||||||
|
dataIndex: 'validateCount',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据提供率（DA%）',
|
||||||
|
dataIndex: 'da',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据有效率（SPI%）',
|
||||||
|
dataIndex: 'spi',
|
||||||
|
align: 'center',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
sourceOptions: [
|
stationList: [],
|
||||||
{
|
allChecked: false,
|
||||||
label: ' Auto DB',
|
queryParam: {
|
||||||
value: 'auto',
|
startTime: '',
|
||||||
},
|
endTime: '',
|
||||||
{
|
stationIds: [],
|
||||||
label: 'Interactive DB',
|
|
||||||
value: 'man',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
stationOptions: [],
|
|
||||||
nuclideOptions: [],
|
|
||||||
dataSouceOptions: [],
|
|
||||||
stationIds: [],
|
|
||||||
queryParams: {
|
|
||||||
systemType: undefined,
|
|
||||||
nuclideNames: [],
|
|
||||||
dbName: undefined,
|
|
||||||
startDate: moment().subtract(6, 'days').format('YYYY-MM-DD'),
|
|
||||||
endDate: moment().format('YYYY-MM-DD'),
|
|
||||||
},
|
},
|
||||||
menuName: '',
|
loading: false,
|
||||||
spinning: false,
|
list: [],
|
||||||
isDefault: true,
|
|
||||||
chartInitList: [],
|
|
||||||
itemTitle: {},
|
|
||||||
chartLayout: [],
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.findStationList()
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
formItems() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
type: 'custom-all-select',
|
||||||
|
label: 'Stations',
|
||||||
|
name: 'stationIds',
|
||||||
|
props: {
|
||||||
|
allChecked: this.allChecked,
|
||||||
|
filterOption: this.filterOption,
|
||||||
|
placeholder: 'select stations',
|
||||||
|
mode: 'multiple',
|
||||||
|
maxTagCount: 1,
|
||||||
|
options: [...this.stationList],
|
||||||
|
style: {
|
||||||
|
width: '200px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
change: this.handleSelectChange,
|
||||||
|
changeAll: this.handleSelectChangeAll,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
width: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Start date',
|
||||||
|
type: 'custom-date-picker',
|
||||||
|
name: 'startTime',
|
||||||
|
props: {
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
style: {
|
||||||
|
minWidth: 'auto',
|
||||||
|
width: '200px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
change: this.handleStartDateChange,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
width: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'End date',
|
||||||
|
type: 'custom-date-picker',
|
||||||
|
name: 'endTime',
|
||||||
|
props: {
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
style: {
|
||||||
|
minWidth: 'auto',
|
||||||
|
width: '200px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
change: this.handleEndDateChange,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
width: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
chartLayout: {
|
stationList: {
|
||||||
handler(newVal) {
|
handler(val) {
|
||||||
this.$nextTick(() => {
|
let arr = sessionStorage.getItem(`selectedSta_${this.menuType}`)
|
||||||
this.chartInitList.forEach((item) => {
|
? sessionStorage.getItem(`selectedSta_${this.menuType}`).split(',')
|
||||||
item.resize()
|
: []
|
||||||
})
|
this.queryParam.stationIds = arr.map((item) => Number(item))
|
||||||
})
|
this.queryParam.startTime = sessionStorage.getItem(`currStartDate_${this.menuType}`)
|
||||||
|
? sessionStorage.getItem(`currStartDate_${this.menuType}`)
|
||||||
|
: moment().subtract(6, 'days').format('YYYY-MM-DD')
|
||||||
|
|
||||||
|
this.queryParam.endTime = sessionStorage.getItem(`currEndDate_${this.menuType}`)
|
||||||
|
? sessionStorage.getItem(`currEndDate_${this.menuType}`)
|
||||||
|
: moment().format('YYYY-MM-DD')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
moment,
|
async findStationList() {
|
||||||
typeChange(val) {
|
try {
|
||||||
this.isDefault = true
|
const { success, result } = await getAction('/webStatistics/findStationList', {
|
||||||
this.stationIds = []
|
menuName: 'Particulate',
|
||||||
this.chartLayout = []
|
})
|
||||||
this.queryParams.nuclideNames = []
|
if (success) {
|
||||||
this.queryParams.systemType = val
|
if (result.length > 0) {
|
||||||
if (val == 'Particulate') this.menuName = 'Particulate'
|
this.stationList = result.map(({ stationCode, stationId }) => ({ label: stationCode, value: stationId }))
|
||||||
if (val == 'gamma') this.menuName = 'Noble Gas HPGe'
|
|
||||||
if (val == 'beta') this.menuName = 'Noble Gas Beta-Gamma'
|
|
||||||
if (val.length > 0) {
|
|
||||||
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 {
|
} else {
|
||||||
this.stationList = []
|
this.stationList = []
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning('This operation fails. Contact your system administrator')
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
})
|
} catch (error) {
|
||||||
},
|
console.log(error)
|
||||||
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 (val.length != 0) {
|
|
||||||
if (this.chartLayout.length == 2) {
|
|
||||||
let index = this.chartLayout.findIndex((item) => item !== val[0])
|
|
||||||
this.chartLayout.splice(index, 1)
|
|
||||||
}
|
|
||||||
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))
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.isDefault = true
|
|
||||||
this.stationOptions.forEach((item) => (item.disabled = false))
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
startDateChange(date, dateString) {
|
|
||||||
this.queryParams.startDate = dateString
|
|
||||||
},
|
|
||||||
endDateChange(date, dateString) {
|
|
||||||
this.queryParams.endDate = dateString
|
|
||||||
},
|
|
||||||
handleSearch() {
|
|
||||||
this.chartInitList = []
|
|
||||||
this.chartLayout = []
|
|
||||||
if (this.queryParams.systemType) {
|
|
||||||
if (this.stationIds.length > 0) {
|
|
||||||
this.isDefault = false
|
|
||||||
this.stationIds.forEach((id, index) => {
|
|
||||||
this.chartLayout.push(id)
|
|
||||||
this.$nextTick(() => {
|
|
||||||
let currChartInit = echarts.init(document.getElementById(`chart_${id}`))
|
|
||||||
this.chartInitList.push(currChartInit)
|
|
||||||
let params = {
|
|
||||||
...this.queryParams,
|
|
||||||
stationId: id,
|
|
||||||
}
|
|
||||||
let options = cloneDeep(commonOptions)
|
|
||||||
|
|
||||||
if (this.queryParams.nuclideNames.length < 1) {
|
async searchQueryData() {
|
||||||
this.$message.warning(`Please select nuclide!`)
|
try {
|
||||||
// this.getChartDate(params, currChartInit, options, id)
|
this.loading = true
|
||||||
} else {
|
const { success, result, message } = await getAction(
|
||||||
if (!this.queryParams.dbName) {
|
'/webStatistics/findStationProvisionEfficiency',
|
||||||
this.$message.warning(`Please select Data Source!`)
|
this.queryParam
|
||||||
} else {
|
)
|
||||||
if (!this.queryParams.startDate) {
|
if (success) {
|
||||||
this.$message.warning(`Please select start Date!`)
|
const list = result
|
||||||
} else {
|
.filter((item) => item.curtime)
|
||||||
if (!this.queryParams.endDate) {
|
.map((item) => {
|
||||||
this.$message.warning(`Please select end Date!`)
|
const { stationCode, rate } = item
|
||||||
} else {
|
|
||||||
this.getChartDate(params, currChartInit, options, id)
|
return {
|
||||||
}
|
stationCode,
|
||||||
|
tableData: DataTypes.map((dataType, index) => {
|
||||||
|
const data = ResultKeys.reduce((acc, key, ind) => {
|
||||||
|
acc[key] = rate[RateKeys[index][ind]]
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
|
||||||
|
const [color1, color2] = Colors[index]
|
||||||
|
|
||||||
|
return {
|
||||||
|
stationCode,
|
||||||
|
dataType,
|
||||||
|
...data,
|
||||||
|
color1,
|
||||||
|
color2,
|
||||||
}
|
}
|
||||||
}
|
}),
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
this.list = list
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning(`Please select stations!`)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.$message.warning(`Please select type!`)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async getChartDate(params, chart, option, id) {
|
|
||||||
try {
|
|
||||||
this.spinning = true
|
|
||||||
let { legend, xAxis, series, toolbox } = option
|
|
||||||
const { success, message, result } = await getAction('/webStatistics/findNuclideStatistics', {
|
|
||||||
...params,
|
|
||||||
})
|
|
||||||
if (success) {
|
|
||||||
// let result = jsonData.result
|
|
||||||
this.spinning = false
|
|
||||||
this.$set(this.itemTitle, id, result.STATION_NAME)
|
|
||||||
if (result.CollectStart.length < 1) {
|
|
||||||
this.$message.warning(`${result.STATION_NAME} No Data!`)
|
|
||||||
}
|
|
||||||
// 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' &&
|
|
||||||
key !== 'AllDayTime'
|
|
||||||
) {
|
|
||||||
const element = result[key]
|
|
||||||
param = {
|
|
||||||
type: 'line',
|
|
||||||
name: key,
|
|
||||||
smooth: false,
|
|
||||||
showSymbol: true,
|
|
||||||
symbolSize: 10,
|
|
||||||
symbol: this.symbolList[num_symbol],
|
|
||||||
animation: false,
|
|
||||||
data: element,
|
|
||||||
}
|
|
||||||
series.push(param)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
chart.setOption(option)
|
|
||||||
} else {
|
|
||||||
this.spinning = false
|
|
||||||
this.$message.warning('This operation fails. Contact your system administrator')
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.spinning = false
|
console.log(error)
|
||||||
} finally {
|
} finally {
|
||||||
this.spinning = false
|
this.loading = false
|
||||||
}
|
|
||||||
},
|
|
||||||
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) {
|
filterOption(input, option) {
|
||||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||||
},
|
},
|
||||||
|
handleSelectChange(val) {
|
||||||
|
window.sessionStorage.setItem(`selectedSta_${this.menuType}`, val)
|
||||||
|
let length = this.stationList.length
|
||||||
|
if (val.length === length) {
|
||||||
|
this.allChecked = true
|
||||||
|
} else {
|
||||||
|
this.allChecked = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelectChangeAll(val) {
|
||||||
|
this.allChecked = val
|
||||||
|
if (val) {
|
||||||
|
this.queryParam.stationIds = this.stationList.map((item) => item.value)
|
||||||
|
window.sessionStorage.setItem(`selectedSta_${this.menuType}`, this.queryParam.stationIds)
|
||||||
|
} else {
|
||||||
|
this.queryParam.stationIds = []
|
||||||
|
window.sessionStorage.setItem(`selectedSta_${this.menuType}`, [])
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.ant-select {
|
.blankphd {
|
||||||
.ant-select-arrow-icon {
|
height: 100%;
|
||||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
min-width: 1070px;
|
||||||
}
|
}
|
||||||
&-open {
|
}
|
||||||
.ant-select-arrow-icon {
|
|
||||||
transform: rotate(180deg);
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #416f7f;
|
||||||
|
background-color: rgba(2, 40, 43, 0.5);
|
||||||
|
padding: 14px 20px;
|
||||||
|
|
||||||
|
::v-deep {
|
||||||
|
.ant-spin-container {
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-header {
|
|
||||||
padding: 10px;
|
.item {
|
||||||
height: 106px;
|
&:not(:first-child) {
|
||||||
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
margin-top: 20px;
|
||||||
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
}
|
||||||
background-color: rgba(12, 235, 201, 0.05);
|
|
||||||
position: relative;
|
&-title {
|
||||||
margin-bottom: 20px;
|
height: 40px;
|
||||||
.item-label {
|
line-height: 40px;
|
||||||
display: inline-block;
|
padding: 0 12px;
|
||||||
font-family: MicrosoftYaHei;
|
background-color: rgba(12, 235, 201, 0.05);
|
||||||
font-size: 14px;
|
font-family: ArialMT;
|
||||||
margin-right: 10px;
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
color: #ade6ee;
|
color: #0cebc9;
|
||||||
}
|
}
|
||||||
&-btns {
|
|
||||||
position: absolute;
|
&-table {
|
||||||
right: 10px;
|
margin-top: 10px;
|
||||||
bottom: 10px;
|
|
||||||
.search-btn {
|
.custom-table {
|
||||||
margin-right: 20px;
|
::v-deep {
|
||||||
|
.ant-table-thead > tr th {
|
||||||
|
background-color: rgba(18, 107, 130, 0.6) !important;
|
||||||
|
padding: 11px 4px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
img {
|
}
|
||||||
margin-right: 10px;
|
|
||||||
|
&-chart {
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
::v-deep {
|
||||||
|
.custom-chart {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-legend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #80a2a7;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-chart {
|
|
||||||
height: calc(100% - 126px);
|
.station-name {
|
||||||
// display: flex;
|
img {
|
||||||
// gap: 20px;
|
width: 79px;
|
||||||
/deep/.ant-spin-container {
|
height: 103px;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
&-one {
|
|
||||||
width: 100%;
|
span {
|
||||||
height: 100%;
|
margin-left: 22px;
|
||||||
&-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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,416 +1,104 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="blankphd">
|
<div style="height: 100%">
|
||||||
<search-form :items="formItems" v-model="queryParam" @search="searchQueryData"> </search-form>
|
<List
|
||||||
<a-spin :spinning="loading" class="content">
|
:stationList="stationList"
|
||||||
<div class="item" v-for="(item, index) in list" :key="index">
|
:columns="columns"
|
||||||
<div class="item-title">{{ item.stationCode }}</div>
|
:dataType="dataType"
|
||||||
<div class="item-table">
|
fileName="BLANKPHD"
|
||||||
<custom-table bordered :can-select="false" :list="item.tableData" :columns="columns"> </custom-table>
|
pageType="ACQ"
|
||||||
</div>
|
menuType="par"
|
||||||
<div class="item-chart">
|
></List>
|
||||||
<chart-item
|
|
||||||
v-for="(column, index) in item.tableData"
|
|
||||||
:key="index"
|
|
||||||
:outer="{
|
|
||||||
name: `${item.stationCode}-${column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType}-DA`,
|
|
||||||
value: column.da,
|
|
||||||
color: column.color1,
|
|
||||||
}"
|
|
||||||
:inner="{
|
|
||||||
name: `${item.stationCode}-${column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType}-SPI`,
|
|
||||||
value: column.spi,
|
|
||||||
color: column.color2,
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="item-legend">
|
|
||||||
<div class="item-legend-item" v-for="(column, index) in item.tableData" :key="index">
|
|
||||||
<div>
|
|
||||||
<Ring :color="column.color1" />
|
|
||||||
<span>{{ item.stationCode }}-{{ column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType }}-DA</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="column.spi">
|
|
||||||
<Ring :color="column.color2" />
|
|
||||||
<span>{{ item.stationCode }}-{{ column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType }}-SPI</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<a-empty v-if="!list.length" style="margin-top: 50px" description="Please Select Stations"></a-empty>
|
|
||||||
</a-spin>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import moment from 'moment'
|
const columns = [
|
||||||
import { getAction } from '../../../../../api/manage'
|
{
|
||||||
import ImgStation from '@/assets/images/web-statistics/station.png'
|
title: 'NO',
|
||||||
import ChartItem from './components/ChartItem.vue'
|
align: 'left',
|
||||||
import Ring from '@/components/svg/ring.vue'
|
width: 80,
|
||||||
|
scopedSlots: {
|
||||||
const DataTypes = ['PHDF', 'PHD', 'MET', 'SOH', 'PHD+MET+SOH']
|
customRender: 'index',
|
||||||
// 返回数据的key
|
},
|
||||||
const RateKeys = [
|
customHeaderCell: () => {
|
||||||
['phdfOfferedNumber', 'phdfDataNumber', 'phdfOffered', 'phdfEfficient'],
|
return {
|
||||||
['phdOfferedNumber', 'phdDataNumber', 'phdOffered', 'phdEfficient'],
|
style: {
|
||||||
['metOfferedNumber', 'metDataNumber', 'met', 'metEfficient'],
|
'padding-left': '26px !important',
|
||||||
['sohOfferedNumber', 'sohDataNumber', 'soh', 'sohEfficient'],
|
},
|
||||||
['pmtOfferedNumber', 'pmtDataNumber', 'phdMetSoh', 'pmtEfficient'],
|
}
|
||||||
|
},
|
||||||
|
customCell: () => {
|
||||||
|
return {
|
||||||
|
style: {
|
||||||
|
'padding-left': '26px !important',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'STATION',
|
||||||
|
align: 'left',
|
||||||
|
dataIndex: 'stationName',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'DETECTOR CODE',
|
||||||
|
align: 'left',
|
||||||
|
dataIndex: 'siteDetCode',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'SPECTRAL QUALIFIER',
|
||||||
|
align: 'left',
|
||||||
|
dataIndex: 'spectralQualifie',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'ACQUISITION START TIME',
|
||||||
|
align: 'left',
|
||||||
|
dataIndex: 'acquisitionStart',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'ACQUISITION STOP TIME',
|
||||||
|
align: 'left',
|
||||||
|
dataIndex: 'acquisitionStop',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
// 最终结果的key
|
import { getAction, getFileAction } from '../../../../../api/manage'
|
||||||
const ResultKeys = ['count', 'validateCount', 'da', 'spi']
|
import List from '../../../list.vue'
|
||||||
|
|
||||||
const Colors = [
|
|
||||||
['#e4681d', '#1080c0'], // PHDF
|
|
||||||
['#db43f7', '#289b4e'], // PHD
|
|
||||||
['#606ef8', '#add8e6'], // MET
|
|
||||||
['#f86c6f', '#90ee90'], // SOH
|
|
||||||
['#9043f7', '#d8bfd8'], // PHD+MET+SOH
|
|
||||||
]
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { ChartItem, Ring },
|
components: {
|
||||||
|
List,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
columns: [
|
columns,
|
||||||
{
|
dataType: 'B',
|
||||||
title: '台站名称',
|
url: {
|
||||||
dataIndex: 'stationCode',
|
findStationList: '/webStatistics/findStationList',
|
||||||
width: 233,
|
|
||||||
align: 'center',
|
|
||||||
customRender: (value, row, index) => {
|
|
||||||
return {
|
|
||||||
children: (
|
|
||||||
<div class="station-name">
|
|
||||||
<img src={ImgStation} />
|
|
||||||
<span>{value}</span>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
attrs: {
|
|
||||||
rowSpan: index === 0 ? 5 : 0,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数据类型',
|
|
||||||
dataIndex: 'dataType',
|
|
||||||
align: 'center',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数据提供数目',
|
|
||||||
dataIndex: 'count',
|
|
||||||
align: 'center',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数据有效数目',
|
|
||||||
dataIndex: 'validateCount',
|
|
||||||
align: 'center',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数据提供率（DA%）',
|
|
||||||
dataIndex: 'da',
|
|
||||||
align: 'center',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '数据有效率（SPI%）',
|
|
||||||
dataIndex: 'spi',
|
|
||||||
align: 'center',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
stationList: [],
|
|
||||||
allChecked: false,
|
|
||||||
queryParam: {
|
|
||||||
startTime: '',
|
|
||||||
endTime: '',
|
|
||||||
stationIds: [],
|
|
||||||
},
|
},
|
||||||
loading: false,
|
stationList: [],
|
||||||
list: [],
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.findStationList()
|
this.findStationList()
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
formItems() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
type: 'custom-all-select',
|
|
||||||
label: 'Stations',
|
|
||||||
name: 'stationIds',
|
|
||||||
props: {
|
|
||||||
allChecked: this.allChecked,
|
|
||||||
filterOption: this.filterOption,
|
|
||||||
placeholder: 'select stations',
|
|
||||||
mode: 'multiple',
|
|
||||||
maxTagCount: 1,
|
|
||||||
options: [...this.stationList],
|
|
||||||
style: {
|
|
||||||
width: '200px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
change: this.handleSelectChange,
|
|
||||||
changeAll: this.handleSelectChangeAll,
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
width: 'auto',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Start date',
|
|
||||||
type: 'custom-date-picker',
|
|
||||||
name: 'startTime',
|
|
||||||
props: {
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
valueFormat: 'YYYY-MM-DD',
|
|
||||||
style: {
|
|
||||||
minWidth: 'auto',
|
|
||||||
width: '200px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
change: this.handleStartDateChange,
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
width: 'auto',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'End date',
|
|
||||||
type: 'custom-date-picker',
|
|
||||||
name: 'endTime',
|
|
||||||
props: {
|
|
||||||
format: 'YYYY-MM-DD',
|
|
||||||
valueFormat: 'YYYY-MM-DD',
|
|
||||||
style: {
|
|
||||||
minWidth: 'auto',
|
|
||||||
width: '200px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
change: this.handleEndDateChange,
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
width: 'auto',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
stationList: {
|
|
||||||
handler(val) {
|
|
||||||
let arr = sessionStorage.getItem(`selectedSta_${this.menuType}`)
|
|
||||||
? sessionStorage.getItem(`selectedSta_${this.menuType}`).split(',')
|
|
||||||
: []
|
|
||||||
this.queryParam.stationIds = arr.map((item) => Number(item))
|
|
||||||
this.queryParam.startTime = sessionStorage.getItem(`currStartDate_${this.menuType}`)
|
|
||||||
? sessionStorage.getItem(`currStartDate_${this.menuType}`)
|
|
||||||
: moment().subtract(6, 'days').format('YYYY-MM-DD')
|
|
||||||
|
|
||||||
this.queryParam.endTime = sessionStorage.getItem(`currEndDate_${this.menuType}`)
|
|
||||||
? sessionStorage.getItem(`currEndDate_${this.menuType}`)
|
|
||||||
: moment().format('YYYY-MM-DD')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
async findStationList() {
|
findStationList() {
|
||||||
try {
|
getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
|
||||||
const { success, result } = await getAction('/webStatistics/findStationList', {
|
if (res.success) {
|
||||||
menuName: 'Particulate',
|
if (res.result.length > 0) {
|
||||||
})
|
this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
|
||||||
if (success) {
|
|
||||||
if (result.length > 0) {
|
|
||||||
this.stationList = result.map(({ stationCode, stationId }) => ({ label: stationCode, value: stationId }))
|
|
||||||
} else {
|
} else {
|
||||||
this.stationList = []
|
this.stationList = []
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.$message.warning('This operation fails. Contact your system administrator')
|
this.$message.warning('This operation fails. Contact your system administrator')
|
||||||
}
|
}
|
||||||
} catch (error) {
|
})
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async searchQueryData() {
|
|
||||||
try {
|
|
||||||
this.loading = true
|
|
||||||
const { success, result, message } = await getAction(
|
|
||||||
'/webStatistics/findStationProvisionEfficiency',
|
|
||||||
this.queryParam
|
|
||||||
)
|
|
||||||
if (success) {
|
|
||||||
const list = result
|
|
||||||
.filter((item) => item.curtime)
|
|
||||||
.map((item) => {
|
|
||||||
const { stationCode, rate } = item
|
|
||||||
|
|
||||||
return {
|
|
||||||
stationCode,
|
|
||||||
tableData: DataTypes.map((dataType, index) => {
|
|
||||||
const data = ResultKeys.reduce((acc, key, ind) => {
|
|
||||||
acc[key] = rate[RateKeys[index][ind]]
|
|
||||||
return acc
|
|
||||||
}, {})
|
|
||||||
|
|
||||||
const [color1, color2] = Colors[index]
|
|
||||||
|
|
||||||
return {
|
|
||||||
stationCode,
|
|
||||||
dataType,
|
|
||||||
...data,
|
|
||||||
color1,
|
|
||||||
color2,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
})
|
|
||||||
this.list = list
|
|
||||||
} else {
|
|
||||||
this.$message.warning('This operation fails. Contact your system administrator')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
} finally {
|
|
||||||
this.loading = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
filterOption(input, option) {
|
|
||||||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
||||||
},
|
|
||||||
handleSelectChange(val) {
|
|
||||||
window.sessionStorage.setItem(`selectedSta_${this.menuType}`, val)
|
|
||||||
let length = this.stationList.length
|
|
||||||
if (val.length === length) {
|
|
||||||
this.allChecked = true
|
|
||||||
} else {
|
|
||||||
this.allChecked = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSelectChangeAll(val) {
|
|
||||||
this.allChecked = val
|
|
||||||
if (val) {
|
|
||||||
this.queryParam.stationIds = this.stationList.map((item) => item.value)
|
|
||||||
window.sessionStorage.setItem(`selectedSta_${this.menuType}`, this.queryParam.stationIds)
|
|
||||||
} else {
|
|
||||||
this.queryParam.stationIds = []
|
|
||||||
window.sessionStorage.setItem(`selectedSta_${this.menuType}`, [])
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.blankphd {
|
.icon-edit {
|
||||||
height: 100%;
|
margin-right: 10px;
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
min-width: 1070px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
border: 1px solid #416f7f;
|
|
||||||
background-color: rgba(2, 40, 43, 0.5);
|
|
||||||
padding: 14px 20px;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.ant-spin-container {
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
padding: 0 12px;
|
|
||||||
background-color: rgba(12, 235, 201, 0.05);
|
|
||||||
font-family: ArialMT;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #0cebc9;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-table {
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.custom-table {
|
|
||||||
::v-deep {
|
|
||||||
.ant-table-thead > tr th {
|
|
||||||
background-color: rgba(18, 107, 130, 0.6) !important;
|
|
||||||
padding: 11px 4px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-chart {
|
|
||||||
height: 200px;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
::v-deep {
|
|
||||||
.custom-chart {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-legend {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #80a2a7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.station-name {
|
|
||||||
img {
|
|
||||||
width: 79px;
|
|
||||||
height: 103px;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 22px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user