mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-13 01:32:27 +08:00
fix Bug or esLink formatting
This commit is contained in:
Ah jung
@@ -12,107 +12,105 @@ import echarts from '@/utils/lib/echarts';
|
||||
|
||||
// import { useRootSetting } from '@/hooks/setting/useRootSetting';
|
||||
|
||||
|
||||
export function useECharts(
|
||||
elRef: Ref<HTMLDivElement>,
|
||||
theme: 'light' | 'dark' | 'default' = 'light'
|
||||
elRef: Ref<HTMLDivElement>,
|
||||
theme: 'light' | 'dark' | 'default' = 'light'
|
||||
) {
|
||||
// const { getDarkMode } = useRootSetting();
|
||||
const getDarkMode = 'light'
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let resizeFn: Fn = resize;
|
||||
const cacheOptions = ref<EChartsOption>({});
|
||||
let removeResizeFn: Fn = () => {
|
||||
};
|
||||
// const { getDarkMode } = useRootSetting();
|
||||
const getDarkMode = 'light';
|
||||
let chartInstance: echarts.ECharts | null = null;
|
||||
let resizeFn: Fn = resize;
|
||||
const cacheOptions = ref<EChartsOption>({});
|
||||
let removeResizeFn: Fn = () => {};
|
||||
|
||||
resizeFn = useDebounceFn(resize, 200);
|
||||
resizeFn = useDebounceFn(resize, 200);
|
||||
|
||||
const getOptions = computed((): EChartsOption => {
|
||||
if (getDarkMode !== 'dark') {
|
||||
return cacheOptions.value;
|
||||
}
|
||||
return {
|
||||
backgroundColor: 'transparent',
|
||||
...cacheOptions.value,
|
||||
};
|
||||
});
|
||||
|
||||
function initCharts(t = theme) {
|
||||
const el = unref(elRef);
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
chartInstance = echarts.init(el, t);
|
||||
const { removeEvent } = useEventListener({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
listener: resizeFn,
|
||||
});
|
||||
removeResizeFn = removeEvent;
|
||||
const { widthRef, screenEnum } = useBreakpoint();
|
||||
if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
resizeFn();
|
||||
}, 30);
|
||||
}
|
||||
const getOptions = computed((): EChartsOption => {
|
||||
if (getDarkMode !== 'dark') {
|
||||
return cacheOptions.value;
|
||||
}
|
||||
|
||||
function setOptions(options: EChartsOption, clear = true) {
|
||||
cacheOptions.value = options;
|
||||
if (unref(elRef)?.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
setOptions(unref(getOptions));
|
||||
}, 30);
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
useTimeoutFn(() => {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
|
||||
if (!chartInstance) return;
|
||||
}
|
||||
clear && chartInstance?.clear();
|
||||
|
||||
chartInstance?.setOption(unref(getOptions));
|
||||
}, 30);
|
||||
});
|
||||
}
|
||||
|
||||
function resize() {
|
||||
chartInstance?.resize();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => getDarkMode.value,
|
||||
(theme) => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
initCharts(theme as 'default');
|
||||
setOptions(cacheOptions.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
if (!chartInstance) return;
|
||||
removeResizeFn();
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
});
|
||||
|
||||
function getInstance(): echarts.ECharts | null {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
}
|
||||
return chartInstance;
|
||||
}
|
||||
|
||||
return {
|
||||
setOptions,
|
||||
resize,
|
||||
echarts,
|
||||
getInstance,
|
||||
backgroundColor: 'transparent',
|
||||
...cacheOptions.value,
|
||||
};
|
||||
});
|
||||
|
||||
function initCharts(t = theme) {
|
||||
const el = unref(elRef);
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
|
||||
chartInstance = echarts.init(el, t);
|
||||
const { removeEvent } = useEventListener({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
listener: resizeFn,
|
||||
});
|
||||
removeResizeFn = removeEvent;
|
||||
const { widthRef, screenEnum } = useBreakpoint();
|
||||
if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
resizeFn();
|
||||
}, 30);
|
||||
}
|
||||
}
|
||||
|
||||
function setOptions(options: EChartsOption, clear = true) {
|
||||
cacheOptions.value = options;
|
||||
if (unref(elRef)?.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
setOptions(unref(getOptions));
|
||||
}, 30);
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
useTimeoutFn(() => {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
|
||||
if (!chartInstance) return;
|
||||
}
|
||||
clear && chartInstance?.clear();
|
||||
|
||||
chartInstance?.setOption(unref(getOptions));
|
||||
}, 30);
|
||||
});
|
||||
}
|
||||
|
||||
function resize() {
|
||||
chartInstance?.resize();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => getDarkMode.value,
|
||||
(theme) => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
initCharts(theme as 'default');
|
||||
setOptions(cacheOptions.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
if (!chartInstance) return;
|
||||
removeResizeFn();
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
});
|
||||
|
||||
function getInstance(): echarts.ECharts | null {
|
||||
if (!chartInstance) {
|
||||
initCharts(getDarkMode.value as 'default');
|
||||
}
|
||||
return chartInstance;
|
||||
}
|
||||
|
||||
return {
|
||||
setOptions,
|
||||
resize,
|
||||
echarts,
|
||||
getInstance,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,52 +1,52 @@
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
export function usePermission() {
|
||||
const userStore = useUserStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
/**
|
||||
* 检查权限
|
||||
* @param accesses
|
||||
*/
|
||||
function _someRoles(accesses: string[]) {
|
||||
return userStore.getRoles.some(item => {
|
||||
const { value }: any = item
|
||||
return accesses.includes(value)
|
||||
})
|
||||
/**
|
||||
* 检查权限
|
||||
* @param accesses
|
||||
*/
|
||||
function _someRoles(accesses: string[]) {
|
||||
return userStore.getRoles.some((item) => {
|
||||
const { value }: any = item;
|
||||
return accesses.includes(value);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否存在权限
|
||||
* 可用于 v-if 显示逻辑
|
||||
* */
|
||||
function hasPermission(accesses: string[]): boolean {
|
||||
if (!accesses || !accesses.length) return true;
|
||||
return _someRoles(accesses);
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否包含指定的所有权限
|
||||
* @param accesses
|
||||
*/
|
||||
function hasEveryPermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles;
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.every((access) => !!rolesList[access]);
|
||||
}
|
||||
throw new Error(`[hasEveryPermission]: ${accesses} should be a array !`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否存在权限
|
||||
* 可用于 v-if 显示逻辑
|
||||
* */
|
||||
function hasPermission(accesses: string[]): boolean {
|
||||
if (!accesses ||!accesses.length) return true
|
||||
return _someRoles(accesses)
|
||||
/**
|
||||
* 是否包含其中某个权限
|
||||
* @param accesses
|
||||
* @param accessMap
|
||||
*/
|
||||
function hasSomePermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles;
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.some((access) => !!rolesList[access]);
|
||||
}
|
||||
throw new Error(`[hasSomePermission]: ${accesses} should be a array !`);
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否包含指定的所有权限
|
||||
* @param accesses
|
||||
*/
|
||||
function hasEveryPermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.every((access) => !!rolesList[access])
|
||||
}
|
||||
throw new Error(`[hasEveryPermission]: ${ accesses } should be a array !`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 是否包含其中某个权限
|
||||
* @param accesses
|
||||
* @param accessMap
|
||||
*/
|
||||
function hasSomePermission(accesses: string[]): boolean {
|
||||
const rolesList = userStore.getRoles
|
||||
if (Array.isArray(accesses)) {
|
||||
return accesses.some((access) => !!rolesList[access])
|
||||
}
|
||||
throw new Error(`[hasSomePermission]: ${ accesses } should be a array !`)
|
||||
}
|
||||
|
||||
return { hasPermission, hasEveryPermission, hasSomePermission };
|
||||
return { hasPermission, hasEveryPermission, hasSomePermission };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user