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'
import LImage from './components/LImage'

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 {
      id: index,
      imgPath: `/images/影像.jpg`,
      imgId: index,
    }
  })
  // console.log(imageList.value, 'imageList')
}

const checkedImage = ref<null | string[]>(null)

const checkValue = e => {
  e.stopPropagation()
  if (checkedImage.value && checkedImage.value.length > 2) {
    checkedImage.value.pop()
  }
}

// watch(checkedImage, newCheck => {
//   // console.log(newCheck, 'newCheck')
// })
const isCompare = ref(false)
const compareImages = () => {
  if (!isCompare.value) {
    if (checkedImage.value && checkedImage.value.length === 2) {
      showPreview.value = true
      previewIndex.value = 0
      // showPreview.value = true
      isCompare.value = true
    }
  } else {
    isCompare.value = false
    showPreview.value = false
    checkedImage.value = null
  }
}

const largeImageList = computed(() => {
  if (isCompare.value) {
    return imageList.value.filter(img => checkedImage.value.includes(img.id))
  } else {
    return imageList.value[previewIndex.value - 1]
      ? [imageList.value[previewIndex.value - 1]]
      : []
  }
})
</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">
          <l-image :imageList="largeImageList" />

          <!-- </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>
            <n-button
              type="primary"
              :disabled="
                !isCompare && (!checkedImage || checkedImage.length < 2)
              "
              @click="compareImages"
              >{{ isCompare ? '取消对比' : '对比' }}</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> -->
            <n-checkbox-group
              class="flex h-full flex-nowrap"
              v-model:value="checkedImage"
            >
              <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-checkbox
                    class="absolute"
                    :value="i.id"
                    label=""
                    @click.stop="checkValue"
                  />
                  <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>
            </n-checkbox-group>
            <!-- </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>