一个完整的工业软件对象模型平台，基于SCSAI对象模型和五维市场理论。该平台包含对象管理、五维市场交易和大模型集成功能。
工业软件对象模型平台功能说明
这个平台实现了基于Aras Innovator对象模型和五维市场理论的工业软件解决方案，主要功能包括：
1. 对象管理功能
对象浏览器：使用AG Grid展示所有工业对象，支持分页、排序和过滤
五维属性展示：显示每个对象的时间(τ)、空间(σ)、功能(φ)、关系(ρ)、熵控(ε)维度值
对象操作：支持创建、导入、导出工业对象
2. 五维市场功能
热门对象展示：显示市场上价值最高的工业对象
五维值可视化：使用彩色徽章展示每个对象的五维属性
价值评分：显示每个对象的综合五维价值评分
3. AI对象生成器
自然语言输入：用户可以通过描述生成所需对象
XML输出：自动生成符合Aras对象模型的XML结构
五维值计算：为生成的对象自动计算五维属性值
4. 数据可视化
统计卡片：展示对象总数、市场交易额、平均五维值等关键指标
五维仪表盘：侧边栏展示当前对象的五维值分布
趋势分析：显示各项指标的增长趋势
5. 系统架构
前端：基于AG Grid的工业对象管理界面
数据模型：使用IndustrialObject类封装对象属性和行为
XML支持：所有对象可导出为符合SCSAI标准的XML格式
该平台完全支持万物对象模型和五维市场理论，通过直观的界面实现了工业对象的创建、管理、交易和优化，为工业软件领域提供了创新的解决方案。
以下为主界面代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>工业软件对象模型平台</title>
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/styles/ag-theme-alpine.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #2962ff;
--secondary-color: #0039cb;
--accent-color: #00c853;
--warning-color: #ffab00;
--danger-color: #dd2c00;
--dark-bg: #1a237e;
--light-bg: #f5f7ff;
--card-bg: #ffffff;
--text-dark: #263238;
--text-light: #eceff1;
--border-color: #cfd8dc;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
color: var(--text-dark);
min-height: 100vh;
overflow-x: hidden;
}
.app-container {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: 70px 1fr;
grid-template-areas:
"header header"
"sidebar main";
height: 100vh;
}
/* 头部样式 */
header {
grid-area: header;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
padding: 0 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
display: flex;
align-items: center;
gap: 15px;
margin-right: 40px;
}
.logo-icon {
font-size: 28px;
color: var(--primary-color);
}
.logo-text {
font-size: 24px;
font-weight: 700;
background: linear-gradient(to right, #4fc3f7, #2962ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
nav ul {
display: flex;
list-style: none;
gap: 25px;
}
nav a {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
padding: 8px 15px;
border-radius: 20px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
nav a:hover, nav a.active {
background: rgba(41, 98, 255, 0.2);
color: #bbdefb;
}
.header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 20px;
}
.search-box {
position: relative;
width: 300px;
}
.search-box input {
width: 100%;
padding: 10px 15px 10px 40px;
border-radius: 30px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 14px;
}
.search-box i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #90a4ae;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #2962ff, #00c853);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
cursor: pointer;
}
/* 侧边栏样式 */
.sidebar {
grid-area: sidebar;
background: rgba(10, 20, 50, 0.8);
backdrop-filter: blur(10px);
padding: 25px 0;
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
}
.sidebar-section {
margin-bottom: 30px;
padding: 0 20px;
}
.sidebar-title {
color: #78909c;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
padding-left: 10px;
}
.sidebar-menu {
list-style: none;
}
.sidebar-menu li {
margin-bottom: 5px;
}
.sidebar-menu a {
display: flex;
align-items: center;
gap: 12px;
color: #cfd8dc;
text-decoration: none;
padding: 12px 15px;
border-radius: 8px;
transition: all 0.3s ease;
}
.sidebar-menu a:hover, .sidebar-menu a.active {
background: rgba(41, 98, 255, 0.3);
color: #e3f2fd;
}
.sidebar-menu i {
width: 24px;
text-align: center;
font-size: 18px;
}
.dimension-cards {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.dimension-card {
background: rgba(33, 150, 243, 0.15);
border-radius: 10px;
padding: 15px;
flex: 1;
min-width: 100px;
text-align: center;
border: 1px solid rgba(33, 150, 243, 0.3);
}
.dimension-value {
font-size: 24px;
font-weight: 700;
margin: 10px 0;
color: #4fc3f7;
}
.dimension-label {
font-size: 12px;
color: #90a4ae;
}
/* 主内容区样式 */
main {
grid-area: main;
padding: 30px;
overflow-y: auto;
background: var(--light-bg);
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
h1 {
font-size: 28px;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 15px;
}
.stats-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stats-card {
background: var(--card-bg);
border-radius: 15px;
padding: 25px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
}
.stats-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.stats-title {
font-size: 16px;
color: #78909c;
font-weight: 500;
}
.stats-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.stats-value {
font-size: 32px;
font-weight: 700;
margin-bottom: 5px;
}
.stats-trend {
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
color: #4caf50;
}
.stats-trend.down {
color: var(--danger-color);
}
.main-content {
display: grid;
grid-template-columns: 1fr 350px;
gap: 25px;
}
.card {
background: var(--card-bg);
border-radius: 15px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.card-header {
padding: 20px 25px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--text-dark);
}
.card-actions {
display: flex;
gap: 10px;
}
.btn {
padding: 8px 16px;
border-radius: 8px;
border: none;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.btn-primary {
background: var(--primary-color);
color: white;
}
.btn-outline {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-dark);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
background: var(--secondary-color);
}
.card-body {
padding: 25px;
}
.ag-theme-alpine {
height: 500px;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.market-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.market-item {
display: flex;
align-items: center;
padding: 15px;
border-radius: 12px;
background: #f8fbff;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.market-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
border-color: var(--primary-color);
}
.item-icon {
width: 50px;
height: 50px;
border-radius: 10px;
background: linear-gradient(135deg, #2962ff, #00c853);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
margin-right: 15px;
flex-shrink: 0;
}
.item-details {
flex: 1;
}
.item-name {
font-weight: 600;
margin-bottom: 5px;
}
.item-type {
font-size: 13px;
color: #78909c;
margin-bottom: 8px;
}
.dimension-badges {
display: flex;
gap: 8px;
}
.dimension-badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.tau-badge { background: rgba(41, 182, 246, 0.2); color: #00b0ff; }
.sigma-badge { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
.phi-badge { background: rgba(244, 67, 54, 0.2); color: #f44336; }
.rho-badge { background: rgba(156, 39, 176, 0.2); color: #9c27b0; }
.epsilon-badge { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
.item-value {
font-weight: 700;
font-size: 18px;
color: var(--primary-color);
min-width: 70px;
text-align: right;
}
.ai-panel {
background: #e8f4fc;
border-left: 4px solid var(--primary-color);
padding: 20px;
border-radius: 12px;
margin-top: 25px;
}
.ai-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.ai-icon {
font-size: 24px;
color: var(--primary-color);
}
textarea {
width: 100%;
padding: 15px;
border-radius: 12px;
border: 1px solid var(--border-color);
min-height: 100px;
resize: vertical;
font-family: inherit;
margin-bottom: 15px;
}
.ai-response {
background: white;
padding: 15px;
border-radius: 12px;
border: 1px solid var(--border-color);
min-height: 100px;
font-size: 14px;
line-height: 1.6;
margin-top: 15px;
white-space: pre-wrap;
font-family: monospace;
}
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.pagination button {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border-color);
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.pagination button.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
@media (max-width: 1200px) {
.main-content {
grid-template-columns: 1fr;
}
.app-container {
grid-template-columns: 80px 1fr;
}
.logo-text, .sidebar-title, .sidebar-menu span {
display: none;
}
.logo {
margin-right: 20px;
}
.sidebar-menu a {
justify-content: center;
padding: 15px;
}
.dimension-cards {
display: none;
}
}
</style>
</head>
<body>
<div class="app-container">
<header>
<div class="logo">
<i class="fas fa-cube logo-icon"></i>
<div class="logo-text">SCSAI平台</div>
</div>
<nav>
<ul>
<li><a href="#" class="active"><i class="fas fa-home"></i> 控制台</a></li>
<li><a href="#"><i class="fas fa-robot"></i> 对象建模</a></li>
<li><a href="#"><i class="fas fa-store"></i> 五维市场</a></li>
<li><a href="#"><i class="fas fa-project-diagram"></i> 对象关系</a></li>
<li><a href="#"><i class="fas fa-chart-line"></i> 价值分析</a></li>
</ul>
</nav>
<div class="header-actions">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" placeholder="搜索对象、组件或场景...">
</div>
<div class="user-avatar">JD</div>
</div>
</header>
<aside class="sidebar">
<div class="sidebar-section">
<h3 class="sidebar-title">对象管理</h3>
<ul class="sidebar-menu">
<li><a href="#" class="active"><i class="fas fa-box"></i> <span>对象浏览器</span></a></li>
<li><a href="#"><i class="fas fa-plus-circle"></i> <span>创建新对象</span></a></li>
<li><a href="#"><i class="fas fa-history"></i> <span>对象版本</span></a></li>
<li><a href="#"><i class="fas fa-exchange-alt"></i> <span>导入/导出</span></a></li>
<li><a href="#"><i class="fas fa-trash-alt"></i> <span>回收站</span></a></li>
</ul>
</div>
<div class="sidebar-section">
<h3 class="sidebar-title">五维市场</h3>
<ul class="sidebar-menu">
<li><a href="#"><i class="fas fa-shopping-cart"></i> <span>市场浏览</span></a></li>
<li><a href="#"><i class="fas fa-upload"></i> <span>发布对象</span></a></li>
<li><a href="#"><i class="fas fa-star"></i> <span>我的发布</span></a></li>
<li><a href="#"><i class="fas fa-wallet"></i> <span>交易记录</span></a></li>
</ul>
</div>
<div class="sidebar-section">
<h3 class="sidebar-title">对象五维值</h3>
<div class="dimension-cards">
<div class="dimension-card">
<div class="dimension-value">0.92</div>
<div class="dimension-label">时间 (τ)</div>
</div>
<div class="dimension-card">
<div class="dimension-value">0.85</div>
<div class="dimension-label">空间 (σ)</div>
</div>
<div class="dimension-card">
<div class="dimension-value">0.96</div>
<div class="dimension-label">功能 (φ)</div>
</div>
<div class="dimension-card">
<div class="dimension-value">0.78</div>
<div class="dimension-label">关系 (ρ)</div>
</div>
<div class="dimension-card">
<div class="dimension-value">0.12</div>
<div class="dimension-label">熵控 (ε)</div>
</div>
</div>
</div>
</aside>
<main>
<div class="dashboard-header">
<h1><i class="fas fa-robot"></i> 工业对象模型管理平台</h1>
<div>
<button class="btn btn-outline"><i class="fas fa-sync-alt"></i> 刷新</button>
<button class="btn btn-primary"><i class="fas fa-plus"></i> 创建对象</button>
</div>
</div>
<div class="stats-cards">
<div class="stats-card">
<div class="stats-card-header">
<div class="stats-title">对象总数</div>
<div class="stats-icon" style="background: rgba(41, 98, 255, 0.1); color: var(--primary-color);">
<i class="fas fa-boxes"></i>
</div>
</div>
<div class="stats-value">1,284</div>
<div class="stats-trend"><i class="fas fa-arrow-up"></i> 12.5% 增长</div>
</div>
<div class="stats-card">
<div class="stats-card-header">
<div class="stats-title">市场交易额</div>
<div class="stats-icon" style="background: rgba(0, 200, 83, 0.1); color: var(--accent-color);">
<i class="fas fa-coins"></i>
</div>
</div>
<div class="stats-value">¥3.2M</div>
<div class="stats-trend"><i class="fas fa-arrow-up"></i> 8.3% 增长</div>
</div>
<div class="stats-card">
<div class="stats-card-header">
<div class="stats-title">平均五维值</div>
<div class="stats-icon" style="background: rgba(255, 171, 0, 0.1); color: var(--warning-color);">
<i class="fas fa-chart-pie"></i>
</div>
</div>
<div class="stats-value">0.86</div>
<div class="stats-trend"><i class="fas fa-arrow-down"></i> 1.2% 下降</div>
</div>
<div class="stats-card">
<div class="stats-card-header">
<div class="stats-title">活跃开发者</div>
<div class="stats-icon" style="background: rgba(156, 39, 176, 0.1); color: #9c27b0;">
<i class="fas fa-users"></i>
</div>
</div>
<div class="stats-value">248</div>
<div class="stats-trend"><i class="fas fa-arrow-up"></i> 5.7% 增长</div>
</div>
</div>
<div class="main-content">
<div class="card">
<div class="card-header">
<div class="card-title">对象浏览器</div>
<div class="card-actions">
<button class="btn btn-outline"><i class="fas fa-download"></i> 导出</button>
<button class="btn btn-primary"><i class="fas fa-upload"></i> 导入</button>
</div>
</div>
<div class="card-body">
<div id="objectGrid" class="ag-theme-alpine"></div>
<div class="pagination">
<button><i class="fas fa-chevron-left"></i></button>
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">五维市场热门对象</div>
<div class="card-actions">
<button class="btn btn-outline"><i class="fas fa-sync-alt"></i> 刷新</button>
</div>
</div>
<div class="card-body">
<div class="market-list">
<div class="market-item">
<div class="item-icon"><i class="fas fa-cog"></i></div>
<div class="item-details">
<div class="item-name">高精度轴承组件</div>
<div class="item-type">机械部件 · 航天五院</div>
<div class="dimension-badges">
<span class="dimension-badge phi-badge">φ:0.96</span>
<span class="dimension-badge epsilon-badge">ε:0.08</span>
<span class="dimension-badge sigma-badge">σ:0.92</span>
</div>
</div>
<div class="item-value">0.94</div>
</div>
<div class="market-item">
<div class="item-icon"><i class="fas fa-microchip"></i></div>
<div class="item-details">
<div class="item-name">温度传感器校准模型</div>
<div class="item-type">传感器模型 · 中车集团</div>
<div class="dimension-badges">
<span class="dimension-badge phi-badge">φ:0.98</span>
<span class="dimension-badge epsilon-badge">ε:0.05</span>
<span class="dimension-badge rho-badge">ρ:12</span>
</div>
</div>
<div class="item-value">0.96</div>
</div>
<div class="market-item">
<div class="item-icon"><i class="fas fa-code"></i></div>
<div class="item-details">
<div class="item-name">PID温度控制算法</div>
<div class="item-type">控制算法 · 浙江大学</div>
<div class="dimension-badges">
<span class="dimension-badge phi-badge">φ:0.93</span>
<span class="dimension-badge tau-badge">τ:0.89</span>
<span class="dimension-badge rho-badge">ρ:8</span>
</div>
</div>
<div class="item-value">0.91</div>
</div>
<div class="market-item">
<div class="item-icon"><i class="fas fa-plug"></i></div>
<div class="item-details">
<div class="item-name">工业连接器组件</div>
<div class="item-type">电气元件 · 西门子</div>
<div class="dimension-badges">
<span class="dimension-badge sigma-badge">σ:0.98</span>
<span class="dimension-badge epsilon-badge">ε:0.10</span>
<span class="dimension-badge rho-badge">ρ:6</span>
</div>
</div>
<div class="item-value">0.87</div>
</div>
<div class="market-item">
<div class="item-icon"><i class="fas fa-cube"></i></div>
<div class="item-details">
<div class="item-name">3D打印结构件</div>
<div class="item-type">机械部件 · 航天精工</div>
<div class="dimension-badges">
<span class="dimension-badge phi-badge">φ:0.91</span>
<span class="dimension-badge epsilon-badge">ε:0.15</span>
<span class="dimension-badge tau-badge">τ:0.82</span>
</div>
</div>
<div class="item-value">0.84</div>
</div>
</div>
</div>
</div>
</div>
<div class="ai-panel">
<div class="ai-header">
<i class="fas fa-robot ai-icon"></i>
<h3>AI对象生成器</h3>
</div>
<textarea placeholder="描述您需要的对象，例如：'创建一个用于工业机器人的高精度减速器组件，材料为特种合金钢，公差在0.001mm以内...'"></textarea>
<button class="btn btn-primary"><i class="fas fa-bolt"></i> 生成对象</button>
<div class="ai-response">
// 生成的XML对象结构示例
<TradableObject itemType="GearComponent">
<Metadata>
<FiveDValue>0.92</FiveDValue>
<TimeDimension>2025-06-28</TimeDimension>
<SpaceCoverage>0.95</SpaceCoverage>
<FunctionScore>0.94</FunctionScore>
<Relationships>8</Relationships>
<Entropy>0.07</Entropy>
</Metadata>
<ObjectData>
<Item type="GearComponent" id="GC-20250628-001">
<Property name="name">高精度机器人减速器</Property>
<Property name="material">特种合金钢</Property>
<Property name="tolerance">0.001mm</Property>
<Property name="weight">1.8kg</Property>
<Property name="maxTorque">850Nm</Property>
<Relationship name="UsedIn">IndustrialRobot</Relationship>
</Item>
</ObjectData>
</TradableObject>
</div>
</div>
</main>
</div>
<script>
// 工业对象模型类
class IndustrialObject {
constructor(id, name, type, dimensions) {
this.id = id;
this.name = name;
this.type = type;
this.dimensions = dimensions || {
tau: (Math.random() * 0.2 + 0.8).toFixed(2),
sigma: (Math.random() * 0.2 + 0.8).toFixed(2),
phi: (Math.random() * 0.2 + 0.8).toFixed(2),
rho: (Math.random() * 0.2 + 0.8).toFixed(2),
epsilon: (Math.random() * 0.1).toFixed(2)
};
this.fiveDValue = this.calculateFiveDValue();
this.createdAt = new Date();
this.lastModified = new Date();
}
calculateFiveDValue() {
const {tau, sigma, phi, rho, epsilon} = this.dimensions;
return (tau * sigma * phi * rho / Math.exp(epsilon)).toFixed(2);
}
toXML() {
return `
<TradableObject itemType="${this.type}" id="${this.id}">
<Metadata>
<FiveDValue>${this.fiveDValue}</FiveDValue>
<TimeDimension>${this.dimensions.tau}</TimeDimension>
<SpaceCoverage>${this.dimensions.sigma}</SpaceCoverage>
<FunctionScore>${this.dimensions.phi}</FunctionScore>
<Relationships>${this.dimensions.rho}</Relationships>
<Entropy>${this.dimensions.epsilon}</Entropy>
</Metadata>
<ObjectData>
<Item type="${this.type}" id="${this.id}">
<Property name="name">${this.name}</Property>
<Property name="description">${this.description || ''}</Property>
<!-- 其他属性 -->
</Item>
</ObjectData>
</TradableObject>`;
}
}
// 生成模拟数据
const objectTypes = ['机械部件', '控制算法', '传感器模型', '电气元件', '软件模块', '机器人场景'];
const objectNames = [
'高精度轴承组件', '温度传感器校准模型', 'PID控制算法', '工业连接器',
'机器人路径规划模块', '液压系统控制器', '视觉识别模型', '电机驱动模块',
'安全防护组件', '数据采集接口', '能源管理单元', '预测性维护模型'
];
const generateObjects = (count) => {
const objects = [];
for (let i = 1; i <= count; i++) {
const type = objectTypes[Math.floor(Math.random() * objectTypes.length)];
const name = objectNames[Math.floor(Math.random() * objectNames.length)];
objects.push(new IndustrialObject(`OBJ-${1000 + i}`, name, type));
}
return objects;
};
// 初始化AG Grid
document.addEventListener('DOMContentLoaded', () => {
const gridOptions = {
columnDefs: [
{ headerName: "ID", field: "id", width: 150, checkboxSelection: true },
{ headerName: "名称", field: "name", width: 200 },
{ headerName: "类型", field: "type", width: 150 },
{ headerName: "时间(τ)", field: "dimensions.tau", width: 120 },
{ headerName: "空间(σ)", field: "dimensions.sigma", width: 120 },
{ headerName: "功能(φ)", field: "dimensions.phi", width: 120 },
{ headerName: "关系(ρ)", field: "dimensions.rho", width: 120 },
{ headerName: "熵控(ε)", field: "dimensions.epsilon", width: 120 },
{ headerName: "五维值", field: "fiveDValue", width: 120 },
{ headerName: "创建时间", field: "createdAt", width: 180,
valueFormatter: params => params.value.toLocaleDateString() },
{ headerName: "修改时间", field: "lastModified", width: 180,
valueFormatter: params => params.value.toLocaleDateString() }
],
rowData: generateObjects(50),
rowSelection: 'multiple',
suppressRowClickSelection: true,
defaultColDef: {
sortable: true,
filter: true,
resizable: true
},
pagination: true,
paginationPageSize: 10,
onGridReady: params => params.api.sizeColumnsToFit()
};
const gridDiv = document.querySelector('#objectGrid');
new agGrid.Grid(gridDiv, gridOptions);
// 添加事件监听
document.querySelector('.btn-primary').addEventListener('click', () => {
const newObj = new IndustrialObject(
`OBJ-${1000 + Math.floor(Math.random() * 9000)}`,
'新工业对象',
objectTypes[Math.floor(Math.random() * objectTypes.length)]
);
gridOptions.api.applyTransaction({ add: [newObj] });
});
// 模拟AI生成
document.querySelector('.ai-panel .btn-primary').addEventListener('click', () => {
const responseDiv = document.querySelector('.ai-response');
responseDiv.style.display = 'block';
responseDiv.innerHTML = '// 正在生成对象...';
setTimeout(() => {
const objType = objectTypes[Math.floor(Math.random() * objectTypes.length)];
const objName = objectNames[Math.floor(Math.random() * objectNames.length)];
const newObj = new IndustrialObject(
`OBJ-AI-${Math.floor(1000 + Math.random() * 9000)}`,
objName,
objType
);
responseDiv.innerHTML = `
// 生成的XML对象结构示例
<TradableObject itemType="${objType}">
<Metadata>
<FiveDValue>${newObj.fiveDValue}</FiveDValue>
<TimeDimension>${newObj.dimensions.tau}</TimeDimension>
<SpaceCoverage>${newObj.dimensions.sigma}</SpaceCoverage>
<FunctionScore>${newObj.dimensions.phi}</FunctionScore>
<Relationships>${newObj.dimensions.rho}</Relationships>
<Entropy>${newObj.dimensions.epsilon}</Entropy>
</Metadata>
<ObjectData>
<Item type="${objType}" id="${newObj.id}">
<Property name="name">${objName}</Property>
<Property name="description">AI生成的工业对象，适用于智能制造场景</Property>
<Property name="material">特种合金钢</Property>
<Property name="weight">${(Math.random() * 5 + 0.5).toFixed(2)}kg</Property>
<Property name="tolerance">±${(Math.random() * 0.01).toFixed(3)}mm</Property>
<Relationship name="UsedIn">IndustrialRobot</Relationship>
</Item>
</ObjectData>
</TradableObject>
`;
}, 1500);
});
});
</script>
</body>
</html>