wszhyWx/src/views/insectPest/imageList.vue

<template>
    <div class="historyData insectPestImage">
        <div class="page-content">
            <div class="table-title">
                <img src="../../assets/image/real-time.png" alt="" />
                虫情图片
                <div class="return-detail" @click="returnDetail">返回详情</div>
            </div>
            <div class="flex-view">
                
                <div class="input-sel-time">
                    <span>时间段</span>
                    <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <div class="input-btn ">
                    <div class="btn blue" @click="search">
                        {{$t('text.search')}}
                    </div>
                    <!-- <div class="btn blue">
                        数据统计
                    </div>
                    <div class="btn blue">
                        日/夜平均时间范围设置
                    </div> -->
                </div>
            </div>

            <div class="table-view">
                <!-- <div class="table-title">
                    <div>{{ deviceName }}</div>
                    <span>共有{{ total }}张图片</span>
                </div> -->
                <div class="image-list">
                    <div v-for="item, index in tableData" :key="index">
                        <el-image :src="item.thumbnailUrl" :preview-src-list="srcList">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <div class="image-time flex-between">{{ item.shootTime }} <el-link @click="toImageViewer(item)" type="success" :underline="false"><i class="el-icon-view el-icon--right"></i>虫情标注</el-link></div>
                    </div>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[12, 20, 28, 36]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";

export default {
    data() {
        return {
             id: 613,
            dateRange: ['',''],
            tableData: [],
            currentPage: 1,
            pageSize: 12,
            total: 0,
            loading: null,
            srcList: [],
        }
    },
    watch: {
   
    },

    mounted() {

    this.id = this.$route.query.id ? this.$route.query.id : 613;
        this.dataInit(this.id)
    },
    methods: {
         getTime(time) {
            // 中国标准时间
            var chinaTime = new Date(time);

            // 将中国标准时间转换为UTC时间
            var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);

            // 将UTC时间转换为2024-02-17 00:00:00格式
            var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
            return formattedTime
        },
        returnDetail(){
               this.$router.push({ path:'insectPestDetail',query:{id:this.id} })
        },
        dataInit(id) {
           this.getTime7()
            this.pageSize = 12
            this.currentPage = 1
            setTimeout(() => {
                this.getImage()
            }, 0);
        },
    getTime7() {
            // 获取当前日期
            var today = new Date();

            // 获取昨天的日期
            var yesterday = new Date(today);
            yesterday.setDate(today.getDate() - 7);

           
            this.dateRange = [yesterday, today]
        },
        toImageViewer(item){
            const routeData = this.$router.resolve({
  path: 'imageViewer',
  query: { id:item.id,url:item.imageUrl }
});
window.open(routeData.href, '_blank');
            //  this.$router.push({ path:'imageViewer',query:{id:item.id,url:item.imageUrl} })
        },
       // 获取图片列表
    getImage() {
         this.loading = this.$loading({
                lock: true,
                text: this.$t('message.loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
      var data = {
        beginTime: this.getTime(this.dateRange[0]),
        endTime: this.getTime(this.dateRange[1]),
        deviceId: this.id,
        pageNum:  this.currentPage,
        pageSize: this.pageSize,
      };
     this.api.getDeviceImages(data).then((res) => {
              this.loading.close()
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.srcList = this.tableData.map((item) => item.imageUrl);
            this.total=res.data.data.total
          }
        }).catch(err=>{
  this.loading.close()
        });
    },
        search() {
             this.getImage()
        },
        handleSizeChange(val) {
            this.pageSize = val
            setTimeout(() => {
                this.getImage()
            }, 0);
        },
        handleCurrentChange(val) {
            this.currentPage = val
            setTimeout(() => {
                this.getImage()
            }, 0);
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'warning-row';
            } else if (rowIndex % 2 == 0) {
                return 'success-row';
            }
            return '';
        }
    },

}
</script>
<style lang="scss"></style>