dataV下的轮播表使用(保姆级)
12345mna 2024-08-22 17:33:02 阅读 78
需求：展示车辆的当天的里程数，取前10名，滚动播放。需求很简单，考虑到dataV组件里有该功能，所以就直接采用了。
<code><dv-scroll-ranking-board :config="config" style="width:500px;height:220px" />code>
详细代码：
<template>
<div class="rightboxbottom"> code>
<div class="bg-image">code>
<div class="text-gradient">code>
<h1>车辆行驶排行榜</h1>
</div>
</div>
<div class="body-box">code>
<dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" />code>
</div>
<div class="rightBottomNname-content">今日自动驾驶公里数: { { mileCount }}</div> code>
</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>code>
$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 ，数据也没问题，只是发现多了警告：
<code>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" > code>
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">code>
<div class="bg-image">code>
<div class="text-gradient">code>
<h1>车辆行驶排行榜</h1>
</div>
</div>
<div class="body-box">code>
<!-- <dv-scroll-board class="dv-scr-board" :config="config" ref="scrollBoard" /> -->code>
<dv-scroll-ranking-board class="dv-scr-rank-board" :config="ranking" /> code>
</div>
<div class="rightBottomNname-content">今日自动驾驶公里数: { { mileCount }}</div> code>
</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>code>
$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的轮播表的使用及注意事项。若有出现文中类似情况的小伙伴，欢迎评论区讨论哈，下一篇见！！！
<code><注>这里放一篇类似的文章，小伙伴可参考着看下<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
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。