revert: 还原BLANKPDH，并将之前的更改应用到Statistics文件
This commit is contained in:
parent
e51a2cd267
commit
657f9facd2
|
|
@ -1,606 +1,416 @@
|
|||
<template>
|
||||
<div style="height: 100%; overflow: hidden">
|
||||
<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="6">
|
||||
<span class="item-label" style="width: 60px; text-align: right">Type</span>
|
||||
<a-select
|
||||
style="width: calc(100% - 70px)"
|
||||
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="6">
|
||||
<span class="item-label" style="width: 60px">Stations</span>
|
||||
<a-select
|
||||
style="width: calc(100% - 70px)"
|
||||
v-model="stationIds"
|
||||
mode="multiple"
|
||||
placeholder="select..."
|
||||
show-arrow
|
||||
allowClear
|
||||
:filterOption="filterOption"
|
||||
:options="stationOptions"
|
||||
@change="stationChange"
|
||||
>
|
||||
<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: 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 class="blankphd">
|
||||
<search-form :items="formItems" v-model="queryParam" @search="searchQueryData"> </search-form>
|
||||
<a-spin :spinning="loading" class="content">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="item-title">{{ item.stationCode }}</div>
|
||||
<div class="item-table">
|
||||
<custom-table bordered :can-select="false" :list="item.tableData" :columns="columns"> </custom-table>
|
||||
</div>
|
||||
<div class="item-chart">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<a-empty v-if="!list.length" style="margin-top: 50px" description="Please Select Stations"></a-empty>
|
||||
</a-spin>
|
||||
</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'
|
||||
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,
|
||||
right: 40,
|
||||
bottom: 60,
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
type: 'scroll',
|
||||
width: '90%',
|
||||
inactiveColor: 'rgba(153, 177, 189,.5)',
|
||||
lineStyle: {
|
||||
inactiveColor: '#333',
|
||||
},
|
||||
textStyle: {
|
||||
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: [],
|
||||
}
|
||||
import { getAction } from '@/api/manage'
|
||||
import ImgStation from '@/assets/images/web-statistics/station.png'
|
||||
import ChartItem from './components/ChartItem.vue'
|
||||
import Ring from '@/components/svg/ring.vue'
|
||||
|
||||
const DataTypes = ['PHDF', 'PHD', 'MET', 'SOH', 'PHD+MET+SOH']
|
||||
// 返回数据的key
|
||||
const RateKeys = [
|
||||
['phdfOfferedNumber', 'phdfDataNumber', 'phdfOffered', 'phdfEfficient'],
|
||||
['phdOfferedNumber', 'phdDataNumber', 'phdOffered', 'phdEfficient'],
|
||||
['metOfferedNumber', 'metDataNumber', 'met', 'metEfficient'],
|
||||
['sohOfferedNumber', 'sohDataNumber', 'soh', 'sohEfficient'],
|
||||
['pmtOfferedNumber', 'pmtDataNumber', 'phdMetSoh', 'pmtEfficient'],
|
||||
]
|
||||
// 最终结果的key
|
||||
const ResultKeys = ['count', 'validateCount', 'da', 'spi']
|
||||
|
||||
const Colors = [
|
||||
['#e4681d', '#1080c0'], // PHDF
|
||||
['#db43f7', '#289b4e'], // PHD
|
||||
['#606ef8', '#add8e6'], // MET
|
||||
['#f86c6f', '#90ee90'], // SOH
|
||||
['#9043f7', '#d8bfd8'], // PHD+MET+SOH
|
||||
]
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BoxTitle,
|
||||
},
|
||||
components: { ChartItem, Ring },
|
||||
data() {
|
||||
this.symbolList = symbolList
|
||||
this.colorList = colorList
|
||||
return {
|
||||
typeOptions: [
|
||||
columns: [
|
||||
{
|
||||
label: 'Particulate',
|
||||
value: 'Particulate',
|
||||
title: '台站名称',
|
||||
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',
|
||||
value: 'gamma',
|
||||
title: '数据类型',
|
||||
dataIndex: 'dataType',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
label: 'Noble Gas Beta-Gamma',
|
||||
value: 'beta',
|
||||
title: '数据提供数目',
|
||||
dataIndex: 'count',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '数据有效数目',
|
||||
dataIndex: 'validateCount',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '数据提供率（DA%）',
|
||||
dataIndex: 'da',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '数据有效率（SPI%）',
|
||||
dataIndex: 'spi',
|
||||
align: 'center',
|
||||
},
|
||||
],
|
||||
sourceOptions: [
|
||||
{
|
||||
label: ' Auto DB',
|
||||
value: 'auto',
|
||||
},
|
||||
{
|
||||
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'),
|
||||
stationList: [],
|
||||
allChecked: false,
|
||||
queryParam: {
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
stationIds: [],
|
||||
},
|
||||
menuName: '',
|
||||
spinning: false,
|
||||
isDefault: true,
|
||||
chartInitList: [],
|
||||
itemTitle: {},
|
||||
chartLayout: [],
|
||||
loading: false,
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
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: {
|
||||
chartLayout: {
|
||||
handler(newVal) {
|
||||
this.$nextTick(() => {
|
||||
this.chartInitList.forEach((item) => {
|
||||
item.resize()
|
||||
})
|
||||
})
|
||||
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: {
|
||||
moment,
|
||||
typeChange(val) {
|
||||
this.isDefault = true
|
||||
this.stationIds = []
|
||||
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'
|
||||
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,
|
||||
}))
|
||||
async findStationList() {
|
||||
try {
|
||||
const { success, result } = await getAction('/webStatistics/findStationList', {
|
||||
menuName: 'Particulate',
|
||||
})
|
||||
if (success) {
|
||||
if (result.length > 0) {
|
||||
this.stationList = result.map(({ stationCode, stationId }) => ({ label: stationCode, value: stationId }))
|
||||
} 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 (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))
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
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) {
|
||||
this.$message.warning(`Please select nuclide!`)
|
||||
// this.getChartDate(params, currChartInit, options, id)
|
||||
} else {
|
||||
if (!this.queryParams.dbName) {
|
||||
this.$message.warning(`Please select Data Source!`)
|
||||
} else {
|
||||
if (!this.queryParams.startDate) {
|
||||
this.$message.warning(`Please select start Date!`)
|
||||
} else {
|
||||
if (!this.queryParams.endDate) {
|
||||
this.$message.warning(`Please select end Date!`)
|
||||
} else {
|
||||
this.getChartDate(params, currChartInit, options, id)
|
||||
}
|
||||
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(`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')
|
||||
}
|
||||
} catch (error) {
|
||||
this.spinning = false
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.spinning = 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')
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-select {
|
||||
.ant-select-arrow-icon {
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
.blankphd {
|
||||
height: 100%;
|
||||
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;
|
||||
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;
|
||||
|
||||
.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: #ade6ee;
|
||||
color: #0cebc9;
|
||||
}
|
||||
&-btns {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
.search-btn {
|
||||
margin-right: 20px;
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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);
|
||||
// display: flex;
|
||||
// gap: 20px;
|
||||
/deep/.ant-spin-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.station-name {
|
||||
img {
|
||||
width: 79px;
|
||||
height: 103px;
|
||||
}
|
||||
&-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);
|
||||
}
|
||||
}
|
||||
&-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);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,416 +1,104 @@
|
|||
<template>
|
||||
<div class="blankphd">
|
||||
<search-form :items="formItems" v-model="queryParam" @search="searchQueryData"> </search-form>
|
||||
<a-spin :spinning="loading" class="content">
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div class="item-title">{{ item.stationCode }}</div>
|
||||
<div class="item-table">
|
||||
<custom-table bordered :can-select="false" :list="item.tableData" :columns="columns"> </custom-table>
|
||||
</div>
|
||||
<div class="item-chart">
|
||||
<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 style="height: 100%">
|
||||
<List
|
||||
:stationList="stationList"
|
||||
:columns="columns"
|
||||
:dataType="dataType"
|
||||
fileName="BLANKPHD"
|
||||
pageType="ACQ"
|
||||
menuType="par"
|
||||
></List>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { getAction } from '../../../../../api/manage'
|
||||
import ImgStation from '@/assets/images/web-statistics/station.png'
|
||||
import ChartItem from './components/ChartItem.vue'
|
||||
import Ring from '@/components/svg/ring.vue'
|
||||
|
||||
const DataTypes = ['PHDF', 'PHD', 'MET', 'SOH', 'PHD+MET+SOH']
|
||||
// 返回数据的key
|
||||
const RateKeys = [
|
||||
['phdfOfferedNumber', 'phdfDataNumber', 'phdfOffered', 'phdfEfficient'],
|
||||
['phdOfferedNumber', 'phdDataNumber', 'phdOffered', 'phdEfficient'],
|
||||
['metOfferedNumber', 'metDataNumber', 'met', 'metEfficient'],
|
||||
['sohOfferedNumber', 'sohDataNumber', 'soh', 'sohEfficient'],
|
||||
['pmtOfferedNumber', 'pmtDataNumber', 'phdMetSoh', 'pmtEfficient'],
|
||||
const columns = [
|
||||
{
|
||||
title: 'NO',
|
||||
align: 'left',
|
||||
width: 80,
|
||||
scopedSlots: {
|
||||
customRender: 'index',
|
||||
},
|
||||
customHeaderCell: () => {
|
||||
return {
|
||||
style: {
|
||||
'padding-left': '26px !important',
|
||||
},
|
||||
}
|
||||
},
|
||||
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
|
||||
const ResultKeys = ['count', 'validateCount', 'da', 'spi']
|
||||
|
||||
const Colors = [
|
||||
['#e4681d', '#1080c0'], // PHDF
|
||||
['#db43f7', '#289b4e'], // PHD
|
||||
['#606ef8', '#add8e6'], // MET
|
||||
['#f86c6f', '#90ee90'], // SOH
|
||||
['#9043f7', '#d8bfd8'], // PHD+MET+SOH
|
||||
]
|
||||
|
||||
import { getAction, getFileAction } from '../../../../../api/manage'
|
||||
import List from '../../../list.vue'
|
||||
export default {
|
||||
components: { ChartItem, Ring },
|
||||
components: {
|
||||
List,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '台站名称',
|
||||
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,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
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: [],
|
||||
columns,
|
||||
dataType: 'B',
|
||||
url: {
|
||||
findStationList: '/webStatistics/findStationList',
|
||||
},
|
||||
loading: false,
|
||||
list: [],
|
||||
stationList: [],
|
||||
}
|
||||
},
|
||||
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: {
|
||||
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: {
|
||||
async findStationList() {
|
||||
try {
|
||||
const { success, result } = await getAction('/webStatistics/findStationList', {
|
||||
menuName: 'Particulate',
|
||||
})
|
||||
if (success) {
|
||||
if (result.length > 0) {
|
||||
this.stationList = result.map(({ stationCode, stationId }) => ({ label: stationCode, value: stationId }))
|
||||
findStationList() {
|
||||
getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
|
||||
if (res.success) {
|
||||
if (res.result.length > 0) {
|
||||
this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
|
||||
} else {
|
||||
this.stationList = []
|
||||
}
|
||||
} else {
|
||||
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>
|
||||
<style lang="less" scoped>
|
||||
.blankphd {
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
.icon-edit {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user