769 lines
29 KiB
JavaScript
769 lines
29 KiB
JavaScript
/**
|
||
* @class DataMonitor
|
||
* @extends HTMLElement
|
||
* @description 数据监控组件的基础类
|
||
*/
|
||
class DataMonitor extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
this.attachShadow({ mode: 'open' });
|
||
this.interfaces = []; // 存储接口数据
|
||
this.filteredInterfaces = []; // 存储过滤后的接口数据
|
||
this.searchText = ''; // 搜索文本
|
||
this.searchTimeout = null; // 用于防抖的定时器
|
||
this.cursorPosition = 0; // 存储光标位置
|
||
this.tableData = []; // 表格数据，存储已添加的接口
|
||
this.chart = null; // Chart.js 实例
|
||
this.tableHeight = 220; // 表格初始高度(px)
|
||
this.isResizing = false; // 是否正在拖动分隔线
|
||
this.startY = 0; // 拖动起始Y
|
||
this.startTableHeight = 0; // 拖动起始表格高度
|
||
this.activeChartIndexes = []; // 当前绘图的行索引
|
||
// 列宽数组，初始为像素
|
||
this.colWidths = [160, 160, 120, 180, 320]; // px
|
||
this.dragColIndex = null;
|
||
this.dragStartX = 0;
|
||
this.dragStartWidth = 0;
|
||
this._colWidthInited = false;
|
||
this._resizeEventBinded = false;
|
||
}
|
||
|
||
connectedCallback() {
|
||
this.loadInterfaces();
|
||
// 延迟多次尝试，直到拿到有效宽度
|
||
const tryInitColWidth = (tryCount = 0) => {
|
||
const section = this.shadowRoot && this.shadowRoot.querySelector('.table-section');
|
||
if (section && section.clientWidth > 0) {
|
||
const totalWidth = section.clientWidth;
|
||
const ratios = [0.17, 0.17, 0.13, 0.19, 0.34];
|
||
this.colWidths = ratios.map(r => Math.floor(totalWidth * r));
|
||
this._colWidthInited = true;
|
||
this.render();
|
||
} else if (tryCount < 10) {
|
||
setTimeout(() => tryInitColWidth(tryCount + 1), 50);
|
||
}
|
||
};
|
||
tryInitColWidth();
|
||
// 只绑定一次全局拖动事件
|
||
if (!this._resizeEventBinded) {
|
||
window.addEventListener('mousemove', this._onWindowMouseMove = (e) => {
|
||
if (this.isResizing) {
|
||
const delta = e.clientY - this.startY;
|
||
let newHeight = this.startTableHeight + delta;
|
||
const minHeight = 60;
|
||
const maxHeight = Math.max(120, this.offsetHeight - 180);
|
||
if (newHeight < minHeight) newHeight = minHeight;
|
||
if (newHeight > maxHeight) newHeight = maxHeight;
|
||
this.tableHeight = newHeight;
|
||
this.render();
|
||
}
|
||
});
|
||
window.addEventListener('mouseup', this._onWindowMouseUp = () => {
|
||
if (this.isResizing) {
|
||
this.isResizing = false;
|
||
const divider = this.shadowRoot.querySelector('.divider');
|
||
if (divider) divider.classList.remove('active');
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
}
|
||
});
|
||
this._resizeEventBinded = true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @description 从localStorage获取当前选择的配置
|
||
* @returns {Object} 包含plane和configurationId的对象
|
||
*/
|
||
getCurrentSelection() {
|
||
const selection = localStorage.getItem('xnsim-selection');
|
||
return selection ? JSON.parse(selection) : { plane: '', configurationId: '' };
|
||
}
|
||
|
||
/**
|
||
* @description 加载接口数据
|
||
*/
|
||
async loadInterfaces() {
|
||
try {
|
||
const { configurationId } = this.getCurrentSelection();
|
||
if (!configurationId) {
|
||
console.warn('未找到配置ID');
|
||
return;
|
||
}
|
||
|
||
const response = await fetch(`/api/interface/list?systemName=XNSim&confID=${configurationId}`);
|
||
const data = await response.json();
|
||
this.interfaces = data;
|
||
this.filteredInterfaces = this.filterInterfaces(this.searchText);
|
||
this.render();
|
||
} catch (error) {
|
||
console.error('加载接口数据失败:', error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @description 根据搜索文本过滤接口
|
||
* @param {string} searchText - 搜索文本
|
||
* @returns {Array} 过滤后的接口数据
|
||
*/
|
||
filterInterfaces(searchText) {
|
||
if (!searchText) return this.interfaces;
|
||
|
||
return this.interfaces.filter(item =>
|
||
item.InterfaceName.toLowerCase().includes(searchText.toLowerCase()) ||
|
||
item.ModelStructName.toLowerCase().includes(searchText.toLowerCase())
|
||
);
|
||
}
|
||
|
||
/**
|
||
* @description 处理搜索输入
|
||
* @param {Event} event - 输入事件
|
||
*/
|
||
handleSearch(event) {
|
||
this.searchText = event.target.value;
|
||
this.cursorPosition = event.target.selectionStart;
|
||
|
||
// 清除之前的定时器
|
||
if (this.searchTimeout) {
|
||
clearTimeout(this.searchTimeout);
|
||
}
|
||
|
||
// 设置新的定时器，300ms后执行搜索
|
||
this.searchTimeout = setTimeout(() => {
|
||
this.filteredInterfaces = this.filterInterfaces(this.searchText);
|
||
this.render();
|
||
|
||
// 在下一个事件循环中恢复焦点和光标位置
|
||
requestAnimationFrame(() => {
|
||
const searchInput = this.shadowRoot.querySelector('.search-input');
|
||
if (searchInput) {
|
||
searchInput.focus();
|
||
searchInput.setSelectionRange(this.cursorPosition, this.cursorPosition);
|
||
}
|
||
});
|
||
}, 300);
|
||
}
|
||
|
||
/**
|
||
* @description 处理树节点双击事件，将接口添加到表格
|
||
* @param {Object} item - 接口对象
|
||
*/
|
||
handleTreeItemDblClick(item) {
|
||
// 防止重复添加
|
||
if (!this.tableData.some(row => row.InterfaceName === item.InterfaceName && row.ModelStructName === item.ModelStructName)) {
|
||
this.tableData.push({
|
||
InterfaceName: item.InterfaceName,
|
||
ModelStructName: item.ModelStructName,
|
||
InjectValue: '',
|
||
Drawing: false,
|
||
color: this.getRandomColor()
|
||
});
|
||
this.renderTable();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @description 渲染表格内容
|
||
*/
|
||
renderTable() {
|
||
const tableBody = this.shadowRoot.querySelector('#monitor-table-body');
|
||
if (tableBody) {
|
||
tableBody.innerHTML = this.tableData.map((row, idx) => `
|
||
<tr>
|
||
<td><span class="cell-text">${row.InterfaceName}</span></td>
|
||
<td><span class="cell-text">${row.ModelStructName}</span></td>
|
||
<td><span class="cell-text"></span></td>
|
||
<td>
|
||
<input type="text" class="inject-input" data-index="${idx}" value="${row.InjectValue || ''}" placeholder="注入值" style="width:90px;" />
|
||
</td>
|
||
<td style="min-width:120px; white-space:nowrap;">
|
||
<button class="action-btn monitor-btn" data-index="${idx}">开始监控</button>
|
||
<button class="action-btn chart-btn${row.Drawing ? ' drawing' : ''}" data-index="${idx}">绘图</button>
|
||
<button class="action-btn inject-once-btn" data-index="${idx}">单次注入</button>
|
||
<button class="action-btn inject-loop-btn" data-index="${idx}">连续注入</button>
|
||
<button class="action-btn delete-btn" data-index="${idx}">删除</button>
|
||
</td>
|
||
</tr>
|
||
`).join('');
|
||
}
|
||
|
||
// 注入值输入限制
|
||
this.shadowRoot.querySelectorAll('.inject-input').forEach(input => {
|
||
input.oninput = (e) => {
|
||
// 只允许数字、负号、小数点、逗号
|
||
let v = e.target.value.replace(/[^0-9\-.,]/g, '');
|
||
e.target.value = v;
|
||
const idx = parseInt(e.target.getAttribute('data-index'));
|
||
this.tableData[idx].InjectValue = v;
|
||
};
|
||
});
|
||
|
||
// 按钮事件
|
||
this.shadowRoot.querySelectorAll('.chart-btn').forEach(btn => {
|
||
btn.onclick = (e) => {
|
||
const idx = parseInt(btn.getAttribute('data-index'));
|
||
// 多选支持
|
||
if (this.tableData[idx].Drawing) {
|
||
this.tableData[idx].Drawing = false;
|
||
} else {
|
||
this.tableData[idx].Drawing = true;
|
||
}
|
||
// 更新activeChartIndexes
|
||
this.activeChartIndexes = this.tableData.map((row, i) => row.Drawing ? i : null).filter(i => i !== null);
|
||
this.renderTable();
|
||
this.updateChart();
|
||
};
|
||
});
|
||
this.shadowRoot.querySelectorAll('.delete-btn').forEach(btn => {
|
||
btn.onclick = (e) => {
|
||
const idx = parseInt(btn.getAttribute('data-index'));
|
||
this.tableData.splice(idx, 1);
|
||
// 删除后同步更新activeChartIndexes
|
||
this.activeChartIndexes = this.tableData.map((row, i) => row.Drawing ? i : null).filter(i => i !== null);
|
||
this.renderTable();
|
||
this.updateChart();
|
||
};
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @description 初始化图表
|
||
*/
|
||
initChart() {
|
||
const chartElement = this.shadowRoot.querySelector('#monitor-chart');
|
||
if (!chartElement) return;
|
||
if (typeof Chart === 'undefined') return;
|
||
if (this.chart) {
|
||
this.chart.destroy();
|
||
this.chart = null;
|
||
}
|
||
const ctx = chartElement.getContext('2d');
|
||
this.chart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: [],
|
||
datasets: []
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: { beginAtZero: true }
|
||
},
|
||
animation: false,
|
||
plugins: {
|
||
legend: { display: true },
|
||
tooltip: { enabled: false }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @description 获取随机颜色
|
||
* @returns {string} 颜色字符串
|
||
*/
|
||
getRandomColor() {
|
||
const letters = '0123456789ABCDEF';
|
||
let color = '#';
|
||
for (let i = 0; i < 6; i++) {
|
||
color += letters[Math.floor(Math.random() * 16)];
|
||
}
|
||
return color;
|
||
}
|
||
|
||
/**
|
||
* @description 更新图表，支持多条曲线
|
||
*/
|
||
updateChart() {
|
||
if (!this.chart) return;
|
||
if (!this.activeChartIndexes || this.activeChartIndexes.length === 0) {
|
||
this.chart.data.labels = [];
|
||
this.chart.data.datasets = [];
|
||
this.chart.update('none');
|
||
return;
|
||
}
|
||
// 多条曲线
|
||
const labels = Array.from({length: 20}, (_, i) => i+1);
|
||
this.chart.data.labels = labels;
|
||
this.chart.data.datasets = this.activeChartIndexes.map(idx => {
|
||
const row = this.tableData[idx];
|
||
return {
|
||
label: row.InterfaceName,
|
||
data: Array.from({length: 20}, () => (Math.random()*100).toFixed(2)),
|
||
borderColor: row.color,
|
||
fill: false
|
||
};
|
||
});
|
||
this.chart.update('none');
|
||
}
|
||
|
||
render() {
|
||
// 计算所有列宽之和
|
||
const totalColWidth = this.colWidths.reduce((a, b) => a + b, 0);
|
||
let tableWidthStyle = '';
|
||
const section = this.shadowRoot && this.shadowRoot.querySelector('.table-section');
|
||
const containerWidth = section ? section.clientWidth : 940;
|
||
if (totalColWidth < containerWidth) {
|
||
tableWidthStyle = 'width:100%;';
|
||
} else {
|
||
tableWidthStyle = 'width:max-content;';
|
||
}
|
||
|
||
// 首次渲染时动态分配列宽（已移至connectedCallback，防止死循环）
|
||
// 按ModelStructName分组
|
||
const groupedInterfaces = this.filteredInterfaces.reduce((groups, item) => {
|
||
const group = groups[item.ModelStructName] || [];
|
||
group.push(item);
|
||
groups[item.ModelStructName] = group;
|
||
return groups;
|
||
}, {});
|
||
|
||
this.shadowRoot.innerHTML = `
|
||
<style>
|
||
:host {
|
||
display: block;
|
||
height: 100%;
|
||
overflow: auto;
|
||
padding: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.monitor-container {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
padding: 16px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
gap: 16px;
|
||
}
|
||
|
||
.tree-container {
|
||
width: 300px;
|
||
border-right: 1px solid #e0e0e0;
|
||
padding-right: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-box {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.search-input {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.tree-view {
|
||
flex-grow: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.tree-group {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.group-header {
|
||
font-weight: bold;
|
||
padding: 8px;
|
||
background-color: #f5f5f5;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.group-content {
|
||
margin-left: 20px;
|
||
display: block;
|
||
}
|
||
|
||
.group-content.collapsed {
|
||
display: none;
|
||
}
|
||
|
||
.interface-item {
|
||
padding: 6px 8px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
margin: 2px 0;
|
||
user-select: none;
|
||
}
|
||
|
||
.interface-item:hover {
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.content-area {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-section {
|
||
background: #fff;
|
||
border-radius: 8px 8px 0 0;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
padding: 0;
|
||
margin-bottom: 0;
|
||
overflow: hidden;
|
||
max-height: 70vh;
|
||
min-height: 60px;
|
||
height: ${this.tableHeight}px;
|
||
transition: height 0.1s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.table-scroll-x {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.table-header-fixed {
|
||
overflow: hidden;
|
||
width: fit-content;
|
||
}
|
||
.table-header-fixed .monitor-table {
|
||
width: max-content;
|
||
min-width: 100%;
|
||
}
|
||
.table-body-scroll {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
overflow-x: auto;
|
||
max-height: calc(100% - 1px);
|
||
}
|
||
.table-body-scroll .monitor-table {
|
||
width: max-content;
|
||
min-width: 100%;
|
||
}
|
||
.monitor-table {
|
||
width: max-content;
|
||
min-width: 100%;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
table-layout: fixed;
|
||
min-width: unset;
|
||
}
|
||
.monitor-table th, .monitor-table td {
|
||
padding: 8px;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
text-align: left;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
max-width: 0;
|
||
}
|
||
.cell-text {
|
||
display: inline-block;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
}
|
||
.monitor-table input,
|
||
.monitor-table button {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.monitor-table th {
|
||
background: #f5f5f5;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 2;
|
||
position: relative;
|
||
}
|
||
/* 竖线：表头和内容区 */
|
||
.monitor-table td:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
top: 20%;
|
||
width: 1px;
|
||
height: 60%;
|
||
background: #e0e0e0;
|
||
z-index: 1;
|
||
}
|
||
.monitor-table th.th-resize-active::after {
|
||
background: #1890ff;
|
||
}
|
||
|
||
.divider {
|
||
height: 12px;
|
||
background: transparent;
|
||
cursor: row-resize;
|
||
width: 100%;
|
||
position: relative;
|
||
z-index: 2;
|
||
transition: background 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.divider-bar {
|
||
width: 60px;
|
||
height: 5px;
|
||
background: #c0c4cc;
|
||
border-radius: 3px;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||
transition: background 0.2s, box-shadow 0.2s;
|
||
}
|
||
.divider:hover .divider-bar,
|
||
.divider.active .divider-bar {
|
||
background: #1890ff;
|
||
box-shadow: 0 2px 8px rgba(24,144,255,0.15);
|
||
}
|
||
|
||
.chart-section {
|
||
background: #fff;
|
||
border-radius: 0 0 8px 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
padding: 12px;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 120px;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
.chart-title {
|
||
font-size: 15px;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
}
|
||
.chart-container {
|
||
flex: 1;
|
||
min-height: 120px;
|
||
position: relative;
|
||
}
|
||
#monitor-chart {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
display: block;
|
||
}
|
||
|
||
.action-btn {
|
||
margin: 0 2px;
|
||
padding: 3px 8px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: #f0f0f0;
|
||
color: #333;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
.action-btn:hover {
|
||
background: #e6f7ff;
|
||
}
|
||
.chart-btn.drawing {
|
||
background: #1890ff;
|
||
color: #fff;
|
||
}
|
||
|
||
.th-resize {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 12px;
|
||
height: 100%;
|
||
cursor: col-resize;
|
||
z-index: 10;
|
||
user-select: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.th-resize::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
top: 20%;
|
||
width: 1px;
|
||
height: 60%;
|
||
background: #e0e0e0;
|
||
border-radius: 2px;
|
||
transition: background 0.2s;
|
||
}
|
||
.th-resize:hover::after,
|
||
.th-resize.active::after {
|
||
background: #1890ff;
|
||
}
|
||
</style>
|
||
<div class="monitor-container">
|
||
<div class="tree-container">
|
||
<div class="search-box">
|
||
<input type="text"
|
||
class="search-input"
|
||
placeholder="搜索接口..."
|
||
value="${this.searchText}">
|
||
</div>
|
||
<div class="tree-view">
|
||
${Object.entries(groupedInterfaces).map(([groupName, items]) => `
|
||
<div class="tree-group">
|
||
<div class="group-header" onclick="this.parentElement.querySelector('.group-content').classList.toggle('collapsed')">
|
||
<span class="group-icon">▼</span>
|
||
${groupName}
|
||
</div>
|
||
<div class="group-content">
|
||
${items.map(item => `
|
||
<div class="interface-item" data-interfacename="${item.InterfaceName}" data-modelstructname="${item.ModelStructName}">
|
||
${item.InterfaceName}
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
<div class="content-area">
|
||
<div class="table-section">
|
||
<div class="table-header-fixed">
|
||
<table class="monitor-table" style="${tableWidthStyle}">
|
||
<colgroup>
|
||
<col style="width:${this.colWidths[0]}px">
|
||
<col style="width:${this.colWidths[1]}px">
|
||
<col style="width:${this.colWidths[2]}px">
|
||
<col style="width:${this.colWidths[3]}px">
|
||
<col style="width:${this.colWidths[4]}px">
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>接口名称<div class="th-resize" data-col="0"></div></th>
|
||
<th>结构体名<div class="th-resize" data-col="1"></div></th>
|
||
<th>数据<div class="th-resize" data-col="2"></div></th>
|
||
<th>注入值<div class="th-resize" data-col="3"></div></th>
|
||
<th>操作<div class="th-resize" data-col="4"></div></th>
|
||
</tr>
|
||
</thead>
|
||
</table>
|
||
</div>
|
||
<div class="table-body-scroll">
|
||
<table class="monitor-table" style="${tableWidthStyle}">
|
||
<colgroup>
|
||
<col style="width:${this.colWidths[0]}px">
|
||
<col style="width:${this.colWidths[1]}px">
|
||
<col style="width:${this.colWidths[2]}px">
|
||
<col style="width:${this.colWidths[3]}px">
|
||
<col style="width:${this.colWidths[4]}px">
|
||
</colgroup>
|
||
<tbody id="monitor-table-body">
|
||
<!-- 表格内容 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="divider"><div class="divider-bar"></div></div>
|
||
<div class="chart-section">
|
||
<div class="chart-title">数据监控图表</div>
|
||
<div class="chart-container">
|
||
<canvas id="monitor-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 搜索框事件
|
||
const searchInput = this.shadowRoot.querySelector('.search-input');
|
||
if (searchInput) {
|
||
searchInput.addEventListener('input', (e) => this.handleSearch(e));
|
||
}
|
||
|
||
// 树节点双击事件
|
||
this.shadowRoot.querySelectorAll('.interface-item').forEach(itemEl => {
|
||
itemEl.ondblclick = (e) => {
|
||
const name = itemEl.getAttribute('data-interfacename');
|
||
const struct = itemEl.getAttribute('data-modelstructname');
|
||
this.handleTreeItemDblClick({ InterfaceName: name, ModelStructName: struct });
|
||
};
|
||
});
|
||
|
||
// 渲染表格内容
|
||
this.renderTable();
|
||
|
||
// 初始化图表
|
||
this.initChart();
|
||
|
||
// 初始绘图
|
||
this.updateChart();
|
||
|
||
// 分隔线拖动事件
|
||
const divider = this.shadowRoot.querySelector('.divider');
|
||
if (divider) {
|
||
divider.onmousedown = (e) => {
|
||
this.isResizing = true;
|
||
this.startY = e.clientY;
|
||
this.startTableHeight = this.tableHeight;
|
||
divider.classList.add('active');
|
||
document.body.style.cursor = 'row-resize';
|
||
document.body.style.userSelect = 'none';
|
||
};
|
||
}
|
||
|
||
// 列宽拖动事件
|
||
this.shadowRoot.querySelectorAll('.th-resize').forEach(handle => {
|
||
handle.onmousedown = (e) => {
|
||
e.preventDefault();
|
||
this.dragColIndex = parseInt(handle.getAttribute('data-col'));
|
||
this.dragStartX = e.clientX;
|
||
this.dragStartWidth = this.colWidths[this.dragColIndex];
|
||
document.body.style.cursor = 'col-resize';
|
||
document.body.style.userSelect = 'none';
|
||
handle.classList.add('active');
|
||
// 高亮竖线
|
||
const th = handle.parentElement;
|
||
if (th) th.classList.add('th-resize-active');
|
||
};
|
||
handle.onmouseup = () => {
|
||
handle.classList.remove('active');
|
||
const th = handle.parentElement;
|
||
if (th) th.classList.remove('th-resize-active');
|
||
};
|
||
});
|
||
window.onmousemove = (e) => {
|
||
if (this.dragColIndex !== null) {
|
||
const delta = e.clientX - this.dragStartX;
|
||
let newWidth = this.dragStartWidth + delta;
|
||
if (newWidth < 60) newWidth = 60;
|
||
this.colWidths[this.dragColIndex] = newWidth;
|
||
this.render();
|
||
}
|
||
};
|
||
window.onmouseup = () => {
|
||
if (this.dragColIndex !== null) {
|
||
// 移除所有th-resize的active
|
||
this.shadowRoot.querySelectorAll('.th-resize').forEach(h => h.classList.remove('active'));
|
||
// 移除所有th的高亮
|
||
this.shadowRoot.querySelectorAll('.monitor-table th').forEach(th => th.classList.remove('th-resize-active'));
|
||
this.dragColIndex = null;
|
||
document.body.style.cursor = '';
|
||
document.body.style.userSelect = '';
|
||
}
|
||
};
|
||
}
|
||
}
|
||
|
||
customElements.define('data-monitor', DataMonitor);
|