jhbigscreen/src/pages/engin/enginImageItems.vue

<template>
    <div class="engin-image-items">
        <div class="tool-bar">
            <span class="sp-page" @click="goNextPage(-1)" v-if="images.length > 5">&lt;</span>
            <span v-for="(it, idx) in pagers" :key="idx" class="sp-page" @click="goPage(it)"
                :class="it == index + 1 ? 'active' : ''" v-if="it <= images.length">{{ it }}</span>
            <span class="sp-page" @click="goNextPage(1)" v-if="images.length > 5">&gt;</span>
        </div>
        <div class="div-img">
            <span class="sp-border sp-1"></span>
            <span class="sp-border sp-2"></span>
            <span class="sp-border sp-3"></span>
            <span class="sp-border sp-4"></span>
            <template v-if="mode == 'periodical'">
                <el-image  :src="getImage()" @click="doDownload" style="cursor: pointer;"/>
            </template>
            <el-image v-else :preview-src-list="images.map(it => it.imageFile)" :src="getImage()">
            </el-image>
        </div>
        <div class="div-desc">
            <el-popover placement="bottom"  trigger="hover" popper-class="engin-image-item-pop">
                <div v-if="mode == 'periodical'" style="position: relative;">
                    文件名:{{ getTitle2() }}<br />
                    文件大小:{{ getFileSize() }}
                    <span style="position: absolute;right: 0px;color: #409EFF;font-weight: bold;cursor: pointer;" @click="doDownload">
                        <i class="el-icon-download"></i><span>下载</span>
                    </span>
                </div>
                <div v-else>
                    {{ getTitle() }}
                </div>
                <div class="div-title" slot="reference" style="cursor: pointer;">{{ getTitle() }}</div>
            </el-popover>
        </div>
    </div>
</template>

<script>
import { download } from '@/utils/request';

export default {
    props: {
        images: {
            type: Array,
            default: () => []
        },
        mode: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            pages: [1, 2, 3, 4, 5],
            index: 0
        };
    },

    mounted() {

    },
    computed: {
        pagers() {
            const pagerCount = 5;
            const halfPagerCount = (pagerCount - 1) / 2;

            const currentPage = this.index;
            const pageCount = this.images.length;

            let showPrevMore = false;
            let showNextMore = false;


            if (pageCount > pagerCount) {
                if (currentPage > pagerCount - halfPagerCount) {
                    showPrevMore = true;
                }

                if (currentPage < pageCount - halfPagerCount) {
                    showNextMore = true;
                }
            }

            const array = [];

            if (showPrevMore && !showNextMore) {
                const startPage = pageCount - (pagerCount - 2);
                for (let i = startPage; i <= pageCount; i++) {
                    array.push(i);
                }
            } else if (!showPrevMore && showNextMore) {
                for (let i = 1; i < pagerCount; i++) {
                    array.push(i);
                }
            } else if (showPrevMore && showNextMore) {
                const offset = Math.floor(pagerCount / 2) - 1;
                for (let i = currentPage - offset; i <= currentPage + offset; i++) {
                    array.push(i);
                }
            } else {
                for (let i = 1; i <= pageCount; i++) {
                    array.push(i);
                }
            }

            this.showPrevMore = showPrevMore;
            this.showNextMore = showNextMore;

            return array;
        }
    },
    methods: {
        goNextPage(o) {
            if (this.images.length == 0) {
                return;
            }
            let n = this.index + o;
            if (n < 0) {
                n = this.images.length - 1;
            }
            if (n >= this.images.length) {
                n = 0;
            }
            this.index = n;
        },
        goPage(o) {
            if (this.images.length == 0) {
                return;
            }
            this.index = o - 1;
        },
        getTitle() {
            if (this.images.length >= this.index + 1) {
                return this.images[this.index].standardDesc;
            }
            return "";
        },
        toSize(value) {
            if (value < 1024) {
                return value.toFixed(2) + 'B'
            } else if (value >= 1024 && value < Math.pow(1024, 2)) {
                return parseFloat(value / 1024).toFixed(2) + 'KB'
            } else if (value >= Math.pow(1024, 2) && value < Math.pow(1024, 3)) {
                return parseFloat(value / Math.pow(1024, 2)).toFixed(2) + 'MB';
            } else if (value > Math.pow(1024, 3)) {
                return parseFloat(value / Math.pow(1024, 3)).toFixed(2) + 'GB';
            } else if (value > Math.pow(1024, 4)) {
                return parseFloat(value / Math.pow(1024, 4)).toFixed(2) + 'T';
            }

        },
        doDownload(){
            if (this.images.length >= this.index + 1) {
                let obj = this.images[this.index].fileUrl;
                if (obj && obj.length > 0) {
                    window.open(obj[0].url)
                }
            }
        },
        getTitle2(){
            if (this.images.length >= this.index + 1) {
                let obj = this.images[this.index].fileUrl;
                if (obj && obj.length > 0) {
                    return obj[0].url.split("/").pop();                    
                }
            }
            return "";
        },
        getFileSize() {
            if (this.images.length >= this.index + 1) {
                let obj = this.images[this.index].fileUrl;
                if (obj && obj.length > 0) {
                    let size = obj[0].size;
                    return this.toSize(size);
                }
            }
            return "";
        },
        getImage() {
            if (this.images.length >= this.index + 1) {
                return this.images[this.index].imageFile + '.1000.jpg';
            }
            return "";
        }
    },
};
</script>

<style lang="less" scoped>
.engin-image-items {
    height: calc(100% - 36px);
    margin-left: 5px;
    width: calc(100% - 10px);
    margin-top: 10px;
    text-align: center;

    .tool-bar {
        position: absolute;
        right: 25px;
        top: 13px;

        .sp-page {
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #73ABD7;
            border-radius: 10px;
            margin-right: 4px;
            cursor: pointer;

            &.active {
                background-color: #fff;
                color: #004D7C;
            }
        }
    }

    .div-img {
        height: calc(100% - 40px);
        position: relative;
        display: inline-block;
        border: solid 1px #004D7C;

        .sp-border {
            position: absolute;
            display: inline-block;
            width: 30px;
            height: 30px;
            z-index: 1;

            &.sp-1 {
                top: -1px;
                left: -1px;
                border-left: solid 1px #62F6F8;
                border-top: solid 1px #62F6F8;
            }

            &.sp-2 {
                top: -1px;
                right: -1px;
                border-right: solid 1px #62F6F8;
                border-top: solid 1px #62F6F8;
            }

            &.sp-3 {
                bottom: -1px;
                right: -1px;
                border-right: solid 1px #62F6F8;
                border-bottom: solid 1px #62F6F8;
            }

            &.sp-4 {
                bottom: -1px;
                left: -1px;
                border-left: solid 1px #62F6F8;
                border-bottom: solid 1px #62F6F8;
            }
        }
    }

    /deep/ .el-image {
        height: 100%;
    }

    .div-desc {
        margin-top: 4px;

        &>span {
            display: flex;

            /deep/ .el-popover__reference-wrapper {
                display: flex;
                width: 100%;
                justify-content: center;

                .div-title {
                    max-width: 80%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }

    }

}
.engin-image-item-pop{
    max-width: 400px;
    min-width: auto;
}
</style>