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[]; count: number[];
}[]; // 项目列表 }[]; // 项目列表
xaxis: string[]; // 横坐标 xaxis: string[]; // 横坐标
errorCode: number;
} }
export interface ModuleCardItem { export interface ModuleCardItem {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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