fuguobin
1 year ago
18 changed files with 417 additions and 109 deletions
@ -0,0 +1,14 @@ |
|||||
|
.statisticalContainer { |
||||
|
.search { |
||||
|
margin-bottom: 15px; |
||||
|
.el-form-item--default { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
.statistical { |
||||
|
.statPagination { |
||||
|
justify-content: right; |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,144 @@ |
|||||
|
<template> |
||||
|
<div class="statisticalContainer"> |
||||
|
<section class="search"> |
||||
|
<el-card shadow="always"> |
||||
|
<el-form |
||||
|
ref="searchFormRef" |
||||
|
:model="searchForm" |
||||
|
:rules="rules" |
||||
|
:inline="true" |
||||
|
label-width="120px" |
||||
|
class="searchForm" |
||||
|
status-icon |
||||
|
> |
||||
|
<el-form-item label="时间" prop="qDate"> |
||||
|
<el-date-picker |
||||
|
v-model="searchForm.qDate" |
||||
|
type="date" |
||||
|
format="YYYY-MM-DD" |
||||
|
value-format="YYYY-MM-DD" |
||||
|
placeholder="请选择时间" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="submitForm(searchFormRef)">查询</el-button> |
||||
|
<el-button @click="resetForm(searchFormRef)">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
</section> |
||||
|
<section class="statistical"> |
||||
|
<el-card shadow="always"> |
||||
|
<el-table class="statTable" :data="statData" border style="width: 100%"> |
||||
|
<el-table-column prop="devicName" label="设备名" align="center" /> |
||||
|
<el-table-column prop="paramName" label="参数名" align="center" /> |
||||
|
<el-table-column prop="aval" label="均值" align="center" /> |
||||
|
<el-table-column prop="aday" label="日" align="center" /> |
||||
|
<el-table-column prop="amonth" label="月" align="center" /> |
||||
|
</el-table> |
||||
|
<el-pagination |
||||
|
class="statPagination" |
||||
|
:page-sizes="[10, 20, 30, 40, 50]" |
||||
|
layout="sizes, prev, pager, next" |
||||
|
background |
||||
|
:total="statPage.total" |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
/> |
||||
|
</el-card> |
||||
|
</section> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup> |
||||
|
import type { FormInstance, FormRules, TableColumnCtx } from 'element-plus'; |
||||
|
import { useDateFormat, useNow } from '@vueuse/core'; |
||||
|
import { dcBusiDayReport } from '@/api/table/list'; |
||||
|
import { StatVo } from '@/api/table/types'; |
||||
|
|
||||
|
interface searchForm { |
||||
|
qDate: string; |
||||
|
} |
||||
|
|
||||
|
interface SpanMethodProps { |
||||
|
row: StatVo; |
||||
|
column: TableColumnCtx<StatVo>; |
||||
|
rowIndex: number; |
||||
|
columnIndex: number; |
||||
|
} |
||||
|
|
||||
|
const searchFormRef = ref<FormInstance>(); |
||||
|
const searchForm = reactive<searchForm>({ |
||||
|
qDate: '' |
||||
|
}); |
||||
|
|
||||
|
const rules = reactive<FormRules<searchForm>>({ |
||||
|
qDate: [ |
||||
|
{ |
||||
|
type: 'date', |
||||
|
required: true, |
||||
|
message: '请选择时间', |
||||
|
trigger: 'change' |
||||
|
} |
||||
|
] |
||||
|
}); |
||||
|
|
||||
|
const today = useDateFormat(useNow(), 'YYYY-MM-DD'); |
||||
|
const statData = ref<StatVo[]>([]); |
||||
|
const statPage = reactive({ |
||||
|
total: 0, |
||||
|
pageNum: 1, |
||||
|
pageSize: 10 |
||||
|
}); |
||||
|
|
||||
|
onMounted(() => { |
||||
|
searchForm.qDate = today.value; |
||||
|
getDayReport(); |
||||
|
}); |
||||
|
|
||||
|
function getDayReport() { |
||||
|
//获取数据 |
||||
|
const params = { |
||||
|
qDate: searchForm.qDate, |
||||
|
pageNum: statPage.pageNum, |
||||
|
pageSize: statPage.pageSize |
||||
|
}; |
||||
|
dcBusiDayReport(params).then((res: any) => { |
||||
|
if (res.code === 200) { |
||||
|
statData.value = res.rows; |
||||
|
statPage.total = res.total; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
const handleSizeChange = (val: number) => { |
||||
|
statPage.pageSize = val; |
||||
|
getDayReport(); |
||||
|
}; |
||||
|
const handleCurrentChange = (val: number) => { |
||||
|
statPage.pageNum = val; |
||||
|
getDayReport(); |
||||
|
}; |
||||
|
|
||||
|
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
|
if (!formEl) return; |
||||
|
await formEl.validate((valid, fields) => { |
||||
|
if (valid) { |
||||
|
getDayReport(); |
||||
|
} else { |
||||
|
console.log('error submit!', fields); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const resetForm = (formEl: FormInstance | undefined) => { |
||||
|
if (!formEl) return; |
||||
|
formEl.resetFields(); |
||||
|
searchForm.qDate = today.value; |
||||
|
getDayReport(); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
Loading…
Reference in new issue