fix(工作台): 工作台首页统计本周创建优化:和接口、测试跟踪首页同步,如果本周创建为0也会显示出来

工作台首页统计本周创建优化:和接口、测试跟踪首页同步,如果本周创建为0也会显示出来
This commit is contained in:
song-tianyang 2023-04-18 10:24:21 +08:00 committed by xiaomeinvG
parent 65596aa859
commit 6bfa8511a9
1 changed files with 110 additions and 71 deletions

View File

@ -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') }} &nbsp;&nbsp;<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") }} &nbsp;&nbsp;<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);
} }