dashboard.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. {% extends "assetapp/base.html" %}
  2. {% load asset_tags %}
  3. {% block title %}仪表盘 - 希姆计算资产管理{% endblock %}
  4. {% block content %}
  5. <div class="d-flex justify-content-between align-items-center mb-4">
  6. <h4 class="mb-0"><i class="bi bi-speedometer2 me-2"></i>仪表盘</h4>
  7. <a href="{% url 'asset_create' %}" class="btn btn-primary">
  8. <i class="bi bi-plus-circle me-1"></i>新增资产
  9. </a>
  10. </div>
  11. <!-- 统计卡片 -->
  12. <div class="row g-3 mb-4">
  13. <div class="col-md-3">
  14. <div class="stat-card stat-total">
  15. <div class="stat-icon"><i class="bi bi-hdd-rack"></i></div>
  16. <div class="stat-info">
  17. <div class="stat-value">{{ total_assets }}</div>
  18. <div class="stat-label">资产总数</div>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="col-md-3">
  23. <div class="stat-card stat-in-use">
  24. <div class="stat-icon"><i class="bi bi-cpu"></i></div>
  25. <div class="stat-info">
  26. <div class="stat-value">{{ status_data.in_use|default:0 }}</div>
  27. <div class="stat-label">在用</div>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="col-md-3">
  32. <div class="stat-card stat-warning">
  33. <div class="stat-icon"><i class="bi bi-exclamation-triangle"></i></div>
  34. <div class="stat-info">
  35. <div class="stat-value">{{ expiring_soon }}</div>
  36. <div class="stat-label">即将过保(30天)</div>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="col-md-3">
  41. <div class="stat-card stat-danger">
  42. <div class="stat-icon"><i class="bi bi-shield-exclamation"></i></div>
  43. <div class="stat-info">
  44. <div class="stat-value">{{ expired }}</div>
  45. <div class="stat-label">已过保</div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="row g-3">
  51. <!-- 分类统计 -->
  52. <div class="col-md-6">
  53. <div class="card card-dark">
  54. <div class="card-header">
  55. <i class="bi bi-pie-chart me-2"></i>分类统计
  56. </div>
  57. <div class="card-body">
  58. {% if category_stats %}
  59. {% for item in category_stats %}
  60. <div class="d-flex justify-content-between align-items-center py-2 border-bottom border-secondary">
  61. <span class="text-light">{{ item.category__name }}</span>
  62. <div class="d-flex align-items-center">
  63. <div class="progress me-2" style="width: 120px; height: 8px;">
  64. {% widthratio item.count total_assets 100 as pct %}
  65. <div class="progress-bar bg-primary" style="width: {{ pct }}%"></div>
  66. </div>
  67. <span class="badge bg-primary">{{ item.count }}</span>
  68. </div>
  69. </div>
  70. {% endfor %}
  71. {% else %}
  72. <p class="text-muted text-center my-4">暂无数据</p>
  73. {% endif %}
  74. </div>
  75. </div>
  76. </div>
  77. <!-- 状态分布 -->
  78. <div class="col-md-6">
  79. <div class="card card-dark">
  80. <div class="card-header">
  81. <i class="bi bi-bar-chart me-2"></i>状态分布
  82. </div>
  83. <div class="card-body">
  84. {% for key, label in status_map.items %}
  85. <div class="d-flex justify-content-between align-items-center py-2 border-bottom border-secondary">
  86. <span class="text-light">{{ label }}</span>
  87. <span class="badge
  88. {% if key == 'in_use' %}bg-success
  89. {% elif key == 'idle' %}bg-warning text-dark
  90. {% elif key == 'maintenance' %}bg-info
  91. {% else %}bg-danger{% endif %}">
  92. {{ status_data|get_item:key|default:0 }}
  93. </span>
  94. </div>
  95. {% endfor %}
  96. </div>
  97. </div>
  98. </div>
  99. </div>
  100. <!-- 最近变更 -->
  101. <div class="card card-dark mt-3">
  102. <div class="card-header d-flex justify-content-between align-items-center">
  103. <span><i class="bi bi-clock-history me-2"></i>最近变更</span>
  104. <a href="{% url 'change_log_list' %}" class="btn btn-sm btn-outline-light">查看全部</a>
  105. </div>
  106. <div class="card-body p-0">
  107. <div class="table-responsive">
  108. <table class="table table-dark table-hover mb-0">
  109. <thead>
  110. <tr>
  111. <th>时间</th>
  112. <th>资产编号</th>
  113. <th>操作</th>
  114. <th>描述</th>
  115. <th>操作人</th>
  116. </tr>
  117. </thead>
  118. <tbody>
  119. {% for log in recent_changes %}
  120. <tr>
  121. <td>{{ log.created_at|date:"m-d H:i" }}</td>
  122. <td><a href="{% url 'asset_list' %}?search={{ log.asset_number }}" class="text-info">{{ log.asset_number }}</a></td>
  123. <td>
  124. <span class="badge
  125. {% if log.action == 'create' %}bg-success
  126. {% elif log.action == 'update' %}bg-primary
  127. {% elif log.action == 'delete' %}bg-danger
  128. {% elif log.action == 'import' %}bg-info
  129. {% elif log.action == 'export' %}bg-secondary
  130. {% else %}bg-warning{% endif %}">
  131. {{ log.get_action_display }}
  132. </span>
  133. </td>
  134. <td>{{ log.description|default:"-" }}</td>
  135. <td>{{ log.operator|default:"-" }}</td>
  136. </tr>
  137. {% empty %}
  138. <tr><td colspan="5" class="text-center text-light opacity-75 py-3">暂无变更记录</td></tr>
  139. {% endfor %}
  140. </tbody>
  141. </table>
  142. </div>
  143. </div>
  144. </div>
  145. {% endblock %}