Avue實現(xiàn)動態(tài)查詢與數(shù)據(jù)展示的示例代碼

更新時間：2024年08月20日 11:22:38 作者：碼農(nóng)研究僧

Avue是一個基于Vue.js的前端框架,它是由阿里云開發(fā)的一款企業(yè)級UI組件庫,旨在提供一套全面、易用且高性能的界面解決方案本文介紹了Avue實現(xiàn)動態(tài)查詢與數(shù)據(jù)展示的示例,需要的朋友可以參考下

1. 基本知識

數(shù)據(jù)展示配置 (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"：綁定要顯示的數(shù)據(jù)，通常是從API獲取的結果數(shù)組
:page="totalPage"：配置分頁信息，包括當前頁碼、每頁大小、總記錄數(shù)等
@on-load="loadPage"：當數(shù)據(jù)需要加載時調(diào)用loadPage方法，通常用于處理分頁和數(shù)據(jù)加載

基本的注意事項如下：

分頁參數(shù)：
確保分頁參數(shù)（currentPage和pageSize）正確傳遞，并與后端API的分頁要求一致
在分頁變化時（如頁碼變動），需要重新加載數(shù)據(jù)以反映當前頁的數(shù)據(jù)
數(shù)據(jù)綁定：
:data="datatotal"綁定的數(shù)據(jù)應確保格式正確，并與表格列定義中的prop屬性一致
數(shù)據(jù)中每一項的字段名稱應與optiontotal中定義的列字段一致，以確保數(shù)據(jù)能正確顯示
插槽使用：
slot="menu"用于自定義行操作按鈕，如“查看”按鈕
slot="remainCapacity"用于自定義進度條顯示，動態(tài)設置顏色和百分比，提供直觀的設備狀態(tài)反饋

2. Demo

以下為充電樁的實時動態(tài)數(shù)據(jù)，通過PLC實時傳輸?shù)綌?shù)據(jù)庫中，對應這個頁面動態(tài)查詢數(shù)據(jù)即可

整體界面邏輯如下：

組件初始化：在組件掛載時，啟動定時器每30秒自動刷新數(shù)據(jù)
查詢功能：
-搜索：根據(jù)輸入的條件（如車輛名稱）查詢數(shù)據(jù)并更新展示
-重置：重置表單字段和查詢條件，重新加載數(shù)據(jù)
數(shù)據(jù)顯示：通過avue-crud組件展示車輛信息，包括車輛名稱、狀態(tài)、充電槍狀態(tài)、電池溫度、剩余電量和更新時間等
詳情查看：點擊“查看”按鈕時，跳轉(zhuǎn)到設備詳情頁面，并將設備名稱作為查詢參數(shù)傳遞
設備詳情對話框：顯示設備詳細信息的對話框（在此例中為空）

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

      <!-- 數(shù)據(jù)展示卡片 -->
      <el-card class="box-card">
        <div class="clearfix">
          <span>總數(shù)為：{{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: '車輛狀態(tài)',
            prop: 'vehicleStatus',
            dicData: [
              { label: '啟動', value: '01' },
              { label: '熄火', value: '02' },
              { label: '充電', value: '03' },
              { label: '離線', value: '99' }
            ]
          },
          {
            label: '充電槍狀態(tài)',
            prop: 'chargeGun',
            dicData: [
              { label: '未連接', value: '00' },
              { label: '已連接', value: '11' }
            ]
          },
          {
            label: '電池系統(tǒng)溫度(℃)',
            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>

最終界面如下所示：