ts/src/views/BaseMB/components/HisImages/index.vue

<script lang="ts" setup>
// import 'viewerjs/dist/viewer.css'
// import { api as viewerApi } from 'v-viewer'
import { ImageOutline } from '@vicons/ionicons5'
import { useHisImage } from './hooks/hisImage'
import Panel from '@/components/Panel/index.vue'

const { sheshiData, showOrHideHisImage, getHisImages } = useHisImage()

// onMounted(() => {
// })

const timeRange = ref<[string, string] | undefined>()

const rangeShortcuts = {
  近一天: () => {
    const cur = new Date().getTime()
    return [cur - 24 * 60 * 60 * 1000, cur]
  },
  近一周: () => {
    const cur = new Date().getTime()
    return [cur - 7 * 24 * 60 * 60 * 1000, cur]
  },
  近一月: () => {
    const cur = new Date().getTime()
    return [cur - 30 * 24 * 60 * 60 * 1000, cur]
  },
  近一年: () => {
    const cur = new Date().getTime()
    return [cur - 365 * 24 * 60 * 60 * 1000, cur]
  },
}
const showPreview = ref(false)
const previewIndex = ref(0)
const selectImg = (index: number) => {
  // show()
  if (previewIndex.value === index) {
    showPreview.value = false
    setTimeout(() => {
      previewIndex.value = 0
    }, 300)
    return
  }
  previewIndex.value = index
  showPreview.value = true
}

const imageList = ref([])

const scrollRef = ref<HTMLElement | null>(null)

const getImage = async () => {
  const imgRes = await getHisImages(timeRange.value)
  // console.log(imgRes, 'imgRes')
  // imageList.value = imgRes.map((item: any) => {
  //   return {
  //     ...item,
  //     imgPath: encodeURI(`/api/file?path=${item.parseInfo.imgPath}`),
  //     imgId: item.parseInfo.id,
  //   }
  // })
  imageList.value = new Array(10).fill(1).map((item, index) => {
    return {
      imgPath: `https://picsum.photos/300/200?random=${index}`,
      imgId: index,
    }
  })
  // console.log(imageList.value, 'imageList')
}
</script>

<template>
  <!-- <div :class="{ '!row-span-4 !row-start-2': previewIndex }"> -->
  <div class="pre-container" :class="{ '!h-[95%]': showPreview }">
    <panel
      :title="`${sheshiData.sheShiName}历史图像`"
      :show-close="true"
      :closeClick="showOrHideHisImage"
    >
      <div class="flex flex-col w-h-full">
        <div class="large-container">
          <div>
            {{ previewIndex > 0 ? imageList[previewIndex - 1].createTime : '' }}
          </div>
          <!-- <vue-viewer :images="imageList" :options="{ inline: true }"> -->
          <div class="h-0 flex-1">
            <n-image
              class="flex justify-center object-contain w-h-full"
              object-fit="contain"
              :src="previewIndex > 0 ? imageList[previewIndex - 1].imgPath : ''"
            />
          </div>

          <div class="line-clamp-3 pb-4">
            {{
              previewIndex > 0 ? imageList[previewIndex - 1].detailContent : ''
            }}
          </div>
          <!-- </vue-viewer> -->
        </div>
        <div ref="scrollRef" class="flex h-[178px] flex-col">
          <div class="flex gap-2">
            <n-date-picker
              v-model:formatted-value="timeRange"
              clearable
              type="datetimerange"
              :shortcuts="rangeShortcuts"
              :update-value-on-close="true"
              format="yyyy-MM-dd HH:mm:ss"
            />
            <n-button type="primary" @click="getImage">搜索</n-button>
          </div>
          <div v-if="imageList.length === 0" class="m-auto flex">
            <n-empty description="暂无数据"> </n-empty>
          </div>
          <n-scrollbar v-else x-scrollable>
            <div class="flex h-full flex-nowrap">
              <div
                class="flex h-full w-[140px] cursor-pointer p-2"
                v-for="(i, index) in imageList"
                :key="i.id"
                @click="selectImg(index + 1)"
              >
                <div
                  class="flex rounded-md p-2 outline-1 outline-blue-400 w-h-full hover:outline"
                  :class="{
                    'outline outline-1 outline-blue-400':
                      index + 1 === previewIndex,
                  }"
                >
                  <n-image
                    class="m-auto"
                    object-fit="contain"
                    lazy
                    :intersection-observer-options="{ root: scrollRef }"
                    preview-disabled
                    :src="i.imgPath"
                    ><template #error>
                      <n-icon :size="100" color="lightGrey">
                        <image-outline />
                      </n-icon>
                    </template>
                  </n-image>
                </div>
              </div>
            </div>
          </n-scrollbar>
        </div>
      </div>
    </panel>
  </div>
</template>

<style lang="scss" scoped>
.pre-container {
  transition: all 0.3s ease-in-out;
  .large-container {
    @apply flex h-0 flex-1 flex-col gap-2 overflow-hidden text-center;
    //
  }
}

:deep(.n-scrollbar-content) {
  height: calc(100% - 0px);
  // img {
  //   display: block;
  // }
}
</style>