feat(工作台): 调整工作台柱状图无权限和无数据区分

This commit is contained in:
xinxin.wu 2024-11-19 17:45:48 +08:00 committed by Craftsman
parent cc649a7e9a
commit 2a44695c7e
7 changed files with 54 additions and 19 deletions

View File

@ -72,6 +72,7 @@ export interface OverViewOfProject {
count: number[];
}[]; // 项目列表
xaxis: string[]; // 横坐标
errorCode: number;
}
export interface ModuleCardItem {

View File

@ -31,7 +31,7 @@
</div>
</div>
<div v-else class="not-setting-data">
{{ t('workbench.homePage.noDataTemporarily') }}
{{ props.noPermissionText || t('workbench.homePage.noDataTemporarily') }}
</div>
</template>
@ -47,6 +47,7 @@
isDashboard?: boolean; //
noResPermission?: boolean; //
height?: string;
noPermissionText?: string;
}>();
const { t } = useI18n();

View File

@ -91,28 +91,56 @@
const options = ref<Record<string, any>>({});
const defectStatusColor = ['#811FA3', '#FFA200', '#3370FF', '#F24F4F'];
const hasPermission = ref<boolean>(false);
function handleData(detail: OverViewOfProject) {
options.value = getCommonBarOptions(detail.xaxis.length >= 7, [
...defectStatusColor,
...getColorScheme(detail.xaxis.length),
]);
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
const { invisible, text } = handleNoDataDisplay(detail.xaxis, hasPermission.value);
options.value.graphic.invisible = invisible;
options.value.graphic.style.text = text;
options.value.xAxis.data = detail.xaxis.map((e) => characterLimit(e, 10));
let maxAxis = 5;
options.value.series = detail.projectCountList.map((item) => {
const countData: Record<string, any>[] = item.count.map((e) => {
return {
name: item.name,
value: e,
originValue: e,
};
});
const itemMax = Math.max(...item.count);
maxAxis = Math.max(itemMax, maxAxis);
return {
name: item.name,
type: 'bar',
stack: 'bugMember',
barWidth: 12,
data: item.count,
data: countData,
itemStyle: {
borderRadius: [2, 2, 0, 0],
},
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;
}
async function getDefectMemberDetail() {
@ -128,6 +156,8 @@
organizationId: appStore.currentOrgId,
handleUsers: innerHandleUsers.value,
});
hasPermission.value = detail.errorCode !== 109001;
handleData(detail);
} catch (error) {
console.log(error);
@ -145,8 +175,8 @@
function changeProject() {
memberIds.value = [];
getMemberOptions();
nextTick(() => {
getMemberOptions();
getDefectMemberDetail();
emit('change');
});

View File

@ -23,7 +23,10 @@
</div>
</div>
<div class="my-[16px]">
<TabCard :content-tab-list="cardModuleList" />
<TabCard
:content-tab-list="cardModuleList"
:no-permission-text="hasPermission ? '' : 'workbench.homePage.notHasResPermission'"
/>
</div>
<!-- 概览图 -->
<div>
@ -98,6 +101,8 @@
const options = ref<Record<string, any>>({});
const hasPermission = ref<boolean>(false);
const cardModuleList = ref<ModuleCardItem[]>([]);
function handleData(detail: OverViewOfProject) {
@ -113,7 +118,7 @@
cardModuleList.value = tempAxisData as ModuleCardItem[];
options.value = getCommonBarOptions(hasRoom.value, getColorScheme(detail.projectCountList.length));
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
const { invisible, text } = handleNoDataDisplay(detail.xaxis, hasPermission.value);
options.value.graphic.invisible = invisible;
options.value.graphic.style.text = text;
// x
@ -202,6 +207,7 @@
} else {
detail = await workMyCreatedDetail(params);
}
hasPermission.value = detail.errorCode !== 109001;
handleData(detail);
} catch (error) {

View File

@ -89,13 +89,15 @@
endTime: 0,
})
);
const hasPermission = ref<boolean>(false);
const memberOptions = ref<{ label: string; value: string }[]>([]);
const options = ref<Record<string, any>>({});
const color = ['#811FA3', '#FFCA59', '#00C261', '#FFA1FF', '#F9F871', '#3370FF', '#F24F4F'];
function handleData(detail: OverViewOfProject) {
options.value = getCommonBarOptions(detail.xaxis.length >= 7, color);
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
const { invisible, text } = handleNoDataDisplay(detail.xaxis, hasPermission.value);
options.value.graphic.invisible = invisible;
options.value.graphic.style.text = text;
options.value.xAxis.data = detail.xaxis.map((e) => characterLimit(e, 10));
@ -158,6 +160,7 @@
handleUsers: innerHandleUsers.value,
};
const detail = await workMemberViewDetail(params);
hasPermission.value = detail.errorCode !== 109001;
handleData(detail);
} catch (error) {
// eslint-disable-next-line no-console

View File

@ -17,7 +17,7 @@
</template>
</a-tab-pane>
</a-tabs>
<NoData v-else />
<NoData v-else :no-permission-text="props.noPermissionText" />
</div>
</template>
@ -41,6 +41,7 @@
minWidth?: string;
notHasPadding?: boolean;
hiddenBorder?: boolean;
noPermissionText?: string;
}>();
const width = ref<string | number>();

View File

@ -170,7 +170,7 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record<s
},
},
min: 0,
max: 0,
max: 100,
},
],
graphic: {
@ -434,22 +434,15 @@ export function getPieCharOptions(key: WorkCardEnum, hasPermission: boolean) {
}
// 空数据和无权限处理
export function handleNoDataDisplay(
xAxis: string[],
projectCountList: { id: string; name: string; count: number[] }[]
) {
if (!xAxis.length) {
export function handleNoDataDisplay(xAxis: string[], hasPermission: boolean) {
if (!hasPermission) {
return {
invisible: false,
text: t('workbench.homePage.notHasResPermission'),
};
}
const isEmptyData = projectCountList.every((item) =>
item.count.every((e) => e === 0 || e === null || e === undefined)
);
if (isEmptyData) {
if (!xAxis.length) {
return {
invisible: false,
text: t('workbench.homePage.notHasData'),