pji-desktop/App-linux-x64/resources/app/src/views/MapUpdateView.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="width:506.5px;height: 146px">
          <!-- 推荐使用 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-button type="primary" @click="dialogVisible = true" style="float: right; margin-bottom: 20px;">将地图更新至机器人端</el-button>
          <el-dialog
              v-model="dialogVisible"
              title="提示"
              width="300"
              :before-close="handleClose"
          >
            <span>请确认是否进行地图更新</span>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
        </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="mapId" label="地图id"/>
          <el-table-column prop="beforePgm" label="更新前pgm"/>
          <el-table-column prop="afterPgm" label="更新后pgm"/>
          <el-table-column prop="mapUpdateRate" label="地图更新率" :formatter="mapUpdateRateFormatter"/>
        </el-table>

<!--        <p></p> &lt;!&ndash;空行&ndash;&gt;-->
<!--        <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"-->
<!--        />-->
<!--        &lt;!&ndash;        <el-pagination background layout="prev, pager, next" :total="1000"/>&ndash;&gt;-->
      </el-main>
      <!--      <el-footer style="background-color: rgba(255,0,0,99%)">国家智能网联汽车创新中心</el-footer>-->
    </el-container>
  </div>
</template>

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


const multipleTableRef = ref<InstanceType<typeof ElTable>>

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  done()
}


const mapUpdateRateFormatter = (row, column, cellValue, index) => {
  // 假设 1MB = 1024 * 1024 字节
  if (cellValue) {
    const percentValue = (cellValue * 100).toFixed(1); // 保留两位小数
    return `${percentValue}%`;
  }
  return cellValue; // 如果cellValue为null或undefined，则返回原值或你想要的默认值
}


let total = ref(0)
let tableData = ref([{
  'mapId': 1,
  'beforePgm': 'url1',
  'afterPgm': 'url1_1',
  'mapUpdateRate': 0.201
},
{
  'mapId': 2,
  'beforePgm': 'url2',
  'afterPgm': 'url2_1',
  'mapUpdateRate': 0.21
}
]);

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()
}
const handleClick = () => {
  console.log('click')
}


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