import { computed, ref, watch } from 'vue';
|
import { useDark } from '@vueuse/core';
|
import { useTheme } from '/#/theme';
|
import { useCool } from '/@/cool';
|
import {
|
groupDemoFields
|
} from '../data/screen-field-meta';
|
import {
|
initialScreenData,
|
resolveScreenData,
|
type ScreenDataMode
|
} from '../data/screen-merge';
|
import type { ScreenData, TimeRange } from '../data/screen';
|
|
const sharedTimeRange = ref<TimeRange>('month');
|
const initial = initialScreenData(sharedTimeRange.value);
|
const screenData = ref<ScreenData>(initial.data);
|
const dataMode = ref<ScreenDataMode>(initial.mode);
|
const demoFields = ref<string[]>(initial.demoFields);
|
const liveFields = ref<string[]>(initial.liveFields);
|
const loading = ref(false);
|
const loadError = ref('');
|
/** 驾驶舱是否处于浏览器全屏；萤石播放器在全屏切换后需 remount 才能恢复画面 */
|
const screenFullscreen = ref(false);
|
const playerRemountKey = ref(0);
|
|
export function provideScreenTime() {
|
return sharedTimeRange;
|
}
|
|
export function useScreenTime() {
|
return sharedTimeRange;
|
}
|
|
export function useScreenFullscreen() {
|
function bumpPlayerRemount(delay = 280) {
|
window.setTimeout(() => {
|
playerRemountKey.value += 1;
|
window.dispatchEvent(
|
new CustomEvent('report-screen-fullscreen-change', {
|
detail: { remountKey: playerRemountKey.value }
|
})
|
);
|
}, delay);
|
}
|
|
function setFullscreen(active: boolean) {
|
const changed = screenFullscreen.value !== active;
|
screenFullscreen.value = active;
|
if (changed) {
|
bumpPlayerRemount();
|
}
|
}
|
|
return {
|
isFullscreen: screenFullscreen,
|
playerRemountKey,
|
bumpPlayerRemount,
|
setFullscreen
|
};
|
}
|
|
export function useScreenData() {
|
return {
|
timeRange: sharedTimeRange,
|
data: screenData,
|
dataMode,
|
demoFields,
|
liveFields,
|
loading,
|
loadError,
|
reload: () => loadImpl()
|
};
|
}
|
|
let inited = false;
|
let loadImpl: () => Promise<void> = async () => {};
|
|
function applyResolved(resolved: ReturnType<typeof resolveScreenData>) {
|
screenData.value = resolved.data;
|
dataMode.value = resolved.mode;
|
demoFields.value = resolved.demoFields;
|
liveFields.value = resolved.liveFields;
|
}
|
|
export function useScreenLoader() {
|
const { service } = useCool();
|
|
async function load() {
|
loading.value = true;
|
loadError.value = '';
|
try {
|
const payload = { range: sharedTimeRange.value };
|
const screen = service.report?.screen;
|
const res: ScreenData = screen?.query
|
? await screen.query(payload)
|
: await service.request({
|
url: 'admin/report/screen/query',
|
method: 'POST',
|
data: payload
|
});
|
applyResolved(resolveScreenData(res, sharedTimeRange.value));
|
} catch (e: any) {
|
applyResolved(resolveScreenData(null, sharedTimeRange.value));
|
const msg = e?.message || '';
|
if (!/登录失效|无权限/.test(msg)) {
|
loadError.value = msg || '驾驶舱接口调用失败';
|
}
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
loadImpl = load;
|
|
if (!inited) {
|
inited = true;
|
watch(sharedTimeRange, () => load());
|
}
|
|
load();
|
|
return { load, loading, loadError, dataMode };
|
}
|
|
/** 首页只展示接口汇总结果，不再用演示数据填充 */
|
export function useScreenFieldSource() {
|
const { dataMode, demoFields } = useScreenData();
|
|
const demoSections = computed(() => groupDemoFields(demoFields.value));
|
|
function demoSection(_section: string) {
|
return false;
|
}
|
|
function demoField(_field: string) {
|
return false;
|
}
|
|
return {
|
dataMode,
|
demoSections,
|
isDemoSection: demoSection,
|
isDemoField: demoField
|
};
|
}
|
|
export function useChartTheme() {
|
const isDark = useDark();
|
const theme = useTheme();
|
|
const textColor = computed(() => (isDark.value ? '#e5e7eb' : '#334155'));
|
const mutedColor = computed(() => (isDark.value ? '#94a3b8' : '#64748b'));
|
const splitColor = computed(() => (isDark.value ? '#334155' : '#e2e8f0'));
|
const tooltipBg = computed(() => (isDark.value ? '#0f172a' : '#ffffff'));
|
const primary = computed(() => theme.color || '#16a34a');
|
|
function baseGrid() {
|
return { containLabel: true, left: 12, right: 16, top: 28, bottom: 8 };
|
}
|
|
function axisStyle() {
|
return {
|
axisLine: { show: false },
|
axisTick: { show: false },
|
splitLine: { show: false },
|
axisLabel: { color: mutedColor.value }
|
};
|
}
|
|
function tooltip() {
|
return {
|
backgroundColor: tooltipBg.value,
|
borderColor: splitColor.value,
|
textStyle: { color: textColor.value }
|
};
|
}
|
|
return {
|
isDark,
|
textColor,
|
mutedColor,
|
splitColor,
|
tooltipBg,
|
primary,
|
baseGrid,
|
axisStyle,
|
tooltip
|
};
|
}
|
