first commit

ui2/src/components/devinfoMain.vue

@@ -0,0 +1,94 @@
+<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">
+    <devinfoshow :devinfo="item"></devinfoshow>
+    </a-carousel-item>
+  </a-carousel>
+
+
+</template>
+
+<script>
+import devinfoshow from './devinfoshow.vue'
+import axios from 'axios';
+export default {
+    name: 'DevinfoMain',
+    components: {
+        devinfoshow
+    },
+    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;
+
+
+        }
+
+
+            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>