新增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':
|
case 'data-collection':
|
||||||
contentElement = document.createElement('data-collection');
|
contentElement = document.createElement('data-collection');
|
||||||
break;
|
break;
|
||||||
|
case 'network-monitor':
|
||||||
|
contentElement = document.createElement('network-monitor');
|
||||||
|
break;
|
||||||
|
case 'qtg':
|
||||||
|
contentElement = document.createElement('qtg-monitor');
|
||||||
|
break;
|
||||||
case 'profile':
|
case 'profile':
|
||||||
contentElement = document.createElement('profile-center');
|
contentElement = document.createElement('profile-center');
|
||||||
break;
|
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">
|
<img src="assets/icons/png/database.png" alt="数据采集" class="icon">
|
||||||
数据采集
|
数据采集
|
||||||
</div>
|
</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>
|
||||||
<!-- 系统管理子菜单 -->
|
<!-- 系统管理子菜单 -->
|
||||||
<div class="sub-menu" data-parent="system">
|
<div class="sub-menu" data-parent="system">
|
||||||
|
|||||||
@ -26,6 +26,8 @@
|
|||||||
<script src="components/model-monitor.js"></script>
|
<script src="components/model-monitor.js"></script>
|
||||||
<script src="components/data-monitor.js"></script>
|
<script src="components/data-monitor.js"></script>
|
||||||
<script src="components/data-collection.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/profile-center.js"></script>
|
||||||
<script src="components/user-management.js"></script>
|
<script src="components/user-management.js"></script>
|
||||||
<script src="components/model-development.js"></script>
|
<script src="components/model-development.js"></script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user