feat: 实现供水运营专题大屏BI可视化
- 新增OperationDashboard.vue全屏大屏组件 - 添加6个核心KPI指标卡片: 进水总量/出水总量/产销差率/营收额/平均水质/报警次数 - 实现6个ECharts图表: 供水趋势/水质分布/报警统计/管网空间/设备状态/营收分析 - 创建静态HTML版本operation-dashboard.html,使用CDN加载Vue3/ECharts/Element Plus - 更新路由配置,添加/operation路径支持 - 修复nextTick导入问题,优化build脚本 🚧 开发者: bot_dev1 📝 任务: #38 [BI] 运营仪表盘 + 供水专题大屏
This commit is contained in:
+78
@@ -0,0 +1,78 @@
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const svgClassName = "cesium-svgPath-svg";
|
||||
|
||||
/**
|
||||
* A Knockout binding handler that creates a DOM element for a single SVG path.
|
||||
* This binding handler will be registered as cesiumSvgPath.
|
||||
*
|
||||
* <p>
|
||||
* The parameter to this binding is an object with the following properties:
|
||||
* </p>
|
||||
*
|
||||
* <ul>
|
||||
* <li>path: The SVG path as a string.</li>
|
||||
* <li>width: The width of the SVG path with no transformations applied.</li>
|
||||
* <li>height: The height of the SVG path with no transformations applied.</li>
|
||||
* <li>css: Optional. A string containing additional CSS classes to apply to the SVG. 'cesium-svgPath-svg' is always applied.</li>
|
||||
* </ul>
|
||||
*
|
||||
* @namespace SvgPathBindingHandler
|
||||
*
|
||||
* @example
|
||||
* // Create an SVG as a child of a div
|
||||
* <div data-bind="cesiumSvgPath: { path: 'M 100 100 L 300 100 L 200 300 z', width: 28, height: 28 }"></div>
|
||||
*
|
||||
* // parameters can be observable from the view model
|
||||
* <div data-bind="cesiumSvgPath: { path: currentPath, width: currentWidth, height: currentHeight }"></div>
|
||||
*
|
||||
* // or the whole object can be observable from the view model
|
||||
* <div data-bind="cesiumSvgPath: svgPathOptions"></div>
|
||||
*/
|
||||
const SvgPathBindingHandler = {
|
||||
/**
|
||||
* @function
|
||||
*/
|
||||
register: function (knockout) {
|
||||
knockout.bindingHandlers.cesiumSvgPath = {
|
||||
init: function (element, valueAccessor) {
|
||||
const svg = document.createElementNS(svgNS, "svg:svg");
|
||||
svg.setAttribute("class", svgClassName);
|
||||
|
||||
const pathElement = document.createElementNS(svgNS, "path");
|
||||
svg.appendChild(pathElement);
|
||||
|
||||
knockout.virtualElements.setDomNodeChildren(element, [svg]);
|
||||
|
||||
knockout.computed({
|
||||
read: function () {
|
||||
const value = knockout.unwrap(valueAccessor());
|
||||
|
||||
pathElement.setAttribute("d", knockout.unwrap(value.path));
|
||||
|
||||
const pathWidth = knockout.unwrap(value.width);
|
||||
const pathHeight = knockout.unwrap(value.height);
|
||||
|
||||
svg.setAttribute("width", pathWidth);
|
||||
svg.setAttribute("height", pathHeight);
|
||||
svg.setAttribute("viewBox", `0 0 ${pathWidth} ${pathHeight}`);
|
||||
|
||||
if (value.css) {
|
||||
svg.setAttribute(
|
||||
"class",
|
||||
`${svgClassName} ${knockout.unwrap(value.css)}`,
|
||||
);
|
||||
}
|
||||
},
|
||||
disposeWhenNodeIsRemoved: element,
|
||||
});
|
||||
|
||||
return {
|
||||
controlsDescendantBindings: true,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
knockout.virtualElements.allowedBindings.cesiumSvgPath = true;
|
||||
},
|
||||
};
|
||||
export default SvgPathBindingHandler;
|
||||
Reference in New Issue
Block a user