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

<template>
    <div class="statistic-analysis-wrap">
        <div class="top-box">
            <div class="left-card">
                <span>商品价格曲线</span>
            </div>
            <div class="right">
                <el-input
                    class="search-box"
					placeholder="图表名称"
					v-model="keyword"
					size="medium"
					prefix-icon="el-icon-search"
                    @input="handleSearch"
				/>
            </div>
        </div>
        <div class="main-box">
            <el-checkbox
                class="onlyshowme-box"
                v-model="isShowMe" 
                @change="handleIsShowMeChange"
            >只看我的</el-checkbox>
            <div class="list-wrap" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="false">
                <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&&finished"/>
            </div>
        </div>
    </div>
</template>

<script>
import futuresInterface from "@/api/modules/futuresBaseApi";
export default {
    data() {
        return {
            
            keyword:'',
            isShowMe:false,
            list:[],
            page:1,
            pageSize:20,
            finished:false
        }
    },
    created(){
        this.getChartList()
    },
    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)
        },

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

        handleSearch(){
            this.list=[]
            this.page=1
            this.finished=false
            this.getChartList()
        },

        /* 搜索图表分页 */
        async getChartList(word) {
            let params = {
                Keyword: this.keyword || "",
                CurrentIndex: this.page,
                PageSize: this.pageSize,
                IsShowMe: this.isShowMe,
            };
            let res = await futuresInterface.searchChart(params);
            if (res.Ret !== 200) return;
            const arr = res.Data.List || [];
            this.list =
                this.page === 1
                ? arr
                : [...this.list, ...arr];
            this.finished =  res.Data.Paging.IsEnd;
        },

        handleLoadMore(){
            if(this.finished) return
            this.page++
            this.getChartList()
        }
    },
}
</script>

<style lang="scss" scoped>
div{
    box-sizing: border-box;
}
.statistic-analysis-wrap{
    .top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right{
            .search-box{
                width: 330px;
            }
        }
    }
    .main-box{
        margin-top: 30px;
        height: calc(100vh - 180px);
        border-radius: 4px;
        border: 1px solid var(--gary-gy-5-line, #C8CDD9);
        background: #FFF;
        padding: 20px;
        display: flex;
        flex-direction: column;
        .list-wrap{
            flex: 1;
            overflow-y: auto;

        }
    }
}
.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;
                }
            }
}
</style>