• 项目平台——测试报表的实现(六)


    一、页面成果图展示

    在这里插入图片描述

    二、代码逻辑

    1、接口封装

    api/index.js

    // 传递查询字符串参数格式
    	getRecord(id){
    		return http.get(`/records/`,{
    			params:{
    				plan__project:id
    			}
    		})
    	}
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    2、发送接口请求

    Records.vue

    <script>
    import { mapState } from 'pinia'
    import { userStore } from '../store/user.js'
    
    
    export default{
        data(){
            return{
                recordList:[]
            }
        },
        computed:{
            ...mapState(userStore,['pro'])
        },
    
        methods:{
                async getAllRecord(){
                    const response = await this.$api.getRecord(this.pro.id)
                    if(response.status===200){
                        this.recordList=response.data
                    }
    
                }
        },
        created(){
            this.getAllRecord()
        }
    }
    
    </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    特别注意:
    1、 定义created()的目的是,每次打开页面需要调用getAllRecord函数,渲染页面。
    2、执行逻辑
    当在项目列表页面,选择项目进入项目首页时,会将项目信息保存在vue的全局数据存储仓库
    在这里插入图片描述
    将pro传递到全局定义的方法中savePro(pro)中,并将数据保存在vue全局共享数据中(state——》pro)
    在这里插入图片描述

    import { mapState } from ‘pinia’
    import { userStore } from ‘…/store/user.js’
    mapState:映射Pinia中的全局数据
    userStore:仓库名称

    定义计算属性:computed
    将pinia中定义的全局数据映射为当前组件的计算属性
    从userStore对象中映射pro参数(项目信息)
    在这里插入图片描述
    将项目id作为查询字符串参数,发送接口请求
    在这里插入图片描述

    三、样式设计

    1、element-plus中表格组件的使用

    在这里插入图片描述
    在这里插入图片描述
    prop接收后端传递的key,
    label接收字段名称
    在这里插入图片描述

    在这里插入图片描述
    通过for循环遍历将创建时间加到label列表中;将通过率加入到value列表中
    返回label和value2个字段
    在这里插入图片描述
    在这里插入图片描述
    渲染图表,需要注意的时需要将数据挂载成功之后再渲染图表

    在这里插入图片描述

    四、总体代码

    <template>
        <!-- 图表展示 -->
        <div class="char_box" ref="chart1"></div>
        <!-- 执行记录的表格 -->
        <el-table :data="recordList" style="width: 100%">
            <el-table-column prop="create_time" label="执行时间" min-width="180"/>
            <el-table-column prop="env_name" label="执行环境"/>
            <el-table-column prop="plan_name" label="测试计划" />
            <el-table-column prop="all" label="总用例数"/>
            <el-table-column prop="success" label="通过用例"/>
            <el-table-column prop="pass_rate" label="通过率"/>
            <el-table-column label="测试报告" width="150px">
                <template #default="scope">
                    <el-button icon="View" type="success" plain>查看报告</el-button>
                </template>
            </el-table-column>
        </el-table>
    
        
    </template>
    
    <script>
    import { mapState } from 'pinia'
    import { userStore } from '../store/user.js'
    import mychart from '../common/myChart.js'
    
    export default{
        data(){
            return{
                recordList:[]
            }
        },
        computed:{
            ...mapState(userStore,['pro']),
    
            chartData(){
                let label=[]
                let value=[]
                this.recordList.forEach(item => {
                    label.push(item.create_time)
                    value.push(item.pass_rate)
                });
                return{
                    label:label,
                    value:value
                }
            }
        },
    
        methods:{
                async getAllRecord(){
                    const response = await this.$api.getRecord(this.pro.id)
                    if(response.status===200){
                        this.recordList=response.data
                    }
    
                },
                // 渲染图表
                showChart(){
                    const ele = this.$refs['chart1']
                    mychart.chart3(ele,this.chartData.value,this.chartData.label)
    
                }
        },
        created(){
            this.getAllRecord();
    
        },
        // 数据挂载成功之后再渲染图表
        mounted(){
            // 为了保险起见,设置1秒的延时
            setTimeout(()=>{
                this.showChart()
            },1000)
            
        }
    }
    
    </script>
    
    <style scoped>
        .char_box{
            height: 300px;
            background: #f2f2f2;
        }
    </style>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86

    在这里插入图片描述

    五、问题解决

    当数据量太多的话,向下滚动鼠标,右侧菜单栏会出现空白的地方
    在这里插入图片描述
    解决
    使用element-plus中的滚动条组件,将图表展示放到滚动条组件中。
    在这里插入图片描述

    六、项目首页【执行记录】设计

    1、导入子组件

    在这里插入图片描述

    2、注册子组件

    在这里插入图片描述

    3、使用子组件

    在这里插入图片描述
    在这里插入图片描述

  • 相关阅读:
    6.同步异步、正则表达式
    震撼消息!OpenAI考虑加入AI芯片制造联盟
    Dijkstra算法求最短路
    视图/存储过程/触发器
    算法刷题路线总结与相关资料分享
    1932. 合并多棵二叉搜索树 并查集+DFS
    ArduinoUNO实战-第十一章-4位共阴数码管实验
    传奇GOM/GEE微端配置外网架设教程
    Java进阶-异常处理
    ros gdb调试
  • 原文地址:https://blog.csdn.net/YZL40514131/article/details/133634363