Avue实现动态查询与数据展示的示例代码
作者：码农研究僧
Avue是一个基于Vue.js的前端框架,它是由阿里云开发的一款企业级UI组件库,旨在提供一套全面、易用且高性能的界面解决方案本文介绍了Avue实现动态查询与数据展示的示例,需要的朋友可以参考下
下面是一个前端查询页面的总结，包括Demo示例和注释
1. 基本知识
数据展示配置 (optiontotal, datatotal, totalPage)
<avue-crud
:option="optiontotal"
:data="datatotal"
:page="totalPage"
@on-load="loadPage">
<!-- 插槽模板 -->
<template slot-scope="scope" slot="menu">
<el-button style="margin-left:10px;" size="small" type="text" @click.native="showDetail(scope.row)">查看</el-button>
</template>
<template slot-scope="scope" slot="remainCapacity" class="el-progress-bar__innerText">
<el-progress :text-inside="true" :stroke-width="24" :color="percentageStyle(scope.row.remainCapacity)" :percentage="scope.row.remainCapacity"></el-progress>
</template>
</avue-crud>
:option="optiontotal"：配置avue-crud组件的显示选项，如表格列的定义、是否显示删除、编辑、添加按钮等:data="datatotal"： 绑定要显示的数据，通常是从API获取的结果数组:page="totalPage"：配置分页信息，包括当前页码、每页大小、总记录数等@on-load="loadPage"： 当数据需要加载时调用loadPage方法，通常用于处理分页和数据加载
基本的注意事项如下：
分页参数：
确保分页参数（currentPage和pageSize）正确传递，并与后端API的分页要求一致
在分页变化时（如页码变动），需要重新加载数据以反映当前页的数据数据绑定：
:data="datatotal"绑定的数据应确保格式正确，并与表格列定义中的prop属性一致
数据中每一项的字段名称应与optiontotal中定义的列字段一致，以确保数据能正确显示插槽使用：
slot="menu"用于自定义行操作按钮，如“查看”按钮slot="remainCapacity"用于自定义进度条显示，动态设置颜色和百分比，提供直观的设备状态反馈
2. Demo
以下为充电桩的实时动态数据，通过PLC实时传输到数据库中，对应这个页面动态查询数据即可
整体界面逻辑如下：
- 组件初始化：在组件挂载时，启动定时器每30秒自动刷新数据
- 查询功能：
-搜索：根据输入的条件（如车辆名称）查询数据并更新展示
-重置：重置表单字段和查询条件，重新加载数据 - 数据显示：通过avue-crud组件展示车辆信息，包括车辆名称、状态、充电枪状态、电池温度、剩余电量和更新时间等
- 详情查看：点击“查看”按钮时，跳转到设备详情页面，并将设备名称作为查询参数传递
- 设备详情对话框：显示设备详细信息的对话框（在此例中为空）
<template>
<div>
<basic-container>
<!-- 查询表单 -->
<el-form :inline="true" ref="formInline" :model="formInline" label-width="150px">
<el-form-item label="车辆名称">
<el-input v-model="formInline.deviceName" placeholder="请输入车辆名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onSearch">查询</el-button>
<el-button size="small" @click="resetForm('formInline')">重置</el-button>
</el-form-item>
</el-form>
<!-- 数据展示卡片 -->
<el-card class="box-card">
<div class="clearfix">
<span>总数为：{{totalPage.total}}辆</span>
<avue-crud
:option="optiontotal"
:data="datatotal"
:page="totalPage"
@on-load="loadPage">
<!-- 查看按钮模板 -->
<template slot-scope="scope" slot="menu">
<el-button style="margin-left:10px;" size="small" type="text" @click.native="showDetail(scope.row)">查看</el-button>
</template>
<!-- 剩余电量进度条模板 -->
<template slot-scope="scope" slot="remainCapacity" class="el-progress-bar__innerText">
<el-progress :text-inside="true" :stroke-width="24" :color="percentageStyle(scope.row.remainCapacity)" :percentage="scope.row.remainCapacity"></el-progress>
</template>
</avue-crud>
</div>
</el-card>
</basic-container>
<!-- 设备详情对话框 -->
<el-dialog title="设备详情" :append-to-body='true' :visible="detailVisible" @close="closeDetialDialog"></el-dialog>
</div>
</template>
<script>
import { getDeviceRealList } from "@/api/equipment/chargingSchedule/devicereal";
export default {
data() {
return {
timer: null,
detailVisible: false,
query: {},
totalPage: {
pageSize: 20,
currentPage: 1,
total: 0
},
formInline: {
deviceName: ''
},
datatotal: [],
optiontotal: {
height: 'auto',
calcHeight: 95,
fit: true,
border: true,
delBtn: false,
editBtn: false,
addBtn: false,
menuWidth: 100,
highlightCurrentRow: true,
column: [
{
label: '车辆名称',
prop: 'deviceName'
},
{
label: '车辆状态',
prop: 'vehicleStatus',
dicData: [
{ label: '启动', value: '01' },
{ label: '熄火', value: '02' },
{ label: '充电', value: '03' },
{ label: '离线', value: '99' }
]
},
{
label: '充电枪状态',
prop: 'chargeGun',
dicData: [
{ label: '未连接', value: '00' },
{ label: '已连接', value: '11' }
]
},
{
label: '电池系统温度(℃)',
prop: 'batteryTemp'
},
{
label: '剩余电量(%)',
prop: 'remainCapacity',
slot: true
},
{
label: '更新时间',
prop: 'infoUpdateTime',
width: '150'
},
{
label: '时间差值（天）',
prop: 'timeDifferenceDay',
width: '70',
formatter: (row) => this.calculateTimeDifference(row.infoUpdateTime)
}
]
}
};
},
computed: {
currentTime() {
return new Date();
}
},
mounted() {
// 定时刷新页面
this.timer = setInterval(() => {
setTimeout(() => this.loadPage(this.totalPage, this.query), 0);
}, 1000 * 30);
},
methods: {
calculateTimeDifference(updateTime) {
const updateTimeObj = new Date(updateTime);
const timeDifference = this.currentTime - updateTimeObj; // 时间差值，单位为毫秒
const dayDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
return dayDifference;
},
onSearch() {
let searchInfo = {
deviceName: this.formInline.deviceName === '' ? null : this.formInline.deviceName
};
this.totalPage.currentPage = 1;
this.loadPage(this.totalPage, searchInfo);
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.formInline.deviceName = null;
this.onSearch();
},
showDetail(row) {
this.$router.push({ path: '/equipment/chargingSchedule/deviceInfoVisual', query: { deviceName: row.deviceName } });
},
loadPage(page, params = {}) {
getDeviceRealList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
const data = res.data.data;
this.totalPage.total = data.total;
this.datatotal = data.records;
});
},
percentageStyle(percentage) {
if (percentage <= 20) return '#CD0000';
if (percentage > 20 && percentage <= 40) return '#FF0000';
if (percentage > 80) return '#32CD32';
if (percentage > 60 && percentage <= 80) return '#EEEE00';
if (percentage <= 60 && percentage > 40) return '#EEC900';
},
closeDetialDialog() {
this.detailVisible = false;
}
}
}
</script>
<style>
.el-progress-bar__innerText {
color: #0b0a0a;
font-size: 12px;
margin: 0px 5px;
}
</style>
最终界面如下所示：
到此这篇关于Avue实现动态查询与数据展示的示例代码的文章就介绍到这了,更多相关Avue动态查询与数据展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！