Avue实现动态查询与数据展示的示例代码

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

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