目录
- 前言
- 1. 基本知识
- 2. Demo
前言
此框架为Avue-crud，推荐阅读：
- 【vue】avue-crud表单属性配置（表格以及列）
- Avue实现批量删除等功能（附Demo）
- Avue实现选择下拉框的多种方式
- 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实时传输到数据库中，对应这个页面动态查询数据即可
整体界面逻辑如下：
- 组件初始化：在组件挂载时，启动定时器每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>
最终界面如下所示：
