pji-desktop/src/views/ReportView.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;">
        <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.dataName" placeholder="请输入数据名称" clearable/>
            </el-form-item>
            <!--          <el-form-item label="数据标签">-->
            <!--            <el-input v-model="queryLine.teamName" placeholder="请输入数据标签" clearable/>-->
            <!--          </el-form-item>-->
            <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="触发器名称">
              <el-input v-model="queryLine.triggerName" placeholder="请输入触发器名称" clearable/>
            </el-form-item>
            <el-form-item label="触发器类型">
              <el-input v-model="queryLine.triggerTypeName" 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>
          </el-form>
          <el-button type="primary" @click="updateMap">地图更新</el-button>
          <el-button type="primary" @click="goToUpdateStat">地图更新统计</el-button>
          <el-button type="primary" @click="mapDialogVisible = true">地图续扫提醒阈值</el-button>
          <el-button type="primary" @click="goToMapRescan">地图续扫提醒</el-button>

          <el-dialog
              v-model="updateDialogVisible"
              title="地图更新"
              width="400"
              :before-close="handleClose"
              :close-on-click-modal="false"
          >
            <el-steps style="max-width: 600px" :active="update_active" finish-status="success">
              <el-step title="数据拉取"/>
              <el-step title="地图生成"/>
            </el-steps>

            <template #footer>
              <el-button @click="goToMapUpdate" :disabled="update_active !== 2">去部署</el-button>
            </template>
          </el-dialog>

          <el-dialog
              v-model="mapDialogVisible"
              title="地图续扫提醒"
              width="400"
              :before-close="handleMapClose"
              :close-on-click-modal="false"
          >
            <el-form :model="mapRescanForm">
              <el-form-item label="请输入地图续扫提醒阈值" label-width="170">
                <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">
                <el-button type="primary" @click="mapDialogVisible = false">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
          <div style="float: right">
<!--            <el-switch-->
<!--                style="margin-left: 10px;"-->
<!--                v-model="value"-->
<!--                size="large"-->
<!--                inactive-text="算法容器"-->
<!--            />-->
            <span class="el-form-item__label" style="font-size: 14px;">算法镜像选择：</span>
            <el-select
                v-model="selectImageName"
                placeholder="Select image"
                size="default"
                @click.native="getDockerImages('pji_nav')"
                style="width: 180px; "
            >
              <el-option
                  v-for="item in imageNames"
                  :key="item"
                  :label="item"
                  :value="item"
              />
            </el-select>
            <el-button type="primary"  @click="algorithmDialogVisible = true" style="margin-left: 10px;">算法镜像导入</el-button>
            <el-dialog
                v-model="algorithmDialogVisible"
                title="请输入算法版本"
                width="300"
                :before-close="handleClose"
                :close-on-click-modal="false"
            >
              <template #footer>
                <div class="dialog-footer">
                  <el-form :model="algorithmForm" label-width="auto">
                    <el-form-item style="margin-bottom: 10px" label="算法版本：" required>
                      <el-input v-model="algorithmForm.tag"/>
                    </el-form-item>
                  </el-form>
                  <!--            -->
                  <!--            <el-button @click="algorithmDialogVisible = false">取消</el-button>-->
                  <el-button type="primary" @click="algorithmImport" :disabled="algorithmForm.tag == ''">选择镜像文件</el-button>
                </div>
              </template>
            </el-dialog>
<!--            <el-button style="margin-left: 10px;"  type="primary" @click="getDockerImages('pji_nav')">算法镜像选择</el-button>-->


            <!--        <el-switch-->
            <!--            v-model="algorithmContainerState"-->
            <!--            class="ml-2"-->
            <!--            inline-prompt-->
            <!--            style="margin-left: 100px;&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
            <!--            active-text="算法容器已开启"-->
            <!--            inactive-text="算法容器已关闭"-->
            <!--        />-->
            <!--        <el-switch-->
            <!--            v-model="gazeboState"-->
            <!--            class="ml-2"-->
            <!--            inline-prompt-->
            <!--            style="margin-left: 100px; &#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
            <!--            active-text="Gazebo 已开启"-->
            <!--            inactive-text="Gazebo 已关闭"-->
            <!--            @click="gazebo"-->
            <!--        />-->
            <!--        <el-switch-->
            <!--            v-model="rvizState"-->
            <!--            class="ml-2"-->
            <!--            inline-prompt-->
            <!--            style="margin-left: 100px;&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #ff4949"-->
            <!--            active-text="Rviz 已开启"-->
            <!--            inactive-text="Rviz 已关闭"-->
            <!--            @click="rviz"-->
            <!--        />-->
            <el-button style="margin-left: 10px;" type="primary" @click="goToTestRecord">仿真测试记录</el-button>
          </div>
        </div>


        <el-dialog
            v-model="worldDialogVisible"
            title="生成world"
            width="400"
            :before-close="handleWorldClose"
            :close-on-click-modal="false"
        >
          <el-steps style="max-width: 600px" :active="world_active" finish-status="success">
            <el-step title="数据准备"/>
            <el-step title="world生成"/>
            <el-step title="world上传"/>
          </el-steps>

          <template #footer>
            <el-button @click="nextToUpload" v-if="world_active != 2" :disabled="world_active !== 1">下一步</el-button>
            <el-upload
                v-if="world_active == 2"
                ref="upload"
                class="upload-demo"
                :action="uploadUrl"
                :limit="1"
                :before-upload="beforeUpload"
                :on-exceed="handleExceed"
                :auto-upload="true"
                :multiple="false"
                :on-success="uploadSuccess"
                :on-error="errorMessage"
            >
              <el-button @click="nextToUpload" >上传</el-button>
            </el-upload>
          </template>
        </el-dialog>
        <el-table stripe style="background-color: rgba(255,0,0,99%);width: 100%" border :data="tableData"
                  fixed ref="multipleTableRef" @selection-change="handleSelectionChange" :cell-style="{ textAlign: 'center'}" :header-cell-style="{ textAlign: 'center'}">
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="dataName" label="数据名称"/>
          <el-table-column prop="dataSize" label="数据容量" :formatter="dataSizeFormatter"/>
          <el-table-column prop="equipmentName" label="设备名称"/>
          <el-table-column prop="equipmentTypeName" label="设备类型"/>
          <el-table-column prop="triggerName" label="触发器名称"/>
          <el-table-column prop="triggerTypeName" label="触发器类型"/>
          <el-table-column prop="callbackTime" label="上报时间"/>
          <el-table-column prop="dataStateName" label="数据状态"/>
          <el-table-column width="300" fixed="right" label="操作">
            <template v-slot="scope">
              <el-button size="small" type="danger" @click="generateWorld(scope.row)">生成world</el-button>
              <el-button size="small" type="danger" @click="goToDetail">仿真测试</el-button>
              <!--            <el-button size="small" type="danger" @click="goToDetail">算法评价</el-button>-->
            </template>

          </el-table-column>
        </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, nextTick} from "vue";
import axios from "axios";
import {reactive} from 'vue'
import {ElTable, ElLoading, ElMessage} from "element-plus";
import {useRouter} from 'vue-router'; // 导入 Vue Router 的 useRouter 钩子
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const value
    = ref(true)
const update_active = ref(0)
const world_active = ref(0)
const router = useRouter();
const algorithmContainerState = ref(false)
const gazeboState = ref(false)
const rvizState = ref(false)
const multipleTableRef = ref<InstanceType<typeof ElTable>>

const algorithmDialogVisible = ref(false)
const mapDialogVisible = ref(false)
const updateDialogVisible = ref(false)
const worldDialogVisible = ref(false)

const upload = ref<UploadInstance>()
const uploadUrl = ref<string>()

const selectImageName = ref("")
const imageNames = ref([])

const handleClose = (done: () => void) => {
  done()
}
const handleWorldClose = (done: () => void) => {
  world_active.value = 0
  done()
}
const handleMapClose = (done: () => void) => {
  done()
}
const nextToUpload = () => {
  world_active.value = 2
}

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const beforeUpload = (file) => {
  const isWorld = file.name.endsWith(".world")
  if(!isWorld) {
    ElMessage.error("请上传world文件（以.world结尾）！")
    return false
  } else {
    return true
  }
}

//上传文件失败
const errorMessage = (response) => {
  return ElMessage({
    message: "文件上传失败",
    type: "error",
    offset: 60
  })
}

//上传文件成功
const uploadSuccess = (response, file, fileList) => {
  world_active.value = 3
  ElMessage({
    message: "文件上传成功，请关闭对话框",
    type: "success",
    offset: 60
  })
}

const getDockerImages = (filter_prefix) => {
  axios.get('http://localhost:2375/v1.43/images/json').then(function (response) {
    // console.log(response.data);
    var images = response.data
        .filter(d => d["RepoTags"].length > 0)
        .map(d => d["RepoTags"][0])
        .filter(d => d.startsWith(filter_prefix))
    // console.log("images", images)
    imageNames.value = images
  }).catch(function (error) {
    console.log(error);
  });
}
const multipleSelection = ref<[]>([])

// do not use same name with ref
const algorithmForm = reactive({
  sudoPassword: '',
  tag: '',
  // date1: '',
  // date2: '',
  // delivery: false,
  // type: [],
  // resource: '',
  // desc: '',
})
const mapRescanForm = reactive({
  name: ''
})
const currentTag = ref('')

const algorithmImport = async () => {
  algorithmDialogVisible.value = false
  try {
    const result = await window.electronAPI.openFileManager();
    console.log('用户选择的文件路径为:', result, '，版本为：', algorithmForm.tag);
    // 导入镜像
    window.electronAPI.dockerImport(result, algorithmForm.tag)
    // 监听脚本执行状态
    window.electronAPI.onDockerImportResponse( (event, result) => {
      if (result.success) { // 脚本执行成功
        console.log('Script execution completed successfully.')
        ElMessage.success("镜像导入发生成功！");
      } else { // 脚本执行过程中发生错误
        console.error('Script execution failed.');
        ElMessage.error("镜像导入发生错误！");
      }
    })
  } catch (error) {
    console.error('打开文件管理器时出错:', error);
  }
};

const goToDetail = () => {
  router.push('/about')
}

const goToMapUpdate = () => {
  router.push('/map_update')
}

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 字节
  if (cellValue) {
    const mb = (cellValue / (1024 * 1024)).toFixed(2); // 保留两位小数
    return `${mb}MB`;
  }
  return cellValue; // 如果cellValue为null或undefined，则返回原值或你想要的默认值
}

const isPropertySame= (array, propertyName) => {
  if (array.length <= 1) {
    return true; // 空数组或但个元素视为所有值相同
  }

  const firstValue = array[0][propertyName];

  for (let i = 1; i < array.length; i++) {
    if (array[i][propertyName] !== firstValue) {
      return false; // 发现不同的值
    }
  }

  return true; // 所有值都是相同的
}

const updateMap = async () => {
  // 检查选择的记录数量
  if (multipleSelection.value.length == 0) {
    ElMessage.error("请选择记录！")
    return
  }
  // 检查记录是否属于同一机器人
  const isEquipmentSame = isPropertySame(multipleSelection.value, "equipmentId")
  if (!isEquipmentSame) { // 属于多个设备
    ElMessage.error("所选择的记录属于多个设备，请进行检查！")
    return
  }
  // 检查记录的mapBuf是否一致
  const ids = multipleSelection.value.map(item => item["id"])
  console.log("ids:",ids)
  const status = checkMapbufConsistency(ids)
  if(!status) { // mapBuf不一致
    ElMessage.error("所选择的记录mapBuf不一致，请重新选择！")
    return
  }
  // 开启对话框
  updateDialogVisible.value = true
  await nextTick()

  // 根据id下载地图更新需要的数据（压缩包）
  const id = ids[0]
  const url = "http://127.0.0.1:8888/map/download/zipfile?id=" + id
  const fileName = "data-" + id + ".zip"
  const savePath = "/home/cicv/work/pji_desktop/tmp_download/map_zip"

  // 开启loading
  const loadingInstance = ElLoading.service({fullscreen: false, target: '.el-dialog'})
  const result = await window.electronAPI.downloadFile(url, fileName, savePath);
  if (!result.success) { // 下载失败
    console.error('File download failed:', result.error);
    ElMessage.error("地图更新数据拉取失败！");
  } else { // 下载成功
    console.log('File downloaded successfully:', result.filePath);
    // 关闭loading
    loadingInstance.close()
    // 更新步骤条状态
    update_active.value = 1
  }
}

const checkMapbufConsistency = async (ids) => {
 try {
   const response =  await axios.post('http://127.0.0.1:8888/map/check/mapbufconsistency', ids)
   console.log(response.data)
   return response.data.status
 } catch (error) {
   console.log("Error checking the mapBufs' onsistency:", error)
 }
}

const handleSelectionChange = (rows: []) => {
  multipleSelection.value = rows
  // 检查记录是否属于同一机器人
  const isEquipmentSame = isPropertySame(rows, "equipmentId")
  if (!isEquipmentSame) {
    ElMessage.error("所选择的记录属于多个设备，请进行检查！");
  } else {
    // console.log(JSON.stringify(multipleSelection.value))
  }
}

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 generateWorld = async (row) => {
  const id = row.id
  const equipmentNo = row.equipmentNo
  const sceneNo = id
  const url = "http://127.0.0.1:8888/map/download/mapbagfile?id=" + id
  const fileName = "map-" + id + ".bag"
  const savePath = "/home/cicv/work/pji_desktop/tmp_download/map_bag"
  console.log("id", id)

  // 拼接world文件上传url
  uploadUrl.value = "http://127.0.0.1:8888/world/upload/worldfile?equipmentNo=" + equipmentNo + "&sceneNo=" + sceneNo
  console.log("uploadUrl.value=" + uploadUrl.value)

  console.log("Starting download: map.bag...")
  // 开启对话框
  worldDialogVisible.value = true

  // 下载map.bag
  const result = await window.electronAPI.downloadFile(url, fileName, savePath);
  if (!result.success) { // 下载失败
    console.error('File download failed:', result.error);
    ElMessage.error("地图bag数据拉取失败！");
  } else { // 下载成功
    console.log('File downloaded successfully:', result.filePath);
    // 更新步骤条状态
    world_active.value = 1
    console.log("Starting world generation...")
    // 执行脚本
    window.electronAPI.generateWorld(result.filePath);
    // 开启loading
    const loadingInstance = ElLoading.service({fullscreen: false, target: '.el-dialog'})
    // 监听脚本执行状态
    window.electronAPI.onGenerateWorldResponse( (event, result) => {
      if (result.success) { // 脚本执行成功
        console.log('Script execution completed successfully.')
        // 关闭loading
        loadingInstance.close()
        // 使用 Electron 进行文件删除操作
        window.electronAPI.deleteFile(fileName, savePath)
        // 监听删除文件的响应
        window.electronAPI.onDeleteFileResponse((event, response) => {
          if (response.success) { // 删除成功
            console.log("File deleted successfully.")
          } else { // 删除失败
            console.log(`Error: ${response.message}`)
          }
        })
      } else { // 脚本执行过程中发生错误
        console.error('Script execution failed.');
        ElMessage.error("world生成发生错误！");
      }
    })
  }
}

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

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

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

function page() {
  axios.get('http://36.110.106.156:11121/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>