Porawit/gravity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Porawit Dongwang
2026-09-16 23:20:08 +07:00
commit 0041668dbb
32577 changed files with 3687927 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
แบบประเมินของไอที ประจำปี/_OLD/แบบประเมินระเบียบ2569.html
+117
View File
@@ -0,0 +1,117 @@
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>แบบประเมินระเบียบปฏิบัติในการรักษาความมั่นคงปลอดภัยระบบเทคโนโลยีสารสนเทศ</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap');
:root { --ink:#1a2938; --muted:#66788a; --line:#dce5ec; --soft:#f6f9fb; --accent:#007f8b; --accent-dark:#005d68; --navy:#12344d; --gold:#f3ba4b; --shadow:0 18px 55px rgba(22,52,77,.13); }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(135deg,#e9f4f5 0%,#f5f8fb 48%,#e7edf5 100%); color:var(--ink); font-family:Sarabun,"TH Sarabun New",Tahoma,sans-serif; font-size:16px; line-height:1.55; }
.sheet { width:min(210mm,calc(100% - 32px)); min-height:297mm; margin:28px auto; padding:0 16mm 20mm; overflow:hidden; background:#fff; border:1px solid rgba(18,52,77,.08); border-radius:18px; box-shadow:var(--shadow); }
h1,h2,p { margin:0; }
h1 { position:relative; margin:0 -16mm; padding:18mm 18mm 5px; color:#fff; font-size:25px; line-height:1.35; text-align:center; font-weight:700; letter-spacing:.1px; background:radial-gradient(circle at 83% 20%,rgba(255,255,255,.19) 0 3px,transparent 4px),radial-gradient(circle at 87% 26%,rgba(255,255,255,.12) 0 12px,transparent 13px),linear-gradient(120deg,var(--navy),#075e70 70%,#008c8d); }
.subtitle { margin:0 -16mm; padding:2px 18mm 15mm; color:#d9fbfa; font-size:18px; text-align:center; font-weight:500; background:linear-gradient(120deg,var(--navy),#075e70 70%,#008c8d); }
.intro { margin-top:26px; padding:15px 18px; color:#385066; text-align:justify; text-indent:28px; background:#f0f8f8; border-left:4px solid var(--accent); border-radius:0 10px 10px 0; }
.section-title { display:flex; align-items:center; gap:10px; margin-top:30px; color:var(--navy); font-size:18px; font-weight:700; letter-spacing:.05px; }
.section-title::before { content:""; display:inline-block; width:9px; height:28px; flex:none; border-radius:8px; background:linear-gradient(180deg,#12a5a2,var(--accent-dark)); box-shadow:0 3px 8px rgba(0,127,139,.22); }
.details { display:grid; grid-template-columns:1.2fr 1fr 1.15fr; gap:14px; margin-top:13px; padding:17px; background:var(--soft); border:1px solid #e8eef3; border-radius:12px; }
label { display:block; font-weight:600; color:#344b60; }
input[type="text"], input[type="number"], textarea { width:100%; margin-top:3px; padding:8px 9px; color:var(--ink); font:inherit; background:#fff; border:1px solid #cfdae2; border-radius:7px; outline:none; transition:border-color .18s,box-shadow .18s; }
input[type="text"]:focus, input[type="number"]:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,127,139,.13); }
.use-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:13px 0 0; }
.option { display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 14px; cursor:pointer; color:#385066; font-weight:500; background:#fff; border:1px solid #d8e3ea; border-radius:10px; box-shadow:0 2px 4px rgba(25,57,79,.03); transition:transform .18s,border-color .18s,box-shadow .18s; }
.option:hover { transform:translateY(-1px); border-color:#8cc2c5; box-shadow:0 7px 18px rgba(21,77,92,.1); }
input[type="radio"] { width:18px; height:18px; flex:none; accent-color:var(--accent); cursor:pointer; }
.table-wrap { margin-top:13px; overflow-x:auto; border:1px solid #dce6ec; border-radius:12px; box-shadow:0 4px 16px rgba(18,52,77,.06); }
table { width:100%; min-width:730px; table-layout:fixed; border-collapse:separate; border-spacing:0; background:#fff; }
th,td { padding:9px 7px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; }
th:last-child,td:last-child { border-right:0; }
tbody tr:last-child td { border-bottom:0; }
th { color:#fff; text-align:center; font-weight:600; line-height:1.3; background:linear-gradient(180deg,#24526b,#173e55); }
thead tr+tr th { color:#ecfbfb; font-size:14px; background:#1c455e; }
tbody tr:nth-child(even) td { background:#f8fafc; }
tbody tr:hover td { background:#f0faf9; }
.rules th:first-child { width:61%; }
.rules th:not(:first-child) { width:6.5%; }
.rules td:first-child { padding:12px 14px; text-align:left; vertical-align:top; color:#324b60; }
.choice { padding:3px; text-align:center; }
.choice label { display:flex; justify-content:center; align-items:center; min-height:37px; }
.choice label:has(input:checked) { background:#d9f2ef; border-radius:6px; }
.sla th:first-child { width:40%; }
.sla th:nth-child(2) { width:12%; }
.sla th:nth-child(n+3):nth-child(-n+7) { width:7%; }
.sla th:last-child { width:13%; }
.sla td { text-align:center; }
.sla td:first-child { padding-left:14px; text-align:left; color:#324b60; }
.sla textarea { min-height:51px; margin:0; resize:vertical; border-color:transparent; background:transparent; }
.sla textarea:focus { border-color:var(--accent); background:#fff; }
.note { margin-top:9px; padding:10px 13px; color:#556b7c; font-size:15px; background:#fff8e9; border:1px solid #f5e2b2; border-radius:8px; }
.actions { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; padding-top:20px; border-top:1px solid #e4ebf0; }
button { padding:10px 20px; color:#fff; font:inherit; font-weight:600; cursor:pointer; border:0; border-radius:8px; background:linear-gradient(135deg,#008f91,var(--accent-dark)); box-shadow:0 6px 13px rgba(0,93,104,.2); transition:transform .18s,box-shadow .18s; }
button:hover { transform:translateY(-1px); box-shadow:0 9px 18px rgba(0,93,104,.27); }
button:focus-visible { outline:3px solid rgba(243,186,75,.75); outline-offset:2px; }
button[type="reset"] { color:#4c6172; background:#fff; border:1px solid #cddae2; box-shadow:none; }
@media print { body { background:#fff; } .sheet { width:100%; min-height:0; margin:0; padding:0 12mm 12mm; border:0; border-radius:0; box-shadow:none; } h1,.subtitle { margin:0 -12mm; } .actions { display:none; } }
@media (max-width:650px) { .sheet { width:100%; margin:0; padding:0 16px 30px; border:0; border-radius:0; } h1 { margin:0 -16px; padding:40px 20px 8px; font-size:20px; } .subtitle { margin:0 -16px; padding:3px 20px 32px; font-size:16px; } .details,.use-options { grid-template-columns:1fr; } .section-title { margin-top:25px; font-size:17px; } .actions { justify-content:stretch; } button { flex:1; padding:11px 10px; } }
</style>
</head>
<body>
<main class="sheet">
<form id="assessment">
<h1>แบบประเมินระเบียบปฏิบัติในการรักษาความมั่นคงปลอดภัยระบบเทคโนโลยีสารสนเทศ</h1>
<p class="subtitle">โรงพยาบาลเกาะสมุย พ.ศ.2569</p>
<p class="intro"><strong>คำอธิบาย</strong> แบบประเมินมี 4 ส่วน กรุณาตอบตามความเป็นจริงเพื่อกลุ่มงานสุขภาพดิจิทัลจะนำผลการประเมินไปวิเคราะห์เพื่อจัดการความั่นคงปลอดภัยระบบเทคโนโลยีสารสนเทศของโรงพยาบาลเกาะสมุย ให้เกิดประโยชน์สูงสุด</p>
<h2 class="section-title">ส่วนที่ 1 ข้อมูลผู้รับการประเมิน</h2>
<div class="details">
<label>ชื่อ-สกุล <input type="text" name="name" aria-label="ชื่อ-สกุล"></label>
<label>ตำแหน่ง <input type="text" name="position" aria-label="ตำแหน่ง"></label>
<label>หน่วยงาน <input type="text" name="department" aria-label="หน่วยงาน"></label>
</div>
<h2 class="section-title">ส่วนที่ 2 ท่านใช้คอมพิวเตอร์ในการปฏิบัติงานหรือไม่</h2>
<div class="use-options">
<label class="option"><input type="radio" name="computer_use" value="ใช้คอมพิวเตอร์ในการปฏิบัติงาน" required> 1.ใช้คอมพิวเตอร์ในการปฏิบัติงาน</label>
<label class="option"><input type="radio" name="computer_use" value="ไม่ได้ใช้คอมพิวเตอร์ในการปฏิบัติงาน"> 2.ไม่ได้ใช้คอมพิวเตอร์ในการปฏิบัติงาน</label>
</div>
<h2 class="section-title">ส่วนที่ 3 การประเมินการรับรู้ ความเข้าใจ และการปฏิบัติตามระเบียบในการรักษาความมั่นคงปลอดภัยระบบเทคโนโลยีสารสนเทศของโรงพยาบาลเกาะสมุย</h2>
<div class="table-wrap">
<table class="rules">
<thead><tr><th rowspan="2">ระเบียบ</th><th colspan="2">การรับรู้</th><th colspan="2">ความเข้าใจ</th><th colspan="2">การปฏิบัติ</th></tr><tr><th>รู้</th><th>ไม่รู้</th><th>เข้าใจ</th><th>ไม่เข้าใจ</th><th>ปฏิบัติได้</th><th>ปฏิบัติไม่ได้</th></tr></thead>
<tbody id="rules-body"></tbody>
</table>
</div>
<h2 class="section-title">ส่วนที่4 แบบประเมินข้อตกลงการให้บริการ Service Level Agreement (SLA) พ.ศ.2569</h2>
<p class="note"><strong>คำอธิบาย</strong> ส่วนนี้สำหรับเจ้าหน้าที่โรงพยาบาลเกาะสมุยที่ใช้คอมพิวเตอร์ในการปฏิบัติงาน หากท่านไม่ได้ใช้คอมพิวเตอร์ในการปฏิบัติงานไม่ต้องตอบส่วนนี้</p>
<div class="table-wrap">
<table class="sla">
<thead><tr><th rowspan="2">บริการ</th><th rowspan="2">เวลามาตรฐาน<br>(นาที)</th><th colspan="5">ระดับความพึงพอใจ</th><th rowspan="2">ระยะเวลาที่คาดหวัง<br>(นาที)<br>โปรดแสดงความคิดเห็น</th></tr><tr><th>5<br>มากที่สุด</th><th>4<br>มาก</th><th>3<br>ปานกลาง</th><th>2<br>น้อย</th><th>1<br>น้อยมาก</th></tr></thead>
<tbody id="sla-body"></tbody>
</table>
</div>
<div class="actions"><button type="reset">ล้างคำตอบ</button><button type="submit">ส่งแบบประเมิน</button></div>
</form>
</main>
<script>
const rules = [
'ผู้ใช้งานต้องดูแลรักษา ป้องกันความเสียหายที่อาจจะเกิดขึ้นกับเครื่องคอมพิวเตอร์อุปกรณ์ต่อพ่วง เช่น ไม่วางอาหารหรือเครื่องดื่มบริเวรณเครื่องเคอมพิวเตอร์ห้ามเคลื่อนย้าย ติดตั้งเพิ่มเติมหรือกระทำการใดๆโดยไม่ได้รับอนุญาตจากผู้ดูแลระบบ',
'ห้ามผู้ใช้งานดาวน์โหลด อัพเดท ติดตั้งโปรแกรมใด นอกเหนือจากที่ผู้ดูแลระบบอนุญาต',
'ห้ามผู้ใช้งานเปิดโปรแกรมเพื่อความบันเทิงส่วนบุคคล เช่น การดูหนัง เล่นเกมส์ในระหว่างปฏิบัติงาน',
'หากเจ้าหน้าที่โรงพยาบาลเกาะสมุยจำเป็นต้องการส่งข้อมูลผู้ป่วยปรึกษาเพื่อการรักษาทางสื่อสังคมออนไลน์ เช่น Facebook , Line, Website หรือโปรแกรมอื่นๆ ที่เชื่อมต่อกับอินเทอร์เน็ต ต้องขออนุญาตผู้ป่วยเป็นลายลักษณ์อักษรโดยส่งตรงไปยังบุคคลที่ต้องการปรึกษาเท่านั้น เมื่อเสร็จสิ้นการปรึกษาให้ทำการลบข้อมูล ชื่อ-นามสกุล เลขประจำตัวผู้ป่วย ข้อมูลการเจ็บป่วย รูปภาพ ผลการตรวจต่างๆ รวมถึงคลิปวิดีโอการดูแลรักษาของผู้ป่วยทุกอย่างออกจากสื่อสังคมออนไลน์ทุกครั้ง',
'ผู้ใช้งานต้องรักษาชื่อผู้ใช้ (Username) และ รหัสผ่าน (Password) เป็นความลับ ห้ามใช้ร่วมกับผู้อื่น',
'เจ้าหน้าที่โรงพยาบาลเกาะสมุยต้องเก็บรักษาความลับข้อมูลผู้ป่วย ต้องไม่เปิดเผยหรือส่งต่อข้อมูล ชื่อ-นามสกุล เลขประจำตัวผู้ป่วย ข้อมูลการเจ็บป่วย รูปภาพ ผลการตรวจต่างๆ รวมถึงคลิปวิดีโอการดูแลรักษาผู้ป่วยในทุกช่องทาง',
'ห้ามผู้ใช้งานเข้าถึงข้อมูลผู้ป่วยที่ไม่ได้อยู่ในความรับผิดชอบ โดยไม่ขออนุญาตจากแพทย์หรือผู้รับผิดชอบโดยตรง',
'เจ้าหน้าที่โรงพยาบาลเกาะสมุยต้องยอมรับและถือปฏิบัติตามกฎระเบียบที่กำหนดขึ้น และปฏิบัติตาม พรบ.คอมพิวเตอร์ พ.ศ.2560 อย่างเคร่งครัดจะอ้างว่าไม่ทราบไม่ได้ กรณีฝ่าฝืนระเบียบปฏิบัติฯนี้ ครั้งที่1แจ้งหัวหน้าตักเตือน/ครั้งที่2 แจ้งหัวหน้ากลุ่มงานตักเตือน/ครั้งที่3เขียนรายงานให้ผู้บริหาร'
];
const services = [['การให้คำปรึกษา ( help desk)',5],['แก้ไขปัญหาเครื่องคอมพิวเตอร์ขัดข้อง',30],['แก้ไขปัญหาเครื่องพิมพ์ขัดข้อง',15],['แก้ไขปัญหาเครื่องสำรองไฟขัดข้อง',15],['แก้ไขปัญหาอุปกรณ์ต่อพ่วงขัดข้อง',15],['แก้ไขปัญหาระบบเครือข่ายขัดข้อง',30],['แก้ไขปัญหาการใช้งานโปรแกรม HOSxP',15],['แก้ไขปัญหาการใช้งานโปรแกรมอื่นๆ',30],['ขอข้อมูลสารสนเทศ',420]];
document.querySelector('#rules-body').innerHTML = rules.map((r,i) => `<tr><td>${i+1}.${r}</td>${['knowledge','understanding','practice'].map(group => ['yes','no'].map((value,j) => `<td class="choice"><label><input aria-label="ข้อ ${i+1} ${group} ${value}" type="radio" name="rule_${i}_${group}" value="${j ? 'no' : 'yes'}"></label></td>`).join('')).join('')}</tr>`).join('');
document.querySelector('#sla-body').innerHTML = services.map(([service,minutes],i) => `<tr><td>${i+1}.${service}</td><td>${minutes}</td>${[5,4,3,2,1].map(score => `<td class="choice"><label><input aria-label="${service} ระดับ ${score}" type="radio" name="satisfaction_${i}" value="${score}"></label></td>`).join('')}<td><textarea name="comment_${i}" aria-label="ระยะเวลาที่คาดหวังและความคิดเห็น: ${service}"></textarea></td></tr>`).join('');
document.querySelector('#assessment').addEventListener('submit', event => { event.preventDefault(); alert('บันทึกแบบประเมินเรียบร้อยแล้ว'); });
</script>
</body>
</html>