直接上代码吧
<template>
<page-header-wrapper>
<template v-slot:content>
<div class="page-header-content">
<a-spin size="large" :spinning="loading" tip="加载中...">
<a-card :bordered="false" class="content">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="14">
<a-col :md="4" :sm="24">
<a-form-item label="选择年份:">
<a-select placeholder="请选择" v-model="queryParams.areaType">
<a-select-option v-for="dict in areaTypeList" :key="dict.value" :value="dict.value">
{{ dict.label }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="3" :sm="24">
<span class="table-page-search-submitButtons">
<a-button @click="currentPageChange(1)" type="primary">查询</a-button>
<!-- <a-button @click="reportFun" style="margin-left: 8px">导出</a-button> -->
</span>
</a-col>
</a-row>
</a-form>
</div>
<div class="table-page-operator-wrapper">
<!-- 表格 -->
<a-table
class="table-thead-border"
ref="table"
:loading="tableLoading"
:data-source="ListShip"
:rowKey="
(record, index) => {
return index
}
"
:scroll="{ x: 1200 }"
:pagination="false"
>
<a-table-column
:width="80"
:ellipsis="true"
align="center"
title="序号"
:customRender="(text, record, index) => `${index + 1}`"
></a-table-column>
<a-table-column
dataIndex="ygmc"
:width="160"
:ellipsis="true"
align="center"
title="渔港名称"
></a-table-column>
<a-table-column
dataIndex="city"
:width="100"
:ellipsis="true"
align="center"
title="所属市"
></a-table-column>
<a-table-column
dataIndex="county"
:width="100"
:ellipsis="true"
align="center"
title="所属县"
></a-table-column>
<template v-for="(item, index) in fieldList">
<a-table-column-group :key="item.eventName" :title="item.eventName" align="center">
<template v-for="(item1, index1) in item.groupList">
<a-table-column align="center" :title="item1.name.split(',')[0]" :width="140" :key="item1.name">
<template slot-scope="text, record">
<div>
{{ record.eventList[index].groupList[index1].value }}
</div>
</template>
</a-table-column>
</template>
</a-table-column-group>
</template>
</a-table>
<a-pagination
style="margin-top: 15px"
class="ant-table-pagination"
v-model="current"
:page-size-options="pageSizeOptions"
:total="total"
show-size-changer
:page-size="pageSize"
@showSizeChange="onShowSizeChange"
@change="currentPageChange"
:show-total="(total) => `共 ${total} 条数据`"
>
<template slot="buildOptionText" slot-scope="props">
<span v-if="props.value !== '50'">{{ props.value }}条/页</span>
<span v-if="props.value === '50'">全部</span>
</template>
</a-pagination>
</div>
</a-card>
</a-spin>
</div>
</template>
</page-header-wrapper>
</template>
<script>
import { currentTime } from '../fishingPort/components/fun'
import { getrealtimeStatisPort } from '@/api/fishingPort/statis'
import { getBerthShip, getTyphoonEvent } from '@/api/fishingPort/berth'
export default {
components: {},
data() {
return {
loading: false,
portName: null,
queryParams: {
fullName: [],
portName: [],
areaType: 0,
date: [],
},
areaTypeList: [
{ label: '全部', value: 0 },
{ label: '2023', value: 1 },
{ label: '2022', value: 2 },
],
current: 1,
total: 100,
pageSize: 10,
pageSizeOptions: ['5', '10', '20', '30', '50', '100'],
columns: [
// 将columns对象动态生成
],
ListShip: [],
fieldList: [
{
eventName: '事件1',
groupList: [
{
name: '总数',
},
{
name: '本县',
},
{
name: '本市外县',
},
{
name: '同省外市',
},
{
name: '省外',
},
],
},
{
eventName: '事件2',
groupList: [
{
name: '总数1',
},
{
name: '本县1',
},
{
name: '本市外县1',
},
{
name: '同省外市1',
},
{
name: '省外1',
},
],
},
],
tableLoading: false,
subsidiesList: [],
reportList: [
{ slots: 'outReportNum', type: 'OUT', report: 'REPORTED' },
{ slots: 'outNotReportNum', type: 'OUT', report: 'NOT_REPORTED' },
{ slots: 'outFreeReportNum', type: 'OUT', report: 'FREE_REPORT' },
{ slots: 'inReportNum', type: 'IN', report: 'REPORTED' },
{ slots: 'inNotReportNum', type: 'IN', report: 'NOT_REPORTED' },
{ slots: 'inFreeReportNum', type: 'IN', report: 'FREE_REPORT' },
],
}
},
created() {
this.queryParams.date = [currentTime()[1] + ' ' + '00:00:00', currentTime()[0]]
this.getPortStatisList()
getTyphoonEvent({
eventId: 217,
harbourId: '1673632600765759488',
pageSize: this.pageSize,
pageNum: this.pageNum,
type: 1,
}).then((res) => {
console.log(res)
})
},
methods: {
/**
* @author Jinlihua
* @function 获取统计数据
*/
getPortStatisList() {
this.tableLoading = true
getBerthShip({ harbourFullName: '', pageSize: this.pageSize, pageNum: this.current }).then((res) => {
console.log(res)
if (res.code === 200) {
this.total = res.total
this.tableLoading = false
let arr = [
{
title: '序号',
width: 50,
align: 'center',
dataIndex: 'xh',
scopedSlots: { customRender: 'xh' },
},
{
title: '渔港名称',
dataIndex: 'ygmc',
align: 'center',
},
{
title: '所属市',
width: 100,
dataIndex: 'city',
align: 'center',
},
{
title: '所属区县',
width: 100,
dataIndex: 'county',
align: 'center',
},
]
res.rows[0].eventList.map((item, index) => {
arr.push({
title: `${item.eventName}`,
scopedSlots: { customRender: this.getId() },
children: [
{
title: '总数',
dataIndex: 'shipTotal',
key: this.getId(),
align: 'center',
scopedSlots: { customRender: 'shipTotal' },
},
{
title: '本县',
dataIndex: 'selfCounty',
key: this.getId(),
align: 'center',
scopedSlots: { customRender: 'selfCounty' },
},
{
title: '本市外县',
dataIndex: 'outCounty',
key: this.getId(),
align: 'center',
scopedSlots: { customRender: 'outCounty' },
},
{
title: '同省外市',
dataIndex: 'selfProvinceOutCity',
key: this.getId(),
align: 'center',
scopedSlots: { customRender: 'selfProvinceOutCity' },
},
{
title: '省外',
dataIndex: 'outProvince',
key: this.getId(),
align: 'center',
scopedSlots: { customRender: 'outProvince' },
},
],
})
})
console.log(res.rows[0].eventList)
this.columns = arr
// const processedData = res.rows.flatMap((row) =>
// row.eventList.map((event) => ({
// ...row,
// ...event,
// }))
// )
// this.ListShip = processedData
const dataSource = res.rows.map((row) => {
return {
harbourId: row.harbourId,
ygmc: row.ygmc,
province: row.province,
city: row.city,
county: row.county,
eventList: row.eventList.map((event) => {
const groupList = [
{
name: `总数,${this.getId()}`,
value: event.shipTotal.toString(),
},
{
name: `本县,${this.getId()}`,
value: event.selfCounty.toString(),
},
{
name: `本市外县,${this.getId()}`,
value: event.outCounty.toString(),
},
{
name: `同省外市,${this.getId()}`,
value: event.selfProvinceOutCity.toString(),
},
{
name: `省外,${this.getId()}`,
value: event.outProvince.toString(),
},
]
return {
eventName: event.eventName,
groupList: groupList,
}
}),
}
})
console.log(dataSource)
this.ListShip = dataSource
this.fieldList = dataSource[0].eventList
} else {
this.$message.error(msg)
}
})
},
// 获取随机数
getId() {
//获取随机数id
let date = Date.now()
let rund = Math.ceil(Math.random() * 1000)
let id = date + '' + rund
return id
},
// 导出
reportFun() {
console.log(111)
},
onShowSizeChange(current, size) {
this.current = 1
this.pageSize = size
this.getPortStatisList()
},
currentPageChange(pageNum) {
this.current = pageNum
this.getPortStatisList()
},
},
}
</script>
<style lang="less" scoped>
@import '../fishingPort/funStyle.less';
/deep/.ant-table-thead tr th {
border-top: 1px solid #000;
border-left: 1px solid #000;
}
/deep/.ant-table-tbody tr td {
border-top: 1px solid #000;
border-left: 1px solid #000;
}
/deep/.ant-table-thead tr th:first-child {
border-left: 1px solid #000;
}
/deep/.ant-table-tbody tr td:first-child {
border-left: 1px solid #000;
}
/deep/.ant-table-thead tr th:last-child {
border-right: 1px solid #000;
}
/deep/.ant-table-tbody tr td:last-child {
border-right: 1px solid #000;
}
/deep/.ant-table-tbody tr:last-child td {
border-bottom: 1px solid #000;
}
/deep/.ant-table-column-title {
font-size: 16px;
font-weight: 700;
}
/deep/ thead th {
background-color: #f3f9ff;
}
/deep/ .tab-button {
color: #1492ff !important;
cursor: pointer;
}
.typeStyle {
margin: 5px 5px 0 10px;
font-size: 15px;
font-weight: 700;
}
</style>