bigDataApp/pages/shuHai/components/photoImage.vue

<template>
  <view class="photo-image">
    <!-- 当前日期范围无数据时隐藏设备切换标签，避免空数据下仍显示一排标签 -->
    <view class="photo-tabs" v-if="images.length">
      <view class="photo-tab-item" :class="{ active: activeTab === 0 }" @click="changeTabActive(0)">全部</view>
      <view class="photo-tab-item" :class="{ active: activeTab === 1 }" @click="changeTabActive(1, ding_one_device_id)">{{ ding_one_device_id }}</view>
      <view class="photo-tab-item" :class="{ active: activeTab === 2 }" @click="changeTabActive(2, ding_two_device_id)">{{ ding_two_device_id }}</view>
      <view class="photo-tab-item" :class="{ active: activeTab === 3 }" @click="changeTabActive(3, ding_three_device_id)">{{ ding_three_device_id }}</view>
    </view>
    <view
      class="photo-image__tabs"
      v-if="disableShow && images.length"
    >
      <view
        class="photo-image__tab"
        v-for="(pest, index) in pestList"
        :key="index"
        :class="{ active: activeIndexList.includes(index) }"
        @click="changeTab(index)"
      >
        <text class="tab-text">{{ pest.pest_name }}({{ pest.pest_num }})</text>
      </view>
    </view>
    <view class="photo-image__content" v-if="images.length">
      <view class="photo-image__grid">
        <view class="photo-image__item" v-for="(item, index) in images" :key="index" @click="handleClick(item)">
          <view class="photo-image__item-img-container">
            <image
              class="photo-image__item-img"
              :src="getSrc(item)"
            />
            <view class="photo-image__item-icon-container">
              <image
                v-if="item.has_mark == 1 || item.has_identify == 1"
                class="photo-image__item-icon"
                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/ai.png"
              />
              <image
                v-if="item.has_photo == 1"
                class="photo-image__item-icon-video"
                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/video.png"
              />
              <image
                v-if="item.has_video == 1"
                class="photo-image__item-icon-img"
                src="https://s3.hnyfwlw.com/webstaticimg/bigdata_app/img/img.png"
              />
            </view>
          </view>
          <view class="photo-image__item-title">
            {{ item.event_id }}
          </view>
          <view class="photo-image__item-time">
            {{ formatDate(item.addtime) }}
          </view>
        </view>
      </view>
    </view>
    <view v-else>
      <u-empty text="暂无图片"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    disableShow:{
      type: Boolean,
      default: true
    },
    pestList:{
      type: Array,
      default: () => []
    },
    images:{
      type: Array,
      default: () => []
    },
    deviceInfo:{
      type: Object,
      default: () => ({})
    },
    currentYear:{
      type: String | Number,
      default: ''
    },
    ding_one_device_id:{
      type: String,
      default: ''
    },
    ding_three_device_id:{
      type: String,
      default: ''
    },
    ding_two_device_id:{
      type: String,
      default: ''
    },
  },
  data() {
    return {
      activeIndexList:[],
      activePest:[],
      activeTab: 0,
      tabs: ['全部', '稻飞虱', '水龟虫', '蝼蛄', '系统','全部', '稻飞虱', '水龟虫', '蝼蛄', '系统'],
    };
  },
  methods: {
    getSrc(item){
      return item.photo_list[0]?.addr;
    },
    changeTab(index) {
      if(this.activeIndexList.includes(index)){
        this.activePest = this.activePest.filter(item => item !== this.pestList[index])
        this.activeIndexList = this.activeIndexList.filter(item => item !== index)
      }else{
        this.activeIndexList.push(index)
        this.activePest.push(this.pestList[index])
      }
      this.$emit('changeTab', this.activePest)
    },
    changeTabActive(index, event_id) {
      this.activeTab = index
      this.$emit('changeTab', event_id)
    },
    // 格式化时间
    formatDate(dateString) {
      const date = new Date(dateString*1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      const second = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    handleClick(item) {
      uni.navigateTo({
        url: '/pages/shuHai/devicePhoto?device_id=' + item?.device_id + '&addtime=' + item?.addtime + '&id=' + this.deviceInfo.id + '&currentYear=' + this.currentYear + '&event_id=' + item?.event_id
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.photo-image {
  width: 100%;
  box-sizing: border-box;
  .photo-tabs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    border-radius: 16rpx;
    background: #ffffff;
    padding: 20rpx;
    .photo-tab-item{
      flex:1;
      font-size: 28rpx;
      color: #999999;
      font-family: "Source Han Sans CN VF";
      font-weight: 400;
      padding: 0 5px;
    }
    .photo-tab-item.active{
      border-radius: 4px;
      background: #0BBC58;
      color: #ffffff;
      line-height: 46rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &__header {
    margin-bottom: 32rpx;
    white-space: nowrap;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  &__tabs {
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    // 去掉滚动条
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .photo-image__content{
    margin-top: 24rpx;
    .photo-image__grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;
    }
  }
  &__tab {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin-right: 16rpx;
    background: #ffffff;
    color: #999999;
    font-family: "Source Han Sans CN VF";
    font-size: 28rpx;
    padding: 10rpx 32rpx;
    border-radius: 8rpx;
    &:last-child {
      margin-right: 0;
    }

    .tab-text {
      margin-right: 8rpx;
    }

    .tab-check {
      color: #4CAF50;
      font-weight: bold;
    }

    &.active {
      color: #0BBC58;
    }

    .tab-underline {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: #4CAF50;
      border-radius: 2rpx;
    }
  }
  &__item {
    border-radius: 16rpx;
    padding: 20rpx;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    background: #ffffff;
    &-img-container {
      width: 100%;
      padding-bottom: 60%;
      position: relative;
      border-radius: 16rpx;
      overflow: hidden;
      background-color: #f5f5f5;
    }
    .photo-image__item-icon-container{
      position: absolute;
      display: flex;
      gap: 4rpx;
      top: 8rpx;
      left: 8rpx;
      width: 100%;
      height: 100%;
    }
    &-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    &-icon {
      width: 40rpx;
      height: 40rpx;
    }
    &-icon-video {
      width: 40rpx;
      height: 40rpx;
    }
    &-icon-img {
      width: 40rpx;
      height: 40rpx;
    }
    &-title {
      font-size: 28rpx;
      color: #333333;
      font-family: "Source Han Sans CN VF";
      font-weight: 500;
      margin-top: 12rpx;
    }
    &-time {
      width: 100%;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 12rpx;
      font-size: 22rpx;
      color: #666666;
    }
  }
}
</style>