菜单 搜索
首页 前端知识 dataV下的轮播表使用(保姆级)

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

2024-08-21 22:08:58 前端知识 前端哥 627 599 我要收藏

需求：展示车辆的当天的里程数，取前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~default~BlogCommendFromBaidu~Rate-18-112849298-blog-131206356.235^v43^pc_blog_bottom_relevance_base1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-18-112849298-blog-131206356.235^v43^pc_blog_bottom_relevance_base1&utm_relevant_index=24
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16410.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！