fix(工作台): 修复工作台首页柱状图数据展示问题
This commit is contained in:
parent
65b0da6abc
commit
552682bd44
|
@ -42,7 +42,7 @@ export const contentTabList: ModuleCardItem[] = [
|
||||||
count: 0,
|
count: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'workbench.homePage.apiPlan',
|
label: 'workbench.homePage.testPlan',
|
||||||
value: WorkOverviewEnum.TEST_PLAN,
|
value: WorkOverviewEnum.TEST_PLAN,
|
||||||
icon: WorkOverviewIconEnum.TEST_PLAN,
|
icon: WorkOverviewIconEnum.TEST_PLAN,
|
||||||
color: 'rgb(var(--link-6))',
|
color: 'rgb(var(--link-6))',
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 概览图 -->
|
<!-- 概览图 -->
|
||||||
<div>
|
<div>
|
||||||
<MsChart height="260px" :options="options" />
|
<MsChart height="280px" :options="options" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -90,7 +90,7 @@
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const hasRoom = computed(() => innerProjectIds.value.length >= 7);
|
const hasRoom = computed(() => innerProjectIds.value.length >= 7 || props.item.projectIds.length === 0);
|
||||||
|
|
||||||
const options = ref<Record<string, any>>({});
|
const options = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
@ -119,10 +119,10 @@
|
||||||
|
|
||||||
// 处理data数据
|
// 处理data数据
|
||||||
options.value.series = detail.projectCountList.map((item) => {
|
options.value.series = detail.projectCountList.map((item) => {
|
||||||
const countData: Record<string, any> = item.count.map((e) => {
|
const countData: Record<string, any>[] = item.count.map((e) => {
|
||||||
return {
|
return {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
value: e !== 0 ? e : undefined,
|
value: e,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: true,
|
show: true,
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
|
@ -159,12 +159,22 @@
|
||||||
borderRadius: [2, 2, 0, 0], // 上边圆角
|
borderRadius: [2, 2, 0, 0], // 上边圆角
|
||||||
},
|
},
|
||||||
data: countData,
|
data: countData,
|
||||||
|
barMinHeight: ((optionData: Record<string, any>[]) => {
|
||||||
|
optionData.forEach((itemValue: any, index: number) => {
|
||||||
|
if (itemValue.value === 0) optionData[index].value = null;
|
||||||
|
});
|
||||||
|
let hasZero = false;
|
||||||
|
for (let i = 0; i < optionData.length; i++) {
|
||||||
|
if (optionData[i].value === 0) {
|
||||||
|
hasZero = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return hasZero ? 0 : 5;
|
||||||
|
})(countData),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
options.value.yAxis[0].max = maxAxis < 100 ? 50 : maxAxis + 50;
|
options.value.yAxis[0].max = maxAxis < 100 ? 50 : maxAxis + 50;
|
||||||
|
|
||||||
options.value.series[0].barGap = 4;
|
|
||||||
options.value.series[0].barCategoryGap = 24;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function initOverViewDetail() {
|
async function initOverViewDetail() {
|
||||||
|
|
|
@ -100,7 +100,6 @@
|
||||||
series: {
|
series: {
|
||||||
name: '',
|
name: '',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
padAngle: 1,
|
|
||||||
radius: ['50%', '58%'],
|
radius: ['50%', '58%'],
|
||||||
center: ['50%', '32%'],
|
center: ['50%', '32%'],
|
||||||
color: [],
|
color: [],
|
||||||
|
|
|
@ -8,7 +8,7 @@ export default {
|
||||||
'workbench.homePage.interfaceAPI': 'Interface API',
|
'workbench.homePage.interfaceAPI': 'Interface API',
|
||||||
'workbench.homePage.interfaceCASE': 'Interface CASE',
|
'workbench.homePage.interfaceCASE': 'Interface CASE',
|
||||||
'workbench.homePage.interfaceScenario': 'Interface Scene',
|
'workbench.homePage.interfaceScenario': 'Interface Scene',
|
||||||
'workbench.homePage.apiPlan': 'Interface plan',
|
'workbench.homePage.apiPlan': 'Test plan',
|
||||||
'workbench.homePage.bugCount': 'Defect quantity',
|
'workbench.homePage.bugCount': 'Defect quantity',
|
||||||
'workbench.homePage.nearlyThreeDays': 'Nearly 3 days',
|
'workbench.homePage.nearlyThreeDays': 'Nearly 3 days',
|
||||||
'workbench.homePage.nearlySevenDays': 'Nearly 3 days',
|
'workbench.homePage.nearlySevenDays': 'Nearly 3 days',
|
||||||
|
|
|
@ -8,7 +8,7 @@ export default {
|
||||||
'workbench.homePage.interfaceAPI': '接口 API',
|
'workbench.homePage.interfaceAPI': '接口 API',
|
||||||
'workbench.homePage.interfaceCASE': '接口 CASE',
|
'workbench.homePage.interfaceCASE': '接口 CASE',
|
||||||
'workbench.homePage.interfaceScenario': '接口场景',
|
'workbench.homePage.interfaceScenario': '接口场景',
|
||||||
'workbench.homePage.apiPlan': '接口计划',
|
'workbench.homePage.testPlan': '测试计划',
|
||||||
'workbench.homePage.bugCount': '缺陷数',
|
'workbench.homePage.bugCount': '缺陷数',
|
||||||
'workbench.homePage.nearlyThreeDays': '近3天',
|
'workbench.homePage.nearlyThreeDays': '近3天',
|
||||||
'workbench.homePage.nearlySevenDays': '近7天',
|
'workbench.homePage.nearlySevenDays': '近7天',
|
||||||
|
|
|
@ -45,7 +45,7 @@ export const commonColorConfig = [
|
||||||
export const colorMapConfig: Record<string, string[]> = {
|
export const colorMapConfig: Record<string, string[]> = {
|
||||||
[WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', '#D4D4D8'],
|
[WorkCardEnum.CASE_COUNT]: ['#ED0303', '#FFA200', '#3370FF', '#D4D4D8'],
|
||||||
[WorkCardEnum.ASSOCIATE_CASE_COUNT]: ['#00C261', '#3370FF'],
|
[WorkCardEnum.ASSOCIATE_CASE_COUNT]: ['#00C261', '#3370FF'],
|
||||||
[WorkCardEnum.REVIEW_CASE_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#ED0303', '#9441B1', '#3370FF'],
|
[WorkCardEnum.REVIEW_CASE_COUNT]: ['#D4D4D8', '#3370FF', '#00C261', '#ED0303', '#FFA200'],
|
||||||
[WorkCardEnum.TEST_PLAN_COUNT]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'],
|
[WorkCardEnum.TEST_PLAN_COUNT]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'],
|
||||||
[WorkCardEnum.PLAN_LEGACY_BUG]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'],
|
[WorkCardEnum.PLAN_LEGACY_BUG]: ['#9441B1', '#3370FF', '#00C261', '#D4D4D8'],
|
||||||
[WorkCardEnum.BUG_COUNT]: ['#FFA200', '#D4D4D8', '#00C261'],
|
[WorkCardEnum.BUG_COUNT]: ['#FFA200', '#D4D4D8', '#00C261'],
|
||||||
|
@ -84,7 +84,7 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record<s
|
||||||
<div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm" style="background:${item.color}"></div>
|
<div class="mb-[2px] mr-[8px] h-[8px] w-[8px] rounded-sm" style="background:${item.color}"></div>
|
||||||
<div class="one-line-text max-w-[100px]" style="color:#959598">${item.seriesName}</div>
|
<div class="one-line-text max-w-[100px]" style="color:#959598">${item.seriesName}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-[#323233] font-medium">${addCommasToNumber(item.value)}</div>
|
<div class="text-[#323233] font-medium">${addCommasToNumber(item.value || 0)}</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
)
|
)
|
||||||
|
@ -100,7 +100,7 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record<s
|
||||||
top: 36,
|
top: 36,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
bottom: hasRoom ? 54 : 5,
|
bottom: hasRoom ? 44 : 5,
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
|
@ -124,7 +124,9 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record<s
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'log',
|
||||||
|
alignTicks: true,
|
||||||
|
logBase: 250,
|
||||||
name: t('workbench.homePage.unit'), // 设置单位
|
name: t('workbench.homePage.unit'), // 设置单位
|
||||||
position: 'left',
|
position: 'left',
|
||||||
axisLine: {
|
axisLine: {
|
||||||
|
@ -186,11 +188,41 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record<s
|
||||||
},
|
},
|
||||||
dataZoom: hasRoom
|
dataZoom: hasRoom
|
||||||
? [
|
? [
|
||||||
{
|
|
||||||
type: 'inside',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'slider',
|
type: 'slider',
|
||||||
|
height: 24,
|
||||||
|
bottom: 10,
|
||||||
|
start: 0,
|
||||||
|
end: 30,
|
||||||
|
minSpan: 30, // 最小滑动距离
|
||||||
|
maxSpan: 70,
|
||||||
|
showDetail: false,
|
||||||
|
filterMode: 'filter',
|
||||||
|
moveOnMouseMove: true,
|
||||||
|
handleSize: 30, // 手柄的大小
|
||||||
|
moveHandleSize: 0,
|
||||||
|
handleStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
borderColor: 'rgba(24, 24, 24, 0.15)',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(241, 241, 241, 0.6)',
|
||||||
|
borderColor: 'transparent',
|
||||||
|
dataBackground: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
selectedDataBackground: {
|
||||||
|
lineStyle: {
|
||||||
|
width: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
moveHandleStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
: [],
|
: [],
|
||||||
|
@ -319,7 +351,6 @@ export function getPieCharOptions(key: WorkCardEnum, hasPermission: boolean) {
|
||||||
series: {
|
series: {
|
||||||
name: '',
|
name: '',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
padAngle: 2,
|
|
||||||
radius: ['75%', '90%'],
|
radius: ['75%', '90%'],
|
||||||
center: [90, '48%'],
|
center: [90, '48%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
|
|
Loading…
Reference in New Issue