Deneyim: Raci Matris

Excel ile sunulan tablolardan Kurumsal sunuma html görünümle geçmenin tam sırası. Excel de hazırlanan tablo html dosya içine sütun aralığı belirtilerek aktarılmakta ve içeride renklenmektedir. Profesyonel bir sunum için yapılan çalışmadır.

HTML Kod:

<!DOCTYPE html>

<head>

<title>RACI-Sorumluluk Matrisi - Kullanıcı Destek Koordinatörlüğü</title>

<style>

:root { --m: #0b4f8a; --bg: #eef4f8; --shadow: 0 3px 10px rgba(0,0,0,.12); --blue: #add8e6; --orange: #ffa500; --red: #ff4d4d; }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Segoe UI", Arial, sans-serif; }

body { background: var(--bg); padding: 8px; }

@media print {

body { background: #fff; padding: 0; }

.toolbar { display: none !important; }

table, th, td { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

@page { size: A4 landscape; margin: 10mm; }

}

.header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #fff; border: 2px solid #000; border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 8px; gap: 15px; }

.left { display: flex; align-items: center; gap: 12px; flex: 1; }

.logo img { height: 46px; }

.title1 { font-size: 20px; font-weight: 700; } .title2 { font-size: 11px; }

.center-title { flex: 1; text-align: center; font-size: 26px; font-weight: 800; color: #000; letter-spacing: 1px; }

.right { text-align: right; font-weight: 700; font-size: 14px; flex: 1; white-space: nowrap; }

.toolbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; background: #fff; padding: 10px 15px; border-radius: 8px; border: 1px solid var(--m); box-shadow: var(--shadow); align-items: center; }

.toolbar button { border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: #000; transition: 0.2s; }

.btn-blue { background: var(--blue); } .btn-orange { background: var(--orange); } .btn-red { background: var(--red); color: #fff !important; }

.table-container { background: #fff; border: 1px solid #000; padding: 10px; margin-bottom: 20px; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 11px; }

th, td { border: 1px solid #000; padding: 6px; }

th { background: #eee; font-weight: bold; text-align: center; }

/* Eklenen Düzenlemeler */

.text-nowrap { white-space: nowrap !important; }

.bg-r { background-color: #c8e6c9 !important; } .bg-a { background-color: #bbdefb !important; } .bg-c { background-color: #ffe0b2 !important; } .bg-i { background-color: #fff9c4 !important; } .bg-grey { background-color: #e0e0e0 !important; }

.text-left { text-align: left !important; } .text-center { text-align: center !important; }

</style>

</head>

<body>

<div><div class="title1">BT Sorumluluk Matrisi</div><div class="title2">Kullanıcı Destek Koordinatörlüğü</div></div>

</div>

<div class="center-title">RACI Matris</div>

<div class="right">TEKNİK İŞLETME DAİRESİ</div>

</div>

<div class="table-container">Lütfen Excel dosyası yükleyin.</div>

</div>

<button class="btn-blue" onclick="document.getElementById('fileInput').click()">📥 Excel İçeri Aktar</button>

<button class="btn-orange" onclick="App.exportExcel()">💾 Excel Dışarı Aktar</button>

<button class="btn-red" onclick="window.print()">🖨️ Yazdır / PDF Kaydet</button>

</div>

const App = {

rawData: [],

handleFile(e) {

const file = e.target.files[0];

const reader = new FileReader();

reader.onload = (evt) => {

const wb = XLSX.read(evt.target.result, { type: 'array' });

const ws = wb.Sheets[wb.SheetNames[0]];

const json = XLSX.utils.sheet_to_json(ws, { header: 1, defval: "" });

this.rawData = json.filter(row => row.some(cell => cell.toString().trim() !== ""));

const range = prompt("Lütfen sütun aralığını girin (Örn: A:J):", "A:J");

if(range) this.renderTable(range);

};

reader.readAsArrayBuffer(file);

renderTable(rangeStr) {

const [startChar, endChar] = rangeStr.split(':');

const sIdx = startChar.toUpperCase().charCodeAt(0) - 65;

const eIdx = endChar.toUpperCase().charCodeAt(0) - 65;

let totalCols = (eIdx - sIdx) + 1;

let columnSums = new Array(totalCols).fill(0);

// --- ANA TABLO ---

let html = '<div class="table-container"><table><thead><tr>';

for(let j=sIdx; j<=eIdx; j++) {

let title = this.rawData[0][j] || "";

let isNowrap = title.toLowerCase().includes("hizmet") ? "text-nowrap" : "";

if(title.toLowerCase().includes("sıra")) title = "Sıra<br>No";

html += `<th class="${isNowrap}">${title}</th>`;

}

html += '</tr></thead><tbody>';

for(let i=1; i<this.rawData.length; i++) {

let row = this.rawData[i];

html += '<tr>';

for(let j=sIdx; j<=eIdx; j++) {

let cellData = row[j] || "";

let header = (this.rawData[0][j] || "").toLowerCase();

// Hizmet içeren sütunlar için stil belirleme

let isHizmet = (header.includes("hizmet") || header.includes("ana") || header.includes("alt"));

let align = isHizmet ? "text-left" : "text-center";

let nowrap = isHizmet ? "text-nowrap" : "";

let val = cellData.toString().trim().toUpperCase().replace(/\s+/g, '');

let colorClass = "";

if(val === 'R') { colorClass = "bg-r"; columnSums[j-sIdx]++; }

else if(val === 'A') { colorClass = "bg-a"; columnSums[j-sIdx]++; }

else if(val === 'C') { colorClass = "bg-c"; columnSums[j-sIdx]++; }

else if(val === 'I') { colorClass = "bg-i"; columnSums[j-sIdx]++; }

else if(val === 'I,R' || val === 'R,I') { colorClass = "bg-i"; columnSums[j-sIdx]++; }

html += `<td class="${align} ${nowrap} ${colorClass}">${cellData}</td>`;

}

html += '</tr>';

}

// Sütun Toplamları Satırı

html += '<tr class="bg-grey" style="font-weight:bold;"><td>Toplamlar</td>';

for(let k=1; k<totalCols; k++) {

html += `<td class="text-center">${columnSums[k] > 0 ? columnSums[k] : ""}</td>`;

}

html += '</tr></tbody></table></div>';

document.getElementById('tableWrapper').innerHTML = html;

exportExcel() {

const ws = XLSX.utils.aoa_to_sheet(this.rawData);

const wb = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(wb, ws, "RACI_Matrisi");

XLSX.writeFile(wb, "RACI_Matrisi.xlsx");

}

};

</script>

</body>

</html>