一个完整的工业软件对象模型平台，基于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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
