|
@@ -1,486 +1,577 @@
|
|
|
|
|
|
<template>
|
|
|
- <!-- 质量度量 -->
|
|
|
- <!-- <el-container>
|
|
|
- <el-aside width="14%" style="margin:1%; height:100%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
|
|
|
- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
|
|
|
- </el-aside>
|
|
|
- <el-main style=" margin:1% 1% 1% 0%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
|
|
|
- {{ bizName }} : <span style="font-weich: bold; font-size:24px;">{{ bizData }}</span>
|
|
|
- <el-tabs v-model="activeName" style="margin: 3% 0%;" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="线上问题" name="first">
|
|
|
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
- <el-form-item label="时间类型:">
|
|
|
- <el-date-picker v-model="formInline.value1" size="medium" type="date" placeholder="发生时间" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="开始时间:">
|
|
|
- <el-date-picker v-model="formInline.value1" size="medium" type="date" placeholder="选择日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="结束时间:" style="margin: 0 4%">
|
|
|
- <el-date-picker v-model="formInline.value1" size="medium" type="date" placeholder="选择日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
|
|
|
- </el-form-item>
|
|
|
- <div style="display: flex;">
|
|
|
- <div style="flex:1; text-align: right;">
|
|
|
- <el-form-item label="是否复盘:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="是否定责:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="发现阶段:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="问题等级:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="预期拦截阶段:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="处理时长:" />
|
|
|
- <el-input v-model="formInline.value1" class="selectWidth" style="width:45px;" />
|
|
|
- <span style="font-size:12px;">小时~</span>
|
|
|
- <el-input v-model="formInline.value1" style="width:45px;" />
|
|
|
- <span style="font-size:12px;">小时</span>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="问题状态:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="发现手段:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="处理结论:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="是否免提测:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>线上问题</div><hr>
|
|
|
- <el-table :data="tableData" border style="width: 100%">
|
|
|
- <el-table-column prop="date" label="日期" width="180" />
|
|
|
- <el-table-column prop="name" label="姓名" width="180" />
|
|
|
- <el-table-column prop="address" label="地址" />
|
|
|
- <el-table-column prop="date" label="日期" width="180" />
|
|
|
- <el-table-column prop="name" label="姓名" width="180" />
|
|
|
- <el-table-column prop="address" label="地址" />
|
|
|
- </el-table>
|
|
|
- </el-form>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="上线过程" name="second">
|
|
|
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
- <el-form-item label="开始时间:">
|
|
|
- <el-date-picker v-model="formInline.value1" size="medium" type="date" placeholder="选择日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="结束时间:" style="margin: 0 6%">
|
|
|
- <el-date-picker v-model="formInline.value1" size="medium" type="date" placeholder="选择日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
|
|
|
- </el-form-item>
|
|
|
- <div style="display: flex;">
|
|
|
- <div style="flex:1; text-align: right;">
|
|
|
- <el-form-item label="是否免提测:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="是否有预发环境:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="是否直接全流量:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="上线阶段:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="是否走预发环境:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="是否紧急上线:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="预发停留时长:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="执行状态:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="小流量停留时长:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="执行结果:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>上线过程</div><hr>
|
|
|
- <el-table :data="tableData" border style="width: 100%">
|
|
|
- <el-table-column prop="date" label="日期" width="180" />
|
|
|
- <el-table-column prop="name" label="姓名" width="180" />
|
|
|
- <el-table-column prop="address" label="地址" />
|
|
|
- <el-table-column prop="date" label="日期" width="180" />
|
|
|
- <el-table-column prop="name" label="姓名" width="180" />
|
|
|
- <el-table-column prop="address" label="地址" />
|
|
|
- </el-table>
|
|
|
- </el-form>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="线下缺陷" name="third">
|
|
|
- <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
- <el-form-item label="开始时间:">
|
|
|
- <el-date-picker v-model="formInline.value1" size="medium" type="date" placeholder="选择日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="结束时间:" style="margin: 0 6%">
|
|
|
- <el-date-picker v-model="formInline.value1" size="medium" type="date" placeholder="选择日期" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" size="medium" @click="onSubmit">查询</el-button>
|
|
|
- </el-form-item>
|
|
|
- <div style="display: flex;">
|
|
|
- <div style="flex:1; text-align: right;">
|
|
|
- <el-form-item label="平台类型:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="优先级:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="所属阶段:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="状态:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="错误类型:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="解决结果:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div style="flex:1; text-align: right">
|
|
|
- <el-form-item label="缺陷分级:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- <el-form-item label="发现方法:" />
|
|
|
- <el-select v-model="formInline.value1" size="medium" clearable placeholder="请选择" :label-width="inputLabel" class="selectWidth">
|
|
|
- <el-option v-for="item in statusOptionss" :key="item.value" :label="item.name" :value="item.value" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>线下缺陷</div><hr>
|
|
|
- <el-table :data="tableData" border style="width: 100%">
|
|
|
- <el-table-column prop="date" label="日期" width="180" />
|
|
|
- <el-table-column prop="name" label="姓名" width="180" />
|
|
|
- <el-table-column prop="address" label="地址" />
|
|
|
- <el-table-column prop="date" label="日期" width="180" />
|
|
|
- <el-table-column prop="name" label="姓名" width="180" />
|
|
|
- <el-table-column prop="address" label="地址" />
|
|
|
- </el-table>
|
|
|
- </el-form>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </el-main>
|
|
|
- </el-container> -->
|
|
|
- <div>
|
|
|
- <div class="combine-table">
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- style="width: 80%"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- prop="date"
|
|
|
- label="上线次数"
|
|
|
- style="width:50%;"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="免提测上线数"
|
|
|
- style="width:50%;"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- </el-table>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- style="width: 80%"
|
|
|
- class="move-border-top"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- prop="date"
|
|
|
- label="回滚数据"
|
|
|
- style="width:100%;"
|
|
|
- align="center"
|
|
|
+ <el-container v-loading.fullscreen.lock="loadingOnlineProcess" element-loading-background="rgba(0, 0, 0, 0.7)" element-loading-text="拼命加载中" class="set-background">
|
|
|
+ <el-header class="header">
|
|
|
+ <el-menu :default-active="activeIndex" active-text-color="#409EFF" mode="horizontal" @select="handleSelect">
|
|
|
+ <el-menu-item index="0">业务线数据</el-menu-item>
|
|
|
+ <el-menu-item index="2">部门数据</el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="timeInterval"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ value-format="timestamp"
|
|
|
+ />
|
|
|
+ </el-header>
|
|
|
+ <el-container style="height:calc(100vh - 140px);">
|
|
|
+ <el-aside class="aside">
|
|
|
+ <el-tree ref="treeBox" :data="dealWithBusinessDate" :expand-on-click-node="false" node-key="id" highlight-current :props="defaultProps" style="margin-top:20px" @node-click="handleNodeClick" />
|
|
|
+ </el-aside>
|
|
|
+ <el-main class="combine-table">
|
|
|
+ <el-menu :default-active="activeIndexSecondary" active-text-color="#409EFF" mode="horizontal" @select="handleSelectSecondary">
|
|
|
+ <el-menu-item index="3">质量大盘</el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ <!-- 上线过程 -->
|
|
|
+ <h4>1.上线过程</h4>
|
|
|
+ <el-table
|
|
|
+ :data="[onlineProcess]"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ size="mini"
|
|
|
>
|
|
|
<el-table-column
|
|
|
- prop="date"
|
|
|
- label="回滚次数"
|
|
|
- style="width:20%;"
|
|
|
+ prop="totalOnlineNum"
|
|
|
+ label="上线次数"
|
|
|
+ style="width:50%;"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(0)">{{ scope.row.totalOnlineNum }}</a></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="免提测上线数"
|
|
|
+ style="width:50%;"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(1)">{{ scope.row.noTestNum }}</a></template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table
|
|
|
+ :data="[onlineProcess]"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ class="move-border-top abviously"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="回滚数据"
|
|
|
+ style="width:100%;"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="回滚次数"
|
|
|
+ style="width:20%;"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(2)">{{ scope.row.rollbackNum }}</a></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="免提测回滚数"
|
|
|
+ style="width:20%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="预发回滚数"
|
|
|
+ style="width:20%;"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(3)">{{ scope.row.preRollbackNum }}</a></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="小流量回滚数"
|
|
|
+ style="width:20%;"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(4)">{{ scope.row.preLess5Min }}</a></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="全量回滚数"
|
|
|
+ style="width:20%;"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="toReportView(5)">{{ scope.row.allRollbackNum }}</a></template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table
|
|
|
+ :data="[onlineProcess]"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ class="move-border-top fontScale"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="预发具备率"
|
|
|
align="center"
|
|
|
+ width="calc(10/9)%"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
- prop="date"
|
|
|
- label="免提测回滚数"
|
|
|
- style="width:20%;"
|
|
|
+ prop="name"
|
|
|
+ label="有预发不走预发占比"
|
|
|
align="center"
|
|
|
+ width="110"
|
|
|
/>
|
|
|
<el-table-column
|
|
|
- prop="date"
|
|
|
- label="预发回滚数"
|
|
|
- style="width:20%;"
|
|
|
+ prop="name"
|
|
|
+ label="被动免提测率"
|
|
|
+ align="center"
|
|
|
+ width="calc(10/9)%"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="免提测上线占比"
|
|
|
+ align="center"
|
|
|
+ width="calc(10/9)%"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{ scope.row.noTestPercent | toPercent }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="回滚率"
|
|
|
+ align="center"
|
|
|
+ width="60"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{ scope.row.rollbackPercent | toPercent }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="免提测回滚占比"
|
|
|
align="center"
|
|
|
+ width="calc(10/9)%"
|
|
|
/>
|
|
|
+ <el-table-column
|
|
|
+ label="预发回滚率"
|
|
|
+ align="center"
|
|
|
+ width="calc(10/9)%"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{ scope.row.preRollbackPercent | toPercent }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="小流量回滚率"
|
|
|
+ align="center"
|
|
|
+ width="75"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{ scope.row.preLess5MinPercent | toPercent }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="全量回滚率"
|
|
|
+ align="center"
|
|
|
+ width="75"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">{{ scope.row.allRollbackPercent | toPercent }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table
|
|
|
+ :data="[onlineProcess]"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ class="move-border-top"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="预发停留<5min占比"
|
|
|
+ style="width:25%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="小流量停留<5min占比"
|
|
|
+ style="width:25%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="裸奔上线占比"
|
|
|
+ style="width:25%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="紧急上线占比"
|
|
|
+ style="width:25%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ <!-- 线上问题 -->
|
|
|
+ <h4>2.线上问题</h4>
|
|
|
+ <el-table
|
|
|
+ :data="[problemData]"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
<el-table-column
|
|
|
prop="date"
|
|
|
- label="小流量回滚数"
|
|
|
- style="width:20%;"
|
|
|
+ label="上线次数"
|
|
|
+ width="170"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="免提测上线数"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP0"
|
|
|
+ label="P0"
|
|
|
+ width="calc(10/7)%"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP1"
|
|
|
+ label="P1"
|
|
|
+ width="calc(10/7)%"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP2"
|
|
|
+ label="P2"
|
|
|
+ width="calc(10/7)%"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP3"
|
|
|
+ label="P3"
|
|
|
+ width="calc(10/7)%"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP4"
|
|
|
+ label="P4"
|
|
|
+ width="calc(10/7)%"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP5"
|
|
|
+ label="P5"
|
|
|
+ width="calc(10/7)%"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP6"
|
|
|
+ label="P6"
|
|
|
+ width="calc(10/7)%"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table
|
|
|
+ :data="[problemData]"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ class="move-border-top"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="unResponsibilityTimeCount"
|
|
|
+ label="未定责P5+问题"
|
|
|
+ style="width:25%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="historyResponsibilityCount"
|
|
|
+ label="遗留P5+问题定责"
|
|
|
+ style="width:25%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="handleDurationPercent"
|
|
|
+ label="线上问题处理完成率"
|
|
|
+ style="width:25%;"
|
|
|
align="center"
|
|
|
/>
|
|
|
+ <el-table-column
|
|
|
+ prop="aveHandleDuration"
|
|
|
+ label="线上问题平均处理时长(H)"
|
|
|
+ style="width:25%;"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ <!-- 线上缺陷 -->
|
|
|
+ <h4>3.线上缺陷</h4>
|
|
|
+ <el-table
|
|
|
+ :data="[DefeatData]"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="totalBugNum"
|
|
|
+ label="提报bug数"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="缺陷分级"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP0"
|
|
|
+ label="P0"
|
|
|
+ width="40"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP1"
|
|
|
+ label="P1"
|
|
|
+ width="40"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="totalP2"
|
|
|
+ label="P2"
|
|
|
+ width="40"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="stepSmall"
|
|
|
+ label="其他"
|
|
|
+ width="50"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="缺陷阶段"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="stepIn"
|
|
|
+ label="准入"
|
|
|
+ width="49"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="stepTest"
|
|
|
+ label="测试"
|
|
|
+ width="49"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="stepOut"
|
|
|
+ label="准出"
|
|
|
+ width="49"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="stepPre"
|
|
|
+ label="预发"
|
|
|
+ width="49"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="stepSmall"
|
|
|
+ label="其他"
|
|
|
+ width="49"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="stepAllTest"
|
|
|
+ label="众测"
|
|
|
+ width="49"
|
|
|
+ align="center"
|
|
|
+ />
|
|
|
+ </el-table-column>
|
|
|
<el-table-column
|
|
|
prop="date"
|
|
|
- label="全量回滚数"
|
|
|
- style="width:20%;"
|
|
|
+ label="核心指标"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="avgBugs"
|
|
|
+ label="人均bug数"
|
|
|
+ align="center"
|
|
|
+ width="80"
|
|
|
+ />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="offlineRepairPresent"
|
|
|
+ label="bug修复率"
|
|
|
align="center"
|
|
|
/>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- style="width: 80%"
|
|
|
- class="move-border-top"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- prop="date"
|
|
|
- label="预发具备率"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="有预发不走预发占比"
|
|
|
- align="center"
|
|
|
- width="150"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="被动免提测率"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="免提测上线占比"
|
|
|
- align="center"
|
|
|
- width="120"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="回滚率"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="免提测回滚占比"
|
|
|
- align="center"
|
|
|
- width="120"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="预发回滚率"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="小流量回滚率"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="全量回滚数"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- </el-table>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- style="width: 80%"
|
|
|
- class="move-border-top"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- prop="date"
|
|
|
- label="预发停留<5min占比"
|
|
|
- style="width:25%;"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="小流量停留<5min占比"
|
|
|
- style="width:25%;"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="裸奔上线占比"
|
|
|
- style="width:25%;"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="紧急上线占比"
|
|
|
- style="width:25%;"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-table>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-container>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// import { apiBusinessLineAll } from '@/api/qualityMeasurement.js'
|
|
|
-// import Json from '@/api/home.json'
|
|
|
+import axios from 'axios'
|
|
|
+import { getBusiness, getDepartment, getOnlineProblem, getOnlineAllCount, getOnlineVitium } from '@/api/qualityCenter'
|
|
|
+
|
|
|
export default {
|
|
|
+ filters: {
|
|
|
+ toPercent(value) {
|
|
|
+ if (value === 0) {
|
|
|
+ return 0
|
|
|
+ } else {
|
|
|
+ return Number(value * 100).toFixed(2) + '%'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- tableData: [{
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ onlineProcess: '',
|
|
|
+ businessData: [],
|
|
|
+ DefeatData: [],
|
|
|
+ problemData: '',
|
|
|
+ defaultProps: {
|
|
|
+ children: 'child',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ loadingOnlineProcess: true,
|
|
|
+ activeIndex: '0',
|
|
|
+ activeIndexSecondary: '3',
|
|
|
+ timeInterval: '',
|
|
|
+ pauseTreeNode: {},
|
|
|
+ pauseKey: '',
|
|
|
+ dealWithBusinessDate: []
|
|
|
+ // timeInterval: [new Date().getTime() - 15 * 24 * 60 * 60 * 1000, new Date().getTime()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this._initBusinessTreeAndBeginInfo()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 点击头部导航栏显示默认数据
|
|
|
+ async _initBusinessTreeAndBeginInfo() {
|
|
|
+ this.loadingOnlineProcess = true
|
|
|
+ await getBusiness().then(res => {
|
|
|
+ this.businessData = res.code === 0 ? res.data : ''
|
|
|
+ const processFunc = (arr) => { // models和child
|
|
|
+ arr.forEach((each) => {
|
|
|
+ if (each.models.length !== 0) {
|
|
|
+ each.child = each.models
|
|
|
+ } else {
|
|
|
+ each.child = processFunc(each.child)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return arr
|
|
|
+ }
|
|
|
+ this.dealWithBusinessDate = JSON.parse(JSON.stringify(this.businessData)) // 深拷贝
|
|
|
+ this.dealWithBusinessDate = processFunc(this.dealWithBusinessDate)
|
|
|
+ this.pauseTreeNode = this.businessData[0] ? this.businessData[0] : ''
|
|
|
+ this.pauseKey = 0
|
|
|
+ })
|
|
|
+ this.allCountAndProlemGet()
|
|
|
+ },
|
|
|
+ // 点击头部导航栏显示默认数据
|
|
|
+ async initDepartmentTree() {
|
|
|
+ this.loadingOnlineProcess = true
|
|
|
+ await getDepartment().then(res => {
|
|
|
+ this.dealWithBusinessDate = res.code === 0 ? res.data : ''
|
|
|
+ this.pauseTreeNode = this.dealWithBusinessDate[0] ? this.dealWithBusinessDate[0] : ''
|
|
|
+ this.pauseKey = 2
|
|
|
+ })
|
|
|
+ this.allCountAndProlemGet()
|
|
|
+ },
|
|
|
+ allCountAndProlemGet() {
|
|
|
+ const pretermitSearch = { id: this.pauseTreeNode.id, type: this.pauseKey, startTime: this.timeInterval[0], endTime: this.timeInterval[1] }
|
|
|
+ axios.all([getOnlineAllCount(pretermitSearch), getOnlineProblem({ id: this.pauseTreeNode.id }), getOnlineVitium(pretermitSearch)]).then(axios.spread((resAllCount, resProblem, resDefeat) => {
|
|
|
+ this.onlineProcess = resAllCount.code === 0 ? resAllCount.data : ''
|
|
|
+ this.problemData = resProblem.code === 0 ? resProblem.data : ''
|
|
|
+ this.DefeatData = resDefeat.code === 0 ? resDefeat.data : ''
|
|
|
+ // Object.assign(this.onlineProcess, this.toPercent([this.onlineProcess.allRollbackPercent, this.onlineProcess.preLess5MinPercent, this.onlineProcess.preRollbackPercent, this.onlineProcess.rollbackPercent, this.onlineProcess.noTestPercent]))
|
|
|
+ this.loadingOnlineProcess = false
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ handleSelect(key) {
|
|
|
+ if (key === '0') {
|
|
|
+ this.pauseKey = key
|
|
|
+ this._initBusinessTreeAndBeginInfo()
|
|
|
+ } else if (key === '2') {
|
|
|
+ this.pauseKey = key
|
|
|
+ this.initDepartmentTree()
|
|
|
+ } else {
|
|
|
+ this.errorFun()
|
|
|
}
|
|
|
- ]
|
|
|
+ },
|
|
|
+ toReportView(e) {
|
|
|
+ this.$router.push({ name: '上线过程', query: { id: this.pauseTreeNode.id, type: this.pauseKey, dataType: e, startTime: this.timeInterval[0], endTime: this.timeInterval[1] }})
|
|
|
+ },
|
|
|
+ handleSelectSecondary(key) {
|
|
|
+ console.log(key)
|
|
|
+ },
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.loadingOnlineProcess = true
|
|
|
+ this.pauseTreeNode = data
|
|
|
+ if (!this.pauseTreeNode.child) {
|
|
|
+ this.pauseKey = 1
|
|
|
+ }
|
|
|
+ if (this.pauseTreeNode.models) {
|
|
|
+ this.pauseKey = 0
|
|
|
+ }
|
|
|
+ this.allCountAndProlemGet()
|
|
|
+ },
|
|
|
+ successFun() {
|
|
|
+ this.$notify({ title: 'Success', message: 'initialization Successfully', type: 'success', duration: 2000 })
|
|
|
+ },
|
|
|
+ errorFun() {
|
|
|
+ this.$notify({ title: 'Failed', message: 'initialization Failed', type: 'error', duration: 2000 })
|
|
|
}
|
|
|
}
|
|
|
- // name: 'QualityMeasurement',
|
|
|
- // data() {
|
|
|
- // return {
|
|
|
- // bizName: '业务线',
|
|
|
- // bizData: '海马',
|
|
|
- // inputLabel: '100px',
|
|
|
- // statusOptionss: [],
|
|
|
- // tableData: [{
|
|
|
- // date: '2016-05-02',
|
|
|
- // name: '王小虎',
|
|
|
- // address: '上海市普陀区金沙'
|
|
|
- // }],
|
|
|
- // formInline: {
|
|
|
- // user: '',
|
|
|
- // region: ''
|
|
|
- // },
|
|
|
- // data: [{
|
|
|
- // label: '一级 1',
|
|
|
- // children: [{
|
|
|
- // label: '二级 1-1',
|
|
|
- // children: [{
|
|
|
- // label: '三级 1-1-1'
|
|
|
- // }]
|
|
|
- // }]
|
|
|
- // }, {
|
|
|
- // label: '一级 2',
|
|
|
- // children: [{
|
|
|
- // label: '二级 2-1',
|
|
|
- // children: [{
|
|
|
- // label: '三级 2-1-1'
|
|
|
- // }]
|
|
|
- // }, {
|
|
|
- // label: '二级 2-2',
|
|
|
- // children: [{
|
|
|
- // label: '三级 2-2-1'
|
|
|
- // }]
|
|
|
- // }]
|
|
|
- // }, {
|
|
|
- // label: '一级 3',
|
|
|
- // children: [{
|
|
|
- // label: '二级 3-1',
|
|
|
- // children: [{
|
|
|
- // label: '三级 3-1-1'
|
|
|
- // }]
|
|
|
- // }, {
|
|
|
- // label: '二级 3-2',
|
|
|
- // children: [{
|
|
|
- // label: '三级 3-2-1'
|
|
|
- // }]
|
|
|
- // }]
|
|
|
- // }],
|
|
|
- // defaultProps: {
|
|
|
- // children: 'children',
|
|
|
- // label: 'label'
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // created() {
|
|
|
- // this.getNav()
|
|
|
- // },
|
|
|
- // methods: {
|
|
|
-
|
|
|
- // getNav() {
|
|
|
- // // console.log(Json)
|
|
|
- // // this.$http.get('../../../static/home.json').then(function(res) { console.log(res) })
|
|
|
- // }
|
|
|
-
|
|
|
- // },
|
|
|
- // handleNodeClick(data) {
|
|
|
- // console.log(data)
|
|
|
- // },
|
|
|
- // handleClick(tab, event) {
|
|
|
- // console.log(tab, event)
|
|
|
- // },
|
|
|
- // onSubmit() {
|
|
|
- // console.log('submit!')
|
|
|
- // }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
-/* .selectWidth {
|
|
|
- width: 59%;
|
|
|
- margin-left: -8%;
|
|
|
-} */
|
|
|
- .combine-table
|
|
|
- margin 20px
|
|
|
- .combine-table >>> th
|
|
|
- background-color #F0F7FF !important
|
|
|
- font-size 10px
|
|
|
- .combine-table >>> .move-border-top
|
|
|
- border-top 0px
|
|
|
+ .set-background
|
|
|
+ background-color #F2F3F6
|
|
|
+ min-width 700px
|
|
|
+ .header
|
|
|
+ width 95%
|
|
|
+ background-color white
|
|
|
+ border-radius 7px
|
|
|
+ margin 15px auto
|
|
|
+ display flex
|
|
|
+ justify-content space-between
|
|
|
+ align-items center
|
|
|
+ overflow hidden
|
|
|
+ .header >>> .el-menu
|
|
|
+ border-bottom 0px
|
|
|
+ .header >>> .is-active
|
|
|
+ font-weight bold
|
|
|
+ .header >>> .el-menu-item:first-child
|
|
|
+ padding 15px 0 0 0
|
|
|
+ margin-bottom 25px
|
|
|
+ width 70px
|
|
|
+ .header >>> .el-menu-item:nth-child(2)
|
|
|
+ padding 15px 0 0 0
|
|
|
+ margin 0 0 30px 40px
|
|
|
+ width 55px
|
|
|
+ .aside
|
|
|
+ width 17.9% !important
|
|
|
+ margin 0 0 2% 2.5%
|
|
|
+ background-color white
|
|
|
+ border-radius 7px
|
|
|
+ .combine-table
|
|
|
+ background-color white
|
|
|
+ border-radius 7px
|
|
|
+ width 75.7%
|
|
|
+ margin 0 0 2% 1.5%
|
|
|
+ flex 0 1 auto !important
|
|
|
+ .combine-table >>> li
|
|
|
+ width 65px
|
|
|
+ font-size 16px
|
|
|
+ margin-left 5px
|
|
|
+ padding 10px 0px 0px 0px
|
|
|
+ .combine-table >>> .el-menu
|
|
|
+ border-bottom 0px
|
|
|
+ margin -20px 0 15px 0
|
|
|
+ .combine-table >>> .is-active
|
|
|
+ font-weight bold
|
|
|
+ .combine-table >>> th
|
|
|
+ background-color #F0F7FF !important
|
|
|
+ font-size 10px
|
|
|
+ .combine-table >>> .move-border-top
|
|
|
+ border-top 0px
|
|
|
+ justify-content space-between
|
|
|
+ .abviously >>> .is-leaf
|
|
|
+ background-color #FFFEF5 !important
|
|
|
+ .fontScale >>> .el-table__header-wrapper .cell
|
|
|
+ font-size 12px
|
|
|
+ padding 0
|
|
|
+ .aside >>> .el-tree-node__content .el-tree-node__label
|
|
|
+ font-size 13px
|
|
|
+ .aside >>> .el-tree-node__children .el-tree-node__label
|
|
|
+ font-size 12px
|
|
|
</style>
|