nuclear-detection-frontend/src/components/Excel.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="getClass(item)" v-else @click="showCoreDetail(item)">
        <p class="line1">{{ getLine(item, 1) }}</p>
        <p class="line2">{{ getLine(item, 2) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useImageStore, useTaskStore, useCheckStore } from '@/store'

const imageStore = useImageStore()
const taskStore = useTaskStore()
const checkStore = useCheckStore()
const props = defineProps({
  excelData: {
    type: Array,
    default: [],
  },
})

const showCoreDetail = index => {
  const arr = props.excelData.filter(item => item.num == index)
  if (checkStore.manualCheck) {
    if (arr?.length > 0) {
      const item = arr[0]
      checkStore.updateCheckNumber(item.serialNumber)
    }
  }
  // 只有正确或者错误的才可以点击出详情
  if (arr?.length > 0) {
    const item = arr[0]
    if ([1, 2].includes(item.result)) {
      // 将item存入store中
      imageStore.updateShowImage(true)
      imageStore.updateCoreInfo(item)
    }
  }
}

const getClass = index => {
  // 需要用item 获取真正实体
  const arr = props.excelData.filter(item => item.num == index)
  if (arr?.length > 0) {
    const item = arr[0]
    if (item.result == 1) {
      // 检测正确
      return 'box success'
    } else if (item.result == 2) {
      // 检测错误
      return 'box fail'
    } else if (
      checkStore.manualCheck &&
      checkStore.checkNumber == item.serialNumber
    ) {
      return 'box process'
    } else if (
      taskStore.currentCoord == item.serialNumber &&
      taskStore.taskStatus == 1
    ) {
      // 正在检测
      return 'box process'
    } else {
      // 待检测
      if (canClick(index)) {
        return 'box cur'
      } else {
        return 'box'
      }
    }
  }
}
const canClick = item => {
  if (getLine(item, 1) && getLine(item, 2)) {
    return true
  }
  return false
}

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