eta_front/src/views/smartReport/components/ImportETAChart.vue

<template>
    <div class="import-eta-chart-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="true">
            <el-checkbox
                class="onlyshowme-box"
                v-model="isShowMe" 
                @change="handleIsShowMeChange"
            >只看我的</el-checkbox>
            <draggable
                :list="list"
                :group="{ name: 'component', pull: 'clone', put: false }"
                class="chart-list-box"
                animation="300"
                :sort="false"
                tag="div"
            >
                <div class="chart-item" :comp-data="getCompData(item)" v-for="item in list" :key="item.UniqueCode">
                    <div class="title">{{item.ChartName}}</div>
                    <div class="img" :style="'backgroundImage:url('+item.ChartImage+')'"></div>
                </div>
            </draggable>
            <tableNoData text="暂无图表" size="mini" v-if="list.length===0"/>
    </div>
</template>

<script>
import { dataBaseInterface } from "@/api/api.js";
export default {
    data() {
        return {
            isShowMe:false,
            page:1,
            pageSize:20,
            list:[],
            finished:false,
            keyword:'',
            loading:false
        }
    },
    created() {
        this.getETAChartList()
    },
    methods: {
        // 生产随机id
        getCompId(type){
            return type+new Date().getTime()
        },

        getCompData(item){
            const LINK_CHART_URL = this.$setting.dynamicOutLinks.ChartViewUrl+'/chartshow';
            const obj={
                compId:3,
                compType:'chart',
                content:`${LINK_CHART_URL}?code=${item.UniqueCode}`
            }
            return JSON.stringify(obj)
        },

        async getETAChartList(){
            this.loading=true
            const res=await dataBaseInterface.chartSearchByEs({
                Keyword: this.keyword || "",
                CurrentIndex: this.page,
                PageSize: this.pageSize,
                IsShowMe: this.isShowMe,
            })
            this.loading=false
            if(res.Ret===200){
                const arr=res.Data.List || []
                this.list=[...this.list,...arr]
                this.finished=res.Data.Paging.IsEnd
            }
        },

        handleIsShowMeChange(){
            this.page=1
            this.finished=false
            this.list=[]
            this.getETAChartList()
        },

        handleLoadMore(){
            if(this.finished||this.loading) return
            this.page++
            this.getETAChartList()
        },

        handleSearch(key){
            this.page=1
            this.finished=false
            this.list=[]
            this.keyword=key
            this.getETAChartList()
        }
    },
}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.import-eta-chart-wrap{
    height: 100%;
    width: 100%;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
    .onlyshowme-box{
            display: block;
            position: sticky;
            top: -20px;
            padding: 20px 0;
            background-color: #FFF;
        }
        .chart-list-box{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            .chart-item{
                cursor: move;
                padding: 0 10px;
                width: 250px;
                border-radius: 4px;
                border: 1px solid var(--gary-gy-5-line, #C8CDD9);
                background: var(--gary-gy-white, #FFF);
                .title{
                    padding: 10px 0;
                    text-align: center;
                    border-bottom: 1px solid #C8CDD9;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .img{
                    width: 100%;
                    height: 197px;
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                }
            }
        }
}
</style>