<template>
<!-- 异常统计 -->
<div class="abnormal-
statistics">
<tableFormworkPage>
<template v-slot:btnBox>
<import-
download-document
:exportParams="exportParams"
:importParams="importParams"
:exportData="exportData"
@getTableList="getTableList"
>
<a-button slot="export" icon="upload" type="primary" class="mgr10">{{ $t('导出') }}</a-button>
</import-
download-document>
</template>
<template v-slot:serchBox>
<div class="searchBox">
<div class="searchBody">
<div class="searchInputBox">
<div class="searchInput">
<div class="type-tabs base-flex-align">
<div
class="tabs-item"
:class="item.value === tabActive ? 'tabs-item-active' : ''"
v-for="item in tabs"
:key="item.value"
@click="onTabEvent(item.value)"
>
{{ item.name }}
</div>
</div>
<div class="searchInput">
<a-month-picker
:allowClear="false"
format="YYYY-M"
v-model="searchData.dateTime"
v-if="tabActive == 0"
:placeholder="$t('请选择月份')"
/>
<a-date-picker
:allowClear="false"
:open="open"
@openChange="open
YearDatePicker"
v-else
v-model="searchData.dateTime"
mode="
year"
:placeholder="$t('请选择年份')"
format="YYYY"
@panelChange="onSearchDateEvent"
/>
</div>
</div>
</div>
<div class="searchButton">
<a-button type="primary" @click="onSearch"> {{ $t('common.scf.btn.search') }} </a-button>
<!-- <a-button @click="onReset"> {{ $t('common.scf.btn.reset') }} </a-button> -->
</div>
</div>
</div>
</template>
<template v-slot:tableBox>
<div class="table-card">
<a-table
:scroll="{ x: '100%', y: tableHeight }"
:bordered="false"
:columns.sync="columns"
:data
Source="tableData"
:pagination="false"
rowKey="facility
Code"
>
</a-table>
</div>
</template>
<template v-slot:paginationBox>
<!-- 分页 -->
<div>
<my-pagination
style="padding: 0"
:showSizeChanger="true"
:pageIndex.sync="pagination.currentPage"
@changePage="changePage"
:pageSize="pagination.pageSize"
:total="pagination.totalRows"
@onShowSizeChange="onShowSizeChange"
v-if="tableData.length"
></my-pagination>
</div>
</template>
</tableFormworkPage>
</div>
</template>
<script>
import factory from '../factory'
import myPagination from '@/components/scfComponents/paginationFormwork/myPagination'
import tableFormworkPage from '@/components/scfComponents/tableFormwork/tableFormworkPage'
import import
DownloadDocument from '../../../components/import
DownloadDocument.vue'
export default {
components: {
tableFormworkPage,
myPagination,
import
DownloadDocument,
},
data() {
return {
tableHeight: 0,
searchData: {},
tabActive: 0,
tabs: [
{ name: this.$t('月'), value: 0 },
{ name: this.$t('年'), value: 1 },
],
open: false,
analysisType: null,
baseColumns: [
{
key: 'departmen_name',
title: this.$t('所属部门'),
dataIndex: 'department_name',
ellipsis: true,
resizable: true,
minWidth: 100,
},
{
key: 'detector_name',
title: this.$t('设备名称'),
dataIndex: 'detector_name',
ellipsis: true,
resizable: true,
minWidth: 100,
},
{
key: 'detector_
code',
title: this.$t('设备编号'),
dataIndex: 'detector_
code',
ellipsis: true,
resizable: true,
minWidth: 100,
},
],
dynamicColumns: [],
actionColumn: [
{
key: 'rowTotal',
title: this.$t('总计'),
dataIndex: 'rowTotal',
ellipsis: true,
resizable: true,
minWidth: 100,
},
],
tableData: [
{
detector_
code: '457897846874545',
department_name: '测试部门',
'2025-05': 0,
'2025-04': 0,
'2025-07': 0,
'2025-06': 7600,
'2025-09': 0,
detector_name: '采集能耗探测器',
'2025-08': 0,
'2025-10': 0,
rowTotal: 7600,
'2025-01': 0,
'2025-12': 0,
'2025-11': 0,
'2025-03': 0,
'2025-02': 0,
},
],
pagination: {
pageSize: 10,
currentPage: 1,
totalRows: 0,
},
importParams: {
isShowImport: false,
},
}
},
computed: {
exportParams() {
return {
isExtract: true,
isShowExport: true,
exportUrl: +this.tabActive === 0 ? 'abnormalAnalysis/monthInfo' : 'abnormalAnalysis/
yearInfo',
}
},
columns() {
return [...this.baseColumns, ...this.dynamicColumns, ...this.actionColumn]
},
},
created() {
this.searchData = {
analysisType: 'MONTH',
dateTime: moment(),
}
this.getTableData()
},
mounted() {
this.tableHeight = 0
this.tableHeight = document.getElementsByClassName('tableBox')[0].offsetHeight - 48
window.onresize = () => {
this.tableHeight = 0
this.tableHeight = document.getElementsByClassName('tableBox')[0].offsetHeight - 48
}
},
methods: {
onTabEvent(key) {
if (key !== this.tabActive) {
this.tabActive = key
this.searchData.analysisType = key == 0 ? 'MONTH' : '
YEAR'
}
},
onSearchDateEvent(val) {
this.searchData.dateTime = val
this.open = false
},
open
YearDatePicker(status) {
this.open = status
},
// 搜索
onSearch() {
this.pagination.currentPage = 1
this.getTableData()
},
// 获取表格数据
async getTableData() {
try {
const dateFormat = +this.tabActive === 0 ? 'YYYY-M' : 'YYYY'
const dateValue = this.searchData.dateTime.format(dateFormat)
const params = {
analysisType: this.searchData.analysisType,
value: dateValue,
deptIdListSelect: [1, 2],
page: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
}
console.
log(params, 'paramsparamsparamsparams')
// 根据标签页调用不同接口
const apiMethod = +this.tabActive === 0 ? factory.getMonthInfo : factory.get
YearInfo
const res = await apiMethod
if (res && res.data) {
this.dynamicColumns = []
let headerData = res.data.header || []
this.dynamicColumns = headerData.map(item => ({
key: item.headerKey,
title: item.headerName,
dataIndex: item.headerKey,
ellipsis: true,
resizable: true,
minWidth: 100,
}))
this.tableData = res.data.pageData || []
this.pagination.totalRows = res.data.totalCount || 0
}
} catch (error) {
this.$message.error(error)
}
},
// 分页
changePage(currentPage) {
this.pagination.currentPage = currentPage
this.getTableData()
},
// 每页条数发生变化
onShowSizeChange(pageSize) {
this.pagination.currentPage = 1
this.pagination.pageSize = pageSize
this.getTableData()
},
},
}
</script>
<style lang="less" scoped>
.abnormal-
statistics {
width: 100%;
height: 100%;
box-sizing: border-box;
position: relative;
.type-tabs {
margin-right: 4px;
.tabs-item {
padding: 0 18px;
line-height: 30px;
border: 1px solid #e9ebee;
cursor: pointer;
font-size: 14px;
color: #fff;
margin-right: -1px;
&:first-child {
border-radius: 3px 0 0 3px;
}
&:
last-child {
border-radius: 0 3px 3px 0;
}
&-active {
color: #1c79f4;
border: 1px solid #1c79f4;
background: rgba(28, 121, 244, 0.1);
z-index: 2;
}
}
}
}
</style>
dynamicColumns请求道数据后 columns会实时渲染的吗
博客提示某资源仅提供两天下载时间，下周一就会失效。
扫一扫
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
