pji-desktop/src/views/UpdateStatView.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;">
        <el-breadcrumb separator="/" style="margin-bottom: 10px;">
          <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
          <el-breadcrumb-item>地图更新统计</el-breadcrumb-item>
        </el-breadcrumb>
        <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="设备类型">
              <!--              <el-input v-model="queryLine.equipmentType" placeholder="请输入设备类型" clearable/>-->
              <el-select
                  v-model="queryLine.equipmentType"
                  placeholder="请选择"
                  size="default"
                  style="width: 180px; "
                  clearable
              >
                <el-option
                    v-for="item in equipmentTypes"
                    :key="item"
                    :label="item"
                    :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item >
              <el-button type="danger" @click="queryRecordByCondition">查询</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-image-viewer @close="closeImgViewer" :url-list="imageUrl" v-if="showImageViewer"></el-image-viewer>
        <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="device_name" label="设备名称"/>
          <el-table-column prop="device_type" label="设备类型"/>
          <el-table-column prop="map_id" label="地图id"/>
          <el-table-column prop="update_time" label="地图更新时间" :formatter="formatDate"/>
          <el-table-column prop="update_rate" label="地图更新率"/>
          <el-table-column prop="cumulative_update_rate" label="累积地图更新率"/>
          <el-table-column prop="update_flag" label="地图更新状态" :formatter="formatStatus"/>
          <el-table-column prop="pre_pgm_url" label="原始pgm" width="400px">
            <template v-slot="scope">
              <img :src="'http://oss-cn-beijing-gqzl-d01-a.ops.gqzl-cloud.com/pji-bucket1/' + scope.row.pre_png_url" @click="viewImg" alt="" style="width:300px; height: 100%; cursor: pointer">
            </template>

          </el-table-column>
          <el-table-column prop="current_pgm_url" label="当前pgm" width="400px">
            <template v-slot="scope">
              <img :src="'http://oss-cn-beijing-gqzl-d01-a.ops.gqzl-cloud.com/pji-bucket1/' + scope.row.current_png_url" @click="viewImg" alt="" style="width:300px; height: 100%; cursor: pointer">
            </template>
          </el-table-column>

          <el-table-column width="200" fixed="right" label="操作">
            <template v-slot="scope">
              <el-button :id="'button'+scope.row.id" size="small" type="danger" @click="uploadMap(scope.row)" :disabled="scope.row.update_flag!= 0">上传地图</el-button>
            </template>

          </el-table-column>
        </el-table>

        <p></p> <!--空行-->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5,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 {ElLoading, ElMessage, ElTable} from "element-plus";
import moment from "moment/moment";


const multipleTableRef = ref<InstanceType<typeof ElTable>>
const showImageViewer = ref(false);
const imageUrl = ref([])
const resetTableData = ref([]);

const queryLine = reactive({
  dataName: '',
  equipmentName: '',
  equipmentTypeName: '',
  equipmentType: '',
})
const equipmentTypes =ref(["引导服务机器人"])

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

const uploadMap = async (row) => {
  let id = row.id
  console.log("id", id)
  try {
    // 开启loading
    let loadingInstance = ElLoading.service({fullscreen: false, target:'.el-table', text: '地图上传中...'})
    const response = await axios.get('/local/map/update/pji/upload?id=' + id)
    console.log(response.data)
    if (!response.data.status) {
      loadingInstance.close()
      if (response.data.code != "") {
        ElMessage.error(response.data.message)
      }
      return
    }
    loadingInstance.close()
    ElMessage.success(response.data.message)
    await page()
  } catch (error) {
    console.log("Error uploading the pji map:", error)
  }
}

// 根据条件筛选结果
const queryRecordByCondition = async () => {
  let response = await axios.post('/local/map/query/update/record?page=' + currentPage.value + '&pageSize=' + pageSize.value, {
    "device_name": queryLine.equipmentName,
    "device_type": queryLine.equipmentType
  })

  if (!response.data.status){ // 不存在
    ElMessage.error("仿真测试记录查询失败！");
    return
  }
  // 解析结果
  tableData.value = JSON.parse(response.data.data)
  total.value = response.data.total
}

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

const formatDate =  (row) => {
  return moment(+row.update_time).format("YYYY-MM-DD HH:mm:ss")
}

const formatStatus =  (row) => {
  if (row.update_flag == 0) return "未上传";
  if (row.update_flag == 1) return "已上传，未部署";
  if (row.update_flag == 2) return "已部署";
  return
}

const viewImg = (event) => {
  if (event.target.nodeName == "IMG") {
    let src = event.target.currentSrc;
    imageUrl.value = [src]
    showImageViewer.value = true
  }
}

const closeImgViewer = () => {
  showImageViewer.value = false;
}

async function page() {
  // axios.get('http://1.202.169.139:8081/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);
  // });

  // 查询地图更新记录
  let response = await axios.post('/local/map/query/update/record?page=' + currentPage.value + '&pageSize=' + pageSize.value)

  if (!response.data.status){ // 不存在
    ElMessage.error("地图更新记录查询失败！");
    return
  }
  // 解析结果
  tableData.value = JSON.parse(response.data.data)
  console.log("tableData.value", tableData.value)
  resetTableData.value = tableData.value // for reset purpose
  total.value = response.data.total
}

const currentPage = ref(1)
const pageSize = ref(5)
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>