ocr-web/src/views/worksheet/components/pictureCard.vue

<script setup lang="ts">
import { ref } from 'vue'
import bgLoading from '@/assets/images/bg-loading.png'

const props = defineProps({
  imgurl: String,
  isFullScreen: Boolean,
  imgbigshow: Boolean,
  taskDetailInfo: Object,
  batch: Boolean,

})
const imageRef = ref<ComponentElRef | null>()
const overTask = ref<any>(null)
const overTasktwo = ref<any>(null)
const bgLoadingImg = ref(bgLoading)

function overTaskHandle() {
  const item = props.taskDetailInfo
  if (item?.userapprove?.statshis === 2 || item?.userapprove?.statshis == 3) {
    overTask.value = null
    return
  }

  if (validate([item]) == null && props.batch === false)
    overTask.value = item
}
// states:1未提交，2待审批，3通过，4不通过
function validate(items: any[]) {
  if (items.length === 0)
    return '至少选中一个任务'

  // const useInfo = userStore.getUserInfo
  // const username = useInfo.loginname

  // for (const item of items) {
  //   const { iztrueorfalse, states, assignee } = item
  //   if (iztrueorfalse === null)
  //     return '未判别真假'

  //   else if (states !== 2)
  //     return '审批状态不合法'

  //   else if (assignee !== username)
  //     return '审批人不一致'
  // }

  return null
}
function leaveTaskHandler() {
  overTask.value = null
  overTasktwo.value = null
}
function previewHandler(event: MouseEvent) {
  event.stopImmediatePropagation()
  event.stopPropagation()

  if (imageRef.value && (imageRef.value as any).src)
    (imageRef.value as any).mergedOnClick()
}
</script>

<template>
  <div
    class="left"
    :style="
      isFullScreen
        ? imgbigshow
          ? {
            position: 'relative',
            flex: 2,
            // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
            background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
          }
          : {
            height: '92vh',
            flex: 2,
            // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
            background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
          }
        : {
          // 'background-image': `url(${taskDetailInfo?.ocrPicture?.imgurl})`,
          background: `url(${taskDetailInfo?.ocrPicture?.imgurl ? taskDetailInfo?.ocrPicture?.imgurl : bgLoadingImg})`,
        }
    "
    @mouseover="overTaskHandle"
    @mouseleave="leaveTaskHandler"
    @click="previewHandler"
  >
    <div v-show="overTask" class="action">
      <SvgIcon
        style="cursor: pointer"
        name="t1"
        size="74.95"
        @click.stop="approvalHandler"
      />
      <SvgIcon
        style="cursor: pointer; margin-left: 32px"
        name="t2"
        size="74.95"
        @click.stop="singleRejectHandler"
      />
      <SvgIcon
        style="cursor: pointer; margin-left: 32px"
        name="t9"
        size="74.95"
        @click.stop="addSuspicious"
      />
    </div>
    <div class="check">
      <!-- <n-checkbox
        v-show="batch && taskDetailInfo?.userapprove?.statshis === 1"
        :checked="taskDetailInfo?.checked"
        @click.stop
        @update:checked="onCheckChange($event, taskDetailInfo)"
      /> -->
      <n-checkbox
        v-show="batch && taskDetailInfo?.userapprove?.statshis === 1"
        :checked="taskDetailInfo?.checked"
        @click.stop
      />
    </div>

    <div class="status">
      <img
        v-show="taskDetailInfo?.userapprove?.statshis === 2"
        class="img-status"
        src="@/assets/images/task/pass.png"
        alt=""
      >
      <img
        v-show="taskDetailInfo?.userapprove?.statshis === 3"
        class="img-status"
        src="@/assets/images/task/not_pass.png"
        alt=""
      >
    </div>
    <div class="mark">
      <SvgIcon
        v-show="taskDetailInfo?.iztrueorfalse === 0"
        size="128"
        name="jia"
      />
    </div>
    <div class="mark">
      <SvgIcon
        v-show="taskDetailInfo?.iztrueorfalse === 1"
        size="128"
        name="zhen"
      />
    </div>
    <div class="big-mark" />
    <div class="preview" @click="previewHandler">
      <SvgIcon size="16" name="zoom-out" />
    </div>
    <div class="info img-info">
      <n-grid x-gap="12" y-gap="10" :cols="12">
        <n-gi span="4" class="gi1">
          <span>
            <img
              class="icon-status"
              src="@/assets/images/task/status.png"
              alt=""
            >
          </span>
        </n-gi>
        <n-gi span="8" class="gi2">
          <span class="value">{{
            TASK_STATUS_OBJ[taskDetailInfo?.userapprove?.statshis]
          }}</span>
          <span class="label">审批状态</span>
        </n-gi>
        <n-gi span="4" class="gi1">
          <span>
            <img
              class="icon-status"
              src="@/assets/images/task/similarity.png"
              alt=""
            >
          </span>
        </n-gi>
        <n-gi span="8" class="gi2">
          <span class="value num">{{ totalCount }}<span class="unit">张</span>
          </span>
          <span class="label">相似匹配</span>
        </n-gi>
      </n-grid>
    </div>
    <div class="time">
      <div class="time-item">
        <SvgIcon class="svg-time" color="#FFF" size="16" name="camera-time" />

        <span>{{ taskDetailInfo?.ocrPicture?.photoDateTimestamp ?? "-" }}</span>
      </div>
      <div class="time-item time-item2">
        <SvgIcon class="svg-time" color="#FFF" size="16" name="submit-time" />

        <span>{{
          taskDetailInfo?.ocrPicture?.submitDateTimestamp
            ? formatToDateHMS(
              Number(taskDetailInfo.ocrPicture.submitDateTimestamp),
            )
            : "-"
        }}</span>
      </div>
    </div>
    <div style="display: none">
      <n-image
        ref="imageRef"
        :img-props="{ onClick: hideDownload }"
        :src="taskDetailInfo?.ocrPicture?.imgurl"
      />
    </div>
    <div class="leftback" />
  </div>
</template>

<style>
</style>