项目平台——测试报表的实现（六）

客官°小女子只卖身不卖艺 2024-02-25 01:58 28阅读 0赞

#### 这里写目录标题 ####

*  一、页面成果图展示
 *  二、代码逻辑
 *   *  1、接口封装
     *  2、发送接口请求
 *  三、样式设计
 *   *  1、element-plus中表格组件的使用
 *  四、总体代码
 *  五、问题解决
 *  六、项目首页【执行记录】设计
 *   *  1、导入子组件
     *  2、注册子组件
     *  3、使用子组件

## 一、页面成果图展示 ##

![在这里插入图片描述][945126f9cd9e4d5a9f37c364da1cabee.png]

## 二、代码逻辑 ##

### 1、接口封装 ###

api/index.js

// 传递查询字符串参数格式
    	getRecord(id){
        
    		return http.get(`/records/`,{
        
    			params:{
        
    				plan__project:id
    			}
    		})
    	}

### 2、发送接口请求 ###

Records.vue

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

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

定义计算属性：computed  
将pinia中定义的全局数据映射为当前组件的计算属性  
从userStore对象中映射pro参数（项目信息）  
![在这里插入图片描述][82800334ba804cd2b7b4e0039d5305b0.png]  
将项目id作为查询字符串参数，发送接口请求  
![在这里插入图片描述][d8d61872f893453496bee7ead8d8ece4.png]

## 三、样式设计 ##

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

![在这里插入图片描述][a17e5bd191f2496ba3d683db7c454998.png]  
![在这里插入图片描述][afc5eb241a934863ae7763ee7cfa2f08.png]  
prop接收后端传递的key，  
label接收字段名称  
![在这里插入图片描述][1a3d710651704877bef222a1233ee747.png]

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

![在这里插入图片描述][dd2b987137584c9fabb3b56d01f22b5d.png]

## 四、总体代码 ##

<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>

![在这里插入图片描述][91cdcf55a9574dcc8992f7be8be87c9a.png]

## 五、问题解决 ##

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

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

### 1、导入子组件 ###

![在这里插入图片描述][f60f425a8c9844b1aed4ce8b9fd3288e.png]

### 2、注册子组件 ###

![在这里插入图片描述][837e5cc3f2d748cea9cb81313501e550.png]

### 3、使用子组件 ###

![在这里插入图片描述][228f4090257f421ba7e9be53c7ee442a.png]  
![在这里插入图片描述][c224c9d527e5495eae86ac40b021b309.png]

[945126f9cd9e4d5a9f37c364da1cabee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/ed01f80dc5c143aeb4303b2e656a0bc5.png
[830c60f9b87f4806b1306f176bab2451.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/201d8b3e3118451b9ffdad6382881455.png
[e04107ee25fe42c287c90d67034a4bc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/af509a40777f430ba843e74291d3c865.png
[82800334ba804cd2b7b4e0039d5305b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/3ee9938b267446faa46561abe6098925.png
[d8d61872f893453496bee7ead8d8ece4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/2d8c91545fa94ae5999511ffc0f6477d.png
[a17e5bd191f2496ba3d683db7c454998.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/9fc8ac92a78746cbbbd8de0893a0ed81.png
[afc5eb241a934863ae7763ee7cfa2f08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/e77acde5744d4ac59e0d945b5abd23ea.png
[1a3d710651704877bef222a1233ee747.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/29a9ec9e793e47c9a77e91b0c3d58eb3.png
[cf44fea08c95492aa3d1bd35d4738664.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/5623716f6a03417b8fba19bc464ff393.png
[dcbbe6ff6a10452ebfff5b0fec9cb583.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/2ad3813f2c0341848634cc75cf89c9a6.png
[d558232cbd284c269110232c7ad18683.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/43df152b92a64dd78d6ba10a71bd3bf1.png
[dd2b987137584c9fabb3b56d01f22b5d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/d2f19c4f4a4f4a11b677b6238c0b93c6.png
[91cdcf55a9574dcc8992f7be8be87c9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0a7f65f8e49641218b93e5f3f9dcd79e.png
[a81b374302bb43f7a450e7d5412b3547.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/6f5874c7c8b443518743b5bfa3ffe0ca.png
[172f59e726ba4a0bbf5bfcbc23ae2469.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/4d40d1cfe0e442f2bebffc3015a18401.png
[f60f425a8c9844b1aed4ce8b9fd3288e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/c8e99dcb8cc9475591bb4dff001c426c.png
[837e5cc3f2d748cea9cb81313501e550.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/bf75417a2fc14a989dbd34c189f22b7e.png
[228f4090257f421ba7e9be53c7ee442a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/554d8d73ffe645e1bf84d67ce2efd417.png
[c224c9d527e5495eae86ac40b021b309.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/1544308b325b48879717aa4462ede7b2.png