fix(工作台): 工作台首页统计本周创建优化:和接口、测试跟踪首页同步,如果本周创建为0也会显示出来
工作台首页统计本周创建优化:和接口、测试跟踪首页同步,如果本周创建为0也会显示出来
This commit is contained in:
parent
65596aa859
commit
6bfa8511a9
|
@ -1,121 +1,158 @@
|
||||||
<template>
|
<template>
|
||||||
<el-card shadow="never" body-style="margin-top: 24px; padding: 0;border:none;" class="table-card">
|
<el-card
|
||||||
<el-row :gutter="10" >
|
shadow="never"
|
||||||
<el-col :span="24">
|
body-style="margin-top: 24px; padding: 0;border:none;"
|
||||||
<span class="top-css">{{ $t('workstation.creation_case') }}</span>
|
class="table-card"
|
||||||
</el-col>
|
>
|
||||||
</el-row>
|
<el-row :gutter="10">
|
||||||
<el-row :gutter="20">
|
<el-col :span="24">
|
||||||
<el-col v-if="showCount">
|
<span class="top-css">{{ $t("workstation.creation_case") }}</span>
|
||||||
<ms-border-pie-chart :pie-data="loadCharData" :autoresize ="true" :text="totalCount.toString()" :text-title="$t('workstation.case_count')"
|
</el-col>
|
||||||
:subtext="subtextStr" :radius="['70%', '96%']"
|
</el-row>
|
||||||
:height="255"/>
|
<el-row :gutter="20">
|
||||||
</el-col>
|
<el-col v-if="showCount">
|
||||||
<el-col v-else>
|
<ms-border-pie-chart
|
||||||
<img style="height: 100px;width: 100px;padding-top: 10%;padding-left: 40%;"
|
:pie-data="loadCharData"
|
||||||
src="/assets/module/figma/icon_none.svg"/>
|
:autoresize="true"
|
||||||
<p class="right-other-css" v-permission="['PROJECT_TRACK_CASE:READ']">{{ $t('workstation.creation_case_tip') }} <span style="color: var(--primary_color)" @click="toCreatCase()">{{$t('permission.project_track_case.create') }}</span></p>
|
:text="totalCount.toString()"
|
||||||
</el-col>
|
:text-title="$t('workstation.case_count')"
|
||||||
</el-row>
|
:subtext="subtextStr"
|
||||||
</el-card>
|
:radius="['70%', '96%']"
|
||||||
|
:height="255"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
<el-col v-else>
|
||||||
|
<img
|
||||||
|
style="
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
padding-top: 10%;
|
||||||
|
padding-left: 40%;
|
||||||
|
"
|
||||||
|
src="/assets/module/figma/icon_none.svg"
|
||||||
|
/>
|
||||||
|
<p class="right-other-css" v-permission="['PROJECT_TRACK_CASE:READ']">
|
||||||
|
{{ $t("workstation.creation_case_tip") }} <span
|
||||||
|
style="color: var(--primary_color)"
|
||||||
|
@click="toCreatCase()"
|
||||||
|
>{{ $t("permission.project_track_case.create") }}</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import MsBorderPieChart from "metersphere-frontend/src/components/MsBorderPieChart";
|
import MsBorderPieChart from "metersphere-frontend/src/components/MsBorderPieChart";
|
||||||
import {getMyCreatedCaseGroupContMap} from "@/api/workstation";
|
import { getMyCreatedCaseGroupContMap } from "@/api/workstation";
|
||||||
import {getCurrentProject} from "@/api/project";
|
|
||||||
|
|
||||||
|
export default {
|
||||||
export default{
|
|
||||||
name: "MyCaseCard",
|
name: "MyCaseCard",
|
||||||
components: {MsBorderPieChart},
|
components: { MsBorderPieChart },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showCount :false,
|
showCount: false,
|
||||||
totalCount:0,
|
totalCount: 0,
|
||||||
weekTotalCount:0,
|
weekTotalCount: 0,
|
||||||
subtextStr:"",
|
subtextStr: "",
|
||||||
loadCharData:[]
|
loadCharData: [],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods:{
|
methods: {
|
||||||
getCaseCount() {
|
getCaseCount() {
|
||||||
let isWeek = false;
|
let isWeek = false;
|
||||||
this.result = getMyCreatedCaseGroupContMap(isWeek).then(response => {
|
this.result = getMyCreatedCaseGroupContMap(isWeek).then((response) => {
|
||||||
let tableData = response.data
|
let tableData = response.data;
|
||||||
const testCaseCount = {
|
const testCaseCount = {
|
||||||
value: tableData.testCaseCount === 0 ? '-' : tableData.testCaseCount,
|
value: tableData.testCaseCount === 0 ? "-" : tableData.testCaseCount,
|
||||||
name: this.$t('workstation.table_name.track_case'),
|
name: this.$t("workstation.table_name.track_case"),
|
||||||
}
|
};
|
||||||
this.loadCharData.push(testCaseCount)
|
this.loadCharData.push(testCaseCount);
|
||||||
|
|
||||||
const apiTestCaseCount = {
|
const apiTestCaseCount = {
|
||||||
value: tableData.apiTestCaseCount === 0 ? '-' : tableData.apiTestCaseCount,
|
value:
|
||||||
name: this.$t('workstation.table_name.api_case'),
|
tableData.apiTestCaseCount === 0 ? "-" : tableData.apiTestCaseCount,
|
||||||
}
|
name: this.$t("workstation.table_name.api_case"),
|
||||||
this.loadCharData.push(apiTestCaseCount)
|
};
|
||||||
|
this.loadCharData.push(apiTestCaseCount);
|
||||||
|
|
||||||
const apiScenarioCaseCount = {
|
const apiScenarioCaseCount = {
|
||||||
value: tableData.apiScenarioCaseCount === 0 ? '-' : tableData.apiScenarioCaseCount,
|
value:
|
||||||
name: this.$t('workstation.table_name.scenario_case'),
|
tableData.apiScenarioCaseCount === 0
|
||||||
}
|
? "-"
|
||||||
this.loadCharData.push(apiScenarioCaseCount)
|
: tableData.apiScenarioCaseCount,
|
||||||
|
name: this.$t("workstation.table_name.scenario_case"),
|
||||||
|
};
|
||||||
|
this.loadCharData.push(apiScenarioCaseCount);
|
||||||
|
|
||||||
const loadTestCount = {
|
const loadTestCount = {
|
||||||
value: tableData.loadTestCount === 0 ? '-' : tableData.loadTestCount,
|
value: tableData.loadTestCount === 0 ? "-" : tableData.loadTestCount,
|
||||||
name: this.$t('test_track.plan.load_case.case'),
|
name: this.$t("test_track.plan.load_case.case"),
|
||||||
}
|
};
|
||||||
this.loadCharData.push(loadTestCount)
|
this.loadCharData.push(loadTestCount);
|
||||||
|
|
||||||
this.totalCount = tableData.testCaseCount+tableData.apiTestCaseCount+tableData.apiScenarioCaseCount+tableData.loadTestCount;
|
this.totalCount =
|
||||||
|
tableData.testCaseCount +
|
||||||
|
tableData.apiTestCaseCount +
|
||||||
|
tableData.apiScenarioCaseCount +
|
||||||
|
tableData.loadTestCount;
|
||||||
if (this.totalCount > 0) {
|
if (this.totalCount > 0) {
|
||||||
this.getCaseWeekCount();
|
this.getCaseWeekCount();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
toCreatCase(){
|
toCreatCase() {
|
||||||
let caseData = this.$router.resolve({
|
let caseData = this.$router.resolve({
|
||||||
path: '/track/case/create',
|
path: "/track/case/create",
|
||||||
});
|
});
|
||||||
window.open(caseData.href, '_blank');
|
window.open(caseData.href, "_blank");
|
||||||
},
|
},
|
||||||
getCaseWeekCount(){
|
getCaseWeekCount() {
|
||||||
let isWeek = true;
|
let isWeek = true;
|
||||||
getMyCreatedCaseGroupContMap(isWeek).then(response => {
|
getMyCreatedCaseGroupContMap(isWeek).then((response) => {
|
||||||
let tableData = response.data
|
let tableData = response.data;
|
||||||
this.weekTotalCount = tableData.testCaseCount+tableData.apiTestCaseCount+tableData.apiScenarioCaseCount+tableData.loadTestCount;
|
this.weekTotalCount =
|
||||||
if (this.weekTotalCount){
|
tableData.testCaseCount +
|
||||||
this.subtextStr = "本周:+"+this.weekTotalCount+" >" ;
|
tableData.apiTestCaseCount +
|
||||||
|
tableData.apiScenarioCaseCount +
|
||||||
|
tableData.loadTestCount;
|
||||||
|
if (this.weekTotalCount > 0) {
|
||||||
|
this.subtextStr = "本周:+" + this.weekTotalCount + " >";
|
||||||
|
} else {
|
||||||
|
this.subtextStr = "本周:+0 >";
|
||||||
}
|
}
|
||||||
this.showCount = true;
|
this.showCount = true;
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getCaseCount();
|
this.getCaseCount();
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.table-card{
|
.table-card {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.right-css{
|
|
||||||
|
.right-css {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.right-two-css{
|
|
||||||
|
.right-two-css {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
color: #783987;
|
color: #783987;
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
}
|
}
|
||||||
.right-one-css{
|
|
||||||
|
.right-one-css {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 43px;
|
font-size: 43px;
|
||||||
color: #783987;
|
color: #783987;
|
||||||
}
|
}
|
||||||
.top-css{
|
|
||||||
|
.top-css {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
@ -123,16 +160,18 @@ export default{
|
||||||
padding: 0px 0px 0px 0px;
|
padding: 0px 0px 0px 0px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #1F2329;
|
color: #1f2329;
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
}
|
}
|
||||||
.right-other-css{
|
|
||||||
|
.right-other-css {
|
||||||
color: #969393;
|
color: #969393;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 34%;
|
padding-left: 34%;
|
||||||
}
|
}
|
||||||
.table-card{
|
|
||||||
|
.table-card {
|
||||||
border: none;
|
border: none;
|
||||||
color: rgba(192, 196, 204, 0.98);
|
color: rgba(192, 196, 204, 0.98);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue