first commit

ui2/src/App.vue

@@ -0,0 +1,15 @@
+<script setup >
+import devinfoshow from './components/devinfoshow.vue'
+import devinfoMain from './components/devinfoMain.vue';
+</script>
+
+<template>
+
+    <!-- <devinfoshow name="devinfoshow" /> -->
+    <devinfo-main></devinfo-main>
+
+</template>
+
+<style scoped>
+
+</style>

ui2/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

ui2/src/components/HelloWorld.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Learn more about IDE Support for Vue in the
+    <a
+      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
+      target="_blank"
+      >Vue Docs Scaling up Guide</a
+    >.
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

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>

ui2/src/components/devinfoshow.vue

@@ -0,0 +1,117 @@
+
+<script>
+import axios from 'axios';
+
+export default {
+    name: 'devinfoshow',
+    data() {
+        return {
+
+        }
+    },
+    props: {
+      devinfo: {
+
+        type: Array,
+        required: true,
+        default:()=>[{
+                name: "设备序列号",
+                status: "在线",
+                lasttime: "2021-10-10 10:10:10",
+                sppercent:10,
+                sptotal:100,
+                mountedon:"No SD card",
+
+              }]
+      }
+        // Your component's props go here
+    },
+    methods: {
+      panduansd(dev){
+        if(dev.mountedon=="/"||dev.mountedon=="No SD card"){
+          return "red"
+        }else{
+          return "black"
+        }
+      },
+      paduanshijian(dev){
+        let datestr=dev.lasttime;
+        //如果上次时间距离现在超过1天则显示红色
+        let lasttime=new Date(datestr);
+        let nowtime=new Date();
+        if((nowtime-lasttime)>1000*60*60*24){
+          return "red"
+        }else{
+          return "black"
+        }
+      }
+
+
+        // Your component's methods go here
+    }
+}
+
+</script>
+<template>
+  
+  <a-card :bordered="false" :style="{ width: '100vw',margin:'auto' }" :hoverable="true">
+    <a-card-grid
+      v-for="(dev, index) in devinfo"
+      :key="index"
+      :hoverable="index % 2 === 0"
+
+      :style="{ width: '32%',height: '31vh',margin: '10px', background: paduanshijian(dev)==='red'?'#FFCCCC':'#CCFFCC'}"
+
+    >
+      <a-card
+        class="card-demo"
+        :title="dev.name"
+        :bordered="false"
+        
+       
+      >
+        <template #extra>
+          <a-link :href="dev.remote_port" target="_blank">查看数据</a-link>
+        </template>
+        <p :style="{ margin: 0,color:dev.from_last_online_time>30?'red':'green'}">
+          设备状态：{{ dev.from_last_online_time>30?'离线'+dev.from_last_online_time+'分钟':'在线' }}
+        </p>
+        <p :style="{ margin: 0 ,color:paduanshijian(dev)}">
+          最新文件时间：{{ dev.lasttime }}
+        </p>
+
+        <template #actions>
+     
+        </template>
+      </a-card>
+      <p style="bottom: 0px; position: absolute; width: 100%; border-top: 1px solid #e8e8e8;margin-bottom: 0px;min-height: 10% "
+      :style="{background:panduansd(dev)==='red'?'#FFCCCC':'#CCFFCC'}">
+         
+
+        <a-row class="grid-demo" :gutter="24" >
+      <a-col :span="14">
+        <div>  SD: {{ dev.sptotal }}GB <a-progress      :style="{ width: '60%' }" :percent="dev.sppercent/100"      color="green"  :status="dev.sppercent>90?'danger':'normal'"/></div>
+      </a-col>
+      <a-col :span="10">
+        <div :style="{color:panduansd(dev)}">挂载路径：{{dev.mountedon }}</div>
+      </a-col>
+    </a-row>
+
+        </p>  
+    </a-card-grid>
+  </a-card>
+</template>
+
+
+
+
+<style scoped>
+/* Your component's CSS styles go here */
+h1 {
+    color: blue;
+}
+.card-demo {
+  width: 100%;
+}
+
+</style>

ui2/src/main.ts

@@ -0,0 +1,15 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import axios from 'axios'
+
+import ArcoVue from '@arco-design/web-vue';
+
+import '@arco-design/web-vue/dist/arco.css';
+
+console.log(window.location.hostname);
+axios.defaults.baseURL = "http://"+window.location.hostname+":1000";
+
+const app=createApp(App);
+app.use(ArcoVue);
+app.mount('#app');

ui2/src/style.css

@@ -0,0 +1,80 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  margin: 0 ;
+  padding: 0;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

ui2/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />