|
|
@@ -4,32 +4,32 @@
|
|
|
<div class="itemBox onlineProblem">
|
|
|
<div class="titleLevel3 mb10">线上问题</div>
|
|
|
<el-row :gutter="10">
|
|
|
- <el-col v-for="(item, index) in mainData.onlineProblemList" :key="index" :span="12" class="mb10">
|
|
|
- <!-- <dataItem
|
|
|
- :inner-color="item.innerColor"
|
|
|
- :out-color="item.outColor"
|
|
|
- :title="item.title"
|
|
|
- :sub-title="item.subTitle"
|
|
|
- :bg-color="item.bgColor"
|
|
|
- /> -->
|
|
|
- <dataItem :data="item"/>
|
|
|
+ <el-col
|
|
|
+ v-for="(item, index) in mainData.onlineProblemList"
|
|
|
+ :key="index"
|
|
|
+ :span="12"
|
|
|
+ class="mb10"
|
|
|
+ >
|
|
|
+ <div @click.stop="onDetial('线上问题', item)">
|
|
|
+ <dataItem :item="item" />
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div class="chartSearchbar inlineBetween mt15">
|
|
|
<div style="width: 200px">
|
|
|
<el-select
|
|
|
- v-model="viewType"
|
|
|
+ v-model="onlineProblemViweType"
|
|
|
size="small"
|
|
|
filterable
|
|
|
style="width: 115px"
|
|
|
- @change="$emit('search')"
|
|
|
+ @change="$emit('search', { onlineProblemViweType })"
|
|
|
>
|
|
|
- <el-option v-for="(t, index) in typeOptionList" :key="index" :label="t" :value="t" />
|
|
|
+ <el-option v-for="(t, index) in onlineProblemSelect" :key="index" :label="t" :value="t" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chartViewHeight">
|
|
|
- <normal-echart v-if="echartsOption1" :chart-id="'chart1'" :option="echartsOption1" @onClick="changeList" />
|
|
|
+ <normal-echart v-if="onlineProblemChartOption" :chart-id="'chart1'" :option="onlineProblemChartOption" @onClick="changeList" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -37,47 +37,77 @@
|
|
|
<div class="itemBox quality">
|
|
|
<div class="titleLevel3 mb10">线下质量</div>
|
|
|
<el-row :gutter="10">
|
|
|
- <el-col v-for="(item, index) in itemList" :key="index" :span="12" class="mb10">
|
|
|
- <dataItem :data="item" />
|
|
|
+ <el-col v-for="(item, index) in mainData.offlineProblemList" :key="index" :span="12" class="mb10">
|
|
|
+ <div @click.stop="onDetial('线下质量', item)">
|
|
|
+ <dataItem :item="item" />
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div class="chartSearchbar inlineBetween mt15">
|
|
|
<div style="width: 200px">
|
|
|
<el-select
|
|
|
- v-model="viewType"
|
|
|
+ v-model="offlineProblemViweType"
|
|
|
size="small"
|
|
|
filterable
|
|
|
style="width: 115px"
|
|
|
- @change="$emit('search')"
|
|
|
+ @change="$emit('search', { offlineProblemViweType })"
|
|
|
>
|
|
|
- <el-option v-for="(t, index) in typeOptionList" :key="index" :label="t" :value="t" />
|
|
|
+ <el-option v-for="(t, index) in offlineProblemSelect" :key="index" :label="t" :value="t" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="chartViewHeight">
|
|
|
- <normal-echart v-if="echartsOption1" :chart-id="'chart2'" :option="echartsOption1" @onClick="changeList" />
|
|
|
+ <normal-echart v-if="offlineProblemChartOption" :chart-id="'chart2'" :option="offlineProblemChartOption" @onClick="changeList" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <div class="itemBox progress">
|
|
|
+ <div class="itemBox progress" style="min-height: 281px">
|
|
|
<div class="titleLevel3 mb10">上线过程</div>
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col v-for="(item, index) in itemList" :key="index" :span="12" class="mb10">
|
|
|
- <dataItem :data="item" />
|
|
|
+ <el-row v-if="mainData.onlineProcessList" :gutter="10">
|
|
|
+ <el-col v-for="(item, index) in mainData.onlineProcessList.list" :key="index" :span="12" class="mb10">
|
|
|
+ <dataItem :item="item" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <el-row :gutter="10" style="height: 100px">
|
|
|
+ <el-divider class="divider" />
|
|
|
+ <el-row v-if="mainData.onlineProcessList" :gutter="10" class="rollBack">
|
|
|
<el-col :span="12" class="mb10">
|
|
|
- 123
|
|
|
+ <span class="rollBackItem">
|
|
|
+ <span class="bigCircle" style="background: #7ED321" />
|
|
|
+ 回滚
|
|
|
+ <span class="numText" style="font-size: 20px">{{ mainData.onlineProcessList.rollBack.countStr }}</span>
|
|
|
+ 次
|
|
|
+ </span>
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="mb10">
|
|
|
- 456
|
|
|
+ <div class="rollBackItem">
|
|
|
+ <span class="circle" style="background: #3F9DFE" />
|
|
|
+ 预发回滚
|
|
|
+ <span class="numText">{{ mainData.onlineProcessList.rollBack.preCountStr }}</span>
|
|
|
+ 次
|
|
|
+ </div>
|
|
|
+ <div class="rollBackItem">
|
|
|
+ <span class="circle" style="background: #3F9DFE" />
|
|
|
+ 全量回滚
|
|
|
+ <span class="numText">{{ mainData.onlineProcessList.rollBack.fullCountStr }}</span>
|
|
|
+ 次
|
|
|
+ </div>
|
|
|
+ <div class="rollBackItem">
|
|
|
+ <span class="circle" style="background: #3F9DFE" />
|
|
|
+ 小流量回滚
|
|
|
+ <span class="numText">{{ mainData.onlineProcessList.rollBack.lowCountStr }}</span>
|
|
|
+ 次
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<div class="itemBox progress" style="margin-top: 20px; height: 102px;">
|
|
|
- 123
|
|
|
+ <div class="titleLevel3 mb10">移动端发布质量</div>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col v-for="(item, index) in mainData.mobilePublishQualityList" :key="index" :span="12" class="mb10">
|
|
|
+ <dataItem :item="item" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -92,7 +122,7 @@ export default {
|
|
|
normalEchart
|
|
|
},
|
|
|
props: {
|
|
|
- data: {
|
|
|
+ datas: {
|
|
|
type: Object,
|
|
|
required: true,
|
|
|
default: () => {}
|
|
|
@@ -130,90 +160,275 @@ export default {
|
|
|
'bgColor': '#F5F7FC'
|
|
|
}
|
|
|
],
|
|
|
- typeOptionList: ['时间'],
|
|
|
+ redObj: {
|
|
|
+ 'innerColor': '#F5222D',
|
|
|
+ 'outColor': '#F5DDE2',
|
|
|
+ 'bgColor': '#F5F7FC'
|
|
|
+ },
|
|
|
+ yellowObj: {
|
|
|
+ 'innerColor': '#FAAD14',
|
|
|
+ 'outColor': '#F7ECDA',
|
|
|
+ 'bgColor': '#F5F7FC'
|
|
|
+ },
|
|
|
+ purpleObj: {
|
|
|
+ 'innerColor': '#C97DE9',
|
|
|
+ 'outColor': '#EFE5FA',
|
|
|
+ 'bgColor': '#F5F7FC'
|
|
|
+ },
|
|
|
+ greenObj: {
|
|
|
+ 'innerColor': '#7ED321',
|
|
|
+ 'outColor': '#E4F2DC',
|
|
|
+ 'bgColor': '#F5F7FC'
|
|
|
+ },
|
|
|
+ onlineProblemSelect: ['按时间', '按等级', '按影响业务方'],
|
|
|
+ offlineProblemSelect: ['按时间', '按缺陷等级', '按责任人'],
|
|
|
+ offlineProblemViweType: '按时间',
|
|
|
+ onlineProblemViweType: '按时间',
|
|
|
+ onlineProblemChartOption: null,
|
|
|
+ offlineProblemChartOption: null,
|
|
|
echartsOption1: null,
|
|
|
viewType: null,
|
|
|
- baseData: {},
|
|
|
- mainData: {},
|
|
|
+ mainData: {}
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- data() {
|
|
|
- console.log(this.data)
|
|
|
- this.baseData = this.data
|
|
|
+ datas() {
|
|
|
this.resetBaseData()
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.resetBaseData()
|
|
|
- this.echartsOption1 = getOption([1, 2, 3], [4, 5, 6], 'bar')
|
|
|
},
|
|
|
methods: {
|
|
|
+ onDetial(name, item) {
|
|
|
+ if (name === '线上问题' && item.label === '新增问题' || name === '线下质量') {
|
|
|
+ this.$emit('checkDetialModal', item)
|
|
|
+ }
|
|
|
+ },
|
|
|
resetBaseData() {
|
|
|
- let d = null
|
|
|
- console.log(this.data)
|
|
|
- if (this.data.onlineProblemList) {
|
|
|
- console.log(this.data.onlineProblemList)
|
|
|
- const { ImprovementsOverRate, depleteUnavailableTime, newOnlineProblems, onlineBreakRate } = this.data.onlineProblemList
|
|
|
- d = [
|
|
|
- {
|
|
|
- 'innerColor': '#F5222D',
|
|
|
- 'outColor': '#F5DDE2',
|
|
|
- 'bgColor': '#F5F7FC',
|
|
|
- 'label': newOnlineProblems.label,
|
|
|
- 'title': newOnlineProblems.countStr,
|
|
|
- 'titleUnit': '个',
|
|
|
- 'subTitleUnit': 'rate',
|
|
|
- 'subTitle': newOnlineProblems.chainRatio,
|
|
|
- 'IdList': newOnlineProblems.IdList
|
|
|
- },
|
|
|
+ const {
|
|
|
+ onlineProblemList,
|
|
|
+ onlineProblemChart,
|
|
|
+ offlineProblemList,
|
|
|
+ offlineProblemChart,
|
|
|
+ onlineProcessList,
|
|
|
+ mobilePublishQualityList
|
|
|
+ } = this.datas
|
|
|
+ // 线上问题表
|
|
|
+ if (onlineProblemList) {
|
|
|
+ this.mainData = { ...this.mainData, onlineProblemList: this.getOnlineProblemList() }
|
|
|
+ }
|
|
|
+ // 线上问题图
|
|
|
+ if (onlineProblemChart) {
|
|
|
+ const { xaxis, yaxis } = onlineProblemChart
|
|
|
+ this.onlineProblemChartOption = getOption(xaxis, yaxis.data, 'bar')
|
|
|
+ }
|
|
|
+ // 线下质量表
|
|
|
+ if (offlineProblemList) {
|
|
|
+ this.mainData = { ...this.mainData, offlineProblemList: this.getOfflineProblemList() }
|
|
|
+ }
|
|
|
+ // 线下质量图
|
|
|
+ if (offlineProblemChart) {
|
|
|
+ const { xaxis, yaxis } = offlineProblemChart
|
|
|
+ this.offlineProblemChartOption = getOption(xaxis, yaxis.data, 'bar')
|
|
|
+ }
|
|
|
+ // 上线过程
|
|
|
+ if (onlineProcessList) {
|
|
|
+ this.mainData = { ...this.mainData, onlineProcessList: this.getOnlineProcessList() }
|
|
|
+ }
|
|
|
+ // 移动端发布质量
|
|
|
+ if (mobilePublishQualityList) {
|
|
|
+ this.mainData = { ...this.mainData, mobilePublishQualityList: this.getMobilePublishQualityList() }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 组织线上问题表数据
|
|
|
+ getOnlineProblemList() {
|
|
|
+ const { ImprovementsOverRate, depleteUnavailableTime, newOnlineProblems, onlineBreakRate } = this.datas.onlineProblemList
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ ...this.redObj,
|
|
|
+ 'label': newOnlineProblems.label,
|
|
|
+ 'title': newOnlineProblems.countStr,
|
|
|
+ 'titleUnit': '个',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': newOnlineProblems.chainRatio,
|
|
|
+ 'IdList': newOnlineProblems.IdList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ...this.yellowObj,
|
|
|
+ 'label': depleteUnavailableTime.label,
|
|
|
+ 'title': depleteUnavailableTime.countStr,
|
|
|
+ 'titleUnit': '分',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': depleteUnavailableTime.chainRatio,
|
|
|
+ 'IdList': depleteUnavailableTime.IdList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ...this.purpleObj,
|
|
|
+ 'label': onlineBreakRate.label,
|
|
|
+ 'title': onlineBreakRate.countStr,
|
|
|
+ 'titleUnit': '%',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': onlineBreakRate.chainRatio,
|
|
|
+ 'IdList': onlineBreakRate.IdList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ...this.greenObj,
|
|
|
+ 'label': ImprovementsOverRate.label,
|
|
|
+ 'title': ImprovementsOverRate.countStr,
|
|
|
+ 'titleUnit': '%',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': ImprovementsOverRate.chainRatio,
|
|
|
+ 'IdList': ImprovementsOverRate.IdList
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 线下质量数据
|
|
|
+ getOfflineProblemList() {
|
|
|
+ const { newBug, reopen, testBackRate, releaseNopass } = this.datas.offlineProblemList
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ ...this.redObj,
|
|
|
+ 'label': newBug.label,
|
|
|
+ 'title': newBug.countStr,
|
|
|
+ 'titleUnit': '个',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': newBug.chainRatio,
|
|
|
+ 'IdList': newBug.IdList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ ...this.yellowObj,
|
|
|
+ 'label': reopen.label,
|
|
|
+ 'title': reopen.countStr,
|
|
|
+ 'titleUnit': '次',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': reopen.chainRatio,
|
|
|
+ 'IdList': reopen.IdList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'color': '#3F9DFE',
|
|
|
+ 'bgColor': '#F5F7FC',
|
|
|
+ 'label': testBackRate.label,
|
|
|
+ 'title': testBackRate.countStr,
|
|
|
+ 'titleUnit': '%',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': testBackRate.chainRatio,
|
|
|
+ 'IdList': testBackRate.IdList,
|
|
|
+ 'remark': testBackRate.remark,
|
|
|
+ 'type': 'circle'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'color': '#7ED321',
|
|
|
+ 'bgColor': '#F5F7FC',
|
|
|
+ 'label': releaseNopass.label,
|
|
|
+ 'title': releaseNopass.countStr,
|
|
|
+ 'titleUnit': '%',
|
|
|
+ 'subTitleUnit': 'rate',
|
|
|
+ 'subTitle': releaseNopass.chainRatio,
|
|
|
+ 'IdList': releaseNopass.IdList,
|
|
|
+ 'remark': releaseNopass.remark,
|
|
|
+ 'type': 'circle'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // 上线过程数据
|
|
|
+ getOnlineProcessList() {
|
|
|
+ const { online, testFreeOnlineRate, onlinebyStreakingRate, rollBack } = this.datas.onlineProcessList
|
|
|
+ return {
|
|
|
+ 'list': [
|
|
|
{
|
|
|
- 'innerColor': '#FAAD14',
|
|
|
- 'outColor': '#F7ECDA',
|
|
|
- 'bgColor': '#F5F7FC',
|
|
|
- 'label': depleteUnavailableTime.label,
|
|
|
- 'title': depleteUnavailableTime.countStr,
|
|
|
- 'titleUnit': '分',
|
|
|
- 'subTitleUnit': 'rate',
|
|
|
- 'subTitle': depleteUnavailableTime.chainRatio,
|
|
|
- 'IdList': depleteUnavailableTime.IdList
|
|
|
+ 'innerColor': '#3F9DFE',
|
|
|
+ 'outColor': '#E2F0FF',
|
|
|
+ 'padding': '8px 0px',
|
|
|
+ 'label': online.label,
|
|
|
+ 'title': online.countStr,
|
|
|
+ 'titleUnit': '次',
|
|
|
+ 'IdList': online.IdList
|
|
|
},
|
|
|
{
|
|
|
- 'innerColor': '#C97DE9',
|
|
|
- 'outColor': '#EFE5FA',
|
|
|
- 'bgColor': '#F5F7FC',
|
|
|
- 'label': onlineBreakRate.label,
|
|
|
- 'title': onlineBreakRate.countStr,
|
|
|
+ 'innerColor': '#7ED321',
|
|
|
+ 'outColor': '#E4F2DC',
|
|
|
+ 'padding': '8px 0px',
|
|
|
+ 'label': testFreeOnlineRate.label,
|
|
|
+ 'title': testFreeOnlineRate.countStr,
|
|
|
'titleUnit': '%',
|
|
|
- 'subTitleUnit': 'rate',
|
|
|
- 'subTitle': onlineBreakRate.chainRatio,
|
|
|
- 'IdList': onlineBreakRate.IdList
|
|
|
+ 'IdList': testFreeOnlineRate.IdList
|
|
|
},
|
|
|
{
|
|
|
- 'innerColor': '#7ED321',
|
|
|
- 'outColor': '#E4F2DC',
|
|
|
- 'bgColor': '#F5F7FC',
|
|
|
- 'label': ImprovementsOverRate.label,
|
|
|
- 'title': ImprovementsOverRate.countStr,
|
|
|
+ 'innerColor': '#F5222D',
|
|
|
+ 'outColor': '#F5DDE2',
|
|
|
+ 'padding': '8px 0px',
|
|
|
+ 'label': onlinebyStreakingRate.label,
|
|
|
+ 'title': onlinebyStreakingRate.countStr,
|
|
|
'titleUnit': '%',
|
|
|
- 'subTitleUnit': 'rate',
|
|
|
- 'subTitle': ImprovementsOverRate.chainRatio,
|
|
|
- 'IdList': ImprovementsOverRate.IdList
|
|
|
+ 'IdList': onlinebyStreakingRate.IdList
|
|
|
}
|
|
|
- ]
|
|
|
- this.mainData = { ...this.mainData, onlineProblemList: d }
|
|
|
- console.log(this.mainData)
|
|
|
+ ],
|
|
|
+ rollBack
|
|
|
}
|
|
|
},
|
|
|
+ // 移动端发布质量数据
|
|
|
+ getMobilePublishQualityList() {
|
|
|
+ const { hotpacth, addIssue } = this.datas.mobilePublishQualityList
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ 'innerColor': '#3F9DFE',
|
|
|
+ 'outColor': '#E2F0FF',
|
|
|
+ 'padding': '8px 0px',
|
|
|
+ 'label': hotpacth.label,
|
|
|
+ 'title': hotpacth.countStr,
|
|
|
+ 'titleUnit': '次',
|
|
|
+ 'IdList': hotpacth.IdList
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 'innerColor': '#F5222D',
|
|
|
+ 'outColor': '#F5DDE2',
|
|
|
+ 'padding': '8px 0px',
|
|
|
+ 'label': addIssue.label,
|
|
|
+ 'title': addIssue.countStr,
|
|
|
+ 'titleUnit': '次',
|
|
|
+ 'IdList': addIssue.IdList
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
changeList() {}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang='less'>
|
|
|
.qualityModule {
|
|
|
+ .divider {
|
|
|
+ margin: 0 0 15px 0;
|
|
|
+ }
|
|
|
+ .rollBack {
|
|
|
+ height: 94px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .rollBackItem {
|
|
|
+ color: #666;
|
|
|
+ .numText {
|
|
|
+ color: #409EFF;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .circle {
|
|
|
+ display: inline-block;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 100%;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .bigCircle {
|
|
|
+ display: inline-block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 100%;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.itemBox {
|
|
|
box-shadow: 0px 6px 50px rgba(0, 0, 0, 0.05);
|
|
|
- padding: 10px 20px;
|
|
|
+ padding: 10px 10px;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
.chartSearchbar {
|
wenbobowen