岳阳网站建设 熊掌号,学做网,如何建设手机网站首页,帮推广平台这里写目录标题 一、页面成果图展示二、代码逻辑1、接口封装2、发送接口请求 三、样式设计1、element-plus中表格组件的使用 四、总体代码五、问题解决六、项目首页【执行记录】设计1、导入子组件2、注册子组件3、使用子组件 一、页面成果图展示 二、代码逻辑
1、接口封装
ap… 这里写目录标题 一、页面成果图展示二、代码逻辑1、接口封装2、发送接口请求 三、样式设计1、element-plus中表格组件的使用 四、总体代码五、问题解决六、项目首页【执行记录】设计1、导入子组件2、注册子组件3、使用子组件 一、页面成果图展示 二、代码逻辑
1、接口封装
api/index.js
// 传递查询字符串参数格式getRecord(id){return http.get(/records/,{params:{plan__project:id}})}2、发送接口请求
Records.vue
script
import { mapState } from pinia
import { userStore } from ../store/user.jsexport default{data(){return{recordList:[]}},computed:{...mapState(userStore,[pro])},methods:{async getAllRecord(){const response await this.$api.getRecord(this.pro.id)if(response.status200){this.recordListresponse.data}}},created(){this.getAllRecord()}
}/script特别注意 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 classchar_box refchart1/div!-- 执行记录的表格 --el-table :datarecordList stylewidth: 100%el-table-column propcreate_time label执行时间 min-width180/el-table-column propenv_name label执行环境/el-table-column propplan_name label测试计划 /el-table-column propall label总用例数/el-table-column propsuccess label通过用例/el-table-column proppass_rate label通过率/el-table-column label测试报告 width150pxtemplate #defaultscopeel-button iconView typesuccess plain查看报告/el-button/template/el-table-column/el-table/templatescript
import { mapState } from pinia
import { userStore } from ../store/user.js
import mychart from ../common/myChart.jsexport 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.status200){this.recordListresponse.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)}
}/scriptstyle scoped.char_box{height: 300px;background: #f2f2f2;}
/style五、问题解决
当数据量太多的话向下滚动鼠标右侧菜单栏会出现空白的地方 解决 使用element-plus中的滚动条组件将图表展示放到滚动条组件中。
六、项目首页【执行记录】设计
1、导入子组件 2、注册子组件 3、使用子组件
