【Vue】vue.js a标签href里添加参数--20220628

参考

https://blog.csdn.net/yitian_881112/article/details/80838704

效果

代码

{% extends 'PPDASH/base.html' %}
{% load static %}

{% block body_block %}

<!-- 调整color的js脚本开始 -->
<script>
    window.onload = function(){
        paradom1 = document.getElementsByClassName("p1")
        console.log(paradom1)
        for (i = 0 ; i < paradom1.length; i++) {
            var para = document.getElementsByClassName("p1")[i];if (para.textContent <=35) {para.style.color = "red";}else if (para.textContent <65) {para.style.color = "orange";}else{para.style.color = "green";}
        }
    }
</script>
<!-- 调整color的js脚本介绍 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div class="container-fluid" id="app">
    <p class="my-3">
        查询结果如下&nbsp;&nbsp;
        <a href="/PPDASH/compare_by_different_employee/{{ employee_list }}/" >个人对比图（前20名）</a>
        <a :href="'/PPDASH/compare_by_different_employee2/'+this.checkedNames" >个人对比图（勾选工号）</a>
        <span>[[ checkedNames ]]</span>
        
    </p>

    <table class="table table-striped table-bordered" >
        <thead>
            <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:10px;">
                <th scope="col">勾选</th>
                <th scope="col">工號</th>
                <th scope="col" style="width:80px;">姓名</th>
                <th scope="col">部門</th>
                <th scope="col">Level</th>
                <th scope="col">Function</th>
                <th scope="col">批次</th>
                <th scope="col">接纳反馈</th>
                <th scope="col">学习敏锐度</th>
                <th scope="col">结果导向</th>
                <th scope="col">全局思维</th>
                <th scope="col">适应力</th>
                <th scope="col">成就他人</th>
                <th scope="col">领导意愿</th>
                <th scope="col">平衡人际与任务</th>
                <th scope="col">辅导*</th>
                <th scope="col">授权委责*</th>
                <th scope="col">建立成功团队*</th>
                <th scope="col">管理人际关系*</th>
                <th scope="col">影响力*</th>
                <th scope="col">建立伙伴关系*</th>
                <th scope="col">计划与组织*</th>
            </tr>
        </thead>

    
        {% for employee in pageInfo.object_list %}
        <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:10px;">
            <td><input type="checkbox" id="{{ employee.eid }}" value="{{ employee.eid }}" v-model="checkedNames" /></td>
            <td><a href="/PPDASH/search_results/{{ employee.eid }}/">{{ employee.eid }}</a></td>
            <td>{{ employee.name }}</td>
            <td>{{ employee.dept_code }}</td>
            <td>{{ employee.level }}</td>
            <td>{{ employee.function }}</td>
            <td>{{ employee.batch }}</td>
            <td class="p1">{{ employee.score_jieshoufankui }}</td>
            <td class="p1">{{ employee.score_xueximinruidu }}</td>
            <td class="p1">{{ employee.score_jieguodaoxiang }}</td>
            <td class="p1">{{ employee.score_quanjusiwei }}</td>
            <td class="p1">{{ employee.score_shiyingli }}</td>
            <td class="p1">{{ employee.score_chengjiutaren }}</td>
            <td class="p1">{{ employee.score_lingdaoyiyuan }}</td>
            <td class="p1">{{ employee.score_pinghengrenjiyurenwu }}</td>
            <td class="p1">{{ employee.score_fudao }}</td>
            <td class="p1">{{ employee.score_shouquanweize }}</td>
            <td class="p1">{{ employee.score_jianlichenggongtuandui }}</td>
            <td class="p1">{{ employee.score_guanlirenjiguanxi }}</td>
            <td class="p1">{{ employee.score_yingxiangli }}</td>
            <td class="p1">{{ employee.score_jianlihuobanguanxi }}</td>
            <td class="p1">{{ employee.score_jihuayuzuzhi }}</td>
        </tr>
        {% endfor %}

    </table>


    <!--分页功能-->
    <div class="pagelist">
        {% if pageInfo.has_previous %}
            <a href="{% url 'search_results' pageInfo.previous_page_number %}">上一页</a>
        {% endif %}
                    
        {% if pageInfo.object_list %}
            {% for page in pageInfo.paginator.page_range %}
                {% if pageInfo.number == page %}
                    <a href="javascript:;" class="curPage">本页</a>
                {% else %}
                    <a href="{% url 'search_results' page %}">{{ page }}</a>
                {% endif %}
            {% endfor %}
        {% endif %}
                    
        {% if pageInfo.has_next %}
            <a href="{% url 'search_results' pageInfo.next_page_number %}">下一页</a>
        {% endif %}
    </div>

</div>






<script type="text/javascript">
    // 获取变量值
    // var plantid_list_js = JSON.parse('{{ plantid_list|safe }}');
    // var function_list_js = JSON.parse('{{ function_list|safe }}');
    // var name_list_js = JSON.parse('{{ name_list|safe }}');


    var app = new Vue({
        delimiters:['[[', ']]'],
        el: '#app',
        data() {
            return {
                checkedNames: [],
                selected: false,
                // message_plantid: '',
                // message_dept: '',
                // message_function: '',
                // message_eid: '',
                // message_name: '',
                // // options: ['P1','P3','P6','其他'],
                // plantid_options: plantid_list_js,
                // function_options: function_list_js,
                // name_options: name_list_js,
            }
            },
        methods:{
            // add:function () {
            //   this.arrlist.push()
            // }
        },
        computed: {
            // // 计算属性的 getter
            // checkedNames_js: function () {
            // // `this` 指向 vm 实例
            // return JSON.stringify(this.checkedNames)
            // }
        }
    });

</script>




{% endblock %}



<!-- 不用页脚 -->
{% block footer_block %}

{% endblock %}

views.py

# 不同同仁之间比较---TBD
@login_required
def compare_by_different_employee2(request,employee_list):
    print('request',request)

    #将列表拆解为工号并查询出员工对象
    import json
    print('employee_list00',employee_list)
    a_employee_list = []
    employee_list = employee_list.split(',')
    print('employee_list01',employee_list)
    # #json转化为列表
    # employee_list = json.loads(employee_list)
    # print(type(employee_list))
    # print('employee_list02',employee_list)


    # 创建雷达图
    c = (
        Radar()
        .add_schema(
            schema=[
                opts.RadarIndicatorItem(name="接纳反馈", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="学习敏锐度", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="结果导向", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="全局思维", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="适应力", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="成就他人", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="领导意愿", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="平衡人际与任务", max_=100,color="gray"),
                opts.RadarIndicatorItem(name="辅导*", max_=100,color="black"),
                opts.RadarIndicatorItem(name="授权委责*", max_=100,color="black"),
                opts.RadarIndicatorItem(name="建立成功团队*", max_=100,color="black"),
                opts.RadarIndicatorItem(name="管理人际关系*", max_=100,color="black"),
                opts.RadarIndicatorItem(name="影响力*", max_=100,color="black"),
                opts.RadarIndicatorItem(name="建立伙伴关系*", max_=100,color="black"),
                opts.RadarIndicatorItem(name="计划与组织*", max_=100,color="black"),
            ],
            splitarea_opt=opts.SplitAreaOpts(
                is_show=True, areastyle_opts=opts.AreaStyleOpts(opacity=1)
            ),

            )
        .set_global_opts(
            legend_opts=opts.LegendOpts(orient='vertical',pos_right='0%',pos_top='5%'),
            title_opts=opts.TitleOpts(title="PP Test多人对比图",subtitle="带*为能力项"),
        )
    )


    # for循环产生分割点 35 and 65
    labels = ['低','中','高']
    color = ['red','orange','green']
    values = [[35,35,35,35,35,35,35,35,35,35,35,35,35,35,35],
              [64,64,64,64,64,64,64,64,64,64,64,64,64,64,64],
              [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100],
                ]
    for i in range(3):
        v1 = []
        v1.append(values[i])
        c.add(series_name = labels[i], data = v1, color=color[i], is_selected=False,label_opts=opts.LabelOpts(is_show=False),areastyle_opts=opts.AreaStyleOpts(color=color[i],opacity=0))


    # for循环employee_list，来产生每个employee的雷达图
    for employee_id in employee_list:
        # get方法就可以访问对应的名字
        employee_x_get = Employee.objects.get(eid__istartswith=employee_id)
        employee_name = employee_x_get.name
        score_jieshoufankui = employee_x_get.score_jieshoufankui
        score_xueximinruidu = employee_x_get.score_xueximinruidu
        score_jieguodaoxiang = employee_x_get.score_jieguodaoxiang
        score_quanjusiwei = employee_x_get.score_quanjusiwei
        score_shiyingli = employee_x_get.score_shiyingli
        score_chengjiutaren = employee_x_get.score_chengjiutaren
        score_lingdaoyiyuan = employee_x_get.score_lingdaoyiyuan
        score_pinghengrenjiyurenwu = employee_x_get.score_pinghengrenjiyurenwu
        score_fudao = employee_x_get.score_fudao
        score_shouquanweize = employee_x_get.score_shouquanweize
        score_jianlichenggongtuandui = employee_x_get.score_jianlichenggongtuandui
        score_guanlirenjiguanxi = employee_x_get.score_guanlirenjiguanxi
        score_yingxiangli = employee_x_get.score_yingxiangli
        score_jianlihuobanguanxi = employee_x_get.score_jianlihuobanguanxi
        score_jihuayuzuzhi = employee_x_get.score_jihuayuzuzhi

        # 将部门参考数据写进去雷达图
        data_list1 = []
        data_list1.append(score_jieshoufankui)
        data_list1.append(score_xueximinruidu)
        data_list1.append(score_jieguodaoxiang)
        data_list1.append(score_quanjusiwei)
        data_list1.append(score_shiyingli)
        data_list1.append(score_chengjiutaren)
        data_list1.append(score_lingdaoyiyuan)                
        data_list1.append(score_pinghengrenjiyurenwu)
        data_list1.append(score_fudao)
        data_list1.append(score_shouquanweize)
        data_list1.append(score_jianlichenggongtuandui)
        data_list1.append(score_guanlirenjiguanxi)
        data_list1.append(score_yingxiangli)
        data_list1.append(score_jianlihuobanguanxi)
        data_list1.append(score_jihuayuzuzhi)
        v1=[]
        v1.append(data_list1)
        c.add(series_name = employee_name, data = v1, color=randomcolor(), label_opts=opts.LabelOpts(is_show=False),areastyle_opts=opts.AreaStyleOpts(color=randomcolor(),opacity=0.1))


    grid = (
    Grid()
    .add(c, grid_opts=opts.GridOpts(pos_right="80%"))
    )


    return HttpResponse(grid.render_embed())