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="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.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"
          >
            <el-steps style="max-width: 600px" :active="active" finish-status="success">
              <el-step title="数据格式检查"/>
              <el-step title="地图生成"/>
            </el-steps>

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

          <el-dialog
              v-model="mapDialogVisible"
              title="地图续扫提醒"
              width="400"
              :before-close="handleClose"
          >
            <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="算法容器"
            />
            <el-button type="primary"  @click="algorithmDialogVisible = true" style="margin-left: 10px;">算法镜像导入</el-button>
            <el-dialog
                v-model="algorithmDialogVisible"
                title="请输入算法版本"
                width="300"
                :before-close="handleClose"
            >
              <template #footer>
                <div class="dialog-footer">
                  <el-form :model="algorithmForm" label-width="auto">
                    <el-form-item style="margin-bottom: 10px" label="sudo密码：">
                      <el-input v-model="algorithmForm.sudoPassword"/>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 10px" label="算法版本：">
                      <el-input v-model="algorithmForm.tag"/>
                    </el-form-item>
                  </el-form>
                  <!--            -->
                  <!--            <el-button @click="algorithmDialogVisible = false">取消</el-button>-->
                  <el-button type="primary" @click="algorithmImport">选择镜像文件</el-button>
                </div>
              </template>
            </el-dialog>
            <el-button style="margin-left: 10px;"  type="primary" @click="algorithmImport">算法镜像选择</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-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="操作">
            <el-button size="small" type="danger" @click="goToDetail">生成world</el-button>
            <el-button size="small" type="danger" @click="goToDetail">仿真测试</el-button>
            <!--            <el-button size="small" type="danger" @click="goToDetail">算法评价</el-button>-->
          </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} from "vue";
import axios from "axios";
import {reactive} from 'vue'
import {ElTable} from "element-plus";
import { ElMessage } from "element-plus";
import {useRouter} from 'vue-router'; // 导入 Vue Router 的 useRouter 钩子


const value
    = ref(true)
const 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 handleClose = (done: () => void) => {
  done()
}

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(algorithmForm.sudoPassword, result, algorithmForm.tag)
  } 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 = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error("请选择记录！");
    return;
  }
  const isEquipmentSame = isPropertySame(multipleSelection.value, "equipmentId")
  if (!isEquipmentSame) {
    ElMessage.error("所选择的记录属于多个设备，请进行检查！");
    return;
  } else {
    updateDialogVisible.value = true;
    console.log(JSON.stringify(multipleSelection.value))
  }
}


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