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 @click="planPath(item)">
        <p class="line1">{{ getLine(item, 1) }}</p>
        <p class="line2">{{ getLine(item, 2) }}</p>
        <div class="path" v-if="showPath(item)">
          <p class="path_number">{{ getNumber(item) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTaskStore } from '@/store'
const taskStore = useTaskStore()
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 showPath = item => {
  const testArr = taskStore.pathData.filter(it => it.number == item)
  if (testArr?.length > 0) {
    return true
  }
  return false
}

const getNumber = item => {
  const testArr = taskStore.pathData.filter(it => it.number == item)
  if (testArr?.length > 0) {
    return testArr[0].orderNumber
  }
  return ''
}

const planPath = item => {
  // 将没有结果的格子排除掉
  if (getLine(item, 1) && getLine(item, 2)) {
    // 转换item =》 coord
    // 数组自记录order
    const coord = transItemToCoord(item)
    // 校验下当前数组中是否有该coord 有则删除，并且修改其余的order
    const testArr = taskStore.pathData.filter(item => item.coord == coord)
    if (testArr?.length > 0) {
      // 有
      const leftArr = taskStore.pathData.filter(item => item.coord != coord)
      const del = testArr[0]
      const delOrder = del.orderNumber
      leftArr.map(item => {
        // 将大于要删除order的项 order都减1
        if (item.orderNumber > delOrder) {
          item.orderNumber = item.orderNumber - 1
        }
      })
      taskStore.updatePathData(leftArr)
    } else {
      // 没有
      let obj = {}
      obj.coord = coord
      obj.number = item
      obj.orderNumber = taskStore.pathData.length + 1
      const arr = [...taskStore.pathData]
      arr.push(obj)
      taskStore.updatePathData(arr)
    }
  }
}

const transItemToCoord = item => {
  const mainLine = Math.floor(item / 14)
  let minorLine = 0
  if (item % 14 == 0) {
    minorLine = 13
  } else {
    minorLine = (item % 14) - 1
  }
  return `${mainLine}-${minorLine}`
}

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;
      position: relative;
      .path {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(76, 90, 224, 0.9);
        .path_number {
          font-size: 22px;
          color: #fff;
        }
      }
    }
    .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>