dataV下的轮播表使用(保姆级)

12345mna

于 2024-07-02 15:39:39 发布

阅读量464

点赞数 13

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_42425138/article/details/140128468

版权

需求：展示车辆的当天的里程数，取前10名，滚动播放。需求很简单，考虑到dataV组件里有该功能，所以就直接采用了。

<dv-scroll-ranking-board :config="config" style="width:500px;height:220px" />

详细代码：

 <template>
        <div class="rightboxbottom">  
            <div class="bg-image">
                <div class="text-gradient">
                <h1>车辆行驶排行榜</h1>
                </div>
            </div>

            <div class="body-box">
              <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" />
            </div>

            <div class="rightBottomNname-content">今日自动驾驶公里数: {{ mileCount }}</div>  

        </div>
      </template>

    <script>
    import axios from 'axios';

    export default {
        data() {
            return {
                noticeData:[],
                config: {
                    header: ['id', 'Speed', 'A-mile', 'T-mile'],
                    data: [],
                    index: true,
                    columnWidth: [45],
                    align: ['center'],
                    carousel: 'page',
                    rowNum: 5, //表格行数
                    headerHeight: 35, // 表头高度
                    // headerBGC: '#0f1325', //表头
                    // oddRowBGC: '#0f1325', //奇数行
                    // evenRowBGC: '#171c33', //偶数行
                    waitTime: 4000 ,// 轮播时间
                    // hoverPause : true
                },
                mileCount:100,
                }
            },
        async mounted() {  
            await this.fetchdata();  
            // 开始模拟异步数据返回  
            this.startMockData();
        } ,
        methods: {  
            startMockData() {  
                // 使用 setTimeout 来模拟定期获取数据，确保每次请求之间有适当的间隔  
                this.fetchDataAndScheduleNext();  
            },  

            async fetchDataAndScheduleNext() {  
                try {  
                    await this.fetchdata();  
                    // 设置下一次请求的时间  
                    setTimeout(this.fetchDataAndScheduleNext, 20000); // 20 秒后  
                } catch (error) {  
                    console.error('Error fetching data:', error);  
                }  
            },  

            async fetchdata() {  
                try {  
                    console.log("开始获取数据")
                //获取今日自动驾驶总公里数
                const responseAmile = await axios.get('/api/driveSumMile') // 发送请求到 Mock.js 拦截的 URL  
                this.mileCount = responseAmile.data.mileCount.sumMileToday ;


                //获取驾驶排名数据
                const response = await axios.get('/api/driveRank') // 发送请求到 Mock.js 拦截的 URL  
                const driveRank_data = response.data.driveRank_data ;  

                console.log("*****获取到的数据driveRank_data****",driveRank_data)

                const result_data = driveRank_data.map(v => {
                    return [
                        v['vehicle_id'],
                        v['speed'],
                        v['auto_driving_mileage'],
                        v['total_mileage'],
                        ]
                })
                console.log("*****result_data****",result_data)

                // 假设 levelData 包含所需的数据
                this.updateChart(result_data); // 更新图表数据 
                } catch (error) {  
                console.error('Error fetching user:', error)  
                }  
            } ,   

            updateChart(data) {  
                console.log("*****更新前this.config****",this.config);        
                this.config.data = data;
                console.log("*****更新后this.config.data****",this.config);                   
                this.config={...this.config}
                console.log("***对象赋值之后this.config***",this.config)
            }  
        }
    }
    </script>

    <style lang="scss" scoped>
    $box-width: 378px;
    $box-height: 320px;
    .rightboxbottom {
      padding: 16px;
      padding-top: 20px;
      height: $box-height;
      width: $box-width;
      border-radius: 5px;

    .bg-image {
    background-image: url('../../assets/title.png') ;
    background-size: 100% ;
    background-repeat: no-repeat;
    background-position: center;
    width: 80%;
    height: 10%; /* 根据需要设置高度 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    left:10%;
    top:5px;
    }
    .text-gradient h1 {
        font-size: 18px; /* 根据需要调整字体大小 */
        font-weight: bold;
        color: transparent;
        background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
        -webkit-background-clip: text;
        background-clip: text;
        display: inline-block;

        letter-spacing: 0.2rem;
        text-shadow: 0 0 30px #89deed;        
    }
    .body-box {
        margin-top:12px;
        // border-radius: 10px;
        // overflow: visible;
        .dv-scr-board {
        width: 100%;
        height: $box-height - 105px;

        }
    }
    .rightBottomNname-content {
    text-align: center;  
    margin-top: 12px;  

    font-size : 22px;
    font-weight: 800;
    font-family: 'Times New Roman', Times, serif;

    color: transparent;
    background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
    -webkit-background-clip: text;
    background-clip: text;
    // display: inline-block;

    letter-spacing: 0.2rem;
    text-shadow: 0 0 30px #89deed;  

    }

  }

  </style>

上述详细代码中，有几点需注意：

1. 数据更新使借助mockjs 来实现的，等后续接入后端接口，再须改动；

2. 在updateChart(data) 这个方法中，更新数据需使用 this.config={...this.config}，若仅仅使用this.config.data = data 更新数据，往往结果不能更新；

3. config 中的data 数据的数据类型也应注意：应为 data:['foo','foo']

4. 更多详细内容可参考官方文档：[DataV 官方文档](http://datav.jiaminghi.com/guide/)，上述的2、3两点文档里也有，只是为易错点，需特别注意

本想着这样就可以了，运行了短时间，也很满意。但是过了一会，轮播就出差错了。显示如下：这个48不是返回的数据，打印config.data ，数据也没问题，只是发现多了警告：

runtime-core.esm-bundler.js:47  [Vue warn]: Duplicate keys found during update: 48 Make sure keys are unique. 
  at <DvScrollBoard class="dv-scr-board" config= Object ref="scrollBoard" > 
  at <IndexDynamicDev2> 
  at <DvBorderBox12> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouterView> 
  at <App>

查了很多资料，也没找到类似的问题，只有官方论坛一个哥们有类似，但好像也是因为浏览器自动翻译引起的，这里不多叙述。也希望后续看到这篇文章的朋友若出现类似问题，并有思路解释的，告知一下。

因为dataV的轮播表是封装好的，能力有限，改不动，（md,人还能让N 憋死？？？）气不过只能换个思路，用别的给平替掉，发现dataV 中的排名轮播表也可以，就抱着试试的态度用了一下，代码和上述几乎一致，详细如下：

<template>
<div class="rightboxbottom">
    <div class="bg-image">
        <div class="text-gradient">
        <h1>车辆行驶排行榜</h1>
        </div>
    </div>
    <div class="body-box">

        <!-- <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" /> -->
        <dv-scroll-ranking-board class="dv-scr-rank-board" :config="ranking" /> 
    </div>
        <div class="rightBottomNname-content">今日自动驾驶公里数: {{ mileCount }}</div>  

</div>
</template>

    <script>
    import axios from 'axios';

    export default {
        data() {
            return {
                ranking: {
                    data: [
                        {
                        name: 'vid1',
                        value: 55
                        },
                        {
                        name: 'vid2',
                        value: 120
                        },
                        {
                        name: 'vid3',
                        value: 78
                        },
                        {
                        name: 'vid4',
                        value: 66
                        },
                        {
                        name: 'vid5',
                        value: 80
                        },
                        {
                        name: 'vid6',
                        value: 80
                        },
                        {
                        name: 'vid7',
                        value: 80
                        },
                        {
                        name: 'vid8',
                        value: 80
                        },
                        {
                        name: 'vid9',
                        value: 80
                        },
                        {
                        name: 'vid10',
                        value: 80
                        }
                    ],
                    carousel: 'page',
                    unit: ' KM'
                },
                mileCount:100,
                }
            },
        async mounted() {  
            await this.fetchdata();  
            // // 开始模拟异步数据返回  
            this.startMockData();
        } ,
        methods: {  
            startMockData() {  
                // 使用 setTimeout 来模拟定期获取数据，确保每次请求之间有适当的间隔  
                this.fetchDataAndScheduleNext();  
            },  

            async fetchDataAndScheduleNext() {  
                try {  
                    await this.fetchdata();  
                    // 设置下一次请求的时间  
                    setTimeout(this.fetchDataAndScheduleNext, 5000); // 20 秒后  
                } catch (error) {  
                    console.error('Error fetching data:', error);  
                }  
            },  

            async fetchdata() {  
                try {  
                    console.log("开始获取数据")
                //获取今日自动驾驶总公里数
                const responseAmile = await axios.get('/api/driveSumMile') // 发送请求到 Mock.js 拦截的 URL  
                this.mileCount = responseAmile.data.mileCount.sumMileToday ;


                //获取驾驶排名数据
                const response = await axios.get('/api/driveRank_2') // 发送请求到 Mock.js 拦截的 URL  
                const driveRank_data = response.data.driveRank_data ;  

                console.log("*****获取到的数据driveRank_data****",driveRank_data)

                let result_data = []           
                driveRank_data.forEach(v => {
                    result_data.push({
                        name: v['vehicle_id'],
                        value: v['auto_driving_mileage']
                    })                    
                });
                console.log("*****result_data****",result_data)

                // 假设 levelData 包含所需的数据
                this.updateChart(result_data); // 更新图表数据 
                } catch (error) {  
                console.error('Error fetching user:', error)  
                }  
            } ,   

            updateChart(data) {  
                console.log("***赋值之前this.ranking***",this.ranking)
                this.ranking =  {
                    data: data ,
                    carousel: 'page',
                    unit: ' KM'
                },
                console.log("***赋值之后this.ranking***",this.ranking)
            },  
        }
    }
    </script>

<style lang="scss" scoped>
    $box-width: 378px;
    $box-height: 320px;
    .rightboxbottom {
    padding: 16px;
    padding-top: 20px;
    height: $box-height;
    width: $box-width;
    border-radius: 5px;

    .bg-image {
    background-image: url('../../assets/title.png') ;
    background-size: 100% ;
    background-repeat: no-repeat;
    background-position: center;
    width: 80%;
    height: 10%; /* 根据需要设置高度 */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    left:10%;
    top:5px;
    }
    .text-gradient h1 {
    font-size: 18px; /* 根据需要调整字体大小 */
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
    -webkit-background-clip: text;
    background-clip: text;
    display: inline-block;

    letter-spacing: 0.2rem;
    text-shadow: 0 0 30px #89deed;        
    }
    .body-box {
    margin-top:15px;
    margin-left:10px;
    margin-right:10px;

    // border-radius: 10px;
    // overflow: visible;
    .dv-scr-rank-board {
    width: 100%;
    height: $box-height - 115px;  
    }
    }

    .rightBottomNname-content {
    padding-top:15px;
    height:50px;
    text-align: center;  



    font-size : 22px;
    font-weight: 800;
    font-family: 'Times New Roman', Times, serif;

    color: transparent;
    background-image: linear-gradient(to right, #1c5ee4, #07e2f1, #0080ff);
    -webkit-background-clip: text;
    background-clip: text;
    // display: inline-block;

    letter-spacing: 0.2rem;
    text-shadow: 0 0 30px #89deed;  

    }


    }
</style>

运行结果展示如下图，因为默认有sort自动排序，倒也符合展示的意图；

本文到这里就结束了，主要介绍了dataV的轮播表的使用及注意事项。若有出现文中类似情况的小伙伴，欢迎评论区讨论哈，下一篇见！！！

<注>这里放一篇类似的文章，小伙伴可参考着看下<DataV数据可视化之轮播表>：
https://blog.csdn.net/m0_46183499/article/details/112849298?spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-112849298-blog-131206356.235%5Ev43%5Epc_blog_bottom_relevance_base1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-112849298-blog-131206356.235%5Ev43%5Epc_blog_bottom_relevance_base1&utm_relevant_index=24

12345mna

关注

13
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
dataV下的轮播表使用(保姆级)

因为dataV的轮播表是封装好的，能力有限，改不动，（md,人还能让N 憋死？4. 更多详细内容可参考官方文档：[DataV 官方文档](http://datav.jiaminghi.com/guide/)，上述的2、3两点文档里也有，只是为易错点，需特别注意。查了很多资料，也没找到类似的问题，只有官方论坛一个哥们有类似，但好像也是因为浏览器自动翻译引起的，这里不多叙述。也希望后续看到这篇文章的朋友若出现类似问题，并有思路解释的，告知一下。若有出现文中类似情况的小伙伴，欢迎评论区讨论哈，下一篇见！
复制链接

扫一扫