refactor: 重构blankphd页面
This commit is contained in:
parent
8dc0324d72
commit
e51a2cd267
BIN
src/assets/images/web-statistics/station.png
Normal file
BIN
src/assets/images/web-statistics/station.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -184,6 +184,17 @@ export default {
|
|||
.custom-table-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ant-table-bordered .ant-table-header > table,
|
||||
.ant-table-bordered .ant-table-body > table,
|
||||
.ant-table-bordered .ant-table-fixed-left table,
|
||||
.ant-table-bordered .ant-table-fixed-right table {
|
||||
border-color: #416f7f;
|
||||
}
|
||||
|
||||
.ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
|
||||
border-color: #416f7f;
|
||||
}
|
||||
}
|
||||
|
||||
.mouse-move-select {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="custom-top-menu">
|
||||
<a-menu mode="horizontal" v-model="selectedKeys" @click="onMenuSelect">
|
||||
<a-menu mode="horizontal" :level="2" v-model="selectedKeys" @click="onMenuSelect">
|
||||
<a-menu-item v-for="(menu, index) in menus" :key="menu.name" :class="{ 'is-last': index === menus.length - 1 }">
|
||||
<img
|
||||
v-show="menu.name === selectedKeys[0]"
|
||||
|
|
@ -100,8 +100,10 @@ export default {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.custom-top-menu {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
|
||||
.ant-menu {
|
||||
background: transparent;
|
||||
height: 100% !important;
|
||||
|
|
@ -172,4 +174,8 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
18
src/components/svg/ring.vue
Normal file
18
src/components/svg/ring.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<svg width="30" height="20" :style="{ fill: color }">
|
||||
<path d="M 0,10 C 5,0 20,0 25,10 L 20,15 C 15,10 10,10 5,15 L 0,10" fill="inherit" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'red',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,104 +1,416 @@
|
|||
<template>
|
||||
<div style="height: 100%">
|
||||
<List
|
||||
:stationList="stationList"
|
||||
:columns="columns"
|
||||
:dataType="dataType"
|
||||
fileName="BLANKPHD"
|
||||
pageType="ACQ"
|
||||
menuType="par"
|
||||
></List>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
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',
|
||||
},
|
||||
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'],
|
||||
]
|
||||
import { getAction, getFileAction } from '../../../../../api/manage'
|
||||
import List from '../../../list.vue'
|
||||
// 最终结果的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: {
|
||||
List,
|
||||
},
|
||||
components: { ChartItem, Ring },
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
dataType: 'B',
|
||||
url: {
|
||||
findStationList: '/webStatistics/findStationList',
|
||||
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: [],
|
||||
},
|
||||
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: {
|
||||
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: {
|
||||
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 }))
|
||||
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')
|
||||
}
|
||||
} 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>
|
||||
.icon-edit {
|
||||
margin-right: 10px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<CustomChart :option="option" autoresize />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomChart from '@/components/CustomChart/index.vue'
|
||||
|
||||
export default {
|
||||
components: { CustomChart },
|
||||
props: {
|
||||
inner: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
name: '内部名称',
|
||||
value: 0,
|
||||
color: '#1080c0',
|
||||
}),
|
||||
},
|
||||
outer: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
name: '外部名称',
|
||||
value: 0,
|
||||
color: '#e4681d',
|
||||
}),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
option() {
|
||||
const option = {
|
||||
emphasis: {
|
||||
trigger: false,
|
||||
},
|
||||
series: [
|
||||
// 外层
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['35%', '50%'],
|
||||
center: ['60%', '50%'],
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
clockwise: false,
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
edgeDistance: 0,
|
||||
color: 'inherit',
|
||||
},
|
||||
labelLine: {
|
||||
length2: 0,
|
||||
},
|
||||
labelLayout: {
|
||||
hideOverlap: false,
|
||||
moveOverlap: 'shiftY',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.outer.value,
|
||||
name: this.outer.name,
|
||||
itemStyle: {
|
||||
color: this.outer.color,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100 - this.outer.value,
|
||||
name: 'other',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2f4b5e',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
if (this.inner.value) {
|
||||
option.series.push({
|
||||
type: 'pie',
|
||||
radius: '25%',
|
||||
center: ['60%', '50%'],
|
||||
emphasis: {
|
||||
disabled: true,
|
||||
},
|
||||
clockwise: false,
|
||||
label: {
|
||||
alignTo: 'edge',
|
||||
edgeDistance: 0,
|
||||
color: 'inherit',
|
||||
},
|
||||
labelLine: {
|
||||
length: 40,
|
||||
length2: 0,
|
||||
},
|
||||
labelLayout: {
|
||||
hideOverlap: false,
|
||||
moveOverlap: 'shiftY',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: this.inner.value,
|
||||
name: this.inner.name,
|
||||
itemStyle: {
|
||||
color: this.inner.color,
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 100 - this.inner.value,
|
||||
name: 'other',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2f4b5e',
|
||||
},
|
||||
},
|
||||
],
|
||||
z: 10,
|
||||
})
|
||||
}
|
||||
|
||||
return option
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user