master

分支 (1)

管理

管理

master

aivros-qa
/
templates
/
index.html

<!DOCTYPE html>
{% load static %}
<html
        lang="en"
        class="light-style layout-menu-fixed"
        dir="ltr"
        data-theme="theme-default"
        data-assets-path="assets/"
        data-template="vertical-menu-template-free"
>
<head>
    <meta charset="utf-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />

    <title>VISVUL:Main UI</title>

    <meta name="description" content=""/>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="{% static 'img/favicon/favicon.ico' %}"/>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
          rel="stylesheet"/>

    <!-- Icons -->
    <link rel="stylesheet" href="{% static 'vendor/fonts/boxicons.css' %}"/>

    <!-- Core CSS -->
    <link rel="stylesheet" href="{% static 'vendor/css/core.css' %}" class="template-customizer-core-css"/>
    <link rel="stylesheet" href="{% static 'vendor/css/theme-default.css' %}" class="template-customizer-theme-css"/>
    <link rel="stylesheet" href="{% static 'css/demo.css' %}"/>

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.css' %}"/>
    <link rel="stylesheet" href="{% static 'vendor/libs/apex-charts/apex-charts.css' %}"/>

    <!-- Helpers -->
    <script src="{% static 'vendor/js/helpers.js' %}"></script>

    <!-- Config -->
    <script src="{% static 'js/config.js' %}"></script>

</head>

<body>
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
        <!-- Menu -->

        <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
            <div class="app-brand demo">
                <a href="{% url 'index' %}" class="app-brand-link">

                    <span class="app-brand-text demo menu-text fw-bolder ms-2" style="text-transform: uppercase;"><img
                            src="{% static 'picture/Logo.png' %}" class="mb-2" alt="" width="8%">VISVUL</span>

                </a>

                <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none">
                    <i class="bx bx-chevron-left bx-sm align-middle"></i>
                </a>
            </div>

            <div class="menu-inner-shadow"></div>

            <ul class="menu-inner py-1">
                <!-- Dashboard -->
                <li class="menu-item active">
                    <a href="{% url 'index' %}" class="menu-link">
                        <i class="menu-icon tf-icons bx bx-home-circle"></i>
                        <div data-i18n="Analytics">项目总览</div>
                    </a>
                </li>


                <li class="menu-header small text-uppercase">
                    <span class="menu-header-text">项目管理</span>
                </li>
                <li class="menu-item">
                    <a href="{% url 'projectList' %}" class="menu-link">
                        <i class="menu-icon tf-icons bx bx-detail"></i>
                        <div data-i18n="Form Elements">项目列表</div>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="{% url 'upgradeProjectView' %}" class="menu-link">
                        <i class="menu-icon tf-icons bx bx-upload"></i>
                        <div data-i18n="Form Elements">项目上传</div>
                    </a>
                </li>
                <li class="menu-header small text-uppercase">
                    <span class="menu-header-text">快速开始</span>
                </li>
                <li class="menu-item">
                    <a href="{% url 'catalogue' %}" class="menu-link">
                        <i class="menu-icon tf-icons bx bx-cube-alt"></i>
                        <div data-i18n="Account Settings">智能问答</div>
                    </a>
                </li>
                <li class="menu-item ">
                    <a href="{% url 'realTimeDetect' %}" class="menu-link">
                        <i class="menu-icon tf-icons bx bx-crown"></i>
                        <div data-i18n="Account Settings">即点即用</div>
                    </a>
                </li>
                <li class="menu-header small text-uppercase"><span class="menu-header-text">账户管理</span></li>

                <li class="menu-item">
                    <a href="{% url 'account' %}" class="menu-link">
                        <i class="menu-icon tf-icons bx bx-dock-top"></i>
                        <div data-i18n="Account Settings">账号设置</div>
                    </a>
                </li>
            </ul>
        </aside>
        <!-- / Menu -->

        <!-- Layout container -->
        <div class="layout-page">
            <!-- Navbar -->

            <nav
                    class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
                    id="layout-navbar"
            >
                <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                    <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                        <i class="bx bx-menu bx-sm"></i>
                    </a>
                </div>

                <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
                    <!-- Search -->
                    <div class="navbar-nav align-items-center">
                        <div class="nav-item d-flex align-items-center">
                            <i class="bx bx-search fs-4 lh-0"></i>
                            <input
                                    type="text"
                                    class="form-control border-0 shadow-none"
                                    placeholder="Search..."
                                    aria-label="Search..."
                            />
                        </div>
                    </div>
                    <!-- /Search -->

                    <ul class="navbar-nav flex-row align-items-center ms-auto">
                        <!-- Place this tag where you want the button to render. -->
                        <li class="nav-item lh-1 me-3">
                            <a
                                    class="github-button"
                                    href="#"
                                    data-icon="octicon-star"
                                    data-size="large"
                                    data-show-count="true"
                                    aria-label="Star html-admin-template-free on GitHub"
                            >Star</a
                            >
                        </li>

                        <li class="nav-item navbar-dropdown dropdown-user dropdown">
                            <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);"
                               data-bs-toggle="dropdown">
                                <div class="avatar avatar-online">
                                    <img src="{% static user.UFacePath %}" alt class="w-px-40 h-auto rounded-circle"/>
                                </div>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <div class="d-flex">
                                            <div class="flex-shrink-0 me-3">
                                                <div class="avatar avatar-online">
                                                    <img src="{% static user.UFacePath %}" alt
                                                         class="w-px-40 h-auto rounded-circle"/>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1">
                                                <span class="fw-semibold d-block">{{ user.Uname }}</span>
                                                <small class="text-muted">{{ user.Uposition }}</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <div class="dropdown-divider"></div>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{% url 'account' %}">
                                        <i class="bx bx-user me-2"></i>
                                        <span class="align-middle">我的信息</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <i class="bx bx-cog me-2"></i>
                                        <span class="align-middle">Settings</span>
                                    </a>
                                </li>

                                <li>
                                    <div class="dropdown-divider"></div>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="{% url 'logout' %} ">
                                        <i class="bx bx-power-off me-2"></i>
                                        <span class="align-middle">退出登录</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!--/ User -->
                    </ul>
                </div>
            </nav>

            <!-- / Navbar -->

            <!-- Content wrapper -->
            <div class="content-wrapper">
                <!-- Content -->

                <div class="container-xxl flex-grow-1 container-p-y">
                    <div class="row">

                        <!-- 漏洞数量 -->
                        <div class="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4">
                            <div class="card">
                                <div class="row row-bordered g-0">
                                    <div class="col-md-12">
                                        <h5 class="card-header m-0 me-2 pb-3">漏洞情况跟踪</h5>
                                        <div id="incomeChart" style="width: 90%; margin-left: auto; margin-right: auto;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/ 漏洞数量 -->
                        <div class="col-12 col-md-8 col-lg-4 order-3 order-md-2">
                            <div class="row">
                                <div class="col-6 mb-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="card-title d-flex align-items-start justify-content-between">
                                                <div class="avatar flex-shrink-0">
                                                   <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABFpJREFUaEPtmVnIVVUUx38mFpUKYiXlgIlDkkGpD+JAk1GGODaYkqQPDpmo4ICamPkQ9BAoVkRpzmlWJkKm6INhpmj5oDg+OKKWZhYmQpDuf+xjm9M+5+x97v3oCt+Cjw/uXeu/13+vtddae98G3OLS4Bb3n3oC/3cEK41AX2Ao0B1oDtwDNAF+Bi4CZ4BvgDXAL3VBtgwBOTjDOPQ60CzCqa3ATGBvhE2haiwBOT3P7nQheIbCemAKcLIsgGsXSuAuYB3wfDUWBX4zkegP7KwUL4TA/cBm4JGcHf0cOAictbn/INAKeA54EeiQYTsKWFoJiSICd9hd6ppa5FeT/wuAhSYdfg9w4GlgDvB4Svdv4EnguwAMr0oRgVXA8JSlwj4AEIlY0Y5/DDR0DC8BjwGnYsGkn0fgZVv+XNzVwIgyCzk2TwHbUhjfA73L4GYRaAQcN7vV0gHdDjwD/FVmoZSNescXqc8GA1/HYmcRUJl7zwG7DOhg6n+15APT8MY7YEdMxB+KBc8ioBrdxgF7y9b/WPw8fVW3E8DtjpKqlipesPgI6ED95CBcBVoAV4JRwxUXm8M72lH/0Hb4YAQfgfnAmw6COueQYMQ4Re34JsfkHPBADISPgIavfg7ISGBFDGik7p+AOn0iSt3ToRg+AvtMNXjUAegJ/BAKWEJP6aq0TaQPsCMUx0dA44AOWCKdTDM7GgpYQm+DbYyJqRrnZ6E4PgKa4zXbJ9K2WpNjhlPLAKVpIm8A71dCYL9pMl0cgB7mTOwOBSyht8U2yMT0Fc8EkAnri8C3JuefdSwGmRxVmOtKDphR/WEHXLe89KgRReAjMxaPcSw0dU6uI+/vs9dPF17n73zoer4IaMdV+xOJrs2hi9tRQiNFIoeBzhH23mn0TjvzuC2+1KBV4IhGajnc3tETmQmVEpC9XhE0TidyDOgYAxygq/t1utrodePHANubKlnDnGq/roi3OWC6fU2KAc/RVZrsAe52dDTEabSIkrwLTfowCziqRmd4ojvGLntndlVESikVJXkENIGqJ9ybQnwHmBW1yr/K3YCNqU6vb0uP60V34l4Zc4nCPc7O86Fcppmh7d0M5RfMq8eXoUCuXhEB6erW5JY6117RWJ4T+qbAQDueFxWBUg0zhIAc1kV+Zc4OHTJVS3/qGX/Y/G4NPBG5q9GRCCUgPzQTfeXJ30gfuWYeBmbbDuzblGGmma0NBY0hIEw1uanAdKBx6CKOnvqLHnh1F86LrCKuJ5xCiSWQAOoZ/SVAh1xpkncN1Gu0RpNPbYqlnXrVnqP050E3wbIE0otpKNMh1bOIyq5+C9BvA7ptXSjcRtCL3RKPXuHbabUIBPhYqKLXiU9Sr4XXTbq9lhGhfwBriYD8EQk9tbgiEmPtm+p/dqHWCMhBX9+ZaH5UWeSLYS0SSJOYa4bKt7MSsFYJJCTaARpBMqWWCRSe+lo8xEFOu0r1EYjesiob1EegyhsaDXcDOg+jMYo5z68AAAAASUVORK5CYII="/>
                                                </div>
                                            </div>
                                            <span class="fw-semibold d-block mb-1">本月漏洞修复数</span>
                                            <h3 class="card-title text-nowrap mb-2">{{ month_fix_count }}</h3>
                                            {% if month_fix_increase_percentage >= 0 %}
                                                <small class="text-danger fw-semibold"><i class="bx bx-up-arrow-alt"></i>
                                                    {{ month_fix_increase_percentage|floatformat:"0" }}%</small>
                                            {% else %}
                                                <small class="text-success fw-semibold"><i class="bx bx-down-arrow-alt"></i>
                                                    {{ month_fix_increase_percentage|floatformat:"0" }}%</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6 mb-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="card-title d-flex align-items-start justify-content-between">
                                                <div class="avatar flex-shrink-0">
                                                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA91JREFUaEPtmEnIjlEUx39fNmYhImRlylAslDJGxqKEyJCpkKKEpMhKCbFjY0iIxEIpU6aF2FAyzwsW5ijTiuev+9Tjeu5z7zP4Xp++u3l7n3vuuf//Oeeee8+po4GPugaOn0YCtfZgowf+Rw+0BJYC2+qD3N8IoY3AaqA78MFDohUg+SlAN+AhsB/YEUq+SgLjgANAx8Tm5w24LymAOgGXgF4pcxeAScA3H5EqCWgvhc4us+kjYCjw2gH+CtAjA2AQibwEWgODjOXS9p4InDKgXxpZW06W94GP15wGJmR5IS+BzUbhQIfSTcAN4DKwF1gCvE3IKrwUNn2s9XeA5cAxoIM1p28zXCTyEBgGnAWaAquiQ7cn+v1kKW4GfE18awF8Nv+zwI+KCLwB+gMXgfaWXh3yk2kkQgjMNYczbf1RYKbvoBmryiu25e9GHhlpwMdqBhgvtU3o3QqsLUpA66ab9NY8oUSpTp7wDYVEGniFTWx5W8dxYGrio8JxURkCWnsdGJxQosP4yoNeYSPwvS25e1GojLAsH4soNBda8suA3WUItAPeAcos94HRwJwoDR7KICDLK9vY4GV5hU3ycMdqZOkFls7b5mykbhVyBrRQcT4EWG8OpTZRJlrhIOAC/8DcDTZ44dANPM/S9wJQ8njuMlQoAcW+fZumfdM+rpjX3DpgSwoY3eBKFskhb+sidIKXcCgB30GN512Wj+d/AIvNHRHvfzglk3ktHyuskoAPfNIIOj8CXgp8lR7IChuX95SdlIlyh01yQRUeyGP5rFAMDpsqCdQUfNkQqjn4MgT+CfBFCQi8Xox9Q3OrQy4rz4+J7gBVc96R9xDXh+VVpd0yNXLac+M3UnkI1Ad4gdsX3b7zTVdjjc8FoQSK5Pm0vZUqhwPPrEnpVxGjTobKSA09XVRO6sWrh2SqN0II/G3LqyuheO+aYW09AnUuZIBcIaSS8BrQz+dKz7wOrCz/1CGn2uIMoGrMHlcBNQs+pq31eUBFhArzMkNW05PBBT7WrSbXE6uof+xpvXhfo4o9FTNFR57nQRvTyUsa9XvUpdN3/aYOnwf0/C06fGFj651lXqfywnZgA9AZGAucK0pAFuxSgEEey8fqVZG9N1WfWooKKTUO1LpxNg98HlgJ7MxJIK/lY/U9TXPX3s71/Zecj4BkDgKzA0kUBR+o/k+xEAJNos7CEWCaZ5ciYVMYeLwwhIBkReJE1Pec7NixJuBDQyiJOS2clKvHmxxe2qJ5FYR6IKlXPSFd62q13zRtkriBm3f/0vJFCJTetEoFjQSqtGYRXY0eKGK1Ktc0eA/8BGfmxDFooh7qAAAAAElFTkSuQmCC"/>
                                                </div>
                                            </div>
                                            <span class="fw-semibold d-block mb-1">本月漏洞产生数</span>
                                            <h3 class="card-title mb-2">{{ month_vul_count }}</h3>
                                            {% if month_vul_increase_percentage >= 0 %}
                                                <small class="text-danger fw-semibold"><i class="bx bx-up-arrow-alt"></i>
                                                    {{ month_vul_increase_percentage|floatformat:"0" }}%</small>
                                            {% else %}
                                                <small class="text-success fw-semibold"><i class="bx bx-down-arrow-alt"></i>
                                                    {{ month_vul_increase_percentage|floatformat:"0" }}%</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <!-- </div>
                <div class="row"> -->
                                <div class="col-12 mb-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between flex-sm-row flex-column gap-3">
                                                <div class="d-flex flex-sm-column flex-row align-items-start justify-content-between">
                                                    <div class="card-title">
                                                        <h5 class="text-nowrap mb-2">修复效率</h5>
                                                        <span class="badge bg-label-warning rounded-pill">Year 2024</span>
                                                    </div>
                                                    <div class="mt-sm-auto">
                                                        {% if fix_increase_percentage >= 0 %}
                                                        <small class="text-danger text-nowrap fw-semibold"><i class="bx bx-chevron-up"></i>{{ fix_increase_percentage }}%</small>
                                                        {% else %}
                                                        <small class="text-success text-nowrap fw-semibold"><i class="bx bx-chevron-down"></i>{{ fix_increase_percentage }}%</small>
                                                        {% endif %}
                                                        <h3 class="mb-0">{{ distinct_days_count }}天</h3>
                                                    </div>
                                                </div>
                                                <div id="profileReportChart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Order Statistics -->
                        <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
                            <div class="card h-100">
                                <div class="card-header d-flex align-items-center justify-content-between pb-0">
                                    <div class="card-title mb-0">
                                        <h5 class="m-0 me-2">漏洞占比</h5>
                                        <small class="text-muted">仅显示top4</small>
                                    </div>

                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            <h2 class="mb-2">{{ total_vul_count }}</h2>
                                            <span>Total </span>
                                        </div>
                                        <div id="orderStatisticsChart"></div>
                                    </div>
                                    <ul class="p-0 m-0">
                                        <li class="d-flex mb-4 pb-1">
                                            <div class="avatar flex-shrink-0 me-3">
                            <span class="avatar-initial rounded bg-label-primary"
                            ><i class="bx bx-mobile-alt"></i
                            ></span>
                                            </div>
                                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                <div class="me-2">
                                                    <h6 class="mb-0">SQL注入</h6>
                                                    <small class="text-muted"></small>
                                                </div>
                                                <div class="user-progress">
                                                    <small class="fw-semibold">8</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="d-flex mb-4 pb-1">
                                            <div class="avatar flex-shrink-0 me-3">
                                                <span class="avatar-initial rounded bg-label-success"><i
                                                        class="bx bx-closet"></i></span>
                                            </div>
                                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                <div class="me-2">
                                                    <h6 class="mb-0">跨站脚本攻击</h6>
                                                    <small class="text-muted"></small>
                                                </div>
                                                <div class="user-progress">
                                                    <small class="fw-semibold">4</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="d-flex mb-4 pb-1">
                                            <div class="avatar flex-shrink-0 me-3">
                                                <span class="avatar-initial rounded bg-label-info"><i
                                                        class="bx bx-home-alt"></i></span>
                                            </div>
                                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                <div class="me-2">
                                                    <h6 class="mb-0">跨站请求伪造</h6>
                                                    <small class="text-muted"></small>
                                                </div>
                                                <div class="user-progress">
                                                    <small class="fw-semibold">3</small>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="d-flex">
                                            <div class="avatar flex-shrink-0 me-3">
                            <span class="avatar-initial rounded bg-label-secondary"
                            ><i class="bx bx-football"></i
                            ></span>
                                            </div>
                                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                                                <div class="me-2">
                                                    <h6 class="mb-0">服务器端请求伪造</h6>
                                                    <small class="text-muted"></small>
                                                </div>
                                                <div class="user-progress">
                                                    <small class="fw-semibold">1</small>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!--/ Order Statistics -->

                        <!-- Expense Overview -->
                        <div class="col-md-6 col-lg-4 order-1 mb-4">
                            <div class="card h-100">
                                <h5 class="card-header m-0 me-2 pb-3">漏洞数量统计</h5>
                                <div class="card-body px-0">
                                    <div id="totalRevenueChart" class="px-2" style="margin-left: auto; margin-right: auto; margin-top: auto;margin-bottom: auto;"></div>
                                </div>
                            </div>
                        </div>
                        <!--/ Expense Overview -->

                        <!-- Transactions -->
                        <div class="col-md-6 col-lg-4 order-2 mb-4">
                            <div class="card h-100">
                                <div class="card-header d-flex align-items-center justify-content-between">
                                    <h5 class="card-title m-0 me-2">项目总览</h5>
                                </div>
                                <div class="card-body overflow-auto" id="vertical-example" style="max-height: 400px;">
                                    <ul class="list-unstyled m-0">
                                        {% for project in user_projects %}
                                        <li class="d-flex mb-4 pb-1">
                                            <div class="avatar flex-shrink-0 me-3">
                                                <img src="{% static 'img/icons/unicons/' %}{% if project.Pdanger < 20 %}20{% elif project.Pdanger < 30 %}30{% elif project.Pdanger < 40 %}40{% elif project.Pdanger < 50 %}50{% elif project.Pdanger < 60 %}60{% elif project.Pdanger <= 70 %}70{% else %}80{% endif %}.png" alt="Risk Icon" class="rounded"/>
                                            </div>
                                            <div class="d-flex w-100 flex-wrap align-items-center justify-content-between">
                                                <div class="me-2">
                                                    <h6 class="mb-0">{{ project.Pname }}</h6>
                                                </div>
                                                <div class="user-progress d-flex align-items-center">
                                                    <h6 class="mb-0 me-2">风险指数:</h6>
                                                    <span class="text-muted">{{ project.Pdanger|floatformat:"2" }}</span>
                                                </div>
                                            </div>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            </div>
                        </div>
                        <!--/ Transactions -->
                    </div>
                </div>
                <!-- / Content -->

                <!-- Footer -->
                <footer class="content-footer footer bg-footer-theme">
                    <div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
                        <div class="mb-2 mb-md-0">
                            ©
                            <script>
                                document.write(new Date().getFullYear());
                            </script>
                            , 安全漏洞检测系统
                        </div>
                    </div>
                </footer>
                <!-- / Footer -->

                <div class="content-backdrop fade"></div>
            </div>
            <!-- Content wrapper -->
        </div>
        <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>
<!-- / Layout wrapper -->


<!-- Core JS -->
<!-- build:js assets/vendor/js/core.js -->
<script src="{% static 'vendor/libs/jquery/jquery.js' %}"></script>
<script src="{% static 'vendor/libs/popper/popper.js' %}"></script>
<script src="{% static 'vendor/js/bootstrap.js' %}"></script>
<script src="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.js' %}"></script>

<script src="{% static 'vendor/js/menu.js' %}"></script>
<!-- endbuild -->

<!-- Vendors JS -->
<script src="{% static 'vendor/libs/apex-charts/apexcharts.js' %}"></script>

<!-- Main JS -->
<script src="{% static 'js/main.js' %}"></script>

<!-- Page JS -->
<script src="{% static 'js/dashboards-analytics.js' %}"></script>

<!-- GitHub Buttons Script -->
<script async defer src="https://buttons.github.io/buttons.js"></script>

<script>
    (function () {
  let cardColor, headingColor, axisColor, shadeColor, borderColor;

  cardColor = config.colors.white;
  headingColor = config.colors.headingColor;
  axisColor = config.colors.axisColor;
  borderColor = config.colors.borderColor;

  // Total Revenue Report Chart - Bar Chart
  // --------------------------------------------------------------------
  const totalRevenueChartEl = document.querySelector('#totalRevenueChart'),
    totalRevenueChartOptions = {
      series: [
          {
            name: '产生漏洞数',
            data: [{% for project in Vul_num %} {{ project.total_vul }} {% if not forloop.last %}, {% endif %}{% endfor %}]
          },
          {
            name: '已修复漏洞数',
            data: [{% for project in Vul_num %}-{{ project.total_fix }}{% if not forloop.last %}, {% endif %}{% endfor %}]
          }
        ],
      chart: {
        height: 400,
        stacked: true,
        type: 'bar',
        toolbar: { show: false }
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '33%',
          borderRadius: 12,
          startingShape: 'rounded',
          endingShape: 'rounded'
        }
      },
      colors: [config.colors.primary, config.colors.info],
      dataLabels: {
        enabled: false
      },
        tooltip: {
      y: {
        formatter: function(val) {
          return Math.abs(val);
        }
      }
    },
      stroke: {
        curve: 'smooth',
        width: 6,
        lineCap: 'round',
        colors: [cardColor]
      },
      legend: {
        show: true,
        horizontalAlign: 'left',
        position: 'top',
        markers: {
          height: 8,
          width: 8,
          radius: 12,
          offsetX: -3
        },
        labels: {
          colors: axisColor
        },
        itemMargin: {
          horizontal: 10
        }
      },
      grid: {
        borderColor: borderColor,
        padding: {
          top: 0,
          bottom: 0,
          left: 20,
          right: 20
        }
      },
      xaxis: {
        categories: [{% for project in Vul_num %}'{{ project.date|date:"m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
        labels: {
          style: {
            fontSize: '13px',
            colors: axisColor
          }
        },
        axisTicks: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
      labels: {
        style: {
          fontSize: '13px',
          colors: axisColor
        },
        formatter: function(val) {
          return Math.abs(val);
        }
      }
    },
      responsive: [
        {
          breakpoint: 1700,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '32%'
              }
            }
          }
        },
        {
          breakpoint: 1580,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '35%'
              }
            }
          }
        },
        {
          breakpoint: 1440,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '42%'
              }
            }
          }
        },
        {
          breakpoint: 1300,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '48%'
              }
            }
          }
        },
        {
          breakpoint: 1200,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '40%'
              }
            }
          }
        },
        {
          breakpoint: 1040,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 11,
                columnWidth: '48%'
              }
            }
          }
        },
        {
          breakpoint: 991,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '30%'
              }
            }
          }
        },
        {
          breakpoint: 840,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '35%'
              }
            }
          }
        },
        {
          breakpoint: 768,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '28%'
              }
            }
          }
        },
        {
          breakpoint: 640,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '32%'
              }
            }
          }
        },
        {
          breakpoint: 576,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '37%'
              }
            }
          }
        },
        {
          breakpoint: 480,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '45%'
              }
            }
          }
        },
        {
          breakpoint: 420,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '52%'
              }
            }
          }
        },
        {
          breakpoint: 380,
          options: {
            plotOptions: {
              bar: {
                borderRadius: 10,
                columnWidth: '60%'
              }
            }
          }
        }
      ],
      states: {
        hover: {
          filter: {
            type: 'none'
          }
        },
        active: {
          filter: {
            type: 'none'
          }
        }
      }
    };
  if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) {
    const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions);
    totalRevenueChart.render();
  }

    // Income Chart - Area chart
  // --------------------------------------------------------------------
    const monthlyVuls = {{ monthly_vuls|safe }};
  const incomeChartEl = document.querySelector('#incomeChart'),
    incomeChartConfig = {
      series: [
      {
        name: 'vul',
        data: monthlyVuls
      }
        ],
      chart: {
        height: 315,
        parentHeightOffset: 0,
        parentWidthOffset: 0,
        toolbar: {
          show: true
        },
        type: 'area'
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        width: 2,
        curve: 'smooth'
      },
      legend: {
        show: false
      },
      markers: {
        size: 6,
        colors: 'transparent',
        strokeColors: 'transparent',
        strokeWidth: 4,
        discrete: [
          {
            fillColor: config.colors.white,
            seriesIndex: 0,
            dataPointIndex: 7,
            strokeColor: config.colors.primary,
            strokeWidth: 2,
            size: 6,
            radius: 8
          }
        ],
        hover: {
          size: 7
        }
      },
      colors: [config.colors.primary],
      fill: {
        type: 'gradient',
        gradient: {
          shade: shadeColor,
          shadeIntensity: 0.6,
          opacityFrom: 0.5,
          opacityTo: 0.25,
          stops: [0, 95, 100]
        }
      },
      grid: {
        borderColor: borderColor,
        strokeDashArray: 3,
        padding: {
          top: -20,
          bottom: -8,
          left: 8,
          right: 8
        }
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        },
        labels: {
          show: true,
          style: {
            fontSize: '13px',
            colors: axisColor
          }
        }
      },
      yaxis: {
        labels: {
          show: false
        },
        min: 10,
        max: 50,
        tickAmount: 4
      },

    };
  if (typeof incomeChartEl !== undefined && incomeChartEl !== null) {
    const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig);
    incomeChart.render();
  }
  // Profit Report Line Chart
  // --------------------------------------------------------------------
        const sixFixes = {{ recent_six_days_fixes|safe }};
        console.log(sixFixes)
  const profileReportChartEl = document.querySelector('#profileReportChart'),
    profileReportChartConfig = {
      chart: {
        height: 80,
        // width: 175,
        type: 'line',
        toolbar: {
          show: false
        },
        dropShadow: {
          enabled: true,
          top: 10,
          left: 5,
          blur: 3,
          color: config.colors.warning,
          opacity: 0.15
        },
        sparkline: {
          enabled: true
        }
      },
      grid: {
        show: false,
        padding: {
          right: 8
        }
      },
      colors: [config.colors.warning],
      dataLabels: {
        enabled: false
      },
      stroke: {
        width: 5,
        curve: 'smooth'
      },
      series: [
        {
            name: 'Fixes',
          data: sixFixes
        }
      ],
      xaxis: {
        show: false,
        lines: {
          show: false
        },
        labels: {
          show: false
        },
        axisBorder: {
          show: false
        }
      },
      yaxis: {
        show: false
      }
    };
  if (typeof profileReportChartEl !== undefined && profileReportChartEl !== null) {
    const profileReportChart = new ApexCharts(profileReportChartEl, profileReportChartConfig);
    profileReportChart.render();
  }

    })();
</script>
</body>
</html>