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

<script setup lang="ts">
import { format } from 'date-fns'
import { pickBy } from 'lodash-es'
import { computed, defineProps } from 'vue'
import { TASK_STATUS_OBJ } from '@/enums/index'
import { fieldMap } from '@/config/workorder'

const props = defineProps({
  taskDetailInfo: {
    type: Object,
    default: () => ({}),
  },
})

const propertys = computed(() => {
  const { ocrPicture } = props.taskDetailInfo
  const v = pickBy(ocrPicture, (value, key: string) => {
    return key.startsWith('field') && value !== null
  })
  return v
})
</script>

<template>
  <div class="right">
    <n-scrollbar style="max-height: 100%">
      <n-ellipsis style="max-width: 350px">
        任务ID：{{ taskDetailInfo.taskname }}
      </n-ellipsis>
      <div class="tags">
        <div v-if="taskDetailInfo.historyStates == 1" class="tag tag-submiting">
          待审批
        </div>
        <div v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3 || taskDetailInfo.historyStates == 3" class="tag tag-submited">
          已审批
        </div>
        <div v-if="taskDetailInfo.historyStates == 2" class="tag tag-passed">
          {{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}
        </div>
        <div v-else-if="taskDetailInfo.historyStates == 3" class="tag tag-not-passed">
          {{ TASK_STATUS_OBJ[taskDetailInfo.historyStates] }}
        </div>
      </div>
      <n-divider class="divider-line" />
      <div class="property">
        <!-- j -->
        <span class="property-name top" style="color: #999999">图片大小</span>
        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSize && (taskDetailInfo.pictureInfo.imgSize / 1000).toFixed(2) }}KB</span>
      </div>
      <div class="property">
        <span class="property-name top" style="color: #999999">图片格式</span>
        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgFormat }}</span>
      </div>
      <div class="property">
        <span class="property-name top" style="color: #999999">图片尺寸</span>
        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgMeasure }}</span>
      </div>
      <div class="property">
        <span class="property-name top" style="color: #999999">色彩空间</span>
        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSpace }}</span>
      </div>
      <div class="property">
        <span class="property-name top" style="color: #999999">提报人</span>
        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.upname || "-" }}</span>
      </div>
      <div class="property">
        <span class="property-name top" style="color: #999999">创建时间</span>
        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.createTime }}</span>
      </div>
      <div class="property">
        <span class="property-name top" style="color: #999999">提报时间</span>
        <span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.submitDateTimestamp && format(taskDetailInfo.submitDateTimestamp, 'yyyy-MM-dd HH:mm:ss') || '-' }}</span>
      </div>
      <div v-for="(value, key) in propertys" :key="key" class="property">
        <span class="property-name">{{ fieldMap[key] }}</span>
        <span class="property-content">{{ value }}</span>
      </div>
    </n-scrollbar>
  </div>
</template>

<style lang="less" scoped>
.right {
  // flex: 1;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-between;
  // // background: #fafafa;

  // border-radius: 8px;
  // margin-left: 20px;
  // padding: 24px;
  // width: 24vw;
  flex: 0.5;
  background: #f9f9f9;
  border-radius: 8px;
  margin-left: 20px;
  padding: 24px;
  // background: lime;

  .task-name {
    display: inline-block;
    width: 100%;
    font-size: 18px;
    color: #0d0b22;
    line-height: 25px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    max-width: 445px;
    /* 设置文本溢出时的样式为省略号 */
    text-overflow: ellipsis;
    /* 隐藏超出容器的文本 */
    overflow: hidden;
    /* 确保文本不换行 */
    white-space: nowrap;
  }

  // ::v-deep(.n-divider:not(.n-divider--vertical)) {

  ::v-deep(.divider-line .n-divider__line) {
    background-color: #e8e8e8;
  }

  .tags {
    display: flex;
    margin-top: 8px;
  }

  .tag {
    border: 1px solid #d8d8d8;
    box-sizing: border-box;
    border-radius: 8px;
    color: #666666;
    margin-right: 12px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 16px;
  }

  .tag-submited {
    color: #507AFD;
    border: 1px solid #507AFD;
  }

  .tag-submiting {
    color: #FFB800;
    border: 1px solid #FFB800;
  }

  .tag-passed {
    color: #02C984;
    border: 1px solid #02C984;
  }

  .tag-not-passed {
    color: #ff7575;
    border: 1px solid #ff7575;
  }

  .tag-approved {
    color: #507afd;
    border: 1px solid #507afd;
  }

  .property {
    display: flex;
    align-items: center;
    margin-top: 12px;
    line-height: 20px;
  }

  .property-name {
    width: 56px;
    text-align: right;
    color: #999999;
    position: relative;
    margin-right: 32px;
  }

  .top {}

  .property-content {
    flex: 1;
    color: #333333;
  }
}

::v-deep(.n-divider:not(.n-divider--vertical)) {
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>