Files
remotedevinfoshow/ui2/src/components/devinfoMain.vue
2024-07-24 13:13:26 +08:00

101 lines
2.4 KiB
Vue

<template>
<a-carousel
style="width: 100vw;height:100vh;"
:default-current="1"
:auto-play="{ interval: 5000}"
indicator-type="line"
show-arrow="always"
arrow-class="color:red !important;"
>
<a-carousel-item v-for="(item,index) in datalist" :key="index">
<devinofgrid :devinfo="item"></devinofgrid>
</a-carousel-item>
</a-carousel>
</template>
<script>
import devinofgrid from "./devinofgrid.vue";
import axios from 'axios';
export default {
name: 'DevinfoMain',
components: {
devinofgrid
},
data() {
return {
datalist: []
// Your component's data goes here
}
},
mounted() {
this.onloaddata();
//每隔1分钟刷新一次
setInterval(() => {
this.onloaddata();
}, 60000);
},
methods: {
// Your component's methods go here
async onloaddata() {
const data=await axios.get('devinfo/getfilelistinfo');
let datalist=data.data;
//每9个数据为一组 不足的不补齐
let newdatalist=[];
let temp=[];
for(let i=0;i<datalist.length;i++)
{
const datestr=datalist[i].last_online
//如果上次时间距离现在超过1天则显示红色
let lasttime=new Date(datestr);
let nowtime=new Date();
datalist[i].from_last_online_time=(nowtime-lasttime)/60000;
let data=await axios.post('devinfo/getdevuserinfo',{devid:datalist[i].autoid});
if (typeof data.data[0].simnumber!="undefined") {
datalist[i].userinfo=data.data[0];
}else{
datalist[i].userinfo=null;
}
}
for(let i=0;i<datalist.length;i++){
if(i%9==0&&i!=0){
newdatalist.push(temp);
temp=[];
}
temp.push(datalist[i]);
}
newdatalist.push(temp);
this.datalist=newdatalist;
// console.log(newdatalist);
}
}
// Your component's JavaScript logic goes here
}
</script>
<style >
/* Your component's CSS styles go here */
.arco-carousel-arrow > div > svg {
color: rgb(0, 255, 132) !important;
font-size: 20px;
width: 100px !important;
height: 100px !important;
}
.arco-carousel-arrow-right {
width: 100px !important;
}
.arco-carousel-arrow-left {
width: 100px !important;
}
</style>