接口测试平台-112: 首页优化2期 竖线右侧：数据看板+图形看板

1. 数据看板

打开Home.html:

{#  数据统计  #}
<div style="background-color: #eefaff;min-height: 100px;width:-webkit-calc(100% - 340px);
            margin-left: 342px;position: fixed;bottom: 0px;box-shadow: -4px -4px 8px #e3e3e3;padding: 10px">
    <div style="width: 120px;height: 80px;background-color: #105f72;border-radius: 5px;color: white;padding: 3px;font-size: small">
        当前项目数: <span>{{ count_project }}</span> <br>
        当前接口数: <span>{{ count_api }}</span> <br>
        当前用例数: <span>{{ count_case }}</span> <br>
        当前报告数: <span>{{ count_report }}</span>
    </div>
</div>

views.py

if eid == 'home.html':
    data = DB_home_href.objects.all()
    home_log = DB_apis_log.objects.filter(user_id=oid)[::-1]
    hosts = DB_host.objects.all()
    from django.contrib.auth.models import User
    user_projects = DB_project.objects.filter(user=User.objects.filter(id=oid)[0].username)
    # 个人数据看板
    new_res = {
        "count_project": len(user_projects),
        "count_api": sum([len(DB_apis.objects.filter(project_id=i.id)) for i in user_projects]),
        "count_case": sum([len(DB_cases.objects.filter(project_id=i.id)) for i in user_projects]),
        "count_report": '',
    }
    if ooid == '':
        res = {"hrefs": data, "home_log": home_log, "hosts": hosts, "user_projects": user_projects}
    else:
        log = DB_apis_log.objects.filter(id=ooid)[0]
        res = {"hrefs": data, "home_log": home_log, "log": log, "hosts": hosts, "user_projects": user_projects}
    res.update(new_res)

 

 

2. 优化主页和退出

打开welcome.html：

2.1 退出按钮

先删除，移动到左侧菜单的 名字后面 

欢迎你：<span>{{ username }}</span> &nbsp;<a href="/logout/" style="color: #8697b5; text-decoration: none"> 退出 </a>

 

2.2 主页按钮

修改相关的div和超链接

<div class="chamfer" style="height: 30px;width: 100px;position: fixed;right: 0px;top: 0px ">
    <strong>
        <a href="/home/" style="font-size: large;padding-left: 30px;color: #00372e;text-decoration: none"> HOME </a>
    </strong>
</div>

在header中加入style，并粘贴下面的css样式：

<style>
    .chamfer{
        background: linear-gradient(41deg, transparent 10px, #66defd 0) top left,
        linear-gradient(-90deg, transparent 0px, #adfdee 0) top right,
        linear-gradient(-90deg, transparent 0px, #cbffbd 0) bottom right,
        linear-gradient(45deg, transparent 21px, #b0fde2 0) bottom left;
        background-size: 49% 48%;
        background-repeat: no-repeat;
    }
</style>

 

3. 图形看板

下载插件：http://www.htmleaf.com/jQuery/Chart/201802074971.html

打开他的index.html，将红框处复制到home.html中

index.html最下面引入了 js和script，应该就是图形生成的必须代码

注意修改路径，刷新页面看看效果

可以看到已经成功，而且进入页面后还有个慢涨动画效果。

 

修改大小（注意，如不生效，记得还原），

progresscircle.css

强刷页面：

 

修改间距，回到Home.html中设置：

强刷页面：

 

修改位置

一是给其和父级div都设置上bootstrap的并列属性。

二是直接给写死位置，因为其相对于页面的底部和左边界是固定的。（选择）

 

可以做：

1.  个人项目占平台总项目的比

2. 个人接口占平台总接口的比

3. 个人用例占平台总接口的比

4. 未完成请求/任务通知占总数的比

5. 未被用例套用的接口占总数的比

6. 后台反馈吐槽未被管理员回复 占总数的比

7. 等等。。。。

 

后台逻辑：

给css文件修改下，继续变小。留出位置给文字

 

Home.html中上移，准备把文字写在下面：

打开views.py 找到child_json：

# 个人数据看板
count_project = len(user_projects)
count_api = sum([len(DB_apis.objects.filter(project_id=i.id)) for i in user_projects])
count_case = sum([len(DB_cases.objects.filter(project_id=i.id)) for i in user_projects])

# 数据库总项目数+总接口数+总用例数
ziyuan_all = len(DB_project.objects.all()) + len(DB_apis.objects.all()) + len(DB_cases.objects.all())
# 当前用户项目数+总接口数+总用例数
ziyuan_user = count_project + count_api + count_case
ziyuan = round(ziyuan_user / ziyuan_all * 100, 2)

new_res = {
    "count_project": count_project,
    "count_api": count_api,
    "count_case": count_case,
    "count_report": '',
    "ziyuan": ziyuan,
}

 

根据这个百分比数值来显示不同的文案

首先修改css文件中的大小，默认的3px太小，改成4px:

然后找到js文件，增加inner_text，=0：