nuclear-detection-frontend/src/components/PathPlan.vue

<template>
  <div class="excel_container">
    <div class="common_grid" v-for="item in 14 * 14" :key="item">
      <div v-if="isTableHeader(item)" class="table_header_box">
        {{ getHeaderText(item) }}
      </div>
      <div class="box" v-else>
        <p class="line1">{{ getLine(item, 1) }}</p>
        <p class="line2">{{ getLine(item, 2) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  excelData: {
    type: Array,
  },
})

const getLine = (index, position) => {
  const arr = props.excelData.filter(item => item.num == index)
  if (arr?.length > 0) {
    const obj = arr[0]
    if (obj.secondSign && obj.firstSign) {
      if (position == 1) {
        // 截取后4位
        return obj.firstSign.substr(-4)
      } else {
        // 截取后4位
        return obj.secondSign.substr(-4)
      }
    }
  }
  return ''
}

const isTableHeader = index => {
  return index <= 14 || index % 14 == 1
}
const getHeaderText = index => {
  if (index <= 14 && index > 1) {
    return index - 1
  }
  const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N']
  if (index % 14 == 1) {
    return arr[parseInt(index / 14) - 1]
  }
}
</script>

<style lang="scss" scoped>
.excel_container {
  width: 1000px;
  height: 800px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  border: 1px solid #ebebeb;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden;
  .common_grid {
    border: 1px solid #ebebeb;
    margin-left: -1px;
    margin-top: -1px;
    .box {
      width: 100%;
      height: 100%;
      padding: 7px;
      background: #ffffff;
      font-size: 18px;
      font-weight: 500;
      color: #b3b3b3;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .success {
      cursor: pointer;
      background: #e1fff1;
      color: #01ff82;
    }
    .fail {
      cursor: pointer;
      background: #fee2e2;
      color: #fe0c0c;
    }
    .process {
      cursor: pointer;
      background: #4350dc;
      color: #ffffff;
    }
    .cur {
      cursor: pointer;
    }
    .table_header_box {
      background: #f1f1f1;
      box-sizing: border-box;
      font-size: 26px;
      font-weight: bold;
      color: #3d3d3d;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
}
</style>