Avue实现动态查询与数据展示（附Demo）

前言

此框架为Avue-crud，推荐阅读：

1. 【vue】avue-crud表单属性配置（表格以及列）
2. Avue实现批量删除等功能（附Demo）
3. Avue实现选择下拉框的多种方式
4. Avue框架实现图表的基本知识 | 附Demo（全）

下面是一个前端查询页面的总结，包括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实时传输到数据库中，对应这个页面动态查询数据即可

整体界面逻辑如下：

1. 组件初始化：在组件挂载时，启动定时器每30秒自动刷新数据
2. 查询功能：
   -搜索：根据输入的条件（如车辆名称）查询数据并更新展示
   -重置：重置表单字段和查询条件，重新加载数据
3. 数据显示：通过avue-crud组件展示车辆信息，包括车辆名称、状态、充电枪状态、电池温度、剩余电量和更新时间等
4. 详情查看：点击“查看”按钮时，跳转到设备详情页面，并将设备名称作为查询参数传递
5. 设备详情对话框：显示设备详细信息的对话框（在此例中为空）

<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>

最终界面如下所示：