新增QTG和网络监控页面，暂未实现具体功能
This commit is contained in:
parent
a6a6892897
commit
d5bdea448e
BIN
XNSimHtml/assets/icons/png/network.png
Normal file
BIN
XNSimHtml/assets/icons/png/network.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
XNSimHtml/assets/icons/png/network_b.png
Normal file
BIN
XNSimHtml/assets/icons/png/network_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
@ -126,6 +126,12 @@ class ContentArea extends HTMLElement {
|
||||
case 'data-collection':
|
||||
contentElement = document.createElement('data-collection');
|
||||
break;
|
||||
case 'network-monitor':
|
||||
contentElement = document.createElement('network-monitor');
|
||||
break;
|
||||
case 'qtg':
|
||||
contentElement = document.createElement('qtg-monitor');
|
||||
break;
|
||||
case 'profile':
|
||||
contentElement = document.createElement('profile-center');
|
||||
break;
|
||||
|
||||
107
XNSimHtml/components/network-monitor.js
Normal file
107
XNSimHtml/components/network-monitor.js
Normal file
@ -0,0 +1,107 @@
|
||||
/**
|
||||
* @class NetworkMonitor
|
||||
* @description 网络监控组件，用于监控系统网络状态
|
||||
*/
|
||||
class NetworkMonitor extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.network-monitor-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.monitor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.monitor-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.monitor-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.monitor-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
<div class="network-monitor-container">
|
||||
<div class="monitor-header">
|
||||
<div class="monitor-title">网络监控</div>
|
||||
</div>
|
||||
<div class="monitor-content">
|
||||
<div class="monitor-card">
|
||||
<div class="card-title">网络状态</div>
|
||||
<div class="card-content">
|
||||
正在开发中...
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-card">
|
||||
<div class="card-title">流量统计</div>
|
||||
<div class="card-content">
|
||||
正在开发中...
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-card">
|
||||
<div class="card-title">连接状态</div>
|
||||
<div class="card-content">
|
||||
正在开发中...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
// 初始化网络监控逻辑
|
||||
console.log('网络监控组件已初始化');
|
||||
}
|
||||
|
||||
reactivate() {
|
||||
// 重新激活组件时的逻辑
|
||||
console.log('网络监控组件已重新激活');
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('network-monitor', NetworkMonitor);
|
||||
107
XNSimHtml/components/qtg-monitor.js
Normal file
107
XNSimHtml/components/qtg-monitor.js
Normal file
@ -0,0 +1,107 @@
|
||||
/**
|
||||
* @class QTGMonitor
|
||||
* @description QTG监控组件，用于监控QTG相关状态
|
||||
*/
|
||||
class QTGMonitor extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.qtg-monitor-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.monitor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.monitor-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.monitor-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.monitor-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
<div class="qtg-monitor-container">
|
||||
<div class="monitor-header">
|
||||
<div class="monitor-title">QTG监控</div>
|
||||
</div>
|
||||
<div class="monitor-content">
|
||||
<div class="monitor-card">
|
||||
<div class="card-title">QTG状态</div>
|
||||
<div class="card-content">
|
||||
正在开发中...
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-card">
|
||||
<div class="card-title">性能指标</div>
|
||||
<div class="card-content">
|
||||
正在开发中...
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-card">
|
||||
<div class="card-title">运行日志</div>
|
||||
<div class="card-content">
|
||||
正在开发中...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
// 初始化QTG监控逻辑
|
||||
console.log('QTG监控组件已初始化');
|
||||
}
|
||||
|
||||
reactivate() {
|
||||
// 重新激活组件时的逻辑
|
||||
console.log('QTG监控组件已重新激活');
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('qtg-monitor', QTGMonitor);
|
||||
@ -270,6 +270,14 @@ class SubToolbar extends HTMLElement {
|
||||
<img src="assets/icons/png/database.png" alt="数据采集" class="icon">
|
||||
数据采集
|
||||
</div>
|
||||
<div class="sub-item" data-icon="network">
|
||||
<img src="assets/icons/png/network.png" alt="网络监控" class="icon">
|
||||
网络监控
|
||||
</div>
|
||||
<div class="sub-item" data-icon="qtg">
|
||||
<img src="assets/icons/png/qtg.png" alt="QTG" class="icon">
|
||||
QTG
|
||||
</div>
|
||||
</div>
|
||||
<!-- 系统管理子菜单 -->
|
||||
<div class="sub-menu" data-parent="system">
|
||||
|
||||
@ -26,6 +26,8 @@
|
||||
<script src="components/model-monitor.js"></script>
|
||||
<script src="components/data-monitor.js"></script>
|
||||
<script src="components/data-collection.js"></script>
|
||||
<script src="components/network-monitor.js"></script>
|
||||
<script src="components/qtg-monitor.js"></script>
|
||||
<script src="components/profile-center.js"></script>
|
||||
<script src="components/user-management.js"></script>
|
||||
<script src="components/model-development.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user