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

<template>
  <div
    class="image_container"
    v-if="cameraStore?.cameraState || imageStore.showImage"
  >
    <img
      v-if="
        (cameraStore?.cameraState && !imageStore.showImage) ||
        !imageStore?.coreInfo?.resultImg ||
        imageStore?.coreInfo?.result == 0
      "
      :src="photoUrl"
      alt="图像"
      class="img"
    />
    <img v-else :src="imageStore?.coreInfo?.resultImg" alt="图像" class="img" />
    <div class="top_info">
      <p class="title">{{ imageStore.nuclearCoreName }}</p>
      <div class="title_left">
        <p class="sign">
          {{ handleSerialNumber(imageStore?.coreInfo?.serialNumber) }}
        </p>
        <div class="tag_wrap">
          <p>{{ imageStore?.coreInfo?.firstSign?.substr(-4) }}</p>
          <p>{{ imageStore?.coreInfo?.secondSign?.substr(-4) }}</p>
        </div>
      </div>
    </div>
    <div :class="getIdentifyClass()">
      <div class="left_wrap">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          v-if="imageStore?.coreInfo?.result != 1"
          version="1.1"
          width="30"
          height="29.999998092651367"
          viewBox="0 0 30 29.999998092651367"
        >
          <g>
            <path
              d="M15,0C6.74916,0,0,6.74916,0,15C0,23.2508,6.74916,30,15,30C23.2508,30,30,23.2508,30,15C30,6.74916,23.2508,0,15,0ZM22.1672,20.1672C22.6689,20.6689,22.6689,21.5853,22.1672,22.0836C21.9164,22.3344,21.5853,22.5017,21.1672,22.5017C20.8328,22.5017,20.4181,22.3344,20.1672,22.0836L15.3344,17.2508L10.5017,22.0836C10,22.5853,9.08361,22.5853,8.58528,22.0836C8.08696,21.5819,8.08361,20.6656,8.58528,20.1672L13.4181,15.3344L8.58528,10.5017C8.33445,10.2508,8.16722,9.91973,8.16722,9.50167C8.16722,9.16722,8.33445,8.75251,8.58528,8.50167C9.08696,8,10.0033,8,10.5017,8.50167L15.3344,13.3344L20.1672,8.50167C20.4181,8.25084,20.7492,8.08361,21.1672,8.08361C21.5017,8.08361,21.9164,8.25084,22.1672,8.50167C22.4181,8.75251,22.5853,9.08361,22.5853,9.50167C22.5853,9.83612,22.4181,10.2508,22.1672,10.5017L17.3344,15.3344L22.1672,20.1672Z"
              fill="#FFFFFF"
              fill-opacity="1"
            />
          </g>
        </svg>
        <svg
          v-else
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          fill="none"
          version="1.1"
          width="30"
          height="30.000120162963867"
          viewBox="0 0 30 30.000120162963867"
        >
          <g>
            <path
              d="M15,30.0001C6.71625,30.0001,0,23.2838,0,15.0001C0,6.71628,6.71625,0,15,0C23.2838,0,30,6.71628,30,15.0001C30,23.2838,23.2838,30.0001,15,30.0001ZM11.655,20.8901C12.2652,21.5005,13.2548,21.5005,13.865,20.8901L23.3375,11.4175C23.9478,10.8073,23.9478,9.81781,23.3375,9.20754C22.7272,8.59726,21.7378,8.59726,21.1275,9.20754L12.6925,17.5076L8.9175,13.7326C8.30736,13.1215,7.31725,13.1211,6.70665,13.7317C6.09604,14.3423,6.09642,15.3324,6.7075,15.9426L11.655,20.8901Z"
              fill="#FFFFFF"
              fill-opacity="1"
            />
          </g>
        </svg>
        <!-- <p>A-8</p> -->
      </div>
      <div class="tag_wrap">
        <p>
          {{
            imageStore?.coreInfo?.resultSerial?.split('-')[0]?.substr(-4)
              ? imageStore?.coreInfo?.resultSerial?.split('-')[0]?.substr(-4)
              : '空结果'
          }}
        </p>
        <p>
          {{ imageStore?.coreInfo?.resultSerial?.split('-')[1]?.substr(-4) }}
        </p>
      </div>
    </div>
  </div>
  <div class="no_image" v-else>
    <!-- 根据相机是否开启切换不同的icon -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="none"
      version="1.1"
      width="85.90400695800781"
      height="76.7254638671875"
      viewBox="0 0 85.90400695800781 76.7254638671875"
    >
      <g>
        <path
          d="M6.91322,0L78.9908,0C82.8088,0,85.904,3.2252,85.904,7.20367L85.904,69.6923C85.8151,73.6041,82.7458,76.7266,78.9908,76.7255L6.91322,76.7255C3.15816,76.7266,0.0888908,73.6041,0,69.6923L0,7.20367C0,3.22519,3.09515,0,6.91322,0ZM63.5689,38.8742C64.784,37.9363,66.4446,37.9363,67.6596,38.8742L78.9908,43.7761L78.9908,7.20367L6.91322,7.20367L6.91322,38.107L22.3351,21.7815C23.6974,20.2285,26.0451,20.2285,27.4074,21.7815L48.6381,49.3601L63.5689,38.8742ZM51.0912,24.6798C51.0912,19.1005,55.4317,14.5776,60.7861,14.5776C66.1404,14.5777,70.4809,19.1005,70.481,24.6798C70.481,30.2591,66.1404,34.7821,60.7861,34.7821C55.4317,34.7821,51.0912,30.2591,51.0912,24.6798ZM58.0045,24.4667C58.0045,26.0675,59.2498,27.3652,60.7861,27.3652L60.7861,27.5357C62.3886,27.5387,63.6621,26.1337,63.5678,24.4667C63.5678,22.8658,62.3224,21.5681,60.7862,21.5681C59.2499,21.5681,58.0045,22.8658,58.0045,24.4667Z"
          fill-rule="evenodd"
          fill="#5E5C5C"
          fill-opacity="1"
        />
      </g>
    </svg>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { transNumberToEn } from '@/utils/common'
import { useTaskStore, useImageStore, useCameraStore } from '@/store'
const taskStore = useTaskStore()
const imageStore = useImageStore()
const cameraStore = useCameraStore()
const photoUrl = ref('')
setInterval(
  () => {
    photoUrl.value = `${
      import.meta.env.VITE_HOST_URL
    }app/core/realtime_photo/now.png?${Math.random()}`
  },
  500,
  500,
)

const handleSerialNumber = serialNumber => {
  if (serialNumber) {
    const arr = serialNumber.split('-')
    if (arr && arr.length == 2) {
      return `${transNumberToEn(arr[0])} - ${arr[1]}`
    }
  }
  return ''
}

const getIdentifyClass = () => {
  const res = imageStore?.coreInfo?.result
  if (res == 1) {
    return 'identify_info success'
  } else {
    return 'identify_info'
  }
}
</script>

<style lang="scss" scoped>
.no_image {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #ebebeb;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image_container {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #ddd;
  .top_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 20px;
    top: 20px;
    right: 20px;
    box-sizing: border-box;
    padding: 10px 34px;
    border-radius: 28px;
    background: rgba(76, 90, 224, 0.2);
    .title {
      font-size: 20px;
      font-weight: normal;
      letter-spacing: 0.03em;
      color: #ffffff;
      background: none;
    }
    .title_left {
      display: flex;
      align-items: center;
      .sign {
        font-size: 26px;
        font-weight: 900;
        letter-spacing: 0.04em;
        margin-right: 22px;
        color: #ffffff;
      }
      .tag_wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: 0.03em;
        color: #ffffff;
      }
    }
  }
  .identify_info {
    position: absolute;
    right: 28px;
    bottom: 22px;
    border-radius: 6px;
    background: #fe0a0a;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #ffffff;
    padding: 13px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .left_wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 26px;
      font-weight: 900;
      letter-spacing: 0.04em;
      color: #ffffff;
    }
    .tag_wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 26px;
      font-weight: 900;
      letter-spacing: 0.04em;
      color: #ffffff;
      margin-left: 25px;
      justify-content: space-between;
    }
  }
  .success {
    background: #01ff82;
  }
  .img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
</style>