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