|
|
@@ -0,0 +1,345 @@
|
|
|
+<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-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> <!–空行–>-->
|
|
|
+<!-- <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, 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)
|
|
|
+
|
|
|
+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 字节
|
|
|
+ if (cellValue) {
|
|
|
+ const percentValue = (cellValue * 100).toFixed(1); // 保留两位小数
|
|
|
+ return `${percentValue}%`;
|
|
|
+ }
|
|
|
+ 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([{
|
|
|
+ '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?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>
|
