BOM Assistant
/* Header Section */
.bom-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.bom-header h1 {
margin: 0 0 10px 0;
font-size: 2.5em;
}
.bom-header p {
margin: 0;
opacity: 0.9;
}
/* Device Selector Panel */
.device-selector {
background: #f8f9fa;
padding: 25px;
border-radius: 8px;
margin-bottom: 25px;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.selector-row {
display: flex;
gap: 15px;
flex-wrap: wrap;
align-items: flex-end;
}
.form-group-inline {
flex: 1;
min-width: 200px;
}
.form-group-inline label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
.form-control {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s;
}
.form-control:focus {
outline: none;
border-color: #667eea;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5568d3;
}
.btn-success {
background: #4CAF50;
color: white;
}
.btn-success:hover {
background: #45a049;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
}
.btn-danger {
background: #dc3545;
color: white;
padding: 5px 10px;
font-size: 12px;
}
.btn-danger:hover {
background: #c82333;
}
/* Action Buttons */
.action-buttons {
margin-bottom: 20px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* BOM Table */
.bom-table-container {
overflow-x: auto;
margin-bottom: 30px;
}
.bom-table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.bom-table thead {
background: #667eea;
color: white;
}
.bom-table th {
padding: 12px;
text-align: left;
font-weight: 600;
border-bottom: 2px solid #5568d3;
}
.bom-table td {
padding: 10px 12px;
border-bottom: 1px solid #e0e0e0;
}
.bom-table tbody tr:hover {
background: #f5f5f5;
}
.chassis-row {
background: #f0f4ff;
font-weight: 600;
}
.component-row {
background: #fafbfc;
font-size: 0.95em;
}
.component-row.collapsed {
display: none;
}
.component-qty-input {
width: 60px;
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
.btn-expand {
background: #4CAF50;
color: white;
border: none;
padding: 4px 12px;
border-radius: 3px;
cursor: pointer;
margin-right: 5px;
}
.btn-expand:hover {
background: #45a049;
}
/* Totals Panel */
.totals-panel {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.totals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.total-item {
text-align: center;
}
.total-item label {
display: block;
font-size: 0.9em;
opacity: 0.9;
margin-bottom: 5px;
}
.total-item .value {
font-size: 2em;
font-weight: 700;
}
.total-item .unit {
font-size: 0.8em;
opacity: 0.9;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-state-icon {
font-size: 4em;
margin-bottom: 20px;
}
/* Loading State */
.loading {
display: none;
text-align: center;
padding: 20px;
}
.loading.active {
display: block;
}
/* Print Styles */
@media print {
.no-print {
display: none !important;
}
.bom-header {
background: none;
color: black;
border-bottom: 3px solid black;
}
.bom-table {
font-size: 10pt;
}
.chassis-row, .component-row {
page-break-inside: avoid;
}
@page {
margin: 0.5in;
}
}
/* Category Tiles */
.category-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-top: 10px;
}
.category-tile {
background: white;
border: 2px solid #e0e0e0;
border-radius: 10px;
padding: 22px 16px;
cursor: pointer;
text-align: center;
transition: all 0.25s;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.category-tile:hover {
border-color: #667eea;
background: #f5f7ff;
box-shadow: 0 4px 14px rgba(102, 126, 234, 0.25);
transform: translateY(-2px);
}
.category-tile-icon {
font-size: 2.4em;
line-height: 1;
}
.category-tile-label {
font-weight: 700;
font-size: 1em;
color: #333;
}
.category-tile-sub {
font-size: 0.78em;
color: #888;
line-height: 1.4;
}
/* CSV Import */
.csv-import-container {
margin-bottom: 20px;
}
.file-input-wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin-right: 10px;
}
.file-input-wrapper input[type=file] {
position: absolute;
left: -9999px;
}
.file-input-label {
display: inline-block;
padding: 10px 20px;
background: #6c757d;
color: white;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.file-input-label:hover {
background: #5a6268;
}
/* Product Browser Modal */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1000;
overflow-y: auto;
}
.modal-overlay.active {
display: block;
}
.modal-content-wrapper {
max-width: 1400px;
margin: 30px auto;
background: white;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 30px;
border-radius: 8px 8px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
margin: 0;
font-size: 1.8em;
}
.modal-close {
background: rgba(255,255,255,0.2);
border: none;
color: white;
font-size: 28px;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.modal-close:hover {
background: rgba(255,255,255,0.3);
}
.modal-body {
padding: 30px;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
/* Search and Filters */
.browser-controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.search-box {
flex: 1;
min-width: 300px;
}
.search-box input {
width: 100%;
padding: 12px 15px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: border-color 0.3s;
}
.search-box input:focus {
outline: none;
border-color: #667eea;
}
.filter-section {
background: #f8f9fa;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px;
}
.filter-section h4 {
margin: 0 0 15px 0;
font-size: 1.1em;
color: #333;
}
.filter-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.filter-group {
display: flex;
flex-direction: column;
}
.filter-group label {
font-weight: 600;
margin-bottom: 5px;
font-size: 0.9em;
color: #555;
}
.filter-group select,
.filter-group input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.filter-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.filter-checkboxes label {
display: flex;
align-items: center;
gap: 8px;
font-weight: normal;
cursor: pointer;
}
.filter-checkboxes input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.filter-actions {
margin-top: 15px;
display: flex;
gap: 10px;
}
/* Product Table */
.product-table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
margin-bottom: 20px;
}
.product-table thead {
background: #667eea;
color: white;
}
.product-table th {
padding: 12px;
text-align: left;
font-weight: 600;
font-size: 0.9em;
white-space: nowrap;
}
.product-table th.sortable {
cursor: pointer;
user-select: none;
}
.product-table th.sortable:hover {
background: #5568d3;
}
.product-table th.sortable::after {
content: ' ⇅';
opacity: 0.5;
}
.product-table th.sort-asc::after {
content: ' ▲';
opacity: 1;
}
.product-table th.sort-desc::after {
content: ' ▼';
opacity: 1;
}
.product-table td {
padding: 12px;
border-bottom: 1px solid #e0e0e0;
}
.product-table tbody tr {
transition: background 0.2s;
}
.product-table tbody tr:hover {
background: #f5f5f5;
}
.product-name {
font-weight: 600;
color: #333;
}
.product-vendor {
color: #666;
font-size: 0.9em;
}
.price-badge {
background: #4CAF50;
color: white;
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
display: inline-block;
}
.btn-select {
padding: 8px 20px;
background: #667eea;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
margin-right: 5px;
}
.btn-select:hover {
background: #5568d3;
}
.btn-details {
padding: 8px 15px;
background: #6c757d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.btn-details:hover {
background: #5a6268;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
margin-top: 20px;
flex-wrap: wrap;
}
.page-btn {
padding: 8px 12px;
border: 1px solid #ddd;
background: white;
cursor: pointer;
border-radius: 4px;
font-weight: 500;
transition: all 0.3s;
}
.page-btn:hover {
background: #f5f5f5;
border-color: #667eea;
}
.page-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.page-info {
padding: 8px 15px;
color: #666;
font-size: 0.9em;
}
/* Product Details Modal */
.details-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
margin-top: 20px;
}
.specs-table {
width: 100%;
border-collapse: collapse;
}
.specs-table tr {
border-bottom: 1px solid #e0e0e0;
}
.specs-table td {
padding: 10px;
}
.specs-table td:first-child {
font-weight: 600;
color: #555;
width: 40%;
}
.specs-table td:last-child {
color: #333;
}
.pricing-panel {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.vendor-price-item {
background: white;
padding: 15px;
border-radius: 6px;
margin-bottom: 10px;
border: 2px solid #e0e0e0;
transition: border-color 0.3s;
}
.vendor-price-item:hover {
border-color: #667eea;
}
.vendor-price-item.best-price {
border-color: #4CAF50;
background: #f1f8f4;
}
.vendor-name {
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.vendor-price {
font-size: 1.3em;
color: #4CAF50;
font-weight: 700;
}
.vendor-stock {
font-size: 0.85em;
color: #666;
margin-top: 5px;
}
.best-price-badge {
background: #4CAF50;
color: white;
padding: 2px 8px;
border-radius: 3px;
font-size: 0.75em;
margin-left: 8px;
}
/* Empty State */
.empty-products {
text-align: center;
padding: 60px 20px;
color: #999;
}
.empty-products-icon {
font-size: 3em;
margin-bottom: 15px;
}
/* Component Configuration Wizard */
.wizard-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1100;
overflow-y: auto;
}
.wizard-modal.active {
display: block;
}
.wizard-content {
max-width: 1400px;
margin: 30px auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 50px rgba(0,0,0,0.4);
}
.wizard-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px 30px;
border-radius: 12px 12px 0 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.wizard-header-left {
display: flex;
align-items: center;
gap: 15px;
}
.wizard-title {
font-size: 1.8em;
font-weight: 700;
margin: 0;
}
.wizard-subtitle {
font-size: 0.9em;
opacity: 0.9;
margin-top: 5px;
}
.btn-back {
background: rgba(255,255,255,0.2);
border: none;
color: white;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
display: flex;
align-items: center;
gap: 5px;
}
.btn-back:hover {
background: rgba(255,255,255,0.3);
}
.wizard-body {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
padding: 30px;
max-height: calc(100vh - 250px);
overflow-y: auto;
}
.component-sections {
display: flex;
flex-direction: column;
gap: 15px;
}
.component-section {
background: white;
border: 2px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.3s;
}
.component-section:hover {
border-color: #667eea;
}
.section-header {
background: #667eea;
color: white;
padding: 15px 20px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
}
.section-header:hover {
background: #5568d3;
}
.section-header .badge {
background: rgba(255,255,255,0.25);
padding: 4px 12px;
border-radius: 12px;
font-size: 0.9em;
}
.component-options {
padding: 15px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: 400px;
overflow-y: auto;
}
.component-option {
background: white;
border: 2px solid #ddd;
border-radius: 6px;
padding: 15px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 15px;
align-items: center;
transition: all 0.3s;
}
.component-option:hover {
border-color: #667eea;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.component-option.selected {
border-color: #4CAF50;
background: #f1f8f4;
}
.component-checkbox {
width: 24px;
height: 24px;
cursor: pointer;
accent-color: #4CAF50;
}
.component-info {
display: flex;
flex-direction: column;
gap: 5px;
}
.component-name {
font-weight: 600;
color: #333;
font-size: 15px;
}
.component-specs {
font-size: 0.9em;
color: #666;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.spec-item {
display: flex;
align-items: center;
gap: 4px;
}
.component-controls {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
}
.qty-control {
display: flex;
align-items: center;
gap: 8px;
}
.qty-btn {
width: 32px;
height: 32px;
border: 1px solid #ddd;
background: white;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
font-size: 16px;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.qty-btn:hover:not(:disabled) {
background: #667eea;
color: white;
border-color: #667eea;
}
.qty-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.qty-input {
width: 55px;
text-align: center;
padding: 6px;
border: 2px solid #ddd;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
}
.component-price {
color: #4CAF50;
font-weight: 700;
font-size: 1.1em;
}
.component-subtotal {
color: #666;
font-size: 0.85em;
}
.config-summary {
background: #f8f9fa;
border-radius: 8px;
padding: 25px;
position: sticky;
top: 0;
height: fit-content;
border: 2px solid #e0e0e0;
}
.summary-section {
margin-bottom: 25px;
}
.summary-section h4 {
margin: 0 0 15px 0;
color: #333;
font-size: 1.1em;
border-bottom: 2px solid #667eea;
padding-bottom: 8px;
}
.summary-items {
display: flex;
flex-direction: column;
gap: 8px;
}
.summary-item {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 0.95em;
color: #555;
}
.summary-item-name {
flex: 1;
}
.summary-item-value {
font-weight: 600;
color: #333;
}
.summary-divider {
border-top: 1px solid #ddd;
margin: 10px 0;
}
.summary-item.total {
border-top: 2px solid #333;
margin-top: 10px;
padding-top: 15px;
font-weight: 700;
font-size: 1.4em;
}
.summary-item.total .summary-item-value {
color: #4CAF50;
}
.requirements-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.requirement {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
padding: 6px 10px;
border-radius: 4px;
}
.requirement.met {
color: #2e7d32;
background: #e8f5e9;
}
.requirement.unmet {
color: #c62828;
background: #ffebee;
}
.requirement-icon {
font-weight: 700;
font-size: 1.1em;
}
.wizard-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.btn-wizard-primary {
width: 100%;
padding: 16px;
background: #4CAF50;
color: white;
border: none;
border-radius: 6px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.btn-wizard-primary:hover:not(:disabled) {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}
.btn-wizard-primary:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
opacity: 0.6;
}
.btn-recommended {
width: 100%;
padding: 12px;
background: #2196F3;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.btn-recommended:hover {
background: #0b7dda;
transform: translateY(-1px);
}
.empty-components {
text-align: center;
padding: 40px 20px;
color: #999;
}
/* Responsive */
@media (max-width: 768px) {
.modal-content-wrapper {
margin: 10px;
width: calc(100% - 20px);
}
.browser-controls {
flex-direction: column;
}
.filter-groups {
grid-template-columns: 1fr;
}
.details-grid {
grid-template-columns: 1fr;
}
.product-table {
font-size: 0.85em;
}
.product-table th,
.product-table td {
padding: 8px 6px;
}
.wizard-body {
grid-template-columns: 1fr;
}
.config-summary {
position: relative;
}
.component-option {
grid-template-columns: auto 1fr;
gap: 10px;
}
.component-controls {
grid-column: 1 / -1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* API unavailability error display */
.api-error-banner {
background: #fde8e8;
border: 1px solid #f5c6c6;
border-radius: 6px;
color: #721c24;
padding: 16px 20px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.api-error-banner .error-icon { font-size: 20px; flex-shrink: 0; }
.api-error-banner .error-text { flex: 1; }
.api-error-banner .error-title { font-weight: 600; margin-bottom: 4px; }
.api-error-banner .error-detail { font-size: 13px; opacity: 0.8; }
پیکربندی BOM API: محتوا را روی URL پایه API تنظیم کنید تا حالت API فعال شود، به عنوان مثال. http://localhost:5000
سربرگ
انتخابگر دستگاه
انتخابگر زیرمجموعه شبکه (زمانی که روی کاشی شبکه کلیک شد به صورت درون خطی نشان داده می شود)
دکمه های اکشن
حالت بارگیری
جدول BOM
پنل مجموع
مدال مرورگر محصول
جزئیات محصول Modal
سرور پیکربندی جادوگر مدال
دستیار BOM
ابزار برنامه ریزی لایحه مواد سخت افزاری برای استقرار مرکز داده. توان، BTU، TDP، فضای رک و هزینه کل را محاسبه کنید.
افزودن سخت افزار به BOM
برای مرور و انتخاب محصولات روی یک دسته کلیک کنید
در حال بارگیری داده های سخت افزاری...
| دسته بندی | فروشنده | ساخت/مدل | جزء | تعداد | توان (W) | BTU | TDP (W) | رک U | هسته های CPU | حافظه (GB) | وزن (کیلوگرم) | اقدامات |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
هنوز دستگاهی در BOM وجود ندارد. سخت افزار را با استفاده از انتخابگر بالا اضافه کنید. |
||||||||||||
مجموع BOM
0
وات
0
BTU/hr
0
وات
0
U
—
هسته ها
—
نصب شده است
—
کیلوگرم
پیکربندی سرور
کامپوننت ها را برای سرور خود انتخاب کنید
بخش های مؤلفه در اینجا ارائه می شود
خلاصه پیکربندی
شاسی بلند
-
الزامات
الزامات در اینجا ارائه خواهد شد
مجموع
قدرت
0 وات
BTU
0 BTU/hr
TDP
0 وات
حافظه نصب شده است
0 گیگابایت
قیمت کل
$0