<template>
<!-- 异常统计 -->
<div class="abnormal-
statistics">
<tableFormworkPage>
<template v-slot:btnBox>
<import-download-document :exportParams="exportParams" :importParams="importParams" :exportData="exportData">
<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="openYearDatePicker"
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"
:dataSource="tableData"
:pagination="false"
rowKey="detector_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 importDownloadDocument from '../../../components/importDownloadDocument.vue'
export default {
components: {
tableFormworkPage,
myPagination,
importDownloadDocument,
},
data() {
return {
tableHeight: 0,
searchData: {
analysisType: 'MONTH',
dateTime: moment(),
},
tabActive: 0,
tabs: [
{ name: this.$t('月'), value: 0 },
{ name: this.$t('年'), value: 1 },
],
open: false,
columns: [],
tableData: [],
pagination: {
pageSize: 10,
currentPage: 1,
totalRows: 0,
},
importParams: {
isShowImport: false,
},
}
},
props: {
companyInfo: {
type: Object,
default: {},
},
},
computed: {
exportParams() {
const exportUrl = this.tabActive == 0 ? 'abnormalAnalysis/monthInfo' : 'abnormalAnalysis/yearInfo'
return {
isExtract: true,
isShowExport: true,
exportUrl,
}
},
exportData() {
const dateFormat = this.tabActive == 0 ? 'YYYY-M' : 'YYYY'
return {
analysisType: this.searchData.analysisType,
value: this.searchData.dateTime.format(dateFormat),
deptIdListSelect: [1, 2], // 选中部门Id列表
}
},
},
created() {
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'
}
this.getTableData()
},
onSearchDateEvent(val) {
this.searchData.dateTime = val
this.open = false
},
openYearDatePicker(status) {
this.open = status
},
// 搜索
onSearch() {
this.pagination.currentPage = 1
this.getTableData()
},
// 获取表格数据
async getTableData() {
this.columns = [
{ title: this.$t('所属部门'), dataIndex: 'department_name', ellipsis: true, resizable: true, minWidth: 100 },
{ title: this.$t('设备名称'), dataIndex: 'detector_name', ellipsis: true, resizable: true, minWidth: 100 },
{ title: this.$t('设备编号'), dataIndex: 'detector_code', ellipsis: true, resizable: true, minWidth: 100 },
{ title: this.$t('总计'), dataIndex: 'rowTotal', ellipsis: true, resizable: true, minWidth: 100 },
]
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.getYearInfo
const res = await apiMethod(params)
if (res && res.success) {
let column = []
let headerData = res.data.headers || []
column = headerData.map(item => ({
title: item.headerName,
dataIndex: item.headerKey,
ellipsis: true,
resizable: true,
minWidth: 100,
}))
this.columns.splice(3, 0, ...column)
this.tableData = res.data.data.pageData || []
this.pagination.totalRows = res.data.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> 代码评审
本文介绍了一款名为MyMagicBox的应用程序的安装与卸载统计数据,这些数据对于理解用户行为及优化产品有着重要作用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1340
