需求:展示车辆的当天的里程数,取前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