xin/remotedevinfoshow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

aaa

Browse Source
This commit is contained in:
任立新
2024-07-24 13:13:26 +08:00
parent 45f62ebe81
commit 7a907c1f18
20 changed files with 475 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui2/index.html
View File

@ -8,6 +8,6 @@
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/main.js"></script>
</body>
</html>

6
ui2/package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"axios": "^1.7.2",
"mitt": "^3.0.1",
"vue": "^3.4.31"
},
"devDependencies": {
@ -1081,6 +1082,11 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
},
"node_modules/muggle-string": {
"version": "0.4.1",
"resolved": "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.4.1.tgz",

1
ui2/package.json
View File

@ -10,6 +10,7 @@
},
"dependencies": {
"axios": "^1.7.2",
"mitt": "^3.0.1",
"vue": "^3.4.31"
},
"devDependencies": {

59
ui2/src/App.vue
View File

@ -1,6 +1,54 @@
<script setup >
import devinfoshow from './components/devinfoshow.vue'
<script>
import devinfoMain from './components/devinfoMain.vue';
import EventBus from "./eventBus.js";
import SetUserinfo from "./components/modar/setUserinfo.vue";
export default {
name: 'App',
components: {
devinfoMain,
SetUserinfo
},
data() {
return {
visible: false,
componentsconfig: {
Title: "Title",
modalcomponent: null,
data: null
}
}
},
methods: {
showModal(data) {
this.visible = true;
this.componentsconfig.Title = data.title;
this.componentsconfig.data = data.data;
this.componentsconfig.modalcomponent = SetUserinfo;
this.$refs.componentconfig.onloaddata(data.data.devid);
},
closeModal() {
this.visible = false;
},
handleOk() {
this.visible = false;
},
handleCancel() {
this.visible = false;
}
},
mounted() {
EventBus.on('showbox', this.showModal);
EventBus.on('closebox', this.closeModal);
// EventBus.emit('showbox',{title:"用户信息",data:{name:"admin"}});
}
}
</script>
<template>
@ -8,6 +56,13 @@ import devinfoMain from './components/devinfoMain.vue';
<!-- <devinfoshow name="devinfoshow" /> -->
<devinfo-main></devinfo-main>
<a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel" draggable>
<template #title>
{{componentsconfig.Title}}
</template>
<component :is="componentsconfig.modalcomponent" :config="componentsconfig.data" ref="componentconfig" ></component>
</a-modal>
</template>
<style scoped>

18
ui2/src/components/devinfoMain.vue
View File

@ -9,7 +9,7 @@
arrow-class="color:red !important;"
>
<a-carousel-item v-for="(item,index) in datalist" :key="index">
<devinfoshow :devinfo="item"></devinfoshow>
<devinofgrid :devinfo="item"></devinofgrid>
</a-carousel-item>
</a-carousel>
@ -17,12 +17,12 @@
</template>
<script>
import devinfoshow from './devinfoshow.vue'
import devinofgrid from "./devinofgrid.vue";
import axios from 'axios';
export default {
name: 'DevinfoMain',
components: {
devinfoshow
devinofgrid
},
data() {
return {
@ -42,9 +42,9 @@ export default {
async onloaddata() {
const data=await axios.get('devinfo/getfilelistinfo');
let datalist=data.data;
//每9个数据为一组 不足的不补齐
let newdatalist=[];
let temp=[];
@ -56,6 +56,12 @@ export default {
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;
}
}
@ -91,4 +97,4 @@ export default {
.arco-carousel-arrow-left {
width: 100px !important;
}
</style>
</style>

67
ui2/src/components/devinfoshow.vue
View File

@ -1,7 +1,7 @@
<script>
import axios from 'axios';
import EventBus from '../eventBus.js';
export default {
name: 'devinfoshow',
data() {
@ -12,9 +12,9 @@ export default {
props: {
devinfo: {
type: Array,
type: Object,
required: true,
default:()=>[{
default:()=>{ return {
name: "设备序列号",
status: "在线",
lasttime: "2021-10-10 10:10:10",
@ -22,7 +22,8 @@ export default {
sptotal:100,
mountedon:"No SD card",
}]
}
}
}
// Your component's props go here
},
@ -34,6 +35,11 @@ export default {
return "black"
}
},
showsetuserinfo(){
console.log("showsetuserinfo");
EventBus.emit('showbox',{title:"用户信息",data:{devid:this.devinfo.autoid}});
},
paduanshijian(dev){
let datestr=dev.lasttime;
//如果上次时间距离现在超过1天则显示红色
@ -53,53 +59,56 @@ export default {
</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"
:title="devinfo.name"
:bordered="false"
>
<template #extra>
<a-link :href="dev.remote_port" target="_blank">查看数据</a-link>
<a-button type="primary" @click="showsetuserinfo">用户信息</a-button>
<a-link :href="devinfo.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 :style="{ margin: 0,color:devinfo.from_last_online_time>30?'red':'green'}">
设备状态：{{ devinfo.from_last_online_time>120?'离线'+devinfo.from_last_online_time+'分钟':'在线' }}
</p>
<p :style="{ margin: 0 ,color:paduanshijian(dev)}">
最新文件时间：{{ dev.lasttime }}
<p :style="{ margin: 0 ,color:paduanshijian(devinfo)}">
最新文件时间：{{ devinfo.lasttime }}
</p>
<div v-if="devinfo.userinfo!=null">
<p>用户名：{{ devinfo.userinfo.devusername }}</p>
<p>sim卡号：{{ devinfo.userinfo.simnumber }}</p>
<p>sim总流量：{{ devinfo.userinfo.simtotal }}</p>
<p>sim已用流量：{{ devinfo.userinfo.simused }}</p>
<p>备注信息：{{ devinfo.userinfo.beizhu }}</p>
<p></p>
</div>
<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'}">
:style="{background:panduansd(devinfo)==='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>
<div> SD: {{ devinfo.sptotal }}GB <a-progress :style="{ width: '60%' }" :percent="devinfo.sppercent/100" color="green" :status="devinfo.sppercent>90?'danger':'normal'"/></div>
</a-col>
<a-col :span="10">
<div :style="{color:panduansd(dev)}">挂载路径：{{dev.mountedon }}</div>
<div :style="{color:panduansd(devinfo)}">挂载路径：{{devinfo.mountedon }}</div>
</a-col>
</a-row>
</p>
</a-card-grid>
</a-card>
</p>
</template>
@ -114,4 +123,4 @@ h1 {
width: 100%;
}
</style>
</style>

81
ui2/src/components/devinofgrid.vue
View File

@ -1,11 +1,86 @@
<script setup lang="ts">
<script>
import axios from 'axios';
import devinfoshow from "./devinfoshow.vue";
export default {
name: 'devinofgrid',
components: {
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>
$END$
<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'}"
>
<devinfoshow :devinfo="dev" ></devinfoshow>
</a-card-grid>
</a-card>
</template>
<style scoped>
/* Your component's CSS styles go here */
h1 {
color: blue;
}
.card-demo {
width: 100%;
}
</style>

95
ui2/src/components/modar/setUserinfo.vue
View File

@ -1,9 +1,102 @@
<script setup lang="ts">
<script >
import axios from "axios";
import EventBus from "../../eventBus.js";
export default {
name: "SetUserinfo",
props:{
config:{
type:Object,
default(){
return {
devid:0,
}
}
}
},
data() {
return {
data:{
devname:"设备名称",
devid:0,
simnumber:"sim卡号",
simused:0,
devusername:"设备用户名",
beizhu:"备注"
}
// Your component's data goes here
}
},
mounted() {
console.log(this.config);
this.onloaddata(this.config.devid);
},
methods: {
async subumit(){
if (typeof this.data.devid == "undefined"
|| typeof this.data.simnumber == "undefined"
|| typeof this.data.devusername == "undefined"
|| typeof this.data.devname == "undefined"
) {
alert("未定义");
return;
}
let data=await axios.post('devinfo/setdevuserinfo',this.data);
let sat=data.data;
if(sat.status=="success") {
alert("设置成功");
EventBus.emit('closebox');
}
},
async onloaddata(devid) {
let data=await axios.post('devinfo/getdevuserinfo',{devid:devid});
let datalist=data.data;
this.data=datalist[0];
console.log(datalist);
}
// Your component's methods go here
}
}
</script>
<template>
<form>
<a-row>
<a-col span="8">设备名称:</a-col>
<a-col span="16">{{data.devname}}</a-col>
<input name="devname" v-model="data.devname" hidden="hidden">
<input name="devid" v-model="data.devid" hidden="hidden">
<input name="simused" v-model="data.simused" hidden="hidden">
</a-row>
<a-row>
<a-col span="8">sim卡号:</a-col>
<a-col span="16">
<input name="simnumber" type="number" v-model="data.simnumber" >
</a-col>
</a-row>
<a-row>
<a-col span="8">设备用户名:</a-col>
<a-col span="16">
<input name="devusername" v-model="data.devusername" >
</a-col>
</a-row>
<a-row>
<a-col span="8">备注:</a-col>
<a-col span="16"> <textarea name="text" v-model="data.beizhu" /></a-col>
</a-row>
<a-row>
<a-button type="primary" @click="subumit" >提交</a-button>
</a-row>
</form>
</template>
<style scoped>

5
ui2/src/eventBus.js
View File

@ -0,0 +1,5 @@
import mitt from 'mitt';
const EventBus = mitt();
export default EventBus;

4
ui2/src/main.js
View File

@ -6,10 +6,10 @@ import axios from 'axios'
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
import EventBus from "./eventBus.js";
console.log(window.location.hostname);
axios.defaults.baseURL = "http://"+window.location.hostname+":1000";
// axios.defaults.baseURL = "http://172.16.0.251:1000";
const app=createApp(App);
app.use(ArcoVue);
app.mount('#app');

15
ui2/src/main.ts
View File

@ -1,15 +0,0 @@
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');

2
ui2/tsconfig.app.json
View File

@ -23,5 +23,5 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/main.js"]
}

1
ui2/vite.config.ts
View File

@ -7,4 +7,5 @@ export default defineConfig({
server:{
host:'0.0.0.0'
},
base: './'
})