perf: Automation report

pull/14835/head
feng 2025-01-22 18:39:31 +08:00 committed by feng626
parent 02e366fd10
commit a121bf41fe
6 changed files with 1258 additions and 86829 deletions

View File

@ -1,78 +1,202 @@
{% load i18n %}
{% load static %}
<div class='summary'>
<p>{% trans 'The following is a summary of account backup tasks, please review and handle them' %}</p>
<table>
<caption></caption>
<thead>
<tr>
<th colspan='2'>任务汇总:</th>
</tr>
</thead>
<tbody>
<tr>
<td>{% trans 'Task name' %}:</td>
<td>{{ execution.automation.name }} </td>
</tr>
<tr>
<td>{% trans 'Date start' %}:</td>
<td>{{ execution.date_start | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Date end' %}:</td>
<td>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Time using' %}:</td>
<td>{{ execution.duration }}s</td>
</tr>
<tr>
<td>{% trans 'Account count' %}:</td>
<td>{{ summary.total_accounts }}</td>
</tr>
<tr>
<td>{% trans 'Type count' %}:</td>
<td>{{ summary.total_types }}</td>
</tr>
</tbody>
</table>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<div class="report-container">
<header class="header">
<img src="{% static 'img/JumpServer_white_logo.svg' %}" alt="Logo"/>
</header>
<div class="info-section">
<h2 class="info">
{% trans 'The following is a summary of account backup tasks, please review and handle them' %}
</h2>
</div>
<main class="main-section">
<div class="synopsis-section">
<div class="synopsis-item">
<div class="synopsis-item-content">
<p>
<span class="item-label">{% trans 'Task name' %}</span>:
<span>{{ execution.automation.name }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date start' %}</span>:
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date end' %}</span>:
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Time using' %}</span>:
<span>{{ execution.duration }}s</span>
</p>
<p>
<span class="item-label">{% trans 'Account count' %}</span>:
<span>{{ summary.total_accounts }}s</span>
</p>
<p>
<span class="item-label">{% trans 'Type count' %}</span>:
<span>{{ summary.total_types }}s</span>
</p>
</div>
</div>
</div>
</main>
</div>
<style>
table {
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
}
.report-container .header {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 0.3rem 1rem;
background-color: #148f76;
}
.report-container .header img {
height: 100%
}
.info-section {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 4rem;
padding: 0 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.info-section .info {
margin: unset;
font-size: 1.6rem;
}
.main-section {
margin-top: 3rem;
padding: 0 1rem;
}
.main-section .synopsis-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.main-section .synopsis-section .synopsis-item {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
height: 350px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.main-section .synopsis-section .synopsis-item h3 {
font-weight: 500;
font-size: 1.5rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
height: 100%;
cursor: pointer;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
display: inline-flex;
width: 100%;
border-collapse: collapse;
max-width: 100%;
text-align: left;
margin-top: 10px;
padding: 20px;
}
th {
background: #f2f2f2;
line-height: 1;
gap: 2rem;
font-size: 14px;
padding: 5px;
border: 1px solid #ddd;
}
tr :first-child {
width: 30%;
.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
width: 18rem;
}
td {
border: 1px solid #ddd;
padding: 5px;
font-size: 12px;
.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
align-items: center;
justify-content: center;
font-weight: normal;
}
.result {
margin-top: 20px;
.main-section .tabel-execution-section h3 {
font-size: 1.5rem;
color: #2c3e50;
}
.result tr :first-child {
width: 10%;
.section-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
color: #2c3e50;
font-size: inherit;
}
.section-header span {
background: #e8f5e9;
color: #2e7d32;
padding: 0.2rem 0.8rem;
border-radius: 1rem;
font-size: inherit;
}
.custom-table th {
background: #f6f6f6;
color: #495057;
padding: 0.75rem;
font-size: 1.5rem;
border-bottom: 2px solid #e0e0e0;
}
.custom-table td {
padding: 0.75rem;
font-size: 14px;
border-bottom: 1px solid #e0e0e0;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -1,133 +1,314 @@
{% load i18n %}
{% load static %}
<div class='summary'>
<p>{% trans 'The following is a summary of account change secret tasks, please read and process' %}</p>
<table>
<caption></caption>
<thead>
<tr>
<th colspan='2'>任务汇总:</th>
</tr>
</thead>
<tbody>
<tr>
<td>{% trans 'Task name' %}:</td>
<td>{{ execution.automation.name }} </td>
</tr>
<tr>
<td>{% trans 'Date start' %}:</td>
<td>{{ execution.date_start | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Date end' %}:</td>
<td>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Time using' %}:</td>
<td>{{ execution.duration }}s</td>
</tr>
<tr>
<td>{% trans 'Assets count' %}:</td>
<td>{{ summary.total_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset success count' %}:</td>
<td>{{ summary.ok_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset failed count' %}:</td>
<td>{{ summary.fail_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset not support count' %}:</td>
<td>{{ summary.error_assets }}</td>
</tr>
</tbody>
</table>
</div>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<div class='result'>
{% if summary.ok_accounts %}
<p>{% trans 'Success accounts' %}: {{ summary.ok_accounts }}</p>
<table>
<caption></caption>
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.ok_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
<div class='result'>
{% if summary.fail_accounts %}
<p>{% trans 'Failed accounts' %}: {{ summary.fail_accounts }}</p>
<table>
<caption></caption>
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.fail_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
<div class="report-container">
<header class="header">
<img src="{% static 'img/JumpServer_white_logo.svg' %}" alt="Logo"/>
</header>
<div class="info-section">
<h2 class="info">
{% trans 'The following is a summary of account change secret tasks, please read and process' %}
</h2>
</div>
<main class="main-section">
<div class="synopsis-section">
<div class="synopsis-item">
<div class="synopsis-item-content">
<p>
<span class="item-label">{% trans 'Task name' %}</span>:
<span>{{ execution.automation.name }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date start' %}</span>:
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date end' %}</span>:
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Time using' %}</span>:
<span>{{ execution.duration }}s</span>
</p>
<p>
<span class="item-label">{% trans 'Assets count' %}</span>:
<span>{{ summary.total_assets }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset success count' %}</span>:
<span>{{ summary.ok_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset failed count' %}</span>:
<span>{{ summary.fail_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset not support count' %}</span>:
<span>{{ summary.error_assets | default:0 }}</span>
</p>
</div>
</div>
</div>
<div class="tabel-section tabel-summery-section">
<div class="new-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'Success accounts' %}:
<span>{{ summary.ok_accounts | default:0 }}</span>
</h3>
</div>
{% if summary.ok_accounts %}
<table class="custom-table table-striped table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.ok_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
</div>
<div class="lost-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'Failed accounts' %}:
<span>{{ summary.fail_accounts | default:0 }}</span>
</h3>
</div>
{% if summary.fail_accounts %}
<table class="custom-table table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.fail_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
</div>
</div>
</main>
</div>
<style>
table {
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
}
.report-container .header {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 0.3rem 1rem;
background-color: #148f76;
}
.report-container .header img {
height: 100%
}
.info-section {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 4rem;
padding: 0 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.info-section .info {
margin: unset;
font-size: 1.6rem;
}
.main-section {
margin-top: 3rem;
padding: 0 1rem;
}
.main-section .synopsis-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.main-section .synopsis-section .synopsis-item {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
height: 350px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.main-section .synopsis-section .synopsis-item h3 {
font-weight: 500;
font-size: 1.5rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
height: 100%;
cursor: pointer;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
display: inline-flex;
width: 100%;
line-height: 1;
gap: 2rem;
font-size: 14px;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
width: 18rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
align-items: center;
justify-content: center;
font-weight: normal;
}
.main-section .tabel-summery-section {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
gap: 2rem;
width: inherit;
margin-top: 2rem;
}
.main-section .tabel-summery-section .result-section {
width: 100%;
padding: 1rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.main-section .tabel-execution-section h3 {
font-size: 1.5rem;
color: #2c3e50;
}
.section-header {
padding-bottom: 0.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.section-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
color: #2c3e50;
font-size: inherit;
}
.section-header span {
background: #e8f5e9;
color: #2e7d32;
padding: 0.2rem 0.8rem;
border-radius: 1rem;
font-size: inherit;
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
max-width: 100%;
text-align: left;
margin-top: 10px;
padding: 20px;
overflow: hidden;
}
th {
background: #f2f2f2;
.custom-table th {
background: #f6f6f6;
color: #495057;
padding: 0.75rem;
font-size: 1.5rem;
border-bottom: 2px solid #e0e0e0;
}
.custom-table td {
padding: 0.75rem;
font-size: 14px;
padding: 5px;
border: 1px solid #ddd;
border-bottom: 1px solid #e0e0e0;
}
tr :first-child {
width: 30%;
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
td {
border: 1px solid #ddd;
padding: 5px;
font-size: 12px;
.custom-table tr:last-child td {
border-bottom: none;
}
.result {
margin-top: 20px;
.no-data {
text-align: center;
color: #6c757d;
padding: 2rem;
background: #f6f6f6;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.result tr :first-child {
width: 10%;
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -1,124 +1,293 @@
{% load i18n %}
{% load static %}
<div class='summary'>
<p>{% trans 'The following is a summary of the account check tasks. Please review and handle them' %}</p>
<table>
<caption></caption>
<thead>
<tr>
<th colspan='2'>任务汇总:</th>
</tr>
</thead>
<tbody>
<tr>
<td>{% trans 'Task name' %}:</td>
<td>{{ execution.automation.name }} </td>
</tr>
<tr>
<td>{% trans 'Date start' %}:</td>
<td>{{ execution.date_start | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Date end' %}:</td>
<td>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Time using' %}:</td>
<td>{{ execution.duration }}s</td>
</tr>
<tr>
<td>{% trans 'Assets count' %}:</td>
<td>{{ summary.assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset success count' %}:</td>
<td>{{ summary.ok_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset failed count' %}:</td>
<td>{{ summary.fail_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset not support count' %}:</td>
<td>{{ summary.error_assets }}</td>
</tr>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<tr>
<td>{% trans 'Account count' %}:</td>
<td>{{ summary.accounts }}</td>
</tr>
<tr>
<td>{% trans 'Ok count' %}:</td>
<td>{{ summary.ok }}</td>
</tr>
<tr>
<td>{% trans 'No password count' %}:</td>
<td>{{ summary.no_secret }}</td>
</tr>
</tbody>
</table>
</div>
<div class="report-container">
<header class="header">
<img src="{% static 'img/JumpServer_white_logo.svg' %}" alt="Logo"/>
</header>
<div class='result'>
{% if summary.weak_password %}
<p>{% trans 'Week password' %}: {{ summary.weak_password }}</p>
<p>{% trans 'Account check details' %}:</p>
<table>
<caption></caption>
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
<th>{% trans 'Result' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.weak_password %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
<td style="color: red">{% trans 'Week password' %}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>{% trans 'No weak password' %}</p>
{% endif %}
<div class="info-section">
<h2 class="info">
{% trans 'The following is a summary of the account check tasks. Please review and handle them' %}
</h2>
</div>
<main class="main-section">
<div class="synopsis-section">
<div class="synopsis-item">
<div class="synopsis-item-content">
<p>
<span class="item-label">{% trans 'Task name' %}</span>:
<span>{{ execution.automation.name }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date start' %}</span>:
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date end' %}</span>:
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Time using' %}</span>:
<span>{{ execution.duration }}s</span>
</p>
<p>
<span class="item-label">{% trans 'Account count' %}</span>:
<span>{{ summary.accounts }}</span>
</p>
<p>
<span class="item-label">{% trans 'Ok count' %}</span>:
<span>{{ summary.ok }}</span>
</p>
<p>
<span class="item-label">{% trans 'No password count' %}</span>:
<span>{{ summary.no_secret }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset success count' %}</span>:
<span>{{ summary.ok_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset failed count' %}</span>:
<span>{{ summary.fail_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset not support count' %}</span>:
<span>{{ summary.error_assets | default:0 }}</span>
</p>
</div>
</div>
</div>
<div class="tabel-section tabel-summery-section">
<div class="new-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'Week password' %}:
<span>{{ summary.weak_password | default:0 }}</span>
</h3>
</div>
{% if summary.ok_accounts %}
<table class="custom-table table-striped table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
<th>{% trans 'Result' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.weak_password %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
<td style="color: red">{% trans 'Week password' %}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No weak password' %}</p>
{% endif %}
</div>
</div>
</main>
</div>
<style>
table {
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
}
.report-container .header {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 0.3rem 1rem;
background-color: #148f76;
}
.report-container .header img {
height: 100%
}
.info-section {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 4rem;
padding: 0 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.info-section .info {
margin: unset;
font-size: 1.6rem;
}
.main-section {
margin-top: 3rem;
padding: 0 1rem;
}
.main-section .synopsis-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.main-section .synopsis-section .synopsis-item {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
height: 350px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.main-section .synopsis-section .synopsis-item h3 {
font-weight: 500;
font-size: 1.5rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
height: 100%;
cursor: pointer;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
display: inline-flex;
width: 100%;
line-height: 1;
gap: 2rem;
font-size: 14px;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
width: 18rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
align-items: center;
justify-content: center;
font-weight: normal;
}
.main-section .tabel-summery-section {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
gap: 2rem;
width: inherit;
margin-top: 2rem;
}
.main-section .tabel-summery-section .result-section {
width: 100%;
padding: 1rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.main-section .tabel-execution-section h3 {
font-size: 1.5rem;
color: #2c3e50;
}
.section-header {
padding-bottom: 0.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.section-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
color: #2c3e50;
font-size: inherit;
}
.section-header span {
background: #e8f5e9;
color: #2e7d32;
padding: 0.2rem 0.8rem;
border-radius: 1rem;
font-size: inherit;
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
max-width: 100%;
text-align: left;
margin-top: 20px;
padding: 20px;
overflow: hidden;
}
th {
background: #f2f2f2;
.custom-table th {
background: #f6f6f6;
color: #495057;
padding: 0.75rem;
font-size: 1.5rem;
border-bottom: 2px solid #e0e0e0;
}
.custom-table td {
padding: 0.75rem;
font-size: 14px;
padding: 5px;
border: 1px solid #ddd;
border-bottom: 1px solid #e0e0e0;
}
tr :first-child {
width: 30%;
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
td {
border: 1px solid #ddd;
padding: 5px;
font-size: 12px;
.custom-table tr:last-child td {
border-bottom: none;
}
.result tr :first-child {
width: 10%;
.no-data {
text-align: center;
color: #6c757d;
padding: 2rem;
background: #f6f6f6;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -1,407 +1,315 @@
{% load i18n %}
{% load i18n %}
{% load static %}
{% load bootstrap3 %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"></link>
<link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet">
<script src="{% static 'js/echarts.js' %}"></script>
<script src="{% static 'js/jquery-3.6.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="report-container">
<div class="report-container">
<header class="header">
<img src="{% static 'img/JumpServer_white_logo.svg' %}" alt="Logo" />
<img src="{% static 'img/JumpServer_white_logo.svg' %}" alt="Logo"/>
</header>
<!-- Info Section -->
<div class="info-section">
<h2 class="info">
<!-- 对应报表的 name -->
账号发现
</h2>
<div class="time">
<!-- 具体的生成时间 -->
生成于星期五2025年1月20日 10:00:00 中国标准时间
</div>
</div>
<main class="main-section">
<div class="synopsis-section">
<div class="synopsis-item">
<h3>
<h2 class="info">
{% trans 'The following is a summary of the account check tasks. Please review and handle them' %}
</h3>
</h2>
</div>
<div class="synopsis-item-content">
<p>
<span class="item-label">{% trans 'Task name' %}</span>:
<span>{{ execution.automation.name }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date start' %}</span>:
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date end' %}</span>:
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Time using' %}</span>:
<span>{{ execution.duration }}s</span>
</p>
<p>
<span class="item-label">{% trans 'Assets count' %}</span>:
<span>{{ summary.total_assets }}s</span>
</p>
</div>
</div>
<div class="synopsis-item">
<h3>
{% comment %} {% trans 'New found accounts' %}: {% endcomment %}
<span>summary 2</span>
</h3>
<div class="synopsis-item-content-charts">
<div id="main" style="width: 600px; height: 250px;"></div>
</div>
</div>
</div>
<div class="tabel-section tabel-summery-section">
<div class="new-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'New found accounts' %}:
<span>{{ summary.new_accounts | default:100 }}</span>
</h3>
</div>
{% if summary.new_accounts %}
<table class="custom-table table-striped table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.new_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
<main class="main-section">
<div class="synopsis-section">
<div class="synopsis-item">
<div class="synopsis-item-content">
<p>
<span class="item-label">{% trans 'Task name' %}</span>:
<span>{{ execution.automation.name }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date start' %}</span>:
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date end' %}</span>:
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Time using' %}</span>:
<span>{{ execution.duration }}s</span>
</p>
<p>
<span class="item-label">{% trans 'Assets count' %}</span>:
<span>{{ summary.total_assets }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset success count' %}</span>:
<span>{{ summary.ok_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset failed count' %}</span>:
<span>{{ summary.fail_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset not support count' %}</span>:
<span>{{ summary.error_assets | default:0 }}</span>
</p>
</div>
</div>
</div>
<div class="lost-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'Lost accounts' %}:
<span>{{ summary.lost_accounts }}</span>
</h3>
</div>
{% if summary.lost_accounts %}
<table class="custom-table table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.lost_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
<div class="tabel-section tabel-summery-section">
<div class="new-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'New found accounts' %}:
<span>{{ summary.new_accounts | default:0 }}</span>
</h3>
</div>
{% if summary.new_accounts %}
<table class="custom-table table-striped table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.new_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
</div>
<div class="lost-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'Lost accounts' %}:
<span>{{ summary.lost_accounts | default:0 }}</span>
</h3>
</div>
{% if summary.lost_accounts %}
<table class="custom-table table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.lost_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
</div>
</div>
</div>
</main>
</div>
{% block extra_js %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'item'
},
legend: {
left: 'right',
orient: 'vertical'
},
series: [{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
padAngle: 5,
itemStyle: {
borderRadius: 10
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: {{ summary.ok_assets | default:0 }}, name: '{% trans "Asset success count" %}' },
{ value: {{ summary.fail_assets | default:1 }}, name: '{% trans "Asset failed count" %}' },
{ value: {{ summary.error_assets | default:1 }}, name: '{% trans "Asset not support count" %}' }
]
}]
};
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
});
</script>
{% endblock %}
</body>
</div>
<style>
body,
p, {
margin: 0;
padding: 0;
}
body,
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
}
.report-container {
display: flex;
flex-direction: column;
}
.report-container .header {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 0.3rem 1rem;
background-color: #148f76;
}
.report-container .header {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 0.3rem 1rem;
background-color: #148f76;
}
.report-container .header img {
height: 100%
}
.info-section {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 4rem;
padding: 0 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.report-container .header img {
height: 100%
}
.info-section .info {
margin: unset;
font-size: 1.6rem;
}
.info-section {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 4rem;
padding: 0 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.info-section .time {
color: #888;
font-size: 1.3rem;
}
.info-section .info {
margin: unset;
font-size: 1.6rem;
}
.main-section {
margin-top: 3rem;
padding: 0 1rem;
}
.main-section {
margin-top: 3rem;
padding: 0 1rem;
}
.main-section .synopsis-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.main-section .synopsis-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
}
.main-section .synopsis-section .synopsis-item {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
height: 350px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.main-section .synopsis-section .synopsis-item {
display: flex;
flex-direction: column;
flex: 1;
padding: 1rem 2rem;
border: 1px solid #e0e0e0;
border-radius: 8px;
height: 350px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.main-section .synopsis-section .synopsis-item h3 {
font-weight: 500;
font-size: 1.5rem;
}
.main-section .synopsis-section .synopsis-item h3 {
font-weight: 500;
font-size: 1.5rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
margin-top: 1rem;
height: 100%;
cursor: pointer;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
height: 100%;
cursor: pointer;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
display: inline-flex;
width: 100%;
line-height: 1;
gap: 2rem;
font-size: 14px;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
display: inline-flex;
width: 100%;
line-height: 1;
gap: 2rem;
font-size: 14px;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
width: 10rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
width: 18rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
align-items: center;
justify-content: center;
font-weight: normal;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
align-items: center;
justify-content: center;
font-weight: normal;
}
.synopsis-item-content-charts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
.main-section .tabel-summery-section {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
gap: 2rem;
width: inherit;
margin-top: 2rem;
}
.main-section .tabel-summery-section {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
gap: 2rem;
width: inherit;
margin-top: 2rem;
}
.main-section .tabel-summery-section .result-section {
width: 100%;
padding: 1rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.main-section .tabel-summery-section .result-section {
width: 100%;
padding: 1rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.main-section .tabel-execution-section h3 {
font-size: 1.5rem;
color: #2c3e50;
}
.main-section .tabel-execution-section {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
width: inherit;
margin-top: 2rem;
padding: 1rem;
}
.section-header {
padding-bottom: 0.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.main-section .tabel-execution-section h3 {
font-size: 1.5rem;
color: #2c3e50;
}
.section-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
color: #2c3e50;
font-size: inherit;
}
.section-header {
padding-bottom: 0.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.section-header span {
background: #e8f5e9;
color: #2e7d32;
padding: 0.2rem 0.8rem;
border-radius: 1rem;
font-size: inherit;
}
.section-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
color: #2c3e50;
font-size: inherit;
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.section-header span {
background: #e8f5e9;
color: #2e7d32;
padding: 0.2rem 0.8rem;
border-radius: 1rem;
font-size: inherit;
}
.custom-table th {
background: #f6f6f6;
color: #495057;
padding: 0.75rem;
font-size: 1.5rem;
border-bottom: 2px solid #e0e0e0;
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table td {
padding: 0.75rem;
font-size: 14px;
border-bottom: 1px solid #e0e0e0;
}
.custom-table th {
background: #f6f6f6;
color: #495057;
padding: 0.75rem;
font-size: 1.5rem;
border-bottom: 2px solid #e0e0e0;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table td {
padding: 0.75rem;
font-size: 14px;
border-bottom: 1px solid #e0e0e0;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.no-data {
text-align: center;
color: #6c757d;
padding: 2rem;
background: #f6f6f6;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.custom-table tr:last-child td {
border-bottom: none;
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.no-data {
text-align: center;
color: #6c757d;
padding: 2rem;
background: #f6f6f6;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

View File

@ -1,258 +1,169 @@
{% load i18n %}
{% load static %}
{% load bootstrap3 %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"></link>
<link href="{% static 'css/font-awesome.min.css' %}" rel="stylesheet">
<script src="{% static 'js/echarts.js' %}"></script>
<script src="{% static 'js/jquery-3.6.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<body>
<div class="report-container">
<header class="header">
<img src="{% static 'img/JumpServer_white_logo.svg' %}" alt="Logo" />
</header>
<div class="info-section">
<h2 class="info">
<!-- 对应报表的 name -->
账号推送
</h2>
<div class="report-container">
<header class="header">
<img src="{% static 'img/JumpServer_white_logo.svg' %}" alt="Logo"/>
</header>
<div class="time">
<!-- 具体的生成时间 -->
生成于星期五2025年1月20日 10:00:00 中国标准时间
</div>
</div>
<main class="main-section">
<div class="synopsis-section">
<div class="synopsis-item">
<h3>
{% comment %} {% trans 'New found accounts' %}: {% endcomment %}
<span> summary 1 </span>
</h3>
<div class="synopsis-item-content">
<p>
{% trans 'Assets count' %}:
<span>100</span>
</p>
<p>
{% trans 'Asset success count' %}:
<span>100</span>
</p>
<p>
{% trans 'Asset failed count' %}:
<span>100</span>
</p>
<p>
{% trans 'Asset not support count' %}:
<span>100</span>
</p>
</div>
</div>
<div class="synopsis-item">
<h3>
{% comment %} {% trans 'New found accounts' %}: {% endcomment %}
<span>summary 2</span>
</h3>
<div class="synopsis-item-content-charts">
<div id="main" style="width: 600px; height: 250px;"></div>
</div>
</div>
</div>
<div class="push-account-section">
<h3>
{% trans 'The following is a summary of account push tasks, please read and process' %}
</h3>
<table class="custom-table table table-hover">
<thead>
<tr>
<th colspan='2'>任务汇总:</th>
</tr>
</thead>
<tbody>
<tr>
<td>{% trans 'Task name' %}:</td>
<td>{{ execution.automation.name }} </td>
</tr>
<tr>
<td>{% trans 'Date start' %}:</td>
<td>{{ execution.date_start | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Date end' %}:</td>
<td>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</td>
</tr>
<tr>
<td>{% trans 'Time using' %}:</td>
<td>{{ execution.duration }}s</td>
</tr>
<tr>
<td>{% trans 'Assets count' %}:</td>
<td>{{ summary.total_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset success count' %}:</td>
<td>{{ summary.ok_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset failed count' %}:</td>
<td>{{ summary.fail_assets }}</td>
</tr>
<tr>
<td>{% trans 'Asset not support count' %}:</td>
<td>{{ summary.error_assets }}</td>
</tr>
</tbody>
</table>
</div>
</main>
<div class="info-section">
<h2 class="info">
{% trans 'The following is a summary of account push tasks, please read and process' %}
</h2>
</div>
{% block extra_js %}
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
series: [{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
emphasis: {
label: {
show: true,
fontSize: '13',
fontWeight: 'bold'
}
},
data: [
{ value: {{ summary.ok_assets | default:10 }}, name: '{% trans "Asset success count" %}' },
{ value: {{ summary.fail_assets | default:10 }}, name: '{% trans "Asset failed count" %}' },
{ value: {{ summary.error_assets | default:10 }}, name: '{% trans "Asset not support count" %}' }
]
}]
};
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
});
</script>
{% endblock %}
</body>
<main class="main-section">
<div class="synopsis-section">
<div class="synopsis-item">
<div class="synopsis-item-content">
<p>
<span class="item-label">{% trans 'Task name' %}</span>:
<span>{{ execution.automation.name }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date start' %}</span>:
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Date end' %}</span>:
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
</p>
<p>
<span class="item-label">{% trans 'Time using' %}</span>:
<span>{{ execution.duration }}s</span>
</p>
<p>
<span class="item-label">{% trans 'Assets count' %}</span>:
<span>{{ summary.total_assets }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset success count' %}</span>:
<span>{{ summary.ok_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset failed count' %}</span>:
<span>{{ summary.fail_assets | default:0 }}</span>
</p>
<p>
<span class="item-label">{% trans 'Asset not support count' %}</span>:
<span>{{ summary.error_assets | default:0 }}</span>
</p>
</div>
</div>
</div>
<div class="tabel-section tabel-summery-section">
<div class="new-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'Success accounts' %}:
<span>{{ summary.ok_accounts | default:0 }}</span>
</h3>
</div>
{% if summary.ok_accounts %}
<table class="custom-table table-striped table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.ok_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
</div>
<div class="lost-accounts result-section table-responsive">
<div class="section-header">
<h3>
{% trans 'Failed accounts' %}:
<span>{{ summary.fail_accounts | default:0 }}</span>
</h3>
</div>
{% if summary.fail_accounts %}
<table class="custom-table table-hover data-table">
<thead>
<tr>
<th>{% trans 'No.' %}</th>
<th>{% trans 'Asset' %}</th>
<th>{% trans 'Username' %}</th>
</tr>
</thead>
<tbody>
{% for account in result.fail_accounts %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ account.asset }}</td>
<td>{{ account.username }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="no-data">{% trans 'No new accounts found' %}</p>
{% endif %}
</div>
</div>
</main>
</div>
<style>
body,
p, {
margin: 0;
padding: 0;
p {
margin: 0;
padding: 0;
}
.report-container {
display: flex;
flex-direction: column;
}
.report-container .header {
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 0.3rem 1rem;
background-color: #148f76;
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
padding: 0.3rem 1rem;
background-color: #148f76;
}
.report-container .header img {
height: 100%
height: 100%
}
.info-section {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 4rem;
padding: 0 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
height: 4rem;
padding: 0 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.info-section .info {
margin: unset;
font-size: 2rem;
}
.info-section .time {
color: #888;
font-size: 1.3rem;
margin: unset;
font-size: 1.6rem;
}
.main-section {
margin-top: 3rem;
padding: 0 1rem;
}
.main-section .push-account-section {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
width: inherit;
margin-top: 2rem;
padding: 1rem;
}
.main-section .tabel-execution-section h3 {
font-size: 1.5rem;
color: #2c3e50;
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table table {
width: 100%;
}
.custom-table th {
background: #f6f6f6;
color: #495057;
padding: 0.75rem;
border-bottom: 2px solid #e0e0e0;
}
.custom-table td {
padding: 0.75rem;
border-bottom: 1px solid #e0e0e0;
}
.custom-table tr:last-child td {
border-bottom: none;
margin-top: 3rem;
padding: 0 1rem;
}
.main-section .synopsis-section {
@ -262,7 +173,7 @@
flex-wrap: wrap;
gap: 2rem;
}
.main-section .synopsis-section .synopsis-item {
display: flex;
flex-direction: column;
@ -272,12 +183,11 @@
border-radius: 8px;
height: 350px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.main-section .synopsis-section .synopsis-item:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
.main-section .synopsis-section .synopsis-item h3 {
font-weight: 500;
font-size: 1.5rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content {
@ -285,31 +195,120 @@
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
margin-top: 1rem;
height: 100%;
font-size: 1.5rem;
cursor: pointer;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
display: inline-flex;
width: 100%;
line-height: 1;
gap: 2rem;
font-weight: 500;
font-size: 14px;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
width: 18rem;
}
.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
align-items: center;
justify-content: center;
font-weight: normal;
}
.synopsis-item-content-charts {
.main-section .tabel-summery-section {
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: nowrap;
align-items: flex-start;
gap: 2rem;
width: inherit;
margin-top: 2rem;
}
.main-section .tabel-summery-section .result-section {
width: 100%;
padding: 1rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
}
.main-section .tabel-execution-section h3 {
font-size: 1.5rem;
color: #2c3e50;
}
.section-header {
padding-bottom: 0.5rem;
margin-bottom: 1rem;
font-size: 1.5rem;
}
.section-header h3 {
display: flex;
align-items: center;
margin-top: 1rem;
gap: 0.5rem;
margin: 0;
color: #2c3e50;
font-size: inherit;
}
.section-header span {
background: #e8f5e9;
color: #2e7d32;
padding: 0.2rem 0.8rem;
border-radius: 1rem;
font-size: inherit;
}
.custom-table {
margin-bottom: 0;
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.custom-table th {
background: #f6f6f6;
color: #495057;
padding: 0.75rem;
font-size: 1.5rem;
border-bottom: 2px solid #e0e0e0;
}
.custom-table td {
padding: 0.75rem;
font-size: 14px;
border-bottom: 1px solid #e0e0e0;
}
.custom-table tr:nth-child(even) {
background-color: #f6f6f6;
}
.custom-table tr:last-child td {
border-bottom: none;
}
.no-data {
text-align: center;
color: #6c757d;
padding: 2rem;
background: #f6f6f6;
border-radius: 8px;
margin: 1rem 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.new-accounts .section-header span {
background: #e8f5e9;
color: #2e7d32;
}
.lost-accounts .section-header span {
background: #fbe9e7;
color: #d84315;
}
</style>

File diff suppressed because it is too large Load Diff