- 新增OperationDashboard.vue全屏大屏组件 - 添加6个核心KPI指标卡片: 进水总量/出水总量/产销差率/营收额/平均水质/报警次数 - 实现6个ECharts图表: 供水趋势/水质分布/报警统计/管网空间/设备状态/营收分析 - 创建静态HTML版本operation-dashboard.html,使用CDN加载Vue3/ECharts/Element Plus - 更新路由配置,添加/operation路径支持 - 修复nextTick导入问题,优化build脚本 🚧 开发者: bot_dev1 📝 任务: #38 [BI] 运营仪表盘 + 供水专题大屏
77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import { isClient as isClient$1 } from "../../utils/browser.mjs";
|
|
import { keysOf } from "../../utils/objects.mjs";
|
|
import { buildProps } from "../../utils/vue/props/runtime.mjs";
|
|
import { unrefElement } from "@vueuse/core";
|
|
import { isNil } from "lodash-unified";
|
|
import { isRef, onMounted, ref, unref, watchEffect } from "vue";
|
|
import { arrow, computePosition } from "@floating-ui/dom";
|
|
//#region ../../packages/hooks/use-floating/index.ts
|
|
const useFloatingProps = buildProps({});
|
|
const unrefReference = (elRef) => {
|
|
if (!isClient$1) return;
|
|
if (!elRef) return elRef;
|
|
const unrefEl = unrefElement(elRef);
|
|
if (unrefEl) return unrefEl;
|
|
return isRef(elRef) ? unrefEl : elRef;
|
|
};
|
|
const getPositionDataWithUnit = (record, key) => {
|
|
const value = record?.[key];
|
|
return isNil(value) ? "" : `${value}px`;
|
|
};
|
|
const useFloating = ({ middleware, placement, strategy }) => {
|
|
const referenceRef = ref();
|
|
const contentRef = ref();
|
|
const states = {
|
|
x: ref(),
|
|
y: ref(),
|
|
placement,
|
|
strategy,
|
|
middlewareData: ref({})
|
|
};
|
|
const update = async () => {
|
|
if (!isClient$1) return;
|
|
const referenceEl = unrefReference(referenceRef);
|
|
const contentEl = unrefElement(contentRef);
|
|
if (!referenceEl || !contentEl) return;
|
|
const data = await computePosition(referenceEl, contentEl, {
|
|
placement: unref(placement),
|
|
strategy: unref(strategy),
|
|
middleware: unref(middleware)
|
|
});
|
|
keysOf(states).forEach((key) => {
|
|
states[key].value = data[key];
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
watchEffect(() => {
|
|
update();
|
|
});
|
|
});
|
|
return {
|
|
...states,
|
|
update,
|
|
referenceRef,
|
|
contentRef
|
|
};
|
|
};
|
|
const arrowMiddleware = ({ arrowRef, padding }) => {
|
|
return {
|
|
name: "arrow",
|
|
options: {
|
|
element: arrowRef,
|
|
padding
|
|
},
|
|
fn(args) {
|
|
const arrowEl = unref(arrowRef);
|
|
if (!arrowEl) return {};
|
|
return arrow({
|
|
element: arrowEl,
|
|
padding
|
|
}).fn(args);
|
|
}
|
|
};
|
|
};
|
|
//#endregion
|
|
export { arrowMiddleware, getPositionDataWithUnit, useFloating, useFloatingProps };
|
|
|
|
//# sourceMappingURL=index.mjs.map
|