dataV下的轮播表利用(保姆级)
需求：展示车辆的当天的里程数，取前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: ,
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. 更多具体内容可参考官方文档：(http://datav.jiaminghi.com/guide/)，上述的2、3两点文档里也有，只是为易错点，需特殊留意
https://i-blog.csdnimg.cn/blog_migrate/1abc18ed21ad8c0baacce6758e4f45d9.png https://i-blog.csdnimg.cn/blog_migrate/eded7403365af751a1440f6fb6b02cef.png
本想着这样就可以了，运行了短时间，也很满足。但是过了一会，轮播就出差错了。表现如下：https://i-blog.csdnimg.cn/blog_migrate/83b3aa64605038d5a9ecbbcb62b6be78.png这个48不是返回的数据，打印config.data ，数据也没问题，只是发现多了告诫：
runtime-core.esm-bundler.js:47: 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自动排序，倒也符合展示的意图；
https://i-blog.csdnimg.cn/blog_migrate/5388c914ba4e1ddad4de5582df97b6de.png
本文到这里就竣事了，主要先容了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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]