在资产的详细页面,我们将尽可能地将所有的信息都显示出来,并保持美观、整齐。
教程中实现了主要的服务器资产页面,对于其它类型的资产详细页面,可参照完成,并不复杂。
完整的detail.html页面代码如下:
{% extends 'base.html' %}
{% load static %}
{% block title %}资产详细{% endblock %}
{% block css %}
{% endblock %}
{% block breadcrumb %}
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
资产详细
<small>asset info</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
<li>资产总表</li>
<li class="active">资产详细</li>
</ol>
</section>
{% endblock %}
{% block content %}
<!-- Main content -->
<section class="content">
<!-- Default box -->
<div class="box">
<div class="box-header with-border">
<h3 class="box-title"><strong class="btn btn-block btn-primary btn-lg">资产:{{ asset.name }}</strong></h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<h4><b>概览:</b></h4>
<table border="1" class="table table-responsive" style="border-left:3px solid deepskyblue;border-bottom:1px solid deepskyblue" >
<thead>
<tr>
<th>类型</th>
<th>SN</th>
<th>业务线</th>
<th>制造商</th>
<th>管理IP</th>
<th>机房</th>
<th>标签</th>
<th>更新日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ asset.get_asset_type_display }}</td>
<td>{{ asset.sn }}</td>
<td>{{ asset.business_unit|default:'N/A' }}</td>
<td>{{ asset.manufacturer|default:'N/A' }}</td>
<td>{{ asset.manage_ip|default:'N/A' }}</td>
<td>{{ asset.idc|default:'N/A' }}</td>
<td>
{% for tag in asset.tags.all %}
<label class="label label-primary">{{ tag.name }}</label>
{% empty %}
-
{% endfor %}
</td>
<td>{{ asset.m_time }}</td>
</tr>
</tbody>
</table>
<br />
<table border="1" class="table table-responsive" style="border-left:3px solid deepskyblue;border-bottom:1px solid deepskyblue">
<thead>
<tr>
<th>合同</th>
<th>价格</th>
<th>购买日期</th>
<th>过保日期</th>
<th>管理员</th>
<th>批准人</th>
<th>备注</th>
<th>批准日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ asset.contract.name|default:'N/A' }}</td>
<td>{{ asset.price|default:'N/A' }}</td>
<td>{{ asset.purchase_day|default:'N/A' }}</td>
<td>{{ asset.expire_day|default:'N/A' }}</td>
<td>{{ asset.admin|default:'N/A' }}</td>
<td>{{ asset.approved_by|default:'N/A' }}</td>
<td>{{ asset.memo|default:'N/A' }}</td>
<td>{{ asset.m_time }}</td>
</tr>
</tbody>
</table>
<h4><b>服务器:</b></h4>
<table border="1" class="table table-responsive" style="border-left:3px solid green;border-bottom:1px solid green">
<thead>
<tr>
<th>服务器类型</th>
<th>型号</th>
<th>宿主机</th>
<th>Raid类型</th>
<th>OS类型</th>
<th>OS发行版本</th>
<th>OS版本</th>
<th>添加方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ asset.server.get_sub_asset_type_display }}</td>
<td>{{ asset.server.model|default:'N/A' }}</td>
<td>{{ asset.server.hosted_on.id|default:'N/A' }}</td>
<td>{{ asset.server.raid_type|default:'N/A' }}</td>
<td>{{ asset.server.os_type|default:'N/A' }}</td>
<td>{{ asset.server.os_distribution|default:'N/A' }}</td>
<td>{{ asset.server.os_release|default:'N/A' }}</td>
<td>{{ asset.server.get_created_by_display }}</td>
</tr>
</tbody>
</table>
<h4><b>CPU:</b></h4>
<table border="1" class="table table-responsive" style="border-left:3px solid purple;border-bottom:1px solid purple">
<thead>
<tr>
<th style="width: 45%">CPU型号</th>
<th style="width: 15%">物理CPU个数</th>
<th>CPU核数</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ asset.cpu.cpu_model|default:'N/A' }}</td>
<td>{{ asset.cpu.cpu_count|default:'1' }}</td>
<td>{{ asset.cpu.cpu_core_count|default:'1' }}</td>
</tr>
</tbody>
</table>
<h4><b>内存:</b></h4>
<table border="1" class="table table-responsive" style="border-left:3px solid orangered;border-bottom:1px solid orangered">
<thead>
<tr>
<th style="width:5%;">序号</th>
<th>型号</th>
<th>容量</th>
<th>插槽</th>
<th>制造商</th>
<th>SN</th>
</tr>
</thead>
<tbody>
{% for ram in asset.ram_set.all %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ ram.model|default:'N/A' }}</td>
<td>{{ ram.capacity|default:'N/A' }}</td>
<td>{{ ram.slot }}</td>
<td>{{ ram.manufacturer|default:'N/A' }}</td>
<td>{{ ram.sn|default:'N/A' }}</td>
</tr>
{% empty %}
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
{% endfor %}
</tbody>
</table>
<h4><b>硬盘:</b></h4>
<table border="1" class="table table-responsive" style="border-left:3px solid brown;border-bottom:1px solid brown">
<thead>
<tr>
<th style="width:5%;">序号</th>
<th>型号</th>
<th>容量</th>
<th>插槽</th>
<th>接口类型</th>
<th>制造商</th>
<th>SN</th>
</tr>
</thead>
<tbody>
{% for disk in asset.disk_set.all %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ disk.model|default:'N/A' }}</td>
<td>{{ disk.capacity|default:'N/A' }}</td>
<td>{{ disk.slot|default:'N/A' }}</td>
<td>{{ disk.get_interface_type_display }}</td>
<td>{{ disk.manufacturer|default:'N/A' }}</td>
<td>{{ disk.sn}}</td>
</tr>
{% empty %}
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
{% endfor %}
</tbody>
</table>
<h4><b>网卡:</b></h4>
<table border="1" class="table table-responsive" style="border-left:3px solid #a59b1a;border-bottom:1px solid #a59b1a">
<thead>
<tr>
<th style="width:5%;">序号</th>
<th>名称</th>
<th>型号</th>
<th>MAC</th>
<th>IP</th>
<th>掩码</th>
<th>绑定地址</th>
</tr>
</thead>
<tbody>
{% for nic in asset.nic_set.all %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ nic.name|default:'N/A' }}</td>
<td>{{ nic.model }}</td>
<td>{{ nic.mac }}</td>
<td>{{ nic.ip_address|default:'N/A' }}</td>
<td>{{ nic.net_mask|default:'N/A' }}</td>
<td>{{ nic.bonding|default:'N/A' }}</td>
</tr>
{% empty %}
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- /.box-body -->
<div class="box-footer">
<i class="fa fa-angle-double-left"></i> <a href="{% url 'assets:index' %}"><strong>返回资产列表页</strong></a>
</div>
<!-- /.box-footer-->
</div>
<!-- /.box -->
</section>
<!-- /.content -->
{% endblock %}
{% block script %}
{% endblock %}
主要代码全部集中在<section class="content">里,分别用几个表格将概览、服务器、CPU、内存、硬盘和网卡的信息展示出来了。并且,AdminLTE为我们提供了一个折叠的功能,也是非常酷的。
这个HTML文件没有太多需要额外解释的内容,都是一些很基础的模板语言,构造<table>,然后插入数据。如果没有数据,就以‘N/A’代替。最后在底部添加一个返回资产总表的链接。
下面是展示图:

