commit

electron/main.js

@@ -37,9 +37,24 @@ app.on('activate', () => {
     }
 });
 
-ipcMain.on('open-notepad', (event, arg) => {
-    console.log('Received open-notepad event');
-    exec('notepad.exe', (error, stdout, stderr) => {
+
+// ------------- 进程通信 -------------
+ipcMain.on('open-gazebo', (event, arg) => {
+    console.log('Received open-gazebo event');
+    exec('gazebo', (error, stdout, stderr) => {
+        if (error) {
+            console.error(`exec error: ${error}`);
+            return;
+        }
+        console.log(`stdout: ${stdout}`);
+        console.error(`stderr: ${stderr}`);
+    });
+});
+
+
+ipcMain.on('open-rviz', (event, arg) => {
+    console.log('Received open-rviz event');
+    exec('rviz', (error, stdout, stderr) => {
         if (error) {
             console.error(`exec error: ${error}`);
             return;
@@ -48,3 +63,29 @@ ipcMain.on('open-notepad', (event, arg) => {
         console.error(`stderr: ${stderr}`);
     });
 });
+
+ipcMain.on('close-gazebo', (event, arg) => {
+    console.log('Received close-gazebo event');
+    exec('pkill -f gazebo', (error, stdout, stderr) => {
+        if (error) {
+            console.error(`exec error: ${error}`);
+            return;
+        }
+        console.log(`stdout: ${stdout}`);
+        console.error(`stderr: ${stderr}`);
+    });
+});
+
+
+ipcMain.on('close-rviz', (event, arg) => {
+    console.log('Received close-rviz event');
+    exec('pkill -f rviz', (error, stdout, stderr) => {
+        if (error) {
+            console.error(`exec error: ${error}`);
+            return;
+        }
+        console.log(`stdout: ${stdout}`);
+        console.error(`stderr: ${stderr}`);
+    });
+});
+

electron/preload.js

@@ -2,8 +2,22 @@ console.log('Preload script loaded');
 const { contextBridge, ipcRenderer } = require('electron');
 
 contextBridge.exposeInMainWorld('electronAPI', {
-    openNotepad: () => {
-        console.log('Sending open-notepad event');
-        ipcRenderer.send('open-notepad');
-    }
+    openGazebo: () => {
+        console.log('Sending open-gazebo event');
+        ipcRenderer.send('open-gazebo');
+    },
+    openRviz: () => {
+        console.log('Sending open-rviz event');
+        ipcRenderer.send('open-rviz');
+    },
+    closeGazebo: () => {
+        console.log('Sending close-gazebo event');
+        ipcRenderer.send('close-gazebo');
+    },
+    closeRviz: () => {
+        console.log('Sending close-rviz event');
+        ipcRenderer.send('close-rviz');
+    },
 });
+
+

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "packager:linux": "electron-packager ./App --platform=linux -arch=x64 --overwrite",
     "dev:vue": "vite",
     "dev:electron": "electron .",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -29,6 +30,7 @@
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "electron": "^31.0.1",
+    "electron-packager": "^17.1.2",
     "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.2",
     "typescript": "~5.4.0",

src/views/ReportView.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="common-layout">
     <el-container>
-      <el-header style="height: 150px;background-color: rgba(255,0,0,99%)">
-        <div style="height: 30px"></div>
-        <div class="demo-image">
-          <img src="../assets/test.png" width="771" height="90" alt=""/>
+      <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;">
@@ -34,66 +35,69 @@
           <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>
         </el-form>
+        <el-button type="primary" @click="onSubmit">算法镜像导入</el-button>
+        <el-button style="margin-left: 100px;" type="primary" @click="onSubmit">选择算法镜像版本</el-button>
+        <el-switch
+            v-model="value1"
+            class="ml-2"
+            inline-prompt
+            style="margin-left: 100px;--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+            active-text="算法容器已开启"
+            inactive-text="算法容器已关闭"
+        />
+        <el-switch
+            v-model="value2"
+            class="ml-2"
+            inline-prompt
+            style="margin-left: 100px; --el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+            active-text="Gazebo 已开启"
+            inactive-text="Gazebo 已关闭"
+        />
+        <el-switch
+            v-model="value3"
+            class="ml-2"
+            inline-prompt
+            style="margin-left: 100px;--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+            active-text="Rviz 已开启"
+            inactive-text="Rviz 已关闭"
+        />
+        <el-button style="margin-left: 100px;" type="primary" @click="onSubmit">地图更新</el-button>
+        <br>
+        <br>
         <el-table stripe style="background-color: rgba(255,0,0,99%);width: 100%" border :data="tableData"
-                  fixed>
+                  fixed ref="multipleTableRef">
+          <el-table-column type="selection" width="55"/>
           <el-table-column prop="teamName" label="数据名称"/>
-          <el-table-column prop="topic" label="数据容量"/>
-          <el-table-column sortable prop="beginTime" label="设备名称"/>
-          <el-table-column sortable prop="endTime" label="设备类型"/>
-          <el-table-column sortable prop="scoreOnline" label="触发器名称"/>
-          <el-table-column sortable prop="scoreOnline" label="触发器类型"/>
-          <el-table-column sortable prop="scoreOnline" label="上报时间"/>
-          <el-table-column sortable prop="scoreOnline" label="数据状态"/>
+          <el-table-column prop="teamName" label="数据容量"/>
+          <el-table-column sortable prop="teamName" label="设备名称"/>
+          <el-table-column sortable prop="teamName" label="设备类型"/>
+          <el-table-column sortable prop="teamName" label="触发器名称"/>
+          <el-table-column sortable prop="teamName" label="触发器类型"/>
+          <el-table-column sortable prop="teamName" label="上报时间"/>
+          <el-table-column sortable prop="teamName" label="数据状态"/>
           <el-table-column width="300" fixed="right" label="操作">
             <template #default="scope">
               <el-button
                   size="small"
                   type="danger"
-                  @click="openNotepad"
-              >地图更新
-              </el-button
-              >
-              <el-button
-                  size="small"
-                  type="danger"
-                  @click="openNotepad"
+                  @click="openGazebo"
               >仿真测试
               </el-button
               >
               <el-button
                   size="small"
                   type="danger"
-                  @click="openNotepad"
+                  @click="openRviz"
               >算法评价
               </el-button
               >
             </template>
           </el-table-column>
         </el-table>
-        <!--        <div class="flex items-center mb-4">-->
-        <!--          <el-radio-group v-model="small" class="mr-4">-->
-        <!--            <el-radio-button :label="false">default</el-radio-button>-->
-        <!--            <el-radio-button :label="true">small</el-radio-button>-->
-        <!--          </el-radio-group>-->
-        <!--          <div>-->
-        <!--            background:-->
-        <!--            <el-switch v-model="background" class="ml-2" />-->
-        <!--          </div>-->
-        <!--          <div class="ml-4">-->
-        <!--            disabled: <el-switch v-model="disabled" class="ml-2" />-->
-        <!--          </div>-->
-        <!--        </div>-->
-
-        <!--        <hr class="my-4" />-->
 
         <p></p> <!--空行-->
-        <!--          <div class="demonstration">All combined</div>-->
         <el-pagination
-            style="background-color: rgba(255,255,255,100%)"
             v-model:current-page="currentPage"
             v-model:page-size="pageSize"
             :page-sizes="[10]"
@@ -115,15 +119,35 @@
 import {onBeforeMount, ref} from "vue";
 import axios from "axios";
 import {reactive} from 'vue'
+import {ElTable} from "element-plus";
+import {Check, Close} from '@element-plus/icons-vue'
+
+const value1 = ref(true)
+const value2 = ref(true)
+const value3 = ref(true)
+
+const multipleTableRef = ref<InstanceType<typeof ElTable>>
 
-const openNotepad = () => {
+
+const openGazebo = () => {
+  if (window.electronAPI) {
+    console.log('Calling gazebo & rviz');
+    window.electronAPI.openGazebo();
+  } else {
+    console.error('electronAPI is not defined');
+  }
+}
+
+const openRviz = () => {
   if (window.electronAPI) {
-    console.log('Calling openNotepad');
-    window.electronAPI.openNotepad();
+    console.log('Calling gazebo & rviz');
+    window.electronAPI.openRviz();
   } 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',
@@ -283,4 +307,16 @@ const handleClick = () => {
   margin-bottom: 20px;
 }
 
+/* 假设 .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>