EquipmentTimeErrorVerification.vue
4.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '100px' } }">
<a-form-item label="日期:" style="padding: 5px 0">
<a-date-picker v-model:value="queryForm.countDate" style="width: 280px"/>
</a-form-item>
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="search">查询</a-button>
</a-form-item>
</a-form>
<a-table :dataSource="dataList" v-loading="isLoading" :columns="[
{
title: '集团名称',
dataIndex: 'accountname',
align:'center',
slots: {
customRender: 'accountname',
},
},
{
title: '商场名称',
dataIndex: 'mallname',
align:'center',
},
{
title: '监控点名称',
dataIndex: 'gatename',
align:'center',
},
{
title: '设备号',
dataIndex: 'serialnum',
align:'center',
},
{
title: 'IP',
dataIndex: 'local_ip',
align:'center',
},
{
title: 'mac地址',
dataIndex: 'mac',
align:'center',
},
{
title: '发送的错误的数据日期',
dataIndex: 'errordate',
align:'center',
},
{
title: '发送条数',
dataIndex: 'rowcount',
align:'center',
},
{
title: '统计日期',
dataIndex: 'countdate',
align:'center',
}
]" :pagination="false">
</a-table>
<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
:show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20']"
@change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
style="text-align:center" />
</template>
<script>
import moment from 'moment'
import {defineComponent, ref,toRaw,reactive } from 'vue'
import {filterEmptyValueInObject,formatDate} from '@/PublicUtil/PublicUtil'
import equipmentTimeErrorVerificationApi from '@/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerificationApi'
export default defineComponent({
setup() {
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref()
const dataList = ref([])
const isLoading = ref(false)
const onPageNumChange = function(num) {
pageNum.value = num
confirmSearch()
}
const queryForm = reactive(
{
countDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD')
}
)
const onPageSizeChange = function(current, size) {
pageNum.value = 1
pageSize.value = size
confirmSearch()
}
const confirmSearch = function(){
isLoading.value = true
const rawData = toRaw(queryForm)
const data = filterEmptyValueInObject({
page: pageNum.value - 1,
pageSize: pageSize.value,
countDate:formatDate(rawData.countDate)
})
console.log(data)
equipmentTimeErrorVerificationApi.getList(data).then(
(r) => {
isLoading.value = false
dataList.value = r.data.devices
total.value = r.data.pageNum
}
)
}
const search = function(){
pageNum.value = 1
pageSize.value = 10
confirmSearch()
}
const __main = function() {
confirmSearch()
}
__main()
return {
queryForm,
pageNum,
pageSize,
total,
isLoading,
dataList,
onPageNumChange,
onPageSizeChange,
confirmSearch,
search
}
},
})
</script>