pji-desktop/src/views/UpdateStatView.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-header
          style="height: 250px; background-color: rgba(255,0,0,50%); display: flex; flex-direction: column; justify-content: center; align-items: center;">
        <div class="demo-image" style="text-align: center;"> <!-- 注意这里添加了 text-align: center; 但对于块级元素这不是必需的 -->
          <img src="../assets/pji-logo.jpg" alt="" style="max-width: 100%; height: auto;">
          <!-- 推荐使用 max-width 保持图片比例 -->
        </div>
      </el-header>
      <el-main style="background-color:white;">
        <el-breadcrumb separator="/" style="margin-bottom: 10px;">
          <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item>地图更新统计</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="topbar">
          <el-form style=" background-color: rgba(0,0,0,0%);" :inline="true" :model="queryLine"
                   class="demo-form-inline">
            <el-form-item label="设备名称">
              <el-input v-model="queryLine.equipmentName" placeholder="请输入设备名称" clearable/>
            </el-form-item>
            <el-form-item label="设备类型">
              <el-input v-model="queryLine.equipmentTypeName" placeholder="请输入设备类型" clearable/>
            </el-form-item>
            <div style="float: right">
              <el-form-item >
                <el-button type="danger" @click="onSubmit">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="onSubmit">重置</el-button>
              </el-form-item>
            </div>

          </el-form>
        </div>
        <el-table stripe style="background-color: rgba(255,0,0,99%);width: 100%" border :data="tableData"
                  fixed ref="multipleTableRef" :cell-style="{ textAlign: 'center'}" :header-cell-style="{ textAlign: 'center'}">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="equipmentName" label="设备名称"/>
          <el-table-column prop="equipmentTypeName" label="设备类型"/>
          <el-table-column prop="mapId" label="地图id"/>
          <el-table-column prop="originalPgm" label="原始pgm"/>
          <el-table-column prop="updateTime" label="地图更新时间"/>
          <el-table-column prop="cumulativeUpdateRate" label="累积地图更新率"/>
          <el-table-column prop="currentPgm" label="当前pgm"/>
        </el-table>

        <p></p> <!--空行-->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10]"
            :small="small"
            :disabled="disabled"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <!--        <el-pagination background layout="prev, pager, next" :total="1000"/>-->
      </el-main>
      <!--      <el-footer style="background-color: rgba(255,0,0,99%)">国家智能网联汽车创新中心</el-footer>-->
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from "vue";
import axios from "axios";
import {ElTable} from "element-plus";


const multipleTableRef = ref<InstanceType<typeof ElTable>>


const queryLine = reactive({
  dataName: '',
  equipmentName: '',
  equipmentTypeName: '',
})

const onSubmit = () => {
  page()
}

let total = ref(0)
let tableData = ref([]);
onBeforeMount(() => {
  page()
})

function page() {
  axios.get('http://1.202.169.139:8081/open/scene/list?equipmentType=YI_DAO_JI_QI_REN&page=' + currentPage.value + '&size=' + pageSize.value,
      {
        headers: {
          "Authorization": "4773hd92ysj54paflw2jem3onyhywxt2"
        }
      }
  ).then(function (response) {
    tableData.value = response.data.data.content
    total.value = response.data.data.totalElements
    // total.value = tableData.value.length
    // console.log(tableData);
    // console.log(response.data.data);
  }).catch(function (error) {
    console.log(error);
  });
}

const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  pageSize.value = val
  page()
  if (tableData.value.length == 0) {
    page()
  }
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  page()
}


</script>
<style scoped>

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}


.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 400px;
}

.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image .block:last-child {
  border-right: none;
}

.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.topbar {
  margin-bottom: 15px;
}

/* 假设 .el-pager__item 是分页按钮的类名，这可能需要你根据实际的 Element UI 版本和源码进行调整 */
.el-pager__item {
  background-color: rgba(255, 0, 0, 50%) !important; /* 修改背景色 */
  color: #fff; /* 可能需要修改文本颜色以在红色背景上可见 */
  border-color: transparent; /* 如果需要，修改边框颜色 */
}

/* 修改当前选中页码的按钮样式 */
.el-pager__item.is-active {
  background-color: rgba(255, 0, 0, 70%) !important; /* 选中时的背景色 */
  color: #fff; /* 选中时的文本颜色 */
}
</style>