From bc56530307e0e92b94a1abb5d38368f04b92e990 Mon Sep 17 00:00:00 2001
From: zhang <zc857179121@qq.com>
Date: 星期四, 12 三月 2026 15:52:15 +0800
Subject: [PATCH] 1
---
zy-acs-hex/dashboard.html | 728 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 402 insertions(+), 326 deletions(-)
diff --git a/zy-acs-hex/dashboard.html b/zy-acs-hex/dashboard.html
index 378c261..3e8001b 100644
--- a/zy-acs-hex/dashboard.html
+++ b/zy-acs-hex/dashboard.html
@@ -19,21 +19,27 @@
font-family: 'Inter', sans-serif;
background-color: #f5f7fa;
}
+
.layui-card {
margin-bottom: 16px;
}
+
.layui-card-header {
font-weight: 600;
}
+
.status-online {
color: #10b981;
}
+
.status-offline {
color: #ef4444;
}
+
.chart-container {
height: 300px;
}
+
.realtime-container {
height: 160px;
overflow-y: auto;
@@ -41,352 +47,422 @@
</style>
</head>
<body>
- <div id="app">
- <!-- 椤堕儴瀵艰埅鏍� -->
- <lay-header height="60px" bg-color="#fff" shadow>
- <template #left>
- <div class="flex items-center space-x-2">
- <i class="fa fa-android text-2xl" style="color: #3b82f6"></i>
- <h1 class="text-xl font-bold" style="color: #1e293b">鏈哄櫒浜烘暟鎹洃鎺�</h1>
- </div>
- </template>
- <template #right>
- <div class="flex items-center space-x-4">
- <lay-input placeholder="鎼滅储鏈哄櫒浜�..." prefix-icon="search" style="width: 200px"></lay-input>
- <lay-button type="primary" @click="refreshData">
- <i class="fa fa-refresh mr-1"></i> 鍒锋柊
- </lay-button>
- </div>
- </template>
- </lay-header>
+<div id="app">
+ <!-- 椤堕儴瀵艰埅鏍� -->
+ <lay-header height="60px" bg-color="#fff" shadow>
+ <template #left>
+ <div class="flex items-center space-x-2">
+ <i class="fa fa-android text-2xl" style="color: #3b82f6"></i>
+ <h1 class="text-xl font-bold" style="color: #1e293b">鏈哄櫒浜烘暟鎹洃鎺�</h1>
+ </div>
+ </template>
+ <template #right>
+ <div class="flex items-center space-x-4">
+ <lay-input placeholder="鎼滅储鏈哄櫒浜�..." prefix-icon="search" style="width: 200px"></lay-input>
+ <lay-button type="primary" @click="refreshData">
+ <i class="fa fa-refresh mr-1"></i> 鍒锋柊
+ </lay-button>
+ </div>
+ </template>
+ </lay-header>
- <!-- 涓诲唴瀹瑰尯 -->
- <lay-container style="padding: 20px">
- <!-- 鐘舵�佹瑙� -->
- <lay-row :gutter="16">
- <lay-col :span="6">
- <lay-card shadow>
- <div class="flex items-center justify-between">
- <div>
- <p style="color: #64748b; font-size: 14px">鎬绘満鍣ㄤ汉鏁�</p>
- <h3 style="font-size: 24px; font-weight: bold; color: #1e293b">24</h3>
- </div>
- <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #dbeafe; display: flex; align-items: center; justify-content: center">
- <i class="fa fa-microchip text-xl" style="color: #3b82f6"></i>
- </div>
+ <!-- 涓诲唴瀹瑰尯 -->
+ <lay-container style="padding: 20px">
+ <!-- 鐘舵�佹瑙� -->
+ <lay-row :gutter="16">
+ <lay-col :span="6">
+ <lay-card shadow>
+ <div class="flex items-center justify-between">
+ <div>
+ <p style="color: #64748b; font-size: 14px">鎬绘満鍣ㄤ汉鏁�</p>
+ <h3 style="font-size: 24px; font-weight: bold; color: #1e293b">24</h3>
</div>
- </lay-card>
- </lay-col>
- <lay-col :span="6">
- <lay-card shadow>
- <div class="flex items-center justify-between">
- <div>
- <p style="color: #64748b; font-size: 14px">鍦ㄧ嚎鏈哄櫒浜�</p>
- <h3 style="font-size: 24px; font-weight: bold; color: #10b981">18</h3>
- </div>
- <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #d1fae5; display: flex; align-items: center; justify-content: center">
- <i class="fa fa-check-circle text-xl" style="color: #10b981"></i>
- </div>
- </div>
- </lay-card>
- </lay-col>
- <lay-col :span="6">
- <lay-card shadow>
- <div class="flex items-center justify-between">
- <div>
- <p style="color: #64748b; font-size: 14px">绂荤嚎鏈哄櫒浜�</p>
- <h3 style="font-size: 24px; font-weight: bold; color: #ef4444">6</h3>
- </div>
- <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #fee2e2; display: flex; align-items: center; justify-content: center">
- <i class="fa fa-exclamation-circle text-xl" style="color: #ef4444"></i>
- </div>
- </div>
- </lay-card>
- </lay-col>
- <lay-col :span="6">
- <lay-card shadow>
- <div class="flex items-center justify-between">
- <div>
- <p style="color: #64748b; font-size: 14px">浠婃棩鏁版嵁閲�</p>
- <h3 style="font-size: 24px; font-weight: bold; color: #f59e0b">1.2k</h3>
- </div>
- <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #fef3c7; display: flex; align-items: center; justify-content: center">
- <i class="fa fa-database text-xl" style="color: #f59e0b"></i>
- </div>
- </div>
- </lay-card>
- </lay-col>
- </lay-row>
-
- <!-- 鏁版嵁鍥捐〃 -->
- <lay-row :gutter="16" style="margin-top: 16px">
- <lay-col :span="12">
- <lay-card shadow>
- <template #header>
- <div class="flex justify-between items-center">
- <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">涓婅鏁版嵁瓒嬪娍</h2>
- <div class="flex space-x-2">
- <lay-button size="sm" type="primary">灏忔椂</lay-button>
- <lay-button size="sm">澶�</lay-button>
- <lay-button size="sm">鍛�</lay-button>
- </div>
- </div>
- </template>
- <div class="chart-container">
- <canvas ref="upDataChart"></canvas>
- </div>
- </lay-card>
- </lay-col>
- <lay-col :span="12">
- <lay-card shadow>
- <template #header>
- <div class="flex justify-between items-center">
- <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">涓嬭鏁版嵁瓒嬪娍</h2>
- <div class="flex space-x-2">
- <lay-button size="sm" type="primary">灏忔椂</lay-button>
- <lay-button size="sm">澶�</lay-button>
- <lay-button size="sm">鍛�</lay-button>
- </div>
- </div>
- </template>
- <div class="chart-container">
- <canvas ref="downDataChart"></canvas>
- </div>
- </lay-card>
- </lay-col>
- </lay-row>
-
- <!-- 璁惧鏁版嵁琛ㄦ牸 -->
- <lay-card shadow style="margin-top: 16px">
- <template #header>
- <div class="flex justify-between items-center">
- <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">鏈哄櫒浜烘暟鎹垪琛�</h2>
- <div class="flex space-x-2">
- <lay-button size="sm">
- <i class="fa fa-filter mr-1"></i> 绛涢��
- </lay-button>
- <lay-button size="sm">
- <i class="fa fa-download mr-1"></i> 瀵煎嚭
- </lay-button>
+ <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #dbeafe; display: flex; align-items: center; justify-content: center">
+ <i class="fa fa-microchip text-xl" style="color: #3b82f6"></i>
</div>
</div>
- </template>
- <lay-table :data="devices" :height="400">
- <lay-table-column prop="id" label="璁惧ID" width="120"></lay-table-column>
- <lay-table-column prop="name" label="璁惧鍚嶇О" width="150"></lay-table-column>
- <lay-table-column prop="status" label="鐘舵��" width="100">
- <template #default="{ row }">
- <lay-badge v-if="row.status === 'online'" type="success">鍦ㄧ嚎</lay-badge>
- <lay-badge v-else type="danger">绂荤嚎</lay-badge>
- </template>
- </lay-table-column>
- <lay-table-column prop="upData" label="涓婅鏁版嵁" width="120"></lay-table-column>
- <lay-table-column prop="downData" label="涓嬭鏁版嵁" width="120"></lay-table-column>
- <lay-table-column prop="lastComm" label="鏈�鍚庨�氫俊" width="150"></lay-table-column>
- <lay-table-column label="鎿嶄綔" width="150">
- <template #default="{ row }">
- <lay-button size="sm" type="primary" style="margin-right: 8px">
- <i class="fa fa-eye"></i>
- </lay-button>
- <lay-button size="sm" type="warning" style="margin-right: 8px">
- <i class="fa fa-edit"></i>
- </lay-button>
- <lay-button size="sm" type="danger">
- <i class="fa fa-trash"></i>
- </lay-button>
- </template>
- </lay-table-column>
- </lay-table>
- <div class="flex justify-between items-center mt-4">
- <p style="color: #64748b; font-size: 14px">鏄剧ず 1-10 鏉★紝鍏� 24 鏉�</p>
- <lay-pagination
+ </lay-card>
+ </lay-col>
+ <lay-col :span="6">
+ <lay-card shadow>
+ <div class="flex items-center justify-between">
+ <div>
+ <p style="color: #64748b; font-size: 14px">鍦ㄧ嚎鏈哄櫒浜�</p>
+ <h3 style="font-size: 24px; font-weight: bold; color: #10b981">18</h3>
+ </div>
+ <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #d1fae5; display: flex; align-items: center; justify-content: center">
+ <i class="fa fa-check-circle text-xl" style="color: #10b981"></i>
+ </div>
+ </div>
+ </lay-card>
+ </lay-col>
+ <lay-col :span="6">
+ <lay-card shadow>
+ <div class="flex items-center justify-between">
+ <div>
+ <p style="color: #64748b; font-size: 14px">绂荤嚎鏈哄櫒浜�</p>
+ <h3 style="font-size: 24px; font-weight: bold; color: #ef4444">6</h3>
+ </div>
+ <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #fee2e2; display: flex; align-items: center; justify-content: center">
+ <i class="fa fa-exclamation-circle text-xl" style="color: #ef4444"></i>
+ </div>
+ </div>
+ </lay-card>
+ </lay-col>
+ <lay-col :span="6">
+ <lay-card shadow>
+ <div class="flex items-center justify-between">
+ <div>
+ <p style="color: #64748b; font-size: 14px">浠婃棩鏁版嵁閲�</p>
+ <h3 style="font-size: 24px; font-weight: bold; color: #f59e0b">1.2k</h3>
+ </div>
+ <div style="width: 48px; height: 48px; border-radius: 50%; background-color: #fef3c7; display: flex; align-items: center; justify-content: center">
+ <i class="fa fa-database text-xl" style="color: #f59e0b"></i>
+ </div>
+ </div>
+ </lay-card>
+ </lay-col>
+ </lay-row>
+
+ <!-- 鏁版嵁鍥捐〃 -->
+ <lay-row :gutter="16" style="margin-top: 16px">
+ <lay-col :span="12">
+ <lay-card shadow>
+ <template #header>
+ <div class="flex justify-between items-center">
+ <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">涓婅鏁版嵁瓒嬪娍</h2>
+ <div class="flex space-x-2">
+ <lay-button size="sm" type="primary">灏忔椂</lay-button>
+ <lay-button size="sm">澶�</lay-button>
+ <lay-button size="sm">鍛�</lay-button>
+ </div>
+ </div>
+ </template>
+ <div class="chart-container">
+ <canvas ref="upDataChart"></canvas>
+ </div>
+ </lay-card>
+ </lay-col>
+ <lay-col :span="12">
+ <lay-card shadow>
+ <template #header>
+ <div class="flex justify-between items-center">
+ <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">涓嬭鏁版嵁瓒嬪娍</h2>
+ <div class="flex space-x-2">
+ <lay-button size="sm" type="primary">灏忔椂</lay-button>
+ <lay-button size="sm">澶�</lay-button>
+ <lay-button size="sm">鍛�</lay-button>
+ </div>
+ </div>
+ </template>
+ <div class="chart-container">
+ <canvas ref="downDataChart"></canvas>
+ </div>
+ </lay-card>
+ </lay-col>
+ </lay-row>
+
+ <!-- 璁惧鏁版嵁琛ㄦ牸 -->
+ <lay-card shadow style="margin-top: 16px">
+ <template #header>
+ <div class="flex justify-between items-center">
+ <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">鏈哄櫒浜烘暟鎹垪琛�</h2>
+ <div class="flex space-x-2">
+ <lay-button size="sm">
+ <i class="fa fa-filter mr-1"></i> 绛涢��
+ </lay-button>
+ <lay-button size="sm">
+ <i class="fa fa-download mr-1"></i> 瀵煎嚭
+ </lay-button>
+ </div>
+ </div>
+ </template>
+ <lay-table :data="devices" :height="400">
+ <lay-table-column prop="id" label="璁惧ID" width="120"></lay-table-column>
+ <lay-table-column prop="name" label="璁惧鍚嶇О" width="150"></lay-table-column>
+ <lay-table-column prop="status" label="鐘舵��" width="100">
+ <template #default="{ row }">
+ <lay-badge v-if="row.status === 'online'" type="success">鍦ㄧ嚎</lay-badge>
+ <lay-badge v-else type="danger">绂荤嚎</lay-badge>
+ </template>
+ </lay-table-column>
+ <lay-table-column prop="upData" label="涓婅鏁版嵁" width="120"></lay-table-column>
+ <lay-table-column prop="downData" label="涓嬭鏁版嵁" width="120"></lay-table-column>
+ <lay-table-column prop="lastComm" label="鏈�鍚庨�氫俊" width="150"></lay-table-column>
+ <lay-table-column label="鎿嶄綔" width="150">
+ <template #default="{ row }">
+ <lay-button size="sm" type="primary" style="margin-right: 8px">
+ <i class="fa fa-eye"></i>
+ </lay-button>
+ <lay-button size="sm" type="warning" style="margin-right: 8px">
+ <i class="fa fa-edit"></i>
+ </lay-button>
+ <lay-button size="sm" type="danger">
+ <i class="fa fa-trash"></i>
+ </lay-button>
+ </template>
+ </lay-table-column>
+ </lay-table>
+ <div class="flex justify-between items-center mt-4">
+ <p style="color: #64748b; font-size: 14px">鏄剧ず 1-10 鏉★紝鍏� 24 鏉�</p>
+ <lay-pagination
v-model:current="currentPage"
v-model:limit="pageSize"
:total="total"
:limits="[10, 20, 50, 100]"
layout="prev, pager, next, jumper, sizes, total"
- ></lay-pagination>
- </div>
- </lay-card>
-
- <!-- 瀹炴椂鏁版嵁鏇存柊 -->
- <lay-card shadow style="margin-top: 16px">
- <template #header>
- <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">瀹炴椂鏁版嵁鏇存柊</h2>
- </template>
- <div class="realtime-container p-2 border border-gray-200 rounded-lg">
- <div v-for="(item, index) in realtimeData" :key="index" class="py-1 border-b border-gray-100">
- <span style="color: #64748b; font-size: 12px">{{ item.timestamp }}</span>
- <span style="color: #1e293b; margin-left: 10px">{{ item.message }}</span>
- </div>
- </div>
- </lay-card>
- </lay-container>
-
- <!-- 椤佃剼 -->
- <lay-footer height="60px" bg-color="#fff" shadow>
- <div class="text-center" style="color: #64748b; font-size: 14px">
- 漏 2026 鏈哄櫒浜烘暟鎹洃鎺х郴缁� | 鐗堟湰 1.0.0
+ ></lay-pagination>
</div>
- </lay-footer>
- </div>
+ </lay-card>
- <script>
- const { createApp, ref, onMounted } = Vue;
- const app = createApp({
- components: {
- LayHeader: layui.LayHeader,
- LayContainer: layui.LayContainer,
- LayRow: layui.LayRow,
- LayCol: layui.LayCol,
- LayCard: layui.LayCard,
- LayInput: layui.LayInput,
- LayButton: layui.LayButton,
- LayTable: layui.LayTable,
- LayTableColumn: layui.LayTableColumn,
- LayBadge: layui.LayBadge,
- LayPagination: layui.LayPagination,
- LayFooter: layui.LayFooter
- },
- setup() {
- // 妯℃嫙鏈哄櫒浜烘暟鎹�
- const devices = ref([
- { id: 'ROB-001', name: '閰嶉�佹満鍣ㄤ汉1鍙�', status: 'online', upData: '2.4KB', downData: '0.8KB', lastComm: '2鍒嗛挓鍓�' },
- { id: 'ROB-002', name: '閰嶉�佹満鍣ㄤ汉2鍙�', status: 'online', upData: '1.8KB', downData: '0.5KB', lastComm: '5鍒嗛挓鍓�' },
- { id: 'ROB-003', name: '宸℃鏈哄櫒浜�1鍙�', status: 'offline', upData: '0KB', downData: '0KB', lastComm: '2灏忔椂鍓�' },
- { id: 'ROB-004', name: '閰嶉�佹満鍣ㄤ汉3鍙�', status: 'online', upData: '3.2KB', downData: '1.2KB', lastComm: '1鍒嗛挓鍓�' },
- { id: 'ROB-005', name: '宸℃鏈哄櫒浜�2鍙�', status: 'online', upData: '1.5KB', downData: '0.6KB', lastComm: '3鍒嗛挓鍓�' },
- { id: 'ROB-006', name: '閰嶉�佹満鍣ㄤ汉4鍙�', status: 'offline', upData: '0KB', downData: '0KB', lastComm: '5灏忔椂鍓�' },
- { id: 'ROB-007', name: '宸℃鏈哄櫒浜�3鍙�', status: 'online', upData: '2.1KB', downData: '0.9KB', lastComm: '4鍒嗛挓鍓�' },
- { id: 'ROB-008', name: '閰嶉�佹満鍣ㄤ汉5鍙�', status: 'online', upData: '2.8KB', downData: '1.1KB', lastComm: '2鍒嗛挓鍓�' },
- { id: 'ROB-009', name: '宸℃鏈哄櫒浜�4鍙�', status: 'offline', upData: '0KB', downData: '0KB', lastComm: '1澶╁墠' },
- { id: 'ROB-010', name: '閰嶉�佹満鍣ㄤ汉6鍙�', status: 'online', upData: '1.9KB', downData: '0.7KB', lastComm: '6鍒嗛挓鍓�' }
- ]);
+ <!-- 瀹炴椂鏁版嵁鏇存柊 -->
+ <lay-card shadow style="margin-top: 16px">
+ <template #header>
+ <h2 style="font-size: 16px; font-weight: 600; color: #1e293b">瀹炴椂鏁版嵁鏇存柊</h2>
+ </template>
+ <div class="realtime-container p-2 border border-gray-200 rounded-lg">
+ <div v-for="(item, index) in realtimeData" :key="index" class="py-1 border-b border-gray-100">
+ <span style="color: #64748b; font-size: 12px">{{ item.timestamp }}</span>
+ <span style="color: #1e293b; margin-left: 10px">{{ item.message }}</span>
+ </div>
+ </div>
+ </lay-card>
+ </lay-container>
- // 鍒嗛〉鏁版嵁
- const currentPage = ref(1);
- const pageSize = ref(10);
- const total = ref(24);
+ <!-- 椤佃剼 -->
+ <lay-footer height="60px" bg-color="#fff" shadow>
+ <div class="text-center" style="color: #64748b; font-size: 14px">
+ 漏 2026 鏈哄櫒浜烘暟鎹洃鎺х郴缁� | 鐗堟湰 1.0.0
+ </div>
+ </lay-footer>
+</div>
- // 瀹炴椂鏁版嵁
- const realtimeData = ref([]);
+<script>
+ const {createApp, ref, onMounted} = Vue;
+ const app = createApp({
+ components: {
+ LayHeader: layui.LayHeader,
+ LayContainer: layui.LayContainer,
+ LayRow: layui.LayRow,
+ LayCol: layui.LayCol,
+ LayCard: layui.LayCard,
+ LayInput: layui.LayInput,
+ LayButton: layui.LayButton,
+ LayTable: layui.LayTable,
+ LayTableColumn: layui.LayTableColumn,
+ LayBadge: layui.LayBadge,
+ LayPagination: layui.LayPagination,
+ LayFooter: layui.LayFooter
+ },
+ setup() {
+ // 妯℃嫙鏈哄櫒浜烘暟鎹�
+ const devices = ref([
+ {
+ id: 'ROB-001',
+ name: '閰嶉�佹満鍣ㄤ汉1鍙�',
+ status: 'online',
+ upData: '2.4KB',
+ downData: '0.8KB',
+ lastComm: '2鍒嗛挓鍓�'
+ },
+ {
+ id: 'ROB-002',
+ name: '閰嶉�佹満鍣ㄤ汉2鍙�',
+ status: 'online',
+ upData: '1.8KB',
+ downData: '0.5KB',
+ lastComm: '5鍒嗛挓鍓�'
+ },
+ {
+ id: 'ROB-003',
+ name: '宸℃鏈哄櫒浜�1鍙�',
+ status: 'offline',
+ upData: '0KB',
+ downData: '0KB',
+ lastComm: '2灏忔椂鍓�'
+ },
+ {
+ id: 'ROB-004',
+ name: '閰嶉�佹満鍣ㄤ汉3鍙�',
+ status: 'online',
+ upData: '3.2KB',
+ downData: '1.2KB',
+ lastComm: '1鍒嗛挓鍓�'
+ },
+ {
+ id: 'ROB-005',
+ name: '宸℃鏈哄櫒浜�2鍙�',
+ status: 'online',
+ upData: '1.5KB',
+ downData: '0.6KB',
+ lastComm: '3鍒嗛挓鍓�'
+ },
+ {
+ id: 'ROB-006',
+ name: '閰嶉�佹満鍣ㄤ汉4鍙�',
+ status: 'offline',
+ upData: '0KB',
+ downData: '0KB',
+ lastComm: '5灏忔椂鍓�'
+ },
+ {
+ id: 'ROB-007',
+ name: '宸℃鏈哄櫒浜�3鍙�',
+ status: 'online',
+ upData: '2.1KB',
+ downData: '0.9KB',
+ lastComm: '4鍒嗛挓鍓�'
+ },
+ {
+ id: 'ROB-008',
+ name: '閰嶉�佹満鍣ㄤ汉5鍙�',
+ status: 'online',
+ upData: '2.8KB',
+ downData: '1.1KB',
+ lastComm: '2鍒嗛挓鍓�'
+ },
+ {
+ id: 'ROB-009',
+ name: '宸℃鏈哄櫒浜�4鍙�',
+ status: 'offline',
+ upData: '0KB',
+ downData: '0KB',
+ lastComm: '1澶╁墠'
+ },
+ {
+ id: 'ROB-010',
+ name: '閰嶉�佹満鍣ㄤ汉6鍙�',
+ status: 'online',
+ upData: '1.9KB',
+ downData: '0.7KB',
+ lastComm: '6鍒嗛挓鍓�'
+ }
+ ]);
- // 鍥捐〃寮曠敤
- const upDataChart = ref(null);
- const downDataChart = ref(null);
+ // 鍒嗛〉鏁版嵁
+ const currentPage = ref(1);
+ const pageSize = ref(10);
+ const total = ref(24);
- // 鍒锋柊鏁版嵁
- const refreshData = () => {
- console.log('鍒锋柊鏁版嵁');
- // 杩欓噷鍙互娣诲姞瀹為檯鐨勫埛鏂伴�昏緫
- };
+ // 瀹炴椂鏁版嵁
+ const realtimeData = ref([]);
- // 鍒濆鍖栧浘琛�
- const initCharts = () => {
- // 涓婅鏁版嵁鍥捐〃
- const upCtx = upDataChart.value.getContext('2d');
- new Chart(upCtx, {
- type: 'line',
- data: {
- labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
- datasets: [{
- label: '涓婅鏁版嵁 (KB)',
- data: [12, 19, 15, 25, 22, 30, 28, 35],
- borderColor: '#3b82f6',
- backgroundColor: 'rgba(59, 130, 246, 0.1)',
- tension: 0.4,
- fill: true
- }]
+ // 鍥捐〃寮曠敤
+ const upDataChart = ref(null);
+ const downDataChart = ref(null);
+
+ // 鍒锋柊鏁版嵁
+ const refreshData = () => {
+ console.log('鍒锋柊鏁版嵁');
+ // 杩欓噷鍙互娣诲姞瀹為檯鐨勫埛鏂伴�昏緫
+ };
+
+ // 鍒濆鍖栧浘琛�
+ const initCharts = () => {
+ // 涓婅鏁版嵁鍥捐〃
+ const upCtx = upDataChart.value.getContext('2d');
+ new Chart(upCtx, {
+ type: 'line',
+ data: {
+ labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
+ datasets: [{
+ label: '涓婅鏁版嵁 (KB)',
+ data: [12, 19, 15, 25, 22, 30, 28, 35],
+ borderColor: '#3b82f6',
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
+ tension: 0.4,
+ fill: true
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false
+ }
},
- options: {
- responsive: true,
- maintainAspectRatio: false,
- plugins: {
- legend: {
- display: false
- }
- },
- scales: {
- y: {
- beginAtZero: true
- }
+ scales: {
+ y: {
+ beginAtZero: true
}
}
- });
-
- // 涓嬭鏁版嵁鍥捐〃
- const downCtx = downDataChart.value.getContext('2d');
- new Chart(downCtx, {
- type: 'line',
- data: {
- labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
- datasets: [{
- label: '涓嬭鏁版嵁 (KB)',
- data: [5, 8, 6, 12, 10, 15, 13, 18],
- borderColor: '#10b981',
- backgroundColor: 'rgba(16, 185, 129, 0.1)',
- tension: 0.4,
- fill: true
- }]
- },
- options: {
- responsive: true,
- maintainAspectRatio: false,
- plugins: {
- legend: {
- display: false
- }
- },
- scales: {
- y: {
- beginAtZero: true
- }
- }
- }
- });
- };
-
- // 妯℃嫙瀹炴椂鏁版嵁鏇存柊
- const simulateRealtimeData = () => {
- const messages = [
- 'ROB-001 閰嶉�佹満鍣ㄤ汉1鍙�: 杩愯涓紝浣嶇疆: A1鍖�',
- 'ROB-002 閰嶉�佹満鍣ㄤ汉2鍙�: 寰呮満涓紝浣嶇疆: B2鍖�',
- 'ROB-004 閰嶉�佹満鍣ㄤ汉3鍙�: 鍏呯數涓紝鐢甸噺: 85%',
- 'ROB-005 宸℃鏈哄櫒浜�2鍙�: 宸℃涓紝宸插畬鎴�3/5浠诲姟',
- 'ROB-007 宸℃鏈哄櫒浜�3鍙�: 寰呮満涓紝浣嶇疆: C3鍖�',
- 'ROB-008 閰嶉�佹満鍣ㄤ汉5鍙�: 杩愯涓紝浣嶇疆: D4鍖�'
- ];
-
- setInterval(() => {
- const message = messages[Math.floor(Math.random() * messages.length)];
- const timestamp = new Date().toLocaleTimeString();
- realtimeData.value.unshift({ timestamp, message });
- // 闄愬埗鏄剧ず鏉℃暟
- if (realtimeData.value.length > 20) {
- realtimeData.value.pop();
- }
- }, 2000);
- };
-
- // 椤甸潰鍔犺浇瀹屾垚鍚庡垵濮嬪寲
- onMounted(() => {
- initCharts();
- simulateRealtimeData();
+ }
});
- return {
- devices,
- currentPage,
- pageSize,
- total,
- realtimeData,
- upDataChart,
- downDataChart,
- refreshData
- };
- }
- });
- app.mount('#app');
- </script>
+ // 涓嬭鏁版嵁鍥捐〃
+ const downCtx = downDataChart.value.getContext('2d');
+ new Chart(downCtx, {
+ type: 'line',
+ data: {
+ labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
+ datasets: [{
+ label: '涓嬭鏁版嵁 (KB)',
+ data: [5, 8, 6, 12, 10, 15, 13, 18],
+ borderColor: '#10b981',
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
+ tension: 0.4,
+ fill: true
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false
+ }
+ },
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+ };
+
+ // 妯℃嫙瀹炴椂鏁版嵁鏇存柊
+ const simulateRealtimeData = () => {
+ const messages = [
+ 'ROB-001 閰嶉�佹満鍣ㄤ汉1鍙�: 杩愯涓紝浣嶇疆: A1鍖�',
+ 'ROB-002 閰嶉�佹満鍣ㄤ汉2鍙�: 寰呮満涓紝浣嶇疆: B2鍖�',
+ 'ROB-004 閰嶉�佹満鍣ㄤ汉3鍙�: 鍏呯數涓紝鐢甸噺: 85%',
+ 'ROB-005 宸℃鏈哄櫒浜�2鍙�: 宸℃涓紝宸插畬鎴�3/5浠诲姟',
+ 'ROB-007 宸℃鏈哄櫒浜�3鍙�: 寰呮満涓紝浣嶇疆: C3鍖�',
+ 'ROB-008 閰嶉�佹満鍣ㄤ汉5鍙�: 杩愯涓紝浣嶇疆: D4鍖�'
+ ];
+
+ setInterval(() => {
+ const message = messages[Math.floor(Math.random() * messages.length)];
+ const timestamp = new Date().toLocaleTimeString();
+ realtimeData.value.unshift({timestamp, message});
+ // 闄愬埗鏄剧ず鏉℃暟
+ if (realtimeData.value.length > 20) {
+ realtimeData.value.pop();
+ }
+ }, 2000);
+ };
+
+ // 椤甸潰鍔犺浇瀹屾垚鍚庡垵濮嬪寲
+ onMounted(() => {
+ initCharts();
+ simulateRealtimeData();
+ });
+
+ return {
+ devices,
+ currentPage,
+ pageSize,
+ total,
+ realtimeData,
+ upDataChart,
+ downDataChart,
+ refreshData
+ };
+ }
+ });
+ app.mount('#app');
+</script>
</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.1