You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.2 KiB
61 lines
2.2 KiB
// -------------------------------------------------- |
|
const caseCounter = document.getElementById('case-counter'); |
|
const caseCounter2 = document.getElementById('case-counter2'); |
|
let response = []; |
|
// { col:6,eventType: '類型4', todayCount: 5, lastUpdate: '2023-06-07' }, |
|
|
|
function drawCounter(data) { |
|
// 清空 DOM |
|
caseCounter.innerHTML = ''; |
|
caseCounter2.innerHTML = ''; |
|
|
|
// 重新繪製 DOM |
|
response = data; |
|
response.forEach((eventInfo, index) => { |
|
const card = ` |
|
<div class="col-${eventInfo.col} p-3"> |
|
<div class="card mb-3 card-style-${index + 1}"> |
|
<div class="row g-0"> |
|
<div class="col-md-12"> |
|
<div class="card-body p-0"> |
|
<h5 class="card-title p-2">${eventInfo.eventType}</h5> |
|
<p class="card-text text-end pe-2"> ${eventInfo.todayCount} 件</p> |
|
<hr> |
|
<p class="card-text p-2 pt-0 "><small>上次更新: ${eventInfo.lastUpdate}</small></p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
const card2 = ` |
|
<div class="col-${eventInfo.col} p-3"> |
|
<div class="card mb-3 card-style-${index + 1}"> |
|
<div class="row g-0"> |
|
<div class="col-md-12"> |
|
<div class="card-body p-0"> |
|
<h5 class="card-title p-2">${eventInfo.eventType}</h5> |
|
<p class="card-text text-end pe-2"> ${eventInfo.todayCount} 件</p> |
|
<hr> |
|
<p class="card-text p-2 pt-0 "><small>上次更新: ${eventInfo.lastUpdate}</small></p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
if (index < 6) { |
|
caseCounter.insertAdjacentHTML('beforeend', card); |
|
} else { |
|
caseCounter2.insertAdjacentHTML('beforeend', card2); |
|
} |
|
}); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
// -------------------------------------------------- |
|
|
|
|
|
|