eta_mobile_front/src/views/dataEDB/RelationEDB.vue

<script setup name="DataEDBRelationEDB">
import {ref,reactive} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import {useRoute, useRouter} from 'vue-router'
import {useCopyEdbData} from '@/hooks/edb/useCopyEdbData'

const {copyData} =useCopyEdbData()

const route=useRoute()
const router=useRouter()


const edbInfoId=route.query.edbInfoId//当前指标的id

const listState=reactive({
    list:[],
    page:1,
    pageSize:20,
    totals:0,
    finished:false
})
// 获取关联的图列表
async function getEdbRelationEDBList(){
    const res=await apiDataEDB.edbRelationEdbList({
        PageSize:listState.pageSize,
        CurrentIndex:listState.page,
        EdbInfoId:edbInfoId
    })
    if(res.Ret===200){
        if(!res.Data){
            listState.finished=true
            return
        }
        const arr=res.Data.List||[]
        listState.list=[...listState.list,...arr]
        listState.finished=res.Data.Paging.IsEnd
        listState.totals=res.Data.Paging.Totals
    }
}
getEdbRelationEDBList()
function onLoad(){
    listState.page++
    getEdbRelationEDBList()
}

//复制数据
function handleCopyEDBData(e){
    copyData({EdbInfoId:e.EdbInfoId})
}
</script>

<template>
    <div class="edb-relation-edb-page">
        <div class="total-box">共{{listState.totals}}个关联指标</div>
        <div class="edb-list-wrap">
            <van-list
                v-model:loading="listState.loading"
                :finished="listState.finished"
                :finished-text="listState.list.length>0?'没有更多了':'暂无关联指标'"
                :immediate-check="false"
                @load="onLoad"
            >
                <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
                <ul class="edb-list">
                    <li class="item" v-for="item in listState.list" :key="item">
                        <h2 class="name">{{item.EdbName}}</h2>
                        <ul class="info-list">
                            <li class="info-item">ID：{{item.EdbCode}}</li>
                            <li class="info-item">起始时间：{{item.StartDate}}</li>
                            <li class="info-item">频度：{{item.Frequency}}</li>
                            <li class="info-item">最新日期：{{item.LatestDate}}</li>
                            <li class="info-item">单位：{{item.Unit}}</li>
                            <li class="info-item">最新值：{{item.LatestValue}}</li>
                            <li class="info-item" style="width:100%">最近更新：{{item.ModifyTime}}</li>
                            <li class="info-item" style="width:100%">数据来源：{{item.SourceName}}</li>
                        </ul>
                        <div style="text-align:right">
                            <van-button color="#F2F3FF" size="small" style="color:#0052D9;margin-right:10px" @click="handleCopyEDBData(item)">复制数据</van-button>
                            <van-button color="#0052D9" size="small">查看数据</van-button>
                        </div>
                    </li>
                </ul>
            </van-list>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.edb-relation-edb-page{
    padding:$page-padding;
}
.total-box{
    margin-bottom: 20px;
    color: $font-grey_999;
}
.edb-list{
    .item{
        margin-bottom: 36px;
        border-radius: 8px;
        border: 1px solid $border-color;
        box-shadow: $box-shadow;
        padding: 20px;
        .name{
            font-size: 32px;
        }
        .info-list{
            display: flex;
            flex-wrap: wrap;
            gap: 10px 0;
            color: $font-grey;
            margin-bottom: 10px;
            .info-item{
                width: 50%;
            }
        }
    }
}
</style>