agriculture-one-map/src/views/zhgl/com/date_img_list/DateImgList.vue

<template>
  <div class="container">
    <div class="head">时间 : {{createDate}}</div>
    <div class="listView">
      <template v-for="(image,index) in images" :key="image.url">
        <div :class="['item',selected.length >0 && selected[0] == image.treeId ? 'active' : '']" @click.stop="clickAction(image.treeId)">
          <div class="code">编号：{{image.code}}</div>
          <div class="periodName">{{image.periodName}}</div>
          <div class="img">
            <DrawBox v-if="switchValue&&image.markText" :sourceData="image.markText" width="255" height="230"></DrawBox>
            <img loading="lazy" :src="config.base_img_url2 + image.filename + resize" />
            <div class="watermark">
              {{image.uploadDate}}
            </div>
          </div>
          <AttributeList class="attrs" :data="image" :attrField="attrField"></AttributeList>
          <el-icon @click.stop="preview(index)" class="search cursor-pointer"><Search /></el-icon>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue"
import DrawBox from "@/components/drawBox.vue";
import AttributeList from "../global/AttributeList";
import config from "@/api/config.js"
let resize = '?x-oss-process=image/resize,m_fill,w_300'
let emits = defineEmits(["clickAction","preview"])

const props = defineProps({
  createDate: {
    type: String,
    require: true
  },
  images:{require: true,type:Array},
  selected:{type:Array, require: true,},
  periodId:{type:Number, require: true},
  attrField:{type:String, require: true},
  switchValue: { type: Boolean, require: true },
});



function clickAction(treeId){
  emits("clickAction",'dateImgList',props.selected.length > 0 && props.selected[0] == treeId ? null : treeId)
}

function preview(index){
  const urls = []
  for(let item of props.images){
    urls.push(config.base_img_url2 + item.filename)
  }
  emits("preview",urls, props.images, index)
}



</script>

<style lang="scss" scoped>
.container{
  background: #044053;
  border-radius: 4px;
  border: 1px solid rgba(81, 233, 240, 0.6);
  box-sizing: border-box;
  padding: 2px 2px 2px 2px;
  margin-bottom: 10px;
}
.head{
  width: 100%;
  color:#B4FFFB;
  font-weight: bold;
  padding: 10px 10px 0px 10px;
  div{
    margin-left: 10px;
    display:inline-block;
  }
}
.active{
  background: #cce5ee;
  border: 2px solid red;
}
.listView{
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 10px;
  box-sizing: border-box;
  .item{
    display:inline-block;
    position: relative;
    width: 255px;
    height: 250px;
    margin: 0 10px 0 0;
    box-sizing: border-box;

    .periodName{
      position: absolute;
      color: #F4F4F4;
      font-weight: bold;
      left: 5px;
      top:5px;
      z-index: 1;
    }
    .code{
      position: absolute;
      z-index: 1;
      bottom: 0px;
      width: 100%;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      text-align: center;
      color: #01BBB3;
      font-weight: bold;
    }
    .img{
      position: absolute;
      z-index: 0;
      width: 100%;
      top: 0px;
      bottom: 20px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .attrs{
      position: absolute;
      z-index: 1;
      right: 0px;
      bottom: 20px;
      display: flex;
      flex-direction: column-reverse;
    }
    .search{
      position: absolute;
      color: #ffffff;
      background-color: #00000090;
      font-size: 20px;
      top: 0px;
      right:0px;
      z-index: 2;
    }

  }
  .bigImg{
    width: 1024px;
    height: 768px;
  }
}
</style>