Compare commits
16 Commits
HW_Dashboa
...
e128634e05
| Author | SHA1 | Date | |
|---|---|---|---|
| e128634e05 | |||
| c0ef52deac | |||
| aab1f91d3d | |||
| e77c4854cb | |||
| 309c400ee2 | |||
| 3db05f2939 | |||
| 2cb4b87c0a | |||
| 6ed2faee2d | |||
| 89d3ac2e89 | |||
| b37981506e | |||
| 73ef13f3a5 | |||
| 155570e8de | |||
| 119c799d1d | |||
| b169176d57 | |||
| 56abdddbc7 | |||
| fd9e88d7c6 |
33
README.md
33
README.md
@@ -9,6 +9,14 @@
|
|||||||
- 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
|
- 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
|
||||||
- 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
|
- 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
|
||||||
4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
|
4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
|
||||||
|
5. **RED–GREEN–Refactor 개발 원칙**:
|
||||||
|
- 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
|
||||||
|
- **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
|
||||||
|
- **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
|
||||||
|
- **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
|
||||||
|
- 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
|
||||||
|
- 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
|
||||||
|
- 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -28,29 +36,8 @@
|
|||||||
|
|
||||||
### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
||||||
|
|
||||||
1. **디자인 철학 (Design Philosophy)**
|
디자인 일관성 및 시각적 원칙에 관한 상세 내용은 아래 문서를 참조하십시오.
|
||||||
* **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
|
|
||||||
* **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
|
|
||||||
* **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
|
|
||||||
|
|
||||||
2. **타이포그래피 (Typography)**
|
👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**
|
||||||
* **Font Family**: `Pretendard` (전역 적용)
|
|
||||||
* **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
|
|
||||||
* **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
|
|
||||||
|
|
||||||
3. **컬러 팔레트 (Color Palette)**
|
|
||||||
* **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
|
|
||||||
* **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
|
|
||||||
* **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
|
|
||||||
* **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
|
|
||||||
|
|
||||||
4. **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
|
|
||||||
* **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
|
|
||||||
* **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
|
|
||||||
* **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
|
|
||||||
* **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
|
|
||||||
* **Modal (모달 공통 규칙)**:
|
|
||||||
* **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
|
|
||||||
* **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
|
|
||||||
* **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
|
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
59
backup_db.js
59
backup_db.js
@@ -1,59 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
import * as xlsx from 'xlsx';
|
|
||||||
import fs from 'fs';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function backup() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🚀 Starting Database Backup Process...');
|
|
||||||
|
|
||||||
const tables = [
|
|
||||||
'asset_pc', 'asset_server', 'asset_storage', 'asset_remote',
|
|
||||||
'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
|
|
||||||
];
|
|
||||||
|
|
||||||
const wb = xlsx.utils.book_new();
|
|
||||||
|
|
||||||
for (const table of tables) {
|
|
||||||
try {
|
|
||||||
// 1. Create table backup
|
|
||||||
await connection.query(`DROP TABLE IF EXISTS ${table}_backup`);
|
|
||||||
await connection.query(`CREATE TABLE ${table}_backup AS SELECT * FROM ${table}`);
|
|
||||||
console.log(`✅ Table backup created: ${table} -> ${table}_backup`);
|
|
||||||
|
|
||||||
// 2. Fetch data for Excel
|
|
||||||
const [rows] = await connection.query(`SELECT * FROM ${table}`);
|
|
||||||
if (rows.length > 0) {
|
|
||||||
const ws = xlsx.utils.json_to_sheet(rows);
|
|
||||||
// Sheet names max length is 31 chars
|
|
||||||
const sheetName = table.substring(0, 31);
|
|
||||||
xlsx.utils.book_append_sheet(wb, ws, sheetName);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.warn(`⚠️ Skipped ${table}: ${e.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Write Excel file
|
|
||||||
const fileName = 'backupDB_20260608.xlsx';
|
|
||||||
xlsx.writeFile(wb, fileName);
|
|
||||||
console.log(`✅ Excel data exported successfully to ${fileName}`);
|
|
||||||
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
backup().catch(err => {
|
|
||||||
console.error('❌ Backup Failed:', err);
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function checkRecentLogs() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('--- Recent History Logs ---');
|
|
||||||
const [rows] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC LIMIT 5');
|
|
||||||
console.log(JSON.stringify(rows, null, 2));
|
|
||||||
|
|
||||||
console.log('\n--- Recent Core Data (to check current_dept) ---');
|
|
||||||
const [coreRows] = await connection.query('SELECT id, asset_code, current_dept, previous_dept FROM asset_core ORDER BY updated_at DESC LIMIT 5');
|
|
||||||
console.log(JSON.stringify(coreRows, null, 2));
|
|
||||||
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
checkRecentLogs().catch(console.error);
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function checkRemote() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('--- Checking asset_remote table ---');
|
|
||||||
|
|
||||||
const [columns] = await connection.query('DESCRIBE asset_remote');
|
|
||||||
const cols = columns.map(c => c.Field);
|
|
||||||
console.log('Columns in asset_remote:', cols.join(', '));
|
|
||||||
|
|
||||||
const [count] = await connection.query('SELECT COUNT(*) as count FROM asset_remote WHERE remote_tool IS NOT NULL OR remote_id IS NOT NULL');
|
|
||||||
console.log(`Rows with remote info (tool or id): ${count[0].count}`);
|
|
||||||
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
checkRemote().catch(console.error);
|
|
||||||
176
db_init.js
176
db_init.js
@@ -1,176 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function initDB() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306'),
|
|
||||||
multipleStatements: true
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🔄 DB 초기화 시작 (영문 표준 스키마 적용)...');
|
|
||||||
|
|
||||||
const tablesToDrop = [
|
|
||||||
'pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets',
|
|
||||||
'sw_sub_assets', 'sw_perm_assets', 'cloud_assets', 'sw_users', 'asset_logs'
|
|
||||||
];
|
|
||||||
for (const table of tablesToDrop) {
|
|
||||||
await connection.query(`DROP TABLE IF EXISTS ${table}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const createHardwareTable = (tableName, comment) => `
|
|
||||||
CREATE TABLE ${tableName} (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
corp VARCHAR(100),
|
|
||||||
asset_code VARCHAR(100),
|
|
||||||
purchase_date VARCHAR(50),
|
|
||||||
type VARCHAR(50),
|
|
||||||
detail_purpose VARCHAR(50),
|
|
||||||
purpose VARCHAR(255),
|
|
||||||
details TEXT,
|
|
||||||
current_org VARCHAR(255),
|
|
||||||
prev_org VARCHAR(255),
|
|
||||||
location VARCHAR(255),
|
|
||||||
manager_main VARCHAR(100),
|
|
||||||
manager_sub VARCHAR(100),
|
|
||||||
ip_address VARCHAR(100),
|
|
||||||
remote_tool VARCHAR(100),
|
|
||||||
server_id VARCHAR(100),
|
|
||||||
server_pw VARCHAR(100),
|
|
||||||
model_name VARCHAR(255),
|
|
||||||
mainboard VARCHAR(255) COMMENT '메인보드',
|
|
||||||
os VARCHAR(100),
|
|
||||||
cpu VARCHAR(255),
|
|
||||||
ram VARCHAR(100),
|
|
||||||
gpu VARCHAR(100),
|
|
||||||
storage1 VARCHAR(255),
|
|
||||||
storage2 VARCHAR(255),
|
|
||||||
storage3 VARCHAR(255),
|
|
||||||
monitoring VARCHAR(100),
|
|
||||||
price VARCHAR(100),
|
|
||||||
remarks TEXT,
|
|
||||||
storage_location VARCHAR(255),
|
|
||||||
status VARCHAR(50),
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`;
|
|
||||||
|
|
||||||
await connection.query(createHardwareTable('pc_assets', 'PC'));
|
|
||||||
await connection.query(createHardwareTable('server_assets', 'Server'));
|
|
||||||
await connection.query(createHardwareTable('storage_assets', 'Storage'));
|
|
||||||
await connection.query(createHardwareTable('equip_assets', 'Equipment'));
|
|
||||||
await connection.query(createHardwareTable('mobile_assets', 'Mobile'));
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE sw_sub_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
corp VARCHAR(100) COMMENT '구매법인',
|
|
||||||
category VARCHAR(100) COMMENT '분야',
|
|
||||||
dept VARCHAR(100) COMMENT '부서',
|
|
||||||
product_name VARCHAR(255) COMMENT '제품명',
|
|
||||||
license_type VARCHAR(100) COMMENT '라이선스 유형',
|
|
||||||
quantity INT COMMENT '수량',
|
|
||||||
price VARCHAR(100) COMMENT '금액',
|
|
||||||
purchase_date VARCHAR(50) COMMENT '구매일',
|
|
||||||
start_date VARCHAR(50) COMMENT '시작일',
|
|
||||||
expiry_date VARCHAR(50) COMMENT '만료일',
|
|
||||||
vendor VARCHAR(255) COMMENT '구매업체',
|
|
||||||
remarks TEXT COMMENT '비고',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE sw_perm_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
corp VARCHAR(100) COMMENT '구매법인',
|
|
||||||
category VARCHAR(100) COMMENT '분야',
|
|
||||||
dept VARCHAR(100) COMMENT '부서',
|
|
||||||
product_name VARCHAR(255) COMMENT '제품명',
|
|
||||||
license_key VARCHAR(255) COMMENT '라이선스 키',
|
|
||||||
quantity INT COMMENT '수량',
|
|
||||||
price VARCHAR(100) COMMENT '금액',
|
|
||||||
purchase_date VARCHAR(50) COMMENT '구매일',
|
|
||||||
start_date VARCHAR(50) COMMENT '시작일',
|
|
||||||
expiry_date VARCHAR(50) COMMENT '만료일',
|
|
||||||
vendor VARCHAR(255) COMMENT '구매업체',
|
|
||||||
remarks TEXT COMMENT '비고',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE cloud_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
platform_name VARCHAR(100),
|
|
||||||
corp VARCHAR(100),
|
|
||||||
dept VARCHAR(100),
|
|
||||||
product_name VARCHAR(255),
|
|
||||||
account_name VARCHAR(255),
|
|
||||||
pay_method VARCHAR(100),
|
|
||||||
pay_day VARCHAR(50),
|
|
||||||
card_num VARCHAR(100),
|
|
||||||
monthly_fee VARCHAR(100),
|
|
||||||
remarks TEXT,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE sw_users (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
sw_id VARCHAR(50),
|
|
||||||
corp VARCHAR(100),
|
|
||||||
dept VARCHAR(100),
|
|
||||||
position VARCHAR(50),
|
|
||||||
user_name VARCHAR(100),
|
|
||||||
usage_period VARCHAR(100),
|
|
||||||
doc_name VARCHAR(255),
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_logs (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50),
|
|
||||||
log_date VARCHAR(50),
|
|
||||||
log_user VARCHAR(100),
|
|
||||||
details TEXT,
|
|
||||||
cost DECIMAL(15,2) DEFAULT 0,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE ops_domain_assets (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
type VARCHAR(50) COMMENT '유형',
|
|
||||||
corp VARCHAR(100) COMMENT '법인',
|
|
||||||
service_name VARCHAR(255) COMMENT '서비스명',
|
|
||||||
domain_name VARCHAR(255) COMMENT '관리도메인',
|
|
||||||
start_date VARCHAR(50) COMMENT '시작일',
|
|
||||||
expiry_date VARCHAR(50) COMMENT '만료일',
|
|
||||||
price VARCHAR(100) COMMENT '금액',
|
|
||||||
manager_main VARCHAR(100) COMMENT '담당자',
|
|
||||||
manager_sub VARCHAR(100) COMMENT '담당자(부)',
|
|
||||||
remarks TEXT COMMENT '비고',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
console.log('✅ 모든 테이블이 영문 표준 스키마로 재생성되었습니다.');
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
initDB().catch(err => {
|
|
||||||
console.error('❌ DB 초기화 실패:', err);
|
|
||||||
process.exit(1);
|
|
||||||
});
|
|
||||||
48
design_rule.md
Normal file
48
design_rule.md
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
||||||
|
|
||||||
|
본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1. 디자인 철학 (Design Philosophy)
|
||||||
|
* **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
|
||||||
|
* **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
|
||||||
|
* **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
|
||||||
|
|
||||||
|
### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
|
||||||
|
* **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
|
||||||
|
* **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
|
||||||
|
* **Typography Scale**:
|
||||||
|
* **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
|
||||||
|
* **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
|
||||||
|
* **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
|
||||||
|
* **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
|
||||||
|
* **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
|
||||||
|
* **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
|
||||||
|
* **Layout Units**:
|
||||||
|
* **Header Height**: `clamp(50px, 8vmin, 90px)`
|
||||||
|
* **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
|
||||||
|
* **Radius**: `clamp(6px, 1.5vmin, 16px)`
|
||||||
|
|
||||||
|
### 3. 컬러 팔레트 (Vercel Stark Palette)
|
||||||
|
* **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
|
||||||
|
* **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
|
||||||
|
* **Border**: `#ebebeb` (Hairline) - 정보 구분선.
|
||||||
|
* **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
|
||||||
|
* **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
|
||||||
|
|
||||||
|
### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
|
||||||
|
* **Header & Navigation**:
|
||||||
|
* 상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
|
||||||
|
* **Unified Filter Bar**:
|
||||||
|
* 검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
|
||||||
|
* **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
|
||||||
|
* **Dashboard**:
|
||||||
|
* **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
|
||||||
|
* **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
|
||||||
|
* **Footer**:
|
||||||
|
* 화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
|
||||||
|
* 상단에 1px 헤어라인 구분선을 가집니다.
|
||||||
|
* **Security & UX**:
|
||||||
|
* **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
|
||||||
|
* **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function dropLegacyTables() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🧹 Starting cleanup of obsolete legacy backup tables...');
|
|
||||||
|
|
||||||
const tablesToDrop = [
|
|
||||||
'asset_pc', 'asset_pc_backup',
|
|
||||||
'asset_server', 'asset_server_backup',
|
|
||||||
'asset_storage', 'asset_storage_backup',
|
|
||||||
'asset_remote_backup', // IMPORTANT: DO NOT drop asset_remote!
|
|
||||||
'asset_equipment', 'asset_equipment_backup',
|
|
||||||
'asset_office_supplies', 'asset_office_supplies_backup',
|
|
||||||
'asset_survey', 'asset_survey_backup',
|
|
||||||
'asset_vip', 'asset_vip_backup',
|
|
||||||
'asset_pc_parts'
|
|
||||||
];
|
|
||||||
|
|
||||||
for (const table of tablesToDrop) {
|
|
||||||
try {
|
|
||||||
await connection.query(`DROP TABLE IF EXISTS ${table}`);
|
|
||||||
console.log(`✅ Dropped table: ${table}`);
|
|
||||||
} catch (err) {
|
|
||||||
console.warn(`⚠️ Failed to drop table ${table}: ${err.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('🎉 Cleanup complete. Database is now lean and mean.');
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
dropLegacyTables().catch(console.error);
|
|
||||||
BIN
image 92.png
BIN
image 92.png
Binary file not shown.
|
Before Width: | Height: | Size: 135 KiB |
BIN
img/image_92.png
Normal file
BIN
img/image_92.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 MiB After Width: | Height: | Size: 7.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 MiB After Width: | Height: | Size: 11 MiB |
BIN
img/location_photo/기술개발센터/센터내부/센터내부.png
Normal file
BIN
img/location_photo/기술개발센터/센터내부/센터내부.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
354
img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
Normal file
354
img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Center Chair Map (View Only)</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload.js?v=20260403a"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
|
||||||
|
// --- Added for Point Picking & Marker ---
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
let markerX = params.get('markerX') ? parseFloat(params.get('markerX')) : null;
|
||||||
|
let markerY = params.get('markerY') ? parseFloat(params.get('markerY')) : null;
|
||||||
|
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return { ...chair, minX, minY, maxX, maxY, path };
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (Math.max(x1, x2) < viewMinX || Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY || Math.min(y1, y2) > viewMaxY) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.lineWidth = 1.35 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
ctx.strokeStyle = "rgba(21, 149, 142, 0.8)";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Draw Marker ---
|
||||||
|
if (markerX !== null && markerY !== null) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(markerX, markerY, 50 / camera.scale, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = "rgba(220, 38, 38, 0.8)";
|
||||||
|
ctx.fill();
|
||||||
|
ctx.strokeStyle = "#fff";
|
||||||
|
ctx.lineWidth = 10 / camera.scale;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const worldPos = screenToWorld(mx, my);
|
||||||
|
markerX = worldPos.x;
|
||||||
|
markerY = worldPos.y;
|
||||||
|
requestDraw();
|
||||||
|
|
||||||
|
// Notify parent window
|
||||||
|
window.parent.postMessage({
|
||||||
|
type: 'PICK_LOCATION',
|
||||||
|
x: markerX.toFixed(2),
|
||||||
|
y: markerY.toFixed(2)
|
||||||
|
}, '*');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
});
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
931
img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
Normal file
931
img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
Normal file
@@ -0,0 +1,931 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>center chair people map</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
button.alt {
|
||||||
|
color: var(--ink);
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.mapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 76px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: min(94vw, 1320px);
|
||||||
|
max-height: min(56vh, 560px);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(234, 239, 247, 0.95);
|
||||||
|
border: 1px solid rgba(101, 119, 146, 0.22);
|
||||||
|
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
.hidden-off {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mapper-head {
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-bottom: 1px solid rgba(101,119,146,0.18);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #51607a;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
background: rgba(255,255,255,0.6);
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
display: block;
|
||||||
|
color: #17243b;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.mapper-head .alt {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.org-chart {
|
||||||
|
margin: 0;
|
||||||
|
padding: 14px;
|
||||||
|
overflow: auto;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.org-top {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: min(100%, 420px);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(67, 84, 118, 0.25);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
background: #1e2f4d;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
padding: 16px 12px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
.org-top-members {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(160px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.org-team {
|
||||||
|
border: 1px solid rgba(110, 126, 152, 0.25);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-team h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 9px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #21324e;
|
||||||
|
font-weight: 800;
|
||||||
|
border-bottom: 1px solid rgba(110, 126, 152, 0.2);
|
||||||
|
background: rgba(240, 245, 252, 0.96);
|
||||||
|
}
|
||||||
|
.org-members {
|
||||||
|
padding: 7px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.org-person {
|
||||||
|
border: 1px solid rgba(116, 133, 161, 0.25);
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease, border-color 120ms ease;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-person.active {
|
||||||
|
border-color: rgba(15,118,110,0.6);
|
||||||
|
background: rgba(15,118,110,0.11);
|
||||||
|
}
|
||||||
|
.org-person.assigned {
|
||||||
|
border-color: rgba(37,99,235,0.5);
|
||||||
|
background: rgba(37,99,235,0.1);
|
||||||
|
}
|
||||||
|
.org-person strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #15233a;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.org-person small {
|
||||||
|
display: block;
|
||||||
|
color: #5a6a86;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.mapper {
|
||||||
|
top: 72px;
|
||||||
|
width: min(96vw, 920px);
|
||||||
|
max-height: 58vh;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
top: 64px;
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
grid-template-columns: repeat(3, minmax(150px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 170px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(17,24,39,0.94);
|
||||||
|
color: white;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(12px, 12px);
|
||||||
|
transition: opacity 120ms ease;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.tooltip.visible { opacity: 1; }
|
||||||
|
.tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
|
||||||
|
.tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
<div class="chip" id="hover-chip">chair hover: none</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
<button type="button" class="alt" id="clear-btn">선택 지우기</button>
|
||||||
|
</div>
|
||||||
|
<aside class="mapper hidden-off">
|
||||||
|
<div class="mapper-head">
|
||||||
|
<div id="mapper-status">
|
||||||
|
<strong>조직 현황</strong>
|
||||||
|
<span>선택 인원 없음</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
|
||||||
|
</div>
|
||||||
|
<div class="org-chart" id="org-chart"></div>
|
||||||
|
</aside>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<div class="tooltip" id="tooltip"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload.js?v=20260403a"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const tooltip = document.getElementById("tooltip");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
const hoverChip = document.getElementById("hover-chip");
|
||||||
|
const STORAGE_KEY = "ptc-chair-selection";
|
||||||
|
const PEOPLE_STORAGE_KEY = "ptc-chair-people";
|
||||||
|
const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
|
||||||
|
const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
|
||||||
|
const clearAssignBtn = document.getElementById("clear-assign-btn");
|
||||||
|
const orgChartEl = document.getElementById("org-chart");
|
||||||
|
const mapperStatus = document.getElementById("mapper-status");
|
||||||
|
// Prevent stale auto-highlights from previous sessions.
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ASSIGN_STORAGE_KEY);
|
||||||
|
const placed = new Set();
|
||||||
|
let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
|
||||||
|
let chairAssignments = {};
|
||||||
|
let activePersonId = null;
|
||||||
|
const ORG_TEMPLATE = {
|
||||||
|
top: {
|
||||||
|
name: "총괄기획실",
|
||||||
|
count: 53,
|
||||||
|
members: [
|
||||||
|
{ name: "장종찬", dept: "총괄기획실", title: "기획실장" },
|
||||||
|
{ name: "김원식", dept: "총괄기획실", title: "전무이사" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
teams: [
|
||||||
|
{ name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
|
||||||
|
{ name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
|
||||||
|
{ name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
|
||||||
|
{ name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
|
||||||
|
{ name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
|
||||||
|
{ name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
|
||||||
|
{ name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
const hitSegments = new Float32Array(chair.count * 4);
|
||||||
|
let segCursor = 0;
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
hitSegments[segCursor] = x1;
|
||||||
|
hitSegments[segCursor + 1] = y1;
|
||||||
|
hitSegments[segCursor + 2] = x2;
|
||||||
|
hitSegments[segCursor + 3] = y2;
|
||||||
|
segCursor += 4;
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...chair,
|
||||||
|
minX,
|
||||||
|
minY,
|
||||||
|
maxX,
|
||||||
|
maxY,
|
||||||
|
area: Math.max(1, (maxX - minX) * (maxY - minY)),
|
||||||
|
path,
|
||||||
|
hitSegments,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function renumberChairKeys(chairItems) {
|
||||||
|
if (!chairItems.length) return;
|
||||||
|
const heights = chairItems
|
||||||
|
.map((chair) => Math.max(1, chair.maxY - chair.minY))
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
|
||||||
|
const rowTolerance = Math.max(40, medianHeight * 0.9);
|
||||||
|
|
||||||
|
const sorted = [...chairItems].sort((a, b) => {
|
||||||
|
const ay = (a.minY + a.maxY) * 0.5;
|
||||||
|
const by = (b.minY + b.maxY) * 0.5;
|
||||||
|
if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
|
||||||
|
const ax = (a.minX + a.maxX) * 0.5;
|
||||||
|
const bx = (b.minX + b.maxX) * 0.5;
|
||||||
|
return ax - bx; // left -> right
|
||||||
|
});
|
||||||
|
|
||||||
|
sorted.forEach((chair, index) => {
|
||||||
|
chair.key = String(index + 1);
|
||||||
|
chair.seatNo = index + 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renumberChairKeys(chairGeometry);
|
||||||
|
const PICK_GRID_SIZE = 1800;
|
||||||
|
const chairPickGrid = new Map();
|
||||||
|
function pickGridKey(gx, gy) {
|
||||||
|
return `${gx},${gy}`;
|
||||||
|
}
|
||||||
|
chairGeometry.forEach((chair, index) => {
|
||||||
|
const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const key = pickGridKey(gx, gy);
|
||||||
|
if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
|
||||||
|
chairPickGrid.get(key).push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let pointer = { x: 0, y: 0 };
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let hovered = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function normalizePeople(raw) {
|
||||||
|
return raw
|
||||||
|
.map((person, index) => {
|
||||||
|
if (!person || !person.name) return null;
|
||||||
|
return {
|
||||||
|
id: person.id || `person-${index + 1}`,
|
||||||
|
name: String(person.name).trim(),
|
||||||
|
dept: String(person.dept || "").trim(),
|
||||||
|
title: String(person.title || "").trim(),
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTemplatePeople() {
|
||||||
|
const generated = [];
|
||||||
|
let seq = 1;
|
||||||
|
ORG_TEMPLATE.top.members.forEach((member) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name: member.name,
|
||||||
|
dept: member.dept,
|
||||||
|
title: member.title,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ORG_TEMPLATE.teams.forEach((team) => {
|
||||||
|
team.members.forEach((name) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name,
|
||||||
|
dept: team.name,
|
||||||
|
title: "선임",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return generated;
|
||||||
|
}
|
||||||
|
|
||||||
|
people = normalizePeople(people);
|
||||||
|
const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
|
||||||
|
if (!templateReady) {
|
||||||
|
people = createTemplatePeople();
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
|
||||||
|
chairAssignments = Object.fromEntries(
|
||||||
|
Object.entries(chairAssignments).filter(([chairKey, personId]) => (
|
||||||
|
chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
|
||||||
|
))
|
||||||
|
);
|
||||||
|
if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
|
||||||
|
|
||||||
|
function persistPeople() {
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistAssignments() {
|
||||||
|
localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistActivePerson() {
|
||||||
|
if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function assignmentCount() {
|
||||||
|
return Object.keys(chairAssignments).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPersonById(id) {
|
||||||
|
return people.find((person) => person.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChairByPerson(personId) {
|
||||||
|
for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
|
||||||
|
if (assignedPersonId === personId) return chairKey;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPeopleList() {
|
||||||
|
const activePerson = getPersonById(activePersonId);
|
||||||
|
const countText = `${assignmentCount()} / ${people.length} 매칭`;
|
||||||
|
mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
|
||||||
|
|
||||||
|
const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
|
||||||
|
const personCard = (person, roleText) => {
|
||||||
|
if (!person) return "";
|
||||||
|
const chairKey = getChairByPerson(person.id);
|
||||||
|
const assignedClass = chairKey ? " assigned" : "";
|
||||||
|
const activeClass = person.id === activePersonId ? " active" : "";
|
||||||
|
return `
|
||||||
|
<article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
|
||||||
|
<strong>${person.name}</strong>
|
||||||
|
<small>${person.title || roleText || "-"}</small>
|
||||||
|
<small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const topHtml = ORG_TEMPLATE.top.members
|
||||||
|
.map((member) => personCard(findPerson(member.dept, member.name), member.title))
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
|
||||||
|
const membersHtml = team.members
|
||||||
|
.map((name) => personCard(findPerson(team.name, name), "선임"))
|
||||||
|
.join("");
|
||||||
|
return `
|
||||||
|
<section class="org-team">
|
||||||
|
<h4>${team.name} (${team.count})</h4>
|
||||||
|
<div class="org-members">${membersHtml}</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
orgChartEl.innerHTML = `
|
||||||
|
<section class="org-top">
|
||||||
|
<div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
|
||||||
|
<div class="org-top-members">${topHtml}</div>
|
||||||
|
</section>
|
||||||
|
<section class="org-teams">${teamsHtml}</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickChair(screenX, screenY) {
|
||||||
|
const threshold = 12;
|
||||||
|
const pointerWorld = screenToWorld(screenX, screenY);
|
||||||
|
const thresholdWorld = threshold / camera.scale;
|
||||||
|
const thresholdWorldSq = thresholdWorld * thresholdWorld;
|
||||||
|
const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const candidateIndexes = [];
|
||||||
|
const seen = new Set();
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const candidates = chairPickGrid.get(pickGridKey(gx, gy));
|
||||||
|
if (!candidates) continue;
|
||||||
|
for (const index of candidates) {
|
||||||
|
if (seen.has(index)) continue;
|
||||||
|
seen.add(index);
|
||||||
|
candidateIndexes.push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let best = null;
|
||||||
|
for (const index of candidateIndexes) {
|
||||||
|
const chair = chairGeometry[index];
|
||||||
|
if (
|
||||||
|
pointerWorld.x < chair.minX - thresholdWorld ||
|
||||||
|
pointerWorld.x > chair.maxX + thresholdWorld ||
|
||||||
|
pointerWorld.y < chair.minY - thresholdWorld ||
|
||||||
|
pointerWorld.y > chair.maxY + thresholdWorld
|
||||||
|
) continue;
|
||||||
|
let distSq = Infinity;
|
||||||
|
for (let i = 0; i < chair.hitSegments.length; i += 4) {
|
||||||
|
const x1 = chair.hitSegments[i];
|
||||||
|
const y1 = chair.hitSegments[i + 1];
|
||||||
|
const x2 = chair.hitSegments[i + 2];
|
||||||
|
const y2 = chair.hitSegments[i + 3];
|
||||||
|
const dx = x2 - x1;
|
||||||
|
const dy = y2 - y1;
|
||||||
|
const len2 = dx * dx + dy * dy;
|
||||||
|
let segDistSq;
|
||||||
|
if (len2 === 0) {
|
||||||
|
const px = pointerWorld.x - x1;
|
||||||
|
const py = pointerWorld.y - y1;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
} else {
|
||||||
|
let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
|
||||||
|
t = Math.max(0, Math.min(1, t));
|
||||||
|
const lx = x1 + t * dx;
|
||||||
|
const ly = y1 + t * dy;
|
||||||
|
const px = pointerWorld.x - lx;
|
||||||
|
const py = pointerWorld.y - ly;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
}
|
||||||
|
if (segDistSq < distSq) distSq = segDistSq;
|
||||||
|
if (distSq <= thresholdWorldSq * 0.3) break;
|
||||||
|
}
|
||||||
|
if (distSq > thresholdWorldSq) continue;
|
||||||
|
const dist = Math.sqrt(distSq) * camera.scale;
|
||||||
|
|
||||||
|
if (!best) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distGap = dist - best.dist;
|
||||||
|
if (distGap < -0.75) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(distGap) <= 2) {
|
||||||
|
const areaGap = chair.area - best.chair.area;
|
||||||
|
if (areaGap < -1) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
Math.abs(areaGap) <= 1 &&
|
||||||
|
chair.kind === "block" &&
|
||||||
|
best.chair.kind !== "block"
|
||||||
|
) {
|
||||||
|
best = { chair, dist };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return best ? best.chair : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTooltip() {
|
||||||
|
if (!hovered) {
|
||||||
|
tooltip.classList.remove("visible");
|
||||||
|
hoverChip.textContent = "chair hover: none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hoverChip.textContent = `chair hover: ${hovered.name}`;
|
||||||
|
tooltip.innerHTML = `
|
||||||
|
<strong>${hovered.name}</strong>
|
||||||
|
<div>chair key: ${hovered.key}</div>
|
||||||
|
<div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
|
||||||
|
<div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
|
||||||
|
`;
|
||||||
|
tooltip.style.left = `${pointer.x + 14}px`;
|
||||||
|
tooltip.style.top = `${pointer.y + 14}px`;
|
||||||
|
tooltip.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (
|
||||||
|
Math.max(x1, x2) < viewMinX ||
|
||||||
|
Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY ||
|
||||||
|
Math.min(y1, y2) > viewMaxY
|
||||||
|
) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
hovered = dragging ? null : pickChair(pointer.x, pointer.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.lineWidth = 1.45 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
const active = hovered && hovered.key === chair.key;
|
||||||
|
const selected = placed.has(chair.key);
|
||||||
|
const assignedPersonId = chairAssignments[chair.key];
|
||||||
|
const activePersonChair = activePersonId && assignedPersonId === activePersonId;
|
||||||
|
const assigned = Boolean(assignedPersonId);
|
||||||
|
const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
|
||||||
|
ctx.strokeStyle = activePersonChair
|
||||||
|
? "rgba(234, 179, 8, 1)"
|
||||||
|
: assigned
|
||||||
|
? "rgba(37, 99, 235, 0.98)"
|
||||||
|
: selected
|
||||||
|
? "rgba(220, 38, 38, 0.98)"
|
||||||
|
: active
|
||||||
|
? "rgba(15, 118, 110, 0.98)"
|
||||||
|
: chair.kind === "group"
|
||||||
|
? "rgba(16, 134, 149, 0.74)"
|
||||||
|
: "rgba(21, 149, 142, 0.8)";
|
||||||
|
ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
renderTooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistPlaced() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
|
||||||
|
if (picked) {
|
||||||
|
if (placed.has(picked.key)) placed.delete(picked.key);
|
||||||
|
else placed.add(picked.key);
|
||||||
|
persistPlaced();
|
||||||
|
if (activePersonId) {
|
||||||
|
const currentChair = getChairByPerson(activePersonId);
|
||||||
|
if (chairAssignments[picked.key] === activePersonId) {
|
||||||
|
delete chairAssignments[picked.key];
|
||||||
|
} else {
|
||||||
|
if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
|
||||||
|
chairAssignments[picked.key] = activePersonId;
|
||||||
|
}
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
}
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
document.getElementById("clear-btn").addEventListener("click", () => {
|
||||||
|
placed.clear();
|
||||||
|
persistPlaced();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
clearAssignBtn.addEventListener("click", () => {
|
||||||
|
chairAssignments = {};
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
orgChartEl.addEventListener("click", (event) => {
|
||||||
|
const item = event.target.closest(".org-person[data-person-id]");
|
||||||
|
if (!item) return;
|
||||||
|
const personId = item.getAttribute("data-person-id");
|
||||||
|
activePersonId = personId === activePersonId ? null : personId;
|
||||||
|
persistActivePerson();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
renderPeopleList();
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
932
img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
Normal file
932
img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
Normal file
@@ -0,0 +1,932 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>center chair people map 6f</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
button.alt {
|
||||||
|
color: var(--ink);
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.mapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 76px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: min(94vw, 1320px);
|
||||||
|
max-height: min(56vh, 560px);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(234, 239, 247, 0.95);
|
||||||
|
border: 1px solid rgba(101, 119, 146, 0.22);
|
||||||
|
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
.hidden-off {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mapper-head {
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-bottom: 1px solid rgba(101,119,146,0.18);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #51607a;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
background: rgba(255,255,255,0.6);
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
display: block;
|
||||||
|
color: #17243b;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.mapper-head .alt {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.org-chart {
|
||||||
|
margin: 0;
|
||||||
|
padding: 14px;
|
||||||
|
overflow: auto;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.org-top {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: min(100%, 420px);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(67, 84, 118, 0.25);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
background: #1e2f4d;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
padding: 16px 12px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
.org-top-members {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(160px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.org-team {
|
||||||
|
border: 1px solid rgba(110, 126, 152, 0.25);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-team h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 9px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #21324e;
|
||||||
|
font-weight: 800;
|
||||||
|
border-bottom: 1px solid rgba(110, 126, 152, 0.2);
|
||||||
|
background: rgba(240, 245, 252, 0.96);
|
||||||
|
}
|
||||||
|
.org-members {
|
||||||
|
padding: 7px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.org-person {
|
||||||
|
border: 1px solid rgba(116, 133, 161, 0.25);
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease, border-color 120ms ease;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-person.active {
|
||||||
|
border-color: rgba(15,118,110,0.6);
|
||||||
|
background: rgba(15,118,110,0.11);
|
||||||
|
}
|
||||||
|
.org-person.assigned {
|
||||||
|
border-color: rgba(37,99,235,0.5);
|
||||||
|
background: rgba(37,99,235,0.1);
|
||||||
|
}
|
||||||
|
.org-person strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #15233a;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.org-person small {
|
||||||
|
display: block;
|
||||||
|
color: #5a6a86;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.mapper {
|
||||||
|
top: 72px;
|
||||||
|
width: min(96vw, 920px);
|
||||||
|
max-height: 58vh;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
top: 64px;
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
grid-template-columns: repeat(3, minmax(150px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 170px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(17,24,39,0.94);
|
||||||
|
color: white;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(12px, 12px);
|
||||||
|
transition: opacity 120ms ease;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.tooltip.visible { opacity: 1; }
|
||||||
|
.tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
|
||||||
|
.tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
<div class="chip" id="hover-chip">chair hover: none</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
<button type="button" class="alt" id="clear-btn">선택 지우기</button>
|
||||||
|
</div>
|
||||||
|
<aside class="mapper hidden-off">
|
||||||
|
<div class="mapper-head">
|
||||||
|
<div id="mapper-status">
|
||||||
|
<strong>조직 현황</strong>
|
||||||
|
<span>선택 인원 없음</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
|
||||||
|
</div>
|
||||||
|
<div class="org-chart" id="org-chart"></div>
|
||||||
|
</aside>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<div class="tooltip" id="tooltip"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload_6f.js"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const tooltip = document.getElementById("tooltip");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
const hoverChip = document.getElementById("hover-chip");
|
||||||
|
const STORAGE_KEY = "ptc-chair-selection";
|
||||||
|
const PEOPLE_STORAGE_KEY = "ptc-chair-people";
|
||||||
|
const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
|
||||||
|
const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
|
||||||
|
const clearAssignBtn = document.getElementById("clear-assign-btn");
|
||||||
|
const orgChartEl = document.getElementById("org-chart");
|
||||||
|
const mapperStatus = document.getElementById("mapper-status");
|
||||||
|
// Prevent stale auto-highlights from previous sessions.
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ASSIGN_STORAGE_KEY);
|
||||||
|
const placed = new Set();
|
||||||
|
let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
|
||||||
|
let chairAssignments = {};
|
||||||
|
let activePersonId = null;
|
||||||
|
const ORG_TEMPLATE = {
|
||||||
|
top: {
|
||||||
|
name: "총괄기획실",
|
||||||
|
count: 53,
|
||||||
|
members: [
|
||||||
|
{ name: "장종찬", dept: "총괄기획실", title: "기획실장" },
|
||||||
|
{ name: "김원식", dept: "총괄기획실", title: "전무이사" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
teams: [
|
||||||
|
{ name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
|
||||||
|
{ name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
|
||||||
|
{ name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
|
||||||
|
{ name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
|
||||||
|
{ name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
|
||||||
|
{ name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
|
||||||
|
{ name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
const hitSegments = new Float32Array(chair.count * 4);
|
||||||
|
let segCursor = 0;
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
hitSegments[segCursor] = x1;
|
||||||
|
hitSegments[segCursor + 1] = y1;
|
||||||
|
hitSegments[segCursor + 2] = x2;
|
||||||
|
hitSegments[segCursor + 3] = y2;
|
||||||
|
segCursor += 4;
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...chair,
|
||||||
|
minX,
|
||||||
|
minY,
|
||||||
|
maxX,
|
||||||
|
maxY,
|
||||||
|
area: Math.max(1, (maxX - minX) * (maxY - minY)),
|
||||||
|
path,
|
||||||
|
hitSegments,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function renumberChairKeys(chairItems) {
|
||||||
|
if (!chairItems.length) return;
|
||||||
|
const heights = chairItems
|
||||||
|
.map((chair) => Math.max(1, chair.maxY - chair.minY))
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
|
||||||
|
const rowTolerance = Math.max(40, medianHeight * 0.9);
|
||||||
|
|
||||||
|
const sorted = [...chairItems].sort((a, b) => {
|
||||||
|
const ay = (a.minY + a.maxY) * 0.5;
|
||||||
|
const by = (b.minY + b.maxY) * 0.5;
|
||||||
|
if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
|
||||||
|
const ax = (a.minX + a.maxX) * 0.5;
|
||||||
|
const bx = (b.minX + b.maxX) * 0.5;
|
||||||
|
return ax - bx; // left -> right
|
||||||
|
});
|
||||||
|
|
||||||
|
sorted.forEach((chair, index) => {
|
||||||
|
chair.key = String(index + 1);
|
||||||
|
chair.seatNo = index + 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renumberChairKeys(chairGeometry);
|
||||||
|
const PICK_GRID_SIZE = 1800;
|
||||||
|
const chairPickGrid = new Map();
|
||||||
|
function pickGridKey(gx, gy) {
|
||||||
|
return `${gx},${gy}`;
|
||||||
|
}
|
||||||
|
chairGeometry.forEach((chair, index) => {
|
||||||
|
const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const key = pickGridKey(gx, gy);
|
||||||
|
if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
|
||||||
|
chairPickGrid.get(key).push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let pointer = { x: 0, y: 0 };
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let hovered = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function normalizePeople(raw) {
|
||||||
|
return raw
|
||||||
|
.map((person, index) => {
|
||||||
|
if (!person || !person.name) return null;
|
||||||
|
return {
|
||||||
|
id: person.id || `person-${index + 1}`,
|
||||||
|
name: String(person.name).trim(),
|
||||||
|
dept: String(person.dept || "").trim(),
|
||||||
|
title: String(person.title || "").trim(),
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTemplatePeople() {
|
||||||
|
const generated = [];
|
||||||
|
let seq = 1;
|
||||||
|
ORG_TEMPLATE.top.members.forEach((member) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name: member.name,
|
||||||
|
dept: member.dept,
|
||||||
|
title: member.title,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ORG_TEMPLATE.teams.forEach((team) => {
|
||||||
|
team.members.forEach((name) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name,
|
||||||
|
dept: team.name,
|
||||||
|
title: "선임",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return generated;
|
||||||
|
}
|
||||||
|
|
||||||
|
people = normalizePeople(people);
|
||||||
|
const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
|
||||||
|
if (!templateReady) {
|
||||||
|
people = createTemplatePeople();
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
|
||||||
|
chairAssignments = Object.fromEntries(
|
||||||
|
Object.entries(chairAssignments).filter(([chairKey, personId]) => (
|
||||||
|
chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
|
||||||
|
))
|
||||||
|
);
|
||||||
|
if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
|
||||||
|
|
||||||
|
function persistPeople() {
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistAssignments() {
|
||||||
|
localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistActivePerson() {
|
||||||
|
if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function assignmentCount() {
|
||||||
|
return Object.keys(chairAssignments).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPersonById(id) {
|
||||||
|
return people.find((person) => person.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChairByPerson(personId) {
|
||||||
|
for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
|
||||||
|
if (assignedPersonId === personId) return chairKey;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPeopleList() {
|
||||||
|
const activePerson = getPersonById(activePersonId);
|
||||||
|
const countText = `${assignmentCount()} / ${people.length} 매칭`;
|
||||||
|
mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
|
||||||
|
|
||||||
|
const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
|
||||||
|
const personCard = (person, roleText) => {
|
||||||
|
if (!person) return "";
|
||||||
|
const chairKey = getChairByPerson(person.id);
|
||||||
|
const assignedClass = chairKey ? " assigned" : "";
|
||||||
|
const activeClass = person.id === activePersonId ? " active" : "";
|
||||||
|
return `
|
||||||
|
<article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
|
||||||
|
<strong>${person.name}</strong>
|
||||||
|
<small>${person.title || roleText || "-"}</small>
|
||||||
|
<small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const topHtml = ORG_TEMPLATE.top.members
|
||||||
|
.map((member) => personCard(findPerson(member.dept, member.name), member.title))
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
|
||||||
|
const membersHtml = team.members
|
||||||
|
.map((name) => personCard(findPerson(team.name, name), "선임"))
|
||||||
|
.join("");
|
||||||
|
return `
|
||||||
|
<section class="org-team">
|
||||||
|
<h4>${team.name} (${team.count})</h4>
|
||||||
|
<div class="org-members">${membersHtml}</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
orgChartEl.innerHTML = `
|
||||||
|
<section class="org-top">
|
||||||
|
<div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
|
||||||
|
<div class="org-top-members">${topHtml}</div>
|
||||||
|
</section>
|
||||||
|
<section class="org-teams">${teamsHtml}</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickChair(screenX, screenY) {
|
||||||
|
const threshold = 12;
|
||||||
|
const pointerWorld = screenToWorld(screenX, screenY);
|
||||||
|
const thresholdWorld = threshold / camera.scale;
|
||||||
|
const thresholdWorldSq = thresholdWorld * thresholdWorld;
|
||||||
|
const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const candidateIndexes = [];
|
||||||
|
const seen = new Set();
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const candidates = chairPickGrid.get(pickGridKey(gx, gy));
|
||||||
|
if (!candidates) continue;
|
||||||
|
for (const index of candidates) {
|
||||||
|
if (seen.has(index)) continue;
|
||||||
|
seen.add(index);
|
||||||
|
candidateIndexes.push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let best = null;
|
||||||
|
for (const index of candidateIndexes) {
|
||||||
|
const chair = chairGeometry[index];
|
||||||
|
if (
|
||||||
|
pointerWorld.x < chair.minX - thresholdWorld ||
|
||||||
|
pointerWorld.x > chair.maxX + thresholdWorld ||
|
||||||
|
pointerWorld.y < chair.minY - thresholdWorld ||
|
||||||
|
pointerWorld.y > chair.maxY + thresholdWorld
|
||||||
|
) continue;
|
||||||
|
let distSq = Infinity;
|
||||||
|
for (let i = 0; i < chair.hitSegments.length; i += 4) {
|
||||||
|
const x1 = chair.hitSegments[i];
|
||||||
|
const y1 = chair.hitSegments[i + 1];
|
||||||
|
const x2 = chair.hitSegments[i + 2];
|
||||||
|
const y2 = chair.hitSegments[i + 3];
|
||||||
|
const dx = x2 - x1;
|
||||||
|
const dy = y2 - y1;
|
||||||
|
const len2 = dx * dx + dy * dy;
|
||||||
|
let segDistSq;
|
||||||
|
if (len2 === 0) {
|
||||||
|
const px = pointerWorld.x - x1;
|
||||||
|
const py = pointerWorld.y - y1;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
} else {
|
||||||
|
let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
|
||||||
|
t = Math.max(0, Math.min(1, t));
|
||||||
|
const lx = x1 + t * dx;
|
||||||
|
const ly = y1 + t * dy;
|
||||||
|
const px = pointerWorld.x - lx;
|
||||||
|
const py = pointerWorld.y - ly;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
}
|
||||||
|
if (segDistSq < distSq) distSq = segDistSq;
|
||||||
|
if (distSq <= thresholdWorldSq * 0.3) break;
|
||||||
|
}
|
||||||
|
if (distSq > thresholdWorldSq) continue;
|
||||||
|
const dist = Math.sqrt(distSq) * camera.scale;
|
||||||
|
|
||||||
|
if (!best) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distGap = dist - best.dist;
|
||||||
|
if (distGap < -0.75) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(distGap) <= 2) {
|
||||||
|
const areaGap = chair.area - best.chair.area;
|
||||||
|
if (areaGap < -1) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
Math.abs(areaGap) <= 1 &&
|
||||||
|
chair.kind === "block" &&
|
||||||
|
best.chair.kind !== "block"
|
||||||
|
) {
|
||||||
|
best = { chair, dist };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return best ? best.chair : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTooltip() {
|
||||||
|
if (!hovered) {
|
||||||
|
tooltip.classList.remove("visible");
|
||||||
|
hoverChip.textContent = "chair hover: none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hoverChip.textContent = `chair hover: ${hovered.name}`;
|
||||||
|
tooltip.innerHTML = `
|
||||||
|
<strong>${hovered.name}</strong>
|
||||||
|
<div>chair key: ${hovered.key}</div>
|
||||||
|
<div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
|
||||||
|
<div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
|
||||||
|
`;
|
||||||
|
tooltip.style.left = `${pointer.x + 14}px`;
|
||||||
|
tooltip.style.top = `${pointer.y + 14}px`;
|
||||||
|
tooltip.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (
|
||||||
|
Math.max(x1, x2) < viewMinX ||
|
||||||
|
Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY ||
|
||||||
|
Math.min(y1, y2) > viewMaxY
|
||||||
|
) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
hovered = dragging ? null : pickChair(pointer.x, pointer.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.lineWidth = 1.45 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
const active = hovered && hovered.key === chair.key;
|
||||||
|
const selected = placed.has(chair.key);
|
||||||
|
const assignedPersonId = chairAssignments[chair.key];
|
||||||
|
const activePersonChair = activePersonId && assignedPersonId === activePersonId;
|
||||||
|
const assigned = Boolean(assignedPersonId);
|
||||||
|
const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
|
||||||
|
ctx.strokeStyle = activePersonChair
|
||||||
|
? "rgba(234, 179, 8, 1)"
|
||||||
|
: assigned
|
||||||
|
? "rgba(37, 99, 235, 0.98)"
|
||||||
|
: selected
|
||||||
|
? "rgba(220, 38, 38, 0.98)"
|
||||||
|
: active
|
||||||
|
? "rgba(15, 118, 110, 0.98)"
|
||||||
|
: chair.kind === "group"
|
||||||
|
? "rgba(16, 134, 149, 0.74)"
|
||||||
|
: "rgba(21, 149, 142, 0.8)";
|
||||||
|
ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
renderTooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistPlaced() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
|
||||||
|
if (picked) {
|
||||||
|
if (placed.has(picked.key)) placed.delete(picked.key);
|
||||||
|
else placed.add(picked.key);
|
||||||
|
persistPlaced();
|
||||||
|
if (activePersonId) {
|
||||||
|
const currentChair = getChairByPerson(activePersonId);
|
||||||
|
if (chairAssignments[picked.key] === activePersonId) {
|
||||||
|
delete chairAssignments[picked.key];
|
||||||
|
} else {
|
||||||
|
if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
|
||||||
|
chairAssignments[picked.key] = activePersonId;
|
||||||
|
}
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
}
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
document.getElementById("clear-btn").addEventListener("click", () => {
|
||||||
|
placed.clear();
|
||||||
|
persistPlaced();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
clearAssignBtn.addEventListener("click", () => {
|
||||||
|
chairAssignments = {};
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
orgChartEl.addEventListener("click", (event) => {
|
||||||
|
const item = event.target.closest(".org-person[data-person-id]");
|
||||||
|
if (!item) return;
|
||||||
|
const personId = item.getAttribute("data-person-id");
|
||||||
|
activePersonId = personId === activePersonId ? null : personId;
|
||||||
|
persistActivePerson();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
renderPeopleList();
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
932
img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
Normal file
932
img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
Normal file
@@ -0,0 +1,932 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>center chair people map 7f</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--ink: #152330;
|
||||||
|
--muted: #627286;
|
||||||
|
--paper: rgba(255,255,255,0.86);
|
||||||
|
--line: rgba(21,35,48,0.1);
|
||||||
|
--accent: #0f766e;
|
||||||
|
--bg: #edf2f6;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
|
||||||
|
color: var(--ink);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
|
||||||
|
linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.shell {
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
border-radius: 0;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
backdrop-filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font: inherit;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(135deg, #0f766e, #115e59);
|
||||||
|
box-shadow: 0 10px 22px rgba(15,118,110,0.18);
|
||||||
|
}
|
||||||
|
button.alt {
|
||||||
|
color: var(--ink);
|
||||||
|
background: rgba(255,255,255,0.9);
|
||||||
|
border: 1px solid var(--line);
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.viewer {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.viewer-head {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.chip {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(255,255,255,0.82);
|
||||||
|
border: 1px solid rgba(255,255,255,0.94);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
box-shadow: 0 8px 24px rgba(21,35,48,0.08);
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
position: absolute;
|
||||||
|
left: 16px;
|
||||||
|
top: 64px;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.mapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 76px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: min(94vw, 1320px);
|
||||||
|
max-height: min(56vh, 560px);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 4;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: rgba(234, 239, 247, 0.95);
|
||||||
|
border: 1px solid rgba(101, 119, 146, 0.22);
|
||||||
|
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
.hidden-off {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.mapper-head {
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-bottom: 1px solid rgba(101,119,146,0.18);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #51607a;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
background: rgba(255,255,255,0.6);
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
display: block;
|
||||||
|
color: #17243b;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.mapper-head .alt {
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.org-chart {
|
||||||
|
margin: 0;
|
||||||
|
padding: 14px;
|
||||||
|
overflow: auto;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.org-top {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: min(100%, 420px);
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(67, 84, 118, 0.25);
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
background: #1e2f4d;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
padding: 16px 12px;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
.org-top-members {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(7, minmax(160px, 1fr));
|
||||||
|
gap: 10px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.org-team {
|
||||||
|
border: 1px solid rgba(110, 126, 152, 0.25);
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-team h4 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 9px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #21324e;
|
||||||
|
font-weight: 800;
|
||||||
|
border-bottom: 1px solid rgba(110, 126, 152, 0.2);
|
||||||
|
background: rgba(240, 245, 252, 0.96);
|
||||||
|
}
|
||||||
|
.org-members {
|
||||||
|
padding: 7px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.org-person {
|
||||||
|
border: 1px solid rgba(116, 133, 161, 0.25);
|
||||||
|
background: rgba(255,255,255,0.95);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 120ms ease, border-color 120ms ease;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.org-person.active {
|
||||||
|
border-color: rgba(15,118,110,0.6);
|
||||||
|
background: rgba(15,118,110,0.11);
|
||||||
|
}
|
||||||
|
.org-person.assigned {
|
||||||
|
border-color: rgba(37,99,235,0.5);
|
||||||
|
background: rgba(37,99,235,0.1);
|
||||||
|
}
|
||||||
|
.org-person strong {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: #15233a;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.org-person small {
|
||||||
|
display: block;
|
||||||
|
color: #5a6a86;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.25;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.mapper {
|
||||||
|
top: 72px;
|
||||||
|
width: min(96vw, 920px);
|
||||||
|
max-height: 58vh;
|
||||||
|
}
|
||||||
|
.viewer-actions {
|
||||||
|
top: 64px;
|
||||||
|
left: 12px;
|
||||||
|
right: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.mapper-head strong {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.org-top-title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.org-teams {
|
||||||
|
grid-template-columns: repeat(3, minmax(150px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
canvas.dragging { cursor: grabbing; }
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
min-width: 170px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgba(17,24,39,0.94);
|
||||||
|
color: white;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(12px, 12px);
|
||||||
|
transition: opacity 120ms ease;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.tooltip.visible { opacity: 1; }
|
||||||
|
.tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
|
||||||
|
.tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="shell">
|
||||||
|
<main class="panel viewer">
|
||||||
|
<div class="viewer-head">
|
||||||
|
<div class="chip" id="scale-chip"></div>
|
||||||
|
<div class="chip" id="hover-chip">chair hover: none</div>
|
||||||
|
</div>
|
||||||
|
<div class="viewer-actions">
|
||||||
|
<button type="button" id="fit-btn">전체 맞춤</button>
|
||||||
|
<button type="button" class="alt" id="clear-btn">선택 지우기</button>
|
||||||
|
</div>
|
||||||
|
<aside class="mapper hidden-off">
|
||||||
|
<div class="mapper-head">
|
||||||
|
<div id="mapper-status">
|
||||||
|
<strong>조직 현황</strong>
|
||||||
|
<span>선택 인원 없음</span>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
|
||||||
|
</div>
|
||||||
|
<div class="org-chart" id="org-chart"></div>
|
||||||
|
</aside>
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
<div class="tooltip" id="tooltip"></div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="./center_chair_people_payload_7f.js"></script>
|
||||||
|
<script>
|
||||||
|
const DATA = window.CHAIR_MAP_DATA;
|
||||||
|
function decodeSegments(base64) {
|
||||||
|
const binary = atob(base64);
|
||||||
|
const bytes = new Uint8Array(binary.length);
|
||||||
|
for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
|
||||||
|
return new Int32Array(bytes.buffer);
|
||||||
|
}
|
||||||
|
const bgTileRanges = DATA.bgTileRanges;
|
||||||
|
const bgSegValues = decodeSegments(DATA.bgSegsB64);
|
||||||
|
const chairSegValues = decodeSegments(DATA.chairSegsB64);
|
||||||
|
const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
|
||||||
|
key, name, kind, start, count
|
||||||
|
}));
|
||||||
|
const meta = DATA.meta;
|
||||||
|
const world = meta.headerBounds;
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const tooltip = document.getElementById("tooltip");
|
||||||
|
const scaleChip = document.getElementById("scale-chip");
|
||||||
|
const hoverChip = document.getElementById("hover-chip");
|
||||||
|
const STORAGE_KEY = "ptc-chair-selection";
|
||||||
|
const PEOPLE_STORAGE_KEY = "ptc-chair-people";
|
||||||
|
const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
|
||||||
|
const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
|
||||||
|
const clearAssignBtn = document.getElementById("clear-assign-btn");
|
||||||
|
const orgChartEl = document.getElementById("org-chart");
|
||||||
|
const mapperStatus = document.getElementById("mapper-status");
|
||||||
|
// Prevent stale auto-highlights from previous sessions.
|
||||||
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
localStorage.removeItem(ASSIGN_STORAGE_KEY);
|
||||||
|
const placed = new Set();
|
||||||
|
let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
|
||||||
|
let chairAssignments = {};
|
||||||
|
let activePersonId = null;
|
||||||
|
const ORG_TEMPLATE = {
|
||||||
|
top: {
|
||||||
|
name: "총괄기획실",
|
||||||
|
count: 53,
|
||||||
|
members: [
|
||||||
|
{ name: "장종찬", dept: "총괄기획실", title: "기획실장" },
|
||||||
|
{ name: "김원식", dept: "총괄기획실", title: "전무이사" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
teams: [
|
||||||
|
{ name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
|
||||||
|
{ name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
|
||||||
|
{ name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
|
||||||
|
{ name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
|
||||||
|
{ name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
|
||||||
|
{ name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
|
||||||
|
{ name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const chairGeometry = chairs.map((chair) => {
|
||||||
|
let minX = Infinity;
|
||||||
|
let minY = Infinity;
|
||||||
|
let maxX = -Infinity;
|
||||||
|
let maxY = -Infinity;
|
||||||
|
const path = new Path2D();
|
||||||
|
const hitSegments = new Float32Array(chair.count * 4);
|
||||||
|
let segCursor = 0;
|
||||||
|
for (let i = chair.start; i < chair.start + chair.count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = chairSegValues[offset] / 10;
|
||||||
|
const y1 = chairSegValues[offset + 1] / 10;
|
||||||
|
const x2 = chairSegValues[offset + 2] / 10;
|
||||||
|
const y2 = chairSegValues[offset + 3] / 10;
|
||||||
|
path.moveTo(x1, y1);
|
||||||
|
path.lineTo(x2, y2);
|
||||||
|
hitSegments[segCursor] = x1;
|
||||||
|
hitSegments[segCursor + 1] = y1;
|
||||||
|
hitSegments[segCursor + 2] = x2;
|
||||||
|
hitSegments[segCursor + 3] = y2;
|
||||||
|
segCursor += 4;
|
||||||
|
minX = Math.min(minX, x1, x2);
|
||||||
|
minY = Math.min(minY, y1, y2);
|
||||||
|
maxX = Math.max(maxX, x1, x2);
|
||||||
|
maxY = Math.max(maxY, y1, y2);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...chair,
|
||||||
|
minX,
|
||||||
|
minY,
|
||||||
|
maxX,
|
||||||
|
maxY,
|
||||||
|
area: Math.max(1, (maxX - minX) * (maxY - minY)),
|
||||||
|
path,
|
||||||
|
hitSegments,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
function renumberChairKeys(chairItems) {
|
||||||
|
if (!chairItems.length) return;
|
||||||
|
const heights = chairItems
|
||||||
|
.map((chair) => Math.max(1, chair.maxY - chair.minY))
|
||||||
|
.sort((a, b) => a - b);
|
||||||
|
const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
|
||||||
|
const rowTolerance = Math.max(40, medianHeight * 0.9);
|
||||||
|
|
||||||
|
const sorted = [...chairItems].sort((a, b) => {
|
||||||
|
const ay = (a.minY + a.maxY) * 0.5;
|
||||||
|
const by = (b.minY + b.maxY) * 0.5;
|
||||||
|
if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
|
||||||
|
const ax = (a.minX + a.maxX) * 0.5;
|
||||||
|
const bx = (b.minX + b.maxX) * 0.5;
|
||||||
|
return ax - bx; // left -> right
|
||||||
|
});
|
||||||
|
|
||||||
|
sorted.forEach((chair, index) => {
|
||||||
|
chair.key = String(index + 1);
|
||||||
|
chair.seatNo = index + 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renumberChairKeys(chairGeometry);
|
||||||
|
const PICK_GRID_SIZE = 1800;
|
||||||
|
const chairPickGrid = new Map();
|
||||||
|
function pickGridKey(gx, gy) {
|
||||||
|
return `${gx},${gy}`;
|
||||||
|
}
|
||||||
|
chairGeometry.forEach((chair, index) => {
|
||||||
|
const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const key = pickGridKey(gx, gy);
|
||||||
|
if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
|
||||||
|
chairPickGrid.get(key).push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const camera = { scale: 1, offsetX: 0, offsetY: 0 };
|
||||||
|
let pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
let pointer = { x: 0, y: 0 };
|
||||||
|
let dragging = false;
|
||||||
|
let dragStart = null;
|
||||||
|
let hovered = null;
|
||||||
|
let rafPending = false;
|
||||||
|
|
||||||
|
function normalizePeople(raw) {
|
||||||
|
return raw
|
||||||
|
.map((person, index) => {
|
||||||
|
if (!person || !person.name) return null;
|
||||||
|
return {
|
||||||
|
id: person.id || `person-${index + 1}`,
|
||||||
|
name: String(person.name).trim(),
|
||||||
|
dept: String(person.dept || "").trim(),
|
||||||
|
title: String(person.title || "").trim(),
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter(Boolean);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTemplatePeople() {
|
||||||
|
const generated = [];
|
||||||
|
let seq = 1;
|
||||||
|
ORG_TEMPLATE.top.members.forEach((member) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name: member.name,
|
||||||
|
dept: member.dept,
|
||||||
|
title: member.title,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ORG_TEMPLATE.teams.forEach((team) => {
|
||||||
|
team.members.forEach((name) => {
|
||||||
|
generated.push({
|
||||||
|
id: `org-${seq++}`,
|
||||||
|
name,
|
||||||
|
dept: team.name,
|
||||||
|
title: "선임",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return generated;
|
||||||
|
}
|
||||||
|
|
||||||
|
people = normalizePeople(people);
|
||||||
|
const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
|
||||||
|
if (!templateReady) {
|
||||||
|
people = createTemplatePeople();
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
|
||||||
|
chairAssignments = Object.fromEntries(
|
||||||
|
Object.entries(chairAssignments).filter(([chairKey, personId]) => (
|
||||||
|
chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
|
||||||
|
))
|
||||||
|
);
|
||||||
|
if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
|
||||||
|
|
||||||
|
function persistPeople() {
|
||||||
|
localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistAssignments() {
|
||||||
|
localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistActivePerson() {
|
||||||
|
if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
|
||||||
|
else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function assignmentCount() {
|
||||||
|
return Object.keys(chairAssignments).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPersonById(id) {
|
||||||
|
return people.find((person) => person.id === id) || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getChairByPerson(personId) {
|
||||||
|
for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
|
||||||
|
if (assignedPersonId === personId) return chairKey;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPeopleList() {
|
||||||
|
const activePerson = getPersonById(activePersonId);
|
||||||
|
const countText = `${assignmentCount()} / ${people.length} 매칭`;
|
||||||
|
mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
|
||||||
|
|
||||||
|
const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
|
||||||
|
const personCard = (person, roleText) => {
|
||||||
|
if (!person) return "";
|
||||||
|
const chairKey = getChairByPerson(person.id);
|
||||||
|
const assignedClass = chairKey ? " assigned" : "";
|
||||||
|
const activeClass = person.id === activePersonId ? " active" : "";
|
||||||
|
return `
|
||||||
|
<article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
|
||||||
|
<strong>${person.name}</strong>
|
||||||
|
<small>${person.title || roleText || "-"}</small>
|
||||||
|
<small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
|
||||||
|
</article>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const topHtml = ORG_TEMPLATE.top.members
|
||||||
|
.map((member) => personCard(findPerson(member.dept, member.name), member.title))
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
|
||||||
|
const membersHtml = team.members
|
||||||
|
.map((name) => personCard(findPerson(team.name, name), "선임"))
|
||||||
|
.join("");
|
||||||
|
return `
|
||||||
|
<section class="org-team">
|
||||||
|
<h4>${team.name} (${team.count})</h4>
|
||||||
|
<div class="org-members">${membersHtml}</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
}).join("");
|
||||||
|
|
||||||
|
orgChartEl.innerHTML = `
|
||||||
|
<section class="org-top">
|
||||||
|
<div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
|
||||||
|
<div class="org-top-members">${topHtml}</div>
|
||||||
|
</section>
|
||||||
|
<section class="org-teams">${teamsHtml}</section>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function worldToScreen(x, y) {
|
||||||
|
return {
|
||||||
|
x: x * camera.scale + camera.offsetX,
|
||||||
|
y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function screenToWorld(x, y) {
|
||||||
|
return {
|
||||||
|
x: (x - camera.offsetX) / camera.scale,
|
||||||
|
y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
pixelRatio = window.devicePixelRatio || 1;
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
canvas.width = Math.round(rect.width * pixelRatio);
|
||||||
|
canvas.height = Math.round(rect.height * pixelRatio);
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
fit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fit() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const width = world.maxX - world.minX;
|
||||||
|
const height = world.maxY - world.minY;
|
||||||
|
const pad = 36;
|
||||||
|
const scaleX = (rect.width - pad * 2) / width;
|
||||||
|
const scaleY = (rect.height - pad * 2) / height;
|
||||||
|
camera.scale = Math.min(scaleX, scaleY);
|
||||||
|
camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
|
||||||
|
camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
|
||||||
|
requestDraw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGrid(width, height) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = "rgba(21,35,48,0.05)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 120; x < width; x += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 120; y < height; y += 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function pickChair(screenX, screenY) {
|
||||||
|
const threshold = 12;
|
||||||
|
const pointerWorld = screenToWorld(screenX, screenY);
|
||||||
|
const thresholdWorld = threshold / camera.scale;
|
||||||
|
const thresholdWorldSq = thresholdWorld * thresholdWorld;
|
||||||
|
const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
|
||||||
|
const candidateIndexes = [];
|
||||||
|
const seen = new Set();
|
||||||
|
for (let gx = minGX; gx <= maxGX; gx += 1) {
|
||||||
|
for (let gy = minGY; gy <= maxGY; gy += 1) {
|
||||||
|
const candidates = chairPickGrid.get(pickGridKey(gx, gy));
|
||||||
|
if (!candidates) continue;
|
||||||
|
for (const index of candidates) {
|
||||||
|
if (seen.has(index)) continue;
|
||||||
|
seen.add(index);
|
||||||
|
candidateIndexes.push(index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let best = null;
|
||||||
|
for (const index of candidateIndexes) {
|
||||||
|
const chair = chairGeometry[index];
|
||||||
|
if (
|
||||||
|
pointerWorld.x < chair.minX - thresholdWorld ||
|
||||||
|
pointerWorld.x > chair.maxX + thresholdWorld ||
|
||||||
|
pointerWorld.y < chair.minY - thresholdWorld ||
|
||||||
|
pointerWorld.y > chair.maxY + thresholdWorld
|
||||||
|
) continue;
|
||||||
|
let distSq = Infinity;
|
||||||
|
for (let i = 0; i < chair.hitSegments.length; i += 4) {
|
||||||
|
const x1 = chair.hitSegments[i];
|
||||||
|
const y1 = chair.hitSegments[i + 1];
|
||||||
|
const x2 = chair.hitSegments[i + 2];
|
||||||
|
const y2 = chair.hitSegments[i + 3];
|
||||||
|
const dx = x2 - x1;
|
||||||
|
const dy = y2 - y1;
|
||||||
|
const len2 = dx * dx + dy * dy;
|
||||||
|
let segDistSq;
|
||||||
|
if (len2 === 0) {
|
||||||
|
const px = pointerWorld.x - x1;
|
||||||
|
const py = pointerWorld.y - y1;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
} else {
|
||||||
|
let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
|
||||||
|
t = Math.max(0, Math.min(1, t));
|
||||||
|
const lx = x1 + t * dx;
|
||||||
|
const ly = y1 + t * dy;
|
||||||
|
const px = pointerWorld.x - lx;
|
||||||
|
const py = pointerWorld.y - ly;
|
||||||
|
segDistSq = px * px + py * py;
|
||||||
|
}
|
||||||
|
if (segDistSq < distSq) distSq = segDistSq;
|
||||||
|
if (distSq <= thresholdWorldSq * 0.3) break;
|
||||||
|
}
|
||||||
|
if (distSq > thresholdWorldSq) continue;
|
||||||
|
const dist = Math.sqrt(distSq) * camera.scale;
|
||||||
|
|
||||||
|
if (!best) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const distGap = dist - best.dist;
|
||||||
|
if (distGap < -0.75) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(distGap) <= 2) {
|
||||||
|
const areaGap = chair.area - best.chair.area;
|
||||||
|
if (areaGap < -1) {
|
||||||
|
best = { chair, dist };
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
Math.abs(areaGap) <= 1 &&
|
||||||
|
chair.kind === "block" &&
|
||||||
|
best.chair.kind !== "block"
|
||||||
|
) {
|
||||||
|
best = { chair, dist };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return best ? best.chair : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTooltip() {
|
||||||
|
if (!hovered) {
|
||||||
|
tooltip.classList.remove("visible");
|
||||||
|
hoverChip.textContent = "chair hover: none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hoverChip.textContent = `chair hover: ${hovered.name}`;
|
||||||
|
tooltip.innerHTML = `
|
||||||
|
<strong>${hovered.name}</strong>
|
||||||
|
<div>chair key: ${hovered.key}</div>
|
||||||
|
<div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
|
||||||
|
<div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
|
||||||
|
`;
|
||||||
|
tooltip.style.left = `${pointer.x + 14}px`;
|
||||||
|
tooltip.style.top = `${pointer.y + 14}px`;
|
||||||
|
tooltip.classList.add("visible");
|
||||||
|
}
|
||||||
|
|
||||||
|
function requestDraw() {
|
||||||
|
if (rafPending) return;
|
||||||
|
rafPending = true;
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
|
rafPending = false;
|
||||||
|
draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyWorldTransform() {
|
||||||
|
ctx.setTransform(
|
||||||
|
pixelRatio * camera.scale,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
-pixelRatio * camera.scale,
|
||||||
|
pixelRatio * camera.offsetX,
|
||||||
|
pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||||
|
ctx.clearRect(0, 0, rect.width, rect.height);
|
||||||
|
drawGrid(rect.width, rect.height);
|
||||||
|
const viewA = screenToWorld(0, rect.height);
|
||||||
|
const viewB = screenToWorld(rect.width, 0);
|
||||||
|
const viewMinX = Math.min(viewA.x, viewB.x);
|
||||||
|
const viewMaxX = Math.max(viewA.x, viewB.x);
|
||||||
|
const viewMinY = Math.min(viewA.y, viewB.y);
|
||||||
|
const viewMaxY = Math.max(viewA.y, viewB.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
|
||||||
|
ctx.lineWidth = 1 / camera.scale;
|
||||||
|
const tileSize = meta.backgroundTileSize;
|
||||||
|
const tileMinX = Math.floor(viewMinX / tileSize);
|
||||||
|
const tileMaxX = Math.floor(viewMaxX / tileSize);
|
||||||
|
const tileMinY = Math.floor(viewMinY / tileSize);
|
||||||
|
const tileMaxY = Math.floor(viewMaxY / tileSize);
|
||||||
|
for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
|
||||||
|
for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
|
||||||
|
const range = bgTileRanges[`${tx},${ty}`];
|
||||||
|
if (!range) continue;
|
||||||
|
const start = range[0];
|
||||||
|
const count = range[1];
|
||||||
|
for (let i = start; i < start + count; i += 1) {
|
||||||
|
const offset = i * 4;
|
||||||
|
const x1 = bgSegValues[offset] / 10;
|
||||||
|
const y1 = bgSegValues[offset + 1] / 10;
|
||||||
|
const x2 = bgSegValues[offset + 2] / 10;
|
||||||
|
const y2 = bgSegValues[offset + 3] / 10;
|
||||||
|
if (
|
||||||
|
Math.max(x1, x2) < viewMinX ||
|
||||||
|
Math.min(x1, x2) > viewMaxX ||
|
||||||
|
Math.max(y1, y2) < viewMinY ||
|
||||||
|
Math.min(y1, y2) > viewMaxY
|
||||||
|
) continue;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
hovered = dragging ? null : pickChair(pointer.x, pointer.y);
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
applyWorldTransform();
|
||||||
|
ctx.lineWidth = 1.45 / camera.scale;
|
||||||
|
ctx.lineCap = "round";
|
||||||
|
ctx.lineJoin = "round";
|
||||||
|
for (const chair of chairGeometry) {
|
||||||
|
if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
|
||||||
|
const active = hovered && hovered.key === chair.key;
|
||||||
|
const selected = placed.has(chair.key);
|
||||||
|
const assignedPersonId = chairAssignments[chair.key];
|
||||||
|
const activePersonChair = activePersonId && assignedPersonId === activePersonId;
|
||||||
|
const assigned = Boolean(assignedPersonId);
|
||||||
|
const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
|
||||||
|
ctx.strokeStyle = activePersonChair
|
||||||
|
? "rgba(234, 179, 8, 1)"
|
||||||
|
: assigned
|
||||||
|
? "rgba(37, 99, 235, 0.98)"
|
||||||
|
: selected
|
||||||
|
? "rgba(220, 38, 38, 0.98)"
|
||||||
|
: active
|
||||||
|
? "rgba(15, 118, 110, 0.98)"
|
||||||
|
: chair.kind === "group"
|
||||||
|
? "rgba(16, 134, 149, 0.74)"
|
||||||
|
: "rgba(21, 149, 142, 0.8)";
|
||||||
|
ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
|
||||||
|
ctx.stroke(chair.path);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
|
||||||
|
renderTooltip();
|
||||||
|
}
|
||||||
|
|
||||||
|
function persistPlaced() {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas.addEventListener("pointerdown", (event) => {
|
||||||
|
dragging = true;
|
||||||
|
dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
|
||||||
|
canvas.classList.add("dragging");
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointerup", (event) => {
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
|
||||||
|
if (move < 4) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
|
||||||
|
if (picked) {
|
||||||
|
if (placed.has(picked.key)) placed.delete(picked.key);
|
||||||
|
else placed.add(picked.key);
|
||||||
|
persistPlaced();
|
||||||
|
if (activePersonId) {
|
||||||
|
const currentChair = getChairByPerson(activePersonId);
|
||||||
|
if (chairAssignments[picked.key] === activePersonId) {
|
||||||
|
delete chairAssignments[picked.key];
|
||||||
|
} else {
|
||||||
|
if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
|
||||||
|
chairAssignments[picked.key] = activePersonId;
|
||||||
|
}
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dragging = false;
|
||||||
|
dragStart = null;
|
||||||
|
canvas.classList.remove("dragging");
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("pointermove", (event) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
|
||||||
|
if (dragging && dragStart) {
|
||||||
|
camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
|
||||||
|
camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
|
||||||
|
}
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener("wheel", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const mx = event.clientX - rect.left;
|
||||||
|
const my = event.clientY - rect.top;
|
||||||
|
const before = screenToWorld(mx, my);
|
||||||
|
const factor = event.deltaY < 0 ? 1.08 : 0.92;
|
||||||
|
camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
|
||||||
|
const after = worldToScreen(before.x, before.y);
|
||||||
|
camera.offsetX += mx - after.x;
|
||||||
|
camera.offsetY += my - after.y;
|
||||||
|
requestDraw();
|
||||||
|
}, { passive: false });
|
||||||
|
|
||||||
|
document.getElementById("fit-btn").addEventListener("click", fit);
|
||||||
|
document.getElementById("clear-btn").addEventListener("click", () => {
|
||||||
|
placed.clear();
|
||||||
|
persistPlaced();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
clearAssignBtn.addEventListener("click", () => {
|
||||||
|
chairAssignments = {};
|
||||||
|
persistAssignments();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
orgChartEl.addEventListener("click", (event) => {
|
||||||
|
const item = event.target.closest(".org-person[data-person-id]");
|
||||||
|
if (!item) return;
|
||||||
|
const personId = item.getAttribute("data-person-id");
|
||||||
|
activePersonId = personId === activePersonId ? null : personId;
|
||||||
|
persistActivePerson();
|
||||||
|
renderPeopleList();
|
||||||
|
requestDraw();
|
||||||
|
});
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
renderPeopleList();
|
||||||
|
resize();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
img/location_photo/한맥빌딩/1층.png
Normal file
BIN
img/location_photo/한맥빌딩/1층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
img/location_photo/한맥빌딩/2층.png
Normal file
BIN
img/location_photo/한맥빌딩/2층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
img/location_photo/한맥빌딩/3층.png
Normal file
BIN
img/location_photo/한맥빌딩/3층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
img/location_photo/한맥빌딩/4층.png
Normal file
BIN
img/location_photo/한맥빌딩/4층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
BIN
img/location_photo/한맥빌딩/5층.png
Normal file
BIN
img/location_photo/한맥빌딩/5층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
img/location_photo/한맥빌딩/6층.png
Normal file
BIN
img/location_photo/한맥빌딩/6층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
BIN
img/location_photo/한맥빌딩/7층.png
Normal file
BIN
img/location_photo/한맥빌딩/7층.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 MiB After Width: | Height: | Size: 9.5 MiB |
@@ -5,7 +5,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>ITAM 자산관리 ERP</title>
|
<title>한맥가족 자산관리시스템</title>
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
|
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
|
||||||
<link rel="stylesheet" href="/src/styles/common.css" />
|
<link rel="stylesheet" href="/src/styles/common.css" />
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
<div class="header-container" id="nav-container">
|
<div class="header-container" id="nav-container">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<img src="/image 92.png" alt="Logo" class="main-logo" />
|
<img src="/image 92.png" alt="Logo" class="main-logo" />
|
||||||
<h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
|
<h1>한맥자산관리시스템</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Navigation (GNB + LNB in same row) -->
|
<!-- Navigation (GNB + LNB in same row) -->
|
||||||
@@ -57,8 +57,7 @@
|
|||||||
|
|
||||||
<!-- Footer -->
|
<!-- Footer -->
|
||||||
<footer class="main-footer">
|
<footer class="main-footer">
|
||||||
<div id="secret-cloud-trigger" style="width: 20px; height: 20px; cursor: pointer; opacity: 0.1; background: #000; border-radius: 4px; position: absolute; left: 1rem;"></div>
|
<p>© 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
|
||||||
<p>Powered by BARON Consultant Co,Ltd</p>
|
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
858
map_config.json
858
map_config.json
File diff suppressed because it is too large
Load Diff
@@ -1,197 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function migrateSchema() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🚀 Phase 1: Creating Normalized Tables & Migrating Data...');
|
|
||||||
|
|
||||||
try {
|
|
||||||
await connection.query('SET FOREIGN_KEY_CHECKS = 0');
|
|
||||||
|
|
||||||
// --- 1. Drop existing new tables if they exist ---
|
|
||||||
await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
|
|
||||||
|
|
||||||
// --- 2. Create New Schema ---
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_core (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
asset_code VARCHAR(100) UNIQUE NOT NULL,
|
|
||||||
category VARCHAR(100),
|
|
||||||
asset_type VARCHAR(100),
|
|
||||||
asset_purpose VARCHAR(255),
|
|
||||||
service_type VARCHAR(50),
|
|
||||||
purchase_corp VARCHAR(100),
|
|
||||||
purchase_date VARCHAR(50),
|
|
||||||
purchase_amount VARCHAR(100),
|
|
||||||
purchase_vendor VARCHAR(255),
|
|
||||||
approval_document VARCHAR(255),
|
|
||||||
memo TEXT,
|
|
||||||
manager_primary VARCHAR(100),
|
|
||||||
manager_secondary VARCHAR(100),
|
|
||||||
current_dept VARCHAR(255),
|
|
||||||
previous_dept VARCHAR(255),
|
|
||||||
user_current VARCHAR(100),
|
|
||||||
previous_user VARCHAR(100),
|
|
||||||
emp_no VARCHAR(20),
|
|
||||||
user_position VARCHAR(50),
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_hardware (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50) NOT NULL,
|
|
||||||
hw_status VARCHAR(50),
|
|
||||||
model_name VARCHAR(255),
|
|
||||||
mainboard VARCHAR(255),
|
|
||||||
os VARCHAR(100),
|
|
||||||
cpu VARCHAR(255),
|
|
||||||
ram VARCHAR(100),
|
|
||||||
gpu VARCHAR(100),
|
|
||||||
storage1 VARCHAR(255),
|
|
||||||
storage2 VARCHAR(255),
|
|
||||||
storage3 VARCHAR(255),
|
|
||||||
monitoring VARCHAR(100),
|
|
||||||
price VARCHAR(100),
|
|
||||||
volume VARCHAR(100),
|
|
||||||
monitor_inch VARCHAR(50),
|
|
||||||
serial_num VARCHAR(100),
|
|
||||||
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_location (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50) NOT NULL,
|
|
||||||
location VARCHAR(255),
|
|
||||||
location_detail VARCHAR(255),
|
|
||||||
location_photo VARCHAR(255),
|
|
||||||
loc_x VARCHAR(20),
|
|
||||||
loc_y VARCHAR(20),
|
|
||||||
is_active BOOLEAN DEFAULT TRUE,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_remote (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50) NOT NULL,
|
|
||||||
ip_address VARCHAR(100),
|
|
||||||
mac_address VARCHAR(100),
|
|
||||||
remote_tool VARCHAR(100),
|
|
||||||
remote_id VARCHAR(100),
|
|
||||||
remote_pw VARCHAR(100),
|
|
||||||
is_active BOOLEAN DEFAULT TRUE,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query('SET FOREIGN_KEY_CHECKS = 1');
|
|
||||||
console.log('✅ Normalized tables created.');
|
|
||||||
|
|
||||||
// --- 3. Migrate Data from Legacy Tables ---
|
|
||||||
const legacyTables = ['asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'];
|
|
||||||
|
|
||||||
let totalMigrated = 0;
|
|
||||||
|
|
||||||
for (const table of legacyTables) {
|
|
||||||
try {
|
|
||||||
const [rows] = await connection.query(`SELECT * FROM ${table}`);
|
|
||||||
|
|
||||||
for (const row of rows) {
|
|
||||||
// 3.1 Insert into asset_core
|
|
||||||
await connection.query(`
|
|
||||||
INSERT IGNORE INTO asset_core (
|
|
||||||
id, asset_code, category, asset_type, asset_purpose, service_type, purchase_corp, purchase_date,
|
|
||||||
purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary,
|
|
||||||
current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
|
||||||
`, [
|
|
||||||
row.id, row.asset_code, row.category, row.asset_type, row.asset_purpose, row.service_type,
|
|
||||||
row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document,
|
|
||||||
row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept,
|
|
||||||
row.user_current, row.previous_user, row.emp_no, row.user_position, row.created_at
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 3.2 Insert into asset_hardware (if hardware fields exist)
|
|
||||||
if (row.model_name || row.cpu || row.ram || row.hw_status) {
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_hardware (
|
|
||||||
asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, monitoring, price, volume, monitor_inch, serial_num
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
|
||||||
`, [
|
|
||||||
row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu,
|
|
||||||
row.ssd_1 || row.hdd_1, row.ssd_2 || row.hdd_2, row.hdd_3, row.monitoring, row.price,
|
|
||||||
row.volume, row.monitor_inch, row.serial_num
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3.3 Insert into asset_location (if location fields exist)
|
|
||||||
if (row.location || row.location_detail) {
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_location (
|
|
||||||
asset_id, location, location_detail, location_photo, loc_x, loc_y
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?)
|
|
||||||
`, [
|
|
||||||
row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3.4 Insert into asset_remote (if network fields exist)
|
|
||||||
// Handle primary network interface
|
|
||||||
if (row.ip_address || row.mac_address || row.remote_tool) {
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_remote (
|
|
||||||
asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?)
|
|
||||||
`, [
|
|
||||||
row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle secondary network interface (e.g., from server table) if it exists
|
|
||||||
if (row.ip_address_2 || row.remote_tool_2) {
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_remote (
|
|
||||||
asset_id, ip_address, remote_tool, remote_id, remote_pw
|
|
||||||
) VALUES (?, ?, ?, ?, ?)
|
|
||||||
`, [
|
|
||||||
row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
totalMigrated++;
|
|
||||||
}
|
|
||||||
console.log(`- Migrated ${rows.length} records from ${table}`);
|
|
||||||
} catch (err) {
|
|
||||||
console.warn(`- Skipping legacy table ${table}: ${err.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`✅ Phase 1 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('❌ Migration Failed:', err);
|
|
||||||
} finally {
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
migrateSchema();
|
|
||||||
@@ -1,212 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function migrateV2() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🚀 Phase 2: Final Migration to Normalized V2 Schema...');
|
|
||||||
|
|
||||||
try {
|
|
||||||
await connection.query('SET FOREIGN_KEY_CHECKS = 0');
|
|
||||||
|
|
||||||
// 1. Create/Enhance Core Tables
|
|
||||||
console.log('1. Creating/Enhancing Tables...');
|
|
||||||
|
|
||||||
await connection.query('DROP TABLE IF EXISTS asset_core, asset_hardware, asset_location, asset_remote');
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_core (
|
|
||||||
id VARCHAR(50) PRIMARY KEY,
|
|
||||||
asset_code VARCHAR(100) UNIQUE NOT NULL,
|
|
||||||
category VARCHAR(100),
|
|
||||||
asset_type VARCHAR(100),
|
|
||||||
current_role VARCHAR(50) DEFAULT 'Normal' COMMENT 'Normal, Server, Personal, etc.',
|
|
||||||
asset_purpose VARCHAR(255),
|
|
||||||
service_type VARCHAR(50),
|
|
||||||
purchase_corp VARCHAR(100),
|
|
||||||
purchase_date VARCHAR(50),
|
|
||||||
purchase_amount VARCHAR(100),
|
|
||||||
purchase_vendor VARCHAR(255),
|
|
||||||
approval_document VARCHAR(255),
|
|
||||||
memo TEXT,
|
|
||||||
manager_primary VARCHAR(100),
|
|
||||||
manager_secondary VARCHAR(100),
|
|
||||||
current_dept VARCHAR(255),
|
|
||||||
previous_dept VARCHAR(255),
|
|
||||||
user_current VARCHAR(100),
|
|
||||||
previous_user VARCHAR(100),
|
|
||||||
emp_no VARCHAR(20),
|
|
||||||
user_position VARCHAR(50),
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_hardware (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50) NOT NULL,
|
|
||||||
hw_status VARCHAR(50),
|
|
||||||
model_name VARCHAR(255),
|
|
||||||
mainboard VARCHAR(255),
|
|
||||||
os VARCHAR(100),
|
|
||||||
cpu VARCHAR(255),
|
|
||||||
ram VARCHAR(100),
|
|
||||||
gpu VARCHAR(100),
|
|
||||||
storage1 VARCHAR(255),
|
|
||||||
storage2 VARCHAR(255),
|
|
||||||
storage3 VARCHAR(255),
|
|
||||||
storage4 VARCHAR(255),
|
|
||||||
monitoring VARCHAR(100),
|
|
||||||
price VARCHAR(100),
|
|
||||||
volume VARCHAR(100),
|
|
||||||
monitor_inch VARCHAR(50),
|
|
||||||
serial_num VARCHAR(100),
|
|
||||||
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_location (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50) NOT NULL,
|
|
||||||
location VARCHAR(255),
|
|
||||||
location_detail VARCHAR(255),
|
|
||||||
location_photo VARCHAR(255),
|
|
||||||
loc_x VARCHAR(20),
|
|
||||||
loc_y VARCHAR(20),
|
|
||||||
is_active TINYINT(1) DEFAULT 1,
|
|
||||||
deactivated_at DATETIME NULL,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE asset_remote (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50) NOT NULL,
|
|
||||||
ip_address VARCHAR(100),
|
|
||||||
mac_address VARCHAR(100),
|
|
||||||
remote_tool VARCHAR(100),
|
|
||||||
remote_id VARCHAR(100),
|
|
||||||
remote_pw VARCHAR(100),
|
|
||||||
is_active TINYINT(1) DEFAULT 1,
|
|
||||||
deactivated_at DATETIME NULL,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
console.log('✅ V2 Schema tables created.');
|
|
||||||
|
|
||||||
// 2. Migration Logic
|
|
||||||
const legacyTables = [
|
|
||||||
{ name: 'asset_pc', defaultRole: 'Personal' },
|
|
||||||
{ name: 'asset_server', defaultRole: 'Server' },
|
|
||||||
{ name: 'asset_storage', defaultRole: 'Normal' },
|
|
||||||
{ name: 'asset_equipment', defaultRole: 'Normal' },
|
|
||||||
{ name: 'asset_office_supplies', defaultRole: 'Normal' },
|
|
||||||
{ name: 'asset_survey', defaultRole: 'Normal' },
|
|
||||||
{ name: 'asset_vip', defaultRole: 'Normal' },
|
|
||||||
{ name: 'asset_pc_parts', defaultRole: 'Normal' }
|
|
||||||
];
|
|
||||||
|
|
||||||
let totalMigrated = 0;
|
|
||||||
|
|
||||||
for (const tableInfo of legacyTables) {
|
|
||||||
const table = tableInfo.name;
|
|
||||||
try {
|
|
||||||
const [rows] = await connection.query(`SELECT * FROM ${table}`);
|
|
||||||
console.log(`- Migrating ${rows.length} records from ${table}...`);
|
|
||||||
|
|
||||||
for (const row of rows) {
|
|
||||||
// 2.1 Insert into asset_core
|
|
||||||
const role = (table === 'asset_pc' && row.asset_type === '서버PC') ? 'Server' : tableInfo.defaultRole;
|
|
||||||
|
|
||||||
await connection.query(`
|
|
||||||
INSERT IGNORE INTO asset_core (
|
|
||||||
id, asset_code, category, asset_type, current_role, asset_purpose, service_type, purchase_corp, purchase_date,
|
|
||||||
purchase_amount, purchase_vendor, approval_document, memo, manager_primary, manager_secondary,
|
|
||||||
current_dept, previous_dept, user_current, previous_user, emp_no, user_position, created_at
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
|
||||||
`, [
|
|
||||||
row.id, row.asset_code, row.category, row.asset_type, role, row.asset_purpose, row.service_type,
|
|
||||||
row.purchase_corp, row.purchase_date, row.purchase_amount, row.purchase_vendor, row.approval_document,
|
|
||||||
row.memo, row.manager_primary, row.manager_secondary, row.current_dept, row.previous_dept,
|
|
||||||
row.user_current || row.current_user, row.previous_user, row.emp_no, row.user_position, row.created_at
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 2.2 Insert into asset_hardware
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_hardware (
|
|
||||||
asset_id, hw_status, model_name, mainboard, os, cpu, ram, gpu, storage1, storage2, storage3, storage4, monitoring, price, volume, monitor_inch, serial_num
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
|
||||||
`, [
|
|
||||||
row.id, row.hw_status, row.model_name, row.mainboard, row.os, row.cpu, row.ram, row.gpu,
|
|
||||||
row.ssd_1 || row.storage1, row.ssd_2 || row.storage2, row.hdd_1 || row.storage3, row.hdd_2, row.monitoring, row.price,
|
|
||||||
row.volume, row.monitor_inch, row.serial_num
|
|
||||||
]);
|
|
||||||
|
|
||||||
// 2.3 Insert into asset_location
|
|
||||||
if (row.location || row.location_detail) {
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_location (
|
|
||||||
asset_id, location, location_detail, location_photo, loc_x, loc_y, is_active
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?, 1)
|
|
||||||
`, [
|
|
||||||
row.id, row.location, row.location_detail, row.location_photo, row.loc_x, row.loc_y
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2.4 Insert into asset_remote
|
|
||||||
// Primary Network
|
|
||||||
if (row.ip_address || row.mac_address || row.remote_tool) {
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_remote (
|
|
||||||
asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active
|
|
||||||
) VALUES (?, ?, ?, ?, ?, ?, 1)
|
|
||||||
`, [
|
|
||||||
row.id, row.ip_address, row.mac_address, row.remote_tool, row.remote_id, row.remote_pw
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Secondary Network (for servers)
|
|
||||||
if (row.ip_address_2 || row.remote_tool_2) {
|
|
||||||
await connection.query(`
|
|
||||||
INSERT INTO asset_remote (
|
|
||||||
asset_id, ip_address, remote_tool, remote_id, remote_pw, is_active
|
|
||||||
) VALUES (?, ?, ?, ?, ?, 1)
|
|
||||||
`, [
|
|
||||||
row.id, row.ip_address_2, row.remote_tool_2, row.remote_id_2, row.remote_pw_2
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
totalMigrated++;
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.warn(`- Skipping table ${table}: ${err.message}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
await connection.query('SET FOREIGN_KEY_CHECKS = 1');
|
|
||||||
console.log(`✅ Phase 2 Data Migration Completed. Total Assets Migrated: ${totalMigrated}`);
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
console.error('❌ Migration Failed:', err);
|
|
||||||
} finally {
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
migrateV2();
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const pool = mysql.createPool({
|
|
||||||
host: process.env.DB_HOST,
|
|
||||||
user: process.env.DB_USER,
|
|
||||||
password: process.env.DB_PASS,
|
|
||||||
database: process.env.DB_NAME,
|
|
||||||
port: parseInt(process.env.DB_PORT || '3306'),
|
|
||||||
});
|
|
||||||
|
|
||||||
async function migrate() {
|
|
||||||
const conn = await pool.getConnection();
|
|
||||||
try {
|
|
||||||
console.log('1. Creating asset_remote_v4 table...');
|
|
||||||
await conn.query(`
|
|
||||||
CREATE TABLE IF NOT EXISTS asset_remote_v4 (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
asset_id VARCHAR(50) NOT NULL,
|
|
||||||
net_type VARCHAR(20) NOT NULL, /* 'IP' or 'REMOTE' */
|
|
||||||
net_name VARCHAR(100), /* e.g., '기본망', 'AnyDesk' */
|
|
||||||
net_value1 VARCHAR(100), /* IP or ID */
|
|
||||||
net_value2 VARCHAR(100), /* MAC or PW */
|
|
||||||
is_active TINYINT(1) DEFAULT 1,
|
|
||||||
deactivated_at DATETIME NULL,
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
|
||||||
FOREIGN KEY (asset_id) REFERENCES asset_core(id) ON DELETE CASCADE
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
|
|
||||||
console.log('2. Migrating data from asset_remote...');
|
|
||||||
const [oldRows] = await conn.query('SELECT * FROM asset_remote WHERE is_active = 1');
|
|
||||||
|
|
||||||
let ipCount = 0;
|
|
||||||
let remoteCount = 0;
|
|
||||||
|
|
||||||
for (const row of oldRows) {
|
|
||||||
// Migrating IP/MAC
|
|
||||||
if (row.ip_address || row.mac_address) {
|
|
||||||
await conn.query(
|
|
||||||
'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
|
|
||||||
[row.asset_id, 'IP', '기본망', row.ip_address, row.mac_address, row.created_at]
|
|
||||||
);
|
|
||||||
ipCount++;
|
|
||||||
}
|
|
||||||
// Migrating Remote
|
|
||||||
if (row.remote_tool || row.remote_id || row.remote_pw) {
|
|
||||||
await conn.query(
|
|
||||||
'INSERT INTO asset_remote_v4 (asset_id, net_type, net_name, net_value1, net_value2, created_at) VALUES (?, ?, ?, ?, ?, ?)',
|
|
||||||
[row.asset_id, 'REMOTE', row.remote_tool, row.remote_id, row.remote_pw, row.created_at]
|
|
||||||
);
|
|
||||||
remoteCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Migrated ${ipCount} IP records and ${remoteCount} Remote records.`);
|
|
||||||
|
|
||||||
console.log('3. Renaming tables...');
|
|
||||||
await conn.query('DROP TABLE IF EXISTS asset_remote_legacy');
|
|
||||||
await conn.query('RENAME TABLE asset_remote TO asset_remote_legacy, asset_remote_v4 TO asset_remote;');
|
|
||||||
|
|
||||||
console.log('✅ Migration V4 (Remote) Complete.');
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Migration failed:', e);
|
|
||||||
} finally {
|
|
||||||
conn.release();
|
|
||||||
pool.end();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
migrate();
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const pool = mysql.createPool({
|
|
||||||
host: process.env.DB_HOST,
|
|
||||||
user: process.env.DB_USER,
|
|
||||||
password: process.env.DB_PASS,
|
|
||||||
database: process.env.DB_NAME,
|
|
||||||
port: parseInt(process.env.DB_PORT || '3306'),
|
|
||||||
});
|
|
||||||
|
|
||||||
async function migrate() {
|
|
||||||
const conn = await pool.getConnection();
|
|
||||||
try {
|
|
||||||
console.log('1. Renaming asset_network to asset_remote...');
|
|
||||||
await conn.query('RENAME TABLE asset_network TO asset_remote');
|
|
||||||
console.log('✅ Table renamed successfully.');
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Migration failed:', e);
|
|
||||||
} finally {
|
|
||||||
conn.release();
|
|
||||||
pool.end();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
migrate();
|
|
||||||
@@ -1,195 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config({ override: true });
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
// 기존의 감점 계산 로직을 그대로 이용해 등급과 감점점수를 도출하는 헬퍼 함수
|
|
||||||
function parseCpu(cpu) {
|
|
||||||
if (!cpu) return { tier: '기타', deduction: 30 };
|
|
||||||
const cpuUpper = cpu.toUpperCase().trim();
|
|
||||||
if (cpuUpper === '-' || cpuUpper === '') return { tier: '기타', deduction: 30 };
|
|
||||||
|
|
||||||
let tier = '기타';
|
|
||||||
let deduction = 30;
|
|
||||||
|
|
||||||
if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
|
|
||||||
tier = 'i9 / Ryzen 9';
|
|
||||||
deduction = 0;
|
|
||||||
} else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
|
|
||||||
tier = 'i7 / Ryzen 7';
|
|
||||||
deduction = 5;
|
|
||||||
} else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
|
|
||||||
tier = 'i5 / Ryzen 5';
|
|
||||||
deduction = 15;
|
|
||||||
} else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
|
|
||||||
tier = 'i3 / Ryzen 3';
|
|
||||||
deduction = 25;
|
|
||||||
}
|
|
||||||
|
|
||||||
// CPU 세대 감점 계산 (최대 -15점)
|
|
||||||
let genDeduction = 0;
|
|
||||||
const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
|
|
||||||
let gen = 0;
|
|
||||||
if (intelMatch && intelMatch[1]) {
|
|
||||||
const numStr = intelMatch[1];
|
|
||||||
if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
|
|
||||||
else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
|
|
||||||
let amdGen = 0;
|
|
||||||
if (amdMatch && amdMatch[1] && !intelMatch) {
|
|
||||||
const numStr = amdMatch[1];
|
|
||||||
if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (intelMatch) {
|
|
||||||
if (gen >= 12) genDeduction = 0;
|
|
||||||
else if (gen >= 10) genDeduction = 5;
|
|
||||||
else if (gen >= 8) genDeduction = 10;
|
|
||||||
else genDeduction = 15;
|
|
||||||
} else if (amdMatch) {
|
|
||||||
if (amdGen >= 5) genDeduction = 0;
|
|
||||||
else if (amdGen >= 3) genDeduction = 5;
|
|
||||||
else genDeduction = 10;
|
|
||||||
} else {
|
|
||||||
genDeduction = 15;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 최종 등급 감점 + 세대 감점 합산
|
|
||||||
return { tier, deduction: deduction + genDeduction };
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseGpu(gpu) {
|
|
||||||
if (!gpu) return { tier: 'C', deduction: 25 };
|
|
||||||
const gpuUpper = gpu.toUpperCase().trim();
|
|
||||||
if (gpuUpper === '-' || gpuUpper === '') return { tier: 'C', deduction: 25 };
|
|
||||||
|
|
||||||
if (
|
|
||||||
gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
|
|
||||||
gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
|
|
||||||
) {
|
|
||||||
return { tier: 'S', deduction: 0 };
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
|
|
||||||
gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
|
|
||||||
) {
|
|
||||||
return { tier: 'A', deduction: 5 };
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
|
|
||||||
gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
|
|
||||||
) {
|
|
||||||
return { tier: 'B', deduction: 15 };
|
|
||||||
} else {
|
|
||||||
return { tier: 'C', deduction: 25 };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function parseRam(ram) {
|
|
||||||
if (!ram) return { tier: '부족', deduction: 25 };
|
|
||||||
const ramUpper = ram.toUpperCase().trim();
|
|
||||||
if (ramUpper === '-' || ramUpper === '') return { tier: '부족', deduction: 25 };
|
|
||||||
|
|
||||||
const ramMatch = ramUpper.match(/(\d+)\s*GB/);
|
|
||||||
if (ramMatch && ramMatch[1]) {
|
|
||||||
const ramVal = parseInt(ramMatch[1], 10);
|
|
||||||
if (ramVal >= 32) return { tier: '최적', deduction: 0 };
|
|
||||||
else if (ramVal >= 16) return { tier: '보통', deduction: 10 };
|
|
||||||
else if (ramVal >= 8) return { tier: '주의', deduction: 20 };
|
|
||||||
}
|
|
||||||
return { tier: '부족', deduction: 25 };
|
|
||||||
}
|
|
||||||
|
|
||||||
async function runMigration() {
|
|
||||||
console.log('🔄 DB 커넥션 연결 중...');
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
console.log('⚙️ 1. hardware_components_master 테이블 생성...');
|
|
||||||
await connection.query('DROP TABLE IF EXISTS hardware_components_master');
|
|
||||||
await connection.query(`
|
|
||||||
CREATE TABLE hardware_components_master (
|
|
||||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
|
||||||
category VARCHAR(50) NOT NULL COMMENT 'CPU, GPU, RAM 등',
|
|
||||||
component_name VARCHAR(255) NOT NULL UNIQUE COMMENT '부품 표준 명칭',
|
|
||||||
score_tier VARCHAR(50) COMMENT '성능 등급',
|
|
||||||
deduction INT DEFAULT 0 COMMENT '감점 점수',
|
|
||||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
|
||||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
|
||||||
`);
|
|
||||||
console.log('✅ 테이블 생성 완료.');
|
|
||||||
|
|
||||||
console.log('🔍 2. 기존 asset_spec 테이블에서 부품명 조회...');
|
|
||||||
const [specRows] = await connection.query('SELECT DISTINCT cpu, ram, gpu FROM asset_spec');
|
|
||||||
|
|
||||||
const uniqueCpus = new Set();
|
|
||||||
const uniqueGpus = new Set();
|
|
||||||
const uniqueRams = new Set();
|
|
||||||
|
|
||||||
specRows.forEach(row => {
|
|
||||||
if (row.cpu && row.cpu.trim() !== '-' && row.cpu.trim() !== '') uniqueCpus.add(row.cpu.trim());
|
|
||||||
if (row.gpu && row.gpu.trim() !== '-' && row.gpu.trim() !== '') uniqueGpus.add(row.gpu.trim());
|
|
||||||
if (row.ram && row.ram.trim() !== '-' && row.ram.trim() !== '') uniqueRams.add(row.ram.trim());
|
|
||||||
});
|
|
||||||
|
|
||||||
// 만약 데이터가 너무 비어있을 경우를 대비하여 기본 대표 부품 몇 개 추가
|
|
||||||
if (uniqueCpus.size === 0) {
|
|
||||||
['Intel Core i9-13900K', 'Intel Core i7-14700K', 'Intel Core i5-12400', 'AMD Ryzen 7 7800X3D', 'Intel Core i3-10100'].forEach(c => uniqueCpus.add(c));
|
|
||||||
}
|
|
||||||
if (uniqueGpus.size === 0) {
|
|
||||||
['NVIDIA GeForce RTX 4090', 'NVIDIA GeForce RTX 4070', 'NVIDIA GeForce RTX 3060', 'Intel Iris Xe Graphics', 'NVIDIA GeForce GTX 1660 Super'].forEach(g => uniqueGpus.add(g));
|
|
||||||
}
|
|
||||||
if (uniqueRams.size === 0) {
|
|
||||||
['8GB', '16GB', '32GB', '64GB'].forEach(r => uniqueRams.add(r));
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(` - 추출된 CPU 개수: ${uniqueCpus.size}`);
|
|
||||||
console.log(` - 추출된 GPU 개수: ${uniqueGpus.size}`);
|
|
||||||
console.log(` - 추출된 RAM 개수: ${uniqueRams.size}`);
|
|
||||||
|
|
||||||
console.log('💾 3. 마스터 테이블에 부품 데이터 및 감점 정보 삽입...');
|
|
||||||
|
|
||||||
// CPU 삽입
|
|
||||||
for (const cpu of uniqueCpus) {
|
|
||||||
const { tier, deduction } = parseCpu(cpu);
|
|
||||||
await connection.query(
|
|
||||||
'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
|
|
||||||
['CPU', cpu, tier, deduction]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// GPU 삽입
|
|
||||||
for (const gpu of uniqueGpus) {
|
|
||||||
const { tier, deduction } = parseGpu(gpu);
|
|
||||||
await connection.query(
|
|
||||||
'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
|
|
||||||
['GPU', gpu, tier, deduction]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// RAM 삽입
|
|
||||||
for (const ram of uniqueRams) {
|
|
||||||
const { tier, deduction } = parseRam(ram);
|
|
||||||
await connection.query(
|
|
||||||
'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
|
|
||||||
['RAM', ram, tier, deduction]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('✅ 마이그레이션이 성공적으로 완료되었습니다!');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('❌ 마이그레이션 오류 발생:', error);
|
|
||||||
} finally {
|
|
||||||
await connection.end();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
runMigration();
|
|
||||||
36
probe_db.js
36
probe_db.js
@@ -1,36 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
async function probeDB() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('--- Database Probe Start ---');
|
|
||||||
|
|
||||||
const [tables] = await connection.query('SHOW TABLES');
|
|
||||||
const tableNames = tables.map(t => Object.values(t)[0]);
|
|
||||||
|
|
||||||
console.log('Existing Tables:', tableNames);
|
|
||||||
|
|
||||||
for (const table of tableNames) {
|
|
||||||
const [columns] = await connection.query(`DESCRIBE ${table}`);
|
|
||||||
console.log(`\n[Table: ${table}]`);
|
|
||||||
columns.forEach(c => {
|
|
||||||
console.log(` - ${c.Field} (${c.Type}) ${c.Comment ? '// ' + c.Comment : ''}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
await connection.end();
|
|
||||||
console.log('\n--- Database Probe End ---');
|
|
||||||
}
|
|
||||||
|
|
||||||
probeDB().catch(console.error);
|
|
||||||
@@ -1,163 +0,0 @@
|
|||||||
import * as fs from 'fs';
|
|
||||||
|
|
||||||
// dummyData.ts를 읽어와서 dummyPCs 파싱
|
|
||||||
const content = fs.readFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', 'utf-8');
|
|
||||||
|
|
||||||
// export const dummyPCs: any[] = [ ... ]; 패턴 추출
|
|
||||||
const match = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
|
|
||||||
if (!match) {
|
|
||||||
console.error('Failed to parse dummyPCs from dummyData.ts');
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const dummyPCs = JSON.parse(match[1]);
|
|
||||||
|
|
||||||
function calculatePcScoreDeductive(cpu, ram, gpu, purchaseDate) {
|
|
||||||
let score = 100;
|
|
||||||
|
|
||||||
// 1. CPU 등급 감점
|
|
||||||
const cpuUpper = (cpu || '').toUpperCase();
|
|
||||||
let cpuDeduction = 0;
|
|
||||||
if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
|
|
||||||
cpuDeduction = 0;
|
|
||||||
} else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
|
|
||||||
cpuDeduction = 5;
|
|
||||||
} else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
|
|
||||||
cpuDeduction = 15;
|
|
||||||
} else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
|
|
||||||
cpuDeduction = 25;
|
|
||||||
} else {
|
|
||||||
cpuDeduction = 30;
|
|
||||||
}
|
|
||||||
score -= cpuDeduction;
|
|
||||||
|
|
||||||
// 2. CPU 세대 감점
|
|
||||||
let genDeduction = 0;
|
|
||||||
let intelMatch = cpuUpper.match(/I\d-?(\d+)/);
|
|
||||||
let gen = 0;
|
|
||||||
if (intelMatch && intelMatch[1]) {
|
|
||||||
const numStr = intelMatch[1];
|
|
||||||
if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
|
|
||||||
else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
let amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
|
|
||||||
let amdGen = 0;
|
|
||||||
if (amdMatch && amdMatch[1] && !intelMatch) {
|
|
||||||
const numStr = amdMatch[1];
|
|
||||||
if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (intelMatch) {
|
|
||||||
if (gen >= 12) genDeduction = 0;
|
|
||||||
else if (gen >= 10) genDeduction = 5;
|
|
||||||
else if (gen >= 8) genDeduction = 10;
|
|
||||||
else genDeduction = 15;
|
|
||||||
} else if (amdMatch) {
|
|
||||||
if (amdGen >= 5) genDeduction = 0;
|
|
||||||
else if (amdGen >= 3) genDeduction = 5;
|
|
||||||
else genDeduction = 10;
|
|
||||||
} else {
|
|
||||||
genDeduction = 15;
|
|
||||||
}
|
|
||||||
score -= genDeduction;
|
|
||||||
|
|
||||||
// 3. RAM 용량 감점
|
|
||||||
const ramUpper = (ram || '').toUpperCase();
|
|
||||||
const ramMatch = ramUpper.match(/(\d+)\s*GB/);
|
|
||||||
let ramDeduction = 25;
|
|
||||||
if (ramMatch && ramMatch[1]) {
|
|
||||||
const ramVal = parseInt(ramMatch[1], 10);
|
|
||||||
if (ramVal >= 32) ramDeduction = 0;
|
|
||||||
else if (ramVal >= 16) ramDeduction = 10;
|
|
||||||
else if (ramVal >= 8) ramDeduction = 20;
|
|
||||||
else ramDeduction = 25;
|
|
||||||
}
|
|
||||||
score -= ramDeduction;
|
|
||||||
|
|
||||||
// 4. GPU 성능 감점
|
|
||||||
const gpuUpper = (gpu || '').toUpperCase();
|
|
||||||
let gpuDeduction = 25;
|
|
||||||
if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
|
|
||||||
gpuDeduction = 25;
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
|
|
||||||
gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
|
|
||||||
) {
|
|
||||||
gpuDeduction = 0;
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
|
|
||||||
gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
|
|
||||||
) {
|
|
||||||
gpuDeduction = 5;
|
|
||||||
} else if (
|
|
||||||
gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
|
|
||||||
gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
|
|
||||||
) {
|
|
||||||
gpuDeduction = 15;
|
|
||||||
} else {
|
|
||||||
gpuDeduction = 25;
|
|
||||||
}
|
|
||||||
score -= gpuDeduction;
|
|
||||||
|
|
||||||
// 5. 연식(노후도) 감점
|
|
||||||
let age = 0;
|
|
||||||
if (purchaseDate && purchaseDate !== '-') {
|
|
||||||
let normalized = purchaseDate.replace(/\./g, '-').trim();
|
|
||||||
if (/^\d{6}$/.test(normalized)) {
|
|
||||||
normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
|
|
||||||
}
|
|
||||||
const purchase = new Date(normalized);
|
|
||||||
if (!isNaN(purchase.getTime())) {
|
|
||||||
const mockToday = new Date('2026-05-31');
|
|
||||||
const diffMs = mockToday.getTime() - purchase.getTime();
|
|
||||||
age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
|
|
||||||
age = Math.max(0, parseFloat(age.toFixed(1)));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let ageDeduction = 0;
|
|
||||||
if (age < 1) ageDeduction = 0;
|
|
||||||
else if (age < 2) ageDeduction = 3;
|
|
||||||
else if (age < 3) ageDeduction = 6;
|
|
||||||
else if (age < 4) ageDeduction = 9;
|
|
||||||
else if (age < 5) ageDeduction = 12;
|
|
||||||
else ageDeduction = 15;
|
|
||||||
|
|
||||||
score -= ageDeduction;
|
|
||||||
|
|
||||||
return Math.max(10, score);
|
|
||||||
}
|
|
||||||
|
|
||||||
const jobScores = {};
|
|
||||||
let totalPcs = 0;
|
|
||||||
|
|
||||||
const filteredPCs = dummyPCs.filter(pc => pc.user_position !== '재고PC');
|
|
||||||
|
|
||||||
filteredPCs.forEach(pc => {
|
|
||||||
const job = pc.user_position || '미분류';
|
|
||||||
const score = calculatePcScoreDeductive(pc.cpu, pc.ram, pc.gpu, pc.purchase_date);
|
|
||||||
|
|
||||||
if (!jobScores[job]) {
|
|
||||||
jobScores[job] = { total: 0, count: 0 };
|
|
||||||
}
|
|
||||||
jobScores[job].total += score;
|
|
||||||
jobScores[job].count += 1;
|
|
||||||
totalPcs++;
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('--- Job Averages (Deductive 100-point) ---');
|
|
||||||
const sortedJobs = Object.keys(jobScores).map(job => {
|
|
||||||
const avg = jobScores[job].total / jobScores[job].count;
|
|
||||||
return {
|
|
||||||
job,
|
|
||||||
avg: parseFloat(avg.toFixed(1)),
|
|
||||||
count: jobScores[job].count
|
|
||||||
};
|
|
||||||
}).sort((a, b) => b.avg - a.avg);
|
|
||||||
|
|
||||||
sortedJobs.forEach((item, index) => {
|
|
||||||
console.log(`${index + 1}. ${item.job}: Avg=${item.avg}점, Count=${item.count}대`);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('Total PCs (excluding Stock):', totalPcs);
|
|
||||||
118
scratch/fix_dates_by_spec.js
Normal file
118
scratch/fix_dates_by_spec.js
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
import mysql from 'mysql2/promise';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const pool = mysql.createPool({
|
||||||
|
host: process.env.DB_HOST,
|
||||||
|
user: process.env.DB_USER,
|
||||||
|
password: process.env.DB_PASS,
|
||||||
|
database: process.env.DB_NAME,
|
||||||
|
port: parseInt(process.env.DB_PORT || '3306'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 하드웨어 출시 연도 데이터베이스 (CPU/GPU)
|
||||||
|
const RELEASE_DATES = {
|
||||||
|
// Intel CPU Generations (Mainstream desktop release month/year)
|
||||||
|
'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
|
||||||
|
'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
|
||||||
|
'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
|
||||||
|
'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
|
||||||
|
'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
|
||||||
|
'i9-9': '2018-10', 'i7-9': '2018-10', 'i5-9': '2018-10',
|
||||||
|
'i7-8': '2017-10', 'i5-8': '2017-10',
|
||||||
|
'i7-7': '2017-01', 'i5-7': '2017-01',
|
||||||
|
'i7-6': '2015-08', 'i5-6': '2015-08',
|
||||||
|
'i7-4': '2013-06', 'i5-4': '2013-06',
|
||||||
|
'i7-3': '2012-04', 'i5-3': '2012-04',
|
||||||
|
'i7-2': '2011-01', 'i5-2': '2011-01',
|
||||||
|
|
||||||
|
// NVIDIA GPU Series
|
||||||
|
'RTX 4090': '2022-10', 'RTX 4080': '2022-11', 'RTX 4070': '2023-04', 'RTX 4060': '2023-06',
|
||||||
|
'RTX 3090': '2020-09', 'RTX 3080': '2020-09', 'RTX 3070': '2020-10', 'RTX 3060': '2021-02',
|
||||||
|
'RTX 2080': '2018-09', 'RTX 2070': '2018-10', 'RTX 2060': '2019-01',
|
||||||
|
'GTX 1660': '2019-03', 'GTX 1650': '2019-04',
|
||||||
|
'GTX 1080': '2016-05', 'GTX 1070': '2016-06', 'GTX 1060': '2016-07', 'GTX 1050': '2016-10',
|
||||||
|
'GTX 980': '2014-09', 'GTX 970': '2014-09', 'GTX 960': '2015-01'
|
||||||
|
};
|
||||||
|
|
||||||
|
function inferDateFromSpecs(cpu, gpu) {
|
||||||
|
const cpuStr = (cpu || '').toUpperCase();
|
||||||
|
const gpuStr = (gpu || '').toUpperCase();
|
||||||
|
|
||||||
|
let inferred = null;
|
||||||
|
|
||||||
|
// 1. GPU 기준 (최신 그래픽카드가 꽂혀있으면 그 시기 이후 구매일 확률이 높음)
|
||||||
|
for (const [key, date] of Object.entries(RELEASE_DATES)) {
|
||||||
|
if (gpuStr.includes(key)) {
|
||||||
|
inferred = date;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. CPU 기준 (GPU에서 못 찾았거나, CPU가 더 최신일 경우)
|
||||||
|
if (!inferred) {
|
||||||
|
for (const [key, date] of Object.entries(RELEASE_DATES)) {
|
||||||
|
// i7-13700 등을 찾기 위해 정규식 또는 포함 여부 확인
|
||||||
|
if (cpuStr.includes(key)) {
|
||||||
|
inferred = date;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return inferred ? `${inferred}-01` : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
try {
|
||||||
|
const [rows] = await connection.query(`
|
||||||
|
SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu
|
||||||
|
FROM asset_core c
|
||||||
|
LEFT JOIN asset_spec s ON c.id = s.asset_id
|
||||||
|
`);
|
||||||
|
|
||||||
|
const updates = [];
|
||||||
|
const unchanged = [];
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const currentVal = (row.purchase_date || '').trim();
|
||||||
|
|
||||||
|
// 구매일자가 없거나 부정확한 경우만 처리
|
||||||
|
if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('2024-01-01')) {
|
||||||
|
const specDate = inferDateFromSpecs(row.cpu, row.gpu);
|
||||||
|
|
||||||
|
if (specDate) {
|
||||||
|
updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
|
||||||
|
} else {
|
||||||
|
unchanged.push({ code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`🚀 스펙 분석 결과: ${updates.length}건의 자산 구매일자를 보정합니다.`);
|
||||||
|
|
||||||
|
for (const item of updates) {
|
||||||
|
await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
|
||||||
|
console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (unchanged.length > 0) {
|
||||||
|
console.log('\n⚠️ 스펙 정보를 찾을 수 없어 보정하지 못한 자산:');
|
||||||
|
unchanged.forEach(u => {
|
||||||
|
if (u.code) console.log(`[Skip] ${u.code.padEnd(15)} | CPU: ${u.cpu || '-'} | GPU: ${u.gpu || '-'}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error:', err);
|
||||||
|
} finally {
|
||||||
|
connection.release();
|
||||||
|
pool.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
128
scratch/fix_dates_strict.js
Normal file
128
scratch/fix_dates_strict.js
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
import mysql from 'mysql2/promise';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const pool = mysql.createPool({
|
||||||
|
host: process.env.DB_HOST,
|
||||||
|
user: process.env.DB_USER,
|
||||||
|
password: process.env.DB_PASS,
|
||||||
|
database: process.env.DB_NAME,
|
||||||
|
port: parseInt(process.env.DB_PORT || '3306'),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 하드웨어 출시 연도/월 데이터베이스
|
||||||
|
const RELEASE_DATES = {
|
||||||
|
// Intel CPU
|
||||||
|
'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
|
||||||
|
'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
|
||||||
|
'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
|
||||||
|
'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
|
||||||
|
'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
|
||||||
|
'i9-9': '2018-10', 'i7-9': '2018-10', 'i5-9': '2018-10',
|
||||||
|
'i7-8': '2017-10', 'i5-8': '2017-10',
|
||||||
|
'i7-7': '2017-01', 'i5-7': '2017-01',
|
||||||
|
'i7-6': '2015-08', 'i5-6': '2015-08',
|
||||||
|
'i7-5': '2014-06', 'i5-5': '2015-06', // Broadwell
|
||||||
|
'i7-4': '2013-06', 'i5-4': '2013-06',
|
||||||
|
'i7-3': '2012-04', 'i5-3': '2012-04',
|
||||||
|
'i7-2': '2011-01', 'i5-2': '2011-01',
|
||||||
|
|
||||||
|
// NVIDIA GPU
|
||||||
|
'RTX 40': '2022-10',
|
||||||
|
'RTX 30': '2020-09',
|
||||||
|
'RTX 20': '2018-09',
|
||||||
|
'GTX 16': '2019-02',
|
||||||
|
'GTX 10': '2016-05',
|
||||||
|
'GTX 9': '2014-09',
|
||||||
|
'GTX 750': '2014-02',
|
||||||
|
'GTX 7': '2013-05',
|
||||||
|
'GTX 6': '2012-03'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 출시 연도만 있는 경우 (지시에 따라 후속년도 12월 적용을 위함)
|
||||||
|
const YEAR_ONLY = {
|
||||||
|
'I5-4': 2013,
|
||||||
|
'I5-6': 2015,
|
||||||
|
'I7-7': 2017,
|
||||||
|
'GTX 750': 2014
|
||||||
|
};
|
||||||
|
|
||||||
|
function inferDateFromSpecs(cpu, gpu) {
|
||||||
|
const cpuStr = (cpu || '').toUpperCase();
|
||||||
|
const gpuStr = (gpu || '').toUpperCase();
|
||||||
|
|
||||||
|
let latestYear = 0;
|
||||||
|
let latestMonth = 0;
|
||||||
|
|
||||||
|
// 모든 매핑 데이터를 순회하며 가장 최신 날짜를 찾음
|
||||||
|
for (const [key, dateStr] of Object.entries(RELEASE_DATES)) {
|
||||||
|
if (cpuStr.includes(key) || gpuStr.includes(key)) {
|
||||||
|
const [y, m] = dateStr.split('-').map(Number);
|
||||||
|
if (y > latestYear || (y === latestYear && m > latestMonth)) {
|
||||||
|
latestYear = y;
|
||||||
|
latestMonth = m;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 매칭된 정보가 있는 경우
|
||||||
|
if (latestYear > 0) {
|
||||||
|
// 월 정보가 명확히 매핑된 경우 (RELEASE_DATES 사용)
|
||||||
|
// 하지만 지시사항에 따라 "월을 못찾으면 12월" & "후속년도" 규칙 적용 여부 판단
|
||||||
|
// RELEASE_DATES는 월이 이미 있으므로 그대로 사용하되,
|
||||||
|
// 만약 YEAR_ONLY에만 걸리는 경우를 위해 로직 보강
|
||||||
|
return `${latestYear}-${String(latestMonth).padStart(2, '0')}-01`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 연도만 매칭되는 경우 (지시사항: 후속년도 12월)
|
||||||
|
for (const [key, year] of Object.entries(YEAR_ONLY)) {
|
||||||
|
if (cpuStr.includes(key) || gpuStr.includes(key)) {
|
||||||
|
return `${year + 1}-12-01`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
try {
|
||||||
|
const [rows] = await connection.query(`
|
||||||
|
SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu
|
||||||
|
FROM asset_core c
|
||||||
|
LEFT JOIN asset_spec s ON c.id = s.asset_id
|
||||||
|
`);
|
||||||
|
|
||||||
|
const updates = [];
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const currentVal = (row.purchase_date || '').trim();
|
||||||
|
|
||||||
|
// 구매일자가 없거나 '-', 'undefined'인 경우 + 혹은 아직 보정이 필요한 자산
|
||||||
|
if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('0000') || currentVal === '2024-01-01') {
|
||||||
|
const specDate = inferDateFromSpecs(row.cpu, row.gpu);
|
||||||
|
if (specDate) {
|
||||||
|
updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`🚀 지시사항 반영: ${updates.length}건의 자산을 보정합니다. (후속년도/12월 규칙 적용)`);
|
||||||
|
|
||||||
|
for (const item of updates) {
|
||||||
|
await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
|
||||||
|
console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error:', err);
|
||||||
|
} finally {
|
||||||
|
connection.release();
|
||||||
|
pool.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
88
scratch/fix_purchase_dates.js
Normal file
88
scratch/fix_purchase_dates.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import mysql from 'mysql2/promise';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
|
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const pool = mysql.createPool({
|
||||||
|
host: process.env.DB_HOST,
|
||||||
|
user: process.env.DB_USER,
|
||||||
|
password: process.env.DB_PASS,
|
||||||
|
database: process.env.DB_NAME,
|
||||||
|
port: parseInt(process.env.DB_PORT || '3306'),
|
||||||
|
});
|
||||||
|
|
||||||
|
async function run() {
|
||||||
|
const connection = await pool.getConnection();
|
||||||
|
try {
|
||||||
|
// 먼저 잘못 들어간 0000-00-01 등 복구
|
||||||
|
console.log('잘못된 형식(0000-00-01 등)을 초기화합니다...');
|
||||||
|
await connection.query("UPDATE asset_core SET purchase_date = '-' WHERE purchase_date LIKE '0000%' OR purchase_date = '2020-01-01'");
|
||||||
|
|
||||||
|
const [rows] = await connection.query('SELECT id, asset_code, purchase_date, category FROM asset_core');
|
||||||
|
|
||||||
|
const updates = [];
|
||||||
|
const missing = [];
|
||||||
|
|
||||||
|
for (const row of rows) {
|
||||||
|
const code = (row.asset_code || '').trim();
|
||||||
|
const currentVal = (row.purchase_date || '').trim();
|
||||||
|
|
||||||
|
// 구매일자가 없거나 '-', 'undefined' 인 경우 대상
|
||||||
|
if (!currentVal || currentVal === '-' || currentVal === 'undefined') {
|
||||||
|
let inferredDate = null;
|
||||||
|
|
||||||
|
// 1. PREFIX-YYYYMM-NNNN 형식 (예: PC-202406-0001)
|
||||||
|
const match6 = code.match(/[A-Z]+-(\d{4})(0[1-9]|1[0-2])-\d+/);
|
||||||
|
if (match6) {
|
||||||
|
inferredDate = `${match6[1]}-${match6[2]}-01`;
|
||||||
|
} else {
|
||||||
|
// 2. PREFIX-YYYYNN 형식 (예: PC-202423) -> 연도만 있고 뒤에 순번 2자리
|
||||||
|
const matchYearSeq = code.match(/[A-Z]+-(20\d{2})(\d{2})$/);
|
||||||
|
if (matchYearSeq) {
|
||||||
|
inferredDate = `${matchYearSeq[1]}-01-01`; // 월을 모르므로 1월로 통일
|
||||||
|
} else {
|
||||||
|
// 3. PREFIX-YYNNN 형식 (예: PC-24001)
|
||||||
|
const matchShort = code.match(/[A-Z]+-(1\d|2\d)(\d{3})/);
|
||||||
|
if (matchShort) {
|
||||||
|
inferredDate = `20${matchShort[1]}-01-01`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 0000 등의 잘못된 매칭 방지
|
||||||
|
if (inferredDate && !inferredDate.startsWith('0000')) {
|
||||||
|
updates.push({ id: row.id, date: inferredDate, code: code });
|
||||||
|
} else {
|
||||||
|
missing.push({ id: row.id, code: code, category: row.category });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`총 ${updates.length}건의 자산을 업데이트합니다.`);
|
||||||
|
for (const item of updates) {
|
||||||
|
await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
|
||||||
|
console.log(`[Update] ${item.code} -> ${item.date}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('\n--- 구매일자를 추정할 수 없는 자산 목록 ---');
|
||||||
|
if (missing.length === 0) {
|
||||||
|
console.log('없음');
|
||||||
|
} else {
|
||||||
|
// 중복 제거 및 정렬하여 보고
|
||||||
|
const uniqueMissing = missing.filter(m => m.code !== '');
|
||||||
|
uniqueMissing.forEach(m => {
|
||||||
|
console.log(`[Missing] 코드: ${m.code.padEnd(20)} | 카테고리: ${m.category}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(`\n완료: ${updates.length}건 업데이트됨, ${missing.length}건 미결정.`);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error:', err);
|
||||||
|
} finally {
|
||||||
|
connection.release();
|
||||||
|
pool.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
run();
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
|
|
||||||
const sheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
||||||
const rawRows = utils.sheet_to_json(sheet, { header: 1 });
|
|
||||||
|
|
||||||
const corps = new Set();
|
|
||||||
|
|
||||||
// 첫 번째 행(헤더) 제외하고 C열(인덱스 2) 데이터 추출
|
|
||||||
rawRows.slice(1).forEach(row => {
|
|
||||||
if (row[2] !== undefined && row[2] !== null) {
|
|
||||||
corps.add(String(row[2]).trim());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const jobs = new Map();
|
|
||||||
rawRows.slice(1).forEach(row => {
|
|
||||||
const job = String(row[3] || '').trim();
|
|
||||||
jobs.set(job, (jobs.get(job) || 0) + 1);
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('--- Unique Jobs in D column ---');
|
|
||||||
Array.from(jobs.entries()).forEach(([key, val]) => {
|
|
||||||
console.log(`${key}: ${val}대`);
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
|
|
||||||
|
|
||||||
for (const sheetName of workbook.SheetNames) {
|
|
||||||
console.log(`\n================= Sheet: ${sheetName} =================`);
|
|
||||||
const sheet = workbook.Sheets[sheetName];
|
|
||||||
const rawRows = utils.sheet_to_json(sheet, { header: 1 });
|
|
||||||
const validRows = rawRows.filter(row => {
|
|
||||||
return row.some(val => val !== undefined && val !== null && String(val).trim() !== '');
|
|
||||||
});
|
|
||||||
|
|
||||||
const header = validRows[0];
|
|
||||||
const assetNameIdx = header.indexOf('자산명');
|
|
||||||
const typeIdx = header.indexOf('유형');
|
|
||||||
const detailIdx = header.indexOf('상세');
|
|
||||||
const teamIdx = header.indexOf('팀명');
|
|
||||||
|
|
||||||
validRows.slice(1).forEach((row, idx) => {
|
|
||||||
console.log(`[${idx + 1}] 팀명: ${row[teamIdx]} | 자산명: ${row[assetNameIdx]} | 유형: ${row[typeIdx]} | 상세: ${row[detailIdx]}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
@@ -1,447 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
// 임시 ID 생성 및 도우미 함수
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
|
|
||||||
function cleanValue(val) {
|
|
||||||
if (val === undefined || val === null) return '-';
|
|
||||||
const str = String(val).trim();
|
|
||||||
return str === '' ? '-' : str;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
|
|
||||||
const sheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
||||||
|
|
||||||
// header: 1로 읽어 2차원 배열을 획득
|
|
||||||
const rawRows = utils.sheet_to_json(sheet, { header: 1 });
|
|
||||||
|
|
||||||
// 첫 번째 행은 헤더이므로 제외
|
|
||||||
const dataRows = rawRows.slice(1);
|
|
||||||
|
|
||||||
const parsedPCs = [];
|
|
||||||
let pcIndex = 0;
|
|
||||||
let designKihuckCount = 0;
|
|
||||||
|
|
||||||
for (const row of dataRows) {
|
|
||||||
// 빈 행 건너뛰기 (성명, 부서, 팀명 모두 비어있으면 데이터가 없는 행으로 판단)
|
|
||||||
if (!row[0] && !row[1] && !row[2] && !row[3] && !row[4]) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const deptRaw = cleanValue(row[0]);
|
|
||||||
const teamRaw = cleanValue(row[1]);
|
|
||||||
const corpRaw = cleanValue(row[2]); // C열: 소속 (NEW)
|
|
||||||
const jobRaw = cleanValue(row[3]); // D열: 직무 (밀림)
|
|
||||||
const nameRaw = cleanValue(row[4]); // E열: 성명 (밀림)
|
|
||||||
|
|
||||||
// 특정 사용자 제외 필터
|
|
||||||
if (nameRaw === '한치영' || nameRaw === '공용') {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
const posRaw = cleanValue(row[5]); // F열: 직급 (밀림)
|
|
||||||
const mainboardRaw = cleanValue(row[6]); // G열: 메인보드 (밀림)
|
|
||||||
const cpuRaw = cleanValue(row[7]); // H열: CPU (밀림)
|
|
||||||
const cpuYearRaw = row[8]; // I열: CPU 출시연도 (밀림)
|
|
||||||
const gpuRaw = cleanValue(row[9]); // J열: GPU (밀림)
|
|
||||||
const gpuYearRaw = row[10]; // K열: GPU 출시연도 (밀림)
|
|
||||||
const ramRaw = cleanValue(row[11]); // L열: RAM (밀림)
|
|
||||||
const ssd1Raw = cleanValue(row[12]);// M열: SDD1 (밀림)
|
|
||||||
const ssd2Raw = cleanValue(row[13]);// N열: SDD2 (밀림)
|
|
||||||
const hdd1Raw = cleanValue(row[14]);// O열: HDD1 (밀림)
|
|
||||||
const hdd2Raw = cleanValue(row[15]);// P열: HDD2 (밀림)
|
|
||||||
const hdd3Raw = cleanValue(row[16]);// Q열: HDD3 (밀림)
|
|
||||||
const hdd4Raw = cleanValue(row[17]);// R열: HDD4 (밀림)
|
|
||||||
|
|
||||||
// W열(22번째 인덱스) -> 구매일자
|
|
||||||
const dateRaw = cleanValue(row[22]);
|
|
||||||
// X열(23번째 인덱스) -> 비고
|
|
||||||
const memoRaw = cleanValue(row[23]);
|
|
||||||
|
|
||||||
// 1. 법인 매핑 (엑셀 C열의 실제 소속 우선 사용, 없을 시 순환 지정)
|
|
||||||
const purchase_corp = corpRaw !== '-' ? corpRaw : CORPS[pcIndex % CORPS.length];
|
|
||||||
|
|
||||||
// 2. 재고PC 판단 및 상태 설정
|
|
||||||
const isStock = teamRaw === '재고PC';
|
|
||||||
const hw_status = isStock ? '창고보관' : '운영중';
|
|
||||||
|
|
||||||
// 3. 성명 정제
|
|
||||||
let user_current = nameRaw;
|
|
||||||
if (isStock) {
|
|
||||||
// 재고PC인 경우 직무 컬럼(row[3])에 성명이 들어가 있음
|
|
||||||
user_current = jobRaw !== '-' ? jobRaw : '재고장비';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. 직무 정제
|
|
||||||
let user_position = jobRaw;
|
|
||||||
if (isStock) {
|
|
||||||
user_position = '재고PC';
|
|
||||||
} else if (user_position === '-' || user_position === 'undefined' || !user_position || ['안용주', '김민수', '심영표', '이수창A', '조병철', '윤진호', '김대영', '박정웅', '김유식'].includes(user_position)) {
|
|
||||||
// 직무가 유효하지 않거나 이름인 경우 정제
|
|
||||||
if (nameRaw === '장종찬' || posRaw === '사장') {
|
|
||||||
user_position = '기획자';
|
|
||||||
} else if (nameRaw === '노트북' || nameRaw === '공용') {
|
|
||||||
user_position = '기획자';
|
|
||||||
} else {
|
|
||||||
// 팀명/부서 기준 매핑
|
|
||||||
const combined = (deptRaw + ' ' + teamRaw).toUpperCase();
|
|
||||||
if (combined.includes('개발') || combined.includes('SOLUTION') || combined.includes('WEB') || combined.includes('ERP')) {
|
|
||||||
user_position = '개발자';
|
|
||||||
} else if (combined.includes('BIM') || combined.includes('구조') || combined.includes('설계') || combined.includes('터널') || combined.includes('상하수도') || combined.includes('수자원') || combined.includes('건설') || combined.includes('CM')) {
|
|
||||||
user_position = '엔지니어';
|
|
||||||
} else if (combined.includes('디자인') || combined.includes('GRAPHICS')) {
|
|
||||||
user_position = '디자이너';
|
|
||||||
} else {
|
|
||||||
user_position = '기획자';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 만약 직무가 'BIM모델러' 인 경우, 그대로 유지
|
|
||||||
if (jobRaw === 'BIM모델러') {
|
|
||||||
user_position = 'BIM모델러';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 개발자/디자이너 세부 직무 분리 로직 적용
|
|
||||||
if (user_position === '개발자') {
|
|
||||||
const nameUpper = nameRaw.trim();
|
|
||||||
const teamUpper = teamRaw.toUpperCase();
|
|
||||||
|
|
||||||
if (nameUpper === '조찬영' || nameUpper === '김용연') {
|
|
||||||
user_position = 'AI 개발자';
|
|
||||||
} else if (
|
|
||||||
teamUpper.includes('그래픽스') ||
|
|
||||||
teamUpper.includes('MODELER') ||
|
|
||||||
teamUpper.includes('HMEG') ||
|
|
||||||
teamUpper.includes('EG-BIM') ||
|
|
||||||
teamUpper.includes('GSIM') ||
|
|
||||||
teamUpper.includes('STRANA')
|
|
||||||
) {
|
|
||||||
user_position = '3D 개발자';
|
|
||||||
} else if (
|
|
||||||
teamUpper.includes('WEB') ||
|
|
||||||
teamUpper.includes('솔루션개발') ||
|
|
||||||
teamUpper.includes('ERP') ||
|
|
||||||
teamUpper.includes('전산')
|
|
||||||
) {
|
|
||||||
user_position = '웹 개발자';
|
|
||||||
} else {
|
|
||||||
user_position = '프로그램 개발자';
|
|
||||||
}
|
|
||||||
} else if (user_position === '디자이너') {
|
|
||||||
const teamUpper = teamRaw.toUpperCase();
|
|
||||||
if (teamUpper.includes('디자인셀')) {
|
|
||||||
user_position = 'UXUI 디자이너';
|
|
||||||
} else if (teamUpper.includes('디자인기획')) {
|
|
||||||
// 디자인기획팀 소속 중 약 40%는 3D 디자이너, 60%는 편집 디자이너
|
|
||||||
if (designKihuckCount % 10 < 4) {
|
|
||||||
user_position = '3D 디자이너';
|
|
||||||
} else {
|
|
||||||
user_position = '편집 디자이너';
|
|
||||||
}
|
|
||||||
designKihuckCount++;
|
|
||||||
} else {
|
|
||||||
user_position = '편집 디자이너';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 5. 구매일자 포맷 가공 (YYYY-MM)
|
|
||||||
let purchase_date = '2022-01'; // 기본값
|
|
||||||
if (dateRaw !== '-') {
|
|
||||||
if (dateRaw.length === 6 && !isNaN(dateRaw)) {
|
|
||||||
purchase_date = `${dateRaw.substring(0, 4)}-${dateRaw.substring(4, 6)}`;
|
|
||||||
} else if (dateRaw.length === 4 && !isNaN(dateRaw)) {
|
|
||||||
purchase_date = `${dateRaw}-01`;
|
|
||||||
} else {
|
|
||||||
purchase_date = dateRaw;
|
|
||||||
}
|
|
||||||
} else if (cpuYearRaw && !isNaN(cpuYearRaw)) {
|
|
||||||
purchase_date = `${cpuYearRaw}-01`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 6. 도입 금액(purchase_amount) 책정
|
|
||||||
let purchase_amount = '1500000';
|
|
||||||
const cpuUpper = cpuRaw.toUpperCase();
|
|
||||||
const gpuUpper = gpuRaw.toUpperCase();
|
|
||||||
|
|
||||||
if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9') || gpuUpper.includes('4080') || gpuUpper.includes('4090')) {
|
|
||||||
purchase_amount = '3500000';
|
|
||||||
} else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7') || gpuUpper.includes('3070') || gpuUpper.includes('4070') || gpuUpper.includes('A2000')) {
|
|
||||||
purchase_amount = '2200000';
|
|
||||||
} else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5') || gpuUpper.includes('3060') || gpuUpper.includes('2060')) {
|
|
||||||
purchase_amount = '1500000';
|
|
||||||
} else if (cpuYearRaw && parseInt(cpuYearRaw) < 2020) {
|
|
||||||
purchase_amount = '800000';
|
|
||||||
} else {
|
|
||||||
purchase_amount = '950000';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 7. MAC 주소 생성 (16진수 포맷)
|
|
||||||
const mac_address = `00:1A:2B:3C:4D:${pcIndex.toString(16).toUpperCase().padStart(2, '0')}`;
|
|
||||||
|
|
||||||
parsedPCs.push({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '개인PC',
|
|
||||||
purchase_corp,
|
|
||||||
asset_code: 'PC-24' + String(pcIndex).padStart(3, '0'),
|
|
||||||
purchase_date,
|
|
||||||
user_current,
|
|
||||||
user_position,
|
|
||||||
current_dept: teamRaw !== '-' ? teamRaw : deptRaw,
|
|
||||||
previous_dept: pcIndex % 8 === 0 ? '기획팀' : '-',
|
|
||||||
location: '서울본사 7층',
|
|
||||||
manager_primary: '김IT',
|
|
||||||
manager_secondary: '이IT',
|
|
||||||
model_name: mainboardRaw !== '-' ? mainboardRaw : '사내 표준 데스크톱',
|
|
||||||
os: 'Windows 11 Pro',
|
|
||||||
cpu: cpuRaw,
|
|
||||||
gpu: gpuRaw,
|
|
||||||
ram: ramRaw,
|
|
||||||
ssd_1: ssd1Raw,
|
|
||||||
ssd_2: ssd2Raw,
|
|
||||||
ssd_3: '-',
|
|
||||||
hdd_1: hdd1Raw,
|
|
||||||
hdd_2: hdd2Raw,
|
|
||||||
hdd_3: hdd3Raw,
|
|
||||||
hdd_4: hdd4Raw,
|
|
||||||
mainboard: mainboardRaw,
|
|
||||||
ip_address: '192.168.0.' + (10 + (pcIndex % 240)),
|
|
||||||
purchase_amount,
|
|
||||||
purchase_vendor: 'LG전자/삼성전자/HP',
|
|
||||||
approval_document: '2024_상반기_PC구매_' + pcIndex,
|
|
||||||
memo: memoRaw !== '-' ? memoRaw : (isStock ? '재고 보유 분' : '임직원 지급용'),
|
|
||||||
asset_name: `개인PC ${pcIndex + 1}`,
|
|
||||||
mac_address,
|
|
||||||
hw_status
|
|
||||||
});
|
|
||||||
|
|
||||||
pcIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Successfully parsed ${parsedPCs.length} PCs from excel file.`);
|
|
||||||
|
|
||||||
// dummyData.ts 의 나머지 데이터(dummyServers 등)를 포함하여 전체 파일을 새로 씁니다.
|
|
||||||
const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 문자열
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
|
|
||||||
const randomPurchaseYM = () => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * 10);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 YYYY-MM-DD
|
|
||||||
const randomDateStr = (maxYearsAgo = 10) => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}-\${day}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
export const dummyPCs: any[] = ${JSON.stringify(parsedPCs, null, 2)};
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등)
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export const dummyServers: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '서버',
|
|
||||||
type2: i % 2 === 0 ? '물리' : '가상',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`SRV-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
asset_purpose: i % 2 === 0 ? '운영 웹 서버' : '사내망 DB 서버',
|
|
||||||
current_dept: '인프라팀',
|
|
||||||
previous_dept: '-',
|
|
||||||
location: 'IDC 센터 1-A',
|
|
||||||
manager_primary: '박서버',
|
|
||||||
manager_secondary: '최백업',
|
|
||||||
ip_address: \`10.0.0.\${10 + i}\`,
|
|
||||||
ip_address_2: \`192.168.100.\${10 + i}\`,
|
|
||||||
remote_tool: 'RDP / SSH',
|
|
||||||
remote_id: \`admin_\${i}\`,
|
|
||||||
remote_pw: '********',
|
|
||||||
model_name: 'Dell PowerEdge R750',
|
|
||||||
os: 'Ubuntu 22.04 LTS',
|
|
||||||
cpu: 'Intel Xeon Gold 6330',
|
|
||||||
ram: '128GB',
|
|
||||||
gpu: i % 3 === 0 ? 'NVIDIA A100' : '-',
|
|
||||||
ssd_1: '1TB NVMe',
|
|
||||||
ssd_2: '1TB NVMe',
|
|
||||||
hdd_1: '4TB HDD',
|
|
||||||
monitoring: 'Zabbix Agent',
|
|
||||||
purchase_amount: '8500000',
|
|
||||||
purchase_vendor: '델테크놀로지스',
|
|
||||||
approval_document: \`2024_IDC_확장품의_\sign\${i}\`,
|
|
||||||
memo: '서버 랙 3번 위치',
|
|
||||||
asset_name: \`운영 서버 \${i+1}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:4E:\${String(i).padStart(2, '0')}\`,
|
|
||||||
hw_status: '운영중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyStorages: any[] = Array.from({ length: 8 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '스토리지',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`STR-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`공용 스토리지 \${i+1}\`,
|
|
||||||
location: 'IDC 센터 1-A',
|
|
||||||
model_name: 'Synology RS4021xs+',
|
|
||||||
volume: '100TB',
|
|
||||||
manager_primary: '박서버',
|
|
||||||
manager_secondary: '최백업',
|
|
||||||
ip_address: \`10.0.0.\${50 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:4F:\${String(i).padStart(2, '0')}\`,
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '12000000',
|
|
||||||
purchase_vendor: '시놀로지코리아',
|
|
||||||
approval_document: \`2024_스토리지구매_\${i}\`,
|
|
||||||
memo: '부서별 백업본 저장용',
|
|
||||||
os: 'Synology DSM',
|
|
||||||
asset_purpose: '데이터 백업',
|
|
||||||
hw_status: '운영중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '전산비품',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`네트워크 스위치 \${i+1}\`,
|
|
||||||
location: '전산실 랙 1',
|
|
||||||
manager_primary: '네트워크담당자',
|
|
||||||
ip_address: \`192.168.10.\${200 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
|
|
||||||
os: 'Cisco IOS',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
purchase_vendor: '다나와',
|
|
||||||
approval_document: \`2024_비품구매_\${i}\`,
|
|
||||||
memo: '사내망 확장용',
|
|
||||||
asset_purpose: '네트워크 분배'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '모바일기기',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`테스트용 단말기 \${i+1}\`,
|
|
||||||
location: '개발2팀',
|
|
||||||
manager_primary: '테스터',
|
|
||||||
os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '900000',
|
|
||||||
purchase_vendor: '삼성전자/애플',
|
|
||||||
approval_document: \`2024_모바일구매_\${i}\`,
|
|
||||||
memo: '앱 호환성 테스트 전용',
|
|
||||||
asset_purpose: 'QA 테스트',
|
|
||||||
ip_address: \`192.168.1.\${10 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '구독SW',
|
|
||||||
sw_field: '업무용/협업',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '전사',
|
|
||||||
product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
|
|
||||||
purchase_date: randomDateStr(3),
|
|
||||||
start_date: randomDateStr(1),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
asset_count: 50 + i * 5,
|
|
||||||
email_account: \`admin\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '소프트웨어인라이프',
|
|
||||||
memo: '연간 계약 갱신 필요'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '영구SW',
|
|
||||||
sw_field: '디자인/설계',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '디자인팀',
|
|
||||||
product_name: \`AutoCAD 202\${i%4}\`,
|
|
||||||
purchase_date: randomDateStr(5),
|
|
||||||
start_date: randomDateStr(5),
|
|
||||||
expired_date: '2099-12-31',
|
|
||||||
purchase_amount: '3000000',
|
|
||||||
asset_count: 2,
|
|
||||||
email_account: \`design\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '오토데스크 파트너',
|
|
||||||
memo: 'USB 동글키 보관중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '클라우드',
|
|
||||||
asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '개발팀',
|
|
||||||
product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
|
|
||||||
email_account: \`awsadmin\${i}@hmcorp.com\`,
|
|
||||||
purchase_method: '법인카드(신한 1234)',
|
|
||||||
purchase_amount: \`\${500000 + i * 100000}\`,
|
|
||||||
asset_count: 1,
|
|
||||||
purchase_vendor: 'AWS/GCP',
|
|
||||||
memo: '환율 변동에 따라 매월 상이함'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '도메인',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
product_name: \`사내 운영 서비스 \${i+1}\`,
|
|
||||||
domain_address: \`service\${i+1}.hmcorp.com\`,
|
|
||||||
start_date: randomDateStr(4),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '22000',
|
|
||||||
manager_primary: '인프라팀장',
|
|
||||||
manager_secondary: '인프라담당자',
|
|
||||||
memo: '가비아 자동갱신 설정 완료'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_id: dummySubSw[0]?.id || randomId(),
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '경영지원팀',
|
|
||||||
user_current: \`홍길동\${i}\`,
|
|
||||||
memo: \`SW신청서_2400\${i}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
assetId: dummyPCs[0]?.id || randomId(),
|
|
||||||
date: randomDateStr(1),
|
|
||||||
details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
|
|
||||||
user: 'IT지원팀',
|
|
||||||
cost: i % 2 === 0 ? 80000 : 150000,
|
|
||||||
}));
|
|
||||||
`;
|
|
||||||
|
|
||||||
fs.writeFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', newDummyDataFileContent, 'utf-8');
|
|
||||||
console.log('✅ dummyData.ts file updated successfully.');
|
|
||||||
} catch (e) {
|
|
||||||
console.error('❌ Failed to update dummy data:', e);
|
|
||||||
}
|
|
||||||
@@ -1,442 +0,0 @@
|
|||||||
import pkg from 'xlsx';
|
|
||||||
import * as fs from 'fs';
|
|
||||||
import * as path from 'path';
|
|
||||||
|
|
||||||
const { readFile, utils } = pkg;
|
|
||||||
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
|
|
||||||
function cleanValue(val) {
|
|
||||||
if (val === undefined || val === null) return '-';
|
|
||||||
const str = String(val).trim();
|
|
||||||
return str === '' ? '-' : str;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. 기존 dummyPCs 로딩
|
|
||||||
const dummyDataPath = 'c:/Project/HM ITAM/src/core/dummyData.ts';
|
|
||||||
const content = fs.readFileSync(dummyDataPath, 'utf-8');
|
|
||||||
const matchPCs = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
|
|
||||||
if (!matchPCs) {
|
|
||||||
console.error('Failed to parse dummyPCs from dummyData.ts');
|
|
||||||
process.exit(1);
|
|
||||||
}
|
|
||||||
const dummyPCs = JSON.parse(matchPCs[1]);
|
|
||||||
console.log(`Loaded ${dummyPCs.length} existing PCs from dummyData.ts`);
|
|
||||||
|
|
||||||
// 2. SampleData_SVR.xlsx 파싱
|
|
||||||
const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
|
|
||||||
|
|
||||||
const parsedServers = [];
|
|
||||||
const parsedStorages = [];
|
|
||||||
const parsedEquips = [];
|
|
||||||
|
|
||||||
let serverIndex = 0;
|
|
||||||
let storageIndex = 0;
|
|
||||||
let equipIndex = 0;
|
|
||||||
|
|
||||||
// ----------------- 시트 1: 합본데이터(공용PC) -----------------
|
|
||||||
const sheetPC = workbook.Sheets['합본데이터(공용PC)'];
|
|
||||||
const rawPC = utils.sheet_to_json(sheetPC, { header: 1 });
|
|
||||||
const rowsPC = rawPC.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
|
|
||||||
|
|
||||||
for (const row of rowsPC) {
|
|
||||||
const teamRaw = cleanValue(row[0]);
|
|
||||||
const svrNoRaw = cleanValue(row[1]);
|
|
||||||
const assetNameRaw = cleanValue(row[2]);
|
|
||||||
const typeRaw = cleanValue(row[3]);
|
|
||||||
const detailRaw = cleanValue(row[4]);
|
|
||||||
const locRaw = cleanValue(row[5]);
|
|
||||||
const mgr1Raw = cleanValue(row[6]);
|
|
||||||
const mgr2Raw = cleanValue(row[7]);
|
|
||||||
const osRaw = cleanValue(row[8]);
|
|
||||||
const osVerRaw = cleanValue(row[9]);
|
|
||||||
const osBuildRaw = cleanValue(row[10]);
|
|
||||||
const modelRaw = cleanValue(row[11]);
|
|
||||||
const mainboardRaw = cleanValue(row[12]);
|
|
||||||
const cpuRaw = cleanValue(row[13]);
|
|
||||||
const ramRaw = cleanValue(row[14]);
|
|
||||||
const gpuRaw = cleanValue(row[15]);
|
|
||||||
const ssd1Raw = cleanValue(row[16]);
|
|
||||||
const ssd2Raw = cleanValue(row[17]);
|
|
||||||
const hdd1Raw = cleanValue(row[18]);
|
|
||||||
const hdd2Raw = cleanValue(row[19]);
|
|
||||||
const hdd3Raw = cleanValue(row[20]);
|
|
||||||
const hdd4Raw = cleanValue(row[21]);
|
|
||||||
|
|
||||||
const ipAddress = '172.16.10.' + (50 + (serverIndex % 150));
|
|
||||||
const randomCorp = CORPS[serverIndex % CORPS.length];
|
|
||||||
|
|
||||||
// 서비스 분류 판단
|
|
||||||
let service_type = '내부서비스';
|
|
||||||
const detailUpper = detailRaw.toUpperCase();
|
|
||||||
const assetUpper = assetNameRaw.toUpperCase();
|
|
||||||
const teamUpper = teamRaw.toUpperCase();
|
|
||||||
|
|
||||||
if (teamUpper.includes('회의실') || assetUpper.includes('회의실') || assetUpper.includes('사이니지')) {
|
|
||||||
service_type = '회의용/공용';
|
|
||||||
} else if (
|
|
||||||
detailUpper.includes('SAAS') || detailUpper.includes('웹서비스') ||
|
|
||||||
detailUpper.includes('운영') || detailUpper.includes('WAS') ||
|
|
||||||
detailUpper.includes('MYSTATION') || detailUpper.includes('CLOUD') ||
|
|
||||||
detailUpper.includes('홈페이지') || detailUpper.includes('WEB') ||
|
|
||||||
detailUpper.includes('외주') || assetUpper.includes('CLOUD') ||
|
|
||||||
assetUpper.includes('웹서비스') || assetUpper.includes('운영')
|
|
||||||
) {
|
|
||||||
service_type = '외부서비스';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 방치 의심 판단
|
|
||||||
const is_inactive = (
|
|
||||||
detailUpper.includes('원격 및 로컬접근 불가') ||
|
|
||||||
detailUpper.includes('철수예정') ||
|
|
||||||
detailUpper.includes('미사용') ||
|
|
||||||
detailUpper.includes('구형 OS')
|
|
||||||
);
|
|
||||||
|
|
||||||
// 실시간 리소스 및 네트워크 가상 데이터 생성
|
|
||||||
let cpu_usage = 0;
|
|
||||||
let ram_usage = 0;
|
|
||||||
let network_traffic = '0 GB';
|
|
||||||
|
|
||||||
if (is_inactive) {
|
|
||||||
cpu_usage = 0;
|
|
||||||
ram_usage = 0;
|
|
||||||
network_traffic = '0 GB (N/A)';
|
|
||||||
} else if (service_type === '회의용/공용') {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 10) + 2; // 2%~12%
|
|
||||||
ram_usage = Math.floor(Math.random() * 15) + 5; // 5%~20%
|
|
||||||
network_traffic = (Math.random() * 1.5 + 0.1).toFixed(1) + ' GB';
|
|
||||||
} else if (service_type === '외부서비스') {
|
|
||||||
// 일부 저사양 운영/SaaS 서버는 병목 현상을 시뮬레이션하기 위해 과부하 부여
|
|
||||||
const isUnderSpec = !gpuRaw.toUpperCase().includes('RTX 30') && !gpuRaw.toUpperCase().includes('RTX 40') && (cpuRaw.toUpperCase().includes('I5') || ramRaw.toUpperCase().includes('16GB') || cpuRaw === '-');
|
|
||||||
if (isUnderSpec) {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 15) + 81; // 81%~95% (과부하)
|
|
||||||
ram_usage = Math.floor(Math.random() * 10) + 86; // 86%~95%
|
|
||||||
} else {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 30) + 40; // 40%~70%
|
|
||||||
ram_usage = Math.floor(Math.random() * 20) + 60; // 60%~80%
|
|
||||||
}
|
|
||||||
network_traffic = (Math.random() * 1500 + 300).toFixed(0) + ' GB';
|
|
||||||
} else { // 내부서비스
|
|
||||||
// Abaqus 해석용이나 Pix4D 등 고부하 내부 인프라도 부하율 높게 부여
|
|
||||||
const isHighLoad = detailUpper.includes('ABAQUS') || detailUpper.includes('PIX4D') || detailUpper.includes('영상 렌더링') || detailUpper.includes('TERRA');
|
|
||||||
if (isHighLoad) {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 20) + 70; // 70%~90%
|
|
||||||
ram_usage = Math.floor(Math.random() * 20) + 75; // 75%~95%
|
|
||||||
} else {
|
|
||||||
cpu_usage = Math.floor(Math.random() * 35) + 15; // 15%~50%
|
|
||||||
ram_usage = Math.floor(Math.random() * 30) + 20; // 20%~50%
|
|
||||||
}
|
|
||||||
network_traffic = (Math.random() * 300 + 10).toFixed(0) + ' GB';
|
|
||||||
}
|
|
||||||
|
|
||||||
const assetItem = {
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: typeRaw !== '-' ? typeRaw : '공용PC',
|
|
||||||
purchase_corp: randomCorp,
|
|
||||||
asset_code: 'SVR-24' + String(serverIndex).padStart(3, '0'),
|
|
||||||
purchase_date: '2023-03',
|
|
||||||
asset_purpose: detailRaw,
|
|
||||||
current_dept: teamRaw,
|
|
||||||
previous_dept: '-',
|
|
||||||
location: locRaw,
|
|
||||||
manager_primary: mgr1Raw,
|
|
||||||
manager_secondary: mgr2Raw,
|
|
||||||
ip_address: ipAddress,
|
|
||||||
remote_tool: 'RDP / VNC',
|
|
||||||
model_name: modelRaw !== '-' ? modelRaw : (mainboardRaw !== '-' ? mainboardRaw : '사내 표준 공용PC'),
|
|
||||||
os: osRaw !== '-' ? `${osRaw} (${osVerRaw})` : 'Windows 10',
|
|
||||||
cpu: cpuRaw,
|
|
||||||
ram: ramRaw,
|
|
||||||
gpu: gpuRaw,
|
|
||||||
ssd_1: ssd1Raw,
|
|
||||||
ssd_2: ssd2Raw,
|
|
||||||
hdd_1: hdd1Raw,
|
|
||||||
hdd_2: hdd2Raw,
|
|
||||||
hdd_3: hdd3Raw,
|
|
||||||
hdd_4: hdd4Raw,
|
|
||||||
monitoring: service_type === '외부서비스' ? '대상' : '비대상',
|
|
||||||
purchase_amount: gpuRaw.toUpperCase().includes('RTX 4080') || gpuRaw.toUpperCase().includes('RTX 3090') ? '3500000' : '1500000',
|
|
||||||
purchase_vendor: '다나와',
|
|
||||||
approval_document: '2023_공용PC_도입_' + serverIndex,
|
|
||||||
memo: is_inactive ? '방치 의심 장비 (회수 필요)' : '정상 운영 장비',
|
|
||||||
asset_name: assetNameRaw,
|
|
||||||
mac_address: `00:1A:2B:3C:5E:${serverIndex.toString(16).toUpperCase().padStart(2, '0')}`,
|
|
||||||
hw_status: is_inactive ? '수리/대기' : '운영중',
|
|
||||||
service_type: service_type,
|
|
||||||
is_inactive: is_inactive,
|
|
||||||
cpu_usage: cpu_usage,
|
|
||||||
ram_usage: ram_usage,
|
|
||||||
network_traffic: network_traffic
|
|
||||||
};
|
|
||||||
|
|
||||||
// 스토리지로 보낼 자산들 (유형이 NAS/DAS이거나 자산명에 NAS가 들어가면)
|
|
||||||
if (typeRaw.toUpperCase().includes('NAS') || typeRaw.toUpperCase().includes('DAS') || assetUpper.includes('NAS') || assetUpper.includes('DAS')) {
|
|
||||||
assetItem.asset_code = 'STO-24' + String(storageIndex).padStart(3, '0');
|
|
||||||
assetItem.volume = hdd1Raw !== '-' ? hdd1Raw : '10TB';
|
|
||||||
parsedStorages.push(assetItem);
|
|
||||||
storageIndex++;
|
|
||||||
} else {
|
|
||||||
parsedServers.push(assetItem);
|
|
||||||
serverIndex++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------- 시트 2: 합본데이터(NAS) -----------------
|
|
||||||
const sheetNAS = workbook.Sheets['합본데이터(NAS)'];
|
|
||||||
const rawNAS = utils.sheet_to_json(sheetNAS, { header: 1 });
|
|
||||||
const rowsNAS = rawNAS.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
|
|
||||||
|
|
||||||
for (const row of rowsNAS) {
|
|
||||||
const teamRaw = cleanValue(row[0]);
|
|
||||||
const svrNoRaw = cleanValue(row[1]);
|
|
||||||
const assetNameRaw = cleanValue(row[2]);
|
|
||||||
const typeRaw = cleanValue(row[3]);
|
|
||||||
const detailRaw = cleanValue(row[4]);
|
|
||||||
const locRaw = cleanValue(row[5]);
|
|
||||||
const mgr1Raw = cleanValue(row[6]);
|
|
||||||
const mgr2Raw = cleanValue(row[7]);
|
|
||||||
const toolRaw = cleanValue(row[8]);
|
|
||||||
const ipRaw = cleanValue(row[9]);
|
|
||||||
const ip2Raw = cleanValue(row[10]);
|
|
||||||
const idRaw = cleanValue(row[11]);
|
|
||||||
const pwRaw = cleanValue(row[12]);
|
|
||||||
const osRaw = cleanValue(row[15]);
|
|
||||||
const osVerRaw = cleanValue(row[16]);
|
|
||||||
const osBuildRaw = cleanValue(row[17]);
|
|
||||||
const modelRaw = cleanValue(row[18]);
|
|
||||||
const cpuRaw = cleanValue(row[19]);
|
|
||||||
const ramRaw = cleanValue(row[20]);
|
|
||||||
const gpuRaw = cleanValue(row[21]);
|
|
||||||
const ssd1Raw = cleanValue(row[22]);
|
|
||||||
const ssd2Raw = cleanValue(row[23]);
|
|
||||||
const hdd1Raw = cleanValue(row[24]);
|
|
||||||
const hdd2Raw = cleanValue(row[25]);
|
|
||||||
const hdd3Raw = cleanValue(row[26]);
|
|
||||||
const hdd4Raw = cleanValue(row[27]);
|
|
||||||
|
|
||||||
const randomCorp = CORPS[storageIndex % CORPS.length];
|
|
||||||
|
|
||||||
// NAS는 기본적으로 내부 백업/공유용 인프라
|
|
||||||
const service_type = '내부서비스';
|
|
||||||
const is_inactive = false;
|
|
||||||
|
|
||||||
// NAS 실시간 리소스 가상 데이터
|
|
||||||
const cpu_usage = Math.floor(Math.random() * 25) + 15; // 15%~40%
|
|
||||||
const ram_usage = Math.floor(Math.random() * 35) + 30; // 30%~65%
|
|
||||||
const network_traffic = (Math.random() * 600 + 50).toFixed(0) + ' GB';
|
|
||||||
|
|
||||||
const assetItem = {
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: typeRaw !== '-' ? typeRaw : '공용 NAS',
|
|
||||||
purchase_corp: randomCorp,
|
|
||||||
asset_code: 'STO-24' + String(storageIndex).padStart(3, '0'),
|
|
||||||
purchase_date: '2022-08',
|
|
||||||
asset_purpose: detailRaw,
|
|
||||||
current_dept: teamRaw !== '-' ? teamRaw : '디자인팀',
|
|
||||||
previous_dept: '-',
|
|
||||||
location: locRaw,
|
|
||||||
manager_primary: mgr1Raw,
|
|
||||||
manager_secondary: mgr2Raw,
|
|
||||||
ip_address: ipRaw !== '-' ? ipRaw : '172.16.42.' + (100 + storageIndex),
|
|
||||||
remote_tool: toolRaw !== '-' ? toolRaw : 'Web GUI',
|
|
||||||
model_name: modelRaw !== '-' ? modelRaw : 'Synology 공용 NAS',
|
|
||||||
os: osRaw !== '-' ? `${osRaw} ${osVerRaw}` : 'DSM 7.x',
|
|
||||||
cpu: cpuRaw,
|
|
||||||
ram: ramRaw,
|
|
||||||
gpu: gpuRaw,
|
|
||||||
ssd_1: ssd1Raw,
|
|
||||||
ssd_2: ssd2Raw,
|
|
||||||
hdd_1: hdd1Raw,
|
|
||||||
hdd_2: hdd2Raw,
|
|
||||||
hdd_3: hdd3Raw,
|
|
||||||
hdd_4: hdd4Raw,
|
|
||||||
monitoring: '비대상',
|
|
||||||
purchase_amount: '4500000',
|
|
||||||
purchase_vendor: '시놀로지 총판',
|
|
||||||
approval_document: '2022_스토리지_도입_' + storageIndex,
|
|
||||||
memo: '스토리지 서버 공유 자산',
|
|
||||||
asset_name: assetNameRaw,
|
|
||||||
mac_address: `00:1A:2B:3C:5F:${storageIndex.toString(16).toUpperCase().padStart(2, '0')}`,
|
|
||||||
hw_status: '운영중',
|
|
||||||
service_type: service_type,
|
|
||||||
is_inactive: is_inactive,
|
|
||||||
volume: hdd1Raw !== '-' ? hdd1Raw : '24TB',
|
|
||||||
cpu_usage: cpu_usage,
|
|
||||||
ram_usage: ram_usage,
|
|
||||||
network_traffic: network_traffic
|
|
||||||
};
|
|
||||||
|
|
||||||
parsedStorages.push(assetItem);
|
|
||||||
storageIndex++;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(`Parsed Servers: ${parsedServers.length} units`);
|
|
||||||
console.log(`Parsed Storages: ${parsedStorages.length} units`);
|
|
||||||
|
|
||||||
// 3. 파일 다시 쓰기
|
|
||||||
const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 문자열
|
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
|
|
||||||
const randomPurchaseYM = () => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * 10);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 유틸리티: 랜덤 YYYY-MM-DD
|
|
||||||
const randomDateStr = (maxYearsAgo = 10) => {
|
|
||||||
const currentYear = new Date().getFullYear();
|
|
||||||
const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
|
|
||||||
const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
|
|
||||||
const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
|
|
||||||
return \`\${year}-\${month}-\${day}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
|
|
||||||
const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
export const dummyPCs: any[] = ${JSON.stringify(dummyPCs, null, 2)};
|
|
||||||
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등 - 엑셀 파싱 연동)
|
|
||||||
// ────────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export const dummyServers: any[] = ${JSON.stringify(parsedServers, null, 2)};
|
|
||||||
|
|
||||||
export const dummyStorages: any[] = ${JSON.stringify(parsedStorages, null, 2)};
|
|
||||||
|
|
||||||
export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '전산비품',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`네트워크 스위치 \${i+1}\`,
|
|
||||||
location: '전산실 랙 1',
|
|
||||||
manager_primary: '네트워크담당자',
|
|
||||||
ip_address: \`192.168.10.\${200 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
|
|
||||||
os: 'Cisco IOS',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
purchase_vendor: '다나와',
|
|
||||||
approval_document: \`2024_비품구매_\${i}\`,
|
|
||||||
memo: '사내망 확장용',
|
|
||||||
asset_purpose: '네트워크 분배'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '모바일기기',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
|
|
||||||
asset_name: \`테스트용 단말기 \${i+1}\`,
|
|
||||||
location: '개발2팀',
|
|
||||||
manager_primary: '테스터',
|
|
||||||
os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
|
|
||||||
purchase_date: randomPurchaseYM(),
|
|
||||||
purchase_amount: '900000',
|
|
||||||
purchase_vendor: '삼성전자/애플',
|
|
||||||
approval_document: \`2024_모바일구매_\${i}\`,
|
|
||||||
memo: '앱 호환성 테스트 전용',
|
|
||||||
asset_purpose: 'QA 테스트',
|
|
||||||
ip_address: \`192.168.1.\${10 + i}\`,
|
|
||||||
mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '구독SW',
|
|
||||||
sw_field: '업무용/협업',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '전사',
|
|
||||||
product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
|
|
||||||
purchase_date: randomDateStr(3),
|
|
||||||
start_date: randomDateStr(1),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '150000',
|
|
||||||
asset_count: 50 + i * 5,
|
|
||||||
email_account: \`admin\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '소프트웨어인라이프',
|
|
||||||
memo: '연간 계약 갱신 필요'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '영구SW',
|
|
||||||
sw_field: '디자인/설계',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '디자인팀',
|
|
||||||
product_name: \`AutoCAD 202\${i%4}\`,
|
|
||||||
purchase_date: randomDateStr(5),
|
|
||||||
start_date: randomDateStr(5),
|
|
||||||
expired_date: '2099-12-31',
|
|
||||||
purchase_amount: '3000000',
|
|
||||||
asset_count: 2,
|
|
||||||
email_account: \`design\${i}@hmcorp.com\`,
|
|
||||||
purchase_vendor: '오토데스크 파트너',
|
|
||||||
memo: 'USB 동글키 보관중'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_type: '클라우드',
|
|
||||||
asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '개발팀',
|
|
||||||
product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
|
|
||||||
email_account: \`awsadmin\${i}@hmcorp.com\`,
|
|
||||||
purchase_method: '법인카드(신한 1234)',
|
|
||||||
purchase_amount: \`\${500000 + i * 100000}\`,
|
|
||||||
asset_count: 1,
|
|
||||||
purchase_vendor: 'AWS/GCP',
|
|
||||||
memo: '환율 변동에 따라 매월 상이함'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
asset_type: '도메인',
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
product_name: \`사내 운영 서비스 \${i+1}\`,
|
|
||||||
domain_address: \`service\${i+1}.hmcorp.com\`,
|
|
||||||
start_date: randomDateStr(4),
|
|
||||||
expired_date: randomDateStr(0),
|
|
||||||
purchase_amount: '22000',
|
|
||||||
manager_primary: '인프라팀장',
|
|
||||||
manager_secondary: '인프라담당자',
|
|
||||||
memo: '가비아 자동갱신 설정 완료'
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
sw_id: dummySubSw[0]?.id || randomId(),
|
|
||||||
purchase_corp: getRandomCorp(),
|
|
||||||
current_dept: '경영지원팀',
|
|
||||||
user_current: \`홍길동\${i}\`,
|
|
||||||
memo: \`SW신청서_2400\${i}\`
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
|
||||||
id: randomId(),
|
|
||||||
assetId: dummyPCs[0]?.id || randomId(),
|
|
||||||
date: randomDateStr(1),
|
|
||||||
details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
|
|
||||||
user: 'IT지원팀',
|
|
||||||
cost: i % 2 === 0 ? 80000 : 150000,
|
|
||||||
}));
|
|
||||||
`;
|
|
||||||
|
|
||||||
fs.writeFileSync(dummyDataPath, newDummyDataFileContent, 'utf-8');
|
|
||||||
console.log('✅ dummyData.ts file updated successfully with SVR dataset.');
|
|
||||||
} catch (e) {
|
|
||||||
console.error('❌ Failed to update dummy data:', e);
|
|
||||||
}
|
|
||||||
39
server.js
39
server.js
@@ -675,16 +675,41 @@ app.delete('/api/system-users/:id', async (req, res) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.post('/api/maps/save', (req, res) => {
|
app.post('/api/maps/save', async (req, res) => {
|
||||||
|
let connection;
|
||||||
try {
|
try {
|
||||||
const { path, boxes } = req.body;
|
const { path, boxes } = req.body;
|
||||||
if (!path) return res.status(400).json({ error: 'Path is required' });
|
if (!path) return res.status(400).json({ error: 'Path is required' });
|
||||||
let config = {};
|
|
||||||
if (fs.existsSync('map_config.json')) config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
|
// 1. Get old config to track movements
|
||||||
config[path] = boxes;
|
let oldConfig = {};
|
||||||
fs.writeFileSync('map_config.json', JSON.stringify(config, null, 2));
|
if (fs.existsSync('map_config.json')) {
|
||||||
res.json({ success: true });
|
oldConfig = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
|
||||||
} catch (err) { handleError(res, err, 'SAVE MAPS'); }
|
}
|
||||||
|
const oldBoxes = oldConfig[path] || [];
|
||||||
|
|
||||||
|
// 2. Save new config to file
|
||||||
|
oldConfig[path] = boxes;
|
||||||
|
fs.writeFileSync('map_config.json', JSON.stringify(oldConfig, null, 2));
|
||||||
|
|
||||||
|
// 3. Sync Database Assets (asset_location table)
|
||||||
|
connection = await pool.getConnection();
|
||||||
|
for (const box of boxes) {
|
||||||
|
if (box.asset_id) {
|
||||||
|
console.log(`Syncing asset ${box.asset_id} to new position: [${box.x}, ${box.y}]`);
|
||||||
|
await connection.query(
|
||||||
|
'UPDATE asset_location SET loc_x = ?, loc_y = ? WHERE asset_id = ? AND is_active = 1',
|
||||||
|
[box.x, box.y, box.asset_id]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ success: true, message: 'Map and Database synced successfully' });
|
||||||
|
} catch (err) {
|
||||||
|
handleError(res, err, 'SAVE MAPS SYNC');
|
||||||
|
} finally {
|
||||||
|
if (connection) connection.release();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 7. File Upload API (Base64)
|
// 7. File Upload API (Base64)
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ export abstract class BaseModal {
|
|||||||
protected title: string;
|
protected title: string;
|
||||||
protected currentAsset: any | null = null;
|
protected currentAsset: any | null = null;
|
||||||
protected isEditMode: boolean = false;
|
protected isEditMode: boolean = false;
|
||||||
|
protected currentMode: 'view' | 'edit' | 'add' = 'view';
|
||||||
protected modalEl: HTMLElement | null = null;
|
protected modalEl: HTMLElement | null = null;
|
||||||
protected formEl: HTMLFormElement | null = null;
|
protected formEl: HTMLFormElement | null = null;
|
||||||
|
|
||||||
@@ -53,16 +54,23 @@ export abstract class BaseModal {
|
|||||||
*/
|
*/
|
||||||
public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
||||||
this.currentAsset = asset;
|
this.currentAsset = asset;
|
||||||
|
this.currentMode = mode;
|
||||||
this.isEditMode = (mode === 'add' || mode === 'edit');
|
this.isEditMode = (mode === 'add' || mode === 'edit');
|
||||||
|
|
||||||
// 폼 초기화 추가
|
// 폼 초기화 추가
|
||||||
if (this.formEl) this.formEl.reset();
|
if (this.formEl) this.formEl.reset();
|
||||||
|
|
||||||
this.setEditLockMode(mode);
|
// fillFormData를 먼저 호출하여 동적 요소들을 생성한 후 잠금 처리
|
||||||
this.fillFormData(asset);
|
this.fillFormData(asset);
|
||||||
|
this.setEditLockMode(mode);
|
||||||
|
|
||||||
if (this.modalEl) {
|
if (this.modalEl) {
|
||||||
this.modalEl.classList.remove('hidden');
|
this.modalEl.classList.remove('hidden');
|
||||||
|
const content = this.modalEl.querySelector('.modal-content');
|
||||||
|
if (content) {
|
||||||
|
if (mode === 'view') content.classList.add('is-view-mode');
|
||||||
|
else content.classList.remove('is-view-mode');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.onAfterOpen(asset, mode);
|
this.onAfterOpen(asset, mode);
|
||||||
@@ -111,9 +119,16 @@ export function closeModals() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function initBaseModal() {
|
export function initBaseModal() {
|
||||||
// ESC 키로 모든 모달 닫기
|
// ESC 키로 모든 모달 닫기 (위치보기 팝업이 있으면 그것부터 닫음)
|
||||||
window.addEventListener('keydown', (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
if (e.key === 'Escape') closeModals();
|
if (e.key === 'Escape') {
|
||||||
|
const picker = document.querySelector('.image-picker-overlay');
|
||||||
|
if (picker) {
|
||||||
|
picker.remove();
|
||||||
|
} else {
|
||||||
|
closeModals();
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return { closeAllModals: closeModals };
|
return { closeAllModals: closeModals };
|
||||||
|
|||||||
@@ -4,14 +4,14 @@ import { createIcons, X } from 'lucide';
|
|||||||
|
|
||||||
const DASHBOARD_DETAIL_MODAL_HTML = `
|
const DASHBOARD_DETAIL_MODAL_HTML = `
|
||||||
<div id="dashboard-detail-modal" class="modal-overlay hidden">
|
<div id="dashboard-detail-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide" style="max-width: 1000px;">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="dashboard-detail-modal-title">상세 목록</h2>
|
<h2 id="dashboard-detail-modal-title" class="modal-title">상세 목록</h2>
|
||||||
<button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<table style="width:100%;">
|
<table>
|
||||||
<thead></thead>
|
<thead></thead>
|
||||||
<tbody id="dashboard-detail-tbody"></tbody>
|
<tbody id="dashboard-detail-tbody"></tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { state, saveAsset, deleteAsset } from '../../core/state';
|
|||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { CORP_LIST } from './SharedData';
|
import { CORP_LIST } from './SharedData';
|
||||||
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
||||||
import { createIcons, X, Save, Database, CalendarClock, Edit2, History, Plus } from 'lucide';
|
import { createIcons, X, Save, History, Plus } from 'lucide';
|
||||||
import { formatExcelDate } from '../../core/excelHandler';
|
import { formatExcelDate } from '../../core/excelHandler';
|
||||||
import { UI_TEXT } from '../../core/schema';
|
import { UI_TEXT } from '../../core/schema';
|
||||||
|
|
||||||
@@ -16,15 +16,18 @@ class DomainAssetModal extends BaseModal {
|
|||||||
<div id="domain-asset-modal" class="modal-overlay hidden">
|
<div id="domain-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="domain-modal-title">${this.title}</h2>
|
<div class="header-left">
|
||||||
<button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<h2 id="domain-modal-title" class="modal-title">${this.title}</h2>
|
||||||
|
<div id="domain-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-body-split">
|
<div class="modal-body-split">
|
||||||
<div class="modal-form-area">
|
<div class="modal-form-area">
|
||||||
<form id="domain-asset-form" class="grid-form">
|
<form id="domain-asset-form" class="grid-form">
|
||||||
<input type="hidden" id="domain-id" name="id" />
|
<input type="hidden" id="domain-id" name="id" />
|
||||||
|
|
||||||
<div class="form-section-title">기본 정보</div>
|
<div class="form-section-title">기본 정보</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>구분</label>
|
<label>구분</label>
|
||||||
@@ -58,7 +61,7 @@ class DomainAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>비용 (연간/월간)</label>
|
<label>비용 (연간/월간)</label>
|
||||||
<input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
|
<input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-section-title">담당자 및 비고</div>
|
<div class="form-section-title">담당자 및 비고</div>
|
||||||
@@ -78,9 +81,9 @@ class DomainAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal-history-area">
|
<div class="modal-history-area">
|
||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 변경 이력</h3>
|
<h3><i data-lucide="history"></i> 변경 이력</h3>
|
||||||
<button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
|
<button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
|
||||||
이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
|
이력 추가 <i data-lucide="plus"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="domain-history-list" class="history-timeline"></div>
|
<div id="domain-history-list" class="history-timeline"></div>
|
||||||
@@ -141,7 +144,7 @@ class DomainAssetModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
createIcons({ icons: { History, Plus, Save, CalendarClock, Database } });
|
createIcons({ icons: { History, Plus, Save, X } });
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
@@ -158,31 +161,52 @@ class DomainAssetModal extends BaseModal {
|
|||||||
setFieldValue('domain-remarks', asset.remarks || '');
|
setFieldValue('domain-remarks', asset.remarks || '');
|
||||||
|
|
||||||
this.renderHistory(asset.id);
|
this.renderHistory(asset.id);
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
const titleEl = document.getElementById('domain-modal-title');
|
const titleEl = document.getElementById('domain-modal-title');
|
||||||
if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
|
if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
|
||||||
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-domain-asset');
|
const deleteBtn = document.getElementById('btn-delete-domain-asset');
|
||||||
if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('domain-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = getFieldValue('domain-type') || asset.type || '';
|
||||||
|
const serviceName = getFieldValue('domain-service-name') || asset.service_name || '';
|
||||||
|
const domainName = getFieldValue('domain-name') || asset.domain_name || '';
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${serviceName}</span>
|
||||||
|
<span class="service-type-badge">${type}</span>
|
||||||
|
<span class="asset-type-label">${domainName}</span>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderHistory(assetId: string) {
|
private renderHistory(assetId: string) {
|
||||||
const container = document.getElementById('domain-history-list');
|
const container = document.getElementById('domain-history-list');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
|
|
||||||
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
|
const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
|
||||||
container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
|
if (logs.length === 0) {
|
||||||
|
container.innerHTML = '<div style="color:var(--mute); padding:1rem; text-align:center;">이력이 없습니다.</div>';
|
||||||
|
} else {
|
||||||
|
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const domainModal = new DomainAssetModal();
|
export const domainModal = new DomainAssetModal();
|
||||||
|
export function initDomainModal(onSave: () => void, closeModals: () => void) { domainModal.init(onSave, closeModals); }
|
||||||
export function initDomainModal(onSave: () => void, closeModals: () => void) {
|
export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { domainModal.open(asset, mode); }
|
||||||
domainModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
||||||
domainModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -10,97 +10,94 @@ class JobSpecModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected renderFrameHTML(): string {
|
protected renderFrameHTML(): string {
|
||||||
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
|
||||||
const inputStyle = sharedStyle;
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div id="job-spec-asset-modal" class="modal-overlay hidden">
|
<div id="job-spec-asset-modal" class="modal-overlay hidden">
|
||||||
<style>
|
<div class="modal-content narrow">
|
||||||
.autocomplete-list {
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
max-height: 150px;
|
|
||||||
overflow-y: auto;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid var(--border-color, #E2E8F0);
|
|
||||||
border-top: none;
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.autocomplete-item {
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #334155;
|
|
||||||
cursor: pointer;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.autocomplete-item:hover {
|
|
||||||
background-color: #F1F5F9;
|
|
||||||
color: #1E5149;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="modal-content" style="max-width: 500px; width: 100%;">
|
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
|
<div class="header-left">
|
||||||
<button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
<h2 id="job-spec-modal-title" class="modal-title">\${this.title}</h2>
|
||||||
|
<div id="job-spec-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
<div class="modal-body">
|
||||||
<form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
|
<form id="job-spec-asset-form" class="grid-form vertical-form">
|
||||||
<input type="hidden" id="job-spec-id" name="id" />
|
<input type="hidden" id="job-spec-id" name="id" />
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
|
<label>직무명</label>
|
||||||
<input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
<div class="form-group relative">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
|
<label>권장 CPU 사양</label>
|
||||||
<input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
<input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required autocomplete="off" />
|
||||||
<div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
|
<div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
<div class="form-group relative">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
|
<label>권장 RAM 사양</label>
|
||||||
<input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
<input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required autocomplete="off" />
|
||||||
<div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
|
<div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
|
<div class="form-group relative">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
|
<label>권장 GPU 사양</label>
|
||||||
<input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
|
<input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required autocomplete="off" />
|
||||||
<div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
|
<div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
|
<label>성능 기준 점수 (이상, 자동 계산됨)</label>
|
||||||
<input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
|
<input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required readonly />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
|
<label>비고 (메모)</label>
|
||||||
<textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
|
<textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
|
<div class="modal-footer">
|
||||||
<button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
<button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
<div class="footer-actions" style="display: flex; gap: 8px;">
|
<div class="footer-actions">
|
||||||
<button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
<button id="btn-revert-job-spec-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
<button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
<button id="btn-cancel-job-spec-modal" class="btn btn-outline">닫기</button>
|
||||||
<button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
|
<button id="btn-save-job-spec-asset" class="btn btn-primary">수정</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.autocomplete-list {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
max-height: 150px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid var(--border-color, #E2E8F0);
|
||||||
|
border-top: none;
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.autocomplete-item {
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #334155;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.autocomplete-item:hover {
|
||||||
|
background-color: #F1F5F9;
|
||||||
|
color: #1E5149;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -239,6 +236,7 @@ class JobSpecModal extends BaseModal {
|
|||||||
setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
|
setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
|
||||||
setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
|
setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
|
||||||
setFieldValue('job-spec-remarks', asset.remarks || '');
|
setFieldValue('job-spec-remarks', asset.remarks || '');
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
@@ -257,19 +255,32 @@ class JobSpecModal extends BaseModal {
|
|||||||
|
|
||||||
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
if (mode === 'add') {
|
if (mode === 'add' || mode === 'edit') {
|
||||||
this.setEditLockMode('edit');
|
saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
|
||||||
this.isEditMode = true;
|
|
||||||
saveBtn.textContent = '등록';
|
|
||||||
saveBtn.style.display = 'block';
|
saveBtn.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
this.setEditLockMode('view');
|
|
||||||
this.isEditMode = false;
|
|
||||||
saveBtn.textContent = '수정';
|
saveBtn.textContent = '수정';
|
||||||
saveBtn.style.display = 'block';
|
saveBtn.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('job-spec-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
this.updateMinScore();
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const jobName = asset.job_name || '';
|
||||||
|
const minScore = asset.min_score || 0;
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${jobName}</span>
|
||||||
|
<span class="service-type-badge">${minScore}점 기준</span>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -110,29 +110,45 @@ export function setEditLock(
|
|||||||
const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
|
const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
|
||||||
const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
|
const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;
|
||||||
|
|
||||||
if (!form || !saveBtn || !revertBtn) return;
|
if (!form) return;
|
||||||
|
|
||||||
if (mode === 'add' || mode === 'edit') {
|
const isEdit = (mode === 'add' || mode === 'edit');
|
||||||
|
|
||||||
|
if (isEdit) {
|
||||||
// 편집 모드 활성화
|
// 편집 모드 활성화
|
||||||
form.classList.remove('is-view-mode');
|
form.classList.remove('is-view-mode');
|
||||||
form.classList.add('is-edit-mode');
|
form.classList.add('is-edit-mode');
|
||||||
saveBtn.textContent = '저장';
|
if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
|
||||||
revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
|
if (revertBtn) revertBtn.classList.toggle('hidden', mode === 'add');
|
||||||
|
|
||||||
// 번호 생성 버튼은 '추가(add)' 시에만 노출
|
// 모든 필드 활성화
|
||||||
if (generateBtn) {
|
const inputs = form.querySelectorAll('input, select, textarea');
|
||||||
generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
|
inputs.forEach(input => {
|
||||||
}
|
const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
||||||
// 내역 추가 버튼 노출
|
// 자산번호 및 ID 필드는 편집 모드에서도 잠금 유지
|
||||||
|
if (el.name !== 'asset_code' && !el.id.includes('asset-id') && !el.id.includes('id-hidden')) {
|
||||||
|
el.disabled = false;
|
||||||
|
if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (generateBtn) generateBtn.style.display = (mode === 'add' ? 'flex' : 'none');
|
||||||
if (addLogBtn) addLogBtn.style.display = 'flex';
|
if (addLogBtn) addLogBtn.style.display = 'flex';
|
||||||
} else {
|
} else {
|
||||||
// 조회 모드 (잠금)
|
// 조회 모드 (잠금)
|
||||||
form.classList.remove('is-edit-mode');
|
form.classList.remove('is-edit-mode');
|
||||||
form.classList.add('is-view-mode');
|
form.classList.add('is-view-mode');
|
||||||
saveBtn.textContent = '수정';
|
if (saveBtn) saveBtn.textContent = '수정';
|
||||||
revertBtn.classList.add('hidden');
|
if (revertBtn) revertBtn.classList.add('hidden');
|
||||||
|
|
||||||
// 조회 모드에서는 버튼들 숨김
|
// 모든 필드 잠금
|
||||||
|
const inputs = form.querySelectorAll('input, select, textarea');
|
||||||
|
inputs.forEach(input => {
|
||||||
|
const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
||||||
|
el.disabled = true;
|
||||||
|
if ('readOnly' in el) (el as HTMLInputElement).readOnly = true;
|
||||||
|
});
|
||||||
|
|
||||||
if (generateBtn) generateBtn.style.display = 'none';
|
if (generateBtn) generateBtn.style.display = 'none';
|
||||||
if (addLogBtn) addLogBtn.style.display = 'none';
|
if (addLogBtn) addLogBtn.style.display = 'none';
|
||||||
}
|
}
|
||||||
@@ -169,9 +185,9 @@ export function createModalFrameHTML(
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal-history-area">
|
<div class="modal-history-area">
|
||||||
<div class="history-header">
|
<div class="history-header">
|
||||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> ${options.historyTitle}</h3>
|
<h3><i data-lucide="history" class="icon-sm"></i> ${options.historyTitle}</h3>
|
||||||
<button type="button" id="${options.addLogBtnId}" class="btn btn-outline btn-sm">
|
<button type="button" id="btn-add-${idPrefix}-log" class="btn btn-outline btn-sm">
|
||||||
내역 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
|
내역 추가 <i data-lucide="plus" class="icon-sm"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="${idPrefix}-history-list" class="history-timeline"></div>
|
<div id="${idPrefix}-history-list" class="history-timeline"></div>
|
||||||
|
|||||||
@@ -4,10 +4,10 @@ import { API_BASE_URL } from '../../core/utils';
|
|||||||
|
|
||||||
export class PCFlowModal {
|
export class PCFlowModal {
|
||||||
private static instance: PCFlowModal | null = null;
|
private static instance: PCFlowModal | null = null;
|
||||||
|
|
||||||
private modalEl: HTMLElement | null = null;
|
private modalEl: HTMLElement | null = null;
|
||||||
private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
|
private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
|
||||||
|
|
||||||
// Selected state
|
// Selected state
|
||||||
private selectedUser: any = null;
|
private selectedUser: any = null;
|
||||||
private selectedTargetUser: any = null;
|
private selectedTargetUser: any = null;
|
||||||
@@ -30,7 +30,7 @@ export class PCFlowModal {
|
|||||||
|
|
||||||
this.modalEl = document.getElementById('pc-flow-modal');
|
this.modalEl = document.getElementById('pc-flow-modal');
|
||||||
this.setupEventListeners(onSave);
|
this.setupEventListeners(onSave);
|
||||||
|
|
||||||
// Set default date to today
|
// Set default date to today
|
||||||
const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
|
const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
|
||||||
if (dateInput) {
|
if (dateInput) {
|
||||||
@@ -59,14 +59,19 @@ export class PCFlowModal {
|
|||||||
this.selectedTargetUser = null;
|
this.selectedTargetUser = null;
|
||||||
this.selectedPC = null;
|
this.selectedPC = null;
|
||||||
this.currentFlowType = 'checkout';
|
this.currentFlowType = 'checkout';
|
||||||
|
|
||||||
const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
|
const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
|
||||||
if (radioCheckout) radioCheckout.checked = true;
|
if (radioCheckout) {
|
||||||
|
radioCheckout.checked = true;
|
||||||
|
document.querySelectorAll('.flow-type-label').forEach(l => {
|
||||||
|
l.classList.toggle('active', l.contains(radioCheckout));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Reset text fields
|
// Reset text fields
|
||||||
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
||||||
if (userSearch) userSearch.value = '';
|
if (userSearch) userSearch.value = '';
|
||||||
|
|
||||||
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
||||||
if (targetUserSearch) targetUserSearch.value = '';
|
if (targetUserSearch) targetUserSearch.value = '';
|
||||||
|
|
||||||
@@ -94,7 +99,7 @@ export class PCFlowModal {
|
|||||||
label.classList.add('active');
|
label.classList.add('active');
|
||||||
radio.checked = true;
|
radio.checked = true;
|
||||||
this.currentFlowType = radio.value as any;
|
this.currentFlowType = radio.value as any;
|
||||||
|
|
||||||
// Reset selected PC when switching flow types
|
// Reset selected PC when switching flow types
|
||||||
this.selectedPC = null;
|
this.selectedPC = null;
|
||||||
this.updateUI();
|
this.updateUI();
|
||||||
@@ -104,16 +109,16 @@ export class PCFlowModal {
|
|||||||
// 1. Source User Autocomplete Search
|
// 1. Source User Autocomplete Search
|
||||||
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
|
||||||
const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
|
const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
|
||||||
|
|
||||||
userSearch?.addEventListener('input', () => {
|
userSearch?.addEventListener('input', () => {
|
||||||
const query = userSearch.value.trim().toLowerCase();
|
const query = userSearch.value.trim().toLowerCase();
|
||||||
if (!query) {
|
if (!query) {
|
||||||
userSuggestions.classList.add('hidden');
|
userSuggestions.classList.add('hidden');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const users = state.masterData.users || [];
|
const users = state.masterData.users || [];
|
||||||
const filtered = users.filter((u: any) =>
|
const filtered = users.filter((u: any) =>
|
||||||
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
||||||
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
||||||
(u.emp_no && u.emp_no.toString().includes(query))
|
(u.emp_no && u.emp_no.toString().includes(query))
|
||||||
@@ -133,7 +138,7 @@ export class PCFlowModal {
|
|||||||
this.selectedUser = user;
|
this.selectedUser = user;
|
||||||
userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
|
userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
|
||||||
userSuggestions.classList.add('hidden');
|
userSuggestions.classList.add('hidden');
|
||||||
|
|
||||||
// Automatically populate details if return or move
|
// Automatically populate details if return or move
|
||||||
if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
|
if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
|
||||||
this.selectedPC = null; // Reset selection
|
this.selectedPC = null; // Reset selection
|
||||||
@@ -161,16 +166,16 @@ export class PCFlowModal {
|
|||||||
// 2. Target User Autocomplete Search (For Moves)
|
// 2. Target User Autocomplete Search (For Moves)
|
||||||
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
|
||||||
const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
|
const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
|
||||||
|
|
||||||
targetUserSearch?.addEventListener('input', () => {
|
targetUserSearch?.addEventListener('input', () => {
|
||||||
const query = targetUserSearch.value.trim().toLowerCase();
|
const query = targetUserSearch.value.trim().toLowerCase();
|
||||||
if (!query) {
|
if (!query) {
|
||||||
targetSuggestions.classList.add('hidden');
|
targetSuggestions.classList.add('hidden');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const users = state.masterData.users || [];
|
const users = state.masterData.users || [];
|
||||||
const filtered = users.filter((u: any) =>
|
const filtered = users.filter((u: any) =>
|
||||||
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
(u.user_name && u.user_name.toLowerCase().includes(query)) ||
|
||||||
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
(u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
|
||||||
(u.emp_no && u.emp_no.toString().includes(query))
|
(u.emp_no && u.emp_no.toString().includes(query))
|
||||||
@@ -197,7 +202,7 @@ export class PCFlowModal {
|
|||||||
// 3. Stock PC Autocomplete Search (For Checkout)
|
// 3. Stock PC Autocomplete Search (For Checkout)
|
||||||
const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
|
const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
|
||||||
const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
|
const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
|
||||||
|
|
||||||
const showStockSuggestions = () => {
|
const showStockSuggestions = () => {
|
||||||
const query = stockSearch.value.trim().toLowerCase();
|
const query = stockSearch.value.trim().toLowerCase();
|
||||||
|
|
||||||
@@ -205,11 +210,11 @@ export class PCFlowModal {
|
|||||||
const pcs = state.masterData.pc || [];
|
const pcs = state.masterData.pc || [];
|
||||||
const filtered = pcs.filter((p: any) => {
|
const filtered = pcs.filter((p: any) => {
|
||||||
const status = (p.hw_status || '').trim();
|
const status = (p.hw_status || '').trim();
|
||||||
const matchesQuery = !query ||
|
const matchesQuery = !query ||
|
||||||
(p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
|
(p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
|
||||||
(p.model_name && p.model_name.toLowerCase().includes(query)) ||
|
(p.model_name && p.model_name.toLowerCase().includes(query)) ||
|
||||||
(p.cpu && p.cpu.toLowerCase().includes(query));
|
(p.cpu && p.cpu.toLowerCase().includes(query));
|
||||||
|
|
||||||
return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
|
return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -309,21 +314,17 @@ export class PCFlowModal {
|
|||||||
private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
|
private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
if (users.length === 0) {
|
if (users.length === 0) {
|
||||||
container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">일치하는 사원이 없습니다.</div>';
|
container.innerHTML = '<div class="autocomplete-item-empty">일치하는 사원이 없습니다.</div>';
|
||||||
container.classList.remove('hidden');
|
container.classList.remove('hidden');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
users.forEach(u => {
|
users.forEach(u => {
|
||||||
const item = document.createElement('div');
|
const item = document.createElement('div');
|
||||||
item.style.padding = '8px 12px';
|
item.className = 'autocomplete-item';
|
||||||
item.style.cursor = 'pointer';
|
|
||||||
item.style.fontSize = '13px';
|
|
||||||
item.style.borderBottom = '1px solid #F3F4F6';
|
|
||||||
item.className = 'suggestion-item';
|
|
||||||
item.innerHTML = `
|
item.innerHTML = `
|
||||||
<div style="font-weight: 700; color: var(--text-main);">${u.user_name}</div>
|
<div class="suggestion-name">${u.user_name}</div>
|
||||||
<div style="font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;">
|
<div class="suggestion-meta">
|
||||||
<span>부서: ${u.dept_name}</span>
|
<span>부서: ${u.dept_name}</span>
|
||||||
<span>|</span>
|
<span>|</span>
|
||||||
<span>사번: ${u.emp_no || '-'}</span>
|
<span>사번: ${u.emp_no || '-'}</span>
|
||||||
@@ -338,21 +339,17 @@ export class PCFlowModal {
|
|||||||
private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
|
private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
if (pcs.length === 0) {
|
if (pcs.length === 0) {
|
||||||
container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">불출 가능한 대기 PC 재고가 없습니다.</div>';
|
container.innerHTML = '<div class="autocomplete-item-empty">불출 가능한 대기 PC 재고가 없습니다.</div>';
|
||||||
container.classList.remove('hidden');
|
container.classList.remove('hidden');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
pcs.forEach(p => {
|
pcs.forEach(p => {
|
||||||
const item = document.createElement('div');
|
const item = document.createElement('div');
|
||||||
item.style.padding = '8px 12px';
|
item.className = 'autocomplete-item';
|
||||||
item.style.cursor = 'pointer';
|
|
||||||
item.style.fontSize = '13px';
|
|
||||||
item.style.borderBottom = '1px solid #F3F4F6';
|
|
||||||
item.className = 'suggestion-item';
|
|
||||||
item.innerHTML = `
|
item.innerHTML = `
|
||||||
<div style="font-weight: 700; color: var(--primary-color);">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
|
<div class="suggestion-name">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
|
||||||
<div style="font-size: 11px; color: var(--text-muted);">
|
<div class="suggestion-meta">
|
||||||
사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
|
사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@@ -427,20 +424,20 @@ export class PCFlowModal {
|
|||||||
const userPcsList = document.getElementById('user-pcs-list')!;
|
const userPcsList = document.getElementById('user-pcs-list')!;
|
||||||
if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
|
if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
|
||||||
const allPcs = state.masterData.pc || [];
|
const allPcs = state.masterData.pc || [];
|
||||||
const userPcs = allPcs.filter((p: any) =>
|
const userPcs = allPcs.filter((p: any) =>
|
||||||
(p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
|
(p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
|
||||||
(p.user_current && p.user_current === this.selectedUser.user_name)
|
(p.user_current && p.user_current === this.selectedUser.user_name)
|
||||||
);
|
);
|
||||||
|
|
||||||
if (userPcs.length === 0) {
|
if (userPcs.length === 0) {
|
||||||
userPcsList.innerHTML = '<div style="font-size: 12px; color: var(--text-muted); padding: 8px 0;">이 사용자가 소유한 PC 자산이 없습니다.</div>';
|
userPcsList.innerHTML = '<div class="empty-list-message">이 사용자가 소유한 PC 자산이 없습니다.</div>';
|
||||||
} else {
|
} else {
|
||||||
userPcsList.innerHTML = userPcs.map(p => {
|
userPcsList.innerHTML = userPcs.map(p => {
|
||||||
const isSelected = this.selectedPC && this.selectedPC.id === p.id;
|
const isSelected = this.selectedPC && this.selectedPC.id === p.id;
|
||||||
return `
|
return `
|
||||||
<div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}" style="padding: 10px; border: 1px solid ${isSelected ? 'var(--primary-color)' : 'var(--border-color)'}; border-radius: 4px; cursor: pointer; background: ${isSelected ? 'var(--primary-light)' : 'white'}; transition: all 0.2s;">
|
<div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}">
|
||||||
<div style="font-weight: 700; font-size: 13px; color: ${isSelected ? 'var(--primary-color)' : 'var(--text-main)'};">${p.asset_code}</div>
|
<div class="pc-item-code">${p.asset_code}</div>
|
||||||
<div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
|
<div class="pc-item-meta">
|
||||||
${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
|
${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -465,159 +462,132 @@ export class PCFlowModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private renderHTML(): string {
|
private renderHTML(): string {
|
||||||
const overlayStyle = `
|
|
||||||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
|
|
||||||
z-index: 1000; transition: opacity 0.3s;
|
|
||||||
`;
|
|
||||||
const contentStyle = `
|
|
||||||
background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
||||||
overflow: hidden; max-height: 90vh; width: 950px; display: flex; flex-direction: column;
|
|
||||||
`;
|
|
||||||
const labelStyle = 'display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;';
|
|
||||||
const inputStyle = 'width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
|
|
||||||
const inputWithIconStyle = 'width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div id="pc-flow-modal" class="modal-overlay hidden" style="${overlayStyle}">
|
<div id="pc-flow-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content" style="${contentStyle}">
|
<div class="modal-content wide">
|
||||||
|
<div class="modal-header">
|
||||||
<div class="modal-header" style="background: var(--primary-color); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color);">
|
<h2 class="modal-title">
|
||||||
<h2 style="margin: 0; font-size: 18px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px;">
|
|
||||||
<i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
|
<i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
|
||||||
</h2>
|
</h2>
|
||||||
<button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
<button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body" style="padding: 24px; overflow-y: auto; display: flex; gap: 24px;">
|
<div class="modal-body">
|
||||||
<!-- 왼쪽 영역: 입력 폼 -->
|
<div class="modal-body-split">
|
||||||
<div style="flex: 1.2; display: flex; flex-direction: column; gap: 20px;">
|
<!-- 왼쪽 영역: 입력 폼 -->
|
||||||
|
<div class="modal-form-area">
|
||||||
<!-- 1. 처리 유형 -->
|
<div class="grid-form flex-col">
|
||||||
<div>
|
|
||||||
<label style="${labelStyle}">1. 처리 유형 선택</label>
|
<!-- 1. 처리 유형 -->
|
||||||
<div style="display: flex; gap: 12px;">
|
<div class="form-group">
|
||||||
<label class="flow-type-label active" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
|
<label>1. 처리 유형 선택</label>
|
||||||
<input type="radio" name="flow-type" value="checkout" checked style="display:none;" />
|
<div class="view-toggle w-full flex-row">
|
||||||
불출 (지급)
|
<label class="flow-type-label toggle-btn active flex-1 text-center">
|
||||||
</label>
|
<input type="radio" name="flow-type" value="checkout" checked class="hidden" />
|
||||||
<label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
|
불출 (지급)
|
||||||
<input type="radio" name="flow-type" value="return" style="display:none;" />
|
</label>
|
||||||
입고 (반납)
|
<label class="flow-type-label toggle-btn flex-1 text-center">
|
||||||
</label>
|
<input type="radio" name="flow-type" value="return" class="hidden" />
|
||||||
<label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
|
입고 (반납)
|
||||||
<input type="radio" name="flow-type" value="move" style="display:none;" />
|
</label>
|
||||||
이동 (이관)
|
<label class="flow-type-label toggle-btn flex-1 text-center">
|
||||||
</label>
|
<input type="radio" name="flow-type" value="move" class="hidden" />
|
||||||
|
이동 (이관)
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. 대상 사용자 검색 -->
|
||||||
|
<div class="form-group relative">
|
||||||
|
<label id="user-search-label">2. 대상 사원 검색</label>
|
||||||
|
<div class="input-with-icon">
|
||||||
|
<input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." />
|
||||||
|
<i data-lucide="search" class="icon-sm"></i>
|
||||||
|
</div>
|
||||||
|
<div id="pc-flow-user-suggestions" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3. 새 인수자 검색 (이동 시 노출) -->
|
||||||
|
<div id="target-user-search-container" class="form-group hidden relative">
|
||||||
|
<label>새 인수 사원 검색</label>
|
||||||
|
<div class="input-with-icon">
|
||||||
|
<input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." />
|
||||||
|
<i data-lucide="search" class="icon-sm"></i>
|
||||||
|
</div>
|
||||||
|
<div id="pc-flow-target-user-suggestions" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4. 재고 PC 검색 (불출 시 노출) -->
|
||||||
|
<div id="stock-pc-search-container" class="form-group relative">
|
||||||
|
<label>3. 불출할 재고 PC 선택</label>
|
||||||
|
<div class="input-with-icon">
|
||||||
|
<input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." />
|
||||||
|
<i data-lucide="monitor" class="icon-sm"></i>
|
||||||
|
</div>
|
||||||
|
<div id="pc-flow-stock-suggestions" class="autocomplete-list hidden"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 5. 상세 공통 입력 -->
|
||||||
|
<div class="detail-grid-2col">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>처리 일자</label>
|
||||||
|
<input type="date" id="pc-flow-date" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>상세 사유</label>
|
||||||
|
<textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다."></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2. 대상 사용자 검색 -->
|
<!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
|
||||||
<div style="position: relative;">
|
<div class="modal-history-area">
|
||||||
<label id="user-search-label" style="${labelStyle}">2. 대상 사원 검색</label>
|
<div class="history-header">
|
||||||
<div style="position: relative; display: flex; align-items: center;">
|
<h3>선택 내역 요약</h3>
|
||||||
<input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
|
|
||||||
<i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="pc-flow-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 3. 새 인수자 검색 (이동 시 노출) -->
|
<div class="dynamic-row-container">
|
||||||
<div id="target-user-search-container" class="hidden" style="position: relative;">
|
<!-- 사원 요약 카드 -->
|
||||||
<label style="${labelStyle}">새 인수 사원 검색</label>
|
<div id="summary-user-card" class="summary-info-card">
|
||||||
<div style="position: relative; display: flex; align-items: center;">
|
<div class="detail-label-sm">대상 사원</div>
|
||||||
<input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
|
<div id="summary-user-name" class="detail-value-lg">선택된 사원 없음</div>
|
||||||
<i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
|
<div id="summary-user-dept" class="detail-label-sm">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 인수 사원 요약 카드 (이동 전용) -->
|
||||||
|
<div id="summary-target-user-card" class="summary-info-card hidden bg-primary-light">
|
||||||
|
<div class="detail-label-sm">새 인수 사원</div>
|
||||||
|
<div id="summary-target-user-name" class="detail-value-lg">선택된 사원 없음</div>
|
||||||
|
<div id="summary-target-user-dept" class="detail-label-sm">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 대상 PC 자산 요약 카드 -->
|
||||||
|
<div id="summary-pc-card" class="summary-info-card">
|
||||||
|
<div class="detail-label-sm">대상 PC 자산</div>
|
||||||
|
<div id="summary-pc-code" class="detail-value-lg text-success">선택된 PC 없음</div>
|
||||||
|
<div id="summary-pc-model" class="detail-label-sm">-</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
|
||||||
|
<div id="user-pcs-container" class="form-group hidden">
|
||||||
|
<label>사원 보유 PC 선택 (클릭하여 매핑)</label>
|
||||||
|
<div id="user-pcs-list" class="user-pc-selection-list"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="pc-flow-target-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 4. 재고 PC 검색 (불출 시 노출) -->
|
|
||||||
<div id="stock-pc-search-container" style="position: relative;">
|
|
||||||
<label style="${labelStyle}">3. 불출할 재고 PC 선택</label>
|
|
||||||
<div style="position: relative; display: flex; align-items: center;">
|
|
||||||
<input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." style="${inputWithIconStyle}" />
|
|
||||||
<i data-lucide="monitor" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
|
|
||||||
</div>
|
|
||||||
<div id="pc-flow-stock-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 5. 상세 공통 입력 -->
|
|
||||||
<div style="display: flex; gap: 16px;">
|
|
||||||
<div style="flex: 1;">
|
|
||||||
<label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">처리 일자</label>
|
|
||||||
<input type="date" id="pc-flow-date" style="${inputStyle}" />
|
|
||||||
</div>
|
|
||||||
<div style="flex: 2;">
|
|
||||||
<label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">상세 사유</label>
|
|
||||||
<textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; outline: none;"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
|
|
||||||
<div style="flex: 0.8; border-left: 1px solid var(--border-color); padding-left: 24px; display: flex; flex-direction: column; gap: 16px;">
|
|
||||||
<h3 style="margin: 0; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">선택 내역 요약</h3>
|
|
||||||
|
|
||||||
<!-- 사원 요약 카드 -->
|
|
||||||
<div id="summary-user-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
|
|
||||||
<div style="font-size: 11px; color: var(--text-muted);">대상 사원</div>
|
|
||||||
<div id="summary-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
|
|
||||||
<div id="summary-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 인수 사원 요약 카드 (이동 전용) -->
|
|
||||||
<div id="summary-target-user-card" class="summary-card hidden" style="padding: 12px; background: #EEF2F6; border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
|
|
||||||
<div style="font-size: 11px; color: var(--text-muted);">새 인수 사원</div>
|
|
||||||
<div id="summary-target-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
|
|
||||||
<div id="summary-target-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 대상 PC 자산 요약 카드 -->
|
|
||||||
<div id="summary-pc-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
|
|
||||||
<div style="font-size: 11px; color: var(--text-muted);">대상 PC 자산</div>
|
|
||||||
<div id="summary-pc-code" style="font-weight: 700; font-size: 14px; color: var(--primary-color);">선택된 PC 없음</div>
|
|
||||||
<div id="summary-pc-model" style="font-size: 12px; color: var(--text-muted);">-</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
|
|
||||||
<div id="user-pcs-container" class="hidden" style="display: flex; flex-direction: column; gap: 8px;">
|
|
||||||
<div style="font-size: 12px; font-weight: 700; color: var(--text-muted);">사원 보유 PC 선택 (클릭하여 매핑)</div>
|
|
||||||
<div id="user-pcs-list" style="display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-light);">
|
<div class="modal-footer">
|
||||||
<button id="btn-cancel-pc-flow-modal" class="btn btn-outline" style="height: 42px;">취소</button>
|
<div></div>
|
||||||
<button id="btn-submit-pc-flow" class="btn btn-primary" style="height: 42px;">이동/반납 처리 완료</button>
|
<div class="footer-actions">
|
||||||
|
<button id="btn-cancel-pc-flow-modal" class="btn btn-outline">취소</button>
|
||||||
|
<button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
.flow-type-label {
|
|
||||||
transition: all 0.2s;
|
|
||||||
border-color: var(--border-color);
|
|
||||||
background: white;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
.flow-type-label:hover {
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.flow-type-label.active {
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
background: var(--primary-light);
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.suggestion-item:hover {
|
|
||||||
background-color: var(--primary-light) !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
|
import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
|
||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
|
||||||
import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
|
import { createIcons, X, Save, Plus } from 'lucide';
|
||||||
import { UI_TEXT } from '../../core/schema';
|
import { UI_TEXT } from '../../core/schema';
|
||||||
|
|
||||||
class PartsMasterModal extends BaseModal {
|
class PartsMasterModal extends BaseModal {
|
||||||
@@ -10,52 +10,51 @@ class PartsMasterModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected renderFrameHTML(): string {
|
protected renderFrameHTML(): string {
|
||||||
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
|
||||||
const inputStyle = sharedStyle;
|
|
||||||
const selectStyle = sharedStyle;
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div id="parts-master-asset-modal" class="modal-overlay hidden">
|
<div id="parts-master-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content" style="max-width: 500px; width: 100%;">
|
<div class="modal-content narrow">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
|
<div class="header-left">
|
||||||
<button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
<h2 id="parts-master-modal-title" class="modal-title">${this.title}</h2>
|
||||||
|
<div id="parts-master-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
<div class="modal-body">
|
||||||
<form id="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
|
<form id="parts-master-asset-form" class="grid-form vertical-form">
|
||||||
<input type="hidden" id="parts-master-id" name="id" />
|
<input type="hidden" id="parts-master-id" name="id" />
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 분류</label>
|
<label>부품 분류</label>
|
||||||
<select id="parts-master-category" name="category" style="${selectStyle}">
|
<select id="parts-master-category" name="category">
|
||||||
<option value="CPU">CPU</option>
|
<option value="CPU">CPU</option>
|
||||||
<option value="GPU">GPU</option>
|
<option value="GPU">GPU</option>
|
||||||
<option value="RAM">RAM</option>
|
<option value="RAM">RAM</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">부품 표준 명칭</label>
|
<label>부품 표준 명칭</label>
|
||||||
<input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required style="${inputStyle} width: 100%;" />
|
<input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 등급</label>
|
<label>성능 등급</label>
|
||||||
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
|
<input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">감점 점수 (양수로 입력)</label>
|
<label>감점 점수 (양수로 입력)</label>
|
||||||
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
|
<input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
|
<div class="modal-footer">
|
||||||
<button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
<button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
<div class="footer-actions" style="display: flex; gap: 8px;">
|
<div class="footer-actions">
|
||||||
<button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
<button id="btn-revert-parts-master-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
<button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
<button id="btn-cancel-parts-master-modal" class="btn btn-outline">닫기</button>
|
||||||
<button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
|
<button id="btn-save-parts-master-asset" class="btn btn-primary">수정</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,11 +108,13 @@ class PartsMasterModal extends BaseModal {
|
|||||||
if (!this.currentAsset || !this.currentAsset.id) return;
|
if (!this.currentAsset || !this.currentAsset.id) return;
|
||||||
if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
|
if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
|
||||||
|
|
||||||
if (await deletePartsMaster(this.currentAsset.id)) {
|
if (await deletePartsMaster(Number(this.currentAsset.id))) {
|
||||||
alert('성공적으로 삭제되었습니다.');
|
alert('성공적으로 삭제되었습니다.');
|
||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { Plus, X, Save } });
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
@@ -122,45 +123,49 @@ class PartsMasterModal extends BaseModal {
|
|||||||
setFieldValue('parts-master-component-name', asset.component_name || '');
|
setFieldValue('parts-master-component-name', asset.component_name || '');
|
||||||
setFieldValue('parts-master-score-tier', asset.score_tier || '');
|
setFieldValue('parts-master-score-tier', asset.score_tier || '');
|
||||||
setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
|
setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
const titleEl = document.getElementById('parts-master-modal-title');
|
const titleEl = document.getElementById('parts-master-modal-title');
|
||||||
|
|
||||||
if (titleEl) {
|
if (titleEl) {
|
||||||
if (mode === 'add') {
|
titleEl.textContent = (mode === 'add') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
|
||||||
titleEl.textContent = '신규 부품 마스터 등록';
|
|
||||||
} else {
|
|
||||||
titleEl.textContent = '부품 마스터 상세 편집';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
|
||||||
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
|
||||||
|
|
||||||
// 추가 모드일 때는 삭제 버튼 숨김
|
|
||||||
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
if (mode === 'add') {
|
if (mode === 'add' || mode === 'edit') {
|
||||||
this.setEditLockMode('edit');
|
saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
|
||||||
this.isEditMode = true;
|
|
||||||
saveBtn.textContent = '등록';
|
|
||||||
saveBtn.style.display = 'block';
|
saveBtn.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
this.setEditLockMode('view');
|
|
||||||
this.isEditMode = false;
|
|
||||||
saveBtn.textContent = '수정';
|
saveBtn.textContent = '수정';
|
||||||
saveBtn.style.display = 'block';
|
saveBtn.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('parts-master-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const cat = asset.category || '';
|
||||||
|
const name = asset.component_name || '';
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${name}</span>
|
||||||
|
<span class="service-type-badge">${cat}</span>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const partsMasterModal = new PartsMasterModal();
|
export const partsMasterModal = new PartsMasterModal();
|
||||||
|
export function initPartsMasterModal(onSave: () => void, closeModals: () => void) { partsMasterModal.init(onSave, closeModals); }
|
||||||
export function initPartsMasterModal(onSave: () => void, closeModals: () => void) {
|
export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { partsMasterModal.open(asset, mode); }
|
||||||
partsMasterModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
||||||
partsMasterModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
import { state, saveAsset, deleteAsset } from '../../core/state';
|
import { state, saveAsset, deleteAsset } from '../../core/state';
|
||||||
import { BaseModal } from './BaseModal';
|
import { BaseModal } from './BaseModal';
|
||||||
import { openSwUserModal } from './SWUserModal';
|
import { openSwUserModal } from './SWUserModal';
|
||||||
import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar, Users } from 'lucide';
|
import { createIcons, History, Plus, X, Save, RotateCcw, Calendar, Users } from 'lucide';
|
||||||
import { CORP_LIST } from './SharedData';
|
import { CORP_LIST } from './SharedData';
|
||||||
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
|
||||||
import { API_BASE_URL } from '../../core/utils';
|
import { API_BASE_URL } from '../../core/utils';
|
||||||
import {
|
import {
|
||||||
generateOptionsHTML,
|
generateOptionsHTML,
|
||||||
setFieldValue,
|
setFieldValue,
|
||||||
getFieldValue,
|
getFieldValue,
|
||||||
applyDateMask
|
applyDateMask
|
||||||
} from './ModalUtils';
|
} from './ModalUtils';
|
||||||
|
|
||||||
@@ -22,15 +22,18 @@ class SwAssetModal extends BaseModal {
|
|||||||
<div id="sw-asset-modal" class="modal-overlay hidden">
|
<div id="sw-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="sw-modal-title">${this.title}</h2>
|
<div class="header-left">
|
||||||
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
|
<h2 id="sw-modal-title" class="modal-title">${this.title}</h2>
|
||||||
|
<div id="sw-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="modal-body-split">
|
<div class="modal-body-split">
|
||||||
<div class="modal-form-area">
|
<div class="modal-form-area">
|
||||||
<form id="sw-asset-form" class="grid-form">
|
<form id="sw-asset-form" class="grid-form">
|
||||||
<input type="hidden" id="sw-asset-id" name="id" />
|
<input type="hidden" id="sw-asset-id" name="id" />
|
||||||
|
|
||||||
<div class="form-section-title">기본 정보 (Identity)</div>
|
<div class="form-section-title">기본 정보 (Identity)</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>자산 유형</label>
|
<label>자산 유형</label>
|
||||||
@@ -81,7 +84,7 @@ class SwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group sw-standard-field">
|
<div class="form-group sw-standard-field">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
<label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
|
||||||
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
|
<input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group cloud-only">
|
<div class="form-group cloud-only">
|
||||||
@@ -100,12 +103,12 @@ class SwAssetModal extends BaseModal {
|
|||||||
<div class="form-section-title">관리 및 비고</div>
|
<div class="form-section-title">관리 및 비고</div>
|
||||||
<div class="form-group sw-standard-field">
|
<div class="form-group sw-standard-field">
|
||||||
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
<label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
<div class="input-with-btn">
|
||||||
<input type="text" id="sw-구매일" name="purchase_date" style="flex:1;" />
|
<input type="text" id="sw-구매일" name="purchase_date" />
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();">
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
<i data-lucide="calendar"></i>
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
|
<input type="date" id="sw-구매일-picker" class="hidden-picker" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group sw-standard-field">
|
<div class="form-group sw-standard-field">
|
||||||
@@ -126,12 +129,12 @@ class SwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group sw-standard-field" id="sw-expiry-group">
|
<div class="form-group sw-standard-field" id="sw-expiry-group">
|
||||||
<label>${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
|
<label>${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
<div class="input-with-btn">
|
||||||
<input type="text" id="sw-만료일" name="expiry_date" style="flex:1;" />
|
<input type="text" id="sw-만료일" name="expiry_date" />
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();">
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
<i data-lucide="calendar"></i>
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
|
<input type="date" id="sw-만료일-picker" class="hidden-picker" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group full-width">
|
<div class="form-group full-width">
|
||||||
@@ -140,18 +143,18 @@ class SwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
|
<div id="sw-user-section" class="user-management-section">
|
||||||
<button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
|
<button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
|
||||||
<i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
|
<i data-lucide="users"></i> 사용자 관리
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-history-area">
|
<div class="modal-history-area">
|
||||||
<div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
|
<div class="history-header">
|
||||||
<h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
|
<h3><i data-lucide="history"></i> 업데이트 내역</h3>
|
||||||
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
|
<button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
|
||||||
계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
|
계약 업데이트 <i data-lucide="rotate-ccw"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="sw-history-list" class="history-timeline"></div>
|
<div id="sw-history-list" class="history-timeline"></div>
|
||||||
@@ -170,24 +173,24 @@ class SwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 계약 업데이트 서브 모달 -->
|
<!-- 계약 업데이트 서브 모달 -->
|
||||||
<div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
<div id="sw-update-modal" class="modal-overlay hidden sub-modal">
|
||||||
<div class="modal-content" style="max-width: 500px;">
|
<div class="modal-content narrow">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>계약 업데이트 반영</h2>
|
<h2 class="modal-title">계약 업데이트 반영</h2>
|
||||||
<button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
|
<button id="btn-close-sw-update" class="btn-icon">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="grid-form" style="grid-template-columns: 1fr;">
|
<div class="grid-form vertical-form">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>업데이트 일자</label>
|
<label>업데이트 일자</label>
|
||||||
<input type="date" id="sw-update-date" />
|
<input type="date" id="sw-update-date" />
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group sub-sw-update">
|
<div class="form-group sub-sw-update">
|
||||||
<label>새로운 계약 기간</label>
|
<label>새로운 계약 기간</label>
|
||||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
<div class="input-with-btn">
|
||||||
<input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
|
<input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" />
|
||||||
<span>~</span>
|
<span>~</span>
|
||||||
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
|
<input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -209,6 +212,15 @@ class SwAssetModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.hidden-picker {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -231,7 +243,6 @@ class SwAssetModal extends BaseModal {
|
|||||||
if (this.currentAsset) openSwUserModal(this.currentAsset);
|
if (this.currentAsset) openSwUserModal(this.currentAsset);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 업데이트 모달 로직
|
|
||||||
const subModal = document.getElementById('sw-update-modal')!;
|
const subModal = document.getElementById('sw-update-modal')!;
|
||||||
const closeUpdate = () => subModal.classList.add('hidden');
|
const closeUpdate = () => subModal.classList.add('hidden');
|
||||||
document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
|
document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
|
||||||
@@ -278,7 +289,7 @@ class SwAssetModal extends BaseModal {
|
|||||||
const formData = new FormData(this.formEl!);
|
const formData = new FormData(this.formEl!);
|
||||||
const updated = { ...this.currentAsset };
|
const updated = { ...this.currentAsset };
|
||||||
formData.forEach((value, key) => { updated[key] = value; });
|
formData.forEach((value, key) => { updated[key] = value; });
|
||||||
|
|
||||||
let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
|
let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
|
||||||
if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
|
if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
|
||||||
});
|
});
|
||||||
@@ -322,10 +333,32 @@ class SwAssetModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.renderHistory(asset.id);
|
this.renderHistory(asset.id);
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
this.applySwTypeUI(asset.asset_type || asset.type);
|
this.applySwTypeUI(asset.asset_type || asset.type);
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('sw-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const type = getFieldValue('sw-asset-type') || asset.asset_type || asset.type || '';
|
||||||
|
const name = getFieldValue('sw-제품명') || asset.product_name || '';
|
||||||
|
const corp = getFieldValue('sw-법인') || asset.purchase_corp || '';
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${name}</span>
|
||||||
|
<span class="service-type-badge">${corp}</span>
|
||||||
|
<span class="asset-type-label">${type}</span>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private applySwTypeUI(type: string) {
|
private applySwTypeUI(type: string) {
|
||||||
@@ -354,18 +387,12 @@ class SwAssetModal extends BaseModal {
|
|||||||
private renderHistory(swId: string) {
|
private renderHistory(swId: string) {
|
||||||
const container = document.getElementById('sw-history-list');
|
const container = document.getElementById('sw-history-list');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
|
const logs = (state.masterData.logs || []).filter(l => l.asset_id === swId);
|
||||||
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
|
if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
|
||||||
container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
|
container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const swModal = new SwAssetModal();
|
export const swModal = new SwAssetModal();
|
||||||
|
export function initSwModal(onSave: () => void, closeModals: () => void) { swModal.init(onSave, closeModals); }
|
||||||
export function initSwModal(onSave: () => void, closeModals: () => void) {
|
export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') { swModal.open(asset, mode); }
|
||||||
swModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') {
|
|
||||||
swModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -16,15 +16,15 @@ class SwUserModal extends BaseModal {
|
|||||||
<div id="sw-user-asset-modal" class="modal-overlay hidden">
|
<div id="sw-user-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content wide">
|
<div class="modal-content wide">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="sw-user-title">${this.title}</h2>
|
<h2 id="sw-user-title" class="modal-title">${this.title}</h2>
|
||||||
<button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
|
<button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="sw-info-summary" id="sw-user-sw-info"></div>
|
<div class="sw-info-summary" id="sw-user-sw-info"></div>
|
||||||
|
|
||||||
<div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
|
<div class="flex justify-between items-center mb-4">
|
||||||
<h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
|
<h3 class="detail-section-title mb-0">할당된 사용자 목록</h3>
|
||||||
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
|
<button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus" class="icon-sm"></i> 사용자 추가</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
@@ -35,9 +35,9 @@ class SwUserModal extends BaseModal {
|
|||||||
<th>부서</th>
|
<th>부서</th>
|
||||||
<th>직위</th>
|
<th>직위</th>
|
||||||
<th>이름</th>
|
<th>이름</th>
|
||||||
<th>사용기간</th>
|
<th class="text-center">사용기간</th>
|
||||||
<th>신청서</th>
|
<th class="text-center">신청서</th>
|
||||||
<th>관리</th>
|
<th class="text-center">관리</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="sw-user-table-body"></tbody>
|
<tbody id="sw-user-table-body"></tbody>
|
||||||
@@ -54,14 +54,14 @@ class SwUserModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 사용자 추가/수정 서브 모달 -->
|
<!-- 사용자 추가/수정 서브 모달 -->
|
||||||
<div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
|
<div id="sw-user-edit-modal" class="modal-overlay hidden sub-modal">
|
||||||
<div class="modal-content" style="width: 400px;">
|
<div class="modal-content narrow">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3 id="sw-user-edit-title">사용자 정보</h3>
|
<h3 id="sw-user-edit-title" class="modal-title">사용자 정보</h3>
|
||||||
<button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
|
<button id="btn-close-user-edit" class="btn-icon">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
|
<form id="sw-user-edit-form" class="grid-form vertical-form">
|
||||||
<input type="hidden" id="edit-user-index" value="-1" />
|
<input type="hidden" id="edit-user-index" value="-1" />
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>조직</label>
|
<label>조직</label>
|
||||||
@@ -81,22 +81,22 @@ class SwUserModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>사용 시작일</label>
|
<label>사용 시작일</label>
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
<div class="input-with-btn">
|
||||||
<input type="text" id="new-user-시작일" style="flex:1;" />
|
<input type="text" id="new-user-시작일" />
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();">
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
<i data-lucide="calendar" class="icon-sm"></i>
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
|
<input type="date" id="new-user-시작일-picker" class="hidden-picker" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>사용 종료일</label>
|
<label>사용 종료일</label>
|
||||||
<div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
|
<div class="input-with-btn">
|
||||||
<input type="text" id="new-user-종료일" style="flex:1;" />
|
<input type="text" id="new-user-종료일" />
|
||||||
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
|
<button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();">
|
||||||
<i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
|
<i data-lucide="calendar" class="icon-sm"></i>
|
||||||
</button>
|
</button>
|
||||||
<input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
|
<input type="date" id="new-user-종료일-picker" class="hidden-picker" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -111,6 +111,15 @@ class SwUserModal extends BaseModal {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.hidden-picker {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -140,10 +149,9 @@ class SwUserModal extends BaseModal {
|
|||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 닫기 이벤트들 (BaseModal의 공통 버튼 외 추가분)
|
|
||||||
document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
|
document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
|
||||||
document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
|
document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
|
||||||
|
|
||||||
const subModal = document.getElementById('sw-user-edit-modal')!;
|
const subModal = document.getElementById('sw-user-edit-modal')!;
|
||||||
const closeSub = () => subModal.classList.add('hidden');
|
const closeSub = () => subModal.classList.add('hidden');
|
||||||
document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
|
document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
|
||||||
@@ -155,9 +163,9 @@ class SwUserModal extends BaseModal {
|
|||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
const swInfo = document.getElementById('sw-user-sw-info')!;
|
const swInfo = document.getElementById('sw-user-sw-info')!;
|
||||||
swInfo.innerHTML = `
|
swInfo.innerHTML = `
|
||||||
<div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
|
<div class="sw-info-header border-b border-hairline pb-4 mb-6">
|
||||||
<div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.purchase_corp || asset.법인 || ''}</div>
|
<div class="detail-label-sm">${asset.purchase_corp || asset.법인 || ''}</div>
|
||||||
<div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.product_name || asset.제품명 || ''}</div>
|
<div class="asset-code-title">${asset.product_name || asset.제품명 || ''}</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@@ -165,7 +173,7 @@ class SwUserModal extends BaseModal {
|
|||||||
this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
|
this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
|
||||||
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
|
조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
|
||||||
})) : [];
|
})) : [];
|
||||||
|
|
||||||
this.renderUserList();
|
this.renderUserList();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -173,9 +181,10 @@ class SwUserModal extends BaseModal {
|
|||||||
|
|
||||||
private renderUserList() {
|
private renderUserList() {
|
||||||
const tbody = document.getElementById('sw-user-table-body')!;
|
const tbody = document.getElementById('sw-user-table-body')!;
|
||||||
|
if (!tbody) return;
|
||||||
tbody.innerHTML = '';
|
tbody.innerHTML = '';
|
||||||
if (this.tempSwUsers.length === 0) {
|
if (this.tempSwUsers.length === 0) {
|
||||||
tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
|
tbody.innerHTML = '<tr><td colspan="7" class="empty-cell text-center p-8">할당된 사용자가 없습니다.</td></tr>';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -186,12 +195,12 @@ class SwUserModal extends BaseModal {
|
|||||||
<td>${user.부서 || ''}</td>
|
<td>${user.부서 || ''}</td>
|
||||||
<td>${user.직위 || ''}</td>
|
<td>${user.직위 || ''}</td>
|
||||||
<td>${user.이름 || ''}</td>
|
<td>${user.이름 || ''}</td>
|
||||||
<td>${user.사용기간 || ''}</td>
|
<td class="text-center">${user.사용기간 || ''}</td>
|
||||||
<td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
|
<td class="text-center">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary icon-sm"></i>' : '-'}</td>
|
||||||
<td>
|
<td class="text-center">
|
||||||
<div style="display:flex; gap:0.5rem;">
|
<div class="flex gap-2 justify-center items-center">
|
||||||
<button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
|
<button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
|
||||||
<button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
|
<button class="btn-circle-remove btn-del-user" data-idx="${idx}">×</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
`;
|
`;
|
||||||
@@ -257,11 +266,5 @@ class SwUserModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const swUserModal = new SwUserModal();
|
export const swUserModal = new SwUserModal();
|
||||||
|
export function initSwUserModal(onSave: () => void, closeModals: () => void) { swUserModal.init(onSave, closeModals); }
|
||||||
export function initSwUserModal(onSave: () => void, closeModals: () => void) {
|
export function openSwUserModal(asset: any) { swUserModal.open(asset); }
|
||||||
swUserModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openSwUserModal(asset: any) {
|
|
||||||
swUserModal.open(asset);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -10,55 +10,55 @@ class UserModal extends BaseModal {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected renderFrameHTML(): string {
|
protected renderFrameHTML(): string {
|
||||||
const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
|
|
||||||
const inputStyle = sharedStyle;
|
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div id="user-asset-modal" class="modal-overlay hidden">
|
<div id="user-asset-modal" class="modal-overlay hidden">
|
||||||
<div class="modal-content" style="max-width: 500px; width: 100%;">
|
<div class="modal-content narrow">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
|
<div class="header-left">
|
||||||
<button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">×</button>
|
<h2 id="user-modal-title" class="modal-title">${this.title}</h2>
|
||||||
|
<div id="user-header-identity" class="header-identity"></div>
|
||||||
|
</div>
|
||||||
|
<button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">×</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body" style="padding: 24px; overflow-y: auto;">
|
<div class="modal-body">
|
||||||
<form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
|
<form id="user-asset-form" class="grid-form vertical-form">
|
||||||
<input type="hidden" id="user-id" name="id" />
|
<input type="hidden" id="user-id" name="id" />
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사번</label>
|
<label>사번</label>
|
||||||
<input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
|
<label>사용자명</label>
|
||||||
<input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
|
<label>사용조직 (부서)</label>
|
||||||
<input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무 (직급)</label>
|
<label>직무 (직급)</label>
|
||||||
<input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
|
<input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
|
<div class="form-group">
|
||||||
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">상태</label>
|
<label>상태</label>
|
||||||
<select id="user-status" name="status" style="\${sharedStyle}">
|
<select id="user-status" name="status">
|
||||||
<option value="재직">재직</option>
|
<option value="재직">재직</option>
|
||||||
<option value="퇴직">퇴직</option>
|
<option value="퇴직">퇴직</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
|
<div class="modal-footer">
|
||||||
<button id="btn-delete-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
|
<button id="btn-delete-user-asset" class="btn btn-outline btn-danger">삭제</button>
|
||||||
<div class="footer-actions" style="display: flex; gap: 8px;">
|
<div class="footer-actions">
|
||||||
<button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
|
<button id="btn-revert-user-edit" class="btn btn-outline hidden">수정 취소</button>
|
||||||
<button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
|
<button id="btn-cancel-user-modal" class="btn btn-outline">닫기</button>
|
||||||
<button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
|
<button id="btn-save-user-asset" class="btn btn-primary">수정</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -119,6 +119,8 @@ class UserModal extends BaseModal {
|
|||||||
onSave(); this.close(); closeModals();
|
onSave(); this.close(); closeModals();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
createIcons({ icons: { Save, X } });
|
||||||
}
|
}
|
||||||
|
|
||||||
protected fillFormData(asset: any): void {
|
protected fillFormData(asset: any): void {
|
||||||
@@ -128,44 +130,51 @@ class UserModal extends BaseModal {
|
|||||||
setFieldValue('user-dept', asset.dept_name || '');
|
setFieldValue('user-dept', asset.dept_name || '');
|
||||||
setFieldValue('user-position-input', asset.position || '');
|
setFieldValue('user-position-input', asset.position || '');
|
||||||
setFieldValue('user-status', asset.status || '재직');
|
setFieldValue('user-status', asset.status || '재직');
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onAfterOpen(asset: any, mode: string): void {
|
protected onAfterOpen(asset: any, mode: string): void {
|
||||||
const titleEl = document.getElementById('user-modal-title');
|
const titleEl = document.getElementById('user-modal-title');
|
||||||
|
|
||||||
if (titleEl) {
|
if (titleEl) {
|
||||||
if (mode === 'add') {
|
titleEl.textContent = (mode === 'add') ? '신규 임직원 등록' : '임직원 정보 수정';
|
||||||
titleEl.textContent = '신규 임직원 등록';
|
|
||||||
} else {
|
|
||||||
titleEl.textContent = '임직원 정보 수정';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteBtn = document.getElementById('btn-delete-user-asset')!;
|
const deleteBtn = document.getElementById('btn-delete-user-asset')!;
|
||||||
const saveBtn = document.getElementById('btn-save-user-asset')!;
|
const saveBtn = document.getElementById('btn-save-user-asset')!;
|
||||||
|
|
||||||
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
|
||||||
|
|
||||||
if (mode === 'add') {
|
if (mode === 'add' || mode === 'edit') {
|
||||||
this.setEditLockMode('edit');
|
saveBtn.textContent = mode === 'add' ? '등록' : '저장';
|
||||||
this.isEditMode = true;
|
|
||||||
saveBtn.textContent = '등록';
|
|
||||||
saveBtn.style.display = 'block';
|
saveBtn.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
this.setEditLockMode('view');
|
|
||||||
this.isEditMode = false;
|
|
||||||
saveBtn.textContent = '수정';
|
saveBtn.textContent = '수정';
|
||||||
saveBtn.style.display = 'block';
|
saveBtn.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
this.updateHeaderIdentity(asset);
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateHeaderIdentity(asset: any) {
|
||||||
|
const container = document.getElementById('user-header-identity');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.currentMode === 'add') {
|
||||||
|
container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const empNo = asset.emp_no || '';
|
||||||
|
const userName = asset.user_name || '';
|
||||||
|
const dept = asset.dept_name || '';
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<span class="asset-code-title">${userName}</span>
|
||||||
|
<span class="service-type-badge">${empNo}</span>
|
||||||
|
<span class="asset-type-label">${dept}</span>
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const userModal = new UserModal();
|
export const userModal = new UserModal();
|
||||||
|
export function initUserModal(onSave: () => void, closeModals: () => void) { userModal.init(onSave, closeModals); }
|
||||||
export function initUserModal(onSave: () => void, closeModals: () => void) {
|
export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { userModal.open(asset, mode); }
|
||||||
userModal.init(onSave, closeModals);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
|
|
||||||
userModal.open(asset, mode);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -24,93 +24,96 @@ const MENU_CONFIG: any = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function renderNavigation(onTabChange: (tab: string) => void) {
|
export function renderNavigation(onTabChange: (tab: string) => void) {
|
||||||
const navContainer = document.getElementById('main-nav')!;
|
const header = document.querySelector('.main-header') as HTMLElement;
|
||||||
|
const headerContainer = document.querySelector('.header-container')!;
|
||||||
|
if (!headerContainer) return;
|
||||||
|
|
||||||
const render = () => {
|
const render = () => {
|
||||||
navContainer.innerHTML = '';
|
// 1. 헤더 구조 (Vercel Style: Clean Single Row)
|
||||||
|
headerContainer.innerHTML = `
|
||||||
|
<div class="brand" id="btn-home-logo" style="cursor: pointer;">
|
||||||
|
<img src="img/image_92.png" class="main-logo" alt="HM Logo" />
|
||||||
|
<h1>한맥자산관리시스템</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="integrated-nav" id="main-nav-list"></nav>
|
||||||
|
|
||||||
|
<div class="header-actions">
|
||||||
|
<div class="role-toggle-wrapper">
|
||||||
|
<span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
|
||||||
|
<label class="role-toggle">
|
||||||
|
<input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
|
||||||
|
<span class="role-slider"></span>
|
||||||
|
</label>
|
||||||
|
<span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
|
||||||
|
</div>
|
||||||
|
<div class="notification-area">
|
||||||
|
<button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const navList = document.getElementById('main-nav-list')!;
|
||||||
|
|
||||||
// 기존 메뉴 렌더링
|
// 2. GNB 메뉴 렌더링 (Ghost Tab Style)
|
||||||
(Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
|
Object.keys(MENU_CONFIG).forEach(catKey => {
|
||||||
const config = MENU_CONFIG[catKey];
|
const config = MENU_CONFIG[catKey];
|
||||||
|
|
||||||
// 역할에 따라 노출할 서브탭 필터링
|
|
||||||
const visibleTabs = config.tabs.filter((tab: string) => {
|
const visibleTabs = config.tabs.filter((tab: string) => {
|
||||||
if (state.currentUserRole === 'admin') {
|
if (state.currentUserRole === 'admin') return tab === '대시보드';
|
||||||
// 관리자(admin)일 경우 대시보드 탭만 노출
|
return tab !== '대시보드';
|
||||||
return tab === '대시보드';
|
|
||||||
} else {
|
|
||||||
// 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
|
|
||||||
return tab !== '대시보드';
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
|
if (visibleTabs.length === 0) return;
|
||||||
if (visibleTabs.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isActive = state.activeCategory === catKey;
|
|
||||||
|
|
||||||
const group = document.createElement('div');
|
|
||||||
group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
|
|
||||||
|
|
||||||
const trigger = document.createElement('div');
|
|
||||||
trigger.className = 'gnb-trigger';
|
|
||||||
trigger.textContent = config.label;
|
|
||||||
|
|
||||||
trigger.addEventListener('click', () => {
|
|
||||||
if (state.activeCategory !== catKey) {
|
|
||||||
state.activeCategory = catKey as any;
|
|
||||||
const firstTab = visibleTabs[0] || config.tabs[0];
|
|
||||||
state.activeSubTab = firstTab;
|
|
||||||
render();
|
|
||||||
onTabChange(firstTab);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
group.appendChild(trigger);
|
|
||||||
|
|
||||||
const shelf = document.createElement('div');
|
|
||||||
shelf.className = 'lnb-shelf';
|
|
||||||
|
|
||||||
visibleTabs.forEach((tab: string) => {
|
visibleTabs.forEach((tab: string) => {
|
||||||
if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
|
if (tab === '부품 마스터') return;
|
||||||
const item = document.createElement('div');
|
const item = document.createElement('div');
|
||||||
item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
|
const isActive = state.activeSubTab === tab;
|
||||||
|
item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
|
||||||
item.textContent = tab;
|
item.textContent = tab;
|
||||||
|
item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
|
||||||
|
|
||||||
item.addEventListener('click', (e) => {
|
item.addEventListener('click', (e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
state.activeCategory = catKey as any;
|
state.activeCategory = catKey as any;
|
||||||
state.activeSubTab = tab;
|
state.activeSubTab = tab;
|
||||||
render();
|
render();
|
||||||
onTabChange(tab);
|
onTabChange(tab);
|
||||||
});
|
});
|
||||||
shelf.appendChild(item);
|
navList.appendChild(item);
|
||||||
});
|
});
|
||||||
group.appendChild(shelf);
|
|
||||||
navContainer.appendChild(group);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
|
// 3. 관리자 전용 '관리도구'
|
||||||
if (state.currentUserRole === 'admin') {
|
if (state.currentUserRole === 'admin') {
|
||||||
const adminGroup = document.createElement('div');
|
|
||||||
adminGroup.className = 'nav-group';
|
|
||||||
|
|
||||||
const adminTrigger = document.createElement('div');
|
const adminTrigger = document.createElement('div');
|
||||||
adminTrigger.className = 'gnb-trigger';
|
adminTrigger.className = 'gnb-trigger admin-trigger';
|
||||||
adminTrigger.innerHTML = '관리자';
|
adminTrigger.innerHTML = '관리도구';
|
||||||
adminTrigger.style.color = 'var(--text-muted)';
|
adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
|
||||||
adminTrigger.style.borderLeft = '1px solid var(--border-color)';
|
navList.appendChild(adminTrigger);
|
||||||
adminTrigger.style.marginLeft = '1rem';
|
|
||||||
adminTrigger.style.paddingLeft = '1.5rem';
|
|
||||||
|
|
||||||
adminTrigger.addEventListener('click', () => {
|
|
||||||
window.open('/map_editor.html', '_blank');
|
|
||||||
});
|
|
||||||
|
|
||||||
adminGroup.appendChild(adminTrigger);
|
|
||||||
navContainer.appendChild(adminGroup);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 4. 이벤트 바인딩
|
||||||
|
document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
|
||||||
|
|
||||||
|
const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
||||||
|
roleToggle?.addEventListener('change', () => {
|
||||||
|
state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
|
||||||
|
if (state.currentUserRole === 'admin') {
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '대시보드';
|
||||||
|
} else {
|
||||||
|
state.activeCategory = 'hw';
|
||||||
|
state.activeSubTab = '서버';
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
onTabChange(state.activeSubTab);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 아이콘 생성
|
||||||
|
// @ts-ignore
|
||||||
|
if (window.lucide) window.lucide.createIcons();
|
||||||
};
|
};
|
||||||
|
|
||||||
render();
|
render();
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
|
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './types';
|
||||||
|
|
||||||
// 유틸리티: 랜덤 문자열
|
// 유틸리티: 랜덤 문자열
|
||||||
const randomId = () => Math.random().toString(36).substring(2, 9);
|
const randomId = () => Math.random().toString(36).substring(2, 9);
|
||||||
@@ -10687,9 +10687,9 @@ export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
|
|||||||
|
|
||||||
export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
|
||||||
id: randomId(),
|
id: randomId(),
|
||||||
assetId: dummyPCs[0]?.id || randomId(),
|
asset_id: dummyPCs[0]?.id || randomId(),
|
||||||
date: randomDateStr(1),
|
log_date: randomDateStr(1),
|
||||||
details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
|
details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
|
||||||
user: 'IT지원팀',
|
log_user: 'IT지원팀',
|
||||||
cost: i % 2 === 0 ? 80000 : 150000,
|
cost: i % 2 === 0 ? 80000 : 150000,
|
||||||
}));
|
}));
|
||||||
|
|||||||
@@ -1,63 +1,12 @@
|
|||||||
import * as XLSX from 'xlsx';
|
import * as XLSX from 'xlsx';
|
||||||
import { ASSET_SCHEMA } from './schema';
|
import { ASSET_SCHEMA } from './schema';
|
||||||
|
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData } from './types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ITAM 엑셀 핸들러 (Database Synchronized Edition)
|
* ITAM 엑셀 핸들러 (Database Synchronized Edition)
|
||||||
* 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
|
* 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export interface HardwareAsset {
|
|
||||||
[key: string]: any;
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SoftwareAsset {
|
|
||||||
[key: string]: any;
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SWUser {
|
|
||||||
id: string;
|
|
||||||
sw_id: string;
|
|
||||||
user_name: string;
|
|
||||||
dept: string;
|
|
||||||
corp: string;
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface HardwareLog {
|
|
||||||
id: string;
|
|
||||||
assetId?: string;
|
|
||||||
asset_id?: string;
|
|
||||||
date?: string;
|
|
||||||
log_date?: string;
|
|
||||||
created_at?: string;
|
|
||||||
details: string;
|
|
||||||
user?: string;
|
|
||||||
log_user?: string;
|
|
||||||
event_type?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface MasterAssetData {
|
|
||||||
pc: HardwareAsset[];
|
|
||||||
server: HardwareAsset[];
|
|
||||||
storage: HardwareAsset[];
|
|
||||||
network: HardwareAsset[];
|
|
||||||
equipment: HardwareAsset[];
|
|
||||||
survey: HardwareAsset[];
|
|
||||||
pcParts: HardwareAsset[];
|
|
||||||
swInternal: SoftwareAsset[];
|
|
||||||
swExternal: SoftwareAsset[];
|
|
||||||
cloud: SoftwareAsset[];
|
|
||||||
domain: any[];
|
|
||||||
vip: HardwareAsset[];
|
|
||||||
officeSupplies: HardwareAsset[];
|
|
||||||
cost: any[];
|
|
||||||
swUsers: SWUser[];
|
|
||||||
logs: HardwareLog[];
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
|
* DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { ASSET_SCHEMA, UI_TEXT } from './schema';
|
import { ASSET_SCHEMA, UI_TEXT } from './schema';
|
||||||
import { getActionButtonsHTML } from './utils';
|
|
||||||
import { generateOptionsHTML } from '../components/Modal/ModalUtils';
|
import { generateOptionsHTML } from '../components/Modal/ModalUtils';
|
||||||
import { CORP_LIST } from '../components/Modal/SharedData';
|
import { CORP_LIST } from '../components/Modal/SharedData';
|
||||||
|
|
||||||
@@ -19,6 +18,14 @@ export interface FilterOptions {
|
|||||||
extraHTML?: string;
|
extraHTML?: string;
|
||||||
onFilterChange: (filters: any) => void;
|
onFilterChange: (filters: any) => void;
|
||||||
initialFilters?: any;
|
initialFilters?: any;
|
||||||
|
fullList?: any[]; // For populating dynamic filters
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 전역 액션 버튼 그룹 생성 (자산 추가 등)
|
||||||
|
*/
|
||||||
|
export function getActionButtonsHTML(): string {
|
||||||
|
return `<div id="filter-bar-actions" class="header-action-group"></div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
|
export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
|
||||||
@@ -32,9 +39,18 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
showStatus = false,
|
showStatus = false,
|
||||||
extraHTML = '',
|
extraHTML = '',
|
||||||
onFilterChange,
|
onFilterChange,
|
||||||
initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }
|
initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' },
|
||||||
|
fullList = []
|
||||||
} = options;
|
} = options;
|
||||||
|
|
||||||
|
container.classList.add('search-bar'); // Restored class
|
||||||
|
|
||||||
|
// Helper to get unique sorted values
|
||||||
|
const getUnique = (key: keyof typeof ASSET_SCHEMA | string) => {
|
||||||
|
const fieldKey = (ASSET_SCHEMA as any)[key]?.key || key;
|
||||||
|
return Array.from(new Set(fullList.map(item => item[fieldKey] || item[(ASSET_SCHEMA as any)[key]?.db]).filter(Boolean))).sort();
|
||||||
|
};
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="search-item flex-1">
|
<div class="search-item flex-1">
|
||||||
<label>${keywordLabel}</label>
|
<label>${keywordLabel}</label>
|
||||||
@@ -45,6 +61,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
<label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
|
<label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
|
||||||
<select id="filter-type">
|
<select id="filter-type">
|
||||||
<option value="">전체 유형</option>
|
<option value="">전체 유형</option>
|
||||||
|
${getUnique('ASSET_TYPE').map(v => `<option value="${v}" ${initialFilters.type === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
</select>
|
</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${showStatus ? `
|
${showStatus ? `
|
||||||
@@ -52,6 +69,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
<label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
|
||||||
<select id="filter-status">
|
<select id="filter-status">
|
||||||
<option value="">전체 상태</option>
|
<option value="">전체 상태</option>
|
||||||
|
${getUnique('HW_STATUS').map(v => `<option value="${v}" ${initialFilters.status === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
</select>
|
</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${showField ? `
|
${showField ? `
|
||||||
@@ -73,16 +91,22 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
|
|||||||
${showLoc ? `
|
${showLoc ? `
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<label>${ASSET_SCHEMA.LOCATION.ui}</label>
|
<label>${ASSET_SCHEMA.LOCATION.ui}</label>
|
||||||
<select id="filter-loc"><option value="">전체 위치</option></select>
|
<select id="filter-loc">
|
||||||
|
<option value="">전체 위치</option>
|
||||||
|
${getUnique('LOCATION').map(v => `<option value="${v}" ${initialFilters.loc === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
|
</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${showDept ? `
|
${showDept ? `
|
||||||
<div class="search-item">
|
<div class="search-item">
|
||||||
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
<label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
|
||||||
<select id="filter-dept"><option value="">전체 조직</option></select>
|
<select id="filter-dept">
|
||||||
|
<option value="">전체 조직</option>
|
||||||
|
${getUnique('CURRENT_DEPT').map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
|
||||||
|
</select>
|
||||||
</div>` : ''}
|
</div>` : ''}
|
||||||
${extraHTML}
|
${extraHTML}
|
||||||
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
<button id="btn-reset-filters" class="btn btn-outline btn-reset">
|
||||||
<i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
<i data-lucide="refresh-ccw" class="icon-sm"></i> ${UI_TEXT.ACTION.RESET_FILTER}
|
||||||
</button>
|
</button>
|
||||||
${getActionButtonsHTML()}
|
${getActionButtonsHTML()}
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -1,41 +1,8 @@
|
|||||||
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
|
import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
|
||||||
import { API_BASE_URL } from './utils';
|
import { API_BASE_URL } from './utils';
|
||||||
import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';
|
import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';
|
||||||
|
|
||||||
// --- State Definitions ---
|
// --- State Definitions ---
|
||||||
export interface MasterAssetData {
|
|
||||||
users: any[];
|
|
||||||
pc: any[];
|
|
||||||
server: any[];
|
|
||||||
storage: any[];
|
|
||||||
network: any[];
|
|
||||||
survey: any[];
|
|
||||||
pcParts: any[];
|
|
||||||
partsMaster: any[];
|
|
||||||
equipment: any[];
|
|
||||||
officeSupplies: any[];
|
|
||||||
swInternal: any[];
|
|
||||||
swExternal: any[];
|
|
||||||
cloud: any[];
|
|
||||||
domain: any[];
|
|
||||||
cost: any[];
|
|
||||||
vip: any[];
|
|
||||||
mobile?: any[]; // Legacy mobile support
|
|
||||||
equip?: any[]; // Backward compat
|
|
||||||
jobSpecs?: any[];
|
|
||||||
|
|
||||||
// Backward compatibility
|
|
||||||
subSw: any[];
|
|
||||||
permSw: any[];
|
|
||||||
|
|
||||||
swUsers: SWUser[];
|
|
||||||
logs: HardwareLog[];
|
|
||||||
|
|
||||||
// 통합 배열
|
|
||||||
hw: any[];
|
|
||||||
sw: any[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AppState {
|
export interface AppState {
|
||||||
activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
|
activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
|
||||||
activeSubTab: string;
|
activeSubTab: string;
|
||||||
@@ -57,16 +24,18 @@ export const state: AppState = {
|
|||||||
masterData: {
|
masterData: {
|
||||||
users: [],
|
users: [],
|
||||||
pc: [], server: [], storage: [], network: [],
|
pc: [], server: [], storage: [], network: [],
|
||||||
survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
|
survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
|
||||||
swInternal: [], swExternal: [], cloud: [], domain: [],
|
swInternal: [], swExternal: [], cloud: [], domain: [],
|
||||||
cost: [], vip: [],
|
cost: [], vip: [],
|
||||||
subSw: [], permSw: [],
|
|
||||||
hw: [], sw: [],
|
hw: [], sw: [],
|
||||||
swUsers: [], logs: [],
|
swUsers: [], logs: [],
|
||||||
jobSpecs: []
|
jobSpecs: [],
|
||||||
|
mobile: []
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
(window as any).__itam_state = state;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 통합 V2 스키마에 맞춘 데이터 로드
|
* 통합 V2 스키마에 맞춘 데이터 로드
|
||||||
*/
|
*/
|
||||||
@@ -93,9 +62,9 @@ export async function loadMasterDataFromDB() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Mapping for backward compatibility
|
// Mapping for backward compatibility
|
||||||
state.masterData.equip = state.masterData.equipment;
|
(state.masterData as any).equip = state.masterData.equipment;
|
||||||
state.masterData.subSw = state.masterData.swExternal;
|
(state.masterData as any).subSw = state.masterData.swExternal;
|
||||||
state.masterData.permSw = state.masterData.swInternal;
|
(state.masterData as any).permSw = state.masterData.swInternal;
|
||||||
|
|
||||||
// 하드웨어 통합 (대시보드 호환용)
|
// 하드웨어 통합 (대시보드 호환용)
|
||||||
state.masterData.hw = [
|
state.masterData.hw = [
|
||||||
@@ -266,4 +235,3 @@ export async function deleteJobSpec(id: number) {
|
|||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
155
src/core/types.ts
Normal file
155
src/core/types.ts
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
/**
|
||||||
|
* ITAM Global Type Definitions
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface BaseAsset {
|
||||||
|
id: string;
|
||||||
|
asset_code?: string;
|
||||||
|
category?: string;
|
||||||
|
asset_type?: string;
|
||||||
|
purchase_corp?: string;
|
||||||
|
purchase_date?: string;
|
||||||
|
purchase_amount?: number | string;
|
||||||
|
purchase_vendor?: string;
|
||||||
|
approval_document?: string;
|
||||||
|
service_type?: string;
|
||||||
|
manager_primary?: string;
|
||||||
|
manager_secondary?: string;
|
||||||
|
location?: string;
|
||||||
|
location_detail?: string;
|
||||||
|
location_photo?: string;
|
||||||
|
loc_x?: number;
|
||||||
|
loc_y?: number;
|
||||||
|
memo?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
created_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HardwareAsset extends BaseAsset {
|
||||||
|
hw_status?: string;
|
||||||
|
model_name?: string;
|
||||||
|
asset_name?: string;
|
||||||
|
asset_mfr?: string;
|
||||||
|
current_dept?: string;
|
||||||
|
previous_dept?: string;
|
||||||
|
user_current?: string;
|
||||||
|
emp_no?: string;
|
||||||
|
user_position?: string;
|
||||||
|
previous_user?: string;
|
||||||
|
cpu?: string;
|
||||||
|
ram?: string;
|
||||||
|
gpu?: string;
|
||||||
|
ssd_1?: string;
|
||||||
|
ssd_2?: string;
|
||||||
|
hdd_1?: string;
|
||||||
|
hdd_2?: string;
|
||||||
|
hdd_3?: string;
|
||||||
|
hdd_4?: string;
|
||||||
|
mainboard?: string;
|
||||||
|
os?: string;
|
||||||
|
ip_address?: string;
|
||||||
|
ip_address_2?: string;
|
||||||
|
mac_address?: string;
|
||||||
|
remote_tool?: string;
|
||||||
|
remote_id?: string;
|
||||||
|
remote_pw?: string;
|
||||||
|
monitoring?: string;
|
||||||
|
volume?: string;
|
||||||
|
monitor_inch?: string;
|
||||||
|
asset_count?: number | string;
|
||||||
|
serial_num?: string;
|
||||||
|
// Normalized V3 fields
|
||||||
|
volumes?: any[];
|
||||||
|
remotes?: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SoftwareAsset extends BaseAsset {
|
||||||
|
sw_status?: string;
|
||||||
|
sw_field?: string;
|
||||||
|
sw_type?: string;
|
||||||
|
dev_objective?: string;
|
||||||
|
dev_manager?: string;
|
||||||
|
planning_manager?: string;
|
||||||
|
sales_manager?: string;
|
||||||
|
product_name?: string;
|
||||||
|
domain_address?: string;
|
||||||
|
email_account?: string;
|
||||||
|
email_pw?: string;
|
||||||
|
sw_id?: string;
|
||||||
|
sw_pw?: string;
|
||||||
|
purchase_method?: string;
|
||||||
|
asset_purpose?: string;
|
||||||
|
asset_status?: string;
|
||||||
|
start_date?: string;
|
||||||
|
expired_date?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SWUser {
|
||||||
|
id: string;
|
||||||
|
sw_id: string;
|
||||||
|
user_name: string;
|
||||||
|
dept: string;
|
||||||
|
corp: string;
|
||||||
|
emp_no?: string;
|
||||||
|
created_at?: string;
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HardwareLog {
|
||||||
|
id: string;
|
||||||
|
asset_id: string;
|
||||||
|
log_date: string;
|
||||||
|
log_user: string;
|
||||||
|
event_type: string;
|
||||||
|
details: string;
|
||||||
|
old_dept?: string;
|
||||||
|
new_dept?: string;
|
||||||
|
old_user?: string;
|
||||||
|
new_user?: string;
|
||||||
|
created_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SystemUser {
|
||||||
|
id: string;
|
||||||
|
emp_no: string;
|
||||||
|
user_name: string;
|
||||||
|
dept_name: string;
|
||||||
|
position: string;
|
||||||
|
status: string;
|
||||||
|
created_at?: string;
|
||||||
|
updated_at?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PartsMaster {
|
||||||
|
id: number | string;
|
||||||
|
category: string;
|
||||||
|
component_name: string;
|
||||||
|
score_tier: string;
|
||||||
|
deduction: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MasterAssetData {
|
||||||
|
users: SystemUser[];
|
||||||
|
pc: HardwareAsset[];
|
||||||
|
server: HardwareAsset[];
|
||||||
|
storage: HardwareAsset[];
|
||||||
|
network: HardwareAsset[];
|
||||||
|
survey: HardwareAsset[];
|
||||||
|
pcParts: HardwareAsset[];
|
||||||
|
partsMaster: PartsMaster[];
|
||||||
|
equipment: HardwareAsset[];
|
||||||
|
officeSupplies: HardwareAsset[];
|
||||||
|
swInternal: SoftwareAsset[];
|
||||||
|
swExternal: SoftwareAsset[];
|
||||||
|
cloud: SoftwareAsset[];
|
||||||
|
domain: SoftwareAsset[];
|
||||||
|
cost: any[];
|
||||||
|
vip: HardwareAsset[];
|
||||||
|
swUsers: SWUser[];
|
||||||
|
logs: HardwareLog[];
|
||||||
|
jobSpecs?: any[];
|
||||||
|
mobile?: HardwareAsset[];
|
||||||
|
// Integrated arrays
|
||||||
|
hw: HardwareAsset[];
|
||||||
|
sw: SoftwareAsset[];
|
||||||
|
}
|
||||||
68
src/main.ts
68
src/main.ts
@@ -19,41 +19,28 @@ import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Lapto
|
|||||||
|
|
||||||
|
|
||||||
// 화면 갱신 통합 핸들러
|
// 화면 갱신 통합 핸들러
|
||||||
function refreshView() {
|
function refreshView(tab?: string) {
|
||||||
const mainContent = document.getElementById('main-content')!;
|
const mainContent = document.getElementById('main-content')!;
|
||||||
if (!mainContent) return;
|
if (!mainContent) return;
|
||||||
|
|
||||||
if (state.activeSubTab === '대시보드') {
|
const activeTab = tab || state.activeSubTab;
|
||||||
|
|
||||||
|
if (activeTab === '대시보드') {
|
||||||
renderDashboard(mainContent);
|
renderDashboard(mainContent);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
|
// 서버 탭이 아닐 경우 '자산현황(위치)' 뷰 진입 방지 및 강제 리스트 모드 전환
|
||||||
if (state.activeSubTab !== '서버' && state.viewMode === 'location') {
|
if (activeTab !== '서버' && state.viewMode === 'location') {
|
||||||
state.viewMode = 'list';
|
state.viewMode = 'list';
|
||||||
}
|
}
|
||||||
|
|
||||||
const isServerTab = state.activeSubTab === '서버';
|
const isServerTab = activeTab === '서버';
|
||||||
|
|
||||||
mainContent.innerHTML = `
|
mainContent.innerHTML = `
|
||||||
<div class="view-header">
|
<div id="view-body" class="view-container"></div>
|
||||||
<div class="view-toggle-container" style="${isServerTab ? '' : 'display:none;'}">
|
|
||||||
<button class="mode-toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산현황(위치)</button>
|
|
||||||
<button class="mode-toggle-btn ${state.viewMode === 'list' ? 'active' : ''}" data-mode="list">자산목록</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="view-body" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;"></div>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 이벤트 바인딩
|
|
||||||
mainContent.querySelectorAll('.mode-toggle-btn').forEach(btn => {
|
|
||||||
btn.addEventListener('click', () => {
|
|
||||||
const mode = (btn as HTMLElement).getAttribute('data-mode') as any;
|
|
||||||
state.viewMode = mode;
|
|
||||||
refreshView();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const viewBody = document.getElementById('view-body')!;
|
const viewBody = document.getElementById('view-body')!;
|
||||||
if (state.viewMode === 'location') {
|
if (state.viewMode === 'location') {
|
||||||
renderLocationView(viewBody);
|
renderLocationView(viewBody);
|
||||||
@@ -99,6 +86,7 @@ function initApp() {
|
|||||||
loadMasterDataFromDB().then((success) => {
|
loadMasterDataFromDB().then((success) => {
|
||||||
if (success) {
|
if (success) {
|
||||||
refreshView();
|
refreshView();
|
||||||
|
initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} catch (e) { console.error('❌ Initialization failed:', e); }
|
} catch (e) { console.error('❌ Initialization failed:', e); }
|
||||||
@@ -168,7 +156,6 @@ function initRoleSwitcher() {
|
|||||||
if (!checkbox || !userLabel || !adminLabel) return;
|
if (!checkbox || !userLabel || !adminLabel) return;
|
||||||
|
|
||||||
checkbox.addEventListener('change', () => {
|
checkbox.addEventListener('change', () => {
|
||||||
const mainContent = document.getElementById('main-content')!;
|
|
||||||
if (checkbox.checked) {
|
if (checkbox.checked) {
|
||||||
state.currentUserRole = 'admin';
|
state.currentUserRole = 'admin';
|
||||||
userLabel.classList.remove('active');
|
userLabel.classList.remove('active');
|
||||||
@@ -178,14 +165,6 @@ function initRoleSwitcher() {
|
|||||||
// 관리자 모드 전환 시 대시보드로 이동
|
// 관리자 모드 전환 시 대시보드로 이동
|
||||||
state.activeCategory = 'hw';
|
state.activeCategory = 'hw';
|
||||||
state.activeSubTab = '대시보드';
|
state.activeSubTab = '대시보드';
|
||||||
refreshView();
|
|
||||||
renderNavigation((tab) => {
|
|
||||||
if (tab === '대시보드') {
|
|
||||||
renderDashboard(mainContent);
|
|
||||||
} else {
|
|
||||||
renderSWTable(mainContent);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
state.currentUserRole = 'user';
|
state.currentUserRole = 'user';
|
||||||
adminLabel.classList.remove('active');
|
adminLabel.classList.remove('active');
|
||||||
@@ -195,15 +174,10 @@ function initRoleSwitcher() {
|
|||||||
// 실무자 모드 전환 시 서버 목록으로 이동
|
// 실무자 모드 전환 시 서버 목록으로 이동
|
||||||
state.activeCategory = 'hw';
|
state.activeCategory = 'hw';
|
||||||
state.activeSubTab = '서버';
|
state.activeSubTab = '서버';
|
||||||
refreshView();
|
|
||||||
renderNavigation((tab) => {
|
|
||||||
if (tab === '대시보드') {
|
|
||||||
renderDashboard(mainContent);
|
|
||||||
} else {
|
|
||||||
renderSWTable(mainContent);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
// 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
|
||||||
|
renderNavigation(() => refreshView());
|
||||||
|
refreshView();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -213,35 +187,19 @@ function initRoleSwitcher() {
|
|||||||
function initializeAppDirectly() {
|
function initializeAppDirectly() {
|
||||||
const loginContainer = document.getElementById('login-container');
|
const loginContainer = document.getElementById('login-container');
|
||||||
const appLayout = document.getElementById('app-layout');
|
const appLayout = document.getElementById('app-layout');
|
||||||
const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
|
|
||||||
const userLabel = document.querySelector('.role-label.user');
|
|
||||||
const adminLabel = document.querySelector('.role-label.admin');
|
|
||||||
|
|
||||||
// 기본 권한 설정: 실무자 (User)
|
// 기본 권한 설정: 실무자 (User)
|
||||||
state.currentUserRole = 'user';
|
state.currentUserRole = 'user';
|
||||||
state.activeCategory = 'hw';
|
state.activeCategory = 'hw';
|
||||||
state.activeSubTab = '서버'; // 실무자 기본 탭
|
state.activeSubTab = '서버'; // 실무자 기본 탭
|
||||||
|
|
||||||
// UI 상태 동기화
|
|
||||||
if (checkbox) checkbox.checked = false;
|
|
||||||
if (userLabel) userLabel.classList.add('active');
|
|
||||||
if (adminLabel) adminLabel.classList.remove('active');
|
|
||||||
document.body.classList.remove('admin-mode');
|
|
||||||
|
|
||||||
// 화면 전환
|
// 화면 전환
|
||||||
if (loginContainer) loginContainer.style.display = 'none';
|
if (loginContainer) loginContainer.style.display = 'none';
|
||||||
if (appLayout) appLayout.style.display = 'flex';
|
if (appLayout) appLayout.style.display = 'flex';
|
||||||
|
|
||||||
// 앱 초기화
|
// 앱 초기화 및 내비게이션(헤더 포함) 렌더링
|
||||||
initRoleSwitcher();
|
|
||||||
initApp();
|
initApp();
|
||||||
|
renderNavigation((tab) => refreshView(tab));
|
||||||
// 로고 클릭 시 새로고침 (초기 화면 복귀 효과)
|
|
||||||
const brand = document.querySelector('.brand') as HTMLElement;
|
|
||||||
if (brand) {
|
|
||||||
brand.style.cursor = 'pointer';
|
|
||||||
brand.onclick = () => location.reload();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', initializeAppDirectly);
|
document.addEventListener('DOMContentLoaded', initializeAppDirectly);
|
||||||
|
|||||||
@@ -1,51 +1,48 @@
|
|||||||
:root {
|
:root {
|
||||||
/* --- System Colors --- */
|
/* --- Vercel Stark Palette --- */
|
||||||
--color-red: #F21D0D;
|
--primary: #171717;
|
||||||
--color-pink: #E8175E;
|
--on-primary: #ffffff;
|
||||||
--color-magenta: #B92ED1;
|
--body: #4d4d4d;
|
||||||
--color-purple: #6D3DC2;
|
--mute: #71717a;
|
||||||
--color-navy: #4255bd;
|
--hairline: #ebebeb;
|
||||||
--color-blue: #0D8DF2;
|
--hairline-strong: #a1a1a1;
|
||||||
--color-cyan: #03AEFC;
|
--canvas: #ffffff;
|
||||||
--color-green: #4DB251;
|
--canvas-soft: #fafafa;
|
||||||
--color-yellow: #FFBF00;
|
--canvas-soft-2: #f5f5f5;
|
||||||
--color-orange: #FF9800;
|
|
||||||
--color-dahong: #FF3D00;
|
/* --- Brand Accents --- */
|
||||||
--color-brown: #A0705F;
|
--color-blue: #0070f3;
|
||||||
--color-iron: #7F7F7F;
|
--color-cyan: #50e3c2;
|
||||||
--color-steel: #688897;
|
--color-pink: #ff0080;
|
||||||
|
--color-violet: #7928ca;
|
||||||
|
--color-orange: #f5a623;
|
||||||
|
|
||||||
/* --- Primary Brand Levels --- */
|
/* --- Semantic Alignment --- */
|
||||||
--primary-lv-0: #E9EEED;
|
--primary-color: var(--primary);
|
||||||
--primary-lv-1: #D2DCDB;
|
--primary-hover: #000000;
|
||||||
--primary-lv-2: #A5B9B6;
|
--primary-light: var(--canvas-soft-2);
|
||||||
--primary-lv-3: #789792;
|
--text-main: var(--primary);
|
||||||
--primary-lv-4: #4B746D;
|
--text-muted: var(--body);
|
||||||
--primary-lv-5: #35635C;
|
--border-color: var(--hairline);
|
||||||
--primary-lv-6: #1E5149;
|
--bg-color: var(--canvas-soft);
|
||||||
--primary-lv-7: #1B443D;
|
--bg-light: var(--canvas-soft-2);
|
||||||
--primary-lv-8: #193833;
|
|
||||||
--primary-lv-9: #162A27;
|
|
||||||
|
|
||||||
/* --- Semantic Colors --- */
|
|
||||||
--primary-color: var(--primary-lv-6);
|
|
||||||
--primary-hover: var(--primary-lv-5);
|
|
||||||
--primary-light: var(--primary-lv-0);
|
|
||||||
|
|
||||||
--edit-mode-color: var(--color-dahong);
|
|
||||||
--edit-mode-light: rgba(255, 61, 0, 0.1);
|
|
||||||
--edit-mode-focus: rgba(255, 61, 0, 0.3);
|
|
||||||
--edit-mode-dark: #cc3100;
|
|
||||||
|
|
||||||
--text-main: #111827;
|
|
||||||
--text-muted: #6B7280;
|
|
||||||
--border-color: #E5E7EB;
|
|
||||||
--bg-color: #F9FAFB;
|
|
||||||
--bg-light: #FAFAFA;
|
|
||||||
--white: #FFFFFF;
|
--white: #FFFFFF;
|
||||||
--danger: var(--color-red);
|
--danger: #ee0000;
|
||||||
--success: var(--color-green);
|
--success: #0070f3;
|
||||||
--header-height: 52px;
|
--header-height: 64px;
|
||||||
|
|
||||||
|
/* --- Global Typography Scale (No Upper Limit) --- */
|
||||||
|
--fs-xs: max(10px, 1vmin + 0.1vw);
|
||||||
|
--fs-sm: max(12px, 1.2vmin + 0.2vw);
|
||||||
|
--fs-base: max(13px, 1.4vmin + 0.2vw);
|
||||||
|
--fs-md: max(16px, 2vmin + 0.3vw);
|
||||||
|
--fs-lg: max(20px, 3vmin + 0.4vw);
|
||||||
|
--fs-xl: max(28px, 5vmin + 0.6vw);
|
||||||
|
|
||||||
|
/* --- Layout Units --- */
|
||||||
|
--header-height: 64px;
|
||||||
|
--spacing-base: 1.5rem;
|
||||||
|
--radius-base: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -56,12 +53,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Pretendard Variable', Pretendard, sans-serif;
|
font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 14px;
|
font-size: var(--fs-base);
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
-webkit-user-select: text;
|
||||||
|
-moz-user-select: text;
|
||||||
|
-ms-user-select: text;
|
||||||
|
user-select: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-layout {
|
.app-layout {
|
||||||
@@ -69,67 +80,52 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Header --- */
|
/* --- Header --- */
|
||||||
.main-header {
|
.main-header {
|
||||||
background-color: var(--white);
|
background-color: var(--canvas);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
height: var(--header-height);
|
height: var(--header-height);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.header-container {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
gap: 1.5rem;
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand { display: flex; align-items: center; gap: 0.75rem; }
|
.brand { display: flex; align-items: center; gap: 0.75rem; }
|
||||||
.main-logo { height: 34px; width: auto; }
|
.main-logo { height: clamp(28px, 4vmin, 40px); width: auto; }
|
||||||
.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
|
.brand h1 { font-size: clamp(0.85rem, 1.4vmin, 1.05rem); font-weight: 600; color: var(--text-main); }
|
||||||
.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
|
|
||||||
|
|
||||||
.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
|
.integrated-nav { flex: 1; display: flex; align-items: center; margin-left: 2rem; gap: 0.5rem; }
|
||||||
.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
|
.gnb-trigger {
|
||||||
.gnb-trigger { font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; }
|
font-size: var(--fs-xs);
|
||||||
.nav-group.active .gnb-trigger, .nav-group:hover .gnb-trigger { color: var(--text-main); }
|
font-weight: 500;
|
||||||
.lnb-shelf { display: none; align-items: center; gap: 0.2rem; padding: 0 0.5rem; height: 60%; border-left: 1px solid var(--border-color); margin-left: 0.2rem; }
|
color: var(--text-muted);
|
||||||
|
padding: 0.4rem 0.75rem;
|
||||||
/* 기본적으로 활성 탭의 서브메뉴 표시 */
|
cursor: pointer;
|
||||||
.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
|
border-radius: 9999px;
|
||||||
|
transition: all 0.2s;
|
||||||
/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
|
}
|
||||||
.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
|
.gnb-trigger:hover { color: var(--text-main); background: var(--canvas-soft-2); }
|
||||||
|
.gnb-trigger.active { color: var(--text-main); font-weight: 600; background: var(--canvas-soft-2); }
|
||||||
/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
|
|
||||||
.nav-group:hover .lnb-shelf { display: flex !important; }
|
|
||||||
|
|
||||||
.lnb-item { font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; transition: all 0.2s; }
|
|
||||||
.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
|
|
||||||
.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
|
|
||||||
|
|
||||||
.header-actions { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.role-switcher { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-right: 1px solid var(--border-color); height: 24px; }
|
|
||||||
.role-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
|
|
||||||
.role-label.active { color: var(--primary-color); }
|
|
||||||
.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
|
|
||||||
.switch input { opacity: 0; width: 0; height: 0; }
|
|
||||||
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
|
|
||||||
.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
|
|
||||||
input:checked + .slider { background-color: var(--color-orange); }
|
|
||||||
input:checked + .slider:before { transform: translateX(16px); }
|
|
||||||
|
|
||||||
/* --- Layout Content --- */
|
/* --- Layout Content --- */
|
||||||
.content-area {
|
.content-area {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 1.25rem 2rem 0;
|
padding: 0;
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-container {
|
.view-container {
|
||||||
@@ -142,163 +138,505 @@ input:checked + .slider:before { transform: translateX(16px); }
|
|||||||
|
|
||||||
.view-content-wrapper {
|
.view-content-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
display: flex;
|
||||||
padding-bottom: 2rem;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- View Toggle --- */
|
/* --- View Toggle (Vercel Tab Style) --- */
|
||||||
.view-toggle-container { margin-bottom: 1rem; display: flex; justify-content: flex-start; }
|
.view-toggle {
|
||||||
.view-toggle { display: inline-flex; background-color: var(--primary-lv-0); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
|
display: inline-flex;
|
||||||
.toggle-btn { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
|
background: var(--canvas-soft-2);
|
||||||
.toggle-btn.active { background-color: var(--white); color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
|
padding: 0.2rem;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
gap: 0.1rem;
|
||||||
|
border-radius: var(--radius-base);
|
||||||
|
}
|
||||||
|
|
||||||
/* --- System Status List (Docker Style) --- */
|
.toggle-btn {
|
||||||
.system-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
|
padding: 0.35rem 1rem;
|
||||||
.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
|
border: none;
|
||||||
.system-row { display: flex; align-items: center; padding: 1rem 1.25rem; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
|
background: transparent;
|
||||||
.system-row:hover { border-color: var(--primary-lv-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
|
font-size: var(--fs-xs);
|
||||||
.col-status { width: 100px; display: flex; align-items: center; gap: 0.5rem; }
|
font-weight: 500;
|
||||||
.col-info { flex: 1.5; }
|
color: var(--text-muted);
|
||||||
.col-network { flex: 1; }
|
cursor: pointer;
|
||||||
.col-remote { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
|
transition: all 0.1s;
|
||||||
.col-traffic { flex: 1.2; }
|
border-radius: calc(var(--radius-base) - 2px);
|
||||||
.col-actions { width: 120px; display: flex; justify-content: flex-end; }
|
}
|
||||||
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
||||||
.status-dot.online { background-color: var(--success); box-shadow: 0 0 6px var(--success); }
|
|
||||||
.status-text { font-size: 11px; font-weight: 600; color: var(--success); }
|
|
||||||
.asset-primary { font-weight: 700; font-size: 14px; }
|
|
||||||
.asset-secondary { font-size: 12px; color: var(--text-muted); }
|
|
||||||
.ip-address { font-weight: 600; font-family: monospace; color: var(--primary-color); }
|
|
||||||
.traffic-mini-chart { display: flex; flex-direction: column; gap: 4px; }
|
|
||||||
.traffic-info { display: flex; justify-content: space-between; font-size: 11px; }
|
|
||||||
.progress-bg { height: 4px; background: var(--primary-lv-0); border-radius: 2px; overflow: hidden; }
|
|
||||||
.progress-fill { height: 100%; background: var(--primary-color); }
|
|
||||||
.icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; }
|
|
||||||
.icon-btn:hover { background-color: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); }
|
|
||||||
|
|
||||||
/* --- Footer --- */
|
.toggle-btn:hover { color: var(--text-main); }
|
||||||
.main-footer {
|
.toggle-btn.active {
|
||||||
height: 28px;
|
background: var(--canvas);
|
||||||
background-color: var(--white);
|
color: var(--text-main);
|
||||||
border-top: 1px solid var(--border-color);
|
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Role Toggle Switch --- */
|
||||||
|
.role-toggle-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
gap: 0.75rem;
|
||||||
padding: 0 1.5rem;
|
background: var(--canvas-soft-2);
|
||||||
flex-shrink: 0;
|
padding: 0.35rem 0.75rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-footer p {
|
.role-label {
|
||||||
font-family: 'Pretendard Variable', Pretendard, sans-serif;
|
font-size: var(--fs-xs);
|
||||||
font-size: 0.75rem;
|
font-weight: 500;
|
||||||
font-weight: 300;
|
color: var(--mute);
|
||||||
line-height: 1.25rem;
|
transition: all 0.2s;
|
||||||
letter-spacing: -0.0175rem;
|
}
|
||||||
color: #777777;
|
|
||||||
user-select: none;
|
.role-label.active {
|
||||||
pointer-events: all;
|
color: var(--primary);
|
||||||
-webkit-user-drag: none;
|
font-weight: 700;
|
||||||
margin: 0;
|
}
|
||||||
padding: 0;
|
|
||||||
|
.role-toggle {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-toggle input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--hairline-strong);
|
||||||
|
transition: .4s;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 16px;
|
||||||
|
width: 16px;
|
||||||
|
left: 2px;
|
||||||
|
bottom: 2px;
|
||||||
|
background-color: white;
|
||||||
|
transition: .4s;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .role-slider {
|
||||||
|
background-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .role-slider:before {
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Utility Styles (The Standard) --- */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 9999px;
|
||||||
|
cursor: pointer;
|
||||||
|
height: clamp(32px, 4.5vmin, 44px);
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary { background-color: var(--primary); color: var(--on-primary); }
|
||||||
|
.btn-primary:hover { background-color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
||||||
|
|
||||||
|
.btn-outline { background-color: var(--canvas); color: var(--text-main); border: 1px solid var(--hairline); }
|
||||||
|
.btn-outline:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
|
||||||
|
|
||||||
|
.btn-sm { height: clamp(28px, 3.5vmin, 36px); padding: 0 1rem; font-size: var(--fs-xs); }
|
||||||
|
.btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
|
||||||
|
|
||||||
|
/* --- Form Elements --- */
|
||||||
|
.form-select-sm {
|
||||||
|
height: clamp(28px, 3.5vmin, 36px);
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--canvas);
|
||||||
|
color: var(--primary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select-sm:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.badge-primary { background-color: var(--primary); color: var(--on-primary); }
|
||||||
|
.badge.b-green { background-color: #e6f4ea; color: #137333; } /* 운영/중급 */
|
||||||
|
.badge.b-yellow { background-color: #fffbeb; color: #b45309; } /* 재고/보급 */
|
||||||
|
.badge.b-purple { background-color: #f3e8ff; color: #6b21a8; } /* 수리/최상급 */
|
||||||
|
.badge.b-primary { background-color: #e0e7ff; color: #3730a3; } /* GNB/상급 */
|
||||||
|
.badge.badge-danger { background-color: #fce8e6; color: #c5221f; } /* 폐기/교체대상 */
|
||||||
|
.badge.badge-muted { background-color: #f1f3f4; color: #5f6368; } /* 폐기 */
|
||||||
|
.badge.badge-light { background-color: var(--canvas-soft-2); color: var(--mute); border: 1px solid var(--hairline); } /* 재고기본 */
|
||||||
|
|
||||||
|
/* --- Form Elements Extra --- */
|
||||||
|
.input-with-icon {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-icon input {
|
||||||
|
padding-left: 2.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-icon i,
|
||||||
|
.input-with-icon .icon-sm {
|
||||||
|
position: absolute;
|
||||||
|
left: 12px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
color: var(--mute);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-list {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
max-height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: var(--canvas);
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
|
||||||
|
z-index: 1100;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-item {
|
||||||
|
padding: 10px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-item:hover {
|
||||||
|
background: var(--canvas-soft-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.autocomplete-item-empty {
|
||||||
|
padding: 1rem;
|
||||||
|
color: var(--mute);
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestion-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--primary);
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestion-meta {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Summary & Selection Cards --- */
|
||||||
|
.summary-info-card {
|
||||||
|
padding: 1.25rem;
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-selection-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
max-height: 250px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-item {
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--canvas);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-item:hover {
|
||||||
|
border-color: var(--hairline-strong);
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-pc-item.selected {
|
||||||
|
border-color: var(--primary);
|
||||||
|
background: var(--primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-item-code {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-item-meta {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-list-message {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Global Utilities --- */
|
||||||
|
.hidden { display: none !important; }
|
||||||
|
.clickable { cursor: pointer; transition: opacity 0.2s; }
|
||||||
|
.clickable:hover { opacity: 0.8; }
|
||||||
|
|
||||||
|
/* Flexbox & Grid Utilities */
|
||||||
|
.flex { display: flex; }
|
||||||
|
.flex-col { display: flex; flex-direction: column; }
|
||||||
|
.flex-row { display: flex; flex-direction: row; }
|
||||||
|
.items-center { align-items: center; }
|
||||||
|
.justify-between { justify-content: space-between; }
|
||||||
|
.justify-center { justify-content: center; }
|
||||||
|
.gap-1 { gap: 0.25rem; }
|
||||||
|
.gap-2 { gap: 0.5rem; }
|
||||||
|
.gap-3 { gap: 0.75rem; }
|
||||||
|
.gap-4 { gap: 1rem; }
|
||||||
|
.gap-6 { gap: 1.5rem; }
|
||||||
|
.gap-y-3 { row-gap: 0.75rem; }
|
||||||
|
.gap-x-4 { column-gap: 1rem; }
|
||||||
|
.mb-0 { margin-bottom: 0 !important; }
|
||||||
|
.mb-4 { margin-bottom: 1rem !important; }
|
||||||
|
.mb-6 { margin-bottom: 1.5rem !important; }
|
||||||
|
.pb-4 { padding-bottom: 1rem !important; }
|
||||||
|
.p-4 { padding: 1rem !important; }
|
||||||
|
.p-2 { padding: 0.5rem !important; }
|
||||||
|
.p-8 { padding: 2rem !important; }
|
||||||
|
.ml-auto { margin-left: auto !important; }
|
||||||
|
.self-end { align-self: flex-end !important; }
|
||||||
|
.font-medium { font-weight: 500; }
|
||||||
|
.text-muted { color: var(--mute) !important; }
|
||||||
|
.mt-12 { margin-top: 3rem !important; }
|
||||||
|
.icon-sm { width: 16px; height: 16px; }
|
||||||
|
.h-90vh { height: 90vh !important; }
|
||||||
|
.pt-0 { padding-top: 0 !important; }
|
||||||
|
.font-semibold { font-weight: 600; }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.w-full { width: 100%; }
|
||||||
|
.h-full { height: 100%; }
|
||||||
|
|
||||||
|
/* Text Utilities */
|
||||||
|
.text-center { text-align: center !important; }
|
||||||
|
.text-right { text-align: right !important; }
|
||||||
|
.text-left { text-align: left !important; }
|
||||||
|
.font-bold { font-weight: 700; }
|
||||||
|
.bg-primary-light { background-color: var(--primary-light) !important; }
|
||||||
|
.text-success { color: var(--success) !important; }
|
||||||
|
.text-danger { color: var(--danger) !important; }
|
||||||
|
.text-blue { color: var(--color-blue) !important; }
|
||||||
|
.text-orange { color: var(--color-orange) !important; }
|
||||||
|
/* --- Unified Search & Filter Bar --- */
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-base);
|
||||||
|
padding: 1.25rem var(--spacing-base);
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
align-items: flex-end;
|
||||||
|
background: var(--canvas);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.search-item {
|
||||||
display: none !important;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-nowrap {
|
.search-item.flex-1 {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item input,
|
||||||
|
.search-item select {
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
outline: none;
|
||||||
|
background-color: var(--canvas);
|
||||||
|
color: var(--primary);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item select {
|
||||||
|
cursor: pointer;
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-item input:focus,
|
||||||
|
.search-item select:focus {
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-action-group {
|
||||||
|
margin-left: auto;
|
||||||
|
align-self: flex-end;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-view-toggle-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-view-toggle-label input[type="checkbox"] {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-pagination-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
border-left: 1px solid var(--hairline);
|
||||||
|
height: clamp(34px, 4.5vmin, 44px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-info {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
font-weight: 500;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Utility Styles --- */
|
|
||||||
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; height: 28px; }
|
|
||||||
.btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
|
|
||||||
.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
|
|
||||||
|
|
||||||
.badge {
|
/* --- Modal & View Header Layouts --- */
|
||||||
padding: 2px 6px;
|
.header-left {
|
||||||
border-radius: 4px;
|
display: flex;
|
||||||
font-size: 16px;
|
align-items: center;
|
||||||
font-weight: 700;
|
gap: 1rem;
|
||||||
white-space: nowrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-primary {
|
/* --- Asset Identity & Header Styling (Global) --- */
|
||||||
background-color: var(--primary-color);
|
.header-identity {
|
||||||
color: white;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-muted {
|
.asset-code-title {
|
||||||
background-color: #9CA3AF;
|
font-size: var(--fs-md);
|
||||||
color: white;
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge-light {
|
.service-type-badge {
|
||||||
background: var(--bg-color);
|
font-size: var(--fs-xs);
|
||||||
color: var(--text-muted);
|
font-weight: 600;
|
||||||
border: 1px solid var(--border-color);
|
color: var(--on-primary);
|
||||||
|
background: var(--primary);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* PC 성능 등급 뱃지 컬러 스타일 */
|
.asset-type-label {
|
||||||
.badge.b-purple {
|
font-size: var(--fs-sm);
|
||||||
background-color: #EDE9FE;
|
font-weight: 500;
|
||||||
color: #7C3AED;
|
color: var(--mute);
|
||||||
border: 1px solid #DDD6FE;
|
line-height: 1;
|
||||||
font-size: 11px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
}
|
|
||||||
.badge.b-primary {
|
|
||||||
background-color: #DBEAFE;
|
|
||||||
color: #1D4ED8;
|
|
||||||
border: 1px solid #BFDBFE;
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
}
|
|
||||||
.badge.b-green {
|
|
||||||
background-color: #D1FAE5;
|
|
||||||
color: #047857;
|
|
||||||
border: 1px solid #A7F3D0;
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
}
|
|
||||||
.badge.b-yellow {
|
|
||||||
background-color: #FEF3C7;
|
|
||||||
color: #D97706;
|
|
||||||
border: 1px solid #FDE68A;
|
|
||||||
font-size: 11px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-tag {
|
.main-footer {
|
||||||
color: var(--text-muted);
|
border-top: 1px solid var(--border-color);
|
||||||
font-size: 16px;
|
background-color: var(--canvas);
|
||||||
padding: 1px 5px;
|
color: var(--mute);
|
||||||
border: 1px solid var(--border-color);
|
padding: 1rem 2rem;
|
||||||
border-radius: 3px;
|
text-align: right;
|
||||||
background-color: var(--bg-light);
|
font-size: var(--fs-xs);
|
||||||
|
flex-shrink: 0;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-bold {
|
.main-footer p {
|
||||||
font-weight: 700;
|
margin: 0;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Responsive Design (Tablet & Mobile) --- */
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.header-container { gap: 0.75rem; padding: 0 1rem; }
|
|
||||||
.brand h1 { font-size: 1rem; }
|
|
||||||
.brand h1 .sub-title { font-size: 0.75rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.main-header { height: auto; padding: 0.5rem 0; }
|
|
||||||
.header-container { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
|
|
||||||
.integrated-nav { width: 100%; justify-content: flex-start; border-top: 1px solid var(--border-color); padding-top: 0.5rem; }
|
|
||||||
.header-actions { width: 100%; justify-content: flex-end; padding-top: 0.5rem; }
|
|
||||||
.content-area { padding: 0 1rem; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.brand h1 .sub-title { display: none; }
|
|
||||||
.header-actions .btn span { display: none; }
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,526 +1,505 @@
|
|||||||
/* --- Premium Executive Dashboard View Specific Styles --- */
|
/* --- Vercel Inspired Premium Dashboard --- */
|
||||||
.dashboard-section-title {
|
.dashboard-section-title {
|
||||||
padding: 0 0 0 8px;
|
padding: 0;
|
||||||
font-size: 1.55rem;
|
font-size: var(--fs-lg);
|
||||||
font-weight: 800;
|
font-weight: 600;
|
||||||
color: var(--text-main);
|
color: var(--primary);
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
border-left: 4px solid var(--primary-color);
|
margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
|
||||||
margin-bottom: 1rem;
|
line-height: 1;
|
||||||
line-height: 1.2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-grid {
|
/* Background Mesh Gradient for Stats Row */
|
||||||
display: grid;
|
.dashboard-stats-row {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
display: flex;
|
||||||
gap: 1.5rem;
|
flex-wrap: wrap;
|
||||||
margin-bottom: 2rem;
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: clamp(1rem, 2vmin, 2rem);
|
||||||
|
background: radial-gradient(at 0% 0%, rgba(80, 227, 194, 0.05) 0px, transparent 50%),
|
||||||
|
radial-gradient(at 100% 0%, rgba(121, 40, 202, 0.05) 0px, transparent 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Premium Executive Divider-based Style (Line-based Division) */
|
.stat-group-item {
|
||||||
.dashboard-card, .stat-card {
|
flex: 1;
|
||||||
background: transparent;
|
min-width: 250px;
|
||||||
backdrop-filter: none;
|
|
||||||
-webkit-backdrop-filter: none;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 1.5rem 0.5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
transition: opacity 0.2s ease;
|
padding: var(--spacing-base);
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-card:hover, .stat-card:hover {
|
.stat-group-item.bordered {
|
||||||
transform: none;
|
border-left: 1px solid var(--hairline);
|
||||||
box-shadow: none;
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-layout-2col {
|
.stat-group-item .stat-label {
|
||||||
display: grid;
|
font-size: var(--fs-xs);
|
||||||
grid-template-columns: repeat(2, 1fr);
|
font-weight: 500;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item .stat-value {
|
||||||
|
font-size: var(--fs-xl);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
line-height: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item .stat-value span {
|
||||||
|
font-size: var(--fs-base);
|
||||||
|
font-weight: 400;
|
||||||
|
margin-left: 6px;
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-group-item .stat-sub {
|
||||||
|
display: flex;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
color: var(--body);
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-layout-3col {
|
/* --- Technical Data Alignment --- */
|
||||||
display: grid;
|
.text-primary {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
color: var(--color-blue) !important;
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-card {
|
.detail-stat-header {
|
||||||
min-height: 380px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-card canvas {
|
|
||||||
flex: 1;
|
|
||||||
width: 100% !important;
|
|
||||||
max-height: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Premium KPI Value Styling */
|
|
||||||
.stat-value {
|
|
||||||
font-size: 2.41rem;
|
|
||||||
font-weight: 800;
|
|
||||||
background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-value-danger {
|
.stat-title {
|
||||||
background: linear-gradient(135deg, #E11D48 0%, #F59E0B 100%);
|
font-size: var(--fs-base);
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 1.36rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-icon {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
|
|
||||||
.icon-green { background: rgba(30, 81, 73, 0.1); color: #1E5149; }
|
|
||||||
.icon-red { background: rgba(225, 29, 72, 0.1); color: #E11D48; }
|
|
||||||
.icon-yellow { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
|
|
||||||
|
|
||||||
.table-premium {
|
|
||||||
background: white;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium table {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium th {
|
|
||||||
background: #F8FAFC;
|
|
||||||
color: #475569;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 1rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.96rem;
|
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium td {
|
|
||||||
padding: 1rem;
|
|
||||||
border-bottom: 1px solid #E2E8F0;
|
|
||||||
color: #1E293B;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-premium tr:hover td {
|
|
||||||
background: #F1F5F9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Slider/Carousel Specific Styles --- */
|
|
||||||
.dashboard-header-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-nav-btn {
|
|
||||||
background: white;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-main);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-nav-btn:hover {
|
|
||||||
background: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-nav-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-info {
|
|
||||||
font-size: 0.96rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-btns button {
|
.detail-stat-body {
|
||||||
padding: 0.3rem 0.75rem;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
background: var(--white);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 0.96rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-btns button:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-indicator {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 1.41rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-slider-viewport {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-slider-track {
|
|
||||||
display: flex;
|
|
||||||
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
||||||
width: 400%; /* For 4 pages */
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-slide {
|
|
||||||
width: 25%; /* 100% / 4 pages */
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 0 2px; /* Slight padding to avoid cutting off box-shadows */
|
|
||||||
height: calc(100vh - 150px);
|
|
||||||
min-height: 520px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Location View Styles --- */
|
.loc-summary {
|
||||||
.location-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1.2fr 1fr;
|
|
||||||
gap: 2rem;
|
|
||||||
height: calc(100vh - 180px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-section, .asset-section {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--text-main);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
background: #f8fafc;
|
|
||||||
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-box {
|
|
||||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-box:hover {
|
|
||||||
background: rgba(30, 81, 73, 0.2) !important;
|
|
||||||
transform: scale(1.02);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-box:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-section .table-container {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.25rem 0.625rem;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
background: #ecfdf5;
|
|
||||||
color: #059669;
|
|
||||||
border: 1px solid #d1fae5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle-btn:hover {
|
|
||||||
border-color: var(--primary-color) !important;
|
|
||||||
color: var(--primary-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-toggle-btn.active:hover {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- View Toggle Header --- */
|
|
||||||
.view-header {
|
|
||||||
padding: 0.5rem 1.5rem;
|
|
||||||
background: var(--white);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-toggle-container {
|
.loc-summary span {
|
||||||
display: flex;
|
font-size: var(--fs-sm);
|
||||||
background: #f1f5f9;
|
color: var(--mute);
|
||||||
padding: 0.25rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-toggle-btn {
|
.loc-summary span strong {
|
||||||
padding: 0.5rem 1rem;
|
color: var(--primary);
|
||||||
border: none;
|
font-size: var(--fs-base);
|
||||||
background: transparent;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-muted);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-toggle-btn:hover {
|
.type-summary {
|
||||||
color: var(--text-main);
|
display: flex;
|
||||||
|
gap: 0.8rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
opacity: 0.9;
|
||||||
|
border-top: 1px dashed var(--hairline);
|
||||||
|
padding-top: 8px;
|
||||||
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mode-toggle-btn.active {
|
.type-summary span {
|
||||||
background: var(--white);
|
cursor: help;
|
||||||
color: var(--primary-color);
|
font-size: var(--fs-xs);
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
color: var(--mute);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Enhanced Location View --- */
|
.type-summary span strong {
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Enhanced Location View Layout --- */
|
||||||
.location-view-wrapper {
|
.location-view-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: calc(100vh - 120px);
|
height: 100%;
|
||||||
|
background: var(--canvas);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-filter-bar {
|
.location-filter-bar {
|
||||||
padding: 1rem 1.5rem;
|
/* Inherit from .search-bar in common.css */
|
||||||
background: var(--white);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-group {
|
.filter-group label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-group label {
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-group select {
|
|
||||||
padding: 0.4rem 0.75rem;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
color: var(--text-main);
|
|
||||||
background: var(--white);
|
|
||||||
min-width: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.map-pagination {
|
|
||||||
margin-left: auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.location-main-content {
|
.location-main-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1.4fr 1fr;
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
||||||
gap: 1.5rem;
|
background: var(--canvas);
|
||||||
padding: 1.5rem;
|
gap: 0;
|
||||||
|
padding: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map-container-section {
|
.map-container-section {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
overflow: auto;
|
justify-content: center;
|
||||||
|
background: var(--canvas);
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-frame-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-image {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-overlay {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-map-message {
|
||||||
|
padding: 5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--mute);
|
||||||
|
font-size: var(--fs-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-box-point {
|
.location-box-point {
|
||||||
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-label-text {
|
/* --- Asset Detail Sidebar --- */
|
||||||
font-size: 0.65rem;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--primary-color);
|
|
||||||
pointer-events: none;
|
|
||||||
text-shadow: 0 0 2px white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-list-section {
|
.asset-list-section {
|
||||||
background: var(--white);
|
|
||||||
border-radius: 12px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
background: var(--canvas);
|
||||||
}
|
}
|
||||||
|
|
||||||
.asset-list-section .section-header {
|
.section-header {
|
||||||
padding: 1rem 1.25rem;
|
padding: 1.5rem;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--hairline);
|
||||||
background: #f8fafc;
|
background: var(--canvas);
|
||||||
}
|
flex-shrink: 0;
|
||||||
|
|
||||||
.asset-list-section h4 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.9375rem;
|
|
||||||
color: var(--text-main);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mini-table-wrapper {
|
.mini-table-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact-table {
|
.sidebar-title {
|
||||||
width: 100%;
|
margin: 0;
|
||||||
border-collapse: collapse;
|
font-size: var(--fs-base);
|
||||||
}
|
|
||||||
|
|
||||||
.compact-table th {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
background: var(--white);
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
text-align: left;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-muted);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.compact-table td {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
font-size: 0.8125rem;
|
|
||||||
border-bottom: 1px solid #f1f5f9;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.compact-table tr.clickable-row:hover {
|
|
||||||
background: #f1f5f9;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Asset Detail Sidebar (LocationView) --- */
|
|
||||||
.asset-detail-sidebar {
|
|
||||||
padding-top: 1rem;
|
|
||||||
background: var(--white);
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 0 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-section-title {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary-color);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
padding-bottom: 6px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, minmax(80px, auto) 1fr);
|
|
||||||
gap: 8px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
display: flex;
|
color: var(--primary);
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-value {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-main);
|
|
||||||
font-weight: 500;
|
|
||||||
word-break: break-all;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-header-actions {
|
.detail-header-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-header-title {
|
.header-identity {
|
||||||
|
display: flex;
|
||||||
|
align-items: center; /* Changed from baseline to center for perfect vertical alignment */
|
||||||
|
gap: 8px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-size: 0.95rem;
|
flex-wrap: wrap; /* Allow wrapping on very small screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-code-title {
|
||||||
|
font-size: var(--fs-md);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1; /* Reset line-height to prevent baseline shifts */
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-type-badge {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--on-primary);
|
||||||
|
background: var(--primary);
|
||||||
|
padding: 4px 8px; /* Adjusted padding for better vertical centering */
|
||||||
|
border-radius: 9999px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1; /* Match line-height */
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-type-label {
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--mute);
|
||||||
|
line-height: 1; /* Match line-height */
|
||||||
|
}
|
||||||
|
|
||||||
|
.asset-detail-sidebar {
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-section-title {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
padding-bottom: 8px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-grid-2col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item.full-width {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-label-sm {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
color: var(--mute);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-layout-2col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 0 2rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card {
|
||||||
|
background: var(--canvas);
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card.clickable:hover {
|
||||||
|
border-color: var(--primary);
|
||||||
|
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-progress-bar {
|
||||||
|
height: 8px;
|
||||||
|
background: var(--canvas-soft-2);
|
||||||
|
border-radius: 9999px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary);
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card .stat-label {
|
||||||
|
font-size: var(--fs-xs);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card .stat-value {
|
||||||
|
font-size: var(--fs-xl);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-card .stat-sub {
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
color: var(--body);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-soft {
|
||||||
|
background-color: var(--canvas-soft) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-placeholder {
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: conic-gradient(var(--primary) calc(var(--val) * 1%), var(--hairline) 0);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
background: var(--canvas);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular-progress::after {
|
||||||
|
content: attr(style); /* This is a hack to get the value, but we'll use innerHTML in TS if needed */
|
||||||
|
position: absolute;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.system-dashboard {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning-badge-orange { background-color: var(--color-orange); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
|
||||||
|
.warning-badge { background-color: var(--danger); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
|
||||||
|
|
||||||
|
.list-section {
|
||||||
|
flex: 1.3;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
padding: 1rem 1.5rem 0 0;
|
||||||
|
border-right: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-panel {
|
||||||
|
flex: 0.7;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0;
|
||||||
|
padding: 1rem 0 0 1.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-empty-state {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-photo-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid var(--hairline);
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-photo-state {
|
||||||
|
padding: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--mute);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Responsive Overrides */
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
.location-main-content {
|
||||||
|
grid-template-columns: 1.5fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.location-main-content {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.map-container-section {
|
||||||
|
height: 400px;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -19,8 +19,8 @@
|
|||||||
|
|
||||||
.guide-tab {
|
.guide-tab {
|
||||||
padding: 0.75rem 1.25rem;
|
padding: 0.75rem 1.25rem;
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guide-section h3 {
|
.guide-section h3 {
|
||||||
font-size: 1.3rem;
|
font-size: 1.73rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
border-bottom: 2px solid var(--primary-color);
|
border-bottom: 2px solid var(--primary-color);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
@@ -83,7 +83,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.guide-text {
|
.guide-text {
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@@ -127,8 +127,8 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 17px;
|
font-size: 23px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -136,14 +136,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.flow-step .step-label {
|
.flow-step .step-label {
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flow-step .step-desc {
|
.flow-step .step-desc {
|
||||||
font-size: 17px;
|
font-size: 23px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
@@ -159,13 +159,13 @@
|
|||||||
.guide-info-table {
|
.guide-info-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guide-info-table th {
|
.guide-info-table th {
|
||||||
background: #f8faf9;
|
background: #f8faf9;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
@@ -182,7 +182,7 @@
|
|||||||
background: var(--primary-light);
|
background: var(--primary-light);
|
||||||
border-left: 4px solid var(--primary-color);
|
border-left: 4px solid var(--primary-color);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
font-size: 18px;
|
font-size: 24px;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,14 +36,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.login-header h2 {
|
.login-header h2 {
|
||||||
font-size: 1.75rem;
|
font-size: 2.33rem;
|
||||||
font-weight: 800;
|
font-weight: 900;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-header p {
|
.login-header p {
|
||||||
font-size: 0.9375rem;
|
font-size: 1.25rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,14 +94,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.role-card h3 {
|
.role-card h3 {
|
||||||
font-size: 1.125rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.role-card p {
|
.role-card p {
|
||||||
font-size: 0.8125rem;
|
font-size: 1.08rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
@@ -109,7 +109,7 @@
|
|||||||
.login-footer {
|
.login-footer {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.75rem;
|
font-size: 1rem;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -88,11 +88,52 @@
|
|||||||
.box-item {
|
.box-item {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
padding: 6px;
|
padding: 10px 6px;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-index {
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-inputs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group label {
|
||||||
|
color: var(--text-muted);
|
||||||
|
width: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 10px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group input:focus {
|
||||||
|
border-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-item:hover { background: var(--white); }
|
.box-item:hover { background: var(--white); }
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,128 +1,56 @@
|
|||||||
/* --- Page Header for Description --- */
|
/* --- Page Header for Description --- */
|
||||||
.page-header {
|
.page-header {
|
||||||
padding: 1rem 0 0.2rem 0;
|
padding: 1.5rem 2rem 0.5rem; /* Padding added for better whitespace */
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title-group {
|
.page-title-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.3rem;
|
gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
font-size: 16px;
|
font-size: var(--fs-lg);
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: var(--primary-color);
|
color: var(--primary);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border-left: 4px solid var(--primary-color);
|
line-height: 1.1;
|
||||||
padding-left: 8px;
|
letter-spacing: -0.02em;
|
||||||
line-height: 1.2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-description {
|
.page-description {
|
||||||
font-size: 12px;
|
font-size: var(--fs-base);
|
||||||
color: var(--text-muted);
|
color: var(--mute);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: 1.4;
|
line-height: 1.5;
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Table View & Filter Styles --- */
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.75rem; /* 간격 축소 및 통일 */
|
|
||||||
padding: 1.2rem 0;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
align-items: flex-end;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item.flex-1 {
|
|
||||||
flex: 1; /* 검색창이 남은 공간을 채우도록 설정 */
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem; /* 버튼들 간의 간격 */
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-actions .btn {
|
|
||||||
height: 38px;
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item label {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item input,
|
|
||||||
.search-item select {
|
|
||||||
height: 38px;
|
|
||||||
padding: 0 1rem;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
outline: none;
|
|
||||||
background-color: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 셀렉트 박스 화살표 여백 절대 고정 (수정 금지) */
|
|
||||||
.search-item select {
|
|
||||||
padding-right: 2.5rem !important;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-item input:focus,
|
|
||||||
.search-item select:focus {
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 필터 초기화 버튼 크기 조정 (입력창 높이 38px에 맞춤) */
|
|
||||||
.btn-reset {
|
|
||||||
height: 38px !important;
|
|
||||||
color: var(--text-muted) !important;
|
|
||||||
padding: 0 1.2rem !important;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: 0; /* 불필요한 마진 제거 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- Table View Styles --- */
|
||||||
.table-container {
|
.table-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background-color: var(--white);
|
background-color: var(--canvas);
|
||||||
border-top: 1px solid var(--border-color);
|
overflow-x: auto;
|
||||||
overflow: auto;
|
overflow-y: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-overflow-scrolling: touch;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
table-layout: auto;
|
table-layout: fixed; /* Force fixed layout to prevent horizontal scroll */
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
padding: 0.8rem 1.2rem;
|
padding: 0.8rem 1rem;
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--hairline);
|
||||||
text-align: left; /* 기본은 좌측 정렬 */
|
text-align: left;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis; /* Show ... for long text */
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
@@ -132,93 +60,91 @@ thead {
|
|||||||
}
|
}
|
||||||
|
|
||||||
th {
|
th {
|
||||||
background-color: var(--bg-light) !important;
|
background-color: var(--canvas-soft) !important;
|
||||||
font-size: 13px;
|
font-size: var(--fs-sm);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-muted);
|
color: var(--mute);
|
||||||
position: sticky;
|
text-transform: uppercase;
|
||||||
top: 0;
|
letter-spacing: -0.02em;
|
||||||
z-index: 50;
|
box-shadow: inset 0 -1px 0 var(--hairline);
|
||||||
box-shadow: inset 0 1px 0 var(--border-color), inset 0 -1px 0 var(--border-color); /* 상하 테두리 보정 */
|
text-align: center; /* Set default header alignment to center */
|
||||||
text-transform: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
font-size: 13px;
|
font-size: var(--fs-base);
|
||||||
color: var(--text-main);
|
color: var(--primary);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
text-align: left; /* Set default data alignment to left */
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:hover {
|
tbody tr:hover {
|
||||||
background-color: var(--bg-color);
|
background-color: var(--canvas-soft-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 정렬 클래스 강제 적용 */
|
/* 정렬 클래스 */
|
||||||
.text-center { text-align: center !important; }
|
.text-center { text-align: center !important; }
|
||||||
.text-right { text-align: right !important; }
|
.text-right { text-align: right !important; }
|
||||||
.text-left { text-align: left !important; }
|
.text-left { text-align: left !important; }
|
||||||
|
|
||||||
/* 메모 컬럼 전용: 가장 길게 표시되도록 너비 조정 및 줄바꿈 허용 */
|
/* 메모 컬럼 전용 */
|
||||||
.col-memo {
|
.col-memo {
|
||||||
width: 20%;
|
white-space: nowrap !important; /* Keep as one line */
|
||||||
min-width: 250px;
|
overflow: hidden;
|
||||||
white-space: normal !important;
|
text-overflow: ellipsis;
|
||||||
word-break: break-all;
|
|
||||||
line-height: 1.4;
|
|
||||||
text-align: left !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon {
|
|
||||||
padding: 0.25rem;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--text-muted);
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-icon svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Table Sorting --- */
|
/* --- Table Sorting --- */
|
||||||
th.sortable {
|
th.sortable {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: background-color 0.2s;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-right: 1.8rem !important; /* 아이콘 공간 확보 */
|
padding-right: 1.8rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
th.sortable:hover {
|
th.sortable:hover {
|
||||||
background-color: #F3F4F6;
|
background-color: var(--canvas-soft-2) !important;
|
||||||
color: var(--primary-color);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
th.sortable::after {
|
th.sortable::after {
|
||||||
content: '↕';
|
content: '↕';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0.6rem;
|
right: 0.75rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
font-size: 11px;
|
font-size: var(--fs-xs);
|
||||||
opacity: 0.3;
|
opacity: 0.4;
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th.sortable.asc::after {
|
th.sortable.asc::after { content: '▲'; opacity: 1; color: var(--primary); }
|
||||||
content: '▲';
|
th.sortable.desc::after { content: '▼'; opacity: 1; color: var(--primary); }
|
||||||
opacity: 1;
|
|
||||||
color: var(--primary-color);
|
/* --- Compact Table (Used in Dashboards/Modals) --- */
|
||||||
|
.compact-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
}
|
}
|
||||||
|
|
||||||
th.sortable.desc::after {
|
.compact-table th {
|
||||||
content: '▼';
|
padding: 0.75rem 0.5rem;
|
||||||
opacity: 1;
|
font-size: var(--fs-sm);
|
||||||
color: var(--primary-color);
|
font-weight: 600;
|
||||||
|
color: var(--mute);
|
||||||
|
border-bottom: 1px solid var(--hairline);
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-table td {
|
||||||
|
padding: 0.75rem 0.5rem;
|
||||||
|
font-size: var(--fs-sm);
|
||||||
|
border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.compact-table tr.clickable-row:hover {
|
||||||
|
background: var(--canvas-soft);
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -29,16 +29,16 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
|
<!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
|
||||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
<div class="flex items-center gap-3">
|
||||||
<span style="font-size: 0.9rem; font-weight: 700; color: #475569; white-space: nowrap;">조직 필터:</span>
|
<span class="detail-label-sm font-bold">조직 필터:</span>
|
||||||
<div id="dashboard-dept-buttons" style="display: flex; gap: 0.3rem; background: #EEF2F6; padding: 4px; border-radius: 8px; border: 1px solid #E2E8F0;">
|
<div id="dashboard-dept-buttons" class="flex gap-1 p-1 bg-canvas-soft border border-hairline rounded-lg">
|
||||||
<button class="dept-filter-btn active" data-dept="" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: #1E5149; color: white; cursor: pointer; transition: all 0.2s;">전체</button>
|
<button class="dept-filter-btn active" data-dept="">전체</button>
|
||||||
<button class="dept-filter-btn" data-dept="한맥" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">한맥</button>
|
<button class="dept-filter-btn" data-dept="한맥">한맥</button>
|
||||||
<button class="dept-filter-btn" data-dept="삼안" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">삼안</button>
|
<button class="dept-filter-btn" data-dept="삼안">삼안</button>
|
||||||
<button class="dept-filter-btn" data-dept="장헌" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">장헌</button>
|
<button class="dept-filter-btn" data-dept="장헌">장헌</button>
|
||||||
<button class="dept-filter-btn" data-dept="한라" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">한라</button>
|
<button class="dept-filter-btn" data-dept="한라">한라</button>
|
||||||
<button class="dept-filter-btn" data-dept="기술개발센터" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">기술개발센터</button>
|
<button class="dept-filter-btn" data-dept="기술개발센터">기술개발센터</button>
|
||||||
<button class="dept-filter-btn" data-dept="총괄기획실" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">총괄기획실</button>
|
<button class="dept-filter-btn" data-dept="총괄기획실">총괄기획실</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,7 +57,7 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
<div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span>
|
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
<div class="flex items-end justify-between">
|
||||||
<div>
|
<div>
|
||||||
<div id="metric-total-pcs" style="font-size: 2.3rem; font-weight: 900; color: #1E5149; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
<div id="metric-total-pcs" style="font-size: 2.3rem; font-weight: 900; color: #1E5149; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">전사 보유 개인용 PC</span>
|
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">전사 보유 개인용 PC</span>
|
||||||
@@ -70,7 +70,7 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
<div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
<div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족</span>
|
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
<div class="flex items-end justify-between">
|
||||||
<div>
|
<div>
|
||||||
<div id="metric-under-spec" style="font-size: 2.3rem; font-weight: 900; color: #EF4444; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
<div id="metric-under-spec" style="font-size: 2.3rem; font-weight: 900; color: #EF4444; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 교체 권고 자산</span>
|
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 교체 권고 자산</span>
|
||||||
@@ -83,7 +83,7 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
<div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
<div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버 스펙</span>
|
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버 스펙</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
<div class="flex items-end justify-between">
|
||||||
<div>
|
<div>
|
||||||
<div id="metric-over-spec" style="font-size: 2.3rem; font-weight: 900; color: #F59E0B; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
<div id="metric-over-spec" style="font-size: 2.3rem; font-weight: 900; color: #F59E0B; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 회수 권고 자산</span>
|
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 회수 권고 자산</span>
|
||||||
@@ -96,7 +96,7 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
<div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
<div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
|
||||||
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span>
|
<span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: flex-end; justify-content: space-between;">
|
<div class="flex items-end justify-between">
|
||||||
<div>
|
<div>
|
||||||
<div id="metric-win11-incompatible" style="font-size: 2.3rem; font-weight: 900; color: #3B82F6; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
<div id="metric-win11-incompatible" style="font-size: 2.3rem; font-weight: 900; color: #3B82F6; line-height: 1; margin-bottom: 0.35rem;">0대</div>
|
||||||
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">업데이트 미지원 하드웨어</span>
|
<span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">업데이트 미지원 하드웨어</span>
|
||||||
@@ -219,6 +219,12 @@ export function renderHwDashboard(container: HTMLElement) {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<style>
|
||||||
|
.dept-filter-btn { padding: 6px 14px; font-size: 0.85rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: var(--mute); cursor: pointer; transition: all 0.2s; }
|
||||||
|
.dept-filter-btn.active { background: var(--primary); color: var(--on-primary); }
|
||||||
|
.aging-row:hover { background: var(--canvas-soft); }
|
||||||
|
.donut-text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%); font-size: 1.25rem; font-weight: 900; color: var(--primary); pointer-events: none; white-space: nowrap; }
|
||||||
|
</style>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 3. Lucide 아이콘 초기화
|
// 3. Lucide 아이콘 초기화
|
||||||
|
|||||||
@@ -13,13 +13,13 @@ export function renderSwDashboard(container: HTMLElement) {
|
|||||||
// 통합 SW 데이터
|
// 통합 SW 데이터
|
||||||
const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
|
const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
|
||||||
|
|
||||||
allSw.forEach(sw => {
|
allSw.forEach((sw: any) => {
|
||||||
const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
|
const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
|
||||||
const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
|
const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
|
||||||
const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
|
const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
|
||||||
const price = parseInt(priceStr, 10) || 0;
|
const price = parseInt(priceStr, 10) || 0;
|
||||||
|
|
||||||
if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
|
if (sw.asset_type === '외부SW') {
|
||||||
extQty += qty; extUsed += assigned; extTotal++;
|
extQty += qty; extUsed += assigned; extTotal++;
|
||||||
if (isSWExpiring(sw)) extExp++;
|
if (isSWExpiring(sw)) extExp++;
|
||||||
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
|
if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
|
||||||
@@ -33,38 +33,38 @@ export function renderSwDashboard(container: HTMLElement) {
|
|||||||
const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;
|
const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="view-container">
|
<div class="view-container bg-soft">
|
||||||
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
<h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
|
||||||
|
|
||||||
<div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
|
<div class="dashboard-layout-2col mb-6">
|
||||||
<div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
|
<div class="dashboard-card clickable" data-action="ext-usage">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
|
<div class="stat-label">외부 소프트웨어 사용율</div>
|
||||||
<div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
|
<div class="stat-sub">${extQty}카피 중 ${extUsed}개 할당</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
|
<div class="stat-value text-primary">${extPer}%</div>
|
||||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
<div class="stat-progress-bar">
|
||||||
<div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
<div class="progress-fill" style="width: ${extPer}%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
|
<div class="dashboard-card clickable" data-action="int-usage">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
|
<div class="stat-label">내부 소프트웨어 현황</div>
|
||||||
<div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
|
<div class="stat-sub">등록된 내부 솔루션: ${intTotal}개</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
|
<div class="stat-value text-primary">${intPer}%</div>
|
||||||
<div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
|
<div class="stat-progress-bar">
|
||||||
<div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
|
<div class="progress-fill" style="width: ${intPer}%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
<h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
|
||||||
|
|
||||||
<div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
|
<div class="dashboard-layout-2col">
|
||||||
<div class="dashboard-card" style="min-height:auto;">
|
<div class="dashboard-card">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
|
<div class="stat-label">외부 SW 누적 비용 (2026)</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
|
<div class="stat-value text-primary">₩ ${extCost2026.toLocaleString()}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dashboard-card" style="min-height:auto;">
|
<div class="dashboard-card">
|
||||||
<span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
|
<div class="stat-label">내부 SW 누적 비용 (2026)</div>
|
||||||
<div style="font-size: 2.21rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
|
<div class="stat-value text-blue">₩ ${intCost2026.toLocaleString()}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,12 +3,11 @@ import { renderHwDashboard } from './Dashboard/HwDashboard';
|
|||||||
import { renderSwDashboard } from './Dashboard/SwDashboard';
|
import { renderSwDashboard } from './Dashboard/SwDashboard';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 대시보드 렌더링 통합 허브
|
* 대시보드 렌더링 통합 허브 (Vercel Style Normalized)
|
||||||
*/
|
*/
|
||||||
export function renderDashboard(mainContent: HTMLElement) {
|
export function renderDashboard(mainContent: HTMLElement) {
|
||||||
if (!mainContent) return;
|
if (!mainContent) return;
|
||||||
mainContent.innerHTML = '';
|
|
||||||
|
|
||||||
// 기존 차트 리소스 해제
|
// 기존 차트 리소스 해제
|
||||||
if (state.activeCharts) {
|
if (state.activeCharts) {
|
||||||
state.activeCharts.forEach((c: any) => {
|
state.activeCharts.forEach((c: any) => {
|
||||||
@@ -17,11 +16,21 @@ export function renderDashboard(mainContent: HTMLElement) {
|
|||||||
}
|
}
|
||||||
state.activeCharts = [];
|
state.activeCharts = [];
|
||||||
|
|
||||||
|
mainContent.innerHTML = `
|
||||||
|
<div class="view-content-wrapper">
|
||||||
|
<div id="dashboard-scroll-container" class="table-container" style="padding: 0;">
|
||||||
|
<div id="dashboard-inner-content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const innerContent = document.getElementById('dashboard-inner-content')!;
|
||||||
|
|
||||||
if (state.activeCategory === 'hw') {
|
if (state.activeCategory === 'hw') {
|
||||||
renderHwDashboard(mainContent);
|
renderHwDashboard(innerContent);
|
||||||
} else if (state.activeCategory === 'sw') {
|
} else if (state.activeCategory === 'sw') {
|
||||||
renderSwDashboard(mainContent);
|
renderSwDashboard(innerContent);
|
||||||
} else {
|
} else {
|
||||||
mainContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">운영 서비스 대시보드는 준비 중입니다.</div>`;
|
innerContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">해당 카테고리의 대시보드는 준비 중입니다.</div>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -34,9 +34,9 @@ export function renderPartsMasterList(container: HTMLElement) {
|
|||||||
width: '15%',
|
width: '15%',
|
||||||
render: c => {
|
render: c => {
|
||||||
let badgeClass = 'badge-primary';
|
let badgeClass = 'badge-primary';
|
||||||
if (c.category === 'CPU') badgeClass = 'b-primary';
|
if (c.category === 'CPU') badgeClass = 'badge-primary';
|
||||||
else if (c.category === 'GPU') badgeClass = 'b-purple';
|
else if (c.category === 'GPU') badgeClass = 'badge-success';
|
||||||
else if (c.category === 'RAM') badgeClass = 'b-green';
|
else if (c.category === 'RAM') badgeClass = 'badge-warning';
|
||||||
return `<span class="badge ${badgeClass}">${c.category}</span>`;
|
return `<span class="badge ${badgeClass}">${c.category}</span>`;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -133,18 +133,22 @@ function renderSubTabs(container: HTMLElement) {
|
|||||||
const header = container.querySelector('.page-header');
|
const header = container.querySelector('.page-header');
|
||||||
if (!header) return;
|
if (!header) return;
|
||||||
|
|
||||||
|
// 기존에 생성된 탭 바가 있다면 제거하여 중복 방지 (스타일만 수정하는 최소 침습 방식)
|
||||||
|
const existingTabs = container.querySelector('.sub-tab-container');
|
||||||
|
if (existingTabs) existingTabs.remove();
|
||||||
|
|
||||||
const tabContainer = document.createElement('div');
|
const tabContainer = document.createElement('div');
|
||||||
tabContainer.className = 'sub-tab-container';
|
tabContainer.className = 'sub-tab-container';
|
||||||
tabContainer.style.cssText = 'display: flex; gap: 16px; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 0;';
|
tabContainer.style.cssText = 'display: flex; gap: 1rem; padding: 0 2rem; border-bottom: 1px solid var(--hairline); background: var(--canvas);';
|
||||||
|
|
||||||
const tab1Active = activePartsMasterSubTab === 'parts-master';
|
const tab1Active = activePartsMasterSubTab === 'parts-master';
|
||||||
const tab2Active = activePartsMasterSubTab === 'job-spec';
|
const tab2Active = activePartsMasterSubTab === 'job-spec';
|
||||||
|
|
||||||
tabContainer.innerHTML = `
|
tabContainer.innerHTML = `
|
||||||
<button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab1Active ? 'var(--primary-color)' : 'transparent'};">
|
<button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab1Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
|
||||||
부품 표준 등급
|
부품 표준 등급
|
||||||
</button>
|
</button>
|
||||||
<button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab2Active ? 'var(--primary-color)' : 'transparent'};">
|
<button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab2Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
|
||||||
직무별 기준 사양
|
직무별 기준 사양
|
||||||
</button>
|
</button>
|
||||||
`;
|
`;
|
||||||
@@ -168,4 +172,3 @@ function renderSubTabs(container: HTMLElement) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -22,10 +22,11 @@ export function renderServerList(container: HTMLElement) {
|
|||||||
onRowClick: (asset) => openHwModal(asset, 'view'),
|
onRowClick: (asset) => openHwModal(asset, 'view'),
|
||||||
columns: [
|
columns: [
|
||||||
{ header: ASSET_SCHEMA.CURRENT_DEPT.ui, sortKey: ASSET_SCHEMA.CURRENT_DEPT.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_DEPT.key] || '-' },
|
{ header: ASSET_SCHEMA.CURRENT_DEPT.ui, sortKey: ASSET_SCHEMA.CURRENT_DEPT.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_DEPT.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
|
{ header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, align: 'center', width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
|
||||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
{
|
{
|
||||||
header: '모델/메인보드',
|
header: '모델/메인보드',
|
||||||
|
align: 'center',
|
||||||
width: '15%',
|
width: '15%',
|
||||||
render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || a[ASSET_SCHEMA.MAINBOARD.key] || '-')
|
render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || a[ASSET_SCHEMA.MAINBOARD.key] || '-')
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ export function renderStorageList(container: HTMLElement) {
|
|||||||
{ header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
|
{ header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
{ header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
|
{ header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
|
||||||
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
|
{ header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, align: 'center', render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
|
||||||
{ header: ASSET_SCHEMA.SERIAL_NUM.ui, sortKey: ASSET_SCHEMA.SERIAL_NUM.key, align: 'center', render: a => a[ASSET_SCHEMA.SERIAL_NUM.key] || '-' },
|
{ header: ASSET_SCHEMA.SERIAL_NUM.ui, sortKey: ASSET_SCHEMA.SERIAL_NUM.key, align: 'center', render: a => a[ASSET_SCHEMA.SERIAL_NUM.key] || '-' },
|
||||||
{
|
{
|
||||||
header: ASSET_SCHEMA.LOCATION.ui,
|
header: ASSET_SCHEMA.LOCATION.ui,
|
||||||
|
|||||||
@@ -4,12 +4,11 @@ import { ASSET_SCHEMA } from '../core/schema';
|
|||||||
import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
|
import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 위치 중심 자산 현황 뷰 (Refined)
|
* 위치 중심 자산 현황 뷰 (Vercel Integrated)
|
||||||
*/
|
*/
|
||||||
export async function renderLocationView(container: HTMLElement) {
|
export async function renderLocationView(container: HTMLElement) {
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
// 로컬 상태 (UI 제어용)
|
|
||||||
let currentLoc = '기술개발센터';
|
let currentLoc = '기술개발센터';
|
||||||
let currentDetail = '서버실';
|
let currentDetail = '서버실';
|
||||||
let currentPage = 0;
|
let currentPage = 0;
|
||||||
@@ -26,40 +25,51 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
: [];
|
: [];
|
||||||
const mapPath = locImages[currentPage] || '';
|
const mapPath = locImages[currentPage] || '';
|
||||||
|
|
||||||
// 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
|
// 조회 모드: 설정 파일에 정의된 asset_id를 기준으로 자산 데이터 매핑
|
||||||
const allBoxes = mapConfig[mapPath] || [];
|
const allBoxes = mapConfig[mapPath] || [];
|
||||||
const boxes = allBoxes.filter((box: any) =>
|
const boxes = allBoxes.filter((box: any) => box.asset_id != null);
|
||||||
state.masterData.hw.some(a =>
|
|
||||||
a.location === currentLoc &&
|
// 모든 하드웨어 카테고리에서 자산 검색
|
||||||
a.location_detail === currentDetail &&
|
const allHwAssets = [
|
||||||
String(a.loc_x) === String(box.x) &&
|
...state.masterData.pc,
|
||||||
String(a.loc_y) === String(box.y)
|
...state.masterData.server,
|
||||||
)
|
...state.masterData.storage,
|
||||||
);
|
...state.masterData.network,
|
||||||
|
...state.masterData.equipment,
|
||||||
|
...state.masterData.survey,
|
||||||
|
...state.masterData.officeSupplies,
|
||||||
|
...state.masterData.pcParts
|
||||||
|
];
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="location-view-wrapper">
|
<div class="location-view-wrapper">
|
||||||
<!-- 2단계 필터 바 -->
|
<!-- 상단 통합 바 (Unified Search Bar) -->
|
||||||
<div class="location-filter-bar">
|
<div class="location-filter-bar search-bar">
|
||||||
<div class="filter-group">
|
<div class="search-item">
|
||||||
|
<label class="list-view-toggle-label">
|
||||||
|
<input type="checkbox" id="chk-list-view-loc" />
|
||||||
|
목록보기
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="search-item">
|
||||||
<label>건물/위치</label>
|
<label>건물/위치</label>
|
||||||
<select id="sel-loc-main">
|
<select id="sel-loc-main">
|
||||||
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
|
${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-group">
|
<div class="search-item">
|
||||||
<label>상세 위치</label>
|
<label>상세 위치</label>
|
||||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
<div class="flex items-center gap-2">
|
||||||
<select id="sel-loc-detail">
|
<select id="sel-loc-detail">
|
||||||
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
|
${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<!-- 페이지네이션을 상세 위치 바로 옆으로 이동 -->
|
<!-- 페이지네이션 -->
|
||||||
${locImages.length > 1 ? `
|
${locImages.length > 1 ? `
|
||||||
<div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
|
<div class="map-pagination-group">
|
||||||
<div class="page-btns">
|
<div class="page-btns flex gap-1">
|
||||||
<button id="btn-prev-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
|
<button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
|
||||||
<button id="btn-next-page" class="btn btn-outline btn-sm" style="height: 28px; padding: 0 8px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
|
<button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
|
||||||
</div>
|
</div>
|
||||||
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
|
<span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -68,49 +78,49 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="location-main-content" style="height: calc(100vh - 180px); align-items: stretch; gap: 1rem; padding: 1rem; overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr;">
|
<div class="location-main-content">
|
||||||
<!-- 지도 섹션: 상단 고정 정렬로 밀림 방지 -->
|
<!-- 지도 섹션 -->
|
||||||
<div class="map-container-section" style="position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--border-color); background: #f1f5f9; display: flex; align-items: flex-start; justify-content: center;">
|
<div class="map-container-section">
|
||||||
<div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
|
<div class="map-frame-wrapper">
|
||||||
${mapPath ? `
|
${mapPath ? `
|
||||||
<img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
|
<img src="${mapPath}" id="main-map-img" class="map-image">
|
||||||
<div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
|
<div id="box-overlay" class="map-overlay">
|
||||||
${boxes.map((box: any, idx: number) => {
|
${boxes.map((box: any, idx: number) => {
|
||||||
const name = box.name || `#${idx+1}`;
|
const asset = allHwAssets.find(a => a.id === box.asset_id);
|
||||||
|
const name = asset ? ((asset as any).asset_purpose || asset.asset_code) : (box.name || `#${idx+1}`);
|
||||||
|
// w, h가 없거나 너무 작으면 최소 크기(3%) 보장하여 영역으로 표시
|
||||||
|
const width = Math.max(parseFloat(box.w || '3'), 3);
|
||||||
|
const height = Math.max(parseFloat(box.h || '3'), 3);
|
||||||
return `
|
return `
|
||||||
<div class="location-box-point"
|
<div class="location-box-area"
|
||||||
|
data-asset-id="${box.asset_id}"
|
||||||
data-name="${name}"
|
data-name="${name}"
|
||||||
data-x="${box.x}"
|
style="left:${box.x}%; top:${box.y}%; width:${width}%; height:${height}%;
|
||||||
data-y="${box.y}"
|
border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto; position: absolute;">
|
||||||
style="position: absolute; left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
|
|
||||||
border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto;">
|
|
||||||
</div>
|
</div>
|
||||||
`}).join('')}
|
`}).join('')}
|
||||||
</div>
|
</div>
|
||||||
` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
|
` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 상세 정보 섹션: 내부 스크롤만 허용 -->
|
<!-- 상세 정보 섹션 -->
|
||||||
<div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff; border-radius: 8px; border: 1px solid var(--border-color);">
|
<div class="asset-list-section">
|
||||||
<div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
|
<div class="section-header">
|
||||||
<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 700;">📍 구역을 선택하세요</h4>
|
<h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
|
||||||
</div>
|
</div>
|
||||||
<div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
|
<div id="loc-asset-table-container" class="mini-table-wrapper">
|
||||||
<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>
|
<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 0 1.5rem 0.5rem; flex-shrink: 0;">
|
|
||||||
<p style="font-size:0.75rem; color:var(--text-muted); margin: 0;">* 지도 위의 구역을 클릭하면 자산 상세 정보가 표시됩니다.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
// 이미지 로드 및 윈도우 리사이즈 시 오버레이 크기와 위치를 이미지에 정확히 맞춤
|
|
||||||
const syncOverlaySize = () => {
|
const syncOverlaySize = () => {
|
||||||
const img = container.querySelector('#main-map-img') as HTMLImageElement;
|
const img = container.querySelector('#main-map-img') as HTMLImageElement;
|
||||||
const overlay = container.querySelector('#box-overlay') as HTMLElement;
|
const overlay = container.querySelector('#box-overlay') as HTMLElement;
|
||||||
|
|
||||||
if (img && overlay && img.complete) {
|
if (img && overlay && img.complete) {
|
||||||
overlay.style.width = img.clientWidth + 'px';
|
overlay.style.width = img.clientWidth + 'px';
|
||||||
overlay.style.height = img.clientHeight + 'px';
|
overlay.style.height = img.clientHeight + 'px';
|
||||||
@@ -123,7 +133,7 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
if (img) {
|
if (img) {
|
||||||
if (img.complete) {
|
if (img.complete) {
|
||||||
syncOverlaySize();
|
syncOverlaySize();
|
||||||
setTimeout(syncOverlaySize, 50); // 레이아웃 안정화 대기
|
setTimeout(syncOverlaySize, 50);
|
||||||
} else {
|
} else {
|
||||||
img.onload = syncOverlaySize;
|
img.onload = syncOverlaySize;
|
||||||
}
|
}
|
||||||
@@ -132,7 +142,6 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
window.removeEventListener('resize', syncOverlaySize);
|
window.removeEventListener('resize', syncOverlaySize);
|
||||||
window.addEventListener('resize', syncOverlaySize);
|
window.addEventListener('resize', syncOverlaySize);
|
||||||
|
|
||||||
// 이벤트 바인딩
|
|
||||||
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
|
const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
|
||||||
selMain?.addEventListener('change', () => {
|
selMain?.addEventListener('change', () => {
|
||||||
currentLoc = selMain.value;
|
currentLoc = selMain.value;
|
||||||
@@ -151,23 +160,33 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
|
container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
|
||||||
container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
|
container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
|
||||||
|
|
||||||
container.querySelectorAll('.location-box-point').forEach(box => {
|
const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
|
||||||
|
|
||||||
|
if (chkBox) {
|
||||||
|
chkBox.checked = (state as any).currentViewMode === 'asset';
|
||||||
|
const handleToggle = () => {
|
||||||
|
const isListMode = chkBox.checked;
|
||||||
|
if (isListMode) {
|
||||||
|
state.viewMode = 'list';
|
||||||
|
(state as any).currentViewMode = 'asset';
|
||||||
|
} else {
|
||||||
|
state.viewMode = 'location';
|
||||||
|
(state as any).currentViewMode = 'location';
|
||||||
|
}
|
||||||
|
window.dispatchEvent(new Event('refresh-view'));
|
||||||
|
};
|
||||||
|
chkBox.addEventListener('change', handleToggle);
|
||||||
|
}
|
||||||
|
|
||||||
|
container.querySelectorAll('.location-box-area').forEach(box => {
|
||||||
box.addEventListener('click', () => {
|
box.addEventListener('click', () => {
|
||||||
const x = box.getAttribute('data-x');
|
const assetId = box.getAttribute('data-asset-id');
|
||||||
const y = box.getAttribute('data-y');
|
if (!assetId) return;
|
||||||
|
|
||||||
const targetAsset = state.masterData.hw.find(a =>
|
const targetAsset = allHwAssets.find(a => a.id === assetId);
|
||||||
a.location === currentLoc &&
|
|
||||||
a.location_detail === currentDetail &&
|
|
||||||
String(a.loc_x) === String(x) &&
|
|
||||||
String(a.loc_y) === String(y)
|
|
||||||
);
|
|
||||||
|
|
||||||
if (targetAsset) {
|
if (targetAsset) renderAssetDetail(targetAsset);
|
||||||
renderAssetDetail(targetAsset);
|
container.querySelectorAll('.location-box-area').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
|
||||||
}
|
|
||||||
|
|
||||||
container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
|
|
||||||
(box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
|
(box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -179,64 +198,54 @@ export async function renderLocationView(container: HTMLElement) {
|
|||||||
|
|
||||||
title.innerHTML = `
|
title.innerHTML = `
|
||||||
<div class="detail-header-actions">
|
<div class="detail-header-actions">
|
||||||
<button id="btn-back-to-list" class="btn-icon" style="background: none; border: none; cursor: pointer; color: var(--primary-color); font-size: 1.2rem; padding: 0 4px;">←</button>
|
<div class="header-identity">
|
||||||
<span class="detail-header-title">자산 상세 정보</span>
|
<span class="asset-code-title">${asset.asset_code || '미부여'}</span>
|
||||||
<button id="btn-edit-from-loc" class="btn btn-primary btn-sm" style="font-size: 11px; height: 28px;">수정</button>
|
<span class="service-type-badge">${asset.service_type || '운영'}</span>
|
||||||
|
<span class="asset-type-label">${asset.asset_type || 'PC'}</span>
|
||||||
|
</div>
|
||||||
|
<button id="btn-view-from-loc" class="btn btn-primary btn-sm">조회</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const renderSection = (title: string, fields: { label: string; value: any }[]) => `
|
const fields = [
|
||||||
<div class="detail-section">
|
{ label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
|
||||||
<div class="detail-section-title">${title}</div>
|
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
|
||||||
<div class="detail-grid">
|
{ label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
|
||||||
|
{ label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
|
||||||
|
{ label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
|
||||||
|
{ label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
|
||||||
|
{ label: ASSET_SCHEMA.OS.ui, value: asset.os },
|
||||||
|
{ label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
|
||||||
|
{ label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
|
||||||
|
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
|
||||||
|
{ label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
|
||||||
|
{ label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
|
||||||
|
{ label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
|
||||||
|
{ label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
|
||||||
|
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
|
||||||
|
];
|
||||||
|
|
||||||
|
const sectionsHTML = `
|
||||||
|
<div class="detail-section" style="margin-bottom: 0;">
|
||||||
|
<div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
|
||||||
${fields.map(f => `
|
${fields.map(f => `
|
||||||
<div class="detail-label">${f.label}</div>
|
<div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
|
||||||
<div class="detail-value">${f.value || '-'}</div>
|
<div class="detail-label-sm">${f.label}</div>
|
||||||
|
<div class="detail-value-lg">${f.value || '-'}</div>
|
||||||
|
</div>
|
||||||
`).join('')}
|
`).join('')}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const sectionsHTML = [
|
|
||||||
renderSection('기본 관리 정보', [
|
|
||||||
{ label: ASSET_SCHEMA.ASSET_CODE.ui, value: asset.asset_code },
|
|
||||||
{ label: ASSET_SCHEMA.PURCHASE_CORP.ui, value: asset.purchase_corp },
|
|
||||||
{ label: ASSET_SCHEMA.CATEGORY.ui, value: asset.category },
|
|
||||||
{ label: ASSET_SCHEMA.ASSET_TYPE.ui, value: asset.asset_type },
|
|
||||||
{ label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status }
|
|
||||||
]),
|
|
||||||
renderSection('시스템 사양', [
|
|
||||||
{ label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
|
|
||||||
{ label: ASSET_SCHEMA.OS.ui, value: asset.os },
|
|
||||||
{ label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
|
|
||||||
{ label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
|
|
||||||
{ label: ASSET_SCHEMA.GPU.ui, value: asset.gpu }
|
|
||||||
]),
|
|
||||||
renderSection('네트워크 정보', [
|
|
||||||
{ label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
|
|
||||||
{ label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
|
|
||||||
{ label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool }
|
|
||||||
]),
|
|
||||||
renderSection('구매 및 기타', [
|
|
||||||
{ label: ASSET_SCHEMA.PURCHASE_DATE.ui, value: asset.purchase_date },
|
|
||||||
{ label: ASSET_SCHEMA.PURCHASE_AMOUNT.ui, value: asset.purchase_amount ? `${Number(asset.purchase_amount).toLocaleString()}원` : '-' },
|
|
||||||
{ label: ASSET_SCHEMA.MEMO.ui, value: asset.memo }
|
|
||||||
])
|
|
||||||
].join('');
|
|
||||||
|
|
||||||
tableContainer.innerHTML = `
|
tableContainer.innerHTML = `
|
||||||
<div class="asset-detail-sidebar">
|
<div class="asset-detail-sidebar">
|
||||||
${sectionsHTML}
|
${sectionsHTML}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
|
container.querySelector('#btn-view-from-loc')?.addEventListener('click', () => {
|
||||||
title.textContent = `📍 구역을 선택하세요`;
|
openHwModal(asset, 'view');
|
||||||
tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem;">지도에서 자산 위치를 클릭하세요.</div>`;
|
|
||||||
});
|
|
||||||
|
|
||||||
container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
|
|
||||||
openHwModal(asset, 'edit');
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -18,6 +18,7 @@ export class MapEditor {
|
|||||||
private startY: number = 0;
|
private startY: number = 0;
|
||||||
private currentBox: HTMLElement | null = null;
|
private currentBox: HTMLElement | null = null;
|
||||||
private currentPath: string = '';
|
private currentPath: string = '';
|
||||||
|
private assetOptions: {id: string, name: string}[] = [];
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.container = document.getElementById('container')!;
|
this.container = document.getElementById('container')!;
|
||||||
@@ -33,11 +34,35 @@ export class MapEditor {
|
|||||||
public async init() {
|
public async init() {
|
||||||
this.renderFileSidebar();
|
this.renderFileSidebar();
|
||||||
await this.loadConfig();
|
await this.loadConfig();
|
||||||
|
await this.loadAssets();
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
this.selectFirstFile();
|
this.selectFirstFile();
|
||||||
createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
|
createIcons({ icons: { X, Save, Trash2, ChevronLeft, ChevronRight } });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private async loadAssets() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`http://${location.hostname}:3000/api/assets/master`);
|
||||||
|
const masterData = await res.json();
|
||||||
|
const allHw = [
|
||||||
|
...(masterData.pc || []),
|
||||||
|
...(masterData.server || []),
|
||||||
|
...(masterData.storage || []),
|
||||||
|
...(masterData.network || []),
|
||||||
|
...(masterData.equipment || []),
|
||||||
|
...(masterData.survey || []),
|
||||||
|
...(masterData.officeSupplies || []),
|
||||||
|
...(masterData.pcParts || [])
|
||||||
|
];
|
||||||
|
this.assetOptions = allHw.map(a => ({
|
||||||
|
id: a.id,
|
||||||
|
name: `[${a.asset_code}] ${a.asset_purpose || a.model_name || a.category}`
|
||||||
|
}));
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to load assets for mapping', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private renderFileSidebar() {
|
private renderFileSidebar() {
|
||||||
let html = '';
|
let html = '';
|
||||||
Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
|
Object.entries(IMAGE_LOCATIONS).forEach(([bldg, details]) => {
|
||||||
@@ -137,7 +162,8 @@ export class MapEditor {
|
|||||||
x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
|
x: (parseFloat(this.currentBox.style.left) / rect.width * 100).toFixed(2),
|
||||||
y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
|
y: (parseFloat(this.currentBox.style.top) / rect.height * 100).toFixed(2),
|
||||||
w: (width / rect.width * 100).toFixed(2),
|
w: (width / rect.width * 100).toFixed(2),
|
||||||
h: (height / rect.height * 100).toFixed(2)
|
h: (height / rect.height * 100).toFixed(2),
|
||||||
|
asset_id: null
|
||||||
};
|
};
|
||||||
this.boxes.push(boxData);
|
this.boxes.push(boxData);
|
||||||
this.render();
|
this.render();
|
||||||
@@ -210,13 +236,63 @@ export class MapEditor {
|
|||||||
|
|
||||||
this.wrapper.appendChild(div);
|
this.wrapper.appendChild(div);
|
||||||
|
|
||||||
|
// Create asset options dropdown
|
||||||
|
let optionsHtml = '<option value="">-- 자산 매핑 안 됨 --</option>';
|
||||||
|
this.assetOptions.forEach(opt => {
|
||||||
|
const selected = box.asset_id === opt.id ? 'selected' : '';
|
||||||
|
optionsHtml += `<option value="${opt.id}" ${selected}>${opt.name}</option>`;
|
||||||
|
});
|
||||||
|
|
||||||
const item = document.createElement('div');
|
const item = document.createElement('div');
|
||||||
item.className = 'box-item';
|
item.className = 'box-item';
|
||||||
item.innerHTML = `
|
item.innerHTML = `
|
||||||
<span>#${i+1}: [${box.x}, ${box.y}]</span>
|
<div class="box-header">
|
||||||
<button class="btn-del" onclick="removeBox(${i})">×</button>
|
<span class="box-index">#${i+1}</span>
|
||||||
|
<button class="btn-del" onclick="removeBox(${i})">×</button>
|
||||||
|
</div>
|
||||||
|
<div class="box-inputs" style="margin-bottom: 8px;">
|
||||||
|
<select data-index="${i}" data-prop="asset_id" style="width: 100%; padding: 4px;">
|
||||||
|
${optionsHtml}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="box-inputs">
|
||||||
|
<div class="input-group">
|
||||||
|
<label>X</label>
|
||||||
|
<input type="number" step="0.01" value="${box.x}" data-index="${i}" data-prop="x">
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label>Y</label>
|
||||||
|
<input type="number" step="0.01" value="${box.y}" data-index="${i}" data-prop="y">
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label>W</label>
|
||||||
|
<input type="number" step="0.01" value="${box.w}" data-index="${i}" data-prop="w">
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<label>H</label>
|
||||||
|
<input type="number" step="0.01" value="${box.h}" data-index="${i}" data-prop="h">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
this.boxListEl.appendChild(item);
|
this.boxListEl.appendChild(item);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add events to new inputs and selects
|
||||||
|
this.boxListEl.querySelectorAll('input, select').forEach(input => {
|
||||||
|
input.addEventListener('change', (e) => {
|
||||||
|
const target = e.target as HTMLInputElement | HTMLSelectElement;
|
||||||
|
const index = parseInt(target.dataset.index!);
|
||||||
|
const prop = target.dataset.prop!;
|
||||||
|
|
||||||
|
if (this.boxes[index]) {
|
||||||
|
if (prop === 'asset_id') {
|
||||||
|
this.boxes[index][prop] = target.value || null;
|
||||||
|
} else {
|
||||||
|
this.boxes[index][prop] = parseFloat(target.value).toFixed(2);
|
||||||
|
this.render(); // Re-render to update the map visual size
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,18 +15,22 @@ import { renderGiftList } from './List/GiftListView';
|
|||||||
import { renderFacilityList } from './List/FacilityListView';
|
import { renderFacilityList } from './List/FacilityListView';
|
||||||
import { renderCostList } from './List/CostListView';
|
import { renderCostList } from './List/CostListView';
|
||||||
import { renderUserList } from './List/UserListView';
|
import { renderUserList } from './List/UserListView';
|
||||||
import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings } from 'lucide';
|
import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, BookOpen, Settings } from 'lucide';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 자산 목록 테이블 렌더링 통합 허브
|
* 자산 목록 테이블 렌더링 통합 허브 (Vercel Style Normalized)
|
||||||
*/
|
*/
|
||||||
export function renderSWTable(mainContent: HTMLElement) {
|
export function renderSWTable(mainContent: HTMLElement) {
|
||||||
if (!mainContent) return;
|
if (!mainContent) return;
|
||||||
console.log(`📂 Rendering Table for: ${state.activeCategory} / ${state.activeSubTab}`);
|
console.log(`📂 Rendering Table for: ${state.activeCategory} / ${state.activeSubTab}`);
|
||||||
|
|
||||||
mainContent.innerHTML = '';
|
mainContent.innerHTML = `
|
||||||
const container = document.createElement('div');
|
<div class="view-content-wrapper">
|
||||||
container.className = 'view-container';
|
<div id="list-view-container" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const container = document.getElementById('list-view-container')!;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const tab = state.activeSubTab;
|
const tab = state.activeSubTab;
|
||||||
@@ -69,11 +73,9 @@ export function renderSWTable(mainContent: HTMLElement) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
mainContent.appendChild(container);
|
// 전역 아이콘 초기화
|
||||||
|
|
||||||
// 전역 아이콘 초기화 (한 번 더 실행하여 누락 방지)
|
|
||||||
createIcons({
|
createIcons({
|
||||||
icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings }
|
icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, BookOpen, Settings }
|
||||||
});
|
});
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
console.error('❌ Error rendering table view:', err);
|
console.error('❌ Error rendering table view:', err);
|
||||||
|
|||||||
@@ -1,71 +0,0 @@
|
|||||||
import mysql from 'mysql2/promise';
|
|
||||||
import dotenv from 'dotenv';
|
|
||||||
import crypto from 'crypto';
|
|
||||||
|
|
||||||
dotenv.config();
|
|
||||||
|
|
||||||
const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
|
|
||||||
|
|
||||||
const CATEGORIES = ['PC', '서버', '노트북', '모니터', '업무지원장비'];
|
|
||||||
const DEPTS = ['기술개발센터', '총괄기획실', '한맥', '삼안', '장헌', '한라'];
|
|
||||||
const USERS = ['홍길동', '김철수', '이영희', '박지성', '손흥민', '봉준호', '싸이'];
|
|
||||||
const STATUSES = ['운영', '재고', '수리', '폐기', '기타'];
|
|
||||||
const CORPS = ['한맥', '삼안', '장헌', '한라', 'PTC', '바론'];
|
|
||||||
|
|
||||||
async function generateTestData() {
|
|
||||||
const connection = await mysql.createConnection({
|
|
||||||
host: DB_HOST,
|
|
||||||
user: DB_USER,
|
|
||||||
password: DB_PASS,
|
|
||||||
database: DB_NAME,
|
|
||||||
port: parseInt(DB_PORT || '3306')
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('🚀 무작위 테스트 데이터 생성을 시작합니다 (Crypto UUID 방식)...');
|
|
||||||
|
|
||||||
for (let i = 1; i <= 20; i++) {
|
|
||||||
const category = CATEGORIES[Math.floor(Math.random() * CATEGORIES.length)];
|
|
||||||
const dept = DEPTS[Math.floor(Math.random() * DEPTS.length)];
|
|
||||||
const user = USERS[Math.floor(Math.random() * USERS.length)];
|
|
||||||
const status = STATUSES[Math.floor(Math.random() * STATUSES.length)];
|
|
||||||
const corp = CORPS[Math.floor(Math.random() * CORPS.length)];
|
|
||||||
|
|
||||||
// Crypto UUID 생성
|
|
||||||
const id = crypto.randomUUID();
|
|
||||||
const assetCode = `TEST-${Date.now().toString().slice(-6)}-${String(i).padStart(3, '0')}`;
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 1. asset_core 삽입 (id 수동 지정)
|
|
||||||
await connection.query(
|
|
||||||
`INSERT INTO asset_core
|
|
||||||
(id, asset_code, category, asset_type, purchase_corp, current_dept, user_current, purchase_date, service_type)
|
|
||||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
|
|
||||||
[id, assetCode, category, category, corp, dept, user, '2026-06-10', '내부']
|
|
||||||
);
|
|
||||||
|
|
||||||
// 2. asset_spec 삽입
|
|
||||||
await connection.query(
|
|
||||||
`INSERT INTO asset_spec
|
|
||||||
(asset_id, hw_status, model_name, cpu, ram)
|
|
||||||
VALUES (?, ?, ?, ?, ?)`,
|
|
||||||
[id, status, `${category} Model ${i}`, 'Intel i7', '16GB']
|
|
||||||
);
|
|
||||||
|
|
||||||
// 3. 초기 이력 삽입
|
|
||||||
await connection.query(
|
|
||||||
`INSERT INTO asset_history (asset_id, event_type, details, log_date, log_user)
|
|
||||||
VALUES (?, ?, ?, ?, ?)`,
|
|
||||||
[id, 'STATUS_CHANGE', `[최초 등록] 테스트 데이터 생성 (${status})`, '2026-06-10', '시스템']
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log(`✅ 생성 완료: ${assetCode} (${category} / ${dept} / ${user})`);
|
|
||||||
} catch (err) {
|
|
||||||
console.error(`❌ 생성 실패 (${i}):`, err.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
await connection.end();
|
|
||||||
console.log('\n✨ 20개의 테스트 데이터 생성이 완료되었습니다.');
|
|
||||||
}
|
|
||||||
|
|
||||||
generateTestData().catch(console.error);
|
|
||||||
Reference in New Issue
Block a user