disease_control_policy_management/policies/templates/policy_visualization.html

{% extends "admin/base_site.html" %}

{% block title %}传染病防治政策数据报表{% endblock %}

{% block extrahead %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
{% endblock %}


{% block content %}
    <script>
        function updateExcludedIds() {
            // 获取所有的复选框和输入框
            var checkboxes = document.getElementsByClassName('policy-checkbox');
            var input = document.getElementById('exclude_ids');

            var input_exclude_ids = "{{ exclude_ids | safe}}";
            var origin_exclude_ids = input_exclude_ids ? input_exclude_ids.split(',') : [];

            // 创建一个数组来保存被选中的ID
            var ids = [];

            // 遍历所有的复选框
            for (var i = 0; i < checkboxes.length; i++) {
                var checkbox = checkboxes[i];

                // 如果复选框被选中，将其值添加到数组中
                if (checkbox.checked) {
                    ids.push(checkbox.value);
                }
            }

            // 更新输入框的值
            if(origin_exclude_ids && origin_exclude_ids.length >0){
                input.value = [...origin_exclude_ids, ...ids].join(',');
            }
            else if(ids && ids.length > 1){
                input.value = [...ids].join(',');
            }else if(ids && ids.length === 1){
                input.value = ids[0];
            }
            
        }
    </script>
    <div class="container">
        <h1 class="mt-4">传染病防治政策数据报表</h1>

        <div class="row">
            <div class="col-md-6">
                <form method="GET" action="{% url 'policy_visualization' %}">
                    <div class="mb-3">
                        <label for="diseaseTypes">传染病分类：</label>
                        <select multiple class="form-control" id="diseaseTypes" name="disease_types">
                            {% for disease_type in disease_types %}
                                <option value="{{ disease_type.id }}" {% if disease_type.id in selected_disease_types %}selected{% endif %}>{{ disease_type.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="start_year" class="form-label">发布年份范围：</label>
                        <input type="number" name="start_year" id="start_year" class="form-control" min="1949" max="{{ current_year }}" value="{{ start_year }}" placeholder="起始年份">
                        <input type="number" name="end_year" id="end_year" class="form-control" min="1949" max="{{ current_year }}" value="{{ end_year }}" placeholder="结束年份">
                    </div>

                    <div class="mb-3">
                        <label for="exclude_ids" class="form-label">排除政策 ID：</label>
                        <input type="text" name="exclude_ids" id="exclude_ids" class="form-control" value="{{ exclude_ids }}" placeholder="政策 ID，多个以逗号分隔">
                    </div>

                    <div class="mb-3 form-check">
                        <div class="form-check-inline">
                            <input type="checkbox" name="group_by_category" id="group_by_category" class="form-check-input" {% if group_by_category %}checked{% endif %}>
                            <label for="group_by_category" class="form-check-label">按传染病类别统计 &nbsp; &nbsp; </label>
                        </div>
                        <div class="form-check-inline">
                            <input type="checkbox" name="show_raw_data" id="show_raw_data" class="form-check-input" {% if show_raw_data %}checked{% endif %}>
                            <label for="show_raw_data" class="form-check-label">显示原始数据</label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary">统计</button>
                </form>
            </div>
        </div>


        {% if show_raw_data %}
        <div class="row mt-4">
            <div class="col-md-6">
                <table class="table">
                    <thead>
                        <tr>
                            <th></th> <!-- 新增的标题 -->
                            <th>ID</th>
                            <th>类别</th>
                            <th>文件</th>
                            <th>年份</th>
                            <th>发布部门</th>

                            <th>发布日期</th>
                            <th>实施日期</th>
                            <th>传染病类型列表</th>
                            <th>时效性</th>
                            <th>效力级别</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in policy_list %}
                            <tr>
                                 <!-- 在每一行添加一个复选框，并设置其值为政策的ID -->
                                <td><input type="checkbox" class="policy-checkbox" value="{{ item.id }}" onchange="updateExcludedIds()"></td>
                                <td><a href="/admin/policies/policy/{{ item.id }}" target="_blank">{{ item.id }}</a></td>
                                <td>{{ item.category }}</td>
                                <td><a href="/admin/policies/policy/{{ item.id }}" target="_blank">{{ item.file_name }}</a></td>
                                <td>{{ item.year }}</td>
                                <td>{{ item.department }}</td>

                                <td>{{ item.publish_date }}</td>
                                <td>{{ item.implementation_date }}</td>
                                <td>
                                    {% for disease_type in item.disease_types.all %}
                                    {{ disease_type.name }}
                                    {% if not forloop.last %}, {% endif %}
                                    {% endfor %}
                                </td>
                                <td>{{ item.timeliness }}</td>
                                <td>{{ item.effectiveness_level }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        {% endif %}

        <div class="row mt-4">
    
            <div class="col-md-6">
                {% if group_by_category %}
                    <canvas id="categoryChart" width="400" height="200"></canvas>
                {% else %}
                    <canvas id="policyChart" width="400" height="200"></canvas>
                {% endif %}
                <!-- <canvas id="policyChart"></canvas> -->
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-6" >
                <div style="text-align:center;">数据总量：{{ total_count }}</div>
            </div>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<script>
{% if group_by_category %}
    var categoryChart = new Chart(document.getElementById('categoryChart'), {
        type: 'bar',
        data: {
            labels: [{% for item in policy_count_by_category %}"{{ item.disease_types__name }}",{% endfor %}],
            datasets: [{
                label: '政策文件数量',
                data: [{% for item in policy_count_by_category %}{{ item.count }},{% endfor %}],
                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    precision: 0,
                    stepSize: 1
                }
            }
        }
    });
{% else %}
      // 获取后端传递的数据
      var policyData = {{ policy_count_by_year|safe }};

        // 处理数据
        var years = policyData.map(item => item.year);
        var counts = policyData.map(item => item.count);

        // 创建图表
        var ctx = document.getElementById('policyChart').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: years,
                datasets: [{
                    label: '政策数量',
                    data: counts,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                        stepSize: 1
                    }
                }
            }
        });
{% endif %}
</script>
{% endblock %}