fix(工作台): 修复柱状图bug
This commit is contained in:
parent
97318ee4b2
commit
8289daf30f
|
@ -87,12 +87,14 @@
|
|||
const { openNewPage } = useOpenNewPage();
|
||||
|
||||
const reviewStatusOptions = computed(() => {
|
||||
return Object.keys(reviewStatusMap).map((key) => {
|
||||
return {
|
||||
value: key,
|
||||
label: t(reviewStatusMap[key as ReviewStatus].label),
|
||||
};
|
||||
const keys = Object.keys(reviewStatusMap).filter((key) => {
|
||||
return props.type !== 'my_todo' || key !== 'COMPLETED';
|
||||
});
|
||||
|
||||
return keys.map((key) => ({
|
||||
value: key,
|
||||
label: t(reviewStatusMap[key as ReviewStatus].label),
|
||||
}));
|
||||
});
|
||||
|
||||
const columns: MsTableColumn = [
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
<a-button type="secondary" @click="exitHandler">
|
||||
{{ t('workbench.homePage.exitEdit') }}
|
||||
</a-button>
|
||||
<a-button type="primary" :disabled="!selectedCardList.length" :loading="confirmLoading" @click="saveHandler">
|
||||
<a-button type="primary" :loading="confirmLoading" @click="saveHandler">
|
||||
{{ t('common.save') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
import type { OverViewOfProject, SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage';
|
||||
|
||||
import { commonColorConfig, getCommonBarOptions, handleNoDataDisplay } from '../utils';
|
||||
import { getColorScheme, getCommonBarOptions, handleNoDataDisplay } from '../utils';
|
||||
import type { SelectOptionData } from '@arco-design/web-vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
@ -93,7 +93,10 @@
|
|||
const defectStatusColor = ['#811FA3', '#FFA200', '#3370FF', '#F24F4F'];
|
||||
|
||||
function handleData(detail: OverViewOfProject) {
|
||||
options.value = getCommonBarOptions(detail.xaxis.length >= 7, [...defectStatusColor, ...commonColorConfig]);
|
||||
options.value = getCommonBarOptions(detail.xaxis.length >= 7, [
|
||||
...defectStatusColor,
|
||||
...getColorScheme(detail.xaxis.length),
|
||||
]);
|
||||
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
|
||||
options.value.graphic.invisible = invisible;
|
||||
options.value.graphic.style.text = text;
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
} from '@/models/workbench/homePage';
|
||||
import { WorkCardEnum, WorkOverviewEnum } from '@/enums/workbenchEnum';
|
||||
|
||||
import { commonColorConfig, getCommonBarOptions, handleNoDataDisplay } from '../utils';
|
||||
import { getColorScheme, getCommonBarOptions, handleNoDataDisplay } from '../utils';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
|
@ -108,7 +108,7 @@
|
|||
});
|
||||
|
||||
cardModuleList.value = tempAxisData as ModuleCardItem[];
|
||||
options.value = getCommonBarOptions(hasRoom.value, commonColorConfig);
|
||||
options.value = getCommonBarOptions(hasRoom.value, getColorScheme(detail.projectCountList.length));
|
||||
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
|
||||
options.value.graphic.invisible = invisible;
|
||||
options.value.graphic.style.text = text;
|
||||
|
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
import type { OverViewOfProject, SelectedCardItem, TimeFormParams } from '@/models/workbench/homePage';
|
||||
|
||||
import { commonColorConfig, getCommonBarOptions, handleNoDataDisplay } from '../utils';
|
||||
import { getColorScheme, getCommonBarOptions, handleNoDataDisplay } from '../utils';
|
||||
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStore();
|
||||
|
@ -92,8 +92,9 @@
|
|||
|
||||
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, commonColorConfig);
|
||||
options.value = getCommonBarOptions(detail.xaxis.length >= 7, color);
|
||||
const { invisible, text } = handleNoDataDisplay(detail.xaxis, detail.projectCountList);
|
||||
options.value.graphic.invisible = invisible;
|
||||
options.value.graphic.style.text = text;
|
||||
|
@ -209,7 +210,6 @@
|
|||
(val) => {
|
||||
if (val) {
|
||||
innerHandleUsers.value = val;
|
||||
initOverViewMemberDetail();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
|
@ -9,37 +9,56 @@ import { WorkCardEnum } from '@/enums/workbenchEnum';
|
|||
|
||||
const { t } = useI18n();
|
||||
// 通用颜色配置
|
||||
export const commonColorConfig = [
|
||||
'#783887',
|
||||
'#FFC14E',
|
||||
'#2DFCEF',
|
||||
'#811FA3',
|
||||
'#00D1FF',
|
||||
'#FFA53D',
|
||||
'#00C261',
|
||||
'#AA4FBF',
|
||||
'#FFA1FF',
|
||||
'#EE50A3',
|
||||
'#FF9964',
|
||||
'#FFCA59',
|
||||
'#F9F871',
|
||||
'#C3DD40',
|
||||
'#62D256',
|
||||
'#14E1C6',
|
||||
'#50CEFB',
|
||||
'#3370FF',
|
||||
'#2B5FD9',
|
||||
'#76F0FF',
|
||||
'#935AF6',
|
||||
'#DC9BFF',
|
||||
'#FFC75E',
|
||||
'#D34400',
|
||||
'#F4D0BF',
|
||||
'#FBD3E8',
|
||||
'#D9F457',
|
||||
'#0089D1',
|
||||
'#87F578',
|
||||
];
|
||||
const commonColorConfig: Record<number, string[]> = {
|
||||
2: ['#783887', '#FFC14E'],
|
||||
4: ['#783887', '#FFC14E', '#2DFCEF', '#3370FF'],
|
||||
8: ['#783887', '#FFC14E', '#2DFCEF', '#3370FF', '#811FA3', '#00D1FF', '#FFA53D', '#00C261'],
|
||||
12: [
|
||||
'#AA4FBF',
|
||||
'#FFA1FF',
|
||||
'#EE50A3',
|
||||
'#FF9964',
|
||||
'#FFCA59',
|
||||
'#F9F871',
|
||||
'#C3DD40',
|
||||
'#62D256',
|
||||
'#14E1C6',
|
||||
'#50CEFB',
|
||||
'#3370FF',
|
||||
'#2B5FD9',
|
||||
],
|
||||
13: [
|
||||
'#AA4FBF',
|
||||
'#FFA1FF',
|
||||
'#FFCA59',
|
||||
'#F9F871',
|
||||
'#14E1C6',
|
||||
'#2DFCEF',
|
||||
'#2B5FD9',
|
||||
'#00D1FF',
|
||||
'#935AF6',
|
||||
'#DC9BFF',
|
||||
'#FF9964',
|
||||
'#FFC75E',
|
||||
'#D34400',
|
||||
'#F4D0BF',
|
||||
'#EE50A3',
|
||||
'#FBD3E8',
|
||||
'#C3DD40',
|
||||
'#D9F457',
|
||||
'#0089D1',
|
||||
'#62D256',
|
||||
'#87F578',
|
||||
],
|
||||
};
|
||||
|
||||
export function getColorScheme(dataLength: number): string[] {
|
||||
if (dataLength <= 2) return commonColorConfig[2];
|
||||
if (dataLength <= 4) return commonColorConfig[4];
|
||||
if (dataLength <= 8) return commonColorConfig[8];
|
||||
if (dataLength <= 12) return commonColorConfig[12];
|
||||
return commonColorConfig[13];
|
||||
}
|
||||
|
||||
// 饼图颜色配置
|
||||
export const colorMapConfig: Record<string, string[]> = {
|
||||
|
@ -184,6 +203,27 @@ export function getCommonBarOptions(hasRoom: boolean, color: string[]): Record<s
|
|||
color: '#00000099',
|
||||
fontSize: 12,
|
||||
},
|
||||
textStyle: {
|
||||
width: 150,
|
||||
overflow: 'truncate',
|
||||
ellipsis: '...',
|
||||
},
|
||||
formatter(name: string) {
|
||||
return name;
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
padding: 16,
|
||||
position(point: any) {
|
||||
return [point[0], '10%'];
|
||||
},
|
||||
extraCssText: 'max-width: 300px; white-space: normal; word-wrap: break-word; word-break: break-all;',
|
||||
textStyle: {
|
||||
width: 300,
|
||||
fontSize: 12,
|
||||
overflow: 'breakAll',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: hasRoom
|
||||
? [
|
||||
|
|
Loading…
Reference in New Issue