feat(工作台): 调整工作台柱状图无权限和无数据区分
This commit is contained in:
parent
cc649a7e9a
commit
2a44695c7e
|
@ -72,6 +72,7 @@ export interface OverViewOfProject {
|
||||||
count: number[];
|
count: number[];
|
||||||
}[]; // 项目列表
|
}[]; // 项目列表
|
||||||
xaxis: string[]; // 横坐标
|
xaxis: string[]; // 横坐标
|
||||||
|
errorCode: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ModuleCardItem {
|
export interface ModuleCardItem {
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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');
|
||||||
});
|
});
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>();
|
||||||
|
|
|
@ -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'),
|
||||||
|
|
Loading…
Reference in New Issue