feat: 删除部分冗余代码；添加地图续扫页面&算法评价结果页面&仿真测试记录页面

src/router/index.ts

@@ -27,6 +27,21 @@ const router = createRouter({
             path: '/update_stat',
             name: 'update_stat',
             component: () => import('../views/UpdateStatView.vue')
+        },
+        {
+            path: '/map_rescan',
+            name: 'map_rescan',
+            component: () => import('../views/MapRescanView.vue')
+        },
+        {
+            path: '/test_record',
+            name: 'test_record',
+            component: () => import('../views/TestRecordView.vue')
+        },
+        {
+            path: '/algorithm_eval',
+            name: 'algorithm_eval',
+            component: () => import('../views/AlgorithmEvalView.vue')
         }
     ]
 })

src/views/AboutView.vue

@@ -110,7 +110,7 @@
       <el-button style="margin-left: 10px;" type="primary" @click="goToMain">更换终点并执行</el-button>
     </el-form-item>
     <el-form-item label="            ">
-      <el-button type="primary" @click="goToMain">算法评价</el-button>
+      <el-button type="primary" @click="goToAlgorithmEval">算法评价</el-button>
     </el-form-item>
     <el-form-item label="            ">
       <el-button type="primary" @click="goToMain">返回</el-button>
@@ -158,4 +158,8 @@ const goToMain = () => {
   router.push('/')
 }
 
+const goToAlgorithmEval = () => {
+  router.push('/algorithm_eval')
+}
+
 </script>

src/views/AlgorithmEvalView.vue

@@ -0,0 +1,182 @@
+<!--suppress ALL -->
+<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;">
+        <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.algorithmLevel" placeholder="请输入算法评价等级" clearable/>
+            </el-form-item>
+            <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 style="float: right">
+              <el-form-item>
+                <el-button type="danger" @click="onSubmit">下载测试bag</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="testTime" label="测试时间"/>
+          <el-table-column prop="testBag" label="测试bag"/>
+          <el-table-column prop="testDuration" label="测试时长"/>
+          <el-table-column prop="testDistance" label="测试里程"/>
+          <el-table-column prop="algorithmLevel" label="算法评价等级"/>
+          <el-table-column prop="algorithmReport" label="算法评价报告"/>
+        </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";
+
+// 数据容量单位从B转成MB
+const queryLine = reactive({
+  algorithmLevel: ''
+})
+
+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?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>

src/views/MapRescanView.vue

@@ -0,0 +1,194 @@
+<!--suppress ALL -->
+<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;">
+        <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>
+            <el-form-item label="更新阈值设置" label-width="150">
+              <el-input v-model="queryLine.threshold" min="0" max="100" step="1" style="width: 65px">
+                <template #suffix>
+                  <i slot="suffix" style="color: #181818">%</i>
+                </template>
+              </el-input>
+
+<!--              <el-input-number-->
+<!--                  v-model="queryLine.threshold"-->
+<!--                  :min="1"-->
+<!--                  :max="10"-->
+<!--                  size="large"-->
+<!--                  style="width: 100px"-->
+<!--              />-->
+            </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";
+
+// 数据容量单位从B转成MB
+const queryLine = reactive({
+  equipmentName: '',
+  equipmentTypeName: '',
+  threshold:'20'
+})
+
+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?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>

src/views/MapUpdateView.vue

@@ -61,14 +61,9 @@
 <script lang="ts" setup>
 import {onBeforeMount, ref} from "vue";
 import axios from "axios";
-import {reactive} from 'vue'
 import {ElTable} from "element-plus";
-import {useRouter} from 'vue-router'; // 导入 Vue Router 的 useRouter 钩子
 
 
-const router = useRouter();
-const gazeboState = ref(false)
-const rvizState = ref(false)
 const multipleTableRef = ref<InstanceType<typeof ElTable>>
 
 const dialogVisible = ref(false)
@@ -77,44 +72,6 @@ const handleClose = (done: () => void) => {
   done()
 }
 
-// do not use same name with ref
-const form = reactive({
-  sudoPassword: '',
-  tag: '',
-  // date1: '',
-  // date2: '',
-  // delivery: false,
-  // type: [],
-  // resource: '',
-  // desc: '',
-})
-const currentTag = ref('')
-
-
-const algorithmImport = async () => {
-  dialogVisible.value = false
-  try {
-    const result = await window.electronAPI.openFileManager();
-    console.log('用户选择的文件路径为:', result, '，版本为：', form.tag);
-    window.electronAPI.dockerImport(form.sudoPassword, result, form.tag)
-  } catch (error) {
-    console.error('打开文件管理器时出错:', error);
-  }
-};
-
-const goToDetail = () => {
-  router.push('/about')
-}
-
-// 数据容量单位从B转成MB
-const dataSizeFormatter = (row, column, cellValue, index) => {
-  // 假设 1MB = 1024 * 1024 字节
-  if (cellValue) {
-    const mb = (cellValue / (1024 * 1024)).toFixed(2); // 保留两位小数
-    return `${mb}MB`;
-  }
-  return cellValue; // 如果cellValue为null或undefined，则返回原值或你想要的默认值
-}
 
 const mapUpdateRateFormatter = (row, column, cellValue, index) => {
   // 假设 1MB = 1024 * 1024 字节
@@ -125,106 +82,6 @@ const mapUpdateRateFormatter = (row, column, cellValue, index) => {
   return cellValue; // 如果cellValue为null或undefined，则返回原值或你想要的默认值
 }
 
-const gazebo = () => {
-  if (gazeboState.value) {
-    if (window.electronAPI) {
-      window.electronAPI.openGazebo(); // 关闭 gazebo
-    } else {
-      console.error('electronAPI is not defined');
-    }
-    // gazeboState.value = false
-  } else {
-    if (window.electronAPI) {
-      window.electronAPI.closeGazebo();
-    } else {
-      console.error('electronAPI is not defined');
-    }
-    // gazeboState.value = true
-  }
-}
-
-const rviz = () => {
-  if (rvizState.value) {
-    if (window.electronAPI) {
-      window.electronAPI.openRviz();
-    } else {
-      console.error('electronAPI is not defined');
-    }
-  } else {
-    if (window.electronAPI) {
-      window.electronAPI.closeRviz();
-    } else {
-      console.error('electronAPI is not defined');
-    }
-  }
-}
-
-
-const downloadPdf = (index: number, row: any) => {
-  console.log(index, row)
-  axios.post('http://36.110.106.142:12341/web_server/exam/report',
-      {
-        "id": row.id,
-        "teamName": row.teamName,
-        "scoreOnline": row.scoreOnline,
-        "beginTime": row.beginTime,
-        "endTime": row.endTime
-      },
-      {
-        headers: {
-          "Authorization": "U9yKpD6kZZDDe4LFKK6myAxBUT1XRrDM"
-        },
-        responseType: 'blob' // 设置响应类型为二进制流
-      }
-  ).then(function (response) {
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', row.topic + "-" + row.teamName + "-评分报告.pdf"); // 设置下载的文件名
-    document.body.appendChild(link);
-    link.click();
-  }).catch(function (error) {
-    console.log(error);
-  });
-}
-
-
-const openPdf = (index: number, row: any) => {
-  console.log(index, row)
-  axios.post('http://36.110.106.142:12341/web_server/exam/report',
-      {
-        "id": row.id,
-        "teamName": row.teamName,
-        "scoreOnline": row.scoreOnline,
-        "beginTime": row.beginTime,
-        "endTime": row.endTime
-      },
-      {
-        headers: {
-          "Authorization": "U9yKpD6kZZDDe4LFKK6myAxBUT1XRrDM"
-        },
-        responseType: 'blob' // 设置响应类型为二进制流
-      }
-  ).then(function (response) {
-    const url = window.URL.createObjectURL(new Blob([response.data], {type: 'application/pdf'}));
-    window.open(url, '_blank');
-  }).catch(function (error) {
-    console.log(error);
-  });
-}
-
-
-const queryLine = reactive({
-  dataName: '',
-  equipmentName: '',
-  equipmentTypeName: '',
-  triggerName: '',
-  triggerTypeName: '',
-})
-
-const onSubmit = () => {
-  page()
-}
 
 let total = ref(0)
 let tableData = ref([{

src/views/ReportView.vue

@@ -40,7 +40,7 @@
           <el-button type="primary" @click="goToMapUpdate">地图更新</el-button>
           <el-button type="primary" @click="goToUpdateStat">地图更新统计</el-button>
           <el-button type="primary" @click="mapDialogVisible = true">地图续扫提醒阈值</el-button>
-          <el-button type="primary" @click="algorithmImport">地图续扫提醒</el-button>
+          <el-button type="primary" @click="goToMapRescan">地图续扫提醒</el-button>
           <el-button type="primary" @click="algorithmDialogVisible = true">算法镜像导入</el-button>
           <el-dialog
               v-model="algorithmDialogVisible"
@@ -50,12 +50,12 @@
           >
             <template #footer>
               <div class="dialog-footer">
-                <el-form :model="form" label-width="auto">
+                <el-form :model="algorithmForm" label-width="auto">
                   <el-form-item style="margin-bottom: 10px" label="sudo密码：">
-                    <el-input v-model="form.sudoPassword"/>
+                    <el-input v-model="algorithmForm.sudoPassword"/>
                   </el-form-item>
                   <el-form-item style="margin-bottom: 10px" label="算法版本：">
-                    <el-input v-model="form.tag"/>
+                    <el-input v-model="algorithmForm.tag"/>
                   </el-form-item>
                 </el-form>
                 <!--            -->
@@ -71,15 +71,14 @@
               width="400"
               :before-close="handleClose"
           >
-            <el-form :model="form">
+            <el-form :model="mapRescanForm">
               <el-form-item label="请输入地图续扫提醒阈值" label-width="170">
-                <el-input v-model="form.name">
+                <el-input v-model="mapRescanForm.name">
                   <template #suffix>
                     <i slot="suffix" style="color: #181818">%</i>
                   </template>
                 </el-input>
               </el-form-item>
-
             </el-form>
             <template #footer>
               <div class="dialog-footer">
@@ -122,7 +121,7 @@
           <!--            inactive-text="Rviz 已关闭"-->
           <!--            @click="rviz"-->
           <!--        />-->
-          <el-button style="margin-left: 100px;" type="primary" @click="onSubmit">仿真测试记录</el-button>
+          <el-button style="margin-left: 100px;" type="primary" @click="goToTestRecord">仿真测试记录</el-button>
         </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'}">
@@ -185,7 +184,7 @@ const handleClose = (done: () => void) => {
 }
 
 // do not use same name with ref
-const form = reactive({
+const algorithmForm = reactive({
   sudoPassword: '',
   tag: '',
   // date1: '',
@@ -195,6 +194,9 @@ const form = reactive({
   // resource: '',
   // desc: '',
 })
+const mapRescanForm = reactive({
+  name: ''
+})
 const currentTag = ref('')
 
 
@@ -202,8 +204,8 @@ const algorithmImport = async () => {
   algorithmDialogVisible.value = false
   try {
     const result = await window.electronAPI.openFileManager();
-    console.log('用户选择的文件路径为:', result, '，版本为：', form.tag);
-    window.electronAPI.dockerImport(form.sudoPassword, result, form.tag)
+    console.log('用户选择的文件路径为:', result, '，版本为：', algorithmForm.tag);
+    window.electronAPI.dockerImport(algorithmForm.sudoPassword, result, algorithmForm.tag)
   } catch (error) {
     console.error('打开文件管理器时出错:', error);
   }
@@ -221,6 +223,14 @@ const goToUpdateStat = () => {
   router.push('/update_stat')
 }
 
+const goToMapRescan = () => {
+  router.push('/map_rescan')
+}
+
+const goToTestRecord = () => {
+  router.push('/test_record')
+}
+
 // 数据容量单位从B转成MB
 const dataSizeFormatter = (row, column, cellValue, index) => {
   // 假设 1MB = 1024 * 1024 字节

src/views/TestRecordView.vue

@@ -0,0 +1,194 @@
+<!--suppress ALL -->
+<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;">
+        <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.equipmentTypeName" placeholder="请输入设备类型" clearable/>
+            </el-form-item>
+            <el-form-item label="算法版本">
+              <el-input v-model="queryLine.algorithmVersion" placeholder="请输入算法版本" clearable/>
+            </el-form-item>
+            <el-form-item label="算法评价等级">
+              <el-input v-model="queryLine.algorithmLevel" placeholder="请输入算法评价等级" clearable/>
+            </el-form-item>
+            <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 style="float: right">
+              <el-form-item>
+                <el-button type="danger" @click="onSubmit">下载测试bag</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="equipmentTypeName" label="设备类型"/>
+          <el-table-column prop="algorithmVersion" label="算法版本"/>
+          <el-table-column prop="testTime" label="测试时间"/>
+          <el-table-column prop="pgmFile" label="pgm文件"/>
+          <el-table-column prop="worldFile" label="world文件"/>
+          <el-table-column prop="testBag" label="测试bag"/>
+          <el-table-column prop="testDuration" label="测试时长"/>
+          <el-table-column prop="testDistance" label="测试里程"/>
+          <el-table-column prop="algorithmLevel" label="算法评价等级"/>
+          <el-table-column prop="algorithmReport" label="算法评价报告"/>
+        </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";
+
+// 数据容量单位从B转成MB
+const queryLine = reactive({
+  equipmentName: '',
+  equipmentTypeName: '',
+  algorithmVersion: '',
+  algorithmLevel: ''
+})
+
+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?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>

src/views/UpdateStatView.vue

@@ -12,19 +12,21 @@
         <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>
-            <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 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"
@@ -60,165 +62,18 @@
 </template>
 
 <script lang="ts" setup>
-import {onBeforeMount, ref} from "vue";
+import {onBeforeMount, reactive, ref} from "vue";
 import axios from "axios";
-import {reactive} from 'vue'
 import {ElTable} from "element-plus";
-import {useRouter} from 'vue-router'; // 导入 Vue Router 的 useRouter 钩子
 
 
-const value = ref(true)
-const router = useRouter();
-const algorithmContainerState = ref(false)
-const gazeboState = ref(false)
-const rvizState = ref(false)
 const multipleTableRef = ref<InstanceType<typeof ElTable>>
 
-const dialogVisible = ref(false)
-
-const handleClose = (done: () => void) => {
-  done()
-}
-
-// do not use same name with ref
-const form = reactive({
-  sudoPassword: '',
-  tag: '',
-  // date1: '',
-  // date2: '',
-  // delivery: false,
-  // type: [],
-  // resource: '',
-  // desc: '',
-})
-const currentTag = ref('')
-
-
-const algorithmImport = async () => {
-  dialogVisible.value = false
-  try {
-    const result = await window.electronAPI.openFileManager();
-    console.log('用户选择的文件路径为:', result, '，版本为：', form.tag);
-    window.electronAPI.dockerImport(form.sudoPassword, result, form.tag)
-  } catch (error) {
-    console.error('打开文件管理器时出错:', error);
-  }
-};
-
-const goToDetail = () => {
-  router.push('/about')
-}
-
-const goToMapUpdate = () => {
-  router.push('/map_update')
-}
-
-
-// 数据容量单位从B转成MB
-const dataSizeFormatter = (row, column, cellValue, index) => {
-  // 假设 1MB = 1024 * 1024 字节
-  if (cellValue) {
-    const mb = (cellValue / (1024 * 1024)).toFixed(2); // 保留两位小数
-    return `${mb}MB`;
-  }
-  return cellValue; // 如果cellValue为null或undefined，则返回原值或你想要的默认值
-}
-
-const gazebo = () => {
-  if (gazeboState.value) {
-    if (window.electronAPI) {
-      window.electronAPI.openGazebo(); // 关闭 gazebo
-    } else {
-      console.error('electronAPI is not defined');
-    }
-    // gazeboState.value = false
-  } else {
-    if (window.electronAPI) {
-      window.electronAPI.closeGazebo();
-    } else {
-      console.error('electronAPI is not defined');
-    }
-    // gazeboState.value = true
-  }
-}
-
-const rviz = () => {
-  if (rvizState.value) {
-    if (window.electronAPI) {
-      window.electronAPI.openRviz();
-    } else {
-      console.error('electronAPI is not defined');
-    }
-  } else {
-    if (window.electronAPI) {
-      window.electronAPI.closeRviz();
-    } else {
-      console.error('electronAPI is not defined');
-    }
-  }
-}
-
-
-const downloadPdf = (index: number, row: any) => {
-  console.log(index, row)
-  axios.post('http://36.110.106.142:12341/web_server/exam/report',
-      {
-        "id": row.id,
-        "teamName": row.teamName,
-        "scoreOnline": row.scoreOnline,
-        "beginTime": row.beginTime,
-        "endTime": row.endTime
-      },
-      {
-        headers: {
-          "Authorization": "U9yKpD6kZZDDe4LFKK6myAxBUT1XRrDM"
-        },
-        responseType: 'blob' // 设置响应类型为二进制流
-      }
-  ).then(function (response) {
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', row.topic + "-" + row.teamName + "-评分报告.pdf"); // 设置下载的文件名
-    document.body.appendChild(link);
-    link.click();
-  }).catch(function (error) {
-    console.log(error);
-  });
-}
-
-
-const openPdf = (index: number, row: any) => {
-  console.log(index, row)
-  axios.post('http://36.110.106.142:12341/web_server/exam/report',
-      {
-        "id": row.id,
-        "teamName": row.teamName,
-        "scoreOnline": row.scoreOnline,
-        "beginTime": row.beginTime,
-        "endTime": row.endTime
-      },
-      {
-        headers: {
-          "Authorization": "U9yKpD6kZZDDe4LFKK6myAxBUT1XRrDM"
-        },
-        responseType: 'blob' // 设置响应类型为二进制流
-      }
-  ).then(function (response) {
-    const url = window.URL.createObjectURL(new Blob([response.data], {type: 'application/pdf'}));
-    window.open(url, '_blank');
-  }).catch(function (error) {
-    console.log(error);
-  });
-}
-
 
 const queryLine = reactive({
   dataName: '',
   equipmentName: '',
   equipmentTypeName: '',
-  triggerName: '',
-  triggerTypeName: '',
 })
 
 const onSubmit = () => {
@@ -265,9 +120,6 @@ const handleCurrentChange = (val: number) => {
   currentPage.value = val
   page()
 }
-const handleClick = () => {
-  console.log('click')
-}
 
 
 </script>